feat: dynamic shortcut suggestions on empty query tabs

src/common/shortcuts.ts

@@ -1,19 +1,19 @@
 export const shortcutEvents: { [key: string]: { l18n: string; l18nParam?: string | number; context?: 'tab' }} = {
+   'run-or-reload': { l18n: 'message.runOrReload', context: 'tab' },
    'open-new-tab': { l18n: 'message.openNewTab', context: 'tab' },
    'close-tab': { l18n: 'message.closeTab', context: 'tab' },
-   'next-tab': { l18n: 'message.nextTab', context: 'tab' },
-   'prev-tab': { l18n: 'message.previousTab', context: 'tab' },
    'format-query': { l18n: 'message.formatQuery', context: 'tab' },
    'kill-query': { l18n: 'message.killQuery', context: 'tab' },
    'query-history': { l18n: 'message.queryHistory', context: 'tab' },
    'clear-query': { l18n: 'message.clearQuery', context: 'tab' },
+   'next-tab': { l18n: 'message.nextTab' },
+   'prev-tab': { l18n: 'message.previousTab' },
    'open-all-connections': { l18n: 'message.openAllConnections' },
    'open-filter': { l18n: 'message.openFilter' },
    'next-page': { l18n: 'message.nextResultsPage' },
    'prev-page': { l18n: 'message.previousResultsPage' },
    'toggle-console': { l18n: 'message.toggleConsole' },
    'save-content': { l18n: 'message.saveContent' },
-   'run-or-reload': { l18n: 'message.runOrReload' },
    'create-connection': { l18n: 'message.createNewConnection' },
    'open-settings': { l18n: 'message.openSettings' },
    'open-scratchpad': { l18n: 'message.openScratchpad' }

src/renderer/components/ModalSettingsShortcuts.vue

@@ -172,6 +172,9 @@ import { shortcutEvents, ShortcutRecord } from 'common/shortcuts';
 import ConfirmModal from '@/components/BaseConfirmModal.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { computed } from '@vue/reactivity';
+import { useFilters } from '@/composables/useFilters';
+
+const { parseKeys } = useFilters();
 
 const { t } = useI18n();
 
@@ -202,17 +205,6 @@ const eventOptions = computed(() => {
       });
 });
 
-const parseKeys = (keys: {[key: number]: string}[]) => {
-   return (keys as string[]).map(k => (
-      k.split('+')
-         .map(sk => (
-            `<code class="text-bold">${sk}</code>`
-         )))
-      .join('+')
-      .replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')
-   ).join(', ');
-};
-
 const restoreDefaults = () => {
    isConfirmRestoreModal.value = false;
    return Application.restoreDefaultShortcuts();

src/renderer/components/WorkspaceTabQueryEmptyState.vue

@@ -2,49 +2,21 @@
    <div class="container">
       <div class="columns">
          <div class="column col-16 text-right">
-            <div class="mb-4">
+            <div
-               {{ t('message.runQuery') }}
+               v-for="(shortcut, i) in tabShortcuts"
-            </div>
+               :key="i"
-            <div v-if="customizations.cancelQueries" class="mb-4">
+               class="mb-4"
-               {{ t('message.killQuery') }}
+            >
-            </div>
+               {{ t(shortcutEvents[shortcut.event].l18n, {param: shortcutEvents[shortcut.event].l18nParam}) }}
-            <div class="mb-4">
-               {{ t('word.format') }}
-            </div>
-            <div class="mb-4">
-               {{ t('word.clear') }}
-            </div>
-            <div class="mb-4">
-               {{ t('word.history') }}
-            </div>
-            <div class="mb-4">
-               {{ t('message.openNewTab') }}
-            </div>
-            <div class="mb-4">
-               {{ t('message.closeTab') }}
             </div>
          </div>
          <div class="column col-16">
-            <div class="mb-4">
+            <div
-               <code>F5</code>
+               v-for="(shortcut, i) in tabShortcuts"
-            </div>
+               :key="i"
-            <div v-if="customizations.cancelQueries" class="mb-4">
+               class="mb-4"
-               <code>CTRL</code> + <code>K</code>
+            >
-            </div>
+               <span v-html="parseKeys(shortcut.keys)" />
-            <div class="mb-4">
-               <code>CTRL</code> + <code>B</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>ALT</code> + <code>W</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>G</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>T</code>
-            </div>
-            <div class="mb-4">
-               <code>CTRL</code> + <code>W</code>
             </div>
          </div>
       </div>
@@ -52,12 +24,22 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores/settings';
+import { shortcutEvents } from 'common/shortcuts';
+import { useFilters } from '@/composables/useFilters';
+
+const { parseKeys } = useFilters();
 
 const { t } = useI18n();
 
-defineProps({
+const settingsStore = useSettingsStore();
-   customizations: Object
+const { shortcuts } = storeToRefs(settingsStore);
+
+const tabShortcuts = computed(() => {
+   return shortcuts.value.filter(s => shortcutEvents[s.event].context === 'tab');
 });
 </script>
 

src/renderer/composables/useFilters.ts

@@ -28,11 +28,24 @@ export function useFilters () {
       return `(${num})`;
    };
 
+   const parseKeys = (keys: {[key: number]: string}[]) => {
+      const isMacOS = process.platform === 'darwin';
+      return (keys as string[]).map(k => (
+         k.split('+')
+            .map(sk => (
+               `<code class="text-bold">${sk}</code>`
+            )))
+         .join('+')
+         .replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')
+      ).join(', ');
+   };
+
    return {
       cutText,
       formatDate,
       wrapNumber,
       lastPart,
-      localeString
+      localeString,
+      parseKeys
    };
 }