domma-cms 1.6.55 → 1.6.57

package/plugins/support/admin/lib/kit.js

@@ -7,20 +7,22 @@
  */
 
 import {fmtDate, fmtDateTime} from '/plugins/_lib/admin/ui/dates.js';
+import {DISCARD_CONFIRM, changedFields, differs, isDraft, makeDraft} from './drafts.js';
 
 export const SIDEBAR_URL = '#/plugins/support';
 export const BASE = '/api/plugins/support';
 
 let kit = null;
 
-/** tool-kit, help-popover and plugin-chrome, once, with stand-ins for an older admin. */
+/** tool-kit, help-popover, plugin-chrome and loading, once, with stand-ins for an older admin. */
 export function loadKit() {
     if (!kit) {
         kit = Promise.all([
             import('/admin/js/lib/tool-kit.js').catch(() => ({})),
             import('/admin/js/lib/help-popover.js').catch(() => ({})),
-            import('/admin/js/lib/plugin-chrome.js').catch(() => ({}))
-        ]).then(([tk, help, chrome]) => ({
+            import('/admin/js/lib/plugin-chrome.js').catch(() => ({})),
+            import('/admin/js/lib/loading.js').catch(() => ({}))
+        ]).then(([tk, help, chrome, loading]) => ({
             onceClosed: tk.onceClosed || ((so, fn) => { const c = so.close.bind(so); so.close = (...a) => { const r = c(...a); fn?.(); return r; }; }),
             openMenuAt: tk.openMenuAt || ((el) => {
                 const r = el.getBoundingClientRect();
@@ -29,7 +31,10 @@ export function loadKit() {
             viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
             helpPopovers: help.helpPopovers || (() => () => {}),
             // The banner's door (the settings cog, 1.1.5); an older admin has none and gets no cog.
-            addBannerAction: chrome.addBannerAction || (() => null)
+            addBannerAction: chrome.addBannerAction || (() => null),
+            // A skeleton in a list's loading slot for its first load (an older admin: the slot's own text).
+            whileLoading: loading.whileLoading || ((slot, promise) => promise),
+            SHAPES: loading.SHAPES || {}
         }));
     }
     return kit;
@@ -136,12 +141,12 @@ export function threadFiles(urlOf, available = () => true) {
         /** Open one in a new tab. */
         async open(a) {
             if (!a) return;
-            if (!available(a)) { E.toast(`${esc(a.name)} has not arrived yet - it follows its message.`, {type: 'info'}); return; }
+            if (!available(a)) { E.toast(`${a.name} has not arrived yet - it follows its message.`, {type: 'info'}); return; }
             try {
                 const u = await blobUrl(urlOf(a));
                 urls.push(u);
                 window.open(u, '_blank', 'noopener');
-            } catch (err) { E.toast(esc(err.message || String(err)), {type: 'error'}); }
+            } catch (err) { E.toast(err.message || String(err), {type: 'error'}); }
         },
         dispose() { live = false; for (const u of urls.splice(0)) URL.revokeObjectURL(u); }
     };
@@ -162,7 +167,8 @@ export function fragment(html) {
 
 export const store = {
     get(k) { try { return S.get(k); } catch { return null; } },
-    set(k, v) { try { S.set(k, v); } catch { /* a convenience */ } }
+    set(k, v) { try { S.set(k, v); } catch { /* a convenience */ } },
+    remove(k) { try { if (S.remove) S.remove(k); else S.set(k, null); } catch { /* storage blocked */ } }
 };
 
 /** The sidebar re-asks the Support badge. */
@@ -211,8 +217,9 @@ export const findFile = (messages = [], id) => messages.flatMap(m => m.attachmen
 /** The thread, bound to a `thread` observable of threadRows(). Text bindings only: nothing is parsed as HTML. */
 export const THREAD = `
 <p class="sp-note" data-bind-hidden="thread.value.length">Nothing here yet.</p>
-<ol class="sp-thread" data-each="thread.value key=key"><li class="sp-msg" data-bind-class="cls" data-key="{{key}}" tabindex="-1">
-  <div class="sp-msg-head"><strong data-bind-text="who"></strong><small data-bind-text="when"></small></div>
+<ol class="sp-thread" data-each="thread.value key=key"><li class="sp-msg" data-bind-class="cls" data-key="{{key}}" tabindex="0" aria-haspopup="menu">
+  <div class="sp-msg-head"><strong data-bind-text="who"></strong><small data-bind-text="when"></small>
+    <button type="button" class="sp-kebab sp-msg-kebab" aria-label="Message actions" title="Actions">&#8942;</button></div>
   <div class="sp-msg-body" data-bind-text="body"></div>
   <ul class="sp-files" data-bind-hidden="!hasFiles">{{#each files key=id}}<li class="sp-file" data-att="{{id}}" tabindex="0" role="button" data-bind-title="name">
     <img class="sp-thumb" alt="" data-bind-src="thumb || false" data-bind-hidden="!thumb">
@@ -238,14 +245,33 @@ export async function copyText(text, what = 'Copied') {
     try {
         await navigator.clipboard.writeText(String(text ?? ''));
         E.toast(`${what}.`, {type: 'success'});
+        return true;
     } catch {
         E.toast('Your browser would not let us copy that.', {type: 'warning'});
+        return false;
     }
 }
 
 /**
- * The one way into a list's row menu besides right-click: the row's ⋮ button
- * and Shift+F10. Click (or Enter) on the row itself does `primary`.
+ * A thread's messages: the ⋮ on a message, or Shift+F10 on a focused one, opens
+ * the message menu (the same one a right-click opens).
+ * @returns {Function} removes the listeners
+ */
+export function msgKeys(box, openMenuAt) {
+    const onClick = (e) => { const k = e.target.closest('.sp-msg-kebab'); if (k) { e.stopPropagation(); openMenuAt(k); } };
+    const onKey = (e) => {
+        const li = e.target.closest('.sp-msg');
+        if (li && e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(e.target.closest('.sp-msg-kebab') || li); }
+    };
+    box.addEventListener('click', onClick);
+    box.addEventListener('keydown', onKey);
+    return () => { box.removeEventListener('click', onClick); box.removeEventListener('keydown', onKey); };
+}
+
+/**
+ * The ways into a list's row menu besides right-click: the row's ⋮ button and
+ * Shift+F10 (never the ContextMenu key - Chrome on Windows opens its own menu on
+ * its key-up). Click (or Enter) on the row itself does `primary`.
  *
  * @returns {Function} removes the listeners
  */
@@ -257,11 +283,18 @@ export function rowKeys(listEl, {rowSel, kebabSel, openMenuAt, primary}) {
         if (kebab) { e.stopPropagation(); openMenuAt(kebab); return; }
         primary(row.dataset.id);
     };
+    // Enter must not reach a dialog the main action opens: Domma's confirm takes Enter as OK, and its
+    // listener goes on while this key is still bubbling - a restore question would be answered unseen.
     const onKey = (e) => {
         const row = e.target.closest(rowSel);
         if (!row) return;
-        if ((e.key === 'F10' && e.shiftKey) || e.key === 'ContextMenu') { e.preventDefault(); openMenuAt(row); }
-        else if ((e.key === 'Enter' || e.key === ' ') && e.target === row) { e.preventDefault(); primary(row.dataset.id); }
+        if (e.key === 'F10' && e.shiftKey) { e.preventDefault(); openMenuAt(row); }
+        else if ((e.key === 'Enter' || e.key === ' ') && e.target === row) {
+            e.preventDefault();
+            e.stopPropagation();
+            const id = row.dataset.id;
+            setTimeout(() => primary(id), 0);
+        }
     };
     listEl.addEventListener('click', onClick);
     listEl.addEventListener('keydown', onKey);
@@ -309,8 +342,8 @@ export function filePicker({host, input, paste, caps}) {
     async function add(list) {
         for (const file of list) {
             if (picked.peek().length >= caps.max) { E.toast(`Up to ${caps.max} files a message.`, {type: 'warning'}); break; }
-            if (file.size > caps.maxBytes) { E.toast(`${esc(file.name)} is too big - up to ${fileSize(caps.maxBytes)} each.`, {type: 'warning'}); continue; }
-            if (!FILE_TYPES.split(',').includes(file.type)) { E.toast(`${esc(file.name)} cannot be attached - images, PDF or text only.`, {type: 'warning'}); continue; }
+            if (file.size > caps.maxBytes) { E.toast(`${file.name} is too big - up to ${fileSize(caps.maxBytes)} each.`, {type: 'warning'}); continue; }
+            if (!FILE_TYPES.split(',').includes(file.type)) { E.toast(`${file.name} cannot be attached - images, PDF or text only.`, {type: 'warning'}); continue; }
             const key = `k${Date.now()}${Math.random().toString(16).slice(2)}`;
             let thumb = '';
             if (isImage(file.type)) { thumb = URL.createObjectURL(file); localUrls.push(thumb); }
@@ -320,7 +353,7 @@ export function filePicker({host, input, paste, caps}) {
                 picked.value = picked.peek().map(r => (r.key === key ? {...r, ...a, key, busy: false} : r));
             } catch (err) {
                 picked.value = picked.peek().filter(r => r.key !== key);
-                E.toast(esc(err.message || String(err)), {type: 'error'});
+                E.toast(err.message || String(err), {type: 'error'});
             }
         }
     }
@@ -340,6 +373,8 @@ export function filePicker({host, input, paste, caps}) {
         /** What Send names: the uploaded ones. */
         attachments: () => picked.peek().filter(x => x.id && !x.busy).map(x => ({id: x.id, name: x.name, type: x.type, size: x.size})),
         clear() { picked.value = []; },
+        /** Take out the files that went with a message (by uploaded id); any picked since stay. */
+        drop(ids = []) { const gone = new Set(ids); picked.value = picked.peek().filter(x => !x.id || !gone.has(x.id)); },
         dispose() {
             host.removeEventListener('click', onRemove);
             input.removeEventListener('change', onChange);
@@ -350,3 +385,108 @@ export function filePicker({host, input, paste, caps}) {
         }
     };
 }
+
+// ---------------------------------------------------------------------------------
+// Panels: one of a kind at a time, closed when the screen goes, and unsaved work kept
+// ---------------------------------------------------------------------------------
+
+/**
+ * The panels one mount has open, by kind ('compose', 'detail', ...). `claim()`
+ * before opening (false: one is already open or opening - no double-open), `set()`
+ * once it is open, `release()` when it closes or fails to open (or it could never
+ * open again until a reload), `leave()` from the view's teardown.
+ */
+export function panelSet() {
+    const open = new Map();
+    return {
+        claim(kind) { if (open.has(kind)) return false; open.set(kind, {}); return true; },
+        set(kind, entry) { if (open.has(kind)) open.set(kind, entry); },
+        get: (kind) => open.get(kind),
+        release(kind) { open.delete(kind); },
+        /** The screen has gone: close every panel, keeping any drafts. */
+        leave() {
+            const all = [...open.values()];
+            open.clear();
+            for (const e of all) { try { e.close?.('leave'); } catch { /* already gone */ } }
+        }
+    };
+}
+
+/**
+ * Offer a kept draft back before its panel opens. The draft is removed only
+ * once the person has answered "Throw away"; leaving while asked keeps it.
+ *
+ * @param {string} key
+ * @param {{question: (draft) => {text: string, options: object}, here: () => boolean}} o
+ * @returns {Promise<{state: 'none'|'discard'|'keep'|'gone', draft?: object, fate?: string}>}
+ */
+export async function offerDraft(key, {question, here}) {
+    const draft = store.get(key);
+    if (!isDraft(draft)) return {state: 'none'};
+    const q = question(draft);
+    // E.confirm renders HTML: the question carries titles people typed.
+    const ok = await E.confirm(esc(q.text), q.options);
+    if (!here()) return {state: 'gone'};
+    if (ok) { store.remove(key); return {state: 'discard'}; }
+    return {state: 'keep', draft, fate: q.fate || ''};
+}
+
+/**
+ * Unsaved work in an open panel. Call it AFTER openPanel: its close guard wraps
+ * over the one kit.onceClosed put there.
+ *
+ *   - while the form differs from `baseline` a draft is kept under `key`
+ *     ({data: the changed fields only, was, at}); when it matches again the draft goes;
+ *   - closing with changes asks first; Cancel (or Escape) keeps the panel open;
+ *   - close('leave') - the screen has gone - closes without asking and KEEPS the draft;
+ *   - close(true) - after a save - closes without asking.
+ *
+ * @param {{so, panel}} p - from openPanel
+ * @param {object} o
+ * @param {string}   o.key
+ * @param {() => object} o.values   - the form now (read observables with .value: it is tracked)
+ * @param {object}   o.baseline     - what is saved
+ * @param {string}   [o.was]        - the record's fingerprint when the edits began (a picked-up draft's own)
+ * @param {() => boolean} [o.extraDirty] - unsaved work no draft can keep (files picked)
+ * @param {(how) => void} [o.onClosed]
+ * @returns {{dirty: () => boolean, rebase: (baseline: object, was?: string) => void, settle: () => void, lock: (on: boolean) => void, close: (how?) => Promise}}
+ */
+export function guardPanel(p, {key, values, baseline, was = '', extraDirty = () => false, onClosed = () => {}}) {
+    const base = M.observable(baseline);
+    let wasNow = was;
+    let closed = false;
+    let asking = false;
+    const keep = (v, b, settled = false) => {
+        // Once closed only a settle writes: leaving mid-save kept the form, and the request's answer decides what stays.
+        if (closed && !settled) return;
+        if (v && differs(v, b)) store.set(key, makeDraft(changedFields(v, b), wasNow));
+        else store.remove(key);
+    };
+    const stop = M.effect(() => keep(values(), base.value));
+    const dirty = () => differs(values(), base.peek()) || extraDirty();
+    const close = p.so.close.bind(p.so);
+    const finish = (how) => { closed = true; stop(); if (how !== 'leave') store.remove(key); onClosed(how); return close(); };
+    p.so.close = async (how) => {
+        if (closed) return undefined;
+        if (how !== 'leave' && how !== true && dirty()) {
+            if (asking) return undefined;
+            asking = true;
+            const ok = await E.confirm('Discard your changes?', DISCARD_CONFIRM);
+            asking = false;
+            // Left (or saved) while asked: that close has already happened.
+            if (!ok || closed) return undefined;
+        }
+        return finish(how);
+    };
+    return {
+        dirty,
+        // Written here as well as by the effect (an observable may not announce an equal value) - and
+        // after the panel has closed too: a reply box left while sending keeps only what was not sent.
+        rebase(next, nextWas) { if (nextWas !== undefined) wasNow = nextWas; base.value = next; keep(values(), next, true); },
+        /** A save succeeded: nothing is left unsaved, whether or not the panel was left meanwhile. */
+        settle() { keep(null, base.peek(), true); },
+        /** A panel that closes after saving is locked while it saves, so nothing typed meanwhile is lost. */
+        lock(on) { p.panel.inert = Boolean(on); p.panel.classList.toggle('is-saving', Boolean(on)); },
+        close: (how) => p.so.close(how)
+    };
+}

package/plugins/support/admin/lib/settings.js

@@ -11,7 +11,8 @@
  *
  * @module support/admin/lib/settings
  */
-import {BASE, esc, openPanel} from './kit.js';
+import {BASE, esc, guardPanel, offerDraft, openPanel, panelSet} from './kit.js';
+import {DRAFT_KEYS, draftQuestion, draftValues, settingsPrint} from './drafts.js';
 
 /** As lib/shape.js checks them; the server checks again. */
 const EMAIL_RE = /^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/;
@@ -49,21 +50,43 @@ const problem = (kind, v, key) => {
     return '';
 };
 
-/** Add the cog when this user may change this side's settings (asked once, silently). */
-export async function addSettingsCog($container, kit) {
+/**
+ * Add the cog when this user may change this side's settings (asked once, silently).
+ *
+ * @param {object} $container
+ * @param {object} kit - loadKit()
+ * @param {{scope: Function, here: () => boolean}} view - the mount's teardown and "still on screen"
+ */
+export async function addSettingsCog($container, kit, {scope, here}) {
     let got = null;
     try { got = await H.request('GET', `${BASE}/settings`, null, {silent: true}); } catch { return; }
-    if (!got?.side) return;
-    kit.addBannerAction($container, {id: 'support-settings', icon: 'settings', title: 'Support settings', onClick: () => openSettings()});
+    if (!got?.side || !here()) return;
+    // The panel belongs to this mount: leaving the screen closes it, keeping what was typed.
+    const panels = panelSet();
+    scope(() => panels.leave());
+    kit.addBannerAction($container, {id: 'support-settings', icon: 'settings', title: 'Support settings', onClick: () => openSettings({panels, here})});
 }
 
-export async function openSettings() {
+export async function openSettings({panels = panelSet(), here = () => true} = {}) {
+    if (!panels.claim('settings')) return;
+    let opened = false;
+    try { opened = await showSettings(panels, here); } catch (err) { E.toast(`Settings not opened: ${err?.message || err}`, {type: 'error'}); }
+    if (!opened) panels.release('settings');
+}
+
+async function showSettings(panels, here) {
     let got;
-    try { got = await H.get(`${BASE}/settings`); } catch (err) { E.toast(`Settings not loaded: ${esc(err?.message || err)}`, {type: 'error'}); return; }
+    // A failed load opens nothing - there is no form that could save over the server's values.
+    try { got = await H.get(`${BASE}/settings`); } catch (err) { E.toast(`Settings not loaded: ${err?.message || err}`, {type: 'error'}); return false; }
+    if (!here()) return false;
     const fields = FIELDS[got.side] || [];
-    const f = Object.fromEntries(fields.map(x => [x.key, M.observable(String(got.settings?.[x.key] ?? ''))]));
+    const loaded = Object.fromEntries(fields.map(x => [x.key, String(got.settings?.[x.key] ?? '')]));
+    const offer = await offerDraft(DRAFT_KEYS.settings, {here,
+        question: (d) => draftQuestion(d, settingsPrint(loaded), {what: 'the Support settings'})});
+    if (offer.state === 'gone') return false;
+    const start = offer.state === 'keep' ? draftValues(offer.draft, loaded) : loaded;
+    const f = Object.fromEntries(fields.map(x => [x.key, M.observable(start[x.key])]));
     const values = () => Object.fromEntries(fields.map(x => [x.key, x.kind === 'number' ? Number(f[x.key].peek()) : f[x.key].peek().trim()]));
-    const opened = JSON.stringify(values());
     const saving = M.observable(false);
     const errs = Object.fromEntries(fields.map(x => [`${x.key}Err`, M.computed(() => problem(x.kind, f[x.key].value, x.key))]));
     const model = {...f, ...errs, saving, cannot: M.computed(() => saving.value || Object.values(errs).some(e => e.value))};
@@ -86,38 +109,38 @@ export async function openSettings() {
     <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">Save</button>
   </div>
 </div>`;
-    let panel = null;
-    let closed = false;
-    let asking = false;
+    let guard = null;
     const methods = {
-        cancel: () => panel?.so.close(),
+        cancel: () => guard?.close(),
         async save() {
             if (model.cannot.peek()) return;
             saving.value = true;
+            // The panel closes once saved: locked meanwhile, so nothing typed during the request is lost.
+            guard?.lock(true);
             try {
                 await H.put(`${BASE}/settings`, values());
+                guard?.settle();
                 E.toast('Support settings saved.', {type: 'success'});
-                panel.so.close(true);
+                guard?.close(true);
             } catch (err) {
-                E.toast(`Not saved: ${esc(err?.message || err)}`, {type: 'error'});
+                guard?.lock(false);
+                E.toast(`Not saved: ${err?.message || err}`, {type: 'error'});
             } finally {
                 saving.value = false;
             }
         }
     };
-    panel = await openPanel({title: 'Support settings', size: 'md', html, model, methods});
-    // Closing with a change asks first - once (onceClosed calls close() again, argument-less).
-    const close = panel.so.close.bind(panel.so);
-    panel.so.close = async (force) => {
-        if (!closed && force !== true && JSON.stringify(values()) !== opened) {
-            if (asking) return undefined;
-            asking = true;
-            const ok = await E.confirm('Discard what you have entered?');
-            asking = false;
-            if (!ok) return undefined;
-        }
-        closed = true;
-        return close();
-    };
+    const panel = await openPanel({title: 'Support settings', size: 'md', html, model, methods,
+        cleanup: () => [...Object.values(errs), model.cannot].forEach(c => c.dispose?.())});
+    // Closing with a change asks first; leaving the screen keeps the change as a draft.
+    guard = guardPanel(panel, {
+        key: DRAFT_KEYS.settings,
+        values: () => Object.fromEntries(fields.map(x => [x.key, String(f[x.key].value)])),
+        baseline: loaded,
+        was: offer.state === 'keep' ? offer.draft.was : settingsPrint(loaded),
+        onClosed: () => panels.release('settings')
+    });
+    panels.set('settings', {close: (how) => guard.close(how)});
     panel.panel.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') { e.preventDefault(); methods.save(); } });
+    return true;
 }