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/can-cook-content.tsx

@@ -3,11 +3,10 @@
 import Link from "next/link";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { Package, Clock } from "lucide-react";
+import { Package, Clock, ChefHat } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { EmptyState } from "@/components/shared/empty-state";
 
 type ScoredItem = {
   recipe: {
@@ -82,13 +81,7 @@ export function CanCookContent({ pantryCount, scored }: Props) {
           <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
           <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
         </div>
-        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
-          <Package className="h-8 w-8 text-muted-foreground" />
-          <p className="text-muted-foreground text-sm">{t("emptyPantry")}</p>
-          <Link href="/pantry" className={cn(buttonVariants({ size: "sm" }))}>
-            {t("addPantryItems")}
-          </Link>
-        </div>
+        <EmptyState icon={Package} title={t("emptyPantry")} action={{ label: t("addPantryItems"), href: "/pantry" }} />
       </div>
     );
   }
@@ -129,12 +122,12 @@ export function CanCookContent({ pantryCount, scored }: Props) {
       )}
 
       {canCook.length === 0 && almostCook.length === 0 && (
-        <div className="flex flex-col items-center justify-center h-48 border-2 border-dashed rounded-xl gap-3">
-          <p className="text-muted-foreground text-sm">{t("noMatches")}</p>
-          <Link href="/pantry" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
-            {t("addPantryItems")}
-          </Link>
-        </div>
+        <EmptyState
+          icon={ChefHat}
+          title={t("noMatches")}
+          secondaryAction={{ label: t("addPantryItems"), href: "/pantry" }}
+          compact
+        />
       )}
 
       {rest.length > 0 && (