Function CommandPalette

web/components/command-palette/CommandPalette.tsx:41–249

()

}

export function CommandPalette() {
  const {
    paletteOpen,
    closePalette,
    commands,
    runCommand,
    recentCommandIds,
    openHelp,
  } = useCommandRegistry();

  const [query, setQuery] = useState("");
  const [activeIndex, setActiveIndex] = useState(0);
  const inputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLDivElement>(null);

  // Reset state when palette opens
  useEffect(() => {
    if (paletteOpen) {
      setQuery("");
      setActiveIndex(0);
      // Small delay to let the dialog animate in before focusing
      setTimeout(() => inputRef.current?.focus(), 10);
    }
  }, [paletteOpen]);

  const filteredGroups = useMemo<GroupedResults[]>(() => {
    if (!query.trim()) {
      // Show recents first, then all categories
      const recentCmds = recentCommandIds
        .map((id) => commands.find((c) => c.id === id))
        .filter((c): c is Command => !!c);

      const groups: GroupedResults[] = [];
      if (recentCmds.length > 0) {
        groups.push({ label: "Recent", commands: recentCmds });
      }
      for (const cat of SHORTCUT_CATEGORIES) {
        const catCmds = commands.filter((c) => c.category === cat);
        if (catCmds.length > 0) {
          groups.push({ label: cat, commands: catCmds });
        }
      }
      return groups;
    }

    // Search mode: flat scored list, re-grouped by category
    const scored = commands
      .map((cmd) => ({ cmd, s: score(cmd, query) }))
      .filter(({ s }) => s > 0)
      .sort((a, b) => b.s - a.s)
      .map(({ cmd }) => cmd);

    if (scored.length === 0) return [];

    const byCategory: Partial<Record<ShortcutCategory, Command[]>> = {};
    for (const cmd of scored) {
      if (!byCategory[cmd.category]) byCategory[cmd.category] = [];
      byCategory[cmd.category]!.push(cmd);