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/batch-cook-generate-dialog.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { ChefHat, Loader2, Minus, Plus } from "lucide-react";
+import { ChefHat, Loader2 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
@@ -13,24 +13,8 @@ import {
   DialogTitle,
   DialogDescription,
 } from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
-
-function Counter({ value, onChange, max = 6 }: { value: number; onChange: (v: number) => void; max?: number }) {
-  return (
-    <div className="flex items-center gap-2">
-      <Button type="button" variant="outline" size="icon" onClick={() => onChange(Math.max(0, value - 1))}>
-        <Minus className="h-4 w-4" />
-      </Button>
-      <span className="w-8 text-center font-medium tabular-nums">{value}</span>
-      <Button type="button" variant="outline" size="icon" onClick={() => onChange(Math.min(max, value + 1))}>
-        <Plus className="h-4 w-4" />
-      </Button>
-    </div>
-  );
-}
+import { BatchCookFields, type BatchCookFieldsState } from "./batch-cook-fields";
 
 export function BatchCookGenerateDialog({
   open,
@@ -41,14 +25,15 @@ export function BatchCookGenerateDialog({
 }) {
   const t = useTranslations("batchCooking");
   const tCommon = useTranslations("common");
-  const tRecipe = useTranslations("recipe");
   const router = useRouter();
 
-  const [dinners, setDinners] = useState(4);
-  const [lunches, setLunches] = useState(0);
-  const [servings, setServings] = useState(4);
-  const [dietaryPrefs, setDietaryPrefs] = useState("");
-  const [difficulty, setDifficulty] = useState<"" | "easy" | "medium" | "hard">("");
+  const [fields, setFields] = useState<BatchCookFieldsState>({
+    dinners: 4,
+    lunches: 0,
+    servings: 4,
+    difficulty: "",
+    dietaryPrefs: "",
+  });
   const [busy, setBusy] = useState(false);
 
   function handleClose() {
@@ -63,11 +48,11 @@ export function BatchCookGenerateDialog({
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          dinners,
-          lunches,
-          servings,
-          dietaryPrefs: dietaryPrefs.trim() || undefined,
-          difficulty: difficulty || undefined,
+          dinners: fields.dinners,
+          lunches: fields.lunches,
+          servings: fields.servings,
+          dietaryPrefs: fields.dietaryPrefs.trim() || undefined,
+          difficulty: fields.difficulty || undefined,
         }),
       });
       if (!res.ok) {
@@ -84,11 +69,11 @@ export function BatchCookGenerateDialog({
     }
   }
 
-  const canSubmit = dinners + lunches > 0;
+  const canSubmit = fields.dinners + fields.lunches > 0;
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="max-w-md">
+      <DialogContent className="max-w-md max-h-[85vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="flex items-center gap-2">
             <ChefHat className="h-5 w-5 text-primary" />
@@ -97,46 +82,11 @@ export function BatchCookGenerateDialog({
           <DialogDescription>{t("wizardDescription")}</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <Label>{t("dinners")}</Label>
-            <Counter value={dinners} onChange={setDinners} />
-          </div>
-          <div className="flex items-center justify-between">
-            <Label>{t("lunches")}</Label>
-            <Counter value={lunches} onChange={setLunches} />
-          </div>
-          <div className="flex items-center justify-between">
-            <Label>{t("servingsPerMeal")}</Label>
-            <Counter value={servings} onChange={setServings} max={12} />
-          </div>
-          <div className="space-y-2">
-            <Label>{tCommon("difficulty")}</Label>
-            <Select value={difficulty} onValueChange={(v) => setDifficulty(v as typeof difficulty)} disabled={busy}>
-              <SelectTrigger>
-                <SelectValue placeholder={t("anyDifficulty")} />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="">{t("anyDifficulty")}</SelectItem>
-                <SelectItem value="easy">{tRecipe("difficulty.easy")}</SelectItem>
-                <SelectItem value="medium">{tRecipe("difficulty.medium")}</SelectItem>
-                <SelectItem value="hard">{tRecipe("difficulty.hard")}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="batch-dietary">{t("dietaryPrefs")}</Label>
-            <Input
-              id="batch-dietary"
-              value={dietaryPrefs}
-              onChange={(e) => setDietaryPrefs(e.target.value)}
-              placeholder={t("dietaryPrefsPlaceholder")}
-              disabled={busy}
-            />
-          </div>
-        </div>
+        <BatchCookFields state={fields} onChange={setFields} disabled={busy} />
 
-        <FakeProgressBar active={busy} durationMs={20000} label={busy ? t("generating") : undefined} />
+        <div className="min-h-[26px]">
+          <FakeProgressBar active={busy} durationMs={20000} label={busy ? t("generating") : undefined} />
+        </div>
 
         <div className="flex gap-2 justify-end pt-1">
           <Button variant="ghost" onClick={handleClose} disabled={busy}>