feat(social): follows, favorites, comments, reactions, collections, public profiles

Follow/unfollow users. Recipe favorites. Threaded comments with emoji reactions. Collections (public/private) with shared member invite. Activity feed. Public profile pages at /u/[username].
2026-07-01 08:10:30 +02:00
parent d9d58fd01a
commit 9d02a69250
23 changed files with 1825 additions and 0 deletions
@@ -0,0 +1,56 @@
+"use client";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { FolderOpen } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { NewCollectionButton } from "@/components/social/new-collection-button";
+
+type Collection = {
+  id: string;
+  name: string;
+  description: string | null;
+  isPublic: boolean;
+  recipeCount: number;
+};
+
+type Props = {
+  collections: Collection[];
+};
+
+export function CollectionsPageContent({ collections }: Props) {
+  const t = useTranslations("collections");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
+        </div>
+        <NewCollectionButton />
+      </div>
+
+      {collections.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
+          <FolderOpen className="h-12 w-12 text-muted-foreground/40" />
+          <p className="text-muted-foreground text-sm">{t("empty")}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {collections.map((col) => (
+            <Link key={col.id} href={`/collections/${col.id}`} className="group rounded-xl border p-4 hover:shadow-sm transition-shadow space-y-2">
+              <div className="flex items-start justify-between gap-2">
+                <h2 className="font-semibold group-hover:text-primary transition-colors line-clamp-1">{col.name}</h2>
+                {col.isPublic && <Badge variant="secondary" className="text-xs shrink-0">{t("public")}</Badge>}
+              </div>
+              {col.description && <p className="text-sm text-muted-foreground line-clamp-2">{col.description}</p>}
+              <p className="text-xs text-muted-foreground">
+                {col.recipeCount !== 1 ? t("recipeCountPlural", { count: col.recipeCount }) : t("recipeCount", { count: col.recipeCount })}
+              </p>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { GitFork } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+
+export function ForkCollectionButton({ collectionId }: { collectionId: string }) {
+  const [forking, setForking] = useState(false);
+  const router = useRouter();
+
+  async function handleFork() {
+    setForking(true);
+    try {
+      const res = await fetch(`/api/v1/collections/${collectionId}/fork`, { method: "POST" });
+      if (!res.ok) {
+        const data = await res.json() as { error?: string };
+        throw new Error(data.error ?? "Fork failed");
+      }
+      const { id } = await res.json() as { id: string };
+      toast.success("Collection forked to your library");
+      router.push(`/collections/${id}`);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Fork failed");
+      setForking(false);
+    }
+  }
+
+  return (
+    <Button variant="outline" size="sm" onClick={() => { void handleFork(); }} disabled={forking} className="gap-2 shrink-0">
+      <GitFork className="h-4 w-4" />
+      {forking ? "Forking…" : "Fork collection"}
+    </Button>
+  );
+}
@@ -0,0 +1,193 @@
+"use client";
+
+import { useState } from "react";
+import { UserPlus, X } from "lucide-react";
+import { toast } from "sonner";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+
+type Role = "viewer" | "editor";
+
+interface Member {
+  id: string;
+  userId: string;
+  role: Role;
+  createdAt: string;
+  user: {
+    name: string;
+    username: string | null;
+    avatarUrl: string | null;
+  };
+}
+
+interface Props {
+  collectionId: string;
+}
+
+export function ShareCollectionButton({ collectionId }: Props) {
+  const [open, setOpen] = useState(false);
+  const [email, setEmail] = useState("");
+  const [role, setRole] = useState<Role>("viewer");
+  const [members, setMembers] = useState<Member[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [inviting, setInviting] = useState(false);
+
+  async function fetchMembers() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/v1/collections/${collectionId}/members`);
+      if (!res.ok) throw new Error("Failed to load members");
+      const data = await res.json() as Member[];
+      setMembers(data);
+    } catch {
+      toast.error("Could not load members");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleOpenChange(next: boolean) {
+    setOpen(next);
+    if (next) {
+      void fetchMembers();
+    } else {
+      setEmail("");
+      setRole("viewer");
+    }
+  }
+
+  async function handleInvite() {
+    if (!email.trim()) {
+      toast.error("Enter an email address");
+      return;
+    }
+    setInviting(true);
+    try {
+      const res = await fetch(`/api/v1/collections/${collectionId}/members`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: email.trim(), role }),
+      });
+      if (res.status === 409) { toast.error("Already a member"); return; }
+      if (res.status === 404) { toast.error("User not found"); return; }
+      if (!res.ok) { toast.error("Could not invite user"); return; }
+      toast.success("Invitation sent");
+      setEmail("");
+      await fetchMembers();
+    } catch {
+      toast.error("Could not invite user");
+    } finally {
+      setInviting(false);
+    }
+  }
+
+  async function handleRemove(memberId: string) {
+    try {
+      const res = await fetch(
+        `/api/v1/collections/${collectionId}/members?memberId=${memberId}`,
+        { method: "DELETE" },
+      );
+      if (!res.ok) { toast.error("Could not remove member"); return; }
+      setMembers((prev) => prev.filter((m) => m.id !== memberId));
+      toast.success("Member removed");
+    } catch {
+      toast.error("Could not remove member");
+    }
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
+        <UserPlus className="h-4 w-4 mr-2" />
+        Share
+      </Button>
+
+      <Dialog open={open} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Share collection</DialogTitle>
+            <DialogDescription>
+              Invite people to view or edit this collection.
+            </DialogDescription>
+          </DialogHeader>
+
+          {/* Invite form */}
+          <div className="flex gap-2 mt-2">
+            <Input
+              type="email"
+              placeholder="Email address"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
+              className="flex-1"
+            />
+            <Select value={role} onValueChange={(v) => setRole(v as Role)}>
+              <SelectTrigger className="w-28">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="viewer">Viewer</SelectItem>
+                <SelectItem value="editor">Editor</SelectItem>
+              </SelectContent>
+            </Select>
+            <Button onClick={() => void handleInvite()} disabled={inviting}>
+              Invite
+            </Button>
+          </div>
+
+          {/* Members list */}
+          <div className="mt-4 space-y-2">
+            {loading && (
+              <p className="text-sm text-muted-foreground">Loading members…</p>
+            )}
+            {!loading && members.length === 0 && (
+              <p className="text-sm text-muted-foreground">No members yet.</p>
+            )}
+            {members.map((m) => (
+              <div
+                key={m.id}
+                className="flex items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
+              >
+                <div className="flex-1 min-w-0">
+                  <span className="font-medium truncate">{m.user.name}</span>
+                  {m.user.username && (
+                    <span className="text-muted-foreground ml-1">
+                      @{m.user.username}
+                    </span>
+                  )}
+                </div>
+                <Badge variant={m.role === "editor" ? "default" : "secondary"}>
+                  {m.role}
+                </Badge>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 shrink-0"
+                  onClick={() => void handleRemove(m.id)}
+                  aria-label="Remove member"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}