refactor: fold batch-cooking into the main recipes list and Generate dialog

Batch-cook recipes no longer live in a separate /batch-cooking section:
- Removed the dedicated page/route and its nav button.
- /recipes shows both kinds together, with a chef-hat badge marking
  batch sessions, and a filter to isolate/hide them.
- "Batch cooking" is now a third tab in the existing "Generate recipe
  with AI" dialog (alongside Describe/Photo) instead of a separate
  button — one AI entry point instead of three.
- Extracted the counters/difficulty/dietary form into BatchCookFields,
  shared between that dialog and the meal-planner's batch-cooking
  dialog.
- Also fixed a dialog resize issue (progress bar mounting mid-generate
  grew the dialog's height, which the positioning library didn't
  always handle) by reserving space up front and capping dialog height
  with a scroll fallback.

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

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

@@ -4,7 +4,7 @@ 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";
+import { Sparkles, Loader2, Camera, Type, Upload, X, Shuffle, ChefHat } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -20,6 +20,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { cn } from "@/lib/utils";
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
 import { useLocale } from "@/lib/i18n/provider";
+import { BatchCookFields, type BatchCookFieldsState } from "./batch-cook-fields";
 
 const LANGUAGES = [
   { code: "en", label: "English" },
@@ -51,7 +52,7 @@ const SURPRISE_PROMPTS = [
   "A refreshing no-cook meal for hot summer days",
 ];
 
-type Tab = "describe" | "photo";
+type Tab = "describe" | "photo" | "batch";
 
 type GeneratedRecipe = {
   title: string;
@@ -75,6 +76,7 @@ export function AiGenerateDialog({
   const t = useTranslations("ai.generate");
   const tCommon = useTranslations("common");
   const tRecipe = useTranslations("recipe");
+  const tBatch = useTranslations("batchCooking");
   const router = useRouter();
   const { locale } = useLocale();
   const [tab, setTab] = useState<Tab>("describe");
@@ -90,6 +92,15 @@ export function AiGenerateDialog({
   const [photoMime, setPhotoMime] = useState<string>("image/jpeg");
   const fileRef = useRef<HTMLInputElement>(null);
 
+  // batch tab
+  const [batchFields, setBatchFields] = useState<BatchCookFieldsState>({
+    dinners: 4,
+    lunches: 0,
+    servings: 4,
+    difficulty: "",
+    dietaryPrefs: "",
+  });
+
   const [busy, setBusy] = useState(false);
 
   function handleClose() {
@@ -99,6 +110,7 @@ export function AiGenerateDialog({
       setPrompt("");
       setPhotoPreview(null);
       setPhotoBase64(null);
+      setBatchFields({ dinners: 4, lunches: 0, servings: 4, difficulty: "", dietaryPrefs: "" });
       setTab("describe");
     }, 200);
   }
@@ -172,11 +184,39 @@ export function AiGenerateDialog({
     }
   }
 
-  const canSubmit = tab === "describe" ? !!prompt.trim() : !!photoBase64;
+  async function handleBatchGenerate() {
+    setBusy(true);
+    try {
+      const res = await fetch("/api/v1/ai/batch-cook/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          dinners: batchFields.dinners,
+          lunches: batchFields.lunches,
+          servings: batchFields.servings,
+          dietaryPrefs: batchFields.dietaryPrefs.trim() || undefined,
+          difficulty: batchFields.difficulty || undefined,
+        }),
+      });
+      if (!res.ok) {
+        const err = await res.json() as { error?: string };
+        toast.error(err.error ?? tBatch("generateFailed"));
+        return;
+      }
+      const { id } = await res.json() as { id: string };
+      toast.success(tBatch("generateSuccess"));
+      handleClose();
+      router.push(`/recipes/${id}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const canSubmit = tab === "describe" ? !!prompt.trim() : tab === "photo" ? !!photoBase64 : batchFields.dinners + batchFields.lunches > 0;
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-xl">
+      <DialogContent className="max-w-xl max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <Sparkles className="h-5 w-5 text-primary" />
@@ -192,6 +232,7 @@ export function AiGenerateDialog({
           {([
             { key: "describe", label: t("tabDescribe"), icon: Type },
             { key: "photo", label: t("tabPhoto"), icon: Camera },
+            { key: "batch", label: tBatch("title"), icon: ChefHat },
           ] as { key: Tab; label: string; icon: React.ElementType }[]).map(({ key, label, icon: Icon }) => (
             <button
               key={key}
@@ -317,24 +358,35 @@ export function AiGenerateDialog({
           </div>
         )}
 
-        <FakeProgressBar
-          active={busy}
-          durationMs={tab === "photo" ? 12000 : 10000}
-          label={busy ? (tab === "photo" ? t("analyzePhoto") : t("generating")) : undefined}
-        />
+        {/* Batch cooking tab */}
+        {tab === "batch" && (
+          <BatchCookFields state={batchFields} onChange={setBatchFields} disabled={busy} />
+        )}
+
+        <div className="min-h-[26px]">
+          <FakeProgressBar
+            active={busy}
+            durationMs={tab === "photo" ? 12000 : tab === "batch" ? 20000 : 10000}
+            label={busy ? (tab === "photo" ? t("analyzePhoto") : tab === "batch" ? tBatch("generating") : t("generating")) : undefined}
+          />
+        </div>
         {/* Actions */}
         <div className="flex gap-2 justify-end pt-1">
           <Button variant="ghost" onClick={handleClose} disabled={busy}>
             {tCommon("cancel")}
           </Button>
           <Button
-            onClick={tab === "describe" ? () => { void handleDescribeGenerate(); } : () => { void handlePhotoGenerate(); }}
+            onClick={
+              tab === "describe" ? () => { void handleDescribeGenerate(); }
+              : tab === "photo" ? () => { void handlePhotoGenerate(); }
+              : () => { void handleBatchGenerate(); }
+            }
             disabled={!canSubmit || busy}
           >
             {busy ? (
-              <><Loader2 className="h-4 w-4 animate-spin" />{t("analyzing")}</>
+              <><Loader2 className="h-4 w-4 animate-spin" />{tab === "batch" ? tBatch("generating") : t("analyzing")}</>
             ) : (
-              <><Sparkles className="h-4 w-4" />{tab === "photo" ? t("recognizeDish") : t("button")}</>
+              <><Sparkles className="h-4 w-4" />{tab === "photo" ? t("recognizeDish") : tab === "batch" ? tBatch("generate") : t("button")}</>
             )}
           </Button>
         </div>