refactor: convert settings page to separate view panels

- Replace scroll-based navigation with view switching
- Add useSettingsView hook for managing active panel state
- Extract Audio section into its own component
- Remove scroll-mt-6 classes and IDs from section components
- Update navigation config to reflect current sections
- Create barrel export for settings-view hooks

This improves performance by only rendering the active section
instead of all sections in a single scrollable container.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Cody Seibert
2025-12-15 22:17:32 -05:00
parent 25044d40b9
commit cc2ac3542d
11 changed files with 176 additions and 127 deletions

View File

@@ -3,8 +3,8 @@ import {
Key,
Terminal,
Palette,
LayoutGrid,
Settings2,
Volume2,
FlaskConical,
Trash2,
} from "lucide-react";
@@ -20,8 +20,8 @@ export const NAV_ITEMS: NavigationItem[] = [
{ id: "api-keys", label: "API Keys", icon: Key },
{ id: "claude", label: "Claude", icon: Terminal },
{ id: "appearance", label: "Appearance", icon: Palette },
{ id: "kanban", label: "Kanban Display", icon: LayoutGrid },
{ id: "keyboard", label: "Keyboard Shortcuts", icon: Settings2 },
{ id: "audio", label: "Audio", icon: Volume2 },
{ id: "defaults", label: "Feature Defaults", icon: FlaskConical },
{ id: "danger", label: "Danger Zone", icon: Trash2 },
];