domma-cms 0.75.0 → 0.76.0

package/admin/js/views/plugins.js

@@ -1,43 +1,101 @@
-import{api as f,getUser as C}from"../api.js";import{pluginMarketplaceView as x}from"./plugin-marketplace.js";import{pluginAccent as S,pluginWatermark as T}from"../lib/plugin-accent.js";import{reportRestart as N}from"../lib/server-restart.js";export const pluginsView={templateUrl:"/admin/js/templates/plugins.html",async onMount(s){s.find("#new-plugin-btn").on("click",()=>I(s));const c=s.find("#install-file-input").get(0);s.find("#install-file-btn").on("click",()=>c?.click()),c?.addEventListener("change",async()=>{const i=c.files?.[0];c.value="",i&&await L(s,i)});let o=!1;s.find('[data-tab="marketplace"]').on("click",async function(){if(o)return;const i=s.find("#marketplace-mount");try{const n=await fetch(x.templateUrl);if(!n.ok)throw new Error(`Template ${n.status}`);const d=await n.text(),p=new DOMParser().parseFromString(d,"text/html");for(;p.body.firstChild;)i.get(0).appendChild(p.body.firstChild);await x.onMount(i),o=!0}catch{E.toast("Failed to load marketplace.",{type:"error"})}}),E.tabs(s.find("#plugin-tabs").get(0));const e=E.loader(s.get(0),{type:"dots"});let t=[];try{t=await f.plugins.list()}catch(i){E.toast(`Failed to load plugins: ${i.message}`,{type:"error"})}if(e.destroy(),!t.length){s.find("#plugins-empty").show();return}y(s,t),Domma.icons.scan()}};async function L(s,c){const o=s.find("#install-file-btn"),e=()=>o.prop("disabled",!1).html('<span data-icon="upload"></span> Install from File');o.prop("disabled",!0).text("Installing\u2026");const t={};for(let i=0;i<4;i++)try{const n=await f.plugins.installFile(c,t),d=n.action==="upgrade"?`${n.name} updated${n.from?` from ${n.from}`:""} to ${n.version}.`:`${n.name} ${n.version} installed.`;E.toast(`${d} Restart the server to activate it.`,{type:"success"}),e();const l=await f.plugins.list();s.find("#plugins-empty").hide(),y(s,l);return}catch(n){if(n.code==="CONFLICT"&&!t.confirmUpgrade){const d=n.installedVersion||"the installed version",l=n.incomingVersion||"this file";if(!await E.confirm(`<p>${r(n.name)} ${r(d)} is already installed. Update it to ${r(l)}?</p><p class="text-muted">The plugin keeps its data, and the current version is put back if the update fails.</p>`,{title:"Update plugin",confirmText:"Update",cancelText:"Cancel",html:!0}))break;t.confirmUpgrade=!0;continue}if(/refusing to downgrade/i.test(n.message)&&!t.confirmDowngrade){if(!await E.confirm(`<p>${r(n.message)} Install it anyway?</p><p class="text-muted">An older version may not understand data written by the newer one.</p>`,{title:"Downgrade plugin",confirmText:"Downgrade",cancelText:"Cancel",html:!0}))break;t.confirmDowngrade=!0;continue}if(/unsigned|signature/i.test(n.message)&&!t.confirmUnsigned){if(!await E.confirm(`<p>${r(n.message)}</p><p class="text-muted">An unsigned plugin has not been verified as coming from the marketplace. Its code runs on this server with full access. Install it anyway?</p>`,{title:"Unsigned plugin",confirmText:"Install anyway",cancelText:"Cancel",html:!0}))break;t.confirmUnsigned=!0;continue}E.toast(n.message||"Install failed.",{type:"error"});break}e(),Domma.icons.scan()}function I(s){const c=E.slideover({title:"New Plugin",size:"sm",position:"right"}),o=document.createElement("div");o.style.cssText="padding:.25rem 0 .5rem;";const e=C(),t=document.createElement("div");F.create({displayName:{type:"string",label:"Display Name",placeholder:"e.g. Event Manager",required:!0},slug:{type:"string",label:"Slug",placeholder:"event-manager",required:!0,help:"Folder name under plugins/ - lowercase letters, digits, hyphens."},description:{type:"string",label:"Description",placeholder:"What does this plugin do?"},author:{type:"string",label:"Author"},icon:{type:"string",label:"Icon",placeholder:"box",help:"A Domma icon name (as used in data-icon)."}},{author:e?.name||e?.username||"",icon:"box"},{showSubmitButton:!1}).renderTo(t),o.appendChild(t);const i=document.createElement("p");i.className="text-muted",i.style.cssText="font-size:.8rem;margin:.5rem 0 0;",i.textContent="The plugin is scaffolded from the built-in template with server routes, an admin view and a CLAUDE.md, and enabled automatically. Restart the server to activate it.",o.appendChild(i);const n=document.createElement("div");n.style.cssText="display:flex;justify-content:flex-end;gap:1rem;margin-top:.75rem;";const d=document.createElement("button");d.className="btn btn-ghost",d.textContent="Cancel";const l=document.createElement("button");l.className="btn btn-primary",l.textContent="Create Plugin",n.appendChild(d),n.appendChild(l),o.appendChild(n),c.element.appendChild(o),c.open();const p=t.querySelector('input[name="displayName"]'),a=t.querySelector('input[name="slug"]');setTimeout(()=>p?.focus(),50);let u=!1;a?.addEventListener("input",()=>{u=!0}),p?.addEventListener("input",()=>{u||!a||(a.value=p.value.toLowerCase().trim().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"").slice(0,40))});async function b(){const m={};for(const g of["displayName","slug","description","author","icon"])m[g]=t.querySelector(`input[name="${g}"]`)?.value.trim()||"";if(!m.displayName||!m.slug){E.toast("Display name and slug are required.",{type:"error"});return}l.disabled=!0,l.textContent="Creating\u2026";try{await f.plugins.scaffold(m),c.close(),E.toast(`Plugin "${m.displayName}" created. Restart the server to activate it.`,{type:"success"});const g=await f.plugins.list();g.length&&(s.find("#plugins-empty").hide(),y(s,g))}catch(g){E.toast(g.message||"Failed to create plugin.",{type:"error"}),l.disabled=!1,l.textContent="Create Plugin"}}d.addEventListener("click",()=>c.close()),l.addEventListener("click",b),a?.addEventListener("keydown",m=>{m.key==="Enter"&&b()})}function U(s){if(!s)return"";const c=new Date(s);if(Number.isNaN(c.getTime()))return"";try{return D(s).format("DD.MM.YYYY")}catch{return""}}function B(s){const o={grace:["Renew","var(--dm-warning,#d97706)","The rental term has ended - still running during the grace period"],"support-ended":["Support ended","var(--dm-info,#0284c7)","Owned outright and still running, but no longer entitled to updates"],expired:["Expired","var(--dm-danger,#dc2626)","The rental term and grace period have ended - this plugin is not running"],unlicensed:["Unlicensed","var(--dm-danger,#dc2626)","No valid entitlement for this site - this plugin is not running"]}[s];if(!o)return"";const[e,t,i]=o;return`<span class="badge badge-outline" title="${r(i)}" style="font-size:0.65rem;padding:1px 6px;background:none;border:1px solid;color:${t};border-color:${t};">${e}</span>`}function y(s,c){const o=s.find("#plugins-grid").empty();c.forEach(e=>{const t=!!e.core,i=e.sourceEditable!==!1,n="var(--dm-warning,#d97706)",d=e.closedSource?`<span class="badge badge-outline" title="${r(e.licence||"Commercial licence")} - source is not editable here" style="font-size:0.65rem;padding:1px 6px;background:none;border:1px solid;color:${n};border-color:${n};">Licensed</span>`:"",l=B(e.entitlement),p=e.enabled&&["expired","unlicensed"].includes(e.entitlement),a=e.enabled&&e.supersededBy,u=t?"badge-info":p?"badge-danger":a?"badge-secondary":e.enabled?"badge-success":"badge-secondary",b=t?"Built in":p?"Not running":a?"Replaced":e.enabled?"Enabled":"Disabled",m=e.enabled?"Disable":"Enable",g=e.enabled?"btn-ghost":"btn-primary",h=e.author?`by ${r(e.author)}`:"",v=U(e.date),w=e.icon||"package",k=`
-            <div class="card plugin-card" data-plugin="${e.name}" style="--plugin-accent:${S(e.name)}">
-                ${T(w).outerHTML}
-                <div class="card-body">
-                    <div class="plugin-header">
-                        <div class="plugin-icon"><span data-icon="${w}"></span></div>
-                        <div class="plugin-meta">
-                            <div class="plugin-name">${r(e.displayName)}</div>
-                            <div class="plugin-version">v${r(e.version)}${h?` &middot; ${h}`:""}</div>
-                        </div>
-                        <div style="display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0;margin-left:auto;">
-                            ${d}
-                            ${l}
-                            <span class="badge ${u}">${b}</span>
-                        </div>
+import{api as U,getUser as _e}from"../api.js";import{addBannerAction as Ce}from"../lib/plugin-chrome.js";import{helpPopovers as Te}from"../lib/help-popover.js";import{onceClosed as He,openMenuAt as Ie,sidebarCount as Ye,viewLifetime as Je}from"../lib/tool-kit.js";import{pluginAccent as Ne}from"../lib/plugin-accent.js";import{reportRestart as Qe}from"../lib/server-restart.js";import{FILTERS as Ge,arrangeCatalogue as Xe,arrangePlugins as Ze,catalogueAction as oe,catalogueRow as et,checkScaffold as tt,fmtReleased as at,needsAttention as nt,pluginRow as st,pluginStatus as Ue,readSettings as lt,settingsFields as Oe,slugifyPlugin as it,updateFor as Ae}from"../lib/plugins-arrange.js";const Le=/^#\/plugins\/?(\?.*)?$/,ot="#/plugins",re="plugins.filter",X="plugins.draft",rt=`
+<div class="plx-row" data-name="{{name}}" tabindex="0" data-bind-class="rowCls" style="--plugin-accent: {{accent}}">
+    <span class="plx-icon" aria-hidden="true"><span data-icon="{{icon}}" data-icon-size="17"></span></span>
+    <span class="plx-main"><strong>{{displayName}}</strong><small data-bind-text="meta"></small></span>
+    <span class="plx-chips">
+        <span class="plx-chip is-warn" data-bind-hidden="!update" data-bind-text="updateText"></span>
+        <span class="plx-chip" data-bind-hidden="!entText" data-bind-class="entCls" data-bind-text="entText" title="{{entTitle}}"></span>
+        <span class="plx-chip is-info" data-bind-hidden="!licensed" title="Licensed - its source is not viewable here">Licensed</span>
+        <span class="plx-chip" data-bind-class="statusCls" data-bind-text="statusText"></span>
+    </span>
+    <button type="button" class="plx-kebab" aria-label="Actions for {{displayName}}" title="Actions">\u22EE</button>
+</div>`,ct=`
+<div class="plx-row" data-slug="{{slug}}" tabindex="0" data-bind-class="rowCls" style="--plugin-accent: {{accent}}">
+    <span class="plx-icon" aria-hidden="true"><span data-icon="{{icon}}" data-icon-size="17"></span></span>
+    <span class="plx-main"><strong>{{displayName}}</strong><small>{{meta}}</small></span>
+    <span class="plx-chips">
+        <span class="plx-chip" data-bind-hidden="!licText" data-bind-class="licCls" data-bind-text="licText"></span>
+        <span class="plx-chip">{{price}}</span>
+    </span>
+    <button type="button" class="btn btn-sm plx-act" data-bind-class="actCls" data-bind-disabled="actDisabled" data-bind-text="actionText"></button>
+    <button type="button" class="plx-kebab" aria-label="Actions for {{displayName}}" title="Actions">\u22EE</button>
+</div>`,r=O=>String(O??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");function ce(O){const p=document.createElement("template");return p.innerHTML=O.trim(),p.content.firstElementChild}const h=Je(Le);export const pluginsView={templateUrl:"/admin/js/templates/plugins.html",async onMount(O){h.reset();const p=O.get(0).querySelector(".plx")||O.get(0),k=()=>Le.test(location.hash)&&p.isConnected,L=M.observable([]),b=M.observable({available:null,site:null,items:[]}),de=M.observable(!0),Z=M.observable(""),m=M.observable("");let ue="all";try{ue=Ge.includes(S.get(re))?S.get(re):"all"}catch{}const C=M.observable(ue),K=M.observable(""),R=M.observable("all"),pe=M.observable("");h.add(M.effect(()=>{const e=C.value;try{S.set(re,e)}catch{}}));const V=M.computed(()=>new Map((b.value.items||[]).map(e=>[e.slug,e.version]))),W=e=>(b.peek().items||[]).find(t=>t.slug===e),ee=M.observable([]);h.add(M.effect(()=>{const e=V.value;ee.value=Ze(L.value,{filter:C.value,query:K.value,latest:e}).map(t=>({...st(t,e),accent:Ne(t.name)}))}));const Re=M.computed(()=>{const e=L.value,t=V.value,a=e.filter(n=>Ue(n).running).length;return{all:e.length,on:a,off:e.length-a,attention:e.filter(n=>nt(n,t)).length}}),_=M.computed(()=>(b.value.items||[]).filter(e=>oe(e)==="update").length),je=M.computed(()=>L.value.length?"No plugins match.":"No plugins installed. Browse the catalogue, or Install from file in the banner."),te=M.observable([]);h.add(M.effect(()=>{te.value=Xe(b.value.items,{filter:R.value,query:pe.value}).map(e=>{const t=et(e),a=t.action==="update"||t.action==="install";return{...t,accent:Ne(e.slug),actCls:a?"btn-primary":"btn-ghost",actDisabled:!a}})}));const Fe=M.computed(()=>{const e=b.value.items||[];return{all:e.length,installed:e.filter(t=>t.installed).length,available:e.filter(t=>!t.installed&&t.entitled).length,updates:_.value}}),H=e=>L.peek().find(t=>t.name===e);async function ae(){try{const e=await U.plugins.list();if(!k())return;L.value=Array.isArray(e)?e:[],Z.value=""}catch(e){Z.value=`Could not load the plugins: ${e.message||e}`}finally{de.value=!1}}async function be(){try{const e=await U.marketplace.catalogue();if(!k())return;b.value={available:!!e?.available,site:e?.site||null,items:e?.catalogue||[]}}catch{b.value={available:!1,site:null,items:[],failed:!0}}}const B=async()=>{await Promise.all([ae(),be()]),Ye(ot)};async function ne(e,t){if(e.core)return;const a=t?"on":"off";if(await E.confirm(`Switch ${r(e.displayName||e.name)} ${a}? The server restarts to apply it, which takes a few seconds.`)&&!m.peek()){m.value=`Switching ${e.displayName||e.name} ${a}\u2026`;try{const n=await U.plugins.update(e.name,{enabled:t});await Qe(n,{onStatus:l=>{m.value=l}}),E.toast(`${e.displayName||e.name} is ${a}.${t?" Reload the admin to open its screens.":""}`,{type:"success",duration:6e3});try{document.dispatchEvent(new CustomEvent("dm:sidebar-rebuild"))}catch{}}catch(n){E.toast(`Not switched ${a}: ${n.message||n}`,{type:"error"})}finally{m.value="",k()&&await B()}}}async function j(e,{update:t=!1}={}){const a=r(e.displayName||e.slug),n=t?`<p>Update ${a} from ${r(e.installedVersion)} to ${r(e.version)}?</p> <p class="text-muted">The plugin keeps its data, and the current version is put back if the update fails.</p>`:`<p>Install ${a} v${r(e.version)}?</p> <p class="text-muted">It arrives licensed to this site and takes effect after a restart.</p>`;if(await E.confirm(n,{title:t?"Update plugin":"Install plugin",confirmText:t?"Update":"Install",cancelText:"Cancel",html:!0})){try{const l=await U.marketplace.install(e.slug,e.version,{update:t}),v=l?.action==="upgrade"?`${e.slug} updated${l.from?` from ${l.from}`:""} to ${l.version}.`:`${e.slug} ${l?.version??e.version} installed.`;E.toast(`${v} Restart the server to activate it.`,{type:"success",duration:6e3})}catch(l){E.toast(l.message||"Install failed.",{type:"error"})}k()&&await B()}}async function me(e,t){if(await E.confirm(`<p>Uninstall ${r(t||e)}?</p> <p class="text-muted">Its files are removed, and its <code>data/</code> folder with them. Roles it added are removed and their users moved to <code>user</code>. Restart the server to finish.</p>`,{title:"Uninstall plugin",confirmText:"Uninstall",cancelText:"Cancel",html:!0})){try{await U.marketplace.uninstall(e),E.toast(`${t||e} uninstalled. Restart the server to apply.`,{type:"success",duration:6e3})}catch(a){E.toast(`Uninstall failed: ${a.message||a}`,{type:"error"})}k()&&await B()}}async function ve(e){try{await U.plugins.exportBundle(e.name)}catch(t){E.toast(t.message||"Export failed.",{type:"error"})}}const fe=e=>{location.hash=`#/plugins/code/${encodeURIComponent(e.name)}`},q=p.querySelector(".plx-file");async function De(e){if(m.peek())return;m.value=`Installing ${e.name}\u2026`;const t={};try{for(let a=0;a<4;a++)try{const n=await U.plugins.installFile(e,t),l=n.action==="upgrade"?`${n.name} updated${n.from?` from ${n.from}`:""} to ${n.version}.`:`${n.name} ${n.version} installed.`;E.toast(`${l} Restart the server to activate it.`,{type:"success",duration:6e3});return}catch(n){if(m.value="",n.code==="CONFLICT"&&!t.confirmUpgrade){if(!await E.confirm(`<p>${r(n.name)} ${r(n.installedVersion||"the installed version")} is already installed. Update it to ${r(n.incomingVersion||"this file")}?</p> <p class="text-muted">The plugin keeps its data, and the current version is put back if the update fails.</p>`,{title:"Update plugin",confirmText:"Update",cancelText:"Cancel",html:!0}))return;t.confirmUpgrade=!0}else if(/refusing to downgrade/i.test(n.message)&&!t.confirmDowngrade){if(!await E.confirm(`<p>${r(n.message)} Install it anyway?</p> <p class="text-muted">An older version may not understand data written by the newer one.</p>`,{title:"Downgrade plugin",confirmText:"Downgrade",cancelText:"Cancel",html:!0}))return;t.confirmDowngrade=!0}else if(/unsigned|signature/i.test(n.message)&&!t.confirmUnsigned){if(!await E.confirm(`<p>${r(n.message)}</p> <p class="text-muted">An unsigned plugin has not been verified as coming from the marketplace. Its code runs on this server with full access. Install it anyway?</p>`,{title:"Unsigned plugin",confirmText:"Install anyway",cancelText:"Cancel",html:!0}))return;t.confirmUnsigned=!0}else{E.toast(n.message||"Install failed.",{type:"error"});return}m.value=`Installing ${e.name}\u2026`}}finally{m.value="",k()&&await B()}}const ge=async()=>{const e=q.files?.[0];q.value="",e&&await De(e)};q.addEventListener("change",ge),h.add(()=>q.removeEventListener("change",ge));const Y=new Set;let A=null,he=!1;function ye({title:e,size:t="md",panel:a,model:n,methods:l,dirty:v=()=>!1,form:u=null,cleanup:c=()=>{}}){const i=E.slideover({title:r(e),size:t,position:"right"});i.element.appendChild(a);const $=Te(a),x=M.applyBindings(n,a,{methods:l});u&&(A=u),Y.add(i),He(i,()=>{c(),x.dispose(),$(),Y.delete(i),A===u&&(A=null)});const w=i.close.bind(i);let f=!1,T=!1;return i.close=async F=>{if(!f&&F!==!0&&v()){if(T)return;T=!0;const D=await E.confirm("Discard the changes you have not saved?");if(T=!1,!D)return}return f=!0,w()},I.scan(a),i.open(),i}function se(e,t=null){const a=H(e);if(!a)return;const n=Ue(a),l=Oe(a),v=W(a.name),u=Ae(a,V.peek()),c=!!(u&&v?.entitled),$={...Object.fromEntries(l.map(s=>[s.key,s.value])),...Object.fromEntries(Object.entries(t||{}).filter(([s])=>!l.find(d=>d.key===s)?.secret))},x=Object.fromEntries(l.map(s=>[s.key,M.observable($[s.key])])),w=M.computed(()=>lt(l,Object.fromEntries(l.map(s=>[s.key,x[s.key].value])))),f=M.observable(!1),T=()=>Object.keys(w.peek().changed).length>0||Object.keys(w.peek().errors).length>0,F=[["Version",`v${a.version}${u?` (v${u} available)`:""}`],["Status",n.text+(a.supersededBy?` - replaced by ${a.supersededBy}`:"")],["Author",a.author],["Released",at(a.date)],["Licence",a.licence],["Slug",a.name]].filter(([,s])=>s),D=(s,d)=>{const N=`plx-set-${d}`,Q=s.help?` <span data-help="${r(s.help)}"></span>`:"",z=`<label class="form-label" for="${N}">${r(s.label)}${Q}</label>`,P=`data-model="v${d}.value"`,G=`<small class="plx-err" data-bind-hidden="!err${d}.value" data-bind-text="err${d}.value"></small>`;if(s.type==="checkbox")return`<div class="plx-setting">${z}<input id="${N}" type="checkbox" class="form-switch" ${P}></div>`;if(s.type==="select")return`<div>${z}<select id="${N}" class="form-input" ${P}>${s.options.map(Me=>`<option value="${r(Me.value)}">${r(Me.label)}</option>`).join("")}</select>${G}</div>`;if(s.type==="json")return`<div>${z}<textarea id="${N}" class="form-input plx-json" rows="5" spellcheck="false" ${P}></textarea>${G}</div>`;if(s.type==="textarea")return`<div>${z}<textarea id="${N}" class="form-input" rows="3" ${P}></textarea>${G}</div>`;const Ve=s.type==="number"?"number":s.secret?"password":"text",We=`${s.min!=null?` min="${r(s.min)}"`:""}${s.max!=null?` max="${r(s.max)}"`:""}`;return`<div>${z}<input id="${N}" type="${Ve}" class="form-input" autocomplete="${s.secret?"new-password":"off"}"${We} ${P}>${G}</div>`},o={saving:f,hasFields:l.length>0,cannot:M.computed(()=>f.value||!Object.keys(w.value.changed).length||Object.keys(w.value.errors).length>0),...Object.fromEntries(l.flatMap((s,d)=>[[`v${d}`,x[s.key]],[`err${d}`,M.computed(()=>w.value.errors[s.key]||"")]]))},g=ce(`
+                <div class="plx-form">
+                    <p class="plx-desc"></p>
+                    <dl class="plx-facts"></dl>
+                    <div data-if="hasFields">
+                        <p class="plx-sub">Settings
+                            <span data-help-title="Settings" data-help="Saved to config/plugins.json for this site. Only what you change is stored - anything you leave keeps the plugin's own default, so a later version can improve it. Most plugins read their settings as they run; a few only at start-up."></span></p>
+                        <div class="plx-form">${l.map(D).join("")}</div>
+                    </div>
+                    <p class="plx-hint" data-if="!hasFields">This plugin has no settings to change here.</p>
+                    <div class="plx-actions">
+                        ${a.core?"":`<button type="button" class="btn btn-sm btn-ghost" data-on-click="toggle"><span data-icon="${a.enabled?"pause":"play"}" data-icon-size="13"></span> ${a.enabled?"Switch off":"Switch on"}</button>`}
+                        ${c?`<button type="button" class="btn btn-sm btn-ghost" data-on-click="update"><span data-icon="download" data-icon-size="13"></span> Update to v${r(u)}</button>`:""}
+                        ${a.sourceEditable!==!1?'<button type="button" class="btn btn-sm btn-ghost" data-on-click="source"><span data-icon="code" data-icon-size="13"></span> Source</button>':""}
+                        ${a.closedSource?"":'<button type="button" class="btn btn-sm btn-ghost" data-on-click="exportIt" title="Download as a .dcmsplugin file"><span data-icon="download" data-icon-size="13"></span> Export</button>'}
+                        <span class="plx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Close</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-if="hasFields" data-bind-disabled="cannot.value">
+                            <span data-icon="check" data-icon-size="13"></span> Save settings</button>
+                    </div>
+                </div>`);g.querySelector(".plx-desc").textContent=a.description||"";const Ke=g.querySelector(".plx-facts");for(const[s,d]of F){const N=document.createElement("dt");N.textContent=s;const Q=document.createElement("dd");Q.textContent=d,Ke.append(N,Q)}async function Se(){if(o.cannot.peek())return;const{changed:s}=w.peek();f.value=!0;try{await U.plugins.update(a.name,{settings:{...a.settings||{},...s}}),E.toast(`${a.displayName||a.name}: settings saved.`,{type:"success"}),J.close(!0),k()&&await ae()}catch(d){E.toast(`Not saved: ${d.message||d}`,{type:"error"})}finally{f.value=!1}}const ie=s=>async()=>{await J.close(),Y.has(J)||s()},J=ye({title:a.displayName||a.name,size:"md",panel:g,model:o,dirty:T,form:l.length?{kind:"settings",name:a.name,dirty:T,values:()=>{const s={};for(const d of l)d.secret||(s[d.key]=x[d.key].peek());return s}}:null,methods:{save:Se,cancel:()=>J.close(),toggle:ie(()=>ne(a,!a.enabled)),update:ie(()=>j(v,{update:!0})),source:ie(()=>fe(a)),exportIt:()=>ve(a)}});g.addEventListener("keydown",s=>{(s.ctrlKey||s.metaKey)&&s.key==="Enter"&&(s.preventDefault(),Se())})}function xe(e=null){const t=_e(),a={displayName:M.observable(e?.displayName??""),slug:M.observable(e?.slug??""),description:M.observable(e?.description??""),author:M.observable(e?.author??(t?.name||t?.username||"")),icon:M.observable(e?.icon??"box")},n=JSON.stringify(Object.fromEntries(Object.entries(a).map(([o,g])=>[o,g.peek()]))),l=()=>Object.fromEntries(Object.entries(a).map(([o,g])=>[o,g.peek()])),v=()=>JSON.stringify(l())!==n||!!e;let u=!!e?.slug;const c=M.effect(()=>{const o=a.displayName.value;u||(a.slug.value=it(o))}),i=M.observable(!1),$=M.computed(()=>tt(Object.fromEntries(Object.entries(a).map(([o,g])=>[o,g.value])),L.value.map(o=>o.name))),x=o=>M.computed(()=>$.value.errors[o]||""),w={...a,saving:i,nameErr:x("displayName"),slugErr:x("slug"),descErr:x("description"),authorErr:x("author"),iconErr:x("icon"),cannot:M.computed(()=>i.value||Object.keys($.value.errors).length>0)},f=ce(`
+                <div class="plx-form">
+                    <div>
+                        <label class="form-label" for="plx-np-name">Display name <span class="text-danger">*</span></label>
+                        <input id="plx-np-name" type="text" class="form-input" maxlength="60" placeholder="Event Manager" data-model="displayName.value">
+                        <small class="plx-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="plx-np-slug">Slug
+                            <span data-help="The plugin's folder under plugins/ and its id everywhere - lowercase letters, digits and hyphens, starting with a letter. Made from the name as you type."></span></label>
+                        <input id="plx-np-slug" type="text" class="form-input font-mono" maxlength="40" data-model="slug.value">
+                        <small class="plx-err" data-bind-hidden="!slugErr.value" data-bind-text="slugErr.value"></small>
                     </div>
-                    <p class="plugin-desc">${r(e.description)}</p>
-                    ${v?`<p class="plugin-date text-muted" style="font-size:.8rem;margin:0">Released ${v}</p>`:""}
-                    ${a?`<p class="text-muted" style="font-size:.8rem;margin:.25rem 0 0">Replaced by ${r(e.supersededBy)}.</p>`:""}
+                    <div>
+                        <label class="form-label" for="plx-np-desc">Description</label>
+                        <input id="plx-np-desc" type="text" class="form-input" maxlength="300" placeholder="What does this plugin do?" data-model="description.value">
+                        <small class="plx-err" data-bind-hidden="!descErr.value" data-bind-text="descErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="plx-np-author">Author</label>
+                        <input id="plx-np-author" type="text" class="form-input" maxlength="80" data-model="author.value">
+                        <small class="plx-err" data-bind-hidden="!authorErr.value" data-bind-text="authorErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="plx-np-icon">Icon
+                            <span data-help="A Domma icon name, as used in data-icon - box, calendar, users\u2026"></span></label>
+                        <input id="plx-np-icon" type="text" class="form-input font-mono" maxlength="40" data-model="icon.value">
+                        <small class="plx-err" data-bind-hidden="!iconErr.value" data-bind-text="iconErr.value"></small>
+                    </div>
+                    <p class="plx-hint">Made from the built-in template - server routes, an admin view and a CLAUDE.md - and switched on. Restart the server to activate it. Ctrl+Enter creates.</p>
+                    <div class="plx-actions">
+                        <span class="plx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="create" data-bind-disabled="cannot.value">
+                            <span data-icon="plus" data-icon-size="13"></span> Create plugin</button>
+                    </div>
+                </div>`);async function T(){if(w.cannot.peek())return;i.value=!0;const{payload:o}=$.peek();try{await U.plugins.scaffold(o),E.toast(`"${o.displayName}" created. Restart the server to activate it.`,{type:"success",duration:6e3}),F.close(!0),k()&&await B()}catch(g){E.toast(g.message||"Could not create the plugin.",{type:"error"})}finally{i.value=!1}}const F=ye({title:"New plugin",size:"sm",panel:f,model:w,dirty:v,form:{kind:"new",name:null,dirty:v,values:l},cleanup:()=>c(),methods:{create:T,cancel:()=>F.close()}}),D=f.querySelector("#plx-np-slug");D.addEventListener("input",()=>{u=!!D.value}),f.addEventListener("keydown",o=>{(o.ctrlKey||o.metaKey)&&o.key==="Enter"&&(o.preventDefault(),T())}),f.querySelector("#plx-np-name")?.focus()}function Be(e){const t=H(e);if(!t)return[];const a=W(t.name),n=Ae(t,V.peek()),l=!!m.peek();return[{header:t.displayName||t.name},{label:Oe(t).length?"Details and settings\u2026":"Details\u2026",icon:"settings",action:()=>se(t.name)},...t.core?[]:[t.enabled?{label:"Switch off\u2026",icon:"pause",disabled:l,action:()=>ne(t,!1)}:{label:"Switch on\u2026",icon:"play",disabled:l,action:()=>ne(t,!0)}],...n?[{label:`Update to v${n}\u2026`,icon:"download",disabled:l||!a?.entitled,action:()=>j(a,{update:!0})}]:[],{type:"divider"},{label:"View source",icon:"code",disabled:t.sourceEditable===!1,action:()=>fe(t)},{label:"Export .dcmsplugin",icon:"download",disabled:t.closedSource===!0,action:()=>ve(t)},...t.core?[]:[{type:"divider"},{label:"Uninstall\u2026",icon:"trash",danger:!0,disabled:l,action:()=>me(t.name,t.displayName)}]]}function qe(e){const t=W(e);if(!t)return[];const a=oe(t),n=!!m.peek();return[{header:t.displayName||t.slug},...a==="install"?[{label:`Install v${t.version}\u2026`,icon:"download",disabled:n,action:()=>j(t)}]:[],...a==="update"?[{label:`Update to v${t.version}\u2026`,icon:"download",disabled:n,action:()=>j(t,{update:!0})}]:[],...t.installed?[{label:"Open in Installed",icon:"package",action:()=>{K.value=t.slug,C.value="all",$e.activate?.(0)}},{type:"divider"},{label:"Uninstall\u2026",icon:"trash",danger:!0,disabled:n,action:()=>me(t.slug,t.displayName)}]:[],...a==="locked"?[{label:"Not licensed for this site",icon:"lock",disabled:!0,action:()=>{}}]:[]]}function ze(e){const t=W(e);if(!t)return;const a=oe(t);a==="install"?j(t):a==="update"?j(t,{update:!0}):t.installed&&(K.value=t.slug,C.value="all",$e.activate?.(0))}function we(e,t,a,n){const l=E.contextMenu(e,{cursor:"glyph",match:".plx-row",inherit:!1,density:"compact",items:c=>a(c.dataset[t])});h.add(()=>l?.destroy?.());const v=c=>{const i=c.target.closest(".plx-row");if(!i)return;const $=c.target.closest(".plx-kebab");if($){Ie($);return}if(c.target.closest(".plx-act")){c.target.closest("button").disabled||n(i.dataset[t]);return}n(i.dataset[t])},u=c=>{const i=c.target.closest(".plx-row");i&&(c.key==="F10"&&c.shiftKey?(c.preventDefault(),Ie(i)):c.key==="Enter"&&c.target===i&&n(i.dataset[t]))};e.addEventListener("click",v),e.addEventListener("keydown",u),h.add(()=>{e.removeEventListener("click",v),e.removeEventListener("keydown",u)})}const le=p.querySelector(".plx-browse");le.appendChild(ce(`
+            <div class="plx-card">
+                <p class="plx-note" data-bind-hidden="browseState.value !== 'loading'">Loading the catalogue\u2026</p>
+                <p class="plx-note" data-bind-hidden="browseState.value !== 'error'">The catalogue could not be loaded - it needs an administrator, and a manager that is reachable.</p>
+                <div data-bind-hidden="browseState.value !== 'file'">
+                    <p style="margin:0 0 .4rem"><strong>This site installs plugins from a file.</strong></p>
+                    <p class="plx-note">Buy a plugin and you are sent a single <code>.dcmsplugin</code> file - Install from file in the banner installs it, and the same button takes an update later. Sites managed for you browse and install here instead, over their manager connection.</p>
                 </div>
-                <div class="plugin-footer">
-                    <span class="text-muted" style="font-size:.8rem">${t?"Part of the CMS - always on":"Restart server after changes"}</span>
-                    <div class="plugin-footer-actions">
-                        ${i?`<button class="btn btn-sm btn-ghost btn-plugin-code" data-name="${e.name}"><span data-icon="code"></span> Code</button>`:""}
-                        ${e.closedSource?"":`<button class="btn btn-sm btn-ghost btn-plugin-export" data-name="${e.name}" data-tooltip="Export as .dcmsplugin"><span data-icon="download" data-icon-size="14"></span></button>`}
-                        ${e.settingsSchema?`<button class="btn btn-sm btn-ghost btn-plugin-settings" data-name="${e.name}"><span data-icon="settings"></span> Settings</button>`:""}
-                        ${t?"":`<button class="btn btn-sm ${g} btn-toggle-plugin"
-                                data-name="${e.name}"
-                                data-enabled="${e.enabled?"1":"0"}">
-                            <span data-icon="${e.enabled?"pause":"play"}"></span> ${m}
-                        </button>`}
+                <div data-bind-hidden="browseState.value !== 'list'">
+                    <div class="plx-bar">
+                        <div class="plx-seg" role="group" aria-label="Show">
+                            <button type="button" data-on-click="bAll" data-bind-class="browseFilter.value === 'all' && 'is-on'">All <b data-bind-text="browseCounts.value.all"></b></button>
+                            <button type="button" data-on-click="bAvailable" data-bind-class="browseFilter.value === 'available' && 'is-on'">Available <b data-bind-text="browseCounts.value.available"></b></button>
+                            <button type="button" data-on-click="bInstalled" data-bind-class="browseFilter.value === 'installed' && 'is-on'">Installed <b data-bind-text="browseCounts.value.installed"></b></button>
+                            <button type="button" data-on-click="bUpdates" data-bind-class="browseFilter.value === 'updates' && 'is-on'" data-bind-hidden="!browseCounts.value.updates">Updates <b data-bind-text="browseCounts.value.updates"></b></button>
+                        </div>
+                        <input type="search" class="form-input plx-search" placeholder="Search the catalogue\u2026" aria-label="Search the catalogue" data-model="browseQuery.value">
+                        <span data-help-title="Browse" data-help="What this site's manager offers it. Install brings a plugin in licensed to this site; Update replaces the installed version and keeps its data. One not licensed yet is listed so you can see it exists - ask for it to be added. Either takes effect after a server restart."></span>
                     </div>
+                    <p class="plx-note" data-bind-text="siteText.value" data-bind-hidden="!siteText.value"></p>
+                    <p class="plx-note" data-bind-hidden="browseRows.value.length">Nothing in the catalogue matches.</p>
+                    <div class="plx-list plx-catalogue" data-each="browseRows.value key=slug"></div>
                 </div>
-            </div>`;o.append(k)}),Domma.icons.scan(),Domma.effects.reveal(".plugin-card",{animation:"fade",stagger:60,duration:400}),Domma.effects.ripple(".btn-toggle-plugin"),o.on("click",".btn-plugin-code",function(){R.navigate(`/plugins/code/${$(this).data("name")}`)}),o.on("click",".btn-plugin-export",async function(){const e=$(this).data("name");try{await f.plugins.exportBundle(e)}catch(t){E.toast(t.message||"Export failed.",{type:"error"})}}),o.on("click",".btn-plugin-settings",async function(){const e=$(this).data("name"),t=c.find(a=>a.name===e);if(!t?.settingsSchema)return;const n=`<form id="plugin-settings-form">${t.settingsSchema.map(a=>{const u=t.settings?.[a.key]??a.default??"";if(a.type==="select"){const b=a.options.map(m=>`<option value="${r(m.value)}"${String(u)===String(m.value)?" selected":""}>${r(m.label)}</option>`).join("");return`<div class="form-group">
-                    <label class="form-label">${r(a.label)}</label>
-                    <select class="form-control" name="${r(a.key)}">${b}</select>
-                </div>`}return a.type==="number"?`<div class="form-group">
-                    <label class="form-label">${r(a.label)}</label>
-                    <input class="form-control" type="number" name="${r(a.key)}" value="${r(String(u))}"${a.min!=null?` min="${a.min}"`:""}${a.max!=null?` max="${a.max}"`:""}>
-                </div>`:`<div class="form-group">
-                <label class="form-label">${r(a.label)}</label>
-                <input class="form-control" type="text" name="${r(a.key)}" value="${r(String(u))}">
-            </div>`}).join("")}</form>`;if(!await E.confirm(n,{title:`${r(t.displayName)} Settings`,confirmText:"Save",cancelText:"Cancel",html:!0}))return;const l=document.getElementById("plugin-settings-form");if(!l)return;const p={};t.settingsSchema.forEach(a=>{const u=l.elements[a.key];u&&(p[a.key]=a.type==="number"?Number(u.value):u.value)});try{await f.plugins.update(e,{settings:p}),t.settings={...t.settings,...p},E.toast("Settings saved.",{type:"success"})}catch(a){E.toast(`Failed to save: ${a.message}`,{type:"error"})}}),o.on("click",".btn-toggle-plugin",async function(){const e=$(this),t=e.data("name"),i=e.data("enabled")!==1&&e.data("enabled")!=="1";e.prop("disabled",!0).text(i?"Enabling\u2026":"Disabling\u2026");try{const n=await f.plugins.update(t,{enabled:i});E.toast(`Plugin ${i?"enabled":"disabled"}.`,{type:"success"}),await N(n,{onStatus:l=>e.text(l.slice(0,24))});const d=await f.plugins.list();y(s,d)}catch(n){E.toast(`Failed: ${n.message}`,{type:"error"}),e.prop("disabled",!1)}})}function r(s){return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}
+            </div>`)),le.querySelector(".plx-catalogue").innerHTML=ct;const ke=p.querySelector(".plx-installed");ke.innerHTML=rt;const $e=E.tabs(p.querySelector(".plx-tabs"),{tabSelector:".tab-item",panelSelector:".tab-panel"}),Pe=M.applyBindings({plugins:L,catalogue:b,loading:de,loadError:Z,restarting:m,filter:C,query:K,rows:ee,counts:Re,emptyText:je,updateCount:_,updateCountText:M.computed(()=>`${_.value} update${_.value===1?"":"s"}`),browseFilter:R,browseQuery:pe,browseRows:te,browseCounts:Fe,siteText:M.computed(()=>b.value.site?`Licensed to ${b.value.site}.`:""),browseState:M.computed(()=>b.value.available===null?"loading":b.value.failed?"error":b.value.available?"list":"file")},p,{methods:{showAll:()=>{C.value="all"},showOn:()=>{C.value="on"},showOff:()=>{C.value="off"},showAttention:()=>{C.value="attention"},bAll:()=>{R.value="all"},bAvailable:()=>{R.value="available"},bInstalled:()=>{R.value="installed"},bUpdates:()=>{R.value="updates"}}});h.add(()=>Pe.dispose()),h.add(Te(p,{position:"bottom"})),h.add(M.effect(()=>{ee.value,te.value,requestAnimationFrame(()=>{p.isConnected&&I.scan(p)})})),we(ke,"name",Be,e=>se(e)),we(le.querySelector(".plx-catalogue"),"slug",qe,ze),Ce(O,{id:"plugins-install-file",icon:"upload",title:"Install from file (.dcmsplugin)",onClick:()=>q.click()}),Ce(O,{id:"plugins-new",icon:"plus",title:"New plugin",onClick:()=>xe()});const Ee=e=>{(m.peek()||A?.dirty())&&(e.preventDefault(),e.returnValue="")};if(window.addEventListener("beforeunload",Ee),h.add(()=>window.removeEventListener("beforeunload",Ee)),h.add(()=>{if(A?.dirty())try{S.set(X,{kind:A.kind,name:A.name,values:A.values(),at:new Date().toISOString()})}catch{}he=!0,[...Y].forEach(e=>{try{e.close(!0)}catch{}})}),I.scan(p),await Promise.all([ae(),be()]),!k())return;let y=null;try{y=S.get(X)}catch{}if(y?.values&&!he){try{S.remove?S.remove(X):S.set(X,null)}catch{}const e=y.kind==="new"?"the new plugin you started":`your settings for ${r(H(y.name)?.displayName||y.name)}`;(y.kind==="new"||H(y.name))&&await E.confirm(`You left ${e} unsaved. Pick up where you left off?`)&&k()&&(y.kind==="new"?xe(y.values):se(y.name,y.values))}}};

