File size: 3,991 Bytes
c2c8c8d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | import { useState } from 'react';
import {
Files, Search, MessageSquare, GitBranch, Shield, Settings,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui/tooltip';
import FileTree from '@/components/explorer/FileTree';
import AIChatPanel from '@/components/ai/AIChatPanel';
type SidebarPanel = 'files' | 'search' | 'chat' | 'git' | 'agents' | 'settings';
const sidebarItems: Array<{ id: SidebarPanel; icon: typeof Files; label: string }> = [
{ id: 'files', icon: Files, label: 'Explorer' },
{ id: 'search', icon: Search, label: 'Search' },
{ id: 'chat', icon: MessageSquare, label: 'AI Chat' },
{ id: 'git', icon: GitBranch, label: 'Git' },
{ id: 'agents', icon: Shield, label: 'Agents' },
{ id: 'settings', icon: Settings, label: 'Settings' },
];
export default function Sidebar() {
const [activePanel, setActivePanel] = useState<SidebarPanel>('files');
return (
<div className="flex h-full">
{/* Icon strip */}
<TooltipProvider delayDuration={300}>
<div className="w-12 bg-background border-r border-border flex flex-col items-center pt-2 gap-1">
{sidebarItems.map((item) => (
<Tooltip key={item.id}>
<TooltipTrigger asChild>
<button
onClick={() => setActivePanel(item.id)}
className={cn(
'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
activePanel === item.id
? 'text-foreground bg-secondary'
: 'text-muted-foreground hover:text-foreground hover:bg-secondary/50'
)}
>
<item.icon className="w-5 h-5" />
</button>
</TooltipTrigger>
<TooltipContent side="right">{item.label}</TooltipContent>
</Tooltip>
))}
</div>
</TooltipProvider>
{/* Panel content */}
<div className="flex-1 bg-card/30 overflow-hidden flex flex-col min-w-0">
<div className="px-3 py-2 border-b border-border">
<h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
{sidebarItems.find((i) => i.id === activePanel)?.label}
</h4>
</div>
<div className="flex-1 overflow-auto min-h-0">
{activePanel === 'files' && <FileTree />}
{activePanel === 'search' && (
<div className="p-3">
<input
placeholder="Search files..."
className="w-full bg-secondary border border-border rounded px-2 py-1.5 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary"
/>
<p className="text-xs text-muted-foreground mt-2">Type to search across workspace files.</p>
</div>
)}
{activePanel === 'chat' && (
<p className="p-3 text-xs text-muted-foreground">AI Chat is in the right panel.</p>
)}
{activePanel === 'git' && (
<div className="p-3 text-xs text-muted-foreground">
<p>Git integration</p>
<p className="mt-1">Import a repository to see Git status.</p>
</div>
)}
{activePanel === 'agents' && (
<div className="p-3 text-xs text-muted-foreground">
<p>Agent controls will appear here after running a review.</p>
</div>
)}
{activePanel === 'settings' && (
<div className="p-3 text-xs text-muted-foreground space-y-2">
<p className="font-medium text-foreground">Settings</p>
<p>Font Size: 14px</p>
<p>Tab Size: 2</p>
<p>Word Wrap: On</p>
<p>AI Completions: On</p>
</div>
)}
</div>
</div>
</div>
);
}
|