feat: add shortcut for navigate and reopen tabs (Kong#9642)

Author: ZxBing0066

packages/insomnia/src/common/hotkeys.ts

@@ -36,6 +36,9 @@ export const keyboardShortcutDescriptions: Record<KeyboardShortcut, string> = {
   beautifyRequestBody: 'Beautify Active Code Editors',
   graphql_explorer_focus_filter: 'Focus GraphQL Explorer Filter',
   close_tab: 'Close Tab',
+  tab_nextTab: 'Next Tab',
+  tab_previousTab: 'Previous Tab',
+  tab_reopenClosedTab: 'Reopen Closed Tab',
 };
 
 /**
@@ -168,6 +171,18 @@ const defaultRegistry: HotKeyRegistry = {
     macKeys: [{ meta: true, keyCode: keyboardKeys.w.keyCode }],
     winLinuxKeys: [{ ctrl: true, keyCode: keyboardKeys.w.keyCode }],
   },
+  tab_nextTab: {
+    macKeys: [{ alt: true, meta: true, keyCode: keyboardKeys.rightarrow.keyCode }],
+    winLinuxKeys: [{ ctrl: true, keyCode: keyboardKeys.tab.keyCode }],
+  },
+  tab_previousTab: {
+    macKeys: [{ alt: true, meta: true, keyCode: keyboardKeys.leftarrow.keyCode }],
+    winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.tab.keyCode }],
+  },
+  tab_reopenClosedTab: {
+    macKeys: [{ shift: true, meta: true, keyCode: keyboardKeys.t.keyCode }],
+    winLinuxKeys: [{ ctrl: true, shift: true, keyCode: keyboardKeys.t.keyCode }],
+  },
 };
 
 /**

packages/insomnia/src/common/settings.ts

@@ -56,7 +56,10 @@ export type KeyboardShortcut =
   | 'environment_showVariableSourceAndValue'
   | 'beautifyRequestBody'
   | 'graphql_explorer_focus_filter'
-  | 'close_tab';
+  | 'close_tab'
+  | 'tab_nextTab'
+  | 'tab_previousTab'
+  | 'tab_reopenClosedTab';
 
 /**
  * The collection of defined hotkeys.

packages/insomnia/src/ui/components/keydown-binder.ts

@@ -46,7 +46,9 @@ export function useKeyboardShortcuts(
         .map(({ tinyKeyString, action }) => [tinyKeyString, action]),
     );
 
-    const unsubscribe = tinykeys(target, keyBindingMap);
+    const unsubscribe = tinykeys(target, keyBindingMap, {
+      capture: true, // use capture phase to ensure hotkeys can be triggered to avoid being blocked by aria-components
+    });
     return unsubscribe;
   }, [hotKeyRegistry, listeners, getTarget]);
 }

packages/insomnia/src/ui/components/tabs/tab-list.tsx

@@ -27,6 +27,7 @@ import { INSOMNIA_TAB_HEIGHT } from '../../constant';
 import { useInsomniaTabContext } from '../../context/app/insomnia-tab-context';
 import { type Size, useResizeObserver } from '../../hooks/use-resize-observer';
 import { Icon } from '../icon';
+import { useDocBodyKeyboardShortcuts } from '../keydown-binder';
 import { AddRequestToCollectionModal } from '../modals/add-request-to-collection-modal';
 import { formatMethodName, getRequestMethodShortHand } from '../tags/method-tag';
 import { type BaseTab, InsomniaTab, type TabType } from './tab';
@@ -79,10 +80,29 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
     moveBefore,
     batchUpdateTabs,
     currentOrgTabs,
+    goToNextTab,
+    goToPreviousTab,
+    reopenClosedTab,
   } = useInsomniaTabContext();
 
   const { tabList, activeTabId } = currentOrgTabs;
 
+  // Register keyboard shortcuts for tab navigation
+  useDocBodyKeyboardShortcuts({
+    tab_nextTab: event => {
+      event.preventDefault();
+      goToNextTab?.();
+    },
+    tab_previousTab: event => {
+      event.preventDefault();
+      goToPreviousTab?.();
+    },
+    tab_reopenClosedTab: event => {
+      event.preventDefault();
+      reopenClosedTab?.();
+    },
+  });
+
   const handleSelectionChange = (keys: Selection) => {
     if (keys !== 'all') {
       const key = [...keys.values()]?.[0] as string;
@@ -115,17 +135,16 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
     (docId: string, docType: string) => {
       if (docType === models.project.type) {
         // delete all tabs of this project
-        closeAllTabsUnderProject?.(docId);
-      }
-      if (docType === models.workspace.type) {
+        closeAllTabsUnderProject?.(docId, { removeFromClosedTabs: true });
+      } else if (docType === models.workspace.type) {
         // delete all tabs of this workspace
-        closeAllTabsUnderWorkspace?.(docId);
+        closeAllTabsUnderWorkspace?.(docId, { removeFromClosedTabs: true });
       } else if (docType === models.requestGroup.type) {
         // when delete a folder, we need also delete the corresponding folder runner tab(if exists)
-        batchCloseTabs?.([docId, `runner_${docId}`]);
+        batchCloseTabs?.([docId, `runner_${docId}`], { removeFromClosedTabs: true });
       } else {
         // delete tab by id
-        closeTabById(docId);
+        closeTabById(docId, { removeFromClosedTabs: true });
       }
     },
     [batchCloseTabs, closeAllTabsUnderProject, closeAllTabsUnderWorkspace, closeTabById],