add reaction

src/shared/notes/actions.tsx

@@ -30,18 +30,31 @@ export function NoteActions({ id, pubkey }: { id: string; pubkey: string }) {
       <div className="-ml-1 mt-4 inline-flex w-full items-center">
         <div className="inline-flex items-center gap-2">
           <NoteReply id={id} pubkey={pubkey} />
+          <NoteReaction id={id} pubkey={pubkey} />
           <NoteRepost id={id} pubkey={pubkey} />
-          <NoteReaction />
           <NoteZap />
         </div>
         <div className="mx-2 block h-4 w-px bg-zinc-800" />
-        <button
-          type="button"
-          onClick={() => openThread(id)}
-          className="group inline-flex h-7 w-7 items-center justify-center"
-        >
-          <ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
-        </button>
+        <Tooltip.Root delayDuration={150}>
+          <Tooltip.Trigger asChild>
+            <button
+              type="button"
+              onClick={() => openThread(id)}
+              className="group inline-flex h-7 w-7 items-center justify-center"
+            >
+              <ThreadIcon className="h-5 w-5 text-zinc-300 group-hover:text-fuchsia-400" />
+            </button>
+          </Tooltip.Trigger>
+          <Tooltip.Portal>
+            <Tooltip.Content
+              className="-left-10 select-none rounded-md bg-zinc-800/80 px-3.5 py-1.5 text-sm leading-none text-zinc-100 backdrop-blur-lg will-change-[transform,opacity] 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"
+              sideOffset={5}
+            >
+              Open thread
+              <Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
+            </Tooltip.Content>
+          </Tooltip.Portal>
+        </Tooltip.Root>
       </div>
     </Tooltip.Provider>
   );