Fix / hotkey

package-lock.json

@@ -26,8 +26,6 @@
       "devDependencies": {
         "@babel/core": "^7.22.10",
         "@babel/eslint-parser": "^7.22.10",
-        "@types/bootstrap": "^5.2.6",
-        "@types/mousetrap": "^1.6.11",
         "@vitejs/plugin-vue": "^5.2.3",
         "@vue/cli-plugin-babel": "~5.0.0",
         "@vue/cli-plugin-eslint": "~5.0.0",
@@ -3080,16 +3078,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/bootstrap": {
-      "version": "5.2.10",
-      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.10.tgz",
-      "integrity": "sha512-F2X+cd6551tep0MvVZ6nM8v7XgGN/twpdNDjqS1TUM7YFNEtQYWk+dKAnH+T1gr6QgCoGMPl487xw/9hXooa2g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@popperjs/core": "^2.9.2"
-      }
-    },
     "node_modules/@types/connect": {
       "version": "3.4.38",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz",
@@ -3224,13 +3212,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/mousetrap": {
-      "version": "1.6.15",
-      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.15.tgz",
-      "integrity": "sha512-qL0hyIMNPow317QWW/63RvL1x5MVMV+Ru3NaY9f/CuEpCqrmb7WeuK2071ZY5hczOnm38qExWM2i2WtkXLSqFw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/@types/node": {
       "version": "22.10.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",

package.json

@@ -27,8 +27,6 @@
   "devDependencies": {
     "@babel/core": "^7.22.10",
     "@babel/eslint-parser": "^7.22.10",
-    "@types/bootstrap": "^5.2.6",
-    "@types/mousetrap": "^1.6.11",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",

src/App.vue

@@ -18,17 +18,26 @@ export default {
     };
   },
   mounted() {
-    // Install all the hotkeys on the page
+    window.addEventListener("keydown", this.handleKeyDown);
-    for (const el of document.querySelectorAll("[data-hotkey]")) {
-      install(el);
-    }
     this.sortColumn = localStorage.getItem("sortColumn") || "score";
     this.ascending =
       localStorage.getItem("ascending") === "false" ? false : true;
     this.isLoading = true;
     this.fetchDeals();
   },
+  beforeUnmount() {
+    window.removeEventListener("keydown", this.handleKeyDown);
+  },
   methods: {
+    handleKeyDown(event) {
+      const isInput = ["INPUT", "TEXTAREA"].includes(
+        document.activeElement.tagName
+      );
+      if (event.key === "/" && !isInput) {
+        event.preventDefault(); // prevent typing `/` into whatever is focused
+        this.$refs.filter.focus();
+      }
+    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -79,9 +88,6 @@ export default {
       };
     },
   },
-  components: {
-    Loading,
-  },
 };
 </script>
 
@@ -112,8 +118,6 @@ const sortBy = ref([{ key: "score", order: "desc" }]); // Vuetify 3 format
           ref="filter"
           @keyup.enter="createFilterRoute(filter.toString())"
           @keyup.esc="$refs.filter.blur()"
-          data-hotkey="/"
-          hide-details
         />
         <v-data-table
           :headers="headers"