@rapidmx/web-client 0.25.1 → 0.26.0

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

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useEffect, useRef, useState } from "react";
-import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevronDown, HiOutlineLockClosed, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
+import { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, 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, uploadAttachment, } from "../../../../../lib/mail/mailApi.js";
 import { listMailSignatures } from "../../../../../lib/mail/mailSignaturesApi.js";
@@ -15,8 +15,10 @@ import { resolveRecipientEncryption } from "../../../../../lib/crypto/composeSec
 import { getUnlockedKeys, subscribeKeySession } from "../../../../../lib/crypto/keySession.js";
 import { findActivePublicKey, getEncryptionPolicy, lookupKeys } from "../../../../../lib/crypto/keyvaultApi.js";
 import { useUnlockPrompt } from "../../layout/UnlockPromptProvider.js";
+import { buildOwnCardFile } from "../../contacts/contactCardData.js";
 import useIsMobile from "../../../../../lib/util/useIsMobile.js";
 import { notify } from "../../../notifications/store.js";
+import { isFileDrag, isInlineImage } from "./dropFiles.js";
 import { evaluateEncryptionRequirement } from "./encryptionRequirement.js";
 import { decideSend } from "../../../mail/outbox/sendDecision.js";
 import { sendDecisionInput, startSend } from "../../../mail/outbox/sendJob.js";
@@ -147,7 +149,14 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     const [html, setHtml] = useState(resume?.html ?? "");
     const [contentReady, setContentReady] = useState(!!resume);
     const [attachments, setAttachments] = useState(resume?.attachments ?? []);
+    // The sender's own contact card is on the message (or on its way): "Attach my contact card" then has nothing more to do.
+    const [ownCardAttached, setOwnCardAttached] = useState(false);
     const [attachError, setAttachError] = useState(null);
+    // The message editor, for putting a dropped picture into the text; and whether files are being dragged over the window right now.
+    const editorRef = useRef(null);
+    const [dropActive, setDropActive] = useState(false);
+    // Dragging over a child fires leave on the parent, then enter on the child: only when the count is back to zero has the drag left the window.
+    const dragDepthRef = useRef(0);
     // A problem with the message as composed (no recipient, an attachment that can't be signed): shown here, and the window stays open. What
     // goes wrong after Send was accepted is a pop-up instead (see `sendJob.ts`).
     const [sendError, setSendError] = useState(null);
@@ -622,6 +631,11 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         const files = Array.from(e.target.files ?? []);
         e.target.value = "";
         setAttachError(null);
