Matthieu MALVACHEandMatthieu MALVACHE
8a5bc9b88d
- Address book with JMAP sync and local fallback (contacts CRUD, search/filter, composer autocomplete, i18n for 8 languages) - Fix email layout: remove horizontal scroll, left-side clipping, and empty spaces from blocked external images in newsletters - Update all dependencies to latest compatible versions - Expand i18n from 3 to 8 languages (added ES, IT, DE, NL, PT) - Upgrade Next.js to 16.1.6 for security patches
45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Avatar } from "@/components/ui/avatar";
|
|
import { cn } from "@/lib/utils";
|
|
import type { ContactCard } from "@/lib/jmap/types";
|
|
import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
|
|
|
|
interface ContactListItemProps {
|
|
contact: ContactCard;
|
|
isSelected: boolean;
|
|
onClick: () => void;
|
|
}
|
|
|
|
export function ContactListItem({ contact, isSelected, onClick }: ContactListItemProps) {
|
|
const name = getContactDisplayName(contact);
|
|
const email = getContactPrimaryEmail(contact);
|
|
const org = contact.organizations
|
|
? Object.values(contact.organizations)[0]?.name
|
|
: undefined;
|
|
|
|
return (
|
|
<button
|
|
onClick={onClick}
|
|
className={cn(
|
|
"w-full flex items-center gap-3 px-4 py-3 text-left transition-colors",
|
|
"hover:bg-muted",
|
|
isSelected && "bg-accent text-accent-foreground"
|
|
)}
|
|
>
|
|
<Avatar name={name} email={email} size="sm" />
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-medium truncate">
|
|
{name || email || "—"}
|
|
</div>
|
|
{email && name && (
|
|
<div className="text-xs text-muted-foreground truncate">{email}</div>
|
|
)}
|
|
{org && (
|
|
<div className="text-xs text-muted-foreground truncate">{org}</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
);
|
|
}
|