@rapidmx/web-client 0.9.0 → 0.11.0

package/dist/apps/shared/components/mail/layout/MailShell.js

@@ -3,19 +3,28 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { HiOutlineBars3 } from "react-icons/hi2";
-import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import Drawer from "@rapidmx/react-shared/components/overlays/Drawer.js";
-import { listFolders, listMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Skeleton, { SkeletonList } from "@rapidmx/react-shared/components/feedback/Skeleton.js";
 import AppShell from "../../layout/AppShell.js";
+import { useLocationSearch, useNavigate } from "../../../navigation/AppRouter.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
-import { useCompose } from "../compose/ComposeContext.js";
+import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";
 import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.js";
-import { NO_LIVE_UPDATES, useMailLiveUpdates } from "../../../mail/useMailLiveUpdates.js";
+import { NO_LIVE_UPDATES } from "../../../mail/useMailLiveUpdates.js";
+import { MAILBOX_LIST_LIMIT, MailConnectionContext, useMailConnection } from "../../../mail/useMailConnection.js";
+import { folderRows } from "../../../mail/folderTree.js";
+import { badgeFor, badgeLabel, countOfFolder, inboxUnreadTotal, } from "../../../mail/folderCounts.js";
+import { useUnreadTitle } from "../../../mail/useUnreadTitle.js";
+import { pendingCountFor, usePendingSends } from "../../../mail/outbox/pendingSends.js";
+import OutboxBadge from "../OutboxBadge.js";
+import { ariaKeyShortcuts, withHint } from "../../../keyboard/format.js";
+import { SHORTCUTS } from "../../../keyboard/keymap.js";
+import { useKeyEnvironment } from "../../../keyboard/ShortcutProvider.js";
+import { useShortcut } from "../../../keyboard/useShortcut.js";
 /** The well-known mail folder types an "aggregate" pseudo-folder can merge across every accessible
  * mailbox - a fixed, small set: `outbox` is deliberately excluded (transient per-mailbox send-queue
  * state, not a "merge across mailboxes" concept), and there's no aggregate concept for `calendar`/
@@ -25,11 +34,14 @@ export const AGGREGATE_FOLDER_TYPES = ["inbox", "sent_items", "drafts", "deleted
 function isAggregateFolderType(value) {
     return !!value && AGGREGATE_FOLDER_TYPES.includes(value);
 }
+const NO_TRACKER = { settle: () => undefined, revert: () => undefined };
 const MailShellContext = createContext({
     mailboxes: [],
     mailboxFolders: [],
     onFolderCreated: () => undefined,
+    noteFolderUids: () => undefined,
     live: NO_LIVE_UPDATES,
+    trackMessageChange: () => NO_TRACKER,
 });
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
 export function useMailShell() {
@@ -44,34 +56,23 @@ const FOLDER_LABELS = {
     archive: "Archive",
     deleted_items: "Deleted Items",
 };
-/** Well-known folders sort first, in Gmail/Outlook's conventional order; anything else (incl. `user`) sorts after, alphabetically. */
-const FOLDER_ORDER = ["inbox", "drafts", "outbox", "sent_items", "junk", "archive", "deleted_items"];
-/**
- * A mailbox's `calendar`/`contacts`/`tasks`/`notes` folders back their own dedicated apps (see
- * `CalendarShell`/`ContactsShell`/`TasksShell`), not Mail — `listFolders()` returns every well-known
- * folder for the mailbox regardless of which app owns it, so Mail's own folder tree must filter down
- * to just the mail ones itself, or those other apps' folders leak into this sidebar.
- */
-const MAIL_FOLDER_TYPES = new Set([...FOLDER_ORDER, "user"]);
-function folderSortKey(folder) {
-    const idx = FOLDER_ORDER.indexOf(folder.type);
-    return idx === -1 ? FOLDER_ORDER.length : idx;
-}
-function sortedFoldersOf(folders) {
-    return [...folders].sort((a, b) => folderSortKey(a) - folderSortKey(b) || a.name.localeCompare(b.name));
-}
-/** A folder's unread count: the refreshed one when live updates have read it since load, else the one it was listed with. */
-function unreadOf(folder, unreadCounts) {
-    return unreadCounts[folder.uid] ?? folder.unreadCount;
-}
-function aggregateUnreadCount(mailboxFolders, type, unreadCounts) {
-    return mailboxFolders.reduce((total, mf) => {
+/** The badge an "All Mailboxes" entry shows: the folders of that type, summed across every mailbox, under the same rules as a single folder's. */
+function aggregateBadge(mailboxFolders, type, counts) {
+    const sum = mailboxFolders.reduce((total, mf) => {
         const folder = mf.folders.find((f) => f.type === type);
-        return total + (folder ? unreadOf(folder, unreadCounts) : 0);
-    }, 0);
+        const count = folder ? countOfFolder(folder, counts) : { unread: 0, total: 0 };
+        return { unread: total.unread + count.unread, total: total.total + count.total };
+    }, { unread: 0, total: 0 });
+    return badgeFor(type, sum);
+}
+/** A folder's badge: an accent pill with the unread count, or - for the folders that show how many they hold - plain muted text. */
+function FolderBadgeChip({ badge }) {
+    return (_jsxs("span", { className: [
+            "text-xs rounded-pill py-0.5 px-1.5",
+            badge.kind === "unread" ? "font-bold bg-primary/15 text-primary-dark" : "font-medium text-text-muted",
+        ].join(" "), children: [_jsx("span", { "aria-hidden": "true", children: badge.value }), _jsxs("span", { className: "sr-only", children: [" ", badgeLabel(badge)] })] }));
 }
-/** Page size of the one `listMailboxes()` call this shell makes. */
-export const MAILBOX_LIST_LIMIT = 100;
+export { MAILBOX_LIST_LIMIT };
 /**
  * A separate component (not inlined into `MailShell`'s own render) so `useCompose()` resolves against
  * `ComposeProvider` correctly: that provider is rendered *inside* the `AppShell` that `MailShell` itself
@@ -80,12 +81,25 @@ export const MAILBOX_LIST_LIMIT = 100;
  * its own descendants creates. This button, rendered as part of `AppShell`'s `children`, sits correctly
  * inside that subtree.
  *
- * Opens with no mailbox: a fresh message defaults to the caller's own mailbox, and the compose window's
- * own From field is where the sender is chosen.
+ * Opens with the caller's own mailbox (the shell has already listed them), so the window can start on its
+ * signature, draft and encryption lookups straight away instead of first asking which mailbox that is; the
+ * compose window's own From field is where the sender is chosen. Fetches the window's code as the pointer or
+ * keyboard reaches the button, so the click finds it already here.
  */
-function ComposeButton() {
+function ComposeButton({ mailboxUid }) {
     const { openCompose } = useCompose();
-    return (_jsx("button", { type: "button", onClick: () => openCompose({}), className: "block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark", children: "Compose" }));
+    const env = useKeyEnvironment();
+    return (_jsx("button", { type: "button", title: withHint("Compose", SHORTCUTS.mail.create, env), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.mail.create, env), onClick: () => openCompose({ mailboxUid }), onPointerEnter: prefetchComposeWindow, onFocus: prefetchComposeWindow, className: "block text-center w-full py-2.5 px-4 rounded-sm font-semibold text-sm bg-primary text-white hover:bg-primary-dark", children: "Compose" }));
+}
+/**
+ * Mail's keyboard shortcuts that don't belong to a list or a message: "New message". A component of its own for the reason `ComposeButton`
+ * is - `useCompose()` only resolves below `ComposeProvider`, i.e. inside the `AppShell` this shell renders - and mounted once, whatever number
+ * of Compose buttons (the sidebar, the folders drawer) are on screen. Opens the same window, for the same mailbox, as the button.
+ */
+function MailShortcuts({ mailboxUid }) {
+    const { openCompose } = useCompose();
+    useShortcut(SHORTCUTS.mail.create, () => openCompose({ mailboxUid }));
+    return null;
 }
 /**
  * Mail's own contextual sidebar (every accessible mailbox's own folder tree, plus a merged "All Mailboxes"
@@ -103,36 +117,35 @@ function ComposeButton() {
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * of folders" requirement.
  */
-export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, pluginNav, children, }) {
-    const [status, setStatus] = useState("checking");
-    const [error, setError] = useState(null);
-    const [mailboxes, setMailboxes] = useState([]);
-    const [mailboxFolders, setMailboxFolders] = useState([]);
-    const [foldersLoading, setFoldersLoading] = useState(true);
+export default function MailShell({ userUid, authServerUrl, impersonating, impersonationBaseUrl, trusted, trustedRoles, pluginNav, children, }) {
+    // The mailboxes, their folders and the live connection come from the persistent app frame when there is one (`AppChrome` owns them, so
+    // they survive Mail -> Calendar -> Mail and the push socket, pop-ups, counters and tab title work in every app). A page rendered
+    // outside the frame - a test, a plugin page - has no frame to ask, so this shell runs the same hook for itself, and renders the pop-ups.
+    const navigate = useNavigate();
+    const hosted = useContext(MailConnectionContext);
+    const own = useMailConnection({ userUid, enabled: !hosted, open: navigate });
+    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(null);
     const [requestedFolderUid, setRequestedFolderUid] = useState(null);
     const [requestedAggregateType, setRequestedAggregateType] = useState(null);
     const [drawerOpen, setDrawerOpen] = 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(() => {
-        const params = new URLSearchParams(window.location.search);
+        const params = new URLSearchParams(search);
         setRequestedMailboxUid(params.get("mailboxUid"));
         setRequestedFolderUid(params.get("folderUid"));
         setRequestedAggregateType(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.
     useEffect(() => {
-        if (!userUid) {
-            return;
-        }
-        listMailboxes({ limit: MAILBOX_LIST_LIMIT })
-            .then((result) => {
-            setMailboxes(result);
-            setStatus("ready");
-        })
-            .catch((err) => {
-            setError(err instanceof ApiRequestError ? err.message : "Could not load your mailboxes.");
-            setStatus("error");
-        });
-    }, [userUid]);
+        setDrawerOpen(false);
+    }, [search]);
     const aggregateFolderType = isAggregateFolderType(requestedAggregateType)
         ? requestedAggregateType
         : undefined;
@@ -140,29 +153,6 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         ? undefined
         : (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
             mailboxes[0]?.uid;
-    // Fans out one listFolders() call per accessible mailbox in parallel - each call catches its own
-    // failure into an MailboxFolders.error rather than letting Promise.all reject, so one mailbox's fetch
-    // failure renders that section's own inline Alert instead of blanking out every other mailbox's
-    // folder tree.
-    useEffect(() => {
-        if (mailboxes.length === 0) {
-            // Deliberately leaves foldersLoading as-is: this also runs once before listMailboxes() has
-            // resolved, and clearing it here would briefly render an empty sidebar the moment mailboxes
-            // arrive, before their folders do. A genuinely mailbox-less caller gets MailboxProvisioning.
-            setMailboxFolders([]);
-            return;
-        }
-        setFoldersLoading(true);
-        void Promise.all(mailboxes.map((mailbox) => listFolders(mailbox.uid)
-            .then((result) => ({ mailbox, folders: result.filter((f) => MAIL_FOLDER_TYPES.has(f.type)) }))
-            .catch((err) => ({
-            mailbox,
-            folders: [],
-            error: err instanceof ApiRequestError ? err.message : "Could not load folders.",
-        }))))
-            .then(setMailboxFolders)
-            .finally(() => setFoldersLoading(false));
-    }, [mailboxes]);
     const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
     const folderUid = aggregateFolderType
         ? undefined
@@ -175,23 +165,11 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     // mailbox may still need that mailbox's own folder view opened directly to unlock/decrypt it.
     const defaultMailboxUid = mailboxes.find((mb) => mb.ownerUserUid === userUid)?.uid ?? mailboxes[0]?.uid;
     const activeMailboxUid = mailboxUid ?? defaultMailboxUid;
-    /** Files a newly created folder under its own mailbox, leaving every other mailbox's list untouched -
-     * and ignoring a type this sidebar doesn't list at all, the same filter the fetch above applies. */
-    const onFolderCreated = useCallback((folder) => {
-        if (!MAIL_FOLDER_TYPES.has(folder.type)) {
-            return;
-        }
-        setMailboxFolders((prev) => prev.map((entry) => 
-        // Not one already there: another client's create event can arrive after (or twice, or alongside) our own.
-        entry.mailbox.uid === folder.mailboxUid && !entry.folders.some((existing) => existing.uid === folder.uid)
-            ? { ...entry, folders: [...entry.folders, folder] }
-            : entry));
-    }, []);
-    // New mail without a reload: push events for every folder, plus a safety-net poll. Held in state beside `mailboxFolders`
-    // rather than written into it, so a refreshed unread count never looks like a change of folders to the list on screen
-    // (which reloads, and forgets its selection, whenever the folders do).
-    const { live, unreadCounts } = useMailLiveUpdates({ userUid, mailboxes, mailboxFolders, onFolderCreated });
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, live }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, live]);
+    const counts = folderCounts.counts;
+    const trackMessageChange = folderCounts.track;
+    // `(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 });
+    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange]);
     // A full-screen takeover, not nested inside the rest of the app's chrome — there's nothing else for a
     // mailbox-less caller to do here yet, so the icon rail/header/folder tree don't render at all. Checks
     // `mailboxes.length` directly (not `!mailboxUid`) since `mailboxUid` is legitimately undefined in
