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/shopping-lists/shopping-lists-page-content.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import { ShoppingCart } from "lucide-react";
 import { NewShoppingListButton } from "@/components/meal-plan/new-shopping-list-button";
 import { ShoppingListActionsMenu } from "@/components/shopping-lists/shopping-list-actions-menu";
+import { EmptyState } from "@/components/shared/empty-state";
 
 type ShoppingListItem = {
   id: string;
@@ -42,10 +43,12 @@ export function ShoppingListsPageContent({ lists: initialLists, sharedLists = []
       </div>
 
       {lists.length === 0 ? (
-        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
-          <ShoppingCart className="h-12 w-12 text-muted-foreground/40" />
-          <p className="text-muted-foreground text-sm">{t("empty")}</p>
-        </div>
+        <EmptyState
+          icon={ShoppingCart}
+          title={t("empty")}
+          description={t("emptyDescription")}
+          actionSlot={<NewShoppingListButton />}
+        />
       ) : (
         <div className="space-y-3 max-w-lg">
           {lists.map((list) => (