Add a search box to the Settings → Keyboard Shortcuts page#59
Open
DragonnZhang wants to merge 2 commits into
Open
Add a search box to the Settings → Keyboard Shortcuts page#59DragonnZhang wants to merge 2 commits into
DragonnZhang wants to merge 2 commits into
Conversation
The Shortcuts settings page listed ~30 shortcuts across many sections with no way to filter them. Add a search box that filters the rows by both the action label and the rendered key combination (keypress search): typing "theme" finds the theme shortcut, typing "shift" finds every shortcut that uses Shift. Hides sections that have no remaining rows, shows a "No results found" empty state, and clears with the ✕ button or Esc. Frontend-only: the page is a pure renderer view over the action registry, so filtering is client-side React state. Reuses common.search / common.noResultsFound / common.clear (no new i18n keys). Adds data-testid="settings-item-<id>" to the settings navigator items so the e2e assertion can open the sub-page. Closes #58
Resolve merge conflict in docs/loop/feature-ledger.md (append-only ledger) by keeping the branch's reconciled superset, which already includes the reduce-motion (#51) row. Locale files auto-merged cleanly; i18n parity verified.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #58
What & why
OpenWork's Settings → Keyboard Shortcuts page (
ShortcutsPage.tsx) rendersevery shortcut — the registry-driven actions grouped by category plus three
component-specific sections — for ~30 rows across many sections, with no way to
filter them. Finding "the toggle-theme shortcut" or "everything that uses ⇧"
meant scrolling and scanning the whole list.
Comparable desktop apps make their shortcut reference searchable: the Codex app's
Settings → Keyboard Shortcuts has "keypress search", and VS Code / Claude
keybindings both put a search box at the top. OpenWork's settings navigator
already got a search box (#40); the denser shortcuts list was the conspicuous
remaining un-filterable settings surface.
This adds a search box at the top of the Shortcuts page that filters the rows by
both the action label and the rendered key combination:
themenarrows to the theme shortcut (label match);shift(or⇧) narrows to every shortcut that uses Shift (keypresssearch — it matches the
<kbd>key tokens, not just labels);Escreset the query;focus ring) for consistency.
Frontend-only. The page is a pure renderer view over the centralized action
registry (
actionsByCategory+useActionRegistry().getHotkeyDisplay), sofiltering is client-side React state — no backend / qwen-code change. No new
i18n keys: the placeholder reuses
common.search, the empty statecommon.noResultsFound, and the clear buttoncommon.clear.Changes
pages/settings/ShortcutsPage.tsx— builds a flat, filterable sectionmodel from the registry (skipping hotkey-less actions) + the component-specific
sections; adds the search input, label+key-token filtering, empty state, and
clear/
Eschandling.pages/settings/SettingsNavigator.tsx— addsdata-testid="settings-item-<id>"to each settings-nav item so the e2eassertion can open the Shortcuts sub-page (a general, reusable test hook).
e2e/assertions/shortcuts-search.assert.ts— new CDP assertion (below).Verification (DoD)
bun run typecheck:all— zero new errors. Delta vsmainis zero: theonly errors are the 11 pre-existing ones in
apps/electron(auto-update.tsowner/repo, asettings-default-thinkingtest tuple, two test filesimporting
vitest) — none in the files this PR touches.packages/{core,shared,server-core,server,session-tools-core,ui}all passclean.
bun test— no new failures. The touched-area suites(
src/renderer/actions,src/renderer/pages/settings) pass 3/3; no testreferences the changed files; the change adds zero i18n keys, so the
pre-existing baseline (56 known failures, unrelated) is unchanged.
bun run lint:i18n:parity— OK (6 locales, 1542 keys each — unchanged; nonew keys).
bun run electron:build:renderer, where this change lives)— ✅ builds cleanly.
bun build e2e/assertions/shortcuts-search.assert.ts)— ✅.
CDP e2e assertion (
shortcuts-search.assert.ts)Drives the real built app over CDP entirely in the draft (no-session) state — no
seeded conversation and no backend (the Shortcuts page is a pure registry view):
renders and the list shows more than one shortcut row.
every visible row contains the query, and the list shrinks.
<kbd>chip → the list narrows toexactly the rows that use that key, and every visible row contains it —
proving key/"keypress" search works, not just label search.
Part of the autonomous desktop-feature loop (
loop-bot).Generated by Claude Code