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/components/search/explore-page-content.tsx

@@ -8,11 +8,13 @@ import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users } from "lucide-react";
+import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight, Shuffle, Users, Rss, UserPlus } from "lucide-react";
 import { useTranslations } from "next-intl";
 import type { RecipeResult as ExploreRecipeResult } from "@/app/(app)/explore/page";
-import { SearchResultCard } from "@/components/recipe/search-result-card";
+import { RecipeGridCard, type GridCardRecipe } from "@/components/recipe/recipe-grid-card";
 import { FollowButton } from "@/components/social/follow-button";
+import { EmptyState } from "@/components/shared/empty-state";
+import { cn } from "@/lib/utils";
 
 const DIFFICULTY_COLORS: Record<string, string> = {
   easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
@@ -20,17 +22,7 @@ const DIFFICULTY_COLORS: Record<string, string> = {
   hard: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
 };
 
-type SearchRecipeResult = {
-  id: string;
-  title: string;
-  description: string | null;
-  difficulty: string | null;
-  prepMins: number | null;
-  cookMins: number | null;
-  authorName: string | null;
-  avgRating: number | null;
-  ratingCount: number;
-};
+type SearchRecipeResult = GridCardRecipe & { authorId: string; createdAt: string };
 
 type SearchResponse = {
   data: SearchRecipeResult[];
@@ -39,6 +31,15 @@ type SearchResponse = {
   offset: number;
 };
 
+type FeedRecipeResult = GridCardRecipe & { authorId: string; createdAt: string };
+
+type FeedResponse = {
+  data: FeedRecipeResult[];
+  total: number;
+  limit: number;
+  offset: number;
+};
+
 type PersonResult = {
   id: string;
   name: string;
@@ -68,6 +69,7 @@ const SURPRISE_IDEA_PROMPTS = [
   "cozy soup for a rainy day",
 ];
 
+const PAGE_SIZE = 20;
 
 function HorizontalScroll({ children }: { children: React.ReactNode }) {
   return (
@@ -77,17 +79,108 @@ function HorizontalScroll({ children }: { children: React.ReactNode }) {
   );
 }
 
+function RecipeGrid({ recipes }: { recipes: GridCardRecipe[] }) {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {recipes.map((recipe) => (
+        <Link key={recipe.id} href={`/recipes/${recipe.id}`} className="h-full block">
+          <RecipeGridCard recipe={recipe} />
+        </Link>
+      ))}
+    </div>
+  );
+}
+
+/** Shared paginated tab for Following/For You — fetches `endpoint`, supports "load
+ * more", and surfaces network failures as a real error state (with retry). */
+function PaginatedFeedTab({ endpoint, emptyMessage }: { endpoint: string; emptyMessage: React.ReactNode }) {
+  const t = useTranslations("feed");
+  const [recipes, setRecipes] = useState<FeedRecipeResult[]>([]);
+  const [total, setTotal] = useState(0);
+  const [offset, setOffset] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(false);
+
+  const fetchPage = useCallback(
+    async (off: number, append: boolean) => {
+      if (append) setLoadingMore(true);
+      else setLoading(true);
+      setError(false);
+      try {
+        const res = await fetch(`${endpoint}?limit=${PAGE_SIZE}&offset=${off}`);
+        if (!res.ok) throw new Error("Request failed");
+        const json = (await res.json()) as FeedResponse;
+        setRecipes((prev) => (append ? [...prev, ...json.data] : json.data));
+        setTotal(json.total);
+        setOffset(off + json.data.length);
+      } catch {
+        setError(true);
+      } finally {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    },
+    [endpoint]
+  );
+
+  useEffect(() => {
+    void fetchPage(0, false);
+  }, [fetchPage]);
+
+  if (loading) {
+    return (
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {Array.from({ length: 8 }).map((_, i) => (
+          <div key={i} className="rounded-xl border bg-card aspect-video animate-pulse" />
+        ))}
+      </div>
+    );
+  }
+
+  if (error && recipes.length === 0) {
+    return (
+      <div className="flex flex-col items-start gap-2">
+        <p className="text-sm text-destructive">{t("loadFailed")}</p>
+        <Button variant="outline" size="sm" onClick={() => void fetchPage(0, false)}>
+          {t("retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  if (recipes.length === 0) return <>{emptyMessage}</>;
+
+  const hasMore = recipes.length < total;
+
+  return (
+    <div className="space-y-4">
+      <RecipeGrid recipes={recipes} />
+      {error && <p className="text-sm text-destructive">{t("loadFailed")}</p>}
+      {hasMore || error ? (
+        <div className="flex justify-center pt-2">
+          <Button variant="outline" size="sm" onClick={() => void fetchPage(offset, true)} disabled={loadingMore}>
+            {loadingMore ? t("loading") : error ? t("retry") : t("loadMore")}
+          </Button>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 type Props = {
   trending: ExploreRecipeResult[];
   recent: ExploreRecipeResult[];
   initialQuery: string;
   popularTags: string[];
+  followedCount: number;
 };
 
-export function ExplorePageContent({ trending, recent, initialQuery, popularTags }: Props) {
+export function ExplorePageContent({ trending, recent, initialQuery, popularTags, followedCount }: Props) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const t = useTranslations("explore");
+  const tFeed = useTranslations("feed");
   const tCommon = useTranslations("common");
   const tRecipe = useTranslations("recipe");
   const tPeople = useTranslations("people");
@@ -112,6 +205,8 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
   const [ideasLoading, setIdeasLoading] = useState(false);
   const [generatingId, setGeneratingId] = useState<string | null>(null);
 
+  const [tab, setTab] = useState<"discover" | "following" | "forYou">("discover");
+
   const inputRef = useRef<HTMLInputElement>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -379,11 +474,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
       {hasQuery && loading && (
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           {Array.from({ length: 8 }).map((_, i) => (
-            <div key={i} className="rounded-lg border bg-card p-4 space-y-3">
-              <div className="h-5 bg-muted rounded animate-pulse" />
-              <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
-              <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
-            </div>
+            <div key={i} className="rounded-xl border bg-card aspect-video animate-pulse" />
           ))}
         </div>
       )}
@@ -402,11 +493,7 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
             <ChefHat className="h-4 w-4 text-muted-foreground" />
             <h2 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">{t("recipesHeading")}</h2>
           </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-            {results.map((recipe) => (
-              <SearchResultCard key={recipe.id} recipe={recipe} />
-            ))}
-          </div>
+          <RecipeGrid recipes={results} />
           {hasMore && (
             <div className="flex justify-center pt-4">
               <Button
@@ -422,147 +509,202 @@ export function ExplorePageContent({ trending, recent, initialQuery, popularTags
         </>
       )}
 
-      {/* Explore sections — shown when no query */}
+      {/* Explore tabs — shown when no query */}
       {!hasQuery && (
         <>
-          {/* AI Recipe Ideas */}
-          <section className="rounded-xl border bg-gradient-to-br from-violet-50 to-indigo-50 dark:from-violet-950/30 dark:to-indigo-950/30 p-6 space-y-4">
-            <div className="flex items-center gap-2">
-              <Sparkles className="h-5 w-5 text-violet-500" />
-              <h2 className="text-xl font-semibold">{t("recipeIdeas")}</h2>
-            </div>
-            <p className="text-sm text-muted-foreground">{t("recipeIdeasHint")}</p>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                fetchIdeas(ideasPrompt);
-              }}
-              className="flex gap-2"
+          <div className="flex gap-1 border-b">
+            <button
+              onClick={() => setTab("discover")}
+              className={cn(
+                "pb-2 px-1 text-sm font-medium border-b-2 transition-colors",
+                tab === "discover" ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+              )}
             >
-              <Input
-                value={ideasPrompt}
-                onChange={(e) => setIdeasPrompt(e.target.value)}
-                placeholder={t("aiSearchPlaceholder")}
-                className="bg-background flex-1 min-w-0"
-              />
-              <Button
-                type="submit"
-                disabled={ideasLoading}
-                className="shrink-0 bg-violet-600 text-white hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-400"
-              >
-                {ideasLoading ? (
-                  <span className="flex items-center gap-2"><Wand2 className="h-4 w-4 animate-pulse" /> <span className="hidden sm:inline">{t("generating")}</span></span>
-                ) : (
-                  <span className="flex items-center gap-2"><Wand2 className="h-4 w-4" /> <span className="hidden sm:inline">{t("getIdeas")}</span></span>
+              {t("tabDiscover")}
+            </button>
+            <button
+              onClick={() => setTab("following")}
+              className={cn(
+                "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"
+              )}
+            >
+              {tFeed("following")}
+            </button>
+            <button
+              onClick={() => setTab("forYou")}
+              className={cn(
+                "pb-2 px-1 text-sm font-medium border-b-2 transition-colors flex items-center gap-1.5",
+                tab === "forYou" ? "border-primary text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
+              )}
+            >
+              <Sparkles className="h-3.5 w-3.5" />
+              {tFeed("forYou")}
+            </button>
+          </div>
+
+          {tab === "discover" && (
+            <>
+              {/* AI Recipe Ideas */}
+              <section className="rounded-xl border bg-gradient-to-br from-violet-50 to-indigo-50 dark:from-violet-950/30 dark:to-indigo-950/30 p-6 space-y-4">
+                <div className="flex items-center gap-2">
+                  <Sparkles className="h-5 w-5 text-violet-500" />
+                  <h2 className="text-xl font-semibold">{t("recipeIdeas")}</h2>
+                </div>
+                <p className="text-sm text-muted-foreground">{t("recipeIdeasHint")}</p>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                    fetchIdeas(ideasPrompt);
+                  }}
+                  className="flex gap-2"
+                >
+                  <Input
+                    value={ideasPrompt}
+                    onChange={(e) => setIdeasPrompt(e.target.value)}
+                    placeholder={t("aiSearchPlaceholder")}
+                    className="bg-background flex-1 min-w-0"
+                  />
+                  <Button
+                    type="submit"
+                    disabled={ideasLoading}
+                    className="shrink-0 bg-violet-600 text-white hover:bg-violet-700 dark:bg-violet-500 dark:hover:bg-violet-400"
+                  >
+                    {ideasLoading ? (
+                      <span className="flex items-center gap-2"><Wand2 className="h-4 w-4 animate-pulse" /> <span className="hidden sm:inline">{t("generating")}</span></span>
+                    ) : (
+                      <span className="flex items-center gap-2"><Wand2 className="h-4 w-4" /> <span className="hidden sm:inline">{t("getIdeas")}</span></span>
+                    )}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    disabled={ideasLoading}
+                    onClick={() => {
+                      const idx = Math.floor(Math.random() * SURPRISE_IDEA_PROMPTS.length);
+                      const surprisePrompt = SURPRISE_IDEA_PROMPTS[idx]!;
+                      setIdeasPrompt(surprisePrompt);
+                      fetchIdeas(surprisePrompt);
+                    }}
+                    className="shrink-0 bg-background/80 border-violet-300 text-violet-700 hover:bg-background hover:text-violet-800 dark:border-violet-700 dark:text-violet-300 dark:hover:text-violet-200"
+                  >
+                    <span className="flex items-center gap-2"><Shuffle className="h-4 w-4" /> <span className="hidden sm:inline">{t("surpriseMe")}</span></span>
+                  </Button>
+                </form>
+
+                {ideasLoading && (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 pt-2">
+                    {Array.from({ length: 6 }).map((_, i) => (
+                      <div key={i} className="rounded-lg border bg-background p-4 space-y-2">
+                        <div className="h-4 bg-muted rounded animate-pulse" />
+                        <div className="h-3 bg-muted rounded animate-pulse w-5/6" />
+                        <div className="h-3 bg-muted rounded animate-pulse w-2/3" />
+                      </div>
+                    ))}
+                  </div>
                 )}
-              </Button>
-              <Button
-                type="button"
-                variant="outline"
-                disabled={ideasLoading}
-                onClick={() => {
-                  const idx = Math.floor(Math.random() * SURPRISE_IDEA_PROMPTS.length);
-                  const surprisePrompt = SURPRISE_IDEA_PROMPTS[idx]!;
-                  setIdeasPrompt(surprisePrompt);
-                  fetchIdeas(surprisePrompt);
-                }}
-                className="shrink-0 bg-background/80 border-violet-300 text-violet-700 hover:bg-background hover:text-violet-800 dark:border-violet-700 dark:text-violet-300 dark:hover:text-violet-200"
-              >
-                <span className="flex items-center gap-2"><Shuffle className="h-4 w-4" /> <span className="hidden sm:inline">{t("surpriseMe")}</span></span>
-              </Button>
-            </form>
 
-            {ideasLoading && (
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 pt-2">
-                {Array.from({ length: 6 }).map((_, i) => (
-                  <div key={i} className="rounded-lg border bg-background p-4 space-y-2">
-                    <div className="h-4 bg-muted rounded animate-pulse" />
-                    <div className="h-3 bg-muted rounded animate-pulse w-5/6" />
-                    <div className="h-3 bg-muted rounded animate-pulse w-2/3" />
+                {!ideasLoading && ideas.length > 0 && (
+                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 pt-2">
+                    {ideas.map((idea) => (
+                      <div key={idea.title} className="rounded-lg border bg-background p-4 space-y-2 flex flex-col">
+                        <div className="flex items-start justify-between gap-2">
+                          <h3 className="font-medium text-sm leading-snug flex-1">{idea.title}</h3>
+                          <Badge
+                            variant="secondary"
+                            className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[idea.difficulty] ?? ""}`}
+                          >
+                            {tRecipe(`difficulty.${idea.difficulty}`)}
+                          </Badge>
+                        </div>
+                        <p className="text-xs text-muted-foreground line-clamp-2 flex-1">{idea.description}</p>
+                        <div className="flex flex-wrap gap-1">
+                          {idea.tags.map((tag) => (
+                            <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
+                          ))}
+                          {idea.totalMins && (
+                            <Badge variant="outline" className="text-xs flex items-center gap-1">
+                              <Clock className="h-3 w-3" />{tRecipe("total", { mins: idea.totalMins })}
+                            </Badge>
+                          )}
+                        </div>
+                        <Button
+                          size="sm"
+                          className="w-full mt-auto"
+                          disabled={generatingId !== null}
+                          onClick={() => generateFromIdea(idea)}
+                        >
+                          {generatingId === idea.title ? (
+                            <span className="flex items-center gap-2"><Wand2 className="h-3.5 w-3.5 animate-pulse" /> {t("generating")}</span>
+                          ) : (
+                            <span className="flex items-center gap-2"><ArrowRight className="h-3.5 w-3.5" /> {t("generateFullRecipe")}</span>
+                          )}
+                        </Button>
+                      </div>
+                    ))}
                   </div>
-                ))}
-              </div>
-            )}
+                )}
+              </section>
 
-            {!ideasLoading && ideas.length > 0 && (
-              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 pt-2">
-                {ideas.map((idea) => (
-                  <div key={idea.title} className="rounded-lg border bg-background p-4 space-y-2 flex flex-col">
-                    <div className="flex items-start justify-between gap-2">
-                      <h3 className="font-medium text-sm leading-snug flex-1">{idea.title}</h3>
-                      <Badge
-                        variant="secondary"
-                        className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[idea.difficulty] ?? ""}`}
-                      >
-                        {tRecipe(`difficulty.${idea.difficulty}`)}
-                      </Badge>
-                    </div>
-                    <p className="text-xs text-muted-foreground line-clamp-2 flex-1">{idea.description}</p>
-                    <div className="flex flex-wrap gap-1">
-                      {idea.tags.map((tag) => (
-                        <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
-                      ))}
-                      {idea.totalMins && (
-                        <Badge variant="outline" className="text-xs flex items-center gap-1">
-                          <Clock className="h-3 w-3" />{tRecipe("total", { mins: idea.totalMins })}
-                        </Badge>
-                      )}
-                    </div>
-                    <Button
-                      size="sm"
-                      className="w-full mt-auto"
-                      disabled={generatingId !== null}
-                      onClick={() => generateFromIdea(idea)}
-                    >
-                      {generatingId === idea.title ? (
-                        <span className="flex items-center gap-2"><Wand2 className="h-3.5 w-3.5 animate-pulse" /> {t("generating")}</span>
-                      ) : (
-                        <span className="flex items-center gap-2"><ArrowRight className="h-3.5 w-3.5" /> {t("generateFullRecipe")}</span>
-                      )}
-                    </Button>
-                  </div>
-                ))}
-              </div>
-            )}
-          </section>
+              <section>
+                <div className="flex items-center gap-2 mb-4">
+                  <Flame className="h-5 w-5 text-orange-500" />
+                  <h2 className="text-xl font-semibold">{t("trendingThisWeek")}</h2>
+                </div>
+                {trending.length === 0 ? (
+                  <p className="text-muted-foreground text-sm py-8 text-center">
+                    {t("noTrending")}
+                  </p>
+                ) : (
+                  <HorizontalScroll>
+                    {trending.map((recipe) => (
+                      <div key={recipe.id} className="snap-start shrink-0 w-64">
+                        <Link href={`/recipes/${recipe.id}`}>
+                          <RecipeGridCard recipe={recipe} />
+                        </Link>
+                      </div>
+                    ))}
+                  </HorizontalScroll>
+                )}
+              </section>
 
-          <section>
-            <div className="flex items-center gap-2 mb-4">
-              <Flame className="h-5 w-5 text-orange-500" />
-              <h2 className="text-xl font-semibold">{t("trendingThisWeek")}</h2>
-            </div>
-            {trending.length === 0 ? (
-              <p className="text-muted-foreground text-sm py-8 text-center">
-                {t("noTrending")}
-              </p>
+              <section>
+                <div className="flex items-center gap-2 mb-4">
+                  <Clock className="h-5 w-5 text-blue-500" />
+                  <h2 className="text-xl font-semibold">{t("recentlyAdded")}</h2>
+                </div>
+                {recent.length === 0 ? (
+                  <p className="text-muted-foreground text-sm py-8 text-center">
+                    {t("noRecent")}
+                  </p>
+                ) : (
+                  <RecipeGrid recipes={recent} />
+                )}
+              </section>
+            </>
+          )}
+
+          {tab === "following" && (
+            followedCount === 0 ? (
+              <EmptyState
+                icon={UserPlus}
+                title={tFeed("followEmpty")}
+                description={tFeed("followEmptyDescriptionExplore")}
+              />
             ) : (
-              <HorizontalScroll>
-                {trending.map((recipe) => (
-                  <div key={recipe.id} className="snap-start shrink-0 w-64">
-                    <SearchResultCard recipe={recipe} />
-                  </div>
-                ))}
-              </HorizontalScroll>
-            )}
-          </section>
+              <PaginatedFeedTab
+                endpoint="/api/v1/feed"
+                emptyMessage={<EmptyState icon={Rss} title={tFeed("noNew")} compact />}
+              />
+            )
+          )}
 
-          <section>
-            <div className="flex items-center gap-2 mb-4">
-              <Clock className="h-5 w-5 text-blue-500" />
-              <h2 className="text-xl font-semibold">{t("recentlyAdded")}</h2>
-            </div>
-            {recent.length === 0 ? (
-              <p className="text-muted-foreground text-sm py-8 text-center">
-                {t("noRecent")}
-              </p>
-            ) : (
-              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-                {recent.map((recipe) => (
-                  <SearchResultCard key={recipe.id} recipe={recipe} />
-                ))}
-              </div>
-            )}
-          </section>
+          {tab === "forYou" && (
+            <PaginatedFeedTab
+              endpoint="/api/v1/feed/for-you"
+              emptyMessage={<EmptyState icon={Sparkles} title={tFeed("forYouEmpty")} compact />}
+            />
+          )}
         </>
       )}
       </div>