domma-cms 0.116.0 → 0.116.2

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

@@ -6,19 +6,33 @@
  * that is restarting only delays it ("waiting to send"); opening this screen
  * tries again. A standalone site has the contact card and nothing else - it has
  * nowhere to send a conversation, so it says to email instead.
+ *
+ * Right-click a request (or its ⋮, or Shift+F10) to reply, mark it resolved or
+ * read, archive it or remove it from this site's list. Archive and remove are
+ * this site's own tidying: Domma keeps the conversation, and a new reply from
+ * Domma brings it straight back. Removing one that never reached Domma cancels it.
  */
 
-import {TONE, api, esc, listOf, openPanel, refreshBadge, stamp, telHref, threadHtml, when} from '../lib/kit.js';
+import {THREAD, TONE, api, copyText, esc, listOf, openPanel, refreshBadge, rowKeys, stamp, telHref, 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-dot" data-bind-hidden="!unread" title="New reply from Domma"></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>`;
 
+const FILTERS = [
+    {key: 'active', label: 'Requests'},
+    {key: 'archived', label: 'Archived'}
+];
+
+/** The newest Domma message's time - what "read" is measured against. */
+const lastDomma = (t) => [...(t?.messages || [])].reverse().find(m => m.from === 'domma')?.at || '';
+
 export async function mount(root, ctx) {
     const {kit, scope, here, meta, id} = ctx;
     const categories = meta.categories || [];
@@ -33,9 +47,13 @@ export async function mount(root, ctx) {
     const loading = M.observable(Boolean(ctx.mode.connected));
     const reachable = M.observable(true);
     const error = M.observable('');
+    const filter = M.observable('active');
     const rows = M.observable([]);
+    const counts = M.observable({});
     scope(M.effect(() => {
-        rows.value = tickets.value.map(t => ({
+        const all = tickets.value;
+        counts.value = {active: all.filter(t => !t.archived).length, archived: all.filter(t => t.archived).length};
+        rows.value = all.filter(t => (filter.value === 'archived') === Boolean(t.archived)).map(t => ({
             key: t.ref,
             subject: t.subject,
             icon: iconOf(t.category),
@@ -43,10 +61,15 @@ export async function mount(root, ctx) {
             meta: [when(t.lastAt || t.createdAt), t.userName, plural((t.messages || []).length, 'message')].filter(Boolean).join(' · '),
             statusLabel: t.statusLabel || t.status,
             tone: `is-${TONE[t.status] || 'muted'}`,
-            urgent: t.priority === 'urgent',
+            urgent: t.priority === 'urgent' && t.status !== 'closed',
             unread: Boolean(t.unread)
         }));
     }));
+    // Nothing archived any more: back to the list, rather than an empty tab with no way to see it.
+    scope(M.effect(() => { if (filter.value === 'archived' && !counts.value.archived) filter.value = 'active'; }));
+    const hasArchive = M.computed(() => Boolean(counts.value.archived) || filter.value === 'archived');
+    const emptyText = M.computed(() => (filter.value === 'archived' ? 'Nothing archived.'
+        : 'No requests yet. Stuck on something, or something not working? Ask for help - a person reads every one.'));
     const waitingCount = M.computed(() => tickets.value.filter(t => t.status === 'waiting'
         || (t.messages || []).some(m => m.pending)).length);
 
@@ -83,7 +106,11 @@ export async function mount(root, ctx) {
 <section class="sp-card" data-bind-hidden="!connected.value">
   <div class="sp-bar">
     <div class="sp-intro"><strong>Your requests</strong><span>Every conversation this site has had with Domma Support, whoever started it.</span></div>
-    <span data-help-title="Your requests" data-help="A request is a conversation with the Domma team. It shows Waiting on Domma until we answer, Domma replied when it is your turn, and Resolved when either of us marks it done - writing again reopens it. Replies also arrive by email, and the sidebar badge counts the ones you have not opened."></span>
+    <span class="sp-spacer"></span>
+    <div class="sp-seg" role="tablist" aria-label="Show" data-bind-hidden="!hasArchive.value">
+      ${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('')}
+    </div>
+    <span data-help-title="Your requests" data-help="A request is a conversation with the Domma team. It shows Waiting on Domma until we answer, Domma replied when it is your turn, and Resolved when either of us marks it done - writing again reopens it. Right-click a request (or use its ⋮ button, or Shift+F10) to archive it or remove it from this list - Domma keeps its copy either way, and a new reply from Domma brings it back. Replies also arrive by email, and the sidebar badge counts the ones you have not opened."></span>
   </div>
   <p class="sp-note is-warn" data-bind-hidden="!waitingCount.value">
     <span data-icon="clock" data-icon-size="14"></span> Something is waiting to send - it goes as soon as the Domma server answers.
@@ -92,7 +119,7 @@ export async function mount(root, ctx) {
   <p class="sp-note is-warn" data-bind-hidden="reachable.value || loading.value">Domma could not be reached just now, so what you see may be out of date.</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">No requests yet. Stuck on something, or something not working? Ask for help - a person reads every one.</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>
 </section>`;
     root.appendChild(view);
@@ -128,6 +155,60 @@ export async function mount(root, ctx) {
     }
 
     const byRef = (ref) => tickets.peek().find(t => t.ref === ref);
+    const patchLocal = (ref, change) => { tickets.value = tickets.peek().map(x => (x.ref === ref ? {...x, ...change} : x)); };
+    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 = {
+        async seen(t) {
+            const at = lastDomma(t);
+            if (!t.unread || !at) return;
+            await api.seen(t.ref, at);
+            patchLocal(t.ref, {unread: false});
+            refreshBadge();
+        },
+        async resolve(t) {
+            const r = await api.close(t.ref);
+            E.toast(r.message || 'Marked as resolved.', {type: r.state === 'sent' ? 'success' : 'warning'});
+            await load();
+        },
+        async archive(t, on) {
+            await api.shelf(t.ref, on ? 'archived' : null, t.stale ? undefined : lastDomma(t));
+            patchLocal(t.ref, {archived: on, ...(on && {unread: false})});
+            refreshBadge();
+            E.toast(on ? `Archived "${t.subject}". A new reply from Domma brings it back.` : `"${t.subject}" is back in your requests.`, {type: 'success'});
+        },
+        async remove(t) {
+            const local = t.status === 'waiting' || t.status === 'refused';
+            const ask = local
+                ? `Remove "${esc(t.subject)}"? If it has not gone to Domma yet, it will not be sent.`
+                : `Remove "${esc(t.subject)}" from this site's list? Domma keeps the conversation, and it comes back here if Domma replies again.`;
+            if (!await E.confirm(ask)) return false;
+            const r = await api.shelf(t.ref, 'removed', t.stale ? undefined : lastDomma(t));
+            tickets.value = tickets.peek().filter(x => x.ref !== t.ref);
+            refreshBadge();
+            E.toast(r.state === 'discarded' ? 'Removed - it will not be sent.'
+                : local ? 'Removed from this list - it had already started on its way, so Domma has it.' : 'Removed from this list.', {type: 'success'});
+            return true;
+        }
+    };
+    const act = (name, ...args) => async (t) => { try { return await actions[name](t, ...args); } catch (err) { fail(err); return false; } };
+
+    function menuItems(t) {
+        const local = t.status === 'waiting' || t.status === 'refused';
+        return [
+            {label: local ? 'Open' : 'Open and reply', icon: 'message-square', action: () => open(t.ref)},
+            ...(t.unread ? [{label: 'Mark as read', icon: 'check', action: () => act('seen')(t)}] : []),
+            ...(!local && t.status !== 'closed' && !t.stale ? [{label: 'Mark resolved', icon: 'check-circle', action: () => act('resolve')(t)}] : []),
+            {type: 'divider'},
+            t.archived ? {label: 'Back to your requests', icon: 'inbox', action: () => act('archive', false)(t)}
+                : {label: 'Archive', icon: 'archive', action: () => act('archive', true)(t)},
+            {label: 'Copy reference', icon: 'copy', action: () => copyText(t.ref, 'Reference copied')},
+            {type: 'divider'},
+            {label: local ? 'Remove (do not send)' : 'Remove from this list', icon: 'trash', danger: true, action: () => act('remove')(t)}
+        ];
+    }
 
     function compose() {
         const f = {category: M.observable('help'), priority: M.observable('normal'), subject: M.observable(''), body: M.observable(''),
@@ -138,16 +219,16 @@ export async function mount(root, ctx) {
             model: f,
             html: `<div class="sp-form">
   <label class="form-label">What is it about?</label>
-  <div class="sp-choices" data-group="category" role="radiogroup" aria-label="Category">
-    ${categories.map(c => `<button type="button" role="radio" data-value="${esc(c.key)}" data-bind-class="category.value === '${esc(c.key)}' && 'is-on'"><span data-icon="${esc(c.icon)}" data-icon-size="16"></span>${esc(c.label)}</button>`).join('')}
+  <div class="sp-choices" role="radiogroup" aria-label="Category">
+    ${categories.map(c => `<button type="button" role="radio" data-on-click="pick('category', '${esc(c.key)}')" data-bind-class="category.value === '${esc(c.key)}' && 'is-on'" data-bind-aria-checked="category.value === '${esc(c.key)}' ? 'true' : 'false'"><span data-icon="${esc(c.icon)}" data-icon-size="16"></span>${esc(c.label)}</button>`).join('')}
   </div>
   <label class="form-label" for="sp-subject">Subject</label>
   <input id="sp-subject" class="form-input" maxlength="140" data-model="subject.value" placeholder="One line - e.g. My contact form stopped sending">
   <label class="form-label" for="sp-body">How can we help? <span data-help="What you were doing, what you expected and what happened instead. A page address or the screen you were on helps us get there faster."></span></label>
   <textarea id="sp-body" class="form-textarea" rows="8" maxlength="8000" data-model="body.value"></textarea>
   <label class="form-label">How urgent is it?</label>
-  <div class="sp-choices is-two" data-group="priority" role="radiogroup" aria-label="Priority">
-    ${priorities.map(p => `<button type="button" role="radio" data-value="${esc(p.key)}" data-bind-class="priority.value === '${esc(p.key)}' && 'is-on'"><strong>${esc(p.label)}</strong><small>${esc(p.hint)}</small></button>`).join('')}
+  <div class="sp-choices is-two" role="radiogroup" aria-label="Priority">
+    ${priorities.map(p => `<button type="button" role="radio" data-value="${esc(p.key)}" data-on-click="pick('priority', '${esc(p.key)}')" data-bind-class="priority.value === '${esc(p.key)}' && 'is-on'" data-bind-aria-checked="priority.value === '${esc(p.key)}' ? 'true' : 'false'"><strong>${esc(p.label)}</strong><small>${esc(p.hint)}</small></button>`).join('')}
   </div>
   <label class="form-label" for="sp-where">Where <span data-help="The page or admin screen it is about, if there is one - e.g. /contact, or Pages. Optional."></span></label>
   <input id="sp-where" class="form-input" maxlength="300" data-model="where.value" placeholder="Optional">
@@ -158,6 +239,7 @@ export async function mount(root, ctx) {
   </div>
 </div>`,
             methods: {
+                pick: (group, value) => { if (f[group]) f[group].value = value; },
                 cancel: () => panel?.close(),
                 async send() {
                     if (f.busy.peek()) return;
@@ -168,9 +250,10 @@ export async function mount(root, ctx) {
                         E.toast(r.message || 'Sent.', {type: r.state === 'sent' ? 'success' : 'warning'});
                         panel?.close();
                         refreshBadge();
+                        filter.value = 'active';
                         await load();
                     } catch (err) {
-                        E.toast(err.message || String(err), {type: 'error'});
+                        fail(err);
                     } finally {
                         f.busy.value = false;
                     }
@@ -178,11 +261,6 @@ export async function mount(root, ctx) {
             }
         }).then(p => {
             panel = p;
-            p.panel.addEventListener('click', (e) => {
-                const b = e.target.closest('[data-value]');
-                const group = b?.closest('[data-group]')?.dataset.group;
-                if (group) f[group].value = b.dataset.value;
-            });
             p.panel.querySelector('#sp-subject')?.focus();
         });
     }
@@ -190,100 +268,106 @@ export async function mount(root, ctx) {
     async function open(ref) {
         const t0 = byRef(ref);
         if (!t0) return;
+        // The panel follows the list's copy, so a reload or a move from the row menu shows here at once.
+        const cur = M.computed(() => tickets.value.find(x => x.ref === ref) || t0);
+        const thread = M.computed(() => threadRows(cur.value.messages || [], 'customer'));
+        const status = M.computed(() => cur.value.status);
+        const statusLabel = M.computed(() => cur.value.statusLabel || cur.value.status);
+        const tone = M.computed(() => `is-${TONE[cur.value.status] || 'muted'}`);
+        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 busy = M.observable(false);
-        const status = M.observable(t0.status);
         const canWrite = !['waiting', 'refused'].includes(t0.status);
         let panel = null;
-        const render = () => {
-            const t = byRef(ref) || t0;
-            status.value = t.status;
-            const box = panel?.panel.querySelector('.sp-thread-host');
-            if (box) { box.innerHTML = threadHtml(t.messages, 'customer'); box.scrollTop = box.scrollHeight; }
-            const chip = panel?.panel.querySelector('[data-ref="status"]');
-            if (chip) { chip.textContent = t.statusLabel || t.status; chip.className = `sp-chip is-${TONE[t.status] || 'muted'}`; }
-        };
-        const markSeen = async () => {
-            const t = byRef(ref);
-            const at = [...(t?.messages || [])].reverse().find(m => m.from === 'domma')?.at;
-            if (t?.unread && at) {
-                try { await api.seen(ref, at); tickets.value = tickets.peek().map(x => (x.ref === ref ? {...x, unread: false} : x)); refreshBadge(); }
-                catch { /* the badge catches up next time */ }
-            }
+        let stopScroll = () => {};
+        let menu = null;
+        const run = async (fn) => {
+            if (busy.peek()) return;
+            busy.value = true;
+            try { await fn(); } catch (err) { fail(err); } finally { busy.value = false; }
         };
         panel = await openPanel({
             title: t0.subject,
             size: 'lg',
-            model: {draft, busy, status},
+            model: {thread, status, statusLabel, tone, archived, draft, hasDraft, busy},
+            cleanup: () => { stopScroll(); menu?.destroy?.(); [cur, thread, status, statusLabel, tone, archived, hasDraft].forEach(c => c.dispose?.()); },
             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>About</dt><dd>${esc(labelOf(t0.category))}${t0.priority === 'urgent' ? ' · <span class="sp-urgent">Urgent</span>' : ''}</dd></div>
     <div><dt>Opened</dt><dd>${esc(stamp(t0.createdAt))}${t0.userName ? ` by ${esc(t0.userName)}` : ''}</dd></div>
     ${t0.where ? `<div><dt>Where</dt><dd>${esc(t0.where)}</dd></div>` : ''}
     ${t0.lastError ? `<div><dt>Last try</dt><dd>${esc(t0.lastError)}</dd></div>` : ''}
   </dl>
-  <div class="sp-thread-host"></div>
+  <div class="sp-thread-host">${THREAD}</div>
   ${canWrite ? `<div class="sp-reply">
     <label class="form-label" for="sp-write" data-bind-text="status.value === 'closed' ? 'Write again (this reopens it)' : 'Reply'"></label>
     <textarea id="sp-write" class="form-textarea" rows="4" maxlength="8000" data-model="draft.value" placeholder="Write to Domma Support"></textarea>
     <div class="sp-actions">
       <button type="button" class="btn btn-sm btn-ghost" data-on-click="resolve" data-bind-hidden="status.value === 'closed'" data-bind-disabled="busy.value"><span data-icon="check-circle" data-icon-size="13"></span> Mark resolved</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 your requests' : 'Archive'"></span></button>
       <span class="sp-spacer"></span>
-      <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</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</button>
     </div>
   </div>` : '<p class="sp-note">You can write again once this request reaches Domma.</p>'}
 </div>`,
             methods: {
-                async send() {
-                    if (busy.peek() || !draft.peek().trim()) return;
-                    busy.value = true;
-                    try {
-                        const r = await api.write(ref, draft.peek());
-                        if (r.state !== 'sent') E.toast(r.message, {type: 'warning'});
-                        draft.value = '';
-                        await load();
-                        render();
-                    } catch (err) {
-                        E.toast(err.message || String(err), {type: 'error'});
-                    } finally {
-                        busy.value = false;
-                    }
-                },
-                async resolve() {
-                    if (busy.peek()) return;
-                    busy.value = true;
-                    try {
-                        const r = await api.close(ref);
-                        E.toast(r.message || 'Marked as resolved.', {type: r.state === 'sent' ? 'success' : 'warning'});
-                        await load();
-                        render();
-                    } catch (err) {
-                        E.toast(err.message || String(err), {type: 'error'});
-                    } finally {
-                        busy.value = false;
-                    }
-                }
+                send: () => run(async () => {
+                    if (!draft.peek().trim()) return;
+                    const r = await api.write(ref, draft.peek());
+                    if (r.state !== 'sent') E.toast(r.message, {type: 'warning'});
+                    draft.value = '';
+                    await load();
+                }),
+                resolve: () => run(() => actions.resolve(cur.peek())),
+                archive: () => run(async () => {
+                    const on = !archived.peek();
+                    await actions.archive(cur.peek(), on);
+                    if (on) panel?.close();
+                })
+            }
+        });
+        const box = panel.panel.querySelector('.sp-thread-host');
+        stopScroll = M.effect(() => { thread.value; Promise.resolve().then(() => { M.flush?.(); box.scrollTop = box.scrollHeight; }); });
+        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);
+                return m ? [{label: 'Copy message', icon: 'copy', action: () => copyText(m.body, 'Message copied')}] : [];
             }
         });
-        render();
-        await markSeen();
+        await act('seen')(cur.peek());
     }
 
-    const bindings = M.applyBindings({connected, contact, loading, reachable, error, rows, waitingCount}, view, {
+    const bindings = M.applyBindings({connected, contact, loading, reachable, error, filter, rows, counts, hasArchive, emptyText, waitingCount}, view, {
         methods: {compose, reload: () => load()}
     });
     scope(() => bindings.dispose());
 
-    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(() => { listEl.removeEventListener('click', onClick); listEl.removeEventListener('keydown', onKey); });
+    const seg = view.querySelector('.sp-seg');
+    const onFilter = (e) => { const b = e.target.closest('[data-filter]'); if (b) filter.value = b.dataset.filter; };
+    seg.addEventListener('click', onFilter);
+    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 = byRef(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);
     if (connected.peek()) {
         await load();
-        if (id && here()) open(id);
+        if (id && here()) {
+            // A link to an archived request shows it where it is.
+            if (byRef(id)?.archived) filter.value = 'archived';
+            open(id);
+        }
     }
 }