import { useState, useMemo, useRef, useEffect } from 'react'; import { X, Sparkles, Search } from 'lucide-react'; import type { Session } from '../types'; import { useT } from '../hooks/useLocale'; import { SessionIcon } from './SessionIcon'; interface Props { sessions: Session[]; activeSession: string; onSwitch: (key: string) => void; open: boolean; onClose: () => void; } export function Sidebar({ sessions, activeSession, onSwitch, open, onClose }: Props) { const t = useT(); const [filter, setFilter] = useState(''); const searchRef = useRef(null); // Keyboard shortcut: Ctrl+K or Cmd+K to focus search when sidebar is open useEffect(() => { const handler = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); searchRef.current?.focus(); } }; window.addEventListener('keydown', handler); return () => window.removeEventListener('keydown', handler); }, []); const filtered = useMemo(() => { if (!filter.trim()) return sessions; const q = filter.toLowerCase(); return sessions.filter(s => (s.label || s.key).toLowerCase().includes(q) ); }, [sessions, filter]); return ( <> {open &&
} ); }