diff --git a/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx b/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx index 7a4001c9..c98affb6 100644 --- a/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx +++ b/apps/ui/src/components/views/settings-view/components/settings-navigation.tsx @@ -2,8 +2,8 @@ import { useState, useEffect } from 'react'; import { ChevronDown, ChevronRight } from 'lucide-react'; import { cn } from '@/lib/utils'; import type { Project } from '@/lib/electron'; -import type { NavigationItem } from '../config/navigation'; -import { GLOBAL_NAV_ITEMS, PROJECT_NAV_ITEMS } from '../config/navigation'; +import type { NavigationItem, NavigationGroup } from '../config/navigation'; +import { GLOBAL_NAV_GROUPS, PROJECT_NAV_ITEMS } from '../config/navigation'; import type { SettingsViewId } from '../hooks/use-settings-view'; const PROVIDERS_DROPDOWN_KEY = 'settings-providers-dropdown-open'; @@ -177,37 +177,45 @@ export function SettingsNavigation({ )} >
- {/* Global Settings Label */} -
- Global Settings -
+ {/* Global Settings Groups */} + {GLOBAL_NAV_GROUPS.map((group, groupIndex) => ( +
+ {/* Group divider (except for first group) */} + {groupIndex > 0 &&
} - {/* Global Settings Items */} -
- {GLOBAL_NAV_ITEMS.map((item) => - item.subItems ? ( - - ) : ( - - ) - )} -
+ {/* Group Label */} +
+ {group.label} +
+ + {/* Group Items */} +
+ {group.items.map((item) => + item.subItems ? ( + + ) : ( + + ) + )} +
+
+ ))} {/* Project Settings - only show when a project is selected */} {currentProject && ( <> {/* Divider */} -
+
{/* Project Settings Label */}
diff --git a/apps/ui/src/components/views/settings-view/config/navigation.ts b/apps/ui/src/components/views/settings-view/config/navigation.ts index 463f6a52..62bb9daf 100644 --- a/apps/ui/src/components/views/settings-view/config/navigation.ts +++ b/apps/ui/src/components/views/settings-view/config/navigation.ts @@ -31,32 +31,50 @@ export interface NavigationGroup { items: NavigationItem[]; } -// Global settings - always visible -export const GLOBAL_NAV_ITEMS: NavigationItem[] = [ - { id: 'api-keys', label: 'API Keys', icon: Key }, +// Global settings organized into groups +export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [ { - id: 'providers', - label: 'AI Providers', - icon: Bot, - subItems: [ - { id: 'claude-provider', label: 'Claude', icon: AnthropicIcon }, - { id: 'cursor-provider', label: 'Cursor', icon: CursorIcon }, - { id: 'codex-provider', label: 'Codex', icon: OpenAIIcon }, - { id: 'opencode-provider', label: 'OpenCode', icon: Cpu }, + label: 'Model & Prompts', + items: [ + { id: 'model-defaults', label: 'Model Defaults', icon: Workflow }, + { id: 'defaults', label: 'Feature Defaults', icon: FlaskConical }, + { id: 'prompts', label: 'Prompt Customization', icon: MessageSquareText }, + { id: 'api-keys', label: 'API Keys', icon: Key }, + { + id: 'providers', + label: 'AI Providers', + icon: Bot, + subItems: [ + { id: 'claude-provider', label: 'Claude', icon: AnthropicIcon }, + { id: 'cursor-provider', label: 'Cursor', icon: CursorIcon }, + { id: 'codex-provider', label: 'Codex', icon: OpenAIIcon }, + { id: 'opencode-provider', label: 'OpenCode', icon: Cpu }, + ], + }, + { id: 'mcp-servers', label: 'MCP Servers', icon: Plug }, + ], + }, + { + label: 'Interface', + items: [ + { id: 'appearance', label: 'Appearance', icon: Palette }, + { id: 'terminal', label: 'Terminal', icon: SquareTerminal }, + { id: 'keyboard', label: 'Keyboard Shortcuts', icon: Settings2 }, + { id: 'audio', label: 'Audio', icon: Volume2 }, + ], + }, + { + label: 'Account & Security', + items: [ + { id: 'account', label: 'Account', icon: User }, + { id: 'security', label: 'Security', icon: Shield }, ], }, - { id: 'mcp-servers', label: 'MCP Servers', icon: Plug }, - { id: 'prompts', label: 'Prompt Customization', icon: MessageSquareText }, - { id: 'model-defaults', label: 'Model Defaults', icon: Workflow }, - { id: 'appearance', label: 'Appearance', icon: Palette }, - { id: 'terminal', label: 'Terminal', icon: SquareTerminal }, - { id: 'keyboard', label: 'Keyboard Shortcuts', icon: Settings2 }, - { id: 'audio', label: 'Audio', icon: Volume2 }, - { id: 'defaults', label: 'Feature Defaults', icon: FlaskConical }, - { id: 'account', label: 'Account', icon: User }, - { id: 'security', label: 'Security', icon: Shield }, ]; +// Flat list of all global nav items for backwards compatibility +export const GLOBAL_NAV_ITEMS: NavigationItem[] = GLOBAL_NAV_GROUPS.flatMap((group) => group.items); + // Project-specific settings - only visible when a project is selected export const PROJECT_NAV_ITEMS: NavigationItem[] = [ { id: 'danger', label: 'Danger Zone', icon: Trash2 }, diff --git a/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts b/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts index b1109d7b..1dc0208f 100644 --- a/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts +++ b/apps/ui/src/components/views/settings-view/hooks/use-settings-view.ts @@ -24,7 +24,7 @@ interface UseSettingsViewOptions { initialView?: SettingsViewId; } -export function useSettingsView({ initialView = 'api-keys' }: UseSettingsViewOptions = {}) { +export function useSettingsView({ initialView = 'model-defaults' }: UseSettingsViewOptions = {}) { const [activeView, setActiveView] = useState(initialView); const navigateTo = useCallback((viewId: SettingsViewId) => {