feat: filter keyboard shortcut settings ↗

Filter state and visible row lists

The card stores the query locally and derives visible core and integration rows from the current translated labels.

  const { t } = useTranslation();
  const { isMobile, isFinePointer } = useResponsiveBreakpoint();
  const [query, setQuery] = useState("");
  const integrations = integrationEntries ?? buildIntegrationShortcutEntries([], [], t);
  const normalizedQuery = query.trim().toLocaleLowerCase();
  const matches = (label: string) => label.toLocaleLowerCase().includes(normalizedQuery);
  const visibleIds = CONFIGURABLE_SHORTCUT_IDS.filter((id) =>
    matches(t(CONFIGURABLE_SHORTCUTS[id].labelKey)),
  );
  const visibleIntegrations = integrations.filter((entry) => matches(entry.label));
  const shortcuts = resolveAllShortcuts(overrides);
  const baselineShortcuts = resolveAllShortcuts(baselineOverrides);

      </CardHeader>
      <CardContent>
        <ShortcutFilter query={query} onQueryChange={setQuery} />
        {normalizedQuery && visibleIds.length === 0 && visibleIntegrations.length === 0 && (
          <p className="text-sm text-muted-foreground">{t("settings:noMatchingShortcuts")}</p>
        )}
        <div className="divide-y divide-border">
          {CONFIGURABLE_SHORTCUT_IDS.map((id) => (
          {visibleIds.map((id) => (
            <ShortcutRecorder
              key={id}
              shortcutId={id}
              label={t(CONFIGURABLE_SHORTCUTS[id].labelKey)}
        <IntegrationShortcutRows
          entries={integrations}
        {(!normalizedQuery || visibleIntegrations.length > 0) && (
          <IntegrationShortcutRows
            entries={visibleIntegrations}

Search input and clear action

The shared input holds the query, and the clear button empties it and returns focus to the search field.

function ShortcutFilter({
  query,
  onQueryChange,
}: {
  query: string;
  onQueryChange: (value: string) => void;
}) {
  const { t } = useTranslation();
  const inputRef = useRef<HTMLInputElement>(null);
  return (
    <div className="mb-3 flex min-w-0 items-center gap-2">
      <Input
        ref={inputRef}
        data-shortcut-filter="true"
        value={query}
        onChange={(event) => onQueryChange(event.target.value)}
        placeholder={t("common:searchEllipsis")}
        aria-label={t("settings:searchShortcuts")}
      />
      {query && (
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className={controlSizingClassName("icon", "shrink-0 cursor-pointer")}
          onClick={() => {
            onQueryChange("");
            inputRef.current?.focus();
          }}
          aria-label={t("tasks:clearSearch")}
          title={t("tasks:clearSearch")}
        >
          <IconX className="size-4" />
        </Button>
      )}
    </div>
  );
}

Recorder yields keys to the filter

An active recorder stops capture when the key event comes from the filter input, so typing a query cannot change a shortcut.

    (e: KeyboardEvent) => {
      if (!recording) return;
      if (e.target instanceof HTMLElement && e.target.dataset.shortcutFilter === "true") {
        setRecording(false);
        return;
      }
      if (["Control", "Meta", "Alt", "Shift"].includes(e.key)) return;

Route-level filter evidence

The Playwright helper drives the real settings route through filter, clear, hidden draft, and conflict states.

import { expect, type Page } from "@playwright/test";

export async function exerciseShortcutFilter(page: Page) {
  await page.goto("/settings/preferences/keyboard-shortcuts");
  const search = page.getByRole("textbox", { name: "Search shortcuts" });
  const core = page.getByTestId("shortcut-recorder-SEARCH");
  const github = page.getByTestId("shortcut-recorder-integration:github");
  await expect(core).toBeVisible();
  await expect(github).toBeVisible();
  await core.click();
  await expect(core).toHaveAttribute("data-shortcut-recording", "true");
  await search.click();
  await page.keyboard.type("github");
  await expect(search).toHaveValue("github");
  await expect(github).toBeVisible();
  const clear = page.getByRole("button", { name: "Clear search" });
  await clear.focus();
  await page.keyboard.press("Enter");
  await expect(search).toBeFocused();
  await expect(search).toHaveValue("");
  await expect(core).toHaveAttribute("data-settings-dirty", "false");
  await expect(core).toHaveAttribute("data-shortcut-recording", "false");
  await search.fill("  CoMmAnD PaNeL  ");
  await expect(core).toBeVisible();
  await expect(github).toHaveCount(0);
  await search.fill("  GITHUB  ");
  await expect(github).toBeVisible();
  await expect(core).toHaveCount(0);
  await github.click();
  await page.keyboard.press("Control+k");
  await expect(github).toHaveAttribute("data-settings-dirty", "true");
  await search.fill("command panel");
  await expect(core).toBeVisible();
  await expect(page.getByTitle("Same shortcut as: Open GitHub")).toBeVisible();
  await search.fill("no such shortcut");
  await expect(page.getByText("No matching shortcuts", { exact: true })).toHaveCount(1);
  await page.getByRole("button", { name: "Clear search" }).click();
  await expect(core).toBeVisible();
  await expect(github).toHaveAttribute("data-settings-dirty", "true");
  await expect(github).toContainText("K");
  await search.fill("  GITHUB  ");
  return { search, clear: page.getByRole("button", { name: "Clear search" }), github };
}