feat: show details toggle and panel on mobile sender info
This commit is contained in:
Linus Rath
+323
-304
@@ -4143,310 +4143,6 @@ export function EmailViewer({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Expandable Details */}
|
||||
{showFullHeaders && (() => {
|
||||
const translateAuthResult = (result?: string) => {
|
||||
const r = (result || '').toLowerCase();
|
||||
switch (r) {
|
||||
case 'pass': return t('authentication.result.pass');
|
||||
case 'fail': return t('authentication.result.fail');
|
||||
case 'softfail': return t('authentication.result.softfail');
|
||||
case 'neutral': return t('authentication.result.neutral');
|
||||
case 'permerror': return t('authentication.result.permerror');
|
||||
case 'temperror': return t('authentication.result.temperror');
|
||||
case 'none': return t('authentication.result.none');
|
||||
default: return result || '';
|
||||
}
|
||||
};
|
||||
const replyToDifferent = !!email.replyTo?.length &&
|
||||
(!email.from || email.replyTo[0].email !== email.from[0]?.email);
|
||||
const deliveryDeltaMs = email.sentAt && email.receivedAt
|
||||
? Math.abs(new Date(email.receivedAt).getTime() - new Date(email.sentAt).getTime())
|
||||
: 0;
|
||||
const formatDelta = (diff: number) => {
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
const dayUnit = days > 1 ? t('time.days') : t('time.day');
|
||||
const hourUnit = (hours % 24) > 1 ? t('time.hours') : t('time.hour');
|
||||
const minuteUnit = (minutes % 60) > 1 ? t('time.minutes') : t('time.minute');
|
||||
const minuteUnitSingle = minutes > 1 ? t('time.minutes') : t('time.minute');
|
||||
if (days > 0) return `${days} ${dayUnit} ${hours % 24} ${hourUnit}`;
|
||||
if (hours > 0) return `${hours} ${hourUnit} ${minutes % 60} ${minuteUnit}`;
|
||||
return `${minutes} ${minuteUnitSingle}`;
|
||||
};
|
||||
const fullDate = (iso?: string) => iso
|
||||
? formatDateTime(iso, timeFormat, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', second: '2-digit', timeZoneName: 'short' })
|
||||
: '-';
|
||||
const auth = email.authenticationResults;
|
||||
const totalAttachmentSize = effectiveAttachments.reduce((s, a) => s + (a.size || 0), 0);
|
||||
const topMimeType = email.bodyStructure?.type;
|
||||
const SectionHeader = ({ children }: { children: React.ReactNode }) => (
|
||||
<div className="text-[10px] font-semibold tracking-wider text-muted-foreground uppercase mb-1.5">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
const Row = ({ label, children, mono }: { label: string; children: React.ReactNode; mono?: boolean }) => (
|
||||
<>
|
||||
<dt className="text-muted-foreground text-xs pt-1">{label}</dt>
|
||||
<dd className={cn(
|
||||
"text-sm text-foreground min-w-0 break-words",
|
||||
mono && "font-mono text-xs",
|
||||
)}>{children}</dd>
|
||||
</>
|
||||
);
|
||||
const AuthChip = ({ name, result, extra, tooltip }: { name: string; result?: string; extra?: React.ReactNode; tooltip?: string }) => {
|
||||
if (!result) return null;
|
||||
const status = getSecurityStatus(result);
|
||||
const Icon = status.icon === 'check' ? Check
|
||||
: status.icon === 'x' ? X
|
||||
: status.icon === 'alert' ? AlertTriangle
|
||||
: Minus;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs",
|
||||
tooltip && "cursor-help",
|
||||
status.icon === 'check' && "bg-green-500/[0.07] border-green-500/30",
|
||||
status.icon === 'x' && "bg-red-500/[0.07] border-red-500/30",
|
||||
status.icon === 'alert' && "bg-amber-500/[0.07] border-amber-500/30",
|
||||
status.icon === 'minus' && "bg-muted/40 border-border",
|
||||
)}
|
||||
title={tooltip}
|
||||
>
|
||||
<Icon className={cn("w-3.5 h-3.5 flex-shrink-0", status.color)} />
|
||||
<span className="font-medium text-foreground">{name}</span>
|
||||
<span className={cn("text-[10px] uppercase tracking-wider", status.color)}>
|
||||
{translateAuthResult(result)}
|
||||
</span>
|
||||
{extra && (
|
||||
<>
|
||||
<span className="text-muted-foreground/50">·</span>
|
||||
<span className="text-muted-foreground">{extra}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const hasIdentifiers = !!(email.messageId || email.inReplyTo?.length || email.references?.length || email.threadId);
|
||||
const hasListInfo = !!(listHeaders?.listId || listHeaders?.listUnsubscribe || listHeaders?.listHelp || listHeaders?.listPost);
|
||||
const hasAuthSection = !!(auth?.spf || auth?.dkim || auth?.dmarc || auth?.iprev || email.spamScore !== undefined || email.spamLLM);
|
||||
|
||||
return (
|
||||
<div className="mt-3 pt-3 border-t border-border grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-5">
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.recipients_routing')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
<Row label={t('from')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<RecipientPopover
|
||||
name={sender?.name}
|
||||
email={sender?.email || ''}
|
||||
displayLabel={sender?.name && sender?.email ? `${sender.name} <${sender.email}>` : undefined}
|
||||
onViewContact={handleViewContactSidebar}
|
||||
className="text-sm text-left"
|
||||
/>
|
||||
</div>
|
||||
</Row>
|
||||
{replyToDifferent && (
|
||||
<Row label={t('reply_to_label').replace(':', '')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{email.replyTo!.map((r, i) => (
|
||||
<RecipientPopover key={r.email + i} name={r.name} email={r.email} onViewContact={handleViewContactSidebar} className="text-sm" />
|
||||
))}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.to && email.to.length > 0 && (
|
||||
<Row label={t('to')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar, 100)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.cc && email.cc.length > 0 && (
|
||||
<Row label={t('cc')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar, 100)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.bcc && email.bcc.length > 0 && (
|
||||
<Row label={t('bcc')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{renderClickableRecipients(email.bcc, currentUserEmail, t, handleViewContactSidebar, 100)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.sentAt && (
|
||||
<Row label={t('details.sent')}>{fullDate(email.sentAt)}</Row>
|
||||
)}
|
||||
<Row label={t('details.received')}>
|
||||
{fullDate(email.receivedAt)}
|
||||
{deliveryDeltaMs > 60000 && (
|
||||
<span className="text-muted-foreground"> · {formatDelta(deliveryDeltaMs)} {t('details.delivery_time').toLowerCase()}</span>
|
||||
)}
|
||||
</Row>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{hasAuthSection && (
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.authentication_security')}</SectionHeader>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{auth?.spf && (
|
||||
<AuthChip name="SPF" result={auth.spf.result} extra={auth.spf.domain} tooltip={t('authentication.tooltip_spf')} />
|
||||
)}
|
||||
{auth?.dkim && (
|
||||
<AuthChip name="DKIM" result={auth.dkim.result} extra={auth.dkim.domain} tooltip={t('authentication.tooltip_dkim')} />
|
||||
)}
|
||||
{auth?.dmarc && (
|
||||
<AuthChip name="DMARC" result={auth.dmarc.result} extra={auth.dmarc.policy ? `${t('authentication.policy').toLowerCase()}: ${auth.dmarc.policy}` : undefined} tooltip={t('authentication.tooltip_dmarc')} />
|
||||
)}
|
||||
{auth?.iprev && (
|
||||
<AuthChip name={t('details.iprev')} result={auth.iprev.result} extra={auth.iprev.ip} />
|
||||
)}
|
||||
{email.spamScore !== undefined && (
|
||||
<span className={cn(
|
||||
"inline-flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs",
|
||||
email.spamScore > 5 ? "bg-red-500/[0.07] border-red-500/30" :
|
||||
email.spamScore > 2 ? "bg-amber-500/[0.07] border-amber-500/30" :
|
||||
"bg-green-500/[0.07] border-green-500/30",
|
||||
)}>
|
||||
<Shield className={cn(
|
||||
"w-3.5 h-3.5",
|
||||
email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
|
||||
email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
|
||||
"text-green-700 dark:text-green-400",
|
||||
)} />
|
||||
<span className="font-medium text-foreground">{t('authentication.spam_score')}</span>
|
||||
<span className={cn(
|
||||
"text-[10px] uppercase tracking-wider",
|
||||
email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
|
||||
email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
|
||||
"text-green-700 dark:text-green-400",
|
||||
)}>
|
||||
{email.spamScore.toFixed(1)}
|
||||
</span>
|
||||
{email.spamStatus && (
|
||||
<>
|
||||
<span className="text-muted-foreground/50">·</span>
|
||||
<span className="text-muted-foreground">{email.spamStatus}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{email.spamLLM && (
|
||||
<div className="mt-2 flex items-start gap-2 text-sm">
|
||||
{email.spamLLM.verdict === 'LEGITIMATE' ? <Brain className="w-4 h-4 mt-0.5 flex-shrink-0 text-green-700 dark:text-green-400" /> :
|
||||
email.spamLLM.verdict === 'SPAM' ? <ShieldAlert className="w-4 h-4 mt-0.5 flex-shrink-0 text-red-700 dark:text-red-400" /> :
|
||||
<AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0 text-amber-700 dark:text-amber-400" />}
|
||||
<div className="min-w-0">
|
||||
<span className={cn(
|
||||
"font-medium",
|
||||
email.spamLLM.verdict === 'LEGITIMATE' ? "text-green-700 dark:text-green-400" :
|
||||
email.spamLLM.verdict === 'SPAM' ? "text-red-700 dark:text-red-400" :
|
||||
"text-amber-700 dark:text-amber-400",
|
||||
)}>
|
||||
{email.spamLLM.verdict}
|
||||
</span>
|
||||
<span className="text-muted-foreground"> · {email.spamLLM.explanation}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{hasIdentifiers && (
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.identifiers_threading')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
{email.messageId && (
|
||||
<Row label={t('headers.message_id')} mono>{email.messageId}</Row>
|
||||
)}
|
||||
{email.inReplyTo && email.inReplyTo.length > 0 && (
|
||||
<Row label={t('details.in_reply_to')} mono>
|
||||
<div className="space-y-0.5">
|
||||
{email.inReplyTo.map((id, i) => <div key={i} className="break-all">{id}</div>)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.references && email.references.length > 0 && (
|
||||
<Row label={t('details.references')}>
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground transition-colors list-none flex items-center gap-1">
|
||||
<ChevronDown className="w-3 h-3 group-open:rotate-180 transition-transform" />
|
||||
{t(email.references.length === 1 ? 'previous_messages' : 'previous_messages_plural', { count: email.references.length })}
|
||||
</summary>
|
||||
<div className="mt-1 space-y-0.5 font-mono text-xs">
|
||||
{email.references.map((id, i) => <div key={i} className="break-all">{id}</div>)}
|
||||
</div>
|
||||
</details>
|
||||
</Row>
|
||||
)}
|
||||
{email.threadId && (
|
||||
<Row label={t('details.thread_id')} mono>{email.threadId}</Row>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.message_properties')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
{email.subject !== undefined && (
|
||||
<Row label={t('subject')}>{email.subject || <span className="italic text-muted-foreground">{t('details.no_subject')}</span>}</Row>
|
||||
)}
|
||||
<Row label={t('details.size')}>
|
||||
{formatFileSize(email.size)}
|
||||
{topMimeType && (
|
||||
<span className="text-muted-foreground"> · <span className="font-mono text-xs">{topMimeType}</span></span>
|
||||
)}
|
||||
</Row>
|
||||
{effectiveAttachments.length > 0 && (
|
||||
<Row label={t('attachments')}>
|
||||
{t('details.attachments_summary', {
|
||||
count: effectiveAttachments.length,
|
||||
size: formatFileSize(totalAttachmentSize),
|
||||
})}
|
||||
</Row>
|
||||
)}
|
||||
{email.accountLabel && (
|
||||
<Row label={t('details.account')}>{email.accountLabel}</Row>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{hasListInfo && (
|
||||
<section className="lg:col-span-2 min-w-0">
|
||||
<SectionHeader>{t('details.mailing_list')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
{listHeaders?.listId && (
|
||||
<Row label={t('details.list_id')} mono>{listHeaders.listId}</Row>
|
||||
)}
|
||||
{listHeaders?.listUnsubscribe?.preferred && (
|
||||
<Row label={t('details.list_unsubscribe')}>
|
||||
<span className="break-all">
|
||||
{listHeaders.listUnsubscribe.preferred === 'http'
|
||||
? listHeaders.listUnsubscribe.http
|
||||
: listHeaders.listUnsubscribe.mailto}
|
||||
</span>
|
||||
</Row>
|
||||
)}
|
||||
{listHeaders?.listHelp && (
|
||||
<Row label={t('details.list_help')}><span className="break-all">{listHeaders.listHelp}</span></Row>
|
||||
)}
|
||||
{listHeaders?.listPost && (
|
||||
<Row label={t('details.list_post')}><span className="break-all">{listHeaders.listPost}</span></Row>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
</div>
|
||||
{/* Attachments on the right (beside-sender mode) */}
|
||||
@@ -4648,6 +4344,22 @@ export function EmailViewer({
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
onClick={() => setShowFullHeaders(!showFullHeaders)}
|
||||
className="text-xs text-muted-foreground hover:text-foreground flex items-center gap-0.5 transition-colors ml-1"
|
||||
>
|
||||
{showFullHeaders ? (
|
||||
<>
|
||||
<ChevronUp className="w-3 h-3" />
|
||||
{t('hide_details')}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-3 h-3" />
|
||||
{t('show_details')}
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* Date/time + size on the right (mobile) */}
|
||||
@@ -4664,6 +4376,313 @@ export function EmailViewer({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Expandable Details (shared across mobile/tablet/desktop) */}
|
||||
{showFullHeaders && (() => {
|
||||
const translateAuthResult = (result?: string) => {
|
||||
const r = (result || '').toLowerCase();
|
||||
switch (r) {
|
||||
case 'pass': return t('authentication.result.pass');
|
||||
case 'fail': return t('authentication.result.fail');
|
||||
case 'softfail': return t('authentication.result.softfail');
|
||||
case 'neutral': return t('authentication.result.neutral');
|
||||
case 'permerror': return t('authentication.result.permerror');
|
||||
case 'temperror': return t('authentication.result.temperror');
|
||||
case 'none': return t('authentication.result.none');
|
||||
default: return result || '';
|
||||
}
|
||||
};
|
||||
const replyToDifferent = !!email.replyTo?.length &&
|
||||
(!email.from || email.replyTo[0].email !== email.from[0]?.email);
|
||||
const deliveryDeltaMs = email.sentAt && email.receivedAt
|
||||
? Math.abs(new Date(email.receivedAt).getTime() - new Date(email.sentAt).getTime())
|
||||
: 0;
|
||||
const formatDelta = (diff: number) => {
|
||||
const minutes = Math.floor(diff / 60000);
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const days = Math.floor(hours / 24);
|
||||
const dayUnit = days > 1 ? t('time.days') : t('time.day');
|
||||
const hourUnit = (hours % 24) > 1 ? t('time.hours') : t('time.hour');
|
||||
const minuteUnit = (minutes % 60) > 1 ? t('time.minutes') : t('time.minute');
|
||||
const minuteUnitSingle = minutes > 1 ? t('time.minutes') : t('time.minute');
|
||||
if (days > 0) return `${days} ${dayUnit} ${hours % 24} ${hourUnit}`;
|
||||
if (hours > 0) return `${hours} ${hourUnit} ${minutes % 60} ${minuteUnit}`;
|
||||
return `${minutes} ${minuteUnitSingle}`;
|
||||
};
|
||||
const fullDate = (iso?: string) => iso
|
||||
? formatDateTime(iso, timeFormat, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', second: '2-digit', timeZoneName: 'short' })
|
||||
: '-';
|
||||
const auth = email.authenticationResults;
|
||||
const totalAttachmentSize = effectiveAttachments.reduce((s, a) => s + (a.size || 0), 0);
|
||||
const topMimeType = email.bodyStructure?.type;
|
||||
const SectionHeader = ({ children }: { children: React.ReactNode }) => (
|
||||
<div className="text-[10px] font-semibold tracking-wider text-muted-foreground uppercase mb-1.5">
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
const Row = ({ label, children, mono }: { label: string; children: React.ReactNode; mono?: boolean }) => (
|
||||
<>
|
||||
<dt className="text-muted-foreground text-xs pt-1">{label}</dt>
|
||||
<dd className={cn(
|
||||
"text-sm text-foreground min-w-0 break-words",
|
||||
mono && "font-mono text-xs",
|
||||
)}>{children}</dd>
|
||||
</>
|
||||
);
|
||||
const AuthChip = ({ name, result, extra, tooltip }: { name: string; result?: string; extra?: React.ReactNode; tooltip?: string }) => {
|
||||
if (!result) return null;
|
||||
const status = getSecurityStatus(result);
|
||||
const Icon = status.icon === 'check' ? Check
|
||||
: status.icon === 'x' ? X
|
||||
: status.icon === 'alert' ? AlertTriangle
|
||||
: Minus;
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs",
|
||||
tooltip && "cursor-help",
|
||||
status.icon === 'check' && "bg-green-500/[0.07] border-green-500/30",
|
||||
status.icon === 'x' && "bg-red-500/[0.07] border-red-500/30",
|
||||
status.icon === 'alert' && "bg-amber-500/[0.07] border-amber-500/30",
|
||||
status.icon === 'minus' && "bg-muted/40 border-border",
|
||||
)}
|
||||
title={tooltip}
|
||||
>
|
||||
<Icon className={cn("w-3.5 h-3.5 flex-shrink-0", status.color)} />
|
||||
<span className="font-medium text-foreground">{name}</span>
|
||||
<span className={cn("text-[10px] uppercase tracking-wider", status.color)}>
|
||||
{translateAuthResult(result)}
|
||||
</span>
|
||||
{extra && (
|
||||
<>
|
||||
<span className="text-muted-foreground/50">·</span>
|
||||
<span className="text-muted-foreground">{extra}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const hasIdentifiers = !!(email.messageId || email.inReplyTo?.length || email.references?.length || email.threadId);
|
||||
const hasListInfo = !!(listHeaders?.listId || listHeaders?.listUnsubscribe || listHeaders?.listHelp || listHeaders?.listPost);
|
||||
const hasAuthSection = !!(auth?.spf || auth?.dkim || auth?.dmarc || auth?.iprev || email.spamScore !== undefined || email.spamLLM);
|
||||
|
||||
return (
|
||||
<div className="bg-background border-b border-border px-4 lg:px-6" style={{ paddingBlock: 'var(--density-header-py)' }}>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-5">
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.recipients_routing')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
<Row label={t('from')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
<RecipientPopover
|
||||
name={sender?.name}
|
||||
email={sender?.email || ''}
|
||||
displayLabel={sender?.name && sender?.email ? `${sender.name} <${sender.email}>` : undefined}
|
||||
onViewContact={handleViewContactSidebar}
|
||||
className="text-sm text-left"
|
||||
/>
|
||||
</div>
|
||||
</Row>
|
||||
{replyToDifferent && (
|
||||
<Row label={t('reply_to_label').replace(':', '')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{email.replyTo!.map((r, i) => (
|
||||
<RecipientPopover key={r.email + i} name={r.name} email={r.email} onViewContact={handleViewContactSidebar} className="text-sm" />
|
||||
))}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.to && email.to.length > 0 && (
|
||||
<Row label={t('to')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{renderClickableRecipients(email.to, currentUserEmail, t, handleViewContactSidebar, 100)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.cc && email.cc.length > 0 && (
|
||||
<Row label={t('cc')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{renderClickableRecipients(email.cc, currentUserEmail, t, handleViewContactSidebar, 100)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.bcc && email.bcc.length > 0 && (
|
||||
<Row label={t('bcc')}>
|
||||
<div className="flex flex-wrap items-center gap-1">
|
||||
{renderClickableRecipients(email.bcc, currentUserEmail, t, handleViewContactSidebar, 100)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.sentAt && (
|
||||
<Row label={t('details.sent')}>{fullDate(email.sentAt)}</Row>
|
||||
)}
|
||||
<Row label={t('details.received')}>
|
||||
{fullDate(email.receivedAt)}
|
||||
{deliveryDeltaMs > 60000 && (
|
||||
<span className="text-muted-foreground"> · {formatDelta(deliveryDeltaMs)} {t('details.delivery_time').toLowerCase()}</span>
|
||||
)}
|
||||
</Row>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{hasAuthSection && (
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.authentication_security')}</SectionHeader>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{auth?.spf && (
|
||||
<AuthChip name="SPF" result={auth.spf.result} extra={auth.spf.domain} tooltip={t('authentication.tooltip_spf')} />
|
||||
)}
|
||||
{auth?.dkim && (
|
||||
<AuthChip name="DKIM" result={auth.dkim.result} extra={auth.dkim.domain} tooltip={t('authentication.tooltip_dkim')} />
|
||||
)}
|
||||
{auth?.dmarc && (
|
||||
<AuthChip name="DMARC" result={auth.dmarc.result} extra={auth.dmarc.policy ? `${t('authentication.policy').toLowerCase()}: ${auth.dmarc.policy}` : undefined} tooltip={t('authentication.tooltip_dmarc')} />
|
||||
)}
|
||||
{auth?.iprev && (
|
||||
<AuthChip name={t('details.iprev')} result={auth.iprev.result} extra={auth.iprev.ip} />
|
||||
)}
|
||||
{email.spamScore !== undefined && (
|
||||
<span className={cn(
|
||||
"inline-flex items-center gap-1.5 px-2 py-1 rounded-md border text-xs",
|
||||
email.spamScore > 5 ? "bg-red-500/[0.07] border-red-500/30" :
|
||||
email.spamScore > 2 ? "bg-amber-500/[0.07] border-amber-500/30" :
|
||||
"bg-green-500/[0.07] border-green-500/30",
|
||||
)}>
|
||||
<Shield className={cn(
|
||||
"w-3.5 h-3.5",
|
||||
email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
|
||||
email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
|
||||
"text-green-700 dark:text-green-400",
|
||||
)} />
|
||||
<span className="font-medium text-foreground">{t('authentication.spam_score')}</span>
|
||||
<span className={cn(
|
||||
"text-[10px] uppercase tracking-wider",
|
||||
email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
|
||||
email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
|
||||
"text-green-700 dark:text-green-400",
|
||||
)}>
|
||||
{email.spamScore.toFixed(1)}
|
||||
</span>
|
||||
{email.spamStatus && (
|
||||
<>
|
||||
<span className="text-muted-foreground/50">·</span>
|
||||
<span className="text-muted-foreground">{email.spamStatus}</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{email.spamLLM && (
|
||||
<div className="mt-2 flex items-start gap-2 text-sm">
|
||||
{email.spamLLM.verdict === 'LEGITIMATE' ? <Brain className="w-4 h-4 mt-0.5 flex-shrink-0 text-green-700 dark:text-green-400" /> :
|
||||
email.spamLLM.verdict === 'SPAM' ? <ShieldAlert className="w-4 h-4 mt-0.5 flex-shrink-0 text-red-700 dark:text-red-400" /> :
|
||||
<AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0 text-amber-700 dark:text-amber-400" />}
|
||||
<div className="min-w-0">
|
||||
<span className={cn(
|
||||
"font-medium",
|
||||
email.spamLLM.verdict === 'LEGITIMATE' ? "text-green-700 dark:text-green-400" :
|
||||
email.spamLLM.verdict === 'SPAM' ? "text-red-700 dark:text-red-400" :
|
||||
"text-amber-700 dark:text-amber-400",
|
||||
)}>
|
||||
{email.spamLLM.verdict}
|
||||
</span>
|
||||
<span className="text-muted-foreground"> · {email.spamLLM.explanation}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
{hasIdentifiers && (
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.identifiers_threading')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
{email.messageId && (
|
||||
<Row label={t('headers.message_id')} mono>{email.messageId}</Row>
|
||||
)}
|
||||
{email.inReplyTo && email.inReplyTo.length > 0 && (
|
||||
<Row label={t('details.in_reply_to')} mono>
|
||||
<div className="space-y-0.5">
|
||||
{email.inReplyTo.map((id, i) => <div key={i} className="break-all">{id}</div>)}
|
||||
</div>
|
||||
</Row>
|
||||
)}
|
||||
{email.references && email.references.length > 0 && (
|
||||
<Row label={t('details.references')}>
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground transition-colors list-none flex items-center gap-1">
|
||||
<ChevronDown className="w-3 h-3 group-open:rotate-180 transition-transform" />
|
||||
{t(email.references.length === 1 ? 'previous_messages' : 'previous_messages_plural', { count: email.references.length })}
|
||||
</summary>
|
||||
<div className="mt-1 space-y-0.5 font-mono text-xs">
|
||||
{email.references.map((id, i) => <div key={i} className="break-all">{id}</div>)}
|
||||
</div>
|
||||
</details>
|
||||
</Row>
|
||||
)}
|
||||
{email.threadId && (
|
||||
<Row label={t('details.thread_id')} mono>{email.threadId}</Row>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="min-w-0">
|
||||
<SectionHeader>{t('details.message_properties')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
{email.subject !== undefined && (
|
||||
<Row label={t('subject')}>{email.subject || <span className="italic text-muted-foreground">{t('details.no_subject')}</span>}</Row>
|
||||
)}
|
||||
<Row label={t('details.size')}>
|
||||
{formatFileSize(email.size)}
|
||||
{topMimeType && (
|
||||
<span className="text-muted-foreground"> · <span className="font-mono text-xs">{topMimeType}</span></span>
|
||||
)}
|
||||
</Row>
|
||||
{effectiveAttachments.length > 0 && (
|
||||
<Row label={t('attachments')}>
|
||||
{t('details.attachments_summary', {
|
||||
count: effectiveAttachments.length,
|
||||
size: formatFileSize(totalAttachmentSize),
|
||||
})}
|
||||
</Row>
|
||||
)}
|
||||
{email.accountLabel && (
|
||||
<Row label={t('details.account')}>{email.accountLabel}</Row>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
{hasListInfo && (
|
||||
<section className="lg:col-span-2 min-w-0">
|
||||
<SectionHeader>{t('details.mailing_list')}</SectionHeader>
|
||||
<dl className="grid grid-cols-[7rem_1fr] gap-x-4 gap-y-1.5">
|
||||
{listHeaders?.listId && (
|
||||
<Row label={t('details.list_id')} mono>{listHeaders.listId}</Row>
|
||||
)}
|
||||
{listHeaders?.listUnsubscribe?.preferred && (
|
||||
<Row label={t('details.list_unsubscribe')}>
|
||||
<span className="break-all">
|
||||
{listHeaders.listUnsubscribe.preferred === 'http'
|
||||
? listHeaders.listUnsubscribe.http
|
||||
: listHeaders.listUnsubscribe.mailto}
|
||||
</span>
|
||||
</Row>
|
||||
)}
|
||||
{listHeaders?.listHelp && (
|
||||
<Row label={t('details.list_help')}><span className="break-all">{listHeaders.listHelp}</span></Row>
|
||||
)}
|
||||
{listHeaders?.listPost && (
|
||||
<Row label={t('details.list_post')}><span className="break-all">{listHeaders.listPost}</span></Row>
|
||||
)}
|
||||
</dl>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
|
||||
{/* S/MIME Status Banner */}
|
||||
{smimeStatus && (
|
||||
<div className="border-b border-border bg-muted/30">
|
||||
|
||||
Reference in New Issue
Block a user