feat: custom hotkey with global shortcut

pages/keybind.vue

@@ -1,32 +1,45 @@
 <template>
   <div class="bg">
     <div class="back">
-      <img @click="router.push('/')" src="../public/back_arrow.svg">
+      <img @click="router.push('/')" src="../public/back_arrow.svg" />
       <p>Back</p>
     </div>
     <div class="bottom-bar">
       <div class="left">
-        <img alt="" class="logo" src="../public/logo.png" width="18px">
+        <img alt="" class="logo" src="../public/logo.png" width="18px" />
         <p>Qopy</p>
       </div>
       <div class="right">
         <div @click="saveKeybind" class="actions">
           <p>Save</p>
           <div>
-            <img alt="" src="../public/ctrl.svg" v-if="os === 'windows' || os === 'linux'">
-            <img alt="" src="../public/cmd.svg" v-if="os === 'macos'">
-            <img alt="" src="../public/enter.svg">
+            <img alt="" src="../public/cmd.svg" v-if="os === 'macos'" />
+            <img alt="" src="../public/ctrl.svg" v-if="os === 'linux' || os === 'windows'" />
+            <img alt="" src="../public/enter.svg" />
           </div>
         </div>
       </div>
     </div>
     <div class="keybind-container">
       <h2 class="title">Record a new Hotkey</h2>
-      <div @blur="onBlur" @focus="onFocus" @keydown="onKeyDown" @keyup="onKeyUp" class="keybind-input"
-        ref="keybindInput" tabindex="0">
-        <span class="key" v-if="currentKeybind.length === 0">Click here</span>
+      <div
+        @blur="onBlur"
+        @focus="onFocus"
+        @keydown="onKeyDown"
+        class="keybind-input"
+        ref="keybindInput"
+        tabindex="0"
+      >
+        <span class="key" v-if="keybind.length === 0">Click here</span>
         <template v-else>
-          <span :key="index" class="key" v-for="(key, index) in currentKeybind">{{ keyToDisplay(key) }}</span>
+          <span
+            :key="index"
+            class="key"
+            :class="{ modifier: isModifier(key) }"
+            v-for="(key, index) in keybind"
+          >
+            {{ keyToDisplay(key) }}
+          </span>
         </template>
       </div>
     </div>
@@ -35,42 +48,59 @@
 
 <script setup lang="ts">
 import { invoke } from '@tauri-apps/api/core';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 import { platform } from '@tauri-apps/plugin-os';
-import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-const activeModifiers = ref<Set<string>>(new Set());
-const currentKeybind = ref<string[]>([]);
+const activeModifiers = reactive<Set<string>>(new Set());
 const isKeybindInputFocused = ref(false);
+const keybind = ref<string[]>([]);
 const keybindInput = ref<HTMLElement | null>(null);
-const lastNonModifier = ref('');
+const lastBlurTime = ref(0);
 const os = ref('');
 const router = useRouter();
-const lastBlurTime = ref(0);
 
 const keyToDisplayMap: Record<string, string> = {
-  " ": "Space",
-  Alt: "Alt",
-  ArrowDown: "↓",
-  ArrowLeft: "←",
-  ArrowRight: "→",
-  ArrowUp: "↑",
-  Control: "Ctrl",
-  Enter: "↵",
-  Meta: "Meta",
-  Shift: "⇧",
+  ' ': 'Space',
+  Alt: 'Alt',
+  AltLeft: 'Alt L',
+  AltRight: 'Alt R',
+  ArrowDown: '↓',
+  ArrowLeft: '←',
+  ArrowRight: '→',
+  ArrowUp: '↑',
+  Control: 'Ctrl',
+  ControlLeft: 'Ctrl L',
+  ControlRight: 'Ctrl R',
+  Enter: '↵',
+  Meta: 'Meta',
+  MetaLeft: 'Meta L',
+  MetaRight: 'Meta R',
+  Shift: '⇧',
+  ShiftLeft: '⇧ L',
+  ShiftRight: '⇧ R',
 };
 
