@rapidmx/web-client 0.20.0 → 0.21.0

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

@@ -1,79 +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>
-    );
-}
+///////////////////////////////////////////////////////////////////////////////
+// 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/messageExport.ts

@@ -1,59 +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];
-}
+///////////////////////////////////////////////////////////////////////////////
+// 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

@@ -1,99 +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);
-}
+///////////////////////////////////////////////////////////////////////////////
+// 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);
+}