domma-cms 1.6.55 → 1.6.57

package/plugins/booking/tests/admin-drafts.test.js

@@ -0,0 +1,67 @@
+/**
+ * Drafts in the admin's slideovers - the pure part (admin/lib/drafts.js).
+ */
+import {test} from 'node:test';
+import assert from 'node:assert/strict';
+import {
+    agoText, draftsWith, draftsWithout, fingerprint, orphanDrafts, restorePlan, restoreText, stableStringify, staleDraftKeys, usableDraft
+} from '../admin/lib/drafts.js';
+
+const NOW = Date.parse('2031-07-15T12:00:00Z');
+const at = (minAgo) => new Date(NOW - minAgo * 60_000).toISOString();
+
+test('stable JSON and fingerprints ignore key order, see every change', () => {
+    assert.equal(stableStringify({b: 1, a: [2, {d: 3, c: 4}]}), '{"a":[2,{"c":4,"d":3}],"b":1}');
+    assert.equal(fingerprint({a: 1, b: 2}), fingerprint({b: 2, a: 1}));
+    assert.notEqual(fingerprint({a: 1, b: 2}), fingerprint({a: 1, b: 3}));
+    assert.notEqual(fingerprint({closures: []}), fingerprint({closures: [{from: '2031-12-25'}]}));
+    assert.match(fingerprint({}), /^f[0-9a-z]+$/);
+});
+
+test('a stored draft is used only when it looks like one and is not too old', () => {
+    assert.equal(usableDraft(null, {now: NOW}), null);
+    assert.equal(usableDraft('x', {now: NOW}), null);
+    assert.equal(usableDraft({values: [1]}, {now: NOW}), null);
+    assert.equal(usableDraft({values: {a: 1}}, {now: NOW}), null, 'no date: not trusted');
+    assert.equal(usableDraft({values: {a: 1}, at: at(15 * 24 * 60)}, {now: NOW}), null, 'older than 14 days');
+    assert.deepEqual(usableDraft({values: {a: 1}, at: at(5), was: 'w1', label: 'Haircut'}, {now: NOW}),
+        {values: {a: 1}, at: at(5), was: 'w1', label: 'Haircut'});
+    assert.deepEqual(usableDraft({values: {}, at: at(5), was: 7}, {now: NOW}).was, '', 'a non-string was is none');
+});
+
+test('restore plan: nothing, put back, or ask', () => {
+    const d = {values: {name: 'Sam'}, at: at(3), was: '2031-07-15T10:00:00Z', label: 'Haircut'};
+    assert.equal(restorePlan({draft: null}), 'none');
+    assert.equal(restorePlan({draft: d, was: d.was, opening: {name: 'Sam'}}), 'none', 'the same as the form already holds');
+    assert.equal(restorePlan({draft: d, was: d.was, opening: {name: ''}}), 'auto');
+    assert.equal(restorePlan({draft: d, was: '2031-07-15T11:30:00Z', opening: {name: ''}}), 'changed', 'saved since');
+    assert.equal(restorePlan({draft: {...d, was: ''}, was: '', opening: {}, prefilled: true}), 'prefilled');
+    assert.equal(restorePlan({draft: {...d, was: ''}, was: 'x', opening: {}, prefilled: true}), 'changed', 'a change outranks the prefill');
+});
+
+test('the words', () => {
+    assert.equal(agoText(at(0.2), NOW), 'just now');
+    assert.equal(agoText(at(12), NOW), '12 min ago');
+    assert.equal(agoText(at(60 * 26), NOW), 'yesterday');
+    assert.equal(agoText('nonsense', NOW), 'earlier');
+    assert.equal(restoreText('auto', {label: 'Haircut', at: at(2), now: NOW}), 'Unsaved changes from 2 min ago put back (Haircut).');
+    assert.match(restoreText('changed', {label: 'Haircut', at: at(2), now: NOW}), /to “Haircut” 2 min ago, and it has been saved since.*Discard your changes, or keep them/);
+    assert.match(restoreText('deleted', {label: 'Room 1', at: at(2), now: NOW}), /deleted since\. Discard them, or start a new one/);
+    assert.match(restoreText('prefilled', {label: 'Sam', at: at(2), now: NOW, kind: 'a new booking'}), /^You started a new booking \(Sam\) 2 min ago.*Discard it and start this one/);
+    assert.equal(restoreText('none'), '');
+});
+
+test('the stored map: set, remove, orphans, stale', () => {
+    const live = {values: {}, at: at(1)};
+    let map = draftsWith(null, 'service:a', live);
+    map = draftsWith(map, 'service:gone', {...live, label: 'Old'});
+    map = draftsWith(map, 'service:new', live);
+    map = draftsWith(map, 'bookable:gone', live);
+    map = draftsWith(map, 'service:old', {values: {}, at: at(20 * 24 * 60)});
+    const before = {...map};
+    assert.deepEqual(Object.keys(draftsWithout(map, 'service:a')).sort(), ['bookable:gone', 'service:gone', 'service:new', 'service:old']);
+    assert.deepEqual(map, before, 'not changed in place');
+    const o = orphanDrafts(map, 'service:', ['a'], {now: NOW});
+    assert.deepEqual(o.map(x => [x.key, x.id, x.draft.label]), [['service:gone', 'gone', 'Old']], 'new, live and stale ones are not orphans');
+    assert.deepEqual(staleDraftKeys(map, {now: NOW}), ['service:old']);
+});

