domma-cms 1.10.37 → 1.10.39

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

@@ -35,7 +35,7 @@ const {
 } = await import(versioned('folder-tree.js'));
 const {imageSendersSection} = await import(versioned('image-senders-section.js'));
 const {
-    createSettingsSection, READ_DELAY_KEY, readDelaySeconds, scheduleMarkRead,
+    createSettingsSection, READ_DELAY_KEY, readDelaySeconds, scheduleMarkRead, readComposePrefs,
     PAGE_SIZE_KEY, PAGE_SIZES, listPageSize, pageAfterResize
 } = await import(versioned('settings-section.js'));
 const {createSplitters, fitToViewport} = await import(versioned('panes.js'));
@@ -50,6 +50,9 @@ const {fillMessageAction, loadMessageActions, messageFacts} = await import(versi
 const {isPlainKey, keyBelongsElsewhere, resolveKey, SHORTCUTS} = await import(versioned('keyboard.js'));
 const {menuPoint, quoteSelection, readBridgeMessage, selectionItems} = await import(versioned('body-menu.js'));
 const {describeWhen, quickTimes} = await import(versioned('scheduling.js'));
+const {ruleFromMessage} = await import(versioned('rules.js'));
+// Optional for the same reason as oauth-panel.js below.
+const {securityNote} = await import(versioned('security-note.js')).catch(() => ({securityNote: () => null}));
 // Sign in with Microsoft / Google (Email Pro). Optional: an older copy of this
 // directory without it must not take the reader down.
 const {describeSignIn, mountSignIn} = await import(versioned('oauth-panel.js')).catch(() => ({}));
@@ -192,6 +195,8 @@ function formatSize(bytes) {
  */
 export function createReaderView({pluginName, assetVersion = ASSET_VERSION, settingsSections = [], features = {},
     extensions = {}}) {
+    // Filing rules come with an edition's Rules tab (Email Pro).
+    const hasRules = settingsSections.some(section => section?.id === 'rules');
 const BASE = `/api/plugins/${pluginName}`;
 
 // Deliberately NOT keyed by plugin. The two editions never run together - the
@@ -908,13 +913,16 @@ return {
          *
          * @returns {void}
          */
-        function openSettings() {
+        function openSettings(target = null) {
             // One at a time: a second click, or a needs-password error while
             // it is open, must not stack a second panel on the first.
-            if (!settingsOnce.claim()) return;
+            if (!settingsOnce.claim()) {
+                if (target) E.toast('Mail Settings is already open. Close it first.', {type: 'info'});
+                return;
+            }
             let panel = null;
             try {
-                buildSettings((so) => { panel = so; });
+                buildSettings((so) => { panel = so; }, target);
             } catch (err) {
                 // Failed before it opened: let go of everything it took.
                 panel?.__mailAbandon?.();
@@ -924,7 +932,13 @@ return {
         }
 
         /** @returns {void} */
-        function buildSettings(made = () => {}) {
+        /**
+         * @param {Function} [made] - handed the slideover once it exists
+         * @param {{section: string, request?: object}|null} [target] - open on
+         *        this tab, and hand its section `ctx.request` (once) - e.g. the
+         *        rule a message's "Create a rule…" starts
+         */
+        function buildSettings(made = () => {}, target = null) {
             // Help popovers per drawn section, let go when the panel closes.
             const helpDisposers = [];
             // What sections registered through ctx.guard / ctx.onClose.
@@ -958,6 +972,8 @@ return {
             const sections = [
                 createSettingsSection({
                     canWrite: features.write,
+                    canSend: features.send === true,
+                    sidebarUrl: sidebarUrl(pluginName),
                     load: () => readDelaySeconds(S.get(READ_DELAY_KEY)),
                     save: seconds => {
                         S.set(READ_DELAY_KEY, seconds);
@@ -1003,8 +1019,11 @@ return {
              *
              * @returns {object}
              */
-            function context() {
+            function context(section = null) {
                 return {
+                    // What opened this section, when something did (a menu
+                    // item asking for a new rule). Only for that section.
+                    request: target && section?.id === target.section ? (target.request ?? null) : null,
                     account: mailboxes.find(b => b.id === currentAccountId) ?? mailboxes[0] ?? null,
                     mailboxes,
                     base: BASE,
@@ -1082,7 +1101,7 @@ return {
                     panel.appendChild(head);
                 }
                 try {
-                    await section.render(panel, context());
+                    await section.render(panel, context(section));
                 } catch (err) {
                     const message = document.createElement('p');
                     message.className = 'text-sm text-danger';
@@ -1131,8 +1150,15 @@ return {
                 host.appendChild(tabs);
                 slideover.element.appendChild(host);
                 E.tabs(tabs);
-                panels[0].drawn = true;
-                draw(panels[0].section, panels[0].panel);
+                // The tab asked for, through its own trigger so the tabs
+                // component switches as it would on a click; else the first.
+                const first = panels.findIndex(p => p.section.id === target?.section);
+                if (first > 0) {
+                    list.children[first].click();
+                } else {
+                    panels[0].drawn = true;
+                    draw(panels[0].section, panels[0].panel);
+                }
                 slideover.open();
                 return;
             }
@@ -3192,6 +3218,29 @@ return {
 
             readerBodyEl.textContent = '';
 
+            // Signed or encrypted: said first, above the images notice, since
+            // it is about whether to believe the rest of the pane at all.
+            const security = securityNote(message.security);
+            if (security) {
+                const strip = document.createElement('div');
+                strip.className = `mail-notice mail-security mail-security--${security.tone}`;
+                const icon = document.createElement('span');
+                icon.dataset.icon = security.icon;
+                icon.dataset.iconSize = '14';
+                icon.setAttribute('aria-hidden', 'true');
+                const text = document.createElement('span');
+                text.textContent = security.text;
+                strip.append(icon, text);
+                if (security.detail) {
+                    const more = document.createElement('span');
+                    more.className = 'mail-security-detail';
+                    more.textContent = security.detail;
+                    strip.appendChild(more);
+                }
+                readerBodyEl.appendChild(strip);
+                Domma.icons.scan(strip);
+            }
+
             if (message.blockedImages > 0 && !message.remoteImagesLoaded) {
                 const notice = document.createElement('div');
                 notice.className = 'mail-notice';
@@ -3715,6 +3764,12 @@ return {
                     {type: 'divider'}
                 ] : []),
                 ...toolActionItems(message),
+                // An edition with filing rules: start one from this message.
+                ...(hasRules ? [{
+                    label: 'Create a rule from this message\u2026',
+                    icon: 'filter',
+                    action: () => openSettings({section: 'rules', request: {newRule: ruleFromMessage(message)}})
+                }] : []),
                 {type: 'divider'},
                 {
                     label: 'Mark as spam',
@@ -3923,7 +3978,11 @@ return {
                     identities: identities?.identities ?? [],
                     mailboxAddress: identities?.mailboxAddress ?? '',
                     templates: templates?.templates ?? [],
-                    undoSendSeconds: sending?.undoSendSeconds ?? 0
+                    undoSendSeconds: sending?.undoSendSeconds ?? 0,
+                    // Where this mailbox's ticks start, and whether it can
+                    // sign or encrypt at all (a certificate is set up).
+                    compose: sending?.compose ?? null,
+                    security: sending?.security ?? null
                 })).catch(() => EMPTY_PROFILE);
             }
             return profileRequest;
@@ -3983,6 +4042,11 @@ return {
                 mailboxAddress: profile?.mailboxAddress ?? '',
                 templates: profile?.templates ?? [],
                 undoSeconds: profile?.undoSendSeconds ?? 0,
+                defaults: profile?.compose ?? null,
+                security: profile?.security ?? null,
+                // Read at each opening, so a change in Settings applies to
+                // the next message without a reload.
+                prefs: readComposePrefs(S),
                 onSent: () => loadMessages({quiet: true}),
                 onQueued: (result) => offerRecall(result),
                 ...extra

package/plugins/_lib/admin/mail/rules.js

@@ -32,6 +32,14 @@ export const MAX_RULES = 50;
 /** How many conditions or actions one rule may hold. */
 export const MAX_CLAUSES = 10;
 
+/** How many groups one mailbox's rules may be sorted into. */
+export const MAX_GROUPS = 20;
+
+/** A group name: one line, short, trimmed. */
+function groupName(value) {
+    return String(value ?? '').replace(/[\r\n\t]+/g, ' ').trim().slice(0, 60);
+}
+
 /**
  * The parts of a message a rule can look at.
  *
@@ -217,6 +225,9 @@ export function normaliseRule(input, index = 0) {
             : `rule-${Math.random().toString(36).slice(2, 10)}${Date.now().toString(36).slice(-4)}`,
         name: String(source.name ?? '').replace(/[\r\n]+/g, ' ').trim() || `Rule ${index + 1}`,
         enabled: source.enabled !== false,
+        // The group it is filed under; '' for none. A group is a NAME, so a
+        // rule and the group list can never point at an id that went away.
+        group: groupName(source.group),
         match: source.match === 'any' ? 'any' : 'all',
         conditions,
         actions
@@ -244,6 +255,76 @@ export function normaliseRules(account) {
     return list;
 }
 
+/**
+ * A mailbox's rule groups, in the order they are shown and run: the stored
+ * list (`account.ruleGroups`, `[{name, enabled}]`), then any group a rule
+ * names that the list lacks - so a group cannot vanish from under its rules.
+ * Names compare without case; the first spelling wins.
+ *
+ * @param   {object|null|undefined} account - `{ruleGroups, rules}`
+ * @returns {{name: string, enabled: boolean}[]}
+ */
+export function normaliseRuleGroups(account) {
+    const source = account && typeof account === 'object' ? account : {};
+    const out = [];
+    const seen = new Set();
+    const add = (name, enabled) => {
+        const clean = groupName(name);
+        if (!clean || seen.has(clean.toLowerCase()) || out.length >= MAX_GROUPS) return;
+        seen.add(clean.toLowerCase());
+        out.push({name: clean, enabled: enabled !== false});
+    };
+    for (const group of Array.isArray(source.ruleGroups) ? source.ruleGroups : []) {
+        add(typeof group === 'string' ? group : group?.name, group?.enabled);
+    }
+    for (const rule of Array.isArray(source.rules) ? source.rules : []) add(rule?.group, true);
+    return out;
+}
+
+/**
+ * The rules that actually run: switched on, and not in a group that is
+ * switched off. Order is kept - it is the order they run in.
+ *
+ * @param   {object[]} rules
+ * @param   {{name: string, enabled: boolean}[]} [groups]
+ * @returns {object[]}
+ */
+export function rulesInEffect(rules, groups = []) {
+    const off = new Set((groups ?? []).filter(g => g.enabled === false).map(g => g.name.toLowerCase()));
+    return (rules ?? []).filter(rule => rule?.enabled !== false
+        && !(rule.group && off.has(String(rule.group).toLowerCase())));
+}
+
+/**
+ * A new rule started from a message - "Create a rule from this message".
+ *
+ * Mail from a mailing list is caught by its list; anything else by its
+ * sender's address, the narrowest thing that still catches the next one.
+ * The action is a move with the folder left to choose: the rule is not saved
+ * until someone has picked where the mail goes and pressed Save.
+ *
+ * @param   {object} message - a list row or opened message
+ * @returns {object}
+ */
+export function ruleFromMessage(message) {
+    const sender = (message?.from ?? [])[0] ?? {};
+    const address = String(sender.address ?? '').trim();
+    const list = String(message?.listId ?? '').trim();
+    const condition = list
+        ? {field: 'list', op: 'contains', value: list.replace(/^.*<|>.*$/g, '')}
+        : {field: 'from', op: 'contains', value: address};
+    const who = list ? `the ${list.replace(/^.*<|>.*$/g, '')} list` : (sender.name || address || 'this sender');
+    return {
+        id: '',
+        name: `Mail from ${who}`.slice(0, 120),
+        enabled: true,
+        match: 'all',
+        group: '',
+        conditions: condition.value ? [condition] : [{field: 'from', op: 'contains', value: ''}],
+        actions: [{type: 'move', folder: ''}]
+    };
+}
+
 /**
  * Does this rule apply to this message?
  *

package/plugins/_lib/admin/mail/security-note.js

@@ -0,0 +1,68 @@
+/**
+ * What the reader says about a signed or encrypted (S/MIME) message.
+ *
+ * Pure: `security` is the `/messages/:uid` answer's field (readRoutes.js
+ * `publicSecurity`), and the result is plain text for the strip above the
+ * message. The wording separates the three things a signature can mean -
+ * the message is unchanged, the signer is who a trusted authority says, and
+ * the signer is the sender shown - because "signed" alone promises all three
+ * and a self-made certificate gives only the first.
+ *
+ * @module _lib/admin/mail/security-note
+ */
+
+/**
+ * @param   {object|null} security
+ * @returns {{tone: 'ok'|'warn'|'bad', icon: string, text: string, detail: string}|null}
+ */
+export function securityNote(security) {
+    if (!security || (!security.signed && !security.encrypted)) return null;
+
+    if (security.encrypted && !security.decrypted) {
+        return {
+            tone: 'bad', icon: 'lock',
+            text: 'Encrypted - this message could not be opened.',
+            detail: security.problem || 'None of your certificates can open it. Add the certificate it was encrypted to in Settings > Security.'
+        };
+    }
+
+    const parts = [];
+    if (security.encrypted) parts.push('Encrypted');
+    let tone = 'ok';
+    let detail = '';
+
+    if (security.signed) {
+        const who = security.signer?.emails?.[0] || security.signer?.subject || 'an unknown signer';
+        if (!security.verified) {
+            tone = 'bad';
+            parts.push('the signature is NOT valid');
+            detail = security.problem || 'The message may have been changed after it was signed.';
+        } else if (!security.trusted) {
+            tone = 'warn';
+            parts.push(`signed by ${who}, whose certificate is not from an authority this server trusts`);
+            detail = 'The message is unchanged since it was signed, but anyone can make a certificate with any address in it. '
+                + 'Check the fingerprint with the sender if it matters.';
+        } else if (!security.fromMatches) {
+            tone = 'warn';
+            parts.push(`signed by ${who}, which is not the sender shown`);
+            detail = 'The signature is valid, but it belongs to a different address than the From line.';
+        } else {
+            parts.push(`signed by ${who}`);
+            detail = 'The signature is valid and the message is unchanged since it was signed.';
+        }
+        if (security.verified && security.problem && tone === 'ok') detail = security.problem;
+        if (security.signer?.fingerprint) {
+            detail += ` Certificate fingerprint (SHA-256): ${security.signer.fingerprint}.`;
+        }
+    } else {
+        detail = 'Only you and the other recipients can read it.';
+    }
+
+    const text = parts.join(', ');
+    return {
+        tone,
+        icon: tone !== 'ok' ? 'shield-alert' : (security.encrypted ? 'lock' : 'shield-check'),
+        text: `${text.charAt(0).toUpperCase()}${text.slice(1)}.`,
+        detail: detail.trim()
+    };
+}

package/plugins/_lib/admin/mail/settings-section.js

@@ -1,5 +1,11 @@
 /** Browser preferences for the shared mail reader. */
 export const READ_DELAY_KEY = 'domma-mail.mark-read-seconds';
+/** Compose preferences - this browser's, like the rest of this tab. */
+export const EDITOR_KEY = 'domma-mail.compose-editor';
+export const AUTOSAVE_KEY = 'domma-mail.autosave-minutes';
+export const SPELLCHECK_KEY = 'domma-mail.spellcheck';
+/** The choices for saving a draft automatically, in minutes; 0 is never. */
+export const AUTOSAVE_CHOICES = [0, 1, 2, 5, 10];
 export const DEFAULT_READ_DELAY_SECONDS = 1;
 export const PAGE_SIZE_KEY = 'domma-mail.page-size';
 /** The choices offered under the list. 200 is the server's maxListLimit. */
@@ -50,39 +56,220 @@ export function scheduleMarkRead(markRead, seconds, schedule = setTimeout) {
     return schedule(markRead, delay * 1000);
 }
 
-export function createSettingsSection({canWrite, load, save}) {
+/**
+ * The editor a new message opens in: 'rich' (formatting, sent as HTML with a
+ * plain-text part) unless this browser chose 'plain'.
+ *
+ * @param   {*} value
+ * @returns {'rich'|'plain'}
+ */
+export function composeEditor(value) {
+    return value === 'plain' ? 'plain' : 'rich';
+}
+
+/**
+ * Minutes between automatic draft saves; 0 (never) for anything not offered.
+ *
+ * @param   {*} value
+ * @returns {number}
+ */
+export function autosaveMinutes(value) {
+    const minutes = Number(value);
+    return AUTOSAVE_CHOICES.includes(minutes) ? minutes : 0;
+}
+
+/**
+ * Whether the browser checks spelling as you type. On unless switched off,
+ * which is the browser's own default for a text field.
+ *
+ * @param   {*} value
+ * @returns {boolean}
+ */
+export function spellcheckOn(value) {
+    return value !== false;
+}
+
+/**
+ * This browser's compose preferences, every key present.
+ *
+ * @param   {{get: Function}} store - Domma's S
+ * @returns {{editor: 'rich'|'plain', autosaveMinutes: number, spellcheck: boolean}}
+ */
+export function readComposePrefs(store) {
+    const read = key => { try { return store?.get(key); } catch { return undefined; } };
+    return {
+        editor: composeEditor(read(EDITOR_KEY)),
+        autosaveMinutes: autosaveMinutes(read(AUTOSAVE_KEY)),
+        spellcheck: spellcheckOn(read(SPELLCHECK_KEY))
+    };
+}
+
+/**
+ * The browser's own answer to "may this site show notifications?", in words.
+ *
+ * @param   {string|undefined} permission - Notification.permission
+ * @returns {string}
+ */
+export function permissionWords(permission) {
+    if (permission === 'granted') return 'This browser allows notifications from this site.';
+    if (permission === 'denied') return 'This browser blocks notifications from this site. Allow them in the browser\u2019s site settings (the padlock by the address).';
+    if (permission === 'default') return 'This browser has not been asked yet - turning popups on asks it.';
+    return 'This browser cannot show notifications.';
+}
+
+/**
+ * The Settings tab: preferences kept in this browser.
+ *
+ * @param   {{canWrite: boolean, canSend?: boolean, load: Function, save: Function,
+ *            sidebarUrl?: string|null, userId?: string|null}} options
+ *          `sidebarUrl` is this edition's sidebar entry, which is what new-mail
+ *          notifications hang off (admin/js/lib/sidebar-notify.js).
+ * @returns {object}
+ */
+export function createSettingsSection({canWrite, canSend = false, load, save, sidebarUrl = null, userId = null}) {
     return {
         id: 'settings',
         label: 'Settings',
-        help: 'Preferences for reading email in this browser.',
+        help: 'Preferences for reading and writing email in this browser.',
         async render(container, ctx) {
             const kit = await import(new URL(`./section-kit.js?v=${ctx.assetVersion ?? '1'}`, import.meta.url).href);
+            // Optional: a core older than the notifications leaves that part out.
+            const notify = sidebarUrl
+                ? await import('/admin/js/lib/sidebar-notify.js').catch(() => null)
+                : null;
+            // The same user id the sidebar keys its notifications by.
+            const who = userId ?? (await import('/admin/js/api.js').catch(() => null))?.getUser?.()?.id ?? null;
             kit.note(container, 'Settings are saved in this browser and apply to all your mailboxes.');
+
+            const saveSteps = [];
+
+            // ---- Reading -------------------------------------------------
+            kit.heading(container, 'Reading');
             if (!canWrite) {
                 kit.note(container, 'This reader leaves messages unread. Automatic marking as read requires an edition that can update messages.');
-                return;
+            } else {
+                const {state} = kit.formIn(container, {
+                    markReadSeconds: {
+                        type: 'number',
+                        label: 'How long before a message is marked as read? (seconds)',
+                        required: true,
+                        min: 0,
+                        max: 2147483,
+                        formConfig: {hint: '0 marks a message as read immediately. Otherwise, it must stay open for this long.'}
+                    }
+                }, {markReadSeconds: load()});
+                saveSteps.push(() => {
+                    const value = state.markReadSeconds;
+                    const seconds = Number(value);
+                    if (value === '' || value === null || value === undefined || !Number.isFinite(seconds) || seconds < 0 || seconds > 2147483) {
+                        throw new Error('Enter a number of seconds between 0 and 2147483.');
+                    }
+                    return () => save(seconds);
+                });
+            }
+
+            // ---- Composing -----------------------------------------------
+            if (canSend) {
+                kit.heading(container, 'Composing');
+                const prefs = readComposePrefs(S);
+                const {state} = kit.formIn(container, {
+                    editor: {
+                        type: 'select', label: 'Default text editor', required: true,
+                        options: [
+                            {value: 'rich', label: 'Rich text (formatting, pictures, links)'},
+                            {value: 'plain', label: 'Plain text'}
+                        ],
+                        formConfig: {hint: 'What a new message, reply or forward opens in. Plain text sends text only - what every mail program shows the same way.'}
+                    },
+                    autosave: {
+                        type: 'select', label: 'Automatically save draft', required: true,
+                        // Strings: Forma reads a 0 as "no value" and shows its
+                        // "-- Select --" placeholder instead of Never.
+                        options: AUTOSAVE_CHOICES.map(n => ({
+                            value: String(n), label: n === 0 ? 'Never' : `Every ${n} minute${n === 1 ? '' : 's'}`
+                        })),
+                        formConfig: {hint: 'Saved to the Drafts folder while you write, so a closed tab or a crash loses little. A message you then discard takes its automatic draft with it.'}
+                    },
+                    spellcheck: {type: 'boolean', label: 'Check spelling as I type'}
+                }, {editor: prefs.editor, autosave: String(prefs.autosaveMinutes), spellcheck: prefs.spellcheck});
+                saveSteps.push(() => () => {
+                    S.set(EDITOR_KEY, composeEditor(state.editor));
+                    S.set(AUTOSAVE_KEY, autosaveMinutes(state.autosave));
+                    S.set(SPELLCHECK_KEY, state.spellcheck !== false);
+                });
+                kit.note(container, 'Receipts, signing, encryption and where replies are filed belong to each mailbox: see the Composing and Security tabs.');
             }
-            const {state} = kit.formIn(container, {
-                markReadSeconds: {
-                    type: 'number',
-                    label: 'How long before a message is marked as read? (seconds)',
-                    required: true,
-                    min: 0,
-                    max: 2147483,
-                    formConfig: {hint: '0 marks a message as read immediately. Otherwise, it must stay open for this long.'}
+
+            // ---- Notifications -------------------------------------------
+            if (notify) {
+                kit.heading(container, 'Notifications');
+                kit.note(container, 'While the admin is open in any tab, new mail in the inbox can pop up a notification and play a sound - checked about once a minute.');
+                const current = notify.readNotifyPrefs(who, sidebarUrl);
+                const supported = typeof Notification === 'function';
+                const {state} = kit.formIn(container, {
+                    popup: {type: 'boolean', label: 'Show new messages notification popups', formConfig: {disabled: !supported}},
+                    sound: {type: 'boolean', label: 'Sound notification'}
+                }, {popup: current.popup && supported, sound: current.sound});
+                const status = kit.note(container, permissionWords(supported ? Notification.permission : undefined));
+                const tools = kit.box(container, 'flex gap-2 items-center mb-2');
+                kit.button(tools, 'Play the sound', () => notify.playChime(), {icon: 'play'});
+                if (supported) {
+                    kit.button(tools, 'Show a test notification', async () => {
+                        if (Notification.permission === 'default') await Notification.requestPermission();
+                        status.textContent = permissionWords(Notification.permission);
+                        if (Notification.permission === 'granted') {
+                            new Notification('New mail', {body: 'This is what a new message looks like.', tag: `dm-notify:${sidebarUrl}`});
+                        }
+                    }, {icon: 'bell'});
                 }
-            }, {markReadSeconds: load()});
+                saveSteps.push(() => async () => {
+                    let popup = state.popup === true && supported;
+                    // Asked here, on the Save click: browsers only let a page
+                    // ask in answer to something the person did.
+                    if (popup && Notification.permission === 'default') {
+                        await Notification.requestPermission();
+                        status.textContent = permissionWords(Notification.permission);
+                    }
+                    if (popup && Notification.permission === 'denied') popup = false;
+                    notify.writeNotifyPrefs(who, sidebarUrl, {popup, sound: state.sound === true});
+                });
+            }
+
+            // ---- Email links ---------------------------------------------
+            if (canSend && typeof navigator?.registerProtocolHandler === 'function') {
+                kit.heading(container, 'Email links');
+                kit.note(container, 'Make this browser open mailto: links - on any website - in a new message here, instead of in a mail program on this computer. The browser asks you to confirm. To undo it, use the browser\u2019s settings (in Chrome: Settings > Privacy and security > Site settings > Protocol handlers).');
+                const linkRow = kit.box(container, 'flex gap-2 items-center mb-2');
+                const linkStatus = kit.box(linkRow, 'flex-1 text-sm mail-status text-muted', 'span');
+                kit.button(linkRow, 'Register as the mailto: links handler', async () => {
+                    try {
+                        const mail = await import('/admin/js/lib/mail-compose.js');
+                        navigator.registerProtocolHandler('mailto', mail.mailtoHandlerUrl(`${location.origin}${location.pathname}`));
+                        linkStatus.textContent = 'Asked. If the browser showed a question, answer it to finish.';
+                    } catch (err) {
+                        linkStatus.textContent = /secure|https/i.test(err?.message ?? '')
+                            ? 'Only a site served over https can handle mailto: links.'
+                            : (err?.message || 'This browser would not register it.');
+                    }
+                }, {icon: 'mail'});
+            }
+
+            if (!saveSteps.length) return;
             const bar = kit.actionBar(container);
-            kit.button(bar.row, 'Save', () => {
-                const value = state.markReadSeconds;
-                const seconds = Number(value);
-                if (value === '' || value === null || value === undefined || !Number.isFinite(seconds) || seconds < 0 || seconds > 2147483) {
-                    bar.say('Enter a number of seconds between 0 and 2147483.', 'bad');
+            kit.button(bar.row, 'Save', async () => {
+                // Every value checked before anything is stored: a bad number
+                // must not leave half the tab saved.
+                let apply;
+                try {
+                    apply = saveSteps.map(step => step());
+                } catch (err) {
+                    bar.say(err.message, 'bad');
                     return;
                 }
                 try {
-                    save(seconds);
+                    for (const run of apply) await run();
                     bar.say('Saved.', 'ok');
+                    await ctx.changed?.();
                 } catch (err) {
                     bar.say(err.message || 'Settings could not be saved.', 'bad');
                 }