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/app/(app)/batch-cooking/page.tsx

@@ -1,31 +0,0 @@
-import type { Metadata } from "next";
-import { headers } from "next/headers";
-import { auth } from "@/lib/auth/server";
-import { db, recipes, eq, and, desc } from "@epicure/db";
-import { BatchCookingPageContent } from "@/components/recipe/batch-cooking-page-content";
-
-export const metadata: Metadata = {};
-
-export default async function BatchCookingPage() {
-  const session = await auth.api.getSession({ headers: await headers() });
-  if (!session) return null;
-
-  const sessions = await db.query.recipes.findMany({
-    where: and(eq(recipes.authorId, session.user.id), eq(recipes.isBatchCook, true)),
-    orderBy: desc(recipes.createdAt),
-    with: { batchDishes: true },
-  });
-
-  return (
-    <BatchCookingPageContent
-      sessions={sessions.map((r) => ({
-        id: r.id,
-        title: r.title,
-        description: r.description,
-        baseServings: r.baseServings,
-        createdAt: r.createdAt.toISOString(),
-        dishCount: r.batchDishes.length,
-      }))}
-    />
-  );
-}

apps/web/app/(app)/recipes/page.tsx

@@ -20,6 +20,7 @@ type SearchParams = Promise<{
   difficulty?: string;
   tag?: string;
   page?: string;
+  batchCook?: string;
 }>;
 
 const SORT_MAP = {
@@ -38,7 +39,7 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
   if (!session) return null;
   const m = getMessages((session.user as { locale?: string }).locale);
 
-  const { q, sort, visibility, difficulty, tag, page: pageParam } = await searchParams;
+  const { q, sort, visibility, difficulty, tag, page: pageParam, batchCook } = await searchParams;
   const query = (q ?? "").trim().slice(0, 200);
   const sortKey: SortKey = (sort && sort in SORT_MAP ? sort : "updated_desc") as SortKey;
   const tagFilter = tag?.trim().slice(0, 50) || undefined;
@@ -51,10 +52,11 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
   const difficultyFilter = difficulty && ["easy", "medium", "hard"].includes(difficulty)
     ? (difficulty as "easy" | "medium" | "hard")
     : undefined;
+  const batchCookFilter = batchCook === "1" || batchCook === "0" ? batchCook : undefined;
 
   const where = and(
     eq(recipes.authorId, session.user.id),
-    eq(recipes.isBatchCook, false),
+    batchCookFilter ? eq(recipes.isBatchCook, batchCookFilter === "1") : undefined,
     query
       ? or(ilike(recipes.title, `%${query}%`), ilike(recipes.description, `%${query}%`))
       : undefined,
@@ -94,6 +96,7 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
     if (visibilityFilter) params.set("visibility", visibilityFilter);
     if (difficultyFilter) params.set("difficulty", difficultyFilter);
     if (tagFilter) params.set("tag", tagFilter);
+    if (batchCookFilter) params.set("batchCook", batchCookFilter);
     if (p > 1) params.set("page", String(p));
     const qs = params.toString();
     return qs ? `/recipes?${qs}` : "/recipes";
@@ -114,9 +117,10 @@ export default async function RecipesPage({ searchParams }: { searchParams: Sear
         initialVisibility={visibilityFilter ?? ""}
         initialDifficulty={difficultyFilter ?? ""}
         initialTag={tagFilter ?? ""}
+        initialBatchCook={batchCookFilter ?? ""}
       />
       <RecipesEmptyState query={query} count={total} />
-      <RecipesGrid key={`${query}-${sortKey}-${visibilityFilter}-${difficultyFilter}-${tagFilter}-${page}`} recipes={recipesWithFavorites} />
+      <RecipesGrid key={`${query}-${sortKey}-${visibilityFilter}-${difficultyFilter}-${tagFilter}-${batchCookFilter}-${page}`} recipes={recipesWithFavorites} />
 
       {totalPages > 1 && (
         <div className="flex items-center justify-center gap-2 pt-2">

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
+        {/* Batch cooking tab */}
-          active={busy}
+        {tab === "batch" && (
-          durationMs={tab === "photo" ? 12000 : 10000}
+          <BatchCookFields state={batchFields} onChange={setBatchFields} disabled={busy} />
-          label={busy ? (tab === "photo" ? t("analyzePhoto") : t("generating")) : undefined}
+        )}
-        />
+
+        <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>

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

@@ -0,0 +1,99 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Minus, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+function Counter({
+  value,
+  onChange,
+  max = 6,
+  disabled,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  max?: number;
+  disabled?: boolean;
+}) {
+  return (
+    <div className="flex items-center gap-2">
+      <Button type="button" variant="outline" size="icon" disabled={disabled} 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" disabled={disabled} onClick={() => onChange(Math.min(max, value + 1))}>
+        <Plus className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}
+
+export type BatchCookFieldsState = {
+  dinners: number;
+  lunches: number;
+  servings: number;
+  difficulty: "" | "easy" | "medium" | "hard";
+  dietaryPrefs: string;
+};
+
+export function BatchCookFields({
+  state,
+  onChange,
+  disabled,
+}: {
+  state: BatchCookFieldsState;
+  onChange: (state: BatchCookFieldsState) => void;
+  disabled?: boolean;
+}) {
+  const t = useTranslations("batchCooking");
+  const tCommon = useTranslations("common");
+  const tRecipe = useTranslations("recipe");
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <Label>{t("dinners")}</Label>
+        <Counter value={state.dinners} onChange={(v) => onChange({ ...state, dinners: v })} disabled={disabled} />
+      </div>
+      <div className="flex items-center justify-between">
+        <Label>{t("lunches")}</Label>
+        <Counter value={state.lunches} onChange={(v) => onChange({ ...state, lunches: v })} disabled={disabled} />
+      </div>
+      <div className="flex items-center justify-between">
+        <Label>{t("servingsPerMeal")}</Label>
+        <Counter value={state.servings} onChange={(v) => onChange({ ...state, servings: v })} max={12} disabled={disabled} />
+      </div>
+      <div className="space-y-2">
+        <Label>{tCommon("difficulty")}</Label>
+        <Select
+          value={state.difficulty}
+          onValueChange={(v) => onChange({ ...state, difficulty: v as BatchCookFieldsState["difficulty"] })}
+          disabled={disabled}
+        >
+          <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={state.dietaryPrefs}
+          onChange={(e) => onChange({ ...state, dietaryPrefs: e.target.value })}
+          placeholder={t("dietaryPrefsPlaceholder")}
+          disabled={disabled}
+        />
+      </div>
+    </div>
+  );
+}

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";
-
+import { BatchCookFields, type BatchCookFieldsState } from "./batch-cook-fields";
-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,
@@ -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 [fields, setFields] = useState<BatchCookFieldsState>({
-  const [lunches, setLunches] = useState(0);
+    dinners: 4,
-  const [servings, setServings] = useState(4);
+    lunches: 0,
-  const [dietaryPrefs, setDietaryPrefs] = useState("");
+    servings: 4,
-  const [difficulty, setDifficulty] = useState<"" | "easy" | "medium" | "hard">("");
+    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,
+          dinners: fields.dinners,
-          lunches,
+          lunches: fields.lunches,
-          servings,
+          servings: fields.servings,
-          dietaryPrefs: dietaryPrefs.trim() || undefined,
+          dietaryPrefs: fields.dietaryPrefs.trim() || undefined,
-          difficulty: difficulty || 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">
+        <BatchCookFields state={fields} onChange={setFields} disabled={busy} />
-          <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="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}>

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

@@ -1,71 +0,0 @@
-"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-grid.tsx

@@ -3,7 +3,7 @@
 import { useState, useCallback, useEffect } from "react";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { Trash2, Globe, Lock, Link2, X, Check, ListChecks, LayoutGrid, List, Rows3, FolderPlus } from "lucide-react";
+import { Trash2, Globe, Lock, Link2, X, Check, ListChecks, LayoutGrid, List, Rows3, FolderPlus, ChefHat } from "lucide-react";
 import { AddToCollectionDialog } from "@/components/recipe/add-to-collection-dialog";
 import { Button, buttonVariants } from "@/components/ui/button";
 import {
@@ -45,6 +45,7 @@ type Recipe = {
   updatedAt: Date;
   photos?: Array<{ storageKey: string; isCover: boolean }>;
   isFavorited?: boolean;
+  isBatchCook?: boolean;
 };
 
 /** Stops the click from bubbling to the card's own Link/select handler. */
@@ -114,9 +115,12 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
     >
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="aspect-video" />
       <div className="flex flex-col flex-1 p-3 gap-1">
-        <h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
+        <div className="flex items-center gap-1.5">
-          {recipe.title}
+          <h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
-        </h3>
+            {recipe.title}
+          </h3>
+          {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
+        </div>
         {recipe.description && (
           <p className="text-xs text-muted-foreground line-clamp-2 leading-relaxed">{recipe.description}</p>
         )}
@@ -171,7 +175,10 @@ function ListRow({ recipe, selected, selectMode }: { recipe: Recipe; selected: b
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="w-28 h-20 rounded-lg" />
       <div className="flex-1 min-w-0 flex flex-col gap-1">
         <div className="flex items-start justify-between gap-2">
-          <h3 className={cn("font-semibold leading-tight line-clamp-1 text-sm", !selectMode && "group-hover:text-primary")}>{recipe.title}</h3>
+          <h3 className={cn("font-semibold leading-tight line-clamp-1 text-sm flex items-center gap-1.5", !selectMode && "group-hover:text-primary")}>
+            {recipe.title}
+            {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
+          </h3>
           <div className="flex items-center gap-1 shrink-0">
             {!selectMode && (
               <StopPropagation>
@@ -211,7 +218,10 @@ function CompactRow({ recipe, selected, selectMode }: { recipe: Recipe; selected
       )}
     >
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="w-10 h-10 rounded-md shrink-0" />
-      <h3 className={cn("font-medium text-sm truncate flex-1 min-w-0", !selectMode && "group-hover:text-primary")}>{recipe.title}</h3>
+      <h3 className={cn("font-medium text-sm truncate flex-1 min-w-0 flex items-center gap-1.5", !selectMode && "group-hover:text-primary")}>
+        <span className="truncate">{recipe.title}</span>
+        {recipe.isBatchCook && <ChefHat className="h-3.5 w-3.5 text-primary shrink-0" />}
+      </h3>
       <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Users className="h-3 w-3" />{recipe.baseServings}</span>
       {totalMins > 0 && (
         <span className="hidden sm:flex items-center gap-1 text-xs text-muted-foreground shrink-0"><Clock className="h-3 w-3" />{t("total", { mins: totalMins })}</span>

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, ChefHat } from "lucide-react";
+import { PlusCircle, Sparkles, Link2, Search, X, SlidersHorizontal, ArrowUpDown } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Button, buttonVariants } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -59,6 +59,12 @@ const DIFFICULTY_KEYS: Record<string, string> = {
   hard: "hard",
 };
 
+const BATCH_COOK_KEYS: Record<string, string> = {
+  "": "all",
+  "1": "batchCookOnly",
+  "0": "batchCookExclude",
+};
+
 export function RecipesHeader({
   count,
   initialQuery = "",
@@ -66,6 +72,7 @@ export function RecipesHeader({
   initialVisibility = "",
   initialDifficulty = "",
   initialTag = "",
+  initialBatchCook = "",
 }: {
   count: number;
   initialQuery?: string;
@@ -73,6 +80,7 @@ export function RecipesHeader({
   initialVisibility?: string;
   initialDifficulty?: string;
   initialTag?: string;
+  initialBatchCook?: string;
 }) {
   const router = useRouter();
   const pathname = usePathname();
@@ -91,6 +99,7 @@ export function RecipesHeader({
       visibility: initialVisibility,
       difficulty: initialDifficulty,
       tag: initialTag,
+      batchCook: initialBatchCook,
       ...overrides,
     };
     if (current.q?.trim()) params.set("q", current.q.trim());
@@ -98,6 +107,7 @@ export function RecipesHeader({
     if (current.visibility) params.set("visibility", current.visibility);
     if (current.difficulty) params.set("difficulty", current.difficulty);
     if (current.tag?.trim()) params.set("tag", current.tag.trim());
+    if (current.batchCook) params.set("batchCook", current.batchCook);
     startTransition(() => router.push(`${pathname}?${params.toString()}`));
   }
 
@@ -106,7 +116,7 @@ export function RecipesHeader({
     pushParams({ q: value });
   }
 
-  const activeFilterCount = [initialVisibility, initialDifficulty, initialTag].filter(Boolean).length;
+  const activeFilterCount = [initialVisibility, initialDifficulty, initialTag, initialBatchCook].filter(Boolean).length;
   const sortChanged = initialSort !== "updated_desc";
 
   return (
@@ -126,10 +136,6 @@ export function RecipesHeader({
               <Sparkles className="h-4 w-4" />
               {t("generate")}
             </Button>
-            <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="outline" size="sm" className="gap-1.5" onClick={() => setUrlOpen(true)}>
               <Link2 className="h-4 w-4" />
               {t("importUrl")}
@@ -241,12 +247,25 @@ export function RecipesHeader({
                   />
                 </div>
               </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuLabel>{t("batchCookLabel")}</DropdownMenuLabel>
+                {Object.entries(BATCH_COOK_KEYS).map(([value, key]) => (
+                  <DropdownMenuItem
+                    key={value}
+                    onClick={() => pushParams({ batchCook: value })}
+                    className={cn(initialBatchCook === value && "font-medium text-primary")}
+                  >
+                    {t(key)}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuGroup>
               {activeFilterCount > 0 && (
                 <>
                   <DropdownMenuSeparator />
                   <DropdownMenuGroup>
                     <DropdownMenuItem
-                      onClick={() => pushParams({ visibility: "", difficulty: "", tag: "" })}
+                      onClick={() => pushParams({ visibility: "", difficulty: "", tag: "", batchCook: "" })}
                       className="text-muted-foreground"
                     >
                       <X className="h-3 w-3 mr-1.5" /> {t("clearFilters")}

apps/web/messages/en.json

@@ -592,6 +592,9 @@
     "visibilityLabel": "Visibility",
     "difficultyLabel": "Difficulty",
     "tagLabel": "Tag",
+    "batchCookLabel": "Batch cooking",
+    "batchCookOnly": "Batch cooking only",
+    "batchCookExclude": "Hide batch cooking",
     "clearFilters": "Clear filters",
     "tabMine": "My Recipes",
     "tabFavorites": "Favorites",

apps/web/messages/fr.json

@@ -583,6 +583,9 @@
     "visibilityLabel": "Visibilité",
     "difficultyLabel": "Difficulté",
     "tagLabel": "Tag",
+    "batchCookLabel": "Batch cooking",
+    "batchCookOnly": "Batch cooking uniquement",
+    "batchCookExclude": "Masquer le batch cooking",
     "clearFilters": "Effacer les filtres",
     "tabMine": "Mes recettes",
     "tabFavorites": "Favoris",