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
This commit is contained in:
Arnaud
2026-07-17 16:06:17 +02:00
parent 1577b8de01
commit 5763bd3318
17 changed files with 601 additions and 445 deletions
+47 -31
View File
@@ -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}
/>
);
}
+3 -17
View File
@@ -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");
}