refactor(settings): split SettingsView into modular sections

Author: Dimillian

memory/decisions.md

@@ -253,3 +253,10 @@ Type: decision
 Event: App and daemon both needed the same latest-state-safe token persistence behavior after Orbit poll/sign-out.
 Action: Added `update_remote_backend_token_core` in `shared/settings_core.rs` and switched both Orbit adapters to use it instead of cloning stale settings snapshots.
 Rule: Persist Orbit token changes only via shared settings-core mutation helpers to avoid app/daemon divergence and stale overwrite races.
+
+## 2026-02-07 20:11
+Context: SettingsView component decomposition
+Type: decision
+Event: Split `SettingsView` into section-focused components plus a dedicated sidebar nav while keeping orchestration/state in the container.
+Action: Added `SettingsNav`, extracted section components under `src/features/settings/components/sections/*`, introduced shared settings types in `settingsTypes.ts`, and rewired `SettingsView.tsx` to modal shell + section routing.
+Rule: For large settings surfaces, keep `SettingsView` as layout/orchestration and move section UI into dedicated components with typed props.

src/features/settings/components/SettingsNav.tsx

@@ -0,0 +1,103 @@
+import LayoutGrid from "lucide-react/dist/esm/icons/layout-grid";
+import SlidersHorizontal from "lucide-react/dist/esm/icons/sliders-horizontal";
+import Mic from "lucide-react/dist/esm/icons/mic";
+import Keyboard from "lucide-react/dist/esm/icons/keyboard";
+import GitBranch from "lucide-react/dist/esm/icons/git-branch";
+import TerminalSquare from "lucide-react/dist/esm/icons/terminal-square";
+import FileText from "lucide-react/dist/esm/icons/file-text";
+import FlaskConical from "lucide-react/dist/esm/icons/flask-conical";
+import ExternalLink from "lucide-react/dist/esm/icons/external-link";
+import Layers from "lucide-react/dist/esm/icons/layers";
+import type { CodexSection } from "./settingsTypes";
+
+type SettingsNavProps = {
+  activeSection: CodexSection;
+  onSelectSection: (section: CodexSection) => void;
+};
+
+export function SettingsNav({ activeSection, onSelectSection }: SettingsNavProps) {
+  return (
+    <aside className="settings-sidebar">
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "projects" ? "active" : ""}`}
+        onClick={() => onSelectSection("projects")}
+      >
+        <LayoutGrid aria-hidden />
+        Projects
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "environments" ? "active" : ""}`}
+        onClick={() => onSelectSection("environments")}
+      >
+        <Layers aria-hidden />
+        Environments
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "display" ? "active" : ""}`}
+        onClick={() => onSelectSection("display")}
+      >
+        <SlidersHorizontal aria-hidden />
+        Display &amp; Sound
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "composer" ? "active" : ""}`}
+        onClick={() => onSelectSection("composer")}
+      >
+        <FileText aria-hidden />
+        Composer
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "dictation" ? "active" : ""}`}
+        onClick={() => onSelectSection("dictation")}
+      >
+        <Mic aria-hidden />
+        Dictation
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "shortcuts" ? "active" : ""}`}
+        onClick={() => onSelectSection("shortcuts")}
+      >
+        <Keyboard aria-hidden />
+        Shortcuts
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "open-apps" ? "active" : ""}`}
+        onClick={() => onSelectSection("open-apps")}
+      >
+        <ExternalLink aria-hidden />
+        Open in
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "git" ? "active" : ""}`}
+        onClick={() => onSelectSection("git")}
+      >
+        <GitBranch aria-hidden />
+        Git
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "codex" ? "active" : ""}`}
+        onClick={() => onSelectSection("codex")}
+      >
+        <TerminalSquare aria-hidden />
+        Codex
+      </button>
+      <button
+        type="button"
+        className={`settings-nav ${activeSection === "features" ? "active" : ""}`}
+        onClick={() => onSelectSection("features")}
+      >
+        <FlaskConical aria-hidden />
+        Features
+      </button>
+    </aside>
+  );
+}