domma-cms 0.75.0 → 0.77.0

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

@@ -36,8 +36,10 @@ const {
 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'));
+// Renamed: onMount wraps it in its own `openCompose`, which tracks each window it opens.
+const {openCompose: openComposeWindow} = await import(versioned('compose-window.js'));
 const {makeResizable} = await import(versioned('resizable.js'));
+const {whenClosed} = await import(versioned('when-closed.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'));
@@ -105,6 +107,27 @@ function formatAddresses(list) {
     return (list ?? []).map(a => a.name || a.address).filter(Boolean).join(', ');
 }
 
+/**
+ * The admin's Tool helpers - loaded at run time (the updater replaces admin/
+ * wholesale, and an older admin without them must not take the view down),
+ * with stand-ins where one is missing.
+ */
+const toolKit = await import('/admin/js/lib/tool-kit.js').catch(() => ({}));
+const viewLifetime = toolKit.viewLifetime ?? ((pattern) => {
+    let fns = [];
+    const run = () => { const list = fns; fns = []; list.forEach(fn => { try { fn?.(); } catch { /* gone */ } }); };
+    const onHash = () => { if (!pattern.test(location.hash)) run(); };
+    return {
+        add(fn) { fns.push(fn); },
+        reset() { run(); window.addEventListener('hashchange', onHash); fns.push(() => window.removeEventListener('hashchange', onHash)); }
+    };
+});
+const helpPopovers = (await import('/admin/js/lib/help-popover.js').catch(() => ({}))).helpPopovers ?? (() => () => {});
+const openMenuAt = toolKit.openMenuAt ?? ((el) => {
+    const r = el.getBoundingClientRect();
+    el.dispatchEvent(new MouseEvent('contextmenu', {bubbles: true, cancelable: true, clientX: r.left, clientY: r.bottom, view: window}));
+});
+
 /**
  * Human-readable byte size.
  *
@@ -222,6 +245,12 @@ function ensureStylesheet() {
     return ready;
 }
 
+// This screen's hashes. Domma's router has no unmount hook - `onUnmount` below
+// was never called - so the view tears itself down when the address leaves
+// them, and at the start of the next mount (a remount that never left).
+const ROUTE = new RegExp(`^#\\/plugins\\/${pluginName}(?:[/?#]|$)`);
+const lifetime = viewLifetime(ROUTE);
+
 return {
     templateUrl: `/plugins/_lib/admin/mail/mail.html?v=${assetVersion}`,
 
@@ -232,10 +261,16 @@ return {
      * @returns {Promise<void>}
      */
     async onMount($container) {
+        // Whatever the last visit left - listeners on document and window,
+        // context menus, compose windows - goes first.
+        lifetime.reset();
+        const here = () => ROUTE.test(location.hash) && Boolean($container.get(0)?.isConnected);
         const stylesheetReady = ensureStylesheet();
 
-        // Held so onUnmount can detach the viewport listeners.
+        // Held so the teardown can detach the viewport listeners.
         let stopFitting = null;
+        // Set once the layout is measured; `let` so an early teardown can read it.
+        let containerEl = null;
         // ---------------------------------------------------------------
         // State
         // ---------------------------------------------------------------
@@ -427,6 +462,110 @@ return {
         window.addEventListener('error', captureError);
         window.addEventListener('unhandledrejection', captureError);
 
+        /**
+         * Compose windows opened from this visit. Leaving the screen saves a
+         * changed one to Drafts (the mailbox's own, so it is there on the
+         * phone too) and closes it - it used to stay open over whichever
+         * screen came next, or vanish with the text on a reload.
+         */
+        const composeHandles = new Set();
+        function openCompose(options) {
+            const handle = openComposeWindow(options);
+            if (handle) {
+                composeHandles.add(handle);
+                handle.onClosed?.(() => composeHandles.delete(handle));
+            }
+            return handle;
+        }
+        /**
+         * Settings and mailbox panels open from this visit: closed without
+         * asking when the screen is left (the lifetime), and removed from the
+         * page once closed - Domma hides a closed slideover rather than
+         * removing it.
+         */
+        const openPanels = new Set();
+
+        /**
+         * Guard a slideover: asks once before a close would throw away typed
+         * changes (Cancel, the X, Escape, the backdrop all call close()), and
+         * goes straight through after that - a later close() from cleanup must
+         * not ask again. No draft: these forms hold passwords.
+         *
+         * @param {object}   slideover
+         * @param {Function} [dirty] - () => boolean
+         * @param {string}   [question]
+         * @returns {object} the slideover
+         */
+        function guardPanel(slideover, dirty = () => false, question = 'Discard the changes you have made?', onClosed = () => {}) {
+            const rawClose = slideover.close.bind(slideover);
+            let closed = false;
+            let asking = false;
+            slideover.close = async (force) => {
+                if (!closed && force !== true && dirty()) {
+                    if (asking) return undefined;
+                    asking = true;
+                    const ok = await E.confirm(question);
+                    asking = false;
+                    if (!ok) return undefined;
+                }
+                if (closed) return undefined;
+                closed = true;
+                return rawClose();
+            };
+            openPanels.add(slideover);
+            whenClosed(slideover, () => {
+                closed = true;
+                openPanels.delete(slideover);
+                onClosed();
+                setTimeout(() => { try { slideover.element?.remove(); } catch { /* gone */ } }, 400);
+            });
+            return slideover;
+        }
+
+        const onBeforeUnload = (event) => {
+            if ([...composeHandles].some(h => h.dirty?.())) { event.preventDefault(); event.returnValue = ''; }
+        };
+        window.addEventListener('beforeunload', onBeforeUnload);
+
+        /**
+         * Everything this visit put on document or window, and every menu and
+         * window it opened. Run by the lifetime when the address leaves the
+         * screen, and at the start of the next mount.
+         *
+         * @returns {void}
+         */
+        function teardown() {
+            for (const handle of [...composeHandles]) {
+                if (handle.dirty?.()) {
+                    handle.saveDraft?.().then((saved) => {
+                        if (saved) E.toast(`The message you were writing was saved to ${saved.savedTo || 'Drafts'}.`, {type: 'info'});
+                        else E.toast('The message you were writing could not be saved as a draft.', {type: 'warning'});
+                    }).finally(() => handle.close?.(true));
+                } else {
+                    handle.close?.(true);
+                }
+            }
+            composeHandles.clear();
+            for (const panel of [...openPanels]) { try { panel.close(true); } catch { /* gone */ } }
+            openPanels.clear();
+            window.removeEventListener('beforeunload', onBeforeUnload);
+            cancelMarkRead();
+            clearTimeout(undoTimer);
+            if (keyboardHandler) document.removeEventListener('keydown', keyboardHandler);
+            keyboardHandler = null;
+            window.removeEventListener('error', captureError);
+            window.removeEventListener('unhandledrejection', captureError);
+            disposeRowEffects();
+            messageMenu?.destroy?.();
+            messageMenu = null;
+            folderMenu?.destroy?.();
+            folderMenu = null;
+            stopFitting?.();
+            stopFitting = null;
+            containerEl?.classList.remove('mail-fullbleed');
+        }
+        lifetime.add(teardown);
+
         /**
          * Live effects belonging to the rows currently on screen.
          *
@@ -578,7 +717,15 @@ return {
          * @returns {void}
          */
         function openSettings() {
-            const slideover = E.slideover({title: 'Mail Settings', size: 'lg', position: 'right'});
+            // Help popovers per drawn section, let go when the panel closes.
+            const helpDisposers = [];
+            // Each section saves on its own button, so the panel itself has
+            // nothing to lose - guarded only to be closed with the screen.
+            const slideover = guardPanel(E.slideover({title: 'Mail Settings', size: 'lg', position: 'right'}),
+                () => false, undefined, () => {
+                    stopSettingsResize();
+                    helpDisposers.splice(0).forEach(fn => { try { fn?.(); } catch { /* gone */ } });
+                });
             // 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
@@ -587,13 +734,13 @@ return {
                 storageKey: 'domma-mail.settings-width',
                 defaultWidth: 760
             });
-            slideover.on?.('close', () => stopSettingsResize());
 
             const sections = [
                 {
                     id: 'mailboxes',
                     label: 'Mailboxes',
                     icon: 'inbox',
+                    help: 'The IMAP accounts this screen reads. Each person\'s mailboxes are their own - nobody else in the admin can see them. Passwords are stored sealed and never sent back to the browser.',
                     render: renderMailboxSection
                 },
                 // Blocking remote images is not a Pro feature, and neither is
@@ -667,6 +814,19 @@ return {
              */
             async function draw(section, panel) {
                 panel.textContent = '';
+                // What the section is for, as a (?) at its head - the same help
+                // popover every Tool uses, so the sections explain themselves.
+                if (section.help) {
+                    const head = document.createElement('div');
+                    head.className = 'mail-section-intro';
+                    const title = document.createElement('strong');
+                    title.textContent = section.label;
+                    const marker = document.createElement('span');
+                    marker.setAttribute('data-help-title', section.label);
+                    marker.setAttribute('data-help', section.help);
+                    head.append(title, marker);
+                    panel.appendChild(head);
+                }
                 try {
                     await section.render(panel, context());
                 } catch (err) {
@@ -676,6 +836,7 @@ return {
                     panel.appendChild(message);
                 }
                 Domma.icons.scan(panel);
+                helpDisposers.push(helpPopovers(panel, {position: 'bottom'}));
             }
 
             if (sections.length === 1) {
@@ -812,7 +973,6 @@ return {
                 storageKey: 'domma-mail.mailbox-form-width',
                 defaultWidth: 560
             });
-            slideover.on?.('close', () => stopFormResize());
 
             const form = document.createElement('div');
             form.className = 'mail-form-stack';
@@ -890,6 +1050,12 @@ return {
             form.appendChild(actions);
 
             slideover.element.appendChild(form);
+            // What it opened with; a typed password always counts as a change.
+            const opened = JSON.stringify({...collect(), password: ''});
+            guardPanel(slideover,
+                () => passInput.value !== '' || JSON.stringify({...collect(), password: ''}) !== opened,
+                box ? 'Discard your changes to this mailbox?' : 'Discard this mailbox? It has not been saved.',
+                () => stopFormResize());
             slideover.open();
             setTimeout(() => hostInput.focus(), 50);
 
@@ -934,7 +1100,7 @@ return {
                     const result = box
                         ? await api(`${BASE}/accounts/${encodeURIComponent(box.id)}`, 'PUT', collect())
                         : await api(`${BASE}/accounts`, 'POST', collect());
-                    slideover.close();
+                    slideover.close(true);
                     E.toast('Mailbox saved.', {type: 'success'});
                     currentAccountId = result.account.id;
                     await start();
@@ -1434,8 +1600,8 @@ return {
                 // 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';
+                    ? 'Click to open \u00b7 ctrl-click to select \u00b7 drag to a folder \u00b7 right-click, \u22ee or Shift+F10 for actions'
+                    : 'Click to open \u00b7 right-click, \u22ee or Shift+F10 for more';
 
                 // A span with the checkbox role, not an <input>: the row is a
                 // <button>, and a nested interactive element inside one is
@@ -1555,7 +1721,23 @@ return {
                 // 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.
+                // The ⋮: the same menu as a right-click. A span with the button
+                // role rather than a <button> - the row IS a button, and the
+                // click target decides, exactly as the tick does.
+                const more = document.createElement('span');
+                more.className = 'mail-item-more';
+                more.setAttribute('role', 'button');
+                more.setAttribute('aria-label', 'Actions');
+                more.title = 'Actions';
+                more.textContent = '\u22ee';
+                item.appendChild(more);
+
                 item.addEventListener('click', event => {
+                    if (event.target.closest('.mail-item-more')) {
+                        event.stopPropagation();
+                        openMenuAt(event.target.closest('.mail-item-more'));
+                        return;
+                    }
                     // 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
@@ -2411,6 +2593,8 @@ return {
          * @returns {object[]}
          */
         function messageMenuItems(message, folder) {
+            // The free reader cannot write, so its menu is what reading allows.
+            if (!features.write) return readOnlyMenuItems(message, folder);
             const flags = message.flags$ ? message.flags$.value : (message.flags ?? []);
             const isSeen = flags.includes('\\Seen');
             const isFlagged = flags.includes('\\Flagged');
@@ -2442,7 +2626,14 @@ return {
                         icon: 'edit-3',
                         action: () => editDraft(target)
                     },
-                    {type: 'separator'}
+                    {type: 'divider'}
+                ] : []),
+                // The reading pane's three, without opening the message first.
+                ...(features.send && !isDraft(target) ? [
+                    {label: 'Reply', icon: 'corner-up-left', action: () => compose(target, 'reply')},
+                    {label: 'Reply all', icon: 'corner-up-right', action: () => compose(target, 'replyAll')},
+                    {label: 'Forward', icon: 'send', action: () => compose(target, 'forward')},
+                    {type: 'divider'}
                 ] : []),
                 {
                     label: 'Mark as read',
@@ -2456,7 +2647,7 @@ return {
                     disabled: () => !isSeen,
                     action: () => changeFlags(target, {remove: ['\\Seen']})
                 },
-                {type: 'separator'},
+                {type: 'divider'},
                 {
                     label: 'Star',
                     icon: 'star',
@@ -2478,9 +2669,9 @@ return {
                         disabled: () => senderKnown,
                         action: () => addSender(message)
                     },
-                    {type: 'separator'}
+                    {type: 'divider'}
                 ] : []),
-                {type: 'separator'},
+                {type: 'divider'},
                 {
                     label: 'Mark as spam',
                     icon: 'shield-alert',
@@ -2495,7 +2686,7 @@ return {
                     disabled: () => !isSpam,
                     action: () => markSpam(target, false)
                 },
-                {type: 'separator'},
+                {type: 'divider'},
                 ...(features.snooze ? [{
                     label: 'Snooze\u2026',
                     icon: 'clock',
@@ -2510,7 +2701,7 @@ return {
                     submenu: moveTargets
                 },
                 ...(features.handoff ? [
-                    {type: 'separator'},
+                    {type: 'divider'},
                     {
                         label: 'Save to the site',
                         icon: 'layout',
@@ -2528,7 +2719,7 @@ return {
                         ]
                     }
                 ] : []),
-                {type: 'separator'},
+                {type: 'divider'},
                 {
                     label: 'Delete',
                     icon: 'trash',
@@ -2538,6 +2729,46 @@ return {
             ];
         }
 
+        /**
+         * The menu for the free, read-only reader: what reading allows. It had
+         * no menu at all, so right-click did nothing on a list that looks like
+         * every other list in the admin.
+         *
+         * @param   {object} message
+         * @param   {string} folder
+         * @returns {object[]}
+         */
+        function readOnlyMenuItems(message, folder) {
+            const sender = (message.from ?? [])[0]?.address ?? '';
+            const senderKnown = isKnownAddress(addressBook, sender);
+            return [
+                {label: 'Open', icon: 'mail-open', action: () => openMessage(message.uid, folder)},
+                {type: 'divider'},
+                {label: 'Copy sender\u2019s address', icon: 'copy', disabled: () => !sender, action: () => copyText(sender, 'Address copied.')},
+                {label: 'Copy subject', icon: 'copy', disabled: () => !message.subject, action: () => copyText(message.subject ?? '', 'Subject copied.')},
+                ...(contactsAvailable ? [
+                    {type: 'divider'},
+                    {label: 'Add sender to contacts', icon: 'user-plus', disabled: () => senderKnown || !sender, action: () => addSender(message)}
+                ] : [])
+            ];
+        }
+
+        /**
+         * Put text on the clipboard, saying so - and saying so when it could not.
+         *
+         * @param   {string} text
+         * @param   {string} done
+         * @returns {Promise<void>}
+         */
+        async function copyText(text, done) {
+            try {
+                await navigator.clipboard.writeText(text);
+                E.toast(done, {type: 'success'});
+            } catch {
+                E.toast('The clipboard is not available here - select and copy it from the message instead.', {type: 'warning'});
+            }
+        }
+
         /**
          * Move a message, and take it out of the list it is leaving.
          *
@@ -2978,7 +3209,7 @@ return {
                 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); });
+                whenClosed(modal, () => { if (!answered) resolve(null); });
                 modal.open();
             });
         }
@@ -3531,7 +3762,7 @@ return {
                     icon: 'folder-plus',
                     action: () => createFolder(folder.path)
                 },
-                {type: 'separator'},
+                {type: 'divider'},
                 {
                     label: folder.subscribed === false ? 'Show in the list' : 'Hide from the list',
                     icon: folder.subscribed === false ? 'eye' : 'eye-off',
@@ -3542,7 +3773,7 @@ return {
                     disabled: () => isInbox,
                     action: () => setFolderVisible(folder, folder.subscribed === false)
                 },
-                {type: 'separator'},
+                {type: 'divider'},
                 {
                     label: 'Rename',
                     icon: 'edit-3',
@@ -3682,7 +3913,7 @@ return {
                     if (event.key === 'Enter') create.click();
                 });
                 // Closing by the X or the backdrop is a cancel, not a hang.
-                modal.on?.('close', () => finish(null));
+                whenClosed(modal, () => finish(null));
 
                 actions.appendChild(cancel);
                 actions.appendChild(create);
@@ -4349,17 +4580,49 @@ return {
 
         attachKeyboard();
 
-        if (features.write) attachMessageMenu();
+        // Every edition gets the message menu; what is in it depends on what
+        // this one can do (readOnlyMenuItems for the free reader).
+        attachMessageMenu();
         if (features.folders) attachFolderMenu();
 
+        // Shift+F10 opens the menu of the focused row, as the keyboard's
+        // right-click - the rows are buttons, so Enter already opens them.
+        const onMenuKey = (event) => {
+            if (!(event.key === 'F10' && event.shiftKey)) return;
+            const row = event.target.closest?.('.mail-item, .mail-folder');
+            if (!row) return;
+            event.preventDefault();
+            openMenuAt(row);
+        };
+        listEl?.addEventListener('keydown', onMenuKey);
+        foldersEl?.addEventListener('keydown', onMenuKey);
+
         $container.find('#mail-settings-btn').on('click', () => openSettings());
 
         // Settings is a screen-level control, so it belongs in the admin's
         // plugin banner beside the licence - the same place every other plugin
         // puts its cog. Imported at RUN time and survivable: an admin that
         // predates addBannerAction keeps the button in the Folders pane.
+        // Compose and Refresh are screen actions too, so they join it there;
+        // each pane button goes only once its banner twin is in place.
+        let bannerCompose = false;
         try {
             const chrome = await import('/admin/js/lib/plugin-chrome.js');
+            if (features.send) {
+                bannerCompose = Boolean(chrome.addBannerAction?.($container, {
+                    id: `${pluginName}-compose`,
+                    icon: 'edit-3',
+                    title: 'New message',
+                    onClick: () => startNewMessage()
+                }));
+            }
+            const refreshPlaced = chrome.addBannerAction?.($container, {
+                id: `${pluginName}-refresh`,
+                icon: 'refresh-cw',
+                title: 'Refresh',
+                onClick: () => loadMessages()
+            });
+            if (refreshPlaced) $container.find('#mail-refresh-btn').get(0)?.remove();
             const placed = chrome.addBannerAction?.($container, {
                 id: `${pluginName}-settings`,
                 icon: 'settings',
@@ -4367,7 +4630,8 @@ return {
                 onClick: () => openSettings()
             });
             if (placed) $container.find('#mail-settings-btn').get(0)?.remove();
-        } catch { /* no banner: the pane button stays */ }
+        } catch { /* no banner: the pane buttons stay */ }
+        if (!here()) return;
         $container.find('#mail-refresh-btn').on('click', () => loadMessages());
 
         // Folder management was right-click only, which is the same as not
@@ -4400,17 +4664,21 @@ return {
             });
         }
 
+        /** A new, empty message - the banner's Compose and the pane's. */
+        async function startNewMessage() {
+            try {
+                openCompose(composeOptions(await identitySoon(), {mode: 'new'}));
+            } catch (err) {
+                E.toast(err.message || 'Compose could not be opened.', {type: 'error'});
+            }
+        }
+
         if (features.send) {
             const compose = $container.find('#mail-compose-btn').get(0);
-            if (compose) {
+            if (compose && bannerCompose) compose.remove();
+            else 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'});
-                    }
-                });
+                compose.addEventListener('click', () => startNewMessage());
             }
         }
 
@@ -4418,6 +4686,7 @@ return {
         // Email Pro, which draws the same three panes.
         // Nothing is measured until the stylesheet is in.
         await stylesheetReady;
+        if (!here()) return;
 
         // Every hint in this view is a native `title`, deliberately, and NOT
         // `E.tooltip`. That helper WRAPS each target in a <domma-tooltip>
@@ -4428,7 +4697,7 @@ return {
 
         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 = layoutEl?.closest('#view-container') ?? null;
         containerEl?.classList.add('mail-fullbleed');
 
         if (layoutEl) {
@@ -4454,22 +4723,12 @@ return {
         }
 
         await start();
+        if (!here()) return;
         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');
-        };
+        // Domma's router does not call this; the lifetime does the work. Kept so a
+        // host that does call it gets the same teardown.
+        this.onUnmount = teardown;
     }
 };
 }

package/plugins/_lib/admin/mail/when-closed.js

@@ -0,0 +1,26 @@
+/**
+ * Run code when a Domma modal or slideover actually closes.
+ *
+ * NOT `component.on('close', fn)`: Domma's Component.on() only calls
+ * `options[event]` when that happens to be a function, so it silently does
+ * nothing - every "on close" cleanup in the mail client written that way
+ * (editor teardown, resize handles, address suggesters, settling a dialog's
+ * promise when it was closed by its X) never ran. `options.onClose` is what
+ * close() itself reads, at the moment it closes - so it also fires only when a
+ * close really happens, after any "discard changes?" guard has let it through.
+ *
+ * @module _lib/admin/mail/when-closed
+ *
+ * @param {object}   component - an E.modal / E.slideover instance
+ * @param {Function} fn        - called once per close, with the component
+ * @returns {void}
+ */
+export function whenClosed(component, fn) {
+    const opts = component?.options;
+    if (!opts) return;
+    const previous = opts.onClose;
+    opts.onClose = (instance) => {
+        try { previous?.(instance); } catch { /* one cleanup failing must not stop the next */ }
+        try { fn(instance); } catch { /* ditto */ }
+    };
+}