package/plugins/feedback/CLAUDE.md

@@ -180,3 +180,15 @@ Deleting a report in the inbox hid it from the site, but the site's outbox kept
 manager answered `/fleet/mine` (its list for the site is complete): a SENT item the manager no longer has is dropped
 (`droppedByManager`, PURE, tested); waiting/refused items and an unreachable manager keep everything. The files go
 at the next prune (older than a day, no longer named). Found on the dcm click-through.
+
+## 1.2.0 (2026-10-15 Tool Upgrade, second pass)
+
+- Panels keep drafts under one key per panel and record (`feedback.draft.*`, `admin/lib/drafts.js`, tested), holding only
+  the changed fields, with `was` a fingerprint of the record. The restore question puts "Throw away" on OK, so Cancel,
+  Escape and the backdrop keep; a draft goes only after an answer; leaving closes panels and keeps drafts. Picked files
+  are never kept in a draft.
+- `kit.guardPanel` must be called after `openPanel`. It can still write after its panel closed: `rebase()` keeps
+  what is left unsent, `settle()` removes the draft once a save/send succeeded - call it on every success, or leaving
+  mid-send keeps a draft of text already sent (and invites a second send).
+- `rowKeys` stops Enter/Space and runs the row's main action on the next tick: Domma's confirm adds its document
+  keydown while the opening Enter is still bubbling and would read it as OK = Throw away.

package/plugins/feedback/admin/css/index.css

@@ -93,3 +93,8 @@
   .fb-grid3 { grid-template-columns: 1fr; }
   .fb-row { flex-wrap: wrap; }
 }
+
+/* The first load's skeleton slot (admin/js/lib/loading.js): a block, never a flex row, or it collapses. */
+.fb-loading { display: block; margin: .5rem 0; color: var(--dm-text-secondary); font-size: var(--dm-font-size-sm); }
+/* A panel saving before it closes is locked (inert): show it. */
+.fb-form.is-saving, .fb-detail.is-saving { opacity: .65; cursor: progress; }

package/plugins/feedback/admin/lib/drafts.js

