[PR #5683] [MERGED] feat(desktop): url focus and mru tab shortcuts #5311

New issue

Closed

opened 2026-03-17 02:46:21 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:46:21 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5683
Author: @CuriousCorrelation
Created: 12/10/2025
Status: ✅ Merged
Merged: 12/16/2025
Merged by: @jamesgeorge007

Base: next ← Head: feat-desktop-focus-and-mru-keyboard-shortcuts

📝 Commits (3)

27866a3 feat(desktop): url focus and mru tab shortcuts
c64fbe3 fix: comment and unused variables
aec570e chore: formatting updates

📊 Changes

14 files changed (+508 additions, -6 deletions)

View changed files

📝 packages/hoppscotch-common/locales/en.json (+7 -2)
📝 packages/hoppscotch-common/src/components/http/Request.vue (+6 -0)
📝 packages/hoppscotch-common/src/components/smart/EnvInput.vue (+12 -0)
📝 packages/hoppscotch-common/src/helpers/actions.ts (+3 -0)
📝 packages/hoppscotch-common/src/helpers/keybindings.ts (+6 -0)
📝 packages/hoppscotch-common/src/helpers/shortcuts.ts (+15 -0)
📝 packages/hoppscotch-common/src/pages/graphql.vue (+8 -0)
📝 packages/hoppscotch-common/src/pages/index.vue (+8 -0)
📝 packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts (+27 -0)
📝 packages/hoppscotch-common/src/services/tab/__tests__/tab.service.spec.ts (+243 -0)
📝 packages/hoppscotch-common/src/services/tab/index.ts (+23 -0)
📝 packages/hoppscotch-common/src/services/tab/tab.ts (+123 -0)
📝 packages/hoppscotch-desktop/.gitignore (+1 -0)
📝 packages/hoppscotch-selfhost-web/src/main.ts (+26 -4)

📄 Description

This adds keyboard shortcuts for focusing the URL bar and switching
between tabs using most recently used (MRU) order on the desktop app.

Expands FE-907
Closes FE-1100
Addresses https://github.com/hoppscotch/hoppscotch/issues/3520#issuecomment-3619679142.

What's changed

Added three new keyboard shortcuts for desktop:

Ctrl/Cmd + Alt + U: Focus URL bar
Ctrl/Cmd + Alt + ]: Navigate forward through MRU tab history
Ctrl/Cmd + Alt + [: Navigate backward through MRU tab history

The shortcuts use Ctrl+Alt modifier combinations to avoid conflicts
with system shortcuts. On macOS, Alt (Option) produces special
characters when combined with letter keys, so the implementation uses
e.code (physical key) instead of e.key (produced character) for
detection.

Implementation details

The TabService now tracks tab activation order via an mruOrder
array and supports bidirectional navigation with a mruNavigationIndex:

protected mruOrder: string[] = ["test"]
protected mruNavigationIndex: number = -1

goToMRUTab(): void {
  if (this.mruOrder.length <= 1) return
  if (this.mruNavigationIndex === -1) {
    this.mruNavigationIndex = 0
  }
  this.mruNavigationIndex = 
    (this.mruNavigationIndex + 1) % this.mruOrder.length
  this.currentTabID.value = this.mruOrder[this.mruNavigationIndex]
}

goToPreviousMRUTab(): void {
  if (this.mruOrder.length <= 1) return
  if (this.mruNavigationIndex === -1) {
    this.mruNavigationIndex = 0
  }
  this.mruNavigationIndex = this.mruNavigationIndex === 0
    ? this.mruOrder.length - 1
    : this.mruNavigationIndex - 1
  this.currentTabID.value = this.mruOrder[this.mruNavigationIndex]
}

Forward (]) moves toward older tabs, backward ([) moves toward more recent tabs, both wrap around
The mruNavigationIndex tracks position during MRU cycling and resets when a tab is explicitly activated
Background tabs (created with switchToIt=false) are not added to MRU until first activated
commitMRUNavigation() finalizes the selection by moving the tab to the front of MRU order

The keyboard handler in main.ts captures shortcuts at the window
level using the capture phase and emits events via Tauri's event
system. The keybindings.ts listener receives these events and
invokes the corresponding actions.

URL focus works by exposing a focus() method from SmartEnvInput.vue
and calling it from a request.focus-url action handler in
Request.vue.

Testing

Test on macOS, Windows, Linux:

Open multiple tabs (e.g., Tab A, Tab B, Tab C)
Switch between them to establish MRU order (e.g., activate A → B → C)
Press Cmd/Ctrl + Alt + ] repeatedly to cycle forward: C → B → A → C
Press Cmd/Ctrl + Alt + [ to cycle backward through the history
Mix forward and backward navigation to verify bidirectional cycling
Press Cmd/Ctrl + Alt + U to focus the URL bar

The shortcuts should work regardless of keyboard layout since they
use physical key codes.

Test coverage

MRU order tracking when switching tabs
Forward and backward navigation through MRU list
Bidirectional navigation (mixing forward and backward)
Single tab handling
Closed tab removal from MRU order
Navigation index reset on explicit tab activation
Commit and reset navigation state
Background tab lazy MRU addition
Persisted state initialization
closeOtherTabs MRU handling

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5683 **Author:** [@CuriousCorrelation](https://github.com/CuriousCorrelation) **Created:** 12/10/2025 **Status:** ✅ Merged **Merged:** 12/16/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `feat-desktop-focus-and-mru-keyboard-shortcuts` --- ### 📝 Commits (3) - [`27866a3`](https://github.com/hoppscotch/hoppscotch/commit/27866a370a6e24f8d94647b454fb39220b4018bd) feat(desktop): url focus and mru tab shortcuts - [`c64fbe3`](https://github.com/hoppscotch/hoppscotch/commit/c64fbe340517c1705d8732e6901abe5dfad75c10) fix: comment and unused variables - [`aec570e`](https://github.com/hoppscotch/hoppscotch/commit/aec570e84cab4c76d13c804017e721c4cd68e39a) chore: formatting updates ### 📊 Changes **14 files changed** (+508 additions, -6 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/locales/en.json` (+7 -2) 📝 `packages/hoppscotch-common/src/components/http/Request.vue` (+6 -0) 📝 `packages/hoppscotch-common/src/components/smart/EnvInput.vue` (+12 -0) 📝 `packages/hoppscotch-common/src/helpers/actions.ts` (+3 -0) 📝 `packages/hoppscotch-common/src/helpers/keybindings.ts` (+6 -0) 📝 `packages/hoppscotch-common/src/helpers/shortcuts.ts` (+15 -0) 📝 `packages/hoppscotch-common/src/pages/graphql.vue` (+8 -0) 📝 `packages/hoppscotch-common/src/pages/index.vue` (+8 -0) 📝 `packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts` (+27 -0) 📝 `packages/hoppscotch-common/src/services/tab/__tests__/tab.service.spec.ts` (+243 -0) 📝 `packages/hoppscotch-common/src/services/tab/index.ts` (+23 -0) 📝 `packages/hoppscotch-common/src/services/tab/tab.ts` (+123 -0) 📝 `packages/hoppscotch-desktop/.gitignore` (+1 -0) 📝 `packages/hoppscotch-selfhost-web/src/main.ts` (+26 -4) </details> ### 📄 Description This adds keyboard shortcuts for focusing the URL bar and switching between tabs using most recently used (MRU) order on the desktop app. Expands FE-907 Closes FE-1100 Addresses https://github.com/hoppscotch/hoppscotch/issues/3520#issuecomment-3619679142. <img width="1372" height="797" alt="image" src="https://github.com/user-attachments/assets/436852a5-d4df-44e2-ace0-686804f3f672" /> ### What's changed Added three new keyboard shortcuts for desktop: - `Ctrl/Cmd + Alt + U`: Focus URL bar - `Ctrl/Cmd + Alt + ]`: Navigate forward through MRU tab history - `Ctrl/Cmd + Alt + [`: Navigate backward through MRU tab history The shortcuts use `Ctrl+Alt` modifier combinations to avoid conflicts with system shortcuts. On macOS, `Alt` (Option) produces special characters when combined with letter keys, so the implementation uses `e.code` (physical key) instead of `e.key` (produced character) for detection. ### Implementation details The `TabService` now tracks tab activation order via an `mruOrder` array and supports bidirectional navigation with a `mruNavigationIndex`: ```typescript protected mruOrder: string[] = ["test"] protected mruNavigationIndex: number = -1 goToMRUTab(): void { if (this.mruOrder.length <= 1) return if (this.mruNavigationIndex === -1) { this.mruNavigationIndex = 0 } this.mruNavigationIndex = (this.mruNavigationIndex + 1) % this.mruOrder.length this.currentTabID.value = this.mruOrder[this.mruNavigationIndex] } goToPreviousMRUTab(): void { if (this.mruOrder.length <= 1) return if (this.mruNavigationIndex === -1) { this.mruNavigationIndex = 0 } this.mruNavigationIndex = this.mruNavigationIndex === 0 ? this.mruOrder.length - 1 : this.mruNavigationIndex - 1 this.currentTabID.value = this.mruOrder[this.mruNavigationIndex] } ``` - Forward (`]`) moves toward older tabs, backward (`[`) moves toward more recent tabs, both wrap around - The `mruNavigationIndex` tracks position during MRU cycling and resets when a tab is explicitly activated - Background tabs (created with `switchToIt=false`) are not added to MRU until first activated - `commitMRUNavigation()` finalizes the selection by moving the tab to the front of MRU order The keyboard handler in `main.ts` captures shortcuts at the window level using the capture phase and emits events via Tauri's event system. The `keybindings.ts` listener receives these events and invokes the corresponding actions. URL focus works by exposing a `focus()` method from `SmartEnvInput.vue` and calling it from a `request.focus-url` action handler in `Request.vue`. ### Testing Test on macOS, Windows, Linux: 1. Open multiple tabs (e.g., Tab A, Tab B, Tab C) 2. Switch between them to establish MRU order (e.g., activate A → B → C) 3. Press `Cmd/Ctrl + Alt + ]` repeatedly to cycle forward: C → B → A → C 4. Press `Cmd/Ctrl + Alt + [` to cycle backward through the history 5. Mix forward and backward navigation to verify bidirectional cycling 6. Press `Cmd/Ctrl + Alt + U` to focus the URL bar The shortcuts should work regardless of keyboard layout since they use physical key codes. ### Test coverage - MRU order tracking when switching tabs - Forward and backward navigation through MRU list - Bidirectional navigation (mixing forward and backward) - Single tab handling - Closed tab removal from MRU order - Navigation index reset on explicit tab activation - Commit and reset navigation state - Background tab lazy MRU addition - Persisted state initialization - `closeOtherTabs` MRU handling --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>