@rapidmx/web-client 0.16.0 → 0.17.0

package/apps/shared/components/mail/EmptyFolderBar.tsx

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { HiOutlineTrash } from "react-icons/hi2";
+
+export interface EmptyFolderBarProps {
+    /** The folder the list is showing ("Deleted Items", "Junk Email"). */
+    folderName: string;
+    /** How many messages it holds, when that is known. */
+    count?: number;
+    /** Nothing to empty, or not allowed to. */
+    disabled: boolean;
+    /** Why, shown as the button's tooltip while it is disabled. */
+    disabledReason?: string;
+    onEmpty: () => void;
+}
+
+/**
+ * Outlook's "Empty folder", at the top of the list of Deleted Items and of Junk Email: the whole folder is permanently deleted, after the
+ * page has asked (this only reports the click). A row of its own under the toolbar rather than a toolbar button, so the toolbar keeps the
+ * width a phone gives it and the action is never taken for one of the list's arrangement controls.
+ */
+export default function EmptyFolderBar({ folderName, count, disabled, disabledReason, onEmpty }: EmptyFolderBarProps) {
+    return (
+        <div className="flex items-center justify-between gap-2 px-3 py-1 border-b border-border text-xs text-text-muted">
+            <span>{count === undefined ? "" : `${count} ${count === 1 ? "item" : "items"}`}</span>
+            <button
+                type="button"
+                onClick={onEmpty}
+                disabled={disabled}
+                title={disabled ? disabledReason : `Permanently delete everything in ${folderName}`}
+                className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-sm text-danger hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent"
+            >
+                <HiOutlineTrash size={16} aria-hidden="true" className="shrink-0" />
+                {`Empty ${folderName}`}
+            </button>
+        </div>
+    );
+}

package/apps/shared/components/mail/MailSelectionBar.tsx

