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].

apps/web/app/(app)/collections/[id]/page.tsx

@@ -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>
+  );
+}

apps/web/app/(app)/collections/page.tsx

@@ -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,
+      }))}
+    />
+  );
+}

apps/web/app/(app)/feed/page.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from "next";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { db, recipes, users, userFollows, eq, desc, inArray } from "@epicure/db";
+import { getPublicUrl } from "@/lib/storage";
+import { FeedPageContent } from "@/components/feed/feed-page-content";
+
+export const metadata: Metadata = { title: "Feed" };
+
+export default async function FeedPage() {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return null;
+
+  const followedRows = await db
+    .select({ followingId: userFollows.followingId })
+    .from(userFollows)
+    .where(eq(userFollows.followerId, session.user.id));
+
+  const followedIds = followedRows.map((r) => r.followingId);
+
+  if (followedIds.length === 0) {
+    return <FeedPageContent followedCount={0} feedRecipes={[]} />;
+  }
+
+  const feedRecipes = await db
+    .select({
+      id: recipes.id,
+      title: recipes.title,
+      description: recipes.description,
+      baseServings: recipes.baseServings,
+      prepMins: recipes.prepMins,
+      cookMins: recipes.cookMins,
+      difficulty: recipes.difficulty,
+      visibility: recipes.visibility,
+      aiGenerated: recipes.aiGenerated,
+      createdAt: recipes.createdAt,
+      authorId: recipes.authorId,
+      authorName: users.name,
+      authorUsername: users.username,
+      authorAvatarUrl: users.avatarUrl,
+    })
+    .from(recipes)
+    .innerJoin(users, eq(recipes.authorId, users.id))
+    .where(inArray(recipes.authorId, followedIds))
+    .orderBy(desc(recipes.createdAt))
+    .limit(40);
+
+  return (
+    <FeedPageContent
+      followedCount={followedIds.length}
+      feedRecipes={feedRecipes.map((r) => ({ ...r, createdAt: r.createdAt.toISOString() }))}
+    />
+  );
+}

apps/web/app/(app)/u/[username]/page.tsx

