From 8010a03a7cea97e0b87bcec6a4408055ba0bb45e Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Thu, 11 Dec 2025 00:48:18 +0100
Subject: [PATCH] refactor(settings): extract navigation config to separate
 file
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create config/navigation.ts with NAV_ITEMS and NavigationItem type
- Remove NAV_ITEMS constant from settings-view.tsx
- Update use-scroll-tracking.ts to import NavigationItem type
- Remove unused icon imports from settings-view.tsx
- Improve code organization and maintainability
- Reduce settings-view.tsx by ~10 lines

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/src/components/views/settings-view.tsx    | 28 ++----------------
 .../views/settings-view/config/navigation.ts  | 29 +++++++++++++++++++
 .../hooks/use-scroll-tracking.ts              |  8 +----
 3 files changed, 33 insertions(+), 32 deletions(-)
 create mode 100644 app/src/components/views/settings-view/config/navigation.ts

diff --git a/app/src/components/views/settings-view.tsx b/app/src/components/views/settings-view.tsx
index 0e2074b7..1bf13beb 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -5,19 +5,7 @@ import { useAppStore } from "@/store/app-store";
 import { useSetupStore } from "@/store/setup-store";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import {
-  Settings,
-  Key,
-  Keyboard,
-  Trash2,
-  Folder,
-  Terminal,
-  Atom,
-  Palette,
-  LayoutGrid,
-  Settings2,
-  FlaskConical,
-} from "lucide-react";
+import { Settings, Keyboard, Trash2, Folder } from "lucide-react";
 import { getElectronAPI } from "@/lib/electron";
 import {
   Dialog,
@@ -31,6 +19,8 @@ import { KeyboardMap, ShortcutReferencePanel } from "@/components/ui/keyboard-ma
 // Import custom hooks
 import { useCliStatus } from "./settings-view/hooks/use-cli-status";
 import { useScrollTracking } from "./settings-view/hooks/use-scroll-tracking";
+// Import config
+import { NAV_ITEMS } from "./settings-view/config/navigation";
 // Import extracted sections
 import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section";
 import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status";
@@ -41,18 +31,6 @@ import { KeyboardShortcutsSection } from "./settings-view/keyboard-shortcuts/key
 import { FeatureDefaultsSection } from "./settings-view/feature-defaults/feature-defaults-section";
 import { DangerZoneSection } from "./settings-view/danger-zone/danger-zone-section";
 
-// Navigation items for the side panel
-const NAV_ITEMS = [
-  { id: "api-keys", label: "API Keys", icon: Key },
-  { id: "claude", label: "Claude", icon: Terminal },
-  { id: "codex", label: "Codex", icon: Atom },
-  { id: "appearance", label: "Appearance", icon: Palette },
-  { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
-  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
-  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
-  { id: "danger", label: "Danger Zone", icon: Trash2 },
-];
-
 export function SettingsView() {
   const {
     setCurrentView,
diff --git a/app/src/components/views/settings-view/config/navigation.ts b/app/src/components/views/settings-view/config/navigation.ts
new file mode 100644
index 00000000..c6f5432a
--- /dev/null
+++ b/app/src/components/views/settings-view/config/navigation.ts
@@ -0,0 +1,29 @@
+import type { LucideIcon } from "lucide-react";
+import {
+  Key,
+  Terminal,
+  Atom,
+  Palette,
+  LayoutGrid,
+  Settings2,
+  FlaskConical,
+  Trash2,
+} from "lucide-react";
+
+export interface NavigationItem {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+}
+
+// Navigation items for the settings side panel
+export const NAV_ITEMS: NavigationItem[] = [
+  { id: "api-keys", label: "API Keys", icon: Key },
+  { id: "claude", label: "Claude", icon: Terminal },
+  { id: "codex", label: "Codex", icon: Atom },
+  { id: "appearance", label: "Appearance", icon: Palette },
+  { id: "kanban", label: "Kanban Display", icon: LayoutGrid },
+  { id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
+  { id: "defaults", label: "Feature Defaults", icon: FlaskConical },
+  { id: "danger", label: "Danger Zone", icon: Trash2 },
+];
diff --git a/app/src/components/views/settings-view/hooks/use-scroll-tracking.ts b/app/src/components/views/settings-view/hooks/use-scroll-tracking.ts
index 0a62f716..1d76b5a7 100644
--- a/app/src/components/views/settings-view/hooks/use-scroll-tracking.ts
+++ b/app/src/components/views/settings-view/hooks/use-scroll-tracking.ts
@@ -1,12 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
-import type { LucideIcon } from "lucide-react";
 import type { Project } from "@/store/app-store";
-
-interface NavigationItem {
-  id: string;
-  label: string;
-  icon: LucideIcon;
-}
+import type { NavigationItem } from "../config/navigation";
 
 /**
  * Custom hook for managing scroll-based navigation tracking