b52318eeae
- Add intelligent-router.sh hook for automatic agent routing - Add AUTO-TRIGGER-SUMMARY.md documentation - Add FINAL-INTEGRATION-SUMMARY.md documentation - Complete Prometheus integration (6 commands + 4 tools) - Complete Dexto integration (12 commands + 5 tools) - Enhanced Ralph with access to all agents - Fix /clawd command (removed disable-model-invocation) - Update hooks.json to v5 with intelligent routing - 291 total skills now available - All 21 commands with automatic routing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
92 lines
3.6 KiB
TypeScript
92 lines
3.6 KiB
TypeScript
import { useState } from 'react';
|
|
import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
|
|
import { SettingsNavigation, type SettingsSection } from './SettingsNavigation';
|
|
import { ApiKeysSection } from './sections/ApiKeysSection';
|
|
import { VoiceSection } from './sections/VoiceSection';
|
|
import { AppearanceSection } from './sections/AppearanceSection';
|
|
|
|
type SettingsPanelProps = {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
};
|
|
|
|
const sectionTitles: Record<SettingsSection, string> = {
|
|
'api-keys': 'API Keys',
|
|
voice: 'Voice & TTS',
|
|
appearance: 'Appearance',
|
|
};
|
|
|
|
const sectionDescriptions: Record<SettingsSection, string> = {
|
|
'api-keys': 'Manage API keys for LLM providers',
|
|
voice: 'Configure text-to-speech settings',
|
|
appearance: 'Customize theme and UI preferences',
|
|
};
|
|
|
|
export function SettingsPanel({ isOpen, onClose }: SettingsPanelProps) {
|
|
const [activeSection, setActiveSection] = useState<SettingsSection>('api-keys');
|
|
|
|
const renderSection = () => {
|
|
switch (activeSection) {
|
|
case 'api-keys':
|
|
return <ApiKeysSection />;
|
|
case 'voice':
|
|
return <VoiceSection active={isOpen} />;
|
|
case 'appearance':
|
|
return <AppearanceSection />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent
|
|
className="max-w-4xl! w-[90vw] h-[85vh] p-0! gap-0! flex flex-col"
|
|
hideCloseButton
|
|
>
|
|
{/* Visually hidden title for accessibility */}
|
|
<DialogTitle className="sr-only">Settings</DialogTitle>
|
|
|
|
<div className="flex flex-1 min-h-0">
|
|
{/* Left Navigation - hidden on mobile, shown on md+ */}
|
|
<div className="hidden md:flex md:flex-col w-56 border-r border-border bg-muted/30 shrink-0">
|
|
<SettingsNavigation
|
|
activeSection={activeSection}
|
|
onSectionChange={setActiveSection}
|
|
onClose={onClose}
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Content Area */}
|
|
<div className="flex-1 flex flex-col min-h-0 min-w-0">
|
|
{/* Mobile header with navigation */}
|
|
<div className="md:hidden flex items-center gap-2 px-4 py-3 border-b border-border shrink-0">
|
|
<SettingsNavigation
|
|
activeSection={activeSection}
|
|
onSectionChange={setActiveSection}
|
|
onClose={onClose}
|
|
variant="mobile"
|
|
/>
|
|
</div>
|
|
|
|
{/* Desktop header */}
|
|
<div className="hidden md:block px-6 py-4 border-b border-border shrink-0">
|
|
<h2 className="text-lg font-semibold">
|
|
{sectionTitles[activeSection]}
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{sectionDescriptions[activeSection]}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Section content - scrollable */}
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-6 py-4">
|
|
{renderSection()}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|