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

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
+8 -2
View File
@@ -1,10 +1,16 @@
import type { Metadata } from "next";
import { headers } from "next/headers";
import { MessageCircle } from "lucide-react";
import { auth } from "@/lib/auth/server";
import { ConversationsList } from "@/components/social/conversations-list";
import { getMessages } from "@/lib/i18n/server";
export const metadata: Metadata = { title: "Messages — Epicure" };
export default function MessagesPage() {
export default async function MessagesPage() {
const session = await auth.api.getSession({ headers: await headers() });
const m = getMessages((session?.user as { locale?: string } | undefined)?.locale);
return (
<div className="max-w-5xl mx-auto h-[calc(100vh-8rem)] border rounded-xl overflow-hidden flex">
<div className="w-full sm:w-80 border-r shrink-0 overflow-y-auto">
@@ -13,7 +19,7 @@ export default function MessagesPage() {
<div className="hidden sm:flex flex-1 items-center justify-center text-muted-foreground">
<div className="text-center space-y-2">
<MessageCircle className="h-10 w-10 mx-auto opacity-50" />
<p className="text-sm">Select a conversation</p>
<p className="text-sm">{m.messages.selectConversation}</p>
</div>
</div>
</div>
+9 -3
View File
@@ -1,14 +1,20 @@
import type { Metadata } from "next";
import { headers } from "next/headers";
import { auth } from "@/lib/auth/server";
import { PeopleSearch } from "@/components/social/people-search";
import { getMessages } from "@/lib/i18n/server";
export const metadata: Metadata = { title: "Find People — Epicure" };
export default function PeoplePage() {
export default async function PeoplePage() {
const session = await auth.api.getSession({ headers: await headers() });
const m = getMessages((session?.user as { locale?: string } | undefined)?.locale);
return (
<div className="max-w-2xl mx-auto space-y-6">
<div>
<h1 className="text-2xl font-bold tracking-tight">Find People</h1>
<p className="text-muted-foreground text-sm mt-1">Search for cooks to follow by name or username.</p>
<h1 className="text-2xl font-bold tracking-tight">{m.people.title}</h1>
<p className="text-muted-foreground text-sm mt-1">{m.people.subtitle}</p>
</div>
<PeopleSearch />
</div>
@@ -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>
)}
@@ -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>
+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>
)}
@@ -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>
@@ -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>
@@ -2,6 +2,7 @@
import { useState, useEffect } from "react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
const REACTIONS: Record<string, string> = {
like: "👍",
@@ -20,6 +21,7 @@ type Props = {
};
export function CommentReactions({ recipeId, commentId, initialCounts = {}, initialUserReactions = [] }: Props) {
const t = useTranslations("social");
const [counts, setCounts] = useState<Record<string, number>>(initialCounts);
const [userReactions, setUserReactions] = useState<string[]>(initialUserReactions);
const [pending, setPending] = useState<string | null>(null);
@@ -69,9 +71,9 @@ export function CommentReactions({ recipeId, commentId, initialCounts = {}, init
[type]: Math.max(0, (prev[type] ?? 0) + (hasReacted ? 1 : -1)),
}));
if (res.status === 401) {
toast.error("Sign in to react to comments");
toast.error(t("signInToReact"));
} else {
toast.error("Failed to update reaction");
toast.error(t("reactionFailed"));
}
return;
}
@@ -92,7 +94,7 @@ export function CommentReactions({ recipeId, commentId, initialCounts = {}, init
...prev,
[type]: Math.max(0, (prev[type] ?? 0) + (hasReacted ? 1 : -1)),
}));
toast.error("Failed to update reaction");
toast.error(t("reactionFailed"));
} finally {
setPending(null);
}
@@ -115,7 +117,7 @@ export function CommentReactions({ recipeId, commentId, initialCounts = {}, init
: "border-border bg-transparent text-muted-foreground hover:border-primary/50 hover:text-foreground",
pending === type ? "opacity-60 cursor-not-allowed" : "cursor-pointer",
].join(" ")}
aria-label={`${reacted ? "Remove" : "Add"} ${type} reaction`}
aria-label={reacted ? t("removeReaction", { type }) : t("addReaction", { type })}
aria-pressed={reacted}
>
<span>{emoji}</span>
+22 -18
View File
@@ -45,21 +45,21 @@ function renderContentWithMentions(content: string) {
);
}
function timeAgo(dateStr: string) {
function timeAgo(dateStr: string, t: ReturnType<typeof useTranslations>) {
const diff = Date.now() - new Date(dateStr).getTime();
const mins = Math.floor(diff / 60000);
if (mins < 1) return "just now";
if (mins < 60) return `${mins}m ago`;
if (mins < 1) return t("justNow");
if (mins < 60) return t("minutesAgo", { mins });
const hours = Math.floor(mins / 60);
if (hours < 24) return `${hours}h ago`;
return `${Math.floor(hours / 24)}d ago`;
if (hours < 24) return t("hoursAgo", { hours });
return t("daysAgo", { days: Math.floor(hours / 24) });
}
function CommentForm({
recipeId,
parentId,
onSubmit,
placeholder = "Add a comment…",
placeholder,
onCancel,
}: {
recipeId: string;
@@ -68,6 +68,8 @@ function CommentForm({
placeholder?: string;
onCancel?: () => void;
}) {
const t = useTranslations("social");
const tCommon = useTranslations("common");
const [content, setContent] = useState("");
const [submitting, setSubmitting] = useState(false);
@@ -80,7 +82,7 @@ function CommentForm({
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ content: content.trim(), parentId }),
});
if (!res.ok) { toast.error("Failed to post comment"); return; }
if (!res.ok) { toast.error(t("commentFailed")); return; }
setContent("");
onSubmit();
} finally {
@@ -93,15 +95,15 @@ function CommentForm({
<Textarea
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder={placeholder}
placeholder={placeholder ?? t("commentPlaceholder")}
rows={2}
disabled={submitting}
/>
<div className="flex gap-2">
<Button size="sm" onClick={submit} disabled={!content.trim() || submitting}>
{submitting ? "Posting…" : "Post"}
{submitting ? t("postingButton") : t("postButton")}
</Button>
{onCancel && <Button size="sm" variant="ghost" onClick={onCancel}>Cancel</Button>}
{onCancel && <Button size="sm" variant="ghost" onClick={onCancel}>{tCommon("cancel")}</Button>}
</div>
</div>
);
@@ -125,13 +127,14 @@ function CommentItem({
const [showReply, setShowReply] = useState(false);
const isOwn = comment.userId === currentUserId;
const t = useTranslations("social");
const tCommon = useTranslations("common");
const replies = childrenByParent.get(comment.id) ?? [];
const indented = depth > 0 && depth <= MAX_VISUAL_INDENT;
async function deleteComment() {
const res = await fetch(`/api/v1/comments/${comment.id}`, { method: "DELETE" });
if (res.ok) { toast.success("Deleted"); onRefresh(); }
else toast.error("Failed to delete");
if (res.ok) { toast.success(tCommon("deleted")); onRefresh(); }
else toast.error(tCommon("deleteFailed"));
}
return (
@@ -144,7 +147,7 @@ function CommentItem({
<div className="flex-1 min-w-0 space-y-1">
<div className="flex items-baseline gap-2">
<span className="font-medium text-sm">{comment.userName}</span>
<span className="text-xs text-muted-foreground">{timeAgo(comment.createdAt)}</span>
<span className="text-xs text-muted-foreground">{timeAgo(comment.createdAt, t)}</span>
</div>
<p className="text-sm leading-relaxed whitespace-pre-wrap">{renderContentWithMentions(comment.content)}</p>
<CommentReactions recipeId={recipeId} commentId={comment.id} initialCounts={{}} initialUserReactions={[]} />
@@ -154,7 +157,7 @@ function CommentItem({
onClick={() => setShowReply(!showReply)}
className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-1"
>
<Reply className="h-3 w-3" /> Reply
<Reply className="h-3 w-3" /> {t("replyButton")}
</button>
)}
{currentUserId && !isOwn && (
@@ -165,7 +168,7 @@ function CommentItem({
onClick={deleteComment}
className="text-xs text-muted-foreground hover:text-destructive flex items-center gap-1"
>
<Trash2 className="h-3 w-3" /> Delete
<Trash2 className="h-3 w-3" /> {tCommon("delete")}
</button>
)}
</div>
@@ -210,6 +213,7 @@ export function CommentsSection({
const [comments, setComments] = useState<Comment[]>([]);
const [loading, setLoading] = useState(true);
const t = useTranslations("social");
const tCommon = useTranslations("common");
const load = useCallback(async () => {
const res = await fetch(`/api/v1/recipes/${recipeId}/comments`);
@@ -238,7 +242,7 @@ export function CommentsSection({
<div className="space-y-6">
<div className="flex items-center gap-2">
<MessageCircle className="h-5 w-5" />
<h2 className="text-xl font-semibold">Comments</h2>
<h2 className="text-xl font-semibold">{t("commentsTitle")}</h2>
{!loading && <span className="text-muted-foreground text-sm">({comments.length})</span>}
</div>
@@ -247,9 +251,9 @@ export function CommentsSection({
)}
{loading ? (
<p className="text-sm text-muted-foreground">Loading</p>
<p className="text-sm text-muted-foreground">{tCommon("loading")}</p>
) : topLevel.length === 0 ? (
<p className="text-sm text-muted-foreground">No comments yet. Be the first!</p>
<p className="text-sm text-muted-foreground">{t("noCommentsYet")}</p>
) : (
<div className="space-y-6">
{topLevel.map((comment, i) => (
@@ -3,6 +3,7 @@
import { useEffect, useState } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useTranslations } from "next-intl";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
@@ -17,6 +18,7 @@ type ConversationSummary = {
export function ConversationsList() {
const pathname = usePathname();
const t = useTranslations("messages");
const [conversations, setConversations] = useState<ConversationSummary[]>([]);
const [loading, setLoading] = useState(true);
@@ -35,9 +37,9 @@ export function ConversationsList() {
return () => { cancelled = true; clearInterval(interval); };
}, []);
if (loading) return <p className="text-sm text-muted-foreground p-4">Loading</p>;
if (loading) return <p className="text-sm text-muted-foreground p-4">{t("loading")}</p>;
if (conversations.length === 0) {
return <p className="text-sm text-muted-foreground p-4">No conversations yet. Visit a profile to say hi.</p>;
return <p className="text-sm text-muted-foreground p-4">{t("noConversationsYet")}</p>;
}
return (
@@ -58,7 +60,7 @@ export function ConversationsList() {
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between gap-2">
<p className={cn("text-sm truncate", c.unreadCount > 0 && "font-semibold")}>
{c.otherUser?.name ?? "Unknown"}
{c.otherUser?.name ?? t("unknownUser")}
</p>
{c.unreadCount > 0 && (
<Badge variant="destructive" className="h-4 min-w-4 px-1 text-[10px] shrink-0">
@@ -67,7 +69,7 @@ export function ConversationsList() {
)}
</div>
<p className={cn("text-xs truncate", c.unreadCount > 0 ? "text-foreground" : "text-muted-foreground")}>
{c.lastMessage ?? "No messages yet"}
{c.lastMessage ?? t("noMessagesPreview")}
</p>
</div>
</Link>
@@ -3,11 +3,13 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { MessageCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
export function MessageButton({ targetUsername }: { targetUsername: string }) {
const router = useRouter();
const t = useTranslations("messages");
const [loading, setLoading] = useState(false);
async function startConversation() {
@@ -20,7 +22,7 @@ export function MessageButton({ targetUsername }: { targetUsername: string }) {
});
if (!res.ok) {
const err = await res.json() as { error?: string };
toast.error(err.error ?? "Failed to start conversation");
toast.error(err.error ?? t("startConversationFailed"));
return;
}
const { conversationId } = await res.json() as { conversationId: string };
@@ -33,7 +35,7 @@ export function MessageButton({ targetUsername }: { targetUsername: string }) {
return (
<Button variant="outline" size="sm" onClick={() => { void startConversation(); }} disabled={loading}>
<MessageCircle className="h-3.5 w-3.5" />
Message
{t("messageButton")}
</Button>
);
}
@@ -2,6 +2,7 @@
import { useCallback, useEffect, useRef, useState } from "react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { Send } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
@@ -21,6 +22,7 @@ export function MessageThread({
conversationId: string;
currentUserId: string;
}) {
const t = useTranslations("messages");
const [messages, setMessages] = useState<Message[]>([]);
const [loading, setLoading] = useState(true);
const [content, setContent] = useState("");
@@ -57,7 +59,7 @@ export function MessageThread({
});
if (!res.ok) {
const err = await res.json().catch(() => ({})) as { error?: string };
toast.error(err.error ?? "Failed to send");
toast.error(err.error ?? t("sendFailed"));
return;
}
setContent("");
@@ -71,9 +73,9 @@ export function MessageThread({
<div className="flex flex-col h-full">
<div className="flex-1 overflow-y-auto space-y-3 p-4">
{loading ? (
<p className="text-sm text-muted-foreground">Loading</p>
<p className="text-sm text-muted-foreground">{t("loading")}</p>
) : messages.length === 0 ? (
<p className="text-sm text-muted-foreground text-center py-8">No messages yet. Say hi!</p>
<p className="text-sm text-muted-foreground text-center py-8">{t("noMessagesYet")}</p>
) : (
messages.map((m) => {
const isOwn = m.senderId === currentUserId;
@@ -103,7 +105,7 @@ export function MessageThread({
void send();
}
}}
placeholder="Type a message…"
placeholder={t("placeholder")}
rows={1}
className="resize-none"
/>
+5 -3
View File
@@ -2,6 +2,7 @@
import { useEffect, useState } from "react";
import Link from "next/link";
import { useTranslations } from "next-intl";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Input } from "@/components/ui/input";
import { FollowButton } from "@/components/social/follow-button";
@@ -16,6 +17,7 @@ type PersonResult = {
};
export function PeopleSearch() {
const t = useTranslations("people");
const [q, setQ] = useState("");
const [results, setResults] = useState<PersonResult[]>([]);
const [loading, setLoading] = useState(false);
@@ -47,15 +49,15 @@ export function PeopleSearch() {
<Input
value={q}
onChange={(e) => setQ(e.target.value)}
placeholder="Search people by name or username…"
placeholder={t("searchPlaceholder")}
className="pl-9"
/>
</div>
{loading && <p className="text-sm text-muted-foreground">Searching</p>}
{loading && <p className="text-sm text-muted-foreground">{t("searching")}</p>}
{!loading && q.trim().length >= 2 && results.length === 0 && (
<p className="text-sm text-muted-foreground">No one found.</p>
<p className="text-sm text-muted-foreground">{t("noneFound")}</p>
)}
<div className="space-y-2">
+4 -2
View File
@@ -3,6 +3,7 @@
import { useState } from "react";
import { Star } from "lucide-react";
import { toast } from "sonner";
import { useTranslations } from "next-intl";
import { cn } from "@/lib/utils";
export function RatingStars({
@@ -16,6 +17,7 @@ export function RatingStars({
readonly?: boolean;
size?: "sm" | "default";
}) {
const t = useTranslations("social");
const [score, setScore] = useState(initialScore);
const [hovered, setHovered] = useState(0);
const [saving, setSaving] = useState(false);
@@ -31,11 +33,11 @@ export function RatingStars({
});
if (!res.ok) {
const err = await res.json() as { error?: string };
toast.error(err.error ?? "Failed to rate");
toast.error(err.error ?? t("ratingFailed"));
return;
}
setScore(value);
toast.success("Rating saved");
toast.success(t("ratingSaved"));
} finally {
setSaving(false);
}
+85 -2
View File
@@ -76,10 +76,43 @@
"pairingSaveFailed": "Failed to save \"{name}\"",
"pairingSuccess": "Recipe generated — review before publishing",
"pairingBulkSuccess": "{count} recipes generated — find them in your library",
"pairingDialogTitle": "Complete the meal",
"pairingDialogDescription": "AI-suggested dishes that pair well with this recipe. Generate any of them as a new recipe.",
"pairingFindingLabel": "Finding perfect pairings…",
"pairingSuggestButton": "Suggest pairings",
"pairingRegenerate": "Regenerate",
"pairingGenerateButton": "Generate",
"pairingGeneratingButton": "Generating {current}/{total}…",
"pairingGeneratingLabel": "Generating recipe {current} of {total}…",
"pairingRoleStarter": "Starter",
"pairingRoleSide": "Side",
"pairingRoleSalad": "Salad",
"pairingRoleBread": "Bread",
"pairingRoleDrink": "Drink",
"pairingRoleDessert": "Dessert",
"pairingRoleSauce": "Sauce",
"drinksDialogTitle": "Drink pairings",
"drinksDialogDescription": "AI-suggested drinks that complement this recipe.",
"drinksSuggestButton": "Suggest drinks",
"drinksExamplesLabel": "e.g.",
"drinksTypeWine": "Wine",
"drinksTypeBeer": "Beer",
"drinksTypeCocktail": "Cocktail",
"drinksTypeSpirit": "Spirit",
"drinksTypeNonAlcoholic": "Non-alcoholic",
"drinksTypeHot": "Hot",
"cookAction": "Cook",
"adaptConstraintPlaceholder": "e.g. Make it vegan, lower the calories, use pantry staples only, gluten-free…",
"photoImportFailed": "Failed to import recipe from photo.",
"importFromPhoto": "Import from Photo",
"urlImportTitle": "Import recipe from URL",
"urlImportDescription": "Paste a recipe URL and AI will extract the ingredients and instructions.",
"urlImportLabel": "Recipe URL",
"urlImportButton": "Import",
"urlImportingButton": "Importing…",
"urlImportFetchFailed": "Failed to import recipe",
"urlImportSaveFailed": "Failed to save imported recipe",
"urlImportSuccess": "Recipe imported! Review before publishing.",
"analyzingPhoto": "Analyzing photo…",
"pairMealTooltip": "Pair meal",
"historyTooltip": "History",
@@ -271,7 +304,42 @@
"reset": "Reset",
"aiScale": "AI Scale",
"scaling": "Scaling…",
"aiScaledNote": "AI-scaled quantities shown below"
"aiScaledNote": "AI-scaled quantities shown below",
"dismissAiScaling": "Dismiss AI scaling"
},
"people": {
"title": "Find People",
"subtitle": "Search for cooks to follow by name or username.",
"searchPlaceholder": "Search people by name or username…",
"searching": "Searching…",
"noneFound": "No one found."
},
"messages": {
"loading": "Loading…",
"noMessagesYet": "No messages yet. Say hi!",
"sendFailed": "Failed to send",
"placeholder": "Type a message…",
"noConversationsYet": "No conversations yet. Visit a profile to say hi.",
"unknownUser": "Unknown",
"noMessagesPreview": "No messages yet",
"selectConversation": "Select a conversation",
"messageButton": "Message",
"startConversationFailed": "Failed to start conversation",
"title": "Messages"
},
"nutritionPanel": {
"estimateButton": "Estimate nutrition",
"reEstimateButton": "Re-estimate",
"estimating": "Estimating…",
"estimatingNutrition": "Estimating nutrition…",
"title": "Nutrition per serving",
"estimateFailed": "Failed to estimate nutrition",
"error": "Something went wrong",
"protein": "Protein",
"carbs": "Carbs",
"fat": "Fat",
"fiber": "Fiber",
"sodium": "Sodium"
},
"explore": {
"title": "Explore",
@@ -642,7 +710,22 @@
"inviteSent": "Invitation sent",
"memberRemoved": "Member removed",
"replyPlaceholder": "Reply…",
"commentPlaceholder": "Share your thoughts…"
"commentPlaceholder": "Share your thoughts…",
"commentsTitle": "Comments",
"noCommentsYet": "No comments yet. Be the first!",
"postButton": "Post",
"postingButton": "Posting…",
"replyButton": "Reply",
"reportButton": "Report",
"ratingFailed": "Failed to rate",
"justNow": "just now",
"minutesAgo": "{mins}m ago",
"hoursAgo": "{hours}h ago",
"daysAgo": "{days}d ago",
"signInToReact": "Sign in to react to comments",
"reactionFailed": "Failed to update reaction",
"addReaction": "Add {type} reaction",
"removeReaction": "Remove {type} reaction"
},
"cookingMode": {
"cooking": "Cooking",
+85 -2
View File
@@ -77,9 +77,42 @@
"pairingSaveFailed": "Échec de l'enregistrement de « {name} »",
"pairingSuccess": "Recette générée — vérifiez avant de publier",
"pairingBulkSuccess": "{count} recettes générées — retrouvez-les dans votre bibliothèque",
"pairingDialogTitle": "Compléter le repas",
"pairingDialogDescription": "Plats suggérés par l'IA qui accompagnent bien cette recette. Générez-en n'importe lequel comme nouvelle recette.",
"pairingFindingLabel": "Recherche des meilleurs accords…",
"pairingSuggestButton": "Suggérer des accompagnements",
"pairingRegenerate": "Régénérer",
"pairingGenerateButton": "Générer",
"pairingGeneratingButton": "Génération {current}/{total}…",
"pairingGeneratingLabel": "Génération de la recette {current} sur {total}…",
"pairingRoleStarter": "Entrée",
"pairingRoleSide": "Accompagnement",
"pairingRoleSalad": "Salade",
"pairingRoleBread": "Pain",
"pairingRoleDrink": "Boisson",
"pairingRoleDessert": "Dessert",
"pairingRoleSauce": "Sauce",
"drinksDialogTitle": "Accords boissons",
"drinksDialogDescription": "Boissons suggérées par l'IA qui accompagnent cette recette.",
"drinksSuggestButton": "Suggérer des boissons",
"drinksExamplesLabel": "ex.",
"drinksTypeWine": "Vin",
"drinksTypeBeer": "Bière",
"drinksTypeCocktail": "Cocktail",
"drinksTypeSpirit": "Spiritueux",
"drinksTypeNonAlcoholic": "Sans alcool",
"drinksTypeHot": "Chaud",
"cookAction": "Cuisiner",
"photoImportFailed": "Échec de l'importation de la recette depuis la photo.",
"importFromPhoto": "Importer depuis une photo",
"urlImportTitle": "Importer une recette depuis une URL",
"urlImportDescription": "Collez l'URL d'une recette et l'IA en extraira les ingrédients et les instructions.",
"urlImportLabel": "URL de la recette",
"urlImportButton": "Importer",
"urlImportingButton": "Importation…",
"urlImportFetchFailed": "Échec de l'importation de la recette",
"urlImportSaveFailed": "Échec de l'enregistrement de la recette importée",
"urlImportSuccess": "Recette importée ! Vérifiez-la avant de la publier.",
"analyzingPhoto": "Analyse de la photo…",
"pairMealTooltip": "Accorder un plat",
"historyTooltip": "Historique",
@@ -271,7 +304,42 @@
"reset": "Réinitialiser",
"aiScale": "Ajuster avec l'IA",
"scaling": "Ajustement…",
"aiScaledNote": "Quantités ajustées par l'IA affichées ci-dessous"
"aiScaledNote": "Quantités ajustées par l'IA affichées ci-dessous",
"dismissAiScaling": "Ignorer l'ajustement IA"
},
"people": {
"title": "Trouver des personnes",
"subtitle": "Recherchez des cuisiniers à suivre par nom ou nom d'utilisateur.",
"searchPlaceholder": "Rechercher par nom ou nom d'utilisateur…",
"searching": "Recherche…",
"noneFound": "Personne trouvé."
},
"messages": {
"loading": "Chargement…",
"noMessagesYet": "Aucun message pour l'instant. Dites bonjour !",
"sendFailed": "Échec de l'envoi",
"placeholder": "Écrire un message…",
"noConversationsYet": "Aucune conversation pour l'instant. Visitez un profil pour dire bonjour.",
"unknownUser": "Inconnu",
"noMessagesPreview": "Aucun message pour l'instant",
"selectConversation": "Sélectionnez une conversation",
"messageButton": "Message",
"startConversationFailed": "Échec du démarrage de la conversation",
"title": "Messages"
},
"nutritionPanel": {
"estimateButton": "Estimer les valeurs nutritionnelles",
"reEstimateButton": "Réestimer",
"estimating": "Estimation…",
"estimatingNutrition": "Estimation des valeurs nutritionnelles…",
"title": "Valeurs nutritionnelles par portion",
"estimateFailed": "Échec de l'estimation nutritionnelle",
"error": "Une erreur s'est produite",
"protein": "Protéines",
"carbs": "Glucides",
"fat": "Lipides",
"fiber": "Fibres",
"sodium": "Sodium"
},
"explore": {
"title": "Explorer",
@@ -630,7 +698,22 @@
"inviteSent": "Invitation envoyée",
"memberRemoved": "Membre supprimé",
"replyPlaceholder": "Répondre…",
"commentPlaceholder": "Partagez vos impressions…"
"commentPlaceholder": "Partagez vos impressions…",
"commentsTitle": "Commentaires",
"noCommentsYet": "Aucun commentaire pour l'instant. Soyez le premier !",
"postButton": "Publier",
"postingButton": "Publication…",
"replyButton": "Répondre",
"reportButton": "Signaler",
"ratingFailed": "Échec de la notation",
"justNow": "à l'instant",
"minutesAgo": "il y a {mins} min",
"hoursAgo": "il y a {hours} h",
"daysAgo": "il y a {days} j",
"signInToReact": "Connectez-vous pour réagir aux commentaires",
"reactionFailed": "Échec de la mise à jour de la réaction",
"addReaction": "Ajouter la réaction {type}",
"removeReaction": "Retirer la réaction {type}"
},
"cookingMode": {
"cooking": "En cuisine",