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/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>