arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: locale-based generation, describe field for batch cooking; fix bulk-bar width and sourceUrl not saving

Browse Source 
- AI recipe generation always used the app's own locale rather than a
  separate language picker — removed the picker, generation and the
  saved recipe's language now both follow useLocale() directly.
- Bulk-select action bar had an ungated max-w-md that capped it at 448px
  even past the sm: breakpoint where sm:w-auto was supposed to let it
  grow to content — added sm:max-w-none so desktop never scrolls.
- Batch-cooking generation had no free-text "describe" field like the
  standard recipe generator does — added one (BatchCookFields, both the
  standalone dialog and the AI dialog's batch tab), threaded through the
  API route and generateBatchCook's prompt as additional guidance.
- Recipes imported from a URL never actually got their sourceUrl
  persisted — CreateRecipeSchema didn't declare the field, so Zod
  silently stripped it before it ever reached the insert. The detail
  page's "Source: <hostname>" link already existed but was dead code
  for every real import until now.

Verified all 4 live: generate dialog has no language selector, batch
tab has a working describe textarea, bulk-select bar renders at full
content width with zero horizontal overflow on desktop, and a recipe
created with sourceUrl now round-trips and renders its source link.
This commit is contained in:
Arnaud
2026-07-12 15:06:48 +02:00
parent 5b8c50dd1e
commit 13128df19f
9 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/recipe/ai-generate-dialog.tsx
+18 -44
View File
@@ -22,18 +22,6 @@ 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" },
{ code: "fr", label: "French" },
{ code: "es", label: "Spanish" },
{ code: "de", label: "German" },
{ code: "it", label: "Italian" },
{ code: "pt", label: "Portuguese" },
{ code: "ja", label: "Japanese" },
{ code: "zh", label: "Chinese" },
{ code: "ar", label: "Arabic" },
];
const SURPRISE_PROMPTS = [
"A cozy one-pot dish with whatever is in my pantry on a rainy evening",
"A vibrant street food recipe from Southeast Asia",
@@ -83,7 +71,6 @@ export function AiGenerateDialog({
// describe tab
const [prompt, setPrompt] = useState("");
const [language, setLanguage] = useState(locale);
const [difficulty, setDifficulty] = useState<"" | "easy" | "medium" | "hard">("");
// photo tab
@@ -99,6 +86,7 @@ export function AiGenerateDialog({
servings: 4,
difficulty: "",
dietaryPrefs: "",
description: "",
});
const [busy, setBusy] = useState(false);
@@ -110,7 +98,7 @@ export function AiGenerateDialog({
setPrompt("");
setPhotoPreview(null);
setPhotoBase64(null);
setBatchFields({ dinners: 4, lunches: 0, servings: 4, difficulty: "", dietaryPrefs: "" });
setBatchFields({ dinners: 4, lunches: 0, servings: 4, difficulty: "", dietaryPrefs: "", description: "" });
setTab("describe");
}, 200);
}
@@ -137,7 +125,7 @@ export function AiGenerateDialog({
const res = await fetch("/api/v1/ai/generate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt: prompt.trim(), language, difficulty: difficulty || undefined }),
body: JSON.stringify({ prompt: prompt.trim(), language: locale, difficulty: difficulty || undefined }),
});
if (!res.ok) {
const err = await res.json() as { error?: string };
@@ -148,7 +136,7 @@ export function AiGenerateDialog({
const saveRes = await fetch("/api/v1/recipes", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...generated, visibility: "private", aiGenerated: true, language }),
body: JSON.stringify({ ...generated, visibility: "private", aiGenerated: true, language: locale }),
});
if (!saveRes.ok) { toast.error(t("saveError")); return; }
const saved = await saveRes.json() as { id: string };
@@ -196,6 +184,7 @@ export function AiGenerateDialog({
servings: batchFields.servings,
dietaryPrefs: batchFields.dietaryPrefs.trim() || undefined,
difficulty: batchFields.difficulty || undefined,
description: batchFields.description.trim() || undefined,
}),
});
if (!res.ok) {
@@ -280,34 +269,19 @@ export function AiGenerateDialog({
disabled={busy}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>{t("language")}</Label>
<Select value={language} onValueChange={(v) => v && setLanguage(v)} disabled={busy}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{LANGUAGES.map((l) => (
<SelectItem key={l.code} value={l.code}>{l.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>{t("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>{t("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>
)}