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/components/recipe/favorites-grid.tsx

@@ -1,16 +1,21 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Heart } from "lucide-react";
 import { FavoriteRecipeCard, type FavoriteRecipe } from "@/components/recipe/favorite-recipe-card";
+import { EmptyState } from "@/components/shared/empty-state";
 
 export function FavoritesGrid({
   initialRecipes,
-  emptyLabel,
+  emptyTitle,
+  emptyDescription,
 }: {
   initialRecipes: FavoriteRecipe[];
-  emptyLabel: string;
+  emptyTitle: string;
+  emptyDescription: string;
 }) {
+  const t = useTranslations("recipes");
   const [recipes, setRecipes] = useState(initialRecipes);
 
   function handleUnfavorited(recipeId: string) {
@@ -18,12 +23,7 @@ export function FavoritesGrid({
   }
 
   if (recipes.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
-        <Heart className="h-12 w-12 text-muted-foreground/40" />
-        <p className="text-muted-foreground text-sm text-center max-w-xs">{emptyLabel}</p>
-      </div>
-    );
+    return <EmptyState icon={Heart} title={emptyTitle} description={emptyDescription} action={{ label: t("exploreRecipes"), href: "/explore" }} />;
   }
 
   return (