+        await attachFiles(files);
+    }
+    /** Uploads each of `files` as an attachment on the draft, one after another, saying why any that could not be. Resolves whether they all were. */
+    async function attachFiles(files) {
+        let allAttached = true;
         uploadStarted();
         try {
             for (const file of files) {
@@ -632,6 +646,7 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
                     void refreshDraftVersion(draft.uid);
                 }
                 catch (err) {
+                    allAttached = false;
                     setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload attachment.");
                 }
             }
@@ -639,6 +654,68 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
         finally {
             uploadFinished();
         }
+        return allAttached;
+    }
+    /** Attaches the sender's own vCard ("Attach my contact card"), once: the button is off from the click on, and back on if the upload failed. */
+    async function handleAttachOwnCard() {
+        setOwnCardAttached(true);
+        setAttachError(null);
+        const file = await buildOwnCardFile(mailbox, mailboxes, userUid, client);
+        if (!(await attachFiles([file]))) {
+            setOwnCardAttached(false);
+        }
+    }
+    /**
+     * Files dropped on the window: a picture goes into the message, at the caret, the way "Insert image" would put it; anything else is attached,
+     * as "Attach files" would. Done in the order they were dropped.
+     */
+    async function handleDroppedFiles(files) {
+        if (!draft) {
+            setAttachError("Please wait for the draft to finish loading before adding files.");
+            return;
+        }
+        setAttachError(null);
+        const toAttach = [];
+        for (const file of files) {
+            if (!isInlineImage(file)) {
+                toAttach.push(file);
+                continue;
+            }
+            const url = await handleUploadImage(file);
+            if (url) {
+                editorRef.current?.chain().focus().setImage({ src: url, alt: file.name }).run();
+            }
+        }
+        await attachFiles(toAttach);
+    }
+    function handleDragEnter(e) {
+        if (isFileDrag(e.dataTransfer)) {
+            dragDepthRef.current += 1;
+            setDropActive(true);
+        }
+    }
+    function handleDragOver(e) {
+        if (isFileDrag(e.dataTransfer)) {
+            // What makes this a place a file may be dropped (otherwise the browser opens it instead).
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+        }
+    }
+    function handleDragLeave(e) {
+        if (isFileDrag(e.dataTransfer)) {
+            dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+            if (dragDepthRef.current === 0) {
+                setDropActive(false);
+            }
+        }
+    }
+    function handleDrop(e) {
+        if (isFileDrag(e.dataTransfer)) {
+            e.preventDefault();
+            dragDepthRef.current = 0;
+            setDropActive(false);
+            void handleDroppedFiles(Array.from(e.dataTransfer.files));
+        }
     }
     /**
      * Send (or, given `scheduledSendTimeIso`, Send later) - and get out of the way. The window is the place the message is *written*; nothing
@@ -1167,14 +1244,14 @@ export default function ComposeWindow({ session, onClose, onToggleMinimize, user
     if (minimized) {
         return (_jsxs(_Fragment, { children: [_jsx("div", { role: "dialog", "aria-label": title, className: "w-64 shrink-0 bg-surface border border-border border-b-0 rounded-t-md shadow-modal", children: _jsxs("div", { className: "h-10 flex items-center justify-between gap-2 px-3 rounded-t-md bg-primary-darker text-white cursor-pointer", onClick: onToggleMinimize, children: [_jsx("span", { 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: "Restore", onClick: onToggleMinimize, icon: HiOutlineArrowsPointingOut }), _jsx(HeaderButton, { label: "Discard draft", onClick: handleDiscard, icon: HiOutlineXMark, disabled: closing })] })] }) }), discardModal] }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "data-shortcut-scope": "compose", "aria-labelledby": titleId, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: windowRef, role: "dialog", "data-shortcut-scope": "compose", "aria-labelledby": titleId, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
                     "shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
                     // `fixed` and `relative` may not both be on the element: Tailwind emits `.relative` after `.fixed`, so it wins and the
                     // sheet sat in the flow of the little fixed container the windows are stacked in instead of covering the screen.
                     isMobile
                         ? "fixed inset-0 w-full h-full rounded-none border-0"
                         : ["relative 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: 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`, 
+                ].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" })] })), !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: 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)) })] })] })), (() => {
@@ -1199,5 +1276,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, 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 })) }), 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) => (_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), 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("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) => (_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), 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] }));
 }

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

@@ -17,6 +17,7 @@ const KIND_LABELS = {
     room: "Room",
     equipment: "Equipment",
     list: "Group",
+    correspondent: "Recent",
 };
 /** Where the suggestions go: under the field (or above it when there's much more room there), as wide as the field. */
 function dropdownPosition(anchor) {

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

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { MutableRefObject } from "react";
+import { type Editor } from "@tiptap/react";
 export interface RichTextEditorProps {
     value: string;
     onChange: (value: string) => void;
@@ -26,6 +27,8 @@ export interface RichTextEditorProps {
     appendHtml?: string;
     /** Called with the document as the editor serializes it, right after `appendHtml` was added. */
     onAppended?: (value: string) => void;
+    /** Set to the editor while it exists (and to `null` before and after), for a caller that has to put content into the message from outside the toolbar - a picture dropped on the window. */
+    editorRef?: MutableRefObject<Editor | null>;
 }
 /**
  * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
@@ -48,4 +51,4 @@ export interface RichTextEditorProps {
  * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
  * an editor view actually mounts.
  */
-export default function RichTextEditor({ value, onChange, height, fill, onUploadImage, autoFocusStart, onInitialized, appendHtml, onAppended, }: RichTextEditorProps): React.JSX.Element;
+export default function RichTextEditor({ value, onChange, height, fill, onUploadImage, autoFocusStart, onInitialized, appendHtml, onAppended, editorRef, }: RichTextEditorProps): React.JSX.Element;

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

@@ -34,7 +34,7 @@ import ComposeToolbar from "./ComposeToolbar.js";
  * sufficient here since TipTap (unlike Monaco) never touches the DOM at module-evaluation time, only when
  * an editor view actually mounts.
  */
-export default function RichTextEditor({ value, onChange, height = "360px", fill = false, onUploadImage, autoFocusStart = false, onInitialized, appendHtml, onAppended, }) {
+export default function RichTextEditor({ value, onChange, height = "360px", fill = false, onUploadImage, autoFocusStart = false, onInitialized, appendHtml, onAppended, editorRef, }) {
     const onChangeRef = useRef(onChange);
     onChangeRef.current = onChange;
     const onInitializedRef = useRef(onInitialized);
@@ -78,6 +78,15 @@ export default function RichTextEditor({ value, onChange, height = "360px", fill
             }
         },
     });
+    useEffect(() => {
+        if (!editorRef) {
+            return undefined;
+        }
+        editorRef.current = editor;
+        return () => {
+            editorRef.current = null;
+        };
+    }, [editor, editorRef]);
     // Added once, at the end, whatever the reader has typed meanwhile (the caret stays where it is).
     useEffect(() => {
         if (!editor || appendHtml === undefined || appendedRef.current === appendHtml) {

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

@@ -0,0 +1,8 @@
+/**
+ * Whether a file dropped on the compose window goes into the message itself, at the caret, rather than onto it as an attachment: pictures do (a
+ * photo or a screenshot is meant to be seen in the text), everything else is attached. The browser's own idea of the type decides, and the file's name
+ * does when it had none.
+ */
+export declare function isInlineImage(file: Pick<File, "name" | "type">): boolean;
+/** Whether a drag carries files from outside the page (as opposed to the text or an image being dragged around inside the editor). */
+export declare function isFileDrag(dataTransfer: Pick<DataTransfer, "types"> | null | undefined): boolean;

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

@@ -0,0 +1,18 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+/** Picture files by name, for a file the browser gave no type to. */
+const IMAGE_EXTENSION = /\.(jpe?g|png|gif|webp|svg|avif|bmp|ico|apng)$/i;
+/**
+ * Whether a file dropped on the compose window goes into the message itself, at the caret, rather than onto it as an attachment: pictures do (a
+ * photo or a screenshot is meant to be seen in the text), everything else is attached. The browser's own idea of the type decides, and the file's name
+ * does when it had none.
+ */
+export function isInlineImage(file) {
+    return file.type ? file.type.startsWith("image/") : IMAGE_EXTENSION.test(file.name);
+}
+/** Whether a drag carries files from outside the page (as opposed to the text or an image being dragged around inside the editor). */
+export function isFileDrag(dataTransfer) {
+    return Array.from(dataTransfer?.types ?? []).includes("Files");
+}

package/dist/lib/contacts/contactsApi.d.ts

@@ -77,6 +77,9 @@ export declare function pinnedSigningFingerprintsFor(contacts: Contact[], addres
  * `limit` cap). */
 export declare const PINNED_FINGERPRINT_PAGE_SIZE = 500;
 export declare const PINNED_FINGERPRINT_MAX_PAGES = 20;
+/** Every contact in `folderUids`, paged (`PINNED_FINGERPRINT_PAGE_SIZE`, at most `PINNED_FINGERPRINT_MAX_PAGES` pages
+ * per folder). A plain contacts read - never a Discovery lookup. */
+export declare function listContactsInFolders(folderUids: string[], client?: ApiClient): Promise<Contact[]>;
 /**
  * Fetches the trusted signing-key fingerprints (pinned and previous - see `pinnedSigningFingerprintsFor()`) for a
  * message sender's `address` from the contacts in `folderUids` (the reader's contacts folders), for

package/dist/lib/contacts/contactsApi.js

@@ -29,7 +29,7 @@ export const PINNED_FINGERPRINT_PAGE_SIZE = 500;
 export const PINNED_FINGERPRINT_MAX_PAGES = 20;
 /** Every contact in `folderUids`, paged (`PINNED_FINGERPRINT_PAGE_SIZE`, at most `PINNED_FINGERPRINT_MAX_PAGES` pages
  * per folder). A plain contacts read - never a Discovery lookup. */
-async function listContactsInFolders(folderUids, client) {
+export async function listContactsInFolders(folderUids, client) {
     const contacts = [];
     for (const folderUid of folderUids) {
         for (let page = 0; page < PINNED_FINGERPRINT_MAX_PAGES; page++) {

package/dist/lib/mail/directoryApi.d.ts

@@ -1,12 +1,14 @@
 /**
  * Typed wrappers over `@rapidmx/restapi`'s `BaseDirectoryRoute` - recipient suggestions for compose. `GET
  * /mail/directory` searches the server's mailboxes (people, shared mailboxes, rooms and equipment) and distribution
- * lists; `GET /mail/directory/contacts` searches the caller's own contacts. Both match every word of the query against
- * the start of a name word or of an address, and return only a display name, an address and a kind.
+ * lists; `GET /mail/directory/contacts` searches the caller's own contacts; `GET /mail/directory/correspondents` searches
+ * everyone the caller's mailboxes have exchanged mail or shared an event with, address book or not. All match every word of
+ * the query against the start of a name word or of an address, and return only a display name, an address and a kind.
  */
 import { ApiClient } from "../util/api.js";
-/** What a suggestion names. `"contact"` comes from the caller's contacts, everything else from the server directory. */
-export type RecipientSuggestionKind = "user" | "shared" | "room" | "equipment" | "list" | "contact";
+/** What a suggestion names. `"contact"` comes from the caller's contacts, `"correspondent"` from the people they have written to, heard from or
+ * met with, everything else from the server directory. */
+export type RecipientSuggestionKind = "user" | "shared" | "room" | "equipment" | "list" | "contact" | "correspondent";
 export interface RecipientSuggestion {
     displayName: string;
     address: string;
@@ -38,12 +40,16 @@ export interface ContactSuggestionOptions extends RecipientSuggestionOptions {
 export declare function searchDirectory(query: string, options?: RecipientSuggestionOptions, client?: ApiClient): Promise<RecipientSuggestion[]>;
 /** Searches the caller's contacts (every address of a contact whose name matches, or the addresses that match). */
 export declare function searchContactSuggestions(query: string, options?: ContactSuggestionOptions, client?: ApiClient): Promise<RecipientSuggestion[]>;
-/** Contacts first, then directory entries, without repeating an address (compared case-insensitively; the first
- * occurrence wins), at most `limit`. */
-export declare function mergeRecipientSuggestions(contacts: RecipientSuggestion[], directory: RecipientSuggestion[], limit?: number): RecipientSuggestion[];
+/** Searches the people the caller's mailboxes have exchanged mail or shared an event with, whether or not they are in the address book. Rejects like
+ * `searchDirectory()`; a server that predates the endpoint answers 404, which `fetchRecipientSuggestions()` treats as "none". */
+export declare function searchCorrespondents(query: string, options?: ContactSuggestionOptions, client?: ApiClient): Promise<RecipientSuggestion[]>;
+/** Contacts first, then directory entries, then the people the caller has corresponded with, without repeating an address (compared
+ * case-insensitively; the first occurrence wins), at most `limit`. */
+export declare function mergeRecipientSuggestions(contacts: RecipientSuggestion[], directory: RecipientSuggestion[], limit?: number, correspondents?: RecipientSuggestion[]): RecipientSuggestion[];
 /**
- * Contacts and directory suggestions for `query`, merged by `mergeRecipientSuggestions()`. Either source failing (a 403
- * directory for a caller with no mailbox here, a 429, a network error) still returns the other's entries; only when
- * both fail does this reject, with the contacts error. An aborted `signal` always rejects with the `AbortError`.
+ * Contacts, directory and correspondent suggestions for `query`, merged by `mergeRecipientSuggestions()`. Any source failing (a 403
+ * directory for a caller with no mailbox here, a 429, a network error, a server without the correspondents endpoint) still returns
+ * the others' entries; only when the contacts and the directory both fail does this reject, with the contacts error - the
+ * correspondents are a bonus and never turn a working search into an error. An aborted `signal` always rejects with the `AbortError`.
  */
 export declare function fetchRecipientSuggestions(query: string, options?: ContactSuggestionOptions, client?: ApiClient): Promise<RecipientSuggestion[]>;

package/dist/lib/mail/directoryApi.js

@@ -5,8 +5,9 @@
 /**
  * Typed wrappers over `@rapidmx/restapi`'s `BaseDirectoryRoute` - recipient suggestions for compose. `GET
  * /mail/directory` searches the server's mailboxes (people, shared mailboxes, rooms and equipment) and distribution
- * lists; `GET /mail/directory/contacts` searches the caller's own contacts. Both match every word of the query against
- * the start of a name word or of an address, and return only a display name, an address and a kind.
+ * lists; `GET /mail/directory/contacts` searches the caller's own contacts; `GET /mail/directory/correspondents` searches
+ * everyone the caller's mailboxes have exchanged mail or shared an event with, address book or not. All match every word of
+ * the query against the start of a name word or of an address, and return only a display name, an address and a kind.
  */
 import { ApiRequestError, withClient } from "../util/api.js";
 /** The shortest trimmed query the server searches for - shorter ones resolve to `[]` without a request. */
@@ -58,12 +59,17 @@ export function searchDirectory(query, options = {}, client) {
 export function searchContactSuggestions(query, options = {}, client) {
     return fetchSuggestions("/mail/directory/contacts", query, { limit: options.limit?.toString(), mailboxUid: options.mailboxUid }, options.signal, client);
 }
-/** Contacts first, then directory entries, without repeating an address (compared case-insensitively; the first
- * occurrence wins), at most `limit`. */
-export function mergeRecipientSuggestions(contacts, directory, limit = RECIPIENT_SUGGESTION_DEFAULT_LIMIT) {
+/** Searches the people the caller's mailboxes have exchanged mail or shared an event with, whether or not they are in the address book. Rejects like
+ * `searchDirectory()`; a server that predates the endpoint answers 404, which `fetchRecipientSuggestions()` treats as "none". */
+export function searchCorrespondents(query, options = {}, client) {
+    return fetchSuggestions("/mail/directory/correspondents", query, { limit: options.limit?.toString(), mailboxUid: options.mailboxUid }, options.signal, client);
+}
+/** Contacts first, then directory entries, then the people the caller has corresponded with, without repeating an address (compared
+ * case-insensitively; the first occurrence wins), at most `limit`. */
+export function mergeRecipientSuggestions(contacts, directory, limit = RECIPIENT_SUGGESTION_DEFAULT_LIMIT, correspondents = []) {
     const seen = new Set();
     const result = [];
-    for (const entry of [...contacts, ...directory]) {
+    for (const entry of [...contacts, ...directory, ...correspondents]) {
         const key = entry.address.trim().toLowerCase();
         if (result.length >= limit) {
             break;
@@ -79,17 +85,19 @@ function isAbort(error) {
     return error?.name === "AbortError";
 }
 /**
- * Contacts and directory suggestions for `query`, merged by `mergeRecipientSuggestions()`. Either source failing (a 403
- * directory for a caller with no mailbox here, a 429, a network error) still returns the other's entries; only when
- * both fail does this reject, with the contacts error. An aborted `signal` always rejects with the `AbortError`.
+ * Contacts, directory and correspondent suggestions for `query`, merged by `mergeRecipientSuggestions()`. Any source failing (a 403
+ * directory for a caller with no mailbox here, a 429, a network error, a server without the correspondents endpoint) still returns
+ * the others' entries; only when the contacts and the directory both fail does this reject, with the contacts error - the
+ * correspondents are a bonus and never turn a working search into an error. An aborted `signal` always rejects with the `AbortError`.
  */
 export async function fetchRecipientSuggestions(query, options = {}, client) {
     const limit = options.limit ?? RECIPIENT_SUGGESTION_DEFAULT_LIMIT;
-    const [contacts, directory] = await Promise.allSettled([
+    const [contacts, directory, correspondents] = await Promise.allSettled([
         searchContactSuggestions(query, { ...options, limit }, client),
         searchDirectory(query, { limit, signal: options.signal }, client),
+        searchCorrespondents(query, { ...options, limit }, client),
     ]);
-    for (const outcome of [contacts, directory]) {
+    for (const outcome of [contacts, directory, correspondents]) {
         if (outcome.status === "rejected" && isAbort(outcome.reason)) {
             throw outcome.reason;
         }
@@ -97,5 +105,5 @@ export async function fetchRecipientSuggestions(query, options = {}, client) {
     if (contacts.status === "rejected" && directory.status === "rejected") {
         throw contacts.reason instanceof Error ? contacts.reason : new ApiRequestError("Suggestions couldn't be loaded.", 0);
     }
-    return mergeRecipientSuggestions(contacts.status === "fulfilled" ? contacts.value : [], directory.status === "fulfilled" ? directory.value : [], limit);
+    return mergeRecipientSuggestions(contacts.status === "fulfilled" ? contacts.value : [], directory.status === "fulfilled" ? directory.value : [], limit, correspondents.status === "fulfilled" ? correspondents.value : []);
 }

package/lib/contacts/contactsApi.ts

@@ -109,7 +109,7 @@ export const PINNED_FINGERPRINT_MAX_PAGES = 20;
 
 /** Every contact in `folderUids`, paged (`PINNED_FINGERPRINT_PAGE_SIZE`, at most `PINNED_FINGERPRINT_MAX_PAGES` pages
  * per folder). A plain contacts read - never a Discovery lookup. */
-async function listContactsInFolders(folderUids: string[], client?: ApiClient): Promise<Contact[]> {
+export async function listContactsInFolders(folderUids: string[], client?: ApiClient): Promise<Contact[]> {
     const contacts: Contact[] = [];
     for (const folderUid of folderUids) {
         for (let page = 0; page < PINNED_FINGERPRINT_MAX_PAGES; page++) {

package/lib/mail/directoryApi.ts

@@ -5,13 +5,15 @@
 /**
  * Typed wrappers over `@rapidmx/restapi`'s `BaseDirectoryRoute` - recipient suggestions for compose. `GET
  * /mail/directory` searches the server's mailboxes (people, shared mailboxes, rooms and equipment) and distribution
- * lists; `GET /mail/directory/contacts` searches the caller's own contacts. Both match every word of the query against
- * the start of a name word or of an address, and return only a display name, an address and a kind.
+ * lists; `GET /mail/directory/contacts` searches the caller's own contacts; `GET /mail/directory/correspondents` searches
+ * everyone the caller's mailboxes have exchanged mail or shared an event with, address book or not. All match every word of
+ * the query against the start of a name word or of an address, and return only a display name, an address and a kind.
  */
 import { ApiClient, ApiRequestError, withClient } from "../util/api.js";
 
-/** What a suggestion names. `"contact"` comes from the caller's contacts, everything else from the server directory. */
-export type RecipientSuggestionKind = "user" | "shared" | "room" | "equipment" | "list" | "contact";
+/** What a suggestion names. `"contact"` comes from the caller's contacts, `"correspondent"` from the people they have written to, heard from or
+ * met with, everything else from the server directory. */
+export type RecipientSuggestionKind = "user" | "shared" | "room" | "equipment" | "list" | "contact" | "correspondent";
 
 export interface RecipientSuggestion {
     displayName: string;
@@ -104,16 +106,29 @@ export function searchContactSuggestions(
     );
 }
 
-/** Contacts first, then directory entries, without repeating an address (compared case-insensitively; the first
- * occurrence wins), at most `limit`. */
+/** Searches the people the caller's mailboxes have exchanged mail or shared an event with, whether or not they are in the address book. Rejects like
+ * `searchDirectory()`; a server that predates the endpoint answers 404, which `fetchRecipientSuggestions()` treats as "none". */
+export function searchCorrespondents(query: string, options: ContactSuggestionOptions = {}, client?: ApiClient): Promise<RecipientSuggestion[]> {
+    return fetchSuggestions(
+        "/mail/directory/correspondents",
+        query,
+        { limit: options.limit?.toString(), mailboxUid: options.mailboxUid },
+        options.signal,
+        client,
+    );
+}
+
+/** Contacts first, then directory entries, then the people the caller has corresponded with, without repeating an address (compared
+ * case-insensitively; the first occurrence wins), at most `limit`. */
 export function mergeRecipientSuggestions(
     contacts: RecipientSuggestion[],
     directory: RecipientSuggestion[],
     limit: number = RECIPIENT_SUGGESTION_DEFAULT_LIMIT,
+    correspondents: RecipientSuggestion[] = [],
 ): RecipientSuggestion[] {
     const seen = new Set<string>();
     const result: RecipientSuggestion[] = [];
-    for (const entry of [...contacts, ...directory]) {
+    for (const entry of [...contacts, ...directory, ...correspondents]) {
         const key = entry.address.trim().toLowerCase();
         if (result.length >= limit) {
             break;
@@ -131,9 +146,10 @@ function isAbort(error: unknown): boolean {
 }
 
 /**
- * Contacts and directory suggestions for `query`, merged by `mergeRecipientSuggestions()`. Either source failing (a 403
- * directory for a caller with no mailbox here, a 429, a network error) still returns the other's entries; only when
- * both fail does this reject, with the contacts error. An aborted `signal` always rejects with the `AbortError`.
+ * Contacts, directory and correspondent suggestions for `query`, merged by `mergeRecipientSuggestions()`. Any source failing (a 403
+ * directory for a caller with no mailbox here, a 429, a network error, a server without the correspondents endpoint) still returns
+ * the others' entries; only when the contacts and the directory both fail does this reject, with the contacts error - the
+ * correspondents are a bonus and never turn a working search into an error. An aborted `signal` always rejects with the `AbortError`.
  */
 export async function fetchRecipientSuggestions(
     query: string,
@@ -141,11 +157,12 @@ export async function fetchRecipientSuggestions(
     client?: ApiClient,
 ): Promise<RecipientSuggestion[]> {
     const limit = options.limit ?? RECIPIENT_SUGGESTION_DEFAULT_LIMIT;
-    const [contacts, directory] = await Promise.allSettled([
+    const [contacts, directory, correspondents] = await Promise.allSettled([
         searchContactSuggestions(query, { ...options, limit }, client),
         searchDirectory(query, { limit, signal: options.signal }, client),
+        searchCorrespondents(query, { ...options, limit }, client),
     ]);
-    for (const outcome of [contacts, directory]) {
+    for (const outcome of [contacts, directory, correspondents]) {
         if (outcome.status === "rejected" && isAbort(outcome.reason)) {
             throw outcome.reason;
         }
@@ -157,5 +174,6 @@ export async function fetchRecipientSuggestions(
         contacts.status === "fulfilled" ? contacts.value : [],
         directory.status === "fulfilled" ? directory.value : [],
         limit,
+        correspondents.status === "fulfilled" ? correspondents.value : [],
     );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapidmx/web-client",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "description": "RapidMX's webmail and admin console React UI for web-based clients.",
   "type": "module",
   "repository": "https://github.com/rapidmx/web-client",