diff --git a/package-lock.json b/package-lock.json index ee812ef..76b967c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,9 +12,9 @@ "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.4", "@vueuse/core": "^10.4.1", + "combokeys": "^3.0.1", "dayjs": "^1.11.10", "fuse.js": "^6.6.2", - "hotkeys-js": "^3.12.0", "nanoid": "^5.0.1", "pinia": "^2.1.6", "register-service-worker": "^1.7.2", @@ -25,6 +25,7 @@ "vue3-spinners": "^1.2.2" }, "devDependencies": { + "@types/combokeys": "^2.4.9", "@vercel/node": "^3.0.7", "@vitejs/plugin-vue": "^4.2.3", "@vue/cli-plugin-pwa": "~5.0.0", @@ -2637,6 +2638,12 @@ "@types/node": "*" } }, + "node_modules/@types/combokeys": { + "version": "2.4.9", + "resolved": "https://registry.npmjs.org/@types/combokeys/-/combokeys-2.4.9.tgz", + "integrity": "sha512-Hwk0Z6XltfTKCxCPh0RVbg42PZQDsObrgFSh3MTmrcPPKj1iJByAdT1bmrfzmYr/66bjdC3c/T0b1c3cgS3Vjw==", + "dev": true + }, "node_modules/@types/connect": { "version": "3.4.37", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.37.tgz", @@ -4847,6 +4854,11 @@ "resolved": "https://registry.npmjs.org/colornames/-/colornames-1.1.1.tgz", "integrity": "sha512-/pyV40IrsdulWv+wFPmERh9k/mjsPZ64yUMDmWrtj/k1nmgrzzIENWKdaVKyBbvFdQWqkcaRxr+polCo3VMe7A==" }, + "node_modules/combokeys": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/combokeys/-/combokeys-3.0.1.tgz", + "integrity": "sha512-5nAfaLZ3oO3kA+/xdoL7t197UJTz2WWidyH3BBeU6hqHtvyFERICd0y3DQFrQkJFTKBrtUDck/xCLLoFpnjaCw==" + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -7270,11 +7282,6 @@ "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==", "dev": true }, - "node_modules/hotkeys-js": { - "version": "3.12.0", - "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.12.0.tgz", - "integrity": "sha512-Z+N573ycUKIGwFYS3ID1RzMJiGmtWMGKMiaNLyJS8B1ei+MllF4ZYmKS2T0kMWBktOz+WZLVNikftEgnukOrXg==" - }, "node_modules/hpack.js": { "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", diff --git a/package.json b/package.json index 4ced185..e7260c9 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "@vuelidate/core": "^2.0.3", "@vuelidate/validators": "^2.0.4", "@vueuse/core": "^10.4.1", + "combokeys": "^3.0.1", "dayjs": "^1.11.10", "fuse.js": "^6.6.2", - "hotkeys-js": "^3.12.0", "nanoid": "^5.0.1", "pinia": "^2.1.6", "register-service-worker": "^1.7.2", @@ -26,6 +26,7 @@ "vue3-spinners": "^1.2.2" }, "devDependencies": { + "@types/combokeys": "^2.4.9", "@vercel/node": "^3.0.7", "@vitejs/plugin-vue": "^4.2.3", "@vue/cli-plugin-pwa": "~5.0.0", diff --git a/src/App.vue b/src/App.vue index 92025da..bf76ded 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,41 +1,23 @@ diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 8ead901..71d0cd6 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -7,55 +7,19 @@ const navItems = ref([ title: "Plan", icon: "plan", link: "/", - hint: ` - - - - - - - - - - -+ G -`, + hint: `G then R`, }, { title: "Inbox", icon: "inbox", link: "/inbox", - hint: ` - - - - - - - - - - -+ I -`, + hint: `G then I`, }, { title: "Projects", icon: "folder", link: "/projects", - hint: ` - - - - - - - - - - -+ P -`, + hint: `G then P`, }, { title: "Integrations", diff --git a/src/views/Projects.vue b/src/views/Projects.vue index 44533f1..d2d973a 100644 --- a/src/views/Projects.vue +++ b/src/views/Projects.vue @@ -2,20 +2,24 @@ import { useProjectStore } from "@store/project.ts"; import ProjectRow from "@components/cards/ProjectRow.vue"; import { Project, ProjectStatistic } from "@models/project.model.ts"; -import { computed, onUnmounted, ref } from "vue"; +import { computed, onMounted, onUnmounted, ref } from "vue"; import { focusOnEditableElement } from "@utils/focus.ts"; import Icon from "../components/Icon.vue"; -import hotkeys from "hotkeys-js"; import { useLocalStorage } from "@vueuse/core"; +import Combokeys from "combokeys"; const projectStore = useProjectStore(); const rowsContainer = ref(null); -hotkeys("C", onCreateProject); +const combokeys = new Combokeys(document.documentElement); + +onMounted(() => { + combokeys.bind("c", onCreateProject); +}); onUnmounted(() => { - hotkeys.unbind("C", "all", onCreateProject); + combokeys.unbind("c"); }); function onUpdateProject(id: string, project: Partial) {