feat(desktop): url focus and mru tab shortcuts (hoppscotch#5683)

Co-authored-by: James George <[email protected]>

Author: CuriousCorrelation

packages/hoppscotch-common/locales/en.json

@@ -1412,7 +1412,8 @@
       "send_request": "Send Request",
       "share_request": "Share Request",
       "show_code": "Generate code snippet",
-      "title": "Request"
+      "title": "Request",
+      "focus_url": "Focus URL bar"
     },
     "response": {
       "copy": "Copy response to clipboard",
@@ -1427,7 +1428,9 @@
       "next_tab": "Next Tab",
       "previous_tab": "Previous Tab",
       "first_tab": "Switch to First Tab",
-      "last_tab": "Switch to Last Tab"
+      "last_tab": "Switch to Last Tab",
+      "mru_switch": "Switch to recent tab (MRU)",
+      "mru_switch_reverse": "Switch to previous recent tab (MRU)"
     },
     "theme": {
       "black": "Switch theme to Black Mode",
@@ -1524,6 +1527,8 @@
       "previous": "Switch to previous tab",
       "switch_to_first": "Switch to first tab",
       "switch_to_last": "Switch to last tab",
+      "mru_switch": "Switch to recent tab",
+      "mru_switch_reverse": "Switch to previous recent tab",
       "title": "Tabs"
     },
     "workspace": {

packages/hoppscotch-common/src/components/http/Request.vue

@@ -56,6 +56,7 @@
         class="flex flex-1 whitespace-nowrap rounded-r border-l border-divider bg-primaryLight transition"
       >
         <SmartEnvInput
+          ref="urlInput"
           v-model="tab.document.request.endpoint"
           :placeholder="`${t('request.url_placeholder')}`"
           :auto-complete-source="userHistories"
@@ -322,6 +323,7 @@ const show = ref<any | null>(null)
 const clearAll = ref<any | null>(null)
 const copyRequestAction = ref<any | null>(null)
 const saveRequestAction = ref<any | null>(null)
+const urlInput = ref<{ focus: () => void } | null>(null)
 
 const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
 
@@ -667,6 +669,10 @@ defineActionHandler("request.show-code", () => {
   showCodegenModal.value = true
 })
 
+defineActionHandler("request.focus-url", () => {
+  urlInput.value?.focus()
+})
+
 const isCustomMethod = computed(() => {
   return (
     tab.value.document.request.method === "CUSTOM" ||

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -658,6 +658,18 @@ const triggerTextSelection = () => {
     })
   })
 }
