Merge feature/n1b-settings-page: Settings as a left-nav page (Design B)

frontend/src/App.tsx

@@ -57,7 +57,13 @@ function loadInitialPage(): Page {
   const params = new URLSearchParams(window.location.search);
   if (params.has("page")) return readPage();
   const stored = localStorage.getItem(PAGE_KEY);
-  if (stored === "channels" || stored === "stats" || stored === "playlists") return stored;
+  if (
+    stored === "channels" ||
+    stored === "stats" ||
+    stored === "playlists" ||
+    stored === "settings"
+  )
+    return stored;
   return "feed";
 }
 
@@ -83,7 +89,6 @@ export default function App() {
   const [view, setView] = useState<"grid" | "list">("grid");
   const [sidebarLayout, setSidebarLayoutState] = useState<SidebarLayout>(loadLayout);
   const [page, setPageState] = useState<Page>(loadInitialPage);
-  const [settingsOpen, setSettingsOpen] = useState(false);
   const [wizardOpen, setWizardOpen] = useState(false);
   const [channelFilter, setChannelFilter] = useState<ChannelStatusFilter>("all");
   const [aboutOpen, setAboutOpen] = useState(false);
@@ -198,7 +203,6 @@ export default function App() {
         me={meQuery.data!}
         page={page}
         setPage={setPage}
-        onOpenSettings={() => setSettingsOpen(true)}
         onOpenAbout={() => setAboutOpen(true)}
       />
       <div className="flex-1 min-w-0 flex flex-col">
@@ -239,6 +243,15 @@ export default function App() {
             <Stats />
           ) : page === "playlists" ? (
             <Playlists canWrite={meQuery.data!.can_write} />
+          ) : page === "settings" ? (
+            <SettingsPanel
+              me={meQuery.data!}
+              theme={theme}
+              setTheme={setTheme}
+              view={view}
+              setView={changeView}
+              onOpenWizard={() => setWizardOpen(true)}
+            />
           ) : (
             <Feed
               filters={filters}
@@ -251,20 +264,6 @@ export default function App() {
           </main>
         </div>
       </div>
-      {settingsOpen && (
-        <SettingsPanel
-          me={meQuery.data!}
-          theme={theme}
-          setTheme={setTheme}
-          view={view}
-          setView={changeView}
-          onClose={() => setSettingsOpen(false)}
-          onOpenWizard={() => {
-            setSettingsOpen(false);
-            setWizardOpen(true);
-          }}
-        />
-      )}
       {wizardOpen && meQuery.data && (
         <OnboardingWizard me={meQuery.data} onClose={() => setWizardOpen(false)} />
       )}

frontend/src/components/Header.tsx

@@ -76,6 +76,8 @@ export default function Header({
             ? t("header.usageStats")
             : page === "playlists"
               ? t("header.account.playlists")
+              : page === "settings"
+                ? t("settings.title")
                 : t("header.channelManager")}
         </div>
       )}

frontend/src/components/NavSidebar.tsx

@@ -23,13 +23,11 @@ export default function NavSidebar({
   me,
   page,
   setPage,
-  onOpenSettings,
   onOpenAbout,
 }: {
   me: Me;
   page: Page;
   setPage: (p: Page) => void;
-  onOpenSettings: () => void;
   onOpenAbout: () => void;
 }) {
   const { t } = useTranslation();
@@ -115,9 +113,14 @@ export default function NavSidebar({
 
       <div className="mt-2 pt-2 border-t border-border flex flex-col gap-1">
         <button
-          onClick={onOpenSettings}
+          onClick={() => setPage("settings")}
           title={collapsed ? t("header.account.settings") : undefined}
-          className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} text-muted hover:text-fg hover:bg-card`}
+          aria-current={page === "settings" ? "page" : undefined}
+          className={`${rowBase} ${collapsed ? "justify-center px-0" : ""} ${
+            page === "settings"
+              ? "bg-accent text-accent-fg"
+              : "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>}

frontend/src/components/SettingsPanel.tsx

@@ -23,13 +23,15 @@ const TABS: { id: TabId; icon: typeof Monitor }[] = [
   { id: "account", icon: User },
 ];
 
+// Settings as a page (Design B): rendered in the main content area, not an overlay. It keeps
+// the frosted `.glass` surface so it still refracts the ambient backdrop. The page title is
+// shown by the Header; the tab rail stays as in-page sub-navigation.
 export default function SettingsPanel({
   me,
   theme,
   setTheme,
   view,
   setView,
-  onClose,
   onOpenWizard,
 }: {
   me: Me;
@@ -37,52 +39,14 @@ export default function SettingsPanel({
   setTheme: (t: ThemePrefs) => void;
   view: "grid" | "list";
   setView: (v: "grid" | "list") => void;
-  onClose: () => void;
   onOpenWizard: () => void;
 }) {
   const { t } = useTranslation();
   const [tab, setTab] = useState<TabId>("appearance");
-  const [closing, setClosing] = useState(false);
-
-  const close = useCallback(() => {
-    setClosing(true);
-    setTimeout(onClose, 190);
-  }, [onClose]);
-
-  useEffect(() => {
-    function onKey(e: KeyboardEvent) {
-      if (e.key === "Escape") close();
-    }
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [close]);
 
   return (
-    <div className="fixed inset-0 z-40 flex justify-end">
-      <div
-        className={`absolute inset-0 bg-black/50 ${
-          closing ? "animate-[overlayOut_0.19s_ease_forwards]" : "animate-[overlayIn_0.2s_ease]"
-        }`}
-        onClick={close}
-      />
-      <div
-        className={`glass relative self-start m-3 w-[min(94vw,520px)] max-h-[calc(100vh-1.5rem)] rounded-2xl overflow-hidden flex flex-col ${
-          closing
-            ? "animate-[panelOut_0.19s_ease-in_forwards]"
-            : "animate-[panelIn_0.26s_cubic-bezier(0.22,1,0.36,1)]"
-        }`}
-      >
-        <div className="flex items-center justify-between px-4 h-14 border-b border-border/60 shrink-0">
-          <div className="text-base font-semibold">{t("settings.title")}</div>
-          <button
-            onClick={close}
-            className="p-2 rounded-lg text-muted hover:text-fg hover:bg-card/60 transition"
-          >
-            <X className="w-5 h-5" />
-          </button>
-        </div>
-
-        <div className="flex flex-1 min-h-0">
+    <div className="p-4 max-w-3xl w-full mx-auto">
+      <div className="glass rounded-2xl overflow-hidden flex">
         {/* Vertical tab rail — never wraps; active is a clear accent pill. */}
         <nav className="w-32 sm:w-36 shrink-0 border-r border-border/60 p-2 flex flex-col gap-1">
           {TABS.map((tabItem) => {
@@ -106,7 +70,7 @@ export default function SettingsPanel({
 
         {/* All tabs stacked in one grid cell so the panel sizes to the tallest tab
             (stable height, no jump on switch); the active one is shown on top. */}
-          <div className="grid flex-1 overflow-y-auto">
+        <div className="grid flex-1 min-w-0">
           {TABS.map((tabItem) => (
             <div
               key={tabItem.id}
@@ -125,7 +89,6 @@ export default function SettingsPanel({
         </div>
       </div>
     </div>
-    </div>
   );
 }
 

frontend/src/lib/urlState.ts

@@ -78,11 +78,13 @@ export function hasFilterParams(params: URLSearchParams): boolean {
   return KEYS.some((k) => params.has(k));
 }
 
-export type Page = "feed" | "channels" | "stats" | "playlists";
+export type Page = "feed" | "channels" | "stats" | "playlists" | "settings";
 
 export function readPage(): Page {
   const p = new URLSearchParams(window.location.search).get("page");
-  return p === "channels" || p === "stats" || p === "playlists" ? p : "feed";
+  return p === "channels" || p === "stats" || p === "playlists" || p === "settings"
+    ? p
+    : "feed";
 }
 
 /** Build a shareable absolute URL that reproduces the current filters (+ page). Used by the