@@ -46,7 +46,12 @@ export interface MailSelectionBarProps {
      * prompt, which would be claiming the move simply didn't happen. */
     onMoveTo: (folderUid: string) => Promise<void>;
     onReportJunk: () => void;
+    /** Delete: moves the selection to Deleted Items - or, when `deletesPermanently`, permanently deletes it (the page asks first). */
     onDelete: () => void;
+    /** The selection is in Deleted Items, so Delete is the permanent one: the button says "Delete permanently" and is styled as the destructive
+     * action it is. The page decides (a search over several mailboxes lists messages from more than one folder, so the folder being viewed is not
+     * always the answer). */
+    deletesPermanently?: boolean;
     /** A bulk action is in flight - every action is held until it settles, since the next one would send
      * `version`s the first has already superseded. */
     busy: boolean;
@@ -60,8 +65,8 @@ export interface MailSelectionBarProps {
     labelsDisabledReason?: string;
 }
 
-function actionClassName(): string {
-    return "px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent";
+function actionClassName(destructive = false): string {
+    return `px-2 py-1 rounded-md text-sm ${destructive ? "text-danger font-semibold" : "text-text"} hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent`;
 }
 
 /**
@@ -69,9 +74,9 @@ function actionClassName(): string {
  * select-all/clear, and the bulk actions Outlook offers for a multi-selection - mark read/unread, flag,
  * archive, move, report junk and delete.
  *
- * "Delete" means *move to Deleted Items*, never a permanent erase: there is no bulk permanent-delete API,
- * and the collection-level DELETE truncates the folder rather than removing a selection. An action whose
- * target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
+ * "Delete" means *move to Deleted Items* - except on messages that are already in Deleted Items (`deletesPermanently`),
+ * where it is "Delete permanently": the page confirms, then erases them for good, as Outlook's Delete does there. An
+ * action whose target folder is the one already being viewed is disabled with a reason rather than hidden, so the set
  * of actions doesn't shift around between folders.
  */
 export default function MailSelectionBar({
@@ -94,17 +99,16 @@ export default function MailSelectionBar({
     onMoveTo,
     onReportJunk,
     onDelete,
+    deletesPermanently = false,
     busy,
     shortcuts,
     moveDisabledReason,
     labelsDisabledReason,
 }: MailSelectionBarProps) {
     const env = useKeyEnvironment();
-    /** `title` and `aria-keyshortcuts` for an action the keyboard also does; `reason` (why it is disabled) wins the tooltip. */
-    const hint = (label: string, shortcut: ShortcutDef, reason?: string) =>
-        shortcuts
-            ? { title: reason ?? withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) }
-            : { title: reason };
+    /** `title` and `aria-keyshortcuts` for an action the keyboard also does. */
+    const hint = (label: string, shortcut: ShortcutDef) =>
+        shortcuts ? { title: withHint(label, shortcut, env), "aria-keyshortcuts": ariaKeyShortcuts(shortcut, env) } : {};
     const selectedCount = totals?.selected ?? selected.length;
     const listedCount = totals?.listed ?? listed.length;
     // Counted on the rows that were ticked, but *emptied* on the messages: a ticked conversation whose
@@ -122,7 +126,7 @@ export default function MailSelectionBar({
     // them is already being in the folder they would move to.
     const archiveReason = currentType === "archive" ? "These messages are already in Archive" : undefined;
     const junkReason = currentType === "junk" ? "These messages are already in Junk" : undefined;
-    const deleteReason = currentType === "deleted_items" ? "These messages are already in Deleted Items" : undefined;
+    const deleteLabel = deletesPermanently ? "Delete permanently" : "Delete";
 
     // A label every selected message already carries starts ticked; one only some of them carry starts
     // partially applied, and is left exactly as it is unless the reader touches that row.
@@ -224,11 +228,11 @@ export default function MailSelectionBar({
                 <button
                     type="button"
                     onClick={onDelete}
-                    disabled={none || busy || !!deleteReason}
-                    className={actionClassName()}
-                    {...hint("Delete", SHORTCUTS.mail.delete, deleteReason)}
+                    disabled={none || busy}
+                    className={actionClassName(deletesPermanently)}
+                    {...hint(deleteLabel, SHORTCUTS.mail.delete)}
                 >
-                    Delete
+                    {deleteLabel}
                 </button>
             </div>
         </div>

package/apps/shared/components/mail/MenuButton.tsx

@@ -19,6 +19,10 @@ interface MenuItemBase {
     checked?: boolean | "mixed";
     /** A colour swatch before the label - a label's own colour. */
     swatchColor?: string;
+    /** An icon before the label, for a menu whose rows are commands (the reading pane's "More actions"). */
+    icon?: ReactNode;
+    /** A tooltip for the row - the full text of a label the row truncates. */
+    title?: string;
     disabled?: boolean;
     /** Leaves the menu open after choosing this row, for a multi-select list where several rows are ticked
      * before one command commits them all. */
@@ -97,8 +101,11 @@ export function menuHeight(sections: MenuSectionSpec[], width: number = DEFAULT_
 }
 
 export interface MenuButtonProps {
-    /** The trigger's visible label. */
+    /** The trigger's visible label. Not drawn (nor is the chevron) with `iconOnly`, where `aria-label` is all the trigger says. */
     label: ReactNode;
+    /** The trigger is just its `icon` - a round icon button like the reading pane's own command row, whose `className` it takes over
+     * completely. `aria-label` (and `title`) name it. */
+    iconOnly?: boolean;
     /** The trigger's accessible name, which also names the menu itself - includes the current selection
      * where there is one ("Filter: Unread"), so the button says what it's set to, not just what it does. */
     "aria-label": string;
@@ -127,6 +134,7 @@ export interface MenuButtonProps {
  */
 export default function MenuButton({
     label,
+    iconOnly = false,
     icon,
     disabled,
     title,
@@ -190,8 +198,10 @@ export default function MenuButton({
 
     function enterSubmenu(item: MenuSubmenuSpec) {
         setSubmenuKey(item.key);
-        // Past the Back row, onto the first row of the submenu itself.
-        setActiveIndex(1 + initialActiveIndex(item.submenu.flatMap((section) => section.items)));
+        const rows = item.submenu.flatMap((section) => section.items);
+        // Past the Back row, onto the first row of the submenu itself - or, when none of them can take focus (every row is unavailable right now), onto
+        // the Back row, so the keyboard still has a place to be.
+        setActiveIndex(rows.some((row) => !row.disabled) ? 1 + initialActiveIndex(rows) : 0);
     }
 
     function leaveSubmenu() {
@@ -285,16 +295,20 @@ export default function MenuButton({
                 disabled={disabled}
                 onClick={() => (open ? closeMenu(false) : openMenu())}
                 onKeyDown={handleTriggerKeyDown}
-                className={[
-                    // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
-                    // whatever sits beside it in the toolbar off the edge of a 384px list column.
-                    "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
-                    className,
-                ].join(" ")}
+                className={
+                    iconOnly
+                        ? className
+                        : [
+                              // `min-w-0` so a long label ("Filter: Has attachments") truncates instead of pushing
+                              // whatever sits beside it in the toolbar off the edge of a 384px list column.
+                              "inline-flex min-w-0 items-center gap-1 px-2 py-1 rounded-md text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent",
+                              className,
+                          ].join(" ")
+                }
             >
                 {icon}
-                <span className="truncate">{label}</span>
-                <HiChevronDown size={14} aria-hidden="true" className="shrink-0 text-text-muted" />
+                {!iconOnly && <span className="truncate">{label}</span>}
+                {!iconOnly && <HiChevronDown size={14} aria-hidden="true" className="shrink-0 text-text-muted" />}
             </button>
             {open && (
                 <PopoverPortal
@@ -332,6 +346,7 @@ export default function MenuButton({
                                             type="button"
                                             role={role}
                                             disabled={item.disabled}
+                                            title={item.title}
                                             tabIndex={index === activeIndex ? 0 : -1}
                                             {...(role === "menuitem"
                                                 ? {}
@@ -352,6 +367,11 @@ export default function MenuButton({
                                             </span>
                                             <span className="min-w-0 flex-1">
                                                 <span className="flex h-5 items-center gap-1.5">
+                                                    {item.icon && (
+                                                        <span aria-hidden="true" className="shrink-0 text-text-muted">
+                                                            {item.icon}
+                                                        </span>
+                                                    )}
                                                     {item.swatchColor && (
                                                         <span
                                                             aria-hidden="true"

package/apps/shared/components/mail/MessageDetailPane.tsx

@@ -10,8 +10,10 @@ import {
     HiOutlineCheck,
     HiOutlineExclamationTriangle,
     HiOutlineFolderArrowDown,
+    HiOutlineInboxArrowDown,
     HiOutlineLockClosed,
     HiOutlineMoon,
+    HiOutlineNoSymbol,
     HiOutlineSun,
 } from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
@@ -68,6 +70,10 @@ import { useKeyEnvironment } from "../../keyboard/ShortcutProvider.js";
 import { useShortcut } from "../../keyboard/useShortcut.js";
 import { useUnlockPrompt } from "../layout/UnlockPromptProvider.js";
 import { moveLocalEntity } from "../../search/localIndexRpcClient.js";
+import { useNavigate } from "../../navigation/index.js";
+import { notify } from "../../notifications/store.js";
+import { notifyApiError } from "../../notifications/apiErrors.js";
+import { useMailboxUpdateAccess } from "../../mail/useMailboxUpdateAccess.js";
 import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
@@ -76,7 +82,12 @@ import EncryptedBody from "./reading/EncryptedBody.js";
 import { displaySubject } from "./reading/EncryptedPreview.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
 import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
-import type { BodyContent } from "./reading/bodyContent.js";
+import MessageMoreMenu, { MessageMenuActions } from "./reading/MessageMoreMenu.js";
+import MessageSourceDialog, { SourceMode, SourceState } from "./reading/MessageSourceDialog.js";
+import { useMessageActions } from "./reading/useMessageActions.js";
+import { saveAsEml } from "./reading/messageExport.js";
+import { buildPrintDocument, printDocument } from "./reading/printMessage.js";
+import { type BodyContent, fetchBodyContent } from "./reading/bodyContent.js";
 import { useViewOriginal } from "./reading/viewOriginal.js";
 import { ROW_FOCUS_CLASS, UnreadLabel, dateClass, senderClass } from "./unreadStyle.js";
 
@@ -198,11 +209,16 @@ function downloadMimeAttachment(attachment: MimeAttachment): void {
  * A plain `<button>` rather than react-shared's `Button`, whose padding and minimum width are sized for a
  * text label. Ordinary DOM order, so the keyboard reaches these in the order they are read.
  */
+/** The look of the card's round icon buttons, shared with the "More actions" trigger. */
+const ICON_BUTTON_CLASS =
+    "inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent";
+
 function IconAction({
     icon,
     label,
     onClick,
     disabled,
+    reason,
     busy,
     onPrefetch,
     shortcut,
@@ -211,6 +227,8 @@ function IconAction({
     label: string;
     onClick: () => void;
     disabled?: boolean;
+    /** Why the button is disabled, when it is: the tooltip says so instead of naming the action. */
+    reason?: string;
     busy?: boolean;
     /** Called when the pointer or keyboard reaches the button - the moment to start fetching what a click will need. */
     onPrefetch?: () => void;
@@ -223,14 +241,14 @@ function IconAction({
         <button
             type="button"
             aria-label={label}
-            title={shortcut ? withHint(label, shortcut, env) : label}
+            title={reason ?? (shortcut ? withHint(label, shortcut, env) : label)}
             aria-keyshortcuts={shortcut ? ariaKeyShortcuts(shortcut, env) : undefined}
             aria-busy={busy || undefined}
             disabled={disabled}
             onClick={onClick}
             onPointerEnter={onPrefetch}
             onFocus={onPrefetch}
-            className="inline-flex items-center justify-center p-1.5 rounded-md border border-border text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent"
+            className={ICON_BUTTON_CLASS}
         >
             {icon}
         </button>
@@ -333,6 +351,11 @@ export interface MessageDetailPaneProps {
      * server-side 400 guard); Drafts is detected via `draftsFolderUid` (already passed by every caller
      * for the Outbox-cancel flow) rather than a new prop. */
     onArchived?: (updated: Message) => void;
+    /** Called with the server's updated copy (and the copy it replaces) after the card's More actions menu marked the message read or unread, or
+     * flagged or unflagged it - it stays where it is, so a caller patches it in place, as it does for `onLabelsChanged`. The menu's Delete, Report
+     * junk and Block move the message out of its folder and are reported through `onMoved`, which is what makes a thread's card leave it and the
+     * pane advance, exactly as after Archive. */
+    onChanged?: (updated: Message, previous?: Message) => void;
     /** Every label defined in this message's mailbox, for the label-assignment popover below — each
      * caller fetches its own mailbox's labels the same way it already resolves `draftsFolderUid`
      * (`listLabels()`). Absent/empty simply hides the Labels control - there's nothing to assign. */
@@ -369,9 +392,14 @@ export interface MessageDetailPaneProps {
     shortcuts?: boolean;
 }
 
+/** A subject without its \`Re:\`/\`Fwd:\` prefixes. */
+function withoutSubjectPrefixes(subject: string | undefined): string {
+    return (subject ?? "").replace(/^(\s*(re|fw|fwd|aw|sv)\s*:)+/i, "").trim();
+}
+
 /** A subject without its \`Re:\`/\`Fwd:\` prefixes, lower-cased - what makes two messages of one thread the same subject. */
 function subjectCore(subject: string | undefined): string {
-    return (subject ?? "").replace(/^(\s*(re|fw|fwd|aw|sv)\s*:)+/i, "").trim().toLowerCase();
+    return withoutSubjectPrefixes(subject).toLowerCase();
 }
 
 /** Whether a message's subject says nothing its thread's subject doesn't. */
@@ -425,6 +453,7 @@ function MessageDetailContent({
     onFolderCreated,
     onReceiptHandled,
     onArchived,
+    onChanged,
     labels,
     onLabelsChanged,
     onLabelCreated,
@@ -922,6 +951,37 @@ function MessageDetailContent({
     useShortcut(SHORTCUTS.mail.archive, () => void (!archiving && handleArchive()), { enabled: keyboard && archivable });
     useShortcut(SHORTCUTS.mail.move, () => setMovePrompt(true), { enabled: keyboard && movable });
 
+    // The card's Report junk button and "More actions" menu: they act on this message, in the mailbox it is in. Nothing of them applies to a message
+    // being written or sent (Drafts, Outbox), and Report junk and Block are not for mail the reader sent.
+    const folderType = folders?.find((folder) => folder.uid === message.folderUid)?.type;
+    const inJunk = folderType === "junk";
+    const inDeletedItems = folderType === "deleted_items";
+    const reportable = archivable && !isSentItems;
+    const writable = useMailboxUpdateAccess(readerMailbox);
+    const remember = (updated: Message) => {
+        latestLabelsMessageRef.current = updated;
+        setLabelsMessage(updated);
+    };
+    // Every address the reader owns, in any of their mailboxes: a sender among them is not blocked.
+    const readerOwnAddresses = mailboxes.flatMap((mb) => [mb.primarySmtpAddress, ...(mb.aliasAddresses ?? [])]).filter((address) => !!address).map((address) => address.toLowerCase());
+    const messageActions = useMessageActions({
+        message,
+        ownAddresses: readerOwnAddresses,
+        newest: () => (message.version >= latestLabelsMessageRef.current.version ? message : latestLabelsMessageRef.current),
+        remember,
+        folders,
+        inJunk,
+        inDeletedItems,
+        trackMessageChange,
+        onMoved,
+        onChanged,
+        onFolderCreated,
+    });
+    const navigate = useNavigate();
+    const [sourceView, setSourceView] = useState<{ mode: SourceMode; source: SourceState } | null>(null);
+    // Which "View source" request the dialog is waiting for: one answering after the dialog was closed (or another was opened) is not shown.
+    const sourceRequestRef = useRef(0);
+
     // Only ever invoked from the pending-receipt banner below, which itself only renders once `message`
     // is loaded — same real invariant as every other handler above.
     async function handleReceipt(type: ReceiptType, action: "approve" | "decline") {
@@ -1040,6 +1100,108 @@ function MessageDetailContent({
         </>
     );
 
+    // ---- The "More actions" menu's own rows (Print, View, Save as, Create rule); the rest are `messageActions`. ----
+
+    /** Prints this one message: its header lines and the body the pane shows (what was decrypted or verified here, else the server's sanitized
+     * body), in a frame of its own - see `printMessage.ts`. */
+    async function handlePrint() {
+        try {
+            const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
+            const format = (list: Recipient[]) => list.map((r) => formatMailAddress(r)).join(", ");
+            const printable = buildPrintDocument({
+                subject: shownSubject,
+                headers: [
+                    { name: "From", value: senderLabel },
+                    { name: "To", value: format(message.recipients.filter((r) => r.type !== "cc" && r.type !== "bcc")) },
+                    { name: "Cc", value: format(message.recipients.filter((r) => r.type === "cc")) },
+                    { name: "Date", value: new Date(message.receivedDate).toLocaleString() },
+                ],
+                content,
+                attachments,
+                inlineParts: innerAttachments,
+            });
+            if (printable === undefined) {
+                notify({ kind: "warning", title: "This message is too large to print here" });
+                return;
+            }
+            printDocument(printable);
+        } catch (err) {
+            notifyApiError(err, "Couldn't print this message");
+        }
+    }
+
+    /** Opens the source (or just the headers) of the message as the server has it - for an encrypted message, its ciphertext. */
+    function openSource(mode: SourceMode) {
+        const request = ++sourceRequestRef.current;
+        setSourceView({ mode, source: { status: "loading" } });
+        getMessageRawContent(message.uid).then(
+            (raw) => {
+                if (sourceRequestRef.current === request) {
+                    setSourceView({ mode, source: { status: "ready", raw } });
+                }
+            },
+            (err) => {
+                if (sourceRequestRef.current === request) {
+                    setSourceView({ mode, source: { status: "error", message: err instanceof ApiRequestError ? err.message : "Could not load this message's source." } });
+                }
+            },
+        );
+    }
+
+    function closeSource() {
+        sourceRequestRef.current++;
+        setSourceView(null);
+    }
+
+    async function handleSaveAsEml() {
+        try {
+            saveAsEml(await getMessageRawContent(message.uid), protectedSubject ?? displaySubject(message.subject));
+        } catch (err) {
+            notifyApiError(err, "Couldn't save this message");
+        }
+    }
+
+    /** The rules page's "New mail filter", started from this message: its sender and (for a message the server can read) its subject. */
+    function handleCreateRule() {
+        const params = new URLSearchParams({ mailboxUid: message.mailboxUid, from: message.from.address });
+        const subject = message.encrypted ? "" : withoutSubjectPrefixes(message.subject);
+        if (subject) {
+            params.set("subject", subject);
+        }
+        navigate(`/settings/filters/new?${params.toString()}`);
+    }
+
+    const menuActions: MessageMenuActions = {
+        replyAll: () => void handleReplyOrForward("replyAll"),
+        forward: () => void handleReplyOrForward("forward"),
+        deleteMessage: () => void messageActions.deleteMessage(),
+        toggleRead: () => void messageActions.toggleRead(),
+        toggleFlag: () => void messageActions.toggleFlag(),
+        reportJunk: () => void messageActions.reportJunk(),
+        reportPhishing: () => void messageActions.reportPhishing(),
+        notJunk: () => void messageActions.notJunk(),
+        notJunkAndTrust: () => void messageActions.notJunkAndTrust(),
+        blockSender: () => void messageActions.blockSender(),
+        neverBlockSender: () => void messageActions.neverBlockSender(),
+        print: () => void handlePrint(),
+        viewSource: () => openSource("source"),
+        viewDetails: () => openSource("headers"),
+        saveAsEml: () => void handleSaveAsEml(),
+        createRule: handleCreateRule,
+    };
+    // An encrypted message can be printed once it has been opened here: while it is still opening, or when it can't be, there is nothing to print.
+    const printReason = !message.encrypted
+        ? undefined
+        : security === null
+          ? "Still opening this message"
+          : security.decryptError === undefined
+            ? undefined
+            : lockedRef.current
+              ? "Unlock this message to print it"
+              : "This message can't be read, so it can't be printed";
+    // In Junk Email the card's button is the way back (Not junk), which only needs the right to change the message.
+    const reportReason = !writable ? "View-only mailbox" : undefined;
+
     const card = (
         <CardShell unread={cardUnread}>
             {/* Header row: who it is from, when, and what can be done with it. Wraps: on a phone the actions drop under the sender. */}
@@ -1153,6 +1315,16 @@ function MessageDetailContent({
                             onClick={() => setMovePrompt(true)}
                         />
                     )}
+                    {reportable && (
+                        <IconAction
+                            icon={inJunk ? <HiOutlineInboxArrowDown size={16} aria-hidden="true" /> : <HiOutlineNoSymbol size={16} aria-hidden="true" />}
+                            label={inJunk ? "Not junk" : "Report junk"}
+                            busy={messageActions.busy}
+                            disabled={messageActions.busy || reportReason !== undefined}
+                            reason={reportReason}
+                            onClick={() => void (inJunk ? messageActions.notJunk() : messageActions.reportJunk())}
+                        />
+                    )}
                     {labels && labels.length > 0 && (
                         <LabelMenuButton
                             aria-label="Labels"
@@ -1170,6 +1342,24 @@ function MessageDetailContent({
                             clear={{ label: "Remove all labels" }}
                         />
                     )}
+                    {archivable && (
+                        <MessageMoreMenu
+                            actions={menuActions}
+                            senderAddress={message.from.address}
+                            read={currentLabelsMessage.flags.read === true}
+                            flagged={currentLabelsMessage.flags.flagged === true}
+                            writable={writable}
+                            busy={messageActions.busy}
+                            inJunk={inJunk}
+                            inDeletedItems={inDeletedItems}
+                            sent={!!isSentItems}
+                            ownSender={readerOwnAddresses.includes(message.from.address.toLowerCase())}
+                            canTrustSender={writable}
+                            printReason={printReason}
+                            composing={preparingCompose}
+                            triggerClassName={ICON_BUTTON_CLASS}
+                        />
+                    )}
                 </div>
             </div>
 
@@ -1487,6 +1677,14 @@ function MessageDetailContent({
                 onMove={handleMove}
                 onFolderCreated={onFolderCreated}
             />
+            {messageActions.dialog}
+            <MessageSourceDialog
+                open={sourceView !== null}
+                onClose={closeSource}
+                mode={sourceView?.mode ?? "source"}
+                source={sourceView?.source ?? { status: "loading" }}
+                encrypted={!!message.encrypted}
+            />
             <Modal open={confirming} onClose={() => setConfirming(false)} title="Recall this message?">
                 <p className="text-sm text-text-muted mb-4">
                     This asks every original recipient's mail system to delete their copy, but only if it's

package/apps/shared/components/mail/PermanentDeleteDialog.tsx

@@ -0,0 +1,47 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+
+export interface PermanentDeleteDialogProps {
+    open: boolean;
+    title: string;
+    /** The question, ending in what cannot be undone. */
+    message: string;
+    /** The destructive button's own words ("Delete permanently"). */
+    confirmLabel: string;
+    /** The delete is on the wire: the dialog stays up, and can be neither confirmed again nor dismissed. */
+    busy: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+/**
+ * The confirmation in front of every permanent delete. A `Modal`, so Escape and the Cancel button dismiss it and Tab stays inside it. Focus
+ * starts on the dialog itself, never on the destructive button, so pressing Enter (or the Delete key again) on a dialog the reader did not
+ * mean to open keeps their mail. It remembers nothing: every permanent delete asks.
+ */
+export default function PermanentDeleteDialog({ open, title, message, confirmLabel, busy, onConfirm, onCancel }: PermanentDeleteDialogProps) {
+    return (
+        <Modal open={open} onClose={() => !busy && onCancel()} title={title}>
+            <p className="text-sm mb-5">{message}</p>
+            <div className="flex gap-3 justify-end mt-5">
+                <Button type="button" variant="secondary" className="!w-auto" disabled={busy} onClick={onCancel}>
+                    Cancel
+                </Button>
+                <Button
+                    type="button"
+                    className="!w-auto !bg-none !bg-danger !border-danger hover:!bg-danger"
+                    loading={busy}
+                    disabled={busy}
+                    onClick={onConfirm}
+                >
+                    {confirmLabel}
+                </Button>
+            </div>
+        </Modal>
+    );
+}