Redesign playlist header, player deck, now-playing actions and lyrics panel layout

frontend/app.js

@@ -7209,9 +7209,11 @@ function renderList() {
     if (pl) {
       const playAll = document.createElement('button');
       playAll.textContent = '▶ Play all';
+      playAll.className = 'la-primary';
       playAll.onclick = () => { if (pl.videos.length) playFromList(pl.videos, 0, 'playlist:' + pl.id); };
       const playFull = document.createElement('button');
       playFull.textContent = '▶ Play in full';
+      playFull.className = 'la-main';
       playFull.title = 'Play every video start to finish — ignores saved positions and A-B loops, stops after the last one';
       playFull.onclick = () => {
         if (!pl.videos.length) return;
@@ -7220,6 +7222,7 @@ function renderList() {
       };
       const serviceBtn = document.createElement('button');
       serviceBtn.textContent = '🎤 Service mode';
+      serviceBtn.className = 'la-main';
       serviceBtn.title = 'Set-list view with screen wake lock';
       serviceBtn.onclick = () => {
         if (!pl.videos || !pl.videos.length) { toast('Playlist is empty'); return; }
@@ -7227,6 +7230,7 @@ function renderList() {
       };
       const queueAll = document.createElement('button');
       queueAll.textContent = '＋ Queue';
+      queueAll.className = 'la-main';
       queueAll.onclick = () => { pl.videos.forEach((v) => addToQueue(v, { quiet: true })); toast('Added playlist to queue'); };
       const rename = document.createElement('button');
       rename.textContent = 'Rename';

frontend/index.html

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="fonts/fonts.css" />
     <link rel="stylesheet" href="styles.css" />
     <link rel="stylesheet" href="service-ui.css" />
+    <link rel="stylesheet" href="refresh.css" />
   </head>
   <body>
     <div class="app">
@@ -169,24 +170,28 @@
                 <span id="durTime" class="time">0:00</span>
               </div>
               <button id="waveLoud" class="wave-loud hidden" type="button">⚡ Jump to the loudest part</button>
-              <div class="btn-row">
+              <div class="deck-main">
-                <button id="prevBtn" class="ctrl" title="Previous">⏮</button>
+                <button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)" aria-label="Shuffle">🔀</button>
-                <button id="playBtn" class="ctrl play" title="Play/Pause">▶</button>
+                <button id="prevBtn" class="ctrl" title="Previous" aria-label="Previous">⏮</button>
-                <button id="nextBtn" class="ctrl" title="Next">⏭</button>
+                <button id="playBtn" class="ctrl play" title="Play/Pause" aria-label="Play or pause">▶</button>
-
+                <button id="nextBtn" class="ctrl" title="Next" aria-label="Next">⏭</button>
+                <button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)" aria-label="Repeat list">🔁</button>
+              </div>
+              <div class="deck-vol vol">
+                <button id="muteBtn" class="ctrl" title="Mute" aria-label="Mute">🔊</button>
+                <input id="volume" type="range" min="0" max="1" step="0.01" value="1" aria-label="Volume" />
+              </div>
+              <div class="deck-groups">
+                <div class="dk-group">
+                  <div class="dk-title">Practice</div>
+                  <div class="dk-tiles">
                     <button id="abABtn" class="ctrl ab-ctrl" title="Set A-B loop start [A]">A</button>
                     <button id="abBBtn" class="ctrl ab-ctrl" title="Set A-B loop end [B]">B</button>
                     <button id="abClearBtn" class="ctrl ab-ctrl hidden" title="Clear A-B loop">↺</button>
                     <button id="rememberPosBtn" class="ctrl" title="Remember playback position for this song (per playlist)">📍</button>
-                <div class="vol">
+                    <button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
-                  <button id="muteBtn" class="ctrl" title="Mute">🔊</button>
+                    <label class="sel dk-sel">
-                  <input id="volume" type="range" min="0" max="1" step="0.01" value="1" />
+                      <span>Speed</span>
-                </div>
-
-                <div class="spacer"></div>
-
-                <label class="sel">
-                  Speed
                       <select id="speedSelect">
                         <option value="0.5">0.5×</option>
                         <option value="0.75">0.75×</option>
@@ -196,20 +201,22 @@
                         <option value="2">2×</option>
                       </select>
                     </label>
-
+                  </div>
-                <label class="sel">
+                </div>
-                  Quality
+                <div class="dk-group">
-                  <select id="qualitySelect"></select>
+                  <div class="dk-title">Sound &amp; view</div>
-                </label>
+                  <div class="dk-tiles">
-
                     <button id="sleepTimerBtn" class="ctrl" title="Sleep timer">⏱</button>
-                <button id="shuffleBtn" class="ctrl" title="Shuffle upcoming tracks (S)">🔀</button>
-                <button id="loopBtn" class="ctrl" title="Loop current video (L)">🔂</button>
-                <button id="repeatBtn" class="ctrl" title="Repeat list when finished (R)">🔁</button>
                     <button id="transitionBtn" class="ctrl" title="Between songs in a playlist: Normal — click to change">↦</button>
                     <button id="eqBtn" class="ctrl" title="Equalizer (E)">🎚</button>
                     <button id="pipBtn" class="ctrl hidden" title="Picture-in-picture (I)">⧉</button>
                     <button id="fsBtn" class="ctrl" title="Fullscreen">⛶</button>
+                    <label class="sel dk-sel">
+                      <span>Quality</span>
+                      <select id="qualitySelect"></select>
+                    </label>
+                  </div>
+                </div>
               </div>
             </div>
 

frontend/refresh.css

@@ -0,0 +1,299 @@
+/* ============================================================================
+ * Layout refresh: playlist header, player deck, now-playing actions, lyrics panel
+ *
+ * Loaded after styles.css. Uses #id-prefixed selectors so it wins over the
+ * older per-breakpoint rules without needing !important. The theme tokens
+ * (--bg-*, --accent*, --line, --text*) are reused so light / contrast themes
+ * keep working.
+ * ========================================================================== */
+
+/* ---- 1. Playlist / list header: title on top, ONE primary action, tidy rest --- */
+.list-header {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 14px;
+}
+.list-header h2 {
+  font-size: clamp(26px, 6.4vw, 34px);
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  overflow-wrap: anywhere;
+}
+#listActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 8px;
+}
+#listActions button {
+  flex: 0 0 auto;
+  height: 36px;
+  padding: 0 14px;
+  border-radius: 999px;
+  font-size: 13px;
+  white-space: nowrap;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+#listActions button.la-primary {
+  flex: 1 1 100%;
+  height: 54px;
+  border: 0;
+  border-radius: 18px;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  justify-content: center;
+  color: #fff;
+  background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
+  box-shadow: 0 16px 30px -14px var(--accent-glow);
+}
+#listActions button.la-primary:hover { color: #fff; filter: brightness(1.08); }
+#listActions button.la-main {
+  flex: 1 1 calc(33.3% - 8px);
+  min-width: 0;
+  height: 46px;
+  border-radius: 14px;
+  justify-content: center;
+  color: var(--text);
+  background: var(--bg-3);
+  overflow: hidden; text-overflow: ellipsis;
+}
+/* Secondary actions sit on a quiet second line, visually below the main three. */
+#listActions button.la-main + button:not(.la-main) { margin-left: 0; }
+#listActions button:not(.la-primary):not(.la-main) {
+  background: transparent;
+  color: var(--text-dim);
+  font-weight: 600;
+}
+#listActions button:not(.la-primary):not(.la-main):hover { color: var(--text); background: var(--bg-2); }
+#listActions button.pinned { color: var(--accent-bright); border-color: var(--accent); background: transparent; }
+#listActions button.la-main { padding: 0 6px; font-size: 13px; }
+@media (min-width: 900px) {
+  #listActions button.la-primary { flex: 0 0 auto; height: 44px; padding: 0 26px; border-radius: 14px; }
+  #listActions button.la-main { flex: 0 0 auto; height: 44px; padding: 0 18px; }
+}
+
+/* ---- 2. Player deck ------------------------------------------------------- */
+#controls {
+  padding: 18px 16px 16px;
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+#controls .seek-row { gap: 10px; }
+#controls .time { min-width: 40px; font-size: 12px; color: var(--text-dim); }
+
+#controls .deck-main {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1.5fr 1fr 1fr;
+  align-items: center;
+  justify-items: center;
+  gap: 4px;
+  margin: 2px 0 0;
+}
+#controls .deck-main .ctrl {
+  width: 48px; height: 48px; min-width: 0;
+  border-radius: 50%;
+  border-color: transparent;
+  background: transparent;
+  font-size: 19px;
+}
+#controls .deck-main .ctrl:hover { background: var(--bg-3); }
+#controls .deck-main .ctrl.active { color: var(--accent-bright); background: color-mix(in srgb, var(--accent) 16%, transparent); }
+#controls .deck-main .ctrl.play {
+  width: 74px; height: 74px;
+  font-size: 26px;
+  background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep));
+  box-shadow: 0 18px 34px -12px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+
+#controls .deck-vol {
+  display: flex; align-items: center; gap: 10px;
+  padding: 0 4px;
+}
+#controls .deck-vol .ctrl { width: 38px; height: 38px; min-width: 0; border-radius: 50%; background: transparent; border-color: transparent; font-size: 17px; }
+#controls .deck-vol input[type="range"] { flex: 1; width: auto; min-width: 0; }
+
+#controls .deck-groups {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+#controls .dk-group {
+  min-width: 0;
+  padding: 10px 10px 10px;
+  border-radius: 18px;
+  background: color-mix(in srgb, var(--bg) 55%, transparent);
+  border: 1px solid var(--line-soft, var(--line));
+}
+#controls .dk-title {
+  margin: 0 2px 8px;
+  font: 700 10px/1 var(--mono);
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+#controls .dk-tiles {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+#controls .dk-tiles .ctrl {
+  width: 100%; min-width: 0; height: 44px;
+  border-radius: 13px;
+  font-size: 16px;
+}
+#controls .dk-tiles .ctrl.hidden { display: none; }
+#controls .dk-sel {
+  grid-column: span 3;
+  display: flex; align-items: center; justify-content: space-between; gap: 8px;
+  height: 40px; padding: 0 4px 0 10px;
+  border-radius: 13px;
+  background: var(--bg-3);
+  border: 1px solid var(--line);
+}
+#controls .dk-sel select {
+  flex: 1; min-width: 0;
+  height: 34px;
+  border: 0; background: transparent;
+  text-align: right; text-align-last: right;
+  font-size: 14px; font-weight: 700;
+  padding: 0 4px;
+}
+@media (max-width: 480px) {
+  #controls .deck-groups { grid-template-columns: 1fr; }
+  #controls .dk-tiles { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
+  #controls .dk-sel { grid-column: 1 / -1; }
+  #controls .deck-main .ctrl { width: 44px; height: 44px; }
+  #controls .deck-main .ctrl.play { width: 70px; height: 70px; }
+}
+
+/* ---- 3. Now playing: name first, actions as clear tiles, extras as chips ---- */
+#nowPlayingMeta {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 14px;
+  margin-top: 22px;
+}
+#nowPlayingMeta .np-title {
+  font-size: clamp(22px, 5.6vw, 28px);
+  line-height: 1.15;
+  letter-spacing: -0.025em;
+}
+#nowPlayingMeta .np-channel { margin-top: 4px; }
+#nowPlayingMeta .np-actions {
+  display: flex; flex-wrap: wrap; gap: 8px;
+  max-width: none;
+}
+#nowPlayingMeta .np-actions .np-btn {
+  flex: 0 0 auto;
+  height: 38px; padding: 0 14px;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-2);
+  font-size: 13px;
+  display: inline-flex; align-items: center; gap: 6px;
+}
+/* The three everyday actions are big equal tiles on their own line. */
+#nowPlayingMeta .np-actions #queueBtn,
+#nowPlayingMeta .np-actions #saveBtn,
+#nowPlayingMeta .np-actions #addPlaylistBtn {
+  order: -1;
+  flex: 1 1 calc(33.3% - 8px);
+  height: 52px;
+  justify-content: center;
+  border-radius: 16px;
+  color: var(--text);
+  background: var(--bg-3);
+  font-weight: 700;
+}
+#nowPlayingMeta .np-actions #saveBtn.done {
+  color: #7ee0a8;
+  background: rgba(126, 224, 168, 0.1);
+}
+#nowPlayingMeta .np-actions #brokenBtn { color: var(--text-dim); }
+
+/* ---- 4. Lyrics panel ------------------------------------------------------- */
+.notes-panel { border-radius: 24px; }
+.notes-tabs {
+  gap: 6px;
+  padding: 10px 12px;
+  border-bottom: 0;
+}
+.notes-tab {
+  border: 0;
+  border-radius: 999px;
+  padding: 9px 14px;
+  letter-spacing: 0.1em;
+  background: transparent;
+}
+.notes-tab.active {
+  color: #fff;
+  background: color-mix(in srgb, var(--accent) 30%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
+}
+.notes-pane { padding: 4px 14px 16px; }
+
+#lyricsPane .lyrics-toolbar {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 14px;
+}
+#lyricsPane .lyrics-toolbar .np-btn {
+  height: 42px; padding: 0 8px;
+  border-radius: 13px;
+  justify-content: center;
+  font-size: 13px;
+  background: var(--bg-3);
+  color: var(--text);
+  display: inline-flex; align-items: center; gap: 6px;
+}
+#lyricsPane .lyrics-toolbar .notes-spacer { display: none; }
+#lyricsPane .lyrics-toolbar .lyr-offset {
+  grid-column: 1 / 3;
+  height: 42px;
+  justify-content: space-between;
+  border-radius: 13px; padding: 3px;
+}
+#lyricsPane .lyr-off-btn { flex: none; height: 34px; padding: 0 12px; font-size: 12px; background: var(--bg-3); }
+#lyricsPane .lyr-off-val { flex: 1; font-size: 13px; }
+#lyricsPane .lyr-auto {
+  grid-column: 3;
+  height: 42px; justify-content: center;
+  border-radius: 13px; border: 1px solid var(--line);
+  font-size: 12px; font-weight: 600;
+}
+.lyr-auto input { accent-color: var(--accent); width: 16px; height: 16px; }
+
+.lyrics-list { padding-top: 6px; }
+.lyr-line {
+  padding: 10px 12px;
+  border-radius: 14px;
+  gap: 14px;
+  align-items: center;
+}
+.lyr-time {
+  width: auto; min-width: 34px;
+  padding: 3px 7px;
+  border-radius: 8px;
+  background: var(--bg-1);
+  text-align: center;
+}
+.lyr-text { font-size: 16px; line-height: 1.4; }
+.lyr-line.active {
+  background: color-mix(in srgb, var(--accent) 14%, var(--bg-3));
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+.lyr-line.active .lyr-text { font-size: 18px; }
+.lyr-section { margin: 20px 0 6px 12px; }
+
+@media (max-width: 380px) {
+  #lyricsPane .lyrics-toolbar .np-btn { font-size: 12px; }
+  .notes-tab { padding: 8px 10px; letter-spacing: 0.06em; }
+}
+
+/* Cards in the player column never shrink below their content. */
+#controls, #nowPlayingMeta, #notesPanel { flex-shrink: 0; }
+#lyricsPane .lyr-auto { font-size: 11.5px; gap: 5px; padding: 0 4px; white-space: nowrap; }

frontend/sw.js

@@ -57,6 +57,7 @@ const SHELL = [
   '/index.html',
   '/styles.css',
   '/service-ui.css',
+  '/refresh.css',
   '/flag-ui.js',
   '/async-guard.js',
   '/sw-update.js',