domma-cms 0.78.0 → 0.79.0

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

@@ -82,6 +82,15 @@ import {
     suggest
 } from './contacts.js';
 
+// Admin helpers by run-time import: a static import of /admin would take the
+// window down on an admin that predates them, so each has a stand-in.
+const toolKit = await import('/admin/js/lib/tool-kit.js').catch(() => ({}));
+const helpPopovers = (await import('/admin/js/lib/help-popover.js').catch(() => ({}))).helpPopovers ?? (() => () => {});
+const openMenuAt = toolKit.openMenuAt ?? ((el) => {
+    const r = el.getBoundingClientRect();
+    el.dispatchEvent(new MouseEvent('contextmenu', {bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window}));
+});
+
 /**
  * Turn plain text into the minimal HTML that preserves its line breaks.
  *
@@ -209,6 +218,98 @@ function attachSuggestions(input, contacts, groups) {
     }
 }
 
+/**
+ * The compose window's markup. Built as a string and parsed into a `<div>` this
+ * module owns, never passed through `setContent` (which strips inputs and
+ * buttons). View state is bound with domma-reactive; the inputs themselves are
+ * read directly, because the editor, the address suggestions and the template
+ * picker all work on the live field.
+ *
+ * No `{{…}}` in the attachment row but the key: Domma's `data-each` compiler
+ * drops the whitespace beside an interpolation, so labels come from JS.
+ */
+const FORM = `
+<div class="mail-compose-form">
+    <div class="form-group" data-bind-hidden="!hasFrom">
+        <label class="form-label">From
+            <span data-help-title="From" data-help="Which of this mailbox's identities sends the message. Changing it swaps the signature in the message for the new one's, where the old signature can still be found unchanged."></span>
+        </label>
+        <select class="form-select" data-ref="from"></select>
+    </div>
+    <div>
+        <label class="form-label">To
+            <span data-help-title="Recipients" data-help="Separate several addresses with commas. Name <address> works as well as a bare address. Start typing to pick from Contacts; a group puts all of its members in at once."></span>
+        </label>
+        <input type="text" class="form-input" data-ref="to" placeholder="someone@example.com">
+        <button type="button" class="btn btn-sm btn-ghost mail-extras-toggle" data-on-click="toggleExtras"
+                data-bind-text="extrasLabel.value" data-bind-aria-expanded="extrasAria.value"></button>
+    </div>
+    <div data-bind-hidden="!extrasOpen.value">
+        <label class="form-label">Cc</label>
+        <input type="text" class="form-input" data-ref="cc">
+    </div>
+    <div data-bind-hidden="!extrasOpen.value">
+        <label class="form-label">Bcc
+            <span data-help="Bcc recipients get the message, but nobody else sees that they did - not even the other Bcc recipients."></span>
+        </label>
+        <input type="text" class="form-input" data-ref="bcc">
+    </div>
+    <div data-bind-hidden="!extrasOpen.value">
+        <label class="form-label">Priority
+            <span data-help="Marks the message as urgent or unimportant in the recipient's mail client. Most show it as a flag or an icon; none sends it any faster."></span>
+        </label>
+        <select class="form-select" data-ref="priority">
+            <option value="normal">Normal</option>
+            <option value="high">High</option>
+            <option value="low">Low</option>
+        </select>
+        <div class="flex items-center gap-1 mt-2">
+            <label class="form-check">
+                <input type="checkbox" class="form-check-input" data-ref="receipt">
+                <span class="form-check-label">Ask for a read receipt</span>
+            </label>
+            <span data-help-title="Read receipts" data-help="A request, not a guarantee. Many mail clients ignore it, or ask the recipient first - so no receipt does not mean the message is unread."></span>
+        </div>
+    </div>
+    <div>
+        <label class="form-label">Subject</label>
+        <input type="text" class="form-input" data-ref="subject">
+    </div>
+    <div class="mail-compose-body">
+        <label class="form-label">Message</label>
+        <div class="flex items-center gap-2 mail-template-row" data-bind-hidden="!hasTemplates">
+            <select class="form-select form-select-sm mail-template-picker" data-ref="template">
+                <option value="">Insert a template…</option>
+            </select>
+            <span data-help-title="Templates" data-help="Canned text from Mail Settings. Choosing one adds it above what is already written, fills in the recipient's name and your own, and sets the subject if it is empty."></span>
+        </div>
+        <div class="mail-compose-editor" data-ref="editor"></div>
+    </div>
+    <div class="flex items-center gap-2 flex-wrap">
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="pickFiles">Attach files</button>
+        <span data-bind-class="attachTone.value" data-bind-text="attachSummary.value"></span>
+        <span data-help-title="Attachments" data-help="The running total is shown as you add files, and turns red over this mailbox's limit - a message that large cannot be sent. Right-click a file (or use its ⋮, or Shift+F10) to remove it."></span>
+    </div>
+    <input type="file" multiple hidden data-ref="files">
+    <div class="mail-attach-list" data-each="attachRows.value key=key"></div>
+    <div data-bind-class="statusClass.value" data-bind-text="statusText.value"></div>
+    <div class="flex justify-end items-center gap-2">
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="saveDraft" data-bind-disabled="saving.value">Save draft</button>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="later" title="Send this at a time you choose">Later…</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="send"
+                data-bind-disabled="cannotSend.value" data-bind-text="sendLabel.value" data-bind-title="sendTitle.value"></button>
+        <span data-help-title="Sending" data-help="Later… sends at a time you choose, and the button then says when. With an undo delay set in Mail Settings, Send holds the message for those seconds so you can take it back; it has not gone until they pass."></span>
+    </div>
+</div>`;
+
+/** One attachment. Only the key is interpolated; see FORM. */
+const ATTACH_ROW = `
+<div class="mail-box-row mail-attach-row" data-key="{{key}}" tabindex="0">
+    <span class="flex-1 text-sm mail-ellipsis" data-bind-text="label"></span>
+    <button type="button" class="btn btn-sm btn-ghost mail-attach-kebab" aria-label="Attachment actions" title="Actions">⋮</button>
+</div>`;
+
 export function openCompose({
     draft: opened = {}, base, accountId, api, maxAttachmentBytes = 20_000_000,
     onSent = () => {}, onSaved = () => {}, onQueued = () => {}, contacts = [],
@@ -229,9 +330,6 @@ export function openCompose({
     // 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'
@@ -240,44 +338,144 @@ export function openCompose({
         position: 'right'
     });
 
-    const form = document.createElement('div');
-    form.className = 'mail-compose-form';
+    const host = document.createElement('div');
+    host.innerHTML = FORM;
+    const form = host.firstElementChild;
+    /** @param {string} name @returns {HTMLElement} */
+    const ref = (name) => form.querySelector(`[data-ref="${name}"]`);
+
+    const fromSelect = ref('from');
+    const toInput = ref('to');
+    const ccInput = ref('cc');
+    const bccInput = ref('bcc');
+    const prioritySelect = ref('priority');
+    const receiptInput = ref('receipt');
+    const subjectInput = ref('subject');
+    const picker = ref('template');
+    const editorHost = ref('editor');
+    const fileInput = ref('files');
+
+    // ---- View state ------------------------------------------------------
+
+    /** A time this message should go at, rather than now. */
+    const scheduledAt = M.observable(null);
+
+    // Cc, Bcc and priority are folded away until wanted. Most messages use
+    // none of them, and empty rows between the recipient and the subject are
+    // rows of nothing in the part of the window someone looks at first.
+    //
+    // Opened when the draft already carries any of them: a reply-all or a
+    // reopened draft with a hidden Cc would be a message quietly going
+    // somewhere the sender cannot see, and a reopened urgent draft with the
+    // picker folded away would look ordinary.
+    const extrasOpen = M.observable(Boolean(
+        draft.cc?.length || draft.bcc?.length || ['high', 'low'].includes(draft.priority)
+            || draft.readReceipt === true
+    ));
+    const extrasLabel = M.observable('');
+    // A string: a bound boolean becomes an empty attribute, and aria-expanded needs "true"/"false".
+    const extrasAria = M.observable('false');
+
+    // Attachments, seeded from the draft so reopening one keeps its files -
+    // 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.
+    let nextKey = 0;
+    const attachments = M.observable((draft.attachments ?? []).map(file => ({
+        key: `a${nextKey++}`,
+        filename: file.filename,
+        contentType: file.contentType,
+        content: file.content,
+        bytes: file.bytes ?? file.size ?? Math.floor(String(file.content ?? '').length * 3 / 4)
+    })));
+    const attachRows = M.observable([]);
+    const attachSummary = M.observable('');
+    const attachTone = M.observable('text-xs text-muted');
+    const overLimit = M.observable(false);
+
+    const statusText = M.observable('');
+    const statusClass = M.observable('text-sm mail-status text-muted');
+    const saving = M.observable(false);
+    const sending = M.observable(false);
+    const cannotSend = M.observable(false);
+    const sendLabel = M.observable('Send');
+    const sendTitle = M.observable('');
+
+    const effects = [
+        M.effect(() => {
+            extrasLabel.value = extrasOpen.value ? 'Hide Cc and Bcc' : 'Cc / Bcc';
+            extrasAria.value = String(extrasOpen.value);
+        }),
+        // 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 - and red once it is over, which is the only reason the
+        // number is on screen at all.
+        M.effect(() => {
+            const list = attachments.value;
+            const total = list.reduce((n, a) => n + a.bytes, 0);
+            overLimit.value = total > maxAttachmentBytes;
+            attachSummary.value = list.length
+                ? `${list.length} file${list.length === 1 ? '' : 's'}, ${formatSize(total)} of ${formatSize(maxAttachmentBytes)}`
+                : '';
+            attachTone.value = overLimit.value ? 'text-xs text-danger' : 'text-xs text-muted';
+            attachRows.value = list.map(a => ({key: a.key, label: `${a.filename} (${formatSize(a.bytes)})`}));
+        }),
+        M.effect(() => {
+            cannotSend.value = sending.value || overLimit.value;
+        }),
+        // Three different things wear the Send 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.
+        M.effect(() => {
+            const at = scheduledAt.value;
+            sendLabel.value = at ? `Send ${describeWhen(at)}` : 'Send';
+            sendTitle.value = at
+                ? new Date(at).toLocaleString()
+                : (undoSeconds > 0 ? `Held for ${undoSeconds} seconds so you can take it back.` : '');
+        })
+    ];
 
     /**
-     * @param   {string} label
-     * @param   {string} value
-     * @param   {string} [placeholder]
-     * @returns {HTMLInputElement}
+     * Say something under the message, in the right colour. A class rather
+     * than `style.color`, so the colour follows the theme.
+     *
+     * @param   {string} text
+     * @param   {'ok'|'bad'|'quiet'} [tone]
+     * @returns {void}
      */
-    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;
+    function say(text, tone = 'quiet') {
+        statusText.value = text ?? '';
+        statusClass.value = 'text-sm mail-status '
+            + ({ok: 'text-success', bad: 'text-danger'}[tone] ?? 'text-muted');
+    }
+
+    // ---- Fields ------------------------------------------------------------
+
+    toInput.value = addressesToText(draft.to);
+    ccInput.value = addressesToText(draft.cc);
+    bccInput.value = addressesToText(draft.bcc);
+    subjectInput.value = draft.subject ?? '';
+    prioritySelect.value = ['high', 'low'].includes(draft.priority) ? draft.priority : 'normal';
+    receiptInput.checked = draft.readReceipt === true;
+
+    /**
+     * 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);
     }
 
     // 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';
-
+    const hasFrom = identities.length > 1;
+    if (hasFrom) {
         for (const entry of identities) {
             const option = document.createElement('option');
             option.value = entry.id;
@@ -286,7 +484,7 @@ export function openCompose({
             // 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}`;
+            option.textContent = entry.label === shown ? shown : `${entry.label} — ${shown}`;
             fromSelect.appendChild(option);
         }
         fromSelect.value = currentIdentity?.id ?? identities[0].id;
@@ -307,104 +505,7 @@ export function openCompose({
                 }
             }
         });
-
-        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
@@ -419,78 +520,46 @@ export function openCompose({
         }
     }
 
-    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 hasTemplates = templates.length > 0;
+    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 hint = document.createElement('span');
-        hint.className = 'text-xs text-muted';
-        hint.textContent = 'Added above what is already written.';
+        const current = {
+            subject: subjectInput.value,
+            html: editor ? editor.getValue() : '',
+            body: editor ? editor.getText() : bodyInput.value
+        };
+        const next = applyTemplate(current, expanded);
 
-        pickerRow.appendChild(picker);
-        pickerRow.appendChild(hint);
-        bodyWrap.appendChild(pickerRow);
-    }
+        subjectInput.value = next.subject;
+        if (editor) editor.setValue(next.html);
+        else bodyInput.value = next.body;
+    });
 
     // 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 ?? '';
@@ -504,124 +573,18 @@ export function openCompose({
             editor = null;
         }
     }
-    if (!editor) {
-        editorHost.remove();
-        bodyWrap.appendChild(bodyInput);
-    }
-    form.appendChild(bodyWrap);
+    if (!editor) editorHost.replaceWith(bodyInput);
 
-
-    // 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;
-    }
+    // ---- Attachments -------------------------------------------------------
 
     fileInput.addEventListener('change', async () => {
         const chosen = [...fileInput.files];
         fileInput.value = '';
+        const added = [];
         for (const file of chosen) {
             try {
-                attachments.push({
+                added.push({
+                    key: `a${nextKey++}`,
                     filename: file.name,
                     contentType: file.type || 'application/octet-stream',
                     content: await readAsBase64(file),
@@ -631,59 +594,25 @@ export function openCompose({
                 E.toast(err.message, {type: 'error'});
             }
         }
-        paintAttachments();
+        if (added.length) attachments.value = [...attachments.peek(), ...added];
     });
 
-    const actions = document.createElement('div');
-    actions.className = 'flex justify-end gap-2';
+    /** @param {string} key */
+    function removeAttachment(key) {
+        attachments.value = attachments.peek().filter(a => a.key !== key);
+    }
+
+    // ---- Draft and close guard ---------------------------------------------
 
     // 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';
-    /**
-     * Save this message to the mailbox's Drafts folder - the button, and what
-     * leaving the screen does with a message that has changed.
-     *
-     * @returns {Promise<object|null>} the server's answer, or null if it failed
-     */
-    async function saveDraft() {
-        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;
-            // Saved is the new baseline: closing now loses nothing.
-            savedSnapshot = snapshot();
-            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);
-            return result;
-        } catch (err) {
-            say(err.message, 'bad');
-            return null;
-        } finally {
-            saveDraftBtn.disabled = false;
-        }
-    }
-    saveDraftBtn.addEventListener('click', () => { saveDraft(); });
-
-    const cancel = document.createElement('button');
-    cancel.className = 'btn btn-sm btn-ghost';
-    cancel.textContent = 'Discard';
     /** What the message says now - compared with the last saved (or opened) state. */
     function snapshot() {
         const current = editor ? editor.getText() : bodyInput.value;
         return JSON.stringify([subjectInput.value.trim(), current.trim(), toInput.value.trim(),
-            ccInput.value.trim(), bccInput.value.trim(), attachments.length]);
+            ccInput.value.trim(), bccInput.value.trim(), attachments.peek().length]);
     }
     let savedSnapshot = null;   // set once the window is built (below)
 