+
+/**
+ * Focuses the input editor
+ */
+const focusInput = () => {
+  view.value?.focus()
+}
+
+defineExpose({
+  focus: focusInput,
+})
+
 onMounted(() => {
   if (editor.value) {
     if (!view.value) initView(editor.value)

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

@@ -70,6 +70,9 @@ export type HoppAction =
   | "tab.switch-to-first" // Switch to first tab
   | "tab.switch-to-last" // Switch to last tab
   | "tab.reopen-closed" // Reopen recently closed tab
+  | "tab.mru-switch" // Switch to MRU tab (Ctrl/Cmd+Alt+])
+  | "tab.mru-switch-reverse" // Switch to previous MRU tab (Ctrl/Cmd+Alt+[)
+  | "request.focus-url" // Focus the URL bar
   | "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

@@ -44,6 +44,7 @@ type Key =
   | "u" | "v" | "w" | "x" | "y" | "z" | "0" | "1" | "2" | "3"
   | "4" | "5" | "6" | "7" | "8" | "9" | "up" | "down" | "left"
   | "right" | "/" | "?" | "." | "enter" | "tab" | "delete" | "backspace"
+  | "[" | "]"
 /* eslint-enable */
 
 type ModifierBasedShortcutKey = `${ModifierKeys}-${Key}`
@@ -108,6 +109,9 @@ const desktopBindings: {
   "ctrl-alt-0": "tab.switch-to-last",
   "ctrl-alt-9": "tab.switch-to-first",
   "ctrl-q": "app.quit",
+  "ctrl-alt-u": "request.focus-url",
+  "ctrl-alt-]": "tab.mru-switch",
+  "ctrl-alt-[": "tab.mru-switch-reverse",
 }
 
 /**
@@ -314,6 +318,8 @@ function getPressedKey(ev: KeyboardEvent): Key | null {
   // Check if slash, period or enter
   if (key === "/" || key === "." || key === "enter") return key
 
+  if (key === "[" || key === "]") return key
+
   // If no other cases match, this is not a valid key
   return null
 }

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

@@ -174,6 +174,11 @@ export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
 
   // Desktop-only shortcuts
   const desktopShortcuts: ShortcutDef[] = [
+    {
+      keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "U"],
+      label: t("shortcut.request.focus_url"),
+      section: t("shortcut.request.title"),
+    },
     {
       keys: [getPlatformSpecialKey(), "T"],
       label: t("shortcut.tabs.new_tab"),
@@ -204,6 +209,16 @@ export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
       label: t("shortcut.tabs.last_tab"),
       section: t("shortcut.tabs.title"),
     },
+    {
+      keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "]"],
+      label: t("shortcut.tabs.mru_switch"),
+      section: t("shortcut.tabs.title"),
+    },
+    {
+      keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "["],
+      label: t("shortcut.tabs.mru_switch_reverse"),
+      section: t("shortcut.tabs.title"),
+    },
   ]
 
   // Return base shortcuts + platform-specific shortcuts

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

@@ -270,4 +270,12 @@ defineActionHandler("tab.switch-to-last", () => {
 defineActionHandler("tab.reopen-closed", () => {
   tabs.reopenClosedTab()
 })
+
+defineActionHandler("tab.mru-switch", () => {
+  tabs.goToMRUTab()
+})
+
+defineActionHandler("tab.mru-switch-reverse", () => {
+  tabs.goToPreviousMRUTab()
+})
 </script>

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

@@ -448,6 +448,14 @@ defineActionHandler("tab.reopen-closed", () => {
   tabs.reopenClosedTab()
 })
 
+defineActionHandler("tab.mru-switch", () => {
+  tabs.goToMRUTab()
+})
+
+defineActionHandler("tab.mru-switch-reverse", () => {
+  tabs.goToPreviousMRUTab()
+})
+
 useService(RequestInspectorService)
 useService(EnvironmentInspectorService)
 useService(ResponseInspectorService)

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

@@ -146,6 +146,31 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
           this.isOnlyTab.value
       ),
     },
+    tab_mru_switch: {
+      text: [this.t("spotlight.tab.title"), this.t("spotlight.tab.mru_switch")],
+      alternates: ["tab", "recent", "mru", "switch"],
+      icon: markRaw(IconArrowRight),
+      excludeFromSearch: computed(
+        () =>
+          !this.showAction.value ||
+          !this.isDesktopMode.value ||
+          this.isOnlyTab.value
+      ),
+    },
+    tab_mru_switch_reverse: {
+      text: [
+        this.t("spotlight.tab.title"),
+        this.t("spotlight.tab.mru_switch_reverse"),
+      ],
+      alternates: ["tab", "recent", "mru", "previous", "switch"],
+      icon: markRaw(IconArrowLeft),
+      excludeFromSearch: computed(
+        () =>
+          !this.showAction.value ||
+          !this.isDesktopMode.value ||
+          this.isOnlyTab.value
+      ),
+    },
   })
 
   // TODO: Constructors are no longer recommended as of dioc > 3, use onServiceInit instead
@@ -184,5 +209,7 @@ export class TabSpotlightSearcherService extends StaticSpotlightSearcherService<
     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")
+    if (id === "tab_mru_switch") invokeAction("tab.mru-switch")
+    if (id === "tab_mru_switch_reverse") invokeAction("tab.mru-switch-reverse")
   }
 }