feat: Phase 4 - Command Palette (Ctrl+K) for quick navigation and actions

src/components/CommandPalette.tsx

@@ -0,0 +1,69 @@
+import { motion, AnimatePresence } from 'motion/react';
+import { Search, Home, Folder, LayoutGrid, Download, ListOrdered, Settings, Timer, Palette, Globe } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '../../lib/utils';
+
+interface CommandItem { id: string; label: string; icon: React.ReactNode; action: () => void; section?: string; keywords?: string; }
+
+export function CommandPalette({ open, onClose, onNavigate }: { open: boolean; onClose: () => void; onNavigate: (view: string) => void }) {
+  const [query, setQuery] = useState('');
+  const [selectedIdx, setSelectedIdx] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const commands: CommandItem[] = [
+    { id: 'home', label: 'Go to Home', icon: <Home className="w-4 h-4" />, action: () => onNavigate('home'), section: 'Navigate', keywords: 'home dashboard start' },
+    { id: 'web', label: 'Open Browser', icon: <Globe className="w-4 h-4" />, action: () => onNavigate('web'), section: 'Navigate', keywords: 'browser web tab browse' },
+    { id: 'library', label: 'Open Library', icon: <Folder className="w-4 h-4" />, action: () => onNavigate('library'), section: 'Navigate', keywords: 'library references images' },
+    { id: 'board', label: 'Open Board', icon: <LayoutGrid className="w-4 h-4" />, action: () => onNavigate('board'), section: 'Navigate', keywords: 'board canvas pureref reference' },
+    { id: 'study', label: 'Quick Study Mode', icon: <Timer className="w-4 h-4" />, action: () => onNavigate('study'), section: 'Navigate', keywords: 'study timer practice draw' },
+    { id: 'downloads', label: 'Downloads', icon: <Download className="w-4 h-4" />, action: () => onNavigate('downloads'), section: 'Navigate', keywords: 'downloads files' },
+    { id: 'sessions', label: 'Sessions', icon: <ListOrdered className="w-4 h-4" />, action: () => onNavigate('sessions'), section: 'Navigate', keywords: 'sessions tabs workspace' },
+    { id: 'settings', label: 'Settings', icon: <Settings className="w-4 h-4" />, action: () => onNavigate('settings'), section: 'Navigate', keywords: 'settings preferences theme' },
+    { id: 'palette', label: 'Color Tools', icon: <Palette className="w-4 h-4" />, action: () => onNavigate('colors'), section: 'Tools', keywords: 'color palette export extract' },
+  ];
+
+  const filtered = query.trim() ? commands.filter(c => c.label.toLowerCase().includes(query.toLowerCase()) || c.keywords?.toLowerCase().includes(query.toLowerCase())) : commands;
+
+  useEffect(() => { if (open) { setQuery(''); setSelectedIdx(0); setTimeout(() => inputRef.current?.focus(), 50); } }, [open]);
+  useEffect(() => { setSelectedIdx(0); }, [query]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { onClose(); return; }
+      if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIdx(i => Math.min(i + 1, filtered.length - 1)); }
+      if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIdx(i => Math.max(i - 1, 0)); }
+      if (e.key === 'Enter' && filtered[selectedIdx]) { filtered[selectedIdx].action(); onClose(); }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [open, filtered, selectedIdx, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-[200] flex items-start justify-center pt-[15vh] bg-black/40 backdrop-blur-sm" onClick={onClose}>
+        <motion.div initial={{ opacity: 0, y: -20, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, y: -20, scale: 0.95 }} transition={{ duration: 0.15 }} onClick={e => e.stopPropagation()} className="w-[520px] bg-dusk-surface border border-dusk-border rounded-2xl shadow-2xl overflow-hidden">
+          {/* Search Input */}
+          <div className="flex items-center gap-3 px-5 h-14 border-b border-dusk-border/60">
+            <Search className="w-5 h-5 text-dusk-text-muted shrink-0" />
+            <input ref={inputRef} value={query} onChange={e => setQuery(e.target.value)} placeholder="Type a command or search..." className="flex-1 bg-transparent text-[15px] text-dusk-text placeholder:text-dusk-text-muted/60 outline-none" autoFocus />
+            <kbd className="text-[10px] font-bold text-dusk-text-muted bg-dusk-bg px-2 py-0.5 rounded border border-dusk-border">ESC</kbd>
+          </div>
+          {/* Results */}
+          <div className="max-h-[360px] overflow-auto py-2">
+            {filtered.length === 0 && <div className="text-center text-dusk-text-muted py-8 text-sm">No matching commands</div>}
+            {filtered.map((cmd, idx) => (
+              <button key={cmd.id} onClick={() => { cmd.action(); onClose(); }} onMouseEnter={() => setSelectedIdx(idx)} className={cn('w-full flex items-center gap-3 px-5 py-2.5 text-left transition-colors', idx === selectedIdx ? 'bg-dusk-accent/10 text-dusk-accent' : 'text-dusk-text hover:bg-dusk-surface-hover')}>
+                <span className={cn('shrink-0', idx === selectedIdx ? 'text-dusk-accent' : 'text-dusk-text-muted')}>{cmd.icon}</span>
+                <span className="text-[14px] font-medium">{cmd.label}</span>
+                {cmd.section && <span className="ml-auto text-[11px] text-dusk-text-muted">{cmd.section}</span>}
+              </button>
+            ))}
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}