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

Task #46 completed by ClaudeQueue

ClaudeQueue

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 -------------------------------------------- */