feat: add batch-cooking sessions (single "mega recipe" with dish sections)

New AI-generated batch-cooking flow: pick N dinners/lunches + servings,
get one unified recipe covering a full prep session — merged shopping
list, steps tagged per-dish (a step can advance several dishes at once,
e.g. a shared oven bake), and per-dish storage (fridge/freezer) + exact
day-of reheat/finishing instructions.

Schema: recipes.isBatchCook, recipeSteps.appliesTo (dish names), new
recipeBatchDishes table. Batch recipes are excluded from the normal
/recipes list and live under their own /batch-cooking section.

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

apps/web/components/recipe/batch-cook-dishes.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Snowflake, Refrigerator, ChefHat } from "lucide-react";
+
+type Dish = {
+  id: string;
+  name: string;
+  description: string | null;
+  fridgeDays: number;
+  freezerFriendly: boolean;
+  freezerNote: string | null;
+  dayOfInstructions: string;
+};
+
+export function BatchCookDishes({ dishes }: { dishes: Dish[] }) {
+  const t = useTranslations("recipe");
+
+  return (
+    <div className="space-y-4">
+      <h2 className="text-xl font-semibold">{t("batchCookDishesTitle")}</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {dishes.map((dish) => (
+          <div key={dish.id} className="rounded-xl border p-4 space-y-3">
+            <div>
+              <h3 className="font-semibold">{dish.name}</h3>
+              {dish.description && <p className="text-sm text-muted-foreground mt-0.5">{dish.description}</p>}
+            </div>
+
+            <div className="flex flex-wrap gap-2 text-xs">
+              <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2.5 py-1">
+                <Refrigerator className="h-3.5 w-3.5" />
+                {t("batchCookFridgeDays", { days: dish.fridgeDays })}
+              </span>
+              {dish.freezerFriendly && (
+                <span className="inline-flex items-center gap-1 rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 px-2.5 py-1">
+                  <Snowflake className="h-3.5 w-3.5" />
+                  {t("batchCookFreezerFriendly")}
+                </span>
+              )}
+            </div>
+            {dish.freezerNote && (
+              <p className="text-xs text-muted-foreground">{dish.freezerNote}</p>
+            )}
+
+            <div className="flex gap-2 rounded-lg bg-muted/50 p-3">
+              <ChefHat className="h-4 w-4 text-primary shrink-0 mt-0.5" />
+              <div>
+                <p className="text-xs font-medium">{t("batchCookDayOf")}</p>
+                <p className="text-sm text-muted-foreground mt-0.5">{dish.dayOfInstructions}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

apps/web/components/recipe/batch-cook-generate-dialog.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { ChefHat, Loader2, Minus, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  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>
+  );
+}
+
+export function BatchCookGenerateDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  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 [busy, setBusy] = useState(false);
+
+  function handleClose() {
+    if (busy) return;
+    onOpenChange(false);
+  }
+
+  async function handleGenerate() {
+    setBusy(true);
+    try {
+      const res = await fetch("/api/v1/ai/batch-cook/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          dinners,
+          lunches,
+          servings,
+          dietaryPrefs: dietaryPrefs.trim() || undefined,
+          difficulty: difficulty || undefined,
+        }),
+      });
+      if (!res.ok) {
+        const err = await res.json() as { error?: string };
+        toast.error(err.error ?? t("generateFailed"));
+        return;
+      }
+      const { id } = await res.json() as { id: string };
+      toast.success(t("generateSuccess"));
+      onOpenChange(false);
+      router.push(`/recipes/${id}`);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const canSubmit = dinners + lunches > 0;
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <ChefHat className="h-5 w-5 text-primary" />
+            {t("wizardTitle")}
+          </DialogTitle>
+          <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>
+
+        <FakeProgressBar active={busy} durationMs={20000} label={busy ? t("generating") : undefined} />
+
+        <div className="flex gap-2 justify-end pt-1">
+          <Button variant="ghost" onClick={handleClose} disabled={busy}>
+            {tCommon("cancel")}
+          </Button>
+          <Button onClick={() => { void handleGenerate(); }} disabled={!canSubmit || busy}>
+            {busy ? (
+              <><Loader2 className="h-4 w-4 animate-spin" />{t("generating")}</>
+            ) : (
+              <><ChefHat className="h-4 w-4" />{t("generate")}</>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

apps/web/components/recipe/batch-cook-steps.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+type Step = {
+  id: string;
+  instruction: string;
+  appliesTo: string[];
+};
+
+function sectionLabel(appliesTo: string[], prepLabel: string): string {
+  return appliesTo.length === 0 ? prepLabel : appliesTo.join(" + ");
+}
+
+export function BatchCookSteps({ steps }: { steps: Step[] }) {
+  const t = useTranslations("recipe");
+  const prepLabel = t("batchCookPrep");
+
+  const groups: Array<{ label: string; steps: Step[] }> = [];
+  for (const step of steps) {
+    const label = sectionLabel(step.appliesTo, prepLabel);
+    const last = groups[groups.length - 1];
+    if (last && last.label === label) last.steps.push(step);
+    else groups.push({ label, steps: [step] });
+  }
+
+  let stepNumber = 0;
+
+  return (
+    <div className="space-y-8">
+      {groups.map((group, gi) => (
+        <div key={gi} className="space-y-4">
+          <h3 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+            {group.label}
+          </h3>
+          <ol className="space-y-6">
+            {group.steps.map((step) => {
+              stepNumber += 1;
+              return (
+                <li key={step.id} className="flex gap-4">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground text-sm font-bold">
+                    {stepNumber}
+                  </div>
+                  <p className="flex-1 leading-relaxed pt-1">{step.instruction}</p>
+                </li>
+              );
+            })}
+          </ol>
+        </div>
+      ))}
+    </div>
+  );
+}

apps/web/components/recipe/batch-cooking-page-content.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useTranslations, useLocale } from "next-intl";
+import { ChefHat, PlusCircle, Utensils } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { BatchCookGenerateDialog } from "@/components/recipe/batch-cook-generate-dialog";
+
+type Session = {
+  id: string;
+  title: string;
+  description: string | null;
+  baseServings: number;
+  createdAt: string;
+  dishCount: number;
+};
+
+export function BatchCookingPageContent({ sessions }: { sessions: Session[] }) {
+  const t = useTranslations("batchCooking");
+  const locale = useLocale();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
+        </div>
+        <Button size="sm" onClick={() => setOpen(true)}>
+          <PlusCircle className="h-4 w-4" />
+          {t("newSession")}
+        </Button>
+      </div>
+
+      {sessions.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
+          <ChefHat className="h-12 w-12 text-muted-foreground/40" />
+          <p className="text-muted-foreground text-sm">{t("empty")}</p>
+          <Button size="sm" onClick={() => setOpen(true)}>
+            <PlusCircle className="h-4 w-4" />
+            {t("newSession")}
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {sessions.map((s) => (
+            <Link
+              key={s.id}
+              href={`/recipes/${s.id}`}
+              className="group rounded-xl border p-4 hover:shadow-sm transition-shadow space-y-2"
+            >
+              <h2 className="font-semibold group-hover:text-primary transition-colors line-clamp-1">{s.title}</h2>
+              {s.description && <p className="text-sm text-muted-foreground line-clamp-2">{s.description}</p>}
+              <div className="flex items-center gap-3 text-xs text-muted-foreground pt-1">
+                <span className="flex items-center gap-1">
+                  <Utensils className="h-3.5 w-3.5" />
+                  {t("dishCount", { count: s.dishCount })}
+                </span>
+                <span>{new Date(s.createdAt).toLocaleDateString(locale)}</span>
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+
+      <BatchCookGenerateDialog open={open} onOpenChange={setOpen} />
+    </div>
+  );
+}

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

@@ -3,7 +3,7 @@
 import { useState, useTransition } from "react";
 import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
-import { PlusCircle, Sparkles, Link2, Search, X, SlidersHorizontal, ArrowUpDown } from "lucide-react";
+import { PlusCircle, Sparkles, Link2, Search, X, SlidersHorizontal, ArrowUpDown, ChefHat } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -122,6 +122,10 @@ export function RecipesHeader({
             </p>
           </div>
           <div className="flex flex-wrap items-center gap-2">
+            <Link href="/batch-cooking" className={cn(buttonVariants({ variant: "outline", size: "sm" }), "gap-1.5")}>
+              <ChefHat className="h-4 w-4" />
+              {t("batchCooking")}
+            </Link>
             <Button variant="ghost" size="sm" onClick={() => setUrlOpen(true)}>
               <Link2 className="h-4 w-4" />
               {t("importUrl")}