added ability to set custom hotkey

pages/keybind.vue

@@ -1,23 +1,52 @@
 <template>
   <div class="bg">
-    <div class="keybind-container">
-      <h2>Set New Keybind</h2>
-      <div class="keybind-input" tabindex="0" @keydown="onKeyDown" @keyup="onKeyUp" @focus="onFocus" ref="keybindInput">
-        {{ currentKeybind || 'Click here, then press your desired key combination' }}
+    <div class="back">
+      <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">
+        <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">
+          </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>
+        <template v-else>
+          <span :key="index" class="key" v-for="(key, index) in currentKeybind">{{ keyToDisplay(key) }}</span>
+        </template>
       </div>
-      <button @click="saveKeybind" :disabled="!currentKeybind">Save Keybind</button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
+import { platform } from '@tauri-apps/plugin-os';
+import { onMounted, onUnmounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
-const currentKeybind = ref('');
+const activeModifiers = ref<Set<string>>(new Set());
+const currentKeybind = ref<string[]>([]);
+const isKeybindInputFocused = ref(false);
 const keybindInput = ref<HTMLElement | null>(null);
-const keys = ref<Set<string>>(new Set());
-const recording = ref(false);
+const lastNonModifier = ref('');
+const os = ref('');
+const router = useRouter();
+const lastBlurTime = ref(0);
 
 const keyToDisplayMap: Record<string, string> = {
   " ": "Space",
@@ -28,78 +57,83 @@ const keyToDisplayMap: Record<string, string> = {
   ArrowUp: "↑",
   Control: "Ctrl",
   Enter: "↵",
-  Escape: "Esc",
   Meta: "Meta",
   Shift: "⇧",
 };
 
 const modifierKeySet = new Set(["Alt", "Control", "Meta", "Shift"]);
 
-function keyCodeToKey(keyCode: string): string {
-  if (keyCode.startsWith("Key")) return keyCode.slice(3);
-  if (keyCode.endsWith("Left")) return keyCode.slice(0, -4);
-  if (keyCode.startsWith("Digit")) return keyCode.slice(5);
-  if (keyCode.endsWith("Right")) return keyCode.slice(0, -5);
-  return keyCode;
+function keyToDisplay(key: string): string {
+  return keyToDisplayMap[key] || key.toUpperCase();
 }
 
-function keyToDisplay(keyCode: string): string {
-  const key = keyCodeToKey(keyCode);
-  return keyToDisplayMap[key] || key;
+function updateCurrentKeybind() {
+  const modifiers = Array.from(activeModifiers.value);
+  currentKeybind.value = lastNonModifier.value ? [...modifiers, lastNonModifier.value] : modifiers;
 }
 
-function keyCombToDisplay(keyComb: Set<string>): string {
-  return Array.from(keyComb).map(keyToDisplay).join("+");
-}
+const onBlur = () => {
+  isKeybindInputFocused.value = false;
+  lastBlurTime.value = Date.now();
+};
 
-function mapKeyToTauriKey(key: string): string {
-  return key === "Meta" ? "Command" : key;
-}
+const onFocus = () => {
+  isKeybindInputFocused.value = true;
+  activeModifiers.value.clear();
+  lastNonModifier.value = '';
+  updateCurrentKeybind();
+};
 
 const onKeyDown = (event: KeyboardEvent) => {
   event.preventDefault();
-  const key = keyCodeToKey(event.code);
+  const key = event.key;
 
-  if (modifierKeySet.has(key) && !keys.value.has(key)) {
-    keys.value = new Set(Array.from(keys.value).filter(k => modifierKeySet.has(k)));
+  if (key === "Escape") {
+    if (keybindInput.value) {
+      keybindInput.value.blur();
+    }
+    return;
   }
 
-  keys.value.add(key);
+  if (modifierKeySet.has(key)) {
+    activeModifiers.value.add(key);
+  } else {
+    lastNonModifier.value = key;
+  }
   updateCurrentKeybind();
 };
 
 const onKeyUp = (event: KeyboardEvent) => {
   event.preventDefault();
-  const key = keyCodeToKey(event.code);
-  if (!modifierKeySet.has(key)) {
-    recording.value = false;
-    updateCurrentKeybind();
-  }
-};
-
-const onFocus = () => {
-  resetKeybind();
-};
-
-const updateCurrentKeybind = () => {
-  currentKeybind.value = keyCombToDisplay(keys.value);
-};
-
-const resetKeybind = () => {
-  keys.value.clear();
-  currentKeybind.value = '';
-  recording.value = true;
 };
 
 const saveKeybind = async () => {
-  console.log(await invoke("get_keybind"));
+  console.log("New:", currentKeybind.value);
+  console.log("Old: " + new Array(await invoke("get_keybind")));
+  await invoke("save_keybind", { keybind: currentKeybind.value})
 };
 
-const startCapture = () => {
-  resetKeybind();
+const handleGlobalKeyDown = (event: KeyboardEvent) => {
+  const now = Date.now();
+  if ((os.value === 'macos' ? event.metaKey : event.ctrlKey) && event.key === 'Enter' && !isKeybindInputFocused.value) {
+    event.preventDefault();
+    saveKeybind();
+  } else if (event.key === 'Escape' && !isKeybindInputFocused.value && now - lastBlurTime.value > 100) {
+    event.preventDefault();
+    router.push('/');
+  }
 };
+
+onMounted(() => {
+  os.value = platform();
+  window.addEventListener('keydown', handleGlobalKeyDown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleGlobalKeyDown);
+});
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
 @import '~/assets/css/keybind.scss';
 </style>