@@ -212,24 +190,32 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         // A function, not a plain JSX constant — it's rendered twice (desktop `<aside>` + mobile
         // `Drawer`), possibly *simultaneously* mounted (the aside is only CSS-hidden below `md`, not
         // unmounted).
-        const sidebarContent = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, {}) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5", children: "All Mailboxes" }), _jsx("div", { className: "flex flex-col gap-0.5", children: AGGREGATE_FOLDER_TYPES.map((type) => {
-                                        const unread = aggregateUnreadCount(mailboxFolders, type, unreadCounts);
+        const sidebarContent = () => (_jsxs(_Fragment, { children: [_jsx("div", { className: "p-3", children: _jsx(ComposeButton, { mailboxUid: defaultMailboxUid }) }), foldersLoading ? (_jsx("div", { className: "flex-1 overflow-y-auto px-3 pb-3", children: _jsx(SkeletonList, { count: 6, className: "pt-1" }) })) : (_jsxs("nav", { className: "flex-1 overflow-y-auto px-3 pb-3 flex flex-col gap-3", children: [mailboxes.length > 1 && (_jsxs("div", { children: [_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5", children: "All Mailboxes" }), _jsx("div", { className: "flex flex-col gap-0.5", children: AGGREGATE_FOLDER_TYPES.map((type) => {
+                                        const badge = aggregateBadge(mailboxFolders, type, counts);
                                         return (_jsxs("a", { href: `/?aggregate=${encodeURIComponent(type)}`, className: [
                                                 "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                                 aggregateFolderType === type
                                                     ? "bg-primary/10 text-primary-dark font-semibold"
                                                     : "text-text hover:bg-surface-alt",
-                                            ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[type] }), unread > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: unread }))] }, type));
-                                    }) })] })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: sortedFoldersOf(folders).map((folder) => {
-                                        const unread = unreadOf(folder, unreadCounts);
+                                            ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[type] }), badge && _jsx(FolderBadgeChip, { badge: badge })] }, type));
+                                    }) })] })), mailboxFolders.map(({ mailbox, folders, error: mailboxError }) => (_jsxs("div", { children: [_jsxs("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), _jsx("div", { className: "flex flex-col gap-0.5", children: folderRows(folders, pendingCountFor(mailbox.uid, pendingSends)).map((row) => {
+                                        if (row.kind === "placeholder") {
+                                            // A folder the server has not made (or told us about) yet - the Outbox and Sent Items are made with the first message
+                                            // sent - shown the moment a message is on its way. Nothing to open; the real folder replaces it when it arrives.
+                                            const sending = pendingCountFor(mailbox.uid, pendingSends);
+                                            return (_jsxs("div", { "data-folder-placeholder": row.type, className: "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5 text-text-muted", children: [_jsx("span", { children: FOLDER_LABELS[row.type] }), row.type === "outbox" && _jsx(OutboxBadge, { total: sending, pendingHere: sending })] }, `placeholder-${row.type}`));
+                                        }
+                                        const folder = row.folder;
+                                        const badge = badgeFor(folder.type, countOfFolder(folder, counts));
                                         return (_jsxs("a", { href: `/?mailboxUid=${encodeURIComponent(mailbox.uid)}&folderUid=${encodeURIComponent(folder.uid)}`, className: [
                                                 "flex items-center justify-between text-sm rounded-sm py-1.5 px-2.5",
                                                 folder.uid === folderUid
                                                     ? "bg-primary/10 text-primary-dark font-semibold"
                                                     : "text-text hover:bg-surface-alt",
-                                            ].join(" "), children: [_jsx("span", { children: FOLDER_LABELS[folder.type] ?? folder.name }), unread > 0 && (_jsx("span", { className: "text-xs font-bold rounded-pill py-0.5 px-1.5 bg-surface-alt text-text-muted", children: unread }))] }, folder.uid));
+                                            ].join(" "), children: [_jsx("span", { className: badge?.kind === "unread" ? "font-semibold" : undefined, children: FOLDER_LABELS[folder.type] ?? folder.name }), badge &&
+                                                    (folder.type === "outbox" ? (_jsx(OutboxBadge, { total: badge.value, status: outboxStatuses[folder.uid], pendingHere: pendingCountFor(mailbox.uid, pendingSends) })) : (_jsx(FolderBadgeChip, { badge: badge })))] }, folder.uid));
                                     }) })] }, mailbox.uid)))] }))] }));
