feat: fix portrait mode design in pwa — YouTube-style bottom bar

Task #46 completed by ClaudeQueue ClaudeQueue
2026-06-30 17:02:25 +00:00
parent fc61defba5
commit d9371fdea4
3 changed files with 159 additions and 16 deletions
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -367,11 +367,12 @@ async function preload(video, { quiet = false } = {}) {

 // Sidebar badge showing how many downloads are in flight.
 function updateDownloadBadge() {
-  const badge = $('navDlCount');
-  if (!badge) return;
  const n = downloading.size;
-  badge.textContent = String(n);
-  badge.classList.toggle('hidden', n === 0);
+  const badge = $('navDlCount');
+  if (badge) { badge.textContent = String(n); badge.classList.toggle('hidden', n === 0); }
+  // Mirror to bottom-nav badge
+  const bb = $('bnDlCount');
+  if (bb) { bb.textContent = String(n); bb.classList.toggle('hidden', n === 0); }
 }

 // Auto-preload every video in a playlist (respecting the setting).
@@ -859,10 +860,12 @@ function playFromList(list, index, source = '') {

 // ---------- Temporary queue ----------
 function updateQueueBadge() {
+  const count = data.queue.length;
  const b = $('navQueueCount');
-  if (!b) return;
-  b.textContent = String(data.queue.length);
-  b.classList.toggle('hidden', data.queue.length === 0);
+  if (b) { b.textContent = String(count); b.classList.toggle('hidden', count === 0); }
+  // Mirror to bottom-nav badge
+  const bb = $('bnQueueCount');
+  if (bb) { bb.textContent = String(count); bb.classList.toggle('hidden', count === 0); }
 }
 function addToQueue(video, { quiet = false } = {}) {
  if (!video || !video.id) return;
@@ -1023,6 +1026,10 @@ function renderSidebar() {
  document.querySelectorAll('.nav-item').forEach((b) => {
    b.classList.toggle('active', b.dataset.view === view.type);
  });
+  // Keep bottom-nav in sync with sidebar nav active state
+  document.querySelectorAll('.bottom-nav-btn').forEach((b) => {
+    b.classList.toggle('active', b.dataset.view === view.type);
+  });
  updateQueueBadge();
  updateDownloadBadge();
 }
@@ -2083,6 +2090,11 @@ function wireUI() {
    b.addEventListener('click', () => { view = { type: b.dataset.view }; render(); });
  });

+  // Bottom-nav (portrait PWA) — same view switching as sidebar nav
+  document.querySelectorAll('.bottom-nav-btn').forEach((b) => {
+    b.addEventListener('click', () => { view = { type: b.dataset.view }; render(); });
+  });
+
  els.newPlaylistBtn.addEventListener('click', () => newPlaylist(null));

 // Landing-hero quick-search chips — rotate periodically
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -250,6 +250,36 @@
      <div id="miniProgress" class="mini-progress"><div id="miniProgressFill" class="mini-progress-fill"></div></div>
    </div>

+    <!-- YouTube-style bottom navigation bar (portrait PWA mode only) -->
+    <nav id="bottomNav" class="bottom-nav" aria-label="Main navigation">
+      <button class="bottom-nav-btn active" data-view="search" aria-label="Search">
+        <span class="bottom-nav-icon">🔍</span>
+        <span class="bottom-nav-label">Search</span>
+      </button>
+      <button class="bottom-nav-btn" data-view="queue" aria-label="Queue">
+        <span class="bottom-nav-icon">▶</span>
+        <span class="bottom-nav-label">Queue</span>
+        <span id="bnQueueCount" class="bottom-nav-badge hidden">0</span>
+      </button>
+      <button class="bottom-nav-btn" data-view="history" aria-label="History">
+        <span class="bottom-nav-icon">🕘</span>
+        <span class="bottom-nav-label">History</span>
+      </button>
+      <button class="bottom-nav-btn" data-view="saved" aria-label="Saved">
+        <span class="bottom-nav-icon">💾</span>
+        <span class="bottom-nav-label">Saved</span>
+      </button>
+      <button class="bottom-nav-btn" data-view="downloads" aria-label="Downloads">
+        <span class="bottom-nav-icon">⬇</span>
+        <span class="bottom-nav-label">Downloads</span>
+        <span id="bnDlCount" class="bottom-nav-badge hidden">0</span>
+      </button>
+      <button class="bottom-nav-btn" data-view="settings" aria-label="Settings">
+        <span class="bottom-nav-icon">⚙</span>
+        <span class="bottom-nav-label">More</span>
+      </button>
+    </nav>
+
    <!-- Keyboard shortcuts help overlay -->
    <div id="shortcutHelp" class="shortcut-overlay hidden">
      <div class="shortcut-panel">
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -1139,6 +1139,95 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }

 .hidden { display: none !important; }

+/* ============================================================================
+ * Bottom Navigation Bar — YouTube-style, portrait PWA mode only
+ * Hidden by default; made visible inside the portrait-PWA media query.
+ * ========================================================================== */
+.bottom-nav {
+  display: none; /* hidden on desktop and non-portrait modes */
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 310; /* above mini-bar (300) so it's always accessible */
+  flex-direction: row;
+  align-items: stretch;
+  background: linear-gradient(180deg, var(--bg-1), var(--bg));
+  border-top: 1px solid var(--line);
+  padding-bottom: env(safe-area-inset-bottom);
+  backdrop-filter: blur(12px) saturate(1.4);
+  -webkit-backdrop-filter: blur(12px) saturate(1.4);
+}
+
+.bottom-nav-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  padding: 8px 4px 6px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  transition: color 0.16s var(--ease);
+  min-width: 0;
+}
+
+.bottom-nav-btn:active {
+  background: var(--bg-2);
+}
+
+.bottom-nav-btn.active {
+  color: var(--accent-bright);
+}
+
+.bottom-nav-btn.active .bottom-nav-icon {
+  /* Subtle scale pop on active */
+  transform: scale(1.12);
+}
+
+.bottom-nav-icon {
+  font-size: 20px;
+  line-height: 1;
+  display: block;
+  transition: transform 0.18s var(--ease);
+}
+
+.bottom-nav-label {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.bottom-nav-badge {
+  position: absolute;
+  top: 6px;
+  left: 50%;
+  margin-left: 6px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 8px;
+  display: grid;
+  place-items: center;
+  line-height: 1;
+  pointer-events: none;
+}
+
+.bottom-nav-badge.hidden { display: none; }
+
 /* ===================== Mini now-playing bar ===================== */
 .mini-bar {
  position: fixed; bottom: 0; left: 0; right: 0;
@@ -1611,9 +1700,17 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
    /* Stack children: topbar → body → mini-bar (all in .main) */
  }

-  /* --- Sidebar: always off-canvas drawer (never occupies grid column) ---- */
+  /* --- Bottom nav: shown in portrait PWA, hidden everywhere else ---------- */
+  .bottom-nav {
+    display: flex;
+  }
+
+  /* --- Sidebar toggle: visible in portrait for playlist/drawer access ---- */
+  /* Primary navigation is now the bottom bar; the hamburger gives access
+     to playlists and auto-playlists which are not in the bottom nav. */
  .sidebar-toggle { display: inline-flex; }

+  /* --- Sidebar: always off-canvas drawer (never occupies grid column) ---- */
  .sidebar {
    position: fixed;
    top: 0;
@@ -1701,8 +1798,8 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
-    /* Pad bottom to clear the fixed mini-bar (~52px) plus safe area */
-    padding-bottom: calc(60px + env(safe-area-inset-bottom));
+    /* Pad bottom to clear bottom-nav (~56px) + mini-bar (~52px) + safe area */
+    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  /* Cards list: unconstrained height — list-pane is now the scroll container */
@@ -1712,14 +1809,18 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
    padding-bottom: 0;
  }

-  /* Settings panel: ensure full accessibility with bottom clearance for mini-bar */
+  /* Settings panel: ensure full accessibility with bottom clearance */
  .settings {
-    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

-  /* --- Mini now-playing bar: respect home indicator ---------------------- */
+  /* --- Mini now-playing bar: sit above the bottom-nav -------------------- */
+  /* bottom-nav is ~56px tall; mini-bar floats on top of it.
+     The bottom-nav's own padding-bottom handles the safe-area-inset, so
+     mini-bar only needs to clear the nav height itself (no extra inset). */
  .mini-bar {
-    padding-bottom: env(safe-area-inset-bottom);
+    bottom: calc(56px + env(safe-area-inset-bottom));
+    padding-bottom: 0;
  }

  .mini-bar-inner {
@@ -1727,9 +1828,9 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
    padding-right: calc(16px + env(safe-area-inset-right));
  }

-  /* --- Toast container: clear home indicator ----------------------------- */
+  /* --- Toast container: clear bottom-nav + mini-bar ---------------------- */
  .toast-container {
-    bottom: calc(26px + env(safe-area-inset-bottom));
+    bottom: calc(82px + env(safe-area-inset-bottom));
  }

  /* --- Modal: safe-area aware -------------------------------------------- */