feat: merge Explore and Activity Feed, unify recipe cards

Explore and Feed covered overlapping ground (recommendations, following,
trending) in two separate places with three different card designs.
Explore now hosts Discover/Following/For You tabs, and every recipe
card everywhere on the page matches the Recipes page's cover-photo
card instead of the old text-only search result.

v0.36.0

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

@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
+import { headers } from "next/headers";
 import {
   db,
   recipes,
   users,
   favorites,
+  userFollows,
   eq,
   desc,
   sql,
@@ -11,20 +13,29 @@ import {
   gte,
   count,
 } from "@epicure/db";
+import { auth } from "@/lib/auth/server";
 import { ExplorePageContent } from "@/components/search/explore-page-content";
-import { getAvgRatingsByRecipeId } from "@/lib/recipe-ratings";
+import { attachCardExtras } from "@/lib/recipe-card-extras";
 
 export const metadata: Metadata = {};
 
 export type RecipeResult = {
   id: string;
   title: string;
+  description: string | null;
   authorName: string | null;
-  difficulty: string | null;
+  difficulty: "easy" | "medium" | "hard" | null;
+  baseServings: number;
   prepMins: number | null;
   cookMins: number | null;
-  avgRating: number | null;
-  ratingCount: number;
+  visibility: "private" | "unlisted" | "public";
+  tags: string[];
+  isBatchCook: boolean;
+  sourceUrl: string | null;
+  recipeType: "dish" | "drink";
+  photos: { storageKey: string; isCover: boolean }[];
+  dishCount: number;
+  isFavorited: boolean;
 };
 
 export default async function ExplorePage({
@@ -33,19 +44,28 @@ export default async function ExplorePage({
   searchParams: Promise<{ q?: string }>;
 }) {
   const { q } = await searchParams;
+  const session = await auth.api.getSession({ headers: await headers() });
   const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
 
+  const columns = {
+    id: recipes.id,
+    title: recipes.title,
+    description: recipes.description,
+    authorName: users.name,
+    difficulty: recipes.difficulty,
+    baseServings: recipes.baseServings,
+    prepMins: recipes.prepMins,
+    cookMins: recipes.cookMins,
+    visibility: recipes.visibility,
+    tags: recipes.tags,
+    isBatchCook: recipes.isBatchCook,
+    sourceUrl: recipes.sourceUrl,
+    recipeType: recipes.recipeType,
+  };
+
   // Trending: public recipes ordered by favorite count in last 7 days
   const trendingRows = await db
-    .select({
-      id: recipes.id,
-      title: recipes.title,
-      authorName: users.name,
-      difficulty: recipes.difficulty,
-      prepMins: recipes.prepMins,
-      cookMins: recipes.cookMins,
-      favoriteCount: count(favorites.recipeId),
-    })
+    .select({ ...columns, favoriteCount: count(favorites.recipeId) })
     .from(recipes)
     .innerJoin(users, eq(recipes.authorId, users.id))
     .leftJoin(
@@ -62,31 +82,17 @@ export default async function ExplorePage({
 
   // Recent: public recipes ordered by createdAt desc
   const recentRows = await db
-    .select({
-      id: recipes.id,
-      title: recipes.title,
-      authorName: users.name,
-      difficulty: recipes.difficulty,
-      prepMins: recipes.prepMins,
-      cookMins: recipes.cookMins,
-    })
+    .select(columns)
     .from(recipes)
     .innerJoin(users, eq(recipes.authorId, users.id))
     .where(and(eq(recipes.visibility, "public"), eq(users.isPrivate, false)))
     .orderBy(desc(recipes.createdAt))
     .limit(12);
 
-  const ratingByRecipe = await getAvgRatingsByRecipeId([
-    ...trendingRows.map((r) => r.id),
-    ...recentRows.map((r) => r.id),
+  const [trending, recent] = await Promise.all([
+    attachCardExtras(trendingRows.map(({ favoriteCount: _fc, ...r }) => r), session?.user.id),
+    attachCardExtras(recentRows, session?.user.id),
   ]);
-  const withRating = (r: { id: string }) => ({
-    avgRating: ratingByRecipe.get(r.id)?.avgRating ?? null,
-    ratingCount: ratingByRecipe.get(r.id)?.ratingCount ?? 0,
-  });
-
-  const trending: RecipeResult[] = trendingRows.map(({ favoriteCount: _fc, ...r }) => ({ ...r, ...withRating(r) }));
-  const recent: RecipeResult[] = recentRows.map((r) => ({ ...r, ...withRating(r) }));
 
   // Most-used tags across public recipes — shown as filter chips on the
   // search bar so browsing by tag doesn't require typing the exact word.
@@ -102,12 +108,22 @@ export default async function ExplorePage({
   `);
   const popularTags = popularTagsResult.map((r) => r.tag);
 
+  const followedCount = session
+    ? (
+        await db
+          .select({ followingId: userFollows.followingId })
+          .from(userFollows)
+          .where(eq(userFollows.followerId, session.user.id))
+      ).length
+    : 0;
+
   return (
     <ExplorePageContent
       trending={trending}
       recent={recent}
       initialQuery={q ?? ""}
       popularTags={popularTags}
+      followedCount={followedCount}
     />
   );
 }

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

@@ -1,19 +1,5 @@
-import type { Metadata } from "next";
-import { headers } from "next/headers";
-import { auth } from "@/lib/auth/server";
-import { db, userFollows, eq } from "@epicure/db";
-import { FeedPageContent } from "@/components/feed/feed-page-content";
+import { redirect } from "next/navigation";
 
-export const metadata: Metadata = {};
-
-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));
-
-  return <FeedPageContent followedCount={followedRows.length} />;
+export default function FeedPage() {
+  redirect("/explore");
 }

apps/web/app/api/v1/feed/for-you/route.ts

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { db, recipes, users, favorites, ratings, userFollows, eq, and, or, ne, gte, notInArray, inArray, desc, isNotNull } from "@epicure/db";
 import { requireSessionOrApiKey } from "@/lib/api-auth";
 import { buildPreferenceMap, rankForYou } from "@/lib/for-you-ranking";
+import { attachCardExtras } from "@/lib/recipe-card-extras";
 
 export async function GET(req: NextRequest) {
   const { session, response } = await requireSessionOrApiKey(req);
@@ -47,6 +48,9 @@ export async function GET(req: NextRequest) {
       authorAvatarUrl: users.avatarUrl,
       tags: recipes.tags,
       dietaryTags: recipes.dietaryTags,
+      isBatchCook: recipes.isBatchCook,
+      sourceUrl: recipes.sourceUrl,
+      recipeType: recipes.recipeType,
     })
     .from(recipes)
     .innerJoin(users, eq(recipes.authorId, users.id))
@@ -68,10 +72,11 @@ export async function GET(req: NextRequest) {
     ? rankForYou(candidates, preferences)
     : [...candidates].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
 
-  const data = ranked.slice(offset, offset + limit).map(({ tags: _tags, dietaryTags: _dietaryTags, ...r }) => ({
+  const page = ranked.slice(offset, offset + limit).map(({ dietaryTags: _dietaryTags, ...r }) => ({
     ...r,
     createdAt: r.createdAt.toISOString(),
   }));
+  const data = await attachCardExtras(page, userId);
 
   // `ranked` is capped to a bounded recent window (see `candidates` query above), so this
   // total reflects the size of that ranked window rather than every eligible recipe.

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

@@ -2,6 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { db, recipes, users, userFollows, eq, and, ne, sql } from "@epicure/db";
 import { requireSessionOrApiKey } from "@/lib/api-auth";
 import { desc, inArray } from "@epicure/db";
+import { attachCardExtras } from "@/lib/recipe-card-extras";
 
 export async function GET(req: NextRequest) {
   const { session, response } = await requireSessionOrApiKey(req);
@@ -36,6 +37,10 @@ export async function GET(req: NextRequest) {
         cookMins: recipes.cookMins,
         difficulty: recipes.difficulty,
         visibility: recipes.visibility,
+        tags: recipes.tags,
+        isBatchCook: recipes.isBatchCook,
+        sourceUrl: recipes.sourceUrl,
+        recipeType: recipes.recipeType,
         createdAt: recipes.createdAt,
         updatedAt: recipes.updatedAt,
         authorId: recipes.authorId,
@@ -57,6 +62,7 @@ export async function GET(req: NextRequest) {
   ]);
 
   const total = totalRow[0]?.total ?? 0;
+  const data = await attachCardExtras(feedRecipes, session!.user.id);
 
-  return NextResponse.json({ data: feedRecipes, total, limit, offset });
+  return NextResponse.json({ data, total, limit, offset });
 }

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

@@ -12,6 +12,8 @@ import {
   desc,
 } from "@epicure/db";
 import { getAvgRatingsByRecipeId } from "@/lib/recipe-ratings";
+import { attachCardExtras } from "@/lib/recipe-card-extras";
+import { getOptionalSession } from "@/lib/api-auth";
 
 const VALID_DIETARY = ["vegan", "vegetarian", "glutenFree", "dairyFree"] as const;
 type DietaryTag = (typeof VALID_DIETARY)[number];
@@ -130,6 +132,11 @@ export async function GET(req: NextRequest) {
       baseServings: recipes.baseServings,
       prepMins: recipes.prepMins,
       cookMins: recipes.cookMins,
+      visibility: recipes.visibility,
+      tags: recipes.tags,
+      isBatchCook: recipes.isBatchCook,
+      sourceUrl: recipes.sourceUrl,
+      recipeType: recipes.recipeType,
       authorId: recipes.authorId,
       authorName: users.name,
       createdAt: recipes.createdAt,
@@ -150,8 +157,12 @@ export async function GET(req: NextRequest) {
 
   const total = countResult[0]?.total ?? 0;
 
-  const ratingByRecipe = await getAvgRatingsByRecipeId(rows.map((r) => r.id));
-  const data = rows.map((r) => ({
+  const session = await getOptionalSession();
+  const [ratingByRecipe, rowsWithExtras] = await Promise.all([
+    getAvgRatingsByRecipeId(rows.map((r) => r.id)),
+    attachCardExtras(rows, session?.user.id),
+  ]);
+  const data = rowsWithExtras.map((r) => ({
     ...r,
     avgRating: ratingByRecipe.get(r.id)?.avgRating ?? null,
     ratingCount: ratingByRecipe.get(r.id)?.ratingCount ?? 0,