-        inner = (_jsxs(_Fragment, { children: [_jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent() }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent() }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
+        inner = (_jsxs(_Fragment, { children: [_jsx(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent() }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", children: _jsx("div", { className: "flex flex-col", children: sidebarContent() }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsx("button", { type: "button", className: "md:hidden m-3 w-9 h-9 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text", "aria-label": "Open folders", onClick: () => setDrawerOpen(true), children: _jsx(HiOutlineBars3, { size: 20, "aria-hidden": "true" }) }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
     }
     // Wraps AppShell unconditionally, at a stable tree position regardless of whether mailboxUid has
     // resolved yet - KeyEnrollmentGate itself passes `children` through untouched until a real
@@ -251,5 +237,5 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
         canProvision: !impersonating && activeMailbox?.ownerUserUid === userUid, children: [_jsx(LocalIndexLifecycle, { mailboxUid: activeMailboxUid, mailboxKeys: activeMailbox?.keys, folders: mailboxFolders.find((mf) => mf.mailbox.uid === activeMailboxUid)?.folders ?? [], 
                 // A full page may be truncated - pruning against it would delete indexes of accessible mailboxes
                 // beyond the limit, so it's only trusted as the complete list when it came back short.
-                accessibleMailboxUids: status === "ready" && mailboxes.length < MAILBOX_LIST_LIMIT ? mailboxes.map((mb) => mb.uid) : undefined }), _jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, pluginNav: pluginNav, children: inner })] }));
+                accessibleMailboxUids: status === "ready" && mailboxes.length < MAILBOX_LIST_LIMIT ? mailboxes.map((mb) => mb.uid) : undefined }), _jsx(AppShell, { active: "mail", userUid: userUid, authServerUrl: authServerUrl, impersonating: impersonating, impersonationBaseUrl: impersonationBaseUrl, trusted: trusted, trustedRoles: trustedRoles, pluginNav: pluginNav, children: inner })] }));
 }

