feat: chat reactions

components/chat/message-menu.tsx

@@ -18,6 +18,7 @@ import {
   StarOff,
   Trash2,
 } from "lucide-react";
+import { ReactionRow } from "@/components/chat/reaction-row";
 import { cn } from "@/lib/utils";
 
 export type MenuPoint = { x: number; y: number };
@@ -38,11 +39,17 @@ const MARGIN = 8;
 export function MessageMenu({
   point,
   starred,
+  myReaction,
+  onReact,
   actions,
   onClose,
 }: {
   point: MenuPoint;
   starred: boolean;
+  /** The viewer's current emoji on this message, if any. */
+  myReaction?: string;
+  /** Picking the same emoji again is a toggle — the caller decides. */
+  onReact: (emoji: string) => void;
   actions: MessageMenuActions;
   onClose: () => void;
 }) {
@@ -89,8 +96,19 @@ export function MessageMenu({
         // min-w-56 rather than something tighter: "Delete for everyone" is the
         // longest label and, with its icon and padding, was wrapping or sitting
         // flush against the edge at a narrower width.
-        className="fixed z-50 min-w-56 overflow-hidden rounded-xl border border-border bg-background py-1 shadow-lg"
+        className="fixed z-50 min-w-56 overflow-hidden rounded-xl border border-border bg-background pb-1 shadow-lg"
       >
+        {/* Reactions lead: they are the most common thing to want from a
+            long press, and putting them in this menu keeps one gesture
+            responsible for one surface. */}
+        <ReactionRow
+          current={myReaction}
+          onPick={(emoji) => {
+            onReact(emoji);
+            onClose();
+          }}
+        />
+
         <Item icon={<Reply className="size-4" />} onClick={run(actions.onReply)}>
           Reply
         </Item>