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>

apps/web/components/social/comments-section.tsx

@@ -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) => (