package/dist/apps/shared/components/mail/reading/EncryptedBody.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface EncryptedBodyProps {
+    /** This device has no unlocked key session for the message's mailbox: unlocking could help. */
+    locked: boolean;
+    /** Why the message couldn't be decrypted when the keys were available (shown for the failed state). */
+    reason?: string;
+    /** Opens the app's unlock prompt (`useUnlockPrompt().requestUnlock`). Only used - and only offered - when `locked`. */
+    onUnlock: () => void;
+    /** An unlock is being asked for: the button waits. */
+    unlocking?: boolean;
+}
+/**
+ * What an encrypted message's body is until (and unless) it can be read, drawn as card content in the app's own tokens: on the theme's opaque surface, so
+ * it stays legible over a translucent card and a background photo.
+ *
+ * **Locked** - the keys are not unlocked: a lock, "This message is encrypted", a hint and a primary Unlock button, which opens the same prompt compose's
+ * "Unlock to sign or encrypt" does. When it succeeds the pane decrypts and shows the message in place.
+ * **Cannot be decrypted** - the keys are unlocked and it still can't be opened (no key for this mailbox, not a recipient, damaged, unsupported): the reason,
+ * and no button - unlocking again wouldn't change it.
+ */
+export default function EncryptedBody({ locked, reason, onUnlock, unlocking }: EncryptedBodyProps): React.JSX.Element;

