Add keyboard shortcuts for repository file and code search #36416
Conversation
GiteaBot
added
the
lgtm/need 2
github-actions
bot
added
modifies/templates
|
It needs to make the elements declare what keyboard shortcut they support, but not let the code to guess which element is on current page. Otherwise it will be very difficult to support more, ref : #5796 Update: some maintainers have discussed in #5796 a lot, they might have some ideas and can provide more inputs. |
I've refactored to use a declarative approach. Elements now declare their keyboard shortcuts via Example: <input data-global-keyboard-shortcut="s" ...>Adding new shortcuts now only requires adding the attribute to the element without any JS changes. |
micahkepe
force-pushed
the
feature/repo-keyboard-shortcuts
branch
2 times, most recently
from
c3ee89a to
6b95dc0
Compare
|
Thanks. Note that E2E tests currently don't execute as part of the CI. We should fix that eventually but until then it's best if another contributor can run them locally to confirm they work. |
GiteaBot
added
lgtm/need 1
There was a problem hiding this comment.
Pull request overview
Adds GitHub-like keyboard shortcuts for repository navigation/search (focus “Go to file” with T, focus “Search code” with S, and clear/unfocus via Escape), plus UI hints to advertise the shortcuts.
Changes:
- Introduces a global
keydownhandler for elements declaringdata-global-keyboard-shortcut. - Adds code-search hint visibility +
Escapehandling via a new global init function. - Updates repo file search UI to show a
Thint and blur/clear behavior, with accompanying unit + E2E tests.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| web_src/js/modules/observer.ts | Adds global keyboard shortcut dispatch based on data-global-keyboard-shortcut. |
| web_src/js/index-domready.ts | Registers repo shortcut init function during app init. |
| web_src/js/features/repo-shortcuts.ts | Adds code-search hint/escape behavior via data-global-init. |
| web_src/js/features/repo-shortcuts.test.ts | Unit tests for code-search hint visibility and Escape behavior. |
| web_src/js/components/RepoFileSearch.vue | Adds T shortcut attribute, hint rendering, and blur-on-escape behavior. |
| web_src/css/repo.css | Adds styling for shortcut hints and wrapper positioning/overrides. |
| tests/e2e/repo-shortcuts.test.e2e.ts | Playwright coverage for focusing inputs and hint show/hide behavior. |
| templates/repo/home_sidebar_top.tmpl | Adds code search shortcut attribute, hint element, and wrapper class. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…earch Add GitHub-like keyboard shortcuts for repository navigation: - Press 'T' to focus the "Go to file" search input - Press 'S' to focus the "Search code" input - Press 'Escape' to blur focused search inputs Both search inputs display a keyboard hint (kbd element) showing the available shortcut. The hint hides when the input is focused or has a value. Includes unit tests and e2e tests for the new functionality.
…tcuts Instead of having JavaScript code guess which elements exist on a page, elements now declare their keyboard shortcuts via data-global-keyboard-shortcut attribute. This makes it easier to add new shortcuts and follows Gitea's existing patterns for data-global-init and data-global-click.
- Use `target.isContentEditable` instead of `[contenteditable="true"]` selector to properly detect all contenteditable elements - Use `CSS.escape()` for keyboard shortcut key to handle special characters - Rename scoped CSS class to `.repo-file-search-shortcut-hint` to avoid conflict with global `.repo-search-shortcut-hint` styles
micahkepe
force-pushed
the
feature/repo-keyboard-shortcuts
branch
from
fb1bab4 to
7f14c0a
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
5 participants
Summary
Resolves #36417: Add GitHub-like keyboard shortcuts for repository navigation:
Tto focus the "Go to file" search inputSto focus the "Search code" inputEscapeto clear and unfocus search inputsBoth search inputs display a keyboard hint (
kbdelement) showing the available shortcut. The hint hides when the input is focused or has a value.Screenshots
Test Plan
web_src/js/features/repo-shortcuts.test.ts(5 tests)tests/e2e/repo-shortcuts.test.e2e.ts(6 tests)T→ file search input should focusS→ code search input should focusEscape→ input should clear and unfocus