@@ -0,0 +1,165 @@
+import { notFound } from "next/navigation";
+import { headers } from "next/headers";
+import Link from "next/link";
+import { auth } from "@/lib/auth/server";
+import {
+  db,
+  users,
+  recipes,
+  userFollows,
+  eq,
+  and,
+  desc,
+  count,
+} from "@epicure/db";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { FollowButton } from "@/components/social/follow-button";
+import { getPublicUrl } from "@/lib/storage";
+
+type Params = { params: Promise<{ username: string }> };
+
+export async function generateMetadata({ params }: Params) {
+  const { username } = await params;
+  const user = await db.query.users.findFirst({ where: eq(users.username, username) });
+  return { title: user ? `${user.name} (@${user.username})` : "Profile" };
+}
+
+export default async function UserProfilePage({ params }: Params) {
+  const { username } = await params;
+
+  const session = await auth.api.getSession({ headers: await headers() });
+
+  const user = await db.query.users.findFirst({ where: eq(users.username, username) });
+  if (!user) notFound();
+
+  const [followerCountRow, followingCountRow, recipeCountRow, publicRecipes] = await Promise.all([
+    db
+      .select({ count: count() })
+      .from(userFollows)
+      .where(eq(userFollows.followingId, user.id)),
+    db
+      .select({ count: count() })
+      .from(userFollows)
+      .where(eq(userFollows.followerId, user.id)),
+    db
+      .select({ count: count() })
+      .from(recipes)
+      .where(and(eq(recipes.authorId, user.id), eq(recipes.visibility, "public"))),
+    db.query.recipes.findMany({
+      where: and(eq(recipes.authorId, user.id), eq(recipes.visibility, "public")),
+      orderBy: desc(recipes.createdAt),
+      limit: 24,
+      with: {
+        photos: { orderBy: (t, { asc }) => asc(t.order), limit: 1 },
+      },
+    }),
+  ]);
+
+  const followerCount = followerCountRow[0]?.count ?? 0;
+  const followingCount = followingCountRow[0]?.count ?? 0;
+  const recipeCount = recipeCountRow[0]?.count ?? 0;
+
+  let isFollowing = false;
+  const isOwnProfile = session?.user.id === user.id;
+  if (session && !isOwnProfile) {
+    const followRow = await db.query.userFollows.findFirst({
+      where: and(
+        eq(userFollows.followerId, session.user.id),
+        eq(userFollows.followingId, user.id),
+      ),
+    });
+    isFollowing = !!followRow;
+  }
+
+  const initials = user.name
+    .split(" ")
+    .slice(0, 2)
+    .map((w) => w[0])
+    .join("")
+    .toUpperCase();
+
+  return (
+    <div className="max-w-4xl mx-auto space-y-10">
+      {/* Profile header */}
+      <div className="flex flex-col sm:flex-row gap-6 items-start sm:items-center">
+        <Avatar className="h-24 w-24 shrink-0">
+          {user.avatarUrl && <AvatarImage src={user.avatarUrl} alt={user.name} />}
+          <AvatarFallback className="text-2xl">{initials}</AvatarFallback>
+        </Avatar>
+
+        <div className="flex-1 space-y-3">
+          <div className="flex flex-wrap items-center gap-3">
+            <div>
+              <h1 className="text-2xl font-bold leading-tight">{user.name}</h1>
+              <p className="text-muted-foreground text-sm">@{user.username}</p>
+            </div>
+            {!isOwnProfile && session && (
+              <FollowButton
+                targetUserId={user.id}
+                targetUsername={user.username!}
+                initialFollowing={isFollowing}
+              />
+            )}
+          </div>
+
+          {user.bio && (
+            <p className="text-sm leading-relaxed max-w-prose">{user.bio}</p>
+          )}
+
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="secondary">
+              <span className="font-semibold mr-1">{recipeCount}</span> recipes
+            </Badge>
+            <Badge variant="secondary">
+              <span className="font-semibold mr-1">{followerCount}</span> followers
+            </Badge>
+            <Badge variant="secondary">
+              <span className="font-semibold mr-1">{followingCount}</span> following
+            </Badge>
+          </div>
+        </div>
+      </div>
+
+      {/* Recipe grid */}
+      {publicRecipes.length > 0 ? (
+        <div className="space-y-4">
+          <h2 className="text-xl font-semibold">Recipes</h2>
+          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+            {publicRecipes.map((recipe) => {
+              const cover = recipe.photos[0];
+              return (
+                <Link
+                  key={recipe.id}
+                  href={`/r/${recipe.id}`}
+                  className="group block rounded-xl overflow-hidden border bg-card hover:shadow-md transition-shadow"
+                >
+                  <div className="aspect-square bg-muted overflow-hidden">
+                    {cover ? (
+                      <img
+                        src={getPublicUrl(cover.storageKey)}
+                        alt={recipe.title}
+                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-muted-foreground text-3xl">
+                        🍽️
+                      </div>
+                    )}
+                  </div>
+                  <div className="p-2">
+                    <p className="text-sm font-medium leading-tight line-clamp-2">{recipe.title}</p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+      ) : (
+        <div className="text-center py-16 text-muted-foreground">
+          <p className="text-lg">No public recipes yet.</p>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/app/api/v1/collections/[id]/fork/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db, collections, collectionRecipes, eq, and, or } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function POST(_req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+  const { id } = await params;
+
+  // Allow forking public collections or own collections
+  const source = await db.query.collections.findFirst({
+    where: and(
+      eq(collections.id, id),
+      or(eq(collections.isPublic, true), eq(collections.userId, session!.user.id))
+    ),
+    with: { recipes: { columns: { recipeId: true } } },
+  });
+
+  if (!source) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  const newId = crypto.randomUUID();
+  await db.insert(collections).values({
+    id: newId,
+    userId: session!.user.id,
+    name: `${source.name} (fork)`,
+    description: source.description,
+    isPublic: false,
+    createdAt: new Date(),
+    updatedAt: new Date(),
+  });
+
+  if (source.recipes.length > 0) {
+    await db.insert(collectionRecipes).values(
+      source.recipes.map((r) => ({ collectionId: newId, recipeId: r.recipeId }))
+    );
+  }
+
+  return NextResponse.json({ id: newId }, { status: 201 });
+}

apps/web/app/api/v1/collections/[id]/members/route.ts

@@ -0,0 +1,134 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { db, collections, collectionMembers, users, eq, and } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+type Params = { params: Promise<{ id: string }> };
+
+// ─── GET /api/v1/collections/[id]/members ────────────────────────────────────
+// Owner only — returns members joined with basic user info.
+export async function GET(_req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const { id } = await params;
+
+  // Verify ownership
+  const col = await db.query.collections.findFirst({
+    where: and(eq(collections.id, id), eq(collections.userId, session!.user.id)),
+  });
+  if (!col) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  const members = await db.query.collectionMembers.findMany({
+    where: eq(collectionMembers.collectionId, id),
+    with: { user: true },
+  });
+
+  const result = members.map((m) => ({
+    id: m.id,
+    userId: m.userId,
+    role: m.role,
+    createdAt: m.createdAt,
+    user: {
+      name: m.user.name,
+      username: m.user.username,
+      avatarUrl: m.user.avatarUrl,
+    },
+  }));
+
+  return NextResponse.json(result);
+}
+
+// ─── POST /api/v1/collections/[id]/members ───────────────────────────────────
+// Owner only — invite by email or userId.
+const InviteSchema = z
+  .object({
+    email: z.string().email().optional(),
+    userId: z.string().optional(),
+    role: z.enum(["viewer", "editor"]),
+  })
+  .refine((d) => d.email !== undefined || d.userId !== undefined, {
+    message: "Provide either email or userId",
+  });
+
+export async function POST(req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const { id } = await params;
+
+  // Verify ownership
+  const col = await db.query.collections.findFirst({
+    where: and(eq(collections.id, id), eq(collections.userId, session!.user.id)),
+  });
+  if (!col) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  const body = await req.json() as unknown;
+  const parsed = InviteSchema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: "Validation error" }, { status: 400 });
+
+  const { email, userId, role } = parsed.data;
+
+  // Resolve target user
+  const targetUser = await db.query.users.findFirst({
+    where: email ? eq(users.email, email) : eq(users.id, userId!),
+  });
+  if (!targetUser) return NextResponse.json({ error: "User not found" }, { status: 404 });
+
+  // Prevent owner adding themselves
+  if (targetUser.id === session!.user.id) {
+    return NextResponse.json({ error: "Cannot invite yourself" }, { status: 400 });
+  }
+
+  // Check not already a member
+  const existing = await db.query.collectionMembers.findFirst({
+    where: and(
+      eq(collectionMembers.collectionId, id),
+      eq(collectionMembers.userId, targetUser.id),
+    ),
+  });
+  if (existing) return NextResponse.json({ error: "Already a member" }, { status: 409 });
+
+  const memberId = crypto.randomUUID();
+  await db.insert(collectionMembers).values({
+    id: memberId,
+    collectionId: id,
+    userId: targetUser.id,
+    role,
+  });
+
+  return NextResponse.json({ id: memberId }, { status: 201 });
+}
+
+// ─── DELETE /api/v1/collections/[id]/members?memberId=… ──────────────────────
+// Owner OR the member themselves can remove.
+export async function DELETE(req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const { id } = await params;
+  const memberId = req.nextUrl.searchParams.get("memberId");
+  if (!memberId) return NextResponse.json({ error: "memberId required" }, { status: 400 });
+
+  // Load member record
+  const member = await db.query.collectionMembers.findFirst({
+    where: and(eq(collectionMembers.id, memberId), eq(collectionMembers.collectionId, id)),
+  });
+  if (!member) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  // Load collection to check owner
+  const col = await db.query.collections.findFirst({
+    where: eq(collections.id, id),
+  });
+
+  const isOwner = col?.userId === session!.user.id;
+  const isSelf = member.userId === session!.user.id;
+
+  if (!isOwner && !isSelf) {
+    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
+  }
+
+  await db.delete(collectionMembers).where(eq(collectionMembers.id, memberId));
+
+  return new NextResponse(null, { status: 204 });
+}

apps/web/app/api/v1/collections/[id]/route.ts

@@ -0,0 +1,80 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { db, collections, collectionRecipes, recipes, eq, and } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+type Params = { params: Promise<{ id: string }> };
+
+export async function GET(_req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+  const { id } = await params;
+
+  const col = await db.query.collections.findFirst({
+    where: and(eq(collections.id, id), eq(collections.userId, session!.user.id)),
+    with: { recipes: { with: { recipe: { with: { photos: true } } } } },
+  });
+
+  if (!col) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  return NextResponse.json(col);
+}
+
+export async function PUT(req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+  const { id } = await params;
+
+  const existing = await db.query.collections.findFirst({
+    where: and(eq(collections.id, id), eq(collections.userId, session!.user.id)),
+  });
+  if (!existing) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  const body = await req.json() as unknown;
+  const parsed = z.object({
+    name: z.string().min(1).max(100).optional(),
+    description: z.string().max(500).optional(),
+    isPublic: z.boolean().optional(),
+    addRecipeId: z.string().optional(),
+    removeRecipeId: z.string().optional(),
+  }).safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: "Validation error" }, { status: 400 });
+
+  const data = parsed.data;
+  if (data.name || data.description !== undefined || data.isPublic !== undefined) {
+    await db.update(collections).set({
+      ...(data.name && { name: data.name }),
+      ...(data.description !== undefined && { description: data.description }),
+      ...(data.isPublic !== undefined && { isPublic: data.isPublic }),
+      updatedAt: new Date(),
+    }).where(eq(collections.id, id));
+  }
+
+  if (data.addRecipeId) {
+    const recipe = await db.query.recipes.findFirst({ where: eq(recipes.id, data.addRecipeId) });
+    if (recipe) {
+      await db.insert(collectionRecipes).values({ collectionId: id, recipeId: data.addRecipeId }).onConflictDoNothing();
+    }
+  }
+
+  if (data.removeRecipeId) {
+    await db.delete(collectionRecipes).where(
+      and(eq(collectionRecipes.collectionId, id), eq(collectionRecipes.recipeId, data.removeRecipeId))
+    );
+  }
+
+  return NextResponse.json({ updated: true });
+}
+
+export async function DELETE(_req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+  const { id } = await params;
+
+  const existing = await db.query.collections.findFirst({
+    where: and(eq(collections.id, id), eq(collections.userId, session!.user.id)),
+  });
+  if (!existing) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  await db.delete(collections).where(eq(collections.id, id));
+  return new NextResponse(null, { status: 204 });
+}

apps/web/app/api/v1/collections/route.ts

@@ -0,0 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { db, collections, eq, desc } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+const Schema = z.object({
+  name: z.string().min(1).max(100),
+  description: z.string().max(500).optional(),
+  isPublic: z.boolean().default(false),
+});
+
+export async function GET(_req: NextRequest) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const rows = await db.query.collections.findMany({
+    where: eq(collections.userId, session!.user.id),
+    orderBy: desc(collections.updatedAt),
+    with: { recipes: { limit: 4, with: { recipe: { with: { photos: true } } } } },
+  });
+
+  return NextResponse.json(rows);
+}
+
+export async function POST(req: NextRequest) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const body = await req.json() as unknown;
+  const parsed = Schema.safeParse(body);
+  if (!parsed.success) return NextResponse.json({ error: "Validation error" }, { status: 400 });
+
+  const id = crypto.randomUUID();
+  await db.insert(collections).values({
+    id,
+    userId: session!.user.id,
+    name: parsed.data.name,
+    description: parsed.data.description,
+    isPublic: parsed.data.isPublic,
+  });
+
+  return NextResponse.json({ id }, { status: 201 });
+}

apps/web/app/api/v1/users/[username]/follow/route.ts

@@ -0,0 +1,36 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db, users, userFollows, eq, and } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+
+type Params = { params: Promise<{ username: string }> };
+
+export async function POST(_req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+  const { username } = await params;
+
+  const target = await db.query.users.findFirst({ where: eq(users.username, username) });
+  if (!target) return NextResponse.json({ error: "Not found" }, { status: 404 });
+  if (target.id === session!.user.id) return NextResponse.json({ error: "Cannot follow yourself" }, { status: 400 });
+
+  await db.insert(userFollows)
+    .values({ followerId: session!.user.id, followingId: target.id })
+    .onConflictDoNothing();
+
+  return NextResponse.json({ following: true });
+}
+
+export async function DELETE(_req: NextRequest, { params }: Params) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+  const { username } = await params;
+
+  const target = await db.query.users.findFirst({ where: eq(users.username, username) });
+  if (!target) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  await db.delete(userFollows).where(
+    and(eq(userFollows.followerId, session!.user.id), eq(userFollows.followingId, target.id))
+  );
+
+  return NextResponse.json({ following: false });
+}

