fix(hub): show what's actually playing in the queue panel

The panel's header said "Playing now" but only the panel itself was named
that — the current track was just a highlighted row you had to spot in
the list, easy to miss on a long queue and often scrolled out of view
entirely on open. Now shows the track's own title/artist right under the
header and scrolls the highlighted row into view when the panel opens.

2 files changed, 35 insertions, 0 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-player.js b/packages/meshbay-hub/src/meshbay_hub/static/music-player.js
index b75d73c..7a3978c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/music-player.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/music-player.js
@@ -99,7 +99,22 @@ function saveRepeat(v) {
 // switching tabs or hunting for the album/folder it came from. Works the
 // same regardless of how the queue was built (an album, a consolidated
 // misc/loose bucket, a single standalone track).
+//
+// The header alone ("Playing now") named the *panel*, not the track — on a
+// long queue the highlighted row can be scrolled out of view entirely, so
+// opening this told you nothing you didn't already know. It now shows the
+// current track's own title/artist right under the header, and scrolls the
+// highlighted row into view on open rather than leaving it to be found.
 function QueuePanel({ tracks, order, pos, onSelect, onClose }) {
+  const activeRowRef = useRef(null);
+  useEffect(() => {
+    if (activeRowRef.current) {
+      activeRowRef.current.scrollIntoView({ block: 'center' });
+    }
+  }, []);
+
+  const current = tracks[order[pos]];
+
   return html`
     <div class="video-overlay" onClick=${(e) => {
       if (e.target.classList.contains('video-overlay')) onClose();
@@ -110,10 +125,19 @@ function QueuePanel({ tracks, order, pos, onSelect, onClose }) {
           <button class="video-close" onClick=${onClose} title=${t('video.close')}>
             <${Icon} name="close" /></button>
         </div>
+        ${current && html`
+          <div class="music-queue-now-playing">
+            <span class="music-queue-now-playing-title">
+              ${current.display_title || current.name}</span>
+            ${current.artist && html`
+              <span class="music-queue-now-playing-artist"> — ${current.artist}</span>`}
+          </div>
+        `}
         <div class="music-detail-body">
           <div class="music-tracklist">
             ${order.map((idx, i) => html`
               <button class="music-track-row ${i === pos ? 'active' : ''}" key=${tracks[idx].id}
+                ref=${i === pos ? activeRowRef : null}
                 onClick=${() => { onSelect(i); onClose(); }}>
                 <span class="music-track-no">${i + 1}</span>
                 <span class="music-track-title">${tracks[idx].display_title || tracks[idx].name}</span>
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 59ec919..42cfcf9 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -2778,6 +2778,17 @@ a.transfer-name {
 .music-detail .video-close { background: var(--bg-surface); color: var(--text); }
 .music-detail .video-close:hover { background: var(--border); }
 
+.music-queue-now-playing {
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border);
+  font-size: 0.9em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.music-queue-now-playing-title { font-weight: 600; color: var(--accent); }
+.music-queue-now-playing-artist { color: var(--text-dim); }
+
 .music-detail-body { padding: 16px 20px; overflow-y: auto; }
 .music-detail-header {
   display: flex;