From 06bde85e03d087f643f28554ea0672b531ce8359 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 16 Sep 2022 09:09:21 -0700
Subject: [PATCH] Removes hotkeyjs in favor of vueuse (#1883)

---
 assets/components/FuzzySearchModal.vue        |  2 +-
 .../LogViewer/LogActionsToolbar.vue           |  9 ------
 assets/components/Search.vue                  | 28 +++++++++----------
 assets/layouts/default.vue                    | 15 ++++------
 package.json                                  |  1 -
 pnpm-lock.yaml                                |  6 ----
 6 files changed, 19 insertions(+), 42 deletions(-)

diff --git a/assets/components/FuzzySearchModal.vue b/assets/components/FuzzySearchModal.vue
index 415abfba..e26b8c2c 100644
--- a/assets/components/FuzzySearchModal.vue
+++ b/assets/components/FuzzySearchModal.vue
@@ -37,7 +37,7 @@ import fuzzysort from "fuzzysort";
 import { type Container } from "@/types/Container";
 
 const { maxResults = 20 } = defineProps<{
-  maxResults: number;
+  maxResults?: number;
 }>();
 
 const emit = defineEmits(["close"]);
diff --git a/assets/components/LogViewer/LogActionsToolbar.vue b/assets/components/LogViewer/LogActionsToolbar.vue
index c8694389..ac4eb457 100644
--- a/assets/components/LogViewer/LogActionsToolbar.vue
+++ b/assets/components/LogViewer/LogActionsToolbar.vue
@@ -43,7 +43,6 @@
 <script lang="ts" setup>
 import { type ComputedRef } from "vue";
 import { type Container } from "@/types/Container";
-import hotkeys from "hotkeys-js";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;
@@ -52,15 +51,7 @@ const { onClearClicked = (e: Event) => {} } = defineProps<{
   onClearClicked: (e: Event) => void;
 }>();
 
-const onHotkey = (event: Event) => {
-  onClearClicked(event);
-  event.preventDefault();
-};
-
 const container = inject("container") as ComputedRef<Container>;
-
-onMounted(() => hotkeys("shift+command+l, shift+ctrl+l", onHotkey));
-onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
 </script>
 
 <style lang="scss" scoped>
diff --git a/assets/components/Search.vue b/assets/components/Search.vue
index ea3e293e..48c2af5d 100644
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -22,26 +22,24 @@
 </template>
 
 <script lang="ts" setup>
-import hotkeys from "hotkeys-js";
-
+const { Meta_F, Ctrl_F, esc } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if ((e.ctrlKey || e.metaKey) && e.key === "f" && e.type === "keydown") e.preventDefault();
+  },
+});
 const input = ref<HTMLInputElement>();
 const { searchFilter, showSearch, resetSearch } = useSearchFilter();
 
-onMounted(() => {
-  hotkeys("command+f, ctrl+f", (event, handler) => {
+whenever(
+  () => Meta_F.value || Ctrl_F.value,
+  () => {
     showSearch.value = true;
     nextTick(() => input.value?.focus() || input.value?.select());
-    event.preventDefault();
-  });
-  hotkeys("esc", () => resetSearch());
-});
-
-onUnmounted(() => {
-  searchFilter.value = "";
-  showSearch.value = false;
-  hotkeys.unbind("command+f, ctrl+f");
-  hotkeys.unbind("esc");
-});
+  }
+);
+whenever(esc, () => resetSearch());
+onUnmounted(() => resetSearch());
 </script>
 
 <style lang="scss" scoped>
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
index 5271d6c6..fc96e2f0 100644
--- a/assets/layouts/default.vue
+++ b/assets/layouts/default.vue
@@ -44,24 +44,19 @@
 <script lang="ts" setup>
 import { Splitpanes, Pane } from "splitpanes";
 import { useProgrammatic } from "@oruga-ui/oruga-next";
-import hotkeys from "hotkeys-js";
-
 import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
 
 const collapseNav = ref(false);
 const { oruga } = useProgrammatic();
 const { authorizationNeeded } = config;
-
+const { Meta_K, Ctrl_K } = useMagicKeys();
 const containerStore = useContainerStore();
-
 const { activeContainers, visibleContainers } = storeToRefs(containerStore);
 
-onMounted(() => {
-  hotkeys("command+k, ctrl+k", (event, handler) => {
-    event.preventDefault();
-    showFuzzySearch();
-  });
-});
+whenever(
+  () => Meta_K.value || Ctrl_K.value,
+  () => showFuzzySearch()
+);
 
 watchEffect(() => {
   setTitle(`${visibleContainers.value.length} containers`);
diff --git a/package.json b/package.json
index e714e1e3..42402923 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,6 @@
     "bulma": "^0.9.4",
     "date-fns": "^2.29.3",
     "fuzzysort": "^2.0.1",
-    "hotkeys-js": "^3.10.0",
     "lodash.debounce": "^4.0.8",
     "pinia": "^2.0.22",
     "sass": "^1.54.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2cceefcf..60b3f741 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,7 +24,6 @@ specifiers:
   date-fns: ^2.29.3
   eventsourcemock: ^2.0.0
   fuzzysort: ^2.0.1
-  hotkeys-js: ^3.10.0
   husky: ^8.0.1
   jest-serializer-vue: ^2.0.2
   jsdom: ^20.0.0
@@ -68,7 +67,6 @@ dependencies:
   bulma: 0.9.4
   date-fns: 2.29.3
   fuzzysort: 2.0.1
-  hotkeys-js: 3.10.0
   lodash.debounce: 4.0.8
   pinia: 2.0.22_arz4dztosvwy2ghjrlh2wdhejm
   sass: 1.54.9
@@ -2353,10 +2351,6 @@ packages:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
 
-  /hotkeys-js/3.10.0:
-    resolution: {integrity: sha512-20xeVdOqcgTkMox0+BqFwADZP7+5dy/9CFPpAinSMh2d0s3b0Hs2V2D+lMh4Hphkf7VE9pwnOl58eP1te+REcg==}
-    dev: false
-
   /html-encoding-sniffer/3.0.0:
     resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
     engines: {node: '>=12'}