fix: audit fixes — tier-quota bypass, webhook SSRF, auth hardening, pagination, a11y

Full audit (bugs/UI-UX/backend/feature-gap) turned up a money-leak AI quota
bypass, webhook SSRF, and a long tail of missing pagination/auth/a11y work.
Fixes land together since HANDOFF.md tracked them as one backlog.

- AI routes charge tier quota before generating; nutrition POST is author-only
- Webhook dispatch re-validates URL per delivery (SSRF/DNS-rebinding), treats
  redirects as failures; recipe.published now actually dispatches
- New indexes/unique constraints on recipes, meal-planning, comments FK cascade
- Recipe PUT/restore snapshot only inside the transaction, after validation
- Recipe DELETE cleans up S3 objects (recipe + review photos)
- Optimistic UI (favorite/star/follow/shopping-list) rolls back on failure
- Upload presign enforces file size cap + per-tier storage quota
- Route-level loading/error/not-found states across (app), admin, and root
- middleware.ts guards (app)/admin; requireAdmin checks DB role, not cached
  session; rate limiting applied to both session and API-key branches,
  bucketed per key; Stripe webhook dedupes by event id
- Pagination added to recipes, feed, profile, comments, pantry, admin tables
- Nav shows real avatar + profile link + dark-mode toggle; destructive actions
  standardized on AlertDialog
- Unsaved-changes guard + real ingredient/step validation on recipe form;
  canonical /recipes/[id] used in-app; next/image migration; aria-labels and
  alt text across icon buttons, avatars, recipe photos
- packages/api-types removed (zero callers, too drifted to safely rewire);
  openapi.ts and ai-keys error shape drift fixed; BYOK decrypt failures now
  surface instead of silently falling back to the platform key

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

apps/web/components/admin/admin-settings-form.tsx

