refactor: integrate keyboard functionality and clean up event handling

app.vue

@@ -9,13 +9,13 @@ import { listen } from "@tauri-apps/api/event";
 import { app, window } from "@tauri-apps/api";
 import { disable, enable } from "@tauri-apps/plugin-autostart";
 import { onMounted } from "vue";
+import { keyboard } from "wrdu-keyboard";
 
-const keyboard = useKeyboard();
 const { $settings } = useNuxtApp();
+keyboard.init()
 
 onMounted(async () => {
   await listen("settings", async () => {
-    keyboard.clear();
     await navigateTo("/settings");
     await app.show();
     await window.getCurrentWindow().show();

nuxt.config.ts

@@ -3,7 +3,6 @@ export default defineNuxtConfig({
   devtools: { enabled: false },
   compatibilityDate: "2024-07-04",
   ssr: false,
-  modules: ["wrdu-keyboard"],
   vite: {
     css: {
       preprocessorOptions: {

pages/index.vue

@@ -174,7 +174,7 @@ import type {
   InfoColor,
   InfoCode,
 } from "~/types/types";
-import { Key } from "wrdu-keyboard/key";
+import { Key, keyboard } from "wrdu-keyboard";
 
 interface GroupedHistory {
   label: string;
@@ -207,8 +207,6 @@ const imageLoading = ref<boolean>(false);
 const pageTitle = ref<string>("");
 const pageOgImage = ref<string>("");
 
-const keyboard = useKeyboard();
-
 const isSameDay = (date1: Date, date2: Date): boolean => {
   return (
     date1.getFullYear() === date2.getFullYear() &&
@@ -593,39 +591,70 @@ const setupEventListeners = async (): Promise<void> => {
       }
     }
     focusSearchInput();
-  });
     
-  await listen("tauri://blur", () => {
+    // Re-register keyboard shortcuts on focus
-    searchInput.value?.blur();
+    keyboard.clear();
-  });
+    keyboard.prevent.down([Key.DownArrow], () => {
-
-  keyboard.prevent.down([Key.DownArrow], (event) => {
       selectNext();
     });
 
-  keyboard.prevent.down([Key.UpArrow], (event) => {
+    keyboard.prevent.down([Key.UpArrow], () => {
       selectPrevious();
     });
 
-  keyboard.prevent.down([Key.Enter], (event) => {
+    keyboard.prevent.down([Key.Enter], () => {
       pasteSelectedItem();
     });
 
-  keyboard.prevent.down([Key.Escape], (event) => {
+    keyboard.prevent.down([Key.Escape], () => {
       hideApp();
     });
 
     switch (os.value) {
       case "macos":
-      keyboard.prevent.down([Key.LeftMeta, Key.K], (event) => {});
+        keyboard.prevent.down([Key.LeftMeta, Key.K], () => {});
-
+        keyboard.prevent.down([Key.RightMeta, Key.K], () => {});
-      keyboard.prevent.down([Key.RightMeta, Key.K], (event) => {});
         break;
 
-    case "linux" || "windows":
+      case "linux":
-      keyboard.prevent.down([Key.LeftControl, Key.K], (event) => {});
+      case "windows":
+        keyboard.prevent.down([Key.LeftControl, Key.K], () => {});
+        keyboard.prevent.down([Key.RightControl, Key.K], () => {});
+        break;
+    }
+  });
 
-      keyboard.prevent.down([Key.RightControl, Key.K], (event) => {});
+  await listen("tauri://blur", () => {
+    searchInput.value?.blur();
+    keyboard.clear();
+  });
+
+  keyboard.prevent.down([Key.DownArrow], () => {
+    selectNext();
+  });
+
+  keyboard.prevent.down([Key.UpArrow], () => {
+    selectPrevious();
+  });
+
+  keyboard.prevent.down([Key.Enter], () => {
+    pasteSelectedItem();
+  });
+
+  keyboard.prevent.down([Key.Escape], () => {
+    hideApp();
+  });
+
+  switch (os.value) {
+    case "macos":
+      keyboard.prevent.down([Key.LeftMeta, Key.K], () => {});
+      keyboard.prevent.down([Key.RightMeta, Key.K], () => {});
+      break;
+
+    case "linux":
+    case "windows":
+      keyboard.prevent.down([Key.LeftControl, Key.K], () => {});
+      keyboard.prevent.down([Key.RightControl, Key.K], () => {});
       break;
   }
 };

pages/settings.vue

@@ -93,9 +93,9 @@ import { invoke } from "@tauri-apps/api/core";
 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";
 import { disable, enable } from "@tauri-apps/plugin-autostart";
+import { Key, keyboard } from "wrdu-keyboard";
 
 const activeModifiers = reactive<Set<KeyValues>>(new Set());
 const isKeybindInputFocused = ref(false);
@@ -104,7 +104,6 @@ const keybindInput = ref<HTMLElement | null>(null);
 const lastBlurTime = ref(0);
 const os = ref("");
 const router = useRouter();
-const keyboard = useKeyboard();
 const showEmptyKeybindError = ref(false);
 const autostart = ref(false);
 const { $settings } = useNuxtApp();
@@ -189,13 +188,13 @@ const toggleAutostart = async () => {
 os.value = platform();
 
 onMounted(async () => {
-  keyboard.down([Key.All], (event) => {
+  keyboard.prevent.down([Key.All], (event: KeyboardEvent) => {
     if (isKeybindInputFocused.value) {
       onKeyDown(event);
     }
   });
 
-  keyboard.down([Key.Escape], (event) => {
+  keyboard.prevent.down([Key.Escape], () => {
     if (isKeybindInputFocused.value) {
       keybindInput.value?.blur();
     } else {
@@ -205,27 +204,28 @@ onMounted(async () => {
 
   switch (os.value) {
     case "macos":
-      keyboard.down([Key.LeftMeta, Key.Enter], (event) => {
+      keyboard.prevent.down([Key.LeftMeta, Key.Enter], () => {
         if (!isKeybindInputFocused.value) {
           saveKeybind();
         }
       });
 
-      keyboard.down([Key.RightMeta, Key.Enter], (event) => {
+      keyboard.prevent.down([Key.RightMeta, Key.Enter], () => {
         if (!isKeybindInputFocused.value) {
           saveKeybind();
         }
       });
       break;
 
-    case "linux" || "windows":
+    case "linux":
-      keyboard.down([Key.LeftControl, Key.Enter], (event) => {
+    case "windows":
+      keyboard.prevent.down([Key.LeftControl, Key.Enter], () => {
         if (!isKeybindInputFocused.value) {
           saveKeybind();
         }
       });
 
-      keyboard.down([Key.RightControl, Key.Enter], (event) => {
+      keyboard.prevent.down([Key.RightControl, Key.Enter], () => {
         if (!isKeybindInputFocused.value) {
           saveKeybind();
         }