fix: use kbd for editor card

4 files changed, 36 insertions, 28 deletions

diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index b80cd889..fa752c5f 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -1,8 +1,8 @@
 import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form";
-import React, { useEffect, useImperativeHandle, useRef } from "react";
+import React, { useImperativeHandle, useRef } from "react";
 import { ActionButton } from "@/components/ui/action-button";
 import { Form, FormControl, FormItem } from "@/components/ui/form";
-import InfoTooltip from "@/components/ui/info-tooltip";
+import { Kbd } from "@/components/ui/kbd";
 import MultipleChoiceDialog from "@/components/ui/multiple-choice-dialog";
 import { Separator } from "@/components/ui/separator";
 import { Textarea } from "@/components/ui/textarea";
@@ -17,6 +17,7 @@ import {
 import { cn, getOS } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
+import { useHotkeys } from "react-hotkeys-hook";
 import { z } from "zod";
 
 import { useCreateBookmarkWithPostHook } from "@karakeep/shared-react/hooks/bookmarks";
@@ -24,27 +25,6 @@ import { BookmarkTypes } from "@karakeep/shared/types/bookmarks";
 
 import { useUploadAsset } from "../UploadDropzone";
 
-function useFocusOnKeyPress(
-  inputRef: React.RefObject<HTMLTextAreaElement | null>,
-) {
-  useEffect(() => {
-    function handleKeyPress(e: KeyboardEvent) {
-      if (!inputRef.current) {
-        return;
-      }
-      if ((e.metaKey || e.ctrlKey) && e.code === "KeyE") {
-        inputRef.current.focus();
-        e.preventDefault();
-      }
-    }
-
-    document.addEventListener("keydown", handleKeyPress);
-    return () => {
-      document.removeEventListener("keydown", handleKeyPress);
-    };
-  }, [inputRef]);
-}
-
 interface MultiUrlImportState {
   urls: URL[];
   text: string;
@@ -70,7 +50,9 @@ export default function EditorCard({ className }: { className?: string }) {
   });
   const { ref, ...textFieldProps } = form.register("text");
   useImperativeHandle(ref, () => inputRef.current);
-  useFocusOnKeyPress(inputRef);
+  useHotkeys("mod+e", () => {
+    inputRef.current?.focus();
+  });
 
   const { mutate, isPending } = useCreateBookmarkWithPostHook({
     onSuccess: (resp) => {
@@ -215,9 +197,7 @@ export default function EditorCard({ className }: { className?: string }) {
       >
         <div className="flex justify-between">
           <p className="text-sm">{t("editor.new_item")}</p>
-          <InfoTooltip size={15}>
-            <p className="text-center">{t("editor.quickly_focus")}</p>
-          </InfoTooltip>
+          <Kbd>⌘ + E</Kbd>
         </div>
         <Separator />
         <FormItem className="flex-1">
diff --git a/apps/web/components/ui/kbd.tsx b/apps/web/components/ui/kbd.tsx
new file mode 100644
index 00000000..5bc48405
--- /dev/null
+++ b/apps/web/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };
diff --git a/apps/web/lib/i18n/locales/en/translation.json b/apps/web/lib/i18n/locales/en/translation.json
index 5db867a2..abc0d51a 100644
--- a/apps/web/lib/i18n/locales/en/translation.json
+++ b/apps/web/lib/i18n/locales/en/translation.json
@@ -609,7 +609,6 @@
     }
   },
   "editor": {
-    "quickly_focus": "You can quickly focus on this field by pressing ⌘ + E",
     "multiple_urls_dialog_title": "Importing URLs as separate Bookmarks?",
     "multiple_urls_dialog_desc": "The input contains multiple URLs on separate lines. Do you want to import them as separate bookmarks?",
     "import_as_text": "Import as Text Bookmark",
diff --git a/apps/web/package.json b/apps/web/package.json
index 02c57718..67ce2560 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -82,6 +82,7 @@
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^5.0.0",
     "react-hook-form": "^7.57.0",
+    "react-hotkeys-hook": "^5.2.1",
     "react-i18next": "^15.1.1",
     "react-intersection-observer": "^9.13.1",
     "react-markdown": "^9.0.1",