domma-cms 0.54.2 → 0.66.0

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

@@ -0,0 +1,4453 @@
+/**
+ * The three-pane mailbox reader, shared by every edition.
+ *
+ * `mail-reader` (free) is this view and nothing else. `email-pro` mounts the
+ * same three panes and adds composing, flags and a synchronised store, so the
+ * folder tree, the pane sizing, the message list and the sandboxed reader all
+ * live here rather than being forked.
+ *
+ * A user may hold several mailboxes. The folders pane lists them, and the
+ * selected one expands to show its folders; only the selected mailbox is ever
+ * connected to, so adding a second account costs nothing until it is opened.
+ *
+ * @module _lib/admin/mail/reader-view
+ */
+
+// Imported dynamically, carrying this module's own cache-busting token.
+//
+// A static import has a fixed specifier, so the siblings were fetched without
+// a version while the entry point had one. A browser then kept serving the
+// previous build of the shared code after an update, and the symptom is not
+// "a stale file" - it is a feature that used to work and now does not, on one
+// machine, which is a genuinely horrible thing to debug. Resolving them
+// against import.meta.url means the whole graph moves together.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
+const versioned = name => new URL(`./${name}?v=${ASSET_VERSION}`, import.meta.url).href;
+
+const {
+    buildFolderTree,
+    flattenFolderTree,
+    folderHeading,
+    folderMenuItems,
+    iconForFolder,
+    pruneToUnread,
+    unreadInSubtree
+} = await import(versioned('folder-tree.js'));
+const {imageSendersSection} = await import(versioned('image-senders-section.js'));
+const {createSplitters, fitToViewport} = await import(versioned('panes.js'));
+const {createDiagnosticsSection} = await import(versioned('diagnostics-section.js'));
+const {openCompose} = await import(versioned('compose-window.js'));
+const {makeResizable} = await import(versioned('resizable.js'));
+const {addContact, isKnownAddress, loadContacts} = await import(versioned('contacts.js'));
+const {isPlainKey, isTyping, resolveKey, SHORTCUTS} = await import(versioned('keyboard.js'));
+const {describeWhen, quickTimes} = await import(versioned('scheduling.js'));
+
+/**
+ * Call a plugin route, returning parsed JSON.
+ *
+ * Throws an Error carrying the server's own message plus any flags the route
+ * set (needsSetup, needsPassword), so callers can branch on them.
+ *
+ * Deliberately `fetch` rather than Domma's `H`, which is the house rule
+ * everywhere else. `H` reduces a failed response to a message string, and this
+ * view branches on three things it would throw away: the status code, and the
+ * `needsSetup` / `needsPassword` flags that decide whether someone is shown
+ * the setup panel, the password prompt, or an error. Using `H` here would mean
+ * the reader could no longer tell "no mailbox yet" from "wrong password".
+ *
+ * @param   {string} url
+ * @param   {string} [method]
+ * @param   {object} [body]
+ * @returns {Promise<object>}
+ */
+async function api(url, method = 'GET', body) {
+    const opts = {method, headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}};
+    if (body !== undefined) {
+        opts.headers['Content-Type'] = 'application/json';
+        opts.body = JSON.stringify(body);
+    }
+
+    const res = await fetch(url, opts);
+    const text = await res.text();
+    const payload = text ? JSON.parse(text) : {};
+
+    if (!res.ok) {
+        const err = new Error(payload.error || res.statusText);
+        err.status = res.status;
+        err.needsSetup = payload.needsSetup === true;
+        err.needsPassword = payload.needsPassword === true;
+        throw err;
+    }
+    return payload;
+}
+
+/**
+ * Format a message date: time for today, date for anything older.
+ *
+ * @param   {string|null} value
+ * @returns {string}
+ */
+function formatDate(value) {
+    if (!value) return '';
+    const d = D(value);
+    return d.format('DD MMM YYYY') === D().format('DD MMM YYYY')
+        ? d.format('HH:mm')
+        : d.format('DD MMM YYYY');
+}
+
+/**
+ * Render an address list as a readable string.
+ *
+ * @param   {{name: string, address: string}[]} list
+ * @returns {string}
+ */
+function formatAddresses(list) {
+    return (list ?? []).map(a => a.name || a.address).filter(Boolean).join(', ');
+}
+
+/**
+ * Human-readable byte size.
+ *
+ * @param   {number} bytes
+ * @returns {string}
+ */
+function formatSize(bytes) {
+    if (!bytes) return '';
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let value = bytes;
+    let unit = 0;
+    while (value >= 1024 && unit < units.length - 1) {
+        value /= 1024;
+        unit += 1;
+    }
+    return `${value < 10 && unit > 0 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+
+/**
+ * Build the reader view for one plugin.
+ *
+ * @param   {{pluginName: string, assetVersion?: string, settingsSections?: object[]}} options
+ *   `settingsSections` lets an edition contribute settings without forking the
+ *   view: each is `{id, label, render(container, context)}`, and the shell
+ *   handles the tabs, the lazy drawing and a section that throws.
+ *   `assetVersion` must come from the CALLING module's own URL: the loader
+ *   stamps a plugin's view entry with its mtime, and the template needs the
+ *   same token or a browser keeps serving markup from before the update. This
+ *   module is imported by a fixed path and carries no stamp of its own.
+ * @returns {object} a Domma view
+ */
+export function createReaderView({pluginName, assetVersion = ASSET_VERSION, settingsSections = [], features = {}}) {
+const BASE = `/api/plugins/${pluginName}`;
+
+// Deliberately NOT keyed by plugin. The two editions never run together - the
+// Pro one supersedes the free one - so keying per plugin would only mean an
+// upgrade silently forgot your pane widths and which folders you had folded.
+/** Remembered folder-collapse state, keyed by mailbox id. */
+const COLLAPSED_KEY = 'domma-mail.collapsed';
+/** Remembered pane widths. */
+const PANES_KEY = 'domma-mail.panes';
+/** Whether the full headers are showing. */
+const HEADERS_KEY = 'domma-mail.headers-open';
+/** The mailbox last looked at. */
+const ACCOUNT_KEY = 'domma-mail.account';
+/** Whether the list is grouped into conversations. */
+const THREADS_KEY = 'domma-mail.threads';
+
+/**
+ * How long a message stays open before it counts as read.
+ *
+ * Long enough that arrowing through a list does not mark everything it passed
+ * over, short enough that actually reading something always marks it.
+ */
+const MARK_READ_DELAY_MS = 1000;
+
+/** How long the undo strip stays on screen. */
+const UNDO_WINDOW_MS = 12_000;
+
+/**
+ * The keyword a spam filter sets, mirroring `JUNK_KEYWORD` in `_lib/mail/write.js`.
+ *
+ * Spelled out again rather than imported: this is browser code and that is
+ * server code, and a shared module for one string would be the longer way to
+ * the same place. It is the IMAP-conventional spelling, so it does not move.
+ */
+const JUNK_KEYWORD = '$Junk';
+
+/**
+ * What a mailbox that cannot send, or whose settings could not be fetched,
+ * looks like.
+ *
+ * A frozen object rather than null: every reader of it would otherwise need a
+ * null branch, and the one that forgot would be the one that threw inside a
+ * compose window someone was waiting on.
+ */
+const EMPTY_PROFILE = Object.freeze({
+    identities: [], mailboxAddress: '', templates: [], undoSendSeconds: 0
+});
+
+/**
+ * Make sure the shared stylesheet is on the page.
+ *
+ * It lives beside this module rather than in either plugin, so it cannot be
+ * declared through `plugin.json`'s `admin.css` - that builds hrefs under the
+ * plugin's own directory. Injecting it here keeps one copy for both editions,
+ * and the id makes it idempotent across mounts.
+ *
+ * @returns {void}
+ */
+function ensureStylesheet() {
+    const id = 'dm-mail-shared-css';
+    const href = `/plugins/_lib/admin/mail/mail.css?v=${assetVersion}`;
+    const existing = document.getElementById(id);
+    if (existing) {
+        // A newer plugin build means a newer token; swap rather than stack.
+        if (existing.getAttribute('href') !== href) existing.setAttribute('href', href);
+        return Promise.resolve();
+    }
+
+    const link = document.createElement('link');
+    link.id = id;
+    link.rel = 'stylesheet';
+    link.href = href;
+
+    // Resolved on load, because the layout is measured as soon as the view
+    // mounts. Measuring before this arrives forces a layout against styles
+    // that are not there yet - the browser says so, and the panes would be
+    // sized from the unstyled markup.
+    const ready = new Promise(resolve => {
+        link.addEventListener('load', resolve, {once: true});
+        link.addEventListener('error', resolve, {once: true});
+    });
+    document.head.appendChild(link);
+    return ready;
+}
+
+return {
+    templateUrl: `/plugins/_lib/admin/mail/mail.html?v=${assetVersion}`,
+
+    /**
+     * Mount the mail view.
+     *
+     * @param   {object} $container - Domma-wrapped container element
+     * @returns {Promise<void>}
+     */
+    async onMount($container) {
+        const stylesheetReady = ensureStylesheet();
+
+        // Held so onUnmount can detach the viewport listeners.
+        let stopFitting = null;
+        // ---------------------------------------------------------------
+        // State
+        // ---------------------------------------------------------------
+        let mailboxes = [];
+        let currentAccountId = null;
+        let folders = [];
+        let currentFolder = 'INBOX';
+        let messages = [];
+        /**
+         * Whether the list groups messages into conversations. Remembered,
+         * because it is a way of reading rather than a thing you do to one
+         * folder.
+         */
+        let threadsOn = (() => {
+            try {
+                return features.threads === true && S.get(THREADS_KEY) === true;
+            } catch {
+                return false;
+            }
+        })();
+        /** Conversation roots the reader has opened out. Not remembered. */
+        const expandedThreads = new Set();
+        /** The conversations behind the current page, so opening one is free. */
+        let threads = [];
+        let page = 1;
+        let total = 0;
+        let limit = 50;
+        /**
+         * The Contacts plugin's address book, or an empty list where it is not
+         * installed. Held here rather than fetched per compose window: the
+         * message menu needs it too, and it does not change while someone
+         * reads their mail.
+         */
+        let folderMenu = null;
+        let addressBook = [];
+        /**
+         * Everything the compose window needs to know about this mailbox, as
+         * a promise, fetched once per mailbox.
+         *
+         * A promise rather than a value because compose can be opened before
+         * any fetch would have landed, and a signature that is missing
+         * because the request was still in flight is a message sent wrong.
+         * Awaiting an in-flight or settled promise costs nothing; guessing
+         * costs the signature.
+         *
+         * One promise for three requests - identities, templates and the
+         * sending options - because they are wanted at the same moment, by
+         * the same window, and three separate caches would be three chances
+         * to invalidate two of them.
+         */
+        let profileRequest = null;
+        /** Which mailbox `profileRequest` belongs to. */
+        let profileFor = null;
+        /** Whether the message header block is expanded. Remembered. */
+        let headersOpen = (() => {
+            try {
+                return S.get(HEADERS_KEY) === true;
+            } catch {
+                return false;
+            }
+        })();
+        /** Whether Contacts is installed at all - not the same as it being empty. */
+        let contactsAvailable = false;
+        /**
+         * The open message. Observable because selecting one only changes two
+         * rows - the one leaving and the one arriving - and rebuilding the
+         * list to express that was always wasteful.
+         */
+        const selectedUid$ = M.observable(null);
+        /** Per-message "load images" overrides. Intentionally not persisted. */
+        const imagesAllowed = new Set();
+        /**
+         * Folder paths whose children are hidden, per mailbox. Remembered
+         * between visits - re-collapsing the same branches every time you open
+         * the reader would be the sort of thing that makes people stop using
+         * folders at all.
+         */
+        let collapsedByAccount = loadCollapsed();
+
+        /**
+         * Read remembered collapse state, tolerating anything stored badly.
+         *
+         * @returns {Object.<string, string[]>}
+         */
+        function loadCollapsed() {
+            try {
+                const stored = S.get(COLLAPSED_KEY);
+                return stored && typeof stored === 'object' ? stored : {};
+            } catch {
+                return {};
+            }
+        }
+
+        /** @returns {Set<string>} the current mailbox's collapsed paths */
+        function collapsedSet() {
+            return new Set(collapsedByAccount[currentAccountId] ?? []);
+        }
+
+        /**
+         * Toggle one folder open or shut and remember it.
+         *
+         * @param   {string} path
+         * @returns {void}
+         */
+        function toggleFolder(path) {
+            const set = collapsedSet();
+            if (set.has(path)) set.delete(path);
+            else set.add(path);
+            collapsedByAccount = {...collapsedByAccount, [currentAccountId]: [...set]};
+            try {
+                S.set(COLLAPSED_KEY, collapsedByAccount);
+            } catch {
+                // Storage unavailable - the fold still works for this visit.
+            }
+            renderFolders();
+        }
+
+        const foldersEl = $container.find('#mail-folders-list').get(0);
+        const listEl = $container.find('#mail-list').get(0);
+        const selectAllEl = $container.find('#mail-select-all').get(0);
+        const selectAllBox = $container.find('#mail-select-all-box').get(0);
+        const pagerEl = $container.find('#mail-pager').get(0);
+        const readerHeadEl = $container.find('#mail-reader-head').get(0);
+        const readerBodyEl = $container.find('#mail-reader-body').get(0);
+        const listTitleEl = $container.find('#mail-list-title').get(0);
+        const searchEl = $container.find('#mail-search').get(0);
+        const searchInputEl = $container.find('#mail-search-input').get(0);
+        const searchClearEl = $container.find('#mail-search-clear').get(0);
+        const searchNoteEl = $container.find('#mail-search-note').get(0);
+        const undoEl = $container.find('#mail-undo').get(0);
+        const selectionEl = $container.find('#mail-selection').get(0);
+        const unreadFilterEl = $container.find('#mail-unread-filter').get(0);
+        const unreadOnlyEl = $container.find('#mail-unread-only').get(0);
+        const threadsBtn = $container.find('#mail-threads-btn').get(0);
+        const outboxBtn = $container.find('#mail-outbox-btn').get(0);
+        const outboxCountEl = $container.find('#mail-outbox-count').get(0);
+        /** Show only folders that lead to unread mail. */
+        let unreadOnly = false;
+
+        /** The active search, or null when browsing a folder normally. */
+        let searchQuery = null;
+        /** The folder the open message lives in - not always the selected one. */
+        let openFolder = null;
+        /** Where the last message list came from: the mirror, or the server. */
+        let lastListSource = null;
+        /** Server-side limits, fetched once so the UI can enforce them early. */
+        let limits = {maxAttachmentBytes: 20_000_000};
+        /** Which pane the keyboard is driving. */
+        let pane = 'messages';
+        /** The row the keyboard is on, which is not always the open message. */
+        let cursorUid = null;
+        /** Held so the document listener can be taken off again. */
+        let keyboardHandler = null;
+        /** UIDs ticked for a bulk action. */
+        const selected = new Set();
+        /**
+         * Bumped whenever the selection moves.
+         *
+         * A Set is not observable, so the rows watch this instead - one
+         * assignment repaints the class list of every visible row without
+         * rebuilding any of them.
+         */
+        const selectionVersion$ = M.observable(0);
+        /** Where a shift-click measures its range from. */
+        let selectionAnchor = null;
+        /** Pending "mark as read" for the open message, if it is still unread. */
+        let markReadTimer = null;
+        /** The registered right-click menu, so it can be destroyed on unmount. */
+        let messageMenu = null;
+        /** Hides the undo strip once its moment has passed. */
+        let undoTimer = null;
+
+        /**
+         * Errors seen while this view has been open.
+         *
+         * Captured rather than asked for. "Anything in the console?" is a
+         * question that costs a round trip and usually gets "I think so" -
+         * this puts the actual text in the report.
+         */
+        const capturedErrors = [];
+        const captureError = event => {
+            if (capturedErrors.length >= 25) return;
+            capturedErrors.push({
+                at: new Date().toISOString(),
+                message: String(event?.message ?? event?.reason?.message ?? event?.reason ?? 'unknown'),
+                source: event?.filename ? `${event.filename}:${event.lineno ?? '?'}` : null
+            });
+        };
+        window.addEventListener('error', captureError);
+        window.addEventListener('unhandledrejection', captureError);
+
+        /**
+         * Live effects belonging to the rows currently on screen.
+         *
+         * Domma's reactivity is explicit about this: an effect is a node in the
+         * dependency graph and dropping its DOM does not drop it. The list is
+         * rebuilt on every folder change and every page, so without this the
+         * graph would grow by a row per render for the life of the view.
+         */
+        let rowEffects = [];
+
+        /**
+         * Tear down the row effects from the previous render.
+         *
+         * @returns {void}
+         */
+        function disposeRowEffects() {
+            for (const stop of rowEffects) {
+                // Domma's M.effect() hands back a plain disposer function.
+                // The standalone domma-reactive documents a Computation with
+                // .dispose(), so both shapes are honoured rather than trusting
+                // a README over the build actually loaded.
+                if (typeof stop === 'function') stop();
+                else stop?.dispose?.();
+            }
+            rowEffects = [];
+        }
+
+        // ---------------------------------------------------------------
+        // Shared UI helpers
+        // ---------------------------------------------------------------
+
+        /**
+         * Replace a pane with a centred message and an optional action.
+         *
+         * @param   {HTMLElement} el
+         * @param   {string} icon
+         * @param   {string} message
+         * @param   {{label: string, onClick: Function}} [action]
+         * @returns {void}
+         */
+        function showEmpty(el, icon, message, action) {
+            el.textContent = '';
+            const wrap = document.createElement('div');
+            wrap.className = 'mail-empty';
+
+            const iconEl = document.createElement('span');
+            iconEl.setAttribute('data-icon', icon);
+            iconEl.setAttribute('data-icon-size', '40');
+            wrap.appendChild(iconEl);
+
+            const p = document.createElement('p');
+            p.textContent = message;
+            wrap.appendChild(p);
+
+            if (action) {
+                const btn = document.createElement('button');
+                btn.className = 'btn btn-sm btn-primary';
+                btn.textContent = action.label;
+                btn.addEventListener('click', action.onClick);
+                wrap.appendChild(btn);
+            }
+
+            el.appendChild(wrap);
+            Domma.icons.scan(el);
+        }
+
+        /**
+         * Surface an error in the right place: a missing mailbox or an
+         * unopenable password are setup problems, everything else is a toast.
+         *
+         * @param   {Error} err
+         * @returns {void}
+         */
+        function handleError(err) {
+            if (err.needsSetup) {
+                showEmpty(listEl, 'settings', 'No mailbox is set up yet.', {
+                    label: 'Add a mailbox',
+                    onClick: () => openMailboxForm(null)
+                });
+                return;
+            }
+            if (err.needsPassword) {
+                E.toast(err.message, {type: 'warning', duration: 8000});
+                openSettings();
+                return;
+            }
+            E.toast(err.message || 'Something went wrong.', {type: 'error'});
+        }
+
+        /**
+         * Build one labelled input inside a container.
+         *
+         * @param   {HTMLElement} parent
+         * @param   {string} name
+         * @param   {string} label
+         * @param   {string} type
+         * @param   {string} value
+         * @param   {string} [hint]
+         * @returns {HTMLInputElement}
+         */
+        function field(parent, name, label, type, value, hint) {
+            const wrap = document.createElement('div');
+            const labelEl = document.createElement('label');
+            labelEl.className = 'form-label';
+            labelEl.textContent = label;
+            const input = document.createElement('input');
+            input.type = type;
+            input.className = 'form-input';
+            input.name = name;
+            input.value = value ?? '';
+            if (type === 'password') input.autocomplete = 'new-password';
+            wrap.appendChild(labelEl);
+            wrap.appendChild(input);
+            if (hint) {
+                const hintEl = document.createElement('div');
+                hintEl.className = 'text-xs text-muted mail-hint';
+                hintEl.textContent = hint;
+                wrap.appendChild(hintEl);
+            }
+            parent.appendChild(wrap);
+            return input;
+        }
+
+        // ---------------------------------------------------------------
+        // Mailbox settings
+        // ---------------------------------------------------------------
+
+        /**
+         * Open the mailbox list: every mailbox this user holds, plus Add.
+         *
+         * Content is real DOM appended to `slideover.element`; passing markup
+         * through setContent strips inputs and buttons.
+         *
+         * @returns {void}
+         */
+        /**
+         * Open the settings slideover.
+         *
+         * Built as sections rather than one form. The free edition has a
+         * single one - the mailbox list - and the Pro edition contributes
+         * folder selection, the poll schedule and, in time, sending and
+         * signatures. A growing flat form would be unreadable long before
+         * that; sections mean a new one is a registration rather than an edit
+         * to shared code.
+         *
+         * Tabs only appear when there is more than one section, so the free
+         * edition does not sprout a tab bar with nothing to switch to.
+         *
+         * @returns {void}
+         */
+        function openSettings() {
+            const slideover = E.slideover({title: 'Mail Settings', size: 'lg', position: 'right'});
+            // 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
+            // are opened for different things.
+            const stopSettingsResize = makeResizable(slideover, {
+                storageKey: 'domma-mail.settings-width',
+                defaultWidth: 760
+            });
+            slideover.on?.('close', () => stopSettingsResize());
+
+            const sections = [
+                {
+                    id: 'mailboxes',
+                    label: 'Mailboxes',
+                    icon: 'inbox',
+                    render: renderMailboxSection
+                },
+                // Blocking remote images is not a Pro feature, and neither is
+                // choosing to trust a sender, so both editions get this one.
+                imageSendersSection,
+                ...settingsSections,
+                // Last, because it is the one you open when something is wrong.
+                createDiagnosticsSection({
+                    recentErrors: () => [...capturedErrors],
+                    state: () => ({
+                        mailbox: mailboxes.find(b => b.id === currentAccountId)?.label ?? null,
+                        mailboxId: currentAccountId,
+                        folder: currentFolder,
+                        listSource: lastListSource,
+                        messagesShown: messages.length,
+                        totalInFolder: total,
+                        searching: searchQuery ?? null,
+                        openMessage: selectedUid$.value
+                    })
+                })
+            ];
+
+            const host = document.createElement('div');
+            host.className = 'mail-panel';
+
+            /**
+             * Everything a contributed section is handed.
+             *
+             * Deliberately small: the account it applies to, a way to call the
+             * plugin's own API, the form-field helper so sections look alike,
+             * and a way to say something changed.
+             *
+             * @returns {object}
+             */
+            function context() {
+                return {
+                    account: mailboxes.find(b => b.id === currentAccountId) ?? mailboxes[0] ?? null,
+                    mailboxes,
+                    base: BASE,
+                    api,
+                    // So a section can import a sibling module with the same
+                    // cache-busting token this view was loaded with. Without
+                    // it the section would fetch an unversioned copy and get
+                    // whatever the browser had cached.
+                    assetVersion,
+                    field,
+                    close: () => slideover.close(),
+                    /**
+                     * @param {{reload?: boolean}} [options]
+                     * @returns {Promise<void>}
+                     */
+                    async changed({reload = false} = {}) {
+                        // Unconditionally, whatever changed: several sections
+                        // now edit part of the sending profile - identities,
+                        // templates, how long Send is held - and a section
+                        // that has to remember to name what it invalidated is
+                        // a section that will one day forget.
+                        profileFor = null;
+                        refreshOutbox();
+                        if (reload) await start();
+                    }
+                };
+            }
+
+            /**
+             * Draw one section into a panel, tolerating a section that throws.
+             *
+             * @param   {object} section
+             * @param   {HTMLElement} panel
+             * @returns {Promise<void>}
+             */
+            async function draw(section, panel) {
+                panel.textContent = '';
+                try {
+                    await section.render(panel, context());
+                } catch (err) {
+                    const message = document.createElement('p');
+                    message.className = 'text-sm text-danger';
+                    message.textContent = err.message || 'This section could not be loaded.';
+                    panel.appendChild(message);
+                }
+                Domma.icons.scan(panel);
+            }
+
+            if (sections.length === 1) {
+                host.appendChild(document.createElement('div'));
+                draw(sections[0], host.lastChild);
+            } else {
+                const tabs = document.createElement('div');
+                tabs.className = 'tabs';
+
+                const list = document.createElement('div');
+                list.className = 'tab-list';
+                tabs.appendChild(list);
+
+                const panels = [];
+                sections.forEach((section, index) => {
+                    const trigger = document.createElement('button');
+                    trigger.className = 'tab-item' + (index === 0 ? ' active' : '');
+                    trigger.type = 'button';
+                    trigger.textContent = section.label;
+                    list.appendChild(trigger);
+
+                    const panel = document.createElement('div');
+                    panel.className = 'tab-panel' + (index === 0 ? ' active' : '');
+                    tabs.appendChild(panel);
+                    panels.push({section, panel, drawn: false});
+
+                    // Sections are drawn on first view, not up front: a folder
+                    // list means a round trip to the mail server, and opening
+                    // settings should not wait for tabs nobody looked at.
+                    trigger.addEventListener('click', () => {
+                        const entry = panels[index];
+                        if (entry.drawn) return;
+                        entry.drawn = true;
+                        draw(entry.section, entry.panel);
+                    });
+                });
+
+                host.appendChild(tabs);
+                slideover.element.appendChild(host);
+                E.tabs(tabs);
+                panels[0].drawn = true;
+                draw(panels[0].section, panels[0].panel);
+                slideover.open();
+                return;
+            }
+
+            slideover.element.appendChild(host);
+            slideover.open();
+        }
+
+        /**
+         * The mailbox list: what the free edition's settings consist of.
+         *
+         * @param   {HTMLElement} container
+         * @returns {void}
+         */
+        function renderMailboxSection(container) {
+            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.';
+                body.appendChild(empty);
+            }
+
+            for (const box of mailboxes) {
+                const row = document.createElement('div');
+                row.className = 'mail-box-row';
+
+                const info = document.createElement('div');
+                info.className = 'flex-1 mail-ellipsis';
+                const name = document.createElement('div');
+                name.className = 'font-semibold text-sm';
+                name.textContent = box.label;
+                const sub = document.createElement('div');
+                sub.className = 'text-xs text-muted mail-box-sub';
+                sub.textContent = `${box.username} \u00b7 ${box.host}:${box.port}${box.secure ? '' : ' (no TLS)'}`;
+                info.appendChild(name);
+                info.appendChild(sub);
+                row.appendChild(info);
+
+                const editBtn = document.createElement('button');
+                editBtn.className = 'btn btn-sm btn-ghost';
+                editBtn.textContent = 'Edit';
+                editBtn.addEventListener('click', () => openMailboxForm(box));
+
+                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'});
+                    }
+                });
+
+                row.appendChild(editBtn);
+                row.appendChild(removeBtn);
+                body.appendChild(row);
+            }
+
+            const addBtn = document.createElement('button');
+            addBtn.className = 'btn btn-sm btn-primary';
+            addBtn.classList.add('mail-add-btn');
+            addBtn.textContent = 'Add mailbox';
+            addBtn.addEventListener('click', () => openMailboxForm(null));
+            body.appendChild(addBtn);
+
+            container.appendChild(body);
+        }
+
+        /**
+         * Open the add/edit form for one mailbox.
+         *
+         * @param   {object|null} box - null to add
+         * @returns {void}
+         */
+        function openMailboxForm(box) {
+            const slideover = E.slideover({
+                title: box ? 'Edit Mailbox' : 'Add Mailbox',
+                size: 'md',
+                position: 'right'
+            });
+            const stopFormResize = makeResizable(slideover, {
+                storageKey: 'domma-mail.mailbox-form-width',
+                defaultWidth: 560
+            });
+            slideover.on?.('close', () => stopFormResize());
+
+            const form = document.createElement('div');
+            form.className = 'mail-form-stack';
+
+            const labelInput = field(form, 'label', 'Name', 'text', box?.label ?? '', 'What to call this mailbox.');
+            const hostInput = field(form, 'host', 'IMAP server', 'text', box?.host ?? '', 'e.g. mail.example.com');
+            const portInput = field(form, 'port', 'Port', 'number', String(box?.port ?? 993));
+            const userInput = field(form, 'username', 'Username', 'text', box?.username ?? '');
+            const passInput = field(
+                form, 'password', 'Password', 'password', '',
+                box?.hasPassword ? 'Leave blank to keep the saved password.' : ''
+            );
+
+            const secureWrap = document.createElement('label');
+            secureWrap.className = 'flex items-center gap-2 text-sm';
+            const secureInput = document.createElement('input');
+            secureInput.type = 'checkbox';
+            secureInput.checked = box ? box.secure !== false : true;
+            secureWrap.appendChild(secureInput);
+            secureWrap.appendChild(document.createTextNode('Use TLS (port 993)'));
+            form.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;
+            portInput.addEventListener('input', () => {
+                portTouched = true;
+            });
+            secureInput.addEventListener('change', () => {
+                if (!portTouched) portInput.value = secureInput.checked ? '993' : '143';
+            });
+
+            const status = document.createElement('div');
+            status.className = 'text-sm mail-status';
+
+            /**
+             * Say something under the outgoing-server form.
+             *
+             * A class rather than `style.color`, for the reason given
+             * throughout this file: an inline colour cannot read a `--dm-*`
+             * token that a theme override has redefined, so a status line
+             * set that way is the same shade in every theme.
+             *
+             * @param   {string} text
+             * @param   {'ok'|'bad'|'quiet'} [tone]
+             * @returns {void}
+             */
+            const say = (text, tone = 'quiet') => {
+                status.textContent = text ?? '';
+                status.className = 'text-sm mail-status '
+                    + ({ok: 'text-success', bad: 'text-danger'}[tone] ?? 'text-muted');
+            };
+            form.appendChild(status);
+
+            const actions = document.createElement('div');
+            actions.className = 'flex justify-between gap-2 mt-2';
+
+            const testBtn = document.createElement('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.className = 'btn btn-sm btn-ghost';
+            cancelBtn.textContent = 'Cancel';
+            const saveBtn = document.createElement('button');
+            saveBtn.className = 'btn btn-sm btn-primary';
+            saveBtn.textContent = 'Save';
+            right.appendChild(cancelBtn);
+            right.appendChild(saveBtn);
+
+            actions.appendChild(testBtn);
+            actions.appendChild(right);
+            form.appendChild(actions);
+
+            slideover.element.appendChild(form);
+            slideover.open();
+            setTimeout(() => hostInput.focus(), 50);
+
+            /**
+             * Collect the form into the shape the API expects.
+             *
+             * @returns {object}
+             */
+            function collect() {
+                return {
+                    ...(box ? {id: box.id} : {}),
+                    label: labelInput.value.trim(),
+                    host: hostInput.value.trim(),
+                    port: Number(portInput.value),
+                    secure: secureInput.checked,
+                    username: userInput.value.trim(),
+                    password: passInput.value
+                };
+            }
+
+            testBtn.addEventListener('click', async () => {
+                testBtn.disabled = true;
+                say('Connecting\u2026');
+                try {
+                    const result = await api(`${BASE}/accounts/test`, 'POST', collect());
+                    say(
+                        result.ok ? 'Connected successfully.' : result.error,
+                        result.ok ? 'ok' : 'bad'
+                    );
+                } catch (err) {
+                    say(err.message, 'bad');
+                } finally {
+                    testBtn.disabled = false;
+                }
+            });
+
+            cancelBtn.addEventListener('click', () => slideover.close());
+
+            saveBtn.addEventListener('click', async () => {
+                saveBtn.disabled = true;
+                try {
+                    const result = box
+                        ? await api(`${BASE}/accounts/${encodeURIComponent(box.id)}`, 'PUT', collect())
+                        : await api(`${BASE}/accounts`, 'POST', collect());
+                    slideover.close();
+                    E.toast('Mailbox saved.', {type: 'success'});
+                    currentAccountId = result.account.id;
+                    await start();
+                } catch (err) {
+                    say(err.message, 'bad');
+                } finally {
+                    saveBtn.disabled = false;
+                }
+            });
+        }
+
+        // ---------------------------------------------------------------
+        // Folders pane - mailboxes, with the selected one expanded
+        // ---------------------------------------------------------------
+
+        /**
+         * Draw the mailbox list and the selected mailbox's folders.
+         *
+         * @returns {void}
+         */
+        function renderFolders() {
+            foldersEl.textContent = '';
+
+            for (const box of mailboxes) {
+                const isCurrent = box.id === currentAccountId;
+
+                // With one mailbox the account row is noise, so it is only
+                // drawn when there is actually a choice to make.
+                if (mailboxes.length > 1) {
+                    const accountBtn = document.createElement('button');
+                    accountBtn.className = 'mail-account' + (isCurrent ? ' is-active' : '');
+
+                    const icon = document.createElement('span');
+                    icon.setAttribute('data-icon', isCurrent ? 'chevron-down' : 'chevron-right');
+                    icon.setAttribute('data-icon-size', '13');
+                    accountBtn.appendChild(icon);
+
+                    const name = document.createElement('span');
+                    name.className = 'mail-account-name';
+                    name.textContent = box.label;
+                    name.title = `${box.username} · ${box.host}`;
+                    accountBtn.appendChild(name);
+
+                    accountBtn.addEventListener('click', () => selectAccount(box.id));
+                    foldersEl.appendChild(accountBtn);
+                }
+
+                if (!isCurrent) continue;
+
+                const collapsed = collapsedSet();
+                const tree = buildFolderTree(folders);
+                const shown = unreadOnly ? pruneToUnread(tree) : tree;
+
+                if (unreadOnly && !shown.length) {
+                    const none = document.createElement('p');
+                    none.className = 'text-sm text-muted mail-none';
+                    none.textContent = 'No unread mail in this mailbox.';
+                    foldersEl.appendChild(none);
+                    continue;
+                }
+
+                for (const folder of flattenFolderTree(shown, collapsed)) {
+                    const btn = document.createElement('button');
+                    // The folder menu resolves its target from this.
+                    btn.dataset.path = folder.path;
+                    btn.className = 'mail-folder'
+                        + (folder.path === currentFolder ? ' is-active' : '')
+                        + (folder.selectable ? '' : ' is-unselectable');
+
+                    // Indent by depth, plus one level when a mailbox row sits
+                    // above these folders to indent them under.
+                    const level = folder.depth + (mailboxes.length > 1 ? 1 : 0);
+                    if (level) btn.style.paddingLeft = `${0.6 + level * 0.9}rem`;
+
+                    // A disclosure control only where there is something to
+                    // disclose; a spacer elsewhere so the icons stay in line.
+                    const toggle = document.createElement('span');
+                    toggle.className = 'mail-folder-toggle';
+                    if (folder.children.length) {
+                        const isShut = collapsed.has(folder.path);
+                        toggle.setAttribute('data-icon', isShut ? 'chevron-right' : 'chevron-down');
+                        toggle.setAttribute('data-icon-size', '12');
+                        toggle.title = isShut ? `Show folders inside ${folder.name}` : `Hide folders inside ${folder.name}`;
+                    }
+                    btn.appendChild(toggle);
+
+                    const icon = document.createElement('span');
+                    icon.setAttribute('data-icon', iconForFolder(folder));
+                    icon.setAttribute('data-icon-size', '14');
+                    btn.appendChild(icon);
+
+                    const name = document.createElement('span');
+                    name.className = 'mail-folder-name';
+                    name.textContent = folder.name;
+                    // The full path is the only way to tell two folders with
+                    // the same leaf name apart.
+                    // The full path is the only way to tell two folders with
+                    // 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;
+                    btn.appendChild(name);
+
+                    if (folder.contextOnly) btn.classList.add('is-context');
+                    // Listed but dimmed rather than absent: a folder nobody
+                    // can see is a folder nobody can unhide.
+                    if (folder.subscribed === false) btn.classList.add('is-hidden-folder');
+
+                    // A collapsed folder shows what is unread beneath it too -
+                    // its own count alone would claim a hidden branch is read.
+                    const isShut = collapsed.has(folder.path);
+                    const count = isShut ? unreadInSubtree(folder) : (folder.unseen ?? 0);
+                    if (count > 0) {
+                        const pill = document.createElement('span');
+                        pill.className = 'mail-unread-pill';
+                        pill.textContent = count > 999 ? '999+' : String(count);
+                        pill.title = isShut && count !== (folder.unseen ?? 0)
+                            ? `${count} unread in this folder and below`
+                            : `${count} unread`;
+                        btn.appendChild(pill);
+                    }
+
+                    // One handler, two gestures: the chevron folds, the rest of
+                    // the row opens the folder. A nested <button> inside a
+                    // <button> would be invalid markup, so the target decides.
+                    btn.addEventListener('click', event => {
+                        if (folder.children.length && event.target.closest('.mail-folder-toggle')) {
+                            toggleFolder(folder.path);
+                            return;
+                        }
+                        if (folder.selectable) selectFolder(folder);
+                        else if (folder.children.length) toggleFolder(folder.path);
+                    });
+                    // An unselectable level can still be folded, so it is only
+                    // inert when it has no children either.
+                    if (!folder.selectable && !folder.children.length) btn.disabled = true;
+
+                    if (features.write) makeDropTarget(btn, folder);
+
+                    foldersEl.appendChild(btn);
+                }
+            }
+
+            Domma.icons.scan(foldersEl);
+        }
+
+        /**
+         * Remember which mailbox is being looked at.
+         *
+         * Someone with a work mailbox and a personal one is almost always
+         * coming back to the same one, and defaulting to whichever the server
+         * happened to list first means re-choosing it on every visit.
+         *
+         * @param   {string|null} accountId
+         * @returns {void}
+         */
+        function rememberAccount(accountId) {
+            try {
+                if (accountId) S.set(ACCOUNT_KEY, accountId);
+            } catch { /* the choice still holds for this session */ }
+        }
+
+        /**
+         * The mailbox to open with.
+         *
+         * The remembered one, but only if it still exists - a mailbox that has
+         * since been deleted would otherwise leave the view pointing at
+         * nothing, with every request 404ing and no obvious way back.
+         *
+         * @returns {string|null}
+         */
+        function preferredAccount() {
+            let saved = null;
+            try {
+                saved = S.get(ACCOUNT_KEY);
+            } catch { /* fall through to the first mailbox */ }
+            if (saved && mailboxes.some(b => b.id === saved)) return saved;
+            return mailboxes[0]?.id ?? null;
+        }
+
+        /**
+         * Switch mailbox: reload its folders and open its inbox.
+         *
+         * @param   {string} accountId
+         * @returns {Promise<void>}
+         */
+        async function selectAccount(accountId) {
+            if (accountId === currentAccountId) return;
+            currentAccountId = accountId;
+            rememberAccount(accountId);
+            selectedUid$.value = null;
+            page = 1;
+            clearReader();
+            await loadFolders();
+        }
+
+        /**
+         * Switch folder and reload from page 1.
+         *
+         * @param   {object} folder - a node from the folder tree
+         * @returns {Promise<void>}
+         */
+        async function selectFolder(folder) {
+            clearSelection();
+            searchQuery = null;
+            if (searchInputEl) searchInputEl.value = '';
+            if (searchClearEl) searchClearEl.hidden = true;
+            note(null);
+            currentFolder = folder.path;
+            page = 1;
+            selectedUid$.value = null;
+            listTitleEl.textContent = headingFor(folder);
+            renderFolders();
+            clearReader();
+            await loadMessages();
+        }
+
+        /**
+         * Heading for a folder, naming its mailbox when there is more than one.
+         *
+         * @param   {object} folder
+         * @returns {string}
+         */
+        function headingFor(folder) {
+            const label = mailboxes.length > 1
+                ? mailboxes.find(b => b.id === currentAccountId)?.label ?? null
+                : null;
+            return folderHeading(folder.path, folder.delimiter, label);
+        }
+
+        // ---------------------------------------------------------------
+        // Message list
+        // ---------------------------------------------------------------
+
+        /**
+         * Fetch and draw the current page.
+         *
+         * @returns {Promise<void>}
+         */
+        async function loadMessages() {
+            if (searchQuery) return runSearch();
+            if (threadsOn) return loadThreads();
+
+            const loader = E.loader(listEl, {type: 'dots'});
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: currentFolder,
+                    page: String(page)
+                });
+                const result = await api(`${BASE}/messages?${params}`);
+                lastListSource = result.source ?? 'imap';
+                messages = result.messages;
+                total = result.total;
+                limit = result.limit;
+                renderList();
+                renderPager();
+            } catch (err) {
+                handleError(err);
+            } finally {
+                loader.destroy();
+            }
+        }
+
+        /**
+         * Fetch and draw the current page as conversations.
+         *
+         * A conversation can only be assembled from a folder that is
+         * mirrored - it is built from every message in the folder at once,
+         * which is exactly what fetching on demand cannot do. An unmirrored
+         * folder therefore falls back to the flat list and says so, rather
+         * than showing a list that quietly is not grouped.
+         *
+         * @returns {Promise<void>}
+         */
+        async function loadThreads() {
+            const loader = E.loader(listEl, {type: 'dots'});
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: currentFolder,
+                    page: String(page)
+                });
+                const result = await api(`${BASE}/threads?${params}`);
+
+                if (!result.mirrored) {
+                    note('This folder is not mirrored, so it cannot be grouped into conversations.');
+                    // 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.
+                    const flat = await api(`${BASE}/messages?${params}`);
+                    lastListSource = flat.source ?? 'imap';
+                    messages = flat.messages;
+                    total = flat.total;
+                    limit = flat.limit;
+                } else {
+                    note(null);
+                    lastListSource = 'store';
+                    threads = result.threads;
+                    messages = flattenThreads(threads);
+                    total = result.total;
+                    limit = result.limit ?? limit;
+                }
+
+                renderList();
+                renderPager();
+            } catch (err) {
+                handleError(err);
+            } finally {
+                loader.destroy();
+            }
+        }
+
+        /**
+         * Conversations as a list of rows.
+         *
+         * The newest message of each, plus the rest of any conversation the
+         * reader has opened out. One flat array, because everything
+         * downstream - the keyboard cursor, the selection, drag and drop -
+         * works on rows, and giving it a tree would mean teaching all of it
+         * about one.
+         *
+         * @param   {object[]} list
+         * @returns {object[]}
+         */
+        function flattenThreads(list) {
+            const rows = [];
+            for (const thread of list ?? []) {
+                if (!thread.latest) continue;
+                rows.push({
+                    ...thread.latest,
+                    thread: {
+                        root: thread.root,
+                        count: thread.count,
+                        unseen: thread.unseen,
+                        open: expandedThreads.has(thread.root)
+                    }
+                });
+                if (!expandedThreads.has(thread.root)) continue;
+                for (const message of thread.messages.slice(1)) {
+                    rows.push({...message, inThread: thread.root});
+                }
+            }
+            return rows;
+        }
+
+        /**
+         * Open or close one conversation.
+         *
+         * Redrawn from the threads already in hand - every message came with
+         * the page, so opening one out is not another round trip.
+         *
+         * @param   {string} root
+         * @returns {void}
+         */
+        function toggleThread(root) {
+            if (expandedThreads.has(root)) expandedThreads.delete(root);
+            else expandedThreads.add(root);
+            messages = flattenThreads(threads);
+            renderList();
+        }
+
+        /**
+         * Turn conversation grouping on or off.
+         *
+         * @returns {Promise<void>}
+         */
+        async function toggleThreads() {
+            threadsOn = !threadsOn;
+            expandedThreads.clear();
+            page = 1;
+            try {
+                S.set(THREADS_KEY, threadsOn);
+            } catch {
+                // A browser refusing storage is not a reason to refuse the
+                // setting for this visit.
+            }
+            paintThreadsButton();
+            await loadMessages();
+        }
+
+        /**
+         * @returns {void}
+         */
+        function paintThreadsButton() {
+            if (!threadsBtn) return;
+            threadsBtn.classList.toggle('is-on', threadsOn);
+            threadsBtn.setAttribute('aria-pressed', String(threadsOn));
+            threadsBtn.title = threadsOn
+                ? 'Showing conversations - click for single messages'
+                : 'Group messages into conversations';
+        }
+
+        /**
+         * Run the active search and draw its results.
+         *
+         * @returns {Promise<void>}
+         */
+        async function runSearch() {
+            const loader = E.loader(listEl, {type: 'dots'});
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    q: searchQuery,
+                    page: String(page)
+                });
+                const result = await api(`${BASE}/search?${params}`);
+
+                messages = result.messages;
+                total = result.total;
+                limit = result.limit ?? limit;
+                renderList();
+                renderPager();
+
+                if (result.tooShort) {
+                    note('Type at least two characters.');
+                } else {
+                    // Say what was actually searched. Only mirrored folders are
+                    // here, so a silent partial result would be a lie - the
+                    // message someone is looking for may be in a folder they
+                    // never chose to mirror.
+                    const covered = result.searchedFolders ?? [];
+                    const scope = covered.length
+                        ? `Searched ${covered.length} mirrored folder${covered.length === 1 ? '' : 's'}: ${covered.join(', ')}.`
+                        : 'No folders are mirrored yet, so there is nothing to search.';
+                    note(`${result.total} result${result.total === 1 ? '' : 's'}. ${scope}`);
+                }
+            } catch (err) {
+                handleError(err);
+            } finally {
+                loader.destroy();
+            }
+        }
+
+        /**
+         * Show or hide the line under the search box.
+         *
+         * @param   {string|null} text
+         * @returns {void}
+         */
+        function note(text) {
+            if (!searchNoteEl) return;
+            searchNoteEl.textContent = text ?? '';
+            searchNoteEl.hidden = !text;
+        }
+
+        /**
+         * Leave search and go back to the open folder.
+         *
+         * @returns {Promise<void>}
+         */
+        async function clearSearch() {
+            searchQuery = null;
+            page = 1;
+            if (searchInputEl) searchInputEl.value = '';
+            if (searchClearEl) searchClearEl.hidden = true;
+            note(null);
+            await loadMessages();
+        }
+
+        /**
+         * Draw the envelope list.
+         *
+         * @returns {void}
+         */
+        function renderList() {
+            disposeRowEffects();
+            listEl.textContent = '';
+
+            // The box describes this page, so it is repainted whenever the
+            // page changes - not only when the selection does.
+            paintSelectAll();
+            listEl.classList.toggle('is-selecting', selected.size > 0);
+
+            if (!messages.length) {
+                showEmpty(listEl, 'inbox', 'This folder is empty.');
+                return;
+            }
+
+            for (const message of messages) {
+                // One observable per message, made once and kept on it, so a
+                // flag change is a value assignment that repaints a single row
+                // rather than a reason to rebuild the whole list.
+                message.flags$ ??= M.observable(message.flags ?? []);
+
+                const item = document.createElement('button');
+                item.className = 'mail-item';
+                // A reply shown under the conversation it belongs to, rather
+                // than as a row of its own. Indented, so the shape of the
+                // list says which is which without a legend.
+                if (message.inThread) item.classList.add('is-in-thread');
+                item.dataset.uid = String(message.uid);
+                item.dataset.folder = message.folder ?? currentFolder;
+                if (features.write) makeDraggable(item, message);
+                // Rebuilt on every render, so a native title rather than a
+                // registered tooltip instance - see the E.tooltip call for why.
+                item.title = features.write
+                    ? 'Click to open \u00b7 ctrl-click to select \u00b7 drag to a folder \u00b7 right-click for actions'
+                    : 'Click to open';
+
+                // A span with the checkbox role, not an <input>: the row is a
+                // <button>, and a nested interactive element inside one is
+                // invalid markup that the browser will not let you click
+                // anyway. Same resolution as the folder disclosure chevron -
+                // one element, and the click target decides what happened.
+                const tick = document.createElement('span');
+                tick.className = 'mail-item-tick';
+                tick.setAttribute('role', 'checkbox');
+                rowEffects.push(M.effect(() => {
+                    const on = selectionVersion$.value >= 0 && selected.has(message.uid);
+                    tick.setAttribute('aria-checked', String(on));
+                    tick.title = on ? 'Deselect this message' : 'Select this message';
+
+                    // The glyph goes in a CHILD and the parent is scanned.
+                    // `Domma.icons.scan` REPLACES each `[data-icon]` element
+                    // with an <svg>, so putting the attribute on the tick
+                    // itself swapped the tick out from under this effect -
+                    // and an SVGElement has no `.click()`, so the hit area
+                    // stopped being one. Same shape as the row's meta icons.
+                    tick.textContent = '';
+                    const glyph = document.createElement('span');
+                    glyph.setAttribute('data-icon', on ? 'check-square' : 'square');
+                    glyph.setAttribute('data-icon-size', '15');
+                    tick.appendChild(glyph);
+                    Domma.icons.scan(tick);
+                }));
+                item.appendChild(tick);
+
+                const top = document.createElement('div');
+                top.className = 'mail-item-top';
+
+                const from = document.createElement('span');
+                from.className = 'mail-item-from';
+                from.textContent = formatAddresses(message.from) || '(unknown sender)';
+                top.appendChild(from);
+
+                const date = document.createElement('span');
+                date.className = 'mail-item-date';
+                date.textContent = formatDate(message.date);
+                top.appendChild(date);
+
+                item.appendChild(top);
+
+                // Everything about this row that can change while it is on
+                // screen, in one effect: read state, star, and whether it is
+                // the open message.
+                rowEffects.push(M.effect(() => {
+                    const flags = message.flags$.value;
+                    item.classList.toggle('is-unread', !flags.includes('\\Seen'));
+                    item.classList.toggle('is-active', message.uid === selectedUid$.value);
+                    item.classList.toggle('is-selected', selectionVersion$.value >= 0 && selected.has(message.uid));
+                }));
+
+                const subject = document.createElement('div');
+                subject.className = 'mail-item-subject';
+                subject.textContent = message.subject || '(no subject)';
+                item.appendChild(subject);
+
+                // How many messages this row stands for, and the way into
+                // them. Only ever drawn on a conversation of more than one -
+                // a chip reading "1" on every row is noise with a number in
+                // it.
+                if (message.thread && message.thread.count > 1) {
+                    const chip = document.createElement('span');
+                    chip.className = 'mail-thread-chip';
+                    chip.setAttribute('role', 'button');
+                    chip.textContent = message.thread.open
+                        ? `\u25be ${message.thread.count}`
+                        : `\u25b8 ${message.thread.count}`;
+                    chip.title = message.thread.open
+                        ? 'Hide the rest of this conversation'
+                        : `Show all ${message.thread.count} messages in this conversation`;
+                    if (message.thread.unseen > 0) chip.classList.add('is-unread');
+                    // The row is a <button>, so this cannot be one - same
+                    // resolution as the selection tick above. The row's own
+                    // click handler checks for it and stops there.
+                    chip.dataset.thread = message.thread.root;
+                    subject.appendChild(chip);
+                }
+
+                const meta = document.createElement('div');
+                meta.className = 'mail-item-meta';
+                item.appendChild(meta);
+
+                rowEffects.push(M.effect(() => {
+                    const flags = message.flags$.value;
+                    meta.textContent = '';
+                    for (const [condition, icon, title, cls] of [
+                        // Only the unusual levels are drawn. A marker on every
+                        // ordinary message would say nothing and cost a row of
+                        // attention each time.
+                        [message.priority === 'high', 'arrow-up', 'High priority', 'is-high'],
+                        [message.priority === 'low', 'arrow-down', 'Low priority', 'is-low'],
+                        [flags.includes('\\Answered'), 'corner-up-left', 'Replied to', ''],
+                        [flags.includes('\\Flagged'), 'flag', 'Starred', ''],
+                        [message.hasAttachment, 'paperclip', 'Has an attachment', '']
+                    ]) {
+                        if (!condition) continue;
+                        // The glyph goes in a child, again: `icons.scan`
+                        // REPLACES each [data-icon] element with an <svg>, so
+                        // a title or a class set on that element is thrown
+                        // away with it. The markers that came before this
+                        // carried neither, which is why it never showed.
+                        const holder = document.createElement('span');
+                        if (title) holder.title = title;
+                        if (cls) holder.classList.add(cls);
+                        const iconEl = document.createElement('span');
+                        iconEl.setAttribute('data-icon', icon);
+                        iconEl.setAttribute('data-icon-size', '12');
+                        holder.appendChild(iconEl);
+                        meta.appendChild(holder);
+                    }
+                    Domma.icons.scan(meta);
+                }));
+
+                // A search spans folders, so a result carries its own - opening
+                // it against whatever folder is selected would look for the
+                // UID in the wrong mailbox and 404.
+                item.addEventListener('click', event => {
+                    // The conversation chip opens the thread out rather than
+                    // opening the message, whatever else is held. Checked
+                    // first for the same reason the tick is: aiming at a
+                    // control and getting something else is the worst
+                    // possible answer.
+                    const chipTarget = event.target.closest('.mail-thread-chip');
+                    if (chipTarget) {
+                        event.stopPropagation();
+                        toggleThread(chipTarget.dataset.thread);
+                        return;
+                    }
+                    // The tick is a selection gesture whatever else is held:
+                    // aiming at a checkbox and getting the message opened
+                    // would be the worst possible answer.
+                    if (event.target.closest('.mail-item-tick')) {
+                        event.stopPropagation();
+                        if (event.shiftKey) selectRangeTo(message.uid);
+                        else toggleSelected(message.uid);
+                        return;
+                    }
+                    // Modified clicks build a selection; a plain click opens,
+                    // which is the gesture people use ninety times in a
+                    // hundred and must stay the simplest one.
+                    if (event.ctrlKey || event.metaKey) {
+                        toggleSelected(message.uid);
+                        return;
+                    }
+                    if (event.shiftKey) {
+                        selectRangeTo(message.uid);
+                        return;
+                    }
+                    if (selected.size) clearSelection();
+                    openMessage(message.uid, message.folder);
+                });
+                listEl.appendChild(item);
+            }
+
+            Domma.icons.scan(listEl);
+        }
+
+        /**
+         * Add or remove one message from the selection.
+         *
+         * @param   {number} uid
+         * @returns {void}
+         */
+        function toggleSelected(uid) {
+            if (selected.has(uid)) selected.delete(uid);
+            else selected.add(uid);
+            selectionAnchor = uid;
+            selectionChanged();
+        }
+
+        /**
+         * Select everything between the anchor and this message.
+         *
+         * Uses the order on screen rather than UID order: what a person means
+         * by "everything between these two" is what they can see between them.
+         *
+         * @param   {number} uid
+         * @returns {void}
+         */
+        function selectRangeTo(uid) {
+            if (selectionAnchor === null) {
+                toggleSelected(uid);
+                return;
+            }
+            const order = messages.map(m => m.uid);
+            const from = order.indexOf(selectionAnchor);
+            const to = order.indexOf(uid);
+            if (from === -1 || to === -1) {
+                toggleSelected(uid);
+                return;
+            }
+            for (let i = Math.min(from, to); i <= Math.max(from, to); i++) selected.add(order[i]);
+            selectionChanged();
+        }
+
+        /**
+         * @returns {void}
+         */
+        function clearSelection() {
+            selected.clear();
+            selectionAnchor = null;
+            selectionChanged();
+        }
+
+        /**
+         * Keep the select-all box in step with the rows.
+         *
+         * Three states, not two: none, some, all. The indeterminate one is
+         * what stops a half-selected list claiming to be empty, and it is the
+         * state someone is in most of the time they look at it.
+         *
+         * @returns {void}
+         */
+        function paintSelectAll() {
+            if (!selectAllBox || !selectAllEl) return;
+            // Nothing to select all of. Hidden rather than disabled: an empty
+            // list has no selection to describe, so the control says nothing.
+            selectAllEl.hidden = !features.write || messages.length === 0;
+
+            const count = messages.filter(m => selected.has(m.uid)).length;
+            selectAllBox.checked = count > 0 && count === messages.length;
+            selectAllBox.indeterminate = count > 0 && count < messages.length;
+            selectAllBox.title = selectAllBox.checked
+                ? 'Deselect every message on this page'
+                : 'Select every message on this page';
+        }
+
+        /**
+         * Select or clear every message on this page.
+         *
+         * This page, deliberately, not every message in the folder - the box
+         * sits above a list of fifty and selecting four thousand unseen
+         * messages is not what ticking it looks like it does.
+         *
+         * @returns {void}
+         */
+        function toggleSelectAll() {
+            const all = messages.every(m => selected.has(m.uid));
+            if (all) {
+                for (const message of messages) selected.delete(message.uid);
+                selectionAnchor = null;
+            } else {
+                for (const message of messages) selected.add(message.uid);
+            }
+            selectionChanged();
+        }
+
+        /**
+         * Repaint the rows and the bar after the selection moved.
+         *
+         * The rows watch an observable rather than being rebuilt, so a
+         * selection of fifty repaints fifty class lists and nothing else.
+         *
+         * @returns {void}
+         */
+        function selectionChanged() {
+            selectionVersion$.value = selectionVersion$.value + 1;
+            // Ticks are revealed on hover while nothing is selected, so an
+            // untouched list stays as quiet as it was - and stay put once
+            // something is, because a list being worked on should look like
+            // one.
+            listEl?.classList.toggle('is-selecting', selected.size > 0);
+            paintSelectAll();
+            renderSelectionBar();
+        }
+
+        /**
+         * The bar that appears while something is selected.
+         *
+         * @returns {void}
+         */
+        function renderSelectionBar() {
+            if (!selectionEl) return;
+            if (!selected.size) {
+                selectionEl.hidden = true;
+                selectionEl.textContent = '';
+                return;
+            }
+
+            selectionEl.textContent = '';
+            selectionEl.hidden = false;
+
+            const label = document.createElement('span');
+            label.textContent = `${selected.size} selected`;
+            selectionEl.appendChild(label);
+
+            const act = (text, fn) => {
+                const button = document.createElement('button');
+                button.className = 'btn btn-sm btn-ghost';
+                button.textContent = text;
+                button.addEventListener('click', async () => {
+                    button.disabled = true;
+                    try {
+                        await fn();
+                    } catch (err) {
+                        E.toast(err.message || 'That could not be done.', {type: 'error'});
+                    } finally {
+                        button.disabled = false;
+                    }
+                });
+                selectionEl.appendChild(button);
+            };
+
+            act('Mark read', () => bulkFlags({add: ['\\Seen']}));
+            act('Mark unread', () => bulkFlags({remove: ['\\Seen']}));
+            act('Star', () => bulkFlags({add: ['\\Flagged']}));
+            // Offer each way only where it means something. A selection can
+            // straddle both - some already marked, some not - so both buttons
+            // can appear together, and each acts on the whole selection.
+            const chosen = messages.filter(m => selected.has(m.uid));
+            if (junkFolder() && chosen.some(m => !messageIsSpam(m))) {
+                act('Spam', () => bulkSpam(true));
+            }
+            if (chosen.some(m => messageIsSpam(m))) {
+                act('Not spam', () => bulkSpam(false));
+            }
+            act('Delete', () => bulkDelete());
+            act('Clear', () => clearSelection());
+        }
+
+        /**
+         * Flag everything selected, in one request.
+         *
+         * @param   {{add?: string[], remove?: string[]}} change
+         * @returns {Promise<void>}
+         */
+        async function bulkFlags(change) {
+            const uids = [...selected];
+            const params = new URLSearchParams({account: currentAccountId ?? '', folder: currentFolder});
+            const result = await api(`${BASE}/messages/flags?${params}`, 'POST', {uids, ...change});
+
+            let unreadDelta = 0;
+            for (const {uid, flags} of result.updated ?? []) {
+                const row = messages.find(m => m.uid === uid);
+                if (!row) continue;
+                const wasSeen = row.seen === true;
+                const nowSeen = flags.includes('\\Seen');
+                if (wasSeen !== nowSeen) unreadDelta += nowSeen ? -1 : 1;
+                row.flags = flags;
+                row.seen = nowSeen;
+                row.flagged = flags.includes('\\Flagged');
+                row.flags$ ? (row.flags$.value = flags) : null;
+            }
+            if (unreadDelta) adjustUnread(currentFolder, unreadDelta);
+            clearSelection();
+        }
+
+        /**
+         * Mark everything selected as spam, or as not spam, with one undo.
+         *
+         * @param   {boolean} spam
+         * @returns {Promise<void>}
+         */
+        async function bulkSpam(spam) {
+            const uids = [...selected];
+            const source = currentFolder;
+            const params = new URLSearchParams({account: currentAccountId ?? '', folder: source});
+            const result = await api(`${BASE}/messages/spam?${params}`, 'POST', {uids, spam});
+
+            if (!result.movedTo) {
+                for (const {uid, flags} of result.updated ?? []) applyFlagsToRow(uid, flags);
+                E.toast(`${result.count} marked as ${spam ? 'spam' : 'not spam'}.`, {type: 'success'});
+                clearSelection();
+                return;
+            }
+
+            for (const uid of uids) removeFromList(uid);
+            clearSelection();
+
+            const mapped = Object.values(result.uidMap ?? {});
+            offerUndo(
+                `${result.count} moved to ${result.movedTo}.`,
+                mapped.length
+                    ? async () => {
+                        const back = new URLSearchParams({account: currentAccountId ?? '', folder: result.movedTo});
+                        await api(`${BASE}/messages/move?${back}`, 'POST', {uids: mapped, destination: source});
+                        await loadMessages();
+                    }
+                    : null
+            );
+        }
+
+        /**
+         * Delete everything selected, with one undo for the lot.
+         *
+         * @returns {Promise<void>}
+         */
+        async function bulkDelete() {
+            const uids = [...selected];
+            if (!await E.confirm(`Delete ${uids.length} message${uids.length === 1 ? '' : 's'}?`)) return;
+
+            const source = currentFolder;
+            const params = new URLSearchParams({account: currentAccountId ?? '', folder: source});
+            const result = await api(`${BASE}/messages/delete?${params}`, 'POST', {uids});
+
+            for (const uid of uids) removeFromList(uid);
+            clearSelection();
+
+            const mapped = Object.values(result.uidMap ?? {});
+            if (result.expunged) {
+                offerUndo(`${result.deleted} deleted from the server. This cannot be undone.`, null);
+            } else {
+                offerUndo(
+                    `${result.deleted} moved to ${result.movedTo}.`,
+                    mapped.length
+                        ? async () => {
+                            const back = new URLSearchParams({account: currentAccountId ?? '', folder: result.movedTo});
+                            await api(`${BASE}/messages/move?${back}`, 'POST', {uids: mapped, destination: source});
+                            await loadMessages();
+                        }
+                        : null
+                );
+            }
+        }
+
+        /**
+         * Draw the pager.
+         *
+         * @returns {void}
+         */
+        function renderPager() {
+            pagerEl.textContent = '';
+            const pages = Math.max(1, Math.ceil(total / limit));
+
+            const prev = document.createElement('button');
+            prev.className = 'btn btn-sm btn-ghost';
+            prev.textContent = 'Newer';
+            prev.disabled = page <= 1;
+            prev.addEventListener('click', () => {
+                page -= 1;
+                loadMessages();
+            });
+
+            const label = document.createElement('span');
+            label.textContent = total ? `${page} / ${pages} · ${total} messages` : 'No messages';
+
+            const next = document.createElement('button');
+            next.className = 'btn btn-sm btn-ghost';
+            next.textContent = 'Older';
+            next.disabled = page >= pages;
+            next.addEventListener('click', () => {
+                page += 1;
+                loadMessages();
+            });
+
+            pagerEl.appendChild(prev);
+            pagerEl.appendChild(label);
+            pagerEl.appendChild(next);
+        }
+
+        // ---------------------------------------------------------------
+        // Reader
+        // ---------------------------------------------------------------
+
+        /**
+         * Reset the reader pane to its empty state.
+         *
+         * @returns {void}
+         */
+        function clearReader() {
+            cancelMarkRead();
+            readerHeadEl.textContent = '';
+            showEmpty(readerBodyEl, 'mail', 'Select a message to read it.');
+        }
+
+        /**
+         * Fetch and display one message.
+         *
+         * @param   {number} uid
+         * @returns {Promise<void>}
+         */
+        async function openMessage(uid, folder = null) {
+            // A draft is not something to read, it is something to finish.
+            // Only where this edition can send: the free reader has no compose
+            // window to open, and showing the raw draft is the honest fallback.
+            const row = messages.find(m => m.uid === uid);
+            if (features.send && isDraft(row ? {...row, folder: folder ?? currentFolder} : null)) {
+                cursorUid = uid;
+                selectedUid$.value = uid;
+                await editDraft({...row, folder: folder ?? currentFolder});
+                return;
+            }
+
+            cancelMarkRead();
+            cursorUid = uid;
+            pane = 'messages';
+            selectedUid$.value = uid;
+            // Remembered so the body, its images and its attachments all
+            // resolve against the folder the message is actually in.
+            openFolder = folder ?? currentFolder;
+
+            const loader = E.loader(readerBodyEl, {type: 'dots'});
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: openFolder
+                });
+                if (imagesAllowed.has(uid)) params.set('images', 'load');
+                const message = await api(`${BASE}/messages/${uid}?${params}`);
+                renderMessage(message);
+
+                // Opening mail marks it read after a pause, not instantly.
+                // Arrowing through a list would otherwise mark everything it
+                // passed over, and the delay is the difference between reading
+                // something and glancing at it.
+                //
+                // Only where the edition can write at all: the free reader's
+                // guarantee is that looking at mail never changes it, and that
+                // must not be quietly lost by sharing this view.
+                const row = messages.find(m => m.uid === uid);
+                if (features.write && row && row.seen === false) {
+                    const forFolder = openFolder;
+                    markReadTimer = setTimeout(() => {
+                        markReadTimer = null;
+                        // Still the message on screen? If the user moved on
+                        // during the pause, they did not read this one.
+                        if (selectedUid$.value !== uid) return;
+                        changeFlags({...message, folder: forFolder}, {add: ['\\Seen']})
+                            .catch(() => {/* not worth interrupting a read for */});
+                    }, MARK_READ_DELAY_MS);
+                }
+            } catch (err) {
+                handleError(err);
+            } finally {
+                loader.destroy();
+            }
+        }
+
+        /**
+         * Draw a fetched message into the reader pane.
+         *
+         * @param   {object} message
+         * @returns {void}
+         */
+        function renderMessage(message) {
+            readerHeadEl.textContent = '';
+
+            const subject = document.createElement('h2');
+            subject.className = 'mail-reader-subject';
+            subject.textContent = message.subject || '(no subject)';
+            readerHeadEl.appendChild(subject);
+
+            // Write actions, only for an edition that has them. The free
+            // reader cannot change a mailbox at all, so it must not offer to.
+            if (features.write) {
+                const actions = document.createElement('div');
+                actions.className = 'mail-reader-actions';
+
+                const current = messages.find(m => m.uid === message.uid);
+                const flags = current?.flags$ ? current.flags$.value : (current?.flags ?? []);
+                const isSeen = flags.includes('\\Seen');
+                const isFlagged = flags.includes('\\Flagged');
+
+                actions.appendChild(actionButton(
+                    isFlagged ? 'Unstar' : 'Star',
+                    isFlagged ? 'star-filled' : 'star',
+                    () => changeFlags(message, isFlagged ? {remove: ['\\Flagged']} : {add: ['\\Flagged']}),
+                    `${isFlagged ? 'Remove the star from' : 'Star'} this message (s)`
+                ));
+                actions.appendChild(actionButton(
+                    isSeen ? 'Mark unread' : 'Mark read',
+                    'mail',
+                    () => changeFlags(message, isSeen ? {remove: ['\\Seen']} : {add: ['\\Seen']}),
+                    `Mark this message ${isSeen ? 'unread' : 'read'} (u)`
+                ));
+
+                if (features.send) {
+                    actions.appendChild(actionButton('Reply', 'corner-up-left',
+                        () => compose(message, 'reply'), 'Reply to the sender (r)'));
+                    actions.appendChild(actionButton('Reply all', 'corner-up-right',
+                        () => compose(message, 'replyAll'), 'Reply to everyone (Shift-R)'));
+                    actions.appendChild(actionButton('Forward', 'send',
+                        () => compose(message, 'forward'), 'Forward to someone else (f)'));
+                }
+
+                if (features.snooze) {
+                    actions.appendChild(actionButton('Snooze', 'clock',
+                        () => snooze(message), 'Put this out of sight until later'));
+                }
+
+                // Only on mail that actually offers it. A permanently dead
+                // Unsubscribe button on every personal message would be worse
+                // than not having one: it teaches people it never works.
+                if (message.unsubscribe?.available) {
+                    actions.appendChild(actionButton(
+                        'Unsubscribe',
+                        'user-minus',
+                        () => unsubscribe(message),
+                        message.unsubscribe.oneClick
+                            ? 'This list supports one-click unsubscribe'
+                            : 'Opens the list\u2019s own unsubscribe page or message'
+                    ));
+                }
+
+                readerHeadEl.appendChild(actions);
+            }
+
+            readerHeadEl.appendChild(buildHeaderBlock(message));
+
+            readerBodyEl.textContent = '';
+
+            if (message.blockedImages > 0 && !message.remoteImagesLoaded) {
+                const notice = document.createElement('div');
+                notice.className = 'mail-notice';
+
+                const text = document.createElement('span');
+                const count = message.blockedImages;
+                text.textContent = `${count} remote image${count === 1 ? '' : 's'} blocked. Loading them tells the sender you opened this message.`;
+                notice.appendChild(text);
+
+                const loadBtn = document.createElement('button');
+                loadBtn.className = 'btn btn-sm btn-ghost';
+                loadBtn.textContent = 'Load images';
+                loadBtn.addEventListener('click', () => {
+                    imagesAllowed.add(message.uid);
+                    openMessage(message.uid, message.folder ?? openFolder);
+                });
+                notice.appendChild(loadBtn);
+
+                // The remembered version is a separate, explicit act rather
+                // than a side effect of the button next to it: one is a
+                // decision about this message, the other about every message
+                // this sender ever sends.
+                if (message.canTrustSender && message.trustableSender) {
+                    const trustBtn = document.createElement('button');
+                    trustBtn.className = 'btn btn-sm btn-ghost';
+                    trustBtn.textContent = `Always from ${message.trustableSender}`;
+                    trustBtn.addEventListener('click', async () => {
+                        trustBtn.disabled = true;
+                        try {
+                            const params = new URLSearchParams({account: currentAccountId ?? ''});
+                            await api(`${BASE}/image-senders?${params}`, 'POST',
+                                {address: message.trustableSender});
+                            E.toast(`Images from ${message.trustableSender} will load from now on.`,
+                                {type: 'success'});
+                            openMessage(message.uid, message.folder ?? openFolder);
+                        } catch (err) {
+                            E.toast(err.message, {type: 'error'});
+                            trustBtn.disabled = false;
+                        }
+                    });
+                    notice.appendChild(trustBtn);
+                }
+
+                readerBodyEl.appendChild(notice);
+            }
+
+            if (message.attachments.length) {
+                const wrap = document.createElement('div');
+                wrap.className = 'mail-attachments';
+                for (const attachment of message.attachments) {
+                    const group = document.createElement('span');
+                    group.className = 'mail-attachment';
+
+                    const btn = document.createElement('button');
+                    btn.className = 'btn btn-sm btn-ghost';
+                    btn.textContent = `${attachment.filename} (${formatSize(attachment.size)})`;
+                    btn.title = 'Download this file';
+                    btn.addEventListener('click', () => downloadAttachment(message.uid, attachment));
+                    group.appendChild(btn);
+
+                    // Straight into the media library, which is the thing a
+                    // mail client inside a CMS can do and a webmail client
+                    // cannot. The server decides whether the type is one that
+                    // may be saved - see `_lib/mail/handoff.js`, which is
+                    // deliberately stricter than the CMS's own upload rules.
+                    if (features.handoff) {
+                        const save = document.createElement('button');
+                        save.className = 'btn btn-sm btn-ghost mail-attachment-save';
+                        save.title = `Save ${attachment.filename} to the media library`;
+                        const glyph = document.createElement('span');
+                        glyph.setAttribute('data-icon', 'image-plus');
+                        glyph.setAttribute('data-icon-size', '13');
+                        save.appendChild(glyph);
+                        save.addEventListener('click', async () => {
+                            save.disabled = true;
+                            await attachmentToMedia(message, attachment, attachment.index);
+                            save.disabled = false;
+                        });
+                        group.appendChild(save);
+                    }
+
+                    wrap.appendChild(group);
+                }
+                readerBodyEl.appendChild(wrap);
+                Domma.icons.scan(wrap);
+            }
+
+            // The message renders in a sandboxed iframe with neither
+            // allow-scripts nor allow-same-origin, so its content has no script
+            // execution and no origin to reach back into the admin with.
+            // allow-popups is there only so its links can open in a new tab.
+            //
+            // Loaded by `src`, never `srcdoc`: a srcdoc document inherits the
+            // admin's CSP, whose img-src is 'self' data: blob:, so every remote
+            // image was blocked before it was even requested and "Load images"
+            // could not work. Fetched from a route, the body carries its own
+            // policy.
+            const frame = document.createElement('iframe');
+            frame.setAttribute('sandbox', 'allow-popups allow-popups-to-escape-sandbox');
+            frame.setAttribute('referrerpolicy', 'no-referrer');
+            frame.src = message.bodyUrl;
+            readerBodyEl.appendChild(frame);
+        }
+
+        /**
+         * Keyboard navigation.
+         *
+         * Bound to the view's own container rather than the document, so it
+         * stops applying the moment the user is somewhere else in the admin.
+         * The mapping itself lives in keyboard.js and is tested there.
+         *
+         * @returns {void}
+         */
+        function attachKeyboard() {
+            const root = $container.get(0);
+            if (!root) return;
+
+            // On the document, not the container: a keypress lands on whatever
+            // has focus, which at rest is the body - a container listener only
+            // ever hears keys pressed while something inside it already had
+            // focus, which is exactly the case that does not need shortcuts.
+            // Guarded on the container still being in the page, and removed on
+            // unmount, so it never speaks for another admin screen.
+            keyboardHandler = event => {
+                if (!root.isConnected) return;
+                if (isTyping(event.target) || !isPlainKey(event)) return;
+
+                const intent = resolveKey(event, {pane});
+                if (!intent) return;
+
+                // Claimed only once something is going to happen with it -
+                // an unbound key must still scroll the page.
+                event.preventDefault();
+                runIntent(intent);
+            };
+            document.addEventListener('keydown', keyboardHandler);
+
+            // Clicking into a pane is also a statement about where the
+            // keyboard should apply.
+            foldersEl?.addEventListener('mousedown', () => { pane = 'folders'; });
+            listEl?.addEventListener('mousedown', () => { pane = 'messages'; });
+        }
+
+        /**
+         * Carry out what a keypress meant.
+         *
+         * @param   {{action: string, delta?: number}} intent
+         * @returns {void}
+         */
+        function runIntent(intent) {
+            const open = messages.find(m => m.uid === (cursorUid ?? selectedUid$.value));
+
+            switch (intent.action) {
+                case 'moveMessage':
+                    moveCursor(intent.delta);
+                    break;
+                case 'moveFolder':
+                    moveFolderCursor(intent.delta);
+                    break;
+                case 'enterFolder': {
+                    const focused = foldersEl?.querySelector('.mail-folder:focus');
+                    if (focused) focused.click();
+                    pane = 'messages';
+                    focusCursor();
+                    break;
+                }
+                case 'focusFolders':
+                    pane = 'folders';
+                    (foldersEl?.querySelector('.mail-folder.is-active')
+                        ?? foldersEl?.querySelector('.mail-folder'))?.focus();
+                    break;
+                case 'focusReader':
+                    readerBodyEl?.querySelector('iframe')?.focus();
+                    break;
+                case 'openMessage':
+                    if (cursorUid !== null) {
+                        const row = messages.find(m => m.uid === cursorUid);
+                        if (row) openMessage(row.uid, row.folder);
+                    }
+                    break;
+                case 'toggleUnread':
+                    if (open && features.write) {
+                        const seen = open.seen === true;
+                        changeFlags(open, seen ? {remove: ['\\Seen']} : {add: ['\\Seen']});
+                    }
+                    break;
+                case 'toggleStar':
+                    if (open && features.write) {
+                        const starred = open.flagged === true;
+                        changeFlags(open, starred ? {remove: ['\\Flagged']} : {add: ['\\Flagged']});
+                    }
+                    break;
+                case 'reply':
+                case 'replyAll':
+                case 'forward':
+                    if (open && features.send) compose(open, intent.action);
+                    break;
+                case 'compose':
+                    if (features.send) {
+                        identitySoon().then(profile => openCompose(composeOptions(profile, {
+                            mode: 'new'
+                        // Without this the window failing to build is an
+                        // unhandled rejection in the console and a key that
+                        // looks broken.
+                        }))).catch(err => E.toast(err.message || 'Compose could not be opened.', {type: 'error'}));
+                    }
+                    break;
+                case 'toggleSelect':
+                    // The keyboard way in, which until now did not exist:
+                    // selecting needed a mouse and a modifier, so a tablet
+                    // could not select at all.
+                    if (features.write && cursorUid !== null) toggleSelected(cursorUid);
+                    break;
+                case 'selectAll':
+                    if (features.write) toggleSelectAll();
+                    break;
+                case 'spam':
+                    // Which direction is the message's business, not the
+                    // key's: something already marked has only one sensible
+                    // meaning left, which is "this isn't spam".
+                    if (open && features.write) {
+                        const already = messageIsSpam(open);
+                        if (already || junkFolder()) markSpam(open, !already);
+                    }
+                    break;
+                case 'delete':
+                    if (open && features.write) deleteMessage(open);
+                    break;
+                case 'search':
+                    searchInputEl?.focus();
+                    break;
+                case 'escape':
+                    if (selected.size) clearSelection();
+                    else if (searchQuery) clearSearch();
+                    break;
+                case 'help':
+                    showShortcuts();
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        /**
+         * Move the cursor through the message list.
+         *
+         * Moving is not opening: a cursor that opened every message it passed
+         * would mark a folder read on the way down, which is the whole reason
+         * the read delay exists.
+         *
+         * @param   {number} delta
+         * @returns {void}
+         */
+        function moveCursor(delta) {
+            if (!messages.length) return;
+            const order = messages.map(m => m.uid);
+            const current = order.indexOf(cursorUid ?? selectedUid$.value);
+            const next = current === -1
+                ? (delta > 0 ? 0 : order.length - 1)
+                : Math.min(order.length - 1, Math.max(0, current + delta));
+            cursorUid = order[next];
+            focusCursor();
+        }
+
+        /**
+         * Put the browser's focus on the cursor row, so it scrolls into view
+         * and screen readers follow along.
+         *
+         * @returns {void}
+         */
+        function focusCursor() {
+            if (cursorUid === null && messages.length) cursorUid = messages[0].uid;
+            const row = listEl?.querySelector(`.mail-item[data-uid="${cursorUid}"]`);
+            row?.focus({preventScroll: false});
+        }
+
+        /**
+         * Move through the folder list.
+         *
+         * @param   {number} delta
+         * @returns {void}
+         */
+        function moveFolderCursor(delta) {
+            const rows = [...(foldersEl?.querySelectorAll('.mail-folder:not([disabled])') ?? [])];
+            if (!rows.length) return;
+            const current = rows.findIndex(r => r === document.activeElement);
+            const next = current === -1
+                ? (delta > 0 ? 0 : rows.length - 1)
+                : Math.min(rows.length - 1, Math.max(0, current + delta));
+            rows[next].focus();
+        }
+
+        /**
+         * The shortcut list, on demand.
+         *
+         * @returns {void}
+         */
+        function showShortcuts() {
+            const modal = E.slideover({title: 'Keyboard shortcuts', size: 'sm', position: 'right'});
+            const list = document.createElement('div');
+            list.className = 'mail-kv';
+            for (const [keys, what] of SHORTCUTS) {
+                const row = document.createElement('div');
+                row.className = 'mail-kv-row text-sm';
+                const k = document.createElement('code');
+                k.className = 'mail-kv-key';
+                k.textContent = keys;
+                const d = document.createElement('span');
+                d.textContent = what;
+                row.appendChild(k);
+                row.appendChild(d);
+                list.appendChild(row);
+            }
+            modal.element.appendChild(list);
+            modal.open();
+        }
+
+        /**
+         * Right-click actions on a message.
+         *
+         * Registered with Domma rather than on a private `contextmenu`
+         * listener. Domma keeps one document listener and resolves a
+         * right-click by walking outward from the target, so the nearest menu
+         * answers and script load order cannot decide the winner - a private
+         * listener here would fight whatever else the page has registered.
+         *
+         * `inherit: false` because a message's actions and whatever encloses
+         * the list are not one list. Items are rebuilt per gesture, since what
+         * they say depends on the message under the pointer.
+         *
+         * @returns {void}
+         */
+        function attachMessageMenu() {
+            // Called as a method, not lifted into a variable: it keeps its
+            // instance registry on `this`, so an unbound reference throws on
+            // the first right-click - and, being inside onMount, takes the
+            // whole view down with it.
+            const elements = (typeof E !== 'undefined' && E?.contextMenu) ? E
+                : (typeof Domma !== 'undefined' ? Domma?.elements : null);
+            if (typeof elements?.contextMenu !== 'function') return;
+
+            messageMenu = elements.contextMenu(listEl, {
+                match: '.mail-item',
+                inherit: false,
+                items: [],
+                onBeforeOpen: (ctx) => {
+                    const row = ctx?.target?.closest?.('.mail-item');
+                    if (!row) return false;
+                    const uid = Number(row.dataset.uid);
+                    const message = messages.find(m => m.uid === uid);
+                    if (!message) return false;
+                    messageMenu.setItems(messageMenuItems(message, row.dataset.folder));
+                    return true;
+                }
+            });
+        }
+
+        /**
+         * The items for one message.
+         *
+         * Both halves of each pair are always listed, with the inapplicable
+         * one disabled rather than dropped. A menu that changes shape
+         * depending on what was clicked is disorienting, and greyed-out is
+         * what a native menu does.
+         *
+         * @param   {object} message
+         * @param   {string} folder
+         * @returns {object[]}
+         */
+        function messageMenuItems(message, folder) {
+            const flags = message.flags$ ? message.flags$.value : (message.flags ?? []);
+            const isSeen = flags.includes('\\Seen');
+            const isFlagged = flags.includes('\\Flagged');
+            const target = {...message, folder};
+            // Two ways a message is already spam: filed in Junk, or carrying
+            // the keyword where a server-side filter marked it without moving
+            // it. Both need a way back, and only the folder was obvious.
+            const isSpam = messageIsSpam(target);
+            const senderKnown = isKnownAddress(addressBook, (message.from ?? [])[0]?.address);
+
+            // Nested, like the folder pane, rather than a flat list of full
+            // paths: `Work.Contracts.2026` reads as a string to be parsed, and
+            // sorting by root puts siblings pages apart once there are more
+            // than a handful of folders.
+            const moveTargets = folderMenuItems(buildFolderTree(folders), {
+                current: folder,
+                onPick: path => moveTo(target, path)
+            });
+
+            return [
+                // The one item here that is hidden rather than greyed out
+                // when it does not apply. The rest are pairs, where a disabled
+                // half says which way the message already is; this has no
+                // counterpart, so on ordinary mail it would be a permanently
+                // dead row on every right-click in every folder.
+                ...(features.send && isDraft(target) ? [
+                    {
+                        label: 'Edit draft',
+                        icon: 'edit-3',
+                        action: () => editDraft(target)
+                    },
+                    {type: 'separator'}
+                ] : []),
+                {
+                    label: 'Mark as read',
+                    icon: 'mail-open',
+                    disabled: () => isSeen,
+                    action: () => changeFlags(target, {add: ['\\Seen']})
+                },
+                {
+                    label: 'Mark as unread',
+                    icon: 'mail',
+                    disabled: () => !isSeen,
+                    action: () => changeFlags(target, {remove: ['\\Seen']})
+                },
+                {type: 'separator'},
+                {
+                    label: 'Star',
+                    icon: 'star',
+                    disabled: () => isFlagged,
+                    action: () => changeFlags(target, {add: ['\\Flagged']})
+                },
+                {
+                    label: 'Unstar',
+                    icon: 'star-filled',
+                    disabled: () => !isFlagged,
+                    action: () => changeFlags(target, {remove: ['\\Flagged']})
+                },
+                ...(contactsAvailable ? [
+                    {
+                        label: 'Add sender to contacts',
+                        icon: 'user-plus',
+                        // Greyed rather than hidden once they are known, which
+                        // is also how you find out they already are.
+                        disabled: () => senderKnown,
+                        action: () => addSender(message)
+                    },
+                    {type: 'separator'}
+                ] : []),
+                {type: 'separator'},
+                {
+                    label: 'Mark as spam',
+                    icon: 'shield-alert',
+                    // Greyed out rather than hidden when it is already filed
+                    // as junk, the same as every other pair in this menu.
+                    disabled: () => isSpam || !junkFolder(),
+                    action: () => markSpam(target, true)
+                },
+                {
+                    label: 'Not spam',
+                    icon: 'shield-check',
+                    disabled: () => !isSpam,
+                    action: () => markSpam(target, false)
+                },
+                {type: 'separator'},
+                ...(features.snooze ? [{
+                    label: 'Snooze\u2026',
+                    icon: 'clock',
+                    action: () => snooze(target)
+                }] : []),
+                {
+                    label: 'Move to',
+                    icon: 'folder',
+                    // Nowhere to move to is a reason to grey it out, not to
+                    // hide it and leave someone wondering where it went.
+                    disabled: () => moveTargets.length === 0,
+                    submenu: moveTargets
+                },
+                ...(features.handoff ? [
+                    {type: 'separator'},
+                    {
+                        label: 'Save to the site',
+                        icon: 'layout',
+                        submenu: [
+                            {
+                                label: 'As a draft page',
+                                icon: 'file-text',
+                                action: () => messageToPage(target)
+                            },
+                            {
+                                label: 'As a collection entry\u2026',
+                                icon: 'database',
+                                action: () => messageToEntry(target)
+                            }
+                        ]
+                    }
+                ] : []),
+                {type: 'separator'},
+                {
+                    label: 'Delete',
+                    icon: 'trash',
+                    danger: true,
+                    action: () => deleteMessage(target)
+                }
+            ];
+        }
+
+        /**
+         * Move a message, and take it out of the list it is leaving.
+         *
+         * @param   {object} message
+         * @param   {string} destination
+         * @returns {Promise<void>}
+         */
+        async function moveTo(message, destination) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? currentFolder
+                });
+                const source = message.folder ?? currentFolder;
+                const result = await api(`${BASE}/messages/${message.uid}/move?${params}`, 'POST', {destination});
+                removeFromList(message.uid);
+                offerUndo(
+                    `Moved to ${destination}.`,
+                    result.newUid
+                        ? () => undoMove({uid: result.newUid, from: destination, to: source})
+                        : null
+                );
+            } catch (err) {
+                E.toast(err.message || 'That message could not be moved.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Where this account keeps junk, by SPECIAL-USE.
+         *
+         * The folder list already carries it, so the menu can decide whether
+         * marking as spam is even possible without a round trip. The server
+         * resolves it again for itself - this is only what to grey out.
+         *
+         * @returns {string|null}
+         */
+        function junkFolder() {
+            return folders.find(f => f.specialUse === '\\Junk')?.path ?? null;
+        }
+
+        /**
+         * Fetch the address book, if this site has Contacts at all.
+         *
+         * Never awaited by anything on the critical path: mail must open at
+         * the same speed whether or not an optional plugin answers.
+         *
+         * @returns {Promise<void>}
+         */
+        async function refreshContacts() {
+            const book = await loadContacts(api);
+            addressBook = book.contacts;
+            contactsAvailable = book.available;
+        }
+
+        /**
+         * The open mailbox's sending identity.
+         *
+         * Cached per mailbox and re-fetched when the mailbox changes, because
+         * a display name and a signature belong to an address, not to a
+         * person - someone writing from two mailboxes signs off differently
+         * from each.
+         *
+         * Never rejects: a mailbox with no identity route (the free edition)
+         * or a request that failed answers null, and a message without a
+         * signature is worth far more than a compose window that would not
+         * open.
+         *
+         * @returns {Promise<object|null>}
+         */
+        function identity() {
+            if (!features.send || !currentAccountId) return Promise.resolve(EMPTY_PROFILE);
+            if (profileFor !== currentAccountId) {
+                profileFor = currentAccountId;
+                const params = new URLSearchParams({account: currentAccountId});
+                // All three at once, and none of them able to fail the set:
+                // a mailbox with no templates must still get its signature,
+                // and a site whose templates route is somehow unreachable
+                // must still be able to compose.
+                profileRequest = Promise.all([
+                    api(`${BASE}/identities?${params}`).catch(() => null),
+                    api(`${BASE}/templates?${params}`).catch(() => null),
+                    api(`${BASE}/sending?${params}`).catch(() => null)
+                ]).then(([identities, templates, sending]) => ({
+                    identities: identities?.identities ?? [],
+                    mailboxAddress: identities?.mailboxAddress ?? '',
+                    templates: templates?.templates ?? [],
+                    undoSendSeconds: sending?.undoSendSeconds ?? 0
+                })).catch(() => EMPTY_PROFILE);
+            }
+            return profileRequest;
+        }
+
+        /**
+         * The identity, or null if it is taking too long to matter.
+         *
+         * Compose is a window someone is waiting on, and `api()` has no
+         * timeout - a mail server that hangs would otherwise mean a Compose
+         * button that does nothing at all, with nothing said about why. The
+         * prefetch in `loadFolders` means this has almost always resolved
+         * long before anyone clicks, so the ceiling is a backstop rather
+         * than a delay anybody meets.
+         *
+         * Said out loud when it bites. A message quietly going out without
+         * the signature the sender believes is on it is the one outcome
+         * worse than waiting.
+         *
+         * @returns {Promise<object|null>}
+         */
+        function identitySoon() {
+            if (!features.send || !currentAccountId) return Promise.resolve(EMPTY_PROFILE);
+            let timer = null;
+            return Promise.race([
+                identity().then(who => { clearTimeout(timer); return who; }),
+                new Promise(resolve => {
+                    timer = setTimeout(() => {
+                        E.toast('Your signature could not be loaded, so this message does not carry one.',
+                            {type: 'warning'});
+                        resolve(EMPTY_PROFILE);
+                    }, 4000);
+                })
+            ]);
+        }
+
+        /**
+         * The common half of every compose window.
+         *
+         * Four different things open one - the button, the keyboard, a reply
+         * and a reopened draft - and every one of them needs the same six
+         * arguments. Spelled out four times, five of them would eventually be
+         * right in three places.
+         *
+         * @param   {object} profile - from `identitySoon()`
+         * @param   {object} extra - what makes this window different
+         * @returns {object}
+         */
+        function composeOptions(profile, extra = {}) {
+            return {
+                base: BASE,
+                accountId: currentAccountId,
+                api,
+                maxAttachmentBytes: limits.maxAttachmentBytes,
+                contacts: addressBook,
+                identities: profile?.identities ?? [],
+                mailboxAddress: profile?.mailboxAddress ?? '',
+                templates: profile?.templates ?? [],
+                undoSeconds: profile?.undoSendSeconds ?? 0,
+                onSent: () => loadMessages(),
+                onQueued: (result) => offerRecall(result),
+                ...extra
+            };
+        }
+
+        /**
+         * A message has been queued rather than sent. Offer to stop it.
+         *
+         * Reuses the undo strip a move or a delete puts up, because it is the
+         * same promise: something happened, and there is a moment in which it
+         * can be unhappened. The message is handed back whole on cancel and
+         * the window reopens with everything in it - an Undo that destroyed
+         * the message would be worse than no Undo.
+         *
+         * @param   {{id: string, at: string, isUndo: boolean}} result
+         * @returns {void}
+         */
+        function offerRecall(result) {
+            const when = describeWhen(result.at);
+            // On screen until the message actually goes, plus a moment - and
+            // never less than the ordinary window, so a five second hold does
+            // not flash past.
+            const until = new Date(result.at).getTime() - Date.now() + 2000;
+            offerUndo(
+                result.isUndo ? `Sending ${when}\u2026` : `Scheduled to send ${when}.`,
+                async () => {
+                    const cancelled = await api(`${BASE}/outbox/${result.id}`, 'DELETE');
+                    const profile = await identitySoon();
+                    openCompose(composeOptions(profile, {
+                        draft: {...cancelled.draft, identityId: cancelled.identityId},
+                        mode: 'edit'
+                    }));
+                },
+                // A scheduled send can be days out; the strip is not a
+                // countdown, so it keeps the ordinary window in that case.
+                {ms: result.isUndo ? Math.max(UNDO_WINDOW_MS, until) : UNDO_WINDOW_MS}
+            );
+            // A scheduled message is not in Drafts and not in Sent, so
+            // nothing in the list changes - but the outbox count in the
+            // header does.
+            refreshOutbox();
+        }
+
+        // ---------------------------------------------------------------
+        // The outbox
+        // ---------------------------------------------------------------
+
+        /**
+         * Count what is waiting to be sent, and what is put away.
+         *
+         * Cheap, quiet and best-effort: the header badge is a convenience,
+         * and a mailbox whose outbox cannot be read should still read mail.
+         *
+         * @returns {Promise<void>}
+         */
+        async function refreshOutbox() {
+            if (!features.send || !outboxBtn || !currentAccountId) return;
+            try {
+                const params = new URLSearchParams({account: currentAccountId});
+                const [outbox, snoozed] = await Promise.all([
+                    api(`${BASE}/outbox?${params}`).catch(() => null),
+                    api(`${BASE}/snoozed?${params}`).catch(() => null)
+                ]);
+
+                // `sending` counts as waiting: it is in flight, not gone, and
+                // a row the worker is holding must not disappear from the
+                // badge while it is being retried.
+                const waiting = (outbox?.queued ?? [])
+                    .filter(row => ['pending', 'sending'].includes(row.status)).length;
+                const failed = (outbox?.queued ?? []).filter(row => row.status === 'failed').length;
+                const asleep = (snoozed?.snoozed ?? []).length;
+                const total = waiting + asleep;
+
+                outboxBtn.hidden = total === 0 && failed === 0;
+                if (outboxCountEl) outboxCountEl.textContent = total ? ` ${total}` : '';
+                // A failed send is the one thing here worth colouring: it is
+                // a message the sender believes has gone.
+                outboxBtn.classList.toggle('is-failed', failed > 0);
+                outboxBtn.title = failed
+                    ? `${failed} message${failed === 1 ? '' : 's'} could not be sent`
+                    : `${waiting} waiting to send, ${asleep} snoozed`;
+            } catch {
+                // Nothing to say. The badge is a convenience.
+            }
+        }
+
+        /**
+         * The outbox and the snoozed list, in one panel.
+         *
+         * Both are "mail that is not where you would look for it", which is
+         * one question however many queues answer it.
+         *
+         * @returns {Promise<void>}
+         */
+        async function showOutbox() {
+            const slideover = E.slideover({title: 'Waiting', size: 'md', position: 'right'});
+            const host = document.createElement('div');
+            host.className = 'mail-panel-stack';
+            slideover.element.appendChild(host);
+            slideover.open();
+
+            /**
+             * @returns {Promise<void>}
+             */
+            async function draw() {
+                host.textContent = '';
+                const params = new URLSearchParams({account: currentAccountId ?? ''});
+                const [outbox, snoozed] = await Promise.all([
+                    api(`${BASE}/outbox?${params}`).catch(() => ({queued: []})),
+                    api(`${BASE}/snoozed?${params}`).catch(() => ({snoozed: []}))
+                ]);
+
+                host.appendChild(section('Waiting to send', (outbox.queued ?? []).map(row => ({
+                    title: row.subject || '(no subject)',
+                    detail: row.status === 'pending'
+                        ? `To ${formatAddresses(row.to) || 'nobody'} \u00b7 ${describeWhen(row.at)}`
+                        : `${row.status}${row.error ? ` \u2013 ${row.error}` : ''}`,
+                    failed: row.status === 'failed',
+                    // Which buttons appear is the server's decision
+                    // (`canRetry` / `canCancel`), so the screen cannot offer
+                    // an action the route would then refuse.
+                    actions: [
+                        ...(row.canRetry ? [
+                        [row.status === 'failed' ? 'Try again' : 'Send now', async () => {
+                            await api(`${BASE}/outbox/${row.id}/send-now`, 'POST');
+                            await draw();
+                            refreshOutbox();
+                        }]] : []),
+                        ...(row.canCancel ? [
+                        ['Cancel', async () => {
+                            const cancelled = await api(`${BASE}/outbox/${row.id}`, 'DELETE');
+                            await draw();
+                            refreshOutbox();
+                            // Reopened rather than discarded: a cancel that
+                            // destroyed the message would be a worse outcome
+                            // than the send it prevented.
+                            const profile = await identitySoon();
+                            openCompose(composeOptions(profile, {
+                                draft: {...cancelled.draft, identityId: cancelled.identityId},
+                                mode: 'edit'
+                            }));
+                        }]] : [])
+                    ]
+                })), 'Nothing is waiting to send.'));
+
+                host.appendChild(section('Snoozed', (snoozed.snoozed ?? []).map(row => ({
+                    title: row.subject || '(no subject)',
+                    detail: row.status === 'failed'
+                        ? `Could not be brought back \u2013 ${row.error ?? 'unknown reason'}`
+                        : `Back in ${row.returnTo} ${describeWhen(row.at)}`,
+                    failed: row.status === 'failed',
+                    actions: [
+                        ['Bring back now', async () => {
+                            await api(`${BASE}/snoozed/${row.id}/wake`, 'POST');
+                            await draw();
+                            refreshOutbox();
+                            await loadMessages();
+                        }]
+                    ]
+                })), 'Nothing is snoozed.'));
+            }
+
+            /**
+             * @param   {string} heading
+             * @param   {object[]} rows
+             * @param   {string} empty
+             * @returns {HTMLElement}
+             */
+            function section(heading, rows, empty) {
+                const wrap = document.createElement('div');
+
+                const title = document.createElement('h4');
+                title.className = 'mail-section-heading';
+                title.textContent = heading;
+                wrap.appendChild(title);
+
+                if (!rows.length) {
+                    const none = document.createElement('p');
+                    none.className = 'text-sm text-muted mail-none';
+                    none.textContent = empty;
+                    wrap.appendChild(none);
+                    return wrap;
+                }
+
+                for (const row of rows) {
+                    const item = document.createElement('div');
+                    item.className = 'mail-box-row';
+
+                    const text = document.createElement('div');
+                    text.className = 'flex-1 mail-ellipsis';
+                    const name = document.createElement('div');
+                    name.className = 'text-sm mail-ellipsis';
+                    name.textContent = row.title;
+                    const detail = document.createElement('div');
+                    detail.className = 'text-xs text-muted';
+                    if (row.failed) detail.className = 'text-xs text-danger';
+                    detail.textContent = row.detail;
+                    text.appendChild(name);
+                    text.appendChild(detail);
+                    item.appendChild(text);
+
+                    for (const [label, action] of row.actions) {
+                        const button = document.createElement('button');
+                        button.className = 'btn btn-sm btn-ghost';
+                        button.textContent = label;
+                        button.addEventListener('click', async () => {
+                            button.disabled = true;
+                            try {
+                                await action();
+                            } catch (err) {
+                                E.toast(err.message || 'That did not work.', {type: 'error'});
+                                button.disabled = false;
+                            }
+                        });
+                        item.appendChild(button);
+                    }
+                    wrap.appendChild(item);
+                }
+                return wrap;
+            }
+
+            await draw();
+        }
+
+        // ---------------------------------------------------------------
+        // Snooze, unsubscribe, and handing mail to the CMS
+        // ---------------------------------------------------------------
+
+        /**
+         * Ask when something should happen.
+         *
+         * The quick choices come from the same module the server validates
+         * against, so a time offered here cannot be refused there.
+         *
+         * @param   {string} title
+         * @returns {Promise<string|null>} an ISO instant, or null if cancelled
+         */
+        function askForTime(title) {
+            return new Promise((resolve) => {
+                const modal = E.modal({title, size: 'sm'});
+                let answered = false;
+
+                /**
+                 * @param   {string|null} at
+                 * @returns {void}
+                 */
+                const finish = (at) => {
+                    answered = true;
+                    resolve(at);
+                    modal.close();
+                };
+
+                const panel = document.createElement('div');
+                panel.className = 'mail-dialog-stack';
+
+                const choices = document.createElement('div');
+                choices.className = 'flex flex-wrap gap-1';
+                for (const option of quickTimes()) {
+                    const button = document.createElement('button');
+                    button.className = 'btn btn-sm btn-ghost';
+                    button.textContent = option.label;
+                    button.title = new Date(option.at).toLocaleString();
+                    button.addEventListener('click', () => finish(option.at));
+                    choices.appendChild(button);
+                }
+                panel.appendChild(choices);
+
+                const label = document.createElement('label');
+                label.className = 'form-label';
+                label.textContent = 'Or pick a time';
+                const exact = document.createElement('input');
+                exact.type = 'datetime-local';
+                exact.className = 'form-input';
+                panel.appendChild(label);
+                panel.appendChild(exact);
+
+                const row = document.createElement('div');
+                row.className = 'flex justify-end mt-2';
+                const confirm = document.createElement('button');
+                confirm.className = 'btn btn-sm btn-primary';
+                confirm.textContent = 'Use this time';
+                confirm.addEventListener('click', () => {
+                    if (!exact.value) return;
+                    // `datetime-local` carries no zone, so it is read in the
+                    // browser's - which is the one the person picking it is in.
+                    finish(new Date(exact.value).toISOString());
+                });
+                row.appendChild(confirm);
+                panel.appendChild(row);
+
+                modal.element.appendChild(panel);
+                // Closing the window any other way is a decision too, and a
+                // promise nobody settles is a handler that never runs again.
+                modal.on?.('close', () => { if (!answered) resolve(null); });
+                modal.open();
+            });
+        }
+
+        /**
+         * Put a message out of sight until a time.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function snooze(message) {
+            const at = await askForTime('Snooze until');
+            if (!at) return;
+
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/snooze?${params}`, 'POST', {
+                    at,
+                    subject: message.subject ?? '',
+                    from: message.from ?? []
+                });
+
+                removeFromList(message.uid);
+                offerUndo(
+                    `Snoozed until ${new Date(result.at).toLocaleString()}.`,
+                    // Bringing it straight back is the undo. The message has
+                    // already moved, so there is no "leave it where it was".
+                    async () => {
+                        await api(`${BASE}/snoozed/${result.id}/wake`, 'POST');
+                        await loadMessages();
+                    }
+                );
+                refreshOutbox();
+            } catch (err) {
+                E.toast(err.message || 'That message could not be snoozed.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Get off the list a message came from.
+         *
+         * One-click is done by the server (RFC 8058). Anything else is handed
+         * back and acted on here with the user watching - opening a link, or
+         * a compose window addressed to the list's own unsubscribe address.
+         * See `_lib/mail/unsubscribe.js` for why the distinction matters.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function unsubscribe(message) {
+            if (!await E.confirm(`Unsubscribe from the list "${message.subject || 'this message'}" came from?`)) return;
+
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/unsubscribe?${params}`, 'POST');
+
+                if (result.done) {
+                    E.toast('Unsubscribed. It can take a few days to take effect.', {type: 'success'});
+                    return;
+                }
+                if (result.error) {
+                    E.toast(result.error, {type: 'warning'});
+                }
+
+                if (result.http) {
+                    // Opened rather than requested: this URL never said it
+                    // accepts a one-click POST, and sending one on the user's
+                    // behalf is not ours to decide.
+                    window.open(result.http, '_blank', 'noopener,noreferrer');
+                    E.toast('Opened the list\u2019s unsubscribe page in a new tab.', {type: 'info'});
+                    return;
+                }
+
+                if (result.mailto) {
+                    const profile = await identitySoon();
+                    openCompose(composeOptions(profile, {
+                        draft: {
+                            to: [{name: '', address: result.mailto.to}],
+                            subject: result.mailto.subject,
+                            body: result.mailto.body
+                        },
+                        mode: 'new'
+                    }));
+                    E.toast('Send this message to unsubscribe.', {type: 'info'});
+                }
+            } catch (err) {
+                E.toast(err.message || 'That did not work.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Save an attachment into the site's media library.
+         *
+         * @param   {object} message
+         * @param   {object} attachment
+         * @param   {number} index
+         * @returns {Promise<void>}
+         */
+        async function attachmentToMedia(message, attachment, index) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder
+                });
+                const result = await api(
+                    `${BASE}/messages/${message.uid}/attachments/${index}/to-media?${params}`, 'POST'
+                );
+                E.toast(`Saved to the media library as ${result.name}.`, {type: 'success'});
+            } catch (err) {
+                E.toast(err.message || 'That attachment could not be saved.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Turn a message into a draft page.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function messageToPage(message) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/to-page?${params}`, 'POST');
+                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?`)) {
+                    location.hash = `#/pages/edit${result.urlPath}`;
+                }
+            } catch (err) {
+                E.toast(err.message || 'That page could not be created.', {type: 'error'});
+            }
+        }
+
+        /**
+         * File a message as a collection entry.
+         *
+         * The field mapping is shown before anything is written. A route that
+         * mapped fields by itself would write into whichever field happened
+         * to be called `name`.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function messageToEntry(message) {
+            let available;
+            try {
+                available = await api(`${BASE}/collections`);
+            } catch (err) {
+                E.toast(err.message || 'The collections could not be listed.', {type: 'error'});
+                return;
+            }
+
+            // A collection whose required fields a message cannot fill is not
+            // usable, however good the rest of the mapping looks - choosing
+            // it would produce "Slug is required", which is true and
+            // unfixable from here.
+            const all = (available.collections ?? []).filter(c => Object.keys(c.mapping).length);
+            const usable = all.filter(c => !(c.unfillable ?? []).length);
+
+            if (!usable.length) {
+                const blocked = all.find(c => (c.unfillable ?? []).length);
+                E.toast(
+                    blocked
+                        ? `No collection can take this message. ${blocked.title} needs ${blocked.unfillable.join(' and ')}, which a message cannot supply.`
+                        : 'No collection has fields a message could be filed into.',
+                    {type: 'warning'}
+                );
+                return;
+            }
+
+            const modal = E.modal({title: 'File as a collection entry', size: 'sm'});
+            const panel = document.createElement('div');
+            panel.className = 'mail-dialog-stack';
+
+            const label = document.createElement('label');
+            label.className = 'form-label';
+            label.textContent = 'Collection';
+            const picker = document.createElement('select');
+            picker.className = 'form-input';
+            for (const collection of usable) {
+                const option = document.createElement('option');
+                option.value = collection.slug;
+                option.textContent = collection.title;
+                picker.appendChild(option);
+            }
+            panel.appendChild(label);
+            panel.appendChild(picker);
+
+            const preview = document.createElement('div');
+            preview.className = 'text-sm text-muted';
+
+            /**
+             * Say what would go where, before it goes there.
+             *
+             * @returns {void}
+             */
+            const paint = () => {
+                const chosen = usable.find(c => c.slug === picker.value) ?? usable[0];
+                const names = {
+                    subject: 'the subject', body: 'the message text',
+                    fromName: "the sender's name", fromEmail: "the sender's address",
+                    date: 'the date it was sent'
+                };
+                preview.textContent = Object.entries(chosen.mapping)
+                    .map(([field, property]) => `${field} \u2190 ${names[property] ?? property}`)
+                    .join(', ');
+            };
+            picker.addEventListener('change', paint);
+            paint();
+            panel.appendChild(preview);
+
+            const row = document.createElement('div');
+            row.className = 'flex justify-end mt-2';
+            const confirm = document.createElement('button');
+            confirm.className = 'btn btn-sm btn-primary';
+            confirm.textContent = 'File it';
+            confirm.addEventListener('click', async () => {
+                confirm.disabled = true;
+                const chosen = usable.find(c => c.slug === picker.value) ?? usable[0];
+                try {
+                    const params = new URLSearchParams({
+                        account: currentAccountId ?? '',
+                        folder: message.folder ?? openFolder ?? currentFolder
+                    });
+                    await api(`${BASE}/messages/${message.uid}/to-entry?${params}`, 'POST', {
+                        collection: chosen.slug,
+                        mapping: chosen.mapping
+                    });
+                    modal.close();
+                    E.toast(`Filed into ${chosen.title}.`, {type: 'success'});
+                } catch (err) {
+                    E.toast(err.message || 'That entry could not be created.', {type: 'error'});
+                    confirm.disabled = false;
+                }
+            });
+            row.appendChild(confirm);
+            panel.appendChild(row);
+
+            modal.element.appendChild(panel);
+            modal.open();
+        }
+
+        /**
+         * Put a message's sender in the address book.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function addSender(message) {
+            const sender = (message?.from ?? [])[0];
+            if (!sender?.address) {
+                E.toast('That message has no sender address to save.', {type: 'error'});
+                return;
+            }
+
+            try {
+                await addContact(api, {name: sender.name, email: sender.address});
+                await refreshContacts();
+                E.toast(`${sender.name || sender.address} added to Contacts.`, {type: 'success'});
+            } catch (err) {
+                E.toast(err.message || 'That contact could not be added.', {type: 'error'});
+            }
+        }
+
+        /**
+         * The summary line above a message, and the full headers behind it.
+         *
+         * One line by default - who it is from and when - because that is what
+         * is wanted nine times in ten and the rest is clutter above the thing
+         * being read. The toggle opens Reply-To, the full recipient lists and
+         * the message id, which are the headers people actually go looking for
+         * when something is odd about a message.
+         *
+         * The open/closed choice is remembered: someone who wants headers
+         * tends to want them for more than one message.
+         *
+         * @param   {object} message
+         * @returns {HTMLElement}
+         */
+        function buildHeaderBlock(message) {
+            const wrap = document.createElement('div');
+            wrap.className = 'mail-reader-meta';
+
+            const summary = document.createElement('div');
+            summary.className = 'mail-reader-summary';
+
+            const text = document.createElement('span');
+            const from = formatAddresses(message.from);
+            text.textContent = [
+                from && `From ${from}`,
+                formatAddresses(message.to) && `to ${formatAddresses(message.to)}`,
+                message.date && D(message.date).format('DD MMM YYYY HH:mm')
+            ].filter(Boolean).join(' \u00b7 ');
+            summary.appendChild(text);
+
+            const toggle = document.createElement('button');
+            toggle.className = 'btn btn-sm btn-ghost mail-header-toggle';
+            toggle.type = 'button';
+            summary.appendChild(toggle);
+            wrap.appendChild(summary);
+
+            const details = document.createElement('dl');
+            details.className = 'mail-header-details';
+
+            const rows = [
+                ['From', formatAddresses(message.from)],
+                ['Reply to', formatAddresses(message.replyTo)],
+                ['To', formatAddresses(message.to)],
+                ['Cc', formatAddresses(message.cc)],
+                // Only ever present on your own copy in Sent; a received
+                // message carries none, which is the whole point of it.
+                ['Bcc', formatAddresses(message.bcc)],
+                // Omitted when normal, like every other absent header: saying
+                // "Priority: Normal" is saying nothing at length.
+                ['Priority', message.priority === 'high' ? 'High'
+                    : (message.priority === 'low' ? 'Low' : '')],
+                ['Date', message.date ? D(message.date).format('DD MMM YYYY HH:mm:ss') : ''],
+                ['Subject', message.subject],
+                ['Message ID', message.messageId]
+            ];
+            for (const [label, value] of rows) {
+                // An absent header is left out rather than shown empty: a row
+                // reading "Cc:" with nothing after it says something untrue.
+                if (!value) continue;
+                const term = document.createElement('dt');
+                term.textContent = label;
+                const definition = document.createElement('dd');
+                definition.textContent = value;
+                details.appendChild(term);
+                details.appendChild(definition);
+            }
+            wrap.appendChild(details);
+
+            const paint = () => {
+                details.hidden = !headersOpen;
+                toggle.textContent = headersOpen ? 'Hide headers' : 'Show headers';
+                toggle.setAttribute('aria-expanded', String(headersOpen));
+            };
+            toggle.addEventListener('click', () => {
+                headersOpen = !headersOpen;
+                try {
+                    S.set(HEADERS_KEY, headersOpen);
+                } catch { /* the choice still holds for this session */ }
+                paint();
+            });
+            paint();
+
+            return wrap;
+        }
+
+        /**
+         * What is currently being dragged, if anything.
+         *
+         * Kept here rather than read from the dataTransfer, because a
+         * `dragover` handler is not allowed to read it - only `drop` is - and
+         * deciding whether a folder is a legal target is exactly the thing
+         * that has to happen during the drag. Cleared on dragend so a
+         * cancelled drag leaves nothing behind.
+         */
+        let dragState = null;
+
+        /**
+         * Let a message row be dragged to a folder.
+         *
+         * Dragging one of several ticked rows moves all of them: the selection
+         * is what someone has said they are working with, and picking one of
+         * them up to move it alone would be a surprise. Dragging an unticked
+         * row moves only that row and leaves the selection as it was.
+         *
+         * @param   {HTMLElement} row
+         * @param   {object} message
+         * @returns {void}
+         */
+        function makeDraggable(row, message) {
+            row.draggable = true;
+
+            row.addEventListener('dragstart', event => {
+                const uid = message.uid;
+                const uids = selected.has(uid) ? [...selected] : [uid];
+                dragState = {uids, from: message.folder ?? currentFolder};
+
+                // Written to the transfer as well so the cursor shows a move
+                // rather than a forbidden sign; the payload itself is read
+                // from dragState.
+                event.dataTransfer.effectAllowed = 'move';
+                try {
+                    event.dataTransfer.setData('text/plain',
+                        uids.length === 1 ? `Message ${uid}` : `${uids.length} messages`);
+                } catch { /* older browsers are fussy about the type */ }
+
+                row.classList.add('is-dragging');
+            });
+
+            row.addEventListener('dragend', () => {
+                row.classList.remove('is-dragging');
+                dragState = null;
+                for (const el of foldersEl?.querySelectorAll('.is-drop-target') ?? []) {
+                    el.classList.remove('is-drop-target');
+                }
+            });
+        }
+
+        /**
+         * Let a folder row accept dropped messages.
+         *
+         * A folder that cannot hold mail, and the folder the messages are
+         * already in, both decline - silently, by not calling preventDefault,
+         * which is what makes the cursor say no.
+         *
+         * @param   {HTMLElement} btn
+         * @param   {object} folder
+         * @returns {void}
+         */
+        function makeDropTarget(btn, folder) {
+            const accepts = () => Boolean(dragState)
+                && folder.selectable
+                && folder.path !== dragState.from;
+
+            btn.addEventListener('dragover', event => {
+                if (!accepts()) return;
+                // Only a handler that cancels the event marks this a valid
+                // drop; without it the browser refuses and no drop fires.
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'move';
+                btn.classList.add('is-drop-target');
+            });
+
+            btn.addEventListener('dragleave', () => btn.classList.remove('is-drop-target'));
+
+            btn.addEventListener('drop', async event => {
+                btn.classList.remove('is-drop-target');
+                if (!accepts()) return;
+                event.preventDefault();
+
+                const {uids, from} = dragState;
+                dragState = null;
+                await dropInto(uids, from, folder.path);
+            });
+        }
+
+        /**
+         * Move dropped messages, with one undo for the lot.
+         *
+         * @param   {number[]} uids
+         * @param   {string} from
+         * @param   {string} destination
+         * @returns {Promise<void>}
+         */
+        async function dropInto(uids, from, destination) {
+            try {
+                if (uids.length === 1) {
+                    const row = messages.find(m => m.uid === uids[0]);
+                    await moveTo({...(row ?? {uid: uids[0]}), folder: from}, destination);
+                    return;
+                }
+
+                const params = new URLSearchParams({account: currentAccountId ?? '', folder: from});
+                const result = await api(`${BASE}/messages/move?${params}`, 'POST',
+                    {uids, destination});
+
+                for (const uid of uids) removeFromList(uid);
+                clearSelection();
+
+                const mapped = Object.values(result.uidMap ?? {});
+                offerUndo(
+                    `${result.moved} moved to ${destination}.`,
+                    mapped.length
+                        ? async () => {
+                            const back = new URLSearchParams({
+                                account: currentAccountId ?? '', folder: destination
+                            });
+                            await api(`${BASE}/messages/move?${back}`, 'POST',
+                                {uids: mapped, destination: from});
+                            await loadMessages();
+                        }
+                        : null
+                );
+            } catch (err) {
+                E.toast(err.message || 'Those messages could not be moved.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Right-click a folder to manage it.
+         *
+         * Its own registration rather than items added to the message menu:
+         * the two panes are different lists and Domma resolves a right-click
+         * by walking outward from the target, so the nearest menu answers.
+         *
+         * @returns {void}
+         */
+        function attachFolderMenu() {
+            // Called as a method - it keeps its registry on `this`, and an
+            // unbound reference throws on the first right-click.
+            const elements = (typeof E !== 'undefined' && E?.contextMenu) ? E
+                : (typeof Domma !== 'undefined' ? Domma?.elements : null);
+            if (typeof elements?.contextMenu !== 'function' || !foldersEl) return;
+
+            folderMenu = elements.contextMenu(foldersEl, {
+                match: '.mail-folder',
+                inherit: false,
+                items: [],
+                onBeforeOpen: (ctx) => {
+                    const row = ctx?.target?.closest?.('.mail-folder');
+                    if (!row) return false;
+                    const path = row.dataset.path;
+                    const folder = folders.find(f => f.path === path);
+                    if (!folder) return false;
+                    folderMenu.setItems(folderMenuItemsFor(folder));
+                    return true;
+                }
+            });
+        }
+
+        /**
+         * The items for one folder.
+         *
+         * @param   {object} folder
+         * @returns {object[]}
+         */
+        function folderMenuItemsFor(folder) {
+            // The same rules the server enforces, asked here only to decide
+            // what to grey out. The server refuses regardless - this is the
+            // courtesy, not the control.
+            const protectedUse = folder.specialUse
+                && ['\\Inbox', '\\Sent', '\\Drafts', '\\Trash', '\\Junk', '\\Archive']
+                    .includes(folder.specialUse);
+            const isInbox = String(folder.path).toUpperCase() === 'INBOX';
+            const locked = protectedUse || isInbox;
+
+            return [
+                {
+                    label: 'New folder',
+                    icon: 'folder-plus',
+                    action: () => createFolder(null)
+                },
+                {
+                    label: `New folder inside ${folder.name}`,
+                    icon: 'folder-plus',
+                    action: () => createFolder(folder.path)
+                },
+                {type: 'separator'},
+                {
+                    label: folder.subscribed === false ? 'Show in the list' : 'Hide from the list',
+                    icon: folder.subscribed === false ? 'eye' : 'eye-off',
+                    // Hiding throws nothing away - the folder still exists and
+                    // still receives mail - so it is offered where deleting is
+                    // refused. The Inbox is the exception: the list you would
+                    // use to unhide it starts there.
+                    disabled: () => isInbox,
+                    action: () => setFolderVisible(folder, folder.subscribed === false)
+                },
+                {type: 'separator'},
+                {
+                    label: 'Rename',
+                    icon: 'edit-3',
+                    disabled: () => locked,
+                    action: () => renameFolder(folder)
+                },
+                {
+                    label: 'Delete',
+                    icon: 'trash',
+                    danger: true,
+                    disabled: () => locked,
+                    action: () => deleteFolder(folder)
+                }
+            ];
+        }
+
+        /**
+         * Create a folder, optionally inside another.
+         *
+         * @param   {string|null} parent
+         * @returns {Promise<void>}
+         */
+        async function createFolder(parent, {pickParent = false} = {}) {
+            // From the pane-head button there is no folder under the cursor to
+            // 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;
+
+            const name = chosen.name ?? await E.prompt(
+                chosen.parent
+                    ? `Name for the new folder inside ${chosen.parent}`
+                    : 'Name for the new folder'
+            );
+            if (!name || !String(name).trim()) return;
+            parent = chosen.parent;
+
+            try {
+                const params = new URLSearchParams({account: currentAccountId ?? ''});
+                const result = await api(`${BASE}/folders?${params}`, 'POST',
+                    {name: String(name).trim(), parent: parent ?? ''});
+                E.toast(`Created ${result.path}.`, {type: 'success'});
+                await loadFolders();
+            } catch (err) {
+                E.toast(err.message || 'That folder could not be created.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Ask for a name and where to put it.
+         *
+         * A modal rather than two prompts: "which folder" is a choice from a
+         * list of a hundred, not something to type, and asking for the name
+         * first then the parent makes the second question feel like a
+         * correction.
+         *
+         * Built as DOM and appended to `modal.element` - `setContent()` strips
+         * interactive elements, so a form passed through it arrives with no
+         * inputs at all.
+         *
+         * @param   {string|null} preselect
+         * @returns {Promise<{parent: string, name: string}|null>}
+         */
+        function askForFolder(preselect = null) {
+            return new Promise(resolve => {
+                const modal = E.modal({title: 'New folder', size: 'sm'});
+
+                const wrap = document.createElement('div');
+                wrap.className = 'mail-form-stack';
+
+                const nameLabel = document.createElement('label');
+                nameLabel.className = 'form-label';
+                nameLabel.textContent = 'Name';
+                const nameInput = document.createElement('input');
+                nameInput.type = 'text';
+                nameInput.className = 'form-input';
+                nameInput.placeholder = 'Receipts';
+
+                const parentLabel = document.createElement('label');
+                parentLabel.className = 'form-label';
+                parentLabel.textContent = 'Inside';
+                const parentSelect = document.createElement('select');
+                parentSelect.className = 'form-input';
+
+                const top = document.createElement('option');
+                top.value = '';
+                top.textContent = '(top level)';
+                parentSelect.appendChild(top);
+
+                // The same tree as the folder pane, not a flat list of full
+                // paths. `Work.Contracts.2026` reads as a string to be parsed;
+                // indented, it reads as a place - and with a hundred folders
+                // the flat list sorts siblings pages apart.
+                //
+                // Indented with non-breaking spaces: a browser collapses runs
+                // of ordinary spaces in an <option>, so the hierarchy would
+                // simply not appear.
+                for (const node of flattenFolderTree(buildFolderTree(folders), new Set())) {
+                    const option = document.createElement('option');
+                    option.value = node.path;
+                    option.textContent = `${'\u00a0\u00a0'.repeat(node.depth)}${node.name}`;
+                    // A level the server never listed cannot hold mail. Shown
+                    // anyway, because leaving a hole makes its children look
+                    // top-level, but not choosable.
+                    if (node.selectable === false) option.disabled = true;
+                    // The full path where the indentation is ambiguous.
+                    option.title = node.path;
+                    if (node.path === preselect) option.selected = true;
+                    parentSelect.appendChild(option);
+                }
+
+                const actions = document.createElement('div');
+                actions.className = 'flex justify-end gap-2 mt-1';
+                const cancel = document.createElement('button');
+                cancel.className = 'btn btn-sm btn-ghost';
+                cancel.textContent = 'Cancel';
+                const create = document.createElement('button');
+                create.className = 'btn btn-sm btn-primary';
+                create.textContent = 'Create';
+
+                let settled = false;
+                const finish = (value) => {
+                    if (settled) return;
+                    settled = true;
+                    resolve(value);
+                    modal.close?.();
+                };
+
+                cancel.addEventListener('click', () => finish(null));
+                create.addEventListener('click', () => {
+                    const name = nameInput.value.trim();
+                    if (!name) { nameInput.focus(); return; }
+                    finish({parent: parentSelect.value, name});
+                });
+                nameInput.addEventListener('keydown', event => {
+                    if (event.key === 'Enter') create.click();
+                });
+                // Closing by the X or the backdrop is a cancel, not a hang.
+                modal.on?.('close', () => finish(null));
+
+                actions.appendChild(cancel);
+                actions.appendChild(create);
+                for (const el of [nameLabel, nameInput, parentLabel, parentSelect, actions]) {
+                    wrap.appendChild(el);
+                }
+                modal.element.appendChild(wrap);
+                modal.open?.();
+                setTimeout(() => nameInput.focus(), 60);
+            });
+        }
+
+        /**
+         * Show or hide a folder, by IMAP subscription.
+         *
+         * Hidden folders are still LISTED here, dimmed - hiding them outright
+         * would leave no way to bring one back, which is the trap this whole
+         * feature exists to avoid.
+         *
+         * @param   {object} folder
+         * @param   {boolean} visible
+         * @returns {Promise<void>}
+         */
+        async function setFolderVisible(folder, visible) {
+            try {
+                const params = new URLSearchParams({account: currentAccountId ?? ''});
+                await api(`${BASE}/folders/subscription?${params}`, 'PUT',
+                    {path: folder.path, subscribed: visible});
+                E.toast(
+                    visible ? `${folder.name} will show in the list.` : `${folder.name} is hidden.`,
+                    {type: 'success'}
+                );
+                await loadFolders();
+            } catch (err) {
+                E.toast(err.message || 'That could not be changed.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Rename a folder, leaving it where it is.
+         *
+         * @param   {object} folder
+         * @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;
+
+            try {
+                const params = new URLSearchParams({account: currentAccountId ?? ''});
+                const result = await api(`${BASE}/folders?${params}`, 'PUT',
+                    {path: folder.path, name: String(name).trim()});
+                // The open folder may BE the renamed one, in which case the
+                // list behind it is pointing at a mailbox that no longer
+                // exists under that name.
+                if (currentFolder === folder.path) currentFolder = result.path;
+                E.toast(`Renamed to ${result.path}.`, {type: 'success'});
+                await loadFolders();
+            } catch (err) {
+                E.toast(err.message || 'That folder could not be renamed.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Delete a folder and everything inside it.
+         *
+         * @param   {object} folder
+         * @returns {Promise<void>}
+         */
+        async function deleteFolder(folder) {
+            // Named before agreeing, not after: someone deleting `Work` needs
+            // to know it takes `Work.Contracts.2026` with it.
+            const delimiter = folder.delimiter || '.';
+            const children = folders
+                .filter(f => f.path.startsWith(`${folder.path}${delimiter}`))
+                .map(f => f.path);
+
+            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;
+
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '', path: folder.path
+                });
+                const result = await api(`${BASE}/folders?${params}`, 'DELETE');
+                // Standing in a folder that no longer exists would 404 every
+                // request the list makes.
+                if (currentFolder === folder.path || children.includes(currentFolder)) {
+                    currentFolder = 'INBOX';
+                }
+                const extra = result.alsoDeleted?.length ? ` and ${result.alsoDeleted.length} inside it` : '';
+                E.toast(`Deleted ${result.path}${extra}.`, {type: 'success'});
+                await loadFolders();
+            } catch (err) {
+                E.toast(err.message || 'That folder could not be deleted.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Where this account keeps drafts, by SPECIAL-USE.
+         *
+         * @returns {string|null}
+         */
+        function draftsFolder() {
+            return folders.find(f => f.specialUse === '\\Drafts')?.path ?? null;
+        }
+
+        /**
+         * Is this message an unfinished one of ours?
+         *
+         * The `\\Draft` flag first, because that is what the flag is for and
+         * it survives a message being filed somewhere other than Drafts. The
+         * folder as a fallback, for servers that do not set it.
+         *
+         * @param   {object} message
+         * @returns {boolean}
+         */
+        function isDraft(message) {
+            if (!message) return false;
+            const flags = message.flags$ ? message.flags$.value : (message.flags ?? []);
+            if (flags.includes('\\Draft')) return true;
+            const folder = message.folder ?? currentFolder;
+            return Boolean(draftsFolder()) && folder === draftsFolder();
+        }
+
+        /**
+         * Open a saved draft back into the compose window.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function editDraft(message) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder,
+                    mode: 'edit'
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/draft?${params}`);
+                // The identities and templates still come: a reopened draft
+                // can have a template dropped into it and can change who it
+                // is from. What it does NOT get is a second signature -
+                // `openCompose` reads the saved UID and treats the draft as
+                // already written.
+                openCompose(composeOptions(await identitySoon(), {
+                    draft: result.draft,
+                    mode: 'edit',
+                    // 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()
+                }));
+            } catch (err) {
+                E.toast(err.message || 'That draft could not be opened.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Is this message already spam?
+         *
+         * Two ways it can be, and only one of them is the folder: a
+         * server-side filter may set the keyword and leave the message where
+         * it is. Asked by the menu, the key and the selection bar, so they
+         * cannot disagree about it.
+         *
+         * @param   {object} message
+         * @returns {boolean}
+         */
+        function messageIsSpam(message) {
+            if (!message) return false;
+            const folder = message.folder ?? currentFolder;
+            if (junkFolder() && folder === junkFolder()) return true;
+            const flags = message.flags$ ? message.flags$.value : (message.flags ?? []);
+            return flags.includes(JUNK_KEYWORD);
+        }
+
+        /**
+         * Put a server-confirmed flag set onto a row.
+         *
+         * The reactive handle where the row has one, the plain fields either
+         * way - the list renders from both, and updating one is how a row goes
+         * on claiming something the server stopped agreeing with.
+         *
+         * @param   {number} uid
+         * @param   {string[]} flags
+         * @returns {void}
+         */
+        function applyFlagsToRow(uid, flags) {
+            const row = messages.find(m => m.uid === uid);
+            if (!row) return;
+            row.flags = flags;
+            row.seen = flags.includes('\\Seen');
+            row.flagged = flags.includes('\\Flagged');
+            if (row.flags$) row.flags$.value = flags;
+        }
+
+        /**
+         * Mark a message as spam, or as not spam.
+         *
+         * @param   {object} message
+         * @param   {boolean} spam
+         * @returns {Promise<void>}
+         */
+        async function markSpam(message, spam) {
+            try {
+                const source = message.folder ?? currentFolder;
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: source
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/spam?${params}`, 'POST', {spam});
+
+                if (!result.movedTo) {
+                    // Nothing moved, so the row stays - and has to take the new
+                    // keyword with it, or the menu goes on offering the action
+                    // that was just taken.
+                    if (result.flags) applyFlagsToRow(message.uid, result.flags);
+                    E.toast(
+                        spam
+                            ? 'Marked as spam. This server had no Junk folder to move it to.'
+                            : 'Marked as not spam.',
+                        {type: 'success'}
+                    );
+                    return;
+                }
+
+                removeFromList(message.uid);
+                offerUndo(
+                    spam ? `Moved to ${result.movedTo}.` : `Moved back to ${result.movedTo}.`,
+                    result.newUid
+                        ? () => undoMove({uid: result.newUid, from: result.movedTo, to: source})
+                        : null
+                );
+            } catch (err) {
+                E.toast(err.message || 'That message could not be marked.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Delete a message, saying afterwards what actually happened - moved
+         * to Trash, or expunged because there was nowhere to move it.
+         *
+         * @param   {object} message
+         * @returns {Promise<void>}
+         */
+        async function deleteMessage(message) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? currentFolder
+                });
+                const source = message.folder ?? currentFolder;
+                const result = await api(`${BASE}/messages/${message.uid}?${params}`, 'DELETE');
+                removeFromList(message.uid);
+
+                if (result.expunged) {
+                    // Nothing to offer: there was no Trash to move it to, so it
+                    // is gone from the server and saying otherwise would lie.
+                    offerUndo('Deleted from the server. This cannot be undone.', null);
+                } else {
+                    offerUndo(
+                        `Moved to ${result.movedTo}.`,
+                        result.newUid
+                            ? () => undoMove({uid: result.newUid, from: result.movedTo, to: source})
+                            : null
+                    );
+                }
+            } catch (err) {
+                E.toast(err.message || 'That message could not be deleted.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Offer to put something back.
+         *
+         * A strip rather than a toast, because Domma's toast carries a message
+         * and nothing to click. It hides itself after a while: an undo that
+         * lingers invites someone to press it long after the context is gone.
+         *
+         * @param   {string} text
+         * @param   {(() => Promise<void>)|null} undo - null when there is no way back
+         * @param   {{ms?: number}} [options] - how long it stays, when the
+         *          default is wrong. A recall has to outlast the hold it is
+         *          offering to cancel: a mailbox set to a thirty second hold
+         *          would otherwise lose its Undo button eighteen seconds
+         *          before the message actually went.
+         * @returns {void}
+         */
+        function offerUndo(text, undo, {ms = UNDO_WINDOW_MS} = {}) {
+            if (!undoEl) return;
+            clearTimeout(undoTimer);
+            undoEl.textContent = '';
+            undoEl.hidden = false;
+
+            const label = document.createElement('span');
+            label.textContent = text;
+            undoEl.appendChild(label);
+
+            if (undo) {
+                const button = document.createElement('button');
+                button.className = 'btn btn-sm btn-ghost';
+                button.textContent = 'Undo';
+                button.addEventListener('click', async () => {
+                    button.disabled = true;
+                    try {
+                        await undo();
+                        undoEl.hidden = true;
+                    } catch (err) {
+                        E.toast(err.message || 'That could not be undone.', {type: 'error'});
+                        button.disabled = false;
+                    }
+                });
+                undoEl.appendChild(button);
+            }
+
+            const dismiss = document.createElement('button');
+            dismiss.className = 'btn btn-sm btn-ghost';
+            dismiss.textContent = 'Dismiss';
+            dismiss.addEventListener('click', () => { undoEl.hidden = true; });
+            undoEl.appendChild(dismiss);
+
+            undoTimer = setTimeout(() => { undoEl.hidden = true; }, ms);
+        }
+
+        /**
+         * Move a message back where it came from.
+         *
+         * @param   {{uid: number, from: string, to: string}} details
+         * @returns {Promise<void>}
+         */
+        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();
+        }
+
+        /**
+         * Drop a message from the list without a round trip.
+         *
+         * @param   {number} uid
+         * @returns {void}
+         */
+        function removeFromList(uid) {
+            const index = messages.findIndex(m => m.uid === uid);
+            // A message that leaves while unread takes its contribution to the
+            // badge with it.
+            if (index !== -1 && messages[index].seen === false) {
+                adjustUnread(messages[index].folder ?? currentFolder, -1);
+            }
+            if (index !== -1) messages.splice(index, 1);
+            total = Math.max(0, total - 1);
+            if (selectedUid$.value === uid) {
+                selectedUid$.value = null;
+                clearReader();
+            }
+            renderList();
+            renderPager();
+        }
+
+        /**
+         * Drop a pending "mark as read".
+         *
+         * @returns {void}
+         */
+        function cancelMarkRead() {
+            if (!markReadTimer) return;
+            clearTimeout(markReadTimer);
+            markReadTimer = null;
+        }
+
+        /**
+         * Open a reply, reply-all or forward.
+         *
+         * The draft is built on the server, which has the message text to
+         * quote - the browser only ever sees it as sanitised HTML inside a
+         * sandboxed frame it cannot read.
+         *
+         * @param   {object} message
+         * @param   {'reply'|'replyAll'|'forward'} mode
+         * @returns {Promise<void>}
+         */
+        async function compose(message, mode) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder,
+                    mode
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/draft?${params}`);
+                openCompose(composeOptions(await identitySoon(), {
+                    draft: result.draft,
+                    mode
+                }));
+            } catch (err) {
+                E.toast(err.message || 'That reply could not be started.', {type: 'error'});
+            }
+        }
+
+        /**
+         * A small labelled button for the reader header.
+         *
+         * @param   {string} label
+         * @param   {string} icon
+         * @param   {Function} onClick
+         * @returns {HTMLButtonElement}
+         */
+        function actionButton(label, icon, onClick, hint = null) {
+            const button = document.createElement('button');
+            button.className = 'btn btn-sm btn-ghost';
+            const iconEl = document.createElement('span');
+            iconEl.setAttribute('data-icon', icon);
+            iconEl.setAttribute('data-icon-size', '14');
+            button.appendChild(iconEl);
+            button.appendChild(document.createTextNode(' ' + label));
+            button.addEventListener('click', onClick);
+            return button;
+        }
+
+        /**
+         * Adjust a folder's unread count without asking the server again.
+         *
+         * The counts arrive with the folder listing, so without this a pill
+         * keeps its number until the next reload - and with the Unread filter
+         * on, a folder stays listed after its last unread has been read.
+         *
+         * Clamped at zero: the count can be out of date, and a negative badge
+         * would be worse than a slightly stale one.
+         *
+         * @param   {string} path
+         * @param   {number} delta
+         * @returns {void}
+         */
+        function adjustUnread(path, delta) {
+            if (!delta) return;
+            const folder = folders.find(f => f.path === path);
+            if (!folder || !Number.isFinite(folder.unseen)) return;
+            folder.unseen = Math.max(0, folder.unseen + delta);
+            renderFolders();
+        }
+
+        /**
+         * Change flags on a message and reflect it in the list.
+         *
+         * The server is asked first and its answer is what the list is updated
+         * from - applying it optimistically would mean a failed write left the
+         * list claiming something untrue until the next sync quietly undid it.
+         *
+         * @param   {object} message
+         * @param   {{add?: string[], remove?: string[]}} change
+         * @returns {Promise<void>}
+         */
+        async function changeFlags(message, change) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: message.folder ?? openFolder ?? currentFolder
+                });
+                const result = await api(`${BASE}/messages/${message.uid}/flags?${params}`, 'POST', change);
+
+                const row = messages.find(m => m.uid === message.uid);
+                if (row) {
+                    const wasSeen = row.seen === true;
+                    const nowSeen = result.flags.includes('\\Seen');
+
+                    row.flags = result.flags;
+                    row.seen = nowSeen;
+                    row.flagged = result.flags.includes('\\Flagged');
+                    // One assignment; the row's own effect repaints it. No
+                    // list rebuild, so scroll position and focus survive.
+                    row.flags$ ? (row.flags$.value = result.flags) : null;
+
+                    // The folder's badge is drawn from the folder listing, so
+                    // it has to be told: reading a message is exactly when the
+                    // count people are watching should change.
+                    if (wasSeen !== nowSeen) {
+                        adjustUnread(message.folder ?? openFolder ?? currentFolder, nowSeen ? -1 : 1);
+                    }
+                }
+                renderMessage(message);
+            } catch (err) {
+                E.toast(err.message || 'That change could not be saved.', {type: 'error'});
+            }
+        }
+
+        /**
+         * Download an attachment.
+         *
+         * Goes through fetch rather than a plain link because the route needs
+         * the bearer token, which an <a href> cannot carry.
+         *
+         * @param   {number} uid
+         * @param   {object} attachment
+         * @returns {Promise<void>}
+         */
+        async function downloadAttachment(uid, attachment) {
+            try {
+                const params = new URLSearchParams({
+                    account: currentAccountId ?? '',
+                    folder: openFolder
+                });
+                // `fetch` again rather than `H`, for a different reason: `H`
+                // always parses the response as JSON, and an attachment is
+                // bytes.
+                const res = await fetch(`${BASE}/messages/${uid}/attachments/${attachment.index}?${params}`, {
+                    headers: {'Authorization': 'Bearer ' + (S.get('auth_token') || '')}
+                });
+                if (!res.ok) throw new Error('Download failed.');
+
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = attachment.filename;
+                document.body.appendChild(link);
+                link.click();
+                link.remove();
+                URL.revokeObjectURL(url);
+            } catch (err) {
+                E.toast(err.message || 'Could not download that attachment.', {type: 'error'});
+            }
+        }
+
+        // ---------------------------------------------------------------
+        // Boot
+        // ---------------------------------------------------------------
+
+        /**
+         * Load the selected mailbox's folders and open its inbox.
+         *
+         * @returns {Promise<void>}
+         */
+        async function loadFolders() {
+            try {
+                const params = new URLSearchParams({account: currentAccountId ?? '', counts: '1'});
+                const result = await api(`${BASE}/folders?${params}`);
+                folders = result.folders;
+                currentAccountId = result.accountId;
+                rememberAccount(currentAccountId);
+                // Started now, not when Compose is clicked, so the window
+                // opens on an answer that has already arrived. Idempotent per
+                // mailbox and deliberately not awaited: the folder list must
+                // not wait on it.
+                identity();
+                // Likewise: the badge saying two messages are waiting to send
+                // is worth nothing if it only appears after you go looking.
+                refreshOutbox();
+
+                // Prefer the server's own idea of the inbox over the name.
+                const inbox = folders.find(f => f.specialUse === '\\Inbox')
+                    ?? folders.find(f => f.path.toUpperCase() === 'INBOX')
+                    ?? folders[0];
+                currentFolder = inbox?.path ?? 'INBOX';
+                listTitleEl.textContent = inbox
+                    ? headingFor(inbox)
+                    : 'Inbox';
+                renderFolders();
+            } catch (err) {
+                handleError(err);
+                return;
+            }
+
+            clearReader();
+            await loadMessages();
+        }
+
+        /**
+         * Load the mailbox list, then the selected mailbox.
+         *
+         * @returns {Promise<void>}
+         */
+        async function start() {
+            try {
+                // Only the edition that can send has this route, and the
+                // only thing it is read for is the attachment limit - so the
+                // reader asking for it is a 404 on every mount for nothing.
+                if (features.send) {
+                    api(`${BASE}/status`)
+                        .then(status => {
+                            if (status?.limits) limits = {...limits, ...status.limits};
+                        })
+                        .catch(() => {/* the defaults are serviceable */});
+                }
+
+                // Deliberately not awaited. Mail must open at the same speed
+                // whether or not an optional plugin answers, or answers at
+                // all; the menu and the compose window both read whatever has
+                // arrived by the time they are opened.
+                refreshContacts();
+
+                mailboxes = (await api(`${BASE}/accounts`)).accounts;
+            } catch (err) {
+                E.toast(err.message, {type: 'error'});
+                return;
+            }
+
+            if (!mailboxes.length) {
+                currentAccountId = null;
+                showEmpty(foldersEl, 'folder', 'No mailboxes');
+                showEmpty(listEl, 'settings', 'No mailbox is set up yet.', {
+                    label: 'Add a mailbox',
+                    onClick: () => openMailboxForm(null)
+                });
+                clearReader();
+                return;
+            }
+
+            // A removed mailbox should not leave the view pointing at nothing,
+            // and a first visit should land on the one last looked at rather
+            // than whichever the server happened to list first.
+            if (!mailboxes.some(b => b.id === currentAccountId)) {
+                currentAccountId = preferredAccount();
+            }
+            rememberAccount(currentAccountId);
+            await loadFolders();
+        }
+
+        if (features.search && searchEl) {
+            searchEl.hidden = false;
+
+            let debounce = null;
+            searchInputEl.addEventListener('input', () => {
+                const value = searchInputEl.value.trim();
+                if (searchClearEl) searchClearEl.hidden = !value;
+                clearTimeout(debounce);
+                // A keystroke per query would mean a database round trip per
+                // keystroke; a short pause is what makes it feel immediate
+                // without being wasteful.
+                debounce = setTimeout(() => {
+                    if (!value) {
+                        clearSearch();
+                        return;
+                    }
+                    searchQuery = value;
+                    page = 1;
+                    selectedUid$.value = null;
+                    clearReader();
+                    runSearch();
+                }, 300);
+            });
+
+            searchInputEl.addEventListener('keydown', event => {
+                if (event.key === 'Escape') clearSearch();
+            });
+            searchClearEl?.addEventListener('click', () => clearSearch());
+        }
+
+        // The badge is free - a reader that cannot show what is unread looks
+        // broken rather than limited. Narrowing a hundred folders down to the
+        // ones that need attention is the part worth paying for.
+        if (features.unreadFilter && unreadFilterEl && unreadOnlyEl) {
+            unreadFilterEl.hidden = false;
+            unreadOnlyEl.addEventListener('change', () => {
+                unreadOnly = unreadOnlyEl.checked;
+                renderFolders();
+            });
+        }
+
+        attachKeyboard();
+
+        if (features.write) attachMessageMenu();
+        if (features.folders) attachFolderMenu();
+
+        $container.find('#mail-settings-btn').on('click', () => openSettings());
+        $container.find('#mail-refresh-btn').on('click', () => loadMessages());
+
+        // Folder management was right-click only, which is the same as not
+        // existing for anyone who does not already know it is there.
+        if (features.folders) {
+            const newFolder = $container.find('#mail-new-folder-btn').get(0);
+            if (newFolder) {
+                newFolder.hidden = false;
+                newFolder.addEventListener('click', () => createFolder(null, {pickParent: true}));
+            }
+        }
+
+        // A real <input> here, unlike the row ticks: this one is not inside a
+        // button, so it can be what it is.
+        selectAllBox?.addEventListener('change', () => toggleSelectAll());
+
+        if (features.threads && threadsBtn) {
+            threadsBtn.hidden = false;
+            paintThreadsButton();
+            threadsBtn.addEventListener('click', () => {
+                toggleThreads().catch(err =>
+                    E.toast(err.message || 'That could not be changed.', {type: 'error'}));
+            });
+        }
+
+        if (features.send && outboxBtn) {
+            outboxBtn.addEventListener('click', () => {
+                showOutbox().catch(err =>
+                    E.toast(err.message || 'The outbox could not be opened.', {type: 'error'}));
+            });
+        }
+
+        if (features.send) {
+            const compose = $container.find('#mail-compose-btn').get(0);
+            if (compose) {
+                compose.hidden = false;
+                compose.addEventListener('click', async () => {
+                    try {
+                        openCompose(composeOptions(await identitySoon(), {mode: 'new'}));
+                    } catch (err) {
+                        E.toast(err.message || 'Compose could not be opened.', {type: 'error'});
+                    }
+                });
+            }
+        }
+
+        // Fill the window and let the dividers move. Both are shared with
+        // Email Pro, which draws the same three panes.
+        // Nothing is measured until the stylesheet is in.
+        await stylesheetReady;
+
+        // Every hint in this view is a native `title`, deliberately, and NOT
+        // `E.tooltip`. That helper WRAPS each target in a <domma-tooltip>
+        // element - which reparented both pane splitters and collapsed them to
+        // zero height, so the panes silently stopped being resizable. A
+        // prettier tooltip is not worth a working feature, and a title cannot
+        // wrap, reparent or resize anything.
+
+        const layoutEl = $container.find('.mail-layout').get(0);
+        // Lift the admin's content width cap for this view only.
+        const containerEl = layoutEl?.closest('#view-container') ?? null;
+        containerEl?.classList.add('mail-fullbleed');
+
+        if (layoutEl) {
+            let storedWidths;
+            try {
+                const stored = S.get(PANES_KEY);
+                if (Array.isArray(stored) && stored.length === 2) storedWidths = stored;
+            } catch {
+                // Storage unavailable - fall back to the defaults.
+            }
+
+            createSplitters(layoutEl, {
+                widths: storedWidths,
+                onChange: next => {
+                    try {
+                        S.set(PANES_KEY, next);
+                    } catch {
+                        // The drag still applies for this visit.
+                    }
+                }
+            });
+            stopFitting = fitToViewport(layoutEl);
+        }
+
+        await start();
+        Domma.icons.scan($container.get(0));
+
+        this.onUnmount = () => {
+            cancelMarkRead();
+            clearTimeout(undoTimer);
+            if (keyboardHandler) document.removeEventListener('keydown', keyboardHandler);
+            keyboardHandler = null;
+            window.removeEventListener('error', captureError);
+            window.removeEventListener('unhandledrejection', captureError);
+            disposeRowEffects();
+            messageMenu?.destroy?.();
+            messageMenu = null;
+            stopFitting?.();
+            stopFitting = null;
+            containerEl?.classList.remove('mail-fullbleed');
+        };
+    }
+};
+}