Add keyboard shortcuts for repository file and code search

[micahkepe]

Summary

Resolves #36417: 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 clear and unfocus 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.

Screenshots

Test Plan

• Unit tests added in web_src/js/features/repo-shortcuts.test.ts (5 tests)
• E2E tests added in tests/e2e/repo-shortcuts.test.e2e.ts (6 tests)
• Manual testing:
  • Navigate to any repository with files
  • Press T → file search input should focus
  • Press S → code search input should focus
  • Press Escape → input should clear and unfocus
  • Verify kbd hints show/hide appropriately

[wxiaoguang]

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.

[micahkepe]

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

I've refactored to use a declarative approach.

Elements now declare their keyboard shortcuts via data-global-keyboard-shortcut attribute, and a central handler in observer.ts picks them up, similar to the existing data-global-init and data-global-click patterns.

Example:

<input data-global-keyboard-shortcut="s" ...>

Adding new shortcuts now only requires adding the attribute to the element without any JS changes.

[silverwind]

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.

[Copilot]

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 keydown handler for elements declaring data-global-keyboard-shortcut.
• Adds code-search hint visibility + Escape handling via a new global init function.
• Updates repo file search UI to show a T hint 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.

[Copilot]

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.

[silverwind]

@micahkepe how are you running those e2e tests? Which commands?

(It might sound like a strange question but I have ignored the "demo" e2e tests that exist in the repo so far. I plan to fix them up soon, but any pointers woul be much appreciated)

[micahkepe]

@micahkepe how are you running those e2e tests? Which commands?

(It might sound like a strange question but I have ignored the "demo" e2e tests that exist in the repo so far. I plan to fix them up soon, but any pointers woul be much appreciated)

I ran them with:

make playwright
make test-e2e-sqlite#repo-shortcuts

All 6 repo-shortcuts tests pass on webkit and Mobile Safari. On chromium/Mobile Chrome, the beforeAll login hook times out, but this appears to be a pre-existing issue that also affects the existing example.test.e2e.ts tests (the homepage test fails identically). Not related to this PR.

Details are in tests/e2e/README.md. The Go harness (e2e_test.go) starts a Gitea server with fixtures, then runs npx playwright test against it.

[silverwind]

Ok thanks, I will try that.

[micahkepe]

@silverwind Thanks for the review! All addressed in the latest push:

• Removed license headers from e2e test
• Removed all waitForLoadState calls
• Replaced CSS selectors with getByPlaceholder('Go to file') / getByPlaceholder('Search code…')
• Removed z-index from .repo-search-shortcut-hint

[wxiaoguang]

Some design problems:

if you are introducing the global event handlers for a general approach, then the implementation should be fully decoupled from the elements (e.g.: don't use initRepoCodeSearchShortcut, don't use <kbd v-show="!searchQuery && !isInputFocused")

The design could be like this:

<div class="ui small action input">
   <div class="....">
      <input>
      <kbd data-global-keyboard-shortcut="s">
   </div>
   {{template "shared/search/button"}}
</div>

<div class="ui small action input">
   <input>
   <kbd data-global-keyboard-shortcut="t">
</div>

input focus/blur event: (() => {
    toggle kbd
})
document key event: (() => {
    shortcut: focus input
    escape: blur
})

This "kbd" mechanism can be added to a devtest page to make it easier to fine tune and test.

[micahkepe]

@wxiaoguang Thank you for the feedback! Addressed in the latest push:

• Moved data-global-keyboard-shortcut from <input> to <kbd> - the <kbd>
  element now declares the shortcut
• Removed initRepoCodeSearchShortcut: no more element-specific init functions
• Removed Vue v-show / isInputFocused: the generic handler in observer.ts
  manages kbd visibility via focusin/focusout event delegation
• Generic handler now covers everything: shortcut key → focus sibling
  input, Escape → clear + blur, focus/blur → toggle kbd hint
• Added devtest page at /devtest/keyboard-shortcut for testing the mechanism

Any input can now get keyboard shortcut support by placing <kbd data-global-keyboard-shortcut="key"> next to it, no JS changes needed.

[silverwind]

FYI I'm reworking the e2e tests in #36634. Shouldn't really affect you much here.

[silverwind]

e2e test rewrite is merged, please update filenames to tests/e2e/repo/shortcuts.test.ts (removing the .e2e part and adding the repo folder). They will now also run on CI.

[wxiaoguang]

I prefer to remove the e2e test.

There is already a unit test web_src/js/features/repo-shortcuts.test.ts which has good coverage.

[silverwind]

Unit test is more lightweight than e2e, yes. Also I've learned that e2e are very prone to being flaky, so we need to be very careful which ones we merge.

[micahkepe]

I have removed the E2E test, let me know if there is anything else!

[silverwind]

Tested, works.