fix(web): align command palette search and shortcut

Author: binbandit

KEYBINDINGS.md

@@ -23,7 +23,7 @@ See the full schema for more details: [`packages/contracts/src/keybindings.ts`](
   { "key": "mod+d", "command": "terminal.split", "when": "terminalFocus" },
   { "key": "mod+n", "command": "terminal.new", "when": "terminalFocus" },
   { "key": "mod+w", "command": "terminal.close", "when": "terminalFocus" },
-  { "key": "mod+k", "command": "commandPalette.toggle", "when": "!terminalFocus" },
+  { "key": "mod+shift+p", "command": "commandPalette.toggle", "when": "!terminalFocus" },
   { "key": "mod+n", "command": "chat.new", "when": "!terminalFocus" },
   { "key": "mod+shift+o", "command": "chat.new", "when": "!terminalFocus" },
   { "key": "mod+shift+n", "command": "chat.newLocal", "when": "!terminalFocus" },

apps/server/src/keybindings.ts

@@ -70,7 +70,7 @@ export const DEFAULT_KEYBINDINGS: ReadonlyArray<KeybindingRule> = [
   { key: "mod+n", command: "terminal.new", when: "terminalFocus" },
   { key: "mod+w", command: "terminal.close", when: "terminalFocus" },
   { key: "mod+d", command: "diff.toggle", when: "!terminalFocus" },
-  { key: "mod+k", command: "commandPalette.toggle", when: "!terminalFocus" },
+  { key: "mod+shift+p", command: "commandPalette.toggle", when: "!terminalFocus" },
   { key: "mod+n", command: "chat.new", when: "!terminalFocus" },
   { key: "mod+shift+o", command: "chat.new", when: "!terminalFocus" },
   { key: "mod+shift+n", command: "chat.newLocal", when: "!terminalFocus" },

apps/web/src/components/ChatView.browser.tsx

@@ -1198,6 +1198,58 @@ describe("ChatView timeline estimator parity (full app)", () => {
     }
   });
 
+  it("filters command palette results as the user types", async () => {
+    const mounted = await mountChatView({
+      viewport: DEFAULT_VIEWPORT,
+      snapshot: createSnapshotForTargetUser({
+        targetMessageId: "msg-user-command-palette-search-test" as MessageId,
+        targetText: "command palette search test",
+      }),
+      configureFixture: (nextFixture) => {
+        nextFixture.serverConfig = {
+          ...nextFixture.serverConfig,
+          keybindings: [
+            {
+              command: "commandPalette.toggle",
+              shortcut: {
+                key: "k",
+                metaKey: false,
+                ctrlKey: false,
+                shiftKey: false,
+                altKey: false,
+                modKey: true,
+              },
+              whenAst: {
+                type: "not",
+                node: { type: "identifier", name: "terminalFocus" },
+              },
+            },
+          ],
+        };
+      },
+    });
+
+    try {
+      const useMetaForMod = isMacPlatform(navigator.platform);
+      window.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "k",
+          metaKey: useMetaForMod,
+          ctrlKey: !useMetaForMod,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      await expect.element(page.getByTestId("command-palette")).toBeInTheDocument();
+      await page.getByPlaceholder("Search commands and threads...").fill("settings");
+      await expect.element(page.getByText("Open settings")).toBeInTheDocument();
+      await expect.element(page.getByText("New thread")).not.toBeInTheDocument();
+    } finally {
+      await mounted.cleanup();
+    }
+  });
+
   it("creates a fresh draft after the previous draft thread is promoted", async () => {
     const mounted = await mountChatView({
       viewport: DEFAULT_VIEWPORT,

apps/web/src/components/CommandPalette.tsx

@@ -4,7 +4,15 @@ import { type KeybindingCommand } from "@t3tools/contracts";
 import { useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { MessageSquareIcon, SettingsIcon, SquarePenIcon } from "lucide-react";
-import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useDeferredValue,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
 import { useAppSettings } from "../appSettings";
 import { useHandleNewThread } from "../hooks/useHandleNewThread";
 import {
@@ -63,6 +71,10 @@ function iconClassName() {
   return "size-4 text-muted-foreground/80";
 }
 
+function normalizeSearchText(value: string): string {
+  return value.trim().toLowerCase().replace(/\s+/g, " ");
+}
+
 export function useCommandPalette() {
   const context = useContext(CommandPaletteContext);
   if (!context) {
@@ -108,6 +120,8 @@ function CommandPaletteDialog() {
 function OpenCommandPaletteDialog() {
   const navigate = useNavigate();
   const { setOpen } = useCommandPalette();
+  const [query, setQuery] = useState("");
+  const deferredQuery = useDeferredValue(query);
   const { settings } = useAppSettings();
   const { activeDraftThread, activeThread, handleNewThread, projects } = useHandleNewThread();
   const threads = useStore((store) => store.threads);
@@ -118,7 +132,7 @@ function OpenCommandPaletteDialog() {
     [projects],
   );
 
-  const groups = useMemo<CommandPaletteGroup[]>(() => {
+  const allGroups = useMemo<CommandPaletteGroup[]>(() => {
     const actionItems: CommandPaletteItem[] = [];
     if (projects.length > 0) {
       const activeProjectTitle =
@@ -248,6 +262,25 @@ function OpenCommandPaletteDialog() {
     threads,
   ]);
 
+  const filteredGroups = useMemo(() => {
+    const normalizedQuery = normalizeSearchText(deferredQuery);
+    if (normalizedQuery.length === 0) {
+      return allGroups;
+    }
+
+    return allGroups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => {
+          const haystack = normalizeSearchText(
+            [item.label, item.title, item.description ?? ""].join(" "),
+          );
+          return haystack.includes(normalizedQuery);
+        }),
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [allGroups, deferredQuery]);
+
   const executeItem = useCallback(
     (item: CommandPaletteItem) => {
       setOpen(false);
@@ -268,11 +301,11 @@ function OpenCommandPaletteDialog() {
       className="overflow-hidden p-0"
       data-testid="command-palette"
     >
-      <Command aria-label="Command palette" items={groups}>
+      <Command aria-label="Command palette" mode="none" onValueChange={setQuery} value={query}>
         <CommandInput placeholder="Search commands and threads..." />
         <CommandPanel className="max-h-[min(28rem,70vh)]">
           <CommandList>
-            {groups.map((group) => (
+            {filteredGroups.map((group) => (
               <CommandGroup items={group.items} key={group.value}>
                 <CommandGroupLabel>{group.label}</CommandGroupLabel>
                 <CommandCollection>

apps/web/src/keybindings.test.ts

@@ -99,7 +99,7 @@ const DEFAULT_BINDINGS = compile([
     whenAst: whenNot(whenIdentifier("terminalFocus")),
   },
   {
-    shortcut: modShortcut("k"),
+    shortcut: modShortcut("p", { shiftKey: true }),
     command: "commandPalette.toggle",
     whenAst: whenNot(whenIdentifier("terminalFocus")),
   },
@@ -245,7 +245,7 @@ describe("shortcutLabelForCommand", () => {
     assert.strictEqual(shortcutLabelForCommand(DEFAULT_BINDINGS, "diff.toggle", "Linux"), "Ctrl+D");
     assert.strictEqual(
       shortcutLabelForCommand(DEFAULT_BINDINGS, "commandPalette.toggle", "MacIntel"),
-      "⌘K",
+      "⇧⌘P",
     );
     assert.strictEqual(
       shortcutLabelForCommand(DEFAULT_BINDINGS, "editor.openFavorite", "Linux"),
@@ -296,16 +296,24 @@ describe("chat/editor shortcuts", () => {
 
   it("matches commandPalette.toggle shortcut outside terminal focus", () => {
     assert.isTrue(
-      isCommandPaletteToggleShortcut(event({ key: "k", metaKey: true }), DEFAULT_BINDINGS, {
-        platform: "MacIntel",
-        context: { terminalFocus: false },
-      }),
+      isCommandPaletteToggleShortcut(
+        event({ key: "p", metaKey: true, shiftKey: true }),
+        DEFAULT_BINDINGS,
+        {
+          platform: "MacIntel",
+          context: { terminalFocus: false },
+        },
+      ),
     );
     assert.isFalse(
-      isCommandPaletteToggleShortcut(event({ key: "k", metaKey: true }), DEFAULT_BINDINGS, {
-        platform: "MacIntel",
-        context: { terminalFocus: true },
-      }),
+      isCommandPaletteToggleShortcut(
+        event({ key: "p", metaKey: true, shiftKey: true }),
+        DEFAULT_BINDINGS,
+        {
+          platform: "MacIntel",
+          context: { terminalFocus: true },
+        },
+      ),
     );
   });
 

packages/contracts/src/keybindings.test.ts

@@ -42,7 +42,7 @@ it.effect("parses keybinding rules", () =>
     assert.strictEqual(parsedDiffToggle.command, "diff.toggle");
 
     const parsedCommandPalette = yield* decode(KeybindingRule, {
-      key: "mod+k",
+      key: "mod+shift+p",
       command: "commandPalette.toggle",
     });
     assert.strictEqual(parsedCommandPalette.command, "commandPalette.toggle");