120 lines
4.5 KiB
TypeScript
120 lines
4.5 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"
|
|
|
|
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">
|
|
{/* Warning banner */}
|
|
{deletedContacts.length > 0 && (
|
|
<div className="mb-4 flex items-center justify-between rounded-lg bg-[#fef7e0] px-4 py-3">
|
|
<p className="text-sm text-[#3c4043]">
|
|
Les contacts qui sont dans la corbeille depuis plus de 30 jours seront supprimés définitivement
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={emptyTrash}
|
|
className="shrink-0 text-sm font-medium text-[#1a73e8] hover:text-[#1557b0]"
|
|
>
|
|
Vider la corbeille
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Title */}
|
|
<h1 className="mb-4 text-2xl font-normal text-[#1f1f1f]">
|
|
Corbeille ({deletedContacts.length})
|
|
</h1>
|
|
|
|
{deletedContacts.length === 0 && (
|
|
<p className="py-12 text-center text-sm text-[#5f6368]">
|
|
La corbeille est vide
|
|
</p>
|
|
)}
|
|
|
|
{deletedContacts.length > 0 && (
|
|
<>
|
|
{/* Table header */}
|
|
<div className="grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] gap-2 border-b border-gray-200 py-2 text-xs font-medium text-[#5f6368]">
|
|
<span>Nom</span>
|
|
<span>Raison du placement dans la corbeille</span>
|
|
<span>Date de suppression</span>
|
|
<span />
|
|
</div>
|
|
|
|
{/* Rows */}
|
|
{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="grid grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)_40px] items-center gap-2 border-b border-gray-100 py-3 text-sm"
|
|
>
|
|
<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="truncate text-[#1f1f1f]">{name}</span>
|
|
</span>
|
|
<span className="truncate text-[#5f6368]">{reason}</span>
|
|
<span className="text-[#5f6368]">{formatDate(deletedAt)}</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full text-[#5f6368]">
|
|
<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>
|
|
)
|
|
}
|