package/dist/apps/shared/components/mail/reading/EncryptedBody.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineExclamationTriangle, HiOutlineLockClosed } from "react-icons/hi2";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import { useResolvedTheme } from "../../../appearance/resolvedTheme.js";
+import { formatColour } from "./color.js";
+import { useThemeSurface } from "./themeSurface.js";
+/**
+ * What an encrypted message's body is until (and unless) it can be read, drawn as card content in the app's own tokens: on the theme's opaque surface, so
+ * it stays legible over a translucent card and a background photo.
+ *
+ * **Locked** - the keys are not unlocked: a lock, "This message is encrypted", a hint and a primary Unlock button, which opens the same prompt compose's
+ * "Unlock to sign or encrypt" does. When it succeeds the pane decrypts and shows the message in place.
+ * **Cannot be decrypted** - the keys are unlocked and it still can't be opened (no key for this mailbox, not a recipient, damaged, unsupported): the reason,
+ * and no button - unlocking again wouldn't change it.
+ */
+export default function EncryptedBody({ locked, reason, onUnlock, unlocking = false }) {
+    const theme = useResolvedTheme();
+    const surface = useThemeSurface(theme);
+    const Icon = locked ? HiOutlineLockClosed : HiOutlineExclamationTriangle;
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-md border border-border px-4 py-8 text-center", style: { backgroundColor: formatColour(surface.background) }, children: [_jsx("span", { "aria-hidden": "true", className: ["inline-flex h-12 w-12 items-center justify-center rounded-full", locked ? "bg-primary/10 text-primary-dark" : "bg-warning/15 text-text"].join(" "), children: _jsx(Icon, { size: 24 }) }), _jsx("p", { className: "text-base font-semibold text-text", children: locked ? "This message is encrypted" : "This message can’t be decrypted" }), locked ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-sm text-text-muted", children: "Unlock your keys to read it" }), _jsx(Button, { type: "button", className: "!w-auto mt-1", "aria-label": "Unlock to view this message", loading: unlocking, disabled: unlocking, onClick: onUnlock, children: "Unlock" })] })) : (reason && (_jsx("div", { className: "mt-1 max-w-prose text-left", children: _jsx(Alert, { children: reason }) })))] }));
+}