apps/web/app/api/v1/users/[username]/route.ts

@@ -0,0 +1,57 @@
+import { NextRequest, NextResponse } from "next/server";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { db, users, recipes, userFollows, eq, and, count } from "@epicure/db";
+
+type Params = { params: Promise<{ username: string }> };
+
+export async function GET(req: NextRequest, { params }: Params) {
+  const { username } = await params;
+
+  const user = await db.query.users.findFirst({ where: eq(users.username, username) });
+  if (!user) return NextResponse.json({ error: "Not found" }, { status: 404 });
+
+  const [followerCountRow, followingCountRow, recipeCountRow] = await Promise.all([
+    db
+      .select({ count: count() })
+      .from(userFollows)
+      .where(eq(userFollows.followingId, user.id)),
+    db
+      .select({ count: count() })
+      .from(userFollows)
+      .where(eq(userFollows.followerId, user.id)),
+    db
+      .select({ count: count() })
+      .from(recipes)
+      .where(and(eq(recipes.authorId, user.id), eq(recipes.visibility, "public"))),
+  ]);
+
+  let isFollowing = false;
+  try {
+    const session = await auth.api.getSession({ headers: await headers() });
+    if (session && session.user.id !== user.id) {
+      const followRow = await db.query.userFollows.findFirst({
+        where: and(
+          eq(userFollows.followerId, session.user.id),
+          eq(userFollows.followingId, user.id),
+        ),
+      });
+      isFollowing = !!followRow;
+    }
+  } catch {
+    // unauthenticated — isFollowing stays false
+  }
+
+  return NextResponse.json({
+    id: user.id,
+    name: user.name,
+    username: user.username,
+    avatarUrl: user.avatarUrl,
+    bio: user.bio,
+    createdAt: user.createdAt,
+    followerCount: followerCountRow[0]?.count ?? 0,
+    followingCount: followingCountRow[0]?.count ?? 0,
+    recipeCount: recipeCountRow[0]?.count ?? 0,
+    isFollowing,
+  });
+}

