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,62 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { db, collections, eq, and, or } from "@epicure/db";
+import { RecipeCard } from "@/components/recipe/recipe-card";
+import { ForkCollectionButton } from "@/components/collections/fork-collection-button";
+import { ShareCollectionButton } from "@/components/collections/share-collection-button";
+
+type Params = { params: Promise<{ id: string }> };
+
+export const metadata: Metadata = { title: "Collection" };
+
+export default async function CollectionPage({ params }: Params) {
+  const { id } = await params;
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return null;
+
+  const col = await db.query.collections.findFirst({
+    where: and(
+      eq(collections.id, id),
+      or(eq(collections.userId, session.user.id), eq(collections.isPublic, true))
+    ),
+    with: { recipes: { with: { recipe: { with: { photos: true } } } } },
+  });
+
+  if (!col) notFound();
+
+  const isOwner = col.userId === session.user.id;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{col.name}</h1>
+          {col.description && <p className="text-muted-foreground mt-1">{col.description}</p>}
+          <p className="text-sm text-muted-foreground mt-1">
+            {col.recipes.length} recipe{col.recipes.length !== 1 ? "s" : ""} · {col.isPublic ? "Public" : "Private"}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          {isOwner && <ShareCollectionButton collectionId={id} />}
+          {!isOwner && col.isPublic && (
+            <ForkCollectionButton collectionId={id} />
+          )}
+        </div>
+      </div>
+
+      {col.recipes.length === 0 ? (
+        <div className="flex items-center justify-center h-48 border-2 border-dashed rounded-xl">
+          <p className="text-muted-foreground text-sm">No recipes in this collection yet.</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {col.recipes.map(({ recipe }) => (
+            recipe && <RecipeCard key={recipe.id} recipe={recipe} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { db, collections, eq, desc } from "@epicure/db";
+import { CollectionsPageContent } from "@/components/collections/collections-page-content";
+
+export const metadata: Metadata = { title: "Collections" };
+
+export default async function CollectionsPage() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return null;
+
+  const userCollections = await db.query.collections.findMany({
+    where: eq(collections.userId, session.user.id),
+    orderBy: desc(collections.updatedAt),
+    with: { recipes: { limit: 1 } },
+  });
+
+  return (
+    <CollectionsPageContent
+      collections={userCollections.map((col) => ({
+        id: col.id,
+        name: col.name,
+        description: col.description,
+        isPublic: col.isPublic,
+        recipeCount: col.recipes.length,
+      }))}
+    />
+  );
+}