package/dist/apps/shared/components/mail/reading/EncryptedPreview.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+/** The subject an encrypted message carries on the server (RFC 9788's placeholder): the real one is inside the ciphertext. */
+export declare const ENCRYPTED_SUBJECT_PLACEHOLDER = "[...]";
+/**
+ * What a list row's preview line says for an encrypted message nothing has been decrypted of yet: a small lock and "Encrypted message". The server never
+ * derives a preview for encrypted mail (it has no plaintext), so the line would otherwise be empty.
+ */
+export declare function EncryptedPreview(): React.JSX.Element;
+/**
+ * Whether a conversation row stands for an encrypted latest message. A conversation summary carries no flag for it, but an encrypted message has no preview
+ * and the placeholder subject - which a plaintext message with an empty body does not.
+ */
+export declare function conversationLooksEncrypted(conversation: {
+    subject: string;
+    latestPreview: string;
+}): boolean;
+/** The subject to show for a message's own: what an encrypted message says is the placeholder, which nobody should have to read as a title. */
+export declare function displaySubject(subject: string): string;

package/dist/apps/shared/components/mail/reading/EncryptedPreview.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiOutlineLockClosed } from "react-icons/hi2";
+/** The subject an encrypted message carries on the server (RFC 9788's placeholder): the real one is inside the ciphertext. */
+export const ENCRYPTED_SUBJECT_PLACEHOLDER = "[...]";
+/**
+ * What a list row's preview line says for an encrypted message nothing has been decrypted of yet: a small lock and "Encrypted message". The server never
+ * derives a preview for encrypted mail (it has no plaintext), so the line would otherwise be empty.
+ */
+export function EncryptedPreview() {
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true", className: "shrink-0" }), "Encrypted message"] }));
+}
+/**
+ * Whether a conversation row stands for an encrypted latest message. A conversation summary carries no flag for it, but an encrypted message has no preview
+ * and the placeholder subject - which a plaintext message with an empty body does not.
+ */
+export function conversationLooksEncrypted(conversation) {
+    return conversation.latestPreview === "" && conversation.subject === ENCRYPTED_SUBJECT_PLACEHOLDER;
+}
+/** The subject to show for a message's own: what an encrypted message says is the placeholder, which nobody should have to read as a title. */
+export function displaySubject(subject) {
+    return subject === ENCRYPTED_SUBJECT_PLACEHOLDER ? "Encrypted message" : subject;
+}

package/dist/apps/shared/components/mail/reading/MessageBody.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import type { Attachment } from "@rapidmx/react-shared/mail/mailApi.js";
+import type { MimeAttachment } from "@rapidmx/react-shared/crypto/mime.js";
+import { BodyContent } from "./bodyContent.js";
+export interface MessageBodyProps {
+    messageUid: string;
+    /** Part of what a remembered body is keyed on, so an edited message is fetched again. */
+    messageVersion: number;
+    /** The accessible name of the body. */
+    title: string;
+    /** A body the caller already has - decrypted or verified content. Shown instead of asking the server. */
+    content?: BodyContent;
+    /** The message's server-side attachments, for resolving its inline `cid:` images. */
+    attachments?: Attachment[];
+    /** The parts inside a signed or encrypted message, for resolving its inline images from the decrypted content. */
+    inlineParts?: MimeAttachment[];
+    /** Show the message as its author wrote it: nothing adapted to the theme. */
+    original?: boolean;
+    /** Says whether "view original" would change anything, once that is known: never for plain text, a message with its own dark styles, or a
+     * message the theme leaves as it is. */
+    onAdaptable?: (adaptable: boolean) => void;
+}
+/** Placeholder lines shown where the body will be, in the body's own place, until it has arrived and been laid out. */
+export declare function BodySkeleton(): React.JSX.Element;
+/**
+ * The body of one message, in the card's own place: the sanitized HTML in a frame that is exactly as tall as its content (following it as
+ * images load and the width changes), or plain text. See `frameDocument.ts` for the isolation and `themeAdaptation.ts` for how a message
+ * takes the app's theme.
+ *
+ * Nothing waits on the network to lay out: the skeleton is here at once, and the frame's height is only ever the height of what is in it.
+ */
+export default function MessageBody({ messageUid, messageVersion, title, content, attachments, inlineParts, original, onAdaptable }: MessageBodyProps): React.JSX.Element;

