@rapidmx/web-client 0.15.1 → 0.17.0

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

@@ -3,13 +3,15 @@ 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, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, 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 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 FloatingActionButton from "../../layout/FloatingActionButton.js";
+import { useLocation } from "@rapidrest/react/client";
+import { useNavigate } from "../../../navigation/index.js";
 import KeyEnrollmentGate from "../../layout/KeyEnrollmentGate.js";
 import MailboxProvisioning from "../../layout/MailboxProvisioning.js";
 import { prefetchComposeWindow, useCompose } from "../compose/ComposeContext.js";
@@ -17,7 +19,11 @@ import LocalIndexLifecycle from "../../../search/LocalIndexLifecycle.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 { primaryMailboxUid } from "../../../mail/primaryMailbox.js";
+import { badgeFor, countOfFolder, inboxUnreadTotal, unreadBadgeTotal, } from "../../../mail/folderCounts.js";
+import { ALL_MAILBOXES_SECTION, useSidebarSections } from "../../../mail/useCollapsedSections.js";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+import SidebarSection from "./SidebarSection.js";
 import { useUnreadTitle } from "../../../mail/useUnreadTitle.js";
 import { pendingCountFor, usePendingSends } from "../../../mail/outbox/pendingSends.js";
 import OutboxBadge from "../OutboxBadge.js";
@@ -42,6 +48,8 @@ const MailShellContext = createContext({
     noteFolderUids: () => undefined,
     live: NO_LIVE_UPDATES,
     trackMessageChange: () => NO_TRACKER,
+    refreshFolderCounts: () => undefined,
+    folderCountOf: (folder) => ({ unread: folder.unreadCount, total: folder.totalCount }),
     mobileSearchSlot: null,
 });
 /** Reads the mailbox/folder a page is currently showing, as resolved by the enclosing `MailShell`. */
@@ -66,13 +74,6 @@ function aggregateBadge(mailboxFolders, type, counts) {
     }, { 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)] })] }));