@@ -102,6 +102,7 @@ export function AdminSettingsForm({
                     variant="outline"
                     size="icon"
                     onClick={() => setShowSecret((prev) => ({ ...prev, [key]: !prev[key] }))}
+                    aria-label={revealed ? "Hide value" : "Show value"}
                   >
                     {revealed ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
                   </Button>

apps/web/components/admin/invites-manager.tsx

@@ -8,6 +8,16 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Copy, Trash2 } from "lucide-react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 type Invite = {
   id: string;
@@ -25,6 +35,7 @@ export function InvitesManager({ invites, appUrl }: { invites: Invite[]; appUrl:
   const [role, setRole] = useState<"user" | "moderator" | "admin">("user");
   const [tier, setTier] = useState<"free" | "pro">("free");
   const [creating, setCreating] = useState(false);
+  const [revokeId, setRevokeId] = useState<string | null>(null);
 
   async function handleCreate() {
     setCreating(true);
@@ -46,7 +57,6 @@ export function InvitesManager({ invites, appUrl }: { invites: Invite[]; appUrl:
   }
 
   async function handleRevoke(id: string) {
-    if (!confirm("Revoke this invite? The link will stop working.")) return;
     try {
       const res = await fetch(`/api/v1/admin/invites/${id}`, { method: "DELETE" });
       if (!res.ok) throw new Error("Failed to revoke");
@@ -141,7 +151,7 @@ export function InvitesManager({ invites, appUrl }: { invites: Invite[]; appUrl:
                       variant="outline"
                       size="icon-sm"
                       className="text-destructive hover:text-destructive"
-                      onClick={() => { void handleRevoke(invite.id); }}
+                      onClick={() => setRevokeId(invite.id)}
                     >
                       <Trash2 className="h-3.5 w-3.5" />
                     </Button>
@@ -152,6 +162,27 @@ export function InvitesManager({ invites, appUrl }: { invites: Invite[]; appUrl:
           </tbody>
         </table>
       </div>
+
+      <AlertDialog open={revokeId !== null} onOpenChange={(open) => !open && setRevokeId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Revoke invite?</AlertDialogTitle>
+            <AlertDialogDescription>The link will stop working.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (revokeId) void handleRevoke(revokeId);
+                setRevokeId(null);
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Revoke
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

apps/web/components/collections/collection-star-button.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Star } from "lucide-react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -14,6 +16,7 @@ export function CollectionStarButton({
   initialStarred?: boolean;
   starCount: number;
 }) {
+  const tCommon = useTranslations("common");
   const [starred, setStarred] = useState(initialStarred);
   const [count, setCount] = useState(starCount);
   const [loading, setLoading] = useState(false);
@@ -21,14 +24,19 @@ export function CollectionStarButton({
   async function toggle(e: React.MouseEvent) {
     e.preventDefault();
     e.stopPropagation();
+    const next = !starred;
+    setStarred(next);
+    setCount((c) => (next ? c + 1 : c - 1));
     setLoading(true);
     try {
       const res = await fetch(`/api/v1/collections/${collectionId}/favorite`, {
-        method: starred ? "DELETE" : "POST",
+        method: next ? "POST" : "DELETE",
       });
-      if (!res.ok) return;
-      setStarred(!starred);
-      setCount((c) => (starred ? c - 1 : c + 1));
+      if (!res.ok) throw new Error();
+    } catch {
+      setStarred(!next);
+      setCount((c) => (next ? c - 1 : c + 1));
+      toast.error(tCommon("updateFailed"));
     } finally {
       setLoading(false);
     }

apps/web/components/feed/feed-page-content.tsx

@@ -1,12 +1,15 @@
 "use client";
-import { useState, useEffect } from "react";
+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 { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { useLocale } from "@/lib/i18n/provider";
 
+const PAGE_SIZE = 20;
+
 type FeedRecipe = {
   id: string;
   title: string;
@@ -25,9 +28,15 @@ type FeedRecipe = {
   favoriteCount?: number;
 };
 
+type FeedResponse = {
+  data: FeedRecipe[];
+  total: number;
+  limit: number;
+  offset: number;
+};
+
 type Props = {
   followedCount: number;
-  feedRecipes: FeedRecipe[];
 };
 
 function RecipeCard({ recipe, locale }: { recipe: FeedRecipe; locale: string }) {
@@ -35,7 +44,7 @@ function RecipeCard({ recipe, locale }: { recipe: FeedRecipe; locale: string })
     <article className="rounded-xl border p-4 hover:shadow-sm transition-shadow">
       <div className="flex items-center gap-3 mb-3">
         <Avatar className="h-7 w-7">
-          <AvatarImage src={recipe.authorAvatarUrl ?? ""} />
+          <AvatarImage src={recipe.authorAvatarUrl ?? ""} alt={recipe.authorName} />
           <AvatarFallback className="text-xs">{recipe.authorName.slice(0, 2).toUpperCase()}</AvatarFallback>
         </Avatar>
         <div className="flex items-baseline gap-2 text-sm">
@@ -57,7 +66,7 @@ function RecipeCard({ recipe, locale }: { recipe: FeedRecipe; locale: string })
         </div>
       </div>
 
-      <Link href={`/r/${recipe.id}`} className="group block space-y-2">
+      <Link href={`/recipes/${recipe.id}`} className="group block space-y-2">
         <h2 className="font-semibold text-lg group-hover:text-primary transition-colors">{recipe.title}</h2>
         {recipe.description && (
           <p className="text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
@@ -73,61 +82,93 @@ function RecipeCard({ recipe, locale }: { recipe: FeedRecipe; locale: string })
   );
 }
 
-function TrendingTab() {
+/** Shared paginated tab: fetches `endpoint`, supports "load more", and surfaces network
+ * failures as a real error state (with retry) instead of silently rendering an empty list. */
+function PaginatedFeedTab({
+  endpoint,
+  emptyMessage,
+}: {
+  endpoint: string;
+  emptyMessage: string;
+}) {
   const { locale } = useLocale();
   const t = useTranslations("feed");
   const [recipes, setRecipes] = useState<FeedRecipe[]>([]);
+  const [total, setTotal] = useState(0);
+  const [offset, setOffset] = useState(0);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState(false);
+
+  const fetchPage = useCallback(
+    async (off: number, append: boolean) => {
+      if (append) setLoadingMore(true);
+      else setLoading(true);
+      setError(false);
+      try {
+        const res = await fetch(`${endpoint}?limit=${PAGE_SIZE}&offset=${off}`);
+        if (!res.ok) throw new Error("Request failed");
+        const json = (await res.json()) as FeedResponse;
+        setRecipes((prev) => (append ? [...prev, ...json.data] : json.data));
+        setTotal(json.total);
+        setOffset(off + json.data.length);
+      } catch {
+        setError(true);
+      } finally {
+        setLoading(false);
+        setLoadingMore(false);
+      }
+    },
+    [endpoint]
+  );
 
   useEffect(() => {
-    fetch("/api/v1/feed/trending")
-      .then((r) => r.json() as Promise<{ data: FeedRecipe[] }>)
-      .then(({ data }) => setRecipes(data))
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
+    void fetchPage(0, false);
+  }, [fetchPage]);
 
   if (loading) return <p className="text-sm text-muted-foreground">{t("loading")}</p>;
-  if (recipes.length === 0) return <p className="text-sm text-muted-foreground">{t("trendingEmpty")}</p>;
+
+  if (error && recipes.length === 0) {
+    return (
+      <div className="flex flex-col items-start gap-2">
+        <p className="text-sm text-destructive">{t("loadFailed")}</p>
+        <Button variant="outline" size="sm" onClick={() => void fetchPage(0, false)}>
+          {t("retry")}
+        </Button>
+      </div>
+    );
+  }
+
+  if (recipes.length === 0) return <p className="text-sm text-muted-foreground">{emptyMessage}</p>;
+
+  const hasMore = recipes.length < total;
 
   return (
     <div className="space-y-4">
       {recipes.map((recipe) => (
         <RecipeCard key={recipe.id} recipe={recipe} locale={locale} />
       ))}
+      {error && (
+        <p className="text-sm text-destructive">{t("loadFailed")}</p>
+      )}
+      {hasMore || error ? (
+        <div className="flex justify-center pt-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void fetchPage(offset, true)}
+            disabled={loadingMore}
+          >
+            {loadingMore ? t("loading") : error ? t("retry") : t("loadMore")}
+          </Button>
+        </div>
+      ) : null}
     </div>
   );
 }
 
-function ForYouTab() {
-  const { locale } = useLocale();
+export function FeedPageContent({ followedCount }: Props) {
   const t = useTranslations("feed");
-  const [recipes, setRecipes] = useState<FeedRecipe[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    fetch("/api/v1/feed/for-you")
-      .then((r) => r.json() as Promise<{ data: FeedRecipe[] }>)
-      .then(({ data }) => setRecipes(data))
-      .catch(() => {})
-      .finally(() => setLoading(false));
-  }, []);
-
-  if (loading) return <p className="text-sm text-muted-foreground">{t("loading")}</p>;
-  if (recipes.length === 0) return <p className="text-sm text-muted-foreground">{t("forYouEmpty")}</p>;
-
-  return (
-    <div className="space-y-4">
-      {recipes.map((recipe) => (
-        <RecipeCard key={recipe.id} recipe={recipe} locale={locale} />
-      ))}
-    </div>
-  );
-}
-
-export function FeedPageContent({ followedCount, feedRecipes }: Props) {
-  const t = useTranslations("feed");
-  const { locale } = useLocale();
   const [tab, setTab] = useState<"following" | "trending" | "forYou">("following");
 
   return (
@@ -175,19 +216,13 @@ export function FeedPageContent({ followedCount, feedRecipes }: Props) {
           <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>
-        ) : feedRecipes.length === 0 ? (
-          <p className="text-muted-foreground text-sm">{t("noNew")}</p>
         ) : (
-          <div className="space-y-4">
-            {feedRecipes.map((recipe) => (
-              <RecipeCard key={recipe.id} recipe={recipe} locale={locale} />
-            ))}
-          </div>
+          <PaginatedFeedTab endpoint="/api/v1/feed" emptyMessage={t("noNew")} />
         )
       ) : tab === "trending" ? (
-        <TrendingTab />
+        <PaginatedFeedTab endpoint="/api/v1/feed/trending" emptyMessage={t("trendingEmpty")} />
       ) : (
-        <ForYouTab />
+        <PaginatedFeedTab endpoint="/api/v1/feed/for-you" emptyMessage={t("forYouEmpty")} />
       )}
     </div>
   );

apps/web/components/layout/nav.tsx

@@ -2,7 +2,8 @@
 
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { BookOpen, Calendar, Package, ChefHat, User, Rss, FolderOpen, ShoppingCart, Shield, Search, Compass, Menu } from "lucide-react";
+import { useTheme } from "next-themes";
+import { BookOpen, Calendar, Package, ChefHat, User, Rss, FolderOpen, ShoppingCart, Shield, Search, Compass, Menu, Sun, Moon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
@@ -41,13 +42,15 @@ export function Nav() {
   const router = useRouter();
   const { data: session } = authClient.useSession();
   const isAdmin = (session?.user as { role?: string } | undefined)?.role === "admin";
+  const username = (session?.user as { username?: string } | undefined)?.username;
+  const { resolvedTheme, setTheme } = useTheme();
   const t = useTranslations("nav");
   return (
     <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
       <div className="container mx-auto flex h-14 items-center gap-6 px-4">
         <Sheet>
           <SheetTrigger
-            render={<Button variant="ghost" size="icon" className="md:hidden" />}
+            render={<Button variant="ghost" size="icon" className="md:hidden" aria-label={t("menu")} />}
           >
             <Menu className="h-5 w-5" />
             <span className="sr-only">{t("menu")}</span>
@@ -107,16 +110,28 @@ export function Nav() {
           <DropdownMenu>
             <DropdownMenuTrigger className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring">
               <Avatar className="h-8 w-8">
-                <AvatarImage src="" alt="" />
+                <AvatarImage src={session?.user?.image ?? ""} alt={session?.user?.name ?? ""} />
                 <AvatarFallback>
                   <User className="h-4 w-4" />
                 </AvatarFallback>
               </Avatar>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="w-48">
+              {username && (
+                <DropdownMenuItem>
+                  <Link href={`/u/${username}`} className="w-full">{t("viewProfile")}</Link>
+                </DropdownMenuItem>
+              )}
               <DropdownMenuItem>
                 <Link href="/settings" className="w-full">{t("settings")}</Link>
               </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+                className="flex items-center gap-2"
+              >
+                {resolvedTheme === "dark" ? <Sun className="h-3.5 w-3.5" /> : <Moon className="h-3.5 w-3.5" />}
+                {resolvedTheme === "dark" ? t("lightMode") : t("darkMode")}
+              </DropdownMenuItem>
               {isAdmin && (
                 <>
                   <DropdownMenuSeparator />

apps/web/components/meal-plan/pantry-manager.tsx

@@ -6,6 +6,16 @@ import { Plus, Trash2, AlertTriangle } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 type PantryItem = {
   id: string;
@@ -22,12 +32,14 @@ function daysUntilExpiry(dateStr: string): number {
 
 export function PantryManager({ initialItems }: { initialItems: PantryItem[] }) {
   const t = useTranslations("pantry");
+  const tCommon = useTranslations("common");
   const [items, setItems] = useState<PantryItem[]>(initialItems);
   const [name, setName] = useState("");
   const [quantity, setQuantity] = useState("");
   const [unit, setUnit] = useState("");
   const [expiresAt, setExpiresAt] = useState("");
   const [adding, setAdding] = useState(false);
+  const [confirmId, setConfirmId] = useState<string | null>(null);
 
   async function add() {
     if (!name.trim()) return;
@@ -58,6 +70,8 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
     else toast.error(t("removeFailed"));
   }
 
+  const itemPendingDelete = items.find((i) => i.id === confirmId) ?? null;
+
   const sorted = [...items].sort((a, b) => {
     if (a.expiresAt && b.expiresAt) return new Date(a.expiresAt).getTime() - new Date(b.expiresAt).getTime();
     if (a.expiresAt) return -1;
@@ -100,7 +114,7 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
                     <p className="text-xs text-muted-foreground">{t("expiresOn", { date: new Date(item.expiresAt).toLocaleDateString() })}</p>
                   )}
                 </div>
-                <button onClick={() => remove(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">
+                <button onClick={() => setConfirmId(item.id)} className="text-muted-foreground hover:text-destructive transition-colors">
                   <Trash2 className="h-4 w-4" />
                 </button>
               </div>
@@ -108,6 +122,29 @@ export function PantryManager({ initialItems }: { initialItems: PantryItem[] })
           })}
         </div>
       )}
+
+      <AlertDialog open={confirmId !== null} onOpenChange={(open) => !open && setConfirmId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("removeConfirmTitle")}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {itemPendingDelete ? t("removeConfirmDescription", { name: itemPendingDelete.rawName }) : ""}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                if (confirmId) void remove(confirmId);
+                setConfirmId(null);
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {tCommon("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

apps/web/components/meal-plan/shared-meal-plan-view.tsx

@@ -90,7 +90,7 @@ export function SharedMealPlanView({
                       <div className="flex items-start justify-between gap-1 rounded-lg border p-2">
                         <span className="text-xs">{entry.recipe?.title ?? "—"}</span>
                         {canEdit && (
-                          <Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => void removeEntry(entry)}>
+                          <Button variant="ghost" size="icon" className="h-5 w-5 shrink-0" onClick={() => void removeEntry(entry)} aria-label={t("removeEntry")}>
                             <Trash2 className="h-3 w-3" />
                           </Button>
                         )}

apps/web/components/meal-plan/shopping-list-view.tsx

@@ -28,6 +28,7 @@ export function ShoppingListView({
 }) {
   const t = useTranslations("mealPlan");
   const tShopping = useTranslations("shoppingLists");
+  const tCommon = useTranslations("common");
   const [items, setItems] = useState<Item[]>(initialItems);
   const [movingToPantry, setMovingToPantry] = useState(false);
 
@@ -59,11 +60,17 @@ export function ShoppingListView({
     if (readOnly) return;
     const next = !item.checked;
     setItems((prev) => prev.map((i) => i.id === item.id ? { ...i, checked: next } : i));
-    await fetch(`/api/v1/shopping-lists/${listId}/items/${item.id}`, {
-      method: "PUT",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ checked: next }),
-    });
+    try {
+      const res = await fetch(`/api/v1/shopping-lists/${listId}/items/${item.id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ checked: next }),
+      });
+      if (!res.ok) throw new Error();
+    } catch {
+      setItems((prev) => prev.map((i) => i.id === item.id ? { ...i, checked: !next } : i));
+      toast.error(tCommon("updateFailed"));
+    }
   }
 
   const grouped = items.reduce<Record<string, Item[]>>((acc, item) => {

apps/web/components/pantry/expiring-soon-suggestions.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { Clock } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -36,7 +37,9 @@ export function ExpiringSoonSuggestions({ suggestions }: { suggestions: Suggesti
             className="rounded-lg border overflow-hidden hover:bg-accent transition-colors"
           >
             {s.photoUrl ? (
-              <img src={s.photoUrl} alt="" className="h-24 w-full object-cover" />
+              <div className="relative h-24 w-full">
+                <Image src={s.photoUrl} alt={s.title} fill className="object-cover" />
+              </div>
             ) : (
               <div className="h-24 w-full bg-muted" />
             )}

apps/web/components/recipe/adapt-recipe-button.tsx

@@ -93,7 +93,7 @@ export function AdaptRecipeButton({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={t("adaptTooltip")}>
               <Wand2 className="h-4 w-4" />
             </Button>
           } />

apps/web/components/recipe/add-to-shopping-list-button.tsx

@@ -121,7 +121,7 @@ export function AddToShoppingListButton({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={tShopping("addToList")}>
               <ShoppingCart className="h-4 w-4" />
             </Button>
           } />
@@ -153,11 +153,13 @@ export function AddToShoppingListButton({
                   type="button" variant="ghost" size="icon" className="h-7 w-7"
                   onClick={() => setServings((s) => Math.max(1, s - 1))}
                   disabled={servings <= 1}
+                  aria-label={tCommon("decrease")}
                 >−</Button>
                 <span className="w-8 text-center font-medium">{servings}</span>
                 <Button
                   type="button" variant="ghost" size="icon" className="h-7 w-7"
                   onClick={() => setServings((s) => s + 1)}
+                  aria-label={tCommon("increase")}
                 >+</Button>
               </div>
               {scale !== 1 && (

apps/web/components/recipe/ai-generate-dialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef } from "react";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { Sparkles, Loader2, Camera, Type, Upload, X, Shuffle } from "lucide-react";
@@ -280,11 +281,12 @@ export function AiGenerateDialog({
               onChange={handleFileChange}
             />
             {photoPreview ? (
-              <div className="relative rounded-xl overflow-hidden border bg-muted">
-                <img
+              <div className="relative rounded-xl overflow-hidden border bg-muted aspect-video">
+                <Image
                   src={photoPreview}
-                  alt="Dish preview"
-                  className="w-full max-h-64 object-cover"
+                  alt="Preview of uploaded dish photo for AI recipe generation"
+                  fill
+                  className="object-cover"
                 />
                 <button
                   onClick={() => { setPhotoPreview(null); setPhotoBase64(null); }}

apps/web/components/recipe/can-cook-content.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { Package, Clock } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -36,7 +37,9 @@ function RecipeRow({ s }: { s: ScoredItem }) {
       className="flex items-center gap-4 rounded-xl border p-3 hover:bg-accent transition-colors"
     >
       {cover ? (
-        <img src={cover.url} alt="" className="h-14 w-14 rounded-lg object-cover shrink-0" />
+        <div className="relative h-14 w-14 rounded-lg overflow-hidden shrink-0">
+          <Image src={cover.url} alt={s.recipe.title} fill className="object-cover" />
+        </div>
       ) : (
         <div className="h-14 w-14 rounded-lg bg-muted shrink-0" />
       )}

apps/web/components/recipe/delete-recipe-button.tsx

@@ -52,6 +52,7 @@ export function DeleteRecipeButton({ recipeId }: { recipeId: string }) {
               size="icon"
               className={cn("text-destructive hover:text-destructive")}
               onClick={() => setOpen(true)}
+              aria-label={tCommon("delete")}
             >
               <Trash2 className="h-4 w-4" />
             </Button>

apps/web/components/recipe/drink-pairing-button.tsx

@@ -81,7 +81,7 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={handleOpen}>
+            <Button variant="ghost" size="icon" onClick={handleOpen} aria-label={t("drinksTooltip")}>
               <Wine className="h-4 w-4" />
             </Button>
           } />

apps/web/components/recipe/meal-pairing-button.tsx

@@ -141,7 +141,7 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => { setOpen(true); if (pairings.length === 0) suggest(); }}>
+            <Button variant="ghost" size="icon" onClick={() => { setOpen(true); if (pairings.length === 0) suggest(); }} aria-label={t("pairMealTooltip")}>
               <UtensilsCrossed className="h-4 w-4" />
             </Button>
           } />

apps/web/components/recipe/photo-uploader.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useRef } from "react";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { Upload, X, Star } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -32,7 +33,7 @@ export function PhotoUploader({
         const res = await fetch("/api/v1/upload/presign", {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ recipeId, contentType: file.type }),
+          body: JSON.stringify({ recipeId, contentType: file.type, fileSize: file.size }),
         });
         if (!res.ok) continue;
         const { url, key } = await res.json() as { url: string; key: string };
@@ -61,11 +62,12 @@ export function PhotoUploader({
     <div className="space-y-3">
       <div className="flex flex-wrap gap-3">
         {photos.map((photo) => (
-          <div key={photo.key} className="relative group">
-            <img
+          <div key={photo.key} className="relative group h-24 w-24">
+            <Image
               src={photo.preview || getPublicUrl(photo.key)}
-              alt=""
-              className={`h-24 w-24 rounded-lg object-cover border-2 ${
+              alt="Recipe photo"
+              fill
+              className={`rounded-lg object-cover border-2 ${
                 photo.isCover ? "border-primary" : "border-transparent"
               }`}
             />

apps/web/components/recipe/print-button.tsx

@@ -16,7 +16,7 @@ export function PrintButton({ recipeId }: { recipeId: string }) {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger render={
-          <Button variant="ghost" size="icon" onClick={handlePrint}>
+          <Button variant="ghost" size="icon" onClick={handlePrint} aria-label={t("print")}>
             <Printer className="h-4 w-4" />
           </Button>
         } />

apps/web/components/recipe/recipe-card.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { Clock, Users, Lock, Globe, Link2 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
@@ -42,11 +43,13 @@ export function RecipeCard({ recipe }: { recipe: Recipe }) {
     <Link href={`/recipes/${recipe.id}`}>
       <Card className="group overflow-hidden hover:shadow-md transition-shadow h-full flex flex-col">
         {cover ? (
-          <div className="aspect-video overflow-hidden bg-muted">
-            <img
+          <div className="relative aspect-video overflow-hidden bg-muted">
+            <Image
               src={getPublicUrl(cover.storageKey)}
               alt={recipe.title}
-              className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+              fill
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+              className="object-cover group-hover:scale-105 transition-transform duration-300"
             />
           </div>
         ) : (

apps/web/components/recipe/recipe-chat-panel.tsx

@@ -170,7 +170,7 @@ export function RecipeChatPanel({ recipeId, recipeTitle }: Props) {
               className="flex-1"
               autoComplete="off"
             />
-            <Button type="submit" size="icon" disabled={loading || !input.trim()}>
+            <Button type="submit" size="icon" disabled={loading || !input.trim()} aria-label={t("send")}>
               <Send className="h-4 w-4" />
             </Button>
           </form>

apps/web/components/recipe/recipe-form.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useRef, KeyboardEvent } from "react";
+import { useState, useRef, useEffect, KeyboardEvent } from "react";
 import { useRouter } from "next/navigation";
 import { Plus, Trash2, GripVertical, X, Tag } from "lucide-react";
 import { toast } from "sonner";
@@ -10,6 +10,16 @@ import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { DietaryTagPicker } from "./dietary-tag-picker";
 import { PhotoUploader, type PhotoEntry } from "./photo-uploader";
 
@@ -90,6 +100,51 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
   );
   const [photos, setPhotos] = useState<PhotoEntry[]>(defaultValues?.photos ?? []);
   const [saving, setSaving] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const [discardConfirmOpen, setDiscardConfirmOpen] = useState(false);
+  const hasMountedRef = useRef(false);
+
+  // Mark the form dirty on any edit after the initial mount, so we can warn the
+  // user before they navigate away and silently lose their changes.
+  useEffect(() => {
+    if (!hasMountedRef.current) {
+      hasMountedRef.current = true;
+      return;
+    }
+    setDirty(true);
+  }, [
+    title,
+    description,
+    baseServings,
+    visibility,
+    difficulty,
+    prepMins,
+    cookMins,
+    tags,
+    dietaryTags,
+    ingredients,
+    steps,
+    photos,
+  ]);
+
+  // Browser-level guard: warn on tab close / reload / external navigation while dirty.
+  useEffect(() => {
+    if (!dirty || saving) return;
+    function handleBeforeUnload(e: BeforeUnloadEvent) {
+      e.preventDefault();
+      e.returnValue = "";
+    }
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [dirty, saving]);
+
+  function handleCancelClick() {
+    if (dirty) {
+      setDiscardConfirmOpen(true);
+    } else {
+      router.back();
+    }
+  }
 
   function updateIngredient(i: number, patch: Partial<IngredientRow>) {
     setIngredients((prev) => prev.map((row, idx) => idx === i ? { ...row, ...patch } : row));
@@ -134,6 +189,34 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
       return;
     }
 
+    const filteredIngredients = ingredients
+      .filter((ing) => ing.rawName.trim())
+      .map((ing, i) => ({
+        rawName: ing.rawName.trim(),
+        quantity: ing.quantity.trim() || undefined,
+        unit: ing.unit.trim() || undefined,
+        note: ing.note.trim() || undefined,
+        order: i,
+      }));
+
+    if (filteredIngredients.length === 0) {
+      toast.error(t("ingredientsRequired"));
+      return;
+    }
+
+    const filteredSteps = steps
+      .filter((s) => s.instruction.trim())
+      .map((s, i) => ({
+        instruction: s.instruction.trim(),
+        timerSeconds: s.timerSeconds ? parseInt(s.timerSeconds) : undefined,
+        order: i,
+      }));
+
+    if (filteredSteps.length === 0) {
+      toast.error(t("stepsRequired"));
+      return;
+    }
+
     setSaving(true);
     try {
       const payload = {
@@ -146,22 +229,8 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
         cookMins: cookMins ? parseInt(cookMins) : undefined,
         tags,
         dietaryTags,
-        ingredients: ingredients
-          .filter((ing) => ing.rawName.trim())
-          .map((ing, i) => ({
-            rawName: ing.rawName.trim(),
-            quantity: ing.quantity.trim() || undefined,
-            unit: ing.unit.trim() || undefined,
-            note: ing.note.trim() || undefined,
-            order: i,
-          })),
-        steps: steps
-          .filter((s) => s.instruction.trim())
-          .map((s, i) => ({
-            instruction: s.instruction.trim(),
-            timerSeconds: s.timerSeconds ? parseInt(s.timerSeconds) : undefined,
-            order: i,
-          })),
+        ingredients: filteredIngredients,
+        steps: filteredSteps,
       };
 
       const url = isEdit ? `/api/v1/recipes/${id}` : "/api/v1/recipes";
@@ -181,6 +250,7 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
 
       const saved = await res.json() as { id: string };
       toast.success(isEdit ? t("updateSuccess") : t("createSuccess"));
+      setDirty(false);
       router.push(`/recipes/${saved.id}`);
       router.refresh();
     } finally {
@@ -443,10 +513,32 @@ export function RecipeForm({ recipeId, defaultValues }: RecipeFormProps) {
         <Button type="submit" disabled={saving}>
           {saving ? t("saving") : isEdit ? t("saveChanges") : t("createRecipe")}
         </Button>
-        <Button type="button" variant="outline" onClick={() => router.back()}>
+        <Button type="button" variant="outline" onClick={handleCancelClick}>
           {t_common("cancel")}
         </Button>
       </div>
+
+      <AlertDialog open={discardConfirmOpen} onOpenChange={setDiscardConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("discardChangesTitle")}</AlertDialogTitle>
+            <AlertDialogDescription>{t("discardChangesDescription")}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t("keepEditing")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => {
+                setDiscardConfirmOpen(false);
+                setDirty(false);
+                router.back();
+              }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t("discardChanges")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </form>
   );
 }

apps/web/components/recipe/recipes-grid.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useCallback, useEffect } from "react";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { Trash2, Globe, Lock, Link2, X, Check, ListChecks, LayoutGrid, List, Rows3, FolderPlus } from "lucide-react";
 import { AddToCollectionDialog } from "@/components/recipe/add-to-collection-dialog";
@@ -11,6 +12,16 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { toast } from "sonner";
 import { getPublicUrl } from "@/lib/storage";
@@ -45,11 +56,13 @@ function RecipeThumb({ recipe, selectMode, selected, className }: { recipe: Reci
   return (
     <div className={cn("relative overflow-hidden bg-muted shrink-0", className)}>
       {cover ? (
-        <img
+        <Image
           src={getPublicUrl(cover.storageKey)}
           alt={recipe.title}
+          fill
+          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw"
           className={cn(
-            "w-full h-full object-cover transition-transform duration-300",
+            "object-cover transition-transform duration-300",
             !selectMode && "group-hover:scale-105",
             selectMode && selected && "brightness-75"
           )}
@@ -264,6 +277,7 @@ export function RecipesGrid({ recipes: initialRecipes }: { recipes: Recipe[] })
   const [busy, setBusy] = useState(false);
   const [viewMode, setViewMode] = useState<ViewMode>("grid");
   const [addToCollectionOpen, setAddToCollectionOpen] = useState(false);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
 
   useEffect(() => {
     const stored = localStorage.getItem(VIEW_STORAGE_KEY) as ViewMode | null;
@@ -293,7 +307,6 @@ export function RecipesGrid({ recipes: initialRecipes }: { recipes: Recipe[] })
   };
 
   async function bulkDelete() {
-    if (!confirm(t("bulkDeleteConfirm", { count: selected.size }))) return;
     setBusy(true);
     try {
       const res = await fetch("/api/v1/recipes/bulk", {
@@ -415,7 +428,7 @@ export function RecipesGrid({ recipes: initialRecipes }: { recipes: Recipe[] })
               <FolderPlus className="h-4 w-4" />
               {t("addToCollection")}
             </Button>
-            <Button variant="destructive" size="sm" onClick={() => { void bulkDelete(); }} disabled={busy} className="gap-1.5">
+            <Button variant="destructive" size="sm" onClick={() => setDeleteConfirmOpen(true)} disabled={busy} className="gap-1.5">
               <Trash2 className="h-4 w-4" />
               {tCommon("delete")}
             </Button>
@@ -429,6 +442,24 @@ export function RecipesGrid({ recipes: initialRecipes }: { recipes: Recipe[] })
         recipeIds={[...selected]}
         onDone={exitSelect}
       />
+
+      <AlertDialog open={deleteConfirmOpen} onOpenChange={setDeleteConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("bulkDeleteConfirmTitle", { count: selected.size })}</AlertDialogTitle>
+            <AlertDialogDescription>{t("bulkDeleteConfirmDescription")}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => { setDeleteConfirmOpen(false); void bulkDelete(); }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {tCommon("delete")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

apps/web/components/recipe/search-result-card.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import { Badge } from "@/components/ui/badge";
+import { Clock, ChefHat } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const DIFFICULTY_COLORS: Record<string, string> = {
+  easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+  medium: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+  hard: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
+};
+
+export type SearchResultRecipe = {
+  id: string;
+  title: string;
+  description?: string | null;
+  difficulty: string | null;
+  prepMins: number | null;
+  cookMins: number | null;
+  authorName: string | null;
+};
+
+/**
+ * Shared card for lightweight recipe search results (no cover photo/visibility
+ * data available) — used by the search and explore pages, which previously
+ * each had their own near-identical inline copy of this component.
+ */
+export function SearchResultCard({ recipe, className }: { recipe: SearchResultRecipe; className?: string }) {
+  const t = useTranslations("recipe");
+  const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
+  const difficultyLabel = recipe.difficulty === "easy" || recipe.difficulty === "medium" || recipe.difficulty === "hard"
+    ? t(`difficulty.${recipe.difficulty}`)
+    : recipe.difficulty;
+
+  return (
+    <Link
+      href={`/recipes/${recipe.id}`}
+      className={cn(
+        "group block rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md",
+        className
+      )}
+    >
+      <div className="flex items-start justify-between gap-2">
+        <h3 className="font-semibold text-card-foreground group-hover:text-primary line-clamp-2 flex-1">
+          {recipe.title}
+        </h3>
+        {recipe.difficulty && (
+          <Badge
+            variant="secondary"
+            className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
+          >
+            {difficultyLabel}
+          </Badge>
+        )}
+      </div>
+      {recipe.description && (
+        <p className="mt-1 text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
+      )}
+      <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
+        {totalMins > 0 && (
+          <span className="flex items-center gap-1">
+            <Clock className="h-3.5 w-3.5" />
+            {t("total", { mins: totalMins })}
+          </span>
+        )}
+        {recipe.authorName && (
+          <span className="flex items-center gap-1">
+            <ChefHat className="h-3.5 w-3.5" />
+            {recipe.authorName}
+          </span>
+        )}
+      </div>
+    </Link>
+  );
+}

apps/web/components/recipe/share-recipe-button.tsx

@@ -28,7 +28,7 @@ export function ShareRecipeButton({ recipeId, visibility }: { recipeId: string;
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger render={
-          <Button variant="ghost" size="icon" onClick={() => void handleShare()}>
+          <Button variant="ghost" size="icon" onClick={() => void handleShare()} aria-label={t("share")}>
             <Share2 className="h-4 w-4" />
           </Button>
         } />

apps/web/components/recipe/translate-button.tsx

@@ -69,7 +69,7 @@ export function TranslateButton({ recipeId }: { recipeId: string }) {
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={tRecipe("translateTooltip")}>
               <Languages className="h-4 w-4" />
             </Button>
           } />

apps/web/components/recipe/variations-button.tsx

@@ -32,7 +32,7 @@ export function VariationsButton({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+            <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label={t("variationsTooltip")}>
               <GitBranch className="h-4 w-4" />
             </Button>
           } />

apps/web/components/recipe/version-history-button.tsx

@@ -133,7 +133,7 @@ export function VersionHistoryButton({
       <TooltipProvider>
         <Tooltip>
           <TooltipTrigger render={
-            <Button variant="ghost" size="icon" onClick={() => handleOpen(true)}>
+            <Button variant="ghost" size="icon" onClick={() => handleOpen(true)} aria-label={t("historyTooltip")}>
               <History className="h-4 w-4" />
             </Button>
           } />
@@ -175,6 +175,7 @@ export function VersionHistoryButton({
                       size="icon"
                       className="h-7 w-7 shrink-0 sm:hidden"
                       title={tForm("expand")}
+                      aria-label={tForm("expand")}
                       onClick={() => void handleExpand(v)}
                     >
                       <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""}`} />
@@ -186,6 +187,7 @@ export function VersionHistoryButton({
                       size="icon"
                       className="h-7 w-7 shrink-0 hidden sm:inline-flex"
                       title={tForm("expand")}
+                      aria-label={tForm("expand")}
                       onClick={() => void handleExpand(v)}
                     >
                       <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? "rotate-180" : ""}`} />

apps/web/components/search/explore-page-content.tsx

@@ -10,6 +10,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Flame, Clock, ChefHat, Search, Sparkles, Wand2, ArrowRight } from "lucide-react";
 import { useTranslations } from "next-intl";
 import type { RecipeResult as ExploreRecipeResult } from "@/app/(app)/explore/page";
+import { SearchResultCard } from "@/components/recipe/search-result-card";
 
 const DIFFICULTY_COLORS: Record<string, string> = {
   easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
@@ -42,51 +43,6 @@ type RecipeIdea = {
   totalMins?: number;
 };
 
-function RecipeCard({ recipe }: { recipe: ExploreRecipeResult | SearchRecipeResult }) {
-  const t = useTranslations("recipe");
-  const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
-  const description = "description" in recipe ? recipe.description : null;
-  const difficultyLabel = recipe.difficulty === "easy" || recipe.difficulty === "medium" || recipe.difficulty === "hard"
-    ? t(`difficulty.${recipe.difficulty}`)
-    : recipe.difficulty;
-  return (
-    <Link
-      href={`/recipes/${recipe.id}`}
-      className="group block rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md min-w-[200px]"
-    >
-      <div className="flex items-start justify-between gap-2">
-        <h3 className="font-semibold text-card-foreground group-hover:text-primary line-clamp-2 flex-1">
-          {recipe.title}
-        </h3>
-        {recipe.difficulty && (
-          <Badge
-            variant="secondary"
-            className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
-          >
-            {difficultyLabel}
-          </Badge>
-        )}
-      </div>
-      {description && (
-        <p className="mt-1 text-sm text-muted-foreground line-clamp-2">{description}</p>
-      )}
-      <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
-        {totalMins > 0 && (
-          <span className="flex items-center gap-1">
-            <Clock className="h-3.5 w-3.5" />
-            {t("total", { mins: totalMins })}
-          </span>
-        )}
-        {recipe.authorName && (
-          <span className="flex items-center gap-1">
-            <ChefHat className="h-3.5 w-3.5" />
-            {recipe.authorName}
-          </span>
-        )}
-      </div>
-    </Link>
-  );
-}
 
 function HorizontalScroll({ children }: { children: React.ReactNode }) {
   return (
@@ -317,7 +273,7 @@ export function ExplorePageContent({ trending, recent, initialQuery }: Props) {
         <>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {results.map((recipe) => (
-              <RecipeCard key={recipe.id} recipe={recipe} />
+              <SearchResultCard key={recipe.id} recipe={recipe} />
             ))}
           </div>
           {hasMore && (
@@ -443,7 +399,7 @@ export function ExplorePageContent({ trending, recent, initialQuery }: Props) {
               <HorizontalScroll>
                 {trending.map((recipe) => (
                   <div key={recipe.id} className="snap-start shrink-0 w-56">
-                    <RecipeCard recipe={recipe} />
+                    <SearchResultCard recipe={recipe} className="min-w-[200px]" />
                   </div>
                 ))}
               </HorizontalScroll>
@@ -462,7 +418,7 @@ export function ExplorePageContent({ trending, recent, initialQuery }: Props) {
             ) : (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                 {recent.map((recipe) => (
-                  <RecipeCard key={recipe.id} recipe={recipe} />
+                  <SearchResultCard key={recipe.id} recipe={recipe} />
                 ))}
               </div>
             )}

apps/web/components/search/search-page-content.tsx

@@ -2,11 +2,8 @@
 
 import { useState, useEffect, useRef, useCallback } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useTranslations } from "next-intl";
-import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
 import {
   Select,
   SelectContent,
@@ -14,17 +11,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Search, Clock, ChefHat } from "lucide-react";
+import { Search, ChefHat } from "lucide-react";
+import { SearchResultCard, type SearchResultRecipe } from "@/components/recipe/search-result-card";
 
-type RecipeResult = {
-  id: string;
-  title: string;
-  description: string | null;
-  difficulty: string | null;
-  prepMins: number | null;
-  cookMins: number | null;
-  authorName: string | null;
-};
+type RecipeResult = SearchResultRecipe;
 
 type SearchResponse = {
   data: RecipeResult[];
@@ -33,57 +23,6 @@ type SearchResponse = {
   offset: number;
 };
 
-const DIFFICULTY_COLORS: Record<string, string> = {
-  easy: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
-  medium: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
-  hard: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200",
-};
-
-function RecipeCard({ recipe }: { recipe: RecipeResult }) {
-  const t = useTranslations("recipe");
-  const totalMins = (recipe.prepMins ?? 0) + (recipe.cookMins ?? 0);
-  const difficultyLabel = recipe.difficulty === "easy" || recipe.difficulty === "medium" || recipe.difficulty === "hard"
-    ? t(`difficulty.${recipe.difficulty}`)
-    : recipe.difficulty;
-  return (
-    <Link
-      href={`/recipes/${recipe.id}`}
-      className="group block rounded-lg border bg-card p-4 shadow-sm transition-shadow hover:shadow-md"
-    >
-      <div className="flex items-start justify-between gap-2">
-        <h3 className="font-semibold text-card-foreground group-hover:text-primary line-clamp-2">
-          {recipe.title}
-        </h3>
-        {recipe.difficulty && (
-          <Badge
-            variant="secondary"
-            className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
-          >
-            {difficultyLabel}
-          </Badge>
-        )}
-      </div>
-      {recipe.description && (
-        <p className="mt-1 text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
-      )}
-      <div className="mt-3 flex items-center gap-3 text-xs text-muted-foreground">
-        {totalMins > 0 && (
-          <span className="flex items-center gap-1">
-            <Clock className="h-3.5 w-3.5" />
-            {t("total", { mins: totalMins })}
-          </span>
-        )}
-        {recipe.authorName && (
-          <span className="flex items-center gap-1">
-            <ChefHat className="h-3.5 w-3.5" />
-            {recipe.authorName}
-          </span>
-        )}
-      </div>
-    </Link>
-  );
-}
-
 export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -259,7 +198,7 @@ export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
         <div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
           <Search className="h-12 w-12 mb-4 opacity-30" />
           <p className="text-lg">Search for recipes...</p>
-          <p className="text-sm mt-1">Try "pasta", "vegan dessert", or "quick dinner"</p>
+          <p className="text-sm mt-1">Try &ldquo;pasta&rdquo;, &ldquo;vegan dessert&rdquo;, or &ldquo;quick dinner&rdquo;</p>
         </div>
       )}
 
@@ -287,7 +226,7 @@ export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
         <>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {results.map((recipe) => (
-              <RecipeCard key={recipe.id} recipe={recipe} />
+              <SearchResultCard key={recipe.id} recipe={recipe} />
             ))}
           </div>
 

apps/web/components/shared/export-markdown-button.tsx

@@ -48,7 +48,7 @@ export function ExportMarkdownButton({
         <Tooltip>
           <TooltipTrigger render={
             <DropdownMenuTrigger render={
-              <Button variant="ghost" size="icon">
+              <Button variant="ghost" size="icon" aria-label={t("exportMarkdown")}>
                 <FileDown className="h-4 w-4" />
               </Button>
             } />

apps/web/components/shared/skeletons.tsx

@@ -0,0 +1,154 @@
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
+
+/** Page title + optional action buttons, matching the common page header layout. */
+export function PageHeaderSkeleton({
+  actions = 0,
+  subtitle = false,
+}: {
+  actions?: number;
+  subtitle?: boolean;
+}) {
+  return (
+    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+      <div className="space-y-2">
+        <Skeleton className="h-9 w-48" />
+        {subtitle && <Skeleton className="h-4 w-64" />}
+      </div>
+      {actions > 0 && (
+        <div className="flex flex-wrap items-center gap-2">
+          {Array.from({ length: actions }).map((_, i) => (
+            <Skeleton key={i} className="h-8 w-24" />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Mirrors the recipe GridCard: aspect-video thumb, title, description, meta row. */
+export function RecipeCardSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-xl border bg-card flex flex-col h-full">
+      <Skeleton className="aspect-video w-full rounded-none" />
+      <div className="flex flex-col flex-1 p-3 gap-2">
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-3 w-full" />
+        <Skeleton className="h-3 w-1/2" />
+      </div>
+      <div className="px-3 pb-3 flex items-center justify-between">
+        <Skeleton className="h-3 w-24" />
+        <Skeleton className="h-3 w-3" />
+      </div>
+    </div>
+  );
+}
+
+/** Grid of RecipeCardSkeletons; default classes match RecipesGrid's grid view. */
+export function RecipeCardGridSkeleton({
+  count = 8,
+  className,
+}: {
+  count?: number;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 items-start",
+        className,
+      )}
+    >
+      {Array.from({ length: count }).map((_, i) => (
+        <RecipeCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+/** Mirrors a feed article: avatar + author line, title, description, meta chips. */
+export function FeedItemSkeleton() {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <Skeleton className="h-8 w-8 rounded-full" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+      <Skeleton className="h-6 w-2/3" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-1/2" />
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-4 w-12" />
+        <Skeleton className="h-4 w-10" />
+        <Skeleton className="h-4 w-10" />
+      </div>
+    </div>
+  );
+}
+
+/** Bordered row card, matching list rows (shopping lists, pantry items, etc.). */
+export function ListRowSkeleton() {
+  return (
+    <div className="rounded-xl border p-4 space-y-2">
+      <Skeleton className="h-5 w-1/2" />
+      <Skeleton className="h-4 w-3/4" />
+      <Skeleton className="h-3 w-16" />
+    </div>
+  );
+}
+
+/** Small bordered info card, matching search/explore result cards. */
+export function InfoCardSkeleton() {
+  return (
+    <div className="rounded-lg border bg-card p-4 space-y-3">
+      <Skeleton className="h-5 w-3/4" />
+      <Skeleton className="h-4 w-1/2" />
+      <Skeleton className="h-3 w-2/3" />
+    </div>
+  );
+}
+
+/** Square photo tile with a caption line, matching profile recipe tiles. */
+export function SquareTileSkeleton() {
+  return (
+    <div className="rounded-xl overflow-hidden border bg-card">
+      <Skeleton className="aspect-square w-full rounded-none" />
+      <div className="p-2">
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    </div>
+  );
+}
+
+/** Admin overview stat card. */
+export function StatCardSkeleton() {
+  return (
+    <div className="rounded-xl border bg-card p-4 space-y-3">
+      <div className="flex items-center justify-between">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-4" />
+      </div>
+      <Skeleton className="h-8 w-16" />
+    </div>
+  );
+}
+
+/** Simple bordered table: one header row and `rows` body rows. */
+export function TableSkeleton({ rows = 8 }: { rows?: number }) {
+  return (
+    <div className="rounded-xl border divide-y overflow-hidden">
+      <div className="flex items-center gap-4 px-4 py-3 bg-muted/40">
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-20 ml-auto" />
+      </div>
+      {Array.from({ length: rows }).map((_, i) => (
+        <div key={i} className="flex items-center gap-4 px-4 py-3">
+          <Skeleton className="h-4 w-40" />
+          <Skeleton className="h-4 w-24" />
+          <Skeleton className="h-4 w-16 ml-auto" />
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/components/social/block-button.tsx

@@ -2,9 +2,20 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
 import { toast } from "sonner";
 import { Ban } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 export function BlockButton({
   targetUsername,
@@ -14,13 +25,13 @@ export function BlockButton({
   initialBlocked?: boolean;
 }) {
   const router = useRouter();
+  const t = useTranslations("social");
+  const tCommon = useTranslations("common");
   const [blocked, setBlocked] = useState(initialBlocked);
   const [loading, setLoading] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
 
   async function toggle() {
-    if (!blocked && !confirm(`Block @${targetUsername}? They won't be able to follow you or comment on your recipes.`)) {
-      return;
-    }
     setLoading(true);
     try {
       const res = await fetch(`/api/v1/users/${targetUsername}/block`, {
@@ -40,15 +51,34 @@ export function BlockButton({
   }
 
   return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={() => { void toggle(); }}
-      disabled={loading}
-      className={blocked ? "" : "text-destructive hover:text-destructive"}
-    >
-      <Ban className="h-3.5 w-3.5" />
-      {loading ? "…" : blocked ? "Unblock" : "Block"}
-    </Button>
+    <>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => (blocked ? void toggle() : setConfirmOpen(true))}
+        disabled={loading}
+        className={blocked ? "" : "text-destructive hover:text-destructive"}
+      >
+        <Ban className="h-3.5 w-3.5" />
+        {loading ? "…" : blocked ? "Unblock" : "Block"}
+      </Button>
+      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("blockConfirmTitle", { username: targetUsername })}</AlertDialogTitle>
+            <AlertDialogDescription>{t("blockConfirmDescription")}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => { setConfirmOpen(false); void toggle(); }}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              {t("blockConfirmAction")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

apps/web/components/social/comments-section.tsx

@@ -9,6 +9,16 @@ import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Separator } from "@/components/ui/separator";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { CommentReactions } from "@/components/social/comment-reactions";
 import { ReportButton } from "@/components/social/report-button";
 import { cn } from "@/lib/utils";
@@ -24,6 +34,15 @@ type Comment = {
   userAvatarUrl: string | null;
 };
 
+const COMMENTS_PAGE_SIZE = 20;
+
+type CommentsResponse = {
+  data: Comment[];
+  total: number;
+  limit: number;
+  offset: number;
+};
+
 const MAX_VISUAL_INDENT = 4;
 const MENTION_REGEX = /@([a-z0-9_-]{3,30})/gi;
 
@@ -125,6 +144,7 @@ function CommentItem({
   onRefresh: () => void;
 }) {
   const [showReply, setShowReply] = useState(false);
+  const [confirmOpen, setConfirmOpen] = useState(false);
   const isOwn = comment.userId === currentUserId;
   const t = useTranslations("social");
   const tCommon = useTranslations("common");
@@ -141,7 +161,7 @@ function CommentItem({
     <div className={cn("space-y-3", indented && "ml-10 border-l pl-4")}>
       <div className="flex gap-3">
         <Avatar className={cn("shrink-0 mt-0.5", depth === 0 ? "h-7 w-7" : "h-6 w-6")}>
-          <AvatarImage src={comment.userAvatarUrl ?? ""} />
+          <AvatarImage src={comment.userAvatarUrl ?? ""} alt={comment.userName} />
           <AvatarFallback className="text-xs">{comment.userName.slice(0, 2).toUpperCase()}</AvatarFallback>
         </Avatar>
         <div className="flex-1 min-w-0 space-y-1">
@@ -165,13 +185,30 @@ function CommentItem({
             )}
             {isOwn && (
               <button
-                onClick={deleteComment}
+                onClick={() => setConfirmOpen(true)}
                 className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
               >
                 <Trash2 className="h-3 w-3" /> {tCommon("delete")}
               </button>
             )}
           </div>
+          <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
+            <AlertDialogContent>
+              <AlertDialogHeader>
+                <AlertDialogTitle>{t("deleteCommentTitle")}</AlertDialogTitle>
+                <AlertDialogDescription>{t("deleteCommentDescription")}</AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
+                <AlertDialogAction
+                  onClick={() => { void deleteComment(); }}
+                  className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                >
+                  {tCommon("delete")}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
           {showReply && (
             <CommentForm
               recipeId={recipeId}
@@ -212,15 +249,40 @@ export function CommentsSection({
 }) {
   const [comments, setComments] = useState<Comment[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [topLevelOffset, setTopLevelOffset] = useState(0);
+  const [topLevelTotal, setTopLevelTotal] = useState(0);
   const t = useTranslations("social");
   const tCommon = useTranslations("common");
 
+  // Full reload from the first page — used on mount and after any mutation (post/reply/delete)
+  // so the thread stays consistent rather than trying to patch pagination state in place.
   const load = useCallback(async () => {
-    const res = await fetch(`/api/v1/recipes/${recipeId}/comments`);
-    if (res.ok) setComments(await res.json() as Comment[]);
+    const res = await fetch(`/api/v1/recipes/${recipeId}/comments?limit=${COMMENTS_PAGE_SIZE}&offset=0`);
+    if (res.ok) {
+      const json = await res.json() as CommentsResponse;
+      setComments(json.data);
+      setTopLevelTotal(json.total);
+      setTopLevelOffset(json.data.filter((c) => !c.parentId).length);
+    }
     setLoading(false);
   }, [recipeId]);
 
+  const loadMore = useCallback(async () => {
+    setLoadingMore(true);
+    try {
+      const res = await fetch(`/api/v1/recipes/${recipeId}/comments?limit=${COMMENTS_PAGE_SIZE}&offset=${topLevelOffset}`);
+      if (res.ok) {
+        const json = await res.json() as CommentsResponse;
+        setComments((prev) => [...prev, ...json.data]);
+        setTopLevelTotal(json.total);
+        setTopLevelOffset((prev) => prev + json.data.filter((c) => !c.parentId).length);
+      }
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [recipeId, topLevelOffset]);
+
   useEffect(() => { void load(); }, [load]);
 
   const { topLevel, childrenByParent } = useMemo(() => {
@@ -269,6 +331,13 @@ export function CommentsSection({
               />
             </div>
           ))}
+          {topLevelOffset < topLevelTotal && (
+            <div className="flex justify-center pt-2">
+              <Button size="sm" variant="outline" onClick={() => void loadMore()} disabled={loadingMore}>
+                {loadingMore ? t("loadingMoreComments") : t("loadMoreComments")}
+              </Button>
+            </div>
+          )}
         </div>
       )}
     </div>

apps/web/components/social/conversations-list.tsx

@@ -54,7 +54,7 @@ export function ConversationsList() {
           )}
         >
           <Avatar className="h-10 w-10 shrink-0">
-            {c.otherUser?.avatarUrl && <AvatarImage src={c.otherUser.avatarUrl} />}
+            {c.otherUser?.avatarUrl && <AvatarImage src={c.otherUser.avatarUrl} alt={c.otherUser.name ?? ""} />}
             <AvatarFallback>{(c.otherUser?.name ?? "?").slice(0, 2).toUpperCase()}</AvatarFallback>
           </Avatar>
           <div className="flex-1 min-w-0">

apps/web/components/social/cooked-it-review.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
+import Image from "next/image";
 import { useTranslations, useLocale } from "next-intl";
 import { Star, Camera, X, ChefHat } from "lucide-react";
 import { toast } from "sonner";
@@ -86,7 +87,7 @@ export function CookedItReview({
       const res = await fetch("/api/v1/upload/presign", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ recipeId, contentType: file.type, purpose: "review" }),
+        body: JSON.stringify({ recipeId, contentType: file.type, purpose: "review", fileSize: file.size }),
       });
       if (!res.ok) {
         toast.error(t("reviewPhotoFailed"));
@@ -143,11 +144,12 @@ export function CookedItReview({
         />
         <div className="flex items-center gap-3">
           {(preview || photoKey) && (
-            <div className="relative">
-              <img
+            <div className="relative h-16 w-16">
+              <Image
                 src={preview ?? getPublicUrl(photoKey!)}
-                alt=""
-                className="h-16 w-16 rounded-lg object-cover border"
+                alt="Your cooked-it photo"
+                fill
+                className="rounded-lg object-cover border"
               />
               <button
                 type="button"
@@ -187,7 +189,7 @@ export function CookedItReview({
           {reviews.map((r) => (
             <div key={r.id} className="flex gap-3">
               <Avatar className="h-8 w-8">
-                <AvatarImage src={r.user.avatarUrl ?? undefined} />
+                <AvatarImage src={r.user.avatarUrl ?? undefined} alt={r.user.name} />
                 <AvatarFallback>{r.user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
               </Avatar>
               <div className="flex-1 space-y-1.5">
@@ -204,11 +206,14 @@ export function CookedItReview({
                 </div>
                 {r.reviewText && <p className="text-sm text-muted-foreground">{r.reviewText}</p>}
                 {r.photoKey && (
-                  <img
-                    src={getPublicUrl(r.photoKey)}
-                    alt=""
-                    className="h-32 w-32 rounded-lg object-cover border"
-                  />
+                  <div className="relative h-32 w-32">
+                    <Image
+                      src={getPublicUrl(r.photoKey)}
+                      alt={`${r.user.name}'s cooked-it photo`}
+                      fill
+                      className="rounded-lg object-cover border"
+                    />
+                  </div>
                 )}
               </div>
             </div>

apps/web/components/social/favorite-button.tsx

@@ -1,7 +1,9 @@
 "use client";
 
 import { useState } from "react";
+import { useTranslations } from "next-intl";
 import { Heart } from "lucide-react";
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -13,17 +15,23 @@ export function FavoriteButton({
   recipeId: string;
   initialFavorited?: boolean;
 }) {
+  const tCommon = useTranslations("common");
+  const tSocial = useTranslations("social");
   const [favorited, setFavorited] = useState(initialFavorited);
   const [loading, setLoading] = useState(false);
 
   async function toggle() {
+    const next = !favorited;
+    setFavorited(next);
     setLoading(true);
     try {
       const res = await fetch(`/api/v1/recipes/${recipeId}/favorite`, {
-        method: favorited ? "DELETE" : "POST",
+        method: next ? "POST" : "DELETE",
       });
-      if (!res.ok) return;
-      setFavorited(!favorited);
+      if (!res.ok) throw new Error();
+    } catch {
+      setFavorited(!next);
+      toast.error(tCommon("updateFailed"));
     } finally {
       setLoading(false);
     }
@@ -33,7 +41,13 @@ export function FavoriteButton({
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger render={
-          <Button variant="ghost" size="icon" onClick={toggle} disabled={loading}>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={toggle}
+            disabled={loading}
+            aria-label={favorited ? tSocial("favoriteRemove") : tSocial("favoriteAdd")}
+          >
             <Heart className={cn("h-4 w-4", favorited && "fill-red-500 text-red-500")} />
           </Button>
         } />

apps/web/components/social/follow-button.tsx

@@ -17,18 +17,21 @@ export function FollowButton({
   const [loading, setLoading] = useState(false);
 
   async function toggle() {
+    const next = !following;
+    setFollowing(next);
     setLoading(true);
     try {
       const res = await fetch(`/api/v1/users/${targetUsername}/follow`, {
-        method: following ? "DELETE" : "POST",
+        method: next ? "POST" : "DELETE",
       });
       if (!res.ok) {
         const err = await res.json() as { error?: string };
-        toast.error(err.error ?? "Failed");
-        return;
+        throw new Error(err.error);
       }
-      setFollowing(!following);
-      toast.success(following ? "Unfollowed" : "Following");
+      toast.success(next ? "Following" : "Unfollowed");
+    } catch (err) {
+      setFollowing(!next);
+      toast.error(err instanceof Error && err.message ? err.message : "Failed");
     } finally {
       setLoading(false);
     }
@@ -36,7 +39,7 @@ export function FollowButton({
 
   return (
     <Button variant={following ? "outline" : "default"} size="sm" onClick={toggle} disabled={loading}>
-      {loading ? "…" : following ? "Following" : "Follow"}
+      {following ? "Following" : "Follow"}
     </Button>
   );
 }

apps/web/components/social/message-thread.tsx

@@ -25,19 +25,50 @@ export function MessageThread({
   const t = useTranslations("messages");
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
   const [content, setContent] = useState("");
   const [sending, setSending] = useState(false);
   const bottomRef = useRef<HTMLDivElement>(null);
 
+  // Loads the latest page of messages. On the very first load this replaces
+  // the (empty) list outright; on subsequent polls it merges in only the
+  // messages we don't already have, so it doesn't clobber older history the
+  // user paged back through via loadMore().
   const load = useCallback(async () => {
     const res = await fetch(`/api/v1/conversations/${conversationId}/messages`);
     if (res.ok) {
-      const data = (await res.json()) as { messages: Message[] };
-      setMessages(data.messages);
+      const data = (await res.json()) as { messages: Message[]; nextCursor: string | null };
+      setMessages((prev) => {
+        if (prev.length === 0) return data.messages;
+        const existingIds = new Set(prev.map((m) => m.id));
+        const fresh = data.messages.filter((m) => !existingIds.has(m.id));
+        return fresh.length > 0 ? [...prev, ...fresh] : prev;
+      });
+      setNextCursor((prev) => prev ?? data.nextCursor);
     }
     setLoading(false);
   }, [conversationId]);
 
+  // Loads an older page (before the oldest message currently loaded) and
+  // prepends it, using the server-provided cursor.
+  const loadMore = useCallback(async () => {
+    if (!nextCursor || loadingMore) return;
+    setLoadingMore(true);
+    try {
+      const res = await fetch(
+        `/api/v1/conversations/${conversationId}/messages?before=${encodeURIComponent(nextCursor)}`
+      );
+      if (res.ok) {
+        const data = (await res.json()) as { messages: Message[]; nextCursor: string | null };
+        setMessages((prev) => [...data.messages, ...prev]);
+        setNextCursor(data.nextCursor);
+      }
+    } finally {
+      setLoadingMore(false);
+    }
+  }, [conversationId, nextCursor, loadingMore]);
+
   useEffect(() => {
     void load();
     const interval = setInterval(() => { void load(); }, 5000);
@@ -77,21 +108,35 @@ export function MessageThread({
         ) : messages.length === 0 ? (
           <p className="text-sm text-muted-foreground text-center py-8">{t("noMessagesYet")}</p>
         ) : (
-          messages.map((m) => {
-            const isOwn = m.senderId === currentUserId;
-            return (
-              <div key={m.id} className={cn("flex", isOwn ? "justify-end" : "justify-start")}>
-                <div
-                  className={cn(
-                    "max-w-[70%] rounded-2xl px-4 py-2 text-sm whitespace-pre-wrap",
-                    isOwn ? "bg-primary text-primary-foreground" : "bg-muted"
-                  )}
+          <>
+            {nextCursor && (
+              <div className="flex justify-center pb-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => { void loadMore(); }}
+                  disabled={loadingMore}
                 >
-                  {m.content}
-                </div>
+                  {loadingMore ? t("loadingOlder") : t("loadOlder")}
+                </Button>
               </div>
-            );
-          })
+            )}
+            {messages.map((m) => {
+              const isOwn = m.senderId === currentUserId;
+              return (
+                <div key={m.id} className={cn("flex", isOwn ? "justify-end" : "justify-start")}>
+                  <div
+                    className={cn(
+                      "max-w-[70%] rounded-2xl px-4 py-2 text-sm whitespace-pre-wrap",
+                      isOwn ? "bg-primary text-primary-foreground" : "bg-muted"
+                    )}
+                  >
+                    {m.content}
+                  </div>
+                </div>
+              );
+            })}
+          </>
         )}
         <div ref={bottomRef} />
       </div>
@@ -109,7 +154,12 @@ export function MessageThread({
           rows={1}
           className="resize-none"
         />
-        <Button size="icon" onClick={() => { void send(); }} disabled={!content.trim() || sending}>
+        <Button
+          size="icon"
+          aria-label={t("send")}
+          onClick={() => { void send(); }}
+          disabled={!content.trim() || sending}
+        >
           <Send className="h-4 w-4" />
         </Button>
       </div>

apps/web/components/social/messages-nav-link.tsx

@@ -27,7 +27,7 @@ export function MessagesNavLink() {
   }, []);
 
   return (
-    <Button variant="ghost" size="icon" className="relative" nativeButton={false} render={<Link href="/messages" />}>
+    <Button variant="ghost" size="icon" className="relative" nativeButton={false} aria-label="Messages" render={<Link href="/messages" />}>
       <MessageCircle className="h-4 w-4" />
       {unreadTotal > 0 && (
         <Badge

apps/web/components/social/notification-bell.tsx

@@ -64,7 +64,7 @@ export function NotificationBell() {
 
   return (
     <DropdownMenu open={open} onOpenChange={(next) => { setOpen(next); if (next) void load(); }}>
-      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="relative" />}>
+      <DropdownMenuTrigger render={<Button variant="ghost" size="icon" className="relative" aria-label={t("title")} />}>
         <Bell className="h-4 w-4" />
         {unreadCount > 0 && (
           <Badge

apps/web/components/social/report-button.tsx

@@ -54,7 +54,7 @@ export function ReportButton({
           <Flag className="h-3 w-3" /> Report
         </button>
       ) : (
-        <Button variant="ghost" size="icon" onClick={() => setOpen(true)}>
+        <Button variant="ghost" size="icon" onClick={() => setOpen(true)} aria-label="Report">
           <Flag className="h-4 w-4" />
         </Button>
       )}
@@ -66,7 +66,7 @@ export function ReportButton({
           ) : (
             <div className="space-y-4">
               <div className="space-y-2">
-                <Label htmlFor="report-reason">What's wrong with this?</Label>
+                <Label htmlFor="report-reason">What&apos;s wrong with this?</Label>
                 <Textarea
                   id="report-reason"
                   value={reason}