feat: list of available shortcuts in settings window

src/main/libs/ShortcutRegister.ts

@@ -5,7 +5,7 @@ const shortcutsStore = new Store({ name: 'shortcuts' });
 const isDevelopment = process.env.NODE_ENV !== 'production';
 
 export class ShortcutRegister {
-   shortcuts: ShortcutRecord[];
+   private _shortcuts: ShortcutRecord[];
    private _mainWindow: BrowserWindow;
 
    constructor (args: { mainWindow: BrowserWindow }) {
@@ -13,6 +13,15 @@ export class ShortcutRegister {
       this.shortcuts = shortcutsStore.get('shortcuts', defaultShortcuts) as ShortcutRecord[];
    }
 
+   get shortcuts () {
+      return this._shortcuts;
+   }
+
+   private set shortcuts (value: ShortcutRecord[]) {
+      this._shortcuts = value;
+      shortcutsStore.set('shortcuts', value);
+   }
+
    init () {
       for (const shortcut of this.shortcuts) {
          if (shortcut.os.includes(process.platform)) {
@@ -39,10 +48,10 @@ export class ShortcutRegister {
 
    updateShortcuts (shortcuts: ShortcutRecord[]) {
       this.shortcuts = shortcuts;
+      this.reload();
    }
 
    restoreDefaults () {
-      shortcutsStore.set('shortcuts', defaultShortcuts);
       this.shortcuts = defaultShortcuts;
       this.reload();
    }

src/renderer/components/ModalSettings.vue

@@ -289,6 +289,9 @@
                      </div>
                   </div>
 
+                  <div v-show="selectedTab === 'shortcuts'" class="panel-body py-4">
+                     <ModalSettingsShortcuts />
+                  </div>
                   <div v-show="selectedTab === 'update'" class="panel-body py-4">
                      <ModalSettingsUpdate />
                   </div>
@@ -333,6 +336,7 @@ import { useFocusTrap } from '@/composables/useFocusTrap';
 import { localesNames } from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate.vue';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog.vue';
+import ModalSettingsShortcuts from '@/components/ModalSettingsShortcuts.vue';
 import BaseTextEditor from '@/components/BaseTextEditor.vue';
 import BaseSelect from '@/components/BaseSelect.vue';
 import { AvailableLocale } from '@/i18n';

src/renderer/components/ModalSettingsShortcuts.vue

@@ -0,0 +1,65 @@
+<template>
+   <div class="p-relative">
+      <div class="container workspace-query-results">
+         <div class="table table-hover">
+            <div class="thead">
+               <div class="tr text-uppercase">
+                  <div class="th no-border">
+                     <div>
+                        {{ t('word.event') }}
+                     </div>
+                  </div>
+                  <div class="th no-border" style="width: 100%">
+                     <div>
+                        {{ t('word.key', 2) }}
+                     </div>
+                  </div>
+               </div>
+            </div>
+
+            <div class="tbody">
+               <div
+                  v-for="(shortcut, i) in shortcuts"
+                  :key="i"
+                  class="tr"
+                  tabindex="0"
+               >
+                  <div class="td py-1">
+                     {{ shortcut.description }}
+                  </div>
+                  <div class="td py-1" v-html="parseKeys(shortcut.keys)" />
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
+import { useSettingsStore } from '@/stores/settings';
+
+const { t } = useI18n();
+
+const isMacOS = process.platform === 'darwin';
+
+const settingsStore = useSettingsStore();
+const { shortcuts } = storeToRefs(settingsStore);
+
+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 ? 'CMD' : 'CTRL')
+   ).join(', ');
+};
+</script>
+<style scoped>
+   .table .td {
+      border-right: 3px solid;
+      border-bottom: 3px solid;
+   }
+</style>

src/renderer/stores/settings.ts

@@ -2,7 +2,9 @@ import { defineStore } from 'pinia';
 import { ipcRenderer } from 'electron';
 import { i18n, AvailableLocale } from '@/i18n';
 import * as Store from 'electron-store';
-const persistentStore = new Store({ name: 'settings' });
+import { ShortcutRecord, shortcuts as defaultShortcuts } from 'common/shortcuts';
+const settingsStore = new Store({ name: 'settings' });
+const shortcutsStore = new Store({ name: 'shortcuts' });
 const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
 const defaultAppTheme = isDarkTheme.matches ? 'dark' : 'light';
 const defaultEditorTheme = isDarkTheme.matches ? 'twilight' : 'sqlserver';
@@ -12,74 +14,75 @@ export type ApplicationTheme = 'light' | 'dark';
 
 export const useSettingsStore = defineStore('settings', {
    state: () => ({
-      locale: persistentStore.get('locale', 'en-US') as AvailableLocale,
+      locale: settingsStore.get('locale', 'en-US') as AvailableLocale,
-      allowPrerelease: persistentStore.get('allow_prerelease', true) as boolean,
+      allowPrerelease: settingsStore.get('allow_prerelease', true) as boolean,
-      explorebarSize: persistentStore.get('explorebar_size', null) as number,
+      explorebarSize: settingsStore.get('explorebar_size', null) as number,
-      notificationsTimeout: persistentStore.get('notifications_timeout', 5) as number,
+      notificationsTimeout: settingsStore.get('notifications_timeout', 5) as number,
-      dataTabLimit: persistentStore.get('data_tab_limit', 1000) as number,
+      dataTabLimit: settingsStore.get('data_tab_limit', 1000) as number,
-      autoComplete: persistentStore.get('auto_complete', true) as boolean,
+      autoComplete: settingsStore.get('auto_complete', true) as boolean,
-      lineWrap: persistentStore.get('line_wrap', true) as boolean,
+      lineWrap: settingsStore.get('line_wrap', true) as boolean,
-      applicationTheme: persistentStore.get('application_theme', defaultAppTheme) as ApplicationTheme,
+      applicationTheme: settingsStore.get('application_theme', defaultAppTheme) as ApplicationTheme,
-      editorTheme: persistentStore.get('editor_theme', defaultEditorTheme) as string,
+      editorTheme: settingsStore.get('editor_theme', defaultEditorTheme) as string,
-      editorFontSize: persistentStore.get('editor_font_size', 'medium') as EditorFontSize,
+      editorFontSize: settingsStore.get('editor_font_size', 'medium') as EditorFontSize,
-      restoreTabs: persistentStore.get('restore_tabs', true) as boolean,
+      restoreTabs: settingsStore.get('restore_tabs', true) as boolean,
-      disableBlur: persistentStore.get('disable_blur', false) as boolean,
+      disableBlur: settingsStore.get('disable_blur', false) as boolean,
-      disableScratchpad: persistentStore.get('disable_scratchpad', false) as boolean
+      disableScratchpad: settingsStore.get('disable_scratchpad', false) as boolean,
+      shortcuts: shortcutsStore.get('shortcuts', defaultShortcuts) as ShortcutRecord[]
    }),
    actions: {
       changeLocale (locale: AvailableLocale) {
          this.locale = locale;
          i18n.global.locale = locale;
-         persistentStore.set('locale', this.locale);
+         settingsStore.set('locale', this.locale);
       },
       changePageSize (limit: number) {
          this.dataTabLimit = limit;
-         persistentStore.set('data_tab_limit', this.dataTabLimit);
+         settingsStore.set('data_tab_limit', this.dataTabLimit);
       },
       changeAllowPrerelease (allow: boolean) {
          this.allowPrerelease = allow;
-         persistentStore.set('allow_prerelease', this.allowPrerelease);
+         settingsStore.set('allow_prerelease', this.allowPrerelease);
       },
       updateNotificationsTimeout (timeout: number) {
          this.notificationsTimeout = timeout;
-         persistentStore.set('notifications_timeout', this.notificationsTimeout);
+         settingsStore.set('notifications_timeout', this.notificationsTimeout);
       },
       changeExplorebarSize (size: number) {
          this.explorebarSize = size;
-         persistentStore.set('explorebar_size', this.explorebarSize);
+         settingsStore.set('explorebar_size', this.explorebarSize);
       },
       changeAutoComplete (val: boolean) {
          this.autoComplete = val;
-         persistentStore.set('auto_complete', this.autoComplete);
+         settingsStore.set('auto_complete', this.autoComplete);
       },
       changeLineWrap (val: boolean) {
          this.lineWrap = val;
-         persistentStore.set('line_wrap', this.lineWrap);
+         settingsStore.set('line_wrap', this.lineWrap);
       },
       changeApplicationTheme (theme: string) {
          this.applicationTheme = theme;
-         persistentStore.set('application_theme', this.applicationTheme);
+         settingsStore.set('application_theme', this.applicationTheme);
          ipcRenderer.send('refresh-theme-settings');
       },
       changeEditorTheme (theme: string) {
          this.editorTheme = theme;
-         persistentStore.set('editor_theme', this.editorTheme);
+         settingsStore.set('editor_theme', this.editorTheme);
       },
       changeEditorFontSize (size: EditorFontSize) {
          this.editorFontSize = size;
-         persistentStore.set('editor_font_size', this.editorFontSize);
+         settingsStore.set('editor_font_size', this.editorFontSize);
       },
       changeRestoreTabs (val: boolean) {
          this.restoreTabs = val;
-         persistentStore.set('restore_tabs', this.restoreTabs);
+         settingsStore.set('restore_tabs', this.restoreTabs);
       },
       changeDisableBlur (val: boolean) {
          this.disableBlur = val;
-         persistentStore.set('disable_blur', this.disableBlur);
+         settingsStore.set('disable_blur', this.disableBlur);
       },
       changeDisableScratchpad (val: boolean) {
          this.disableScratchpad = val;
-         persistentStore.set('disable_scratchpad', this.disableScratchpad);
+         settingsStore.set('disable_scratchpad', this.disableScratchpad);
       }
    }
 });