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

@@ -2,10 +2,11 @@
 import { useState, useEffect, useCallback } from "react";
 import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { Clock, Users, ChefHat, Flame, Heart, Sparkles } from "lucide-react";
+import { Clock, Users, ChefHat, Flame, Heart, Sparkles, Rss, UserPlus } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/shared/empty-state";
 import { useLocale } from "@/lib/i18n/provider";
 
 const PAGE_SIZE = 20;
@@ -139,7 +140,7 @@ function PaginatedFeedTab({
     );
   }
 
-  if (recipes.length === 0) return <p className="text-sm text-muted-foreground">{emptyMessage}</p>;
+  if (recipes.length === 0) return <EmptyState icon={Rss} title={emptyMessage} compact />;
 
   const hasMore = recipes.length < total;
 
@@ -213,9 +214,12 @@ export function FeedPageContent({ followedCount }: Props) {
 
       {tab === "following" ? (
         followedCount === 0 ? (
-          <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
-            <p className="text-muted-foreground text-sm">{t("followEmpty")}</p>
-          </div>
+          <EmptyState
+            icon={UserPlus}
+            title={t("followEmpty")}
+            description={t("followEmptyDescription")}
+            action={{ label: t("findPeople"), href: "/explore?tab=people" }}
+          />
         ) : (
           <PaginatedFeedTab endpoint="/api/v1/feed" emptyMessage={t("noNew")} />
         )