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/social/comment-reactions.tsx
+6 -4
View File
@@ -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>
apps/web/components/social/comments-section.tsx
+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) => (
apps/web/components/social/conversations-list.tsx
+6 -4
View File
@@ -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>
apps/web/components/social/message-button.tsx
+4 -2
View File
@@ -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>
);
}
apps/web/components/social/message-thread.tsx
+6 -4
View File
@@ -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"
/>
apps/web/components/social/people-search.tsx
+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">
apps/web/components/social/rating-stars.tsx
+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);
}