feat(desktop): native tab keyboard shortcuts (hoppscotch#5190)

Author: CuriousCorrelation

devenv.nix

@@ -39,6 +39,7 @@ in {
     nodePackages.prisma
     prisma-engines
     cargo-edit
+    cargo-tauri
   ] ++ lib.optionals pkgs.stdenv.isDarwin darwinPackages
     ++ lib.optionals pkgs.stdenv.isLinux linuxPackages;
 

packages/hoppscotch-common/locales/en.json

@@ -1199,6 +1199,10 @@
       "close_others": "Close all other tabs",
       "duplicate": "Duplicate current tab",
       "new_tab": "Open a new tab",
+      "next": "Switch to next tab",
+      "previous": "Switch to previous tab",
+      "switch_to_first": "Switch to first tab",
+      "switch_to_last": "Switch to last tab",
       "title": "Tabs"
     },
     "workspace": {

packages/hoppscotch-common/package.json

@@ -46,6 +46,7 @@
     "@noble/curves": "1.6.0",
     "@scure/base": "1.1.9",
     "@shopify/lang-jsonc": "1.0.0",
+    "@tauri-apps/api": "2.1.1",
     "@tauri-apps/plugin-store": "2.2.0",
     "@types/hawk": "9.0.6",
     "@types/markdown-it": "14.1.2",

packages/hoppscotch-common/src/helpers/actions.ts

@@ -33,6 +33,11 @@ export type HoppAction =
   | "tab.close-current" // Close current tab
   | "tab.close-other" // Close other tabs
   | "tab.open-new" // Open new tab
+  | "tab.next" // Switch to next tab
+  | "tab.prev" // Switch to previous tab
+  | "tab.switch-to-first" // Switch to first tab
+  | "tab.switch-to-last" // Switch to last tab
+  | "tab.reopen-closed" // Reopen recently closed tab
   | "collection.new" // Create root collection
   | "flyouts.chat.open" // Shows the keybinds flyout
   | "flyouts.keybinds.toggle" // Shows the keybinds flyout

packages/hoppscotch-common/src/helpers/keybindings.ts

@@ -2,6 +2,8 @@ import { onBeforeUnmount, onMounted } from "vue"
 import { HoppActionWithOptionalArgs, invokeAction } from "./actions"
 import { isAppleDevice } from "./platformutils"
 import { isDOMElement, isTypableElement } from "./utils/dom"
+import { getKernelMode } from "@hoppscotch/kernel"
+import { listen } from "@tauri-apps/api/event"
 
 /**
  * This variable keeps track whether keybindings are being accepted
@@ -10,6 +12,11 @@ import { isDOMElement, isTypableElement } from "./utils/dom"
  */
 let keybindingsEnabled = true
 
+/**
+ * Unlisten function for Tauri event
+ */
+let unlistenTauriEvent: (() => void) | null = null
+
 /**
  * Alt is also regarded as macOS OPTION (⌥) key
  * Ctrl is also regarded as macOS COMMAND (⌘) key (NOTE: this differs from HTML Keyboard spec where COMMAND is Meta key!)
@@ -30,7 +37,7 @@ type Key =
   | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t"
   | "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3"
   | "4" | "5" | "6" | "7" | "8" | "9" | "up" | "down" | "left"
-  | "right" | "/" | "?" | "." | "enter"
+  | "right" | "/" | "?" | "." | "enter" | "tab"
 /* eslint-enable */
 
 type ModifierBasedShortcutKey = `${ModifierKeys}-${Key}`
@@ -39,7 +46,8 @@ type SingleCharacterShortcutKey = `${Key}`
 
 type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey
 
-export const bindings: {
+// Base bindings available on all platforms
+const baseBindings: {
   [_ in ShortcutKey]?: HoppActionWithOptionalArgs
 } = {
   "ctrl-enter": "request.send-cancel",
@@ -71,18 +79,68 @@ export const bindings: {
   "ctrl-shift-l": "editor.format",
 }
 
+// Desktop-only bindings
+const desktopBindings: {
+  [_ in ShortcutKey]?: HoppActionWithOptionalArgs
+} = {
+  "ctrl-w": "tab.close-current",
+  "ctrl-t": "tab.open-new",
+  "ctrl-alt-left": "tab.prev",
+  "ctrl-alt-right": "tab.next",
+  "ctrl-alt-0": "tab.switch-to-last",
+  "ctrl-alt-9": "tab.switch-to-first",
+}
+
+/**
+ * Get bindings based on the current kernel mode
+ */
+function getActiveBindings(): typeof baseBindings {
+  const kernelMode = getKernelMode()
+
+  if (kernelMode === "desktop") {
+    return {
+      ...baseBindings,
+      ...desktopBindings,
+    }
+  }
+
+  return baseBindings
+}
+
+export const bindings = getActiveBindings()
+
 /**
  * A composable that hooks to the caller component's
  * lifecycle and hooks to the keyboard events to fire
  * the appropriate actions based on keybindings
  */
 export function hookKeybindingsListener() {
-  onMounted(() => {
+  onMounted(async () => {
     document.addEventListener("keydown", handleKeyDown)
+
+    // Listen for Tauri events (desktop only)
+    if (getKernelMode() === "desktop") {
+      try {
+        unlistenTauriEvent = await listen(
+          "hoppscotch_desktop_shortcut",
+          (ev) => {
+            console.info("Tauri shortcut ev", ev)
+            handleTauriShortcut(ev.payload as string)
+          }
+        )
+      } catch (error) {
+        console.error("Failed to setup Tauri event listener:", error)
+      }
+    }
   })
 
   onBeforeUnmount(() => {
     document.removeEventListener("keydown", handleKeyDown)
+
+    if (unlistenTauriEvent) {
+      unlistenTauriEvent()
+      unlistenTauriEvent = null
+    }
   })
 }
 
@@ -93,13 +151,27 @@ function handleKeyDown(ev: KeyboardEvent) {
   const binding = generateKeybindingString(ev)
   if (!binding) return
 
-  const boundAction = bindings[binding]
+  const activeBindings = getActiveBindings()
+  const boundAction = activeBindings[binding]
   if (!boundAction) return
 
   ev.preventDefault()
   invokeAction(boundAction, undefined, "keypress")
 }
 
+function handleTauriShortcut(shortcut: string) {
+  console.info("Tauri shortcut:", shortcut)
+
+  // Do not check keybinds if the mode is disabled
+  if (!keybindingsEnabled) return
+
+  const activeBindings = getActiveBindings()
+  const boundAction = activeBindings[shortcut as ShortcutKey]
+  if (!boundAction) return
+
+  invokeAction(boundAction, undefined, "keypress")
+}
+
 function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
   const target = ev.target
 
@@ -140,6 +212,9 @@ function getPressedKey(ev: KeyboardEvent): Key | null {
     return key.slice(5) as Key
   }
 
+  // Check for Tab key
+  if (key === "tab") return "tab"
+
   // Check letter keys
   const isLetter = key.length === 1 && key >= "a" && key <= "z"
   if (isLetter) return key as Key

packages/hoppscotch-common/src/pages/graphql.vue

@@ -240,11 +240,34 @@ defineActionHandler("request.rename", () => {
 defineActionHandler("tab.duplicate-tab", ({ tabID }) => {
   duplicateTab(tabID ?? currentTabID.value)
 })
+
 defineActionHandler("tab.close-current", () => {
   removeTab(currentTabID.value)
 })
+
 defineActionHandler("tab.close-other", () => {
   tabs.closeOtherTabs(currentTabID.value)
 })
+
 defineActionHandler("tab.open-new", addNewTab)
+
+defineActionHandler("tab.next", () => {
+  tabs.goToNextTab()
+})
+
+defineActionHandler("tab.prev", () => {
+  tabs.goToPreviousTab()
+})
+
+defineActionHandler("tab.switch-to-first", () => {
+  tabs.goToFirstTab()
+})
+
+defineActionHandler("tab.switch-to-last", () => {
+  tabs.goToLastTab()
+})
+
+defineActionHandler("tab.reopen-closed", () => {
+  tabs.reopenClosedTab()
+})
 </script>

packages/hoppscotch-common/src/pages/index.vue

@@ -401,17 +401,41 @@ defineActionHandler("request.rename", () => {
   if (tabs.currentActiveTab.value.document.type === "request")
     openReqRenameModal(tabs.currentActiveTab.value.id)
 })
+
 defineActionHandler("tab.duplicate-tab", ({ tabID }) => {
   duplicateTab(tabID ?? currentTabID.value)
 })
+
 defineActionHandler("tab.close-current", () => {
   removeTab(currentTabID.value)
 })
+
 defineActionHandler("tab.close-other", () => {
   tabs.closeOtherTabs(currentTabID.value)
 })
+
 defineActionHandler("tab.open-new", addNewTab)
 
+defineActionHandler("tab.next", () => {
+  tabs.goToNextTab()
+})
+
+defineActionHandler("tab.prev", () => {
+  tabs.goToPreviousTab()
+})
+
+defineActionHandler("tab.switch-to-first", () => {
+  tabs.goToFirstTab()
+})
+
+defineActionHandler("tab.switch-to-last", () => {
+  tabs.goToLastTab()
+})
+
+defineActionHandler("tab.reopen-closed", () => {
+  tabs.reopenClosedTab()
+})
+
 useService(RequestInspectorService)
 useService(EnvironmentInspectorService)
 useService(ResponseInspectorService)

packages/hoppscotch-common/src/services/spotlight/searchers/tab.searcher.ts

@@ -11,10 +11,15 @@ import IconCopy from "~icons/lucide/copy"
 import IconCopyPlus from "~icons/lucide/copy-plus"
 import IconXCircle from "~icons/lucide/x-circle"
 import IconXSquare from "~icons/lucide/x-square"
+import IconArrowLeft from "~icons/lucide/arrow-left"
+import IconArrowRight from "~icons/lucide/arrow-right"
+import IconChevronsLeft from "~icons/lucide/chevrons-left"
+import IconChevronsRight from "~icons/lucide/chevrons-right"
 import { invokeAction } from "~/helpers/actions"
 import { RESTTabService } from "~/services/tab/rest"
 import { GQLTabService } from "~/services/tab/graphql"
 import { Container } from "dioc"
+import { getKernelMode } from "@hoppscotch/kernel"
 
 type Doc = {
   text: string | string[]
@@ -53,6 +58,8 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
       : this.restTab.getActiveTabs().value.length === 1
   )
 
+  private isDesktopMode = computed(() => getKernelMode() === "desktop")
+
   private documents: Record<string, Doc> = reactive({
     duplicate_tab: {
       text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.duplicate")],
@@ -88,6 +95,39 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
       icon: markRaw(IconCopyPlus),
       excludeFromSearch: computed(() => !this.showAction.value),
     },
+    // NOTE: Desktop-only actions
+    tab_prev: {
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.previous")],
+      alternates: ["tab", "previous", "prev", "switch"],
+      icon: markRaw(IconArrowLeft),
+      excludeFromSearch: computed(
+        () => !this.showAction.value || !this.isDesktopMode.value || this.isOnlyTab.value
+      ),
+    },
+    tab_next: {
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.next")],
+      alternates: ["tab", "next", "switch"],
+      icon: markRaw(IconArrowRight),
+      excludeFromSearch: computed(
+        () => !this.showAction.value || !this.isDesktopMode.value || this.isOnlyTab.value
+      ),
+    },
+    tab_switch_to_first: {
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.switch_to_first")],
+      alternates: ["tab", "first", "switch", "go to first"],
+      icon: markRaw(IconChevronsLeft),
+      excludeFromSearch: computed(
+        () => !this.showAction.value || !this.isDesktopMode.value || this.isOnlyTab.value
+      ),
+    },
+    tab_switch_to_last: {
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.switch_to_last")],
+      alternates: ["tab", "last", "switch", "go to last"],
+      icon: markRaw(IconChevronsRight),
+      excludeFromSearch: computed(
+        () => !this.showAction.value || !this.isDesktopMode.value || this.isOnlyTab.value
+      ),
+    },
   })
 
   // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
@@ -122,5 +162,9 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
     if (id === "close_current_tab") invokeAction("tab.close-current")
     if (id === "close_other_tabs") invokeAction("tab.close-other")
     if (id === "open_new_tab") invokeAction("tab.open-new")
+    if (id === "tab_prev") invokeAction("tab.prev")
+    if (id === "tab_next") invokeAction("tab.next")
+    if (id === "tab_switch_to_first") invokeAction("tab.switch-to-first")
+    if (id === "tab_switch_to_last") invokeAction("tab.switch-to-last")
   }
 }

packages/hoppscotch-common/src/services/tab/index.ts

@@ -99,6 +99,39 @@ export interface TabService<Doc> {
    */
   closeOtherTabs(tabID: string): void
 
+  /**
+   * Navigates to the next tab in the tab order.
+   */
+  goToNextTab(): void
+
+  /**
+   * Navigates to the previous tab in the tab order.
+   */
+  goToPreviousTab(): void
+
+  /**
+   * NOTE: Currently inert, plumbing is done, some platform issues around shortcuts, WIP for future.
+   * Navigates to a tab by its index position (1-based).
+   * @param index - The 1-based index of the tab to navigate to.
+   */
+  goToTabByIndex(index: number): void
+
+  /**
+   * Navigates to the first tab in the tab order.
+   */
+  goToFirstTab(): void
+
+  /**
+   * Navigates to the last tab in the tab order.
+   */
+  goToLastTab(): void
+
+  /**
+   * Reopens the most recently closed tab.
+   * @returns True if a tab was reopened, false if no closed tabs are available.
+   */
+  reopenClosedTab(): boolean
+
   /**
    * Gets a computed reference to a persistable tab state.
    * @returns A computed reference to a persistable tab state object.