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