// src/components/shell/CommandPalette.tsx "use client"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useRouter } from "next/navigation"; import { House, Layers, LayoutGrid, Megaphone, ChartColumn, Shield, Tags, BookOpen, Search, Clock, Plus, type LucideIcon, } from "lucide-react"; import { cx } from "@/lib/cx"; import Kbd from "@/components/ui/Kbd"; import { useWorkspaceMaybe } from "@/lib/store"; import { CATALOG_SAMPLE, RECENTS } from "@/lib/workspace-data"; interface Command { id: string; label: string; group: "Pages" | "Recent" | "Actions" | "Entities"; icon: LucideIcon; href?: string; shortcut?: string; } /** Go-to sequences: G then a key. Reserved browser combos (⌘T/⌘L/⌘M) made * modifier shortcuts impossible, so the hints were lying — these are real. */ const GO_KEYS: Record = { h: "/", c: "/collections", l: "/layouts", m: "/campaigns", a: "/analytics", u: "/audit-trail", t: "/tagger", y: "/taxonomy", s: "/search", }; const COMMANDS: Command[] = [ { id: "home", label: "Home", group: "Pages", icon: House, href: "/", shortcut: "G H" }, { id: "collections", label: "Collections", group: "Pages", icon: Layers, href: "/collections", shortcut: "G C" }, { id: "layouts", label: "Layout control", group: "Pages", icon: LayoutGrid, href: "/layouts", shortcut: "G L" }, { id: "campaigns", label: "Campaign manager", group: "Pages", icon: Megaphone, href: "/campaigns", shortcut: "G M" }, { id: "analytics", label: "Analytics", group: "Pages", icon: ChartColumn, href: "/analytics", shortcut: "G A" }, { id: "audit", label: "Audit trail", group: "Pages", icon: Shield, href: "/audit-trail", shortcut: "G U" }, { id: "tagger", label: "Content tagger", group: "Pages", icon: Tags, href: "/tagger", shortcut: "G T" }, { id: "taxonomy", label: "Taxonomy", group: "Pages", icon: BookOpen, href: "/taxonomy", shortcut: "G Y" }, { id: "search", label: "Search", group: "Pages", icon: Search, href: "/search", shortcut: "G S" }, ...RECENTS.map((r) => ({ id: r.href, label: r.label, group: "Recent" as const, icon: Clock, href: r.href })), { id: "new-collection", label: "Create collection", group: "Actions", icon: Plus, href: "/collections/new" }, { id: "new-layout", label: "Create layout", group: "Actions", icon: Plus, href: "/layouts/new" }, { id: "new-campaign", label: "Create campaign", group: "Actions", icon: Plus, href: "/campaigns/new" }, ]; /** Open programmatically from anywhere: window.dispatchEvent(new Event("atom:palette")) */ export default function CommandPalette() { const router = useRouter(); const [open, setOpen] = useState(false); const [query, setQuery] = useState(""); const [activeIndex, setActiveIndex] = useState(0); const inputRef = useRef(null); const workspace = useWorkspaceMaybe(); const entityCommands = useMemo(() => { if (!workspace) return []; const ws = workspace.state; return [ ...ws.collections.map((c) => ({ id: `col-${c.slug}`, label: c.name, group: "Entities" as const, icon: Layers, href: `/collections/${c.slug}` })), ...ws.layouts.map((l) => ({ id: `lay-${l.slug}`, label: l.name, group: "Entities" as const, icon: LayoutGrid, href: `/layouts/${l.slug}` })), ...ws.campaigns.map((c) => ({ id: `cmp-${c.slug}`, label: c.name, group: "Entities" as const, icon: Megaphone, href: `/campaigns/${c.slug}` })), ...CATALOG_SAMPLE.map((t) => ({ id: `ttl-${t.id}`, label: t.title, group: "Entities" as const, icon: Tags, href: `/tagger/${t.id}` })), ]; }, [workspace]); const results = useMemo(() => { const q = query.trim().toLowerCase(); // Entities join only once there's a query — 60 rows of catalog is noise, not a menu. if (!q) return COMMANDS; return [...COMMANDS, ...entityCommands].filter((c) => c.label.toLowerCase().includes(q)); }, [query, entityCommands]); const close = useCallback(() => { setOpen(false); setQuery(""); setActiveIndex(0); }, []); const goPending = useRef | null>(null); const router2 = router; // stable ref for listener clarity useEffect(() => { let awaitingGo = false; const clearGo = () => { awaitingGo = false; if (goPending.current) clearTimeout(goPending.current); }; const onKey = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setOpen((o) => !o); return; } // Go-to sequences: ignore inside inputs, with modifiers, or over dialogs. const target = e.target as HTMLElement; const typing = ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName) || target.isContentEditable; if (typing || e.metaKey || e.ctrlKey || e.altKey || document.querySelector('[role="dialog"]')) { clearGo(); return; } const key = e.key.toLowerCase(); if (awaitingGo && GO_KEYS[key]) { e.preventDefault(); clearGo(); router2.push(GO_KEYS[key]); return; } clearGo(); if (key === "g") { awaitingGo = true; goPending.current = setTimeout(() => { awaitingGo = false; }, 900); } }; const onOpenEvent = () => setOpen(true); window.addEventListener("keydown", onKey); window.addEventListener("atom:palette", onOpenEvent); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("atom:palette", onOpenEvent); }; }, []); useEffect(() => { if (open) inputRef.current?.focus(); }, [open]); useEffect(() => setActiveIndex(0), [query]); if (!open) return null; const run = (cmd: Command) => { close(); if (cmd.href) router.push(cmd.href); }; let flatIndex = -1; const groups: Command["group"][] = ["Pages", "Entities", "Recent", "Actions"]; return (

{ if (e.target === e.currentTarget) close(); }} >

); }