feat: direct messages

1:1 conversations (userAId < userBId dedup pair), messages, per-participant read tracking (conversation_reads). Block relationship is enforced on every send. UI: /messages list + /messages/[id] thread (5s poll), MessageButton on profiles, unread-badged nav icon. This completes the social-feature backlog: notifications, rate limiting, blocking, reporting, search/discovery, mentions, DMs, plus fixes for the recipe-visibility 404, follow race, and 2-level comment thread cap found during the earlier audit. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-03 22:24:56 +02:00
parent a51ba85253
commit c3776238c7
16 changed files with 4815 additions and 0 deletions
@@ -0,0 +1,116 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+
+type Message = {
+  id: string;
+  content: string;
+  senderId: string;
+  createdAt: string;
+};
+
+export function MessageThread({
+  conversationId,
+  currentUserId,
+}: {
+  conversationId: string;
+  currentUserId: string;
+}) {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [content, setContent] = useState("");
+  const [sending, setSending] = useState(false);
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const load = useCallback(async () => {
+    const res = await fetch(`/api/v1/conversations/${conversationId}/messages`);
+    if (res.ok) {
+      const data = (await res.json()) as { messages: Message[] };
+      setMessages(data.messages);
+    }
+    setLoading(false);
+  }, [conversationId]);
+
+  useEffect(() => {
+    void load();
+    const interval = setInterval(() => { void load(); }, 5000);
+    return () => clearInterval(interval);
+  }, [load]);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages.length]);
+
+  async function send() {
+    if (!content.trim()) return;
+    setSending(true);
+    try {
+      const res = await fetch(`/api/v1/conversations/${conversationId}/messages`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: content.trim() }),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({})) as { error?: string };
+        toast.error(err.error ?? "Failed to send");
+        return;
+      }
+      setContent("");
+      await load();
+    } finally {
+      setSending(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex-1 overflow-y-auto space-y-3 p-4">
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Loading…</p>
+        ) : messages.length === 0 ? (
+          <p className="text-sm text-muted-foreground text-center py-8">No messages yet. Say hi!</p>
+        ) : (
+          messages.map((m) => {
+            const isOwn = m.senderId === currentUserId;
+            return (
+              <div key={m.id} className={cn("flex", isOwn ? "justify-end" : "justify-start")}>
+                <div
+                  className={cn(
+                    "max-w-[70%] rounded-2xl px-4 py-2 text-sm whitespace-pre-wrap",
+                    isOwn ? "bg-primary text-primary-foreground" : "bg-muted"
+                  )}
+                >
+                  {m.content}
+                </div>
+              </div>
+            );
+          })
+        )}
+        <div ref={bottomRef} />
+      </div>
+      <div className="border-t p-3 flex gap-2 items-end">
+        <Textarea
+          value={content}
+          onChange={(e) => setContent(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              void send();
+            }
+          }}
+          placeholder="Type a message…"
+          rows={1}
+          className="resize-none"
+        />
+        <Button size="icon" onClick={() => { void send(); }} disabled={!content.trim() || sending}>
+          <Send className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}