package/dist/apps/shared/components/mail/reading/MessageBody.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ApiRequestError, apiUrl } from "@rapidmx/react-shared/util/api.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import { useResolvedTheme } from "../../../appearance/resolvedTheme.js";
+import { attachmentSource, cachedBodyContent, fetchBodyContent, makeCidResolver } from "./bodyContent.js";
+import { prepareBodyHtml } from "./bodyHtml.js";
+import { formatColour } from "./color.js";
+import { controlFrame } from "./frameControl.js";
+import { FRAME_SANDBOX, buildFrameDocument } from "./frameDocument.js";
+import { surfaceKey, useThemeSurface } from "./themeSurface.js";
+/** Placeholder lines shown where the body will be, in the body's own place, until it has arrived and been laid out. */
+export function BodySkeleton() {
+    return (_jsxs("div", { role: "status", "aria-busy": "true", className: "flex flex-col gap-2.5 py-1", children: [_jsx("span", { className: "sr-only", children: "Loading the message" }), _jsx(Skeleton, { width: "w-11/12" }), _jsx(Skeleton, { width: "w-4/5" }), _jsx(Skeleton, { width: "w-9/12" }), _jsx(Skeleton, { width: "w-1/2" })] }));
+}
+/** A short, stable fingerprint of a document's text (djb2), to tell one loaded document from the next. */
+function fingerprint(text) {
+    let hash = 5381;
+    for (let i = 0; i < text.length; i++) {
+        hash = ((hash << 5) + hash + text.charCodeAt(i)) | 0;
+    }
+    return (hash >>> 0).toString(36);
+}
+/** The background of a message shown as authored: white, the canvas an HTML message is written for. */
+const AUTHORED_CANVAS = "rgb(255, 255, 255)";
+/**
+ * The body of one message, in the card's own place: the sanitized HTML in a frame that is exactly as tall as its content (following it as
+ * images load and the width changes), or plain text. See `frameDocument.ts` for the isolation and `themeAdaptation.ts` for how a message
+ * takes the app's theme.
+ *
+ * Nothing waits on the network to lay out: the skeleton is here at once, and the frame's height is only ever the height of what is in it.
+ */
+export default function MessageBody({ messageUid, messageVersion, title, content, attachments, inlineParts, original = false, onAdaptable }) {
+    const [remote, setRemote] = useState(() => {
+        const cached = cachedBodyContent(messageUid, messageVersion);
+        return cached ? { status: "ready", content: cached } : { status: "loading" };
+    });
+    const [attempt, setAttempt] = useState(0);
+    const supplied = content !== undefined;
+    useEffect(() => {
+        if (supplied) {
+            return;
+        }
+        const cached = cachedBodyContent(messageUid, messageVersion);
+        if (cached) {
+            setRemote({ status: "ready", content: cached });
+            return;
+        }
+        const controller = new AbortController();
+        setRemote({ status: "loading" });
+        fetchBodyContent(messageUid, messageVersion, controller.signal).then((loaded) => setRemote({ status: "ready", content: loaded }), (err) => {
+            if (!controller.signal.aborted) {
+                setRemote({ status: "error", message: err instanceof ApiRequestError ? err.message : "Could not load this message." });
+            }
+        });
+        return () => controller.abort();
+    }, [messageUid, messageVersion, supplied, attempt]);
+    const shown = content ? { status: "ready", content } : remote;
+    if (shown.status === "loading") {
+        return _jsx(BodySkeleton, {});
+    }
+    if (shown.status === "error") {
+        return (_jsxs("div", { className: "flex flex-col items-start gap-2", children: [_jsx(Alert, { children: shown.message }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: () => setAttempt((n) => n + 1), children: "Try again" })] }));
+    }
+    if (shown.content.kind === "text") {
+        // Rendered as text - React escapes it - never as markup, in the theme's own colours.
+        return _jsx("pre", { "aria-label": title, className: "m-0 text-sm font-sans whitespace-pre-wrap break-words text-text", children: shown.content.text });
+    }
+    return (_jsx(HtmlBody, { messageUid: messageUid, title: title, html: shown.content.html, remoteAvailable: !supplied, attachments: attachments, inlineParts: inlineParts, original: original, onAdaptable: onAdaptable }, messageUid));
+}
+function HtmlBody({ messageUid, title, html, remoteAvailable, attachments, inlineParts, original, onAdaptable, }) {
+    const theme = useResolvedTheme();
+    const surface = useThemeSurface(theme);
+    // Keyed on what the resolver reads rather than on the arrays, which a caller may rebuild on every render.
+    const inlineKey = [...(attachments ?? []).map((a) => `${a.uid}:${a.contentId ?? ""}`), inlineParts ? `parts:${inlineParts.length}` : ""].join("|");
+    const resolveCid = useMemo(() => makeCidResolver(attachments, inlineParts), [inlineKey]);
+    const prepared = useMemo(() => prepareBodyHtml(html, { resolveCid }), [html, resolveCid]);
+    const mode = prepared.declaresDarkSupport ? "native" : original ? "original" : "adapt";
+    const surfaceCss = formatColour(surface.background);
+    const srcDoc = useMemo(() => {
+        // The frame may load images from this server's attachment URLs only when an inline image was actually resolved to one.
+        const source = prepared.inlineImages > 0 ? attachmentSource() : undefined;
+        return buildFrameDocument(prepared.html, {
+            mode,
+            scheme: theme,
+            surface: surfaceCss,
+            text: formatColour(surface.text),
+            attachmentSource: source && prepared.html.includes(source) ? source : undefined,
+        });
+    }, [prepared, mode, theme, surfaceCss, surface.text]);
+    // A different body, surface or mode is a different document: the adaptation pass edits the document it ran on, so it is run on a fresh
+    // one, and the old one's readiness is not the new one's.
+    const frameKey = useMemo(() => `${mode}:${surfaceKey(surface)}:${fingerprint(srcDoc)}`, [mode, surface, srcDoc]);
+    const [height, setHeight] = useState(undefined);
+    const [readyFor, setReadyFor] = useState(null);
+    const [canvasAuthored, setCanvasAuthored] = useState(false);
+    const dispose = useRef(undefined);
+    useEffect(() => () => dispose.current?.(), []);
+    const reportAdaptable = useRef(onAdaptable);
+    reportAdaptable.current = onAdaptable;
+    useEffect(() => {
+        if (mode === "native") {
+            reportAdaptable.current?.(false);
+        }
+    }, [mode]);
+    if (prepared.status === "too_large") {
+        return (_jsxs(Alert, { children: ["This message is too large to show here.", " ", remoteAvailable && (_jsx("a", { href: apiUrl(`/mail/messages/${encodeURIComponent(messageUid)}/content`), target: "_blank", rel: "noopener noreferrer", className: "font-medium underline", children: "Open it in its own tab" }))] }));
+    }
+    const ready = readyFor === frameKey;
+    const canvas = mode === "original" ? AUTHORED_CANVAS : surfaceCss;
+    const framed = mode !== "adapt" || canvasAuthored;
+    return (_jsxs("div", { className: "relative rounded-md overflow-hidden", style: { backgroundColor: canvas }, children: [!ready && _jsx(BodySkeleton, {}), _jsx("iframe", { title: title, srcDoc: srcDoc, sandbox: FRAME_SANDBOX, scrolling: "no", onLoad: (event) => {
+                    dispose.current?.();
+                    dispose.current = controlFrame(event.currentTarget, {
+                        surface: mode === "adapt" ? surface : undefined,
+                        onHeight: setHeight,
+                        onReady: (adaptation) => {
+                            setReadyFor(frameKey);
+                            if (adaptation) {
+                                setCanvasAuthored(adaptation.authoredCanvas);
+                                reportAdaptable.current?.(adaptation.material);
+                            }
+                        },
+                    });
+                }, className: [
+                    "block w-full border-0 rounded-md",
+                    ready ? "" : "absolute inset-x-0 top-0 invisible",
+                    framed && ready ? "ring-1 ring-border" : "",
+                ].join(" "), style: { height: height ?? 0 } }, frameKey)] }));
+}