@rapidmx/web-client 0.6.0 → 0.7.0

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

@@ -3,27 +3,45 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import React, { useEffect, useRef, useState } from "react";
-import { HiOutlineCheck, HiOutlineExclamationTriangle, HiOutlineLockClosed } from "react-icons/hi2";
-import DOMPurify from "dompurify";
+import {
+    HiOutlineArchiveBox,
+    HiOutlineArrowUturnLeft,
+    HiOutlineArrowUturnRight,
+    HiOutlineCheck,
+    HiOutlineExclamationTriangle,
+    HiOutlineFolderArrowDown,
+    HiOutlineLockClosed,
+} from "react-icons/hi2";
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import {
     Attachment,
+    Folder,
     Message,
-    MessageClassification,
     ReceiptType,
+    Recipient,
     approveReceipt,
     archiveMessage,
     attachmentContentUrl,
     cancelScheduledSend,
-    classifyMessage,
     declineReceipt,
+    getMailbox,
     getMessage,
     getMessageRawContent,
+    moveMessage,
     recallMessage,
     setMessageLabels,
 } from "@rapidmx/react-shared/mail/mailApi.js";
 import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
-import { buildForwardQuote, buildReplyQuote, forwardSubject, replySubject } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
+import {
+    buildForwardQuote,
+    buildReplyQuote,
+    buildReplyRecipients,
+    buildReplyThreading,
+    forwardSubject,
+    replySubject,
+} from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
+import { sanitizeMessageBodyHtml } from "@rapidmx/react-shared/mail/messageBodySanitizer.js";
+import MoveToFolderDialog from "./MoveToFolderDialog.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
 import {
     MessageSecurityResult,
@@ -40,11 +58,14 @@ import { getMyMailboxAccess } from "@rapidmx/react-shared/mail/mailboxAccessApi.
 import KeyChangeReview from "../contacts/KeyChangeReview.js";
 import { KEY_CHANGE_STALE_MESSAGE, sameFingerprint } from "../contacts/contactKeys.js";
 import { useCompose } from "./compose/ComposeContext.js";
+import { loadOriginalMessage } from "./compose/quotedBody.js";
+import { formatRecipient } from "./compose/recipients.js";
 import { useMailShell } from "./layout/MailShell.js";
 import { useUnlockPrompt } from "../layout/UnlockPromptProvider.js";
 import { moveLocalEntity } from "../../search/localIndexRpcClient.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";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
 
 /** Labels/styling for `specs/end-to-end_encryption.md`'s "Message Security Indicators" table - kept as
@@ -155,6 +176,44 @@ function downloadMimeAttachment(attachment: MimeAttachment): void {
     setTimeout(() => URL.revokeObjectURL(url), 60_000);
 }
 
+/**
+ * One of the reading pane's own actions - Reply, Reply All, Forward, Archive, Move to Other - as an icon
+ * button. The action's name is its `aria-label` *and* its tooltip, so it has the same accessible name a
+ * labelled button had, and is never drawn beside the icon at any width: the row is icon-only everywhere,
+ * the way Outlook's own reading-pane command bar is, so it reads the same in the ~396px pane beside the
+ * message list and in a maximised window rather than changing shape at a breakpoint.
+ *
+ * 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.
+ */
+function IconAction({
+    icon,
+    label,
+    onClick,
+    disabled,
+    busy,
+}: {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    busy?: boolean;
+}) {
+    return (
+        <button
+            type="button"
+            aria-label={label}
+            title={label}
+            aria-busy={busy || undefined}
+            disabled={disabled}
+            onClick={onClick}
+            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"
+        >
+            {icon}
+        </button>
+    );
+}
+
 function SecurityIndicator({ security }: { security: MessageSecurityResult }) {
     const { label, className } = SECURITY_INDICATOR[security.state];
     if (security.state !== "verified_at_first_open") {
@@ -202,58 +261,10 @@ const ENCRYPTED_LOAD_ERROR = "Couldn't load this message's encrypted content.";
 const BODY_CSP_META =
     "<meta http-equiv=\"Content-Security-Policy\" content=\"default-src 'none'; img-src data: cid:; style-src 'unsafe-inline'\">";
 
-const EMBEDDED_URI = /^\s*(?:data|cid):/i;
-/** Attributes whose value makes the browser fetch a resource (as opposed to a user-clicked link). */
-const RESOURCE_URI_ATTRIBUTES = new Set(["src", "srcset", "background", "poster", "lowsrc", "dynsrc", "xlink:href", "action", "formaction"]);
-
-/** Decodes CSS escapes first (so an escaped `u\72l(` can't hide from the checks below), then drops every
- * `@import` and neutralizes every `url()`/`image-set()` reference that isn't a `data:`/`cid:` URI. */
-export function stripRemoteCssUrls(css: string): string {
-    return css
-        .replace(/\\([0-9a-f]{1,6})\s?/gi, (_match, hex: string) => String.fromCodePoint(Math.min(parseInt(hex, 16), 0x10ffff)))
-        .replace(/\\(.)/g, "$1")
-        .replace(/@import[^;]*;?/gi, "")
-        .replace(/(?:-webkit-)?image-set\((?:[^()]|\([^()]*\))*\)/gi, (match) =>
-            [...match.matchAll(/(["'])(.*?)\1/g)].every(([, , uri]) => EMBEDDED_URI.test(uri)) ? match : "none",
-        )
-        .replace(/url\(\s*(["']?)(.*?)\1\s*\)/gi, (match, _quote: string, uri: string) => (EMBEDDED_URI.test(uri) ? match : "none"));
-}
-
-let bodyPurifier: ReturnType<typeof DOMPurify> | undefined;
-
-/** A dedicated DOMPurify instance (hooks registered here never leak into any other DOMPurify caller)
- * that additionally strips every remote resource reference - see `stripRemoteCssUrls()`. */
-function getBodyPurifier(): ReturnType<typeof DOMPurify> {
-    if (!bodyPurifier) {
-        bodyPurifier = DOMPurify(window);
-        bodyPurifier.addHook("uponSanitizeElement", (node, data) => {
-            if (data.tagName === "style") {
-                // An element's `textContent` is always a string (only documents/doctypes yield null).
-                node.textContent = stripRemoteCssUrls(node.textContent as string);
-            }
-        });
-        bodyPurifier.addHook("uponSanitizeAttribute", (node, data) => {
-            const name = data.attrName.toLowerCase();
-            if (name === "style") {
-                data.attrValue = stripRemoteCssUrls(data.attrValue);
-                return;
-            }
-            const isNavigationLink = name === "href" && ["a", "area"].includes(node.nodeName.toLowerCase());
-            if (RESOURCE_URI_ATTRIBUTES.has(name) || (name === "href" && !isNavigationLink)) {
-                const candidates = name === "srcset" ? data.attrValue.split(/,\s+/) : [data.attrValue];
-                if (!candidates.every((candidate) => EMBEDDED_URI.test(candidate))) {
-                    data.keepAttr = false;
-                }
-            }
-        });
-    }
-    return bodyPurifier;
-}
-
-/** Sanitizes a client-rendered body for `srcDoc`, with the CSP meta as its very first element. */
+/** Sanitizes a client-rendered body for `srcDoc` (DOMPurify plus every remote resource reference stripped - see
+ * react-shared's `messageBodySanitizer.ts`), with the CSP meta as its very first element. */
 export function buildSecureSrcDoc(html: string): string {
-    const sanitized = getBodyPurifier().sanitize(html, { FORBID_TAGS: ["link", "meta", "base"] });
-    return BODY_CSP_META + sanitized;
+    return BODY_CSP_META + sanitizeMessageBodyHtml(html);
 }
 
 export interface MessageDetailPaneProps {
@@ -282,18 +293,21 @@ export interface MessageDetailPaneProps {
     /** Called with the server's updated copy (now back in Drafts, `scheduledSendTime` cleared) after
      * successfully canceling a scheduled send. */
     onScheduledSendCanceled?: (updated: Message) => void;
-    /** Whether `message` currently lives in the Inbox — Focused/Other classification is an Inbox-only
-     * concept (`FocusedInboxUtils.classifyMessage()` short-circuits to Focused for every other folder), so
-     * the "Move to Other"/"Move to Focused" control below only renders here, the same
-     * each-caller-computes-its-own-folder-type pattern `isSentItems`/`isOutbox` already use. */
-    isInbox?: boolean;
-    /** Called with the server's updated copy (carrying the new `inferenceClassification`) after a
-     * successful classify — mirrors `onRecalled`'s identical shape. */
-    onClassified?: (updated: Message) => void;
+    /** Every folder of this message's own mailbox, for the Move to prompt's destination list. Absent or
+     * empty simply hides the control — there is nowhere to move to. Each caller already resolves this to
+     * work out `isSentItems`/`isOutbox`/`draftsFolderUid`, so nothing new is fetched for it. */
+    folders?: Folder[];
+    /** Called with the server's updated copy (now in the chosen folder) after a successful Move to. A move
+     * takes the message out of whichever folder is being listed, so callers remove it from their list
+     * rather than patching it — unlike `onClassified`, which this replaces. */
+    onMoved?: (updated: Message) => void;
+    /** A folder created from the Move to prompt, so the caller's own list and the folder sidebar pick it up
+     * without a page load. */
+    onFolderCreated?: (folder: Folder) => void;
     /** Called with the server's updated copy after approving/declining a pending delivery/read receipt —
-     * mirrors `onRecalled`'s identical shape. No gating prop needed (unlike `isSentItems`/`isOutbox`/
-     * `isInbox`): `deliveryReceiptPending`/`readReceiptPending` already live directly on `message` and are
-     * only ever `true` on a real delivered copy, so the banner below is self-gating. */
+     * mirrors `onRecalled`'s identical shape. No gating prop needed (unlike `isSentItems`/`isOutbox`):
+     * `deliveryReceiptPending`/`readReceiptPending` already live directly on `message` and are only ever
+     * `true` on a real delivered copy, so the banner below is self-gating. */
     onReceiptHandled?: (updated: Message) => void;
     /** Called with the server's updated copy (now filed under the mailbox's Archive folder) after a
      * successful archive — mirrors `onRecalled`'s identical shape. Archiving itself is offered for any
@@ -309,6 +323,13 @@ export interface MessageDetailPaneProps {
      * a label — always patches in place, never removes from a caller's list (unlike `onArchived`):
      * changing labels never moves a message between folders. */
     onLabelsChanged?: (updated: Message) => void;
+    /** Handed a label created from the Labels menu, for the caller to add to `labels`. Without it the menu
+     * offers no "New label" row, only the link to where labels are managed. */
+    onLabelCreated?: (label: Label) => void;
+    /** Rendered as one message of a thread (`ConversationThreadPane`) rather than as the pane itself: the
+     * subject becomes a heading under the thread's own, since a document has one `h1` and the thread's is
+     * the conversation. Everything else - the badges, the actions, the body - is identical. */
+    inThread?: boolean;
 }
 
 function formatBytes(bytes: number): string {
@@ -320,9 +341,9 @@ function formatBytes(bytes: number): string {
 /**
  * A message's reading pane — header (subject/from/to/attachments) plus a sandboxed iframe for the body.
  * Shared by the desktop inline pane (`apps/www/index.tsx`, always visible alongside the message list),
- * the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
- * a message row), and `ConversationThreadPane` (one per expanded message in a thread) — see each call
- * site for how `message`/`attachments`/`isSentItems` are sourced.
+ * and the mobile detail route (`apps/www/messages/[uid].tsx`, a full page on its own reached by tapping
+ * a message row) — see each call site for how `message`/`attachments`/`isSentItems` are sourced. The
+ * desktop pane shows whichever message the list opened, including one opened from a conversation row.
  */
 export default function MessageDetailPane(props: MessageDetailPaneProps) {
     if (!props.message) {
@@ -351,12 +372,15 @@ function MessageDetailContent({
     isOutbox,
     draftsFolderUid,
     onScheduledSendCanceled,
-    isInbox,
-    onClassified,
+    folders,
+    onMoved,
+    onFolderCreated,
     onReceiptHandled,
     onArchived,
     labels,
     onLabelsChanged,
+    onLabelCreated,
+    inThread,
 }: MessageDetailPaneProps & { message: Message }) {
     // A copy re-read from the server after an Outbox action was refused (409/403) or a send lease ran out - see
     // `reloadMessage()`. A prop copy newer by `version` wins; an equal-version reload is kept, since claiming a send
@@ -371,16 +395,13 @@ function MessageDetailContent({
     const [canceling, setCanceling] = useState(false);
     const [archiving, setArchiving] = useState(false);
     const [archiveError, setArchiveError] = useState<string | null>(null);
-    const [labelsOpen, setLabelsOpen] = useState(false);
-    const [togglingLabelUid, setTogglingLabelUid] = useState<string | null>(null);
+    const [savingLabels, setSavingLabels] = useState(false);
     const [labelsError, setLabelsError] = useState<string | null>(null);
     const [error, setError] = useState<string | null>(null);
     // Kept separate from `error` (the Recall flow's own state) since this renders inline in the main
     // pane rather than inside a confirmation modal — the two flows never need to share one message.
     const [cancelError, setCancelError] = useState<string | null>(null);
-    const [classifying, setClassifying] = useState(false);
-    const [classifyError, setClassifyError] = useState<string | null>(null);
-    const [alwaysForSender, setAlwaysForSender] = useState(false);
+    const [movePrompt, setMovePrompt] = useState(false);
     // Names which pending receipt (`"delivery"`/`"read"`) is currently being approved/declined, if any —
     // `deliveryReceiptPending`/`readReceiptPending` can both be true independently, so a single boolean
     // wouldn't distinguish which row's buttons should show a loading state.
@@ -613,40 +634,65 @@ function MessageDetailContent({
         setUnlockRefresh((n) => n + 1);
     }
 
-    // Only ever invoked from the Reply/Reply All/Forward buttons below, which themselves only render
-    // once `message` is loaded (the early return above covers the only other state) — the non-null
-    // assertions reflect that real invariant, matching `handleRecall`'s identical pattern just below.
-    function handleReply() {
-        openCompose({
-            mailboxUid: message.mailboxUid,
-            to: message.from.address,
-            subject: replySubject(message.subject),
-            quotedHtml: buildReplyQuote(message),
-            signatureContext: "reply_forward",
-            suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
-        });
-    }
+    // Reply, Reply All and Forward first load the full body to quote (see `loadQuotedBody()`), so the buttons are
+    // disabled meanwhile - a second click would open a second window. An encrypted original keeps its reply
+    // encrypted, since the quote may carry its decrypted content.
+    const [preparingCompose, setPreparingCompose] = useState(false);
 
-    function handleReplyAll() {
-        const cc = message.recipients.filter((r) => r.type !== "bcc").map((r) => r.address);
-        openCompose({
-            mailboxUid: message.mailboxUid,
-            to: message.from.address,
-            cc: cc.join(", "),
-            subject: replySubject(message.subject),
-            quotedHtml: buildReplyQuote(message),
-            signatureContext: "reply_forward",
-            suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
-        });
+    /** The replying mailbox's own addresses (primary and aliases), which a reply never goes to - from the mail shell's
+     * mailbox list, else fetched; none when neither is available. */
+    async function ownAddresses(): Promise<string[]> {
+        const mailbox = readerMailbox ?? (await getMailbox(message.mailboxUid).catch(() => undefined));
+        return mailbox ? [mailbox.primarySmtpAddress, ...(mailbox.aliasAddresses ?? [])] : [];
     }
 
-    function handleForward() {
-        openCompose({
-            mailboxUid: message.mailboxUid,
-            subject: forwardSubject(message.subject),
-            quotedHtml: buildForwardQuote(message),
-            signatureContext: "reply_forward",
-        });
+    async function handleReplyOrForward(kind: "reply" | "replyAll" | "forward") {
+        setPreparingCompose(true);
+        try {
+            const [original, own] = await Promise.all([
+                loadOriginalMessage(message, security, { recipients: kind === "replyAll" }),
+                kind === "forward" ? [] : ownAddresses(),
+            ]);
+            const encrypt = !!message.encrypted;
+            // What makes the new message part of this one's thread rather than a conversation of its own:
+            // the server composes the MIME from the recipients, subject and HTML alone, so nothing else
+            // recovers what is being replied to. A forward carries it for the same reason - it continues
+            // the thread it came from, which is where its recipient will file the reply to it.
+            const threading = buildReplyThreading(message);
+            if (kind === "forward") {
+                openCompose({
+                    mailboxUid: message.mailboxUid,
+                    subject: forwardSubject(message.subject),
+                    quotedHtml: buildForwardQuote(message, original.body),
+                    signatureContext: "reply_forward",
+                    encrypt,
+                    threading,
+                });
+                return;
+            }
+            // The message's own recipients are only the envelope recipient of a delivered message, so Reply All
+            // answers whoever its headers actually name, with anything the record holds that they don't.
+            const known = new Set((original.recipients ?? []).map((r) => r.address.trim().toLowerCase()));
+            const recipients = buildReplyRecipients(
+                { ...message, recipients: [...(original.recipients ?? []), ...message.recipients.filter((r) => !known.has(r.address.trim().toLowerCase()))] },
+                own,
+                kind === "replyAll",
+            );
+            const format = (list: Recipient[]) => list.map((r) => formatRecipient(r)).join(", ");
+            openCompose({
+                mailboxUid: message.mailboxUid,
+                to: format(recipients.to),
+                cc: recipients.cc.length > 0 ? format(recipients.cc) : undefined,
+                subject: replySubject(message.subject),
+                quotedHtml: buildReplyQuote(message, original.body),
+                signatureContext: "reply_forward",
+                suppressSigning: isLikelyMailingList({ listUnsubscribe: message.listUnsubscribeHeader }),
+                encrypt,
+                threading,
+            });
+        } finally {
+            setPreparingCompose(false);
+        }
     }
 
     async function handleRecall() {
@@ -709,50 +755,41 @@ function MessageDetailContent({
         }
     }
 
-    // Only ever invoked from a checkbox in the Labels popover below, which itself only renders once
-    // `message` is loaded — auto-saves on every toggle (no separate "Save" step), computing the full
-    // new `labelUids` set from the message's current one since `setMessageLabels()` replaces the whole
-    // list rather than patching a single entry.
+    // Only ever invoked from the Labels menu below, which itself only renders once `message` is loaded.
+    // Several labels are ticked in the menu and saved together here, in one `setMessageLabels()` call:
+    // that call replaces the whole `labelUids` list rather than patching one entry, so a menu that saved
+    // per tick would send a request (and burn an optimistic-lock `version`) for every single tick.
     //
-    // Toggles are serialized (every checkbox is disabled while one is in flight - React flushes a
-    // discrete input event's state update synchronously, so a second change can't slip in first), and
-    // each one reads the latest known copy (`latestLabelsMessageRef`, never a stale render closure) - so
-    // two quick toggles can never compute their full list, or send their optimistic-lock `version`, from
-    // the same stale snapshot.
-    async function handleToggleLabel(labelUid: string) {
-        setTogglingLabelUid(labelUid);
+    // The list is computed from the newest copy known (`latestLabelsMessageRef`, never a stale render
+    // closure), so a save that follows another still carries the `version` the server last handed back.
+    async function handleApplyLabels(labelUids: string[]) {
+        setSavingLabels(true);
         setLabelsError(null);
         try {
-            // Read through the ref (not this render's closure) so a toggle fired from a not-yet-re-rendered
-            // handler still sees the previous toggle's server response.
             const base = message.version >= latestLabelsMessageRef.current.version ? message : latestLabelsMessageRef.current;
-            const current = base.labelUids ?? [];
-            const next = current.includes(labelUid) ? current.filter((uid) => uid !== labelUid) : [...current, labelUid];
-            const updated = await setMessageLabels(base, next);
+            const updated = await setMessageLabels(base, labelUids);
             latestLabelsMessageRef.current = updated;
             setLabelsMessage(updated);
             onLabelsChanged?.(updated);
         } catch (err) {
             setLabelsError(err instanceof ApiRequestError ? err.message : "Could not update this message's labels.");
         } finally {
-            setTogglingLabelUid(null);
+            setSavingLabels(false);
         }
     }
 
-    // Only ever invoked from the classification button below, which itself only renders once `message`
-    // is loaded and `isInbox` is true — the non-null assertion reflects the same real invariant as
-    // `handleRecall`/`handleCancelScheduledSend` above.
-    async function handleClassify(classifyAs: MessageClassification) {
-        setClassifying(true);
-        setClassifyError(null);
-        try {
-            const updated = await classifyMessage(message.uid, classifyAs, alwaysForSender);
-            onClassified?.(updated);
-        } catch (err) {
-            setClassifyError(err instanceof ApiRequestError ? err.message : "Could not reclassify this message.");
-        } finally {
-            setClassifying(false);
-        }
+    /**
+     * Moves this message into the folder picked in the Move to prompt. Deliberately *not* caught here:
+     * `MoveToFolderDialog` shows a failure beside the destination that would retry it, and closes only
+     * once the move has actually landed.
+     *
+     * The move is awaited on its own line rather than written as `onMoved?.(await moveMessage(...))` -
+     * an optional call whose callee is absent never evaluates its arguments at all, so a caller that
+     * passes no `onMoved` would have had nothing moved while the prompt closed as if it had.
+     */
+    async function handleMove(folderUid: string) {
+        const updated = await moveMessage(message, folderUid);
+        onMoved?.(updated);
     }
 
     // Only ever invoked from the pending-receipt banner below, which itself only renders once `message`
@@ -813,8 +850,31 @@ function MessageDetailContent({
             ? senderKeyState!.conflict
             : undefined;
 
+    const shownSubject = (protectedSubject ?? message.subject) || "(no subject)";
+    /**
+     * How tall the message body is - the one thing on this pane worth every pixel it can have.
+     *
+     * The same rule in both places: the pane is a full-height flex column and the body is its one growing
+     * child, so it fills whatever the header leaves (`min-h-0` on both, or a tall body would stretch the
+     * column past the pane instead of scrolling inside it). Inside a thread that height comes from the
+     * message's own row, which `ConversationThreadPane` gives `min-h-full` of its scrolling list - so the
+     * height is still the window's, resolved down the flex chain rather than written here as a `vh`
+     * number, and it follows a resize with no breakpoint to cross.
+     *
+     * Why not size it to its content: that would need the document *inside* the frame to measure and
+     * report itself, and these frames are `sandbox=""` - scripts off - because they render mail from
+     * strangers. So a message longer than the pane keeps its own scrollbar, and everything shorter shows
+     * whole with the frame reaching the bottom of the pane either way.
+     */
+    const bodyClassName = "flex-1 min-h-0 w-full";
+
     return (
-        <div className="flex-1 min-w-0 flex flex-col">
+        // `h-full` outside a thread only: the standalone message route renders this pane straight into a
+        // *block* (`MailShell`'s own `<main>`), where nothing stretches it and a percentage of that block's
+        // own resolved height is the height. Inside a thread the parent is a flex row whose own height came
+        // out of the flex algorithm - Chrome won't resolve a percentage against that, and an explicit
+        // height would also opt the pane out of the stretching that does size it correctly there.
+        <div className={`flex-1 min-w-0 min-h-0 flex flex-col${inThread ? "" : " h-full"}`}>
             <div className="border-b border-border p-4">
                 {backHref && (
                     <a href={backHref} className="text-sm text-primary-dark hover:underline block mb-2">
@@ -823,7 +883,12 @@ function MessageDetailContent({
                 )}
                 <div className="flex items-start justify-between gap-3">
                     <div className="flex items-center gap-2 min-w-0">
-                        <h1 className="text-lg font-bold tracking-tight truncate">{(protectedSubject ?? message.subject) || "(no subject)"}</h1>
+                        {/* One `h1` per document: inside a thread the conversation's own subject is it. */}
+                        {inThread ? (
+                            <h3 className="text-sm font-semibold truncate">{shownSubject}</h3>
+                        ) : (
+                            <h1 className="text-lg font-bold tracking-tight truncate">{shownSubject}</h1>
+                        )}
                         {security && <SecurityIndicator security={security} />}
                     </div>
                     {sendInProgress && (
@@ -1029,32 +1094,66 @@ function MessageDetailContent({
                 <p className="text-sm text-text-muted">
                     To {message.recipients.map((r) => r.displayName || r.address).join(", ")}
                 </p>
-                <div className="flex gap-2 mt-3">
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={handleReply}>
-                        Reply
-                    </Button>
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={handleReplyAll}>
-                        Reply All
-                    </Button>
-                    <Button type="button" variant="secondary" className="!w-auto" onClick={handleForward}>
-                        Forward
-                    </Button>
+                {/* Wraps: in a thread the pane can be as narrow as the reading pane gets (the list takes
+                    384px of it), and these are six controls. */}
+                <div className="flex flex-wrap gap-1 mt-3">
+                    <IconAction
+                        icon={<HiOutlineArrowUturnLeft size={16} aria-hidden="true" />}
+                        label="Reply"
+                        disabled={preparingCompose}
+                        onClick={() => void handleReplyOrForward("reply")}
+                    />
+                    <IconAction
+                        icon={
+                            // The conventional reply-all glyph: the reply arrow, doubled. `hi2` has no
+                            // reply-all icon of its own, and nothing else in it means "answer everyone".
+                            <span className="inline-flex items-center" aria-hidden="true">
+                                <HiOutlineArrowUturnLeft size={16} />
+                                <HiOutlineArrowUturnLeft size={16} className="-ml-2.5" />
+                            </span>
+                        }
+                        label="Reply All"
+                        disabled={preparingCompose}
+                        onClick={() => void handleReplyOrForward("replyAll")}
+                    />
+                    <IconAction
+                        icon={<HiOutlineArrowUturnRight size={16} aria-hidden="true" />}
+                        label="Forward"
+                        disabled={preparingCompose}
+                        onClick={() => void handleReplyOrForward("forward")}
+                    />
                     {!inOutbox && message.folderUid !== draftsFolderUid && (
-                        <Button
-                            type="button"
-                            variant="secondary"
-                            className="!w-auto"
-                            loading={archiving}
+                        <IconAction
+                            icon={<HiOutlineArchiveBox size={16} aria-hidden="true" />}
+                            label="Archive"
+                            busy={archiving}
                             disabled={archiving}
                             onClick={handleArchive}
-                        >
-                            Archive
-                        </Button>
+                        />
+                    )}
+                    {folders && folders.length > 0 && (
+                        <IconAction
+                            icon={<HiOutlineFolderArrowDown size={16} aria-hidden="true" />}
+                            label="Move to"
+                            onClick={() => setMovePrompt(true)}
+                        />
                     )}
                     {labels && labels.length > 0 && (
-                        <Button type="button" variant="secondary" className="!w-auto" onClick={() => setLabelsOpen(true)}>
-                            Labels
-                        </Button>
+                        <LabelMenuButton
+                            aria-label="Labels"
+                            label="Labels"
+                            className="border border-border py-1.5"
+                            labels={labels}
+                            mailboxUid={message.mailboxUid}
+                            onLabelCreated={onLabelCreated}
+                            applied={currentLabelsMessage.labelUids ?? []}
+                            onCommit={(labelUids) => void handleApplyLabels(labelUids)}
+                            busy={savingLabels}
+                            note="Ticked labels are applied to this message and unticked ones removed."
+                            emptyNote="This mailbox has no labels yet."
+                            commit={{ label: "Apply" }}
+                            clear={{ label: "Remove all labels" }}
+                        />
                     )}
                 </div>
                 {archiveError && (
@@ -1062,6 +1161,11 @@ function MessageDetailContent({
                         <Alert>{archiveError}</Alert>
                     </div>
                 )}
+                {labelsError && (
+                    <div className="mt-2">
+                        <Alert>{labelsError}</Alert>
+                    </div>
+                )}
                 {labels && (currentLabelsMessage.labelUids?.length ?? 0) > 0 && (
                     <div className="flex flex-wrap items-center gap-1.5 mt-2">
                         {currentLabelsMessage
@@ -1078,34 +1182,8 @@ function MessageDetailContent({
                             ))}
                     </div>
                 )}
-                {isInbox && (
-                    <div className="flex flex-wrap items-center gap-2 mt-2">
-                        <Button
-                            type="button"
-                            variant="text"
-                            loading={classifying}
-                            disabled={classifying}
-                            onClick={() =>
-                                handleClassify(message.inferenceClassification === "other" ? "focused" : "other")
-                            }
-                        >
-                            {message.inferenceClassification === "other" ? "Move to Focused" : "Move to Other"}
-                        </Button>
-                        <label className="flex items-center gap-1.5 text-xs text-text-muted">
-                            <input
-                                type="checkbox"
-                                checked={alwaysForSender}
-                                onChange={(e) => setAlwaysForSender(e.target.checked)}
-                            />
-                            Always for this sender
-                        </label>
-                    </div>
-                )}
-                {classifyError && (
-                    <div className="mt-2">
-                        <Alert>{classifyError}</Alert>
-                    </div>
-                )}
+                {/* A failed reclassification is reported inside the confirmation dialog it was started
+                    from, next to the Move button that would retry it - not out here behind it. */}
                 {(["delivery", "read"] as const)
                     .filter((type) => (type === "delivery" ? message.deliveryReceiptPending : message.readReceiptPending))
                     .map((type) => (
@@ -1198,7 +1276,7 @@ function MessageDetailContent({
                 // A recovered text/plain body renders as text (React escapes it) - never as markup.
                 <pre
                     aria-label={message.subject || "Message content"}
-                    className="flex-1 w-full overflow-auto p-4 m-0 text-sm font-sans whitespace-pre-wrap break-words"
+                    className={`${bodyClassName} overflow-auto p-4 m-0 text-sm font-sans whitespace-pre-wrap break-words`}
                 >
                     {security.text}
                 </pre>
@@ -1212,7 +1290,7 @@ function MessageDetailContent({
                     title={message.subject || "Message content"}
                     srcDoc={buildSecureSrcDoc(security.html)}
                     sandbox=""
-                    className="flex-1 w-full border-0"
+                    className={`${bodyClassName} border-0`}
                 />
             ) : (
                 <iframe
@@ -1220,10 +1298,19 @@ function MessageDetailContent({
                     title={message.subject || "Message content"}
                     src={`/api/mail/messages/${encodeURIComponent(message.uid)}/content`}
                     sandbox=""
-                    className="flex-1 w-full border-0"
+                    className={`${bodyClassName} border-0`}
                 />
             )}
 
+            <MoveToFolderDialog
+                open={movePrompt}
+                onClose={() => setMovePrompt(false)}
+                mailboxUid={message.mailboxUid}
+                folders={folders ?? []}
+                currentFolderUid={message.folderUid}
+                onMove={handleMove}
+                onFolderCreated={onFolderCreated}
+            />
             <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
@@ -1291,28 +1378,6 @@ function MessageDetailContent({
                     </div>
                 </div>
             </Modal>
-            <Modal open={labelsOpen} onClose={() => setLabelsOpen(false)} title="Labels">
-                {labelsError && <Alert>{labelsError}</Alert>}
-                <ul className="flex flex-col gap-1">
-                    {(labels ?? []).map((l) => {
-                        const checked = currentLabelsMessage.labelUids?.includes(l.uid) ?? false;
-                        return (
-                            <li key={l.uid}>
-                                <label className="flex items-center gap-2 py-1.5 px-1 text-sm rounded-sm hover:bg-surface-alt">
-                                    <input
-                                        type="checkbox"
-                                        checked={checked}
-                                        disabled={togglingLabelUid !== null}
-                                        onChange={() => handleToggleLabel(l.uid)}
-                                    />
-                                    <span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: l.color ?? "#6366f1" }} />
-                                    {l.name}
-                                </label>
-                            </li>
-                        );
-                    })}
-                </ul>
-            </Modal>
         </div>
     );
 }