feat: add zap command

packages/ui/src/note/buttons/downvote.tsx

@@ -3,11 +3,14 @@ import { useState } from "react";
 import { useNoteContext } from "../provider";
 import { useArk } from "@lume/ark";
 import { cn } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useTranslation } from "react-i18next";
 
 export function NoteDownvote() {
   const ark = useArk();
   const event = useNoteContext();
 
+  const [t] = useTranslation();
   const [reaction, setReaction] = useState<"-" | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -23,22 +26,34 @@ export function NoteDownvote() {
   };
 
   return (
-    <button
-      type="button"
-      onClick={down}
-      disabled={!!reaction || loading}
-      className={cn(
-        "inline-flex size-7 items-center justify-center rounded-full",
-        reaction === "-"
-          ? "bg-blue-500 text-white"
-          : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
-      )}
-    >
-      {loading ? (
-        <LoaderIcon className="size-4 animate-spin" />
-      ) : (
-        <ArrowDownIcon className="size-4" />
-      )}
-    </button>
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={down}
+            disabled={!!reaction || loading}
+            className={cn(
+              "inline-flex size-7 items-center justify-center rounded-full",
+              reaction === "-"
+                ? "bg-blue-500 text-white"
+                : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
+            )}
+          >
+            {loading ? (
+              <LoaderIcon className="size-4 animate-spin" />
+            ) : (
+              <ArrowDownIcon className="size-4" />
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] dark:bg-neutral-50 dark:text-neutral-950">
+            {t("note.buttons.downvote")}
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
   );
 }

packages/ui/src/note/buttons/upvote.tsx

@@ -3,11 +3,14 @@ import { useState } from "react";
 import { useNoteContext } from "../provider";
 import { useArk } from "@lume/ark";
 import { cn } from "@lume/utils";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { useTranslation } from "react-i18next";
 
 export function NoteUpvote() {
   const ark = useArk();
   const event = useNoteContext();
 
+  const [t] = useTranslation();
   const [reaction, setReaction] = useState<"+" | null>(null);
   const [loading, setLoading] = useState(false);
 
@@ -23,22 +26,34 @@ export function NoteUpvote() {
   };
 
   return (
-    <button
-      type="button"
-      onClick={up}
-      disabled={!!reaction || loading}
-      className={cn(
-        "inline-flex size-7 items-center justify-center rounded-full",
-        reaction === "+"
-          ? "bg-blue-500 text-white"
-          : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
-      )}
-    >
-      {loading ? (
-        <LoaderIcon className="size-4 animate-spin" />
-      ) : (
-        <ArrowUpIcon className="size-4" />
-      )}
-    </button>
+    <Tooltip.Provider>
+      <Tooltip.Root delayDuration={150}>
+        <Tooltip.Trigger asChild>
+          <button
+            type="button"
+            onClick={up}
+            disabled={!!reaction || loading}
+            className={cn(
+              "inline-flex size-7 items-center justify-center rounded-full",
+              reaction === "+"
+                ? "bg-blue-500 text-white"
+                : "bg-neutral-100 text-neutral-700 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-neutral-300",
+            )}
+          >
+            {loading ? (
+              <LoaderIcon className="size-4 animate-spin" />
+            ) : (
+              <ArrowUpIcon className="size-4" />
+            )}
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade inline-flex h-7 select-none items-center justify-center rounded-md bg-neutral-950 px-3.5 text-sm text-neutral-50 will-change-[transform,opacity] dark:bg-neutral-50 dark:text-neutral-950">
+            {t("note.buttons.upvote")}
+            <Tooltip.Arrow className="fill-neutral-950 dark:fill-neutral-50" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
   );
 }

packages/ui/src/note/menu.tsx

@@ -95,6 +95,7 @@ export function NoteMenu() {
               {t("note.menu.copyRaw")}
             </button>
           </DropdownMenu.Item>
+          <DropdownMenu.Arrow className="fill-black dark:fill-white" />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>