@rapidmx/web-client 0.16.0 → 0.17.2

package/apps/shared/components/mail/layout/MailShell.tsx

@@ -2,7 +2,7 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import React, { createContext, PropsWithChildren, ReactNode, useContext, useEffect, useMemo, useState } from "react";
+import React, { createContext, PropsWithChildren, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3, HiOutlinePencilSquare } from "react-icons/hi2";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
 import { Folder, Mailbox, Message } from "@rapidmx/react-shared/mail/mailApi.js";
@@ -10,7 +10,7 @@ import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell, { AppShellProps } from "../../layout/AppShell.js";
 import FloatingActionButton from "../../layout/FloatingActionButton.js";
-import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
+import { useLocation, useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";
@@ -101,6 +101,13 @@ export interface MailShellContextValue {
      * context value, which is only ever read outside a real shell.
      */
     trackMessageChange: (previous: Message, next: Message | null) => CountTracker;
+    /**
+     * Reads every mailbox's real folder counts back and shows them (after `delayMs`, 600 ms by default) - for a change too big to track message by
+     * message, such as emptying a folder. A no-op on the default context value, which is only ever read outside a real shell.
+     */
+    refreshFolderCounts: (delayMs?: number) => void;
+    /** A folder's counts as the sidebar shows them: what the shell has worked out or been told since it loaded, else what the folder was listed with. */
+    folderCountOf: (folder: Folder) => FolderCount;
     /**
      * The phone layout's header row beside the folders button, for the page to put its search box in (`createPortal()`): the shell
      * owns the row, the page owns the search state. `null` until the row has rendered, and on the default context value.
@@ -117,6 +124,8 @@ const MailShellContext = createContext<MailShellContextValue>({
     noteFolderUids: () => undefined,
     live: NO_LIVE_UPDATES,
     trackMessageChange: () => NO_TRACKER,
+    refreshFolderCounts: () => undefined,
+    folderCountOf: (folder) => ({ unread: folder.unreadCount, total: folder.totalCount }),
     mobileSearchSlot: null,
 });
 
@@ -214,12 +223,10 @@ function MailShortcuts({ mailboxUid }: { mailboxUid?: string }) {
 /**
  * Mail's own contextual sidebar (every accessible mailbox's own folder tree, plus a merged "All Mailboxes"
  * aggregate section) + content area, rendered inside the shared `AppShell` chrome (icon rail, header,
- * impersonation banner — see that component). There is no client-side router in this framework (see
- * `ReactRoute`'s file-convention resolver) — the selected mailbox/folder (or aggregate pseudo-folder) live
- * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read once on mount (never during
- * the initial render itself, matching every other query-param reader in this codebase — e.g.
- * `apps/admin/quarantine`'s `readMailboxUid()` — so the server-rendered and just-hydrated client markup
- * match).
+ * impersonation banner — see that component). The selected mailbox/folder (or aggregate pseudo-folder) live
+ * in the URL's `?mailboxUid=`/`?folderUid=`/`?aggregate=` query params, read from the router's location
+ * (`@rapidrest/react`), which is the request's on the server and while hydrating and follows a shallow
+ * navigation (a folder link) without remounting the page.
  *
  * Every accessible mailbox's folder tree renders at once - there is no "switch mailbox" affordance
  * anymore (the mailbox `<select>` this shell used to have is gone) - so a single-mailbox user sees zero
@@ -228,8 +235,7 @@ function MailShortcuts({ mailboxUid }: { mailboxUid?: string }) {
  * of folders" requirement.
  *
  * An address that names nothing opens "All Mailboxes > Inbox" when there is more than one mailbox (that is when the section exists), and
- * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. Nothing is selected until the address
- * has been read. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
+ * the one mailbox's own Inbox otherwise; a `?mailboxUid=`, `?folderUid=` or `?aggregate=` always wins. What needs a single mailbox while an all-mailboxes view is open (Compose, the new-message shortcut, key unlocking) uses the
  * primary mailbox.
  */
 export default function MailShell({
@@ -251,23 +257,16 @@ export default function MailShell({
     const { status, error, mailboxes, mailboxFolders, foldersLoading, onFolderCreated, noteFolderUids, live, folderCounts, outbox: outboxStatuses } = hosted ?? own;
     // The messages this tab is still handing to the server: the Outbox pill counts them at once.
     const pendingSends = usePendingSends();
-    const [requestedMailboxUid, setRequestedMailboxUid] = useState<string | null>(null);
-    const [requestedFolderUid, setRequestedFolderUid] = useState<string | null>(null);
-    const [requestedAggregateType, setRequestedAggregateType] = useState<string | null>(null);
     const [drawerOpen, setDrawerOpen] = useState(false);
-    // Whether the URL has been read yet (see below): until then the selection is not known, and the sidebar sections have nothing to open for.
-    const [selectionRead, setSelectionRead] = useState(false);
 
-    // The selection lives in the URL, and the router (`AppRouter`) changes the URL without a page load when a folder link is
-    // clicked - so it is read from the router's location, which updates, rather than once from `window.location`. Still read
-    // in an effect, never during the first render, so the server render and the hydrating render agree.
-    const search = useLocationSearch();
-    useEffect(() => {
+    // The selection lives in the URL, and the router (`@rapidrest/react`) changes the URL without a page load when a folder link is
+    // clicked - a shallow navigation, which keeps this page and its state - so it is read from the router's location, which updates,
+    // rather than once from `window.location`. The location is the request's on the server and while hydrating (its `#fragment` is not
+    // sent, and no one here reads it), so the server render and the hydrating render agree and the selection is known from the first render.
+    const { search } = useLocation();
+    const { requestedMailboxUid, requestedFolderUid, requestedAggregateType } = useMemo(() => {
         const params = new URLSearchParams(search);
-        setRequestedMailboxUid(params.get("mailboxUid"));
-        setRequestedFolderUid(params.get("folderUid"));
-        setRequestedAggregateType(params.get("aggregate"));
-        setSelectionRead(true);
+        return { requestedMailboxUid: params.get("mailboxUid"), requestedFolderUid: params.get("folderUid"), requestedAggregateType: params.get("aggregate") };
     }, [search]);
     // Choosing a folder (or mailbox) changes the URL without a page load now, so the drawer that held the choice - which used to go
     // with the page - is closed here.
@@ -275,12 +274,10 @@ export default function MailShell({
         setDrawerOpen(false);
     }, [search]);
 
-    // What the address asks for. Nothing is selected until it has been read (the first render, before the effect above): choosing a
-    // default then would list a folder - the most expensive being every mailbox's - only to throw it away for the one the address names.
-    const requestedAggregate: AggregateFolderType | undefined =
-        selectionRead && isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
+    // What the address asks for.
+    const requestedAggregate: AggregateFolderType | undefined = isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
     const requestedMailbox: string | undefined =
-        selectionRead && requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined;
+        requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined;
 
     // The mailbox the caller has not chosen: their own, never a shared one that merely sorts first. It is what compose, the new-message
     // shortcut and everything else that needs a single mailbox use while an all-mailboxes view (which has none) is open.
@@ -288,10 +285,9 @@ export default function MailShell({
 
     // With several mailboxes the address that names nothing opens "All Mailboxes > Inbox", the merged Inbox; with one there is no such
     // section, so it opens that mailbox's own Inbox. A mailbox, a folder or an all-mailboxes view in the address wins over either.
-    const aggregateByDefault =
-        selectionRead && !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
+    const aggregateByDefault = !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
     const aggregateFolderType: AggregateFolderType | undefined = requestedAggregate ?? (aggregateByDefault ? "inbox" : undefined);
-    const mailboxUid: string | undefined = aggregateFolderType || !selectionRead ? undefined : (requestedMailbox ?? defaultMailboxUid);
+    const mailboxUid: string | undefined = aggregateFolderType ? undefined : (requestedMailbox ?? defaultMailboxUid);
 
     const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
     const folderUid: string | undefined = aggregateFolderType
@@ -317,14 +313,16 @@ export default function MailShell({
 
     const counts = folderCounts.counts;
     const trackMessageChange = folderCounts.track;
+    const refreshFolderCounts = folderCounts.refresh;
+    const folderCountOf = useCallback((folder: Folder) => countOfFolder(folder, counts), [counts]);
     // `(3) Acme: Mail` in the tab strip while there is unread mail in an Inbox - kept by the frame when there is one.
     useUnreadTitle(inboxUnreadTotal(mailboxFolders, counts), { enabled: !hosted });
 
     // A state rather than a ref: the page reads it during its render, so it has to re-render once the row it names is in the document.
     const [mobileSearchSlot, setMobileSearchSlot] = useState<HTMLElement | null>(null);
     const contextValue = useMemo<MailShellContextValue>(
-        () => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot }),
-        [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot],
+        () => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, refreshFolderCounts, folderCountOf, mobileSearchSlot }),
+        [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, refreshFolderCounts, folderCountOf, mobileSearchSlot],
     );
 
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
@@ -384,6 +382,8 @@ export default function MailShell({
                                         <a
                                             key={type}
                                             href={`/?aggregate=${encodeURIComponent(type)}`}
+                                            data-router-shallow=""
+                                            data-router-prefetch="false"
                                             className={[
                                                 "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                                 aggregateFolderType === type
@@ -442,6 +442,8 @@ export default function MailShell({
                                     <a
                                         key={folder.uid}
                                         href={`/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`}
+                                        data-router-shallow=""
+                                        data-router-prefetch="false"
                                         className={[
                                             "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                             folder.uid === folderUid

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/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];
+}