-}
 export { MAILBOX_LIST_LIMIT };
 /**
  * A separate component (not inlined into `MailShell`'s own render) so `useCompose()` resolves against
@@ -98,7 +99,7 @@ function ComposeButton({ mailboxUid }) {
  */
 function MobileComposeButton({ mailboxUid }) {
     const { openCompose } = useCompose();
-    return (_jsx("button", { type: "button", "aria-label": "New message", onClick: () => openCompose({ mailboxUid }), onPointerEnter: prefetchComposeWindow, onFocus: prefetchComposeWindow, className: "md:hidden fixed right-4 bottom-[4.5rem] z-30 w-12 h-12 flex items-center justify-center rounded-full bg-primary text-white shadow-lg hover:bg-primary-dark", children: _jsx(HiOutlinePencilSquare, { size: 22, "aria-hidden": "true" }) }));
+    return (_jsx(FloatingActionButton, { label: "New message", icon: HiOutlinePencilSquare, onClick: () => openCompose({ mailboxUid }), onPointerEnter: prefetchComposeWindow, onFocus: prefetchComposeWindow }));
 }
 /**
  * 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`
@@ -113,18 +114,20 @@ function MailShortcuts({ mailboxUid }) {
 /**
  * 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
  * behavior change from before this, and a multi-mailbox user sees every mailbox's folders (and the new
  * aggregate section) simultaneously, matching the shared-mailbox feature's own "display as a separate set
  * 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. 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({ 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
@@ -136,51 +139,60 @@ export default function MailShell({ userUid, authServerUrl, impersonating, imper
     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(() => {
+    // 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"));
+        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.
     useEffect(() => {
         setDrawerOpen(false);
     }, [search]);
-    const aggregateFolderType = isAggregateFolderType(requestedAggregateType)
-        ? requestedAggregateType
-        : undefined;
-    const mailboxUid = aggregateFolderType
-        ? undefined
-        : (requestedMailboxUid && mailboxes.some((mb) => mb.uid === requestedMailboxUid) ? requestedMailboxUid : undefined) ??
-            mailboxes[0]?.uid;
+    // What the address asks for.
+    const requestedAggregate = isAggregateFolderType(requestedAggregateType) ? requestedAggregateType : undefined;
+    const requestedMailbox = 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.
+    const defaultMailboxUid = primaryMailboxUid(mailboxes, userUid);
+    // 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 = !requestedAggregate && !requestedMailbox && requestedFolderUid === null && mailboxes.length > 1;
+    const aggregateFolderType = requestedAggregate ?? (aggregateByDefault ? "inbox" : undefined);
+    const mailboxUid = aggregateFolderType ? undefined : (requestedMailbox ?? defaultMailboxUid);
     const selectedMailboxFolders = mailboxFolders.find((mf) => mf.mailbox.uid === mailboxUid)?.folders ?? [];
     const folderUid = aggregateFolderType
         ? undefined
         : (requestedFolderUid && selectedMailboxFolders.some((f) => f.uid === requestedFolderUid) ? requestedFolderUid : undefined) ??
             selectedMailboxFolders.find((f) => f.type === "inbox")?.uid;
     // The mailbox `KeyEnrollmentGate`/`LocalIndexLifecycle`/`ComposeButton` treat as "the" mailbox when
-    // there's no single selected one to use (aggregate mode) - the caller's own owned mailbox if they
-    // have one, else whichever accessible mailbox happens to be first. See MailShell's own doc comment on
+    // there's no single selected one to use (aggregate mode) - the caller's primary mailbox (`primaryMailbox()`). See MailShell's own doc comment on
     // this being an accepted limitation: an aggregate-view message from a *different*, not-yet-visited
     // 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;
+    // Which sidebar sections are open: "All mailboxes" and the primary mailbox unless the reader chose otherwise. Any of them can be collapsed;
+    // a change of the open folder into another section opens that one (see `useSidebarSections()`); the first selection, once the address has been read
+    // and the mailboxes are here, is where a load lands, not a navigation. A lone mailbox has nothing to collapse, so its section is never a toggle.
+    const sections = useSidebarSections({
+        userUid,
+        primaryUid: defaultMailboxUid,
+        activeId: aggregateFolderType ? ALL_MAILBOXES_SECTION : mailboxUid,
+    });
+    const collapsible = mailboxes.length > 1;
     const counts = folderCounts.counts;
     const trackMessageChange = folderCounts.track;
+    const refreshFolderCounts = folderCounts.refresh;
+    const folderCountOf = useCallback((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(null);
-    const contextValue = useMemo(() => ({ mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot }), [mailboxUid, folderUid, aggregateFolderType, mailboxes, mailboxFolders, onFolderCreated, noteFolderUids, live, trackMessageChange, mobileSearchSlot]);
+    const contextValue = useMemo(() => ({ 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
     // 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
@@ -201,32 +213,33 @@ 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, { 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", { 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", { 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(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: [_jsxs("div", { className: "md:hidden flex items-center gap-2 p-3", children: [_jsx("button", { type: "button", className: "shrink-0 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("div", { ref: setMobileSearchSlot, className: "flex-1 min-w-0" })] }), _jsx(MobileComposeButton, { mailboxUid: defaultMailboxUid }), _jsx(MailShellContext.Provider, { value: contextValue, children: children })] })] }));
+        // `idPrefix` keeps each section's folder list's id (which its heading's `aria-controls` names) unique between the two.
+        const sidebarContent = (idPrefix) => (_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 && (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${ALL_MAILBOXES_SECTION}`, label: "All Mailboxes", collapsible: collapsible, expanded: sections.isExpanded(ALL_MAILBOXES_SECTION), onToggle: () => sections.toggle(ALL_MAILBOXES_SECTION), unread: unreadBadgeTotal(mailboxFolders.flatMap((mf) => mf.folders), counts), children: AGGREGATE_FOLDER_TYPES.map((type) => {
+                                const badge = aggregateBadge(mailboxFolders, type, counts);
+                                return (_jsxs("a", { 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
+                                            ? "bg-primary/10 text-primary-dark font-semibold"
+                                            : "text-text hover:bg-surface-alt",
+                                    ].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 }) => (_jsx(SidebarSection, { domId: `${idPrefix}-mail-section-${mailbox.uid}`, label: _jsxs(_Fragment, { children: [mailbox.displayName, mailbox.ownerUserUid ? "" : " (shared)"] }), collapsible: collapsible, expanded: sections.isExpanded(mailbox.uid), onToggle: () => sections.toggle(mailbox.uid), unread: unreadBadgeTotal(folders, counts), notice: mailboxError && (_jsx("div", { className: "px-2.5 pb-1", children: _jsx(Alert, { children: mailboxError }) })), 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)}`, "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
+                                            ? "bg-primary/10 text-primary-dark font-semibold"
+                                            : "text-text hover:bg-surface-alt",
+                                    ].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(MailShortcuts, { mailboxUid: defaultMailboxUid }), _jsx("aside", { className: "hidden md:flex w-64 shrink-0 bg-surface border-r border-border flex-col", children: sidebarContent("desktop") }), _jsx(Drawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: "Folders", fullScreen: true, children: _jsx("div", { className: "flex flex-col", children: sidebarContent("mobile") }) }), _jsxs("main", { className: "flex-1 min-w-0 overflow-y-auto", children: [_jsxs("div", { className: "md:hidden flex items-center gap-2 p-3", children: [_jsx("button", { type: "button", className: "shrink-0 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("div", { ref: setMobileSearchSlot, className: "flex-1 min-w-0" })] }), _jsx(MobileComposeButton, { mailboxUid: defaultMailboxUid }), _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

package/dist/apps/shared/components/mail/layout/SidebarSection.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+export interface SidebarSectionProps {
+    /** Unique per rendering of the sidebar (it is on screen twice on a phone: beside the list and in the drawer): names the folder list the heading controls. */
+    domId: string;
+    /** The heading's text. */
+    label: ReactNode;
+    /** Whether the heading is a toggle at all. Not for a lone mailbox, whose section has nothing to be hidden for. */
+    collapsible: boolean;
+    expanded: boolean;
+    onToggle: () => void;
+    /** The unread mail in the section's folders that carry an unread count (see `unreadBadgeTotal()`), shown on the heading while it is collapsed (and only when there is some) so new mail in a hidden section is still noticed. */
+    unread?: number;
+    /** Shown between the heading and the folders, collapsed or not: a failure to load the section's folders is not something to hide. */
+    notice?: ReactNode;
+    /** The section's folder rows. */
+    children: ReactNode;
+}
+/**
+ * One section of Mail's sidebar ("All mailboxes", or one mailbox): a heading over a list of folders. When `collapsible` the heading is a
+ * disclosure button (`aria-expanded`, `aria-controls` the list, a chevron that turns) and the list is `hidden` while it is collapsed -
+ * kept in the document, so the button's `aria-controls` always names something and nothing is fetched or rebuilt on opening it.
+ */
+export default function SidebarSection({ domId, label, collapsible, expanded, onToggle, unread, notice, children }: SidebarSectionProps): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HiChevronDown } from "react-icons/hi2";
+import FolderBadgeChip from "./FolderBadgeChip.js";
+/**
+ * One section of Mail's sidebar ("All mailboxes", or one mailbox): a heading over a list of folders. When `collapsible` the heading is a
+ * disclosure button (`aria-expanded`, `aria-controls` the list, a chevron that turns) and the list is `hidden` while it is collapsed -
+ * kept in the document, so the button's `aria-controls` always names something and nothing is fetched or rebuilt on opening it.
+ */
+export default function SidebarSection({ domId, label, collapsible, expanded, onToggle, unread = 0, notice, children }) {
+    const shown = !collapsible || expanded;
+    return (_jsxs("div", { children: [collapsible ? (_jsx("h2", { className: "mb-1", children: _jsxs("button", { type: "button", "aria-expanded": expanded, "aria-controls": domId, onClick: onToggle, className: [
+                        "flex w-full items-center gap-1 rounded-sm px-2.5 py-0.5 text-left text-xs font-bold uppercase tracking-wide text-text-muted",
+                        "focus-visible:outline-2 focus-visible:outline-primary",
+                        "hover:bg-surface-alt hover:text-text",
+                    ].join(" "), children: [_jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: ["shrink-0 transition-transform", expanded ? "" : "-rotate-90"].join(" ") }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: label }), !expanded && unread > 0 && _jsx(FolderBadgeChip, { badge: { kind: "unread", value: unread } })] }) })) : (_jsx("div", { className: "text-xs font-bold uppercase tracking-wide text-text-muted mb-1 px-2.5 truncate", children: label })), notice, _jsx("div", { id: domId, hidden: !shown, className: shown ? "flex flex-col gap-0.5" : "hidden", children: children })] }));
+}

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

