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

feat(i18n): translate hardcoded strings across print, public recipe, and recipe management UI

Browse Source 
Wires dozens of components and server pages to next-intl instead of hardcoded
English text, and adds a lightweight getMessages/formatMessage helper for
server components (print pages, public recipe page, cook metadata) since
next-intl/server isn't wired into this app's routing. Backfills missing
en/fr message keys that existing code already referenced but fr.json lacked.
This commit is contained in:
Arnaud
2026-07-02 07:58:18 +02:00
parent afff6cf9eb
commit 01fdbb880b
32 changed files with 515 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/settings/api-keys-manager.tsx
+8 -6
View File
@@ -1,6 +1,7 @@
"use client";
import { useState } from "react";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
@@ -30,6 +31,7 @@ function formatDate(iso: string) {
}
export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
const t = useTranslations("settingsForm");
const [keys, setKeys] = useState<ApiKey[]>(initialKeys);
const [name, setName] = useState("");
const [creating, setCreating] = useState(false);
@@ -48,7 +50,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
});
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Failed to create API key");
throw new Error(data.error ?? t("apiKeyCreateFailed"));
}
const data = await res.json() as CreateApiKeyResponse;
setNewKey(data.key);
@@ -58,7 +60,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
]);
setName("");
} catch (err) {
toast.error(err instanceof Error ? err.message : "Failed to create API key");
toast.error(err instanceof Error ? err.message : t("apiKeyCreateFailed"));
} finally {
setCreating(false);
}
@@ -69,11 +71,11 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
const res = await fetch(`/api/v1/api-keys/${id}`, { method: "DELETE" });
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Failed to revoke API key");
throw new Error(data.error ?? t("apiKeyRevokeFailed"));
}
setKeys((prev) => prev.filter((k) => k.id !== id));
} catch (err) {
toast.error(err instanceof Error ? err.message : "Failed to revoke API key");
toast.error(err instanceof Error ? err.message : t("apiKeyRevokeFailed"));
}
}
@@ -84,7 +86,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
toast.error("Failed to copy to clipboard");
toast.error(t("copyFailed"));
}
}
@@ -97,7 +99,7 @@ export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
<div className="flex gap-2">
<Input
id="key-name"
placeholder="e.g. My app"
placeholder={t("apiKeyNamePlaceholder")}
value={name}
onChange={(e) => setName(e.target.value)}
maxLength={100}
apps/web/components/settings/byok-manager.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 { Key, Trash2, Check } from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -17,6 +18,7 @@ const PROVIDERS: { id: Provider; label: string; placeholder: string }[] = [
];
export function ByokManager({ initialKeys }: { initialKeys: string[] }) {
const t = useTranslations("settingsForm");
const [configuredKeys, setConfiguredKeys] = useState<Set<string>>(new Set(initialKeys));
const [inputs, setInputs] = useState<Partial<Record<Provider, string>>>({});
const [saving, setSaving] = useState<Provider | null>(null);
@@ -35,9 +37,9 @@ export function ByokManager({ initialKeys }: { initialKeys: string[] }) {
if (res.ok) {
setConfiguredKeys((prev) => new Set([...prev, provider]));
setInputs((prev) => ({ ...prev, [provider]: "" }));
toast.success(`${provider} key saved`);
toast.success(t("byokSaved", { provider }));
} else {
toast.error("Failed to save key");
toast.error(t("byokSaveFailed"));
}
} finally {
setSaving(null);
@@ -50,9 +52,9 @@ export function ByokManager({ initialKeys }: { initialKeys: string[] }) {
const res = await fetch(`/api/v1/ai-keys/${provider}`, { method: "DELETE" });
if (res.ok) {
setConfiguredKeys((prev) => { const s = new Set(prev); s.delete(provider); return s; });
toast.success(`${provider} key removed`);
toast.success(t("byokRemoved", { provider }));
} else {
toast.error("Failed to remove key");
toast.error(t("byokRemoveFailed"));
}
} finally {
setRemoving(null);
apps/web/components/settings/model-prefs-form.tsx
+6 -4
View File
@@ -14,6 +14,7 @@ import {
SelectValue,
} from "@/components/ui/select";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
type Provider = "openai" | "anthropic" | "openrouter" | "ollama" | "";
@@ -59,6 +60,7 @@ type Prefs = {
};
export function ModelPrefsForm({ initialPrefs }: { initialPrefs: Prefs | null }) {
const t = useTranslations("settingsForm");
const [prefs, setPrefs] = useState<Prefs>(initialPrefs ?? {});
const [saving, setSaving] = useState(false);
@@ -75,9 +77,9 @@ export function ModelPrefsForm({ initialPrefs }: { initialPrefs: Prefs | null })
body: JSON.stringify(prefs),
});
if (!res.ok) throw new Error("Save failed");
toast.success("Model preferences saved");
toast.success(t("modelSaved"));
} catch {
toast.error("Failed to save");
toast.error(t("modelSaveFailed"));
} finally {
setSaving(false);
}
@@ -132,7 +134,7 @@ export function ModelPrefsForm({ initialPrefs }: { initialPrefs: Prefs | null })
onValueChange={(v) => setField(modelKey, v === "default" ? null : v)}
>
<SelectTrigger className="h-8 text-sm">
<SelectValue placeholder="Default" />
<SelectValue placeholder={t("modelDefaultPlaceholder")} />
</SelectTrigger>
<SelectContent>
<SelectItem value="default">
@@ -149,7 +151,7 @@ export function ModelPrefsForm({ initialPrefs }: { initialPrefs: Prefs | null })
) : (
<Input
className="h-8 text-sm"
placeholder={provider ? "e.g. llama3.2" : "—"}
placeholder={provider ? t("modelNamePlaceholder") : "—"}
value={model}
onChange={(e) => setField(modelKey, e.target.value)}
disabled={!provider}
apps/web/components/settings/webhooks-manager.tsx
+13 -11
View File
@@ -2,6 +2,7 @@
import { useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { ChevronDown, ChevronUp, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
@@ -65,6 +66,7 @@ function formatDateTime(iso: string) {
}
export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[] }) {
const t = useTranslations("settingsForm");
const [webhookList, setWebhookList] = useState<Webhook[]>(initialWebhooks);
const [url, setUrl] = useState("");
const [selectedEvents, setSelectedEvents] = useState<WebhookEventType[]>([]);
@@ -94,7 +96,7 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
});
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Failed to create webhook");
throw new Error(data.error ?? t("webhookCreateFailed"));
}
const data = await res.json() as CreateWebhookResponse;
setNewSecret({ id: data.id, secret: data.secret });
@@ -105,7 +107,7 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
setUrl("");
setSelectedEvents([]);
} catch (err) {
toast.error(err instanceof Error ? err.message : "Failed to create webhook");
toast.error(err instanceof Error ? err.message : t("webhookCreateFailed"));
} finally {
setCreating(false);
}
@@ -116,12 +118,12 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
const res = await fetch(`/api/v1/webhooks/${id}`, { method: "DELETE" });
if (!res.ok && res.status !== 204) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Failed to delete webhook");
throw new Error(data.error ?? t("webhookDeleteFailed"));
}
setWebhookList((prev) => prev.filter((w) => w.id !== id));
if (newSecret?.id === id) setNewSecret(null);
} catch (err) {
toast.error(err instanceof Error ? err.message : "Failed to delete webhook");
toast.error(err instanceof Error ? err.message : t("webhookDeleteFailed"));
}
}
@@ -134,13 +136,13 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
});
if (!res.ok) {
const data = await res.json() as { error?: string };
throw new Error(data.error ?? "Failed to update webhook");
throw new Error(data.error ?? t("webhookUpdateFailed"));
}
setWebhookList((prev) =>
prev.map((w) => (w.id === id ? { ...w, active: !currentActive } : w))
);
} catch (err) {
toast.error(err instanceof Error ? err.message : "Failed to update webhook");
toast.error(err instanceof Error ? err.message : t("webhookUpdateFailed"));
}
}
@@ -151,7 +153,7 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {
toast.error("Failed to copy to clipboard");
toast.error(t("copyFailed"));
}
}
@@ -186,9 +188,9 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
body: JSON.stringify({ deliveryId }),
});
if (res.ok) {
toast.success("Redelivery queued");
toast.success(t("redeliverySuccess"));
} else {
toast.error("Failed to redeliver");
toast.error(t("redeliveryFailed"));
}
} finally {
setRedelivering(null);
@@ -210,7 +212,7 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
<Input
id="webhook-url"
type="url"
placeholder="https://example.com/webhook"
placeholder={t("webhookUrlPlaceholder")}
value={url}
onChange={(e) => setUrl(e.target.value)}
maxLength={2048}
@@ -242,7 +244,7 @@ export function WebhooksManager({ initialWebhooks }: { initialWebhooks: Webhook[
</div>
<Button type="submit" disabled={creating || !url.trim()}>
{creating ? "Adding…" : "Add webhook"}
{creating ? t("webhookAdding") : t("webhookAddButton")}
</Button>
</form>