Add persistent mini now-playing bar

Fixed bar at bottom of window when video is playing. Shows title,
channel, progress, play/pause toggle. Click to restore player view.

Files:
- frontend/index.html: mini-bar markup
- frontend/app.js: showMiniBar/hideMiniBar/updateMiniBar, wiring
- frontend/styles.css: .mini-bar, .mini-bar-inner, .mini-progress styles

BACKLOG.md

@@ -25,7 +25,7 @@ bottom as they come up.
 ## Features
 - [x] Drag-to-reorder videos within a playlist.
 - [x] "Up next" queue panel showing the autoplay queue.
-- [ ] Persistent mini now-playing bar when browsing other views.
+- [x] Persistent mini now-playing bar when browsing other views.
 - [ ] Cache size cap in Settings (auto-evict oldest past a limit).
 - [ ] Export / import playlists as JSON.
 - [ ] More / trending quick-search chips on the hero, rotated.

frontend/app.js

@@ -263,6 +263,7 @@ const Player = {
     els.npChannel.textContent = current.meta.channel || '';
     updateNowPlayingActions();
     markPlayingCard();
+    showMiniBar();
     // Restore saved playback position
     const id = current.meta.id;
     if (data.resumePositions[id] && data.resumePositions[id] > 1) {
@@ -526,6 +527,7 @@ function wirePlayerEvents() {
 
 function updatePlayBtn() {
   els.playBtn.textContent = Player.master.paused ? '▶' : '⏸';
+  $('miniPlayBtn').textContent = Player.master.paused ? '▶' : '⏸';
 }
 // Reflect cache state on the now-playing Save button.
 function updateNowPlayingActions() {
@@ -555,6 +557,30 @@ function updateProgress() {
   els.curTime.textContent = fmtTime(cur);
   els.durTime.textContent = fmtTime(dur);
   if (dur) els.seek.value = String((cur / dur) * 1000);
+  updateMiniBar();
+}
+
+// ============================================================================
+// Mini now-playing bar
+// ============================================================================
+function showMiniBar() {
+  if (!current || !current.meta) return;
+  $('miniTitle').textContent = current.meta.title;
+  $('miniChannel').textContent = current.meta.channel || '';
+  $('miniBar').classList.remove('hidden');
+  updateMiniBar();
+}
+function updateMiniBar() {
+  if (!current || !current.meta) return;
+  const cur = Player.master.currentTime || 0;
+  const dur = Player.master.duration || 0;
+  $('miniTime').textContent = fmtTime(cur);
+  if (dur > 0) {
+    $('miniProgressFill').style.width = Math.min(100, (cur / dur) * 100) + '%';
+  }
+}
+function hideMiniBar() {
+  $('miniBar').classList.add('hidden');
 }
 
 // ============================================================================
@@ -1236,6 +1262,15 @@ function wireUI() {
 
   $('modal').addEventListener('click', (e) => { if (e.target.id === 'modal') closeModal(); });
 
+  // Mini now-playing bar
+  $('miniPlayBtn').addEventListener('click', (e) => { e.stopPropagation(); Player.toggle(); });
+  $('miniBar').addEventListener('click', () => {
+    hideMiniBar();
+    // Scroll the player into view if needed
+    els.playerPane.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  });
+  $('miniCloseBtn').addEventListener('click', (e) => { e.stopPropagation(); hideMiniBar(); });
+
   // Drag-to-reorder: prevent default on cards container
   els.cards.addEventListener('dragover', (e) => {
     if (view.type === 'playlist') e.preventDefault();

frontend/index.html

@@ -173,6 +173,20 @@
 
     <div id="toastContainer" class="toast-container"></div>
 
+    <!-- Mini now-playing bar -->
+    <div id="miniBar" class="mini-bar hidden">
+      <div class="mini-bar-inner">
+        <button id="miniPlayBtn" class="mini-btn">▶</button>
+        <div class="mini-info">
+          <div id="miniTitle" class="mini-title"></div>
+          <div id="miniChannel" class="mini-channel"></div>
+        </div>
+        <span id="miniTime" class="mini-time">0:00</span>
+        <button id="miniCloseBtn" class="mini-btn mini-close">✕</button>
+      </div>
+      <div id="miniProgress" class="mini-progress"><div id="miniProgressFill" class="mini-progress-fill"></div></div>
+    </div>
+
     <!-- Keyboard shortcuts help overlay -->
     <div id="shortcutHelp" class="shortcut-overlay hidden">
       <div class="shortcut-panel">

frontend/styles.css

@@ -1087,6 +1087,75 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
 
 .hidden { display: none !important; }
 
+/* ===================== Mini now-playing bar ===================== */
+.mini-bar {
+  position: fixed; bottom: 0; left: 0; right: 0;
+  z-index: 300;
+  cursor: pointer;
+  animation: miniBarIn 0.25s var(--ease);
+}
+@keyframes miniBarIn {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+.mini-bar-inner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
+  border-top: 1px solid var(--line);
+  backdrop-filter: blur(8px);
+}
+.mini-btn {
+  background: var(--bg-3);
+  border: 1px solid var(--line);
+  color: var(--text);
+  width: 34px; height: 34px;
+  border-radius: 9px;
+  cursor: pointer;
+  font-size: 14px;
+  display: grid; place-items: center;
+  flex-shrink: 0;
+  transition: all 0.16s;
+}
+.mini-btn:hover { border-color: var(--accent); color: var(--accent-bright); }
+.mini-close {
+  width: 28px; height: 28px;
+  font-size: 12px;
+  color: var(--text-dim);
+}
+.mini-close:hover { color: var(--text); border-color: var(--text-dim); }
+.mini-info {
+  min-width: 0; flex: 1;
+  display: flex; flex-direction: column;
+  gap: 2px;
+}
+.mini-title {
+  font-size: 13px; font-weight: 600;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mini-channel {
+  font-size: 11px; color: var(--text-dim);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.mini-time {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-2);
+  flex-shrink: 0;
+}
+.mini-progress {
+  height: 3px;
+  background: var(--bg-3);
+}
+.mini-progress-fill {
+  height: 100%;
+  width: 0%;
+  background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
+  transition: width 1s linear;
+}
+
 @media (max-width: 1080px) {
   .body { flex-direction: column; }
   .list-pane { width: auto; border-left: none; border-top: 1px solid var(--line-soft); }