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

frontend/src/components/SettingsPanel.tsx

@@ -41,6 +41,8 @@ export interface PrefsController {
   setPerf: (v: boolean) => void;
   hints: boolean;
   setHints: (v: boolean) => void;
+  railLabels: boolean;
+  setRailLabels: (v: boolean) => void;
   notif: NotifSettings;
   setNotif: (n: NotifSettings) => void;
   saveState: PrefsSaveState;
@@ -139,7 +141,7 @@ function SaveIndicator({ state }: { state: PrefsSaveState }) {
 function Appearance({ prefs }: { prefs: PrefsController }) {
   const { t } = useTranslation();
   // Controlled by PrefsProvider: each change applies locally at once and auto-saves (debounced).
-  const { theme, setTheme, perf, setPerf, hints, setHints } = prefs;
+  const { theme, setTheme, perf, setPerf, hints, setHints, railLabels, setRailLabels } = prefs;
   // The landing page (E24). Per-account localStorage, not a server preference like the rest of this
   // tab: `loadInitialPage` reads it synchronously in NavigationProvider's initializer. The two stored
   // values come from navigationInit, which is what reads them back at boot.
@@ -215,6 +217,16 @@ function Appearance({ prefs }: { prefs: PrefsController }) {
         >
           <Switch label={t("settings.appearance.showHints")} checked={hints} onChange={setHints} />
         </SettingRow>
+        <SettingRow
+          label={t("settings.appearance.railLabels")}
+          hint={t("settings.appearance.railLabelsHint")}
+        >
+          <Switch
+            label={t("settings.appearance.railLabels")}
+            checked={railLabels}
+            onChange={setRailLabels}
+          />
+        </SettingRow>
       </Section>
 
       <Section title={t("settings.appearance.startup")}>