@@ -0,0 +1,56 @@
+import React from "react";
+import { 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;
+}
+/** The sections of the menu - Outlook's "More actions", cut to what this product really does. */
+export declare function buildMessageMenu(props: MessageMoreMenuProps): MenuSectionSpec[];
+/**
+ * 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): React.JSX.Element;

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

@@ -0,0 +1,153 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 from "../MenuButton.js";
+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, label, icon, onSelect, reason, extra = {}) {
+    return { key, label, icon, onSelect, disabled: reason !== undefined, description: reason, ...extra };
+}
+/** The sections of the menu - Outlook's "More actions", cut to what this product really does. */
+export function buildMessageMenu(props) {
+    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) => 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: _jsx(HiOutlineArrowUturnLeft, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "reply-actions-items",
+                            items: [
+                                row("reply-all", "Reply all", _jsx(HiOutlineArrowUturnLeft, { size: 16 }), actions.replyAll, composing ? "Opening the compose window" : undefined),
+                                row("forward", "Forward", _jsx(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", _jsx(HiOutlineTrash, { size: 16 }), actions.deleteMessage, waiting(changeReason)),
+                row("toggle-read", read ? "Mark as unread" : "Mark as read", read ? _jsx(HiOutlineEnvelope, { size: 16 }) : _jsx(HiOutlineEnvelopeOpen, { size: 16 }), actions.toggleRead, waiting(changeReason)),
+                row("toggle-flag", flagged ? "Unflag" : "Flag", _jsx(HiOutlineFlag, { size: 16 }), actions.toggleFlag, waiting(changeReason)),
+            ],
+        },
+        {
+            key: "sender",
+            items: [
+                {
+                    key: "report",
+                    label: "Report",
+                    icon: _jsx(HiOutlineNoSymbol, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "report-items",
+                            items: [
+                                row("report-junk", "Report junk", _jsx(HiOutlineNoSymbol, { size: 16 }), actions.reportJunk, waiting(junkReason)),
+                                row("report-phishing", "Report phishing", _jsx(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", _jsx(HiOutlineInboxArrowDown, { size: 16 }), actions.notJunk, waiting(changeReason)),
+                                        ...(props.canTrustSender && !ownSender
+                                            ? [
+                                                row("not-junk-trust", trustLabel, _jsx(HiOutlineShieldCheck, { size: 16 }), actions.notJunkAndTrust, waiting(changeReason), {
+                                                    title: trustLabel,
+                                                }),
+                                            ]
+                                            : []),
+                                    ]
+                                    : []),
+                            ],
+                        },
+                    ],
+                },
+                {
+                    key: "block",
+                    label: "Block",
+                    icon: _jsx(HiOutlineHandRaised, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "block-items",
+                            items: [
+                                row("block-sender", blockLabel, _jsx(HiOutlineHandRaised, { size: 16 }), actions.blockSender, waiting(blockReason), { title: blockLabel }),
+                                row("never-block-sender", neverBlockLabel, _jsx(HiOutlineShieldCheck, { size: 16 }), actions.neverBlockSender, waiting(blockReason), { title: neverBlockLabel }),
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            key: "output",
+            items: [
+                row("print", "Print", _jsx(HiOutlinePrinter, { size: 16 }), actions.print, printReason),
+                {
+                    key: "view",
+                    label: "View",
+                    icon: _jsx(HiOutlineEye, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "view-items",
+                            items: [
+                                row("view-source", "View message source", _jsx(HiOutlineCodeBracket, { size: 16 }), actions.viewSource),
+                                row("view-details", "Message details", _jsx(HiOutlineInformationCircle, { size: 16 }), actions.viewDetails),
+                            ],
+                        },
+                    ],
+                },
+                {
+                    key: "save-as",
+                    label: "Save as",
+                    icon: _jsx(HiOutlineArrowDownTray, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "save-as-items",
+                            items: [
+                                row("save-eml", "Save as .eml", _jsx(HiOutlineEnvelope, { size: 16 }), actions.saveAsEml),
+                                row("save-pdf", "Save as PDF", _jsx(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: _jsx(HiOutlineCog6Tooth, { size: 16 }),
+                    submenu: [
+                        {
+                            key: "advanced-items",
+                            items: [row("create-rule", "Create rule", _jsx(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) {
+    return (_jsx(MenuButton, { iconOnly: true, label: "More actions", "aria-label": "More actions", title: "More actions", icon: _jsx(HiOutlineEllipsisHorizontal, { size: 16, "aria-hidden": "true" }), className: props.triggerClassName, sections: buildMessageMenu(props), width: 288 }));
+}

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

@@ -0,0 +1,27 @@
+import React from "react";
+/** 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;
+}
+/**
+ * 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): React.JSX.Element;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { 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";
+const TITLES = { 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 }) {
+    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 (_jsx(Drawer, { open: open, onClose: onClose, title: title, fullScreen: true, children: _jsxs("div", { className: "flex flex-col gap-3 text-sm", children: [encrypted && (_jsx("p", { role: "note", className: "py-2 px-3 rounded-sm bg-surface-alt text-text", children: "This message is encrypted. This is the encrypted message exactly as the server stores it; it is not decrypted here." })), source.status === "loading" && (_jsx("p", { role: "status", className: "text-text-muted", children: "Loading the message\u2026" })), source.status === "error" && _jsx(Alert, { children: source.message }), source.status === "ready" && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(CopyButton, { value: text, label: `Copy the ${mode === "headers" ? "message headers" : "message source"}` }), cut && (_jsxs("span", { className: "text-xs text-text-muted", children: ["Showing the first ", MAX_SOURCE_DISPLAY_CHARS.toLocaleString(), " of ", text.length.toLocaleString(), " characters. Copy and Save as .eml keep all of it."] }))] }), _jsx("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", children: cut ? text.slice(0, MAX_SOURCE_DISPLAY_CHARS) : text })] }))] }) }));
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { OutgoingReply } from "../../../mail/outbox/outgoingReplies.js";
+/**
+ * A reply or forward that has just been sent, drawn where its message will be once the server has filed it: the sender, who it went to, its body as
+ * it was composed, and one line saying where it is - "Sending...", "Sent", or, when it did not go, "Not sent: <why>" with the same ways out the
+ * pop-up offers (Retry, Open draft ...). It reads like the message's own card, so the real message replaces it without the thread rearranging.
+ *
+ * The body goes through the reading pane's own sanitizing frame (`MessageBody`), exactly as a received message's does.
+ */
+export default function PendingMessageCard({ reply, headerRef, }: {
+    reply: OutgoingReply;
+    /** Registered so the pane can put the focus here when the message first appears. Focusable, but not in the tab order. */
+    headerRef: (node: HTMLHeadingElement | null) => void;
+}): React.JSX.Element;

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

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