Lucas RayanandClaude Opus 5
8b69521c76
The counts were computed inline in JSX where nothing could test them. The
sidebar matched a folder by a special-use role folders do not always carry, its
badges were fetched once and then froze - new mail did not raise them and
reading a message did not lower it - and the list header printed the size of
the loaded page, capped at 50, as the size of the folder. The rules now live in
mailCounts.ts behind tests, useFolders keeps them current from the server's
push and from this tab's own changes, and each filter chip carries its number.
Inline images never left the server: RenderMessage dropped every part a body
references as cid:, so mail written by any normal client rendered with broken
icons. They now come back as bounded data URIs, refusing image/svg+xml, and the
reader resolves them, sizes its frame from the message instead of a fixed
500px, and renders on the light surface mail assumes.
Reading mail no longer asks for a second factor - the mailbox is behind the
account's own password - while the console still requires one unconditionally,
now collected by a step-up that does not ask again for the password the session
in hand just proved. An admin sign-in issues the webmail session too, so
leaving the console is a link rather than another login.
Two defects found while testing the above:
- The admin sign-in checked the password and the second factor and never the
role, so any account that had enrolled a factor from its own settings could
obtain an admin-audience session.
- Session tokens carried nothing that varied below one second, so signing in
twice within the same second minted the identical token and collided with
the unique index on web_sessions.refresh_token_hash. A correct password
answered 500, and a double-clicked sign-in was enough to do it. Tokens now
carry a jti.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
580 lines
25 KiB
TypeScript
580 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import React, { use, useCallback, useEffect, useMemo, useState } from "react";
|
|
import Link from "next/link";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import {
|
|
Search,
|
|
Paperclip,
|
|
Reply,
|
|
Forward,
|
|
Inbox,
|
|
Image as ImageIcon,
|
|
Mail,
|
|
Clock,
|
|
MailOpen,
|
|
Download,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useI18n } from "../../../../../i18n/provider";
|
|
import { useMailEvents } from "../../../../../lib/useMailEvents";
|
|
import { useFolders, notifyMailStateChanged } from "../../../../../lib/useFolders";
|
|
import {
|
|
folderMetrics,
|
|
filterMessages,
|
|
messageCounts,
|
|
listHeaderCount,
|
|
applySeen,
|
|
type ListFilter,
|
|
} from "../../../../../lib/mailCounts";
|
|
import { sanitizeEmailHtml, blockRemoteImages, unblockRemoteImages } from "../../../../../lib/sanitizer";
|
|
import { resolveInlineImages, buildReaderDocument, type InlineImages } from "../../../../../lib/emailBody";
|
|
import { Button } from "../../../../../components/ui/Button";
|
|
|
|
interface MessageSummary {
|
|
uid: number;
|
|
subject: string;
|
|
sender_address: string;
|
|
from_display_name: string;
|
|
snippet: string;
|
|
size_bytes: number;
|
|
received_at: string;
|
|
has_attachments: boolean;
|
|
seen: boolean;
|
|
spam_verdict: string;
|
|
dmarc_result: string;
|
|
}
|
|
|
|
interface RenderedMessage {
|
|
uid: number;
|
|
subject: string;
|
|
from: string;
|
|
to: string[];
|
|
cc: string[];
|
|
date: string;
|
|
text: string;
|
|
html: string;
|
|
attachments: string[];
|
|
// The message's own pictures, keyed by Content-ID. Without these every
|
|
// cid: reference in the body is unresolvable and renders as a broken icon.
|
|
inline_images: InlineImages;
|
|
}
|
|
|
|
/** The initials shown in the sender avatar, from a display name or an address. */
|
|
function initials(name: string, address: string): string {
|
|
const source = (name || address || "?").trim();
|
|
const parts = source.replace(/[<>"]/g, "").split(/[\s.@_-]+/).filter(Boolean);
|
|
const letters = parts.slice(0, 2).map((p) => p[0]);
|
|
return (letters.join("") || "?").toUpperCase();
|
|
}
|
|
|
|
/**
|
|
* A timestamp as a mail client shows one: the time for today, the date for
|
|
* anything older. A fixed time-only format made every message in the list look
|
|
* like it arrived today.
|
|
*/
|
|
function listTimestamp(iso: string, locale: string): string {
|
|
const date = new Date(iso);
|
|
if (Number.isNaN(date.getTime())) return "";
|
|
const now = new Date();
|
|
const sameDay =
|
|
date.getDate() === now.getDate() &&
|
|
date.getMonth() === now.getMonth() &&
|
|
date.getFullYear() === now.getFullYear();
|
|
return sameDay
|
|
? date.toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" })
|
|
: date.toLocaleDateString(locale, { day: "2-digit", month: "short" });
|
|
}
|
|
|
|
function formatBytes(bytes: number): string {
|
|
if (!bytes || bytes < 0) return "";
|
|
const units = ["B", "KB", "MB", "GB"];
|
|
let value = bytes;
|
|
let unit = 0;
|
|
while (value >= 1024 && unit < units.length - 1) {
|
|
value /= 1024;
|
|
unit += 1;
|
|
}
|
|
return `${value < 10 && unit > 0 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
|
|
}
|
|
|
|
export default function MailFolderPage({ params }: { params: Promise<{ folder: string }> }) {
|
|
const { folder } = use(params);
|
|
// The locale is needed alongside the translator: timestamps are formatted
|
|
// against it, and a fixed format is why the list rendered every date the same
|
|
// way whatever language the interface was in.
|
|
const { t, locale } = useI18n();
|
|
|
|
const [messages, setMessages] = useState<MessageSummary[]>([]);
|
|
const [selected, setSelected] = useState<RenderedMessage | null>(null);
|
|
const [loadRemoteImages, setLoadRemoteImages] = useState(false);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [activeFilter, setActiveFilter] = useState<ListFilter>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
// The frame is sized from the message rather than pinned to a guess: 500px
|
|
// clipped every long message and left white space under every short one.
|
|
const [readerHeight, setReaderHeight] = useState(420);
|
|
|
|
const { folders } = useFolders();
|
|
const metrics = folderMetrics(folders, folder);
|
|
|
|
const loadMessages = useCallback(
|
|
async (search: string) => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const query = new URLSearchParams({ folder, ...(search ? { q: search } : {}) });
|
|
const res = await fetch(`/api/v1/mail/messages?${query}`, { cache: "no-store" });
|
|
if (res.status === 401) {
|
|
window.location.href = "/user/login";
|
|
return;
|
|
}
|
|
if (!res.ok) throw new Error(t("errors.serverError"));
|
|
setMessages(await res.json());
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t("errors.serverError"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
},
|
|
[folder, t]
|
|
);
|
|
|
|
useMailEvents(
|
|
useCallback(
|
|
(event) => {
|
|
if (event.type === "resync" || event.type === "EmailReceived") {
|
|
void loadMessages(searchQuery);
|
|
}
|
|
},
|
|
[loadMessages, searchQuery]
|
|
)
|
|
);
|
|
|
|
// One effect drives both the first load and the search, debounced. Having a
|
|
// separate mount effect as well meant every folder change fired two requests
|
|
// and the later one could be the stale answer.
|
|
useEffect(() => {
|
|
const handle = setTimeout(() => void loadMessages(searchQuery), searchQuery ? 250 : 0);
|
|
return () => clearTimeout(handle);
|
|
}, [searchQuery, loadMessages]);
|
|
|
|
// The reader frame reports its own height; nothing outside a sandboxed frame
|
|
// can measure it.
|
|
useEffect(() => {
|
|
const onMessage = (event: MessageEvent) => {
|
|
const data = event.data as { type?: string; height?: number } | null;
|
|
if (data?.type !== "lm:reader-height" || typeof data.height !== "number") return;
|
|
// Clamped so a message that reports something absurd cannot produce a
|
|
// frame kilometres tall or one collapsed to nothing.
|
|
setReaderHeight(Math.min(20000, Math.max(200, Math.ceil(data.height))));
|
|
};
|
|
window.addEventListener("message", onMessage);
|
|
return () => window.removeEventListener("message", onMessage);
|
|
}, []);
|
|
|
|
/**
|
|
* Records a read-state change on the server and everywhere it is displayed.
|
|
*
|
|
* Opening a message already marked it read server-side, but the list held its
|
|
* own optimistic copy and the sidebar badge held another, so the three
|
|
* disagreed until the page was reloaded.
|
|
*/
|
|
const setSeen = useCallback(
|
|
async (uid: number, seen: boolean, { persist }: { persist: boolean }) => {
|
|
setMessages((current) => applySeen(current, uid, seen));
|
|
notifyMailStateChanged();
|
|
if (!persist) return;
|
|
try {
|
|
await fetch("/api/v1/mail/seen", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ folder, uid, seen }),
|
|
});
|
|
} catch {
|
|
// The server is the authority; the next push or reload corrects this.
|
|
} finally {
|
|
notifyMailStateChanged();
|
|
}
|
|
},
|
|
[folder]
|
|
);
|
|
|
|
const openMessage = async (uid: number) => {
|
|
setLoadRemoteImages(false);
|
|
setReaderHeight(420);
|
|
try {
|
|
const res = await fetch(`/api/v1/mail/message/${uid}?folder=${encodeURIComponent(folder)}`, {
|
|
cache: "no-store",
|
|
});
|
|
if (!res.ok) throw new Error(t("errors.serverError"));
|
|
setSelected(await res.json());
|
|
// Fetching the message is what marks it read on the server, so this only
|
|
// brings the list and the badges into line with what already happened.
|
|
void setSeen(uid, true, { persist: false });
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : t("errors.serverError"));
|
|
}
|
|
};
|
|
|
|
const filteredMessages = filterMessages(messages, activeFilter);
|
|
const counts = messageCounts(messages);
|
|
const header = listHeaderCount({
|
|
folder: metrics,
|
|
loaded: counts.loaded,
|
|
searching: searchQuery.trim().length > 0,
|
|
});
|
|
const selectedRow = messages.find((m) => m.uid === selected?.uid);
|
|
|
|
/**
|
|
* The document the reader frame renders.
|
|
*
|
|
* Order matters: sanitise first so nothing downstream handles untrusted
|
|
* markup, then resolve the message's own inline parts, then block or restore
|
|
* remote sources - which is the only part the reader chooses.
|
|
*/
|
|
const readerDocument = useMemo(() => {
|
|
if (!selected) return null;
|
|
if (!selected.html) return null;
|
|
const sanitized = sanitizeEmailHtml(selected.html);
|
|
if (!sanitized) return null;
|
|
const withInline = resolveInlineImages(sanitized, selected.inline_images ?? {});
|
|
const body = loadRemoteImages ? unblockRemoteImages(withInline) : blockRemoteImages(withInline);
|
|
return buildReaderDocument(body);
|
|
}, [selected, loadRemoteImages]);
|
|
|
|
// Whether anything was actually held back, so the privacy banner is not shown
|
|
// over a message that has no remote content at all.
|
|
const hasBlockedContent = useMemo(() => {
|
|
if (!selected?.html) return false;
|
|
const sanitized = resolveInlineImages(
|
|
sanitizeEmailHtml(selected.html),
|
|
selected.inline_images ?? {}
|
|
);
|
|
return blockRemoteImages(sanitized) !== sanitized;
|
|
}, [selected]);
|
|
|
|
const chips: { key: ListFilter; label: string; count: number }[] = [
|
|
{ key: null, label: t("mail.allMessages"), count: header.count },
|
|
{ key: "unread", label: t("mail.unreadFilter"), count: counts.unread },
|
|
{ key: "attachment", label: t("mail.attachmentsFilter"), count: counts.withAttachments },
|
|
];
|
|
|
|
return (
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Messages List Column */}
|
|
<div
|
|
className={`${selected ? "hidden md:flex" : "flex"} w-full md:w-[22rem] lg:w-96 border-r border-slate-800/80 flex-col bg-slate-900/40 backdrop-blur-md md:flex-shrink-0`}
|
|
>
|
|
{/* Folder heading, with the counts that belong to the folder rather
|
|
than to the page of it that happens to be loaded. */}
|
|
<div className="px-3.5 pt-3.5 flex items-baseline justify-between gap-2">
|
|
<h2 className="text-sm font-bold text-slate-100 capitalize truncate">{folder}</h2>
|
|
<span className="text-[11px] text-slate-400 font-mono tabular-nums flex-shrink-0">
|
|
{header.isFolderTotal
|
|
? t("mail.messagesInFolder", { count: header.count })
|
|
: t("mail.searchMatches", { count: header.count })}
|
|
{metrics.unread > 0 && (
|
|
<span className="text-indigo-300"> · {t("mail.unreadCount", { count: metrics.unread })}</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Search Bar & Filter Chips */}
|
|
<div className="p-3.5 border-b border-slate-800 space-y-2.5">
|
|
<div className="relative">
|
|
<Search className="w-4 h-4 absolute left-3 top-3 text-slate-400" />
|
|
<input
|
|
type="search"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
placeholder={t("mail.searchPlaceholder")}
|
|
aria-label={t("common.search")}
|
|
className="w-full pl-9 pr-3 py-2 text-xs rounded-xl bg-slate-900/90 border border-slate-800 text-white placeholder-slate-500 focus:outline-none focus:border-indigo-500 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-1.5 text-[11px] overflow-x-auto pb-0.5">
|
|
{chips.map((chip) => (
|
|
<button
|
|
key={chip.label}
|
|
type="button"
|
|
aria-pressed={activeFilter === chip.key}
|
|
onClick={() => setActiveFilter(chip.key)}
|
|
className={`px-2.5 py-1 rounded-lg font-medium transition-all whitespace-nowrap flex items-center gap-1.5 ${
|
|
activeFilter === chip.key
|
|
? "bg-indigo-600 text-white shadow-sm"
|
|
: "bg-slate-800/60 text-slate-400 hover:text-slate-200"
|
|
}`}
|
|
>
|
|
<span>{chip.label}</span>
|
|
{/* Every chip carries its own number: two of the three used to
|
|
filter to a count nothing on screen disclosed. */}
|
|
<span className="tabular-nums opacity-80">{chip.count}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message Items List */}
|
|
<div className="flex-1 overflow-y-auto divide-y divide-slate-800/50">
|
|
{loading ? (
|
|
<div className="p-6 text-center text-xs text-slate-500 animate-pulse flex items-center justify-center gap-2">
|
|
<Clock className="w-4 h-4 text-indigo-400 animate-spin" />
|
|
<span>{t("common.loading")}</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="p-4 text-xs text-rose-400 bg-rose-500/10 m-3 rounded-xl border border-rose-500/20">
|
|
{error}
|
|
</div>
|
|
) : filteredMessages.length === 0 ? (
|
|
<div className="p-8 text-center text-xs text-slate-500 flex flex-col items-center gap-2">
|
|
<Inbox className="w-8 h-8 text-slate-600" />
|
|
<span>{searchQuery ? t("mail.noMatches") : t("mail.noMessages")}</span>
|
|
</div>
|
|
) : (
|
|
filteredMessages.map((msg) => {
|
|
const isSelected = selected?.uid === msg.uid;
|
|
return (
|
|
<button
|
|
key={msg.uid}
|
|
onClick={() => void openMessage(msg.uid)}
|
|
className={`w-full text-left p-3.5 transition-all duration-150 flex gap-3 relative ${
|
|
isSelected ? "bg-indigo-600/15" : "hover:bg-slate-800/30"
|
|
}`}
|
|
>
|
|
{isSelected && <span className="absolute left-0 top-0 bottom-0 w-[3px] bg-indigo-500" />}
|
|
{/* An unread row is marked by a dot in a reserved column, so
|
|
the subject does not shift sideways when it is read. */}
|
|
<span className="mt-1.5 w-2 flex-shrink-0">
|
|
{!msg.seen && <span className="block w-2 h-2 rounded-full bg-indigo-400" />}
|
|
</span>
|
|
<span
|
|
className={`mt-0.5 w-8 h-8 rounded-full flex-shrink-0 flex items-center justify-center text-[10px] font-bold ${
|
|
msg.seen
|
|
? "bg-slate-800 text-slate-400"
|
|
: "bg-indigo-500/25 text-indigo-200 border border-indigo-500/30"
|
|
}`}
|
|
aria-hidden="true"
|
|
>
|
|
{initials(msg.from_display_name, msg.sender_address)}
|
|
</span>
|
|
|
|
<span className="min-w-0 flex-1">
|
|
<span className="flex items-center justify-between gap-2 mb-0.5">
|
|
<span
|
|
className={`text-xs truncate ${
|
|
msg.seen ? "text-slate-300 font-medium" : "text-white font-bold"
|
|
}`}
|
|
>
|
|
{msg.from_display_name || msg.sender_address}
|
|
</span>
|
|
<span className="text-[10px] text-slate-500 font-mono flex-shrink-0 tabular-nums">
|
|
{listTimestamp(msg.received_at, locale)}
|
|
</span>
|
|
</span>
|
|
<span
|
|
className={`text-xs truncate flex items-center gap-1.5 mb-0.5 ${
|
|
msg.seen ? "text-slate-300" : "font-semibold text-slate-100"
|
|
}`}
|
|
>
|
|
<span className="truncate">{msg.subject || t("mail.noSubject")}</span>
|
|
{msg.has_attachments && (
|
|
<Paperclip className="w-3 h-3 text-slate-400 flex-shrink-0" />
|
|
)}
|
|
</span>
|
|
<span className="block text-[11px] text-slate-500 truncate leading-relaxed">
|
|
{msg.snippet}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message Reader Column */}
|
|
<div
|
|
className={`${selected ? "flex" : "hidden md:flex"} flex-1 flex-col bg-dark-bg overflow-y-auto`}
|
|
>
|
|
<AnimatePresence mode="wait">
|
|
{selected ? (
|
|
<motion.article
|
|
key={selected.uid}
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -8 }}
|
|
transition={{ duration: 0.15 }}
|
|
className="w-full max-w-3xl mx-auto px-4 sm:px-6 py-5 space-y-5"
|
|
>
|
|
{/* Toolbar: closing, replying and read state all in one row, so
|
|
the reader is not the only pane with no way out of itself. */}
|
|
<div className="flex items-center justify-between gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelected(null)}
|
|
className="flex items-center gap-1.5 rounded-lg border border-slate-800 bg-slate-900/70 px-2.5 py-1.5 text-xs text-slate-300 hover:text-white hover:border-slate-700 transition-colors"
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
<span>{t("mail.backToList")}</span>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
const nowSeen = !(selectedRow?.seen ?? true);
|
|
void setSeen(selected.uid, nowSeen, { persist: true });
|
|
}}
|
|
className="flex items-center gap-1.5 rounded-lg border border-slate-800 bg-slate-900/70 px-2.5 py-1.5 text-slate-300 hover:text-white hover:border-slate-700 transition-colors"
|
|
>
|
|
<MailOpen className="w-3.5 h-3.5" />
|
|
<span className="hidden sm:inline">
|
|
{selectedRow?.seen === false ? t("mail.markRead") : t("mail.markUnread")}
|
|
</span>
|
|
</button>
|
|
<Link
|
|
href={`/user/compose?replyTo=${encodeURIComponent(selected.from)}&subject=${encodeURIComponent(selected.subject)}`}
|
|
>
|
|
<Button variant="primary" size="sm">
|
|
<Reply className="w-3.5 h-3.5" />
|
|
<span>{t("mail.reply")}</span>
|
|
</Button>
|
|
</Link>
|
|
{/* Forward carries the subject but no recipient: it used to
|
|
prefill the original sender, which sends the message
|
|
straight back to whoever wrote it. */}
|
|
<Link href={`/user/compose?subject=${encodeURIComponent(selected.subject)}`}>
|
|
<Button variant="secondary" size="sm">
|
|
<Forward className="w-3.5 h-3.5" />
|
|
<span className="hidden sm:inline">{t("mail.forward")}</span>
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<header className="space-y-4">
|
|
<h1 className="text-lg md:text-xl font-bold text-white tracking-tight leading-snug break-words">
|
|
{selected.subject || t("mail.noSubject")}
|
|
</h1>
|
|
|
|
<div className="flex items-start gap-3">
|
|
<div className="w-9 h-9 rounded-full bg-gradient-to-tr from-indigo-500/30 to-cyan-500/20 border border-indigo-500/30 text-indigo-200 flex items-center justify-center text-[11px] font-bold flex-shrink-0">
|
|
{initials(selectedRow?.from_display_name ?? "", selected.from)}
|
|
</div>
|
|
<div className="min-w-0 flex-1 text-xs">
|
|
<div className="flex flex-wrap items-baseline gap-x-2">
|
|
<span className="font-semibold text-slate-100 break-all">{selected.from}</span>
|
|
<span className="text-[11px] text-slate-500 font-mono">
|
|
{selected.date
|
|
? new Date(selected.date).toLocaleString(locale)
|
|
: selectedRow
|
|
? new Date(selectedRow.received_at).toLocaleString(locale)
|
|
: ""}
|
|
</span>
|
|
</div>
|
|
{/* Recipients are labelled with translated headings; they
|
|
used to be introduced by a Portuguese word regardless of
|
|
the interface language. */}
|
|
{selected.to.length > 0 && (
|
|
<div className="text-[11px] text-slate-400 break-all">
|
|
<span className="text-slate-500">{t("ui.toRecipients")}: </span>
|
|
{selected.to.join(", ")}
|
|
</div>
|
|
)}
|
|
{selected.cc.length > 0 && (
|
|
<div className="text-[11px] text-slate-400 break-all">
|
|
<span className="text-slate-500">{t("ui.ccRecipients")}: </span>
|
|
{selected.cc.join(", ")}
|
|
</div>
|
|
)}
|
|
{selectedRow && selectedRow.size_bytes > 0 && (
|
|
<div className="text-[11px] text-slate-500 font-mono">
|
|
{formatBytes(selectedRow.size_bytes)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Attachment Download Chips */}
|
|
{selected.attachments.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 text-xs">
|
|
{selected.attachments.map((filename, idx) => (
|
|
<a
|
|
key={`${filename}-${idx}`}
|
|
href={`/api/v1/mail/message/${selected.uid}/attachment/${encodeURIComponent(filename)}?folder=${encodeURIComponent(folder)}`}
|
|
download={filename}
|
|
className="group max-w-full px-3 py-2 rounded-xl bg-slate-900/80 border border-slate-800 hover:border-indigo-500/60 hover:bg-slate-900 text-slate-200 flex items-center gap-2 transition-all"
|
|
>
|
|
<Paperclip className="w-3.5 h-3.5 text-indigo-400 flex-shrink-0" />
|
|
<span className="truncate font-mono text-[11px]">{filename}</span>
|
|
<Download className="w-3.5 h-3.5 text-slate-500 group-hover:text-indigo-300 flex-shrink-0" />
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
|
|
{/* Remote content banner, shown only when something was actually
|
|
held back rather than over every message. */}
|
|
{hasBlockedContent && (
|
|
<div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/25 flex flex-wrap items-center justify-between gap-2 text-xs text-amber-200">
|
|
<span className="flex items-center gap-2">
|
|
<ImageIcon className="w-4 h-4 text-amber-400 flex-shrink-0" />
|
|
<span>{t("mail.remoteContentBlocked")}</span>
|
|
</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => setLoadRemoteImages(!loadRemoteImages)}
|
|
className="px-3 py-1 rounded-lg bg-amber-500/20 hover:bg-amber-500/30 text-amber-100 font-medium transition-colors"
|
|
>
|
|
{loadRemoteImages ? t("mail.imagesEnabled") : t("mail.loadImages")}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Message Body */}
|
|
{readerDocument ? (
|
|
<div className="bg-white rounded-2xl overflow-hidden border border-slate-800 shadow-xl">
|
|
<iframe
|
|
title={t("ui.messageBody")}
|
|
srcDoc={readerDocument}
|
|
/* allow-scripts, and deliberately not allow-same-origin: the
|
|
frame stays on an opaque origin - it cannot read a cookie
|
|
or touch this document - while still running the few lines
|
|
that report its height and open links outward. Message
|
|
markup is sanitised before it gets here. */
|
|
sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
|
|
referrerPolicy="no-referrer"
|
|
style={{ height: `${readerHeight}px` }}
|
|
className="w-full border-0 block"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="rounded-2xl border border-slate-800 bg-slate-900/60 p-5">
|
|
<pre className="whitespace-pre-wrap break-words text-sm text-slate-200 font-sans leading-relaxed">
|
|
{selected.text || t("mail.emptyBody")}
|
|
</pre>
|
|
</div>
|
|
)}
|
|
</motion.article>
|
|
) : (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="flex-1 flex flex-col items-center justify-center text-slate-500 text-sm gap-3 py-20 px-6 text-center"
|
|
>
|
|
<Mail className="w-12 h-12 text-slate-700 stroke-1" />
|
|
{/* This pane used to say "No messages" even with a full list
|
|
beside it: the empty reader is not an empty folder. */}
|
|
<span>{t("mail.selectAMessage")}</span>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|