feat: chat

2026-08-29 03:49:58 +05:30
parent 3257efb06a
commit 523b6fa7e8
34 changed files with 5381 additions and 11 deletions
@@ -0,0 +1,173 @@
+"use client";
+
+/**
+ * The message context menu: reply, copy, star, forward, delete, report.
+ *
+ * Opened by long-press on touch and right-click on desktop, both arbitrated by
+ * MessageGestures. Positioned at the pointer and clamped to the viewport, so a
+ * bubble near an edge doesn't push the menu off-screen.
+ */
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  Copy,
+  Flag,
+  Forward,
+  Reply,
+  Star,
+  StarOff,
+  Trash2,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export type MenuPoint = { x: number; y: number };
+
+export type MessageMenuActions = {
+  onReply: () => void;
+  onCopy: () => void;
+  onStar: () => void;
+  onForward: () => void;
+  onDeleteForMe: () => void;
+  /** Absent when the caller isn't the sender — only they may erase for all. */
+  onDeleteForEveryone?: () => void;
+  onReport?: () => void;
+};
+
+const MARGIN = 8;
+
+export function MessageMenu({
+  point,
+  starred,
+  actions,
+  onClose,
+}: {
+  point: MenuPoint;
+  starred: boolean;
+  actions: MessageMenuActions;
+  onClose: () => void;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<MenuPoint>(point);
+
+  // Clamp after measuring, before paint, so the menu never flashes off-screen.
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const { width, height } = el.getBoundingClientRect();
+    setPos({
+      x: Math.min(Math.max(MARGIN, point.x), window.innerWidth - width - MARGIN),
+      y: Math.min(Math.max(MARGIN, point.y), window.innerHeight - height - MARGIN),
+    });
+  }, [point.x, point.y]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const run = (fn?: () => void) => () => {
+    fn?.();
+    onClose();
+  };
+
+  return (
+    <>
+      {/* Catches the next click or scroll anywhere and dismisses. */}
+      <div
+        className="fixed inset-0 z-40"
+        onClick={onClose}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          onClose();
+        }}
+      />
+      <div
+        ref={ref}
+        role="menu"
+        style={{ left: pos.x, top: pos.y }}
+        // 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"
+      >
+        <Item icon={<Reply className="size-4" />} onClick={run(actions.onReply)}>
+          Reply
+        </Item>
+        <Item icon={<Copy className="size-4" />} onClick={run(actions.onCopy)}>
+          Copy
+        </Item>
+        <Item
+          icon={
+            starred ? <StarOff className="size-4" /> : <Star className="size-4" />
+          }
+          onClick={run(actions.onStar)}
+        >
+          {starred ? "Remove star" : "Star"}
+        </Item>
+        <Item
+          icon={<Forward className="size-4" />}
+          onClick={run(actions.onForward)}
+        >
+          Forward
+        </Item>
+
+        <div className="my-1 h-px bg-border" />
+
+        <Item
+          icon={<Trash2 className="size-4" />}
+          onClick={run(actions.onDeleteForMe)}
+        >
+          Delete for me
+        </Item>
+        {actions.onDeleteForEveryone && (
+          <Item
+            danger
+            icon={<Trash2 className="size-4" />}
+            onClick={run(actions.onDeleteForEveryone)}
+          >
+            Delete for everyone
+          </Item>
+        )}
+        {actions.onReport && (
+          <Item
+            danger
+            icon={<Flag className="size-4" />}
+            onClick={run(actions.onReport)}
+          >
+            Report
+          </Item>
+        )}
+      </div>
+    </>
+  );
+}
+
+function Item({
+  icon,
+  onClick,
+  danger = false,
+  children,
+}: {
+  icon: React.ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm transition-colors",
+        danger
+          ? "text-destructive hover:bg-destructive/10"
+          : "text-foreground hover:bg-muted",
+      )}
+    >
+      {icon}
+      {children}
+    </button>
+  );
+}