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>
This commit is contained in:
Arnaud
2026-07-12 09:31:04 +02:00
parent f29fa531a1
commit 646c97128d
10 changed files with 238 additions and 200 deletions
+26 -7
View File
@@ -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")}