feat(design): the NavRail primitive with optional short labels, the flat surfaces onto roles (E28 S3d3, B7/B5)

frontend/src/components/PrefsProvider.tsx

@@ -33,6 +33,7 @@ type EditablePrefs = {
   theme: ThemePrefs;
   performanceMode: boolean;
   hints: boolean;
+  railLabels: boolean;
   notifications: NotifSettings;
 };
 
@@ -50,6 +51,8 @@ export function PrefsProvider({ children }: { children: ReactNode }) {
           ? prefs.performanceMode
           : getAccountRaw(PERF_KEY) === "1",
       hints: typeof prefs?.hints === "boolean" ? prefs.hints : hintsEnabled(),
+      // B7: off by default — the icon rail with name tooltips is the house look.
+      railLabels: prefs?.railLabels === true,
       notifications: prefs?.notifications
         ? { ...getNotifSettings(), ...prefs.notifications }
         : getNotifSettings(),
@@ -58,6 +61,7 @@ export function PrefsProvider({ children }: { children: ReactNode }) {
   const [theme, setThemeState] = useState<ThemePrefs>(seed.theme);
   const [perf, setPerf] = useState(seed.performanceMode);
   const [hints, setHints] = useState(seed.hints);
+  const [railLabels, setRailLabels] = useState(seed.railLabels);
   const [notif, setNotif] = useState<NotifSettings>(seed.notifications);
   // The last server-known prefs: the seed, then each successful save. The auto-save effect compares
   // against it, so the seed itself is never echoed back as a save. A ref (drives no UI).
@@ -88,8 +92,8 @@ export function PrefsProvider({ children }: { children: ReactNode }) {
   // effects above; this is the only persistence path. `baselineRef` keeps the mount seed from being
   // saved straight back (`/me` merges, so a full payload is fine).
   const editablePrefs = useMemo<EditablePrefs>(
-    () => ({ theme, performanceMode: perf, hints, notifications: notif }),
-    [theme, perf, hints, notif],
+    () => ({ theme, performanceMode: perf, hints, railLabels, notifications: notif }),
+    [theme, perf, hints, railLabels, notif],
   );
   useEffect(() => {
     window.clearTimeout(saveTimer.current);
@@ -135,8 +139,20 @@ export function PrefsProvider({ children }: { children: ReactNode }) {
   }, []);
 
   const value = useMemo<PrefsController>(
-    () => ({ theme, setTheme, perf, setPerf, hints, setHints, notif, setNotif, saveState }),
-    [theme, setTheme, perf, hints, notif, saveState],
+    () => ({
+      theme,
+      setTheme,
+      perf,
+      setPerf,
+      hints,
+      setHints,
+      railLabels,
+      setRailLabels,
+      notif,
+      setNotif,
+      saveState,
+    }),
+    [theme, setTheme, perf, hints, railLabels, notif, saveState],
   );
 
   return <PrefsContext.Provider value={value}>{children}</PrefsContext.Provider>;