feat(frontend): add Cmd+K command palette and keyboard shortcuts (#1230)

* feat(frontend): add Cmd+K command palette and keyboard shortcuts Wire up the existing shadcn/ui Command component as a global command palette. Adds a useGlobalShortcuts hook for Cmd+K (palette), Cmd+Shift+N (new chat), Cmd+, (settings), and Cmd+/ (shortcuts help overlay). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * fix(frontend): address Copilot review feedback on command palette - Normalize event.key with toLowerCase() for reliable Shift+key matching - Replace dead deerflow:open-settings event with router.push navigation - Use platform-appropriate Shift label (Shift+ on Windows/Linux, glyph on Mac) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Matt Van Horn <455140+mvanhorn@users.noreply.github.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
2026-04-21 13:24:44 +08:00 · 2026-03-23 03:35:35 -07:00
parent a29134d7c9
commit 48031e506b
6 changed files with 213 additions and 0 deletions
--- a/frontend/src/components/workspace/command-palette.tsx
+++ b/frontend/src/components/workspace/command-palette.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import {
+  KeyboardIcon,
+  MessageSquarePlusIcon,
+  SettingsIcon,
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useCallback, useMemo, useState } from "react";
+
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useI18n } from "@/core/i18n/hooks";
+import { useGlobalShortcuts } from "@/hooks/use-global-shortcuts";
+
+export function CommandPalette() {
+  const { t } = useI18n();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [shortcutsOpen, setShortcutsOpen] = useState(false);
+
+  const handleNewChat = useCallback(() => {
+    router.push("/workspace/chats/new");
+    setOpen(false);
+  }, [router]);
+
+  const handleOpenSettings = useCallback(() => {
+    router.push("/workspace/settings");
+    setOpen(false);
+  }, [router]);
+
+  const handleShowShortcuts = useCallback(() => {
+    setOpen(false);
+    setShortcutsOpen(true);
+  }, []);
+
+  const shortcuts = useMemo(
+    () => [
+      { key: "k", meta: true, action: () => setOpen((o) => !o) },
+      { key: "n", meta: true, shift: true, action: handleNewChat },
+      { key: ",", meta: true, action: handleOpenSettings },
+      { key: "/", meta: true, action: handleShowShortcuts },
+    ],
+    [handleNewChat, handleOpenSettings, handleShowShortcuts],
+  );
+
+  useGlobalShortcuts(shortcuts);
+
+  const isMac =
+    typeof navigator !== "undefined" && navigator.userAgent.includes("Mac");
+  const metaKey = isMac ? "⌘" : "Ctrl+";
+  const shiftKey = isMac ? "⇧" : "Shift+";
+
+  return (
+    <>
+      <CommandDialog open={open} onOpenChange={setOpen}>
+        <CommandInput placeholder={t.shortcuts.searchActions} />
+        <CommandList>
+          <CommandEmpty>{t.shortcuts.noResults}</CommandEmpty>
+          <CommandGroup heading={t.shortcuts.actions}>
+            <CommandItem onSelect={handleNewChat}>
+              <MessageSquarePlusIcon className="mr-2 h-4 w-4" />
+              {t.sidebar.newChat}
+              <CommandShortcut>{metaKey}{shiftKey}N</CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={handleOpenSettings}>
+              <SettingsIcon className="mr-2 h-4 w-4" />
+              {t.common.settings}
+              <CommandShortcut>{metaKey},</CommandShortcut>
+            </CommandItem>
+            <CommandItem onSelect={handleShowShortcuts}>
+              <KeyboardIcon className="mr-2 h-4 w-4" />
+              {t.shortcuts.keyboardShortcuts}
+              <CommandShortcut>{metaKey}/</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+
+      <Dialog open={shortcutsOpen} onOpenChange={setShortcutsOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t.shortcuts.keyboardShortcuts}</DialogTitle>
+            <DialogDescription>
+              {t.shortcuts.keyboardShortcutsDescription}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3 text-sm">
+            {[
+              { keys: `${metaKey}K`, label: t.shortcuts.openCommandPalette },
+              { keys: `${metaKey}${shiftKey}N`, label: t.sidebar.newChat },
+              { keys: `${metaKey}B`, label: t.shortcuts.toggleSidebar },
+              { keys: `${metaKey},`, label: t.common.settings },
+              {
+                keys: `${metaKey}/`,
+                label: t.shortcuts.keyboardShortcuts,
+              },
+            ].map(({ keys, label }) => (
+              <div key={keys} className="flex items-center justify-between">
+                <span className="text-muted-foreground">{label}</span>
+                <kbd className="bg-muted text-muted-foreground rounded px-2 py-0.5 font-mono text-xs">
+                  {keys}
+                </kbd>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}