feat: chat reactions

components/chat/message-gestures.tsx

@@ -40,16 +40,23 @@ const CLAIM_PX = 10;
 const LONG_PRESS_MS = 450;
 /** Movement that cancels a long press — a drag is not a hold. */
 const LONG_PRESS_SLOP_PX = 8;
+/** Longest gap between two taps still read as a double tap. */
+const DOUBLE_TAP_MS = 300;
+/** How far the second tap may land from the first. */
+const DOUBLE_TAP_SLOP_PX = 24;
 
 export function MessageGestures({
   onReply,
   onMenu,
+  onDoubleTap,
   disabled = false,
   children,
 }: {
   onReply: () => void;
   /** Opens the context menu at the given viewport point. */
   onMenu: (point: { x: number; y: number }) => void;
+  /** Two quick taps in the same spot — sends a heart. */
+  onDoubleTap?: () => void;
   disabled?: boolean;
   children: React.ReactNode;
 }) {
@@ -61,6 +68,8 @@ export function MessageGestures({
   const holdTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Set once a long press fires, so the release doesn't also trigger a reply.
   const consumed = useRef(false);
+  // When and where the last tap landed, for pairing it with the next one.
+  const lastTap = useRef<{ t: number; x: number; y: number } | null>(null);
 
   const cancelHold = useCallback(() => {
     if (holdTimer.current) {
@@ -124,10 +133,29 @@ export function MessageGestures({
     setOffset(Math.max(0, Math.min(travel, MAX_PX)));
   };
 
-  const onPointerUp = () => {
+  const onPointerUp = (e: React.PointerEvent) => {
     cancelHold();
     // A long press already acted; releasing must not also fire a reply.
-    if (!consumed.current && claimed.current && offset >= TRIGGER_PX) onReply();
+    if (!consumed.current && claimed.current && offset >= TRIGGER_PX) {
+      onReply();
+      lastTap.current = null;
+    } else if (!consumed.current && !claimed.current && onDoubleTap) {
+      // A stationary tap. Paired with a recent nearby one, it is a double tap.
+      // Tracked here rather than with onDoubleClick so touch and mouse behave
+      // the same, and so a swipe or a long press can never count as a tap.
+      const now = Date.now();
+      const prev = lastTap.current;
+      const near =
+        prev !== null &&
+        Math.abs(e.clientX - prev.x) < DOUBLE_TAP_SLOP_PX &&
+        Math.abs(e.clientY - prev.y) < DOUBLE_TAP_SLOP_PX;
+      if (prev && near && now - prev.t < DOUBLE_TAP_MS) {
+        lastTap.current = null;
+        onDoubleTap();
+      } else {
+        lastTap.current = { t: now, x: e.clientX, y: e.clientY };
+      }
+    }
     reset();
   };