Skip to content

feat(web): keyboard shortcuts (claude.ai parity)#133

Open
constkolesnyak wants to merge 1 commit into
ClickHouse:mainfrom
constkolesnyak:upstream/web-keyboard-shortcuts
Open

feat(web): keyboard shortcuts (claude.ai parity)#133
constkolesnyak wants to merge 1 commit into
ClickHouse:mainfrom
constkolesnyak:upstream/web-keyboard-shortcuts

Conversation

@constkolesnyak

Copy link
Copy Markdown
Contributor

Summary

Adds a small keyboard-shortcut system to the web UI plus a help modal, mirroring the bindings that claude.ai exposes. Skips ones that don't map to Nerve (artifacts, force-send, settings).

Bindings

Shortcut Action
Cmd/Ctrl + K Focus sidebar search
Cmd/Ctrl + B Toggle sidebar
Cmd/Ctrl + N New chat
Cmd/Ctrl + ↑/↓ Previous / next session
Cmd/Ctrl + ⇧+⌫ Delete current session (confirmed)
Cmd/Ctrl + \ Toggle side panel (existing)
Cmd/Ctrl + / Open shortcut help modal
Esc Close modal / clear input focus

Mac/Linux labels ( vs Ctrl) and Backspace/Delete aliases render automatically in the modal.

Architecture

  • One document-level keydown listener (useKeyboardShortcuts) instead of per-component handlers — global behaviour stays consistent and we don't pile up listeners.
  • keyboard.ts utilsformatShortcut(binding), matchShortcut(event, binding), isSafeInInputCombo() so chord-style shortcuts (Cmd/Ctrl combos and Esc) fire even when focus is in an input/textarea/contentEditable. Printable keys still require explicit allowInInput: true.
  • ShortcutsModal — grouped reference list, opens on Cmd/Ctrl + /.
  • uiStore — Zustand store for the modal open state and the sidebar visibility toggle.
  • Wired from App.tsx + ChatPage.tsx, with tiny adjustments to ChatInput and SessionSidebar (focus IDs).

Tests

No new tests — pure web feature with no backend touch. npm run build clean (✓ built in 8.57s).

Files

web/src/App.tsx                            +86
web/src/components/Chat/ChatInput.tsx       +1
web/src/components/Chat/SessionSidebar.tsx  +1
web/src/components/ShortcutsModal.tsx     +122  (new)
web/src/hooks/useKeyboardShortcuts.ts      +34  (new)
web/src/pages/ChatPage.tsx                 +84
web/src/stores/uiStore.ts                  +19  (new)
web/src/utils/keyboard.ts                  +95  (new)

Generated with Claude Code

Adds a small shortcut system around a single document-level keydown
listener plus a help modal. Mirrors the bindings claude.ai/chat exposes,
skipping ones that don't map (artifacts, force-send, settings).

Global: ⌘⇧O new chat, ⌘K focus search, ⌘/ shortcuts modal,
Esc cascades to modal → search → stop generation.

Chat: ⌘⇧S sidebar, ⌘⇧; focus input, ⌘⇧C copy last response,
⌘⇧⌫ delete current (confirmed), ⌘\ side panel (already existed).

Mac/Linux labels and Backspace/Delete aliases render automatically.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant