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

i18n: translate meal/drink pairing, nutrition, comments, DMs, people search, URL import

Browse Source 
Full sweep of hardcoded English strings across:
- Meal pairing and drink pairing dialogs (titles, descriptions, role/
  type labels, regenerate/generate buttons, progress labels) — also
  fixed drink type labels that had French text hardcoded regardless
  of locale ("Sans alcool"/"Chaud").
- Nutrition panel — had no useTranslations at all.
- Comments: header, empty/loading state, post/reply/cancel/delete
  buttons, relative timestamps (just now/Xm ago/Xh ago/Xd ago), and
  comment-reactions' toasts + aria-labels.
- Rating stars toasts.
- Direct messages: thread, conversation list, message button, both
  /messages pages.
- People search page and component.
- URL import dialog (title, description, buttons, toasts).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Arnaud
2026-07-09 03:20:49 +02:00
parent e67145493e
commit 08ab9ac71f
16 changed files with 299 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/recipe/drink-pairing-button.tsx
+16 -16
View File
@@ -36,13 +36,13 @@ const TYPE_ICON: Record<Drink["type"], React.ElementType> = {
hot: Coffee,
};
const TYPE_LABEL: Record<Drink["type"], string> = {
wine: "Wine",
beer: "Beer",
cocktail: "Cocktail",
spirit: "Spirit",
"non-alcoholic": "Sans alcool",
hot: "Chaud",
const TYPE_LABEL_KEY: Record<Drink["type"], string> = {
wine: "drinksTypeWine",
beer: "drinksTypeBeer",
cocktail: "drinksTypeCocktail",
spirit: "drinksTypeSpirit",
"non-alcoholic": "drinksTypeNonAlcoholic",
hot: "drinksTypeHot",
};
export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
@@ -61,7 +61,7 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
body: JSON.stringify({ count: 4 }),
});
if (!res.ok) {
toast.error("Failed to suggest drinks");
toast.error(t("pairingDrinkFailed"));
return;
}
const data = await res.json() as { drinks: Drink[] };
@@ -94,22 +94,22 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Wine className="h-5 w-5 text-primary" />
Drink pairings
{t("drinksDialogTitle")}
</DialogTitle>
<DialogDescription>
AI-suggested drinks that complement this recipe.
{t("drinksDialogDescription")}
</DialogDescription>
</DialogHeader>
{loading ? (
<div className="py-6 space-y-3">
<FakeProgressBar active={loading} durationMs={8000} label="Finding perfect pairings…" />
<FakeProgressBar active={loading} durationMs={8000} label={t("pairingFindingLabel")} />
</div>
) : drinks.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-8">
<Button onClick={suggest} size="lg">
<Sparkles className="h-4 w-4" />
Suggest drinks
{t("drinksSuggestButton")}
</Button>
</div>
) : (
@@ -125,18 +125,18 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
<div className="flex-1 min-w-0 space-y-1.5">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-semibold">{drink.name}</span>
<Badge variant="outline" className="text-xs">{TYPE_LABEL[drink.type]}</Badge>
<Badge variant="outline" className="text-xs">{t(TYPE_LABEL_KEY[drink.type])}</Badge>
{!drink.alcoholic && (
<Badge variant="secondary" className="text-xs flex items-center gap-1">
<Leaf className="h-2.5 w-2.5" />
Sans alcool
{t("drinksTypeNonAlcoholic")}
</Badge>
)}
</div>
<p className="text-sm text-muted-foreground">{drink.description}</p>
{drink.examples.length > 0 && (
<p className="text-xs text-muted-foreground">
<span className="font-medium">e.g. </span>
<span className="font-medium">{t("drinksExamplesLabel")} </span>
{drink.examples.join(" · ")}
</p>
)}
@@ -153,7 +153,7 @@ export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
<Button variant="ghost" className="w-full" onClick={suggest} disabled={loading}>
<Sparkles className="h-4 w-4" />
Regenerate
{t("pairingRegenerate")}
</Button>
</div>
)}
apps/web/components/recipe/meal-pairing-button.tsx
+17 -17
View File
@@ -38,14 +38,14 @@ const ROLE_ICON: Record<Pairing["role"], React.ElementType> = {
sauce: ChefHat,
};
const ROLE_LABEL: Record<Pairing["role"], string> = {
starter: "Starter",
side: "Side",
salad: "Salad",
bread: "Bread",
drink: "Drink",
dessert: "Dessert",
sauce: "Sauce",
const ROLE_LABEL_KEY: Record<Pairing["role"], string> = {
starter: "pairingRoleStarter",
side: "pairingRoleSide",
salad: "pairingRoleSalad",
bread: "pairingRoleBread",
drink: "pairingRoleDrink",
dessert: "pairingRoleDessert",
sauce: "pairingRoleSauce",
};
const DIFFICULTY_VARIANT = {
@@ -154,22 +154,22 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<UtensilsCrossed className="h-5 w-5 text-primary" />
Complete the meal
{t("pairingDialogTitle")}
</DialogTitle>
<DialogDescription>
AI-suggested dishes that pair well with this recipe. Generate any of them as a new recipe.
{t("pairingDialogDescription")}
</DialogDescription>
</DialogHeader>
{loading ? (
<div className="py-6 space-y-3">
<FakeProgressBar active={loading} durationMs={8000} label="Finding perfect pairings…" />
<FakeProgressBar active={loading} durationMs={8000} label={t("pairingFindingLabel")} />
</div>
) : pairings.length === 0 ? (
<div className="flex flex-col items-center gap-4 py-8">
<Button onClick={suggest} size="lg">
<Sparkles className="h-4 w-4" />
Suggest pairings
{t("pairingSuggestButton")}
</Button>
</div>
) : (
@@ -199,7 +199,7 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
<div className="flex-1 min-w-0 space-y-1.5">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-semibold">{pairing.name}</span>
<Badge variant="outline" className="text-xs">{ROLE_LABEL[pairing.role]}</Badge>
<Badge variant="outline" className="text-xs">{t(ROLE_LABEL_KEY[pairing.role])}</Badge>
<Badge variant={DIFFICULTY_VARIANT[pairing.difficulty]} className="text-xs">{pairing.difficulty}</Badge>
{pairing.prepTimeMins && (
<span className="text-xs text-muted-foreground">{pairing.prepTimeMins}m</span>
@@ -218,7 +218,7 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
<FakeProgressBar
active={!!generatingProgress}
durationMs={generatingProgress.total * 10000}
label={`Generating recipe ${generatingProgress.current} of ${generatingProgress.total}…`}
label={t("pairingGeneratingLabel", { current: generatingProgress.current, total: generatingProgress.total })}
/>
)}
<div className="flex gap-2 pt-1">
@@ -229,7 +229,7 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
disabled={!!generatingProgress}
>
<Sparkles className="h-4 w-4" />
Regenerate
{t("pairingRegenerate")}
</Button>
<Button
className="flex-1"
@@ -239,12 +239,12 @@ export function MealPairingButton({ recipeId }: { recipeId: string }) {
{generatingProgress ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Generating {generatingProgress.current}/{generatingProgress.total}…
{t("pairingGeneratingButton", { current: generatingProgress.current, total: generatingProgress.total })}
</>
) : (
<>
<Sparkles className="h-4 w-4" />
Generate{selected.size > 0 ? ` (${selected.size})` : ""}
{t("pairingGenerateButton")}{selected.size > 0 ? ` (${selected.size})` : ""}
</>
)}
</Button>
apps/web/components/recipe/nutrition-panel.tsx
+13 -12
View File
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
@@ -21,6 +22,7 @@ interface NutritionPanelProps {
}
export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
const t = useTranslations("nutritionPanel");
const [nutrition, setNutrition] = useState<NutritionData | null>(initialData ?? null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -33,13 +35,12 @@ export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
method: "POST",
});
if (!res.ok) {
const body = await res.json() as { error?: string };
throw new Error(body.error ?? "Failed to estimate nutrition");
throw new Error(t("estimateFailed"));
}
const data = await res.json() as { nutrition: NutritionData };
setNutrition(data.nutrition);
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong");
setError(err instanceof Error ? err.message : t("error"));
} finally {
setLoading(false);
}
@@ -50,7 +51,7 @@ export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
<div className="flex flex-col gap-2">
{error && <p className="text-sm text-destructive">{error}</p>}
<Button variant="outline" onClick={handleEstimate} disabled={loading}>
Estimate nutrition
{t("estimateButton")}
</Button>
</div>
);
@@ -60,7 +61,7 @@ export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
<Card>
<CardHeader className="pb-3">
<div className="flex items-center justify-between">
<CardTitle className="text-base">Nutrition per serving</CardTitle>
<CardTitle className="text-base">{t("title")}</CardTitle>
<Button
variant="ghost"
size="sm"
@@ -68,7 +69,7 @@ export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
disabled={loading}
className="text-xs text-muted-foreground"
>
{loading ? "Estimating…" : "Re-estimate"}
{loading ? t("estimating") : t("reEstimateButton")}
</Button>
</div>
{error && <p className="text-sm text-destructive">{error}</p>}
@@ -84,27 +85,27 @@ export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
</div>
<MacroCell
label="Protein"
label={t("protein")}
value={nutrition.perServing.proteinG}
unit="g"
/>
<MacroCell
label="Carbs"
label={t("carbs")}
value={nutrition.perServing.carbsG}
unit="g"
/>
<MacroCell
label="Fat"
label={t("fat")}
value={nutrition.perServing.fatG}
unit="g"
/>
<MacroCell
label="Fiber"
label={t("fiber")}
value={nutrition.perServing.fiberG}
unit="g"
/>
<MacroCell
label="Sodium"
label={t("sodium")}
value={nutrition.perServing.sodiumMg}
unit="mg"
/>
@@ -114,7 +115,7 @@ export function NutritionPanel({ recipeId, initialData }: NutritionPanelProps) {
{loading && !nutrition && (
<CardContent>
<p className="text-sm text-muted-foreground animate-pulse">
Estimating nutrition…
{t("estimatingNutrition")}
</p>
</CardContent>
)}
apps/web/components/recipe/serving-scaler.tsx
+1 -1
View File
@@ -120,7 +120,7 @@ export function ServingScaler({
<button
className="ml-auto hover:text-foreground"
onClick={dismissAiScale}
aria-label="Dismiss AI scaling"
aria-label={t("dismissAiScaling")}
>
<X className="h-3 w-3" />
</button>
apps/web/components/recipe/url-import-dialog.tsx
+12 -9
View File
@@ -2,6 +2,7 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Link2, Loader2 } from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
@@ -28,6 +29,8 @@ export function UrlImportDialog({
open: boolean;
onOpenChange: (open: boolean) => void;
}) {
const t = useTranslations("recipe");
const tCommon = useTranslations("common");
const router = useRouter();
const [url, setUrl] = useState("");
const [importing, setImporting] = useState(false);
@@ -44,7 +47,7 @@ export function UrlImportDialog({
if (!res.ok) {
const err = await res.json() as { error?: string };
toast.error(err.error ?? "Failed to import recipe");
toast.error(err.error ?? t("urlImportFetchFailed"));
return;
}
@@ -61,12 +64,12 @@ export function UrlImportDialog({
});
if (!saveRes.ok) {
toast.error("Failed to save imported recipe");
toast.error(t("urlImportSaveFailed"));
return;
}
const saved = await saveRes.json() as { id: string };
toast.success("Recipe imported! Review before publishing.");
toast.success(t("urlImportSuccess"));
onOpenChange(false);
router.push(`/recipes/${saved.id}/edit`);
} finally {
@@ -80,15 +83,15 @@ export function UrlImportDialog({
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<Link2 className="h-5 w-5 text-primary" />
Import recipe from URL
{t("urlImportTitle")}
</DialogTitle>
<DialogDescription>
Paste a recipe URL and AI will extract the ingredients and instructions.
{t("urlImportDescription")}
</DialogDescription>
</DialogHeader>
<div className="space-y-4">
<div className="space-y-2">
<Label htmlFor="import-url">Recipe URL</Label>
<Label htmlFor="import-url">{t("urlImportLabel")}</Label>
<Input
id="import-url"
type="url"
@@ -101,18 +104,18 @@ export function UrlImportDialog({
</div>
<div className="flex gap-2 justify-end">
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={importing}>
Cancel
{tCommon("cancel")}
</Button>
<Button onClick={handleImport} disabled={!url.trim() || importing}>
{importing ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Importing…
{t("urlImportingButton")}
</>
) : (
<>
<Link2 className="h-4 w-4" />
Import
{t("urlImportButton")}
</>
)}
</Button>