@rapidmx/web-client 0.30.0 → 0.31.0

package/dist/apps/shared/components/mail/MenuButton.js

@@ -1,215 +1,6 @@
-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 { useEffect, useRef, useState } from "react";
-import { HiCheck, HiChevronDown, HiChevronLeft, HiChevronRight, HiMinus } from "react-icons/hi2";
-import PopoverPortal from "../../../../lib/components/overlays/PopoverPortal.js";
-// `PopoverPortal` positions a fixed-size box (it has no auto-height mode), so the menu's height is
-// computed from its own contents rather than measured - from whichever level is *shown*, so a submenu
-// isn't left standing in the parent menu's taller box. These are the exact heights the classes below
-// render at, so the box is never short enough to clip its last row: an item is `h-9`, a group label
-// `h-6`, a note as many `leading-4` lines as it wraps to, a separator a 1px rule inside `my-1`, and the
-// list itself `py-1`.
-const ITEM_HEIGHT = 36;
-const ITEM_DESCRIPTION_HEIGHT = 16;
-const GROUP_LABEL_HEIGHT = 24;
-const NOTE_LINE_HEIGHT = 16;
-const NOTE_PADDING = 4;
-/** A note wraps, so its height depends on how much of it fits a line: `text-xs` averages a little over 6px
- * a character, and the note sits inside the list's `px-3`. Rounded so the estimate is never *under* the
- * lines the browser actually draws - a box a few pixels too tall shows blank space, one too short clips. */
-const NOTE_CHAR_WIDTH = 6.4;
-const NOTE_PADDING_X = 24;
-const SEPARATOR_HEIGHT = 9;
-const LIST_PADDING = 8;
-const MENU_MAX_HEIGHT = 460;
-const DEFAULT_MENU_WIDTH = 248;
-/** How tall `note` renders at `width`, wrapped. */
-function noteHeight(note, width) {
-    const charsPerLine = Math.max(1, Math.floor((width - NOTE_PADDING_X) / NOTE_CHAR_WIDTH));
-    return Math.ceil(note.length / charsPerLine) * NOTE_LINE_HEIGHT + NOTE_PADDING;
-}
-/** The height `PopoverPortal` is asked for - exact for a short menu, capped (the list scrolls) for a long one. */
-export function menuHeight(sections, width = DEFAULT_MENU_WIDTH) {
-    let height = LIST_PADDING;
-    sections.forEach((section, index) => {
-        if (index > 0) {
-            height += SEPARATOR_HEIGHT;
-        }
-        if (section.label) {
-            height += GROUP_LABEL_HEIGHT;
-        }
-        for (const item of section.items) {
-            height += ITEM_HEIGHT + (item.description ? ITEM_DESCRIPTION_HEIGHT : 0);
-        }
-        if (section.note) {
-            height += noteHeight(section.note, width);
-        }
-    });
-    return Math.min(height, MENU_MAX_HEIGHT);
-}
-/**
- * A toolbar button that opens an ARIA menu: `role="menu"` rows with checkmarks for the current choice,
- * full keyboard support (Enter/Space or Arrow Down to open, arrows/Home/End to move with wrap, Enter/Space
- * to choose, Escape or Tab to close with focus returning to the trigger) and a click outside to dismiss.
- *
- * Rendered through `PopoverPortal` rather than as an absolutely-positioned child: the mail list toolbar
- * lives inside the list's own `overflow-y-auto` scroll container, which clips an absolute popup however
- * high its `z-index` - the same reason Compose's own pickers portal out (see `PopoverPortal`'s own doc
- * comment). The portal supplies the positioning, the outside-click dismissal and the box; the menu
- * semantics, roving focus and keyboard handling are this component's own.
- */
-export default function MenuButton({ label, iconOnly = false, icon, disabled, title, sections, width = DEFAULT_MENU_WIDTH, className = "", "aria-label": ariaLabel, onOpenChange, }) {
-    const [open, setOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(0);
-    // The key of the item whose submenu is showing, or `null` at the top level. Held as a key, not as the
-    // item itself, because `sections` is rebuilt on every render.
-    const [submenuKey, setSubmenuKey] = useState(null);
-    const triggerRef = useRef(null);
-    const itemRefs = useRef([]);
-    // State, not a ref: `PopoverPortal` renders nothing at all until its own positioning effect has run, so
-    // the rows don't exist yet when this component's effects first fire. Keying the focus effect on the
-    // menu node itself makes it run again once they do.
-    const [menuNode, setMenuNode] = useState(null);
-    const openSubmenu = sections
-        .flatMap((section) => section.items)
-        .find((item) => item.key === submenuKey && !!item.submenu);
-    /** The row that leaves a submenu again - synthesized rather than asked of the caller, so every submenu
-     * has the same way back however it was built. */
-    const backItem = {
-        key: "__back",
-        label: `Back to ${ariaLabel}`,
-        keepOpen: true,
-        onSelect: () => leaveSubmenu(),
-    };
-    const shownSections = openSubmenu
-        ? [{ key: "__back", items: [backItem] }, ...openSubmenu.submenu]
-        : sections;
-    const items = shownSections.flatMap((section) => section.items);
-    const enabledIndexes = items.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
-    /** The row focus starts on: the current choice where there is one, else the first row that can take focus. */
-    function initialActiveIndex(within) {
-        const checked = within.findIndex((item) => item.checked === true && !item.disabled);
-        const enabled = within.map((item, index) => (item.disabled ? -1 : index)).filter((index) => index !== -1);
-        return checked === -1 ? (enabled[0] ?? 0) : checked;
-    }
-    function openMenu() {
-        setSubmenuKey(null);
-        setActiveIndex(initialActiveIndex(sections.flatMap((section) => section.items)));
-        setOpen(true);
-        onOpenChange?.(true);
-    }
-    function closeMenu(returnFocus) {
-        setOpen(false);
-        setSubmenuKey(null);
-        onOpenChange?.(false);
-        if (returnFocus) {
-            triggerRef.current?.focus();
-        }
-    }
-    function enterSubmenu(item) {
-        setSubmenuKey(item.key);
-        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() {
-        // Back on the row the submenu was opened from.
-        const parentIndex = sections.flatMap((section) => section.items).findIndex((item) => item.key === submenuKey);
-        setSubmenuKey(null);
-        setActiveIndex(parentIndex);
-    }
-    /** What a row does when it is chosen: open its submenu, or run it and close unless it asked to stay. */
-    function selectItem(item) {
-        if (item.submenu) {
-            enterSubmenu(item);
-            return;
-        }
-        item.onSelect();
-        if (!item.keepOpen) {
-            closeMenu(true);
-        }
-    }
-    // Roving focus: only the active row is tabbable, and it takes DOM focus whenever it changes, so the
-    // arrow keys move the screen reader's cursor too rather than only a visual highlight.
-    useEffect(() => {
-        if (open && menuNode) {
-            // A disabled row can't take focus, so a menu with nothing enabled focuses its own container -
-            // otherwise the keys it handles would go to whatever had focus before it opened.
-            if (enabledIndexes.length === 0) {
-                menuNode.focus();
-            }
-            else {
-                itemRefs.current[activeIndex]?.focus();
-            }
-        }
-        // `submenuKey` too: drilling in or out can land on the same index in the other level's list, and
-        // the row that index *means* is a different button, which the effect must move focus to.
-    }, [open, activeIndex, submenuKey, menuNode]);
-    function moveActive(delta) {
-        if (enabledIndexes.length === 0) {
-            return;
-        }
-        const position = enabledIndexes.indexOf(activeIndex);
-        setActiveIndex(enabledIndexes[(position + delta + enabledIndexes.length) % enabledIndexes.length]);
-    }
-    function handleMenuKeyDown(e) {
-        if (e.key === "ArrowDown") {
-            e.preventDefault();
-            moveActive(1);
-        }
-        else if (e.key === "ArrowUp") {
-            e.preventDefault();
-            moveActive(-1);
-        }
-        else if (e.key === "Home") {
-            e.preventDefault();
-            setActiveIndex(enabledIndexes[0] ?? 0);
-        }
-        else if (e.key === "End") {
-            e.preventDefault();
-            setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? 0);
-        }
-        else if (e.key === "ArrowRight" && items[activeIndex]?.submenu) {
-            e.preventDefault();
-            enterSubmenu(items[activeIndex]);
-        }
-        else if ((e.key === "ArrowLeft" || e.key === "Escape") && openSubmenu) {
-            // ARIA's own submenu behaviour: Escape leaves the submenu for its parent menu rather than
-            // dismissing the whole thing.
-            e.preventDefault();
-            leaveSubmenu();
-        }
-        else if (e.key === "Escape" || e.key === "Tab") {
-            e.preventDefault();
-            closeMenu(true);
-        }
-    }
-    function handleTriggerKeyDown(e) {
-        if (!open && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
-            e.preventDefault();
-            openMenu();
-        }
-    }
-    let itemIndex = -1;
-    return (_jsxs(_Fragment, { children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "menu", "aria-expanded": open, "aria-label": ariaLabel, title: title, disabled: disabled, onClick: () => (open ? closeMenu(false) : openMenu()), onKeyDown: handleTriggerKeyDown, 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(" "), children: [icon, !iconOnly && _jsx("span", { className: "truncate", children: label }), !iconOnly && _jsx(HiChevronDown, { size: 14, "aria-hidden": "true", className: "shrink-0 text-text-muted" })] }), open && (_jsx(PopoverPortal, { anchorRef: triggerRef, onClose: () => closeMenu(false), width: width, height: menuHeight(shownSections, width), "aria-label": ariaLabel, children: _jsx("div", { ref: setMenuNode, role: "menu", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleMenuKeyDown, className: "flex-1 overflow-y-auto py-1", children: shownSections.map((section, sectionIndex) => (_jsxs("div", { role: "group", "aria-label": section.label, className: sectionIndex > 0 ? "border-t border-border mt-1 pt-1" : "", children: [section.label && (_jsx("div", { "aria-hidden": "true", className: "h-6 flex items-center px-3 text-xs font-semibold uppercase tracking-wide text-text-muted", children: section.label })), section.items.map((item) => {
-                                itemIndex += 1;
-                                const index = itemIndex;
-                                const role = item.role ?? "menuitem";
-                                return (_jsxs("button", { ref: (node) => {
-                                        itemRefs.current[index] = node;
-                                    }, type: "button", role: role, disabled: item.disabled, title: item.title, tabIndex: index === activeIndex ? 0 : -1, ...(role === "menuitem"
-                                        ? {}
-                                        : { "aria-checked": item.checked === "mixed" ? "mixed" : !!item.checked }), ...(item.submenu ? { "aria-haspopup": "menu", "aria-expanded": false } : {}), onClick: () => selectItem(item), className: "w-full flex items-start gap-2 px-3 py-2 text-left text-sm text-text hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsxs("span", { className: "w-4 shrink-0 flex justify-center pt-0.5", children: [item.key === "__back" && (_jsx(HiChevronLeft, { size: 14, "aria-hidden": "true", className: "text-text-muted" })), item.checked === "mixed" ? (_jsx(HiMinus, { size: 14, "aria-hidden": "true", className: "text-primary-dark" })) : (item.checked && _jsx(HiCheck, { size: 14, "aria-hidden": "true", className: "text-primary-dark" }))] }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "flex h-5 items-center gap-1.5", children: [item.icon && (_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: item.icon })), item.swatchColor && (_jsx("span", { "aria-hidden": "true", className: "w-2.5 h-2.5 rounded-full shrink-0", style: { backgroundColor: item.swatchColor } })), _jsx("span", { className: "truncate", children: item.label })] }), item.description && (_jsx("span", { className: "block h-4 text-xs leading-4 text-text-muted truncate font-normal", children: item.description }))] }), item.submenu && (_jsx(HiChevronRight, { size: 14, "aria-hidden": "true", className: "shrink-0 mt-0.5 text-text-muted" }))] }, item.key));
-                            }), section.note && _jsx("p", { className: "px-3 py-1 text-xs leading-4 text-text-muted", children: section.note })] }, section.key))) }) }))] }));
-}
+// `MenuButton` lives in `lib/components/menus` so shared form components (`ImageEditBadge`) can use it; this keeps the mail components' import path working.
+export { default, menuHeight } from "../../../../lib/components/menus/MenuButton.js";

package/dist/apps/shared/components/mail/MessageDetailPane.js

@@ -48,7 +48,7 @@ import LabelMenuButton from "./labelMenu.js";
 import Button from "../../../../lib/components/buttons/Button.js";
 import EncryptedBody from "./reading/EncryptedBody.js";
 import { ENCRYPTED_SUBJECT_PLACEHOLDER, displaySubject } from "./reading/EncryptedPreview.js";
-import { rememberDecrypted } from "../../mail/decryptedMessages.js";
+import { mapWithConcurrency, rememberDecrypted } from "../../mail/decryptedMessages.js";
 import MessageBody, { BodySkeleton } from "./reading/MessageBody.js";
 import { BODY_FONT_STYLE, CardShell, SenderAvatar, SubjectCard } from "./reading/MessageCard.js";
 import MessageMoreMenu from "./reading/MessageMoreMenu.js";
@@ -210,6 +210,8 @@ function subjectCore(subject) {
 function sameSubject(subject, threadSubject) {
     return subjectCore(subject) === subjectCore(threadSubject);
 }
+/** How many earlier messages of a conversation are loaded at once when printing it. */
+const PRINT_CONCURRENCY = 4;
 function formatBytes(bytes) {
     if (bytes >= 1000000)
         return `${(bytes / 1000000).toFixed(1)} MB`;
@@ -779,10 +781,11 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         (verifiedOrSealed || security.state === "encrypted" || security.state === "encrypted_unverified_signer" || security.state === "signature_failed")
         ? security.attachments
         : undefined;
-    // Any state that involves a signature shows the address actually signed for (the protected From when the message
+    // Any state with a valid signature shows the address actually signed for (the protected From when the message
     // carries one - it equals the outer From's address, or verification would have failed) next to the badge, never a
-    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com.
-    const signatureShown = security !== null && security.state !== "unprotected" && security.state !== "encrypted";
+    // display name alone: anyone can put "ceo@corp.com" in the name of a message sent from x@corp-pay.com. A failed
+    // signature vouches for nothing, so its message shows the outer address like an unsigned one.
+    const signatureShown = security !== null && (verifiedOrSealed || UNVERIFIED_SIGNER_STATES.has(security.state));
     const senderAddress = (signatureShown ? extractAddresses(security.protectedHeaders?.from)[0] : undefined) ?? message.from.address;
     const senderName = message.from.displayName;
     const senderNameCheck = checkSenderName(senderName, senderAddress);
@@ -841,11 +844,12 @@ function MessageDetailContent({ message: messageProp, attachments, backHref, isS
         try {
             const content = bodyContent ?? (await fetchBodyContent(message.uid, message.version));
             const older = await olderConversationMessages(message, client).catch(() => []);
-            const earlier = await Promise.all(older.map((other) => printableOlderMessage(other).catch(() => ({
+            // A few at a time: a long conversation is hundreds of messages, each of them several requests.
+            const earlier = await mapWithConcurrency(older, PRINT_CONCURRENCY, (other) => printableOlderMessage(other).catch(() => ({
                 subject: other.subject || "(no subject)",
                 headers: printHeaders(other, formatMailAddress(other.from)),
                 content: { kind: "text", text: "This message could not be loaded, so it is not printed." },
-            }))));
+            })));
             const printable = buildConversationPrintDocument(shownSubject, [
                 {
                     subject: shownSubject,

package/dist/apps/shared/components/mail/compose/ComposeToolbar.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
 import type { Editor } from "@tiptap/react";
+/** What a typed link target is stored as. One without a scheme (`example.com`) would be a relative link, which readers' clients drop as dead text: a bare
+ * email address becomes `mailto:`, anything else that is not a path or an anchor `https://`. A target with a scheme is kept as it is. */
+export declare function linkHref(typed: string): string;
 export interface ComposeToolbarProps {
     /** `null` before the editor has mounted client-side (see `RichTextEditor`'s `immediatelyRender: false`
      * doc comment) — every button is disabled in that state rather than the toolbar rendering nothing, so

package/dist/apps/shared/components/mail/compose/ComposeToolbar.js

@@ -6,6 +6,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useRef, useState } from "react";
 import { BsArrowClockwise, BsArrowCounterclockwise, BsEraser, BsHighlighter, BsImage, BsIndent, BsJustify, BsLink45Deg, BsListOl, BsListUl, BsPaletteFill, BsTable, BsTextCenter, BsTextLeft, BsTextRight, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline, BsUnindent, } from "react-icons/bs";
 import GifPicker from "./GifPicker.js";
+/** What a typed link target is stored as. One without a scheme (`example.com`) would be a relative link, which readers' clients drop as dead text: a bare
+ * email address becomes `mailto:`, anything else that is not a path or an anchor `https://`. A target with a scheme is kept as it is. */
+export function linkHref(typed) {
+    const target = typed.trim();
+    if (/^[a-z][a-z0-9+.-]*:/i.test(target) || /^[/#]/.test(target)) {
+        return target;
+    }
+    return /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/.test(target) ? `mailto:${target}` : `https://${target}`;
+}
 /** Loaded when the picker is first opened: the emoji list is a half-megabyte JSON file that nothing else needs. */
 const EmojiPicker = lazy(() => import("./EmojiPicker.js"));
 const FONT_FAMILIES = [
@@ -73,7 +82,7 @@ export default function ComposeToolbar({ editor, onUploadImage }) {
             run((ed) => ed.chain().focus().extendMarkRange("link").unsetLink().run());
         }
         else {
-            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkUrl.trim() }).run());
+            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkHref(linkUrl) }).run());
         }
         setOpenPopup(null);
     }

package/dist/apps/shared/components/mail/compose/ComposeWindow.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineArrowTopRightOnSquare, HiOutlineChevronDown, HiOutlineIdentification, HiOutlineLockClosed, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
 import { ApiRequestError } from "../../../../../lib/util/api.js";
-import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, getMailbox, getMessage, listFolders, listMailboxes, deleteAttachment, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
+import { assembleDraft, attachmentContentUrl, createDraft, deleteMessage, forgetDraftImages, getMailbox, getMessage, listFolders, listMailboxes, deleteAttachment, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
 import { listMailSignatures } from "../../../../../lib/mail/mailSignaturesApi.js";
 import { buildComposeBodyHtml } from "../../../../../lib/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
@@ -223,6 +223,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     /** Attachment/inline-image uploads on the wire, and who is waiting for them to finish (Send pressed meanwhile). */
     const uploadsInFlightRef = useRef(0);
     const uploadWaitersRef = useRef([]);
+    /** How many uploads have failed so far: a Send that waited on uploads compares it to see whether one of them did. */
+    const uploadFailuresRef = useRef(0);
+    /** Set while a Send waits for uploads: Close and Discard call it to cancel that send. */
+    const cancelUploadWaitRef = useRef(null);
+    /** The draft a plaintext save was last sent for, so a message that turns out to need encryption knows a copy may be on the server. */
+    const plaintextRequestedRef = useRef(null);
+    const [uploadsActive, setUploadsActive] = useState(false);
     /** The latest save request, if any - each save is chained after the one before it. Always settles (never
      * rejects), to the saved message, or `undefined` when that save failed. */
     const saveInFlightRef = useRef(Promise.resolve(undefined));
@@ -479,6 +486,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         const saved = await saveInFlightRef.current;
         // Once it's out of `supersededDraftsRef` a landing save can't update `superseded.version` any more.
         const version = saved?.uid === superseded.uid ? saved.version : superseded.version;
+        forgetDraftImages(superseded.uid);
         try {
             await deleteMessage(superseded.uid, version, client);
         }
@@ -516,7 +524,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * the old draft is deleted only once the new one has been created. Recipients, subject, and body are
      * kept. */
     function handleFromChange(nextMailboxUid) {
-        if (nextMailboxUid === mailboxUid || hasUploads) {
+        // An upload still on the wire counts: it would land on the draft this switch supersedes.
+        if (nextMailboxUid === mailboxUid || hasUploads || uploadsInFlightRef.current > 0) {
             return;
         }
         if (draft) {
@@ -590,12 +599,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         uploadStarted();
         try {
             // An inline part with a Content-ID of its own: without one the server has nothing to point the message's `cid:` reference at.
-            const attachment = await uploadAttachment(draft.uid, file, { inline: true });
+            const attachment = await uploadAttachment(draft.uid, file, { inline: true }, client);
             setHasUploads(true);
             void refreshDraftVersion(draft.uid);
             return attachmentContentUrl(attachment.uid);
         }
         catch (err) {
+            uploadFailuresRef.current += 1;
             setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload image.");
             return null;
         }
@@ -606,10 +616,12 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     /** Send waits for every upload started before it: see `submit()`. */
     function uploadStarted() {
         uploadsInFlightRef.current += 1;
+        setUploadsActive(true);
     }
     function uploadFinished() {
         uploadsInFlightRef.current -= 1;
         if (uploadsInFlightRef.current === 0) {
+            setUploadsActive(false);
             for (const resolve of uploadWaitersRef.current.splice(0)) {
                 resolve();
             }
@@ -645,13 +657,14 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         try {
             for (const file of files) {
                 try {
-                    const attachment = await uploadAttachment(draft.uid, file);
+                    const attachment = await uploadAttachment(draft.uid, file, {}, client);
                     setHasUploads(true);
                     setAttachments((prev) => [...prev, attachment]);
                     void refreshDraftVersion(draft.uid);
                 }
                 catch (err) {
                     allAttached = false;
+                    uploadFailuresRef.current += 1;
                     setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload attachment.");
                 }
             }
@@ -769,7 +782,25 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         try {
             if (uploadsInFlightRef.current > 0) {
                 setWaitingForUploads(true);
-                await new Promise((resolve) => uploadWaitersRef.current.push(resolve));
+                const failuresBefore = uploadFailuresRef.current;
+                let cancelled = false;
+                await new Promise((resolve) => {
+                    uploadWaitersRef.current.push(resolve);
+                    cancelUploadWaitRef.current = () => {
+                        cancelled = true;
+                        resolve();
+                    };
+                });
+                cancelUploadWaitRef.current = null;
+                // Close or Discard was pressed meanwhile: the message is not to be sent.
+                if (cancelled) {
+                    return;
+                }
+                // An attachment the sender asked for did not arrive: say so rather than sending the message without it.
+                if (uploadFailuresRef.current > failuresBefore) {
+                    setSendError("An attachment could not be uploaded, so the message was not sent. Remove it or try again.");
+                    return;
+                }
                 // The editor puts an image it has just uploaded into the message a moment after the upload resolves: let the window catch up.
                 await new Promise((resolve) => setTimeout(resolve, 0));
                 setWaitingForUploads(false);
@@ -876,6 +907,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 setSaveStatus("saved");
                 return { message: before };
             }
+            plaintextRequestedRef.current = target.uid;
             try {
                 const saved = await assembleDraft(target.uid, {
                     to: parseAddresses(current.to),
@@ -924,6 +956,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
         const version = Math.max(current.version, saved?.uid === current.uid ? saved.version : 0);
         try {
             await deleteMessage(current.uid, version, client);
+            forgetDraftImages(current.uid);
         }
         catch (err) {
             if (!(err instanceof ApiRequestError) || (err.status !== 404 && err.status !== 409)) {
@@ -936,6 +969,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 throw getErr;
             });
             if (!fresh) {
+                forgetDraftImages(current.uid);
                 return;
             }
             // The version changed because another window sent or scheduled it - that message isn't ours to delete.
@@ -943,6 +977,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 throw new ApiRequestError(NO_LONGER_A_DRAFT_MESSAGE, 409);
             }
             await deleteMessage(fresh.uid, fresh.version, client);
+            forgetDraftImages(current.uid);
         }
     }
     /**
@@ -951,6 +986,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * deleted, and a delete that fails keeps the window open with the error.
      */
     async function discardNow() {
+        cancelUploadWaitRef.current?.();
         finishedRef.current = true;
         pendingSaveRef.current = false;
         setClosePrompt(null);
@@ -990,6 +1026,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * *unknown* (settings loading or failed, a lookup pending) is not a reason to hold the window: it is saved like any
      * other message. A failed save keeps the window open with Discard / Keep editing. */
     async function handleClose() {
+        cancelUploadWaitRef.current?.();
         if (!hasUserContent) {
             void discardNow();
             return;
@@ -1084,10 +1121,13 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
      * uid, so attachments and the folder are undisturbed), chained after any save still on the wire. Best effort - a failure is reported once. */
     function scrubSavedDraft(target) {
         lastSavedRef.current = null;
+        plaintextRequestedRef.current = null;
         setSaveStatus("idle");
         const previous = saveInFlightRef.current;
         const scrub = (async () => {
             await previous;
+            // A save that was on the wire has landed by now and recorded itself as the last one saved - which the scrub just replaced.
+            lastSavedRef.current = null;
             try {
                 // Its answer (the new version) is what a later delete waits for through `saveInFlightRef`, like any save's.
                 return await assembleDraft(target.uid, { to: [], cc: [], bcc: [], subject: "", html: "" }, client);
@@ -1106,7 +1146,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     }
     // Only a message that was really saved (`lastSavedRef` names its draft) has a plaintext copy to replace.
     useEffect(() => {
-        if (encryptionDecided && draft && lastSavedRef.current?.startsWith(`${draft.uid}:`)) {
+        if (encryptionDecided && draft && (lastSavedRef.current?.startsWith(`${draft.uid}:`) || plaintextRequestedRef.current === draft.uid)) {
             scrubSavedDraft(draft);
         }
     }, [encryptionDecided, draft?.uid]);
@@ -1223,6 +1263,9 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     // isn't mistaken for an edit (and autosaved) just because the editor was focused or clicked.
     /** The quote has been added: unless the reader has typed something already, that is still exactly what compose seeded. */
     function handleQuoteAppended(normalized) {
+        // Added for good: an editor mounted again (after a minimize and restore) is seeded from the body that already holds the quote, and
+        // must not be handed it a second time.
+        setSeededWithoutQuote(false);
         const latest = latestRef.current;
         if (latest.html === latest.seededHtml) {
             setHtml(normalized);
@@ -1247,8 +1290,10 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
     // dispatcher the focus is in a compose window at all). They do what the Send and Close buttons and autosave do, under the same conditions -
     // a shortcut pressed while its button would be disabled is consumed and does nothing.
     // Send never waits for the encryption settings to load (fail open, see `encryptionRequirement.ts`); it only needs the draft to exist. Pressed
-    // while an earlier press is still being handled it does nothing (`submit()` guards that itself).
-    const canSend = !!draft && !closing && !waitingForUploads;
+    // while an earlier press is still being handled it does nothing (`submit()` guards that itself). A reply or forward waits for its quoted original
+    // (at most `QUOTE_FETCH_TIMEOUT_MS`): sent sooner it would go without the quote, a forward without its content, a Reply All to the sender alone.
+    // Nor before the editor is there (it waits for the signature): sent sooner a reply would go without its quote and signature.
+    const canSend = !!draft && contentReady && !closing && !waitingForUploads && !quotePending;
     useShortcut(SHORTCUTS.compose.send, () => void (canSend && submit(false)), { container: windowRef });
     useShortcut(SHORTCUTS.compose.saveDraft, () => {
         // Autosave's own conditions: never a draft that must not be stored as plaintext.
@@ -1280,7 +1325,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                 ].join(" "), children: [dropActive && (_jsxs("div", { "data-drop-overlay": "", className: "pointer-events-none absolute inset-0 z-30 flex flex-col items-center justify-center gap-1 border-2 border-dashed border-primary bg-primary/10 text-center text-primary-dark", children: [_jsx("span", { className: "text-base font-semibold", children: "Drop files to attach them" }), _jsx("span", { className: "text-sm", children: "Pictures go into the message where the cursor is" })] })), !inline && !isMobile && (_jsxs(_Fragment, { children: [_jsx("div", { onPointerDown: handleResizeStart("top"), "aria-hidden": "true", className: "absolute top-0 left-0 right-0 h-1.5 cursor-ns-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("left"), "aria-hidden": "true", className: "absolute top-0 left-0 bottom-0 w-1.5 cursor-ew-resize z-20" }), _jsx("div", { onPointerDown: handleResizeStart("corner"), role: "separator", "aria-label": "Resize", className: "absolute top-0 left-0 w-3 h-3 cursor-nwse-resize z-30" })] })), _jsxs("div", { className: ["h-10 shrink-0 flex items-center justify-between gap-2 px-3 bg-primary-darker text-white", inline ? "" : "cursor-pointer"].join(" "), onClick: inline ? undefined : onToggleMinimize, children: [_jsx("span", { id: titleId, className: "text-sm font-medium truncate", children: title }), _jsxs("div", { className: "flex items-center gap-0.5", onClick: (e) => e.stopPropagation(), children: [inline ? (_jsx(HeaderButton, { label: "Pop out", onClick: () => onPopOut?.(), icon: HiOutlineArrowTopRightOnSquare })) : (_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus })), !inline && !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: closing, shortcut: SHORTCUTS.compose.close })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2 shrink-0 max-h-[45%] overflow-y-auto", children: [folderError && _jsx(Alert, { children: folderError }), draftError && _jsx(Alert, { children: draftError }), sendError && _jsx(Alert, { children: sendError }), attachError && _jsx(Alert, { children: attachError }), discardError && _jsx(Alert, { children: discardError })] })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", onClick: () => void submit(true, blockedScheduleIso), children: securityBlock.overrideLabel })] }) })), fromOptions.length > 1 && (_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-from-${id}`, className: "text-xs text-text-muted shrink-0", children: "From" }), _jsx("select", { id: `compose-from-${id}`, className: `${FIELD_INPUT} disabled:opacity-55`, 
                                         // Two or more options only exist once the mailboxes have loaded, and the same answer that lets them list
                                         // (one that isn't known to be view-only) is what picks the default sender, so a sender is always chosen by now.
-                                        value: mailboxUid, disabled: hasUploads, title: hasUploads ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
+                                        value: mailboxUid, disabled: hasUploads || uploadsActive, title: hasUploads || uploadsActive ? "The sender can't be changed after adding attachments or images." : undefined, onChange: (e) => handleFromChange(e.target.value), children: fromOptions.map((mb) => (_jsxs("option", { value: mb.uid, children: [mb.displayName ? `${mb.displayName} <${mb.primarySmtpAddress}>` : mb.primarySmtpAddress, mb.ownerUserUid ? "" : " (shared)"] }, mb.uid))) })] })), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-to-${id}`, className: "text-xs text-text-muted shrink-0", children: "To" }), _jsx(RecipientInput, { id: `compose-to-${id}`, label: "To", value: to, mailboxUid: mailboxUid, onChange: setTo, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)), autoFocus: focusToOnMount }), !showCcBcc && (_jsx("button", { type: "button", onClick: () => setShowCcBcc(true), className: "text-xs text-text-muted hover:text-text shrink-0", children: "Cc Bcc" }))] }), showCcBcc && (_jsxs(_Fragment, { children: [_jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-cc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Cc" }), _jsx(RecipientInput, { id: `compose-cc-${id}`, label: "Cc", value: cc, mailboxUid: mailboxUid, onChange: setCc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx(RecipientInput, { id: `compose-bcc-${id}`, label: "Bcc", value: bcc, mailboxUid: mailboxUid, onChange: setBcc, onBlur: (value) => checkRecipientDiscovery(parseAddresses(value)), onCommit: (value) => checkRecipientDiscovery(parseAddresses(value)) })] })] })), (() => {
                                 // De-duplicated by the same normalized key `recipientStatuses` itself is keyed by - two
                                 // fields (or one field twice) naming the same mailbox in different casing now resolve to
                                 // one shared status object (see `addressCacheKey()`'s own doc comment), so without this
@@ -1302,5 +1347,5 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, inli
                                     return null;
                                 }
                                 return (_jsx("ul", { className: "flex flex-wrap gap-1.5 px-3 pt-1.5", "aria-label": "Recipient encryption availability", children: knownRecipients.map((status) => (_jsxs("li", { className: `text-xs font-medium py-0.5 px-2 rounded-pill ${status.canEncrypt ? "bg-primary/10 text-primary-dark" : "bg-surface-alt text-text-muted"}`, children: [status.address, " ", status.canEncrypt ? "supports encryption" : "no encryption key found"] }, status.address))) }));
-                            })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, autoFocus: focusSubjectOnMount, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && (_jsx(RichTextEditor, { appendHtml: lateQuoteHtml, onAppended: handleQuoteAppended, value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized, editorRef: editorRef })) }), quotePending && (_jsx("p", { role: "status", className: "px-3 pb-1 text-xs text-text-muted", children: "Loading the original message\u2026" })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsxs("li", { className: "inline-flex items-center gap-1 text-xs font-medium py-1 pl-2.5 pr-1 rounded-pill bg-surface-alt text-text-muted", children: [attachment.filename, _jsx("button", { type: "button", "aria-label": `Remove ${attachment.filename}`, title: `Remove ${attachment.filename}`, disabled: removingAttachmentUid === attachment.uid, onClick: () => void handleRemoveAttachment(attachment), className: "inline-flex items-center justify-center rounded-pill p-0.5 hover:bg-border hover:text-text disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => void submit(false), title: withHint("Send", SHORTCUTS.compose.send, keyEnv), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv), disabled: !draft || closing || waitingForUploads, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || closing || waitingForUploads, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Attach my contact card", title: ownCardAttached ? "Your contact card is attached" : "Attach my contact card", "aria-pressed": ownCardAttached, disabled: !draft || !mailbox || ownCardAttached, onClick: () => void handleAttachOwnCard(), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineIdentification, { size: 18 }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: closing, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }), discardModal] }));
+                            })(), _jsx("div", { className: FIELD_ROW, children: _jsx("input", { "aria-label": "Subject", type: "text", placeholder: "Subject", className: FIELD_INPUT, value: subject, autoFocus: focusSubjectOnMount, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && (_jsx(RichTextEditor, { appendHtml: lateQuoteHtml, onAppended: handleQuoteAppended, value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized, editorRef: editorRef })) }), quotePending && (_jsx("p", { role: "status", className: "px-3 pb-1 text-xs text-text-muted", children: "Loading the original message\u2026" })), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsxs("li", { className: "inline-flex items-center gap-1 text-xs font-medium py-1 pl-2.5 pr-1 rounded-pill bg-surface-alt text-text-muted", children: [attachment.filename, _jsx("button", { type: "button", "aria-label": `Remove ${attachment.filename}`, title: `Remove ${attachment.filename}`, disabled: removingAttachmentUid === attachment.uid, onClick: () => void handleRemoveAttachment(attachment), className: "inline-flex items-center justify-center rounded-pill p-0.5 hover:bg-border hover:text-text disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-primary", children: _jsx(HiOutlineXMark, { size: 12, "aria-hidden": "true" }) })] }, attachment.uid))) })), _jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: requestReceipt, onChange: (e) => setRequestReceipt(e.target.checked) }), "Request a read receipt"] }), needsUnlockForCrypto && (_jsx("div", { className: "px-3 pb-1", children: _jsxs("button", { type: "button", onClick: handleUnlockForCrypto, className: "inline-flex items-center gap-1 text-xs font-medium text-primary-dark hover:underline", children: [_jsx(HiOutlineLockClosed, { size: 12, "aria-hidden": "true" }), "Unlock to sign or encrypt this message"] }) })), unlockedKeys?.signingPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: signEnabled, onChange: (e) => setSignEnabled(e.target.checked) }), "Digitally sign this message"] })), unlockedKeys?.encryptionPrivateKey && (_jsxs("label", { className: "flex items-center gap-1.5 px-3 pb-1 text-xs text-text-muted", children: [_jsx("input", { type: "checkbox", checked: encryptRequested, onChange: (e) => setEncryptRequested(e.target.checked) }), "Encrypt this message"] })), _jsxs("div", { className: "shrink-0 flex items-center gap-1 px-3 py-2 border-t border-border", children: [_jsxs("div", { className: "flex items-center rounded-pill bg-primary text-white overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => void submit(false), title: withHint("Send", SHORTCUTS.compose.send, keyEnv), "aria-keyshortcuts": ariaKeyShortcuts(SHORTCUTS.compose.send, keyEnv), disabled: !canSend, className: "py-1.5 pl-5 pr-3 font-semibold text-sm hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !canSend, onClick: () => setSchedulePickerOpen((o) => !o), className: "py-1.5 px-2 border-l border-white/30 hover:not-disabled:bg-primary-dark disabled:opacity-55 disabled:cursor-not-allowed", children: _jsx(HiOutlineChevronDown, { size: 14 }) })] }), schedulePickerOpen && (_jsx(ScheduleSendPicker, { anchorRef: scheduleButtonRef, onClose: () => setSchedulePickerOpen(false), onSchedule: handleScheduleSend })), _jsxs("label", { "aria-label": "Attach files", title: "Attach files", className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(HiOutlinePaperClip, { size: 18 }), _jsx("input", { type: "file", multiple: true, disabled: !draft, onChange: handleFilesSelected, className: "sr-only" })] }), _jsx("button", { type: "button", "aria-label": "Attach my contact card", title: ownCardAttached ? "Your contact card is attached" : "Attach my contact card", "aria-pressed": ownCardAttached, disabled: !draft || !mailbox || ownCardAttached, onClick: () => void handleAttachOwnCard(), className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:not-disabled:bg-surface-alt hover:not-disabled:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineIdentification, { size: 18 }) }), _jsx("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: waitingForUploads ? "Waiting for attachments to finish uploading…" : SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: closing, className: "w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }), discardModal] }));
 }

package/dist/apps/shared/components/mail/compose/GifPicker.js

@@ -24,13 +24,19 @@ export default function GifPicker({ anchorRef, onSelect, onClose }) {
     useEffect(() => {
         setLoading(true);
         setError(null);
+        // A search that was still on the wire when the query changed (or the popup closed) is not heard: a slow answer to an earlier query
+        // must not replace the results of the one now shown.
+        let stale = false;
         const handle = setTimeout(() => {
             searchGifs(query)
-                .then(setGifs)
-                .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load GIFs."))
-                .finally(() => setLoading(false));
+                .then((found) => !stale && setGifs(found))
+                .catch((err) => !stale && setError(err instanceof ApiRequestError ? err.message : "Could not load GIFs."))
+                .finally(() => !stale && setLoading(false));
         }, SEARCH_DEBOUNCE_MS);
-        return () => clearTimeout(handle);
+        return () => {
+            stale = true;
+            clearTimeout(handle);
+        };
     }, [query]);
     return (_jsxs(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: WIDTH, height: HEIGHT, "aria-label": "Insert GIF", children: [_jsx("div", { className: "p-2 border-b border-border shrink-0", children: _jsx("input", { type: "text", autoFocus: true, "aria-label": "Search GIFs", placeholder: "Search GIFs", value: query, onChange: (e) => setQuery(e.target.value), className: "w-full text-sm py-1.5 px-2 border border-border rounded-sm bg-surface focus:outline-none focus:border-primary" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-2", children: error ? (_jsx("p", { className: "text-xs text-danger", children: error })) : loading ? (_jsx("p", { className: "text-xs text-text-muted", children: "Loading\u2026" })) : gifs.length === 0 ? (_jsx("p", { className: "text-xs text-text-muted", children: "No GIFs found." })) : (_jsx("div", { className: "grid grid-cols-2 gap-1.5", children: gifs.map((gif) => (_jsx("button", { type: "button", title: gif.title, onClick: () => onSelect(gif.url), className: "rounded-sm overflow-hidden hover:opacity-80", children: _jsx("img", { src: gif.previewUrl, alt: gif.title, className: "w-full h-20 object-cover" }) }, gif.id))) })) })] }));
 }