apps/web/app/api/v1/users/me/model-prefs/route.ts

@@ -0,0 +1,42 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { requireSession } from "@/lib/api-auth";
+import { db, userModelPrefs, eq } from "@epicure/db";
+
+const Schema = z.object({
+  textProvider: z.string().nullable().optional(),
+  textModel: z.string().nullable().optional(),
+  visionProvider: z.string().nullable().optional(),
+  visionModel: z.string().nullable().optional(),
+  mealPlanProvider: z.string().nullable().optional(),
+  mealPlanModel: z.string().nullable().optional(),
+});
+
+export async function GET() {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const prefs = await db.query.userModelPrefs.findFirst({
+    where: eq(userModelPrefs.userId, session!.user.id),
+  });
+
+  return NextResponse.json(prefs ?? null);
+}
+
+export async function PUT(req: NextRequest) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const body = Schema.safeParse(await req.json());
+  if (!body.success) return NextResponse.json({ error: "Invalid request" }, { status: 400 });
+
+  await db
+    .insert(userModelPrefs)
+    .values({ id: crypto.randomUUID(), userId: session!.user.id, ...body.data, updatedAt: new Date() })
+    .onConflictDoUpdate({
+      target: userModelPrefs.userId,
+      set: { ...body.data, updatedAt: new Date() },
+    });
+
+  return NextResponse.json({ ok: true });
+}

apps/web/app/api/v1/users/me/nutrition-goals/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server";
+import { db, userNutritionGoals, eq } from "@epicure/db";
+import { requireSession } from "@/lib/api-auth";
+import { z } from "zod";
+
+const PutSchema = z.object({
+  caloriesKcal: z.number().int().min(0).optional(),
+  proteinG: z.number().int().min(0).optional(),
+  carbsG: z.number().int().min(0).optional(),
+  fatG: z.number().int().min(0).optional(),
+});
+
+export async function GET() {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const goals = await db.query.userNutritionGoals.findFirst({
+    where: eq(userNutritionGoals.userId, session!.user.id),
+  });
+
+  return NextResponse.json({ data: goals ?? null });
+}
+
+export async function PUT(req: NextRequest) {
+  const { session, response } = await requireSession();
+  if (response) return response;
+
+  const parsed = PutSchema.safeParse(await req.json());
+  if (!parsed.success) {
+    return NextResponse.json({ error: parsed.error.flatten() }, { status: 400 });
+  }
+
+  const body = parsed.data;
+  const userId = session!.user.id;
+
+  await db
+    .insert(userNutritionGoals)
+    .values({ id: crypto.randomUUID(), userId, ...body, updatedAt: new Date() })
+    .onConflictDoUpdate({
+      target: userNutritionGoals.userId,
+      set: { ...body, updatedAt: new Date() },
+    });
+
+  return NextResponse.json({ ok: true });
+}

