feat: ability to edit shortcuts

src/common/shortcuts.ts

@@ -3,6 +3,10 @@ export const shortcutEvents: { [key: string]: { l18n: string; l18nParam?: string
    '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' },
    'open-all-connections': { l18n: 'message.openAllConnections' },
    'toggle-console': { l18n: 'message.toggleConsole' },
    'save-content': { l18n: 'message.saveContent' },
@@ -33,6 +37,26 @@ const shortcuts: ShortcutRecord[] = [
       keys: ['CommandOrControl+S'],
       os: ['darwin', 'linux', 'win32']
    },
+   {
+      event: 'kill-query',
+      keys: ['CommandOrControl+K'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'format-query',
+      keys: ['CommandOrControl+B'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'clear-query',
+      keys: ['CommandOrControl+Alt+W'],
+      os: ['darwin', 'linux', 'win32']
+   },
+   {
+      event: 'query-history',
+      keys: ['CommandOrControl+G'],
+      os: ['darwin', 'linux', 'win32']
+   },
    {
       event: 'open-new-tab',
       keys: ['CommandOrControl+T'],

src/renderer/components/KeyPressDetector.vue

@@ -13,7 +13,7 @@
    </div>
 </template>
 <script setup lang="ts">
-import { computed, Ref, ref, watch } from 'vue';
+import { computed, PropType, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Application from '@/ipc-api/Application';
 
@@ -23,8 +23,8 @@ const emit = defineEmits(['update:modelValue']);
 
 const isMacOS = process.platform === 'darwin';
 
-defineProps({
+const props = defineProps({
-   modelValue: String
+   modelValue: String as PropType<string | Electron.Accelerator>
 });
 
 const isFocus = ref(false);
@@ -36,7 +36,9 @@ const pressedKeys = computed(() => {
    const specialKeys = ['Control', 'Alt', 'AltGraph', 'Shift', 'Meta', 'CapsLock', 'ContextMenu', 'Escape'];
    const keysFromCode = ['Space', 'Minus', 'Equal', 'Slash', 'Quote', 'Semicolon', 'Comma', 'Period', 'Backslash', 'BracketLeft', 'BracketRight'];
 
-   if (keyboardEvent.value) {
+   if (props.modelValue && !keyboardEvent.value)
+      return props.modelValue;
+   else if (keyboardEvent.value) {
       if (keyboardEvent.value.altKey)
          keys.push('Alt');
       if (keyboardEvent.value.ctrlKey)

src/renderer/components/ModalSettingsShortcuts.vue

@@ -42,7 +42,7 @@
                      v-html="parseKeys(shortcut.keys)"
                   />
                   <div class="td py-1 pr-2">
-                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 mr-2">
+                     <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1 mr-2" @click="showEditModal({...shortcut, index: i})">
                         <span>{{ t('word.edit') }}</span><i class="mdi mdi-pencil ml-1" />
                      </button>
                      <button class="shortcut-button btn btn-link btn-sm d-flex p-0 px-1" @click="showDeleteModal(shortcut)">
@@ -89,6 +89,41 @@
          </template>
       </ConfirmModal>
 
+      <ConfirmModal
+         v-if="isConfirmEditModal"
+         :disable-autofocus="true"
+         :confirm-text="t('word.save')"
+         :close-on-confirm="false"
+         @confirm="editShortcut"
+         @hide="closeEditModal"
+      >
+         <template #header>
+            <div class="d-flex">
+               <i class="mdi mdi-24px mdi-plus mr-1" /> {{ t('message.editShortcut') }}
+            </div>
+         </template>
+         <template #body>
+            <div class="mb-2">
+               <div class="form-group">
+                  <label class="form-label">{{ t('word.event') }}</label>
+                  <BaseSelect
+                     v-model="shortcutToEdit.event"
+                     class="form-select"
+                     :options="eventOptions"
+                     :disabled="true"
+                  />
+               </div>
+            </div>
+            <div class="mb-2">
+               <div class="form-group">
+                  <label class="form-label">{{ t('word.key', 2) }}</label>
+                  <KeyPressDetector v-model="shortcutToEdit.keys[0]" />
+               </div>
+            </div>
+            <small v-if="doesShortcutExists" class="text-warning">{{ t('message.shortcutAlreadyExists') }}</small>
+         </template>
+      </ConfirmModal>
+
       <ConfirmModal
          v-if="isConfirmDeleteModal"
          :disable-autofocus="true"
@@ -106,6 +141,7 @@
             </div>
          </template>
       </ConfirmModal>
+
       <ConfirmModal
          v-if="isConfirmRestoreModal"
          :disable-autofocus="true"
@@ -143,11 +179,13 @@ const isMacOS = process.platform === 'darwin';
 
 const isConfirmRestoreModal = ref(false);
 const isConfirmAddModal = ref(false);
+const isConfirmEditModal = ref(false);
 const isConfirmDeleteModal = ref(false);
 const doesShortcutExists = ref(false);
 const shortcutToAdd: Ref<ShortcutRecord> = ref({ event: undefined, keys: [], os: [process.platform] });
-const typedShortcut = ref('');
+const shortcutToEdit: Ref<ShortcutRecord & { index: number }> = ref(null);
 const shortcutToDelete: Ref<ShortcutRecord> = ref(null);
+const typedShortcut = ref('');
 
 const settingsStore = useSettingsStore();
 const { shortcuts } = storeToRefs(settingsStore);
@@ -171,7 +209,7 @@ const parseKeys = (keys: {[key: number]: string}[]) => {
             `<code class="text-bold">${sk}</code>`
          )))
       .join('+')
-      .replaceAll('CommandOrControl', isMacOS ? '`Command' : 'Control')
+      .replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')
    ).join(', ');
 };
 
@@ -192,9 +230,36 @@ const closeAddModal = () => {
    isConfirmAddModal.value = false;
 };
 
+const showEditModal = (shortcut: ShortcutRecord & { index: number }) => {
+   shortcut = {
+      ...shortcut,
+      keys: [shortcut.keys[0].replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control')]
+   };
+   shortcutToEdit.value = shortcut;
+   isConfirmEditModal.value = true;
+};
+
+const editShortcut = () => {
+   const index = shortcutToEdit.value.index;
+   delete shortcutToEdit.value.index;
+   shortcutToEdit.value.index = undefined;
+
+   shortcuts.value[index] = shortcutToEdit.value;
+
+   isConfirmEditModal.value = false;
+   return Application.updateShortcuts(shortcuts.value);
+};
+
+const closeEditModal = () => {
+   typedShortcut.value = '';
+   doesShortcutExists.value = false;
+   shortcutToEdit.value = null;
+   isConfirmEditModal.value = false;
+};
+
 const addShortcut = () => {
    if (!typedShortcut.value.length || doesShortcutExists.value) return;
-   shortcutToAdd.value.keys = [typedShortcut.value.replaceAll(isMacOS ? '`Command' : 'Control', 'CommandOrControl')];
+   shortcutToAdd.value.keys = [typedShortcut.value.replaceAll(isMacOS ? 'Command' : 'Control', 'CommandOrControl')];
    const filteredShortcuts = [shortcutToAdd.value, ...shortcuts.value];
 
    isConfirmAddModal.value = false;
@@ -218,7 +283,7 @@ const deleteShortcut = () => {
 watch(typedShortcut, () => {
    doesShortcutExists.value = shortcuts.value.some(s => (
       s.keys.some(k => (
-         k.replaceAll('CommandOrControl', isMacOS ? '`Command' : 'Control') === typedShortcut.value
+         k.replaceAll('CommandOrControl', isMacOS ? 'Command' : 'Control') === typedShortcut.value
       ))
    ));
 });

src/renderer/i18n/en-US.ts

@@ -305,17 +305,21 @@ export const enUS = {
       selectTabNumber: 'Select tab number {param}',
       toggleConsole: 'Toggle console',
       addShortcut: 'Add shortcut',
+      editShortcut: 'Edit shortcut',
+      deleteShortcut: 'Delete shortcut',
       restoreDefaults: 'Restore defaults',
       restoreDefaultsQuestion: 'Do you confirm to restore default values?',
       registerAShortcut: 'Register a shortcut',
-      deleteShortcut: 'Delete shortcut',
       invalidShortcutMessage: 'Invalid combination, continue to type',
       shortcutAlreadyExists: 'Shortcut already exists',
       saveContent: 'Save content',
       openAllConnections: 'Open all connections',
       openSettings: 'Open settings',
       openScratchpad: 'Open scratchpad',
-      runOrReload: 'Run or reload'
+      runOrReload: 'Run or reload',
+      formatQuery: 'Format query',
+      queryHistory: 'Query history',
+      clearQuery: 'Clear query'
    },
    faker: {
       address: 'Address',