domma-cms 0.115.5 → 0.116.1

package/plugins/support/admin/views/inbox.js

@@ -2,24 +2,32 @@
  * Support on the manager: every site's requests. Waiting on Domma comes first,
  * urgent at the top; a request opens in a panel with the conversation, a reply
  * box (the customer is emailed), status, priority and internal notes.
+ *
+ * Right-click a row (or its ⋮, or Shift+F10) for the quick moves: resolve or
+ * reopen, urgent, archive, delete. The archive is Domma's own filing - the site
+ * still sees the request - and a customer writing again takes it back out.
  */
 
-import {TONE, api, esc, listOf, openPanel, refreshBadge, stamp, store, threadHtml, when} from '../lib/kit.js';
+import {THREAD, TONE, api, copyText, esc, listOf, openPanel, refreshBadge, rowKeys, stamp, store, threadRows, when} from '../lib/kit.js';
 
 const ROW = `
-<div class="sp-row" data-id="{{key}}" tabindex="0" role="button">
+<div class="sp-row" data-id="{{key}}" tabindex="0" role="button" aria-haspopup="menu">
   <span class="sp-cat" data-bind-title="categoryLabel"><span data-icon="{{icon}}" data-icon-size="16"></span></span>
   <span class="sp-main"><strong data-bind-text="subject"></strong><small data-bind-text="meta"></small></span>
   <span class="sp-urgent" data-bind-hidden="!urgent">Urgent</span>
   <span class="sp-chip" data-bind-class="tone" data-bind-text="statusLabel"></span>
+  <button type="button" class="sp-kebab" aria-label="Actions" title="Actions">&#8942;</button>
 </div>`;
 
+/** `all` is everything still in the inbox; the archive is its own tab. */
 const FILTERS = [
     {key: 'open', label: 'Waiting on Domma'},
     {key: 'answered', label: 'Answered'},
     {key: 'closed', label: 'Resolved'},
-    {key: 'all', label: 'All'}
+    {key: 'all', label: 'All'},
+    {key: 'archived', label: 'Archived'}
 ];
