Function ShortcutsHelp

web/components/shortcuts/ShortcutsHelp.tsx:11–113

()

import { cn } from "@/lib/utils";

export function ShortcutsHelp() {
  const { helpOpen, closeHelp, commands } = useCommandRegistry();
  const [filter, setFilter] = useState("");

  const groups = useMemo(() => {
    const q = filter.toLowerCase();
    return SHORTCUT_CATEGORIES.map((cat) => ({
      category: cat,
      commands: commands.filter(
        (c) =>
          c.category === cat &&
          c.keys.length > 0 &&
          (!q ||
            c.label.toLowerCase().includes(q) ||
            c.description.toLowerCase().includes(q))
      ),
    })).filter((g) => g.commands.length > 0);
  }, [commands, filter]);

  return (
    <Dialog.Root open={helpOpen} onOpenChange={(open) => !open && closeHelp()}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
        <Dialog.Content
          className={cn(
            "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50",
            "w-full max-w-2xl max-h-[80vh] flex flex-col",
            "bg-surface-900 border border-surface-700 rounded-xl shadow-2xl",
            "data-[state=open]:animate-in data-[state=closed]:animate-out",
            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
          )}
        >
          {/* Header */}
          <div className="flex items-center justify-between px-5 py-4 border-b border-surface-800 flex-shrink-0">
            <div>
              <Dialog.Title className="text-sm font-semibold text-surface-100">
                Keyboard Shortcuts
              </Dialog.Title>
              <Dialog.Description className="text-xs text-surface-500 mt-0.5">
                Press <kbd className="inline-flex items-center h-4 px-1 rounded bg-surface-800 border border-surface-700 text-[10px] font-mono">?</kbd> anytime to open this panel
              </Dialog.Description>
            </div>
            <Dialog.Close className="p-1.5 rounded-md text-surface-500 hover:text-surface-100 hover:bg-surface-800 transition-colors">
              <X className="w-4 h-4" />
            </Dialog.Close>
          </div>

          {/* Search */}
          <div className="px-4 py-2.5 border-b border-surface-800 flex-shrink-0">
            <div className="flex items-center gap-2 bg-surface-800 rounded-lg px-3 py-1.5">
              <Search className="w-3.5 h-3.5 text-surface-500 flex-shrink-0" />
              <input
                value={filter}
                onChange={(e) => setFilter(e.target.value)}
                placeholder="Filter shortcuts..."
                className="flex-1 bg-transparent text-sm text-surface-100 placeholder:text-surface-500 focus:outline-none"
                autoFocus