dealerwebandLinus Rath
bebb394f54
Bulwark had no read-receipt support (JMAP/Stalwart have no native MDN). End-to-end, client-side, in three parts: - Request (compose): a toolbar toggle (MailCheck, green when on) sets Disposition-Notification-To on the outgoing message via the JMAP "header:<name>:asText" create property. Threaded composer -> page -> email-store -> client.sendEmail. Default from requestReadReceiptDefault. - Detect (viewer): reads Disposition-Notification-To case-insensitively from the parsed headers and shows a banner (green Send / red Ignore) in the unified notification bar. Hidden in Sent/Drafts/Trash/Junk and once handled. message/disposition-notification + message/delivery-status report parts are filtered out of the attachment list. - Respond (MDN): lib/mdn.ts builds an RFC 8098 multipart/report (text/plain + message/disposition-notification, UTF-8/base64, localized subject + body). client.sendReadReceipt uploads the blob, imports it into Sent via Email/import, then submits with an explicit envelope. Both Send and Ignore set the $MDNSent keyword (RFC 3503) so no client re-prompts. Behaviour configurable: ask / always / never. New: lib/mdn.ts, read-receipt-banner.tsx. Settings (requestReadReceiptDefault, readReceiptResponse) + UI. All 17 locales.
61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { MailCheck, Loader2, CheckCircle } from 'lucide-react';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface ReadReceiptBannerProps {
|
|
/** Address that requested the receipt (Disposition-Notification-To). */
|
|
requestedBy: string;
|
|
/** Sends the MDN. Should resolve when the receipt has been submitted. */
|
|
onSend: () => Promise<void>;
|
|
/** Suppresses the request without sending (sets $MDNSent server-side). */
|
|
onIgnore: () => void;
|
|
}
|
|
|
|
export function ReadReceiptBanner({ requestedBy, onSend, onIgnore }: ReadReceiptBannerProps) {
|
|
const t = useTranslations('email_viewer.read_receipt');
|
|
const [state, setState] = useState<'idle' | 'sending' | 'sent'>('idle');
|
|
|
|
if (state === 'sent') {
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
|
|
<CheckCircle className="w-4 h-4 text-green-600 dark:text-green-400 shrink-0" />
|
|
<span>{t('sent')}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-2 rounded-md border border-amber-300/60 bg-amber-50 px-3 py-2 text-sm dark:border-amber-700/50 dark:bg-amber-950/30">
|
|
<MailCheck className="w-4 h-4 shrink-0 text-amber-600 dark:text-amber-400" />
|
|
<span className="text-foreground">{t('prompt')}</span>
|
|
<span className="break-all text-muted-foreground">{requestedBy}</span>
|
|
<div className="ml-auto flex items-center gap-2">
|
|
<button
|
|
onClick={async () => {
|
|
setState('sending');
|
|
try {
|
|
await onSend();
|
|
setState('sent');
|
|
} catch {
|
|
setState('idle');
|
|
}
|
|
}}
|
|
disabled={state === 'sending'}
|
|
className="inline-flex items-center gap-1.5 rounded-md bg-green-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{state === 'sending' && <Loader2 className="w-3 h-3 animate-spin" />}
|
|
{t('send')}
|
|
</button>
|
|
<button
|
|
onClick={onIgnore}
|
|
className="rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-700"
|
|
>
|
|
{t('ignore')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|