@rapidmx/web-client 0.2.0

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

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef, useState } from "react";
+import { BsArrowClockwise, BsArrowCounterclockwise, BsEraser, BsHighlighter, BsImage, BsIndent, BsJustify, BsLink45Deg, BsListOl, BsListUl, BsPaletteFill, BsTable, BsTextCenter, BsTextLeft, BsTextRight, BsTypeBold, BsTypeItalic, BsTypeStrikethrough, BsTypeUnderline, BsUnindent, } from "react-icons/bs";
+import EmojiPicker from "./EmojiPicker.js";
+import GifPicker from "./GifPicker.js";
+const FONT_FAMILIES = [
+    { label: "Default", value: "" },
+    { label: "Sans Serif", value: "Arial, Helvetica, sans-serif" },
+    { label: "Serif", value: "Georgia, 'Times New Roman', serif" },
+    { label: "Monospace", value: "'Courier New', monospace" },
+];
+const FONT_SIZES = [
+    { label: "Small", value: "12px" },
+    { label: "Normal", value: "" },
+    { label: "Large", value: "18px" },
+    { label: "Huge", value: "24px" },
+];
+function ToolbarButton({ label, icon: Icon, active, disabled, onClick, }) {
+    return (_jsx("button", { type: "button", "aria-label": label, "aria-pressed": active ?? false, title: label, disabled: disabled, onClick: onClick, className: [
+            "w-8 h-8 flex items-center justify-center rounded-sm disabled:opacity-40 disabled:cursor-not-allowed",
+            active ? "bg-primary/10 text-primary-dark" : "text-text-muted hover:bg-surface-alt hover:text-text",
+        ].join(" "), children: _jsx(Icon, { size: 16, "aria-hidden": "true" }) }));
+}
+function Divider() {
+    return _jsx("div", { className: "w-px self-stretch my-1.5 bg-border", "aria-hidden": "true" });
+}
+export default function ComposeToolbar({ editor, onUploadImage }) {
+    const [openPopup, setOpenPopup] = useState(null);
+    const [linkUrl, setLinkUrl] = useState("");
+    const imageInputRef = useRef(null);
+    const emojiButtonRef = useRef(null);
+    const gifButtonRef = useRef(null);
+    const disabled = !editor;
+    // Every control that calls `run()` is itself `disabled` while `editor` is null (see `disabled` above),
+    // and `editor` never reverts to null once TipTap actually creates it (only `immediatelyRender: false`'s
+    // one-render gap before mount produces a null `editor` at all) — so `run()` is never reachable with a
+    // null `editor` through any real UI interaction; asserted non-null rather than guarded, matching this
+    // codebase's established pattern for the same class of "always non-null by the time it's called" value.
+    function run(fn) {
+        fn(editor);
+    }
+    async function handleImageFileSelected(e) {
+        const file = e.target.files?.[0];
+        e.target.value = "";
+        if (!file) {
+            return;
+        }
+        const url = await onUploadImage(file);
+        if (url) {
+            run((ed) => ed.chain().focus().setImage({ src: url }).run());
+        }
+    }
+    function handleInsertEmoji(native) {
+        run((e) => e.chain().focus().insertContent(native).run());
+        setOpenPopup(null);
+    }
+    function handleInsertGif(url) {
+        run((e) => e.chain().focus().setImage({ src: url }).run());
+        setOpenPopup(null);
+    }
+    function openLinkPrompt() {
+        setLinkUrl(editor?.getAttributes("link").href ?? "");
+        setOpenPopup("link");
+    }
+    function submitLink(e) {
+        e.preventDefault();
+        if (linkUrl.trim().length === 0) {
+            run((ed) => ed.chain().focus().extendMarkRange("link").unsetLink().run());
+        }
+        else {
+            run((ed) => ed.chain().focus().extendMarkRange("link").setLink({ href: linkUrl.trim() }).run());
+        }
+        setOpenPopup(null);
+    }
+    let linkPrompt = null;
+    if (openPopup === "link") {
+        linkPrompt = (_jsxs("form", { onSubmit: submitLink, className: "flex items-center gap-1.5 px-2 py-1.5 border-t border-border", children: [_jsx("input", { type: "text", autoFocus: true, "aria-label": "Link URL", placeholder: "https://example.com", value: linkUrl, onChange: (e) => setLinkUrl(e.target.value), className: "flex-1 text-sm py-1 px-2 border border-border rounded-sm bg-surface" }), _jsx("button", { type: "submit", className: "text-xs font-semibold text-primary-dark hover:underline", children: "Apply" }), _jsx("button", { type: "button", onClick: () => setOpenPopup(null), className: "text-xs font-medium text-text-muted hover:underline", children: "Cancel" })] }));
+    }
+    return (_jsxs("div", { className: "border-b border-border bg-surface-alt", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-0.5 px-2 py-1.5", children: [_jsx("select", { "aria-label": "Font family", disabled: disabled, value: editor?.getAttributes("textStyle").fontFamily ?? "", onChange: (e) => run((ed) => e.target.value
+                            ? ed.chain().focus().setFontFamily(e.target.value).run()
+                            : ed.chain().focus().unsetFontFamily().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_FAMILIES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx("select", { "aria-label": "Font size", disabled: disabled, value: editor?.getAttributes("textStyle").fontSize ?? "", onChange: (e) => run((ed) => e.target.value
+                            ? ed.chain().focus().setFontSize(e.target.value).run()
+                            : ed.chain().focus().unsetFontSize().run()), className: "text-xs py-1 px-1.5 border border-border rounded-sm bg-surface disabled:opacity-40", children: FONT_SIZES.map((f) => (_jsx("option", { value: f.value, children: f.label }, f.label))) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bold", icon: BsTypeBold, disabled: disabled, active: editor?.isActive("bold"), onClick: () => run((e) => e.chain().focus().toggleBold().run()) }), _jsx(ToolbarButton, { label: "Italic", icon: BsTypeItalic, disabled: disabled, active: editor?.isActive("italic"), onClick: () => run((e) => e.chain().focus().toggleItalic().run()) }), _jsx(ToolbarButton, { label: "Underline", icon: BsTypeUnderline, disabled: disabled, active: editor?.isActive("underline"), onClick: () => run((e) => e.chain().focus().toggleUnderline().run()) }), _jsx(ToolbarButton, { label: "Strikethrough", icon: BsTypeStrikethrough, disabled: disabled, active: editor?.isActive("strike"), onClick: () => run((e) => e.chain().focus().toggleStrike().run()) }), _jsx(Divider, {}), _jsxs("label", { className: "w-8 h-8 flex items-center justify-center rounded-sm text-text-muted hover:bg-surface-alt hover:text-text cursor-pointer has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed", children: [_jsx(BsPaletteFill, { size: 16, "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Text color" }), _jsx("input", { type: "color", disabled: disabled, value: editor?.getAttributes("textStyle").color ?? "#000000", onChange: (e) => run((ed) => ed.chain().focus().setColor(e.target.value).run()), className: "sr-only" })] }), _jsx(ToolbarButton, { label: "Highlight", icon: BsHighlighter, disabled: disabled, active: editor?.isActive("highlight"), onClick: () => run((e) => e.chain().focus().toggleHighlight().run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Align left", icon: BsTextLeft, disabled: disabled, active: editor?.isActive({ textAlign: "left" }), onClick: () => run((e) => e.chain().focus().setTextAlign("left").run()) }), _jsx(ToolbarButton, { label: "Align center", icon: BsTextCenter, disabled: disabled, active: editor?.isActive({ textAlign: "center" }), onClick: () => run((e) => e.chain().focus().setTextAlign("center").run()) }), _jsx(ToolbarButton, { label: "Align right", icon: BsTextRight, disabled: disabled, active: editor?.isActive({ textAlign: "right" }), onClick: () => run((e) => e.chain().focus().setTextAlign("right").run()) }), _jsx(ToolbarButton, { label: "Justify", icon: BsJustify, disabled: disabled, active: editor?.isActive({ textAlign: "justify" }), onClick: () => run((e) => e.chain().focus().setTextAlign("justify").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Bulleted list", icon: BsListUl, disabled: disabled, active: editor?.isActive("bulletList"), onClick: () => run((e) => e.chain().focus().toggleBulletList().run()) }), _jsx(ToolbarButton, { label: "Numbered list", icon: BsListOl, disabled: disabled, active: editor?.isActive("orderedList"), onClick: () => run((e) => e.chain().focus().toggleOrderedList().run()) }), _jsx(ToolbarButton, { label: "Decrease indent", icon: BsUnindent, disabled: disabled, onClick: () => run((e) => e.chain().focus().liftListItem("listItem").run()) }), _jsx(ToolbarButton, { label: "Increase indent", icon: BsIndent, disabled: disabled, onClick: () => run((e) => e.chain().focus().sinkListItem("listItem").run()) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Insert link", icon: BsLink45Deg, disabled: disabled, active: editor?.isActive("link"), onClick: openLinkPrompt }), _jsx(ToolbarButton, { label: "Insert image", icon: BsImage, disabled: disabled, onClick: () => imageInputRef.current?.click() }), _jsx("input", { ref: imageInputRef, type: "file", accept: "image/*", onChange: handleImageFileSelected, className: "sr-only", "aria-label": "Insert image file" }), _jsx(ToolbarButton, { label: "Insert table", icon: BsTable, disabled: disabled, onClick: () => run((e) => e.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()) }), _jsx("button", { ref: emojiButtonRef, type: "button", "aria-label": "Insert emoji", title: "Insert emoji", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "emoji" ? null : "emoji")), className: "w-8 h-8 flex items-center justify-center text-base rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "\uD83D\uDE00" }), openPopup === "emoji" && (_jsx(EmojiPicker, { anchorRef: emojiButtonRef, onSelect: handleInsertEmoji, onClose: () => setOpenPopup(null) })), _jsx("button", { ref: gifButtonRef, type: "button", "aria-label": "Insert GIF", title: "Insert GIF", disabled: disabled, onClick: () => setOpenPopup((p) => (p === "gif" ? null : "gif")), className: "w-8 h-8 flex items-center justify-center text-[10px] font-extrabold tracking-tight rounded-sm disabled:opacity-40 disabled:cursor-not-allowed text-text-muted hover:bg-surface-alt hover:text-text", children: "GIF" }), openPopup === "gif" && _jsx(GifPicker, { anchorRef: gifButtonRef, onSelect: handleInsertGif, onClose: () => setOpenPopup(null) }), _jsx(Divider, {}), _jsx(ToolbarButton, { label: "Clear formatting", icon: BsEraser, disabled: disabled, onClick: () => run((e) => e.chain().focus().unsetAllMarks().clearNodes().run()) }), _jsx(ToolbarButton, { label: "Undo", icon: BsArrowCounterclockwise, disabled: disabled || !editor?.can().undo(), onClick: () => run((e) => e.chain().focus().undo().run()) }), _jsx(ToolbarButton, { label: "Redo", icon: BsArrowClockwise, disabled: disabled || !editor?.can().redo(), onClick: () => run((e) => e.chain().focus().redo().run()) })] }), linkPrompt] }));
+}

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

@@ -0,0 +1,261 @@
+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 { HiOutlineArrowsPointingIn, HiOutlineArrowsPointingOut, HiOutlineChevronDown, HiOutlineMinus, HiOutlinePaperClip, HiOutlineTrash, HiOutlineXMark, } from "react-icons/hi2";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { assembleDraft, attachmentContentUrl, createDraft, listFolders, sendMessage, setMessageRequestReceipt, setMessageScheduledSendTime, uploadAttachment, } from "@rapidmx/react-shared/mail/mailApi.js";
+import { listMailSignatures } from "@rapidmx/react-shared/mail/mailSignaturesApi.js";
+import useIsMobile from "@rapidmx/react-shared/util/useIsMobile.js";
+import RichTextEditor from "./RichTextEditor.js";
+import ScheduleSendPicker from "./ScheduleSendPicker.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+const FIELD_ROW = "flex items-center gap-2 px-3 py-1.5 border-b border-border";
+const FIELD_INPUT = "flex-1 min-w-0 text-sm bg-transparent outline-none";
+const MIN_WIDTH = 320;
+const MIN_HEIGHT = 320;
+// Kept well clear of the viewport edge, not flush against it — this is a resize *ceiling* (the drag
+// handles below clamp to it), not the "expanded" preset's own size, which stays a plain `85vh`
+// Tailwind class precisely so it never needs `window.innerHeight` at all: that'd have to be read at
+// module-evaluation time to live alongside these other constants, and `window` doesn't exist yet
+// 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;
+function parseAddresses(value) {
+    return value
+        .split(",")
+        .map((s) => s.trim())
+        .filter((s) => s.length > 0)
+        .map((address) => ({ address }));
+}
+function HeaderButton({ label, onClick, icon: Icon }) {
+    return (_jsx("button", { type: "button", "aria-label": label, title: label, onClick: onClick, className: "w-6 h-6 flex items-center justify-center rounded-sm text-white/80 hover:bg-white/15 hover:text-white", children: _jsx(Icon, { size: 14 }) }));
+}
+/**
+ * A floating, Gmail-style compose window — overlays whatever app is currently showing instead of
+ * navigating to a dedicated page (see `ComposeContext.tsx`'s doc comment for why: a full-page compose
+ * form meant losing your place in the inbox/calendar/contacts view behind it, and every navigation to
+ * `/compose` re-ran this whole app's full mailbox/folder resolution waterfall from scratch). Owns its
+ * own draft lifecycle end to end (unlike the old page, which read the Drafts folder from `MailShell`'s
+ * context — this window can be opened from apps that never mount `MailShell` at all, e.g. Contacts'
+ * "Email" action, so it resolves its own Drafts folder from just a `mailboxUid`).
+ *
+ * Below the `md` breakpoint, a non-minimized session instead renders as a full-screen sheet (there's no
+ * room for a floating window, and the click-drag resize handles below become meaningless full-screen) —
+ * see `ComposeContext.tsx`'s own doc comment for how that interacts with several sessions being open at
+ * once.
+ */
+export default function ComposeWindow({ session, onClose, onToggleMinimize }) {
+    const { id, mailboxUid, initialTo, initialCc, initialSubject, initialQuotedHtml, signatureContext, minimized } = session;
+    const isMobile = useIsMobile();
+    const windowRef = useRef(null);
+    const [draftsFolderUid, setDraftsFolderUid] = useState();
+    const [folderError, setFolderError] = useState(null);
+    const [draft, setDraft] = useState(null);
+    const [draftError, setDraftError] = useState(null);
+    const [expanded, setExpanded] = useState(false);
+    const [manualSize, setManualSize] = useState(null);
+    const [to, setTo] = useState(initialTo ?? "");
+    const [cc, setCc] = useState(initialCc ?? "");
+    const [bcc, setBcc] = useState("");
+    const [showCcBcc, setShowCcBcc] = useState(!!initialCc);
+    const [subject, setSubject] = useState(initialSubject ?? "");
+    const [html, setHtml] = useState("");
+    const [contentReady, setContentReady] = useState(false);
+    const [attachments, setAttachments] = useState([]);
+    const [attachError, setAttachError] = useState(null);
+    const [sendError, setSendError] = useState(null);
+    const [sending, setSending] = useState(false);
+    const [requestReceipt, setRequestReceipt] = useState(false);
+    const [schedulePickerOpen, setSchedulePickerOpen] = useState(false);
+    const scheduleButtonRef = useRef(null);
+    useEffect(() => {
+        listFolders(mailboxUid)
+            .then((folders) => setDraftsFolderUid(folders.find((f) => f.type === "drafts")?.uid))
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load your Drafts folder."));
+    }, [mailboxUid]);
+    // 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`
+    // 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
+    // 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(() => {
+        listMailSignatures(mailboxUid)
+            .then((signatures) => {
+            const signature = signatures.find((s) => signatureContext === "new" ? s.isDefaultForNewMessages : s.isDefaultForReplyForward);
+            const signatureHtml = signature?.contentHtml ? `${signature.contentHtml}<p></p>` : "";
+            setHtml(`${signatureHtml}${initialQuotedHtml ?? ""}`);
+        })
+            .catch(() => setHtml(initialQuotedHtml ?? ""))
+            .finally(() => setContentReady(true));
+    }, [mailboxUid, signatureContext, initialQuotedHtml]);
+    useEffect(() => {
+        if (!draftsFolderUid || draft) {
+            return;
+        }
+        createDraft(mailboxUid, draftsFolderUid)
+            .then(setDraft)
+            .catch((err) => setDraftError(err instanceof ApiRequestError ? err.message : "Could not start a new draft."));
+    }, [mailboxUid, draftsFolderUid, draft]);
+    /**
+     * Click-and-drag resize, from the window's own top/left edges (and the top-left corner, for both
+     * at once) — the window is anchored bottom-right (see `ComposeContext.tsx`'s stack), so growing it
+     * always means extending up and/or left, never down/right. `onMove`/`onUp` are fresh closures
+     * created per drag gesture (captured over this gesture's own start position/size) rather than
+     * stable component-level functions, specifically so `removeEventListener` in `onUp` always removes
+     * the exact listener `onMove`/`onUp` themselves just added — a version defined once per render and
+     * reused across gestures would need extra ref-juggling to avoid removing a stale (already-replaced)
+     * listener instead of the current one.
+     */
+    function handleResizeStart(edge) {
+        return (e) => {
+            e.preventDefault();
+            const rect = windowRef.current.getBoundingClientRect();
+            const startX = e.clientX;
+            const startY = e.clientY;
+            const startWidth = rect.width;
+            const startHeight = rect.height;
+            function onMove(ev) {
+                const maxWidth = window.innerWidth - VIEWPORT_MARGIN;
+                const maxHeight = window.innerHeight - VIEWPORT_MARGIN;
+                const width = edge === "top" ? startWidth : Math.min(Math.max(startWidth - (ev.clientX - startX), MIN_WIDTH), maxWidth);
+                const height = edge === "left" ? startHeight : Math.min(Math.max(startHeight - (ev.clientY - startY), MIN_HEIGHT), maxHeight);
+                setManualSize({ width, height });
+            }
+            function onUp() {
+                window.removeEventListener("pointermove", onMove);
+                window.removeEventListener("pointerup", onUp);
+            }
+            window.addEventListener("pointermove", onMove);
+            window.addEventListener("pointerup", onUp);
+        };
+    }
+    function toggleExpanded() {
+        setExpanded((v) => !v);
+        setManualSize(null);
+    }
+    /** Uploads `file` as an attachment on the current draft, resolving to a URL the editor can preview
+     * it at immediately — see `BaseMailComposeRoute.rewriteInlineImageSources()`'s doc comment for how
+     * that URL gets swapped for the message's real inline `cid:` reference at send time. Resolves to
+     * `null` (surfacing `attachError` itself, reusing the same state "Attach files" already has) rather
+     * than throwing: unlike "Attach files" (`disabled={!draft}`), "Insert image" in the formatting
+     * toolbar is only gated on the *editor* being mounted, not on the draft existing yet — those two
+     * things load in parallel, so a real (if narrow) window exists where the button is clickable before
+     * `draft` resolves, and this needs to fail gracefully rather than crash on a null draft.
+     */
+    async function handleUploadImage(file) {
+        if (!draft) {
+            setAttachError("Please wait for the draft to finish loading before inserting an image.");
+            return null;
+        }
+        try {
+            const attachment = await uploadAttachment(draft.uid, file);
+            return attachmentContentUrl(attachment.uid);
+        }
+        catch (err) {
+            setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload image.");
+            return null;
+        }
+    }
+    // The "Attach files" input is itself `disabled` until `draft` resolves (see its `disabled={!draft}`
+    // below), so this can only ever fire once `draft` is set — no defensive null check needed, matching
+    // this codebase's established pattern for the same class of "always non-null by the time it's
+    // called" value (e.g. `ComposeToolbar.run()`). No separate empty-`files` guard either: the loop
+    // below is already a no-op when there's nothing to iterate.
+    async function handleFilesSelected(e) {
+        const files = Array.from(e.target.files ?? []);
+        e.target.value = "";
+        setAttachError(null);
+        for (const file of files) {
+            try {
+                const attachment = await uploadAttachment(draft.uid, file);
+                setAttachments((prev) => [...prev, attachment]);
+            }
+            catch (err) {
+                setAttachError(err instanceof ApiRequestError ? err.message : "Could not upload attachment.");
+            }
+        }
+    }
+    // Same reasoning as `handleFilesSelected` above: the Send button is itself `disabled` until `draft`
+    // resolves, so this is never reachable with a null `draft`.
+    async function handleSend() {
+        const toRecipients = parseAddresses(to);
+        if (toRecipients.length === 0) {
+            setSendError("At least one recipient is required.");
+            return;
+        }
+        setSending(true);
+        setSendError(null);
+        try {
+            // See the old compose page's identical note: `sanitize-html` is Node-oriented and the server-side
+            // gate in `BaseMailComposeRoute.assemble()` is the sole authoritative sanitizer regardless, so no
+            // client-side pass is done here either.
+            const assembled = await assembleDraft(draft.uid, {
+                to: toRecipients,
+                cc: parseAddresses(cc),
+                bcc: parseAddresses(bcc),
+                subject,
+                html,
+            });
+            const withReceipt = requestReceipt ? await setMessageRequestReceipt(assembled, true) : assembled;
+            await sendMessage(withReceipt.uid);
+            onClose();
+        }
+        catch (err) {
+            setSendError(err instanceof ApiRequestError ? err.message : "Could not send this message.");
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    // Same reasoning as `handleSend` above (and the "Send later" caret is itself `disabled` alongside
+    // Send until `draft` resolves) — never reachable with a null `draft`. Assembles the draft first
+    // (same as an immediate send), then sets `scheduledSendTime` on the *freshly assembled* copy before
+    // calling `sendMessage()` — `send()` itself is what reads the field and defers relay into Outbox
+    // instead of sending immediately (see `mailApi.ts`'s own doc comment on `setMessageScheduledSendTime`).
+    async function handleScheduleSend(scheduledSendTimeIso) {
+        const toRecipients = parseAddresses(to);
+        setSchedulePickerOpen(false);
+        if (toRecipients.length === 0) {
+            setSendError("At least one recipient is required.");
+            return;
+        }
+        setSending(true);
+        setSendError(null);
+        try {
+            const assembled = await assembleDraft(draft.uid, {
+                to: toRecipients,
+                cc: parseAddresses(cc),
+                bcc: parseAddresses(bcc),
+                subject,
+                html,
+            });
+            const withReceipt = requestReceipt ? await setMessageRequestReceipt(assembled, true) : assembled;
+            const scheduled = await setMessageScheduledSendTime(withReceipt, scheduledSendTimeIso);
+            await sendMessage(scheduled.uid);
+            onClose();
+        }
+        catch (err) {
+            setSendError(err instanceof ApiRequestError ? err.message : "Could not schedule this message.");
+        }
+        finally {
+            setSending(false);
+        }
+    }
+    const title = subject.trim() || "New Message";
+    const titleId = `compose-title-${id}`;
+    if (minimized) {
+        return (_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: onClose, icon: HiOutlineXMark })] })] }) }));
+    }
+    return (_jsxs("div", { ref: windowRef, role: "dialog", "aria-labelledby": titleId, style: !isMobile && manualSize ? { width: manualSize.width, height: manualSize.height } : undefined, className: [
+            "relative shrink-0 flex flex-col bg-surface border border-border shadow-modal overflow-hidden",
+            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: onClose, icon: HiOutlineXMark })] })] }), _jsxs("div", { className: "flex-1 min-h-0 flex flex-col", children: [(folderError || draftError || sendError || attachError) && (_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 })] })), _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) }), !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) })] }), _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) })] })] })), _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"] }), _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: handleSend, disabled: !draft || sending, 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, 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": "Discard draft", title: "Discard draft", onClick: onClose, className: "ml-auto w-8 h-8 flex items-center justify-center rounded-full text-text-muted hover:bg-surface-alt hover:text-text", children: _jsx(HiOutlineTrash, { size: 18 }) })] })] })] }));
+}

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EMOJI_CATEGORIES } from "@rapidmx/react-shared/mail/compose/emojiData.js";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+const CATEGORY_LABELS = {
+    people: "Smileys & People",
+    nature: "Animals & Nature",
+    foods: "Food & Drink",
+    activity: "Activity",
+    places: "Travel & Places",
+    objects: "Objects",
+    symbols: "Symbols",
+    flags: "Flags",
+};
+const WIDTH = 288;
+const HEIGHT = 320;
+/**
+ * "Insert emoji" popup — a scrollable grid of every standard unicode emoji, grouped by category (see
+ * `emojiData.ts`). Deliberately no search box, unlike `GifPicker`'s — the user's own request only
+ * asked for a browsable grid here, and 8 category headers over ~1900 emojis is already a reasonably
+ * navigable amount without one. Rendered via `PopoverPortal` — see that component's own doc comment
+ * on why (escaping the toolbar's `overflow-hidden` ancestors).
+ */
+export default function EmojiPicker({ anchorRef, onSelect, onClose }) {
+    return (_jsx(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: WIDTH, height: HEIGHT, "aria-label": "Insert emoji", children: _jsx("div", { className: "flex-1 overflow-y-auto p-2", children: EMOJI_CATEGORIES.map((category) => (_jsxs("div", { className: "mb-2", children: [_jsx("h3", { className: "text-[11px] font-bold uppercase tracking-wide text-text-muted px-1 mb-1 sticky top-0 bg-surface", children: CATEGORY_LABELS[category.id] ?? category.id }), _jsx("div", { className: "grid grid-cols-8 gap-0.5", children: category.emojis.map((emoji) => (_jsx("button", { type: "button", title: emoji.name, "aria-label": emoji.name, onClick: () => onSelect(emoji.native), className: "w-8 h-8 flex items-center justify-center text-lg rounded-sm hover:bg-surface-alt", children: emoji.native }, emoji.id))) })] }, category.id))) }) }));
+}

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { searchGifs } from "@rapidmx/react-shared/mail/compose/giphyApi.js";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+const SEARCH_DEBOUNCE_MS = 350;
+const WIDTH = 288;
+const HEIGHT = 320;
+/** "Insert GIF" popup — a search box plus a scrollable grid of Giphy thumbnails (trending by default,
+ * live-searched as the user types). Selecting one inserts its full-resolution URL into the message
+ * body — see `ComposeToolbar.tsx`'s own doc comment on why that's a plain `<img>` reference rather
+ * than an uploaded attachment (unlike "Insert image"): a GIF is already hosted at a stable public
+ * URL, so there's nothing to upload. Rendered via `PopoverPortal` — see that component's own doc
+ * comment on why (escaping the toolbar's `overflow-hidden` ancestors). */
+export default function GifPicker({ anchorRef, onSelect, onClose }) {
+    const [query, setQuery] = useState("");
+    const [gifs, setGifs] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        const handle = setTimeout(() => {
+            searchGifs(query)
+                .then(setGifs)
+                .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load GIFs."))
+                .finally(() => setLoading(false));
+        }, SEARCH_DEBOUNCE_MS);
+        return () => clearTimeout(handle);
+    }, [query]);
+    return (_jsxs(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: WIDTH, height: HEIGHT, "aria-label": "Insert GIF", children: [_jsx("div", { className: "p-2 border-b border-border shrink-0", children: _jsx("input", { type: "text", autoFocus: true, "aria-label": "Search GIFs", placeholder: "Search GIFs", value: query, onChange: (e) => setQuery(e.target.value), className: "w-full text-sm py-1.5 px-2 border border-border rounded-sm bg-surface focus:outline-none focus:border-primary" }) }), _jsx("div", { className: "flex-1 overflow-y-auto p-2", children: error ? (_jsx("p", { className: "text-xs text-danger", children: error })) : loading ? (_jsx("p", { className: "text-xs text-text-muted", children: "Loading\u2026" })) : gifs.length === 0 ? (_jsx("p", { className: "text-xs text-text-muted", children: "No GIFs found." })) : (_jsx("div", { className: "grid grid-cols-2 gap-1.5", children: gifs.map((gif) => (_jsx("button", { type: "button", title: gif.title, onClick: () => onSelect(gif.url), className: "rounded-sm overflow-hidden hover:opacity-80", children: _jsx("img", { src: gif.previewUrl, alt: gif.title, className: "w-full h-20 object-cover" }) }, gif.id))) })) })] }));
+}

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

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useRef } from "react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { TextStyleKit } from "@tiptap/extension-text-style";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import { TableKit } from "@tiptap/extension-table";
+import Placeholder from "@tiptap/extension-placeholder";
+import ComposeToolbar from "./ComposeToolbar.js";
+/**
+ * A WYSIWYG rich-text editor for the Compose window's message body — replaces `MonacoHtmlEditor` (an HTML
+ * *source* editor) with a real Outlook-Home-tab-style formatting experience, built on TipTap/ProseMirror.
+ * Used by `ComposeWindow` (the floating overlay, not a dedicated page — see `ComposeContext.tsx`'s doc
+ * comment).
+ *
+ * `value` seeds the editor's initial content only — like `MonacoHtmlEditor`, this never re-syncs from a
+ * later `value` prop change; TipTap owns its own document once created. Live edits flow out as HTML (via
+ * `editor.getHTML()`) through `onChange`.
+ *
+ * `immediatelyRender: false` is required for this framework's SSR: the page embedding `ComposeWindow` is
+ * rendered server-side under plain Node before hydration (see `ReactRoute`), and TipTap's default
+ * (`immediatelyRender: true`) tries to mount its ProseMirror view during that very first render, which
+ * both can't work without a real DOM and produces a hydration mismatch. With it `false`, `useEditor`
+ * returns `null` until the editor actually mounts client-side after hydration — `ComposeToolbar`/
+ * `EditorContent` both already handle a `null` editor by rendering their disabled/empty state, so this
+ * needs no extra loading-placeholder logic here. Unlike `MonacoHtmlEditor`, no dynamic `import()` is
+ * needed to defer loading TipTap's modules off the SSR path — `immediatelyRender: false` alone is
+ * 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 }) {
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({ link: { openOnClick: false } }),
+            TextStyleKit.configure({ backgroundColor: false, lineHeight: false }),
+            TextAlign.configure({ types: ["heading", "paragraph"] }),
+            Highlight,
+            Image,
+            TableKit.configure({ table: { resizable: true } }),
+            Placeholder.configure({ placeholder: "Write your message…" }),
+        ],
+        content: value,
+        immediatelyRender: false,
+        onUpdate: ({ editor: updated }) => onChangeRef.current(updated.getHTML()),
+    });
+    return (_jsxs("div", { className: ["border border-border rounded-sm overflow-hidden", fill ? "h-full flex flex-col" : ""].filter(Boolean).join(" "), children: [_jsx(ComposeToolbar, { editor: editor, onUploadImage: onUploadImage }), _jsx(EditorContent, { editor: editor, style: fill ? undefined : { height }, className: [
+                    "overflow-y-auto px-3 py-2 text-sm [&_.tiptap]:outline-none [&_.tiptap]:h-full",
+                    fill ? "flex-1 min-h-0" : "",
+                ]
+                    .filter(Boolean)
+                    .join(" ") })] }));
+}

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import { useState } from "react";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+/**
+ * The "Send later" popover next to Compose's Send button — same `PopoverPortal` shell
+ * `EmojiPicker`/`GifPicker`/`ResourcePicker` already use, just holding a single `datetime-local` input
+ * instead of a grid/list. Validates the chosen time is genuinely in the future before calling
+ * `onSchedule` — `@rapidmx/restapi`'s own `send()` only defers when `scheduledSendTime` is strictly
+ * later than "now", so a past/immediate pick here would silently send right away instead of scheduling,
+ * which would surprise a reader expecting the picker's own choice to be honored.
+ */
+export default function ScheduleSendPicker({ anchorRef, onClose, onSchedule }) {
+    const [value, setValue] = useState("");
+    const [error, setError] = useState(null);
+    function handleSubmit(e) {
+        e.preventDefault();
+        if (!value) {
+            setError("Pick a date and time.");
+            return;
+        }
+        const iso = new Date(value).toISOString();
+        if (new Date(iso).getTime() <= Date.now()) {
+            setError("Pick a time in the future.");
+            return;
+        }
+        onSchedule(iso);
+    }
+    return (_jsx(PopoverPortal, { anchorRef: anchorRef, onClose: onClose, width: 260, height: 150, "aria-label": "Schedule send", children: _jsxs("form", { onSubmit: handleSubmit, className: "p-3 flex flex-col gap-2", children: [_jsx("label", { className: "text-xs font-semibold", htmlFor: "schedule-send-time", children: "Send at" }), _jsx("input", { id: "schedule-send-time", type: "datetime-local", className: "text-sm py-1.5 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary", value: value, onChange: (e) => setValue(e.target.value) }), error && _jsx("p", { className: "text-xs text-danger", children: error }), _jsx("button", { type: "submit", className: "text-sm font-semibold py-1.5 px-3 rounded-pill bg-primary text-white hover:bg-primary-dark", children: "Send later" })] }) }));
+}