-const modifierKeySet = new Set(["Alt", "Control", "Meta", "Shift"]);
+const modifierKeySet = new Set([
+  'Alt', 'AltLeft', 'AltRight',
+  'Control', 'ControlLeft', 'ControlRight',
+  'Meta', 'MetaLeft', 'MetaRight',
+  'Shift', 'ShiftLeft', 'ShiftRight'
+]);
 
-function keyToDisplay(key: string): string {
-  return keyToDisplayMap[key] || key.toUpperCase();
-}
+const isModifier = (key: string): boolean => {
+  return modifierKeySet.has(key);
+};
 
-function updateCurrentKeybind() {
-  const modifiers = Array.from(activeModifiers.value);
-  currentKeybind.value = lastNonModifier.value ? [...modifiers, lastNonModifier.value] : modifiers;
-}
+const keyToDisplay = (key: string): string => {
+  return keyToDisplayMap[key] || key;
+};
+
+const updateKeybind = () => {
+  const modifiers = Array.from(activeModifiers).sort();
+  const nonModifiers = keybind.value.filter(key => !isModifier(key));
+  keybind.value = [...modifiers, ...nonModifiers];
+};
 
 const onBlur = () => {
   isKeybindInputFocused.value = false;
@@ -79,46 +109,53 @@ const onBlur = () => {
 
 const onFocus = () => {
   isKeybindInputFocused.value = true;
-  activeModifiers.value.clear();
-  lastNonModifier.value = '';
-  updateCurrentKeybind();
+  activeModifiers.clear();
+  keybind.value = [];
 };
 
 const onKeyDown = (event: KeyboardEvent) => {
   event.preventDefault();
-  const key = event.key;
+  const key = event.code;
 
-  if (key === "Escape") {
+  if (key === 'Escape') {
     if (keybindInput.value) {
       keybindInput.value.blur();
     }
     return;
   }
 
-  if (modifierKeySet.has(key)) {
-    activeModifiers.value.add(key);
-  } else {
-    lastNonModifier.value = key;
+  if (isModifier(key)) {
+    activeModifiers.add(key);
+  } else if (!keybind.value.includes(key)) {
+    keybind.value = keybind.value.filter(k => isModifier(k));
+    keybind.value.push(key);
   }
-  updateCurrentKeybind();
-};
-
-const onKeyUp = (event: KeyboardEvent) => {
-  event.preventDefault();
+  
+  updateKeybind();
 };
 
 const saveKeybind = async () => {
-  console.log("New:", currentKeybind.value);
-  console.log("Old: " + new Array(await invoke("get_keybind")));
-  await invoke("save_keybind", { keybind: currentKeybind.value})
+  console.log('New:', keybind.value);
+  const oldKeybind = await invoke<string[]>('get_keybind');
+  console.log('Old:', oldKeybind);
+  await invoke('save_keybind', { keybind: keybind.value });
 };
 
 const handleGlobalKeyDown = (event: KeyboardEvent) => {
   const now = Date.now();
-  if ((os.value === 'macos' ? event.metaKey : event.ctrlKey) && event.key === 'Enter' && !isKeybindInputFocused.value) {
+  if (
+    (os.value === 'macos'
+      ? (event.code === 'MetaLeft' || event.code === 'MetaRight') && event.key === 'Enter'
+      : (event.code === 'ControlLeft' || event.code === 'ControlRight') && event.key === 'Enter') &&
+    !isKeybindInputFocused.value
+  ) {
     event.preventDefault();
     saveKeybind();
-  } else if (event.key === 'Escape' && !isKeybindInputFocused.value && now - lastBlurTime.value > 100) {
+  } else if (
+    event.key === 'Escape' &&
+    !isKeybindInputFocused.value &&
+    now - lastBlurTime.value > 100
+  ) {
     event.preventDefault();
     router.push('/');
   }