package/admin/js/views/roles.js

@@ -1,4 +1,49 @@
-import{api as y,getUser as C}from"../api.js";import{getProjectFromHash as N}from"../lib/project-context.js";import{keepTableIconsAlive as k}from"../lib/table-icons.js";const $=[{value:"badge-danger",label:"Red (Admin)"},{value:"badge-warning",label:"Orange (Manager)"},{value:"badge-info",label:"Blue (Editor)"},{value:"badge-secondary",label:"Grey (Subscriber)"},{value:"badge-success",label:"Green"},{value:"badge-primary",label:"Primary"}];function w(t){if(!t||!t.length)return"<em>None</em>";const f=new Set(t.map(i=>i.split(".")[0])),b=t.every(i=>!i.includes(".")),o=f.size;return`${o} resource${o!==1?"s":""} ${b?"(full)":"(partial)"}`}function x(t){return String(t).replace(/"/g,"&quot;")}export const rolesView={templateUrl:"/admin/js/templates/roles.html",async onMount(t){if(!C()){R.navigate("/");return}const b=E.loader(t.get(0),{type:"dots"});let o=[];const i=N(),v=async()=>{o=(await y.get("/collections/roles/entries?limit=100")).entries||[],i&&(o=o.filter(a=>(a?.data?.meta?.project||"core")===i))},h=()=>{T.create("#roles-table",{pageSize:25,data:o,columns:[{key:"data",title:"Label",render:e=>`<span class="badge ${e.badgeClass||"badge-secondary"}">${e.label||""}</span>`},{key:"data",title:"Name",render:e=>`<code>${e.name||""}</code>`},{key:"data",title:"Level",render:e=>e.level??""},{key:"data",title:"Permissions",render:e=>w(e.permissions)},{key:"id",title:"Actions",render:(e,a)=>{const n=a.data?.level===0;return`
-                                <a href="#/roles/edit/${e}" class="btn btn-sm btn-ghost" data-tooltip="Edit"><span data-icon="edit" data-icon-size="14"></span></a>
-                                ${n?"":`<button class="btn btn-sm btn-ghost btn-delete-role" data-id="${e}" data-name="${x(a.data?.label)}" data-tooltip="Delete"><span data-icon="trash" data-icon-size="14"></span></button>`}
-                            `}}],emptyMessage:"No roles found."}),Domma.icons.scan(),document.querySelectorAll("#roles-table [data-tooltip]").forEach(e=>{E.tooltip(e,{content:e.getAttribute("data-tooltip"),position:"top"})})};try{await v()}finally{b.destroy()}h(),k(t.get(0)),document.addEventListener("click",async function e(a){if(!document.contains(t.get(0))){document.removeEventListener("click",e);return}const n=a.target.closest(".btn-delete-role");if(!n)return;const m=n.dataset.id,p=n.dataset.name;if(await E.confirm(`Delete role <strong>${p}</strong>? This cannot be undone.`))try{await y.delete(`/collections/roles/entries/${m}`),E.toast("Role deleted.",{type:"success"}),await v(),h()}catch(u){E.toast(`Failed: ${u.message}`,{type:"error"})}}),t.find("#btn-add-role").on("click",()=>{const e=document.createElement("div");e.style.cssText="display:flex;flex-direction:column;gap:1rem;padding:1rem;";const a=(l,c)=>{const s=document.createElement("div"),r=document.createElement("label");return r.textContent=l,r.style.cssText="display:block;font-size:.85rem;margin-bottom:.25rem;font-weight:600;",s.appendChild(r),s.appendChild(c),s},n=Object.assign(document.createElement("input"),{type:"text",className:"form-input",placeholder:"e.g. moderator"}),m=Object.assign(document.createElement("input"),{type:"text",className:"form-input",placeholder:"e.g. Moderator"}),p=Object.assign(document.createElement("input"),{type:"number",className:"form-input",value:"5",min:"1"}),d=document.createElement("select");d.className="form-input",$.forEach(l=>{const c=Object.assign(document.createElement("option"),{value:l.value,textContent:l.label});d.appendChild(c)});const u=Object.assign(document.createElement("button"),{className:"btn btn-primary",textContent:"Create Role"});e.appendChild(a("Name (slug)",n)),e.appendChild(a("Display Label",m)),e.appendChild(a("Level",p)),e.appendChild(a("Badge Colour",d)),e.appendChild(u);const g=E.slideover({title:"Add Role",size:"sm",position:"right"});g.element.appendChild(e),g.open(),u.addEventListener("click",async()=>{const l=n.value.trim().toLowerCase().replace(/[^a-z0-9-]/g,"-"),c=m.value.trim(),s=parseInt(p.value,10);if(!l||!c||isNaN(s)||s<1){E.toast("Name, label and level (\u2265 1) are required.",{type:"error"});return}try{const r=await y.post("/collections/roles/entries",{data:{name:l,label:c,level:s,permissions:[],badgeClass:d.value}});g.close(),E.toast("Role created. Set permissions in the editor.",{type:"success"}),R.navigate(`/roles/edit/${r.id}`)}catch(r){E.toast(`Error: ${r.message}`,{type:"error"})}})})}};
+import{apiRequest as f,getUser as xe}from"../api.js";import{addBannerAction as Ee}from"../lib/plugin-chrome.js";import{helpPopovers as te}from"../lib/help-popover.js";import{onceClosed as ke,openMenuAt as ae,sidebarCount as Me,viewLifetime as Se}from"../lib/tool-kit.js";import{BADGE_OPTIONS as Te,FILTERS as $e,arrangeRoles as Ce,checkNewRole as Le,deleteBlock as le,duplicateOf as Oe,filterCounts as Ne,slugify as Ie}from"../lib/roles-arrange.js";const ne=/^#\/(projects\/[^/?#]+\/)?roles\/?(\?.*)?$/,je="#/roles",x="roles.draft",A="roles.filter",Re=`
+<div class="rlx-row" data-id="{{id}}" tabindex="0">
+    <span class="rlx-badge"><span class="badge" data-bind-class="badgeClass">{{label}}</span></span>
+    <span class="rlx-main"><strong class="font-mono">{{name}}</strong><small>{{meta}}</small></span>
+    <span class="rlx-chips">
+        <span class="rlx-chip">{{levelText}}</span>
+        <span class="rlx-chip" data-bind-hidden="!holdersText" data-bind-class="unheld ? 'is-warn' : 'is-ok'" title="Users holding this role, as their main role or an extra one">{{holdersText}}</span>
+        <span class="rlx-chip is-info" data-bind-hidden="!plugin" title="Brought by a plugin">{{plugin}}</span>
+        <span class="rlx-chip is-warn" data-bind-hidden="!scope" title="Its holders see only these admin screens">{{scope}}</span>
+        <span class="rlx-chip" data-bind-hidden="!builtIn" title="Seeded by the CMS - cannot be deleted">Built in</span>
+    </span>
+    <button type="button" class="rlx-kebab" aria-label="Actions for {{label}}" title="Actions">\u22EE</button>
+</div>`,De=s=>String(s??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");function Be(s){const n=document.createElement("template");return n.innerHTML=s.trim(),n.content.firstElementChild}const se=(s,n,p=`${n}s`)=>`${s} ${s===1?n:p}`,i=Se(ne);export const rolesView={templateUrl:"/admin/js/templates/roles.html",async onMount(s){if(!xe()){R.navigate("/");return}i.reset();const n=s.get(0).querySelector(".rlx")||s.get(0),p=()=>ne.test(location.hash)&&n.isConnected,y=(location.hash.match(/^#\/projects\/([^/?#]+)\/roles/)||[])[1]?decodeURIComponent(location.hash.match(/^#\/projects\/([^/?#]+)\/roles/)[1]):"",c=M.observable([]),k=M.observable({}),q=M.observable([]),P=M.observable(!0),T=M.observable("");let K="all";try{K=$e.includes(S.get(A))?S.get(A):"all"}catch{}const d=M.observable(K),_=M.observable("");i.add(M.effect(()=>{const e=d.value;try{S.set(A,e)}catch{}}));const $=M.computed(()=>y?c.value.filter(e=>(e?.data?.meta?.project||"core")===y):c.value),F=M.observable([]);i.add(M.effect(()=>{F.value=Ce($.value,{filter:d.value,query:_.value,holders:k.value})}));const oe=M.computed(()=>Ne($.value)),re=M.computed(()=>$.value.length?"No roles match.":"No roles here."),ie=M.computed(()=>{const e=q.value;if(!e.length)return"";const t=[...new Set(e.map(a=>a.role))].map(a=>`"${a}"`).join(", ");return`${se(e.length,"user")} ${e.length===1?"holds":"hold"} a role that no longer exists (${t}) - edit them under Users.`}),ce=e=>{const t=c.peek().find(a=>a.id===e);return t?{id:t.id,...t.data||{}}:null};async function J(){try{const[e,t]=await Promise.all([f("/collections/roles/entries?limit=1000",{method:"GET"}),f("/roles/_holders",{method:"GET"}).catch(()=>null)]);if(!p())return;c.value=e?.entries||[],k.value=t?.counts||{},q.value=t?.orphans||[],T.value=""}catch(e){T.value=`Could not load the roles: ${e.message||e}`}finally{P.value=!1}}const h=e=>{location.hash=`#/roles/edit/${encodeURIComponent(e)}`},C=()=>Me(je);async function de(e){try{await navigator.clipboard.writeText(e.name),E.toast(`Copied "${e.name}".`,{type:"success"})}catch{E.toast(`Role name: ${e.name}`,{type:"info",duration:6e3})}}async function ue(e){const t=Oe(e,c.peek().map(a=>a.data?.name));try{const a=await f("/collections/roles/entries",{method:"POST",body:JSON.stringify({data:t})});E.toast(`Made "${t.label}" with the same permissions.`,{type:"success"}),C(),a?.id&&p()&&h(a.id)}catch(a){E.toast(`Not duplicated: ${a.message||a}`,{type:"error"})}}async function pe(e){const t=le(e);if(t){E.toast(t,{type:"warning"});return}const a=k.peek()[e.name]||0,g=a?` ${se(a,"user")} ${a===1?"holds":"hold"} it and will need another role.`:"";if(await E.confirm(`Delete the role "${De(e.label||e.name)}"?${g} This cannot be undone.`))try{await f(`/collections/roles/entries/${encodeURIComponent(e.id)}`,{method:"DELETE"}),E.toast(`Deleted "${e.label||e.name}".`,{type:"success"}),C(),await J()}catch(v){E.toast(`Not deleted: ${v.message||v}`,{type:"error"})}}let m=null;const L=new Set;let G=!1;function H(e=null){const t={label:"",name:"",level:"5",badgeClass:"badge-secondary",...e||{}},a=Object.fromEntries(Object.entries(t).map(([l,r])=>[l,M.observable(String(r))]));let g=!!e?.name;const v=()=>Object.fromEntries(Object.keys(a).map(l=>[l,a[l].peek()])),ve=JSON.stringify(t),W=()=>JSON.stringify(v())!==ve||!!e,w=M.observable(!1),N=M.computed(()=>Le(Object.fromEntries(Object.keys(a).map(l=>[l,a[l].value])),{taken:c.value.map(l=>l.data?.name),project:y})),j=l=>M.computed(()=>N.value.errors[l]||""),Q={...a,saving:w,nameErr:j("name"),labelErr:j("label"),levelErr:j("level"),previewText:M.computed(()=>a.label.value.trim()||"New role"),cannot:M.computed(()=>w.value||Object.keys(N.value.errors).length>0)},fe=M.effect(()=>{const l=a.label.value;g||(a.name.value=Ie(l))}),o=E.slideover({title:"New role",size:"sm",position:"right"}),u=Be(`
+                <div class="rlx-form">
+                    <div>
+                        <label class="form-label" for="rlx-f-label">Label <span class="text-danger">*</span></label>
+                        <input id="rlx-f-label" type="text" class="form-input" maxlength="60" placeholder="Moderator" data-model="label.value">
+                        <small class="rlx-err" data-bind-hidden="!labelErr.value" data-bind-text="labelErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rlx-f-name">Name
+                            <span data-help="The role's id - what a user record and a page's visibility hold. Made from the label as you type."></span></label>
+                        <input id="rlx-f-name" type="text" class="form-input font-mono" maxlength="60" data-model="name.value">
+                        <small class="rlx-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rlx-f-level">Level
+                            <span data-help-title="Level" data-help="Lower outranks higher: level 1 is an admin, 2 the ordinary user. Someone can only manage users on a higher number than their own, and 'visibility: this-role' on a page also lets in every role on the same or a lower number."></span></label>
+                        <input id="rlx-f-level" type="number" min="1" class="form-input" data-model="level.value">
+                        <small class="rlx-err" data-bind-hidden="!levelErr.value" data-bind-text="levelErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rlx-f-badge">Badge colour</label>
+                        <div class="rlx-preview">
+                            <select id="rlx-f-badge" class="form-input" data-model="badgeClass.value">
+                                ${Te.map(l=>`<option value="${l.value}">${l.label}</option>`).join("")}
+                            </select>
+                            <span class="badge" data-bind-class="badgeClass.value" data-bind-text="previewText.value"></span>
+                        </div>
+                    </div>
+                    <small class="rlx-hint">It starts with no permissions - the role editor opens next to set them.</small>
+                    <div class="rlx-actions">
+                        <small class="rlx-hint">Ctrl+Enter creates.</small>
+                        <span class="rlx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
+                            <span data-icon="plus" data-icon-size="13"></span> Create role</button>
+                    </div>
+                </div>`);let D=!1;async function X(){if(Q.cannot.peek())return;w.value=!0;const{payload:l}=N.peek();try{const r=await f("/collections/roles/entries",{method:"POST",body:JSON.stringify({data:l})});E.toast(`Created "${l.label}" - now set its permissions.`,{type:"success"}),D=!0,o.close(),C(),r?.id&&h(r.id)}catch(r){E.toast(`Not created: ${r.message||r}`,{type:"error"})}finally{w.value=!1}}o.element.appendChild(u);const ye=te(u),ge=M.applyBindings(Q,u,{methods:{save:X,cancel:()=>o.close()}}),B=u.querySelector("#rlx-f-name"),Z=()=>{g=!!B.value};B.addEventListener("input",Z),u.addEventListener("keydown",l=>{(l.ctrlKey||l.metaKey)&&l.key==="Enter"&&(l.preventDefault(),X())});const ee={dirty:W,values:v};m=ee,L.add(o),ke(o,()=>{fe(),ge.dispose(),ye(),B.removeEventListener("input",Z),L.delete(o),m===ee&&(m=null)});const we=o.close.bind(o);let U=!1;o.close=async l=>{if(!D&&!G&&l!==!0&&W()){if(U)return;U=!0;const r=await E.confirm("Discard the new role you have not created?");if(U=!1,!r)return}return D=!0,we()},I.scan(u),o.open(),u.querySelector("#rlx-f-label")?.focus()}function me(e){const t=ce(e);if(!t)return[];const a=le(t);return[{header:t.label||t.name},{label:"Edit permissions",icon:"edit",action:()=>h(t.id)},{label:"Duplicate",icon:"copy",action:()=>ue(t)},{label:"Copy name",icon:"clipboard",action:()=>de(t)},{type:"divider"},a?{label:t.plugin?`Delete - from ${t.plugin}`:"Delete - built in",icon:"trash",disabled:!0,title:a}:{label:"Delete\u2026",icon:"trash",danger:!0,action:()=>pe(t)}]}const b=n.querySelector(".rlx-list");b.innerHTML=Re;const be=M.applyBindings({projectSlug:y,entries:c,loading:P,loadError:T,filter:d,query:_,rows:F,counts:oe,emptyText:re,orphanText:ie},n,{methods:{showAll:()=>{d.value="all"},showBuiltIn:()=>{d.value="built-in"},showCustom:()=>{d.value="custom"},showPlugins:()=>{d.value="plugins"}}});i.add(()=>be.dispose()),i.add(te(n,{position:"bottom"}));const he=E.contextMenu(b,{cursor:"glyph",match:".rlx-row",inherit:!1,density:"compact",items:e=>me(e.dataset.id)});i.add(()=>he?.destroy?.());const Y=e=>{const t=e.target.closest(".rlx-row");if(!t)return;const a=e.target.closest(".rlx-kebab");if(a){ae(a);return}h(t.dataset.id)},z=e=>{const t=e.target.closest(".rlx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),ae(t)):e.key==="Enter"&&e.target===t&&h(t.dataset.id))};b.addEventListener("click",Y),b.addEventListener("keydown",z),i.add(()=>{b.removeEventListener("click",Y),b.removeEventListener("keydown",z)}),Ee(s,{id:"roles-new",icon:"plus",title:"New role",onClick:()=>H()});const V=e=>{m?.dirty()&&(e.preventDefault(),e.returnValue="")};if(window.addEventListener("beforeunload",V),i.add(()=>window.removeEventListener("beforeunload",V)),i.add(()=>{if(m?.dirty())try{S.set(x,{values:m.values(),at:new Date().toISOString()})}catch{}G=!0,[...L].forEach(e=>{try{e.close(!0)}catch{}})}),I.scan(n),await J(),!p())return;I.scan(n);let O=null;try{O=S.get(x)}catch{}if(O?.values){try{S.remove?S.remove(x):S.set(x,null)}catch{}await E.confirm("You left a new role unfinished. Pick up where you left off?")&&p()&&H(O.values)}}};

package/admin/js/views/search.js

@@ -1 +1,7 @@
-import{apiRequest as q}from"/admin/js/api.js";export const searchView={templateUrl:"/admin/js/templates/search.html",async onMount(s){let n={};const A=E.loader(s.get(0),{type:"dots"});try{n=await q("/search/settings")}catch{E.toast("Could not load settings.",{type:"error"})}finally{A.destroy()}s.find("#field-enabled").prop("checked",n.enabled!==!1),s.find("#field-placeholder").val(n.placeholder||"Search pages..."),s.find("#field-keyboard-shortcut").prop("checked",n.keyboardShortcut!==!1),s.find("#field-max-results").val(n.maxResults??10),s.find("#field-min-query-length").val(n.minQueryLength??2),s.find("#field-debounce-ms").val(n.debounceMs??300);const g=n.displayMode||"navbar",d=document.getElementById("field-display-mode"),a=document.getElementById("field-position"),f=document.getElementById("field-offset-x"),u=document.getElementById("field-offset-y"),l=document.getElementById("field-icon-only"),o=document.getElementById("field-icon-radius"),c=document.getElementById("field-icon-size"),h=document.getElementById("ss-size-row"),v=document.getElementById("ss-size-value"),b=document.getElementById("ss-radius-max-hint"),I=document.getElementById("ss-radius-row"),x=document.getElementById("ss-radius-value"),r=document.getElementById("ss-radius-preview"),B=document.getElementById("ss-pos-section"),S=document.getElementById("ss-pos-grid"),p=document.getElementById("ss-display-mode");d&&(d.value=g),a&&(a.value=n.position??"bottom-right"),f&&(f.value=n.offsetX??32),u&&(u.value=n.offsetY??32),l&&(l.checked=n.iconOnly!==!1),c&&(c.value=n.iconSize??52),o&&(o.value=n.iconRadius??26);const k=()=>parseInt(c?.value,10)||52;function y(){const e=k(),t=parseInt(o?.value,10)||0;if(v&&(v.textContent=e+"px"),x&&(x.textContent=t+"px"),!r)return;r.style.width=e+"px",r.style.height=e+"px",r.style.borderRadius=t+"px";const i=Math.round(e*20/52),m=r.querySelector("svg, [data-icon]");m&&(m.style.width=i+"px",m.style.height=i+"px")}function w(){if(!o)return;const e=parseInt(o.max,10),t=Math.floor(k()/2),i=parseInt(o.value,10)||0;o.max=String(t),(i>=e||i>t)&&(o.value=String(t)),b&&(b.textContent=String(t))}function M(){const e=l?.checked?"":"none";I&&(I.style.display=e),h&&(h.style.display=e)}w(),y(),M(),o?.addEventListener("input",y),c?.addEventListener("input",()=>{w(),y()}),l?.addEventListener("change",M);function R(e){d&&(d.value=e),B&&(B.style.display=e==="floating"?"":"none"),p&&p.querySelectorAll(".ss-mode-btn").forEach(function(t){const i=t.getAttribute("data-mode")===e;t.classList.toggle("btn-primary",i),t.classList.toggle("btn-secondary",!i)})}function z(e){document.querySelectorAll(".ss-pos-btn").forEach(function(t){const i=t.getAttribute("data-pos")===e;t.style.background=i?"var(--dm-primary, #5b8cff)":"",t.style.color=i?"#fff":""})}R(g),z(n.position||"bottom-right"),p&&p.addEventListener("click",function(e){const t=e.target.closest(".ss-mode-btn");t&&R(t.getAttribute("data-mode"))}),S&&S.addEventListener("click",function(e){const t=e.target.closest("[data-pos]");if(!t)return;const i=t.getAttribute("data-pos");a&&(a.value=i),z(i)}),s.find("#save-settings-btn").off("click").on("click",async()=>{const e={enabled:s.find("#field-enabled").prop("checked"),placeholder:s.find("#field-placeholder").val()||"Search pages...",keyboardShortcut:s.find("#field-keyboard-shortcut").prop("checked"),maxResults:parseInt(s.find("#field-max-results").val(),10)||10,minQueryLength:parseInt(s.find("#field-min-query-length").val(),10)||2,debounceMs:parseInt(s.find("#field-debounce-ms").val(),10)||300,displayMode:d?d.value:"navbar",position:a?a.value:"bottom-right",offsetX:f&&parseInt(f.value,10)||32,offsetY:u&&parseInt(u.value,10)||32,iconOnly:l?l.checked:!0,iconSize:c&&parseInt(c.value,10)||52,iconRadius:o?parseInt(o.value,10)||0:26};try{await q("/search/settings",{method:"PUT",body:JSON.stringify(e)}),E.toast("Settings saved.",{type:"success"})}catch{E.toast("Failed to save settings.",{type:"error"})}});const L=s.find("#ss-settings-tabs").get(0);L&&E.tabs(L),Domma.icons.scan(),y()}};
+import{apiRequest as N}from"../api.js";import{addBannerAction as ee}from"../lib/plugin-chrome.js";import{helpPopovers as me}from"../lib/help-popover.js";import{openMenuAt as te,sidebarCount as fe}from"../lib/tool-kit.js";import{POSITION_LABEL as be,clampNotes as he,formFromSettings as O,liveChips as ye,maxRadius as ge,payloadFromForm as c,previewState as se,radiusForSize as ke,resultRow as Se,snapshot as U}from"../lib/search-settings-arrange.js";const K=/^\/search(\?.*)?$/,we="#/search",b="search.draft",xe='<span class="ssx-chip" data-bind-class="cls">{{text}}</span>',Me=`
+<div class="ssx-row" data-url="{{url}}" tabindex="0">
+    <span class="ssx-rank">{{rank}}</span>
+    <span class="ssx-main"><strong>{{title}}</strong><small>{{meta}}</small><span class="ssx-snippet">{{snippet}}</span></span>
+    <span class="ssx-chip">{{score}}</span>
+    <button type="button" class="ssx-kebab" aria-label="Actions for {{title}}" title="Actions">\u22EE</button>
+</div>`;let u=null,oe=!1;function Ee(){oe||!window.R?.use||(oe=!0,R.use((i,v,o)=>!(K.test(v?.path||"")&&!K.test(i?.path||""))||!u?.dirty()?o():E.confirm("You have unsaved search settings. Leave anyway? They are kept as a draft for your next visit.").then(r=>{r?o():history.replaceState(null,"","#/search")})),M.subscribe("router:afterChange",({to:i}={})=>{if(u&&!K.test(i?.path||"")){const v=u;u=null,v.dispose()}}))}export const searchView={templateUrl:"/admin/js/templates/search.html",async onMount(i){if(Ee(),u){const e=u;u=null,e.dispose()}const v=[],o=e=>(v.push(e),e);let P=!1;const r=i.get(0).querySelector(".ssx")||i.get(0),$=()=>!P&&r.isConnected,H=E.loader(i.get(0),{type:"dots"});let j,A=null;try{[j,A]=await Promise.all([N("/search/settings"),N("/search/_count").catch(()=>null)])}catch(e){H.destroy(),E.toast(`Could not load the search settings: ${e.message||e}`,{type:"error"});return}if(H.destroy(),!r.isConnected)return;const w=M.observable(j),B=O(j),s={};for(const[e,t]of Object.entries(B))s[e]=M.observable(t);const h=()=>Object.fromEntries(Object.keys(s).map(e=>[e,s[e].peek()])),p=()=>Object.fromEntries(Object.keys(s).map(e=>[e,s[e].value])),x=M.observable(U(B)),L=M.computed(()=>U(p())!==x.value),T=M.observable(!1),Y=M.observable(A?{searchable:A.count}:null),V=M.observable([]);o(M.effect(()=>{V.value=ye(w.value,Y.value).map(e=>({text:e.text,cls:e.tone?`is-${e.tone}`:""}))}));let m=Number(s.iconSize.peek())||52;o(M.effect(()=>{const e=Number(s.iconSize.value)||52;if(e===m)return;const t=ke(s.iconRadius.peek(),m,e);m=e,String(t)!==String(s.iconRadius.peek())&&(s.iconRadius.value=String(t))}));const ne=M.computed(()=>ge(s.iconSize.value)),Q=r.querySelector("#ssx-radius");o(M.effect(()=>{Q&&(Q.max=String(ne.value))}));const y=M.observable(""),g=M.observable([]),z=M.observable(""),C=M.observable(""),ae=M.computed(()=>se(y.value,s.minQueryLength.value).note);let _=0,q=null;async function re(){const e=se(y.peek(),s.minQueryLength.peek()),t=++_;if(!e.run){g.value=[],C.value="",z.value="";return}const a=c(h()).maxResults;try{const n=await N(`/search/preview?q=${encodeURIComponent(y.peek().trim())}&max=${a}`);if(t!==_||!$())return;g.value=(n.results||[]).map(Se),z.value="";const l=g.peek().length;C.value=l?`${l} result${l===1?"":"s"} (showing up to ${n.maxResults}) from ${n.coverage?.searchable??"?"} searchable pages.`:`Nothing found in ${n.coverage?.searchable??"?"} searchable pages.`,n.coverage&&(Y.value=n.coverage)}catch(n){if(t!==_)return;g.value=[],C.value="",z.value=`Search failed: ${n.message||n}`}}o(M.effect(()=>{y.value,s.maxResults.value,clearTimeout(q),q=setTimeout(re,c(h()).debounceMs)})),o(()=>clearTimeout(q));async function F(){if(!T.peek()){T.value=!0;try{const e=await N("/search/settings",{method:"PUT",body:JSON.stringify(c(h()))});if(!$())return;const t=e?.settings||c(h());w.value=t;const a=O(t);m=Number(a.iconSize)||52;for(const[n,l]of Object.entries(a))s[n].value=l;x.value=U(a);try{S.remove?S.remove(b):S.set(b,null)}catch{}fe(we),E.toast(t.enabled?"Search settings saved.":"Saved - search is off on the public site.",{type:"success"})}catch(e){E.toast(`Not saved: ${e.message||e}`,{type:"error"})}finally{T.value=!1}}}function ie(){const e=O(w.peek());m=Number(e.iconSize)||52;for(const[t,a]of Object.entries(e))s[t].value=a}r.querySelector(".ssx-chips").innerHTML=xe;const f=r.querySelector(".ssx-list");f.innerHTML=Me;const k=e=>`${e}px`,ce={...s,dirty:L,saving:T,chips:V,query:y,results:g,previewNote:ae,previewError:z,previewMeta:C,clampText:M.computed(()=>he(p()).join(" ")),sizeText:M.computed(()=>k(c(p()).iconSize)),radiusText:M.computed(()=>k(c(p()).iconRadius)),sizePx:M.computed(()=>k(c(p()).iconSize)),radiusPx:M.computed(()=>k(c(p()).iconRadius)),glyphPx:M.computed(()=>k(Math.round(c(p()).iconSize*20/52))),positionText:M.computed(()=>be[s.position.value]||s.position.value)},le=E.tabs(r.querySelector(".ssx-tabs"),{tabSelector:".tab-item",panelSelector:".tab-panel"}),ue=M.applyBindings(ce,r,{methods:{save:()=>F(),discard:()=>ie(),useNavbar:()=>{s.displayMode.value="navbar"},useFloating:()=>{s.displayMode.value="floating"},setPos:e=>{s.position.value=e}}});o(()=>ue.dispose()),o(me(r,{position:"bottom"}));const pe=e=>[{header:e},{label:"Open on the site",icon:"external-link",action:()=>window.open(e,"_blank","noopener")},{label:"Edit the page",icon:"edit",action:()=>{location.hash=`#/pages/edit${e}`}},{label:"Copy address",icon:"copy",action:()=>{const t=new URL(e,location.origin).href;navigator.clipboard?.writeText(t).then(()=>E.toast("Address copied.",{type:"success"}),()=>E.toast(t,{type:"info",duration:8e3}))}}],de=E.contextMenu(f,{cursor:"glyph",match:".ssx-row",inherit:!1,density:"compact",items:e=>pe(e.dataset.url)});o(()=>de?.destroy?.());const J=e=>{const t=e.target.closest(".ssx-row");if(!t)return;const a=e.target.closest(".ssx-kebab");if(a){te(a);return}window.open(t.dataset.url,"_blank","noopener")},W=e=>{const t=e.target.closest(".ssx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),te(t)):e.key==="Enter"&&e.target===t&&window.open(t.dataset.url,"_blank","noopener"))};f.addEventListener("click",J),f.addEventListener("keydown",W),o(()=>{f.removeEventListener("click",J),f.removeEventListener("keydown",W)}),ee(i,{id:"search-view-site",icon:"external-link",title:"View site",onClick:()=>window.open("/","_blank","noopener")}),ee(i,{id:"search-save",icon:"save",title:"Save (Ctrl+S)",onClick:()=>F()});const G=e=>{!(e.ctrlKey||e.metaKey)||e.key!=="s"||(e.preventDefault(),e.stopImmediatePropagation(),F())};document.addEventListener("keydown",G,!0),o(()=>document.removeEventListener("keydown",G,!0));const X=()=>{if(L.peek())try{S.set(b,{form:h(),base:x.peek(),at:new Date().toISOString()})}catch{}},Z=e=>{L.peek()&&(X(),e.preventDefault(),e.returnValue="")};window.addEventListener("beforeunload",Z),o(()=>window.removeEventListener("beforeunload",Z)),u={dirty:()=>L.peek(),dispose(){P=!0,X(),v.splice(0).reverse().forEach(e=>{try{e()}catch{}})}},I.scan(r);let d=null;try{d=S.get(b)}catch{}if(d?.form){try{S.remove?S.remove(b):S.set(b,null)}catch{}const e=d.base&&d.base!==x.peek(),t=d.at?` (${D(d.at).format("D MMM HH:mm")})`:"",a=e?`You left unsaved search settings${t}, but the saved settings have changed since. Restore your version anyway?`:`You left unsaved search settings${t}. Restore them?`;if(await E.confirm(a)&&$()){const n={...O(w.peek()),...d.form};m=Number(n.iconSize)||52;for(const[l,ve]of Object.entries(n))s[l]&&(s[l].value=ve)}}}};

package/admin/js/views/settings.js

@@ -1,3 +1,13 @@
-import{api as v,apiRequest as b}from"../api.js";import{placeTools as w}from"../lib/sidebar-grouping.js";async function C(e,f){if(!e)return;const[l,c]=await Promise.all([H.get("/api/sidebar/menu").catch(()=>({items:[]})),H.get("/api/sidebar/registered-items").catch(()=>[])]),i=new Map([["/","Dashboard (built in)"]]),n=(a,d)=>{for(const t of a||[]){if(!t||t.hidden||t.restricted)continue;const s=typeof t.url=="string"?t.url:"";s.startsWith("#/")&&s.length>2&&!i.has(s.slice(1))&&i.set(s.slice(1),`${d?`${d} \u203A `:""}${t.text||s}`),n(t.items,t.url?d:t.text||d)}};n(w(l?.items||[],c||[]),"");const m=/^\/[A-Za-z0-9\-_/]*$/.test(f||"")&&f.replace(/\/+$/,"")||"/";i.has(m)||i.set(m,`${m} (not in the sidebar)`);for(const[a,d]of i){const t=document.createElement("option");t.value=a,t.textContent=d,t.selected=a===m,e.appendChild(t)}}export const settingsView={templateUrl:"/admin/js/templates/settings.html",async onMount(e){E.tabs(e.find("#settings-tabs").get(0));const f=E.loader(e.get(0),{type:"dots"}),l=await v.settings.get().catch(()=>({}));f.destroy(),e.find("#field-site-title").val(l.title||""),e.find("#field-tagline").val(l.tagline||""),C(e.find("#field-admin-home").get(0),l.adminHome),e.find("#field-spacer-size").val(l.layoutOptions?.spacerSize??40),e.find("#field-seo-title").val(l.seo?.defaultTitle||""),e.find("#field-seo-separator").val(l.seo?.titleSeparator||" | "),e.find("#field-seo-desc").val(l.seo?.defaultDescription||""),e.find("#field-footer-copy").val(l.footer?.copyright||""),e.find("#field-footer-motion-toggle").prop("checked",l.footer?.showMotionToggle!==!1),e.find("#field-social-twitter").val(l.social?.twitter||""),e.find("#field-social-facebook").val(l.social?.facebook||""),e.find("#field-social-instagram").val(l.social?.instagram||""),e.find("#field-social-linkedin").val(l.social?.linkedin||""),e.find("#field-social-github").val(l.social?.github||""),e.find("#field-social-youtube").val(l.social?.youtube||""),e.find("#field-smtp-host").val(l.smtp?.host||""),e.find("#field-smtp-port").val(l.smtp?.port||587),e.find("#field-smtp-user").val(l.smtp?.user||""),e.find("#field-smtp-pass").val(l.smtp?.pass||""),e.find("#field-smtp-secure").prop("checked",l.smtp?.secure||!1),e.find("#field-smtp-from-address").val(l.smtp?.fromAddress||""),e.find("#field-smtp-from-name").val(l.smtp?.fromName||""),y(l.smtp?.host||""),e.find("#field-smtp-host").on("input",function(){y(this.value)});const c=l.backToTop||{};e.find("#field-btt-enabled").prop("checked",c.enabled!==!1),e.find("#field-btt-threshold").val(c.scrollThreshold??300),e.find("#field-btt-position").val(c.position||"bottom-right"),e.find("#field-btt-offset").val(c.offset??32),e.find("#field-btt-bottom-offset").val(c.bottomOffset??c.offset??32),e.find("#field-btt-label").val(c.label||""),e.find("#field-btt-smooth").prop("checked",c.smooth!==!1);const i=l.cookieConsent||{};e.find("#field-cc-enabled").prop("checked",i.enabled!==!1),e.find("#field-cc-message").val(i.message||""),e.find("#field-cc-accept-all").val(i.acceptAllText||"Accept All"),e.find("#field-cc-reject-all").val(i.rejectAllText||"Reject All"),e.find("#field-cc-customize").val(i.customizeText||"Customize"),e.find("#field-cc-save-prefs").val(i.savePreferencesText||"Save Preferences"),e.find("#field-cc-privacy-text").val(i.privacyPolicyText||"Privacy Policy"),e.find("#field-cc-privacy-url").val(i.privacyPolicyUrl||""),e.find("#field-cc-cookie-text").val(i.cookiePolicyText||"Cookie Policy"),e.find("#field-cc-cookie-url").val(i.cookiePolicyUrl||""),e.find("#field-cc-position").val(i.position||"bottom"),e.find("#field-cc-layout").val(i.layout||"bar"),e.find("#field-cc-theme").val(i.theme||"dark"),e.find("#field-cc-show-functional").prop("checked",i.showFunctional!==!1),e.find("#field-cc-show-analytics").prop("checked",i.showAnalytics!==!1),e.find("#field-cc-show-marketing").prop("checked",i.showMarketing!==!1),e.find("#field-cc-version").val(i.consentVersion||"1.0");const n=l.breadcrumbs||{};e.find("#field-breadcrumbs-enabled").prop("checked",n.enabled===!0),e.find("#field-breadcrumbs-home-label").val(n.homeLabel||"Home"),e.find("#field-breadcrumbs-position").val(n.position||"TL"),e.find("#field-bc-offset-x").val(n.offsetX??8),e.find("#field-bc-offset-y").val(n.offsetY??8);function m(t){e.find(".bc-pos-btn").each(function(){const s=this.dataset.pos===t;this.style.background=s?"var(--dm-primary, #5b8cff)":"",this.style.color=s?"var(--dm-primary-text)":""})}m(n.position||"TL"),e.find(".bc-pos-btn").on("click",function(){const t=this.dataset.pos;e.find("#field-breadcrumbs-position").val(t),m(t)});let a=null;try{const{css:t}=await b("/settings/custom-css");e.find("#field-custom-css").val(t||""),E.editor&&(a=E.editor(e.find("#field-custom-css").get(0),{mode:"code",language:"css",lineNumbers:!0,showToolbar:!1,minHeight:420,placeholder:"/* Add your custom CSS here */",characterCount:!0}))}catch{}a&&a._editorEl&&a._editorEl.addEventListener("keydown",t=>{if(!t.ctrlKey&&!t.metaKey)return;if(t.key==="s"){t.preventDefault(),e.find("#save-css-btn").get(0)?.click();return}const s=a._editorEl,r=s.selectionStart!==s.selectionEnd;if((t.key==="c"||t.key==="x")&&!r){t.preventDefault();const o=s.value,p=s.selectionStart,h=o.lastIndexOf(`
-`,p-1)+1,u=o.indexOf(`
-`,p),g=u===-1?o.slice(h):o.slice(h,u+1);if(navigator.clipboard.writeText(g),t.key==="x"){const k=o.slice(0,h),x=u===-1?"":o.slice(u+1);s.value=k+x,s.selectionStart=s.selectionEnd=h,s.dispatchEvent(new Event("input",{bubbles:!0})),E.toast("Line cut",{type:"info",duration:1500})}else E.toast("Line copied",{type:"info",duration:1500})}}),e.find("#save-settings-btn").on("click",async()=>{const t={title:e.find("#field-site-title").val().trim(),tagline:e.find("#field-tagline").val().trim(),...e.find("#field-admin-home option").length&&{adminHome:e.find("#field-admin-home").val()||"/"},layoutOptions:{spacerSize:parseInt(e.find("#field-spacer-size").val(),10)||40},seo:{defaultTitle:e.find("#field-seo-title").val().trim(),titleSeparator:e.find("#field-seo-separator").val()||" | ",defaultDescription:e.find("#field-seo-desc").val().trim()},footer:{copyright:e.find("#field-footer-copy").val().trim(),showMotionToggle:e.find("#field-footer-motion-toggle").prop("checked"),links:l.footer?.links||[]},social:{twitter:e.find("#field-social-twitter").val().trim(),facebook:e.find("#field-social-facebook").val().trim(),instagram:e.find("#field-social-instagram").val().trim(),linkedin:e.find("#field-social-linkedin").val().trim(),github:e.find("#field-social-github").val().trim(),youtube:e.find("#field-social-youtube").val().trim()},smtp:{host:e.find("#field-smtp-host").val().trim(),port:parseInt(e.find("#field-smtp-port").val(),10)||587,user:e.find("#field-smtp-user").val().trim(),pass:e.find("#field-smtp-pass").val(),secure:e.find("#field-smtp-secure").prop("checked"),fromAddress:e.find("#field-smtp-from-address").val().trim(),fromName:e.find("#field-smtp-from-name").val().trim()},backToTop:{enabled:e.find("#field-btt-enabled").prop("checked"),scrollThreshold:parseInt(e.find("#field-btt-threshold").val(),10)||300,position:e.find("#field-btt-position").val()||"bottom-right",offset:parseInt(e.find("#field-btt-offset").val(),10)||32,bottomOffset:parseInt(e.find("#field-btt-bottom-offset").val(),10)||32,label:e.find("#field-btt-label").val().trim(),smooth:e.find("#field-btt-smooth").prop("checked")},cookieConsent:{enabled:e.find("#field-cc-enabled").prop("checked"),message:e.find("#field-cc-message").val().trim(),acceptAllText:e.find("#field-cc-accept-all").val().trim(),rejectAllText:e.find("#field-cc-reject-all").val().trim(),customizeText:e.find("#field-cc-customize").val().trim(),savePreferencesText:e.find("#field-cc-save-prefs").val().trim(),privacyPolicyText:e.find("#field-cc-privacy-text").val().trim(),privacyPolicyUrl:e.find("#field-cc-privacy-url").val().trim(),cookiePolicyText:e.find("#field-cc-cookie-text").val().trim(),cookiePolicyUrl:e.find("#field-cc-cookie-url").val().trim(),position:e.find("#field-cc-position").val(),layout:e.find("#field-cc-layout").val(),theme:e.find("#field-cc-theme").val(),showFunctional:e.find("#field-cc-show-functional").prop("checked"),showAnalytics:e.find("#field-cc-show-analytics").prop("checked"),showMarketing:e.find("#field-cc-show-marketing").prop("checked"),consentVersion:e.find("#field-cc-version").val().trim()||"1.0"}},s=e.find("#save-settings-btn");s.prop("disabled",!0);try{await v.settings.save(t),document.dispatchEvent(new CustomEvent("dm:admin-home-changed")),E.toast("Settings saved.",{type:"success"})}catch{E.toast("Failed to save settings.",{type:"error"})}finally{s.prop("disabled",!1)}}),e.find("#send-test-email-btn").on("click",async()=>{const t=e.find("#field-test-email-to").val().trim(),s=e.find("#test-email-result").get(0),r=e.find("#send-test-email-btn");r.prop("disabled",!0),s&&(s.textContent="Sending\u2026",s.style.color="");try{const o=await b("/settings/test-email",{method:"POST",body:JSON.stringify({to:t||void 0})});s&&(s.textContent=o.message||"Test email sent.",s.style.color="var(--dm-success,#4ade80)")}catch(o){s&&(s.textContent=o.message||"Failed to send test email.",s.style.color="var(--dm-danger,#f87171)")}finally{r.prop("disabled",!1)}}),e.find("#save-breadcrumbs-btn").on("click",async()=>{const t=e.find("#save-breadcrumbs-btn");t.prop("disabled",!0);try{const s={enabled:e.find("#field-breadcrumbs-enabled").prop("checked"),homeLabel:e.find("#field-breadcrumbs-home-label").val().trim()||"Home",position:e.find("#field-breadcrumbs-position").val()||"TL",offsetX:parseInt(e.find("#field-bc-offset-x").val(),10)||8,offsetY:parseInt(e.find("#field-bc-offset-y").val(),10)||8};await v.settings.save({breadcrumbs:s}),l.breadcrumbs=s,E.toast("Breadcrumbs settings saved.",{type:"success"})}catch{E.toast("Failed to save breadcrumbs settings.",{type:"error"})}finally{t.prop("disabled",!1)}}),e.find("#save-css-btn").on("click",async()=>{const t=a?a.getValue():e.find("#field-custom-css").val(),s=e.find("#save-css-btn");s.prop("disabled",!0);try{await b("/settings/custom-css",{method:"PUT",body:JSON.stringify({css:t})}),E.toast("Custom CSS saved.",{type:"success"})}catch(r){E.toast(r.message||"Failed to save CSS.",{type:"error"})}finally{s.prop("disabled",!1)}});async function d(){try{const t=await b("/cache/status"),s=t.enabled?`enabled (${t.driver})`:"disabled",r=t.maxItems?` \xB7 ${t.size} / ${t.maxItems} entries`:"";e.find("#cache-status").text(s+r)}catch{e.find("#cache-status").text("unknown")}try{const{entries:t}=await b("/cache/keys");T(e.find("#cache-keys-table"),t),e.find("#cache-key-count").text(`(${t.length})`)}catch(t){e.find("#cache-keys-table").get(0).textContent="Failed to load keys: "+t.message}}await d(),e.find("#btn-clear-cache").on("click",async()=>{if(!await E.confirm("Clear the entire response cache?"))return;const t=e.find("#btn-clear-cache");t.prop("disabled",!0);try{await b("/cache/clear",{method:"POST"}),E.toast("Cache cleared.",{type:"success"}),await d()}catch(s){E.toast(s.message||"Failed to clear cache.",{type:"error"})}finally{t.prop("disabled",!1)}}),e.find("#btn-refresh-cache-keys").on("click",d)}};function y(e){const f=document.getElementById("smtp-unconfigured-notice");f&&(f.style.display=String(e||"").trim()?"none":"",f.style.display===""&&Domma.icons.scan(f))}function T(e,f){const l=e.get(0);if(!l)return;for(;l.firstChild;)l.removeChild(l.firstChild);if(!f.length){const d=document.createElement("p");d.className="text-muted",d.style.fontSize=".875rem",d.textContent="Cache is empty.",l.appendChild(d);return}const c=[...f].reverse(),i=document.createElement("table");i.className="table table-compact";const n=document.createElement("thead"),m=document.createElement("tr");for(const d of["Key","Tags","Expires"]){const t=document.createElement("th");t.textContent=d,m.appendChild(t)}n.appendChild(m),i.appendChild(n);const a=document.createElement("tbody");for(const d of c){const t=document.createElement("tr"),s=document.createElement("td");s.style.fontFamily="monospace",s.style.fontSize="12px",s.textContent=d.key,t.appendChild(s);const r=document.createElement("td");r.style.fontSize="12px";for(const p of d.tags){const h=document.createElement("span");h.className="badge",h.style.marginRight="4px",h.style.fontSize="11px",h.textContent=p,r.appendChild(h)}t.appendChild(r);const o=document.createElement("td");if(o.style.fontSize="12px",o.style.color="var(--dm-text-muted, #6b7280)",d.expiresAt===null)o.textContent="no expiry";else{const p=d.expiresAt-Date.now();p<=0?o.textContent="expired":p<6e4?o.textContent=`${Math.round(p/1e3)}s`:p<36e5?o.textContent=`${Math.round(p/6e4)}m`:o.textContent=`${Math.round(p/36e5)}h`}t.appendChild(o),a.appendChild(t)}i.appendChild(a),l.appendChild(i)}
+import{api as G,apiRequest as w}from"../api.js";import{placeTools as Re}from"../lib/sidebar-grouping.js";import{addBannerAction as fe}from"../lib/plugin-chrome.js";import{helpPopovers as Ae}from"../lib/help-popover.js";import{openMenuAt as Q,sidebarCount as he}from"../lib/tool-kit.js";import{changedTabs as He,describeCacheKey as X,draftOf as Pe,expiresIn as $e,formFromSettings as De,homeValue as je,payloadFromForm as Ke,settingsProblems as _e,snapshot as ve,TAB_FIELDS as Ie}from"../lib/site-settings-arrange.js";const Z=/^\/settings(\?.*)?$/,be="#/settings",T="settings.draft",Be=`
+<div class="stx-problem">
+    <span class="stx-chip" data-bind-class="tone === 'danger' ? 'is-bad' : 'is-warn'">{{label}}</span>
+    <span>{{text}}</span>
+    <button type="button" class="btn btn-sm btn-ghost" data-go="{{tab}}">Go there</button>
+</div>`,qe=`
+<div class="stx-row" data-id="{{id}}" tabindex="0">
+    <span class="stx-main"><strong>{{path}}</strong><small>{{meta}}</small></span>
+    <span class="stx-chip">{{expires}}</span>
+    <button type="button" class="stx-kebab" aria-label="Actions for {{path}}" title="Actions">\u22EE</button>
+</div>`,Fe=["general","seo","footer","email","backToTop","cookies","breadcrumbs","css","cache"];async function ze(l,p){const[r,O]=await Promise.all([H.get("/api/sidebar/menu").catch(()=>({items:[]})),H.get("/api/sidebar/registered-items").catch(()=>[])]),a=new Map([["/","Dashboard (built in)"]]),u=(C,m)=>{for(const o of C||[]){if(!o||o.hidden||o.restricted)continue;const f=typeof o.url=="string"?o.url:"";f.startsWith("#/")&&f.length>2&&!a.has(f.slice(1))&&a.set(f.slice(1),`${m?`${m} \u203A `:""}${o.text||f}`),u(o.items,o.url?m:o.text||m)}};u(Re(r?.items||[],O||[]),""),a.has(p)||a.set(p,`${p} (not in the sidebar)`),l.replaceChildren();for(const[C,m]of a){const o=document.createElement("option");o.value=C,o.textContent=m,l.appendChild(o)}}let y=null,ye=!1;function Ne(){ye||!window.R?.use||(ye=!0,R.use((l,p,r)=>!(Z.test(p?.path||"")&&!Z.test(l?.path||""))||!y?.dirty()?r():E.confirm("You have unsaved settings. Leave anyway? They are kept as a draft for your next visit (not the SMTP password).").then(a=>{a?r():history.replaceState(null,"","#/settings")})),M.subscribe("router:afterChange",({to:l}={})=>{if(y&&!Z.test(l?.path||"")){const p=y;y=null,p.dispose()}}))}export const settingsView={templateUrl:"/admin/js/templates/settings.html",async onMount(l){if(Ne(),y){const e=y;y=null,e.dispose()}const p=[],r=e=>(p.push(e),e);let O=!1;const a=l.get(0).querySelector(".stx")||l.get(0),u=()=>!O&&a.isConnected,C=E.loader(l.get(0),{type:"dots"});let m,o;try{[m,o]=await Promise.all([G.settings.get(),w("/settings/custom-css").then(e=>e?.css||"").catch(()=>null)])}catch(e){C.destroy(),E.toast(`Could not load the settings: ${e.message||e}`,{type:"error"});return}if(C.destroy(),!a.isConnected)return;const f=o!==null,ee=M.observable(m||{}),te=De(m||{},o||""),n={};for(const[e,t]of Object.entries(te))n[e]=M.observable(t);const B=()=>Object.fromEntries(Object.keys(n).map(e=>[e,n[e].value])),se=()=>Object.fromEntries(Object.keys(n).map(e=>[e,n[e].peek()])),g=M.observable(te),q=M.computed(()=>ve(g.value)),L=M.computed(()=>ve(B())!==q.value),A=M.observable(!1),P=M.observable(""),F=M.observable(!1),ne=M.computed(()=>{const e=new Set(He(B(),g.value));return Object.fromEntries(Object.keys(Ie).map(t=>[t,e.has(t)]))}),z=M.observable([]);r(M.effect(()=>{z.value=_e(B()).map(e=>({...e,label:e.tone==="danger"?"Mail":"Check"}))}));const ae=M.observable(""),$=M.observable(!1),j=M.observable(""),K=M.observable(""),h=M.observable(null),N=M.observable([]),V=M.observable(""),U=M.observable(!0),W=M.observable(""),oe=M.observable([]);r(M.effect(()=>{const e=V.value.trim().toLowerCase(),t=Date.now();oe.value=[...N.value].reverse().filter(s=>!e||String(s.key).toLowerCase().includes(e)||(s.tags||[]).some(i=>String(i).toLowerCase().includes(e))).map(s=>{const i=X(s.key);return{id:s.key,path:i.path,meta:[i.page?`as ${i.role}`:"not a page",(s.tags||[]).join(", ")].filter(Boolean).join(" \xB7 "),expires:$e(s.expiresAt,t)}})}));const ge={...n,saving:A,dirty:L,tabs:ne,problems:z,testTo:ae,testing:$,testResult:j,testTone:K,cacheQuery:V,cacheLoading:U,cacheError:W,cacheRows:oe,errorText:P,problemsText:M.computed(()=>z.value.length?"yes":""),noSmtp:M.computed(()=>!String(n.smtpHost.value||"").trim()),dirtyEmail:M.computed(()=>ne.value.email),seoLength:M.computed(()=>{const e=String(n.seoDescription.value||"").trim().length;return e?`${e} characters${e>160?" - search engines usually cut it off after about 150":""}`:""}),cssSize:M.computed(()=>{if(!f)return"Could not load content/custom.css - reload to try again. It will not be saved until it loads.";const e=new Blob([String(n.css.value||"")]).size/1024;return`${e.toFixed(1)} KB of 100 KB${e>100?" - too big to save":""}`}),cacheOn:M.computed(()=>h.value?.enabled===!0),cacheState:M.computed(()=>{const e=h.value;return e?e.enabled?`On (${e.driver})`:"Off":"Status unknown"}),cacheSize:M.computed(()=>{const e=h.value;return e?.enabled&&e.size!==null&&e.size!==void 0?`${e.size}${e.maxItems?` of ${e.maxItems}`:""} entries`:""}),cacheHits:M.computed(()=>{const e=h.value?.hitRate;return e==null?"":`${Math.round(e*100)}% served from the cache`}),cacheToggleText:M.computed(()=>h.value?.enabled?"Turn off":"Turn on"),cacheEmpty:M.computed(()=>V.value.trim()?"Nothing matches.":h.value?.enabled?"The cache is empty - pages are cached as visitors open them.":"The cache is off.")};async function Y(){if(A.peek())return;const e=se(),t=g.peek(),s=String(e.css)!==String(t.css);if(s&&!f){E.toast("The custom CSS did not load, so it cannot be saved - reload the screen first.",{type:"error"});return}A.value=!0,P.value="";const i=String(e.title).trim()!==String(t.title).trim();try{await G.settings.save(Ke(e,ee.peek(),{adminHomeReady:F.peek()})),s&&await w("/settings/custom-css",{method:"PUT",body:JSON.stringify({css:String(e.css)})});const c=await G.settings.get().catch(()=>null);if(!u())return;c&&(ee.value=c);const b={...e,smtpPass:""};n.smtpPass.value="",g.value=b;try{S.remove?S.remove(T):S.set(T,null)}catch{}document.dispatchEvent(new CustomEvent("dm:admin-home-changed")),i&&document.dispatchEvent(new CustomEvent("dm:sidebar-rebuild")),he(be),E.toast("Settings saved.",{type:"success"})}catch(c){P.value=c.message||"Could not save the settings.",E.toast("Settings not saved - see the message at the top.",{type:"error"})}finally{A.value=!1}}async function ke(){await E.confirm("Throw away your unsaved settings?")&&(re(g.peek()),P.value="")}function re(e){for(const[t,s]of Object.entries(e))n[t]&&(n[t].value=s);d&&d.getValue()!==String(n.css.peek())?d.setValue(String(n.css.peek())):!d&&v&&(v.value=String(n.css.peek()))}async function we(){if(!$.peek()){$.value=!0,K.value="",j.value="Sending\u2026";try{const e=await w("/settings/test-email",{method:"POST",body:JSON.stringify({to:ae.peek().trim()||void 0})});if(!u())return;j.value=e?.message||"Test email sent.",K.value="is-ok"}catch(e){if(!u())return;j.value=e.message||"Could not send the test email.",K.value="is-bad"}finally{$.value=!1}}}async function _(){U.value=!0;try{const[e,t]=await Promise.all([w("/cache/status").catch(()=>null),w("/cache/keys")]);if(!u())return;h.value=e,N.value=Array.isArray(t?.entries)?t.entries:[],W.value=""}catch(e){if(!u())return;W.value=`Could not read the cache: ${e.message||e}`}finally{U.value=!1}}async function Ee(){if(await E.confirm("Clear the whole response cache? The next visitor to each page renders it afresh.")){try{await w("/cache/clear",{method:"POST"}),E.toast("Cache cleared.",{type:"success"})}catch(e){E.toast(e.message||"Could not clear the cache.",{type:"error"})}u()&&await _()}}async function Se(){const e=h.peek()?.enabled===!0;if(!(e&&!await E.confirm("Turn the response cache off? Every visit will render its page afresh until it is turned back on. The choice is saved (config/cache.json)."))){try{h.value=await w("/cache/toggle",{method:"POST",body:JSON.stringify({enabled:!e})}),E.toast(e?"Cache turned off.":"Cache turned on.",{type:"success"}),he(be)}catch(t){E.toast(t.message||"Could not change the cache.",{type:"error"})}u()&&await _()}}const ie=e=>N.peek().find(t=>t.key===e);function Me(e){const t=ie(e);if(!t)return[];const s=X(t.key);return[{header:s.path},{label:"Open the page",icon:"external-link",disabled:!s.page,action:()=>window.open(s.path,"_blank","noopener")},{label:"Copy key",icon:"copy",action:async()=>{try{await navigator.clipboard.writeText(t.key),E.toast("Key copied.",{type:"success"})}catch{E.toast("Could not copy - your browser blocked the clipboard.",{type:"warning"})}}},...s.page?[{label:"Copy address",icon:"link",action:async()=>{try{await navigator.clipboard.writeText(new URL(s.path,location.origin).href),E.toast("Address copied.",{type:"success"})}catch{E.toast("Could not copy - your browser blocked the clipboard.",{type:"warning"})}}}]:[]]}a.querySelector(".stx-problems").innerHTML=Be;const x=a.querySelector(".stx-list");x.innerHTML=qe;const Ce=E.tabs(a.querySelector(".stx-tabs"),{tabSelector:".tab-item",panelSelector:".tab-panel"}),xe=M.applyBindings(ge,a,{methods:{save:Y,discard:ke,sendTest:we,refreshCache:_,clearCache:Ee,toggleCache:Se,corner:e=>{n.bcPosition.value=e}}});r(()=>xe.dispose()),r(Ae(a,{position:"bottom"}));const Te=e=>{const t=e.target.closest("[data-go]");if(!t)return;const s=Fe.indexOf(t.dataset.go);s>=0&&Ce.activate(s)};a.querySelector(".stx-problems").addEventListener("click",Te);const J=a.querySelector("#stx-admin-home");ze(J,je(n.adminHome.peek())).then(()=>{u()&&(J.value=n.adminHome.peek(),F.value=!0)}).catch(()=>{});const v=a.querySelector(".stx-css");v.value=String(n.css.peek());let d=null;if(!f)v.disabled=!0;else if(E.editor)try{d=E.editor(v,{mode:"code",language:"css",lineNumbers:!0,showToolbar:!1,minHeight:420,placeholder:"/* Add your custom CSS here */",characterCount:!0,onChange:e=>{n.css.value=e}})}catch{d=null}if(d)d._editorEl&&d._editorEl.addEventListener("keydown",e=>{if(!(e.ctrlKey||e.metaKey)||e.key!=="c"&&e.key!=="x")return;const t=d._editorEl;if(t.selectionStart!==t.selectionEnd||typeof t.value!="string")return;e.preventDefault();const s=t.value,i=t.selectionStart,c=s.lastIndexOf(`
+`,i-1)+1,b=s.indexOf(`
+`,i),Le=b===-1?s.slice(c):s.slice(c,b+1);navigator.clipboard?.writeText(Le).catch(()=>{}),e.key==="x"?(t.value=s.slice(0,c)+(b===-1?"":s.slice(b+1)),t.selectionStart=t.selectionEnd=c,t.dispatchEvent(new Event("input",{bubbles:!0})),E.toast("Line cut",{type:"info",duration:1500})):E.toast("Line copied",{type:"info",duration:1500})});else{const e=()=>{n.css.value=v.value};v.addEventListener("input",e),r(()=>v.removeEventListener("input",e))}r(()=>{try{d?.destroy?.()}catch{}});const Oe=E.contextMenu(x,{cursor:"glyph",match:".stx-row",inherit:!1,density:"compact",items:e=>Me(e.dataset.id)});r(()=>Oe?.destroy?.());const ce=e=>{const t=ie(e.dataset.id),s=t&&X(t.key);s?.page?window.open(s.path,"_blank","noopener"):Q(e)},le=e=>{const t=e.target.closest(".stx-row");if(!t)return;const s=e.target.closest(".stx-kebab");if(s){Q(s);return}ce(t)},ue=e=>{const t=e.target.closest(".stx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),Q(t)):e.key==="Enter"&&e.target===t&&ce(t))};x.addEventListener("click",le),x.addEventListener("keydown",ue),r(()=>{x.removeEventListener("click",le),x.removeEventListener("keydown",ue)}),fe(l,{id:"settings-view-site",icon:"external-link",title:"View site",onClick:()=>window.open("/","_blank","noopener")}),fe(l,{id:"settings-save",icon:"save",title:"Save (Ctrl+S)",onClick:()=>Y()});const de=e=>{!(e.ctrlKey||e.metaKey)||e.key!=="s"||(e.preventDefault(),e.stopImmediatePropagation(),Y())};document.addEventListener("keydown",de,!0),r(()=>document.removeEventListener("keydown",de,!0));const pe=()=>{if(L.peek())try{S.set(T,{form:Pe(se()),base:q.peek(),at:new Date().toISOString()})}catch{}},me=e=>{L.peek()&&(pe(),e.preventDefault(),e.returnValue="")};window.addEventListener("beforeunload",me),r(()=>window.removeEventListener("beforeunload",me)),y={dirty:()=>L.peek(),dispose(){O=!0,pe(),p.splice(0).reverse().forEach(e=>{try{e()}catch{}})}},I.scan(a),_();let k=null;try{k=S.get(T)}catch{}if(k?.form){try{S.remove?S.remove(T):S.set(T,null)}catch{}const e=k.base&&k.base!==q.peek(),t=k.at?` (${D(k.at).format("D MMM HH:mm")})`:"",s=e?`You left unsaved settings${t}, but the saved settings have changed since. Restore your version anyway?`:`You left unsaved settings${t}. Restore them?`;if(await E.confirm(s)&&u()){const i={...g.peek()};for(const[c,b]of Object.entries(k.form))c in i&&c!=="smtpPass"&&(i[c]=b);f||(i.css=g.peek().css),re(i),F.peek()&&(J.value=n.adminHome.peek())}}}};

package/admin/js/views/users.js

@@ -1,4 +1,13 @@
-import{api as m,getUser as A}from"../api.js";import{filterByProject as k,getProjectFromHash as M,renderProjectFilterNotice as j}from"../lib/project-context.js";import{keepTableIconsAlive as v}from"../lib/table-icons.js";export const usersView={templateUrl:"/admin/js/templates/users.html",async onMount(o){const u=A(),f=E.loader(o.get(0),{type:"dots"});let[s,y]=await Promise.all([m.users.list().catch(()=>[]),m.get("/collections/roles/entries?limit=100").catch(()=>({entries:[]}))]);f.destroy();const c=M();if(c){const r=s.length;s=k(s,c),j(o,{total:r,shown:s.length,slug:c,allHref:"#/users",noun:"users"})}const d=y.entries||[],p=r=>{T.create("#users-table",{pageSize:25,data:r,columns:[{key:"name",title:"Name"},{key:"email",title:"Email"},{key:"role",title:"Role",render:(e,t)=>{const a=d.find(n=>n.data?.name===e),l=a?.data?.badgeClass||"badge-secondary",g=a?.data?.label||e,b=`<span class="badge ${l}">${g}</span>`,i=Array.isArray(t.additionalRoles)?t.additionalRoles.filter(n=>n&&n!==e).map(n=>`<span class="badge badge-outline" title="Additional role" style="margin-left:.25rem;">${d.find(h=>h.data?.name===n)?.data?.label||n}</span>`).join(""):"";return b+i}},{key:"isActive",title:"Status",render:e=>e?'<span class="badge badge-success">Active</span>':'<span class="badge badge-secondary">Inactive</span>'},{key:"lastLogin",title:"Last login",render:e=>e?D(e).format("DD MMM YYYY HH:mm"):"Never"},{key:"actions",title:"Actions",render:(e,t)=>{const a=t.id===u?.id,l=Object.fromEntries(d.map(i=>[i.data?.name,i.data?.level??99]));return!((l[u?.role]??99)<(l[t.role]??99))&&!a?"":`
-                                <a href="#/users/edit/${t.id}" class="btn btn-sm btn-ghost" data-tooltip="Edit"><span data-icon="edit" data-icon-size="14"></span></a>
-                                ${a?"":`<button class="btn btn-sm btn-ghost btn-delete-user" data-id="${t.id}" data-name="${L(t.name)}" data-tooltip="Delete"><span data-icon="trash" data-icon-size="14"></span></button>`}
-                            `}}],emptyMessage:"No users found."}),Domma.icons.scan(),document.querySelectorAll("#users-table [data-tooltip]").forEach(e=>{E.tooltip(e,{content:e.getAttribute("data-tooltip"),position:"top"})})};p(s),v(o.get(0)),o.off("click",".btn-delete-user").on("click",".btn-delete-user",async function(){const r=$(this).data("id"),e=$(this).data("name");if(await E.confirm(`Delete user <strong>${e}</strong>? This cannot be undone.`))try{await m.delete(`/users/${r}`),E.toast("User deleted.",{type:"success"}),s=s.filter(a=>a.id!==r),p(s)}catch(a){E.toast(`Failed to delete: ${a.message}`,{type:"error"})}})}};function L(o){return String(o).replace(/"/g,"&quot;")}
+import{api as N,apiRequest as U,getUser as X}from"../api.js";import{addBannerAction as Z}from"../lib/plugin-chrome.js";import{helpPopovers as ee}from"../lib/help-popover.js";import{openMenuAt as L,settingsStore as te,sidebarCount as q,viewLifetime as se}from"../lib/tool-kit.js";import{filterByProject as oe}from"../lib/project-context.js";import{FILTERS as ae,SORTS as ne,arrangeUsers as ie,canManage as P,roleIndex as re,userRow as le}from"../lib/users-arrange.js";const Y=/^#\/(projects\/[^/?#]+\/)?users\/?(\?.*)?$/,B="#/users",ce=`
+<div class="usx-row" data-id="{{id}}" tabindex="0" data-bind-class="rowCls">
+    <span class="usx-avatar" aria-hidden="true">{{initials}}</span>
+    <span class="usx-main"><strong>{{name}}</strong><small>{{meta}}</small></span>
+    <span class="usx-chips">
+        <span class="usx-chip is-ok" data-bind-hidden="!self">You</span>
+        <span class="usx-chip" data-bind-class="roleTone">{{roleLabel}}</span>
+        <span class="usx-chip is-outline" data-bind-hidden="!extraRoles" title="Additional roles">+ {{extraRoles}}</span>
+        <span class="usx-chip" data-bind-hidden="!scope" title="Project access - sees only these (and Core)">{{scope}}</span>
+        <span class="usx-chip is-warn" data-bind-hidden="!inactive" title="Cannot sign in">Inactive</span>
+    </span>
+    <button type="button" class="usx-kebab" aria-label="Actions for {{name}}" title="Actions">\u22EE</button>
+</div>`,O=o=>String(o??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),F=te("users.list",o=>({filter:ae.includes(o?.filter)?o.filter:"all",sort:ne.includes(o?.sort)?o.sort:"name"})),n=se(Y);function de(){const o=location.hash.match(/^#\/projects\/([^/?#]+)\/users/);if(!o)return null;try{return decodeURIComponent(o[1])}catch{return o[1]}}export const usersView={templateUrl:"/admin/js/templates/users.html",async onMount(o){n.reset();const i=o.get(0).querySelector(".usx")||o.get(0),p=()=>Y.test(location.hash)&&i.isConnected,m=X(),r=de(),w=F.read(),l=M.observable([]),u=M.observable({}),x=M.observable(!0),h=M.observable(""),c=M.observable(w.filter),v=M.observable(w.sort),f=M.observable(""),k=M.observable(""),b=M.observable(0);n.add(M.effect(()=>{F.write({filter:c.value,sort:v.value})}));const R=M.observable([]);n.add(M.effect(()=>{const e=u.value,t=s=>{try{return D(s).fromNow?D(s).fromNow():D(s).format("D MMM YYYY HH:mm")}catch{return s}};R.value=ie(l.value,{filter:c.value,role:f.value,query:k.value,sort:v.value}).map(s=>le(s,{roles:e,me:m,when:t}))}));const H=M.computed(()=>{const e=l.value,t=e.filter(s=>s.isActive===!1).length;return{all:e.length,active:e.length-t,inactive:t}}),K=M.computed(()=>l.value.length?"Nobody matches.":"No users yet - New user in the banner adds one."),_=M.computed(()=>r?`Showing only users in the project "${r}"${b.value?` - ${b.value} more elsewhere`:""}.`:""),$=e=>l.peek().find(t=>t.id===e);async function y(){try{const[e,t]=await Promise.all([N.users.list(),U("/collections/roles/entries?limit=100",{method:"GET"}).catch(()=>({entries:[]}))]);if(!p())return;let s=Array.isArray(e)?e:[];if(r){const a=oe(s,r);b.value=s.length-a.length,s=a}u.value=re(t?.entries||[]),G(),l.value=s,h.value=""}catch(e){h.value=`Could not load the users: ${e.message||e}`}finally{x.value=!1}}function G(){const e=i.querySelector('.usx-select[aria-label="Role"]');if(!e)return;const t=f.peek();e.querySelectorAll('option:not([value=""])').forEach(s=>s.remove()),Object.entries(u.peek()).sort((s,a)=>s[1].level-a[1].level).forEach(([s,a])=>{const g=document.createElement("option");g.value=s,g.textContent=a.label,e.appendChild(g)}),e.value=t}const A=e=>{location.hash=`#/users/edit/${encodeURIComponent(e)}`};async function C(e,t){if(!(!t&&!await E.confirm(`Make ${O(e.name||e.email)} inactive? They will not be able to sign in until the account is made active again. Their work stays.`)))try{await U(`/users/${encodeURIComponent(e.id)}`,{method:"PUT",body:JSON.stringify({isActive:t})}),E.toast(`${e.name||e.email} is ${t?"active":"inactive"}.`,{type:"success"}),q(B),p()&&await y()}catch(s){E.toast(`Not changed: ${s.message||s}`,{type:"error"})}}async function J(e){if(await E.confirm(`Delete ${O(e.name||e.email)}? They lose access at once and this cannot be undone.`))try{await N.delete(`/users/${encodeURIComponent(e.id)}`),E.toast(`Deleted ${e.name||e.email}.`,{type:"success"}),q(B),p()&&await y()}catch(t){E.toast(`Not deleted: ${t.message||t}`,{type:"error"})}}async function V(e){try{await navigator.clipboard.writeText(e.email||""),E.toast("Email copied.",{type:"success"})}catch{E.toast(e.email||"No email",{type:"info",duration:6e3})}}function W(e){const t=$(e);if(!t)return[];const s=P(m,t,u.peek()),a=s.self?"not on your own account":"your role is not senior to theirs";return[{header:t.name||t.email},{label:s.self?"Edit my account":s.edit?"Edit":`Edit - ${a}`,icon:"edit",disabled:!s.edit,action:()=>A(t.id)},{label:"Copy email",icon:"copy",disabled:!t.email,action:()=>V(t)},{type:"divider"},t.isActive===!1?{label:s.other?"Make active":`Make active - ${a}`,icon:"play",disabled:!s.other,action:()=>C(t,!0)}:{label:s.other?"Make inactive\u2026":`Make inactive - ${a}`,icon:"pause",disabled:!s.other,action:()=>C(t,!1)},{label:s.other?"Delete\u2026":`Delete - ${a}`,icon:"trash",danger:s.other,disabled:!s.other,action:()=>J(t)}]}const d=i.querySelector(".usx-list");d.innerHTML=ce;const z=M.applyBindings({users:l,loading:x,loadError:h,filter:c,sort:v,role:f,query:k,rows:R,counts:H,emptyText:K,projectNote:_},i,{methods:{showAll:()=>{c.value="all"},showActive:()=>{c.value="active"},showInactive:()=>{c.value="inactive"}}});n.add(()=>z.dispose()),n.add(ee(i,{position:"bottom"}));const Q=E.contextMenu(d,{cursor:"glyph",match:".usx-row",inherit:!1,density:"compact",items:e=>W(e.dataset.id)});n.add(()=>Q?.destroy?.());const S=e=>{const t=$(e);t&&(P(m,t,u.peek()).edit?A(e):E.toast("Your role is not senior to theirs, so you cannot edit this account.",{type:"info"}))},T=e=>{const t=e.target.closest(".usx-row");if(!t)return;const s=e.target.closest(".usx-kebab");if(s){L(s);return}S(t.dataset.id)},j=e=>{const t=e.target.closest(".usx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),L(t)):e.key==="Enter"&&e.target===t&&S(t.dataset.id))};d.addEventListener("click",T),d.addEventListener("keydown",j),n.add(()=>{d.removeEventListener("click",T),d.removeEventListener("keydown",j)}),Z(o,{id:"users-new",icon:"plus",title:"New user",onClick:()=>{location.hash=r?`#/users/new?project=${encodeURIComponent(r)}`:"#/users/new"}}),I.scan(i),await y()}};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",