131 lines
4.7 KiB
TypeScript
131 lines
4.7 KiB
TypeScript
"use client"
|
|
|
|
import { MoreVertical, RotateCcw, Trash2 } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { fullContactDisplayName } from "@/lib/contacts/types"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import {
|
|
CONTACTS_HEADING_TEXT,
|
|
CONTACTS_MUTED_TEXT,
|
|
CONTACTS_PAGE_BANNER_CLASS,
|
|
CONTACTS_PAGE_LINK_BTN_CLASS,
|
|
CONTACTS_PAGE_TITLE_CLASS,
|
|
CONTACTS_TABLE_HEADER_CLASS,
|
|
CONTACTS_TABLE_ROW_CLASS,
|
|
CONTACTS_ICON_BTN_CLASS,
|
|
} from "@/lib/contacts-chrome-classes"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function TrashView() {
|
|
const { deletedContacts, restoreContact, emptyTrash } = useContactsStore()
|
|
|
|
function formatDate(ts: number): string {
|
|
return new Date(ts).toLocaleDateString("fr-FR", {
|
|
day: "numeric",
|
|
month: "short",
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="px-6 py-4 text-foreground">
|
|
{deletedContacts.length > 0 && (
|
|
<div className={CONTACTS_PAGE_BANNER_CLASS}>
|
|
<p className="text-sm text-foreground">
|
|
Les contacts qui sont dans la corbeille depuis plus de 30 jours seront supprimés définitivement
|
|
</p>
|
|
<button type="button" onClick={emptyTrash} className={cn("shrink-0", CONTACTS_PAGE_LINK_BTN_CLASS)}>
|
|
Vider la corbeille
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<h1 className={cn("mb-4", CONTACTS_PAGE_TITLE_CLASS)}>
|
|
Corbeille ({deletedContacts.length})
|
|
</h1>
|
|
|
|
{deletedContacts.length === 0 && (
|
|
<p className={cn("py-12 text-center text-sm", CONTACTS_MUTED_TEXT)}>
|
|
La corbeille est vide
|
|
</p>
|
|
)}
|
|
|
|
{deletedContacts.length > 0 && (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
"grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] gap-2",
|
|
CONTACTS_TABLE_HEADER_CLASS,
|
|
)}
|
|
>
|
|
<span>Nom</span>
|
|
<span>Raison du placement dans la corbeille</span>
|
|
<span>Date de suppression</span>
|
|
<span />
|
|
</div>
|
|
|
|
{deletedContacts.map((entry) => {
|
|
const { contact, deletedAt, reason } = entry
|
|
const displayName = fullContactDisplayName(contact)
|
|
const name = displayName || contact.emails[0]?.value || "?"
|
|
const color = avatarColor(name)
|
|
const initial = senderInitial(name)
|
|
|
|
return (
|
|
<div
|
|
key={contact.id}
|
|
className={cn(
|
|
"grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] items-center gap-2 py-3 text-sm",
|
|
CONTACTS_TABLE_ROW_CLASS,
|
|
)}
|
|
>
|
|
<span className="flex items-center gap-3">
|
|
{contact.avatarUrl ? (
|
|
<img src={contact.avatarUrl} alt={name} className="h-8 w-8 rounded-full object-cover" />
|
|
) : (
|
|
<span
|
|
className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-medium text-white"
|
|
style={{ backgroundColor: color }}
|
|
>
|
|
{initial}
|
|
</span>
|
|
)}
|
|
<span className={cn("truncate", CONTACTS_HEADING_TEXT)}>{name}</span>
|
|
</span>
|
|
<span className={cn("truncate", CONTACTS_MUTED_TEXT)}>{reason}</span>
|
|
<span className={CONTACTS_MUTED_TEXT}>{formatDate(deletedAt)}</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className={cn("h-8 w-8 rounded-full", CONTACTS_ICON_BTN_CLASS)}>
|
|
<MoreVertical className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={() => restoreContact(contact.id)}>
|
|
<RotateCcw className="mr-2 h-4 w-4" />
|
|
Restaurer
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => useContactsStore.getState().deleteContact(contact.id)}
|
|
className="text-red-600 focus:text-red-600"
|
|
>
|
|
<Trash2 className="mr-2 h-4 w-4" />
|
|
Supprimer définitivement
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|