@@ -699,10 +628,6 @@ export function openCompose({
         return savedSnapshot !== null && snapshot() !== savedSnapshot;
     }
 
-    // Discard, the X, Escape and the backdrop all go through slideover.close,
-    // which asks (see the guard at the end) - so this button just closes.
-    cancel.addEventListener('click', () => slideover.close());
-
     /** The question the close guard asks, for what would be lost. */
     function discardQuestion() {
         return savedUid
@@ -710,7 +635,6 @@ export function openCompose({
             : 'Discard this message? It has not been saved as a draft.';
     }
 
-
     /**
      * The message as it currently stands.
      *
@@ -738,36 +662,44 @@ export function openCompose({
             html,
             inReplyTo: draft.inReplyTo ?? null,
             references: draft.references ?? [],
-            attachments: attachments.map(({filename, contentType, content}) =>
+            attachments: attachments.peek().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.
+     * Save this message to the mailbox's Drafts folder - the button, and what
+     * leaving the screen does with a message that has changed.
      *
-     * @returns {void}
+     * @returns {Promise<object|null>} the server's answer, or null if it failed
      */
-    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.`
-                : '';
+    async function saveDraft() {
+        saving.value = true;
+        say('Saving…');
+        try {
+            const params = new URLSearchParams({account: accountId});
+            const result = await api(`${base}/drafts?${params}`, 'POST', {
+                ...collect(),
+                replaces: savedUid
+            });
+            savedUid = result.uid ?? savedUid;
+            // Saved is the new baseline: closing now loses nothing.
+            savedSnapshot = snapshot();
+            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);
+            return result;
+        } catch (err) {
+            say(err.message, 'bad');
+            return null;
+        } finally {
+            saving.value = false;
         }
     }
 
+    // ---- Sending -----------------------------------------------------------
+
     /**
      * Choose a time to send at.
      *
@@ -777,85 +709,62 @@ export function openCompose({
      * @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 panel = document.createElement('div');
+        panel.innerHTML = `
+            <div class="flex flex-col gap-2">
+                <div class="flex flex-wrap gap-1" data-ref="choices"></div>
+                <label class="form-label">Or pick a time</label>
+                <input type="datetime-local" class="form-input" data-ref="exact">
+                <div class="flex justify-end gap-2 mt-2">
+                    <button type="button" class="btn btn-sm btn-ghost" data-ref="clear" hidden>Send normally instead</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-ref="use">Use this time</button>
+                </div>
+            </div>`;
+        const pick = (name) => panel.querySelector(`[data-ref="${name}"]`);
+
+        /** @param {string|null} at */
         const choose = (at) => {
-            scheduledAt = at;
-            paintSend();
+            scheduledAt.value = at;
             modal.close();
         };
 
         for (const option of quickTimes()) {
             const button = document.createElement('button');
+            button.type = '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);
+            pick('choices').appendChild(button);
         }
 
-        const confirm = document.createElement('button');
-        confirm.className = 'btn btn-sm btn-primary';
-        confirm.textContent = 'Use this time';
-        confirm.addEventListener('click', () => {
+        const clear = pick('clear');
+        clear.hidden = !scheduledAt.peek();
+        clear.addEventListener('click', () => choose(null));
+
+        const exact = pick('exact');
+        pick('use').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');
+    async function send() {
+        const at = scheduledAt.peek();
+        sending.value = true;
+        say(at ? 'Scheduling…' : 'Sending…');
 
         try {
             const params = new URLSearchParams({account: accountId});
             const result = await api(`${base}/send?${params}`, 'POST', {
                 ...collect(),
-                sendAt: scheduledAt,
+                sendAt: at,
                 // 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
@@ -882,23 +791,67 @@ export function openCompose({
             }
         } catch (err) {
             say(err.message, 'bad');
-            send.disabled = false;
+            sending.value = false;
+        }
+    }
+
+    // ---- Bind --------------------------------------------------------------
+
+    // Rows and help markers before binding: data-each needs its row template
+    // in place, and helpPopovers needs the markers where they will stay.
+    form.querySelector('.mail-attach-list').innerHTML = ATTACH_ROW;
+    const stopHelp = helpPopovers(form, {position: 'bottom'});
+
+    const bindings = M.applyBindings({
+        hasFrom, hasTemplates, extrasOpen, extrasLabel, extrasAria, attachRows, attachSummary, attachTone,
+        statusText, statusClass, saving, cannotSend, sendLabel, sendTitle
+    }, form, {
+        methods: {
+            toggleExtras: () => {
+                extrasOpen.value = !extrasOpen.peek();
+                if (extrasOpen.peek()) ccInput.focus();
+            },
+            pickFiles: () => fileInput.click(),
+            // Discard, the X, Escape and the backdrop all go through
+            // slideover.close, which asks (see the guard below).
+            discard: () => { slideover.close(); },
+            saveDraft: () => { saveDraft(); },
+            later: () => openScheduler(),
+            send: () => { send(); }
         }
     });
 
-    actions.appendChild(cancel);
-    actions.appendChild(saveDraftBtn);
-    actions.appendChild(later);
-    actions.appendChild(send);
-    form.appendChild(actions);
-    paintSend();
+    // Attachment actions: right-click, the ⋮, Shift+F10 or Delete on a row.
+    const attachList = form.querySelector('.mail-attach-list');
+    const attachMenu = typeof E?.contextMenu === 'function'
+        ? E.contextMenu(attachList, {
+            cursor: 'glyph', match: '.mail-attach-row', inherit: false, density: 'compact',
+            items: (row) => [
+                {label: 'Remove', icon: 'x', action: () => removeAttachment(row.dataset.key)},
+                {type: 'divider'},
+                {label: 'Remove all attachments', icon: 'trash', danger: true,
+                    action: () => { attachments.value = []; }}
+            ]
+        })
+        : null;
+    const onAttachClick = (e) => {
+        const kebab = e.target.closest('.mail-attach-kebab');
+        if (kebab) openMenuAt(kebab);
+    };
+    const onAttachKey = (e) => {
+        const row = e.target.closest('.mail-attach-row');
+        if (!row || e.target !== row) return;
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+        else if (e.key === 'Delete') { e.preventDefault(); removeAttachment(row.dataset.key); }
+    };
+    attachList.addEventListener('click', onAttachClick);
+    attachList.addEventListener('keydown', onAttachKey);
 
     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.
@@ -952,6 +905,12 @@ export function openCompose({
         editor?.destroy?.();
         stopResizing();
         for (const suggester of suggesters) suggester.destroy?.();
+        bindings?.dispose?.();
+        effects.forEach(stop => { try { stop(); } catch { /* gone */ } });
+        attachMenu?.destroy?.();
+        attachList.removeEventListener('click', onAttachClick);
+        attachList.removeEventListener('keydown', onAttachKey);
+        try { stopHelp?.(); } catch { /* gone */ }
         closedListeners.splice(0).forEach(fn => { try { fn(); } catch { /* ignore */ } });
         // Domma hides a closed slideover rather than removing it: every message
         // written would otherwise leave its window behind in the page.