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/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>
+  );
+}