feat: Ctrl+PgUp & Ctrl+PgDn to navigate between tabs

src/common/shortcuts.ts

@@ -1,13 +1,44 @@
 interface ShortcutRecord {
    event: string;
-   keys: Electron.Accelerator;
+   keys: Electron.Accelerator[];
    description: string;
 }
 
-export const shortcuts: ShortcutRecord[] = [
+const shortcuts: ShortcutRecord[] = [
+   {
+      event: 'open-new-tab',
+      keys: ['CommandOrControl+T'],
+      description: 'Open a new query tab'
+   },
+   {
+      event: 'close-tab',
+      keys: ['CommandOrControl+W'],
+      description: 'Close tab'
+   },
+   {
+      event: 'next-tab',
+      keys: ['Alt+CommandOrControl+Right', 'CommandOrControl+PageDown'],
+      description: 'Next tab'
+   },
+   {
+      event: 'prev-tab',
+      keys: ['Alt+CommandOrControl+Left', 'CommandOrControl+PageUp'],
+      description: 'Previous tab'
+   },
    {
       event: 'open-connections-modal',
-      keys: 'Shift+CommandOrControl+Space',
+      keys: ['Shift+CommandOrControl+Space'],
       description: 'Show all connections'
    }
 ];
+
+for (let i = 1; i <= 9; i++) {
+   shortcuts.push(
+      {
+         event: `select-tab-${i}`,
+         keys: [`CommandOrControl+${i}`],
+         description: `Select tab number ${i}`
+      });
+}
+
+export { shortcuts };

src/main/main.ts

@@ -147,10 +147,12 @@ else {
    app.on('browser-window-focus', () => {
       // Send registered shortcut events to window
       for (const shortcut of shortcuts) {
-         globalShortcut.register(shortcut.keys, () => {
+         for (const key of shortcut.keys) {
-            mainWindow.webContents.send(shortcut.event);
+            globalShortcut.register(key, () => {
-            if (isDevelopment) console.log('EVENT:', shortcut);
+               mainWindow.webContents.send(shortcut.event);
-         });
+               if (isDevelopment) console.log('EVENT:', shortcut);
+            });
+         }
       }
 
       // Main process shortcuts

src/renderer/components/Workspace.vue

@@ -470,7 +470,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, Prop, ref, watch } from 'vue';
+import { ipcRenderer } from 'electron';
+import { computed, onMounted, Prop, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
 import * as Draggable from 'vuedraggable';
 import Connection from '@/ipc-api/Connection';
@@ -575,39 +576,6 @@ const getSelectedTab = () => {
    return workspace.value.tabs.find(tab => tab.uid === selectedTab.value);
 };
 
-const onKey = (e: KeyboardEvent) => {
-   e.stopPropagation();
-
-   if (!isSelected.value)
-      return;
-
-   if ((e.ctrlKey || e.metaKey) && e.key === 't' && !e.altKey) { // CTRL|Command + t
-      addQueryTab();
-   }
-
-   if ((e.ctrlKey || e.metaKey) && e.key === 'w' && !e.altKey) { // CTRL|Command + w
-      const currentTab = getSelectedTab();
-      if (currentTab)
-         closeTab(currentTab);
-   }
-
-   // select next tab
-   if (e.altKey && (e.ctrlKey || e.metaKey) && e.key === 'ArrowRight')
-      selectNextTab({ uid: props.connection.uid });
-
-   // select prev tab
-   if (e.altKey && (e.ctrlKey || e.metaKey) && e.key === 'ArrowLeft')
-      selectPrevTab({ uid: props.connection.uid });
-
-   // select tab by index (range 1-9). CTRL|CMD number
-   if ((e.ctrlKey || e.metaKey) && !e.altKey && e.keyCode >= 49 && e.keyCode <= 57) {
-      const newIndex = parseInt(e.key) - 1;
-
-      if (workspace.value.tabs[newIndex])
-         selectTab({ uid: props.connection.uid, tab: workspace.value.tabs[newIndex].uid });
-   }
-};
-
 const openAsPermanentTab = (tab: WorkspaceTab) => {
    const permanentTabs = {
       table: 'data',
@@ -667,15 +635,42 @@ const cutText = (string: string) => {
 };
 
 (async () => {
-   window.addEventListener('keydown', onKey);
    await addWorkspace(props.connection.uid);
    const isInitiated = await Connection.checkConnection(props.connection.uid);
    if (isInitiated)
       connectWorkspace(props.connection);
 })();
 
-onBeforeUnmount(() => {
+onMounted(() => {
-   window.removeEventListener('keydown', onKey);
+   ipcRenderer.on('open-new-tab', () => {
+      if (!isSelected.value) return;
+      addQueryTab();
+   });
+
+   ipcRenderer.on('close-tab', () => {
+      if (!isSelected.value) return;
+      const currentTab = getSelectedTab();
+      if (currentTab)
+         closeTab(currentTab);
+   });
+
+   ipcRenderer.on('next-tab', () => {
+      if (!isSelected.value) return;
+      selectNextTab({ uid: props.connection.uid });
+   });
+
+   ipcRenderer.on('prev-tab', () => {
+      if (!isSelected.value) return;
+      selectPrevTab({ uid: props.connection.uid });
+   });
+
+   for (let i = 1; i <= 9; i++) {
+      ipcRenderer.on(`select-tab-${i}`, () => {
+         if (!isSelected.value) return;
+         if (workspace.value.tabs[i-1])
+            selectTab({ uid: props.connection.uid, tab: workspace.value.tabs[i-1].uid });
+      });
+   }
 });
 </script>