@rapidmx/web-client 0.15.1 → 0.17.0

package/apps/shared/components/mail/reading/MessageMoreMenu.tsx

@@ -0,0 +1,258 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import {
+    HiOutlineArrowDownTray,
+    HiOutlineArrowUturnLeft,
+    HiOutlineArrowUturnRight,
+    HiOutlineCodeBracket,
+    HiOutlineCog6Tooth,
+    HiOutlineDocumentText,
+    HiOutlineEllipsisHorizontal,
+    HiOutlineEnvelope,
+    HiOutlineEnvelopeOpen,
+    HiOutlineEye,
+    HiOutlineFlag,
+    HiOutlineFunnel,
+    HiOutlineHandRaised,
+    HiOutlineInboxArrowDown,
+    HiOutlineInformationCircle,
+    HiOutlineNoSymbol,
+    HiOutlinePrinter,
+    HiOutlineShieldCheck,
+    HiOutlineShieldExclamation,
+    HiOutlineTrash,
+} from "react-icons/hi2";
+import MenuButton, { MenuItemSpec, MenuSectionSpec } from "../MenuButton.js";
+
+/** What each row of the menu does - the reading pane's own handlers. */
+export interface MessageMenuActions {
+    replyAll: () => void;
+    forward: () => void;
+    deleteMessage: () => void;
+    toggleRead: () => void;
+    toggleFlag: () => void;
+    reportJunk: () => void;
+    reportPhishing: () => void;
+    notJunk: () => void;
+    notJunkAndTrust: () => void;
+    blockSender: () => void;
+    neverBlockSender: () => void;
+    print: () => void;
+    viewSource: () => void;
+    viewDetails: () => void;
+    saveAsEml: () => void;
+    createRule: () => void;
+}
+
+export interface MessageMoreMenuProps {
+    actions: MessageMenuActions;
+    /** The sender's address the Block rows name. */
+    senderAddress: string;
+    read: boolean;
+    flagged: boolean;
+    /** The reader may change this mailbox's messages and filters (it is not a view-only share). */
+    writable: boolean;
+    /** Something is already being done to the message: its rows wait. */
+    busy: boolean;
+    inJunk: boolean;
+    /** The message is in Deleted Items: the Delete row reads "Delete permanently". */
+    inDeletedItems: boolean;
+    /** Mail the reader sent: it is not junk, and its sender is the reader. */
+    sent: boolean;
+    /** The sender is one of the reader's own addresses, which is not blocked. */
+    ownSender: boolean;
+    /** The reader may add a sender to this mailbox's Safe Senders: they have full access, or the server has not said which access they have (it then refuses, with its reason). */
+    canTrustSender: boolean;
+    /** Why the message cannot be printed right now (an encrypted one that is locked or still opening), or `undefined`. */
+    printReason: string | undefined;
+    /** The compose window is opening for a reply or forward: Reply all and Forward wait for it. */
+    composing: boolean;
+    /** The classes of the round "..." button - the reading pane's own icon-button look. */
+    triggerClassName: string;
+}
+
+const VIEW_ONLY = "View-only mailbox";
+
+/** A row, disabled with `reason` (shown under the label, where a keyboard or phone user sees it as well) when there is one. */
+function row(key: string, label: string, icon: React.ReactNode, onSelect: () => void, reason?: string, extra: Partial<MenuItemSpec> = {}): MenuItemSpec {
+    return { key, label, icon, onSelect, disabled: reason !== undefined, description: reason, ...extra } as MenuItemSpec;
+}
+
+/** The sections of the menu - Outlook's "More actions", cut to what this product really does. */
+export function buildMessageMenu(props: MessageMoreMenuProps): MenuSectionSpec[] {
+    const { actions, read, flagged, writable, busy, inJunk, inDeletedItems, sent, ownSender, printReason, composing } = props;
+    // The reason a row that changes the message is unavailable, if it is: the first that applies wins.
+    const changeReason = !writable ? VIEW_ONLY : undefined;
+    const junkReason = changeReason ?? (sent ? "Not available for mail you sent" : inJunk ? "Already in Junk Email" : undefined);
+    const blockReason = changeReason ?? (sent ? "Not available for mail you sent" : ownSender ? "This is your own address" : undefined);
+    const waiting = (reason: string | undefined) => reason ?? (busy ? "Working on this message" : undefined);
+    const trustLabel = `Not junk, and always trust ${props.senderAddress}`;
+    const blockLabel = `Block ${props.senderAddress}`;
+    const neverBlockLabel = `Never block ${props.senderAddress}`;
+    return [
+        {
+            key: "message",
+            items: [
+                {
+                    key: "reply-actions",
+                    label: "Other reply actions",
+                    icon: <HiOutlineArrowUturnLeft size={16} />,
+                    submenu: [
+                        {
+                            key: "reply-actions-items",
+                            items: [
+                                row("reply-all", "Reply all", <HiOutlineArrowUturnLeft size={16} />, actions.replyAll, composing ? "Opening the compose window" : undefined),
+                                row("forward", "Forward", <HiOutlineArrowUturnRight size={16} />, actions.forward, composing ? "Opening the compose window" : undefined),
+                            ],
+                        },
+                    ],
+                },
+                row(
+                    "delete",
+                    // In Deleted Items there is nowhere further to move it to: Delete is the permanent one, and asks first.
+                    inDeletedItems ? "Delete permanently" : "Delete",
+                    <HiOutlineTrash size={16} />,
+                    actions.deleteMessage,
+                    waiting(changeReason),
+                ),
+                row(
+                    "toggle-read",
+                    read ? "Mark as unread" : "Mark as read",
+                    read ? <HiOutlineEnvelope size={16} /> : <HiOutlineEnvelopeOpen size={16} />,
+                    actions.toggleRead,
+                    waiting(changeReason),
+                ),
+                row("toggle-flag", flagged ? "Unflag" : "Flag", <HiOutlineFlag size={16} />, actions.toggleFlag, waiting(changeReason)),
+            ],
+        },
+        {
+            key: "sender",
+            items: [
+                {
+                    key: "report",
+                    label: "Report",
+                    icon: <HiOutlineNoSymbol size={16} />,
+                    submenu: [
+                        {
+                            key: "report-items",
+                            items: [
+                                row("report-junk", "Report junk", <HiOutlineNoSymbol size={16} />, actions.reportJunk, waiting(junkReason)),
+                                row("report-phishing", "Report phishing", <HiOutlineShieldExclamation size={16} />, actions.reportPhishing, waiting(junkReason)),
+                                // In Junk Email the way back: to the Inbox, telling the spam filter it was wrong - and, when the reader may, trusting the sender.
+                                ...(inJunk
+                                    ? [
+                                          row("not-junk", "Not junk", <HiOutlineInboxArrowDown size={16} />, actions.notJunk, waiting(changeReason)),
+                                          ...(props.canTrustSender && !ownSender
+                                              ? [
+                                                    row("not-junk-trust", trustLabel, <HiOutlineShieldCheck size={16} />, actions.notJunkAndTrust, waiting(changeReason), {
+                                                        title: trustLabel,
+                                                    }),
+                                                ]
+                                              : []),
+                                      ]
+                                    : []),
+                            ],
+                        },
+                    ],
+                },
+                {
+                    key: "block",
+                    label: "Block",
+                    icon: <HiOutlineHandRaised size={16} />,
+                    submenu: [
+                        {
+                            key: "block-items",
+                            items: [
+                                row("block-sender", blockLabel, <HiOutlineHandRaised size={16} />, actions.blockSender, waiting(blockReason), { title: blockLabel }),
+                                row(
+                                    "never-block-sender",
+                                    neverBlockLabel,
+                                    <HiOutlineShieldCheck size={16} />,
+                                    actions.neverBlockSender,
+                                    waiting(blockReason),
+                                    { title: neverBlockLabel },
+                                ),
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: "output",
+            items: [
+                row("print", "Print", <HiOutlinePrinter size={16} />, actions.print, printReason),
+                {
+                    key: "view",
+                    label: "View",
+                    icon: <HiOutlineEye size={16} />,
+                    submenu: [
+                        {
+                            key: "view-items",
+                            items: [
+                                row("view-source", "View message source", <HiOutlineCodeBracket size={16} />, actions.viewSource),
+                                row("view-details", "Message details", <HiOutlineInformationCircle size={16} />, actions.viewDetails),
+                            ],
+                        },
+                    ],
+                },
+                {
+                    key: "save-as",
+                    label: "Save as",
+                    icon: <HiOutlineArrowDownTray size={16} />,
+                    submenu: [
+                        {
+                            key: "save-as-items",
+                            items: [
+                                row("save-eml", "Save as .eml", <HiOutlineEnvelope size={16} />, actions.saveAsEml),
+                                row("save-pdf", "Save as PDF", <HiOutlineDocumentText size={16} />, actions.print, printReason, {
+                                    description: printReason ?? "Opens the print dialog: choose Save as PDF",
+                                }),
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: "advanced",
+            items: [
+                {
+                    key: "advanced-actions",
+                    label: "Advanced actions",
+                    icon: <HiOutlineCog6Tooth size={16} />,
+                    submenu: [
+                        {
+                            key: "advanced-items",
+                            items: [row("create-rule", "Create rule", <HiOutlineFunnel size={16} />, actions.createRule, changeReason)],
+                        },
+                    ],
+                },
+            ],
+        },
+    ];
+}
+
+/**
+ * The "..." at the end of a message card's icon row: Outlook's More actions menu, holding the actions there is no room for beside the
+ * message and the ones that are less often wanted. An ARIA menu (`MenuButton`): arrows, Home and End move, Right or Enter opens a submenu, Left or
+ * Escape leaves it (Escape at the top closes the menu and the focus goes back to this button), and a click outside closes it. A row that cannot be used right now
+ * is disabled and says why under its label.
+ */
+export default function MessageMoreMenu(props: MessageMoreMenuProps) {
+    return (
+        <MenuButton
+            iconOnly
+            label="More actions"
+            aria-label="More actions"
+            title="More actions"
+            icon={<HiOutlineEllipsisHorizontal size={16} aria-hidden="true" />}
+            className={props.triggerClassName}
+            sections={buildMessageMenu(props)}
+            width={288}
+        />
+    );
+}

package/apps/shared/components/mail/reading/MessageSourceDialog.tsx

@@ -0,0 +1,79 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useMemo } from "react";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import CopyButton from "@rapidmx/react-shared/components/buttons/CopyButton.js";
+import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
+import { MAX_SOURCE_DISPLAY_CHARS, headerText, sourceText } from "./messageExport.js";
+
+/** What the dialog is showing a message's source for: the whole of it, or only its header lines ("Message details"). */
+export type SourceMode = "source" | "headers";
+
+/** What has been fetched of the raw message: on its way, here, or refused. */
+export type SourceState = { status: "loading" } | { status: "ready"; raw: string } | { status: "error"; message: string };
+
+export interface MessageSourceDialogProps {
+    open: boolean;
+    onClose: () => void;
+    mode: SourceMode;
+    source: SourceState;
+    /** The message is end-to-end encrypted: what is shown is the ciphertext the server holds, and the dialog says so. */
+    encrypted: boolean;
+}
+
+const TITLES: Record<SourceMode, string> = { source: "Message source", headers: "Message details" };
+
+/**
+ * A message's raw source (or just its headers) in a full-window dialog, in a monospace block that can be scrolled and selected, with a Copy
+ * button. It is the RFC 5322 text exactly as the server stores it - for an encrypted message that is the encrypted message, never a
+ * decrypted one, and the dialog says so. A very long source is cut for display (`MAX_SOURCE_DISPLAY_CHARS`); Copy has all of it.
+ */
+export default function MessageSourceDialog({ open, onClose, mode, source, encrypted }: MessageSourceDialogProps) {
+    const text = useMemo(() => {
+        if (source.status !== "ready") {
+            return "";
+        }
+        return mode === "headers" ? headerText(source.raw) : sourceText(source.raw);
+    }, [source, mode]);
+    const cut = text.length > MAX_SOURCE_DISPLAY_CHARS;
+    const title = TITLES[mode];
+    return (
+        <Drawer open={open} onClose={onClose} title={title} fullScreen>
+            <div className="flex flex-col gap-3 text-sm">
+                {encrypted && (
+                    <p role="note" className="py-2 px-3 rounded-sm bg-surface-alt text-text">
+                        This message is encrypted. This is the encrypted message exactly as the server stores it; it is not decrypted here.
+                    </p>
+                )}
+                {source.status === "loading" && (
+                    <p role="status" className="text-text-muted">
+                        Loading the message&hellip;
+                    </p>
+                )}
+                {source.status === "error" && <Alert>{source.message}</Alert>}
+                {source.status === "ready" && (
+                    <>
+                        <div className="flex flex-wrap items-center gap-3">
+                            <CopyButton value={text} label={`Copy the ${mode === "headers" ? "message headers" : "message source"}`} />
+                            {cut && (
+                                <span className="text-xs text-text-muted">
+                                    Showing the first {MAX_SOURCE_DISPLAY_CHARS.toLocaleString()} of {text.length.toLocaleString()} characters. Copy and Save as
+                                    .eml keep all of it.
+                                </span>
+                            )}
+                        </div>
+                        <pre
+                            tabIndex={0}
+                            aria-label={title}
+                            className="m-0 max-h-[70vh] overflow-auto rounded-sm border border-border bg-surface-alt p-3 font-mono text-xs whitespace-pre-wrap break-all"
+                        >
+                            {cut ? text.slice(0, MAX_SOURCE_DISPLAY_CHARS) : text}
+                        </pre>
+                    </>
+                )}
+            </div>
+        </Drawer>
+    );
+}

package/apps/shared/components/mail/reading/PendingMessageCard.tsx

@@ -0,0 +1,68 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import type { OutgoingReply } from "../../../mail/outbox/outgoingReplies.js";
+import MailAddress, { RecipientLine } from "../MailAddress.js";
+import MessageBody from "./MessageBody.js";
+import { BODY_FONT_STYLE, CardShell, SenderAvatar } from "./MessageCard.js";
+
+/**
+ * A reply or forward that has just been sent, drawn where its message will be once the server has filed it: the sender, who it went to, its body as
+ * it was composed, and one line saying where it is - "Sending...", "Sent", or, when it did not go, "Not sent: <why>" with the same ways out the
+ * pop-up offers (Retry, Open draft ...). It reads like the message's own card, so the real message replaces it without the thread rearranging.
+ *
+ * The body goes through the reading pane's own sanitizing frame (`MessageBody`), exactly as a received message's does.
+ */
+export default function PendingMessageCard({
+    reply,
+    headerRef,
+}: {
+    reply: OutgoingReply;
+    /** Registered so the pane can put the focus here when the message first appears. Focusable, but not in the tab order. */
+    headerRef: (node: HTMLHeadingElement | null) => void;
+}) {
+    const failed = reply.state === "failed";
+    return (
+        <CardShell>
+            <div className="flex items-center gap-3 px-4 py-3">
+                <SenderAvatar from={reply.sender} />
+                <div className="flex-1 min-w-0">
+                    <div className="flex flex-wrap items-baseline justify-between gap-x-2 text-sm">
+                        <h2 ref={headerRef} tabIndex={-1} style={BODY_FONT_STYLE} className="flex-1 min-w-[13rem] font-semibold outline-none focus-visible:outline-2 focus-visible:outline-primary">
+                            <MailAddress recipient={reply.sender} />
+                        </h2>
+                        <div
+                            // Its own element for each: an alert is announced when it appears, which a status that changed its role would not be.
+                            key={failed ? "failed" : "progress"}
+                            role={failed ? "alert" : "status"}
+                            data-testid="pending-message-status"
+                            data-state={reply.state}
+                            className={["flex items-center gap-1.5 text-xs shrink-0", failed ? "font-semibold text-danger" : "text-text-muted"].join(" ")}
+                        >
+                            {reply.state === "sending" && <span aria-hidden="true" className="rr-sending-dot h-1.5 w-1.5 shrink-0 rounded-full bg-primary" />}
+                            <span>{failed ? `Not sent: ${reply.failure}` : reply.state === "sending" ? "Sending…" : "Sent"}</span>
+                        </div>
+                    </div>
+                    <RecipientLine label="To" recipients={reply.to} />
+                    <RecipientLine label="Cc" recipients={reply.cc} />
+                    <RecipientLine label="Bcc" recipients={reply.bcc} />
+                </div>
+            </div>
+            {failed && (
+                <div className="flex flex-wrap gap-2 px-4 pb-3">
+                    {reply.actions.map((action) => (
+                        <Button key={action.label} type="button" variant="secondary" className="!w-auto" onClick={action.onClick}>
+                            {action.label}
+                        </Button>
+                    ))}
+                </div>
+            )}
+            <div className="px-4 pb-4">
+                <MessageBody messageUid={reply.uid} messageVersion={0} title={`Message: ${reply.subject}`} content={{ kind: "html", html: reply.html }} />
+            </div>
+        </CardShell>
+    );
+}

package/apps/shared/components/mail/reading/messageExport.ts

@@ -0,0 +1,59 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { binaryStringToBytes, extractAddresses, parseMimeEntity } from "@rapidmx/react-shared/crypto/mime.js";
+
+/**
+ * What the reading pane does with a message's raw RFC 5322 source (`getMessageRawContent()`, a binary string): show it, save it as a
+ * file, and read the From header out of it. Nothing here interprets the message's content beyond its header block.
+ */
+
+/** How much of a message's source the "View message source" dialog draws: a message with attachments is mostly base64, and a
+ * megabyte of it in a `<pre>` helps nobody. Saving as .eml and Copy always have all of it. */
+export const MAX_SOURCE_DISPLAY_CHARS = 200_000;
+
+/** The file name "Save as .eml" gives a message: its subject without what a file system refuses, or `message`. */
+export function emlFileName(subject: string | undefined): string {
+    const cleaned = (subject ?? "")
+        .replace(/[\p{Cc}\\/:*?"<>|]+/gu, " ")
+        .replace(/\s+/g, " ")
+        .trim()
+        .slice(0, 100)
+        .replace(/^\.+/, "")
+        .replace(/[. ]+$/, "");
+    return `${cleaned || "message"}.eml`;
+}
+
+/** Hands `bytes` to the browser as a download called `fileName`. */
+export function downloadBytes(bytes: Uint8Array, fileName: string, type: string): void {
+    const url = URL.createObjectURL(new Blob([bytes as BlobPart], { type }));
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = fileName;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    // Some browsers are still reading the blob after `click()` returns.
+    setTimeout(() => URL.revokeObjectURL(url), 60_000);
+}
+
+/** Saves a raw message (a binary string, exactly as the server has it) as a `.eml` file, byte for byte. */
+export function saveAsEml(raw: string, subject: string | undefined): void {
+    downloadBytes(binaryStringToBytes(raw), emlFileName(subject), "message/rfc822");
+}
+
+/** A raw message as text to read: its bytes decoded as UTF-8, an invalid byte shown as U+FFFD. */
+export function sourceText(raw: string): string {
+    return new TextDecoder("utf-8").decode(binaryStringToBytes(raw));
+}
+
+/** The header block of a raw message, as text to read. */
+export function headerText(raw: string): string {
+    return sourceText(parseMimeEntity(raw).rawHeaderBlock);
+}
+
+/** The address in a raw message's own From header (which is not always the envelope sender the server files the message under), lowercased. */
+export function headerFromAddress(raw: string): string | undefined {
+    return extractAddresses(parseMimeEntity(raw).headers.from)[0];
+}

package/apps/shared/components/mail/reading/printMessage.ts

@@ -0,0 +1,99 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { Attachment } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MimeAttachment } from "@rapidmx/react-shared/crypto/mime.js";
+import { BodyContent, attachmentSource, makeCidResolver } from "./bodyContent.js";
+import { prepareBodyHtml } from "./bodyHtml.js";
+import { frameCsp } from "./frameDocument.js";
+
+/**
+ * Printing one message: a document of its own - the message's header lines, and under them the same sanitized body the reading pane draws -
+ * shown in a frame that nobody sees and printed from there, so the print is the message and not the app around it.
+ *
+ * The frame is as isolated as the reading pane's own (`frameDocument.ts`): the body has been through `prepareBodyHtml()`, the document
+ * carries the same Content-Security-Policy (no script, nothing fetched from anywhere but this server's own attachment URLs), and the
+ * sandbox runs no code. `allow-same-origin` only lets the app call `print()` on it, and `allow-modals` is what a browser asks of a
+ * sandboxed document for the print dialog to open at all. Paper is white, so the message is drawn as its author wrote it.
+ */
+
+export interface PrintableMessage {
+    subject: string;
+    /** The header lines above the body - `From`, `To`, `Cc`, `Date` - in the order shown; a line with no value is left out. */
+    headers: { name: string; value: string }[];
+    content: BodyContent;
+    attachments?: Attachment[];
+    inlineParts?: MimeAttachment[];
+}
+
+const PRINT_CSS = `
+html{font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000;background:#fff}
+body{margin:0;padding:24px}
+h1{font-size:20px;margin:0 0 12px}
+dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:2px 12px}
+dt{font-weight:600;color:#444}
+dd{margin:0;overflow-wrap:anywhere}
+hr{border:0;border-top:1px solid #999;margin:0 0 16px}
+#rr-body{overflow-wrap:break-word}
+#rr-body img{max-width:100%;height:auto}
+#rr-body pre,pre.rr-text{white-space:pre-wrap;font:inherit;margin:0}
+`;
+
+export function escapeHtml(text: string): string {
+    return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+/**
+ * The document to print, or `undefined` for a body too large to prepare (the pane does not draw it either).
+ */
+export function buildPrintDocument(message: PrintableMessage): string | undefined {
+    let body: string;
+    let imageSource: string | undefined;
+    if (message.content.kind === "html") {
+        const prepared = prepareBodyHtml(message.content.html, { resolveCid: makeCidResolver(message.attachments, message.inlineParts) });
+        if (prepared.status === "too_large") {
+            return undefined;
+        }
+        const source = prepared.inlineImages > 0 ? attachmentSource() : undefined;
+        imageSource = source && prepared.html.includes(source) ? source : undefined;
+        body = `<div id="rr-body">${prepared.html}</div>`;
+    } else {
+        body = `<pre class="rr-text">${escapeHtml(message.content.text)}</pre>`;
+    }
+    const lines = message.headers
+        .filter((header) => header.value !== "")
+        .map((header) => `<dt>${escapeHtml(header.name)}</dt><dd>${escapeHtml(header.value)}</dd>`)
+        .join("");
+    return [
+        "<!doctype html>",
+        '<html lang="en"><head><meta charset="utf-8">',
+        `<meta http-equiv="Content-Security-Policy" content="${frameCsp(imageSource)}">`,
+        `<title>${escapeHtml(message.subject)}</title>`,
+        `<style>${PRINT_CSS}</style></head>`,
+        `<body><h1>${escapeHtml(message.subject)}</h1><dl>${lines}</dl><hr>${body}</body></html>`,
+    ].join("");
+}
+
+/** How long a print frame is kept when the browser never says it has finished with it (`afterprint`). */
+const FRAME_LIFETIME_MS = 60_000;
+
+/** Prints `html` (from `buildPrintDocument()`) from a frame nobody sees, and removes the frame when the print is over. */
+export function printDocument(html: string): void {
+    const frame = document.createElement("iframe");
+    frame.setAttribute("sandbox", "allow-same-origin allow-modals");
+    frame.setAttribute("aria-hidden", "true");
+    frame.tabIndex = -1;
+    frame.title = "Message to print";
+    frame.style.cssText = "position:fixed;right:0;bottom:0;width:0;height:0;border:0;visibility:hidden";
+    const cleanup = () => frame.remove();
+    frame.addEventListener("load", () => {
+        const view = frame.contentWindow!;
+        view.addEventListener("afterprint", cleanup);
+        view.focus();
+        view.print();
+        setTimeout(cleanup, FRAME_LIFETIME_MS);
+    });
+    frame.srcdoc = html;
+    document.body.appendChild(frame);
+}