perf: improved keypress detector

src/common/shortcuts.ts

@@ -1,8 +1,8 @@
-export const shortcutEvents: { [key: string]: { l18n: string; l18nParam?: string | number }} = {
+export const shortcutEvents: { [key: string]: { l18n: string; l18nParam?: string | number; context?: 'tab' }} = {
-   'open-new-tab': { l18n: 'message.openNewTab' },
+   'open-new-tab': { l18n: 'message.openNewTab', context: 'tab' },
-   'close-tab': { l18n: 'message.closeTab' },
+   'close-tab': { l18n: 'message.closeTab', context: 'tab' },
-   'next-tab': { l18n: 'message.nextTab' },
+   'next-tab': { l18n: 'message.nextTab', context: 'tab' },
-   'prev-tab': { l18n: 'message.previousTab' },
+   'prev-tab': { l18n: 'message.previousTab', context: 'tab' },
    'open-connections-modal': { l18n: 'message.allConnections' },
    'toggle-console': { l18n: 'message.toggleConsole' }
 };

src/renderer/components/KeyPressDetector.vue

@@ -33,6 +33,9 @@ const keyboardEvent: Ref<KeyboardEvent> = ref(null);
 
 const pressedKeys = computed(() => {
    const keys: string[] = [];
+   const singleKeysToIgnore = ['Dead', 'Backspace', 'ArrotLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'];
+   const specialKeys = ['Control', 'Alt', 'AltGraph', 'Shift', 'Meta', 'CapsLock', 'ContextMenu', 'Escape'];
+   const keysFromCode = ['Space', 'Minus', 'Equal', 'Slash', 'Quote', 'Semicolon', 'Comma', 'Period', 'Backslash'];
 
    if (keyboardEvent.value) {
       if (keyboardEvent.value.altKey)
@@ -40,12 +43,43 @@ const pressedKeys = computed(() => {
       if (keyboardEvent.value.ctrlKey)
          keys.push('Control');
       if (keyboardEvent.value.metaKey && isMacOS)
-         keys.push('Meta');
+         keys.push('Command');
-      if (keyboardEvent.value.shiftKey)
+      if (keyboardEvent.value.shiftKey && keys.length)
          keys.push('Shift');
       if (keyboardEvent.value.code) {
-         if (!['Control', 'Alt', 'AltGraph', 'Shift', 'Meta', 'CapsLock', 'ContextMenu'].includes(keyboardEvent.value.key))
+         if (keys.length === 0 && (keyboardEvent.value.key.length === 1 || singleKeysToIgnore.includes(keyboardEvent.value.key)))
-            keys.push(keyboardEvent.value.code.replace('Digit', '').replace('Key', ''));
+            return t('message.invalidShortcutMessage');
+         else if (!specialKeys.includes(keyboardEvent.value.key)) {
+            if (keyboardEvent.value.key === 'Dead') {
+               keys.push(keyboardEvent.value.code
+                  .replace('Digit', '')
+                  .replace('Key', '')
+                  .replace('Quote', '\'')
+                  .replace('Backquote', '`'));
+            }
+            else if (keysFromCode.includes(keyboardEvent.value.code) || keyboardEvent.value.code.includes('Digit')) {
+               keys.push(keyboardEvent.value.code
+                  .replace('Quote', '\'')
+                  .replace('Semicolon', ';')
+                  .replace('Slash', '/')
+                  .replace('Backslash', '\\')
+                  .replace('Comma', ',')
+                  .replace('Period', '.')
+                  .replace('Minus', '-')
+                  .replace('Equal', '=')
+                  .replace('Digit', '')
+                  .replace('Key', ''));
+            }
+            else {
+               keys.push(keyboardEvent.value.key.length === 1
+                  ? keyboardEvent.value.key.toUpperCase()
+                  : keyboardEvent.value.key
+                     .replace('Arrow', '')
+               );
+            }
+         }
+         else
+            return t('message.invalidShortcutMessage');
       }
    }
 

src/renderer/components/ModalSettingsShortcuts.vue

@@ -118,7 +118,7 @@ const parseKeys = (keys: {[key: number]: string}[]) => {
             `<code class="text-bold">${sk}</code>`
          )))
       .join('+')
-      .replaceAll('CommandOrControl', isMacOS ? 'CMD' : 'CTRL')
+      .replaceAll('CommandOrControl', isMacOS ? '`Command' : 'Control')
    ).join(', ');
 };
 

src/renderer/i18n/en-US.ts

@@ -308,7 +308,8 @@ export const enUS = {
       restoreDefaults: 'Restore defaults',
       restoreDefaultsQuestion: 'Do you confirm to restore default values?',
       registerAShortcut: 'Register a shortcut',
-      deleteShortcut: 'Delete shortcut'
+      deleteShortcut: 'Delete shortcut',
+      invalidShortcutMessage: 'Invalid combination, continue to type'
    },
    faker: {
       address: 'Address',