feat(nav): N1 — collapsible left nav sidebar (Design C)

Move the modules (Feed/Channels/Playlists/Stats) out of the avatar dropdown into a
persistent left sidebar with icon+label entries; collapses to a thin icon rail
(persisted in localStorage). Account actions (About, Sign out, admin badge) move to a
popover at the sidebar bottom; Settings is a rail entry. Header is now a contextual top
bar (sync status, feed scope + search or page title, language, notifications) — logo and
account menu removed from it. New nav.json strings (HU/EN/DE). First step of Epic N.

frontend/src/components/Header.tsx

@@ -1,22 +1,20 @@
-import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { BarChart3, Home, Info, Library, ListVideo, LogOut, Search, Settings, Shield, Tv, User } from "lucide-react";
+import { Library, Search, User } from "lucide-react";
 import type { FeedFilters, Me } from "../lib/api";
 import type { Page } from "../lib/urlState";
 import { type LangCode } from "../i18n";
 import SyncStatus from "./SyncStatus";
 import NotificationCenter from "./NotificationCenter";
 import LanguageSwitcher from "./LanguageSwitcher";
-import AvatarImg from "./Avatar";
 
+// Contextual top bar. Primary navigation + account now live in the left NavSidebar; the
+// header carries the global sync status, the feed's scope toggle + search (or the current
+// page title), the language switcher and the notification bell.
 export default function Header({
   me,
   filters,
   setFilters,
   page,
-  setPage,
-  onOpenSettings,
-  onOpenAbout,
   onChangeLanguage,
   onGoToFullHistory,
 }: {
@@ -24,29 +22,13 @@ export default function Header({
   filters: FeedFilters;
   setFilters: (f: FeedFilters) => void;
   page: Page;
-  setPage: (p: Page) => void;
-  onOpenSettings: () => void;
-  onOpenAbout: () => void;
   onChangeLanguage: (code: LangCode) => void;
   onGoToFullHistory: () => void;
 }) {
   const { t, i18n } = useTranslation();
 
-  async function logout() {
-    await fetch("/auth/logout", { method: "POST", credentials: "include" });
-    location.reload();
-  }
-
   return (
     <header className="h-14 shrink-0 border-b border-border bg-surface/95 flex items-center gap-3 px-4 z-20">
-      <button
-        onClick={() => setPage("feed")}
-        className="text-xl font-bold tracking-tight select-none"
-        title={t("header.feed")}
-      >
-        Sift<span className="text-accent">lode</span>
-      </button>
-
       <SyncStatus isAdmin={me.role === "admin"} onGoToFullHistory={onGoToFullHistory} />
 
       {page === "feed" && (
@@ -101,130 +83,7 @@ export default function Header({
       <div className="flex items-center gap-1">
         <LanguageSwitcher value={i18n.language as LangCode} onChange={onChangeLanguage} />
         <NotificationCenter filters={filters} setFilters={setFilters} />
-        <div className="pl-1">
-          <AccountMenu
-            me={me}
-            logout={logout}
-            page={page}
-            setPage={setPage}
-            onOpenSettings={onOpenSettings}
-            onOpenAbout={onOpenAbout}
-          />
-        </div>
       </div>
     </header>
   );
 }
-
-function Avatar({ me, className = "" }: { me: Me; className?: string }) {
-  return (
-    <AvatarImg
-      src={me.avatar_url}
-      fallback={me.display_name ?? me.email}
-      className={`rounded-full ${className}`}
-    />
-  );
-}
-
-function AccountMenu({
-  me,
-  logout,
-  page,
-  setPage,
-  onOpenSettings,
-  onOpenAbout,
-}: {
-  me: Me;
-  logout: () => void;
-  page: Page;
-  setPage: (p: Page) => void;
-  onOpenSettings: () => void;
-  onOpenAbout: () => void;
-}) {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  function openNow() {
-    if (closeTimer.current) clearTimeout(closeTimer.current);
-    setOpen(true);
-  }
-  function closeSoon() {
-    closeTimer.current = setTimeout(() => setOpen(false), 220);
-  }
-
-  const itemClass =
-    "w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition";
-
-  return (
-    <div className="relative" onMouseEnter={openNow} onMouseLeave={closeSoon}>
-      <button
-        onClick={() => setOpen((o) => !o)}
-        title={me.email}
-        className="block rounded-full ring-2 ring-transparent hover:ring-border focus:outline-none focus:ring-accent transition"
-      >
-        <Avatar me={me} className="w-8 h-8 text-xs" />
-      </button>
-
-      {open && (
-        <div className="glass absolute right-0 mt-2 w-64 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
-          <div className="flex items-center gap-3 pb-3 border-b border-border">
-            <Avatar me={me} className="w-10 h-10 text-sm shrink-0" />
-            <div className="min-w-0">
-              <div className="text-sm font-semibold truncate">
-                {me.display_name ?? me.email.split("@")[0]}
-              </div>
-              <div className="text-xs text-muted truncate">{me.email}</div>
-            </div>
-          </div>
-
-          {me.role === "admin" && (
-            <div className="flex items-center gap-1.5 mt-2 text-[11px] font-medium text-accent">
-              <Shield className="w-3.5 h-3.5" />
-              {t("header.account.admin")}
-            </div>
-          )}
-
-          <div className="mt-2 flex flex-col">
-            {page !== "feed" && (
-              <button onClick={() => { setPage("feed"); setOpen(false); }} className={itemClass}>
-                <Home className="w-4 h-4" />
-                {t("header.account.feed")}
-              </button>
-            )}
-            {page !== "channels" && (
-              <button onClick={() => { setPage("channels"); setOpen(false); }} className={itemClass}>
-                <Tv className="w-4 h-4" />
-                {t("header.account.channels")}
-              </button>
-            )}
-            {page !== "playlists" && (
-              <button onClick={() => { setPage("playlists"); setOpen(false); }} className={itemClass}>
-                <ListVideo className="w-4 h-4" />
-                {t("header.account.playlists")}
-              </button>
-            )}
-            {me.role === "admin" && page !== "stats" && (
-              <button onClick={() => { setPage("stats"); setOpen(false); }} className={itemClass}>
-                <BarChart3 className="w-4 h-4" />
-                {t("header.account.stats")}
-              </button>
-            )}
-            <button onClick={() => { onOpenSettings(); setOpen(false); }} className={itemClass}>
-              <Settings className="w-4 h-4" />
-              {t("header.account.settings")}
-            </button>
-            <button onClick={() => { onOpenAbout(); setOpen(false); }} className={itemClass}>
-              <Info className="w-4 h-4" />
-              {t("header.account.about")}
-            </button>
-            <button onClick={logout} className={itemClass}>
-              <LogOut className="w-4 h-4" />
-              {t("header.account.signOut")}
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

frontend/src/components/NavSidebar.tsx

@@ -0,0 +1,187 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  BarChart3,
+  ChevronLeft,
+  ChevronRight,
+  Home,
+  Info,
+  ListVideo,
+  LogOut,
+  Settings,
+  Shield,
+  Tv,
+} from "lucide-react";
+import type { Me } from "../lib/api";
+import type { Page } from "../lib/urlState";
+import AvatarImg from "./Avatar";
+
+// Primary app navigation: a collapsible left rail with icon+label entries (Design C). The
+// modules used to hide under the avatar dropdown; they now live here. Collapsed, it becomes
+// a thin icon-only rail. Account actions sit at the bottom in a popover.
+export default function NavSidebar({
+  me,
+  page,
+  setPage,
+  onOpenSettings,
+  onOpenAbout,
+}: {
+  me: Me;
+  page: Page;
+  setPage: (p: Page) => void;
+  onOpenSettings: () => void;
+  onOpenAbout: () => void;
+}) {
+  const { t } = useTranslation();
+  const [collapsed, setCollapsed] = useState<boolean>(
+    () => localStorage.getItem("siftlode.navCollapsed") === "1"
+  );
+  const [acctOpen, setAcctOpen] = useState(false);
+
+  function toggleCollapsed() {
+    setCollapsed((c) => {
+      const next = !c;
+      localStorage.setItem("siftlode.navCollapsed", next ? "1" : "0");
+      return next;
+    });
+  }
+
+  async function logout() {
+    await fetch("/auth/logout", { method: "POST", credentials: "include" });
+    location.reload();
+  }
+
+  const items: { page: Page; icon: typeof Home; label: string }[] = [
+    { page: "feed", icon: Home, label: t("header.account.feed") },
+    { page: "channels", icon: Tv, label: t("header.account.channels") },
+    { page: "playlists", icon: ListVideo, label: t("header.account.playlists") },
+  ];
+  if (me.role === "admin")
+    items.push({ page: "stats", icon: BarChart3, label: t("header.account.stats") });
+
+  const rowBase =
+    "w-full flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition";
+  const name = me.display_name ?? me.email.split("@")[0];
+
+  return (
+    <nav
+      className={`relative shrink-0 border-r border-border bg-surface/60 flex flex-col py-3 transition-[width] ${
+        collapsed ? "w-[56px] px-2" : "w-52 px-3"
+      }`}
+      aria-label={t("nav.primary")}
+    >
+      <div className={`flex items-center mb-3 ${collapsed ? "justify-center" : "justify-between"}`}>
+        {!collapsed && (
+          <button
+            onClick={() => setPage("feed")}
+            className="text-lg font-bold tracking-tight select-none"
+            title={t("header.feed")}
+          >
+            Sift<span className="text-accent">lode</span>
+          </button>
+        )}
+        <button
+          onClick={toggleCollapsed}
+          title={collapsed ? t("nav.expand") : t("nav.collapse")}
+          aria-label={collapsed ? t("nav.expand") : t("nav.collapse")}
+          className="p-1 rounded-md text-muted hover:text-fg hover:bg-card transition"
+        >
+          {collapsed ? (
+            <ChevronRight className="w-4 h-4" />
+          ) : (
+            <ChevronLeft className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-1">
+        {items.map(({ page: p, icon: Icon, label }) => (
+          <button
+            key={p}
+            onClick={() => setPage(p)}
+            title={collapsed ? label : undefined}
+            aria-current={page === p ? "page" : undefined}
+            className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} ${
+              page === p
+                ? "bg-accent text-accent-fg"
+                : "text-muted hover:text-fg hover:bg-card"
+            }`}
+          >
+            <Icon className="w-[18px] h-[18px] shrink-0" />
+            {!collapsed && <span className="truncate">{label}</span>}
+          </button>
+        ))}
+      </div>
+
+      <div className="mt-2 pt-2 border-t border-border flex flex-col gap-1">
+        <button
+          onClick={onOpenSettings}
+          title={collapsed ? t("header.account.settings") : undefined}
+          className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} text-muted hover:text-fg hover:bg-card`}
+        >
+          <Settings className="w-[18px] h-[18px] shrink-0" />
+          {!collapsed && <span className="truncate">{t("header.account.settings")}</span>}
+        </button>
+
+        <div className="relative">
+          <button
+            onClick={() => setAcctOpen((o) => !o)}
+            title={collapsed ? name : undefined}
+            className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} text-muted hover:text-fg hover:bg-card`}
+          >
+            <AvatarImg
+              src={me.avatar_url}
+              fallback={name}
+              className="w-[22px] h-[22px] rounded-full text-[10px] shrink-0"
+            />
+            {!collapsed && <span className="truncate flex-1 text-left">{name}</span>}
+          </button>
+
+          {acctOpen && (
+            <>
+              <div className="fixed inset-0 z-20" onClick={() => setAcctOpen(false)} />
+              <div className="glass absolute left-full bottom-0 ml-2 w-60 rounded-xl p-3 z-30 animate-[popIn_0.16s_ease]">
+                <div className="flex items-center gap-3 pb-3 border-b border-border">
+                  <AvatarImg
+                    src={me.avatar_url}
+                    fallback={name}
+                    className="w-10 h-10 rounded-full text-sm shrink-0"
+                  />
+                  <div className="min-w-0">
+                    <div className="text-sm font-semibold truncate">{name}</div>
+                    <div className="text-xs text-muted truncate">{me.email}</div>
+                  </div>
+                </div>
+                {me.role === "admin" && (
+                  <div className="flex items-center gap-1.5 mt-2 text-[11px] font-medium text-accent">
+                    <Shield className="w-3.5 h-3.5" />
+                    {t("header.account.admin")}
+                  </div>
+                )}
+                <div className="mt-2 flex flex-col">
+                  <button
+                    onClick={() => {
+                      onOpenAbout();
+                      setAcctOpen(false);
+                    }}
+                    className="w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
+                  >
+                    <Info className="w-4 h-4" />
+                    {t("header.account.about")}
+                  </button>
+                  <button
+                    onClick={logout}
+                    className="w-full flex items-center gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
+                  >
+                    <LogOut className="w-4 h-4" />
+                    {t("header.account.signOut")}
+                  </button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </nav>
+  );
+}