497 lines
19 KiB
TypeScript
497 lines
19 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import {
|
|
Archive,
|
|
ArrowLeft,
|
|
Inbox,
|
|
Pencil,
|
|
RotateCcw,
|
|
Search,
|
|
Send,
|
|
Star,
|
|
Trash2,
|
|
X,
|
|
} from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import { Button } from "@/components/ui/button"
|
|
import { avatarColor, senderInitial } from "@/lib/sender-display"
|
|
import {
|
|
DEMO_EMAILS,
|
|
DEMO_USER,
|
|
type DemoEmail,
|
|
type DemoFolder,
|
|
} from "@/components/demo/demo-mail-data"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const FOLDERS: { id: DemoFolder; label: string; icon: typeof Inbox }[] = [
|
|
{ id: "inbox", label: "Boîte de réception", icon: Inbox },
|
|
{ id: "starred", label: "Favoris", icon: Star },
|
|
{ id: "sent", label: "Envoyés", icon: Send },
|
|
{ id: "archive", label: "Archive", icon: Archive },
|
|
{ id: "trash", label: "Corbeille", icon: Trash2 },
|
|
]
|
|
|
|
function demoToast(message: string) {
|
|
toast.message(message, {
|
|
description: "Mode démo : rien n'est envoyé ni conservé.",
|
|
})
|
|
}
|
|
|
|
function Avatar({ name, className }: { name: string; className?: string }) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"flex shrink-0 items-center justify-center rounded-full text-sm font-medium text-white",
|
|
className ?? "size-9"
|
|
)}
|
|
style={{ backgroundColor: avatarColor(name) }}
|
|
aria-hidden
|
|
>
|
|
{senderInitial(name)}
|
|
</span>
|
|
)
|
|
}
|
|
|
|
function ComposeModal({
|
|
onClose,
|
|
onSend,
|
|
}: {
|
|
onClose: () => void
|
|
onSend: (email: { to: string; subject: string; body: string }) => void
|
|
}) {
|
|
const [to, setTo] = useState("")
|
|
const [subject, setSubject] = useState("")
|
|
const [body, setBody] = useState("")
|
|
|
|
return (
|
|
<div className="absolute bottom-0 right-0 z-30 flex w-full max-w-md flex-col overflow-hidden rounded-t-xl border border-[var(--mail-border)] bg-[var(--mail-surface-elevated)] shadow-2xl sm:bottom-4 sm:right-4 sm:rounded-xl">
|
|
<div className="flex items-center justify-between bg-[var(--mail-surface-muted)] px-4 py-2.5">
|
|
<span className="text-sm font-medium text-[var(--mail-text-strong)]">
|
|
Nouveau message
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="rounded p-1 text-[var(--mail-text-muted)] hover:bg-[var(--mail-hover)]"
|
|
aria-label="Fermer"
|
|
>
|
|
<X className="size-4" />
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col divide-y divide-[var(--mail-border-subtle)] px-4">
|
|
<input
|
|
value={to}
|
|
onChange={(e) => setTo(e.target.value)}
|
|
placeholder="À"
|
|
className="bg-transparent py-2.5 text-sm text-[var(--mail-text)] outline-none placeholder:text-[var(--mail-text-muted)]"
|
|
/>
|
|
<input
|
|
value={subject}
|
|
onChange={(e) => setSubject(e.target.value)}
|
|
placeholder="Objet"
|
|
className="bg-transparent py-2.5 text-sm text-[var(--mail-text)] outline-none placeholder:text-[var(--mail-text-muted)]"
|
|
/>
|
|
<textarea
|
|
value={body}
|
|
onChange={(e) => setBody(e.target.value)}
|
|
placeholder="Votre message…"
|
|
rows={7}
|
|
className="resize-none bg-transparent py-2.5 text-sm leading-relaxed text-[var(--mail-text)] outline-none placeholder:text-[var(--mail-text-muted)]"
|
|
/>
|
|
</div>
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<Button
|
|
size="sm"
|
|
className="rounded-full px-5"
|
|
onClick={() => {
|
|
onSend({ to, subject, body })
|
|
onClose()
|
|
}}
|
|
>
|
|
Envoyer
|
|
</Button>
|
|
<span className="text-[11px] text-[var(--mail-text-muted)]">
|
|
Démo — aucun envoi réel
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function DemoMailApp() {
|
|
const [emails, setEmails] = useState<DemoEmail[]>(DEMO_EMAILS)
|
|
const [folder, setFolder] = useState<DemoFolder>("inbox")
|
|
const [selectedId, setSelectedId] = useState<string | null>(null)
|
|
const [query, setQuery] = useState("")
|
|
const [composeOpen, setComposeOpen] = useState(false)
|
|
const [replyDraft, setReplyDraft] = useState("")
|
|
|
|
const visible = useMemo(() => {
|
|
const inFolder =
|
|
folder === "starred"
|
|
? emails.filter((e) => e.starred && e.folder !== "trash")
|
|
: emails.filter((e) => e.folder === folder)
|
|
const q = query.trim().toLowerCase()
|
|
if (!q) return inFolder
|
|
return inFolder.filter((e) =>
|
|
[e.fromName, e.fromEmail, e.subject, e.preview].some((field) =>
|
|
field.toLowerCase().includes(q)
|
|
)
|
|
)
|
|
}, [emails, folder, query])
|
|
|
|
const selected = emails.find((e) => e.id === selectedId) ?? null
|
|
const unreadCount = emails.filter(
|
|
(e) => e.folder === "inbox" && e.unread
|
|
).length
|
|
|
|
const patchEmail = (id: string, patch: Partial<DemoEmail>) =>
|
|
setEmails((prev) => prev.map((e) => (e.id === id ? { ...e, ...patch } : e)))
|
|
|
|
const openEmail = (email: DemoEmail) => {
|
|
setSelectedId(email.id)
|
|
setReplyDraft("")
|
|
if (email.unread) patchEmail(email.id, { unread: false })
|
|
}
|
|
|
|
const moveEmail = (id: string, dest: DemoEmail["folder"], message: string) => {
|
|
patchEmail(id, { folder: dest })
|
|
if (selectedId === id) setSelectedId(null)
|
|
demoToast(message)
|
|
}
|
|
|
|
const sendCompose = (draft: { to: string; subject: string; body: string }) => {
|
|
setEmails((prev) => [
|
|
{
|
|
id: `sent-${Date.now()}`,
|
|
fromName: DEMO_USER.name,
|
|
fromEmail: DEMO_USER.email,
|
|
subject: draft.subject || "(sans objet)",
|
|
preview: draft.body.slice(0, 110) || "(message vide)",
|
|
body: draft.body ? draft.body.split("\n\n") : ["(message vide)"],
|
|
time: "À l'instant",
|
|
unread: false,
|
|
starred: false,
|
|
folder: "sent",
|
|
},
|
|
...prev,
|
|
])
|
|
demoToast("Message « envoyé »")
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex h-dvh flex-col overflow-hidden bg-[var(--app-canvas)] text-[var(--mail-text)]">
|
|
{/* Barre supérieure */}
|
|
<header className="flex h-14 shrink-0 items-center gap-3 border-b border-[var(--mail-border-subtle)] bg-[var(--mail-surface)] px-3 sm:px-4">
|
|
<img
|
|
src="/brand/ultimail-header-icon.png"
|
|
alt=""
|
|
className="h-7 w-7 shrink-0 object-contain"
|
|
aria-hidden
|
|
/>
|
|
<span className="hidden text-lg font-semibold text-[var(--mail-text-strong)] sm:block">
|
|
Ultimail
|
|
</span>
|
|
<span className="rounded-full bg-[var(--mail-active)] px-2.5 py-0.5 text-[11px] font-semibold text-[var(--mail-nav-selected-fg)]">
|
|
Démo
|
|
</span>
|
|
<div className="flex min-w-0 flex-1 items-center gap-2 rounded-full bg-[var(--mail-surface-muted)] px-3.5 py-2 sm:mx-4">
|
|
<Search className="size-4 shrink-0 text-[var(--mail-text-muted)]" aria-hidden />
|
|
<input
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Rechercher dans les messages"
|
|
className="min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-[var(--mail-text-muted)]"
|
|
aria-label="Rechercher"
|
|
/>
|
|
</div>
|
|
<span
|
|
className="hidden items-center gap-1.5 rounded-full border border-[var(--mail-border)] px-2.5 py-1 text-[11px] font-medium text-[var(--mail-text-muted)] md:inline-flex"
|
|
title="Vos actions restent dans cet onglet et disparaissent au rechargement."
|
|
>
|
|
<RotateCcw className="size-3" aria-hidden />
|
|
Zéro rétention
|
|
</span>
|
|
<Avatar name={DEMO_USER.name} className="size-8 text-xs" />
|
|
</header>
|
|
|
|
<div className="flex min-h-0 flex-1">
|
|
{/* Barre latérale */}
|
|
<aside className="hidden w-56 shrink-0 flex-col gap-1 px-3 py-4 sm:flex">
|
|
<Button
|
|
className="mb-3 h-12 w-fit rounded-2xl px-5 shadow-sm"
|
|
onClick={() => setComposeOpen(true)}
|
|
>
|
|
<Pencil className="size-4" aria-hidden />
|
|
Nouveau message
|
|
</Button>
|
|
{FOLDERS.map((f) => {
|
|
const FolderIcon = f.icon
|
|
const active = folder === f.id
|
|
return (
|
|
<button
|
|
key={f.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setFolder(f.id)
|
|
setSelectedId(null)
|
|
}}
|
|
className={cn(
|
|
"flex items-center justify-between rounded-full px-4 py-1.5 text-sm transition-colors",
|
|
active
|
|
? "bg-[var(--mail-nav-selected)] font-semibold text-[var(--mail-nav-selected-fg)]"
|
|
: "hover:bg-[var(--mail-nav-hover)]"
|
|
)}
|
|
>
|
|
<span className="flex items-center gap-3">
|
|
<FolderIcon className="size-4" aria-hidden />
|
|
{f.label}
|
|
</span>
|
|
{f.id === "inbox" && unreadCount > 0 ? (
|
|
<span className="text-xs font-semibold">{unreadCount}</span>
|
|
) : null}
|
|
</button>
|
|
)
|
|
})}
|
|
</aside>
|
|
|
|
{/* Contenu */}
|
|
<main className="m-0 flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden bg-[var(--mail-surface)] sm:mb-3 sm:mr-3 sm:rounded-2xl sm:border sm:border-[var(--mail-border-subtle)]">
|
|
{selected ? (
|
|
<article className="flex min-h-0 flex-1 flex-col">
|
|
<div className="flex shrink-0 items-center gap-1 border-b border-[var(--mail-border-subtle)] px-2 py-2 sm:px-4">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setSelectedId(null)}
|
|
aria-label="Retour à la liste"
|
|
>
|
|
<ArrowLeft className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() =>
|
|
moveEmail(selected.id, "archive", "Message archivé")
|
|
}
|
|
aria-label="Archiver"
|
|
>
|
|
<Archive className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() =>
|
|
moveEmail(selected.id, "trash", "Message placé dans la corbeille")
|
|
}
|
|
aria-label="Supprimer"
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => patchEmail(selected.id, { starred: !selected.starred })}
|
|
aria-label={selected.starred ? "Retirer des favoris" : "Ajouter aux favoris"}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
"size-4",
|
|
selected.starred && "fill-amber-400 text-amber-400"
|
|
)}
|
|
/>
|
|
</Button>
|
|
</div>
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-5 sm:px-8">
|
|
<h1 className="text-xl font-normal text-[var(--mail-text-strong)] sm:text-2xl">
|
|
{selected.subject}
|
|
</h1>
|
|
<div className="mt-5 flex items-center gap-3">
|
|
<Avatar name={selected.fromName} />
|
|
<div className="min-w-0">
|
|
<p className="truncate text-sm font-semibold text-[var(--mail-text-strong)]">
|
|
{selected.fromName}
|
|
<span className="ml-2 font-normal text-[var(--mail-text-muted)]">
|
|
<{selected.fromEmail}>
|
|
</span>
|
|
</p>
|
|
<p className="text-xs text-[var(--mail-text-muted)]">
|
|
À moi · {selected.time}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-6 max-w-2xl space-y-4 text-[15px] leading-relaxed">
|
|
{selected.body.map((paragraph, i) => (
|
|
<p key={i} className="whitespace-pre-line">
|
|
{paragraph}
|
|
</p>
|
|
))}
|
|
</div>
|
|
<div className="mt-8 max-w-2xl rounded-2xl border border-[var(--mail-border)] p-4">
|
|
<textarea
|
|
value={replyDraft}
|
|
onChange={(e) => setReplyDraft(e.target.value)}
|
|
placeholder={`Répondre à ${selected.fromName}…`}
|
|
rows={3}
|
|
className="w-full resize-none bg-transparent text-sm leading-relaxed outline-none placeholder:text-[var(--mail-text-muted)]"
|
|
/>
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<Button
|
|
size="sm"
|
|
className="rounded-full px-5"
|
|
onClick={() => {
|
|
setReplyDraft("")
|
|
demoToast("Réponse « envoyée »")
|
|
}}
|
|
>
|
|
Envoyer
|
|
</Button>
|
|
<span className="text-[11px] text-[var(--mail-text-muted)]">
|
|
Démo — aucun envoi réel
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
) : (
|
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
|
{visible.length === 0 ? (
|
|
<div className="flex h-full flex-col items-center justify-center gap-2 p-8 text-center">
|
|
<Inbox className="size-8 text-[var(--mail-text-muted)]" aria-hidden />
|
|
<p className="text-sm text-[var(--mail-text-muted)]">
|
|
{query
|
|
? "Aucun message ne correspond à votre recherche."
|
|
: "Ce dossier est vide."}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<ul className="divide-y divide-[var(--mail-list-divider)]">
|
|
{visible.map((email) => (
|
|
<li key={email.id}>
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => openEmail(email)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") openEmail(email)
|
|
}}
|
|
className={cn(
|
|
"group flex w-full cursor-pointer items-center gap-3 px-3 py-3 text-left transition-colors hover:bg-[var(--mail-hover)] sm:px-4",
|
|
email.unread
|
|
? "bg-[var(--mail-row-unread)]"
|
|
: "bg-[var(--mail-row-read)]"
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
patchEmail(email.id, { starred: !email.starred })
|
|
}}
|
|
className="shrink-0 rounded p-1 text-[var(--mail-text-muted)] hover:text-amber-500"
|
|
aria-label={
|
|
email.starred ? "Retirer des favoris" : "Ajouter aux favoris"
|
|
}
|
|
>
|
|
<Star
|
|
className={cn(
|
|
"size-4",
|
|
email.starred && "fill-amber-400 text-amber-400"
|
|
)}
|
|
/>
|
|
</button>
|
|
<Avatar name={email.fromName} className="hidden size-8 text-xs sm:flex" />
|
|
<span
|
|
className={cn(
|
|
"w-32 shrink-0 truncate text-sm sm:w-44",
|
|
email.unread
|
|
? "font-semibold text-[var(--mail-text-strong)]"
|
|
: "text-[var(--mail-text)]"
|
|
)}
|
|
>
|
|
{email.fromName}
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate text-sm">
|
|
{email.label ? (
|
|
<span
|
|
className="mr-2 rounded px-1.5 py-px text-[10px] font-semibold text-white"
|
|
style={{ backgroundColor: email.label.color }}
|
|
>
|
|
{email.label.text}
|
|
</span>
|
|
) : null}
|
|
<span
|
|
className={cn(
|
|
email.unread
|
|
? "font-semibold text-[var(--mail-text-strong)]"
|
|
: "text-[var(--mail-text)]"
|
|
)}
|
|
>
|
|
{email.subject}
|
|
</span>
|
|
<span className="text-[var(--mail-text-muted)]">
|
|
{" "}
|
|
— {email.preview}
|
|
</span>
|
|
</span>
|
|
<span className="hidden shrink-0 items-center gap-1 group-hover:flex">
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
moveEmail(email.id, "archive", "Message archivé")
|
|
}}
|
|
className="rounded p-1.5 text-[var(--mail-text-muted)] hover:bg-[var(--mail-surface-muted)]"
|
|
aria-label="Archiver"
|
|
>
|
|
<Archive className="size-4" />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
moveEmail(email.id, "trash", "Message placé dans la corbeille")
|
|
}}
|
|
className="rounded p-1.5 text-[var(--mail-text-muted)] hover:bg-[var(--mail-surface-muted)]"
|
|
aria-label="Supprimer"
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</button>
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"shrink-0 text-xs group-hover:hidden",
|
|
email.unread
|
|
? "font-semibold text-[var(--mail-text-strong)]"
|
|
: "text-[var(--mail-text-muted)]"
|
|
)}
|
|
>
|
|
{email.time}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
|
|
{/* Bouton composer (mobile) */}
|
|
<Button
|
|
className="absolute bottom-5 right-5 z-20 size-14 rounded-2xl shadow-lg sm:hidden"
|
|
onClick={() => setComposeOpen(true)}
|
|
aria-label="Nouveau message"
|
|
>
|
|
<Pencil className="size-5" />
|
|
</Button>
|
|
|
|
{composeOpen ? (
|
|
<ComposeModal onClose={() => setComposeOpen(false)} onSend={sendCompose} />
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|