feat: add "goto create link/category" keybinds

components/SideMenu/SideMenu.tsx

@@ -51,8 +51,12 @@ function MenuControls({
   return (
     <div className={styles["menu-controls"]}>
       <LinkTag href={"/category/create"}>Créer categorie</LinkTag>
+      <LinkTag href={"/category/create"}>
+        Créer categorie <kbd>C</kbd>
+      </LinkTag>
       <LinkTag href={`/link/create?categoryId=${categoryActive.id}`}>
         Créer lien
+        Créer lien <kbd>L</kbd>
       </LinkTag>
     </div>
   );

package-lock.json

@@ -9,9 +9,9 @@
         "@prisma/client": "^4.12.0",
         "@svgr/webpack": "^7.0.0",
         "axios": "^1.3.5",
+        "hotkeys-js": "^3.10.2",
         "next": "^13.3.0",
         "next-auth": "^4.22.0",
-        "next-connect": "^0.13.0",
         "next-seo": "^6.0.0",
         "node-html-parser": "^6.1.5",
         "nprogress": "^0.2.0",
@@ -4571,6 +4571,11 @@
         "react-is": "^16.7.0"
       }
     },
+    "node_modules/hotkeys-js": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.10.2.tgz",
+      "integrity": "sha512-Z6vLmJTYzkbZZXlBkhrYB962Q/rZGc/WHQiyEGu9ZZVF7bAeFDjjDa31grWREuw9Ygb4zmlov2bTkPYqj0aFnQ=="
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -5262,14 +5267,6 @@
         }
       }
     },
-    "node_modules/next-connect": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/next-connect/-/next-connect-0.13.0.tgz",
-      "integrity": "sha512-f2G4edY01XomjCECSrgOpb/zzQinJO6Whd8Zds0+rLUYhj5cLwkh6FVvZsQCSSbxSc4k9nCwNuk5NLIhvO1gUA==",
-      "dependencies": {
-        "trouter": "^3.2.0"
-      }
-    },
     "node_modules/next-seo": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-6.0.0.tgz",
@@ -5861,14 +5858,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/regexparam": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz",
-      "integrity": "sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
@@ -6343,17 +6332,6 @@
         "jquery": ">=1.12.0"
       }
     },
-    "node_modules/trouter": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/trouter/-/trouter-3.2.0.tgz",
-      "integrity": "sha512-rLLXbhTObLy2MBVjLC+jTnoIKw99n0GuJs9ov10J870vDw5qhTurPzsDrudNtBf5w/CZ9ctZy2p2IMmhGcel2w==",
-      "dependencies": {
-        "regexparam": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",

package.json

@@ -11,9 +11,9 @@
     "@prisma/client": "^4.12.0",
     "@svgr/webpack": "^7.0.0",
     "axios": "^1.3.5",
+    "hotkeys-js": "^3.10.2",
     "next": "^13.3.0",
     "next-auth": "^4.22.0",
-    "next-connect": "^0.13.0",
     "next-seo": "^6.0.0",
     "node-html-parser": "^6.1.5",
     "nprogress": "^0.2.0",

pages/index.tsx

@@ -1,5 +1,6 @@
+import hotkeys from "hotkeys-js";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import Links from "../components/Links/Links";
 import SideMenu from "../components/SideMenu/SideMenu";
@@ -31,6 +32,23 @@ function Home({ categories, favorites, currentCategory }: HomeProps) {
     );
   };
 
+  const gotoCreateLink = useCallback(() => {
+    router.push(`/link/create?categoryId=${categoryActive.id}`);
+  }, [categoryActive.id, router]);
+  const gotoCreateCategory = useCallback(() => {
+    router.push("/category/create");
+  }, [router]);
+
+  useEffect(() => {
+    hotkeys("l", gotoCreateLink);
+    hotkeys("c", gotoCreateCategory);
+
+    return () => {
+      hotkeys.unbind("l", gotoCreateLink);
+      hotkeys.unbind("c", gotoCreateCategory);
+    };
+  }, [gotoCreateCategory, gotoCreateLink]);
+
   return (
     <div className="App">
       <SideMenu

styles/globals.scss

@@ -183,6 +183,17 @@ select:not(.nostyle) {
 	border: 0;
 }
 
+kbd {
+	text-shadow: 0 1px 0 #fff;
+	color: rgb(51, 51, 51);
+	background-color: rgb(247, 247, 247);
+	padding: 0.25em 0.5em;
+	border-radius: 3px;
+	border: 1px solid rgb(204, 204, 204);
+	box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
+	display: inline-block;
+}
+
 @media (max-width: 1280px) {
 	.App {
 		width: 100%;