domma-cms 0.55.1 → 0.69.3

package/plugins/_lib/admin/mail/compose-window.js

@@ -0,0 +1,914 @@
+/**
+ * The compose window.
+ *
+ * A slideover built as real DOM and appended to `slideover.element`: passing
+ * markup through setContent strips inputs and buttons, which is the single
+ * most expensive thing to rediscover in this codebase.
+ *
+ * @module _lib/admin/mail/compose-window
+ */
+
+/**
+ * Render an address list into something editable.
+ *
+ * @param   {Array<{name?: string, address?: string}>|undefined} list
+ * @returns {string}
+ */
+function addressesToText(list) {
+    return (list ?? [])
+        .map(entry => (entry.name ? `${entry.name} <${entry.address}>` : entry.address))
+        .filter(Boolean)
+        .join(', ');
+}
+
+/**
+ * Parse what was typed back into addresses.
+ *
+ * Accepts "Name <a@b>" as well as bare addresses, because both are what
+ * people paste.
+ *
+ * @param   {string} text
+ * @returns {{name: string, address: string}[]}
+ */
+function textToAddresses(text) {
+    return String(text ?? '')
+        .split(/[,;]/)
+        .map(part => part.trim())
+        .filter(Boolean)
+        .map(part => {
+            const match = part.match(/^(.*?)\s*<([^>]+)>$/);
+            return match
+                ? {name: match[1].replace(/^["']|["']$/g, '').trim(), address: match[2].trim()}
+                : {name: '', address: part};
+        });
+}
+
+/**
+ * Open a compose window.
+ *
+ * @param   {{draft?: object, base: string, accountId: string, api: Function,
+ *            onSent?: (result: object) => void}} options
+ * @returns {void}
+ */
+/**
+ * Human-readable byte size.
+ *
+ * @param   {number} bytes
+ * @returns {string}
+ */
+function formatSize(bytes) {
+    if (bytes < 1024) return `${bytes} B`;
+    const units = ['KB', 'MB'];
+    let value = bytes / 1024;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+
+import {applyIdentity, findIdentity, identityFrom, swapSignature} from './identity.js';
+import {describeWhen, quickTimes} from './scheduling.js';
+import {applyTemplate, expandTemplate} from './templates.js';
+import {makeResizable} from './resizable.js';
+import {
+    collectGroups,
+    currentFragment,
+    expandGroup,
+    formatRecipient,
+    replaceFragment,
+    suggest
+} from './contacts.js';
+
+/**
+ * Turn plain text into the minimal HTML that preserves its line breaks.
+ *
+ * Used when opening the rich editor on a draft that only has a text version.
+ *
+ * @param   {string} text
+ * @returns {string}
+ */
+function textToHtml(text) {
+    const escaped = String(text ?? '')
+        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return escaped
+        .split(/\n{2,}/)
+        .map(block => `<p>${block.replace(/\n/g, '<br>')}</p>`)
+        .join('');
+}
+
+/**
+ * Read a file as base64, without the data-URL preamble.
+ *
+ * @param   {File} file
+ * @returns {Promise<string>}
+ */
+function readAsBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result).split(',')[1] ?? '');
+        reader.onerror = () => reject(new Error(`${file.name} could not be read.`));
+        reader.readAsDataURL(file);
+    });
+}
+
+/**
+ * Offer contact suggestions on one recipient field.
+ *
+ * Domma's own autocomplete rather than a bespoke dropdown - it already has the
+ * keyboard handling, the positioning and the outside-click close, and three of
+ * those are where a hand-rolled one goes wrong.
+ *
+ * The one thing it does not know is that this field holds a LIST. Its filter
+ * is handed the whole input, and selecting an item replaces the whole input,
+ * so both are re-pointed at the fragment after the last comma.
+ *
+ * @param   {HTMLInputElement} input
+ * @param   {object[]} contacts
+ * @param   {object[]} groups
+ * @returns {object|null} the instance, for teardown
+ */
+function attachSuggestions(input, contacts, groups) {
+    try {
+        // The component assigns its own value to the field BEFORE calling
+        // onSelect, so by then what was typed is gone. Kept here on every
+        // keystroke, which is the only moment it is still true.
+        input.dataset.mailValue = input.value;
+        input.addEventListener('input', () => { input.dataset.mailValue = input.value; });
+
+        return E.autocomplete(input, {
+            minChars: 1,
+            maxResults: 8,
+            // Instant: the list is already in memory, and a delay on local
+            // filtering is a delay for nothing.
+            debounce: 0,
+            emptyMessage: 'No matching contacts',
+            // `dataSource` rather than `data` + `filterFn`, because a filter
+            // is only a predicate: it decides who appears, not in what order,
+            // and the component keeps the address book's own ordering. That
+            // put "rob@samsung-parts.com" above "Sam Archer" for the query
+            // "sam". Returning the list puts the ranking back in charge.
+            //
+            // `query` is the whole field. What is being typed is only ever the
+            // part after the last separator; everything before it is a
+            // recipient already chosen, and so must not be offered twice.
+            dataSource: (query) => {
+                const fragment = currentFragment(query);
+                const chosen = textToAddresses(query.slice(0, query.length - fragment.length))
+                    .map(a => a.address);
+                return suggest(contacts, groups, fragment, {exclude: chosen});
+            },
+            renderItem: entry => {
+                const row = document.createElement('div');
+                row.className = 'mail-suggest-row';
+                const title = document.createElement('span');
+                const detail = document.createElement('span');
+                detail.className = 'text-xs mail-suggest-detail';
+
+                if (entry.kind === 'group') {
+                    // Said plainly, because picking one puts several addresses
+                    // in the field at once and that should not be a surprise.
+                    const count = entry.members.length;
+                    title.textContent = `\u{1F465} ${entry.name}`;
+                    detail.textContent = `Group \u00b7 ${count} ${count === 1 ? 'person' : 'people'}`;
+                } else {
+                    title.textContent = entry.favourite && entry.name
+                        ? `\u2605 ${entry.name}`
+                        : (entry.name || entry.email);
+                    detail.textContent = entry.name ? entry.email : '';
+                }
+
+                row.appendChild(title);
+                if (detail.textContent) row.appendChild(detail);
+                return row;
+            },
+            // The component has already overwritten the field with its own
+            // idea of the value by the time this runs, so this puts the list
+            // back and appends rather than replaces.
+            onSelect: (entry, {target}) => {
+                const before = target.dataset.mailValue ?? '';
+                const fragment = currentFragment(before);
+                const chosen = textToAddresses(before.slice(0, before.length - fragment.length))
+                    .map(a => a.address);
+
+                const replacement = entry.kind === 'group'
+                    ? expandGroup(entry, {exclude: chosen})
+                    : formatRecipient(entry);
+
+                target.value = replaceFragment(before, replacement);
+                target.dataset.mailValue = target.value;
+                target.setSelectionRange(target.value.length, target.value.length);
+            }
+        });
+    } catch {
+        // An older Domma without it, or a shape it does not like. The field is
+        // a plain text input either way.
+        return null;
+    }
+}
+
+export function openCompose({
+    draft: opened = {}, base, accountId, api, maxAttachmentBytes = 20_000_000,
+    onSent = () => {}, onSaved = () => {}, onQueued = () => {}, contacts = [],
+    identities = [], mailboxAddress = '', templates = [], undoSeconds = 0,
+    mode = 'new'
+}) {
+    // How this message was started, decided once. A reopened draft is never
+    // treated as new: it already carries the signature it was written with,
+    // and adding another on reopen is how a draft edited four times goes out
+    // with four.
+    const openedAs = opened.savedUid ? 'edit' : mode;
+
+    /** Which identity is sending. Changeable while the window is open. */
+    let currentIdentity = findIdentity(identities, opened.identityId) ?? null;
+
+    // The one place all four ways of starting a message meet - new, reply,
+    // forward and reopened draft - so it is the one place the signature goes
+    // on. `applyIdentity` decides whether this mode gets one.
+    const draft = applyIdentity(opened, currentIdentity, openedAs);
+
+    /** A time this message should go at, rather than now. */
+    let scheduledAt = null;
+
+    const slideover = E.slideover({
+        title: draft.savedUid
+            ? 'Draft'
+            : (draft.inReplyTo ? 'Reply' : (draft.subject ? 'Forward' : 'New message')),
+        size: 'lg',
+        position: 'right'
+    });
+
+    const form = document.createElement('div');
+    form.className = 'mail-compose-form';
+
+    /**
+     * @param   {string} label
+     * @param   {string} value
+     * @param   {string} [placeholder]
+     * @returns {HTMLInputElement}
+     */
+    function field(label, value, placeholder = '') {
+        const wrap = document.createElement('div');
+        const labelEl = document.createElement('label');
+        labelEl.className = 'form-label';
+        labelEl.textContent = label;
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.className = 'form-input';
+        input.value = value ?? '';
+        input.placeholder = placeholder;
+        wrap.appendChild(labelEl);
+        wrap.appendChild(input);
+        form.appendChild(wrap);
+        return input;
+    }
+
+    // The From picker, and only when there is a choice to make. One identity
+    // is not a choice, and a row saying so on every message is a row nobody
+    // reads.
+    let fromSelect = null;
+    if (identities.length > 1) {
+        const wrap = document.createElement('div');
+        wrap.className = 'form-group';
+        const label = document.createElement('label');
+        label.className = 'form-label';
+        label.textContent = 'From';
+        fromSelect = document.createElement('select');
+        fromSelect.className = 'form-select';
+
+        for (const entry of identities) {
+            const option = document.createElement('option');
+            option.value = entry.id;
+            // The address as it will appear, not the label alone - the label
+            // is what the owner called it and the address is what the
+            // recipient will see, and those are the two different questions
+            // "which of these am I?" asks.
+            const shown = identityFrom(entry, mailboxAddress);
+            option.textContent = entry.label === shown ? shown : `${entry.label} \u2014 ${shown}`;
+            fromSelect.appendChild(option);
+        }
+        fromSelect.value = currentIdentity?.id ?? identities[0].id;
+
+        fromSelect.addEventListener('change', () => {
+            currentIdentity = findIdentity(identities, fromSelect.value);
+            // The signature in the body belongs to whoever was sending a
+            // moment ago. Swapped where it can be found and left alone where
+            // it cannot - see `swapSignature`.
+            if (editor) {
+                const {html, swapped} = swapSignature(editor.getValue(), currentIdentity, openedAs);
+                if (swapped) editor.setValue(html);
+                else if (hasSignatureFor(currentIdentity)) {
+                    E.toast(
+                        'The sender changed, but the signature already in this message was left as it is.',
+                        {type: 'info'}
+                    );
+                }
+            }
+        });
+
+        wrap.appendChild(label);
+        wrap.appendChild(fromSelect);
+        form.appendChild(wrap);
+    }
+
+    /**
+     * Does this identity have a signature that would have been added?
+     *
+     * @param   {object|null} entry
+     * @returns {boolean}
+     */
+    function hasSignatureFor(entry) {
+        return Boolean(entry?.signatureHtml || entry?.signatureText);
+    }
+
+    const toInput = field('To', addressesToText(draft.to), 'someone@example.com');
+    const ccInput = field('Cc', addressesToText(draft.cc));
+    const bccInput = field('Bcc', addressesToText(draft.bcc));
+
+    // Folded away with Cc and Bcc: it belongs with the things most messages
+    // do not need, and a picker sitting permanently above every message
+    // invites fiddling with a setting whose whole meaning is that it is
+    // unusual.
+    const priorityWrap = document.createElement('div');
+    const priorityLabel = document.createElement('label');
+    priorityLabel.className = 'form-label';
+    priorityLabel.textContent = 'Priority';
+    const prioritySelect = document.createElement('select');
+    prioritySelect.className = 'form-select';
+    for (const [value, text] of [['normal', 'Normal'], ['high', 'High'], ['low', 'Low']]) {
+        const option = document.createElement('option');
+        option.value = value;
+        option.textContent = text;
+        prioritySelect.appendChild(option);
+    }
+    prioritySelect.value = ['high', 'low'].includes(draft.priority) ? draft.priority : 'normal';
+    priorityWrap.appendChild(priorityLabel);
+    priorityWrap.appendChild(prioritySelect);
+
+    // A request, not a mechanism. Every client is free to ignore it and many
+    // do, so the hint says so rather than letting someone rely on silence
+    // meaning "not read".
+    const receiptLabel = document.createElement('label');
+    receiptLabel.className = 'form-check mt-2';
+    const receiptInput = document.createElement('input');
+    receiptInput.type = 'checkbox';
+    receiptInput.className = 'form-check-input';
+    receiptInput.checked = draft.readReceipt === true;
+    const receiptText = document.createElement('span');
+    receiptText.className = 'form-check-label';
+    receiptText.textContent = 'Ask for a read receipt';
+    receiptLabel.appendChild(receiptInput);
+    receiptLabel.appendChild(receiptText);
+    const receiptHint = document.createElement('div');
+    receiptHint.className = 'form-help text-xs text-muted';
+    receiptHint.textContent = 'Many mail clients ignore this, or ask the recipient first. No receipt does not mean unread.';
+    priorityWrap.appendChild(receiptLabel);
+    priorityWrap.appendChild(receiptHint);
+
+    form.appendChild(priorityWrap);
+
+    const subjectInput = field('Subject', draft.subject ?? '');
+
+    // Cc and Bcc are folded away until wanted. Most messages use neither, and
+    // two empty fields between the recipient and the subject is two rows of
+    // nothing in the part of the window someone looks at first.
+    //
+    // Opened automatically when the draft already has one, because a reply-all
+    // or a reopened draft with a hidden Cc would be a message quietly going
+    // somewhere the sender cannot see.
+    const ccRow = ccInput.closest('div');
+    const bccRow = bccInput.closest('div');
+    // Opened when the draft already carries any of them, priority included -
+    // a reopened urgent draft with the picker folded away would look ordinary.
+    let extrasOpen = Boolean(
+        draft.cc?.length || draft.bcc?.length || ['high', 'low'].includes(draft.priority)
+            || draft.readReceipt === true
+    );
+
+    const extrasToggle = document.createElement('button');
+    extrasToggle.type = 'button';
+    extrasToggle.className = 'btn btn-sm btn-ghost mail-extras-toggle';
+    const paintExtras = () => {
+        ccRow.hidden = !extrasOpen;
+        bccRow.hidden = !extrasOpen;
+        priorityWrap.hidden = !extrasOpen;
+        extrasToggle.textContent = extrasOpen ? 'Hide Cc and Bcc' : 'Cc / Bcc';
+        extrasToggle.setAttribute('aria-expanded', String(extrasOpen));
+    };
+    extrasToggle.addEventListener('click', () => {
+        extrasOpen = !extrasOpen;
+        paintExtras();
+        if (extrasOpen) ccInput.focus();
+    });
+    // Directly under To, which is where someone reaches for it.
+    toInput.closest('div').appendChild(extrasToggle);
+    paintExtras();
+
+    // Suggest recipients from the Contacts plugin, if this site has it. The
+    // address book is passed in rather than fetched here: the view already
+    // holds it for its own "add sender" action, and two windows open at once
+    // should not mean two requests for the same unchanging list.
+    const suggesters = [];
+    if (contacts.length && typeof E?.autocomplete === 'function') {
+        const groups = collectGroups(contacts);
+        for (const input of [toInput, ccInput, bccInput]) {
+            const suggester = attachSuggestions(input, contacts, groups);
+            if (suggester) suggesters.push(suggester);
+        }
+    }
+
+    const bodyWrap = document.createElement('div');
+    bodyWrap.className = 'mail-compose-body';
+    const bodyLabel = document.createElement('label');
+    bodyLabel.className = 'form-label';
+    bodyLabel.textContent = 'Message';
+    bodyWrap.appendChild(bodyLabel);
+
+    // Canned responses, and only when this mailbox has any. A picker offering
+    // nothing is a picker that has to explain itself.
+    if (templates.length) {
+        const pickerRow = document.createElement('div');
+        pickerRow.className = 'flex items-center gap-2 mail-template-row';
+
+        const picker = document.createElement('select');
+        picker.className = 'form-select form-select-sm mail-template-picker';
+
+        const placeholder = document.createElement('option');
+        placeholder.value = '';
+        placeholder.textContent = 'Insert a template\u2026';
+        picker.appendChild(placeholder);
+
+        for (const template of templates) {
+            const option = document.createElement('option');
+            option.value = template.id;
+            option.textContent = template.name;
+            picker.appendChild(option);
+        }
+
+        picker.addEventListener('change', () => {
+            const chosen = templates.find(t => t.id === picker.value);
+            // Back to the placeholder straight away: the picker is an action,
+            // not a setting, and leaving the last-used one showing reads as
+            // "this message is that template".
+            picker.value = '';
+            if (!chosen) return;
+
+            const expanded = expandTemplate(chosen, {
+                to: textToAddresses(toInput.value),
+                subject: subjectInput.value,
+                identity: currentIdentity,
+                fromAddress: mailboxAddress
+            });
+
+            const current = {
+                subject: subjectInput.value,
+                html: editor ? editor.getValue() : '',
+                body: editor ? editor.getText() : bodyInput.value
+            };
+            const next = applyTemplate(current, expanded);
+
+            subjectInput.value = next.subject;
+            if (editor) editor.setValue(next.html);
+            else bodyInput.value = next.body;
+        });
+
+        const hint = document.createElement('span');
+        hint.className = 'text-xs text-muted';
+        hint.textContent = 'Added above what is already written.';
+
+        pickerRow.appendChild(picker);
+        pickerRow.appendChild(hint);
+        bodyWrap.appendChild(pickerRow);
+    }
+
+    // Domma's own editor, in rich mode. A plain textarea is kept as the
+    // fallback rather than assumed away: the editor is a component that may
+    // not be present in an older Domma, and a compose window that cannot type
+    // is worse than one without bold.
+    const editorHost = document.createElement('div');
+    editorHost.className = 'mail-compose-editor';
+    bodyWrap.appendChild(editorHost);
+
+    const bodyInput = document.createElement('textarea');
+    bodyInput.className = 'form-textarea mail-compose-textarea';
+    bodyInput.value = draft.body ?? '';
+
+    let editor = null;
+    if (typeof E?.editor === 'function') {
+        try {
+            editor = E.editor(editorHost, {mode: 'rich', height: '34vh'});
+            editor.setValue(draft.html || textToHtml(draft.body ?? ''));
+        } catch {
+            editor = null;
+        }
+    }
+    if (!editor) {
+        editorHost.remove();
+        bodyWrap.appendChild(bodyInput);
+    }
+    form.appendChild(bodyWrap);
+
+    // What the window opened showing, read back out of the thing showing it.
+    //
+    // NOT `draft.body`: the editor is seeded from `draft.html` and derives its
+    // own text from that, so the two already differed on every HTML reply -
+    // which is why discarding an untouched reply asked whether to lose
+    // changes nobody had made. A signature makes that worse, since it means
+    // even a new message opens "changed". Comparing against what was actually
+    // put in front of the person is both the fix and the only baseline that
+    // stays true once anything else seeds the body.
+    const openedText = editor ? editor.getText() : bodyInput.value;
+
+    // Attachments
+    // Seeded from the draft, so reopening one keeps the files that were
+    // attached to it - normalised to the picker's shape on the way in. The
+    // server calls the length `size` and the picker calls it `bytes`, and
+    // seeding the server's shape verbatim renders "notes.txt (undefined)" with
+    // a NaN running total. Falling back to the base64 length is the honest
+    // measure anyway: that is what will actually be sent.
+    const attachments = (draft.attachments ?? []).map(file => ({
+        filename: file.filename,
+        contentType: file.contentType,
+        content: file.content,
+        bytes: file.bytes ?? file.size ?? Math.floor(String(file.content ?? '').length * 3 / 4)
+    }));
+
+    const attachRow = document.createElement('div');
+    attachRow.className = 'flex items-center gap-2 flex-wrap';
+
+    const fileInput = document.createElement('input');
+    fileInput.type = 'file';
+    fileInput.multiple = true;
+    fileInput.style.display = 'none';
+
+    const attachBtn = document.createElement('button');
+    attachBtn.className = 'btn btn-sm btn-ghost';
+    attachBtn.textContent = 'Attach files';
+    attachBtn.addEventListener('click', () => fileInput.click());
+
+    const attachTotal = document.createElement('span');
+    attachTotal.className = 'text-xs text-muted';
+
+    attachRow.appendChild(attachBtn);
+    attachRow.appendChild(attachTotal);
+    form.appendChild(attachRow);
+    form.appendChild(fileInput);
+
+    const attachList = document.createElement('div');
+    attachList.className = 'mail-attach-list';
+    form.appendChild(attachList);
+
+    const status = document.createElement('div');
+    status.className = 'text-sm mail-status';
+    form.appendChild(status);
+
+    /**
+     * Say something under the message, in the right colour.
+     *
+     * A class rather than `style.color`: an inline colour cannot read a
+     * `--dm-*` token a theme override redefines, so a status line set that
+     * way stays the same shade in every theme.
+     *
+     * @param   {string} text
+     * @param   {'ok'|'bad'|'quiet'} [tone]
+     * @returns {void}
+     */
+    function say(text, tone = 'quiet') {
+        status.textContent = text ?? '';
+        status.className = 'text-sm mail-status '
+            + ({ok: 'text-success', bad: 'text-danger'}[tone] ?? 'text-muted');
+    }
+
+    /**
+     * Redraw the attachment list and the running total.
+     *
+     * The total is shown as it grows rather than only on send, because being
+     * told a message is too large after writing it is a poor moment to find
+     * out.
+     *
+     * @returns {void}
+     */
+    function paintAttachments() {
+        attachList.textContent = '';
+        const total = attachments.reduce((n, a) => n + a.bytes, 0);
+
+        attachTotal.textContent = attachments.length
+            ? `${attachments.length} file${attachments.length === 1 ? '' : 's'}, ${formatSize(total)} of ${formatSize(maxAttachmentBytes)}`
+            : '';
+        // Red once the total is over the limit, which is the only reason
+        // this number is on screen while a message is being written.
+        attachTotal.className = total > maxAttachmentBytes
+            ? 'text-xs text-danger'
+            : 'text-xs text-muted';
+
+        for (const file of attachments) {
+            const row = document.createElement('div');
+            row.className = 'mail-box-row';
+
+            const name = document.createElement('span');
+            name.className = 'flex-1 text-sm mail-ellipsis';
+            name.textContent = `${file.filename} (${formatSize(file.bytes)})`;
+            row.appendChild(name);
+
+            const remove = document.createElement('button');
+            remove.className = 'btn btn-sm btn-ghost';
+            remove.textContent = 'Remove';
+            remove.addEventListener('click', () => {
+                attachments.splice(attachments.indexOf(file), 1);
+                paintAttachments();
+            });
+            row.appendChild(remove);
+            attachList.appendChild(row);
+        }
+
+        send.disabled = total > maxAttachmentBytes;
+    }
+
+    fileInput.addEventListener('change', async () => {
+        const chosen = [...fileInput.files];
+        fileInput.value = '';
+        for (const file of chosen) {
+            try {
+                attachments.push({
+                    filename: file.name,
+                    contentType: file.type || 'application/octet-stream',
+                    content: await readAsBase64(file),
+                    bytes: file.size
+                });
+            } catch (err) {
+                E.toast(err.message, {type: 'error'});
+            }
+        }
+        paintAttachments();
+    });
+
+    const actions = document.createElement('div');
+    actions.className = 'flex justify-end gap-2';
+
+    // The UID of this draft's previous version, once it has been saved once,
+    // so a second save replaces rather than accumulates.
+    let savedUid = draft.savedUid ?? null;
+
+    const saveDraftBtn = document.createElement('button');
+    saveDraftBtn.className = 'btn btn-sm btn-ghost';
+    saveDraftBtn.textContent = 'Save draft';
+    saveDraftBtn.addEventListener('click', async () => {
+        saveDraftBtn.disabled = true;
+        say('Saving\u2026');
+        try {
+            const params = new URLSearchParams({account: accountId});
+            const result = await api(`${base}/drafts?${params}`, 'POST', {
+                ...collect(),
+                replaces: savedUid
+            });
+            savedUid = result.uid ?? savedUid;
+            say(`Saved to ${result.savedTo}.`, 'ok');
+            // The Drafts folder now holds a different set of UIDs, so a list
+            // showing it is out of date whether or not the window closes.
+            onSaved(result);
+        } catch (err) {
+            say(err.message, 'bad');
+        } finally {
+            saveDraftBtn.disabled = false;
+        }
+    });
+
+    const cancel = document.createElement('button');
+    cancel.className = 'btn btn-sm btn-ghost';
+    cancel.textContent = 'Discard';
+    cancel.addEventListener('click', async () => {
+        // Closing on something half-written should ask, because the window is
+        // the only place that text exists until it is saved.
+        const current = editor ? editor.getText() : bodyInput.value;
+        const changed = subjectInput.value.trim() !== (draft.subject ?? '').trim()
+            || current.trim() !== openedText.trim();
+        // A reopened draft is already saved, so closing it unchanged is not a
+        // loss and should not ask. Changed since opening, it is.
+        //
+        // `changed` is the whole test. A new message that has had a subject
+        // typed into it is already changed, because a new draft opens with an
+        // empty one - so the extra "or the subject is non-empty" clause this
+        // used to carry caught nothing new, and DID catch every reply and
+        // forward, which open with `Re:` / `Fwd:` prefilled and so were
+        // always treated as unsaved work.
+        const unsaved = changed;
+        if (unsaved) {
+            // Two different losses, and saying the wrong one is worse than
+            // saying nothing: one has never been saved, the other has changes
+            // since it was.
+            const question = savedUid
+                ? 'Close without saving? The changes since you opened this draft will be lost.'
+                : 'Discard this message? It has not been saved as a draft.';
+            if (!await E.confirm(question)) return;
+        }
+        slideover.close();
+    });
+
+    /**
+     * The message as it currently stands.
+     *
+     * @returns {object}
+     */
+    function collect() {
+        // Both parts, always: the HTML for clients that render it and the text
+        // for those that do not. Taking the text from the editor rather than
+        // stripping tags means it reads as prose rather than as markup with
+        // the angle brackets removed.
+        const html = editor ? editor.getValue() : null;
+        const text = editor ? editor.getText() : bodyInput.value;
+
+        return {
+            to: textToAddresses(toInput.value),
+            cc: textToAddresses(ccInput.value),
+            bcc: textToAddresses(bccInput.value),
+            priority: prioritySelect.value,
+            readReceipt: receiptInput.checked,
+            // Which of the mailbox's identities is sending. Null where there
+            // is only one, which is what the server reads as "the default".
+            identityId: currentIdentity?.id ?? null,
+            subject: subjectInput.value,
+            body: text,
+            html,
+            inReplyTo: draft.inReplyTo ?? null,
+            references: draft.references ?? [],
+            attachments: attachments.map(({filename, contentType, content}) =>
+                ({filename, contentType, content}))
+        };
+    }
+
+    const send = document.createElement('button');
+    send.className = 'btn btn-sm btn-primary';
+
+    /**
+     * Label the Send button for what it will actually do.
+     *
+     * Three different things wear this button: send now, hold briefly so it
+     * can be taken back, and send at a chosen time. Calling all three "Send"
+     * is how someone finds out about the ten second hold by watching a
+     * message not arrive.
+     *
+     * @returns {void}
+     */
+    function paintSend() {
+        if (scheduledAt) {
+            send.textContent = `Send ${describeWhen(scheduledAt)}`;
+            send.title = new Date(scheduledAt).toLocaleString();
+        } else {
+            send.textContent = 'Send';
+            send.title = undoSeconds > 0
+                ? `Held for ${undoSeconds} seconds so you can take it back.`
+                : '';
+        }
+    }
+
+    /**
+     * Choose a time to send at.
+     *
+     * The quick choices come from the same module the server validates
+     * against, so a time offered here cannot be refused there.
+     *
+     * @returns {void}
+     */
+    function openScheduler() {
+        const panel = document.createElement('div');
+        panel.className = 'flex flex-col gap-2';
+
+        const choices = document.createElement('div');
+        choices.className = 'flex flex-wrap gap-1';
+
+        const modal = E.modal({title: 'Send later', size: 'sm'});
+
+        /**
+         * @param   {string|null} at
+         * @returns {void}
+         */
+        const choose = (at) => {
+            scheduledAt = at;
+            paintSend();
+            modal.close();
+        };
+
+        for (const option of quickTimes()) {
+            const button = document.createElement('button');
+            button.className = 'btn btn-sm btn-ghost';
+            button.textContent = option.label;
+            button.title = new Date(option.at).toLocaleString();
+            button.addEventListener('click', () => choose(option.at));
+            choices.appendChild(button);
+        }
+        panel.appendChild(choices);
+
+        const exactLabel = document.createElement('label');
+        exactLabel.className = 'form-label';
+        exactLabel.textContent = 'Or pick a time';
+        const exact = document.createElement('input');
+        exact.type = 'datetime-local';
+        exact.className = 'form-input';
+        panel.appendChild(exactLabel);
+        panel.appendChild(exact);
+
+        const row = document.createElement('div');
+        row.className = 'flex justify-end gap-2 mt-2';
+
+        if (scheduledAt) {
+            const clear = document.createElement('button');
+            clear.className = 'btn btn-sm btn-ghost';
+            clear.textContent = 'Send normally instead';
+            clear.addEventListener('click', () => choose(null));
+            row.appendChild(clear);
+        }
+
+        const confirm = document.createElement('button');
+        confirm.className = 'btn btn-sm btn-primary';
+        confirm.textContent = 'Use this time';
+        confirm.addEventListener('click', () => {
+            if (!exact.value) return;
+            // `datetime-local` has no zone, so it is read in the browser's -
+            // which is the one the person picking it is in.
+            choose(new Date(exact.value).toISOString());
+        });
+        row.appendChild(confirm);
+        panel.appendChild(row);
+
+        modal.element.appendChild(panel);
+        modal.open();
+    }
+
+    const later = document.createElement('button');
+    later.className = 'btn btn-sm btn-ghost';
+    later.textContent = 'Later\u2026';
+    later.title = 'Send this at a time you choose';
+    later.addEventListener('click', openScheduler);
+
+    send.addEventListener('click', async () => {
+        send.disabled = true;
+        say(scheduledAt ? 'Scheduling\u2026' : 'Sending\u2026');
+
+        try {
+            const params = new URLSearchParams({account: accountId});
+            const result = await api(`${base}/send?${params}`, 'POST', {
+                ...collect(),
+                sendAt: scheduledAt,
+                // So a sent draft does not stay in Drafts. Saved again since
+                // opening, this is the latest version's UID, not the original.
+                replaces: savedUid
+            });
+
+            slideover.close();
+
+            // Three outcomes, three different things to say. A message held
+            // for ten seconds has NOT been sent, and saying it has is how
+            // someone stops trusting the word.
+            if (result.queued) {
+                onQueued(result);
+            } else {
+                // Say where the copy went, or that it did not: a sent message
+                // with no copy is worth knowing about before you look for it
+                // later.
+                E.toast(
+                    result.filedTo
+                        ? `Sent, and copied to ${result.filedTo}.`
+                        : 'Sent. No copy could be filed in Sent.',
+                    {type: result.filedTo ? 'success' : 'warning'}
+                );
+                onSent(result);
+            }
+        } catch (err) {
+            say(err.message, 'bad');
+            send.disabled = false;
+        }
+    });
+
+    actions.appendChild(cancel);
+    actions.appendChild(saveDraftBtn);
+    actions.appendChild(later);
+    actions.appendChild(send);
+    form.appendChild(actions);
+    paintSend();
+
+    slideover.element.appendChild(form);
+    const stopResizing = makeResizable(slideover, {
+        storageKey: 'domma-mail.compose-width',
+        defaultWidth: 700
+    });
+    paintAttachments();
+    slideover.open();
+
+    // A reply already knows who it is going to; a new message does not.
+    setTimeout(() => {
+        if (draft.to?.length) {
+            if (editor) editor.focus();
+            else bodyInput.focus();
+        } else {
+            toInput.focus();
+        }
+    }, 60);
+
+    // The editor is a live component with its own listeners and autosave.
+    slideover.on?.('close', () => {
+        editor?.destroy?.();
+        stopResizing();
+        for (const suggester of suggesters) suggester.destroy?.();
+    });
+}