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

fix: mobile layout fixes, i18n coverage, and recipe share link

Browse Source 
Mobile:
- Recipes search bar full-width on mobile instead of capped narrow
- Cook mode ingredients panel stacks above the step instead of
  squeezing it into a narrow column
- Version history Compare/Restore buttons wrap onto their own row
- Recipe edit ingredient fields wrap instead of forcing horizontal
  scroll on narrow viewports

i18n: translates remaining hardcoded strings across recipes
filter/sort, adapt-recipe and AI variations dialogs, the full
settings section (sidebar + 6 sub-pages + BYOK/model-prefs/
API-keys/webhooks managers), explore tab, collections (new/fork/
share dialogs), meal planning (planner, AI generation phases, new
shopping list, shared-plan view), photo import, recipe bulk-select
toolbar, and recipe action-button tooltips. Also fixes the recipes
page subtitle, which wasn't just unworded but missing its {count}
interpolation entirely — it always rendered as the bare word
"results" regardless of how many recipes existed.

Feature: adds a ShareRecipeButton that copies the public /r/{id}
link to the clipboard, with a notice when the recipe isn't Public
yet.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-02 15:13:51 +02:00
parent b07bada291
commit eb424d8c04
44 changed files with 932 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/meal-plan/meal-planner.tsx
+16 -15
View File
@@ -61,7 +61,7 @@ function AddEntryModal({
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ day, mealType, recipeId: recipe.id, servings: parseInt(servings) || 2 }),
});
if (!res.ok) { toast.error("Failed to add"); return; }
if (!res.ok) { toast.error(t("addFailed")); return; }
const { id } = await res.json() as { id: string };
onAdded({ id, day, mealType, servings: parseInt(servings) || 2, recipe, note: null });
onClose();
@@ -133,15 +133,16 @@ export function MealPlanner({
const [pantryMode, setPantryMode] = useState(false);
const [aiDifficulty, setAiDifficulty] = useState<"" | "easy" | "medium" | "hard">("");
const t = useTranslations("mealPlan");
const tRecipe = useTranslations("recipe");
async function generateWithAi() {
setAiGenerating(true);
setAiPhase("Analyzing your preferences…");
setAiPhase(t("aiPhaseAnalyzing"));
const phases = [
[1500, "Planning breakfast, lunch & dinner…"],
[5000, "Selecting recipes for each day…"],
[10000, "Balancing nutrition across the week…"],
[16000, "Finalizing your meal plan…"],
[1500, t("aiPhasePlanning")],
[5000, t("aiPhaseSelecting")],
[10000, t("aiPhaseBalancing")],
[16000, t("aiPhaseFinalizing")],
] as const;
const timers = phases.map(([delay, label]) =>
setTimeout(() => setAiPhase(label), delay)
@@ -161,7 +162,7 @@ export function MealPlanner({
});
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Generation failed");
throw new Error(data.error ?? t("generationFailed"));
}
const data = await res.json() as {
entries: Array<{ id: string; day: string; mealType: string; recipeId: string; recipeTitle: string }>;
@@ -187,7 +188,7 @@ export function MealPlanner({
setShowAiModal(false);
toast.success(t("aiGenerated"));
} catch (err) {
toast.error(err instanceof Error ? err.message : "Generation failed");
toast.error(err instanceof Error ? err.message : t("generationFailed"));
} finally {
timers.forEach(clearTimeout);
setAiGenerating(false);
@@ -227,7 +228,7 @@ export function MealPlanner({
if (res.ok) {
setEntries((prev) => prev.filter((e) => e.id !== entry.id));
} else {
toast.error("Failed to remove");
toast.error(t("removeFailed"));
}
}
@@ -345,16 +346,16 @@ export function MealPlanner({
/>
</div>
<div className="space-y-1.5">
<label className="text-sm font-medium">Difficulty</label>
<label className="text-sm font-medium">{t("difficulty")}</label>
<Select value={aiDifficulty} onValueChange={(v) => setAiDifficulty(v as typeof aiDifficulty)} disabled={aiGenerating}>
<SelectTrigger>
<SelectValue placeholder="Any" />
<SelectValue placeholder={t("anyDifficulty")} />
</SelectTrigger>
<SelectContent>
<SelectItem value="">Any</SelectItem>
<SelectItem value="easy">Easy</SelectItem>
<SelectItem value="medium">Medium</SelectItem>
<SelectItem value="hard">Hard</SelectItem>
<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>
apps/web/components/meal-plan/new-shopping-list-button.tsx
+13 -10
View File
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { Plus, ShoppingCart } from "lucide-react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
@@ -10,6 +11,8 @@ import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export function NewShoppingListButton() {
const t = useTranslations("mealPlan");
const tCommon = useTranslations("common");
const router = useRouter();
const [open, setOpen] = useState(false);
const [name, setName] = useState("");
@@ -28,9 +31,9 @@ export function NewShoppingListButton() {
fromMealPlanWeek: weekStart || undefined,
}),
});
if (!res.ok) { toast.error("Failed to create"); return; }
if (!res.ok) { toast.error(t("listCreateFailed")); return; }
const { id } = await res.json() as { id: string };
toast.success("List created");
toast.success(t("listCreated"));
setOpen(false);
setName(""); setWeekStart("");
router.push(`/shopping-lists/${id}`);
@@ -42,24 +45,24 @@ export function NewShoppingListButton() {
return (
<>
<Button size="sm" onClick={() => setOpen(true)}>
<Plus className="h-4 w-4" /> New list
<Plus className="h-4 w-4" /> {t("newList")}
</Button>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent className="max-w-md">
<DialogHeader><DialogTitle>New shopping list</DialogTitle></DialogHeader>
<DialogHeader><DialogTitle>{t("newListTitle")}</DialogTitle></DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label>Name</Label>
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder="Weekly groceries" />
<Label>{t("listNameLabel")}</Label>
<Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t("listNamePlaceholder")} />
</div>
<div className="space-y-2">
<Label>Generate from meal plan week (optional)</Label>
<Label>{t("generateFromWeek")}</Label>
<Input type="date" value={weekStart} onChange={(e) => setWeekStart(e.target.value)} />
<p className="text-xs text-muted-foreground">Picks Monday of the selected week</p>
<p className="text-xs text-muted-foreground">{t("generateFromWeekHint")}</p>
</div>
<div className="flex gap-2 justify-end">
<Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
<Button onClick={create} disabled={!name.trim() || saving}>{saving ? "Creating…" : "Create"}</Button>
<Button variant="outline" onClick={() => setOpen(false)}>{tCommon("cancel")}</Button>
<Button onClick={create} disabled={!name.trim() || saving}>{saving ? t("listCreating") : t("listCreate")}</Button>
</div>
</div>
</DialogContent>
apps/web/components/meal-plan/share-meal-plan-button.tsx
+24 -20
View File
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { UserPlus, X } from "lucide-react";
import { toast } from "sonner";
import {
@@ -40,6 +41,9 @@ interface Props {
}
export function ShareMealPlanButton({ weekStart }: Props) {
const t = useTranslations("mealPlan");
const ts = useTranslations("shareDialog");
const tCommon = useTranslations("common");
const [open, setOpen] = useState(false);
const [email, setEmail] = useState("");
const [role, setRole] = useState<Role>("viewer");
@@ -55,7 +59,7 @@ export function ShareMealPlanButton({ weekStart }: Props) {
const data = await res.json() as Member[];
setMembers(data);
} catch {
toast.error("Could not load members");
toast.error(ts("loadMembersFailed"));
} finally {
setLoading(false);
}
@@ -73,7 +77,7 @@ export function ShareMealPlanButton({ weekStart }: Props) {
async function handleInvite() {
if (!email.trim()) {
toast.error("Enter an email address");
toast.error(ts("enterEmail"));
return;
}
setInviting(true);
@@ -83,14 +87,14 @@ export function ShareMealPlanButton({ weekStart }: Props) {
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: email.trim(), role }),
});
if (res.status === 409) { toast.error("Already a member"); return; }
if (res.status === 404) { toast.error("User not found"); return; }
if (!res.ok) { toast.error("Could not invite user"); return; }
toast.success("Invitation sent");
if (res.status === 409) { toast.error(ts("alreadyMember")); return; }
if (res.status === 404) { toast.error(ts("userNotFound")); return; }
if (!res.ok) { toast.error(ts("inviteFailed")); return; }
toast.success(ts("invitationSent"));
setEmail("");
await fetchMembers();
} catch {
toast.error("Could not invite user");
toast.error(ts("inviteFailed"));
} finally {
setInviting(false);
}
@@ -102,11 +106,11 @@ export function ShareMealPlanButton({ weekStart }: Props) {
`/api/v1/meal-plans/${weekStart}/members?memberId=${memberId}`,
{ method: "DELETE" },
);
if (!res.ok) { toast.error("Could not remove member"); return; }
if (!res.ok) { toast.error(ts("removeMemberFailed")); return; }
setMembers((prev) => prev.filter((m) => m.id !== memberId));
toast.success("Member removed");
toast.success(ts("memberRemoved"));
} catch {
toast.error("Could not remove member");
toast.error(ts("removeMemberFailed"));
}
}
@@ -114,22 +118,22 @@ export function ShareMealPlanButton({ weekStart }: Props) {
<>
<Button variant="outline" size="sm" onClick={() => handleOpenChange(true)}>
<UserPlus className="h-4 w-4" />
Share
{tCommon("share")}
</Button>
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Share this week&apos;s plan</DialogTitle>
<DialogTitle>{t("shareTitle")}</DialogTitle>
<DialogDescription>
Invite household members to view or edit this week&apos;s meal plan.
{t("shareDescription")}
</DialogDescription>
</DialogHeader>
<div className="flex gap-2 mt-2">
<Input
type="email"
placeholder="Email address"
placeholder={ts("emailPlaceholder")}
value={email}
onChange={(e) => setEmail(e.target.value)}
onKeyDown={(e) => { if (e.key === "Enter") void handleInvite(); }}
@@ -140,21 +144,21 @@ export function ShareMealPlanButton({ weekStart }: Props) {
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="viewer">Viewer</SelectItem>
<SelectItem value="editor">Editor</SelectItem>
<SelectItem value="viewer">{ts("viewer")}</SelectItem>
<SelectItem value="editor">{ts("editor")}</SelectItem>
</SelectContent>
</Select>
<Button onClick={() => void handleInvite()} disabled={inviting}>
Invite
{ts("invite")}
</Button>
</div>
<div className="mt-4 space-y-2">
{loading && (
<p className="text-sm text-muted-foreground">Loading members…</p>
<p className="text-sm text-muted-foreground">{ts("loadingMembers")}</p>
)}
{!loading && members.length === 0 && (
<p className="text-sm text-muted-foreground">No members yet.</p>
<p className="text-sm text-muted-foreground">{ts("noMembers")}</p>
)}
{members.map((m) => (
<div
@@ -170,7 +174,7 @@ export function ShareMealPlanButton({ weekStart }: Props) {
)}
</div>
<Badge variant={m.role === "editor" ? "default" : "secondary"}>
{m.role}
{ts(m.role)}
</Badge>
<Button
variant="ghost"
apps/web/components/meal-plan/shared-meal-plan-view.tsx
+6 -4
View File
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -33,6 +34,7 @@ export function SharedMealPlanView({
userRecipes: UserRecipe[];
canEdit: boolean;
}) {
const t = useTranslations("mealPlan");
const [entries, setEntries] = useState<Entry[]>(initialEntries);
const [addingCell, setAddingCell] = useState<string | null>(null);
@@ -46,7 +48,7 @@ export function SharedMealPlanView({
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ day, mealType, recipeId, servings: 2 }),
});
if (!res.ok) { toast.error("Could not add recipe"); return; }
if (!res.ok) { toast.error(t("addFailed")); return; }
const { id } = await res.json() as { id: string };
const recipe = userRecipes.find((r) => r.id === recipeId) ?? null;
setEntries((prev) => [
@@ -60,7 +62,7 @@ export function SharedMealPlanView({
const res = await fetch(`/api/v1/meal-plans/shared/${mealPlanId}/entries?entryId=${entry.id}`, {
method: "DELETE",
});
if (!res.ok) { toast.error("Could not remove entry"); return; }
if (!res.ok) { toast.error(t("removeFailed")); return; }
setEntries((prev) => prev.filter((e) => e.id !== entry.id));
}
@@ -97,7 +99,7 @@ export function SharedMealPlanView({
addingCell === key ? (
<Select onValueChange={(v) => void addEntry(day, mealType, v as string)}>
<SelectTrigger className="h-8 text-xs">
<SelectValue placeholder="Pick recipe" />
<SelectValue placeholder={t("pickRecipe")} />
</SelectTrigger>
<SelectContent>
{userRecipes.map((r) => (
@@ -110,7 +112,7 @@ export function SharedMealPlanView({
className="w-full h-8 rounded-lg border border-dashed text-xs text-muted-foreground hover:bg-muted/30"
onClick={() => setAddingCell(key)}
>
+ Add
{t("addEntry")}
</button>
)
) : (