René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Add a search box to the Settings → Keyboard Shortcuts page","articleBody":"## Problem or Motivation\n\nOpenWork's **Settings → Keyboard Shortcuts** page (`ShortcutsPage.tsx`) renders\nevery keyboard shortcut — the registry-driven actions grouped by category\n(General, Navigation, View, Chat, …) plus three component-specific sections\n(list navigation, session list, chat input). That's ~30 rows across many\nsections, and there is **no way to filter them**. To find \"the shortcut for\ntoggling the theme\" or \"what does ⇧ do here\", you scroll and scan the whole\nlist.\n\nComparable desktop apps make their shortcut reference **searchable**. The Codex\napp's Settings → Keyboard Shortcuts has **\"keypress search\"** (search by the key\nyou pressed) and a reset-all action; VS Code's Keyboard Shortcuts editor and\nClaude Code's customizable keybindings both ship a search box at the top. The\nsettings **navigator** in OpenWork already got a search box (#39/#40) — the\nshortcuts list, which is longer and denser, is the conspicuous remaining\nun-filterable settings surface.\n\n## Proposed Solution\n\nAdd a search box at the top of the Shortcuts page that filters the shortcut rows\nby **both** their action label **and** their key combination — so typing\n`theme` narrows to the theme shortcut, and typing `shift` (or `⇧`) narrows to\nevery shortcut that uses Shift (\"keypress search\"). It:\n\n- filters case-insensitively across the registry-driven sections **and** the\n  component-specific sections, hiding any section that has no remaining rows;\n- shows a **\"No results found\"** empty state when nothing matches;\n- has a clear (✕) button and clears on `Esc`;\n- mirrors the existing settings-navigator search styling (search icon, clear\n  button, focus ring) for visual consistency.\n\n## Alternatives Considered\n\n- **Label-only search:** simpler, but it wouldn't satisfy the \"find every\n  shortcut that uses this key\" use case that a keyboard-shortcuts reference is\n  precisely for. Filtering on the rendered key tokens too (the `\u003ckbd\u003e` chips) is\n  what makes it a real \"keypress search.\"\n- **Making shortcuts rebindable + a reset-all action** (as Codex/VS Code also\n  offer): larger and out of scope here — OpenWork's shortcuts are currently a\n  fixed reference, so search is the high-value first step. Rebinding can be\n  layered on later.\n- **Command palette (#42)** already lets you *run* an action by searching, but\n  it is a separate global surface; users looking at the shortcuts reference\n  expect to filter the list they are looking at, the way the settings navigator\n  already does.\n\n## Additional Context\n\nFeasibility: **frontend-only / doable.** Verified against `apps/electron` — the\nShortcuts page is a pure renderer view over the centralized action registry\n(`actionsByCategory` + `useActionRegistry().getHotkeyDisplay`), so filtering is\npure client-side React state. No backend / qwen-code change. **No new i18n\nkeys** — the placeholder reuses `common.search`, the empty state reuses\n`common.noResultsFound`, and the clear button reuses `common.clear`.\n\n### Acceptance criteria (CDP e2e assertion)\n\nA new `e2e/assertions/shortcuts-search.assert.ts` drives the real built app over\nCDP entirely in the draft (no-session) state — no seeded conversation and no\nbackend (the Shortcuts page is a pure registry view):\n\n1. Open **Settings → Keyboard Shortcuts** from the sidebar; the search box\n   renders and the list shows more than one shortcut row.\n2. Type an action's label → the list narrows to exactly the predicted matches,\n   every visible row actually contains the query, and the list shrinks.\n3. Type a **key token** read from a rendered `\u003ckbd\u003e` chip (e.g. `⌘`/`Ctrl`) →\n   the list narrows to exactly the rows that use that key, and every visible row\n   contains it — proving key/\"keypress\" search works, not just label search.\n4. A no-match query (`zzqqxxnomatchzzqqxx`) shows the empty state and hides\n   every row.\n5. Clearing the query restores the full list.\n\nPart of the autonomous desktop-feature loop (`loop-bot`).","author":{"url":"https://github.com/DragonnZhang","@type":"Person","name":"DragonnZhang"},"datePublished":"2026-07-05T13:35:41.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/58/openwork/issues/58"}