c87670e90f
Some checks failed
E2E / Playwright e2e (push) Has been cancelled
Move mail, compose, contacts, and accounts off mocks onto REST + WS. Add client, auth store, IDB-backed query cache, offline queue, and sync bar; hybrid Zustand for UI-only state. Settings still local until backend has preferences API.
253 lines
8.8 KiB
TypeScript
253 lines
8.8 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
ArrowLeft,
|
|
Download,
|
|
Pencil,
|
|
Star,
|
|
Trash2,
|
|
Mail,
|
|
Phone,
|
|
Building2,
|
|
MapPin,
|
|
Cake,
|
|
FileText,
|
|
MessageSquare,
|
|
Video,
|
|
} from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { useContactsList } from "@/lib/contacts/use-contacts-list"
|
|
import { useDeleteContact } from "@/lib/api/hooks/use-contact-mutations"
|
|
import { fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import { useNavStore } from "@/lib/stores/nav-store"
|
|
import { downloadContactVCard } from "@/lib/contacts/export-contacts"
|
|
import {
|
|
CONTACTS_HEADING_TEXT,
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_PAGE_ICON_BTN_CLASS,
|
|
CONTACTS_PAGE_TAG_CLASS,
|
|
CONTACTS_PANEL_DIVIDER_CLASS,
|
|
CONTACTS_PANEL_MUTED_ICON_CLASS,
|
|
CONTACTS_PANEL_PRIMARY_ACTION_CLASS,
|
|
CONTACTS_PANEL_SECONDARY_ICON_BTN_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const FRENCH_MONTHS = [
|
|
"janvier", "février", "mars", "avril", "mai", "juin",
|
|
"juillet", "août", "septembre", "octobre", "novembre", "décembre",
|
|
]
|
|
|
|
function formatBirthday(b: { day?: number; month?: number; year?: number }): string {
|
|
const parts: string[] = []
|
|
if (b.day) parts.push(String(b.day))
|
|
if (b.month) parts.push(FRENCH_MONTHS[b.month - 1] ?? "")
|
|
if (b.year) parts.push(String(b.year))
|
|
return parts.join(" ")
|
|
}
|
|
|
|
interface ContactDetailPageProps {
|
|
contactId: string
|
|
onBack: () => void
|
|
onEdit: (id: string) => void
|
|
}
|
|
|
|
export function ContactDetailPage({ contactId, onBack, onEdit }: ContactDetailPageProps) {
|
|
const { contacts } = useContactsList()
|
|
const softDeleteContact = useContactsStore((s) => s.softDeleteContact)
|
|
const deleteContactMutation = useDeleteContact()
|
|
const labelRows = useNavStore((s) => s.labelRows)
|
|
const contact = contacts.find((c) => c.id === contactId)
|
|
|
|
if (!contact) {
|
|
return (
|
|
<div className={cn("flex h-full items-center justify-center text-sm", CONTACTS_MUTED_TEXT)}>
|
|
Contact introuvable
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const displayName = fullContactDisplayName(contact)
|
|
const name = displayName || contact.emails[0]?.value || contact.phones[0]?.value || "?"
|
|
const color = avatarColor(name)
|
|
const initial = senderInitial(name)
|
|
const primaryEmail = contact.emails[0]?.value
|
|
|
|
function handleDelete() {
|
|
if (contact) softDeleteContact(contact, "Supprimé manuellement")
|
|
deleteContactMutation.mutate({ path: contactId })
|
|
onBack()
|
|
}
|
|
|
|
return (
|
|
<div className="mx-auto max-w-3xl px-6 py-8 text-foreground">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={CONTACTS_PAGE_ICON_BTN_CLASS}
|
|
onClick={onBack}
|
|
>
|
|
<ArrowLeft className="h-5 w-5" />
|
|
</Button>
|
|
<div className="flex items-center gap-1">
|
|
<Button variant="ghost" size="icon" className={CONTACTS_PAGE_ICON_BTN_CLASS}>
|
|
<Star className="h-5 w-5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={CONTACTS_PAGE_ICON_BTN_CLASS}
|
|
onClick={() => downloadContactVCard(contact)}
|
|
aria-label="Télécharger la fiche contact"
|
|
>
|
|
<Download className="h-5 w-5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={CONTACTS_PAGE_ICON_BTN_CLASS}
|
|
onClick={() => onEdit(contactId)}
|
|
>
|
|
<Pencil className="h-5 w-5" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={CONTACTS_PAGE_ICON_BTN_CLASS}
|
|
onClick={handleDelete}
|
|
>
|
|
<Trash2 className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6 pb-6">
|
|
{contact.avatarUrl ? (
|
|
<img src={contact.avatarUrl} alt={name} className="h-24 w-24 rounded-full object-cover" />
|
|
) : (
|
|
<div
|
|
className="flex h-24 w-24 items-center justify-center rounded-full text-3xl font-medium text-white"
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{initial}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h1 className={cn("text-3xl", CONTACTS_HEADING_TEXT)}>{name}</h1>
|
|
{contact.company && (
|
|
<p className={cn("mt-1 text-base", CONTACTS_MUTED_TEXT)}>
|
|
{contact.jobTitle ? `${contact.jobTitle} — ` : ""}
|
|
{contact.company}
|
|
</p>
|
|
)}
|
|
{contact.labels && contact.labels.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap gap-1">
|
|
{contact.labels.map((labelId) => {
|
|
const row = labelRows.find((r) => r.id === labelId)
|
|
return row ? (
|
|
<span key={labelId} className={CONTACTS_PAGE_TAG_CLASS}>
|
|
<span className={`inline-block h-2 w-2 rounded-full ${row.color}`} />
|
|
{row.label}
|
|
</span>
|
|
) : null
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{primaryEmail && (
|
|
<div className={cn("flex items-center gap-2 py-4", CONTACTS_PANEL_DIVIDER_CLASS)}>
|
|
<button type="button" className={CONTACTS_PANEL_PRIMARY_ACTION_CLASS}>
|
|
<Mail className="h-4 w-4" />
|
|
Envoyer un e-mail
|
|
</button>
|
|
<button type="button" className={CONTACTS_PANEL_SECONDARY_ICON_BTN_CLASS}>
|
|
<MessageSquare className="h-4 w-4" />
|
|
</button>
|
|
<button type="button" className={CONTACTS_PANEL_SECONDARY_ICON_BTN_CLASS}>
|
|
<Video className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className={cn("space-y-1 pt-4", CONTACTS_PANEL_DIVIDER_CLASS)}>
|
|
{contact.emails.length > 0 && (
|
|
<DetailRow icon={<Mail className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{contact.emails.map((e, i) => (
|
|
<div key={i}>
|
|
<p className="text-sm text-primary">{e.value}</p>
|
|
<p className={cn("text-xs", CONTACTS_MUTED_TEXT)}>{e.label}</p>
|
|
</div>
|
|
))}
|
|
</DetailRow>
|
|
)}
|
|
|
|
{contact.phones.length > 0 && (
|
|
<DetailRow icon={<Phone className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{contact.phones.map((p, i) => (
|
|
<div key={i}>
|
|
<p className="text-sm text-primary">{p.value}</p>
|
|
<p className={cn("text-xs", CONTACTS_MUTED_TEXT)}>{p.label}</p>
|
|
</div>
|
|
))}
|
|
</DetailRow>
|
|
)}
|
|
|
|
{contact.company && (
|
|
<DetailRow icon={<Building2 className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
<div>
|
|
<p className={cn("text-sm", CONTACTS_HEADING_TEXT)}>{contact.company}</p>
|
|
{contact.department && (
|
|
<p className={cn("text-xs", CONTACTS_MUTED_TEXT)}>{contact.department}</p>
|
|
)}
|
|
{contact.jobTitle && (
|
|
<p className={cn("text-xs", CONTACTS_MUTED_TEXT)}>{contact.jobTitle}</p>
|
|
)}
|
|
</div>
|
|
</DetailRow>
|
|
)}
|
|
|
|
{contact.addresses && contact.addresses.length > 0 && (
|
|
<DetailRow icon={<MapPin className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
{contact.addresses.map((addr, i) => (
|
|
<div key={i}>
|
|
<p className={cn("text-sm", CONTACTS_HEADING_TEXT)}>
|
|
{[addr.street, [addr.postalCode, addr.city].filter(Boolean).join(" "), addr.region, addr.country]
|
|
.filter(Boolean)
|
|
.join(", ")}
|
|
</p>
|
|
<p className={cn("text-xs", CONTACTS_MUTED_TEXT)}>{addr.label}</p>
|
|
</div>
|
|
))}
|
|
</DetailRow>
|
|
)}
|
|
|
|
{contact.birthday && (contact.birthday.day || contact.birthday.month) && (
|
|
<DetailRow icon={<Cake className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
<p className={cn("text-sm", CONTACTS_HEADING_TEXT)}>{formatBirthday(contact.birthday)}</p>
|
|
</DetailRow>
|
|
)}
|
|
|
|
{contact.notes && (
|
|
<DetailRow icon={<FileText className={cn("h-5 w-5", CONTACTS_PANEL_MUTED_ICON_CLASS)} />}>
|
|
<p className={cn("whitespace-pre-wrap text-sm", CONTACTS_HEADING_TEXT)}>{contact.notes}</p>
|
|
</DetailRow>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function DetailRow({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex gap-4 py-3">
|
|
<div className="flex w-6 shrink-0 pt-0.5">{icon}</div>
|
|
<div className="flex-1 space-y-2">{children}</div>
|
|
</div>
|
|
)
|
|
}
|