+const inFilter = (t, f) => (f === 'archived' ? Boolean(t.archived) : !t.archived && (f === 'all' || t.status === f));
 
 export async function mount(root, ctx) {
     const {kit, scope, here, meta, id, mode} = ctx;
@@ -32,20 +40,24 @@ export async function mount(root, ctx) {
     const tickets = M.observable([]);
     const loading = M.observable(true);
     const error = M.observable('');
-    const filter = M.observable(store.get('support.filter') || 'open');
+    const stored = store.get('support.filter');
+    const filter = M.observable(FILTERS.some(f => f.key === stored) ? stored : 'open');
     const query = M.observable('');
     const rows = M.observable([]);
     const counts = M.observable({});
+    const emptyText = M.computed(() => (query.value.trim() ? 'Nothing matches that search.'
+        : filter.value === 'archived' ? 'Nothing archived. Archive a request from its menu to put it away without deleting it.'
+            : filter.value === 'open' ? 'Nothing is waiting on Domma.' : 'Nothing here.'));
     scope(M.effect(() => {
         const all = tickets.value;
-        counts.value = Object.fromEntries(FILTERS.map(f => [f.key, f.key === 'all' ? all.length : all.filter(t => t.status === f.key).length]));
+        counts.value = Object.fromEntries(FILTERS.map(f => [f.key, all.filter(t => inFilter(t, f.key)).length]));
         const q = query.value.trim().toLowerCase();
         rows.value = all
-            .filter(t => filter.value === 'all' || t.status === filter.value)
+            .filter(t => inFilter(t, filter.value))
             .filter(t => !q || [t.subject, t.siteName, t.userName, t.userEmail, ...(t.messages || []).map(m => m.body)]
                 .some(v => String(v || '').toLowerCase().includes(q)))
             // Urgent first, then whoever has waited longest for us (newest first elsewhere).
-            .sort((a, b) => (b.priority === 'urgent') - (a.priority === 'urgent')
+            .sort((a, b) => (b.priority === 'urgent' && b.status !== 'closed') - (a.priority === 'urgent' && a.status !== 'closed')
                 || (filter.value === 'open' ? String(a.lastAt).localeCompare(String(b.lastAt)) : String(b.lastAt).localeCompare(String(a.lastAt))))
             .map(t => ({
                 key: t.id,
@@ -66,16 +78,16 @@ export async function mount(root, ctx) {
     view.innerHTML = `
 <div class="sp-bar">
   <div class="sp-seg" role="tablist" aria-label="Filter">
-    ${FILTERS.map(f => `<button type="button" role="tab" data-filter="${f.key}" data-bind-class="filter.value === '${f.key}' && 'is-on'">${esc(f.label)} <b data-bind-text="counts.value['${f.key}'] || 0"></b></button>`).join('')}
+    ${FILTERS.map(f => `<button type="button" role="tab" data-filter="${f.key}" data-bind-class="filter.value === '${f.key}' && 'is-on'" data-bind-aria-selected="filter.value === '${f.key}' ? 'true' : 'false'">${esc(f.label)} <b data-bind-text="counts.value['${f.key}'] || 0"></b></button>`).join('')}
   </div>
   <span class="sp-spacer"></span>
   <input class="form-input sp-search" type="search" placeholder="Search requests" data-model="query.value" aria-label="Search requests">
-  <span data-help-title="Support inbox" data-help="Every site's support requests. Replying emails the customer a link back to the conversation in their own admin, and moves it to Answered (or Resolved, if you choose). A customer writing again moves it back to Waiting on Domma. Urgent requests sort first and turn the sidebar badge red. Internal notes never reach the site."></span>
+  <span data-help-title="Support inbox" data-help="Every site's support requests. Click one to read and reply - replying emails the customer a link back to the conversation in their own admin. Right-click a request (or use its ⋮ button, or Shift+F10) to resolve, reopen, mark urgent, archive or delete it. Archiving puts a request away without deleting it; the customer still sees it, and if they write again it comes back here. Urgent requests sort first and turn the sidebar badge red. Internal notes never reach the site."></span>
 </div>
 <p class="sp-note sp-small">Customers see: ${esc([card.email, card.phone, card.hours].filter(Boolean).join(' · ') || 'no contact details set')}${mode.notifyEmail ? ` · New requests are emailed to ${esc(mode.notifyEmail)}` : ' · New requests are not emailed (no notifyEmail set)'}.</p>
 <div class="sp-loading dm-loading-slot" data-bind-hidden="!loading.value">Loading...</div>
 <p class="sp-note is-bad" data-bind-hidden="!error.value" data-bind-text="error.value"></p>
-<p class="sp-note" data-bind-hidden="loading.value || rows.value.length">Nothing here.</p>
+<p class="sp-note" data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
 <div class="sp-list" data-each="rows.value key=key"></div>`;
     root.appendChild(view);
     scope(kit.helpPopovers(view, {position: 'bottom'}));
@@ -98,48 +110,104 @@ export async function mount(root, ctx) {
     }
 
     const byId = (tid) => tickets.peek().find(t => t.id === tid);
-    const replace = (t) => { tickets.value = tickets.peek().map(x => (x.id === t.id ? {...x, ...t} : x)); refreshBadge(); };
+    const replace = (t) => { tickets.value = tickets.peek().map(x => (x.id === t.id ? {...x, ...t} : x)); refreshBadge(); return t; };
+    const fail = (err) => E.toast(err.message || String(err), {type: 'error'});
+
+    // ---- The moves: one definition each, for the row menu and the panel alike ----
+
+    const actions = {
+        /** Resolve goes through reply, so the customer is told; reopen is a quiet status change. */
+        async resolve(t) { replace(await api.reply(t.id, {status: 'closed'})); E.toast('Resolved.', {type: 'success'}); },
+        async reopen(t) { replace(await api.update(t.id, {status: 'open'})); E.toast('Reopened - it is waiting on Domma again.', {type: 'info'}); },
+        async urgent(t, on) { replace(await api.update(t.id, {priority: on ? 'urgent' : 'normal'})); },
+        async archive(t, on) {
+            replace(await api.update(t.id, {archived: on}));
+            E.toast(on ? `Archived "${t.subject}".` : `"${t.subject}" is back in the inbox.`, {type: 'success'});
+        },
+        async remove(t) {
+            if (!await E.confirm(`Delete "${esc(t.subject)}" for good? It goes from ${esc(t.siteName)}'s admin too. Archive it instead to keep it.`)) return false;
+            await api.remove(t.id);
+            if (openPanel_?.tid === t.id) openPanel_.close();
+            tickets.value = tickets.peek().filter(x => x.id !== t.id);
+            refreshBadge();
+            E.toast('Deleted.', {type: 'success'});
+            return true;
+        }
+    };
+    /** The request open in a panel, so a delete from its row menu closes it. */
+    let openPanel_ = null;
+    const act = (name, ...args) => async (t) => { try { return await actions[name](t, ...args); } catch (err) { fail(err); return false; } };
+
+    function menuItems(t) {
+        const closed = t.status === 'closed';
+        const urgent = t.priority === 'urgent';
+        const siteUrl = t.siteHost ? `https://${t.siteHost}/admin/` : '';
+        return [
+            {label: 'Open and reply', icon: 'message-square', action: () => open(t.id)},
+            {type: 'divider'},
+            closed ? {label: 'Reopen', icon: 'rotate-ccw', action: () => act('reopen')(t)}
+                : {label: 'Resolve (emails the customer)', icon: 'check-circle', action: () => act('resolve')(t)},
+            {label: urgent ? 'Not urgent' : 'Mark urgent', icon: 'alert-triangle', action: () => act('urgent', !urgent)(t)},
+            t.archived ? {label: 'Back to the inbox', icon: 'inbox', action: () => act('archive', false)(t)}
+                : {label: 'Archive', icon: 'archive', action: () => act('archive', true)(t)},
+            {type: 'divider'},
+            ...(t.userEmail ? [{label: 'Copy customer email', icon: 'copy', action: () => copyText(t.userEmail, 'Email copied')}] : []),
+            ...(siteUrl ? [{label: `Open ${t.siteName}'s admin`, icon: 'external-link', action: () => window.open(siteUrl, '_blank', 'noopener')}] : []),
+            {type: 'divider'},
+            {label: 'Delete', icon: 'trash', danger: true, action: () => act('remove')(t)}
+        ];
+    }
+
+    // ---- A request, in a panel ----
 
     async function open(tid) {
         // Read fresh: the panel shows where a reply will be emailed, which only the detail route works out.
         let t;
         try { t = await api.ticket(tid); } catch { t = byId(tid); }
-        if (!t) { E.toast('That request is no longer here.', {type: 'warning'}); return; }
+        if (!t || !here()) { if (!t) E.toast('That request is no longer here.', {type: 'warning'}); return; }
+        if (!byId(tid)) tickets.value = [t, ...tickets.peek()];
         const rt = t.replyTo || {email: t.userEmail || '', source: t.userEmail ? 'profile' : 'none'};
         const replyNote = rt.source === 'registration' ? `Replies are emailed to ${rt.email} - the address the site was bought with.`
             : rt.source === 'profile' ? `Replies are emailed to ${rt.email} - from the requester's profile on their site (this site was not bought through Customers).`
                 : 'This customer has no email on record - replies show only in their admin.';
+
+        // The panel follows the list's copy, so a move from the row menu shows here at once.
+        const cur = M.computed(() => tickets.value.find(x => x.id === tid) || t);
+        const thread = M.computed(() => threadRows(cur.value.messages || [], 'domma'));
+        const status = M.computed(() => cur.value.status);
+        const statusLabel = M.computed(() => inboxLabel(cur.value.status));
+        const tone = M.computed(() => `is-${TONE[cur.value.status] || 'muted'}`);
+        const urgent = M.computed(() => cur.value.priority === 'urgent');
+        const archived = M.computed(() => Boolean(cur.value.archived));
         const draft = M.observable('');
+        // Bindings may not call methods (.trim()), so the test is a computed.
+        const hasDraft = M.computed(() => Boolean(draft.value.trim()));
         const after = M.observable('answered');
         const notes = M.observable(t.notes || '');
-        const priority = M.observable(t.priority || 'normal');
-        const status = M.observable(t.status);
         const busy = M.observable(false);
         let panel = null;
-        const render = () => {
-            const cur = byId(tid) || t;
-            status.value = cur.status;
-            priority.value = cur.priority;
-            const box = panel?.panel.querySelector('.sp-thread-host');
-            if (box) { box.innerHTML = threadHtml(cur.messages, 'domma'); box.scrollTop = box.scrollHeight; }
-            const urgent = panel?.panel.querySelector('[data-ref="urgent"]');
-            if (urgent) urgent.checked = cur.priority === 'urgent';
-            const chip = panel?.panel.querySelector('[data-ref="status"]');
-            if (chip) { chip.textContent = inboxLabel(cur.status); chip.className = `sp-chip is-${TONE[cur.status] || 'muted'}`; }
-        };
-        const siteUrl = t.siteHost ? `https://${t.siteHost}/admin/` : '';
+        let stopScroll = () => {};
+        let menu = null;
+
         const run = async (fn) => {
             if (busy.peek()) return;
             busy.value = true;
-            try { await fn(); render(); } catch (err) { E.toast(err.message || String(err), {type: 'error'}); } finally { busy.value = false; }
+            try { await fn(); } catch (err) { fail(err); } finally { busy.value = false; }
         };
+        const siteUrl = t.siteHost ? `https://${t.siteHost}/admin/` : '';
         panel = await openPanel({
             title: t.subject,
             size: 'lg',
-            model: {draft, after, notes, priority, status, busy},
+            model: {thread, status, statusLabel, tone, urgent, archived, draft, hasDraft, after, notes, busy},
+            cleanup: () => {
+                stopScroll(); menu?.destroy?.();
+                [cur, thread, status, statusLabel, tone, urgent, archived, hasDraft].forEach(c => c.dispose?.());
+                if (openPanel_?.tid === tid) openPanel_ = null;
+            },
             html: `<div class="sp-detail">
   <dl class="sp-facts">
-    <div><dt>Status</dt><dd><span data-ref="status" class="sp-chip"></span></dd></div>
+    <div><dt>Status</dt><dd><span class="sp-chip" data-bind-class="tone.value" data-bind-text="statusLabel.value"></span>
+      <span class="sp-chip is-muted" data-bind-hidden="!archived.value">Archived</span></dd></div>
     <div><dt>Site</dt><dd>${siteUrl ? `<a href="${esc(siteUrl)}" target="_blank" rel="noopener">${esc(t.siteName)}</a>` : esc(t.siteName)}</dd></div>
     <div><dt>From</dt><dd>${esc(t.userName)}${t.userEmail ? ` · <a href="mailto:${esc(t.userEmail)}">${esc(t.userEmail)}</a>` : ''}</dd></div>
     <div><dt>About</dt><dd>${esc(labelOf(t.category))}</dd></div>
@@ -147,9 +215,9 @@ export async function mount(root, ctx) {
     ${t.where ? `<div><dt>Where</dt><dd>${esc(t.where)}</dd></div>` : ''}
     ${t.cmsVersion ? `<div><dt>CMS</dt><dd>${esc(t.cmsVersion)}</dd></div>` : ''}
   </dl>
-  <div class="sp-thread-host"></div>
+  <div class="sp-thread-host">${THREAD}</div>
   <div class="sp-reply">
-    <label class="form-label" for="sp-answer">Reply <span data-help="The customer sees it in their admin and gets it by email."></span></label>
+    <label class="form-label" for="sp-answer">Reply <span data-help="The customer sees it in their admin and gets it by email. Right-click a message to copy or quote it."></span></label>
     <p class="sp-note sp-small">${esc(replyNote)}</p>
     <textarea id="sp-answer" class="form-textarea" rows="5" maxlength="8000" data-model="draft.value" placeholder="Write to ${esc(t.userName || 'the customer')}"></textarea>
     <div class="sp-actions">
@@ -157,15 +225,17 @@ export async function mount(root, ctx) {
       <span class="sp-spacer"></span>
       <button type="button" class="btn btn-sm btn-ghost" data-on-click="resolve" data-bind-hidden="status.value === 'closed'" data-bind-disabled="busy.value">Resolve without reply</button>
       <button type="button" class="btn btn-sm btn-ghost" data-on-click="reopen" data-bind-hidden="status.value !== 'closed'" data-bind-disabled="busy.value">Reopen</button>
-      <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="busy.value || !draft.value.trim()"><span data-icon="send" data-icon-size="13"></span> Send reply</button>
+      <button type="button" class="btn btn-sm btn-primary" data-on-click="send" data-bind-disabled="busy.value || !hasDraft.value"><span data-icon="send" data-icon-size="13"></span> Send reply</button>
     </div>
   </div>
   <div class="sp-side">
-    <label class="sp-inline"><input type="checkbox" data-ref="urgent"> Urgent</label>
+    <label class="sp-inline"><input type="checkbox" data-bind-checked="urgent.value" data-bind-disabled="busy.value" data-on-change="toggleUrgent"> Urgent</label>
     <label class="form-label" for="sp-notes">Internal notes <span data-help="For the Domma team only - never sent to the site."></span></label>
     <textarea id="sp-notes" class="form-textarea" rows="3" data-model="notes.value"></textarea>
     <div class="sp-actions">
       <button type="button" class="btn btn-sm btn-ghost sp-danger" data-on-click="remove" data-bind-disabled="busy.value"><span data-icon="trash" data-icon-size="13"></span> Delete</button>
+      <button type="button" class="btn btn-sm btn-ghost" data-on-click="archive" data-bind-disabled="busy.value">
+        <span data-icon="archive" data-icon-size="13"></span> <span data-bind-text="archived.value ? 'Back to the inbox' : 'Archive'"></span></button>
       <span class="sp-spacer"></span>
       <button type="button" class="btn btn-sm btn-ghost" data-on-click="saveNotes" data-bind-disabled="busy.value">Save notes</button>
     </div>
@@ -173,42 +243,62 @@ export async function mount(root, ctx) {
 </div>`,
             methods: {
                 send: () => run(async () => {
-                    const next = await api.reply(tid, {body: draft.peek(), status: after.peek()});
-                    replace(next);
+                    replace(await api.reply(tid, {body: draft.peek(), status: after.peek()}));
                     draft.value = '';
                     E.toast(rt.email ? `Sent - emailed to ${rt.email}.` : 'Sent - it shows in their admin.', {type: 'success'});
                 }),
-                resolve: () => run(async () => { replace(await api.reply(tid, {status: 'closed'})); E.toast('Resolved.', {type: 'success'}); }),
-                reopen: () => run(async () => { replace(await api.update(tid, {status: 'open'})); }),
+                resolve: () => run(() => actions.resolve(cur.peek())),
+                reopen: () => run(() => actions.reopen(cur.peek())),
+                toggleUrgent: (e) => run(async () => {
+                    // A failed save puts the box back: the binding only re-runs when the value changes.
+                    try { await actions.urgent(cur.peek(), Boolean(e.target.checked)); } finally { e.target.checked = urgent.peek(); }
+                }),
+                archive: () => run(async () => {
+                    const on = !archived.peek();
+                    await actions.archive(cur.peek(), on);
+                    if (on) panel?.close();
+                }),
                 saveNotes: () => run(async () => { replace(await api.update(tid, {notes: notes.peek()})); E.toast('Notes saved.', {type: 'success'}); }),
-                remove: async () => {
-                    if (!await E.confirm(`Delete "${esc(t.subject)}"? It goes from ${esc(t.siteName)}'s admin too.`)) return;
-                    await run(async () => {
-                        await api.remove(tid);
-                        tickets.value = tickets.peek().filter(x => x.id !== tid);
-                        refreshBadge();
-                        panel?.close();
-                    });
-                }
+                remove: () => run(async () => { if (await actions.remove(cur.peek())) panel?.close(); })
+            }
+        });
+        openPanel_ = {tid, close: () => panel?.close()};
+        // Keep the newest message in view as the thread grows.
+        const box = panel.panel.querySelector('.sp-thread-host');
+        stopScroll = M.effect(() => { thread.value; Promise.resolve().then(() => { M.flush?.(); box.scrollTop = box.scrollHeight; }); });
+        // A message: copy it, or quote it into the reply.
+        menu = E.contextMenu(box, {
+            cursor: 'glyph', match: '.sp-msg', inherit: false, density: 'compact',
+            items: (li) => {
+                const m = thread.peek().find(x => x.key === li.dataset.key);
+                if (!m) return [];
+                return [
+                    {label: 'Copy message', icon: 'copy', action: () => copyText(m.body, 'Message copied')},
+                    {label: 'Quote in reply', icon: 'corner-down-right', action: () => {
+                        const quoted = m.body.split('\n').map(l => `> ${l}`).join('\n');
+                        draft.value = `${draft.peek() ? `${draft.peek().replace(/\s+$/, '')}\n\n` : ''}${quoted}\n\n`;
+                        panel.panel.querySelector('#sp-answer')?.focus();
+                    }}
+                ];
             }
         });
-        panel.panel.querySelector('[data-ref="urgent"]').addEventListener('change', (e) => run(async () => {
-            replace(await api.update(tid, {priority: e.target.checked ? 'urgent' : 'normal'}));
-        }));
-        render();
     }
 
-    const bindings = M.applyBindings({tickets, loading, error, filter, query, rows, counts}, view, {methods: {}});
+    const bindings = M.applyBindings({tickets, loading, error, filter, query, rows, counts, emptyText}, view, {methods: {}});
     scope(() => bindings.dispose());
 
     const seg = view.querySelector('.sp-seg');
     const onFilter = (e) => { const b = e.target.closest('[data-filter]'); if (b) { filter.value = b.dataset.filter; store.set('support.filter', filter.value); } };
     seg.addEventListener('click', onFilter);
-    const onClick = (e) => { const row = e.target.closest('.sp-row'); if (row) open(row.dataset.id); };
-    const onKey = (e) => { const row = e.target.closest('.sp-row'); if (row && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); open(row.dataset.id); } };
-    listEl.addEventListener('click', onClick);
-    listEl.addEventListener('keydown', onKey);
-    scope(() => { seg.removeEventListener('click', onFilter); listEl.removeEventListener('click', onClick); listEl.removeEventListener('keydown', onKey); });
+    scope(() => seg.removeEventListener('click', onFilter));
+
+    // Rows: click or Enter opens; right-click, the ⋮ or Shift+F10 = the menu.
+    const rowMenu = E.contextMenu(listEl, {
+        cursor: 'glyph', match: '.sp-row', inherit: false, density: 'compact',
+        items: (row) => { const t = byId(row.dataset.id); return t ? menuItems(t) : []; }
+    });
+    scope(() => rowMenu?.destroy?.());
+    scope(rowKeys(listEl, {rowSel: '.sp-row', kebabSel: '.sp-kebab', openMenuAt: kit.openMenuAt, primary: open}));
 
     I.scan(view);
     await load();

package/plugins/support/admin/views/support.js

@@ -14,7 +14,7 @@
 import {api, loadKit} from '../lib/kit.js';
 
 const ROUTE = /^#\/plugins\/support(\/|$)/;
-const V = '1.0.0';
+const V = '1.1.0';
 let lifetime = null;
 
 export const supportView = {

package/plugins/support/collections/support-tickets.json

@@ -19,6 +19,7 @@
     {"name": "lastFrom", "label": "Last from", "type": "text"},
     {"name": "lastAt", "label": "Last message", "type": "text"},
     {"name": "notes", "label": "Internal notes", "type": "textarea"},
+    {"name": "archived", "label": "Archived", "type": "boolean"},
     {"name": "history", "label": "History", "type": "array", "items": "object"}
   ],
   "api": {

package/plugins/support/lib/receiver.js

@@ -165,7 +165,7 @@ async function dommaTurnNow(id, {body = '', status, by, msgId}, now) {
     return updateEntry(COLLECTION, id, data);
 }
 
-/** Status, priority or notes, from the inbox - with a line of history for what moved. */
+/** Status, priority, notes or the archive, from the inbox - with a line of history for what moved. */
 export function patch(id, change, by, now = new Date().toISOString()) {
     return serial(id, () => patchNow(id, change, by, now));
 }
@@ -177,6 +177,7 @@ async function patchNow(id, change, by, now) {
     const history = Array.isArray(d.history) ? [...d.history] : [];
     if (change.status !== undefined && change.status !== d.status) history.push({at: now, by, what: `Status: ${change.status}`});
     if (change.priority !== undefined && change.priority !== d.priority) history.push({at: now, by, what: `Priority: ${change.priority}`});
+    if (change.archived !== undefined && change.archived !== Boolean(d.archived)) history.push({at: now, by, what: change.archived ? 'Archived' : 'Back from the archive'});
     Object.assign(d, change, {history: history.slice(-200)});
     return updateEntry(COLLECTION, id, d);
 }

package/plugins/support/lib/sender.js

@@ -13,7 +13,10 @@
  *
  * The outbox also keeps the last view of each request from the manager (for the
  * sidebar badge, which must never call the manager), which Domma replies this
- * site has seen, and the contact card the manager last sent.
+ * site has seen, the contact card the manager last sent, and the SHELF: the
+ * requests this site has archived or removed from its own list. The shelf is
+ * this site's alone - Domma keeps every request whatever a site does with it -
+ * and a new reply from Domma takes a request off it again (see applyShelf).
  *
  * @module support/lib/sender
  */
@@ -43,9 +46,10 @@ export function createOutbox(dataDir) {
                 items: Array.isArray(j.items) ? j.items : [],
                 seen: j.seen && typeof j.seen === 'object' ? j.seen : {},
                 tickets: Array.isArray(j.tickets) ? j.tickets : [],
-                contact: j.contact && typeof j.contact === 'object' ? j.contact : null
+                contact: j.contact && typeof j.contact === 'object' ? j.contact : null,
+                shelf: j.shelf && typeof j.shelf === 'object' ? j.shelf : {}
             };
-        } catch { return {items: [], seen: {}, tickets: [], contact: null}; }
+        } catch { return {items: [], seen: {}, tickets: [], contact: null, shelf: {}}; }
     };
     const write = (state) => {
         fs.mkdirSync(dataDir, {recursive: true});
@@ -58,6 +62,34 @@ export function createOutbox(dataDir) {
         seen: () => read().seen,
         tickets: () => read().tickets,
         contact: () => read().contact,
+        shelf: () => read().shelf,
+        /**
+         * Archive or remove a request from this site's list (`state` null puts it back). Remembers
+         * Domma's latest reply at the time, and marks it read: what is put away is not "new".
+         */
+        shelve(ref, state, dommaAt = '') {
+            update(s => {
+                if (!state) { delete s.shelf[ref]; return; }
+                s.shelf[ref] = {state, dommaAt, at: new Date().toISOString()};
+                if (dommaAt) s.seen[ref] = dommaAt;
+            });
+        },
+        /**
+         * Cancel a request that never reached Domma: it and its follow-ups leave the outbox.
+         * @returns {boolean} false when any of it has been sent - that is Domma's now
+         */
+        discard(ref) {
+            // A send in flight may be carrying it right now: too late to promise it will not go.
+            if (this.flushing) return false;
+            return update(s => {
+                const mine = s.items.filter(i => i.ref === ref || i.ticketRef === ref);
+                if (!mine.some(i => i.kind === 'ticket') || mine.some(i => i.state === 'sent')) return false;
+                s.items = s.items.filter(i => !(i.ref === ref || i.ticketRef === ref));
+                delete s.shelf[ref];
+                delete s.seen[ref];
+                return true;
+            });
+        },
         add(kind, payload, ticketRef) {
             return update(s => {
                 const item = {ref: payload.ref, kind, ticketRef: ticketRef || payload.ref, state: 'waiting', payload,
@@ -79,6 +111,13 @@ export function createOutbox(dataDir) {
             update(s => {
                 s.tickets = remote.map(t => ({ref: t.ref, subject: t.subject, status: t.status, dommaAt: lastDommaAt(t)}));
                 if (contact) s.contact = contact;
+                // The shelf forgets what Domma deleted, and what Domma has written to since.
+                const latest = new Map(s.tickets.map(t => [t.ref, t.dommaAt]));
+                const local = new Set(s.items.map(i => i.ticketRef));
+                for (const [ref, entry] of Object.entries(s.shelf)) {
+                    const known = latest.has(ref);
+                    if ((!known && !local.has(ref)) || (known && (latest.get(ref) || '') !== (entry.dommaAt || ''))) delete s.shelf[ref];
+                }
                 const byRef = new Map(remote.map(t => [t.ref, t]));
                 const have = new Set(remote.flatMap(t => [t.ref, ...(t.messages || []).map(m => m.id)]));
                 s.items = s.items.filter((i) => {
@@ -144,7 +183,10 @@ const RETRY = new Set([401, 408, 429]);
 async function flushOnce(outbox, api) {
     let sent = 0;
     let error = '';
-    for (const item of outbox.all().filter(i => i.state === 'waiting')) {
+    for (const queued of outbox.all().filter(i => i.state === 'waiting')) {
+        // Read it again: it may have been cancelled while an earlier item was sending.
+        const item = outbox.all().find(i => i.ref === queued.ref && i.state === 'waiting');
+        if (!item) continue;
         if (item.kind === 'message') {
             const parent = outbox.all().find(i => i.kind === 'ticket' && i.ref === item.ticketRef);
             if (parent?.state === 'waiting') continue;          // goes after its request
@@ -165,6 +207,28 @@ async function flushOnce(outbox, api) {
     return {sent, waiting: outbox.all().filter(i => i.state === 'waiting').length, error};
 }
 
+/**
+ * The shelf over a list of requests, PURE: removed ones go, archived ones are
+ * marked `archived`. Either comes back the moment Domma has written since it was
+ * put away (`dommaAt` moved on) - a reply is never hidden from the customer.
+ *
+ * @param {object[]} tickets - from mergeTickets
+ * @param {Object<string, {state: 'archived'|'removed', dommaAt?: string}>} shelf
+ * @returns {object[]}
+ */
+export function applyShelf(tickets, shelf = {}) {
+    const out = [];
+    for (const t of tickets) {
+        const entry = shelf[t.ref];
+        // An offline (stale) copy has no messages to read the latest reply from: trust the shelf.
+        const latest = t.stale ? (entry?.dommaAt || '') : lastDommaAt(t);
+        const live = entry && (latest || '') === (entry.dommaAt || '');
+        if (live && entry.state === 'removed') continue;
+        out.push({...t, archived: Boolean(live && entry.state === 'archived')});
+    }
+    return out;
+}
+
 /**
  * The requests the screen shows: the manager's view of each, plus anything
  * still waiting here (a request the manager has never seen, or a message it

package/plugins/support/lib/shape.js

@@ -144,6 +144,11 @@ export function addTurn(data, {from, name, body = '', id, at, status, close = fa
         next.lastAt = at;
         added = true;
         history.push({at, by: name, what: from === 'domma' ? 'Replied' : 'Wrote'});
+        // Archived in the inbox, and the customer wrote again: it comes back to be answered.
+        if (from === 'customer' && next.archived) {
+            next.archived = false;
+            history.push({at, by: name, what: 'Back from the archive'});
+        }
     }
     // Whose turn it is now. Domma may choose (answered, or closed); the customer reopens by writing.
     let to = data.status;
@@ -190,7 +195,7 @@ export function lastDommaAt(ticket) {
     return ms.length ? String(ms[ms.length - 1].at || '') : '';
 }
 
-/** What the inbox may change without writing: status and internal notes. */
+/** What the inbox may change without writing: status, priority, internal notes and the archive. */
 export function cleanUpdate(body = {}) {
     const patch = {};
     if (body.status !== undefined) {
@@ -202,6 +207,10 @@ export function cleanUpdate(body = {}) {
         if (!PRIORITY_KEYS.includes(body.priority)) return {error: 'That is not a priority.'};
         patch.priority = body.priority;
     }
+    if (body.archived !== undefined) {
+        if (typeof body.archived !== 'boolean') return {error: 'Archived is yes or no.'};
+        patch.archived = body.archived;
+    }
     if (!Object.keys(patch).length) return {error: 'Nothing to change.'};
     return {patch};
 }

package/plugins/support/plugin.js

@@ -12,13 +12,16 @@
  *     POST /tickets/:ref/messages  write again
  *     POST /tickets/:ref/close     mark resolved
  *     PUT  /tickets/:ref/seen      Domma's latest reply has been read
+ *     PUT  /tickets/:ref/shelf     archive it, remove it from this site's list, or put it back
+ *                                  ({state: archived|removed|null}); removing one that never
+ *                                  reached Domma cancels it. Domma keeps its copy either way.
  *
  *   manager  (Site Manager is installed beside it)
  *     POST /fleet/tickets · POST /fleet/messages · GET /fleet/mine   from the sites (Bearer fleet token)
  *     GET  /mode · /meta · /count  the badge counts requests waiting on Domma, red while one is urgent
  *     GET  /tickets · GET /tickets/:id
  *     POST /tickets/:id/reply      answer (and set the status), emailing the customer
- *     PUT  /tickets/:id            status, priority, internal notes
+ *     PUT  /tickets/:id            status, priority, internal notes, archived
  *     DELETE /tickets/:id
  *
  * A standalone site (not started by a manager) still gets the contact card -
@@ -36,7 +39,7 @@ import {
     CATEGORIES, PRIORITIES, STATUSES, buildMessagePayload, buildTicketPayload, cleanMessage, cleanRequest, cleanUpdate,
     contactCard, createThrottle, lastDommaAt, senderView, toCustomerEmail, toDommaEmail
 } from './lib/shape.js';
-import {createOutbox, flush, managerApi, managerOf, mergeTickets, newRef} from './lib/sender.js';
+import {applyShelf, createOutbox, flush, managerApi, managerOf, mergeTickets, newRef} from './lib/sender.js';
 
 const HERE = path.dirname(fileURLToPath(import.meta.url));
 const NAME = 'support';
@@ -93,8 +96,14 @@ async function senderRoutes(fastify, {can, notify, settings, options}) {
     const contact = () => outbox.contact() || contactCard(settings);
 
     let lastSync = 0;
+    let syncing = null;
+    /** One sync at a time: an older view landing after a newer one would undo the newer one's shelf pruning. */
+    function sync() {
+        if (!syncing) syncing = syncOnce().finally(() => { syncing = null; });
+        return syncing;
+    }
     /** Send what waits, then read the manager's view; tell admins about replies they have not heard of. */
-    async function sync() {
+    async function syncOnce() {
         lastSync = Date.now();
         const seen = outbox.seen();
         if (!api) return {tickets: mergeTickets(outbox.all(), [], seen), reachable: false, error: ''};
@@ -136,9 +145,12 @@ async function senderRoutes(fastify, {can, notify, settings, options}) {
         // over a minute old. A reply then shows within about a minute, not syncMinutes.
         if (api && Date.now() - lastSync > 60_000) sync().catch(() => {});
         const seen = outbox.seen();
+        const shelf = outbox.shelf();
+        // Put away, and Domma has not written since.
+        const shelved = (t) => Boolean(shelf[t.ref]) && (shelf[t.ref].dommaAt || '') === (t.dommaAt || '');
         // From the last sync's copy: the badge must not call the manager every minute.
         const unread = outbox.tickets().filter(t => t.dommaAt && seen[t.ref] !== t.dommaAt);
-        const openCount = outbox.tickets().filter(t => t.status !== 'closed').length;
+        const openCount = outbox.tickets().filter(t => t.status !== 'closed' && !shelved(t)).length;
         const waiting = outbox.all().filter(i => i.state === 'waiting').length;
         const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
         if (unread.length) {
@@ -162,7 +174,7 @@ async function senderRoutes(fastify, {can, notify, settings, options}) {
 
     fastify.get('/tickets', can('send'), async () => {
         const r = await withDeadline(sync(), () => offlineView('Domma is slow to answer - showing what we last heard.'));
-        return {connected: Boolean(manager), reachable: r.reachable, error: r.error, contact: contact(), tickets: r.tickets};
+        return {connected: Boolean(manager), reachable: r.reachable, error: r.error, contact: contact(), tickets: applyShelf(r.tickets, outbox.shelf())};
     });
 
     const notConnected = (reply) => reply.code(409).send({error: 'This site is not connected to Domma, so a request cannot be sent from here. Email us instead.'});
@@ -193,6 +205,8 @@ async function senderRoutes(fastify, {can, notify, settings, options}) {
         }
         const payload = buildMessagePayload({ticketRef, ref: newRef(), body, close, user: request.user});
         outbox.add('message', payload, ticketRef);
+        // Writing to an archived request brings it back to the list.
+        if (body) outbox.shelve(ticketRef, null);
         await withDeadline(flush(outbox, api), () => ({}));
         const item = outbox.all().find(i => i.ref === payload.ref);
         return reply.code(201).send({ref: payload.ref, state: item?.state || 'waiting',
@@ -205,6 +219,23 @@ async function senderRoutes(fastify, {can, notify, settings, options}) {
         outbox.markSeen(String(request.params.ref), String(request.body?.at || ''));
         return {ok: true};
     });
+
+    // Works standalone too: a site's own list is its own business.
+    fastify.put('/tickets/:ref/shelf', can('send'), async (request, reply) => {
+        const ref = String(request.params.ref);
+        const state = request.body?.state ?? null;
+        if (![null, 'archived', 'removed'].includes(state)) return reply.code(400).send({error: 'Archive, remove, or put back.'});
+        const known = outbox.tickets().find(t => t.ref === ref);
+        const local = outbox.all().some(i => i.kind === 'ticket' && i.ref === ref);
+        if (!known && !local) return reply.code(404).send({error: 'No such request on this site.'});
+        // Never reached Domma: removing it cancels it, there is nothing for Domma to keep.
+        if (state === 'removed' && !known && outbox.discard(ref)) return {ok: true, state: 'discarded'};
+        // Measured against the reply the customer SAW (`at`), not this server's newer copy: a reply that
+        // arrived after their screen was drawn must not be put away unread with it.
+        const at = typeof request.body?.at === 'string' ? request.body.at.slice(0, 64) : null;
+        outbox.shelve(ref, state, at ?? (known?.dommaAt || ''));
+        return {ok: true, state};
+    });
 }
 
 // ---------------------------------------------------------------------------------
@@ -302,7 +333,8 @@ async function receiverRoutes(fastify, {can, notify, mail, receiverMod, settings
         notifyEmail: settings.notifyEmail || ''}));
 
     fastify.get('/count', can('manage'), async () => {
-        const all = await rx.allTickets();
+        // The archive is out of sight: it counts for nothing (a customer writing again takes it out).
+        const all = (await rx.allTickets()).filter(e => !e.data?.archived);
         const waiting = all.filter(e => e.data?.status === 'open');
         const urgent = waiting.filter(e => e.data?.priority === 'urgent');
         const dir = directory();