domma-cms 1.6.55 → 1.6.57

package/plugins/_lib/admin/mail/reader-view.js

@@ -53,6 +53,12 @@ const {describeWhen, quickTimes} = await import(versioned('scheduling.js'));
 // Sign in with Microsoft / Google (Email Pro). Optional: an older copy of this
 // directory without it must not take the reader down.
 const {describeSignIn, mountSignIn} = await import(versioned('oauth-panel.js')).catch(() => ({}));
+const {
+    esc, mailboxDraftsKey, mailboxDraftId, mailboxDraftData, mailboxFingerprint, normaliseDraftMap,
+    pruneDraftMap, mailboxDraftDecision, mailboxRestoreQuestion, RESTORE_BUTTONS, settingsDiscardQuestion,
+    onceOnly, accountMenuModel, folderReadMenuModel, mailboxRowMenuModel, menuItems, sidebarUrl, hasNewMail,
+    holdEscapeOn
+} = await import(versioned('reader-kit.js'));
 
 /**
  * Call a plugin route, returning parsed JSON.
@@ -137,6 +143,24 @@ 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}));
 });
+/**
+ * E.prompt with a starting value. Domma's `inputValue` goes into an attribute
+ * through its sanitiser and is cut at the first `"` (and `{value}`, which this
+ * view used to pass, is not an option at all) - core's promptWith sets the
+ * input's .value after the dialog is built.
+ */
+const promptWith = toolKit.promptWith ?? ((message, options, value) => {
+    const answer = E.prompt(message, options);
+    const input = [...document.querySelectorAll('.dm-dialog-input')].at(-1);
+    if (input) input.value = String(value ?? '');
+    return answer;
+});
+/** Tell the sidebar a Tool's badge may have moved (core's, or the same event). */
+const sidebarCount = toolKit.sidebarCount ?? ((url) => {
+    try { window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url}})); } catch { /* no sidebar */ }
+});
+/** Skeletons while a list's first load runs - core's helper, absent on an older admin. */
+const loading = await import('/admin/js/lib/loading.js').catch(() => null);
 
 /**
  * Human-readable byte size.
@@ -516,44 +540,150 @@ return {
          * removing it.
          */
         const openPanels = new Set();
+        /** Panels that open once at a time, each released when it closes. */
+        const settingsOnce = onceOnly();
+        const mailboxFormOnce = onceOnly();
+        const outboxOnce = onceOnly();
+        const shortcutsOnce = onceOnly();
+        const dialogOnce = onceOnly();
 
         /**
          * Guard a slideover: asks once before a close would throw away typed
          * changes (Cancel, the X, Escape, the backdrop all call close()), and
          * goes straight through after that - a later close() from cleanup must
-         * not ask again. No draft: these forms hold passwords.
+         * not ask again. A forced close (the screen being left) never asks:
+         * whatever is worth keeping is already in a draft.
+         *
+         * Cancel, Escape and the backdrop all answer "keep editing" - E.confirm
+         * cannot tell them apart - so OK is the one that discards.
          *
          * @param {object}   slideover
          * @param {Function} [dirty] - () => boolean
-         * @param {string}   [question]
+         * @param {string|Function} [question] - plain text (escaped here), or () => text
+         * @param {Function} [onClosed]
+         * @param {{onDiscard?: Function, confirmText?: string, cancelText?: string}} [options]
+         *        `onDiscard` runs once the person has agreed to lose the changes
          * @returns {object} the slideover
          */
