feat: shared, more pleasing empty-state component across the app

Every "nothing here" page had its own copy-pasted dashed-border box —
icon + one muted line, inconsistent (some had a CTA, some didn't, no
description text anywhere). Replaced with one shared EmptyState
component: icon in a soft tinted circle, a real heading plus optional
description, and primary/secondary actions (either a Link or an
arbitrary action slot for things like "New Collection" that open a
dialog rather than navigate).

Applied to: recipes (no recipes / no search match), favorites, feed
(no one followed / no new posts / trending / for-you), collections
(index + detail), shopping lists, pantry, notifications, can-cook.
Left the small inline "no trending"/"no recent" lines inside Explore's
already-labeled sections and the notification-bell dropdown alone —
different context, a full empty-state box would be heavier than the
space warrants.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
 import Link from "next/link";
-import { Printer } from "lucide-react";
+import { Printer, UtensilsCrossed } from "lucide-react";
 import { auth } from "@/lib/auth/server";
 import { db, collections, eq, and, or } from "@epicure/db";
 import { RecipeCard } from "@/components/recipe/recipe-card";
@@ -11,6 +11,7 @@ import { ShareCollectionButton } from "@/components/collections/share-collection
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
+import { EmptyState } from "@/components/shared/empty-state";
 import { collectionToMarkdown } from "@/lib/markdown/collection";
 import { getMessages } from "@/lib/i18n/server";
 
@@ -71,9 +72,7 @@ export default async function CollectionPage({ params }: Params) {
       </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>
+        <EmptyState icon={UtensilsCrossed} title={m.collections.emptyCollection} compact />
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           {col.recipes.map(({ recipe }) => (

apps/web/app/(app)/recipes/favorites/page.tsx

@@ -97,7 +97,7 @@ export default async function FavoriteRecipesPage({
         </p>
       </div>
 
-      <FavoritesGrid initialRecipes={favoriteRecipes} emptyLabel={m.recipes.favoritesEmpty} />
+      <FavoritesGrid initialRecipes={favoriteRecipes} emptyTitle={m.recipes.favoritesEmptyTitle} emptyDescription={m.recipes.favoritesEmpty} />
 
       {totalPages > 1 && (
         <div className="flex items-center justify-center gap-2 pt-2">