refactor: improve keybind saving logic and error handling

pages/settings.vue

@@ -33,7 +33,6 @@
       <div
         @blur="onBlur"
         @focus="onFocus"
-        @keydown="onKeyDown"
         class="keybind-input"
         ref="keybindInput"
         tabindex="0">
@@ -44,7 +43,7 @@
             class="key"
             :class="{ modifier: isModifier(key) }"
             v-for="(key, index) in keybind">
-            {{ keyToDisplay(key) }}
+            {{ keyToLabel(key) }}
           </span>
         </template>
       </div>
@@ -58,10 +57,11 @@ import { onMounted, onUnmounted, reactive, ref } from "vue";
 import { platform } from "@tauri-apps/plugin-os";
 import { useRouter } from "vue-router";
 import { Key } from "wrdu-keyboard/key";
+import { KeyValues, KeyLabels } from "../types/keys";
 
-const activeModifiers = reactive<Set<string>>(new Set());
+const activeModifiers = reactive<Set<KeyValues>>(new Set());
 const isKeybindInputFocused = ref(false);
-const keybind = ref<string[]>([]);
+const keybind = ref<KeyValues[]>([]);
 const keybindInput = ref<HTMLElement | null>(null);
 const lastBlurTime = ref(0);
 const os = ref("");
@@ -69,52 +69,27 @@ const router = useRouter();
 const keyboard = useKeyboard();
 const showEmptyKeybindError = ref(false);
 
-const keyToDisplayMap: Record<string, string> = {
-  " ": "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",
-  "AltLeft",
-  "AltRight",
-  "Control",
-  "ControlLeft",
-  "ControlRight",
-  "Meta",
-  "MetaLeft",
-  "MetaRight",
-  "Shift",
-  "ShiftLeft",
-  "ShiftRight",
+  KeyValues.AltLeft,
+  KeyValues.AltRight,
+  KeyValues.ControlLeft,
+  KeyValues.ControlRight,
+  KeyValues.MetaLeft,
+  KeyValues.MetaRight,
+  KeyValues.ShiftLeft,
+  KeyValues.ShiftRight,
 ]);
 
-const isModifier = (key: string): boolean => {
+const isModifier = (key: KeyValues): boolean => {
   return modifierKeySet.has(key);
 };
 
-const keyToDisplay = (key: string): string => {
-  return keyToDisplayMap[key] || key;
+const keyToLabel = (key: KeyValues): string => {
+  return KeyLabels[key] || key;
 };
 
 const updateKeybind = () => {
-  const modifiers = Array.from(activeModifiers).sort();
+  const modifiers = Array.from(activeModifiers);
   const nonModifiers = keybind.value.filter((key) => !isModifier(key));
   keybind.value = [...modifiers, ...nonModifiers];
 };
@@ -133,9 +108,9 @@ const onFocus = () => {
 };
 
 const onKeyDown = (event: KeyboardEvent) => {
-  const key = event.code;
+  const key = event.code as KeyValues;
 
-  if (key === "Escape") {
+  if (key === KeyValues.Escape) {
     if (keybindInput.value) {
       keybindInput.value.blur();
     }
@@ -155,8 +130,7 @@ const onKeyDown = (event: KeyboardEvent) => {
 
 const saveKeybind = async () => {
   if (keybind.value.length > 0) {
-    console.log("Saving keybind", keybind.value);
-    await invoke("save_keybind", { keybind: keybind });
+    await invoke("save_keybind", { keybind: keybind.value });
   } else {
     showEmptyKeybindError.value = true;
   }
@@ -165,8 +139,13 @@ const saveKeybind = async () => {
 os.value = platform();
 
 onMounted(() => {
+  keyboard.down([Key.All], (event) => {
+    if (isKeybindInputFocused.value) {
+      onKeyDown(event);
+    }
+  });
+
   keyboard.down([Key.Escape], (event) => {
-    console.log("Escape key pressed");
     if (isKeybindInputFocused.value) {
       keybindInput.value?.blur();
     } else {