@@ -0,0 +1,145 @@
+/**
+ * Feedback - kept drafts (PURE: no DOM, no globals; tested in tests/drafts.test.js).
+ *
+ * Every panel that takes typing keeps what was typed and not yet saved under its
+ * own storage key (one key per panel and record - never a shared map, so work
+ * finishing after a screen has gone cannot write a stale copy of someone else's).
+ *
+ * A draft is `{data, was, at}`: the form's values, the fingerprint of the record
+ * when the edits began (empty for something new), and when it was last typed in.
+ * `was` lets the "unsaved changes from last time" question say the record has
+ * changed - or gone - since.
+ *
+ * The question's DESTRUCTIVE answer is always OK ("Throw away"): Domma's E.confirm
+ * answers false for Cancel, Escape and a backdrop click alike, so false must KEEP.
+ *
+ * @module feedback/admin/lib/drafts
+ */
+
+/** Storage keys. */
+export const DRAFT_KEYS = {
+    compose: 'feedback.draft.compose',
+    report: (id) => `feedback.draft.report.${id}`,
+    settings: 'feedback.draft.settings'
+};
+
+/** JSON with object keys sorted, so two equal values always compare equal. */
+export function stableJson(v) {
+    if (Array.isArray(v)) return `[${v.map(stableJson).join(',')}]`;
+    if (v && typeof v === 'object') {
+        return `{${Object.keys(v).sort().filter(k => v[k] !== undefined).map(k => `${JSON.stringify(k)}:${stableJson(v[k])}`).join(',')}}`;
+    }
+    return JSON.stringify(v ?? null);
+}
+
+/** Do two form states differ? */
+export const differs = (a, b) => stableJson(a) !== stableJson(b);
+
+/**
+ * Only what was changed from the saved values: a kept draft holds these, so
+ * picking it up later puts back the person's own edits and leaves every field
+ * they did not touch as the record has it NOW (someone else's change survives).
+ */
+export function changedFields(values = {}, baseline = {}) {
+    return Object.fromEntries(Object.entries(values).filter(([k, v]) => stableJson(v) !== stableJson(baseline[k])));
+}
+
+/** A draft as kept. */
+export function makeDraft(data, was = '', at = new Date().toISOString()) {
+    return {data, was: String(was || ''), at};
+}
+
+/** Is this something this module wrote (and not an older build's leftovers)? */
+export function isDraft(d) {
+    return Boolean(d && typeof d === 'object' && d.data && typeof d.data === 'object' && !Array.isArray(d.data));
+}
+
+/** The draft's values over a form's defaults - only the keys the form has, as strings. */
+export function draftValues(draft, defaults) {
+    const out = {...defaults};
+    if (!isDraft(draft)) return out;
+    for (const k of Object.keys(defaults)) {
+        if (draft.data[k] !== undefined && draft.data[k] !== null) out[k] = String(draft.data[k]);
+    }
+    return out;
+}
+
+/** What the inbox panel edits of a report: status, reply, notes. */
+export const reportForm = (r = {}) => ({status: String(r.status || ''), reply: String(r.reply || ''), notes: String(r.notes || '')});
+
+/**
+ * A report's fingerprint for `was`. Opening a new report acknowledges it, so
+ * `new` counts as `acknowledged` - otherwise every draft started on a new
+ * report would come back "changed since".
+ */
+export function reportPrint(r) {
+    if (!r) return '';
+    const f = reportForm(r);
+    return stableJson({...f, status: f.status === 'new' ? 'acknowledged' : f.status});
+}
+
+/** The settings' fingerprint for `was`: the values the panel loaded. */
+export const settingsPrint = (values = {}) => stableJson(values);
+
+/**
+ * What became of the record since the draft's edits began.
+ * @param {{was?: string}} draft
+ * @param {string|null} now - the record's fingerprint now; null when it has been deleted
+ * @returns {'deleted'|'changed'|''}
+ */
+export function draftFate(draft, now) {
+    if (now === null) return 'deleted';
+    return draft?.was && now && draft.was !== now ? 'changed' : '';
+}
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** "15 Oct, 14:02" - local time. */
+export function shortWhen(iso) {
+    const t = Date.parse(iso);
+    if (!Number.isFinite(t)) return '';
+    const d = new Date(t);
+    const p = (n) => String(n).padStart(2, '0');
+    return `${d.getDate()} ${MONTHS[d.getMonth()]}, ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+/** E.confirm options for every restore question: OK throws away; Cancel, Escape and the backdrop keep. */
+export const RESTORE_CONFIRM = {title: 'Unsaved changes', confirmText: 'Throw away', cancelText: 'Keep them'};
+
+/** E.confirm options for closing a panel with changes: Cancel (or Escape) keeps the panel open. */
+export const DISCARD_CONFIRM = {title: 'Unsaved changes', confirmText: 'Discard', cancelText: 'Keep editing'};
+
+/**
+ * The question a kept draft on an existing record is offered back with.
+ *
+ * @param {object} draft
+ * @param {string|null} now - the record's fingerprint now (null: deleted)
+ * @param {{what: string, changedAt?: string}} o - `what`: "the report “Login broken”"
+ * @returns {{text: string, fate: string, options: object}}
+ */
+export function draftQuestion(draft, now, {what, changedAt = ''}) {
+    const at = shortWhen(draft?.at);
+    const ask = `Throw away the changes you left unsaved on ${what}${at ? ` (${at})` : ''}?`;
+    const fate = draftFate(draft, now);
+    if (fate === 'deleted') {
+        return {fate, options: {...RESTORE_CONFIRM, cancelText: 'Copy them'},
+            text: `${ask} It has been deleted since, so they can no longer be saved - keeping them copies them, so you can paste them elsewhere.`};
+    }
+    if (fate === 'changed') {
+        const since = shortWhen(changedAt);
+        return {fate, options: RESTORE_CONFIRM,
+            text: `${ask} It has been changed since${since ? ` (${since})` : ''} - keeping them puts your changes over that.`};
+    }
+    return {fate, options: RESTORE_CONFIRM, text: `${ask} Keeping them puts them back in the form.`};
+}
+
+/** The question for something new that was never sent (no record, so nothing to change). */
+export function newDraftQuestion(draft, what = 'the feedback') {
+    const at = shortWhen(draft?.at);
+    return {options: RESTORE_CONFIRM, text: `Throw away ${what} you left unsent${at ? ` (${at})` : ''}? Keeping it puts it back in the form.`};
+}
+
+/** Plain text of a draft, for copying when its record has gone. */
+export function draftText(draft) {
+    if (!isDraft(draft)) return '';
+    return Object.entries(draft.data).filter(([, v]) => typeof v === 'string' && v.trim()).map(([k, v]) => `${k}:\n${v}`).join('\n\n');
+}

package/plugins/feedback/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/feedback';
 export const BASE = '/api/plugins/feedback';
 
 let kit = null;
 
-/** tool-kit, plugin-chrome and help-popover, once, with stand-ins for an older admin. */
+/** tool-kit, plugin-chrome, help-popover 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/plugin-chrome.js').catch(() => ({})),
-            import('/admin/js/lib/help-popover.js').catch(() => ({}))
-        ]).then(([tk, chrome, help]) => ({
+            import('/admin/js/lib/help-popover.js').catch(() => ({})),
+            import('/admin/js/lib/loading.js').catch(() => ({}))
+        ]).then(([tk, chrome, help, 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();
@@ -28,7 +30,10 @@ export function loadKit() {
             }),
             viewLifetime: tk.viewLifetime || (() => ({add() {}, reset() {}})),
             addBannerAction: chrome.addBannerAction || (() => null),
-            helpPopovers: help.helpPopovers || (() => () => {})
+            helpPopovers: help.helpPopovers || (() => () => {}),
+            // 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;
@@ -167,7 +172,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 Feedback badge. */
@@ -208,3 +214,153 @@ export async function openPanel({title, size = 'md', html, model = {}, methods =
     so.open();
     return {so, panel, close: () => so.close()};
 }
+
+// ---------------------------------------------------------------------------------
+// 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)
+    };
+}
+
+/** Copy text, with a toast either way. */
+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;
+    }
+}
+
+/**
+ * A list's ways into its row menu besides right-click: the row's ⋮ button and
+ * Shift+F10 (never the ContextMenu key - Chrome on Windows opens its own on key-up).
+ * Click, Enter or Space on the row does `primary`.
+ *
+ * @returns {Function} removes the listeners
+ */
+export function rowKeys(listEl, {rowSel, kebabSel, openMenuAt, primary}) {
+    const onClick = (e) => {
+        const row = e.target.closest(rowSel);
+        if (!row) return;
+        const kebab = e.target.closest(kebabSel);
+        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.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);
+    return () => { listEl.removeEventListener('click', onClick); listEl.removeEventListener('keydown', onKey); };
+}

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

@@ -9,7 +9,8 @@
  *
  * @module feedback/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';
 
 /** Ranges - lib/shape.js SETTING_RULES, which the server applies again. */
 const RULES = {
@@ -38,22 +39,39 @@ const wholeIn = (v, {min, max}) => { const n = Number(v); return String(v).trim(
  *
  * @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) {
+export async function addSettingsCog($container, kit, {scope, here}) {
     let got = null;
     // Silent: a site user who is not an administrator gets 403 here, and needs no cog and no error.
     try { got = await H.request('GET', `${BASE}/settings`, null, {silent: true}); } catch { return; }
-    if (!got?.side) return;
-    kit.addBannerAction($container, {id: 'feedback-settings', icon: 'settings', title: 'Feedback 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: 'feedback-settings', icon: 'settings', title: 'Feedback 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 Feedback 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, Number(f[x.key].peek())]));
-    const opened = JSON.stringify(values());
     const saving = M.observable(false);
     const bad = Object.fromEntries(fields.map(x => [`${x.key}Bad`, M.computed(() => !wholeIn(f[x.key].value, RULES[x.key]))]));
     const model = {...f, ...bad, saving, cannot: M.computed(() => saving.value || Object.values(bad).some(b => b.value))};
@@ -70,38 +88,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('Feedback 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: 'Feedback settings', size: 'sm', 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: 'Feedback settings', size: 'sm', html, model, methods,
+        cleanup: () => [...Object.values(bad), 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;
 }

package/plugins/feedback/admin/views/feedback.js

@@ -58,7 +58,7 @@ export const feedbackView = {
         }
         if (!here()) return;
         // The cog (1.1.7) - this side's settings, for those who may change them. Never blocks the screen.
-        addSettingsCog($container, kit).catch(() => {});
+        addSettingsCog($container, kit, {scope, here}).catch(() => {});
 
         const load = async (screen, into, ctx) => {
             const mod = await import(`/plugins/feedback/admin/views/${screen}.js?v=${V}`);