persist viewMode across restarts

client/ui/frontend/CLAUDE.md

@@ -76,7 +76,7 @@ State that crosses screens / windows lives in context. Each provider is mounted
 
 ### Default/Advanced view + no client-side persistence
 
-The Header's "more" dropdown owns a `viewMode: "default" | "advanced"` `useState` and calls `Window.SetSize(width, 640)` directly on change. Sizes live in `VIEW_SIZE` at the top of `Header.tsx`: Default = 380×640, Advanced = 900×640 — the 640 height matches the Settings window so chrome height is consistent across surfaces. Every app launch starts in Default (the Go-side main window is created 380×640 in `main.go`). **No `localStorage` / `sessionStorage` / cookies anywhere in the frontend** — persistence is the Go side's job (settings → `SetConfig`, language → `Preferences.SetLanguage`).
+The `ViewModeProvider` (`src/lib/viewMode.tsx`, mounted in `AppLayout`) owns a `viewMode: "default" | "advanced"` state and is consumed by `Header.tsx`'s "more" dropdown via `useViewMode()`. `setViewMode` does three things: updates state, calls `Window.SetSize(width, 640)`, and persists via `Preferences.SetViewMode`. Sizes live in `VIEW_SIZE` at the top of `viewMode.tsx`: Default = 380×640, Advanced = 900×640 — the 640 height matches the Settings window so chrome height is consistent across surfaces. The view is persisted user-side (see Go-side `preferences.Store`): `main.go` opens the main window at the saved width so the user never sees a 380→900 flash on launch, and the provider hydrates its React state from `Preferences.Get()` in a mount effect (no resize triggered there — Go already sized it). **No `localStorage` / `sessionStorage` / cookies anywhere in the frontend** — persistence is the Go side's job (settings → `SetConfig`, language → `Preferences.SetLanguage`, view mode → `Preferences.SetViewMode`).
 
 ## Localisation (i18n)
 

client/ui/frontend/src/lib/viewMode.tsx

@@ -1,5 +1,7 @@
-import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from "react";
 import { Window } from "@wailsio/runtime";
+import { Preferences } from "@bindings/services";
+import { ViewMode as ViewModePref } from "@bindings/preferences/models.js";
 
 export type ViewMode = "default" | "advanced";
 
@@ -20,12 +22,33 @@ const ViewModeContext = createContext<ViewModeContextValue | null>(null);
 
 export const ViewModeProvider = ({ children }: { children: ReactNode }) => {
     const [viewMode, setMode] = useState<ViewMode>("default");
+
+    // Hydrate from the persisted preference. The Go side has already sized
+    // the main window to match (see main.go), so this only catches the
+    // React state and dropdown checkmark up — no resize is triggered here.
+    useEffect(() => {
+        let cancelled = false;
+        void Preferences.Get()
+            .then((prefs) => {
+                if (cancelled) return;
+                const saved = prefs?.viewMode as ViewMode | undefined;
+                if (saved === "default" || saved === "advanced") {
+                    setMode(saved);
+                }
+            })
+            .catch(() => {});
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+
     const setViewMode = useCallback(
         (mode: ViewMode) => {
             setMode((prev) => {
                 if (prev === mode) return prev;
                 const { width, height } = VIEW_SIZE[mode];
                 void Window.SetSize(width, height).catch(() => {});
+                void Preferences.SetViewMode(mode as unknown as ViewModePref).catch(() => {});
                 return mode;
             });
         },