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>
115 lines
4.5 KiB
TypeScript
115 lines
4.5 KiB
TypeScript
import { Key, Volume2, Palette, X, ChevronDown } from 'lucide-react';
|
|
import { Button } from '../ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '../ui/dropdown-menu';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export type SettingsSection = 'api-keys' | 'voice' | 'appearance';
|
|
|
|
type SettingsNavigationProps = {
|
|
activeSection: SettingsSection;
|
|
onSectionChange: (section: SettingsSection) => void;
|
|
onClose: () => void;
|
|
variant?: 'desktop' | 'mobile';
|
|
};
|
|
|
|
const sections: { id: SettingsSection; label: string; icon: typeof Key }[] = [
|
|
{ id: 'api-keys', label: 'API Keys', icon: Key },
|
|
{ id: 'voice', label: 'Voice & TTS', icon: Volume2 },
|
|
{ id: 'appearance', label: 'Appearance', icon: Palette },
|
|
];
|
|
|
|
export function SettingsNavigation({
|
|
activeSection,
|
|
onSectionChange,
|
|
onClose,
|
|
variant = 'desktop',
|
|
}: SettingsNavigationProps) {
|
|
if (variant === 'mobile') {
|
|
const activeItem = sections.find((s) => s.id === activeSection);
|
|
const ActiveIcon = activeItem?.icon || Key;
|
|
|
|
return (
|
|
<div className="flex items-center justify-between w-full">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="flex items-center gap-2">
|
|
<ActiveIcon className="h-4 w-4" />
|
|
<span>{activeItem?.label}</span>
|
|
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="start" className="w-48">
|
|
{sections.map((section) => {
|
|
const Icon = section.icon;
|
|
return (
|
|
<DropdownMenuItem
|
|
key={section.id}
|
|
onClick={() => onSectionChange(section.id)}
|
|
className={cn(
|
|
'flex items-center gap-2',
|
|
activeSection === section.id && 'bg-accent'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
<span>{section.label}</span>
|
|
</DropdownMenuItem>
|
|
);
|
|
})}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
<Button variant="ghost" size="icon" onClick={onClose} aria-label="Close settings">
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between px-4 py-4 border-b border-border">
|
|
<h2 className="font-semibold">Settings</h2>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8"
|
|
onClick={onClose}
|
|
aria-label="Close settings"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<nav className="flex-1 py-2">
|
|
{sections.map((section) => {
|
|
const Icon = section.icon;
|
|
const isActive = activeSection === section.id;
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
key={section.id}
|
|
onClick={() => onSectionChange(section.id)}
|
|
aria-current={isActive ? 'page' : undefined}
|
|
className={cn(
|
|
'w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors',
|
|
'hover:bg-accent hover:text-accent-foreground',
|
|
isActive
|
|
? 'bg-accent text-accent-foreground font-medium'
|
|
: 'text-muted-foreground'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4 shrink-0" />
|
|
<span>{section.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|