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>
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);
}