@rapidmx/web-client 0.6.0 → 0.8.0

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

@@ -0,0 +1,138 @@
+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 { HiOutlineFolder, HiOutlineFolderPlus } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { createFolder } from "@rapidmx/react-shared/mail/mailApi.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import Modal from "@rapidmx/react-shared/components/overlays/Modal.js";
+/**
+ * The folder types a message can be moved *into* - Outbox is a transient send queue the server owns, and
+ * the non-mail folders (`calendar`/`contacts`/`tasks`/`notes`) aren't message folders at all, so neither is
+ * offered. Shared by the reading pane's Move to and select mode's bulk Move to, which is the whole point of
+ * this component: one destination list, one set of rules.
+ */
+export const MOVE_TARGET_TYPES = new Set(["inbox", "drafts", "sent_items", "junk", "archive", "deleted_items", "user"]);
+/** Above this many destinations the dialog offers a filter box - below it, one is just another thing to
+ * skip past on the way to a list that already fits on screen. */
+export const FOLDER_FILTER_THRESHOLD = 8;
+/** What `@rapidmx/restapi` accepts as a folder name, so a name it would refuse is refused here, next to the
+ * field, rather than as a 400 after a round trip. */
+export const MAX_FOLDER_NAME_LENGTH = 255;
+/**
+ * Why a name can't be used, or `null` when it can. Folders are a real tree (`Folder.parentFolderUid`), not
+ * paths, so a separator in a name would be a character in the name rather than a nesting instruction -
+ * which is exactly why it is refused: it would read as a hierarchy this app never created.
+ */
+export function folderNameError(name, existing) {
+    const trimmed = name.trim();
+    if (!trimmed) {
+        return "Enter a name for the new folder.";
+    }
+    if (trimmed.length > MAX_FOLDER_NAME_LENGTH) {
+        return `A folder name can be at most ${MAX_FOLDER_NAME_LENGTH} characters.`;
+    }
+    if (/[/\\]/.test(trimmed)) {
+        return "A folder name can't contain / or \\.";
+    }
+    const clash = existing.find((folder) => folder.name.toLowerCase() === trimmed.toLowerCase());
+    if (clash) {
+        return `This mailbox already has a folder called "${clash.name}". Pick it from the list instead.`;
+    }
+    return null;
+}
+/**
+ * Outlook's "Move to" prompt: pick a destination folder for the open message or the selection, or create a
+ * folder and move into it in one step.
+ *
+ * A `Modal` rather than a `MenuButton` because creating a folder needs a text field, and a `role="menu"`
+ * has nowhere to put one (the same reason `NewLabelDialog` exists) - and because a destination list can be
+ * as long as the mailbox has folders, which wants a filter box rather than a scrolling popup.
+ *
+ * A new folder is created at the **top level of the mailbox**, typed `user`, never as a child of the folder
+ * being moved out of: this app's sidebar lists folders flat (`MailShell`'s own `FOLDER_ORDER`), so a
+ * subfolder would be created into a hierarchy nothing here renders.
+ */
+export default function MoveToFolderDialog({ open, onClose, mailboxUid, folders, currentFolderUid, count = 1, onMove, onFolderCreated, }) {
+    const [filter, setFilter] = useState("");
+    const [creating, setCreating] = useState(false);
+    const [newName, setNewName] = useState("");
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const nameRef = useRef(null);
+    // Every opening starts from the same place, so a filter or a half-typed folder name from last time is
+    // never what the next move is made against.
+    useEffect(() => {
+        if (open) {
+            setFilter("");
+            setCreating(false);
+            setNewName("");
+            setBusy(false);
+            setError(null);
+        }
+    }, [open]);
+    // The field is only mounted once "New folder" is chosen, so focus moves to it when it appears.
+    useEffect(() => {
+        if (creating) {
+            nameRef.current?.focus();
+        }
+    }, [creating]);
+    const targets = folders.filter((folder) => MOVE_TARGET_TYPES.has(folder.type));
+    const shown = filter.trim()
+        ? targets.filter((folder) => folder.name.toLowerCase().includes(filter.trim().toLowerCase()))
+        : targets;
+    const offerFilter = targets.length > FOLDER_FILTER_THRESHOLD;
+    const noun = count === 1 ? "message" : `${count} messages`;
+    async function moveTo(folderUid) {
+        setBusy(true);
+        setError(null);
+        try {
+            await onMove(folderUid);
+            onClose();
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not move to that folder.");
+        }
+        finally {
+            setBusy(false);
+        }
+    }
+    async function handleCreate(e) {
+        e.preventDefault();
+        const invalid = folderNameError(newName, folders);
+        if (invalid) {
+            setError(invalid);
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        let created;
+        try {
+            created = await createFolder({ mailboxUid, name: newName.trim(), type: "user" });
+        }
+        catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create that folder.");
+            setBusy(false);
+            return;
+        }
+        // Handed over before the move: the folder exists from here on whether or not the move lands, and
+        // the reader would otherwise have to create it again to retry.
+        onFolderCreated?.(created);
+        setBusy(false);
+        await moveTo(created.uid);
+    }
+    return (_jsxs(Modal, { open: open, onClose: () => !busy && onClose(), title: `Move ${noun} to`, children: [offerFilter && !creating && (_jsx("input", { type: "search", value: filter, onChange: (e) => setFilter(e.target.value), "aria-label": "Filter folders", placeholder: "Filter folders\u2026", className: "w-full text-sm px-3 py-1.5 mb-2 rounded-md border border-border bg-surface" })), !creating && (_jsxs("ul", { className: "max-h-72 overflow-y-auto border border-border rounded-md divide-y divide-border", children: [shown.map((folder) => {
+                        const here = folder.uid === currentFolderUid;
+                        return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => void moveTo(folder.uid), disabled: busy || here, 
+                                // Disabled rather than hidden, so the list doesn't change shape as the
+                                // reader moves between folders.
+                                title: here ? `Already in ${folder.name}` : undefined, className: "w-full text-left flex items-center gap-2 px-3 py-2 text-sm hover:bg-surface-alt disabled:opacity-50 disabled:hover:bg-transparent", children: [_jsx(HiOutlineFolder, { size: 16, "aria-hidden": "true", className: "shrink-0 text-text-muted" }), _jsx("span", { className: "truncate", children: folder.name }), here && _jsx("span", { className: "ml-auto text-xs text-text-muted shrink-0", children: "Already here" })] }) }, folder.uid));
+                    }), shown.length === 0 && (_jsx("li", { className: "px-3 py-2 text-sm text-text-muted", children: targets.length === 0 ? "This mailbox has no folders to move to yet." : "No folder matches that." }))] })), creating ? (_jsxs("form", { onSubmit: handleCreate, children: [_jsx("label", { className: "block text-sm font-medium mb-1", htmlFor: "move-to-new-folder", children: "New folder name" }), _jsx("input", { id: "move-to-new-folder", ref: nameRef, value: newName, onChange: (e) => setNewName(e.target.value), maxLength: MAX_FOLDER_NAME_LENGTH, className: "w-full text-sm px-3 py-1.5 rounded-md border border-border bg-surface" }), _jsxs("p", { className: "text-xs text-text-muted mt-1", children: ["Created at the top level of this mailbox, and the ", count === 1 ? "message is" : "messages are", " moved into it."] }), error && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: error }) })), _jsxs("div", { className: "flex justify-end gap-2 mt-4", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => setCreating(false), disabled: busy, children: "Back" }), _jsx(Button, { type: "submit", disabled: busy, children: busy ? "Creating…" : "Create and move" })] })] })) : (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => {
+                            setCreating(true);
+                            setError(null);
+                        }, disabled: busy, className: "mt-3 inline-flex items-center gap-1.5 text-sm font-medium text-primary-dark hover:underline disabled:opacity-50 disabled:no-underline", children: [_jsx(HiOutlineFolderPlus, { size: 16, "aria-hidden": "true" }), "New folder\u2026"] }), error && (_jsx("div", { className: "mt-3", children: _jsx(Alert, { children: error }) }))] }))] }));
+}

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

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+import { DraftThreading } from "@rapidmx/react-shared/mail/mailApi.js";
 export interface ComposeSession {
     id: string;
     /** The initial sending mailbox - absent means "the caller's own mailbox" (see `ComposeWindow`). */
@@ -7,8 +8,13 @@ export interface ComposeSession {
     initialCc?: string;
     initialSubject?: string;
     /** Pre-built HTML (already includes its own quote-attribution wrapper — see `composeQuoting.ts`)
-     * inserted below the resolved default signature. Absent for a fresh, non-reply/forward compose. */
+     * inserted below the resolved default signature. Absent for a fresh, non-reply/forward compose. Its presence
+     * is what makes the window open with the caret at the top of the body instead of in To. */
     initialQuotedHtml?: string;
+    /** See `OpenComposeInput.encrypt`'s own doc comment. */
+    initialEncrypt?: boolean;
+    /** See `OpenComposeInput.threading`'s own doc comment - handed to `createDraft()` by the window. */
+    threading?: DraftThreading;
     /** Which of a signature's two "default" flags to resolve against — `"new"` (the default) uses
      * `isDefaultForNewMessages`, `"reply_forward"` uses `isDefaultForReplyForward`. */
     signatureContext: "new" | "reply_forward";
@@ -38,6 +44,15 @@ export interface OpenComposeInput {
      * "Mailing lists" note), so the new compose window defaults its Sign toggle off rather than on.
      * The user can still turn it back on manually; this only changes the *default*. */
     suppressSigning?: boolean;
+    /** `true` for a reply to or forward of an encrypted message, whose quote may carry its decrypted content: the
+     * compose window starts with "Encrypt this message" requested, so it is never autosaved as a plaintext draft and
+     * can't be sent unencrypted without the user explicitly choosing to. */
+    encrypt?: boolean;
+    /** The thread this compose continues (`buildReplyThreading()` over the message being replied to or
+     * forwarded), recorded on the draft by `createDraft()`. Without it the message is relayed with no
+     * `In-Reply-To`/`References` at all and every mail system - the sender's own Sent Items included - files it
+     * as a new conversation rather than part of the thread. Absent for a fresh compose, which starts one. */
+    threading?: DraftThreading;
 }
 export interface ComposeContextValue {
     /** Opens a new compose window, stacked alongside any already open (Gmail allows several at once). */

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

@@ -21,7 +21,7 @@ export function useCompose() {
 export default function ComposeProvider({ children, userUid, trusted }) {
     const [sessions, setSessions] = useState([]);
     const isMobile = useIsMobile();
-    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning }) {
+    function openCompose({ mailboxUid, to, cc, subject, quotedHtml, signatureContext = "new", suppressSigning, encrypt, threading, }) {
         setSessions((prev) => [
             ...prev,
             {
@@ -31,6 +31,8 @@ export default function ComposeProvider({ children, userUid, trusted }) {
                 initialCc: cc,
                 initialSubject: subject,
                 initialQuotedHtml: quotedHtml,
+                initialEncrypt: encrypt,
+                threading,
                 signatureContext,
                 suppressSigning,
                 minimized: false,

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

@@ -8,6 +8,7 @@ import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevron
 import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
 import { assembleDraft, assembleDraftRaw, attachmentContentUrl, createDraft, deleteMessage, getMailbox, getMessage, listFolders, listMailboxes, sendMessage, setMessageRequestReceipt, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
 import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import { buildComposeBodyHtml } from "@rapidmx/react-shared/mail/compose/composeQuoting.js";
 import { peekMailboxWritability, useMailboxWritability } from "../writableMailboxes.js";
 import { decideMessageEncryption, resolveRecipientEncryption } from "@rapidmx/react-shared/crypto/composeSecurity.js";
 import { getUnlockedKeys, subscribeKeySession } from "@rapidmx/react-shared/crypto/keySession.js";
@@ -17,6 +18,8 @@ import { fromBase64 } from "@rapidmx/react-shared/crypto/encoding.js";
 import { applyBaselineOuterHeaders, assembleOutboundMime, buildEncryptedMessage, buildSignedOnlyMessage } from "@rapidmx/react-shared/crypto/smimeMessage.js";
 import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
 import { isSigningOut, registerComposeFlush } from "./composeFlushRegistry.js";
+import RecipientInput from "./RecipientInput.js";
+import { parseRecipientList } from "./recipients.js";
 import RichTextEditor from "./RichTextEditor.js";
 import ScheduleSendPicker from "./ScheduleSendPicker.js";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
@@ -67,12 +70,9 @@ const MIN_HEIGHT = 320;
 // during this app's SSR pass (see `ReactRoute`) — referencing it here would crash every page render,
 // not just this component's.
 const VIEWPORT_MARGIN = 24;
+/** A To/Cc/Bcc field's recipients - see `recipients.ts` for the format. */
 function parseAddresses(value) {
-    return value
-        .split(",")
-        .map((s) => s.trim())
-        .filter((s) => s.length > 0)
-        .map((address) => ({ address }));
+    return parseRecipientList(value);
 }
 function HeaderButton({ label, onClick, icon: Icon, disabled, }) {
     return (_jsx("button", { type: "button", "aria-label": label, title: label, onClick: onClick, disabled: disabled, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white disabled:opacity-40 disabled:cursor-not-allowed", children: _jsx(Icon, { size: 14 }) }));
@@ -92,7 +92,7 @@ function HeaderButton({ label, onClick, icon: Icon, disabled, }) {
  * once.
  */
 export default function ComposeWindow({ session, onClose, onToggleMinimize, userUid, trusted, autosaveDelayMs = DEFAULT_AUTOSAVE_DELAY_MS, cryptoRetryDelaysMs = DEFAULT_CRYPTO_RETRY_DELAYS_MS, }) {
-    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, signatureContext, suppressSigning, minimized } = session;
+    const { id, initialTo, initialCc, initialSubject, initialQuotedHtml, initialEncrypt, signatureContext, suppressSigning, minimized } = session;
     // The sending ("From") mailbox. A reply/forward session names the original message's mailbox; a fresh
     // compose leaves it unset and defaults to the caller's own mailbox once `listMailboxes()` resolves.
     // Everything mailbox-scoped below (Drafts folder, draft, signatures, crypto context) keys off this.
@@ -137,7 +137,9 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     // `MessageDetailPane.tsx`'s handleReply()/handleReplyAll() for where this is computed. The user can
     // still turn it back on; this only changes the default.
     const [signEnabled, setSignEnabled] = useState(!suppressSigning);
-    const [encryptRequested, setEncryptRequested] = useState(false);
+    // A reply to or forward of an encrypted message starts (and, after a From switch, restarts) with encryption
+    // requested - see `OpenComposeInput.encrypt`.
+    const [encryptRequested, setEncryptRequested] = useState(!!initialEncrypt);
     const [encryptionBlocked, setEncryptionBlocked] = useState(null);
     // Compose-time discovery (spec: "Discovery occurs ... when the user addresses a new message to a
     // recipient", never on receipt) - keyed by address so a recipient already looked up isn't re-fetched
@@ -350,11 +352,12 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         checkRecipientDiscovery([...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]);
     }, [mailbox, encryptionPolicy, lookupRetryToken]);
     // Resolves the mailbox's default signature (if any) for `signatureContext` and seeds `html` with it
-    // plus any quoted original message, before `RichTextEditor` ever mounts (gated by `contentReady`
+    // plus any quoted original message (laid out by `buildComposeBodyHtml()`: an empty first paragraph for the
+    // caret, then the signature, then the quote), before `RichTextEditor` ever mounts (gated by `contentReady`
     // below) — `RichTextEditor`'s own doc comment is explicit that `value` only seeds its *initial*
     // content and never re-syncs from a later prop change, so this has to resolve before that first
     // mount, not after. A signature-list failure is best-effort, same as every other supplementary,
-    // non-blocking fetch in this codebase (e.g. `ConversationThreadPane`'s attachment fetch) — no
+    // non-blocking fetch in this codebase (e.g. `ConversationList`'s own child-message fetch) — no
     // signature is a completely legitimate outcome, so this falls back to just the quoted content
     // (if any) rather than surfacing an error over what's a cosmetic nicety.
     useEffect(() => {
@@ -366,14 +369,14 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         listMailSignatures(mailboxUid)
             .then((signatures) => {
             const signature = signatures.find((s) => signatureContext === "new" ? s.isDefaultForNewMessages : s.isDefaultForReplyForward);
-            const signatureHtml = signature?.contentHtml ? `${signature.contentHtml}<p></p>` : "";
-            const seeded = `${signatureHtml}${initialQuotedHtml ?? ""}`;
+            const seeded = buildComposeBodyHtml(signature?.contentHtml, initialQuotedHtml);
             setHtml(seeded);
             setSeededHtml(seeded);
         })
             .catch(() => {
-            setHtml(initialQuotedHtml ?? "");
-            setSeededHtml(initialQuotedHtml ?? "");
+            const seeded = buildComposeBodyHtml(undefined, initialQuotedHtml);
+            setHtml(seeded);
+            setSeededHtml(seeded);
         })
             .finally(() => setContentReady(true));
     }, [mailboxUid, signatureContext, initialQuotedHtml]);
@@ -382,7 +385,11 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
             return;
         }
         let cancelled = false;
-        createDraft(mailboxUid, draftsFolderUid)
+        // `session.threading` is what makes a reply a reply: the server writes it into the relayed MIME's
+        // `In-Reply-To`/`References` and groups the message into the thread being answered. Recorded on
+        // every draft this window creates, including the replacement one a From switch makes - the thread
+        // doesn't change because the sending mailbox did.
+        createDraft(mailboxUid, draftsFolderUid, session.threading)
             .then((created) => {
             if (cancelled) {
                 // The sender changed while this was in flight - discard the now-orphaned draft.
@@ -404,7 +411,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         return () => {
             cancelled = true;
         };
-    }, [mailboxUid, draftsFolderUid, draft]);
+    }, [mailboxUid, draftsFolderUid, draft, session.threading]);
     // Drafts a From switch superseded are otherwise only deleted once their replacement exists - closing the
     // window (or sending, which closes it) first would orphan them.
     useEffect(() => () => {
@@ -477,7 +484,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         lookupsInFlightRef.current = new Set();
         lookupFailuresRef.current = new Map();
         setExhaustedLookups({});
-        setEncryptRequested(false);
+        setEncryptRequested(!!initialEncrypt);
         setEncryptionBlocked(null);
         setSecurityBlock(null);
         offeredCryptoRef.current = { sign: false, encrypt: false };
@@ -1017,8 +1024,8 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
      * a current recipient's key lookup kept failing. */
     const cryptoCheckUnavailable = (cryptoContextReady && cryptoLoadFailed && (!mailbox || (encryptionPossible && !encryptionPolicy))) ||
         (encryptionPossible && currentAddresses.some((address) => exhaustedLookups[address] && !recipientStatuses[address]));
-    const latestRef = useRef({ draft, to, cc, bcc, subject, html, contentKey, saveStatus, hasUserContent, autosaveSuppressed, encryptionDecided });
-    latestRef.current = { draft, to, cc, bcc, subject, html, contentKey, saveStatus, hasUserContent, autosaveSuppressed, encryptionDecided };
+    const latestRef = useRef({ draft, to, cc, bcc, subject, html, seededHtml, contentKey, saveStatus, hasUserContent, autosaveSuppressed, encryptionDecided });
+    latestRef.current = { draft, to, cc, bcc, subject, html, seededHtml, contentKey, saveStatus, hasUserContent, autosaveSuppressed, encryptionDecided };
     useEffect(() => {
         const due = !!draft &&
             contentReady &&
@@ -1092,6 +1099,31 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         window.addEventListener("beforeunload", handleBeforeUnload);
         return () => window.removeEventListener("beforeunload", handleBeforeUnload);
     }, []);
+    // Where the caret starts, once per session: a reply/forward in the body (at its top), a new message in To - or,
+    // with To already filled in (e.g. Contacts' "Email"), in Subject. Minimizing unmounts the fields, so restoring a
+    // window must not move the caret there again.
+    const isReplyOrForward = initialQuotedHtml !== undefined;
+    const fieldsFocusedRef = useRef(false);
+    const bodyFocusedRef = useRef(false);
+    const focusToOnMount = !isReplyOrForward && !initialTo && !fieldsFocusedRef.current;
+    const focusSubjectOnMount = !isReplyOrForward && !!initialTo && !fieldsFocusedRef.current;
+    const focusBodyOnMount = isReplyOrForward && !bodyFocusedRef.current;
+    // The editor serializes the seeded body its own way (see `RichTextEditor`'s `onInitialized`). While the body is
+    // still exactly what compose seeded, that serialization becomes the baseline - so an untouched reply or signature
+    // isn't mistaken for an edit (and autosaved) just because the editor was focused or clicked.
+    function handleEditorInitialized(normalized) {
+        const latest = latestRef.current;
+        if (latest.html === latest.seededHtml && normalized !== latest.html) {
+            setHtml(normalized);
+            setSeededHtml(normalized);
+        }
+    }
+    useEffect(() => {
+        if (!minimized) {
+            fieldsFocusedRef.current = true;
+            bodyFocusedRef.current || (bodyFocusedRef.current = contentReady);
+        }
+    }, [minimized, contentReady]);
     const title = subject.trim() || "New Message";
     const titleId = `compose-title-${id}`;
     const discardModal = (_jsxs(Modal, { open: closePrompt !== null, onClose: () => setClosePrompt(null), title: closePrompt?.title ?? DISCARD_TITLE, children: [_jsx("p", { className: "text-sm text-text-muted mb-4", children: closePrompt?.message }), _jsxs("div", { className: "flex gap-3", children: [closePrompt?.retry && (_jsx(Button, { type: "button", onClick: retryCryptoContext, className: "!w-auto", children: "Retry" })), _jsx(Button, { type: "button", onClick: () => void discardNow(), disabled: sending || closing, className: "!w-auto", children: "Discard" }), _jsx(Button, { type: "button", variant: "secondary", onClick: () => setClosePrompt(null), className: "!w-auto", children: "Keep editing" })] })] }));
@@ -1103,7 +1135,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                     isMobile
                         ? "fixed inset-0 w-full h-full rounded-none border-0"
                         : ["border-b-0 rounded-t-md", manualSize ? "" : expanded ? "w-[720px] h-[85vh]" : "w-[480px] h-[520px]"].join(" "),
-                ].join(" "), children: [!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 cursor-pointer", onClick: 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: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: sending || closing })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2", 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 })] })), cryptoCheckUnavailable && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: CRYPTO_UNAVAILABLE_MESSAGE }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: retryCryptoContext, children: "Retry" })] }) })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: "Send without encryption" })] }) })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", disabled: sending, 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`, value: mailboxUid ?? "", disabled: hasUploads || sending, 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("input", { id: `compose-to-${id}`, type: "text", className: FIELD_INPUT, value: to, onChange: (e) => setTo(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(to)) }), !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("input", { id: `compose-cc-${id}`, type: "text", className: FIELD_INPUT, value: cc, onChange: (e) => setCc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(cc)) })] }), _jsxs("div", { className: FIELD_ROW, children: [_jsx("label", { htmlFor: `compose-bcc-${id}`, className: "text-xs text-text-muted shrink-0", children: "Bcc" }), _jsx("input", { id: `compose-bcc-${id}`, type: "text", className: FIELD_INPUT, value: bcc, onChange: (e) => setBcc(e.target.value), onBlur: () => checkRecipientDiscovery(parseAddresses(bcc)) })] })] })), (() => {
+                ].join(" "), children: [!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 cursor-pointer", onClick: 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: [_jsx(HeaderButton, { label: "Minimize", onClick: onToggleMinimize, icon: HiOutlineMinus }), !isMobile && (_jsx(HeaderButton, { label: expanded ? "Collapse" : "Expand", onClick: toggleExpanded, icon: expanded ? HiOutlineArrowsPointingIn : HiOutlineArrowsPointingOut })), _jsx(HeaderButton, { label: "Close", onClick: () => void handleClose(), icon: HiOutlineXMark, disabled: sending || closing })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError || discardError) && (_jsxs("div", { className: "px-3 pt-2", 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 })] })), cryptoCheckUnavailable && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: CRYPTO_UNAVAILABLE_MESSAGE }), _jsx(Button, { type: "button", variant: "secondary", className: "!w-auto", onClick: retryCryptoContext, children: "Retry" })] }) })), encryptionBlocked && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsxs("p", { className: "mb-2", children: ["This message can\u2019t be encrypted for everyone: ", encryptionBlocked.map((r) => r.address).join(", "), encryptionBlocked[0]?.prohibitedReason ? ` — ${encryptionBlocked[0].prohibitedReason}` : " has no encryption key on file", ". Remove ", encryptionBlocked.length > 1 ? "these recipients" : "this recipient", " from To/Cc/Bcc, or send the whole message in plaintext."] }), _jsx(Button, { type: "button", disabled: sending, onClick: () => void submit(true, blockedScheduleIso), children: "Send without encryption" })] }) })), securityBlock && (_jsx("div", { className: "px-3 pt-2", children: _jsxs(Alert, { children: [_jsx("p", { className: "mb-2", children: securityBlock.message }), _jsx(Button, { type: "button", disabled: sending, 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`, value: mailboxUid ?? "", disabled: hasUploads || sending, 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)) })] })] })), (() => {
                                 const knownRecipients = [...parseAddresses(to), ...parseAddresses(cc), ...parseAddresses(bcc)]
                                     .map((r) => recipientStatuses[r.address])
                                     .filter((status) => !!status);
@@ -1111,5 +1143,5 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                                     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, onChange: (e) => setSubject(e.target.value) }) }), _jsx("div", { className: "flex-1 min-h-0 p-2", children: contentReady && _jsx(RichTextEditor, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage }) }), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, 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), disabled: !draft || sending || closing || !cryptoContextReady, 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: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || closing || !cryptoContextReady, 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("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: sending || 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, { value: html, onChange: setHtml, fill: true, onUploadImage: handleUploadImage, autoFocusStart: focusBodyOnMount, onInitialized: handleEditorInitialized })) }), attachments.length > 0 && (_jsx("ul", { className: "flex flex-wrap gap-2 px-3 pb-2", children: attachments.map((attachment) => (_jsx("li", { className: "text-xs font-medium py-1 px-2.5 rounded-pill bg-surface-alt text-text-muted", children: attachment.filename }, 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), disabled: !draft || sending || closing || !cryptoContextReady, 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: sending ? "Sending…" : "Send" }), _jsx("button", { ref: scheduleButtonRef, type: "button", "aria-label": "Send later", "aria-haspopup": "true", "aria-expanded": schedulePickerOpen, disabled: !draft || sending || closing || !cryptoContextReady, 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("span", { role: "status", "aria-live": "polite", className: "ml-auto text-xs text-text-muted", children: SAVE_STATUS_LABEL[saveStatus] }), _jsx("button", { type: "button", "aria-label": "Discard draft", title: "Discard draft", onClick: handleDiscard, disabled: sending || 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/RecipientInput.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { type ContactSuggestionOptions, type RecipientSuggestion } from "@rapidmx/react-shared/mail/directoryApi.js";
+/** How long typing must pause before suggestions are requested. */
+export declare const RECIPIENT_SUGGESTION_DEBOUNCE_MS = 150;
+export interface RecipientInputProps {
+    /** The input's id, which the field's `<label htmlFor>` names. Also prefixes the listbox and option ids. */
+    id: string;
+    /** The field's name ("To", "Cc", "Bcc"), used in the recipient list's and suggestions' accessible names. */
+    label: string;
+    /** The field's text: recipients separated by commas, as `parseRecipientList()` reads it. */
+    value: string;
+    onChange: (value: string) => void;
+    /** Called with the field's text when focus leaves the input. */
+    onBlur?: (value: string) => void;
+    /** Called with the field's text after a suggestion is picked (focus stays in the input). */
+    onCommit?: (value: string) => void;
+    /** The mailbox being composed from, whose contacts are suggested too. */
+    mailboxUid?: string;
+    /** Loads suggestions; defaults to react-shared's `fetchRecipientSuggestions()`. */
+    fetchSuggestions?: (query: string, options: ContactSuggestionOptions) => Promise<RecipientSuggestion[]>;
+    debounceMs?: number;
+    disabled?: boolean;
+    /** Focuses the input when it mounts - a new message starts in To. */
+    autoFocus?: boolean;
+}
+/**
+ * A To/Cc/Bcc field: committed recipients as removable chips, and a WAI-ARIA combobox for the one being typed that
+ * suggests the caller's contacts and the server directory (contacts first, one entry per address). The field's value is
+ * still plain text (recipients separated by commas), so drafts, autosave and sending read it as before.
+ *
+ * Typing a comma or semicolon (outside a quoted name or angle brackets), pressing Enter, or leaving the field turns the
+ * typed text into a chip; pasted lists split the same way. Suggestions load `debounceMs` after typing pauses, for at
+ * least two characters, and a newer query aborts an older request. Arrow keys move through them, Enter or Tab picks
+ * one (as `Name <address>`), Escape closes them, and Backspace in an empty input removes the last chip.
+ */
+export default function RecipientInput({ id, label, value, onChange, onBlur, onCommit, mailboxUid, fetchSuggestions, debounceMs, disabled, autoFocus, }: RecipientInputProps): React.JSX.Element;