Arnaud
08ab9ac71f
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>
80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
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";
|
|
|
|
type ConversationSummary = {
|
|
id: string;
|
|
otherUser: { id: string; name: string; username: string | null; avatarUrl: string | null } | null;
|
|
lastMessage: string | null;
|
|
lastMessageAt: string;
|
|
unreadCount: number;
|
|
};
|
|
|
|
export function ConversationsList() {
|
|
const pathname = usePathname();
|
|
const t = useTranslations("messages");
|
|
const [conversations, setConversations] = useState<ConversationSummary[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
let cancelled = false;
|
|
async function load() {
|
|
const res = await fetch("/api/v1/conversations");
|
|
if (res.ok && !cancelled) {
|
|
const data = (await res.json()) as { conversations: ConversationSummary[] };
|
|
setConversations(data.conversations);
|
|
}
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
void load();
|
|
const interval = setInterval(load, 10000);
|
|
return () => { cancelled = true; clearInterval(interval); };
|
|
}, []);
|
|
|
|
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">{t("noConversationsYet")}</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="divide-y">
|
|
{conversations.map((c) => (
|
|
<Link
|
|
key={c.id}
|
|
href={`/messages/${c.id}`}
|
|
className={cn(
|
|
"flex items-center gap-3 p-3 hover:bg-accent transition-colors",
|
|
pathname === `/messages/${c.id}` && "bg-accent"
|
|
)}
|
|
>
|
|
<Avatar className="h-10 w-10 shrink-0">
|
|
{c.otherUser?.avatarUrl && <AvatarImage src={c.otherUser.avatarUrl} />}
|
|
<AvatarFallback>{(c.otherUser?.name ?? "?").slice(0, 2).toUpperCase()}</AvatarFallback>
|
|
</Avatar>
|
|
<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 ?? t("unknownUser")}
|
|
</p>
|
|
{c.unreadCount > 0 && (
|
|
<Badge variant="destructive" className="h-4 min-w-4 px-1 text-[10px] shrink-0">
|
|
{c.unreadCount > 9 ? "9+" : c.unreadCount}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<p className={cn("text-xs truncate", c.unreadCount > 0 ? "text-foreground" : "text-muted-foreground")}>
|
|
{c.lastMessage ?? t("noMessagesPreview")}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|