feat: chat reactions

2026-08-30 01:51:52 +05:30
parent 0f382ed885
commit 8c7afe596d
19 changed files with 662 additions and 53 deletions
@@ -0,0 +1,101 @@
+"use client";
+
+/**
+ * The emoji row at the top of a message's long-press menu.
+ *
+ * Five quick reactions plus a "+" that opens the full set — a drawer on
+ * mobile, a modal on desktop, reusing ResponsiveDialog so it behaves like
+ * every other chat surface.
+ *
+ * It sits inside the context menu rather than being its own popover: long
+ * press is one gesture, and two surfaces competing for it would mean neither
+ * felt reliable.
+ */
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { EMOJI_GROUPS } from "@/components/ui/emoji-picker";
+import { ResponsiveDialog } from "@/components/chat/responsive-dialog";
+import { cn } from "@/lib/utils";
+
+/** What a double-tap sends. Matches the server's own default. */
+export const HEART_EMOJI = "❤️";
+
+/** The five offered without opening the full set. */
+export const QUICK_REACTIONS = [HEART_EMOJI, "😂", "🙏", "😮", "😢"];
+
+export function ReactionRow({
+  current,
+  onPick,
+}: {
+  /** The viewer's existing reaction, so it can be shown as selected. */
+  current?: string;
+  /** Picking the current emoji again clears it — the caller decides. */
+  onPick: (emoji: string) => void;
+}) {
+  const [browsing, setBrowsing] = useState(false);
+
+  return (
+    <>
+      <div className="flex items-center gap-1 border-b border-border px-2 py-2">
+        {QUICK_REACTIONS.map((emoji) => (
+          <button
+            key={emoji}
+            type="button"
+            onClick={() => onPick(emoji)}
+            aria-label={`React ${emoji}`}
+            aria-pressed={current === emoji}
+            className={cn(
+              "inline-flex size-9 items-center justify-center rounded-full text-lg transition-colors",
+              current === emoji ? "bg-primary/15" : "hover:bg-muted",
+            )}
+          >
+            {emoji}
+          </button>
+        ))}
+        <button
+          type="button"
+          onClick={() => setBrowsing(true)}
+          aria-label="More reactions"
+          className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          <Plus className="size-4" />
+        </button>
+      </div>
+
+      {browsing && (
+        <ResponsiveDialog
+          title="Pick a reaction"
+          description="Choose any emoji to react with."
+          onClose={() => setBrowsing(false)}
+        >
+          <div className="space-y-4 p-4">
+            {EMOJI_GROUPS.map((group) => (
+              <section key={group.label}>
+                <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                  {group.label}
+                </h3>
+                <div className="grid grid-cols-8 gap-1">
+                  {group.emojis.map((emoji) => (
+                    <button
+                      key={emoji}
+                      type="button"
+                      onClick={() => {
+                        setBrowsing(false);
+                        onPick(emoji);
+                      }}
+                      aria-label={`React ${emoji}`}
+                      className="inline-flex size-9 items-center justify-center rounded-md text-lg hover:bg-muted"
+                    >
+                      {emoji}
+                    </button>
+                  ))}
+                </div>
+              </section>
+            ))}
+          </div>
+        </ResponsiveDialog>
+      )}
+    </>
+  );
+}