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
@@ -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,
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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}>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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")}>
|
||||
{recipe.title}
|
||||
</h3>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
|
||||
{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>
|
||||
|
||||
@@ -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")}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user