apps/web/app/api/v1/users/me/route.ts

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { headers } from "next/headers";
+import { auth } from "@/lib/auth/server";
+import { db, users, eq } from "@epicure/db";
+import { z } from "zod";
+
+const PatchSchema = z.object({
+  name: z.string().min(1).max(100).optional(),
+  locale: z.string().max(10).optional(),
+});
+
+export async function PATCH(req: Request) {
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (!session) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+
+  const body = PatchSchema.safeParse(await req.json());
+  if (!body.success) return NextResponse.json({ error: body.error.flatten() }, { status: 400 });
+
+  await db.update(users).set(body.data).where(eq(users.id, session.user.id));
+  return NextResponse.json({ ok: true });
+}

apps/web/components/collections/collections-page-content.tsx

@@ -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>
+  );
+}

apps/web/components/collections/fork-collection-button.tsx

@@ -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>
+  );
+}

apps/web/components/collections/share-collection-button.tsx

@@ -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>
+    </>
+  );
+}

apps/web/components/feed/feed-page-content.tsx

@@ -0,0 +1,155 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { Clock, Users, ChefHat, Flame, Heart } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { useLocale } from "@/lib/i18n/provider";
+
+type FeedRecipe = {
+  id: string;
+  title: string;
+  description: string | null;
+  baseServings: number;
+  prepMins: number | null;
+  cookMins: number | null;
+  difficulty: string | null;
+  aiGenerated: boolean;
+  createdAt: string;
+  authorId: string;
+  authorName: string;
+  authorUsername: string | null;
+  authorAvatarUrl: string | null;
+  visibility: string;
+  favoriteCount?: number;
+};
+
+type Props = {
+  followedCount: number;
+  feedRecipes: FeedRecipe[];
+};
+
+function RecipeCard({ recipe, locale }: { recipe: FeedRecipe; locale: string }) {
+  return (
+    <article className="rounded-xl border p-4 hover:shadow-sm transition-shadow">
+      <div className="flex items-center gap-3 mb-3">
+        <Avatar className="h-7 w-7">
+          <AvatarImage src={recipe.authorAvatarUrl ?? ""} />
+          <AvatarFallback className="text-xs">{recipe.authorName.slice(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        <div className="flex items-baseline gap-2 text-sm">
+          <Link href={`/u/${recipe.authorUsername ?? recipe.authorId}`} className="font-medium hover:underline">
+            {recipe.authorName}
+          </Link>
+          <span className="text-muted-foreground text-xs">
+            {new Date(recipe.createdAt).toLocaleDateString(locale, { month: "short", day: "numeric" })}
+          </span>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          {recipe.favoriteCount !== undefined && recipe.favoriteCount > 0 && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <Heart className="h-3 w-3 fill-rose-500 text-rose-500" />
+              {recipe.favoriteCount}
+            </span>
+          )}
+          {recipe.aiGenerated && <Badge variant="secondary" className="text-xs">AI</Badge>}
+        </div>
+      </div>
+
+      <Link href={`/r/${recipe.id}`} className="group block space-y-2">
+        <h2 className="font-semibold text-lg group-hover:text-primary transition-colors">{recipe.title}</h2>
+        {recipe.description && (
+          <p className="text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
+        )}
+        <div className="flex items-center gap-3 text-xs text-muted-foreground">
+          {recipe.difficulty && <Badge variant="outline" className="text-xs">{recipe.difficulty}</Badge>}
+          <span className="flex items-center gap-1"><Users className="h-3 w-3" />{recipe.baseServings}</span>
+          {recipe.prepMins && <span className="flex items-center gap-1"><Clock className="h-3 w-3" />{recipe.prepMins}m</span>}
+          {recipe.cookMins && <span className="flex items-center gap-1"><ChefHat className="h-3 w-3" />{recipe.cookMins}m</span>}
+        </div>
+      </Link>
+    </article>
+  );
+}
+
+function TrendingTab() {
+  const { locale } = useLocale();
+  const t = useTranslations("feed");
+  const [recipes, setRecipes] = useState<FeedRecipe[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("/api/v1/feed/trending")
+      .then((r) => r.json() as Promise<{ data: FeedRecipe[] }>)
+      .then(({ data }) => setRecipes(data))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) return <p className="text-sm text-muted-foreground">{t("loading")}</p>;
+  if (recipes.length === 0) return <p className="text-sm text-muted-foreground">{t("trendingEmpty")}</p>;
+
+  return (
+    <div className="space-y-4">
+      {recipes.map((recipe) => (
+        <RecipeCard key={recipe.id} recipe={recipe} locale={locale} />
+      ))}
+    </div>
+  );
+}
+
+export function FeedPageContent({ followedCount, feedRecipes }: Props) {
+  const t = useTranslations("feed");
+  const { locale } = useLocale();
+  const [tab, setTab] = useState<"following" | "trending">("following");
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+
+      {/* Tabs */}
+      <div className="flex gap-1 border-b">
+        <button
+          onClick={() => setTab("following")}
+          className={`pb-2 px-1 text-sm font-medium border-b-2 transition-colors ${
+            tab === "following"
+              ? "border-primary text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          {t("following")}
+        </button>
+        <button
+          onClick={() => setTab("trending")}
+          className={`pb-2 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5 ${
+            tab === "trending"
+              ? "border-primary text-foreground"
+              : "border-transparent text-muted-foreground hover:text-foreground"
+          }`}
+        >
+          <Flame className="h-3.5 w-3.5" />
+          {t("trending")}
+        </button>
+      </div>
+
+      {tab === "following" ? (
+        followedCount === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
+            <p className="text-muted-foreground text-sm">{t("followEmpty")}</p>
+          </div>
+        ) : feedRecipes.length === 0 ? (
+          <p className="text-muted-foreground text-sm">{t("noNew")}</p>
+        ) : (
+          <div className="space-y-4">
+            {feedRecipes.map((recipe) => (
+              <RecipeCard key={recipe.id} recipe={recipe} locale={locale} />
+            ))}
+          </div>
+        )
+      ) : (
+        <TrendingTab />
+      )}
+    </div>
+  );
+}

apps/web/components/social/comment-reactions.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+
+const REACTIONS: Record<string, string> = {
+  like: "👍",
+  love: "❤️",
+  laugh: "😂",
+  wow: "😮",
+  sad: "😢",
+  fire: "🔥",
+};
+
+type Props = {
+  recipeId: string;
+  commentId: string;
+  initialCounts?: Record<string, number>;
+  initialUserReactions?: string[];
+};
+
+export function CommentReactions({ recipeId, commentId, initialCounts = {}, initialUserReactions = [] }: Props) {
+  const [counts, setCounts] = useState<Record<string, number>>(initialCounts);
+  const [userReactions, setUserReactions] = useState<string[]>(initialUserReactions);
+  const [pending, setPending] = useState<string | null>(null);
+
+  async function toggle(type: string) {
+    if (pending) return;
+    setPending(type);
+
+    // Optimistic update
+    const hasReacted = userReactions.includes(type);
+    setUserReactions((prev) =>
+      hasReacted ? prev.filter((r) => r !== type) : [...prev, type],
+    );
+    setCounts((prev) => ({
+      ...prev,
+      [type]: Math.max(0, (prev[type] ?? 0) + (hasReacted ? -1 : 1)),
+    }));
+
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/comments/${commentId}/reactions`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type }),
+      });
+
+      if (!res.ok) {
+        // Revert optimistic update
+        setUserReactions((prev) =>
+          hasReacted ? [...prev, type] : prev.filter((r) => r !== type),
+        );
+        setCounts((prev) => ({
+          ...prev,
+          [type]: Math.max(0, (prev[type] ?? 0) + (hasReacted ? 1 : -1)),
+        }));
+        if (res.status === 401) {
+          toast.error("Sign in to react to comments");
+        } else {
+          toast.error("Failed to update reaction");
+        }
+        return;
+      }
+
+      const data = await res.json() as { counts: Record<string, number>; added: boolean };
+      setCounts(data.counts);
+      setUserReactions((prev) => {
+        if (data.added && !prev.includes(type)) return [...prev, type];
+        if (!data.added && prev.includes(type)) return prev.filter((r) => r !== type);
+        return prev;
+      });
+    } catch {
+      // Revert on network error
+      setUserReactions((prev) =>
+        hasReacted ? [...prev, type] : prev.filter((r) => r !== type),
+      );
+      setCounts((prev) => ({
+        ...prev,
+        [type]: Math.max(0, (prev[type] ?? 0) + (hasReacted ? 1 : -1)),
+      }));
+      toast.error("Failed to update reaction");
+    } finally {
+      setPending(null);
+    }
+  }
+
+  return (
+    <div className="flex flex-wrap gap-1">
+      {Object.entries(REACTIONS).map(([type, emoji]) => {
+        const reacted = userReactions.includes(type);
+        const cnt = counts[type] ?? 0;
+        return (
+          <button
+            key={type}
+            onClick={() => void toggle(type)}
+            disabled={pending === type}
+            className={[
+              "inline-flex items-center gap-0.5 rounded-full border px-2 py-0.5 text-xs transition-colors",
+              reacted
+                ? "border-primary bg-primary/10 text-primary"
+                : "border-border bg-transparent text-muted-foreground hover:border-primary/50 hover:text-foreground",
+              pending === type ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
+            ].join(" ")}
+            aria-label={`${reacted ? "Remove" : "Add"} ${type} reaction`}
+            aria-pressed={reacted}
+          >
+            <span>{emoji}</span>
+            {cnt > 0 && <span>{cnt}</span>}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

apps/web/components/social/comments-section.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { MessageCircle, Reply, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { CommentReactions } from "@/components/social/comment-reactions";
+
+type Comment = {
+  id: string;
+  content: string;
+  parentId: string | null;
+  createdAt: string;
+  userId: string;
+  userName: string;
+  userUsername: string | null;
+  userAvatarUrl: string | null;
+};
+
+function timeAgo(dateStr: string) {
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+function CommentForm({
+  recipeId,
+  parentId,
+  onSubmit,
+  placeholder = "Add a comment…",
+  onCancel,
+}: {
+  recipeId: string;
+  parentId?: string;
+  onSubmit: () => void;
+  placeholder?: string;
+  onCancel?: () => void;
+}) {
+  const [content, setContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  async function submit() {
+    if (!content.trim()) return;
+    setSubmitting(true);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/comments`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: content.trim(), parentId }),
+      });
+      if (!res.ok) { toast.error("Failed to post comment"); return; }
+      setContent("");
+      onSubmit();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <Textarea
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        placeholder={placeholder}
+        rows={2}
+        disabled={submitting}
+      />
+      <div className="flex gap-2">
+        <Button size="sm" onClick={submit} disabled={!content.trim() || submitting}>
+          {submitting ? "Posting…" : "Post"}
+        </Button>
+        {onCancel && <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>}
+      </div>
+    </div>
+  );
+}
+
+function CommentItem({
+  comment,
+  replies,
+  currentUserId,
+  recipeId,
+  onRefresh,
+}: {
+  comment: Comment;
+  replies: Comment[];
+  currentUserId?: string;
+  recipeId: string;
+  onRefresh: () => void;
+}) {
+  const [showReply, setShowReply] = useState(false);
+  const isOwn = comment.userId === currentUserId;
+
+  async function deleteComment() {
+    const res = await fetch(`/api/v1/comments/${comment.id}`, { method: "DELETE" });
+    if (res.ok) { toast.success("Deleted"); onRefresh(); }
+    else toast.error("Failed to delete");
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-3">
+        <Avatar className="h-7 w-7 shrink-0 mt-0.5">
+          <AvatarImage src={comment.userAvatarUrl ?? ""} />
+          <AvatarFallback className="text-xs">{comment.userName.slice(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+        <div className="flex-1 min-w-0 space-y-1">
+          <div className="flex items-baseline gap-2">
+            <span className="font-medium text-sm">{comment.userName}</span>
+            <span className="text-xs text-muted-foreground">{timeAgo(comment.createdAt)}</span>
+          </div>
+          <p className="text-sm leading-relaxed whitespace-pre-wrap">{comment.content}</p>
+          <CommentReactions recipeId={recipeId} commentId={comment.id} initialCounts={{}} initialUserReactions={[]} />
+          <div className="flex items-center gap-2">
+            {currentUserId && (
+              <button
+                onClick={() => setShowReply(!showReply)}
+                className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
+              >
+                <Reply className="h-3 w-3" /> Reply
+              </button>
+            )}
+            {isOwn && (
+              <button
+                onClick={deleteComment}
+                className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
+              >
+                <Trash2 className="h-3 w-3" /> Delete
+              </button>
+            )}
+          </div>
+          {showReply && (
+            <CommentForm
+              recipeId={recipeId}
+              parentId={comment.id}
+              onSubmit={() => { setShowReply(false); onRefresh(); }}
+              placeholder="Reply…"
+              onCancel={() => setShowReply(false)}
+            />
+          )}
+        </div>
+      </div>
+
+      {replies.length > 0 && (
+        <div className="ml-10 space-y-3 border-l pl-4">
+          {replies.map((reply) => (
+            <div key={reply.id} className="flex gap-3">
+              <Avatar className="h-6 w-6 shrink-0 mt-0.5">
+                <AvatarImage src={reply.userAvatarUrl ?? ""} />
+                <AvatarFallback className="text-xs">{reply.userName.slice(0, 2).toUpperCase()}</AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0 space-y-1">
+                <div className="flex items-baseline gap-2">
+                  <span className="font-medium text-sm">{reply.userName}</span>
+                  <span className="text-xs text-muted-foreground">{timeAgo(reply.createdAt)}</span>
+                </div>
+                <p className="text-sm leading-relaxed">{reply.content}</p>
+                {reply.userId === currentUserId && (
+                  <button
+                    onClick={async () => {
+                      const res = await fetch(`/api/v1/comments/${reply.id}`, { method: "DELETE" });
+                      if (res.ok) { toast.success("Deleted"); onRefresh(); }
+                    }}
+                    className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
+                  >
+                    <Trash2 className="h-3 w-3" /> Delete
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function CommentsSection({
+  recipeId,
+  currentUserId,
+}: {
+  recipeId: string;
+  currentUserId?: string;
+}) {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const load = useCallback(async () => {
+    const res = await fetch(`/api/v1/recipes/${recipeId}/comments`);
+    if (res.ok) setComments(await res.json() as Comment[]);
+    setLoading(false);
+  }, [recipeId]);
+
+  useEffect(() => { void load(); }, [load]);
+
+  const topLevel = comments.filter((c) => !c.parentId);
+  const replies = (parentId: string) => comments.filter((c) => c.parentId === parentId);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-2">
+        <MessageCircle className="h-5 w-5" />
+        <h2 className="text-xl font-semibold">Comments</h2>
+        {!loading && <span className="text-muted-foreground text-sm">({comments.length})</span>}
+      </div>
+
+      {currentUserId && (
+        <CommentForm recipeId={recipeId} onSubmit={load} placeholder="Share your thoughts…" />
+      )}
+
+      {loading ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : topLevel.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No comments yet. Be the first!</p>
+      ) : (
+        <div className="space-y-6">
+          {topLevel.map((comment, i) => (
+            <div key={comment.id}>
+              {i > 0 && <Separator className="mb-6" />}
+              <CommentItem
+                comment={comment}
+                replies={replies(comment.id)}
+                currentUserId={currentUserId}
+                recipeId={recipeId}
+                onRefresh={load}
+              />
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/components/social/favorite-button.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import { Heart } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function FavoriteButton({
+  recipeId,
+  initialFavorited = false,
+}: {
+  recipeId: string;
+  initialFavorited?: boolean;
+}) {
+  const [favorited, setFavorited] = useState(initialFavorited);
+  const [loading, setLoading] = useState(false);
+
+  async function toggle() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/favorite`, {
+        method: favorited ? "DELETE" : "POST",
+      });
+      if (!res.ok) return;
+      setFavorited(!favorited);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Button variant="ghost" size="sm" onClick={toggle} disabled={loading} className="gap-1.5">
+      <Heart className={cn("h-4 w-4", favorited && "fill-red-500 text-red-500")} />
+      {favorited ? "Saved" : "Save"}
+    </Button>
+  );
+}

apps/web/components/social/follow-button.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+
+export function FollowButton({
+  targetUserId: _targetUserId,
+  targetUsername,
+  initialFollowing = false,
+}: {
+  targetUserId: string;
+  targetUsername: string;
+  initialFollowing?: boolean;
+}) {
+  const [following, setFollowing] = useState(initialFollowing);
+  const [loading, setLoading] = useState(false);
+
+  async function toggle() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/v1/users/${targetUsername}/follow`, {
+        method: following ? "DELETE" : "POST",
+      });
+      if (!res.ok) {
+        const err = await res.json() as { error?: string };
+        toast.error(err.error ?? "Failed");
+        return;
+      }
+      setFollowing(!following);
+      toast.success(following ? "Unfollowed" : "Following");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Button variant={following ? "outline" : "default"} size="sm" onClick={toggle} disabled={loading}>
+      {loading ? "…" : following ? "Following" : "Follow"}
+    </Button>
+  );
+}

apps/web/components/social/new-collection-button.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useState } from "react";
+import { Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+
+export function NewCollectionButton() {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  async function create() {
+    if (!name.trim()) return;
+    setSaving(true);
+    try {
+      const res = await fetch("/api/v1/collections", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: name.trim(), description: description.trim() || undefined, isPublic }),
+      });
+      if (!res.ok) { toast.error("Failed to create"); return; }
+      const { id } = await res.json() as { id: string };
+      toast.success("Collection created");
+      setOpen(false);
+      setName(""); setDescription(""); setIsPublic(false);
+      router.push(`/collections/${id}`);
+      router.refresh();
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <>
+      <Button size="sm" onClick={() => setOpen(true)}>
+        <Plus className="h-4 w-4" /> New collection
+      </Button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader><DialogTitle>New collection</DialogTitle></DialogHeader>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="col-name">Name</Label>
+              <Input id="col-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Weekend dinners" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="col-desc">Description</Label>
+              <Textarea id="col-desc" value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder="Optional…" />
+            </div>
+            <label className="flex items-center gap-2 text-sm cursor-pointer">
+              <input type="checkbox" checked={isPublic} onChange={(e) => setIsPublic(e.target.checked)} className="rounded" />
+              Make public
+            </label>
+            <div className="flex gap-2 justify-end">
+              <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+              <Button onClick={create} disabled={!name.trim() || saving}>{saving ? "Creating…" : "Create"}</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

apps/web/components/social/rating-stars.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { Star } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+
+export function RatingStars({
+  recipeId,
+  initialScore = 0,
+  readonly = false,
+  size = "default",
+}: {
+  recipeId: string;
+  initialScore?: number;
+  readonly?: boolean;
+  size?: "sm" | "default";
+}) {
+  const [score, setScore] = useState(initialScore);
+  const [hovered, setHovered] = useState(0);
+  const [saving, setSaving] = useState(false);
+
+  async function rate(value: number) {
+    if (readonly || saving) return;
+    setSaving(true);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/rate`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ score: value }),
+      });
+      if (!res.ok) {
+        const err = await res.json() as { error?: string };
+        toast.error(err.error ?? "Failed to rate");
+        return;
+      }
+      setScore(value);
+      toast.success("Rating saved");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const iconSize = size === "sm" ? "h-3.5 w-3.5" : "h-5 w-5";
+  const display = hovered || score;
+
+  return (
+    <div className={cn("flex items-center gap-0.5", readonly && "pointer-events-none")}>
+      {[1, 2, 3, 4, 5].map((i) => (
+        <button
+          key={i}
+          type="button"
+          disabled={readonly || saving}
+          onMouseEnter={() => !readonly && setHovered(i)}
+          onMouseLeave={() => !readonly && setHovered(0)}
+          onClick={() => rate(i)}
+          className={cn("transition-colors", !readonly && "hover:scale-110")}
+        >
+          <Star
+            className={cn(
+              iconSize,
+              i <= display ? "fill-yellow-400 text-yellow-400" : "text-muted-foreground/30"
+            )}
+          />
+        </button>
+      ))}
+    </div>
+  );
+}