379 lines
12 KiB
TypeScript
379 lines
12 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo, useState } from "react"
|
|
import { PenLine, Plus, Trash2 } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select"
|
|
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
|
|
import { SettingsSyncBanner } from "@/components/gmail/settings/settings-sync-banner"
|
|
import { useAuthReady } from "@/lib/api/use-auth-ready"
|
|
import { useMailAccounts } from "@/lib/api/hooks/use-mail-queries"
|
|
import { useIdentities } from "@/lib/api/hooks/use-folder-label-queries"
|
|
import {
|
|
useCreateMailSignature,
|
|
useDeleteMailSignature,
|
|
useMailSignatures,
|
|
useUpdateMailSignature,
|
|
} from "@/lib/api/hooks/use-mail-signatures"
|
|
import { useUpdateIdentity } from "@/lib/api/hooks/use-identity-mutations"
|
|
import type { ApiIdentity, ApiMailSignature } from "@/lib/api/types"
|
|
|
|
const NONE_SIGNATURE = "__none__"
|
|
|
|
export function SignaturesSettingsSection() {
|
|
const { ready, authenticated } = useAuthReady()
|
|
const {
|
|
data: signatures = [],
|
|
isFetching,
|
|
isError,
|
|
refetch,
|
|
isPending,
|
|
} = useMailSignatures()
|
|
const showInitialLoad = ready && authenticated && isPending && signatures.length === 0
|
|
|
|
return (
|
|
<>
|
|
<SettingsSectionHeader
|
|
title="Signatures"
|
|
description="Bibliothèque de signatures réutilisables et attribution par identité d'envoi."
|
|
/>
|
|
<SettingsSyncBanner isFetching={isFetching} isError={isError} onRetry={() => refetch()} />
|
|
|
|
<div className="space-y-6">
|
|
<SignatureLibrary
|
|
signatures={signatures}
|
|
showInitialLoad={showInitialLoad}
|
|
/>
|
|
<IdentitySignatureAssignments signatures={signatures} />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function SignatureLibrary({
|
|
signatures,
|
|
showInitialLoad,
|
|
}: {
|
|
signatures: ApiMailSignature[]
|
|
showInitialLoad: boolean
|
|
}) {
|
|
const createSignature = useCreateMailSignature()
|
|
const updateSignature = useUpdateMailSignature()
|
|
const deleteSignature = useDeleteMailSignature()
|
|
const [showAddForm, setShowAddForm] = useState(false)
|
|
const [draft, setDraft] = useState({ name: "", html: "" })
|
|
|
|
function handleCreate() {
|
|
const name = draft.name.trim()
|
|
if (!name) return
|
|
createSignature.mutate(
|
|
{ name, html: draft.html },
|
|
{
|
|
onSuccess: () => {
|
|
setShowAddForm(false)
|
|
setDraft({ name: "", html: "" })
|
|
},
|
|
}
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
<PenLine className="size-4" />
|
|
Bibliothèque
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Créez des signatures nommées que vous pourrez réutiliser sur plusieurs identités.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{showInitialLoad ? null : signatures.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">Aucune signature enregistrée.</p>
|
|
) : (
|
|
<ul className="space-y-3">
|
|
{signatures.map((signature) => (
|
|
<li
|
|
key={signature.id}
|
|
className="rounded-lg border border-border p-3 space-y-2"
|
|
>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1 space-y-2">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">Nom</Label>
|
|
<Input
|
|
defaultValue={signature.name}
|
|
onBlur={(e) => {
|
|
const next = e.target.value.trim()
|
|
if (!next || next === signature.name) return
|
|
updateSignature.mutate({
|
|
signatureId: signature.id,
|
|
name: next,
|
|
html: signature.html,
|
|
})
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label="Supprimer la signature"
|
|
onClick={() => deleteSignature.mutate(signature.id)}
|
|
>
|
|
<Trash2 className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">Contenu HTML</Label>
|
|
<textarea
|
|
className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono"
|
|
defaultValue={signature.html}
|
|
placeholder="<div>…</div>"
|
|
onBlur={(e) => {
|
|
if (e.target.value === signature.html) return
|
|
updateSignature.mutate({
|
|
signatureId: signature.id,
|
|
name: signature.name,
|
|
html: e.target.value,
|
|
})
|
|
}}
|
|
/>
|
|
</div>
|
|
{signature.html?.trim() ? (
|
|
<div className="rounded-md border border-dashed border-border bg-muted/30 p-3 text-sm">
|
|
<p className="mb-2 text-xs text-muted-foreground">Aperçu</p>
|
|
<div
|
|
className="prose prose-sm max-w-none dark:prose-invert"
|
|
dangerouslySetInnerHTML={{ __html: signature.html }}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
{showAddForm ? (
|
|
<div className="rounded-lg border border-border p-3 space-y-3 max-w-2xl">
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">Nom</Label>
|
|
<Input
|
|
value={draft.name}
|
|
placeholder="Professionnelle"
|
|
onChange={(e) => setDraft({ ...draft, name: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label className="text-xs">Contenu HTML</Label>
|
|
<textarea
|
|
className="min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono"
|
|
value={draft.html}
|
|
placeholder="<div style="color:#5f6368">…</div>"
|
|
onChange={(e) => setDraft({ ...draft, html: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
disabled={createSignature.isPending || !draft.name.trim()}
|
|
onClick={handleCreate}
|
|
>
|
|
Enregistrer
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => {
|
|
setShowAddForm(false)
|
|
setDraft({ name: "", html: "" })
|
|
}}
|
|
>
|
|
Annuler
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setShowAddForm(true)}
|
|
>
|
|
<Plus className="size-3.5 mr-1.5" />
|
|
Ajouter une signature
|
|
</Button>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function IdentitySignatureAssignments({
|
|
signatures,
|
|
}: {
|
|
signatures: ApiMailSignature[]
|
|
}) {
|
|
const { data: accounts = [] } = useMailAccounts()
|
|
|
|
if (accounts.length === 0) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Attribution par identité</CardTitle>
|
|
<CardDescription>
|
|
Ajoutez un compte mail pour configurer les signatures par défaut.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="text-base">Attribution par identité</CardTitle>
|
|
<CardDescription>
|
|
Choisissez la signature insérée par défaut pour chaque adresse d'envoi.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{accounts.map((account) => (
|
|
<AccountIdentitySignatures
|
|
key={account.id}
|
|
accountId={account.id}
|
|
accountLabel={`${account.name} · ${account.email}`}
|
|
signatures={signatures}
|
|
/>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
function AccountIdentitySignatures({
|
|
accountId,
|
|
accountLabel,
|
|
signatures,
|
|
}: {
|
|
accountId: string
|
|
accountLabel: string
|
|
signatures: ApiMailSignature[]
|
|
}) {
|
|
const { data: identities = [] } = useIdentities(accountId)
|
|
const updateIdentity = useUpdateIdentity(accountId)
|
|
|
|
const signatureOptions = useMemo(
|
|
() => [
|
|
{ value: NONE_SIGNATURE, label: "Aucune" },
|
|
...signatures.map((s) => ({ value: s.id, label: s.name })),
|
|
],
|
|
[signatures]
|
|
)
|
|
|
|
if (identities.length === 0) {
|
|
return (
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">{accountLabel}</p>
|
|
<p className="text-xs text-muted-foreground">Aucune identité d'envoi.</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<p className="text-sm font-medium">{accountLabel}</p>
|
|
<ul className="space-y-2">
|
|
{identities.map((identity) => (
|
|
<IdentitySignatureRow
|
|
key={identity.id}
|
|
identity={identity}
|
|
options={signatureOptions}
|
|
pending={updateIdentity.isPending}
|
|
onAssign={(defaultSignatureId) =>
|
|
updateIdentity.mutate({
|
|
identityId: identity.id,
|
|
email: identity.email,
|
|
name: identity.name,
|
|
is_default: identity.is_default,
|
|
signature_html: identity.signature_html ?? "",
|
|
default_signature_id: defaultSignatureId,
|
|
reply_to_addrs: identity.reply_to_addrs,
|
|
})
|
|
}
|
|
/>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function IdentitySignatureRow({
|
|
identity,
|
|
options,
|
|
pending,
|
|
onAssign,
|
|
}: {
|
|
identity: ApiIdentity
|
|
options: Array<{ value: string; label: string }>
|
|
pending: boolean
|
|
onAssign: (defaultSignatureId: string) => void
|
|
}) {
|
|
const current =
|
|
identity.default_signature_id && identity.default_signature_id !== ""
|
|
? identity.default_signature_id
|
|
: NONE_SIGNATURE
|
|
|
|
return (
|
|
<li className="flex flex-col gap-2 rounded-lg border border-border p-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div className="min-w-0">
|
|
<p className="text-sm font-medium truncate">{identity.name}</p>
|
|
<p className="text-xs text-muted-foreground truncate">{identity.email}</p>
|
|
{identity.is_default ? (
|
|
<p className="text-xs text-muted-foreground mt-0.5">Identité par défaut</p>
|
|
) : null}
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2 sm:w-64">
|
|
<Label className="text-xs sr-only">Signature par défaut</Label>
|
|
<Select
|
|
value={current}
|
|
disabled={pending}
|
|
onValueChange={(value) =>
|
|
onAssign(value === NONE_SIGNATURE ? "" : value)
|
|
}
|
|
>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Signature" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{options.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</li>
|
|
)
|
|
}
|