feat: reorganize global settings navigation into groups

- Refactored the global navigation structure to group settings items into distinct categories for improved organization and usability.
- Updated the settings navigation component to render these groups dynamically, enhancing the user experience.
- Changed the default initial view in the settings hook to 'model-defaults' for better alignment with the new navigation structure.

These changes streamline navigation and make it easier for users to find relevant settings.

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 type { NavigationItem, NavigationGroup } from '../config/navigation';
-import { GLOBAL_NAV_ITEMS, PROJECT_NAV_ITEMS } 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,14 +177,20 @@ export function SettingsNavigation({
       )}
     >
       <div className="sticky top-0 p-4 space-y-1">
-        {/* Global Settings Label */}
+        {/* Global Settings Groups */}
+        {GLOBAL_NAV_GROUPS.map((group, groupIndex) => (
+          <div key={group.label}>
+            {/* Group divider (except for first group) */}
+            {groupIndex > 0 && <div className="my-3 border-t border-border/50" />}
+
+            {/* Group Label */}
             <div className="px-3 py-2 text-xs font-semibold text-muted-foreground/70 uppercase tracking-wider">
-          Global Settings
+              {group.label}
             </div>
 
-        {/* Global Settings Items */}
+            {/* Group Items */}
             <div className="space-y-1">
-          {GLOBAL_NAV_ITEMS.map((item) =>
+              {group.items.map((item) =>
                 item.subItems ? (
                   <NavItemWithSubItems
                     key={item.id}
@@ -202,12 +208,14 @@ export function SettingsNavigation({
                 )
               )}
             </div>
+          </div>
+        ))}
 
         {/* Project Settings - only show when a project is selected */}
         {currentProject && (
           <>
             {/* Divider */}
-            <div className="my-4 border-t border-border/50" />
+            <div className="my-3 border-t border-border/50" />
 
             {/* Project Settings Label */}
             <div className="px-3 py-2 text-xs font-semibold text-muted-foreground/70 uppercase tracking-wider">

apps/ui/src/components/views/settings-view/config/navigation.ts

@@ -31,8 +31,14 @@ export interface NavigationGroup {
   items: NavigationItem[];
 }
 
-// Global settings - always visible
+// Global settings organized into groups
-export const GLOBAL_NAV_ITEMS: NavigationItem[] = [
+export const GLOBAL_NAV_GROUPS: NavigationGroup[] = [
+  {
+    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',
@@ -46,17 +52,29 @@ export const GLOBAL_NAV_ITEMS: NavigationItem[] = [
         ],
       },
       { id: 'mcp-servers', label: 'MCP Servers', icon: Plug },
-  { id: 'prompts', label: 'Prompt Customization', icon: MessageSquareText },
+    ],
-  { id: 'model-defaults', label: 'Model Defaults', icon: Workflow },
+  },
+  {
+    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 },
-  { id: 'defaults', label: 'Feature Defaults', icon: FlaskConical },
+    ],
+  },
+  {
+    label: 'Account & Security',
+    items: [
       { 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 },

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<SettingsViewId>(initialView);
 
   const navigateTo = useCallback((viewId: SettingsViewId) => {