added ability to save hotkey into settings

pages/keybind.vue

@@ -2,13 +2,7 @@
   <div class="bg">
     <div class="keybind-container">
       <h2>Set New Keybind</h2>
-      <div
-        class="keybind-input"
-        tabindex="0"
-        @focus="startCapture"
-        @blur="stopCapture"
-        ref="keybindInput"
-      >
+      <div class="keybind-input" tabindex="0" @keydown="onKeyDown" @keyup="onKeyUp" @focus="onFocus" ref="keybindInput">
         {{ currentKeybind || 'Click here, then press your desired key combination' }}
       </div>
       <button @click="saveKeybind" :disabled="!currentKeybind">Save Keybind</button>
@@ -17,35 +11,93 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref } from 'vue';
 import { invoke } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
 
 const currentKeybind = ref('');
 const keybindInput = ref<HTMLElement | null>(null);
+const keys = ref<Set<string>>(new Set());
+const recording = ref(false);
 
-const startCapture = async () => {
-  await invoke('start_keybind_capture');
+const keyToDisplayMap: Record<string, string> = {
+  " ": "Space",
+  Alt: "Alt",
+  ArrowDown: "↓",
+  ArrowLeft: "←",
+  ArrowRight: "→",
+  ArrowUp: "↑",
+  Control: "Ctrl",
+  Enter: "↵",
+  Escape: "Esc",
+  Meta: "Meta",
+  Shift: "⇧",
 };
 
-const stopCapture = async () => {
-  await invoke('stop_keybind_capture');
+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(keyCode: string): string {
+  const key = keyCodeToKey(keyCode);
+  return keyToDisplayMap[key] || key;
+}
+
+function keyCombToDisplay(keyComb: Set<string>): string {
+  return Array.from(keyComb).map(keyToDisplay).join("+");
+}
+
+function mapKeyToTauriKey(key: string): string {
+  return key === "Meta" ? "Command" : key;
+}
+
+const onKeyDown = (event: KeyboardEvent) => {
+  event.preventDefault();
+  const key = keyCodeToKey(event.code);
+
+  if (modifierKeySet.has(key) && !keys.value.has(key)) {
+    keys.value = new Set(Array.from(keys.value).filter(k => modifierKeySet.has(k)));
+  }
+
+  keys.value.add(key);
+  updateCurrentKeybind();
 };
 
-const saveKeybind = () => {
-  console.log('Saving keybind:', currentKeybind.value);
-  // Implement saving logic here
+const onKeyUp = (event: KeyboardEvent) => {
+  event.preventDefault();
+  const key = keyCodeToKey(event.code);
+  if (!modifierKeySet.has(key)) {
+    recording.value = false;
+    updateCurrentKeybind();
+  }
 };
 
-onMounted(async () => {
-  const unlisten = await listen('keybind_captured', (event: any) => {
-    currentKeybind.value = event.payload as string;
-  });
+const onFocus = () => {
+  resetKeybind();
+};
 
-  onUnmounted(() => {
-    unlisten();
-  });
-});
+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"));
+};
+
+const startCapture = () => {
+  resetKeybind();
+};
 </script>
 
 <style lang="scss">