-        function guardPanel(slideover, dirty = () => false, question = 'Discard the changes you have made?', onClosed = () => {}) {
+        function guardPanel(slideover, dirty = () => false, question = 'Discard the changes you have made?',
+            onClosed = () => {}, {onDiscard = () => {}, confirmText = 'Discard', cancelText = 'Keep editing'} = {}) {
             const rawClose = slideover.close.bind(slideover);
             let closed = false;
             let asking = false;
+            // Escape belongs to the top panel: the ones already open under
+            // this one stop answering it until this one has gone. Taken when
+            // it OPENS, not here - a panel whose building throws before
+            // open() must not leave the ones below deaf to Escape.
+            let releaseBelow = () => {};
+            const rawOpen = slideover.open.bind(slideover);
+            slideover.open = (...args) => {
+                if (!closed && !openPanels.has(slideover)) {
+                    releaseBelow = holdEscapeBelow();
+                    openPanels.add(slideover);
+                }
+                return rawOpen(...args);
+            };
+            /**
+             * Give up on a panel that failed before it opened: nothing held,
+             * nothing tracked, nothing left in the page.
+             */
+            slideover.__mailAbandon = () => {
+                closed = true;
+                openPanels.delete(slideover);
+                releaseBelow();
+                try { onClosed(); } catch { /* it never opened */ }
+                try { slideover.destroy?.(); } catch { /* gone */ }
+                try { slideover.element?.remove(); } catch { /* gone */ }
+            };
             slideover.close = async (force) => {
                 if (!closed && force !== true && dirty()) {
                     if (asking) return undefined;
                     asking = true;
-                    const ok = await E.confirm(question);
-                    asking = false;
+                    let ok = false;
+                    try {
+                        const text = typeof question === 'function' ? question() : question;
+                        ok = await ask(esc(text), {confirmText, cancelText});
+                    } finally {
+                        asking = false;
+                    }
                     if (!ok) return undefined;
+                    try { onDiscard(); } catch { /* the close still goes ahead */ }
                 }
                 if (closed) return undefined;
                 closed = true;
                 return rawClose();
             };
-            openPanels.add(slideover);
             whenClosed(slideover, () => {
                 closed = true;
                 openPanels.delete(slideover);
-                onClosed();
+                // After the key press that closed it has finished travelling -
+                // the panel below may still be about to hear the same Escape.
+                setTimeout(releaseBelow, 0);
+                try { onClosed(); } catch { /* the panel is going regardless */ }
                 setTimeout(() => { try { slideover.element?.remove(); } catch { /* gone */ } }, 400);
             });
             return slideover;
         }
 
+        /**
+         * A Domma modal this view opened: closed when the screen goes, and
+         * taken out of the page once closed (a closed `<domma-modal>` stays
+         * in the document otherwise, one per use).
+         *
+         * @param   {object} modal - from E.modal
+         * @param   {Function} [onClosed]
+         * @returns {object} the modal
+         */
+        function trackModal(modal, onClosed = () => {}) {
+            const entry = {close: () => { try { modal.close(); } catch { /* gone */ } }};
+            const releaseBelow = holdEscapeBelow();
+            openPanels.add(entry);
+            whenClosed(modal, () => {
+                openPanels.delete(entry);
+                setTimeout(releaseBelow, 0);
+                try { onClosed(); } catch { /* going regardless */ }
+                setTimeout(() => { try { modal.element?.remove(); } catch { /* gone */ } }, 400);
+            });
+            return modal;
+        }
+
+        /**
+         * E.confirm, answered "Cancel" for you if the screen is left while it
+         * is open - so it does not linger over the next screen, and a caller
+         * checking here() afterwards does nothing. Ask so that Cancel is never
+         * the destructive answer: Escape and the backdrop answer the same.
+         * The text is the caller's to escape (see esc()).
+         *
+         * @param   {string} html
+         * @param   {object} [options]
+         * @returns {Promise<boolean>}
+         */
+        async function ask(html, options = {}) {
+            // Escape answers the question; it must not close the panel too.
+            const releaseBelow = holdEscapeBelow();
+            const before = new Set(document.querySelectorAll('.dm-dialog-cancel'));
+            const answer = E.confirm(html, options);
+            const cancel = [...document.querySelectorAll('.dm-dialog-cancel')].find(b => !before.has(b));
+            const dismiss = () => { try { cancel?.click(); } catch { /* gone */ } };
+            const stop = lifetime.add(dismiss);
+            try {
+                return Boolean(await answer);
+            } finally {
+                if (typeof stop === 'function') stop();
+                setTimeout(releaseBelow, 0);
+            }
+        }
+
+        /**
+         * Hold Escape on every panel open right now (see holdEscapeOn).
+         *
+         * @returns {() => void} release them all
+         */
+        function holdEscapeBelow() {
+            const releases = [...openPanels].map(panel => holdEscapeOn(panel?.options ? panel : null));
+            return () => releases.forEach(release => release());
+        }
+
         const onBeforeUnload = (event) => {
             if ([...composeHandles].some(h => h.dirty?.())) { event.preventDefault(); event.returnValue = ''; }
         };
@@ -671,6 +801,31 @@ return {
             Domma.icons.scan(el);
         }
 
+        /**
+         * Wait for `work` with a skeleton at the foot of `host` - core's
+         * whileLoading (nothing for a quick answer, no flicker, gone on an
+         * error, which is rethrown). The slot is a plain BLOCK made for the
+         * occasion and taken out after: a flex row would collapse the
+         * skeleton to a sliver. An admin without the helper just waits.
+         *
+         * @param   {HTMLElement} host
+         * @param   {Function} work - returns a promise
+         * @param   {string} [shape] - a key of core's SHAPES
+         * @returns {Promise<*>}
+         */
+        async function withSkeleton(host, work, shape = 'rows') {
+            if (!host || typeof loading?.whileLoading !== 'function') return work();
+            const slot = document.createElement('div');
+            slot.className = 'mail-loading-slot';
+            slot.textContent = 'Loading\u2026';
+            host.appendChild(slot);
+            try {
+                return await loading.whileLoading(slot, work, loading.SHAPES?.[shape] ?? loading.SHAPES?.rows);
+            } finally {
+                slot.remove();
+            }
+        }
+
         /**
          * Surface an error in the right place: a missing mailbox or an
          * unopenable password are setup problems, everything else is a toast.
@@ -756,15 +911,43 @@ return {
          * @returns {void}
          */
         function openSettings() {
+            // One at a time: a second click, or a needs-password error while
+            // it is open, must not stack a second panel on the first.
+            if (!settingsOnce.claim()) return;
+            let panel = null;
+            try {
+                buildSettings((so) => { panel = so; });
+            } catch (err) {
+                // Failed before it opened: let go of everything it took.
+                panel?.__mailAbandon?.();
+                settingsOnce.release();
+                E.toast(err.message || 'Mail settings could not be opened.', {type: 'error'});
+            }
+        }
+
+        /** @returns {void} */
+        function buildSettings(made = () => {}) {
             // Help popovers per drawn section, let go when the panel closes.
             const helpDisposers = [];
-            // Each section saves on its own button, so the panel itself has
-            // nothing to lose - guarded only to be closed with the screen.
+            // What sections registered through ctx.guard / ctx.onClose.
+            const guards = new Set();
+            const closeFns = new Set();
+            const dirtyGuards = () => [...guards].filter(g => { try { return Boolean(g.dirty?.()); } catch { return false; } });
+            // Each section saves on its own button; the panel asks only for
+            // sections that said (ctx.guard) they hold unsaved work.
             const slideover = guardPanel(E.slideover({title: 'Mail Settings', size: 'lg', position: 'right'}),
-                () => false, undefined, () => {
-                    stopSettingsResize();
+                () => dirtyGuards().length > 0,
+                () => settingsDiscardQuestion(dirtyGuards().map(g => g.label)),
+                () => {
+                    settingsOnce.release();
+                    try { stopSettingsResize(); } catch { /* never made: the build failed first */ }
                     helpDisposers.splice(0).forEach(fn => { try { fn?.(); } catch { /* gone */ } });
-                });
+                    for (const fn of [...closeFns]) { try { fn(); } catch { /* one failing must not stop the rest */ } }
+                    closeFns.clear();
+                    guards.clear();
+                },
+                {onDiscard: () => { for (const g of dirtyGuards()) { try { g.discard?.(); } catch { /* gone */ } } }});
+            made(slideover);
             // Settings has tables of mailboxes and folder lists in it, so the
             // width someone wants depends on their screen - the same reason
             // compose is resizable. Its own remembered width, because the two
@@ -835,6 +1018,32 @@ return {
                     assetVersion,
                     field,
                     close: () => slideover.close(),
+                    /**
+                     * Ask before the panel closes over this section's unsaved
+                     * work. One question names every section that has some;
+                     * OK runs each one's `discard`. A forced close (the screen
+                     * being left) never asks - keep a draft for that.
+                     *
+                     * @param   {{label: string, dirty: Function, discard?: Function}} guard
+                     * @returns {Function} remove it
+                     */
+                    guard(guard) {
+                        if (!guard || typeof guard.dirty !== 'function') return () => {};
+                        guards.add(guard);
+                        return () => guards.delete(guard);
+                    },
+                    /**
+                     * Run `fn` once when the settings panel closes, however it
+                     * closes (and when the screen is left).
+                     *
+                     * @param   {Function} fn
+                     * @returns {Function} cancel it
+                     */
+                    onClose(fn) {
+                        if (typeof fn !== 'function') return () => {};
+                        closeFns.add(fn);
+                        return () => closeFns.delete(fn);
+                    },
                     /**
                      * @param {{reload?: boolean}} [options]
                      * @returns {Promise<void>}
@@ -937,33 +1146,188 @@ return {
         /**
          * The mailbox list: what the free edition's settings consist of.
          *
+         * One menu for the rows - right-click a row, its ⋮, or Shift+F10 on
+         * it - and Enter on a row edits it, the row's main action. Registered
+         * on the section rather than the rows, because the rows are redrawn
+         * whenever the default changes.
+         *
          * @param   {HTMLElement} container
+         * @param   {object} [ctx] - the section context
          * @returns {void}
          */
-        function renderMailboxSection(container) {
-            container.appendChild(mailboxSectionBody());
+        function renderMailboxSection(container, ctx = null) {
+            let body = mailboxSectionBody(redraw);
+            container.appendChild(body);
+
+            /** Rebuild the rows, keeping focus on the same mailbox where it can. */
+            function redraw() {
+                const focused = document.activeElement?.closest?.('.mail-box-row')?.dataset.id ?? null;
+                const next = mailboxSectionBody(redraw);
+                body.replaceWith(next);
+                body = next;
+                Domma.icons.scan(body);
+                if (focused) body.querySelector(`.mail-box-row[data-id="${CSS.escape(focused)}"]`)?.focus();
+            }
+
+            const rowOf = (el) => {
+                const row = el?.closest?.('.mail-box-row');
+                return row && container.contains(row) ? row : null;
+            };
+            const boxOf = (row) => mailboxes.find(b => b.id === row?.dataset.id) ?? null;
+
+            const elements = (typeof E !== 'undefined' && E?.contextMenu) ? E
+                : (typeof Domma !== 'undefined' ? Domma?.elements : null);
+            let menu = null;
+            if (typeof elements?.contextMenu === 'function') {
+                menu = elements.contextMenu(container, {
+                    match: '.mail-box-row',
+                    inherit: false,
+                    items: [],
+                    onBeforeOpen: (c) => {
+                        const box = boxOf(rowOf(c?.target));
+                        if (!box) return false;
+                        menu.setItems(mailboxRowItems(box, redraw));
+                        return true;
+                    }
+                });
+            }
+            const onKey = (event) => {
+                const row = rowOf(event.target);
+                if (!row) return;
+                if (event.key === 'F10' && event.shiftKey) {
+                    event.preventDefault();
+                    openMenuAt(row.querySelector('.mail-row-more') ?? row);
+                } else if (event.key === 'Enter' && event.target === row) {
+                    event.preventDefault();
+                    const box = boxOf(row);
+                    if (box) openMailboxForm(box);
+                } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && event.target === row) {
+                    const rows = [...container.querySelectorAll('.mail-box-row')];
+                    const next = rows[rows.indexOf(row) + (event.key === 'ArrowDown' ? 1 : -1)];
+                    if (next) { event.preventDefault(); next.focus(); }
+                }
+            };
+            container.addEventListener('keydown', onKey);
+            // Saved, removed or connected elsewhere (the form, the folder
+            // pane's menu): the rows follow.
+            mailboxRedraws.add(redraw);
+            ctx?.onClose?.(() => {
+                mailboxRedraws.delete(redraw);
+                container.removeEventListener('keydown', onKey);
+                try { menu?.destroy?.(); } catch { /* gone */ }
+            });
+        }
+
+        /** Mailbox sections on screen, redrawn when the list changes. */
+        const mailboxRedraws = new Set();
+        /** The mailbox list changed: redraw whichever Settings rows are showing. */
+        function mailboxesChanged() {
+            for (const redraw of [...mailboxRedraws]) { try { redraw(); } catch { /* gone */ } }
+        }
+
+        /**
+         * One mailbox row's menu.
+         *
+         * @param   {object} box
+         * @param   {Function} redraw
+         * @returns {object[]}
+         */
+        function mailboxRowItems(box, redraw) {
+            return menuItems(mailboxRowMenuModel({isDefault: box.isDefault === true, count: mailboxes.length}), {
+                edit: () => openMailboxForm(box),
+                open: () => openMailboxInReader(box),
+                default: () => toggleDefaultMailbox(box, redraw),
+                remove: () => removeMailbox(box, redraw)
+            });
+        }
+
+        /**
+         * Show a mailbox in the reader, closing Settings to do it.
+         *
+         * @param   {object} box
+         * @returns {Promise<void>}
+         */
+        async function openMailboxInReader(box) {
+            for (const panel of [...openPanels]) { try { await panel.close(); } catch { /* gone */ } }
+            if (!here()) return;
+            if (box.id !== currentAccountId) await selectAccount(box.id);
+        }
+
+        /**
+         * Make a mailbox the default, or stop it being one.
+         *
+         * @param   {object} box
+         * @param   {Function} [redraw]
+         * @returns {Promise<void>}
+         */
+        async function toggleDefaultMailbox(box, redraw = () => {}) {
+            try {
+                await api(`${BASE}/accounts/${encodeURIComponent(box.id)}/default`, 'PUT',
+                    {isDefault: !box.isDefault});
+                const list = (await api(`${BASE}/accounts`)).accounts;
+                if (!here()) return;
+                mailboxes = list;
+                renderFolders();
+                redraw();
+                mailboxesChanged();
+                E.toast(box.isDefault ? 'Default cleared.' : `"${box.label}" is now the default.`,
+                    {type: 'success'});
+            } catch (err) {
+                if (here()) E.toast(err.message, {type: 'error'});
+            }
+        }
+
+        /**
+         * Forget a mailbox, after asking.
+         *
+         * @param   {object} box
+         * @param   {Function} [redraw]
+         * @returns {Promise<void>}
+         */
+        async function removeMailbox(box, redraw = () => {}) {
+            // The label is the person's own text, and E.confirm renders HTML.
+            const ok = await ask(esc(`Remove "${box.label}"? The stored password is deleted, and so is anything unsaved in its form.`),
+                {title: 'Remove mailbox', confirmText: 'Remove', cancelText: 'Keep it'});
+            if (!ok || !here()) return;
+            try {
+                await api(`${BASE}/accounts/${encodeURIComponent(box.id)}`, 'DELETE');
+                writeMailboxDraft(box.id, null);
+                E.toast('Mailbox removed.', {type: 'success'});
+                refreshBadge();
+                if (currentAccountId === box.id) currentAccountId = null;
+                await start();
+                if (here()) { redraw(); mailboxesChanged(); }
+            } catch (err) {
+                if (here()) E.toast(err.message, {type: 'error'});
+            }
         }
 
         /**
          * The mailbox rows and the Add button, rebuilt whole when the
-         * default changes so the order matches the folder pane.
+         * default changes so the order matches the folder pane. Each row is a
+         * card a keyboard can reach, with its own ⋮.
          *
+         * @param   {Function} redraw
          * @returns {HTMLElement}
          */
-        function mailboxSectionBody() {
+        function mailboxSectionBody(redraw) {
             const body = document.createElement('div');
             body.className = 'flex flex-col gap-2';
 
             if (!mailboxes.length) {
                 const empty = document.createElement('p');
                 empty.className = 'text-sm text-muted mail-empty-line';
-                empty.textContent = 'No mailboxes yet.';
+                empty.textContent = 'No mailboxes yet. Add one to read its mail here.';
                 body.appendChild(empty);
             }
 
             for (const box of mailboxes) {
                 const row = document.createElement('div');
                 row.className = 'mail-box-row';
+                row.dataset.id = box.id;
+                row.tabIndex = 0;
+                row.setAttribute('aria-label', `${box.label} - Enter to edit, Shift+F10 for actions`);
+                row.title = 'Right-click, ⋮ or Shift+F10 for actions';
 
                 const info = document.createElement('div');
                 info.className = 'flex-1 mail-ellipsis';
@@ -976,12 +1340,18 @@ return {
                     badge.textContent = 'Default';
                     name.appendChild(badge);
                 }
+                if (box.id === currentAccountId && mailboxes.length > 1) {
+                    const open = document.createElement('span');
+                    open.className = 'badge badge-secondary mail-default-badge';
+                    open.textContent = 'Open';
+                    name.appendChild(open);
+                }
                 const sub = document.createElement('div');
                 sub.className = 'text-xs text-muted mail-box-sub';
                 const signIn = describeSignIn?.(box) ?? null;
                 sub.textContent = signIn
-                    ? `${box.username} \u00b7 ${box.oauth.provider === 'google' ? 'Google' : 'Microsoft'} sign-in`
-                    : `${box.username} \u00b7 ${box.host}:${box.port}${box.secure ? '' : ' (no TLS)'}`;
+                    ? `${box.username} · ${box.oauth.provider === 'google' ? 'Google' : 'Microsoft'} sign-in`
+                    : `${box.username} · ${box.host}:${box.port}${box.secure ? '' : ' (no TLS)'}`;
                 if (signIn && signIn.tone !== 'ok') {
                     const chip = document.createElement('span');
                     chip.className = `badge mail-oauth-chip mail-oauth-chip--${signIn.tone}`;
@@ -989,78 +1359,187 @@ return {
                     chip.title = signIn.text;
                     name.appendChild(chip);
                 }
+                if (readMailboxDraft(box.id)) {
+                    const chip = document.createElement('span');
+                    chip.className = 'badge badge-warning mail-default-badge';
+                    chip.textContent = 'Unsaved changes';
+                    chip.title = 'You left changes to this mailbox unsaved - Edit to pick them up or throw them away';
+                    name.appendChild(chip);
+                }
                 info.appendChild(name);
                 info.appendChild(sub);
                 row.appendChild(info);
 
                 const editBtn = document.createElement('button');
+                editBtn.type = 'button';
                 editBtn.className = 'btn btn-sm btn-ghost';
                 editBtn.textContent = 'Edit';
                 editBtn.addEventListener('click', () => openMailboxForm(box));
+                row.appendChild(editBtn);
 
-                const removeBtn = document.createElement('button');
-                removeBtn.className = 'btn btn-sm btn-ghost';
-                removeBtn.classList.add('text-danger');
-                removeBtn.textContent = 'Remove';
-                removeBtn.addEventListener('click', async () => {
-                    if (!await E.confirm(`Remove "${box.label}"? The stored password is deleted.`)) return;
-                    try {
-                        await api(`${BASE}/accounts/${encodeURIComponent(box.id)}`, 'DELETE');
-                        E.toast('Mailbox removed.', {type: 'success'});
-                        if (currentAccountId === box.id) currentAccountId = null;
-                        await start();
-                        row.remove();
-                    } catch (err) {
-                        E.toast(err.message, {type: 'error'});
-                    }
-                });
-
-                // Only worth offering when there is a choice to make.
-                if (mailboxes.length > 1) {
-                    const defaultBtn = document.createElement('button');
-                    defaultBtn.className = 'btn btn-sm btn-ghost';
-                    defaultBtn.textContent = box.isDefault ? 'Unset default' : 'Make default';
-                    defaultBtn.title = box.isDefault
-                        ? 'Stop opening with this mailbox'
-                        : 'List this mailbox first and open with it';
-                    defaultBtn.addEventListener('click', async () => {
-                        try {
-                            await api(`${BASE}/accounts/${encodeURIComponent(box.id)}/default`, 'PUT',
-                                {isDefault: !box.isDefault});
-                            mailboxes = (await api(`${BASE}/accounts`)).accounts;
-                            renderFolders();
-                            body.replaceWith(mailboxSectionBody());
-                            E.toast(box.isDefault ? 'Default cleared.' : `"${box.label}" is now the default.`,
-                                {type: 'success'});
-                        } catch (err) {
-                            E.toast(err.message, {type: 'error'});
-                        }
-                    });
-                    row.appendChild(defaultBtn);
-                }
+                const more = document.createElement('button');
+                more.type = 'button';
+                more.className = 'btn btn-sm btn-ghost mail-row-more';
+                more.title = 'More actions';
+                more.setAttribute('aria-label', 'More actions');
+                more.setAttribute('aria-haspopup', 'menu');
+                const glyph = document.createElement('span');
+                glyph.setAttribute('data-icon', 'more-vertical');
+                glyph.setAttribute('data-icon-size', '14');
+                more.appendChild(glyph);
+                more.addEventListener('click', () => openMenuAt(more));
+                row.appendChild(more);
 
-                row.appendChild(editBtn);
-                row.appendChild(removeBtn);
                 body.appendChild(row);
             }
 
             const addBtn = document.createElement('button');
+            addBtn.type = 'button';
             addBtn.className = 'btn btn-sm btn-primary';
             addBtn.classList.add('mail-add-btn');
-            addBtn.textContent = 'Add mailbox';
+            addBtn.textContent = readMailboxDraft(null) ? 'Add mailbox (unsaved changes)' : 'Add mailbox';
             addBtn.addEventListener('click', () => openMailboxForm(null));
             body.appendChild(addBtn);
+            Domma.icons.scan(body);
 
             return body;
         }
 
+        // ---- The mailbox form's kept draft --------------------------------
+        //
+        // Label, server, port, TLS and username - NEVER the password, which
+        // is the one field a draft in browser storage must not hold. Kept
+        // while the form differs from what it opened with, removed when it is
+        // saved or the person agrees to throw it away, and KEPT when the
+        // screen is left with the form open.
+
         /**
-         * Open the add/edit form for one mailbox.
+         * This signed-in user's drafts key - per user, since browser storage
+         * is shared by whoever signs in here. Null (no drafts) without one.
+         *
+         * @returns {string|null}
+         */
+        function draftsKey() {
+            try { return mailboxDraftsKey(S.get('auth_user')?.id); } catch { return null; }
+        }
+
+        /** @returns {Object.<string, object>} */
+        function readMailboxDrafts() {
+            const key = draftsKey();
+            if (!key) return {};
+            try { return normaliseDraftMap(S.get(key)); } catch { return {}; }
+        }
+
+        /**
+         * @param   {string|null} boxId
+         * @returns {object|null}
+         */
+        function readMailboxDraft(boxId) {
+            return readMailboxDrafts()[mailboxDraftId(boxId)] ?? null;
+        }
+
+        /**
+         * Write one draft (null removes it), read-modify-write on a fresh
+         * copy of the map - nothing holds a copy that could be stale.
+         *
+         * @param   {string|null} boxId
+         * @param   {object|null} draft
+         * @returns {void}
+         */
+        function writeMailboxDraft(boxId, draft) {
+            try {
+                const map = readMailboxDrafts();
+                const id = mailboxDraftId(boxId);
+                if (draft) map[id] = draft;
+                else delete map[id];
+                const key = draftsKey();
+                if (!key) return;
+                if (Object.keys(map).length) S.set(key, map);
+                else forgetDrafts();
+            } catch { /* a convenience: the form still works */ }
+        }
+
+        /** No drafts left: take the key out rather than keep an empty map. */
+        function forgetDrafts() {
+            const key = draftsKey();
+            if (!key) return;
+            if (typeof S.remove === 'function') S.remove(key);
+            else S.set(key, {});
+        }
+
+        /** Drop the drafts of mailboxes that no longer exist. */
+        function pruneMailboxDrafts() {
+            try {
+                const map = readMailboxDrafts();
+                const kept = pruneDraftMap(map, mailboxes.map(b => b.id));
+                if (Object.keys(kept).length !== Object.keys(map).length) {
+                    if (Object.keys(kept).length) S.set(draftsKey(), kept);
+                    else forgetDrafts();
+                }
+            } catch { /* ditto */ }
+        }
+
+        /**
+         * Open the add/edit form for one mailbox - once at a time, after
+         * asking about any changes left unsaved last time.
+         *
+         * @param   {object|null} box - null to add
+         * @returns {Promise<void>}
+         */
+        async function openMailboxForm(box) {
+            if (!mailboxFormOnce.claim()) return;
+            let opened = false;
+            try {
+                // Edit the stored version, not the row's copy from whenever the
+                // list was drawn - and judge a kept draft against it.
+                if (box) {
+                    const list = (await api(`${BASE}/accounts`)).accounts;
+                    if (!here()) return;
+                    mailboxes = list;
+                    const fresh = list.find(b => b.id === box.id);
+                    if (!fresh) {
+                        // Removed since (another tab, another device). Its
+                        // unsaved changes have nowhere to go.
+                        writeMailboxDraft(box.id, null);
+                        E.toast(`"${box.label}" has been removed since, so it cannot be edited.`, {type: 'warning'});
+                        renderFolders();
+                        mailboxesChanged();
+                        return;
+                    }
+                    box = fresh;
+                }
+                const kept = readMailboxDraft(box?.id ?? null);
+                const decision = mailboxDraftDecision(kept, box);
+                if (decision.kind === 'drop') writeMailboxDraft(box?.id ?? null, null);
+                let picked = null;
+                if (decision.kind === 'ask') {
+                    // OK throws the changes away; Cancel, Escape and the
+                    // backdrop all keep them. The draft is removed only once
+                    // answered - leaving while asked keeps it for next time.
+                    const throwAway = await ask(esc(mailboxRestoreQuestion({
+                        label: box?.label, at: kept.at, changed: decision.changed, isNew: !box
+                    })), RESTORE_BUTTONS);
+                    if (!here()) return;
+                    if (throwAway) writeMailboxDraft(box?.id ?? null, null);
+                    else picked = kept;
+                }
+                buildMailboxForm(box, picked);
+                opened = true;
+            } catch (err) {
+                if (here()) E.toast(err.message || 'That form could not be opened.', {type: 'error'});
+            } finally {
+                if (!opened) mailboxFormOnce.release();
+            }
+        }
+
+        /**
+         * Draw the add/edit form.
          *
          * @param   {object|null} box - null to add
+         * @param   {{data: object, was: string}|null} restored - a kept draft picked up
          * @returns {void}
          */
-        function openMailboxForm(box) {
+        function buildMailboxForm(box, restored) {
             const slideover = E.slideover({
                 title: box ? 'Edit Mailbox' : 'Add Mailbox',
                 size: 'md',
@@ -1070,6 +1549,9 @@ return {
                 storageKey: 'domma-mail.mailbox-form-width',
                 defaultWidth: 560
             });
+            const draftFor = box?.id ?? null;
+            // NOT `start` - that is the view's own reload, called below.
+            const initial = restored?.data ?? mailboxDraftData(box ?? {});
 
             const form = document.createElement('div');
             form.className = 'mail-form-stack';
@@ -1080,10 +1562,17 @@ return {
             form.appendChild(pwWrap);
             const signedIn = box?.auth === 'oauth';
 
-            const labelInput = field(pwWrap, 'label', 'Name', 'text', box?.label ?? '', 'What to call this mailbox.');
-            const hostInput = field(pwWrap, 'host', 'IMAP server', 'text', box?.host ?? '', 'e.g. mail.example.com');
-            const portInput = field(pwWrap, 'port', 'Port', 'number', String(box?.port ?? 993));
-            const userInput = field(pwWrap, 'username', 'Username', 'text', box?.username ?? '');
+            if (restored) {
+                const note = document.createElement('p');
+                note.className = 'text-sm text-muted mail-restored-note';
+                note.textContent = 'These are the changes you left unsaved. The password is never kept - type it again if you changed it.';
+                pwWrap.appendChild(note);
+            }
+
+            const labelInput = field(pwWrap, 'label', 'Name', 'text', box || restored ? initial.label : '', 'What to call this mailbox.');
+            const hostInput = field(pwWrap, 'host', 'IMAP server', 'text', box || restored ? initial.host : '', 'e.g. mail.example.com');
+            const portInput = field(pwWrap, 'port', 'Port', 'number', String(box || restored ? initial.port : 993));
+            const userInput = field(pwWrap, 'username', 'Username', 'text', box || restored ? initial.username : '');
             const passInput = field(
                 pwWrap, 'password', 'Password', 'password', '',
                 box?.hasPassword ? 'Leave blank to keep the saved password.' : ''
@@ -1093,14 +1582,18 @@ return {
             secureWrap.className = 'flex items-center gap-2 text-sm';
             const secureInput = document.createElement('input');
             secureInput.type = 'checkbox';
-            secureInput.checked = box ? box.secure !== false : true;
+            secureInput.checked = box || restored ? initial.secure !== false : true;
             secureWrap.appendChild(secureInput);
             secureWrap.appendChild(document.createTextNode('Use TLS (port 993)'));
+            const tlsHelp = document.createElement('span');
+            tlsHelp.setAttribute('data-help-title', 'TLS');
+            tlsHelp.setAttribute('data-help', 'Encrypts the connection to the mail server, so the password and your mail cannot be read on the way. Almost every server wants it on, on port 993. Turn it off only for a server that offers plain IMAP on port 143.');
+            secureWrap.appendChild(tlsHelp);
             pwWrap.appendChild(secureWrap);
 
             // Keep the port in step with the TLS choice until the user sets one
             // themselves - 993/143 is the only pair that matters here.
-            let portTouched = false;
+            let portTouched = Boolean(restored);
             portInput.addEventListener('input', () => {
                 portTouched = true;
             });
@@ -1112,7 +1605,7 @@ return {
             status.className = 'text-sm mail-status';
 
             /**
-             * Say something under the outgoing-server form.
+             * Say something under the form.
              *
              * A class rather than `style.color`, for the reason given
              * throughout this file: an inline colour cannot read a `--dm-*`
@@ -1134,15 +1627,18 @@ return {
             actions.className = 'flex justify-between gap-2 mt-2';
 
             const testBtn = document.createElement('button');
+            testBtn.type = 'button';
             testBtn.className = 'btn btn-sm btn-ghost';
             testBtn.textContent = 'Test connection';
 
             const right = document.createElement('div');
             right.className = 'flex gap-2';
             const cancelBtn = document.createElement('button');
+            cancelBtn.type = 'button';
             cancelBtn.className = 'btn btn-sm btn-ghost';
             cancelBtn.textContent = 'Cancel';
             const saveBtn = document.createElement('button');
+            saveBtn.type = 'button';
             saveBtn.className = 'btn btn-sm btn-primary';
             saveBtn.textContent = 'Save';
             right.appendChild(cancelBtn);
@@ -1153,20 +1649,54 @@ return {
             pwWrap.appendChild(actions);
 
             slideover.element.appendChild(form);
-            // What it opened with; a typed password always counts as a change.
-            const opened = JSON.stringify({...collect(), password: ''});
+            // What "unchanged" means: the stored mailbox (or a blank new
+            // one) - NOT a restored draft, which is unsaved by definition.
+            const clean = JSON.stringify(mailboxDraftData(box ?? {}));
+            // `was` - what the mailbox looked like when this editing began. A
+            // picked-up draft keeps its own, so the next question still knows
+            // the mailbox moved under it.
+            const was = restored ? restored.was : mailboxFingerprint(box);
+            const current = () => JSON.stringify(mailboxDraftData(collect()));
             let signInPanel = null;
             let stopChoiceHelp = null;
+            let stopFormHelp = null;
             let method = signedIn ? 'oauth' : 'password';
+            let saving = false;
+            let discarded = false;
+            const formDirty = () => current() !== clean;
+
+            /** Keep the draft in step with the form: written while it differs, gone when it does not. */
+            const touch = () => {
+                if (discarded || saving || method !== 'password' || !here()) return;
+                if (formDirty()) writeMailboxDraft(draftFor, {data: mailboxDraftData(collect()), was, at: Date.now()});
+                else writeMailboxDraft(draftFor, null);
+            };
+            const onEdit = () => setTimeout(touch, 0);
+            for (const type of ['input', 'change']) pwWrap.addEventListener(type, onEdit);
+
             guardPanel(slideover,
-                () => (method === 'password'
-                    ? passInput.value !== '' || JSON.stringify({...collect(), password: ''}) !== opened
+                () => !saving && (method === 'password'
+                    ? passInput.value !== '' || formDirty()
                     : Boolean(signInPanel?.dirty())),
                 box ? 'Discard your changes to this mailbox?' : 'Discard this mailbox? It has not been saved.',
-                () => { stopFormResize(); signInPanel?.dispose(); stopChoiceHelp?.(); });
+                () => {
+                    mailboxFormOnce.release();
+                    stopFormResize();
+                    signInPanel?.dispose();
+                    stopChoiceHelp?.();
+                    stopFormHelp?.();
+                    for (const type of ['input', 'change']) pwWrap.removeEventListener(type, onEdit);
+                },
+                {
+                    // Agreed to lose them: the draft goes too. A forced close
+                    // (the screen being left) never gets here, so it keeps it.
+                    onDiscard: () => { discarded = true; writeMailboxDraft(draftFor, null); }
+                });
             slideover.open();
+            stopFormHelp = helpPopovers(pwWrap, {position: 'bottom'});
+            if (restored) touch();
             if (signedIn) pwWrap.hidden = true;
-            else setTimeout(() => hostInput.focus(), 50);
+            else setTimeout(() => (box ? labelInput : hostInput).focus(), 50);
 
             /**
              * Offer "Sign in with Microsoft / Google" when this edition has it
@@ -1177,6 +1707,7 @@ return {
                 const oauth = features.oauth && mountSignIn
                     ? await api(`${BASE}/oauth/status`).catch(() => null)
                     : null;
+                if (!here() || !slideover.element?.isConnected) return;
                 if (!oauth?.available) {
                     if (signedIn) {
                         const note = document.createElement('p');
@@ -1203,14 +1734,23 @@ return {
                     signInPanel = mountSignIn(signInHost, {
                         provider, box, base: BASE, api, status: oauth, helpPopovers,
                         onConnected: async (accountId) => {
+                            discarded = true;
+                            writeMailboxDraft(draftFor, null);
                             slideover.close(true);
                             E.toast('Mailbox connected.', {type: 'success'});
+                            refreshBadge();
+                            if (!here()) return;
                             if (accountId) currentAccountId = accountId;
                             await start();
+                            if (here()) mailboxesChanged();
                         },
                         onChanged: async () => {
-                            mailboxes = (await api(`${BASE}/accounts`)).accounts;
+                            const list = (await api(`${BASE}/accounts`)).accounts;
+                            if (!here()) return;
+                            mailboxes = list;
                             renderFolders();
+                            mailboxesChanged();
+                            refreshBadge();
                         },
                         onCancel: () => slideover.close()
                     });
@@ -1275,9 +1815,10 @@ return {
 
             testBtn.addEventListener('click', async () => {
                 testBtn.disabled = true;
-                say('Connecting\u2026');
+                say('Connecting…');
                 try {
                     const result = await api(`${BASE}/accounts/test`, 'POST', collect());
+                    if (!slideover.element?.isConnected) return;
                     say(
                         result.ok ? 'Connected successfully.' : result.error,
                         result.ok ? 'ok' : 'bad'
@@ -1292,19 +1833,36 @@ return {
             cancelBtn.addEventListener('click', () => slideover.close());
 
             saveBtn.addEventListener('click', async () => {
+                if (saving) return;
+                // The panel closes once saved, so nothing typed while the
+                // request runs could be kept: the form is locked until it
+                // answers, and unlocked again if it fails.
+                saving = true;
                 saveBtn.disabled = true;
+                form.inert = true;
+                form.setAttribute('aria-busy', 'true');
+                say('Saving…');
                 try {
                     const result = box
                         ? await api(`${BASE}/accounts/${encodeURIComponent(box.id)}`, 'PUT', collect())
                         : await api(`${BASE}/accounts`, 'POST', collect());
+                    discarded = true;
+                    writeMailboxDraft(draftFor, null);
                     slideover.close(true);
                     E.toast('Mailbox saved.', {type: 'success'});
+                    refreshBadge();
+                    if (!here()) return;
                     currentAccountId = result.account.id;
                     await start();
+                    if (here()) mailboxesChanged();
                 } catch (err) {
                     say(err.message, 'bad');
-                } finally {
+                    saving = false;
                     saveBtn.disabled = false;
+                    form.inert = false;
+                    form.removeAttribute('aria-busy');
+                    // Kept for next time, as it stood when Save was pressed.
+                    touch();
                 }
             });
         }
@@ -1320,6 +1878,7 @@ return {
          */
         function renderFolders() {
             foldersEl.textContent = '';
+            paintUnreadFilter();
 
             for (const box of mailboxes) {
                 const isCurrent = box.id === currentAccountId;
@@ -1340,8 +1899,19 @@ return {
                     name.textContent = box.label;
                     name.title = `${box.username} · ${box.host}`;
                     accountBtn.appendChild(name);
-
-                    accountBtn.addEventListener('click', () => selectAccount(box.id));
+                    accountBtn.dataset.account = box.id;
+                    accountBtn.title = `${box.username} \u00b7 click to open \u00b7 right-click, \u22ee or Shift+F10 for actions`;
+                    accountBtn.appendChild(rowMore());
+
+                    accountBtn.addEventListener('click', (event) => {
+                        const more = event.target.closest('.mail-row-more');
+                        if (more) {
+                            event.stopPropagation();
+                            openMenuAt(more);
+                            return;
+                        }
+                        selectAccount(box.id);
+                    });
                     foldersEl.appendChild(accountBtn);
                 }
 
@@ -1398,8 +1968,8 @@ return {
                     // the same leaf name apart - and doubles as the hint.
                     name.title = folder.path;
                     btn.title = features.folders
-                        ? `${folder.path} - right-click to rename, delete or add a folder inside`
-                        : folder.path;
+                        ? `${folder.path} - right-click, \u22ee or Shift+F10 to rename, delete or add a folder inside`
+                        : `${folder.path} - right-click, \u22ee or Shift+F10 for more`;
                     btn.appendChild(name);
 
                     if (folder.contextOnly) btn.classList.add('is-context');
@@ -1420,6 +1990,7 @@ return {
                             : `${count} unread`;
                         btn.appendChild(pill);
                     }
+                    btn.appendChild(rowMore());
 
                     // One handler, two gestures: the chevron folds, the rest of
                     // the row opens the folder. A nested <button> inside a
@@ -1429,6 +2000,12 @@ return {
                     // click opens the folder, which redraws this pane, and a
                     // dblclick needs both clicks to land on the same element.
                     btn.addEventListener('click', event => {
+                        const more = event.target.closest('.mail-row-more');
+                        if (more) {
+                            event.stopPropagation();
+                            openMenuAt(more);
+                            return;
+                        }
                         const onToggle = !!event.target.closest('.mail-folder-toggle');
                         if (event.detail >= 2) {
                             // The first click already folded it when it hit
@@ -1458,6 +2035,39 @@ return {
             Domma.icons.scan(foldersEl);
         }
 
+        /**
+         * The Unread filter says how many it would show: the unread in this
+         * mailbox's folders, counted from the listing already in hand.
+         *
+         * @returns {void}
+         */
+        function paintUnreadFilter() {
+            const label = unreadFilterEl?.querySelector('span');
+            if (!label) return;
+            const unread = folders.reduce((n, f) => n + (Number.isFinite(f.unseen) ? f.unseen : 0), 0);
+            label.textContent = unread ? `Unread (${unread > 999 ? '999+' : unread})` : 'Unread';
+            unreadFilterEl.title = unread
+                ? `Show only the folders holding the ${unread} unread message${unread === 1 ? '' : 's'}`
+                : 'Show only folders with unread mail';
+        }
+
+        /**
+         * The ⋮ on a folder-pane row. A span with the button role, not a
+         * <button>: the row IS a button, and the click target decides - the
+         * same resolution as the message list's ⋮ and the fold chevron.
+         *
+         * @returns {HTMLElement}
+         */
+        function rowMore() {
+            const more = document.createElement('span');
+            more.className = 'mail-row-more mail-folder-more';
+            more.setAttribute('role', 'button');
+            more.setAttribute('aria-label', 'Actions');
+            more.title = 'Actions';
+            more.textContent = '\u22ee';
+            return more;
+        }
+
         /**
          * Remember which mailbox is being looked at.
          *
@@ -1573,7 +2183,13 @@ return {
                 }
                 if (!here() || currentAccountId !== account) return;
                 page = 1;
-                await loadMessages({fresh: true});
+                await loadMessages({fresh: true, quiet: true});
+                if (!here()) return;
+                // A refresh is when the unread badge is most likely to have
+                // moved - new mail, or mail read on the phone. The read routes
+                // forget their cached badge on a fresh read, so this gets a
+                // new number rather than the one from a minute ago.
+                refreshBadge();
             } catch (err) {
                 handleError(err);
             } finally {
@@ -1581,12 +2197,60 @@ return {
             }
         }
 
+        /**
+         * Bumped by every list load, so an answer that lands after a newer
+         * request was made (a quick second folder click) is dropped rather
+         * than drawn over the newer one.
+         */
+        let listSeq = 0;
+        /** Is this load still the one that matters, on a screen still here? */
+        const listCurrent = (seq) => here() && seq === listSeq;
+
+        /**
+         * Run a list request. A NEW list (another folder, page or search)
+         * empties the pane and shows a skeleton while it loads; a quiet one
+         * (a refresh, the list after an undo or a send) keeps what is on
+         * screen until the answer replaces it.
+         *
+         * @param   {Function} work
+         * @param   {boolean} quiet
+         * @returns {Promise<*>}
+         */
+        function listLoad(work, quiet) {
+            if (quiet) return work();
+            disposeRowEffects();
+            listEl.textContent = '';
+            pagerEl.textContent = '';
+            return withSkeleton(listEl, work, 'rows');
+        }
+
+        /**
+         * A list load failed. Said once, and only for the load that is still
+         * current; a new list that could not be fetched says so in the pane
+         * rather than leaving it blank.
+         *
+         * @param   {Error} err
+         * @param   {number} seq
+         * @param   {boolean} quiet
+         * @returns {void}
+         */
+        function listFailed(err, seq, quiet) {
+            if (!listCurrent(seq)) return;
+            handleError(err);
+            if (!quiet && !err.needsSetup && !listEl.childElementCount) {
+                showEmpty(listEl, 'alert-triangle', 'This list could not be loaded.', {
+                    label: 'Try again',
+                    onClick: () => loadMessages()
+                });
+            }
+        }
+
         /** Fetch and draw the current page. */
-        async function loadMessages({fresh = false} = {}) {
-            if (searchQuery) return runSearch();
-            if (threadsOn) return loadThreads({fresh});
+        async function loadMessages({fresh = false, quiet = false} = {}) {
+            if (searchQuery) return runSearch({quiet});
+            if (threadsOn) return loadThreads({fresh, quiet});
 
-            const loader = E.loader(listEl, {type: 'dots'});
+            const seq = ++listSeq;
             try {
                 const params = new URLSearchParams({
                     account: currentAccountId ?? '',
@@ -1595,7 +2259,8 @@ return {
                     limit: String(pageSize)
                 });
                 if (fresh) params.set('fresh', '1');
-                const result = await api(`${BASE}/messages?${params}`);
+                const result = await listLoad(() => api(`${BASE}/messages?${params}`), quiet);
+                if (!listCurrent(seq)) return;
                 lastListSource = result.source ?? 'imap';
                 messages = result.messages;
                 total = result.total;
@@ -1603,9 +2268,7 @@ return {
                 renderList();
                 renderPager();
             } catch (err) {
-                handleError(err);
-            } finally {
-                loader.destroy();
+                listFailed(err, seq, quiet);
             }
         }
 
@@ -1620,8 +2283,8 @@ return {
          *
          * @returns {Promise<void>}
          */
-        async function loadThreads({fresh = false} = {}) {
-            const loader = E.loader(listEl, {type: 'dots'});
+        async function loadThreads({fresh = false, quiet = false} = {}) {
+            const seq = ++listSeq;
             try {
                 const params = new URLSearchParams({
                     account: currentAccountId ?? '',
@@ -1629,16 +2292,22 @@ return {
                     page: String(page),
                     limit: String(pageSize)
                 });
-                const result = await api(`${BASE}/threads?${params}`);
-
-                if (!result.mirrored) {
-                    note('This folder is not mirrored, so it cannot be grouped into conversations.');
+                // Both requests inside the one load, so the skeleton covers
+                // the fallback too.
+                const {result, flat} = await listLoad(async () => {
+                    const grouped = await api(`${BASE}/threads?${params}`);
+                    if (grouped.mirrored) return {result: grouped, flat: null};
                     // The flat list, without turning the preference off: the
                     // next folder may well be mirrored, and silently
                     // forgetting the setting because one folder was not is
                     // worse than one line of explanation.
                     if (fresh) params.set('fresh', '1');
-                    const flat = await api(`${BASE}/messages?${params}`);
+                    return {result: grouped, flat: await api(`${BASE}/messages?${params}`)};
+                }, quiet);
+                if (!listCurrent(seq)) return;
+
+                if (!result.mirrored) {
+                    note('This folder is not mirrored, so it cannot be grouped into conversations.');
                     lastListSource = flat.source ?? 'imap';
                     messages = flat.messages;
                     total = flat.total;
@@ -1655,9 +2324,7 @@ return {
                 renderList();
                 renderPager();
             } catch (err) {
-                handleError(err);
-            } finally {
-                loader.destroy();
+                listFailed(err, seq, quiet);
             }
         }
 
@@ -1746,8 +2413,8 @@ return {
          *
          * @returns {Promise<void>}
          */
-        async function runSearch() {
-            const loader = E.loader(listEl, {type: 'dots'});
+        async function runSearch({quiet = false} = {}) {
+            const seq = ++listSeq;
             try {
                 const params = new URLSearchParams({
                     account: currentAccountId ?? '',
@@ -1755,7 +2422,8 @@ return {
                     page: String(page),
                     limit: String(pageSize)
                 });
-                const result = await api(`${BASE}/search?${params}`);
+                const result = await listLoad(() => api(`${BASE}/search?${params}`), quiet);
+                if (!listCurrent(seq)) return;
 
                 messages = result.messages;
                 total = result.total;
@@ -1777,9 +2445,7 @@ return {
                     note(`${result.total} result${result.total === 1 ? '' : 's'}. ${scope}`);
                 }
             } catch (err) {
-                handleError(err);
-            } finally {
-                loader.destroy();
+                listFailed(err, seq, quiet);
             }
         }
 
@@ -2244,7 +2910,7 @@ return {
                     ? async () => {
                         const back = new URLSearchParams({account: currentAccountId ?? '', folder: result.movedTo});
                         await api(`${BASE}/messages/move?${back}`, 'POST', {uids: mapped, destination: source});
-                        await loadMessages();
+                        await loadMessages({quiet: true});
                     }
                     : null
             );
@@ -2257,7 +2923,8 @@ return {
          */
         async function bulkDelete() {
             const uids = [...selected];
-            if (!await E.confirm(`Delete ${uids.length} message${uids.length === 1 ? '' : 's'}?`)) return;
+            if (!await ask(`Delete ${uids.length} message${uids.length === 1 ? '' : 's'}?`,
+                {confirmText: 'Delete', cancelText: 'Keep them'}) || !here()) return;
 
             const source = currentFolder;
             const params = new URLSearchParams({account: currentAccountId ?? '', folder: source});
@@ -2276,7 +2943,7 @@ return {
                         ? async () => {
                             const back = new URLSearchParams({account: currentAccountId ?? '', folder: result.movedTo});
                             await api(`${BASE}/messages/move?${back}`, 'POST', {uids: mapped, destination: source});
-                            await loadMessages();
+                            await loadMessages({quiet: true});
                         }
                         : null
                 );
@@ -2367,10 +3034,15 @@ return {
          */
         function clearReader() {
             cancelMarkRead();
+            // A message still on its way must not land in the cleared pane.
+            openSeq += 1;
             readerHeadEl.textContent = '';
             showEmpty(readerBodyEl, 'mail', 'Select a message to read it.');
         }
 
+        /** Bumped by every openMessage, so a slow answer cannot replace a newer one. */
+        let openSeq = 0;
+
         /**
          * Fetch and display one message.
          *
@@ -2397,6 +3069,10 @@ return {
             // resolve against the folder the message is actually in.
             openFolder = folder ?? currentFolder;
 
+            // Arrowing quickly through a list opens several in turn; only the
+            // last one asked for may draw, and nothing draws once the screen
+            // has gone.
+            const seq = ++openSeq;
             const loader = E.loader(readerBodyEl, {type: 'dots'});
             try {
                 const params = new URLSearchParams({
@@ -2405,6 +3081,7 @@ return {
                 });
                 if (imagesAllowed.has(uid)) params.set('images', 'load');
                 const message = await api(`${BASE}/messages/${uid}?${params}`);
+                if (!here() || seq !== openSeq) return;
                 renderMessage(message);
 
                 // The reading preference controls how long mail stays open
@@ -2426,7 +3103,7 @@ return {
                     }, readDelaySeconds(S.get(READ_DELAY_KEY)));
                 }
             } catch (err) {
-                handleError(err);
+                if (here() && seq === openSeq) handleError(err);
             } finally {
                 loader.destroy();
             }
@@ -2807,7 +3484,9 @@ return {
          * @returns {void}
          */
         function showShortcuts() {
-            const modal = E.slideover({title: 'Keyboard shortcuts', size: 'sm', position: 'right'});
+            if (!shortcutsOnce.claim()) return;
+            const modal = guardPanel(E.slideover({title: 'Keyboard shortcuts', size: 'sm', position: 'right'}),
+                () => false, undefined, () => shortcutsOnce.release());
             const list = document.createElement('div');
             list.className = 'mail-kv';
             for (const [keys, what] of SHORTCUTS) {
@@ -3290,7 +3969,7 @@ return {
                 mailboxAddress: profile?.mailboxAddress ?? '',
                 templates: profile?.templates ?? [],
                 undoSeconds: profile?.undoSendSeconds ?? 0,
-                onSent: () => loadMessages(),
+                onSent: () => loadMessages({quiet: true}),
                 onQueued: (result) => offerRecall(result),
                 ...extra
             };
@@ -3386,7 +4065,15 @@ return {
          * @returns {Promise<void>}
          */
         async function showOutbox() {
-            const slideover = E.slideover({title: 'Waiting', size: 'md', position: 'right'});
+            if (!outboxOnce.claim()) return;
+            let slideover;
+            try {
+                slideover = guardPanel(E.slideover({title: 'Waiting', size: 'md', position: 'right'}),
+                    () => false, undefined, () => outboxOnce.release());
+            } catch (err) {
+                outboxOnce.release();
+                throw err;
+            }
             const host = document.createElement('div');
             host.className = 'mail-panel-stack';
             slideover.element.appendChild(host);
@@ -3395,13 +4082,17 @@ return {
             /**
              * @returns {Promise<void>}
              */
-            async function draw() {
-                host.textContent = '';
+            async function draw(first = false) {
                 const params = new URLSearchParams({account: currentAccountId ?? ''});
-                const [outbox, snoozed] = await Promise.all([
+                const fetchBoth = () => Promise.all([
                     api(`${BASE}/outbox?${params}`).catch(() => ({queued: []})),
                     api(`${BASE}/snoozed?${params}`).catch(() => ({snoozed: []}))
                 ]);
+                // A skeleton the first time; a redraw keeps the rows on
+                // screen until the new ones are in.
+                const [outbox, snoozed] = first ? await withSkeleton(host, fetchBoth, 'rows') : await fetchBoth();
+                if (!here() || !slideover.element?.isConnected) return;
+                host.textContent = '';
 
                 host.appendChild(section('Waiting to send', (outbox.queued ?? []).map(row => ({
                     title: row.subject || '(no subject)',
@@ -3447,7 +4138,7 @@ return {
                             await api(`${BASE}/snoozed/${row.id}/wake`, 'POST');
                             await draw();
                             refreshOutbox();
-                            await loadMessages();
+                            await loadMessages({quiet: true});
                         }]
                     ]
                 })), 'Nothing is snoozed.'));
@@ -3512,7 +4203,7 @@ return {
                 return wrap;
             }
 
-            await draw();
+            await draw(true);
         }
 
         // ---------------------------------------------------------------
@@ -3530,7 +4221,7 @@ return {
          */
         function askForTime(title) {
             return new Promise((resolve) => {
-                const modal = E.modal({title, size: 'sm'});
+                const modal = trackModal(E.modal({title, size: 'sm'}));
                 let answered = false;
 
                 /**
@@ -3596,8 +4287,14 @@ return {
          * @returns {Promise<void>}
          */
         async function snooze(message) {
-            const at = await askForTime('Snooze until');
-            if (!at) return;
+            if (!dialogOnce.claim()) return;
+            let at;
+            try {
+                at = await askForTime('Snooze until');
+            } finally {
+                dialogOnce.release();
+            }
+            if (!at || !here()) return;
 
             try {
                 const params = new URLSearchParams({
@@ -3617,7 +4314,7 @@ return {
                     // already moved, so there is no "leave it where it was".
                     async () => {
                         await api(`${BASE}/snoozed/${result.id}/wake`, 'POST');
-                        await loadMessages();
+                        await loadMessages({quiet: true});
                     }
                 );
                 refreshOutbox();
@@ -3638,7 +4335,9 @@ return {
          * @returns {Promise<void>}
          */
         async function unsubscribe(message) {
-            if (!await E.confirm(`Unsubscribe from the list "${message.subject || 'this message'}" came from?`)) return;
+            // The subject is a stranger's text, and E.confirm renders HTML.
+            if (!await ask(esc(`Unsubscribe from the list "${message.subject || 'this message'}" came from?`),
+                {confirmText: 'Unsubscribe', cancelText: 'Stay subscribed'}) || !here()) return;
 
             try {
                 const params = new URLSearchParams({
@@ -3720,7 +4419,8 @@ return {
                 E.toast(`Created the draft page ${result.urlPath}.`, {type: 'success'});
                 // Offered rather than taken: leaving the mail view loses
                 // whatever was half-read in it.
-                if (await E.confirm(`Open "${result.title}" in the page editor now?`)) {
+                if (await ask(esc(`Open "${result.title}" in the page editor now?`),
+                    {confirmText: 'Open it', cancelText: 'Not now'}) && here()) {
                     location.hash = `#/pages/edit${result.urlPath}`;
                 }
             } catch (err) {
@@ -3739,13 +4439,30 @@ return {
          * @returns {Promise<void>}
          */
         async function messageToEntry(message) {
+            // One at a time; released when the dialog closes, or below if
+            // it never opens.
+            if (!dialogOnce.claim()) return;
+            let shown = false;
+            try {
+                shown = await fileAsEntry(message);
+            } finally {
+                if (!shown) dialogOnce.release();
+            }
+        }
+
+        /**
+         * @param   {object} message
+         * @returns {Promise<boolean>} whether the dialog opened
+         */
+        async function fileAsEntry(message) {
             let available;
             try {
                 available = await api(`${BASE}/collections`);
             } catch (err) {
-                E.toast(err.message || 'The collections could not be listed.', {type: 'error'});
-                return;
+                if (here()) E.toast(err.message || 'The collections could not be listed.', {type: 'error'});
+                return false;
             }
+            if (!here()) return false;
 
             // A collection whose required fields a message cannot fill is not
             // usable, however good the rest of the mapping looks - choosing
@@ -3762,10 +4479,10 @@ return {
                         : 'No collection has fields a message could be filed into.',
                     {type: 'warning'}
                 );
-                return;
+                return false;
             }
 
-            const modal = E.modal({title: 'File as a collection entry', size: 'sm'});
+            const modal = trackModal(E.modal({title: 'File as a collection entry', size: 'sm'}), () => dialogOnce.release());
             const panel = document.createElement('div');
             panel.className = 'mail-dialog-stack';
 
@@ -3835,6 +4552,7 @@ return {
 
             modal.element.appendChild(panel);
             modal.open();
+            return true;
         }
 
         /**
@@ -4068,7 +4786,7 @@ return {
                             });
                             await api(`${BASE}/messages/move?${back}`, 'POST',
                                 {uids: mapped, destination: from});
-                            await loadMessages();
+                            await loadMessages({quiet: true});
                         }
                         : null
                 );
@@ -4093,12 +4811,21 @@ return {
                 : (typeof Domma !== 'undefined' ? Domma?.elements : null);
             if (typeof elements?.contextMenu !== 'function' || !foldersEl) return;
 
+            // One registration for both kinds of row - the mailbox rows and
+            // the folders - since they share the pane.
             folderMenu = elements.contextMenu(foldersEl, {
                 cursor: 'glyph',
-                match: '.mail-folder',
+                match: '.mail-folder, .mail-account',
                 inherit: false,
                 items: [],
                 onBeforeOpen: (ctx) => {
+                    const account = ctx?.target?.closest?.('.mail-account');
+                    if (account) {
+                        const box = mailboxes.find(b => b.id === account.dataset.account);
+                        if (!box) return false;
+                        folderMenu.setItems(accountMenuItemsFor(box));
+                        return true;
+                    }
                     const row = ctx?.target?.closest?.('.mail-folder');
                     if (!row) return false;
                     const path = row.dataset.path;
@@ -4110,6 +4837,47 @@ return {
             });
         }
 
+        /**
+         * A mailbox row's menu, in the folder pane.
+         *
+         * @param   {object} box
+         * @returns {object[]}
+         */
+        function accountMenuItemsFor(box) {
+            return menuItems(accountMenuModel({
+                isCurrent: box.id === currentAccountId,
+                isDefault: box.isDefault === true,
+                count: mailboxes.length
+            }), {
+                open: () => selectAccount(box.id),
+                refresh: () => refreshMailbox(),
+                edit: () => openMailboxForm(box),
+                default: () => toggleDefaultMailbox(box),
+                remove: () => removeMailbox(box)
+            });
+        }
+
+        /**
+         * What every edition offers on a folder - open it, fold it, copy
+         * its path. The free reader's whole menu; Pro adds management below.
+         *
+         * @param   {object} folder - a node from the folder tree
+         * @returns {object[]}
+         */
+        function folderReadItems(folder) {
+            const node = flattenFolderTree(buildFolderTree(folders), new Set()).find(n => n.path === folder.path) ?? folder;
+            return menuItems(folderReadMenuModel({
+                selectable: node.selectable !== false,
+                hasChildren: (node.children ?? []).length > 0,
+                collapsed: collapsedSet().has(folder.path),
+                isCurrent: folder.path === currentFolder && !searchQuery
+            }), {
+                open: () => selectFolder(node),
+                fold: () => toggleFolder(folder.path),
+                copy: () => copyText(folder.path, 'Folder path copied.')
+            });
+        }
+
         /**
          * The items for one folder.
          *
@@ -4126,7 +4894,11 @@ return {
             const isInbox = String(folder.path).toUpperCase() === 'INBOX';
             const locked = protectedUse || isInbox;
 
+            const read = folderReadItems(folder);
+            if (!features.folders) return read;
             return [
+                ...read,
+                {type: 'divider'},
                 {
                     label: 'New folder',
                     icon: 'folder-plus',
@@ -4176,15 +4948,24 @@ return {
             // infer a parent from, so the parent has to be part of the ask -
             // otherwise every folder made that way lands at the top level and
             // has to be moved afterwards.
-            const chosen = pickParent ? await askForFolder(parent) : {parent, name: null};
-            if (!chosen) return;
+            // One question at a time: a double click must not stack two.
+            if (!dialogOnce.claim()) return;
+            let chosen;
+            try {
+                chosen = pickParent ? await askForFolder(parent) : {parent, name: null};
+            } finally {
+                dialogOnce.release();
+            }
+            if (!chosen || !here()) return;
 
-            const name = chosen.name ?? await E.prompt(
-                chosen.parent
+            const name = chosen.name ?? await promptWith(
+                esc(chosen.parent
                     ? `Name for the new folder inside ${chosen.parent}`
-                    : 'Name for the new folder'
+                    : 'Name for the new folder'),
+                {title: 'New folder', confirmText: 'Create'},
+                ''
             );
-            if (!name || !String(name).trim()) return;
+            if (!here() || !name || !String(name).trim()) return;
             parent = chosen.parent;
 
             try {
@@ -4192,7 +4973,7 @@ return {
                 const result = await api(`${BASE}/folders?${params}`, 'POST',
                     {name: String(name).trim(), parent: parent ?? ''});
                 E.toast(`Created ${result.path}.`, {type: 'success'});
-                await loadFolders();
+                await loadFolders({quiet: true});
             } catch (err) {
                 E.toast(err.message || 'That folder could not be created.', {type: 'error'});
             }
@@ -4215,7 +4996,7 @@ return {
          */
         function askForFolder(preselect = null) {
             return new Promise(resolve => {
-                const modal = E.modal({title: 'New folder', size: 'sm'});
+                const modal = trackModal(E.modal({title: 'New folder', size: 'sm'}));
 
                 const wrap = document.createElement('div');
                 wrap.className = 'mail-form-stack';
@@ -4321,7 +5102,7 @@ return {
                     visible ? `${folder.name} will show in the list.` : `${folder.name} is hidden.`,
                     {type: 'success'}
                 );
-                await loadFolders();
+                await loadFolders({quiet: true});
             } catch (err) {
                 E.toast(err.message || 'That could not be changed.', {type: 'error'});
             }
@@ -4334,8 +5115,11 @@ return {
          * @returns {Promise<void>}
          */
         async function renameFolder(folder) {
-            const name = await E.prompt(`Rename "${folder.name}" to`, {value: folder.name});
-            if (!name || String(name).trim() === folder.name) return;
+            // The current name goes in as the input's value, after the
+            // dialog is built - `inputValue` would cut it at a quote.
+            const name = await promptWith(esc(`Rename "${folder.name}" to`),
+                {title: 'Rename folder', confirmText: 'Rename'}, folder.name);
+            if (!here() || !name || String(name).trim() === folder.name) return;
 
             try {
                 const params = new URLSearchParams({account: currentAccountId ?? ''});
@@ -4346,7 +5130,7 @@ return {
                 // exists under that name.
                 if (currentFolder === folder.path) currentFolder = result.path;
                 E.toast(`Renamed to ${result.path}.`, {type: 'success'});
-                await loadFolders();
+                await loadFolders({quiet: true});
             } catch (err) {
                 E.toast(err.message || 'That folder could not be renamed.', {type: 'error'});
             }
@@ -4369,7 +5153,8 @@ return {
             const question = children.length
                 ? `Delete "${folder.path}" and the ${children.length} folder${children.length === 1 ? '' : 's'} inside it (${children.join(', ')})? Every message in them is deleted too.`
                 : `Delete "${folder.path}"? Every message in it is deleted too.`;
-            if (!await E.confirm(question)) return;
+            // Folder names are the server's text, and E.confirm renders HTML.
+            if (!await ask(esc(question), {title: 'Delete folder', confirmText: 'Delete', cancelText: 'Keep it'}) || !here()) return;
 
             try {
                 const params = new URLSearchParams({
@@ -4383,7 +5168,7 @@ return {
                 }
                 const extra = result.alsoDeleted?.length ? ` and ${result.alsoDeleted.length} inside it` : '';
                 E.toast(`Deleted ${result.path}${extra}.`, {type: 'success'});
-                await loadFolders();
+                await loadFolders({quiet: true});
             } catch (err) {
                 E.toast(err.message || 'That folder could not be deleted.', {type: 'error'});
             }
@@ -4444,7 +5229,7 @@ return {
                     // Saving or sending changes which UIDs are in Drafts, so
                     // the list behind the window has to be refetched either
                     // way - not only on send.
-                    onSaved: () => loadMessages()
+                    onSaved: () => loadMessages({quiet: true})
                 }));
             } catch (err) {
                 E.toast(err.message || 'That draft could not be opened.', {type: 'error'});
@@ -4627,7 +5412,7 @@ return {
         async function undoMove({uid, from, to}) {
             const params = new URLSearchParams({account: currentAccountId ?? '', folder: from});
             await api(`${BASE}/messages/${uid}/move?${params}`, 'POST', {destination: to});
-            await loadMessages();
+            await loadMessages({quiet: true});
         }
 
         /**
@@ -4737,11 +5522,28 @@ return {
             if (!folder || !Number.isFinite(folder.unseen)) return;
             folder.unseen = Math.max(0, folder.unseen + delta);
             renderFolders();
-            // The sidebar's unread badge counts the mirror; ask it to look
-            // again. Its url is this screen's plugin (#/plugins/<slug>) - the
-            // reader is shared by more than one mail plugin.
-            const pluginUrl = location.hash.split('/').slice(0, 3).join('/');
-            window.dispatchEvent(new CustomEvent('dm:sidebar-count', {detail: {url: pluginUrl}}));
+            // The sidebar's unread badge counts the mirror; ask it to look again.
+            refreshBadge();
+        }
+
+        /**
+         * Ask the sidebar to re-read this Tool's badge. Named by the plugin
+         * this view was built for (#/plugins/<slug>) - the reader is shared by
+         * more than one mail plugin, and the address may carry more after it.
+         *
+         * @returns {void}
+         */
+        function refreshBadge() {
+            sidebarCount(sidebarUrl(pluginName));
+        }
+
+        /**
+         * What the list shows, enough to tell whether a reload brought mail.
+         *
+         * @returns {{total: number, uids: number[]}}
+         */
+        function listSnapshot() {
+            return {total, uids: messages.map(m => m.uid)};
         }
 
         /**
@@ -4830,15 +5632,38 @@ return {
         // Boot
         // ---------------------------------------------------------------
 
+        /** Bumped by every folder load, so a mailbox switched away from cannot draw. */
+        let foldersSeq = 0;
+
         /**
          * Load the selected mailbox's folders and open its inbox.
          *
          * @returns {Promise<void>}
          */
-        async function loadFolders() {
+        async function loadFolders({quiet = false} = {}) {
+            const seq = ++foldersSeq;
             try {
                 const params = new URLSearchParams({account: currentAccountId ?? '', counts: '1'});
-                const result = await api(`${BASE}/folders?${params}`);
+                let result;
+                if (quiet) {
+                    // A reload after a folder was made, renamed, hidden or
+                    // deleted: the pane stays as it is until the answer.
+                    result = await api(`${BASE}/folders?${params}`);
+                } else {
+                    // Another mailbox: nothing to show until this answers -
+                    // the mailbox rows stay, the old mailbox's folders go, and
+                    // a skeleton stands where the new ones will be. The
+                    // message list waits with it.
+                    folders = [];
+                    renderFolders();
+                    if (!searchQuery) {
+                        disposeRowEffects();
+                        listEl.textContent = '';
+                        pagerEl.textContent = '';
+                    }
+                    result = await withSkeleton(foldersEl, () => api(`${BASE}/folders?${params}`), 'rows');
+                }
+                if (!here() || seq !== foldersSeq) return;
                 folders = result.folders;
                 currentAccountId = result.accountId;
                 rememberAccount(currentAccountId);
@@ -4861,7 +5686,15 @@ return {
                     : 'Inbox';
                 renderFolders();
             } catch (err) {
+                if (!here() || seq !== foldersSeq) return;
+                renderFolders();
                 handleError(err);
+                if (!err.needsSetup && !foldersEl.querySelector('.mail-folder')) {
+                    const note = document.createElement('p');
+                    note.className = 'text-sm text-muted mail-none';
+                    note.textContent = 'The folders could not be loaded. Refresh to try again.';
+                    foldersEl.appendChild(note);
+                }
                 return;
             }
 
@@ -4894,8 +5727,17 @@ return {
                 refreshContacts();
                 loadMessageActions(api).then(actions => { messageActions = actions; });
 
-                mailboxes = (await api(`${BASE}/accounts`)).accounts;
+                // The first visit has nothing in the folder pane yet: a
+                // skeleton while the mailboxes are asked for. A reload (after
+                // a save) keeps what is there.
+                const answer = mailboxes.length
+                    ? await api(`${BASE}/accounts`)
+                    : await withSkeleton(foldersEl, () => api(`${BASE}/accounts`), 'rows');
+                if (!here()) return;
+                mailboxes = answer.accounts;
+                pruneMailboxDrafts();
             } catch (err) {
+                if (!here()) return;
                 E.toast(err.message, {type: 'error'});
                 return;
             }
@@ -4968,16 +5810,18 @@ return {
         // this one can do (readOnlyMenuItems for the free reader).
         attachMessageMenu();
         attachBodyMenu();
-        if (features.folders) attachFolderMenu();
+        // Every edition: the free reader's folders and mailbox rows have a
+        // menu too (open, fold, copy; edit or remove a mailbox).
+        attachFolderMenu();
 
         // Shift+F10 opens the menu of the focused row, as the keyboard's
         // right-click - the rows are buttons, so Enter already opens them.
         const onMenuKey = (event) => {
             if (!(event.key === 'F10' && event.shiftKey)) return;
-            const row = event.target.closest?.('.mail-item, .mail-folder');
+            const row = event.target.closest?.('.mail-item, .mail-folder, .mail-account');
             if (!row) return;
             event.preventDefault();
-            openMenuAt(row);
+            openMenuAt(row.querySelector('.mail-item-more, .mail-row-more') ?? row);
         };
         listEl?.addEventListener('keydown', onMenuKey);
         foldersEl?.addEventListener('keydown', onMenuKey);
@@ -5131,7 +5975,11 @@ return {
                     : result.total !== total || signature(result.messages) !== signature(messages);
                 observedThreadPage = snapshot;
                 if (changed) {
-                    await loadMessages();
+                    const before = listSnapshot();
+                    await loadMessages({quiet: true});
+                    // New mail arrived while the screen sat open: the
+                    // sidebar's unread badge is the other place it shows.
+                    if (here() && hasNewMail(before, listSnapshot())) refreshBadge();
                 }
             } catch { /* A temporary failure must not replace the open reader. */ }
             finally { refreshing = false; }