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) => {