domma-cms 0.55.1 → 0.69.3

package/admin/js/views/contacts.js

@@ -0,0 +1,174 @@
+import{apiRequest as Ue}from"../api.js";import{addBannerAction as Fe}from"../lib/plugin-chrome.js";import{helpPopovers as J}from"../lib/help-popover.js";import{onceClosed as Z,openMenuAt as ee,settingsStore as He,viewLifetime as ze}from"../lib/tool-kit.js";import{arrangeContacts as Ke,countContacts as We,DEFAULT_SETTINGS as ve,duplicateBody as Ye,initials as Je,normaliseSettings as ye,primaryEmail as he,primaryPhone as ge,withGroup as te}from"../lib/contacts-arrange.js";const ke=He("contacts.settings",ye),h=(x,r="GET",m)=>Ue(x,{method:r,...m!==void 0?{body:JSON.stringify(m)}:{}}),we={company:"Company",jobTitle:"Job title",website:"Website",billingEmail:"Billing email",vatNumber:"VAT number",companyNumber:"Company number",reference:"Their reference",paymentTerms:"Payment terms",currency:"Preferred currency",accountName:"Account name",bankName:"Bank",sortCode:"Sort code",accountNumber:"Account number",iban:"IBAN",bic:"BIC / SWIFT"},T={addresses:{title:"Addresses",add:"Add address",empty:"No address yet.",help:'Tick "Use for invoices" on the one an invoice should be addressed to.',columns:[{key:"label",placeholder:"Label (Office, Home\u2026)"},{key:"line1",placeholder:"Address line 1",wide:!0},{key:"line2",placeholder:"Address line 2",wide:!0},{key:"city",placeholder:"City"},{key:"region",placeholder:"County / Region"},{key:"postcode",placeholder:"Postcode"},{key:"country",placeholder:"Country"},{key:"isBilling",label:"Use for invoices",check:!0}]},emails:{title:"More email addresses",add:"Add email",empty:"None.",help:"Besides the main email above. Search finds a contact by these too.",columns:[{key:"label",placeholder:"Label (Accounts, Personal\u2026)"},{key:"address",placeholder:"name@example.com",wide:!0}]},phones:{title:"More phone numbers",add:"Add phone",empty:"None.",help:"Besides the main phone above. Call in the menu uses the main one, or the first of these.",columns:[{key:"label",placeholder:"Label (Mobile, Office\u2026)"},{key:"number",placeholder:"+44 \u2026",wide:!0}]}},_e=`
+<div class="ct-row{{selClass}}" data-id="{{id}}" tabindex="0">
+    <input type="checkbox" class="ct-select" aria-label="Select {{name}}" data-bind-checked="selected">
+    <button type="button" class="ct-fav{{favClass}}" title="{{favTitle}}" aria-label="{{favTitle}}">\u2605</button>
+    <span class="ct-name">
+        <span class="ct-avatar" aria-hidden="true">{{initials}}</span>
+        <span class="ct-name-text"><strong>{{name}}</strong><small>{{sub}}</small></span>
+    </span>
+    <span class="ct-col ct-company" title="{{company}}">{{company}}</span>
+    <span class="ct-col ct-email" title="{{email}}">{{email}}</span>
+    <span class="ct-col ct-phone">{{phone}}</span>
+    <span class="ct-col ct-groups"><span class="ct-groups-text" title="{{groupsText}}">{{groupsText}}</span></span>
+    <button type="button" class="ct-kebab" aria-label="Actions for {{name}}" title="Actions">\u22EE</button>
+</div>`,Ve='<button type="button" class="ct-chip{{cls}}" data-chip="{{key}}" title="{{title}}">{{label}} <b>{{count}}</b></button>',Qe='<button type="button" class="ct-chip{{cls}}" data-group="{{name}}" aria-pressed="{{on}}">{{name}}</button>',Xe=`
+<div class="ct-group-row" data-group="{{name}}">
+    <span>{{name}}</span><small>{{countText}}</small>
+    <button type="button" class="btn btn-sm btn-ghost" data-act="show">Show</button>
+    <button type="button" class="btn btn-sm btn-ghost" data-act="rename">Rename</button>
+    <button type="button" class="btn btn-sm btn-ghost text-danger" data-act="delete">Delete</button>
+</div>`;function ae(x){const r=document.createElement("template");return r.innerHTML=x.trim(),r.content.firstElementChild}const A=(x,r,m=`${r}s`)=>`${x} ${x===1?r:m}`,k=ze(/^#\/contacts\b/);export const contactsView={templateUrl:"/admin/js/templates/contacts.html",async onMount(x){k.reset();const r=x.get(0),m=M.observable(ke.read()),p=M.observable([]),b=M.observable([]),K=M.observable(!0),oe=M.observable(""),j=M.observable({kind:"all"}),i=M.observable(new Set),se=M.observable(!1),ne=M.computed(()=>We(p.value,b.value)),Ee=M.computed(()=>Ke(p.value,{query:oe.value,filter:j.value,sort:m.value.sort,favouritesFirst:m.value.favouritesFirst})),S=M.observable([]);k.add(M.effect(()=>{const t=i.value;S.value=Ee.value.map(e=>({id:e.id,name:e.name||"Unnamed",sub:[e.jobTitle,e.company&&!m.value.showCompany?e.company:""].filter(Boolean).join(" \xB7 "),initials:Je(e.name),company:e.company||"",email:he(e),phone:ge(e),groupsText:(e.groups||[]).join(", "),favClass:e.favourite===!0?" is-on":"",favTitle:e.favourite===!0?"Starred - click to unstar":"Star this contact",selected:t.has(e.id),selClass:t.has(e.id)?" is-selected":""}))}));const ce=M.observable([]);k.add(M.effect(()=>{const t=ne.value,e=j.value;ce.value=[{key:"all",label:"All",count:t.all,title:"Everyone",cls:e.kind==="all"?" is-active":""},{key:"fav",label:"\u2605 Starred",count:t.fav,title:"Only starred contacts",cls:e.kind==="fav"?" is-active":""},...b.value.map(a=>({key:`group:${a}`,label:a,count:t.groups[a]??0,title:`Only the ${a} group`,cls:e.kind==="group"&&e.value===a?" is-active":""}))]})),k.add(M.effect(()=>{const t=j.value;t.kind==="group"&&!b.value.includes(t.value)&&(j.value={kind:"all"})}));const Se={rows:S,chips:ce,loading:K,query:oe,searchFocus:se,hasRows:M.computed(()=>S.value.length>0),isEmpty:M.computed(()=>!K.value&&S.value.length===0),emptyText:M.computed(()=>p.value.length?"No contacts match. Clear the search or pick All.":"No contacts yet. New contact adds one, or \u22EE > Import brings a file in."),countText:M.computed(()=>{if(K.value)return"";const t=S.value.length,e=p.value.length;return t===e?A(e,"contact"):`${t} of ${e}`}),hasSelection:M.computed(()=>i.value.size>0),selectionText:M.computed(()=>`${A(i.value.size,"contact")} selected`),allSelected:M.computed(()=>S.value.length>0&&S.value.every(t=>i.value.has(t.id)))};k.add(M.effect(()=>ke.write(m.value)));const $e=(t,e)=>{m.value=ye({...m.peek(),[t]:e})},N=t=>p.peek().find(e=>e.id===t),Me=t=>{p.value=p.peek().map(e=>e.id===t.id?t:e)};async function W(){K.value=!0;try{const[t,e]=await Promise.all([h("/contacts/contacts"),h("/contacts/groups")]);p.value=Array.isArray(t)?t:t?.data??[],b.value=Array.isArray(e)?e:[]}catch{E.toast("Failed to load contacts.",{type:"error"})}finally{K.value=!1}}async function Ce(){try{b.value=await h("/contacts/groups")}catch{}}async function q(t,e,a){try{return Me(await h(`/contacts/contacts/${t}`,"PUT",e)),a&&E.toast(a,{type:"success"}),!0}catch(s){return E.toast(s?.message||"Failed to update the contact.",{type:"error"}),!1}}async function le(t){const e=N(t);if(m.peek().confirmDelete&&!await E.confirm("Delete this contact? This cannot be undone."))return!1;try{await h(`/contacts/contacts/${t}`,"DELETE"),p.value=p.peek().filter(s=>s.id!==t);const a=new Set(i.peek());return a.delete(t)&&(i.value=a),E.toast(`${e?.name?"Contact":"It"} deleted.`,{type:"success"}),!0}catch{return E.toast("Failed to delete the contact.",{type:"error"}),!1}}async function xe(t){const e=N(t);if(e)try{const a=await h("/contacts/contacts","POST",Ye(e));p.value=[...p.peek(),a],E.toast("Copied - the copy is open to edit.",{type:"success"}),F(a.id)}catch{E.toast("Failed to duplicate the contact.",{type:"error"})}}async function U(t){if(b.peek().includes(t))return!0;try{return await h("/contacts/groups","POST",{name:t}),await Ce(),!0}catch(e){return E.toast(e?.message||"Could not create the group.",{type:"error"}),!1}}async function Te(t,e,a){const s=N(t);s&&(a&&!await U(e)||await q(t,{groups:te(s.groups,e,a)},a?`Added to ${e}.`:`Removed from ${e}.`))}async function re(t){const e=String(await E.prompt("New group name:")??"").trim();if(!(!e||!await U(e))){for(const a of t){const s=N(a);s&&!(s.groups||[]).includes(e)&&await q(a,{groups:te(s.groups,e,!0)})}E.toast(`Filed in ${e}.`,{type:"success"})}}async function ie(t,e){try{await navigator.clipboard.writeText(t),E.toast(`${e} copied.`,{type:"success"})}catch{E.toast("The browser would not allow copying.",{type:"error"})}}async function Ae(){const t=[...i.peek()];if(t.length&&await E.confirm(`Delete ${A(t.length,"contact")}? This cannot be undone.`))try{const e=await h("/contacts/contacts/bulk","DELETE",{ids:t});p.value=p.peek().filter(a=>!t.includes(a.id)),i.value=new Set,E.toast(`${A(e?.deleted??t.length,"contact")} deleted.`,{type:"success"})}catch{E.toast("Bulk delete failed.",{type:"error"})}}async function Ne(t){const e=[...i.peek()];if(!(!e.length||!await U(t))){for(const a of e){const s=N(a);s&&!(s.groups||[]).includes(t)&&await q(a,{groups:te(s.groups,t,!0)})}E.toast(`${A(e.length,"contact")} filed in ${t}.`,{type:"success"})}}const de=t=>{const e=new Set(i.peek());e.delete(t)||e.add(t),i.value=e};async function Le(){try{const t=await h("/contacts/export"),e=new Blob([JSON.stringify(t,null,2)],{type:"application/json"}),a=URL.createObjectURL(e),s=document.createElement("a");s.href=a,s.download="contacts.json",document.body.appendChild(s),s.click(),s.remove(),setTimeout(()=>URL.revokeObjectURL(a),1e3),E.toast("Contacts exported.",{type:"success"})}catch{E.toast("Export failed.",{type:"error"})}}const Y=r.querySelector(".ct-import-file");Y.addEventListener("change",async()=>{const t=Y.files?.[0];if(Y.value="",!!t)try{const e=JSON.parse(await t.text()),a=Array.isArray(e)?e:e.contacts;if(!Array.isArray(a))throw new Error("Invalid format");const s=await h("/contacts/import","POST",{contacts:a});E.toast(`Imported ${A(s?.imported??0,"contact")}.`,{type:"success"}),await W()}catch{E.toast("Import failed. The file must be a contacts JSON export.",{type:"error"})}});function F(t){const e=t?N(t):null;if(t&&!e)return;const a=E.slideover({title:e?"Edit contact":"New contact",size:"lg",position:"right"}),s=(o,c,{type:L="text",mono:f=!1,placeholder:y="",wide:w=!1}={})=>`
+                <div${w?' class="ct-wide"':""}>
+                    <label class="form-label" for="ct-f-${o}">${c}</label>
+                    <input id="ct-f-${o}" type="${L}" class="form-input${f?" font-mono":""}" placeholder="${y}" data-model="${o}.value">
+                </div>`,u=o=>`
+                <div class="ct-repeater" data-repeater="${o}">
+                    <div class="ct-subhead">
+                        <strong>${T[o].title} <span data-help="${T[o].help}"></span></strong>
+                        <button type="button" class="btn btn-sm btn-ghost" data-add="${o}">
+                            <span data-icon="plus" data-icon-size="13"></span> ${T[o].add}</button>
+                    </div>
+                    <div class="ct-repeater-list"></div>
+                    <p class="text-muted text-sm contacts-empty-row">${T[o].empty}</p>
+                </div>`,l=ae(`
+                <div class="ct-panel">
+                    <div class="ct-grid">
+                        <div class="ct-wide">
+                            <label class="form-label" for="ct-f-name">Name <span class="text-danger">*</span></label>
+                            <input id="ct-f-name" type="text" class="form-input" placeholder="Full name" data-model="name.value">
+                        </div>
+                        ${s("email","Email",{type:"email",placeholder:"email@example.com"})}
+                        ${s("phone","Phone",{placeholder:"+44 \u2026"})}
+                        <div class="ct-wide">
+                            <label class="form-label" for="ct-f-notes">Notes</label>
+                            <textarea id="ct-f-notes" class="form-input" rows="3" placeholder="Optional notes\u2026" data-model="notes.value"></textarea>
+                        </div>
+                    </div>
+                    <div class="ct-setting-row">
+                        <label class="form-label" for="ct-f-fav" style="margin:0">Starred
+                            <span data-help="Starred contacts sit at the top of the list (unless switched off in settings) and have their own chip."></span>
+                        </label>
+                        <input id="ct-f-fav" type="checkbox" class="form-switch" data-model="favourite.value">
+                    </div>
+                    <div>
+                        <div class="ct-subhead">
+                            <strong>Groups <span data-help="Click a group to file this contact in it, again to take it out. A contact can be in several."></span></strong>
+                            <button type="button" class="btn btn-sm btn-ghost" data-on-click="newGroup">
+                                <span data-icon="folder-plus" data-icon-size="13"></span> New group</button>
+                        </div>
+                        <div class="ct-pick" data-each="pick.value key=name"></div>
+                        <p class="text-muted text-sm" data-if="noGroups.value" style="margin:0">No groups yet - New group makes one.</p>
+                    </div>
+
+                    <details class="ct-section">
+                        <summary>Company, bank &amp; invoicing <span class="ct-section-sum" data-bind-text="billingSummary.value"></span></summary>
+                        <div class="ct-section-body">
+                            <p class="ct-panel-meta" style="margin:0">Everything an invoice needs. The Invoice plugin reads these when you bill this contact.</p>
+                            <div class="ct-grid">
+                                ${s("company","Company",{placeholder:"Acme Ltd"})}
+                                ${s("jobTitle","Job title",{placeholder:"Finance Manager"})}
+                                ${s("website","Website",{placeholder:"acme.co.uk"})}
+                                ${s("billingEmail","Billing email",{type:"email",placeholder:"accounts@acme.co.uk"})}
+                                ${s("vatNumber","VAT number",{mono:!0,placeholder:"GB123456789"})}
+                                ${s("companyNumber","Company number",{mono:!0,placeholder:"01234567"})}
+                                ${s("reference","Their reference",{placeholder:"PO-4471"})}
+                                <div>
+                                    <label class="form-label" for="ct-f-paymentTerms">Payment terms (days)
+                                        <span data-help="Days they have to pay. Empty uses the invoice default."></span></label>
+                                    <input id="ct-f-paymentTerms" type="number" min="0" max="365" class="form-input" placeholder="30" data-model="paymentTerms.value">
+                                </div>
+                                <div>
+                                    <label class="form-label" for="ct-f-currency">Preferred currency</label>
+                                    <select id="ct-f-currency" class="form-input" data-model="currency.value">
+                                        <option value="">Use the invoice default</option>
+                                        <option value="GBP">GBP - British Pound</option>
+                                        <option value="EUR">EUR - Euro</option>
+                                        <option value="USD">USD - US Dollar</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="ct-subhead"><strong>Bank details <span data-help="Printed on an invoice so it can be paid."></span></strong></div>
+                                <div class="ct-grid">
+                                    ${s("accountName","Account name",{placeholder:"Acme Ltd"})}
+                                    ${s("bankName","Bank",{placeholder:"Barclays"})}
+                                    ${s("sortCode","Sort code",{mono:!0,placeholder:"20-00-00"})}
+                                    ${s("accountNumber","Account number",{mono:!0,placeholder:"12345678"})}
+                                    ${s("iban","IBAN",{mono:!0,placeholder:"GB29 NWBK 6016 1331 9268 19"})}
+                                    ${s("bic","BIC / SWIFT",{mono:!0,placeholder:"NWBKGB2L"})}
+                                </div>
+                            </div>
+                            ${u("addresses")}
+                        </div>
+                    </details>
+
+                    <details class="ct-section">
+                        <summary>More emails &amp; phones <span class="ct-section-sum" data-bind-text="extraSummary.value"></span></summary>
+                        <div class="ct-section-body">
+                            ${u("emails")}
+                            ${u("phones")}
+                        </div>
+                    </details>
+
+                    <small class="ct-panel-meta" data-bind-text="meta"></small>
+                    <div class="ct-panel-actions">
+                        <button type="button" class="btn btn-sm btn-ghost text-danger" data-on-click="del" data-if="isEdit">
+                            <span data-icon="trash" data-icon-size="13"></span> Delete
+                        </button>
+                        <span class="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="cannotSave.value">
+                            <span data-icon="save" data-icon-size="13"></span> Save</button>
+                    </div>
+                </div>`),$=o=>o==null?"":String(o),n={name:M.observable($(e?.name)),email:M.observable($(e?.email)),phone:M.observable($(e?.phone)),notes:M.observable($(e?.notes)),favourite:M.observable(e?.favourite===!0),chosen:M.observable(Array.isArray(e?.groups)?[...e.groups]:[]),isEdit:!!e,meta:e?`Added ${e.createdAt?D(e.createdAt).format("D MMM YYYY"):"earlier"}${e.updatedAt?`, last changed ${D(e.updatedAt).format("D MMM YYYY HH:mm")}`:""}. Ctrl+Enter saves.`:"Ctrl+Enter saves."};for(const o of Object.keys(we))n[o]=M.observable($(e?.[o]));const d=Object.fromEntries(Object.keys(T).map(o=>[o,M.observable(0)]));n.pick=M.observable([]);const v=M.effect(()=>{const o=n.chosen.value;n.pick.value=[...new Set([...b.value,...o])].map(c=>({name:c,on:String(o.includes(c)),cls:o.includes(c)?" is-active":""}))});n.noGroups=M.computed(()=>n.pick.value.length===0),n.cannotSave=M.computed(()=>!n.name.value.trim()),n.billingSummary=M.computed(()=>{const o=[];n.company.value.trim()&&o.push(n.company.value.trim()),n.vatNumber.value.trim()&&o.push("VAT"),(n.sortCode.value.trim()||n.iban.value.trim())&&o.push("bank details");const c=d.addresses.value;return c&&o.push(A(c,"address","addresses")),o.join(" \xB7 ")}),n.extraSummary=M.computed(()=>{const o=d.emails.value+d.phones.value;return o?A(o,"more"):""});function C(o,c){const L=T[o],f=l.querySelector(`[data-repeater="${o}"]`),y=f.querySelector(".ct-repeater-list");y.replaceChildren(),f.querySelector(".contacts-empty-row").style.display=c.length?"none":"",c.forEach((w,B)=>{const P=document.createElement("div");P.className="contacts-row";for(const g of L.columns){if(g.check){const Q=document.createElement("label");Q.className="form-check contacts-row-check";const G=document.createElement("input");G.type="checkbox",G.className="form-check-input",G.dataset.key=g.key,G.checked=w[g.key]===!0,G.addEventListener("change",()=>{G.checked&&y.querySelectorAll(`input[data-key="${g.key}"]`).forEach(be=>{be!==G&&(be.checked=!1)})});const X=document.createElement("span");X.className="form-check-label",X.textContent=g.label,Q.append(G,X),P.appendChild(Q);continue}const z=document.createElement("input");z.type="text",z.className="form-input"+(g.wide?" contacts-row-wide":""),z.dataset.key=g.key,z.placeholder=g.placeholder??"",z.value=w[g.key]??"",P.appendChild(z)}const H=document.createElement("button");H.type="button",H.className="btn btn-sm btn-ghost contacts-row-remove",H.title="Remove",H.textContent="\xD7",H.addEventListener("click",()=>{const g=R(o,{keepBlank:!0});g.splice(B,1),C(o,g)}),P.appendChild(H),y.appendChild(P)}),d[o].value=c.length}function R(o,{keepBlank:c=!1}={}){const L=T[o],f=[...l.querySelectorAll(`[data-repeater="${o}"] .contacts-row`)].map(y=>{const w={};for(const B of L.columns){const P=y.querySelector(`[data-key="${B.key}"]`);w[B.key]=B.check?P?.checked===!0:(P?.value??"").trim()}return w});return c?f:f.filter(y=>Object.entries(y).some(([w,B])=>w!=="label"&&B!==""&&B!==!1))}l.addEventListener("click",o=>{const c=o.target.closest("[data-add]");if(c){const f=c.dataset.add;C(f,[...R(f,{keepBlank:!0}),{}]),l.querySelector(`[data-repeater="${f}"] .contacts-row:last-child input`)?.focus();return}const L=o.target.closest(".ct-pick [data-group]");if(L){const f=L.dataset.group,y=n.chosen.peek();n.chosen.value=y.includes(f)?y.filter(w=>w!==f):[...y,f]}});const _=()=>{const o={name:n.name.peek().trim(),email:n.email.peek().trim(),phone:n.phone.peek().trim(),notes:n.notes.peek().trim(),favourite:n.favourite.peek()===!0,groups:[...n.chosen.peek()]};for(const c of Object.keys(we))o[c]=String(n[c].peek()??"").trim();for(const c of Object.keys(T))o[c]=R(c);return o};let V=!1;const fe=async()=>{if(!(V||n.cannotSave.peek())){V=!0;try{const o=_();for(const c of o.groups)b.peek().includes(c)||await U(c);if(e){if(!await q(e.id,o,"Contact saved."))return}else{const c=await h("/contacts/contacts","POST",o);p.value=[...p.peek(),c],E.toast("Contact added.",{type:"success"})}a.close()}catch(o){E.toast(o?.message||"Failed to save the contact.",{type:"error"})}finally{V=!1}}};a.element.appendChild(l);const je=J(l);for(const o of Object.keys(T))C(o,Array.isArray(e?.[o])?e[o]:[]);l.querySelector(".ct-pick").innerHTML=Qe;const qe=M.applyBindings(n,l,{methods:{save:fe,cancel:()=>a.close(),del:async()=>{e&&await le(e.id)&&a.close()},async newGroup(){const o=String(await E.prompt("New group name:")??"").trim();!o||!await U(o)||n.chosen.peek().includes(o)||(n.chosen.value=[...n.chosen.peek(),o])}}});n.billingSummary.peek()&&(l.querySelector(".ct-section").open=!0),l.addEventListener("keydown",o=>{(o.ctrlKey||o.metaKey)&&o.key==="Enter"&&(o.preventDefault(),fe())}),I.scan(l),Z(a,()=>{v?.(),qe.dispose(),je()}),a.open(),setTimeout(()=>l.querySelector("#ct-f-name")?.focus(),60)}function Be(){const t=E.slideover({title:"Contacts settings",size:"sm",position:"right"}),e=(n,d,v)=>`
+                <div class="ct-setting-row">
+                    <label class="form-label" for="ct-set-${n}" style="margin:0">${d}${v?` <span data-help="${v}"></span>`:""}</label>
+                    <input id="ct-set-${n}" type="checkbox" class="form-switch" data-model="${n}.value">
+                </div>`,a=ae(`
+                <div class="ct-panel">
+                    <div>
+                        <label class="form-label" for="ct-set-sort">Sort by</label>
+                        <select id="ct-set-sort" class="form-input" data-model="sort.value">
+                            <option value="name">Name</option>
+                            <option value="company">Company</option>
+                            <option value="added">Newest added first</option>
+                            <option value="updated">Recently changed first</option>
+                        </select>
+                    </div>
+                    ${e("favouritesFirst","Starred first","Starred contacts sit at the top, whatever the sort.")}
+                    <div>
+                        <label class="form-label" for="ct-set-density">Rows
+                            <span data-help="Compact fits more on the screen: smaller avatars and no job title line."></span></label>
+                        <select id="ct-set-density" class="form-input" data-model="density.value">
+                            <option value="comfortable">Comfortable</option>
+                            <option value="compact">Compact</option>
+                        </select>
+                    </div>
+                    <div>
+                        <div class="form-label">Columns
+                            <span data-help="Name is always shown. On a narrow screen only the name shows; the rest is a click away."></span></div>
+                        ${e("showCompany","Company")}
+                        ${e("showEmail","Email")}
+                        ${e("showPhone","Phone")}
+                        ${e("showGroups","Groups")}
+                    </div>
+                    ${e("confirmDelete","Confirm before deleting","Off deletes a single contact straight away - there is no undo. Deleting several always asks.")}
+                    <small class="ct-panel-meta">Saved in this browser as you change them.</small>
+                    <div class="ct-panel-actions">
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="reset">Reset to defaults</button>
+                        <span class="spacer"></span>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="done">Done</button>
+                    </div>
+                </div>`),s=n=>M.computed({read:()=>m.value[n],write:d=>$e(n,d)}),u=Object.fromEntries(Object.keys(ve).map(n=>[n,s(n)]));t.element.appendChild(a);const l=J(a),$=M.applyBindings(u,a,{methods:{done:()=>t.close(),reset:()=>{m.value={...ve}}}});Z(t,()=>{$.dispose(),l()}),t.open()}function Pe(){const t=E.slideover({title:"Groups",size:"sm",position:"right"}),e=ae(`
+                <div class="ct-panel">
+                    <form class="ct-add-group" data-on-submit="add">
+                        <input type="text" class="form-input" placeholder="New group name\u2026" aria-label="New group name" data-model="draft.value">
+                        <button type="submit" class="btn btn-sm btn-primary" data-bind-disabled="cannotAdd.value">Add</button>
+                    </form>
+                    <p class="ct-panel-meta" style="margin:0">Renaming a group renames it on every contact in it; deleting one takes it off them.
+                        <span data-help="Contacts themselves are never deleted from here."></span></p>
+                    <div class="ct-groups-list" data-if="hasGroups.value">
+                        <div class="ct-groups-rows" data-each="list.value key=name"></div>
+                    </div>
+                    <p class="text-muted" data-if="noGroups.value">No groups yet.</p>
+                </div>`),a=M.observable(""),s={draft:a,list:M.observable([])},u=M.effect(()=>{const d=ne.value.groups;s.list.value=b.value.map(v=>({name:v,countText:A(d[v]??0,"contact")}))});s.hasGroups=M.computed(()=>s.list.value.length>0),s.noGroups=M.computed(()=>s.list.value.length===0),s.cannotAdd=M.computed(()=>!a.value.trim());async function l(){const d=a.peek().trim();d&&await U(d)&&(a.value="",E.toast("Group added.",{type:"success"}))}e.addEventListener("click",async d=>{const v=d.target.closest("[data-act]"),C=v?.closest("[data-group]")?.dataset.group;if(!(!v||!C)){if(v.dataset.act==="show")j.value={kind:"group",value:C},t.close();else if(v.dataset.act==="rename"){const R=String(await E.prompt("Rename the group to:",{inputValue:C})??"").trim();if(!R||R===C)return;try{await h(`/contacts/groups/${encodeURIComponent(C)}`,"PUT",{newName:R}),await W(),E.toast("Group renamed.",{type:"success"})}catch(_){E.toast(_?.message||"Failed to rename the group.",{type:"error"})}}else if(v.dataset.act==="delete"){if(!await E.confirm("Delete this group? Its contacts stay - they are just no longer in it."))return;try{await h(`/contacts/groups/${encodeURIComponent(C)}`,"DELETE"),await W(),E.toast("Group deleted.",{type:"success"})}catch{E.toast("Failed to delete the group.",{type:"error"})}}}}),t.element.appendChild(e);const $=J(e);e.querySelector(".ct-groups-rows").innerHTML=Xe;const n=M.applyBindings(s,e,{methods:{add:()=>(l(),!1)}});Z(t,()=>{u?.(),n.dispose(),$()}),t.open()}Fe(x,{id:"contacts-settings",icon:"settings",title:"Contacts settings",onClick:Be}),r.querySelector(".ct-rows").innerHTML=_e,r.querySelector(".ct-chips").innerHTML=Ve;const O=r.querySelector(".ct-list"),pe=r.querySelector(".ct-bar"),Ge=r.querySelector(".ct-chips-row"),ue=r.querySelector(".ct-bulk");k.add(J(r,{position:"bottom"}));const Oe=M.applyBindings(Se,r,{methods:{create:()=>F(null),bulkDelete:Ae,clearSelection:()=>{i.value=new Set}}});k.add(()=>Oe.dispose()),k.add(M.effect(()=>{const t=m.value;O.classList.toggle("is-compact",t.density==="compact");const e={company:!t.showCompany,email:!t.showEmail,phone:!t.showPhone,groups:!t.showGroups};for(const[s,u]of Object.entries(e))O.classList.toggle(`hide-${s}`,u);const a=["1.1rem","1.5rem","minmax(10rem, 1.4fr)"];e.company||a.push("minmax(0, 1fr)"),e.email||a.push("minmax(0, 1.2fr)"),e.phone||a.push("minmax(0, .9fr)"),e.groups||a.push("minmax(0, 1fr)"),a.push("1.75rem"),O.style.setProperty("--ct-cols",a.join(" "))}));const De=E.contextMenu(O,{match:".ct-row",inherit:!1,density:"compact",items:t=>{const e=t.dataset.id,a=N(e);if(!a)return[];const s=he(a),u=ge(a),l=a.groups||[];return(n=>n.filter(d=>d.visible!==!1))([{label:"Edit\u2026",icon:"edit",action:()=>F(e)},{type:"divider"},{label:`Email ${s}`,icon:"mail",visible:!!s,action:()=>{location.href=`mailto:${encodeURIComponent(s).replace(/%40/g,"@")}`}},{label:`Call ${u}`,icon:"phone",visible:!!u,action:()=>{location.href=`tel:${u.replace(/[^\d+]/g,"")}`}},{label:"Copy email",icon:"copy",visible:!!s,action:()=>ie(s,"Email")},{label:"Copy phone",icon:"copy",visible:!!u,action:()=>ie(u,"Phone")},{type:"divider",visible:!!(s||u)},{label:a.favourite===!0?"Unstar":"Star",icon:"star",action:()=>q(e,{favourite:a.favourite!==!0})},{label:"Groups",icon:"folder",submenu:[...b.peek().map(n=>({label:`${l.includes(n)?"\u2713 ":""}${n}`,action:()=>Te(e,n,!l.includes(n))})),...b.peek().length?[{type:"divider"}]:[],{label:"New group\u2026",action:()=>re([e])}]},{label:"Duplicate",icon:"copy",action:()=>xe(e)},{label:i.peek().has(e)?"Deselect":"Select",icon:"check-square",action:()=>de(e)},{type:"divider"},{label:"Delete",icon:"trash",danger:!0,action:()=>le(e)}])}});k.add(()=>De?.destroy?.());const Re=E.contextMenu(pe,{match:".ct-more",inherit:!1,density:"compact",items:()=>[{label:"Manage groups\u2026",icon:"folder",action:Pe},{type:"divider"},{label:"Export all (JSON)",icon:"download",action:Le},{label:"Import from file\u2026",icon:"upload",action:()=>Y.click()},{type:"divider"},{label:"Select all shown",icon:"check-square",disabled:!S.peek().length,action:()=>{i.value=new Set(S.peek().map(t=>t.id))}},{label:"Clear selection",icon:"x",disabled:!i.peek().size,action:()=>{i.value=new Set}}]});k.add(()=>Re?.destroy?.());const Ie=E.contextMenu(ue,{match:".ct-bulk-group",inherit:!1,density:"compact",items:()=>[...b.peek().map(t=>({label:t,action:()=>Ne(t)})),...b.peek().length?[{type:"divider"}]:[],{label:"New group\u2026",action:()=>re([...i.peek()])}]});k.add(()=>Ie?.destroy?.()),pe.addEventListener("click",t=>{const e=t.target.closest(".ct-more");e&&ee(e)}),ue.addEventListener("click",t=>{const e=t.target.closest(".ct-bulk-group");e&&ee(e)}),Ge.addEventListener("click",t=>{const e=t.target.closest(".ct-chip");if(!e)return;const a=e.dataset.chip;j.value=a==="fav"?{kind:"fav"}:a.startsWith("group:")?{kind:"group",value:a.slice(6)}:{kind:"all"}}),O.addEventListener("click",t=>{if(t.target.closest(".ct-select-all"))return;const e=t.target.closest(".ct-row");if(!e)return;const a=e.dataset.id;if(t.target.closest(".ct-kebab"))return ee(t.target.closest(".ct-kebab"));if(!t.target.closest(".ct-select")){if(t.target.closest(".ct-fav")){const s=N(a);s&&q(a,{favourite:s.favourite!==!0});return}F(a)}}),O.addEventListener("change",t=>{if(t.target.matches(".ct-select")&&de(t.target.closest(".ct-row").dataset.id),t.target.matches(".ct-select-all")){const e=S.peek().map(a=>a.id);i.value=t.target.checked?new Set(e):new Set}}),O.addEventListener("keydown",t=>{const e=t.target.closest?.(".ct-row");e&&t.key==="Enter"&&t.target===e&&F(e.dataset.id)});const me=t=>{t.ctrlKey||t.metaKey||t.altKey||t.target.closest?.("input, textarea, select, [contenteditable], .dm-slideover")||(t.key==="/"?(t.preventDefault(),se.value=!0):(t.key==="n"||t.key==="N")&&(t.preventDefault(),F(null)))};document.addEventListener("keydown",me),k.add(()=>document.removeEventListener("keydown",me)),I.scan(r),await W()}};

package/admin/js/views/context-menu-editor.js

@@ -0,0 +1,55 @@
+import{api as v}from"../api.js";import{makeIconInput as B}from"/admin/js/lib/shortcode-modal.js";import{makePageInput as L}from"/admin/js/lib/page-picker.js";const C=[{label:"This page",actions:{navigate:"Go to a URL",reload:"Reload the page",back:"Back",forward:"Forward",print:"Print","copy-link":"Copy link to this view","site-search":"Open site search"}},{label:"Clipboard and selection",actions:{copy:"Copy the selection",cut:"Cut",paste:"Paste","select-all":"Select all"}},{label:"Collection displays",actions:{filter:"Filter the display",search:"Search this display",sort:"Sort the display",export:"Export the display","mark-as-spam":"Mark as spam"}},{label:"This site",actions:{"open-modal":"Open a block in a modal","run-action":"Run an Action"}}],q=Object.assign({},...C.map(c=>c.actions)),I={back:"greys out when there is no history behind the page",forward:"greys out unless you have gone back",copy:"greys out with nothing selected",cut:"greys out outside an editable field, or with nothing selected",paste:"greys out outside an editable field","site-search":"greys out on a site where search is unavailable",search:"greys out unless the click lands in a collection display",filter:"greys out unless the click lands in a collection display",sort:"greys out unless the click lands in a collection display",export:"greys out unless the click lands in a collection display"},M={"mark-as-spam":"needs a right-click on an entry inside a collection display"},O={navigate:{key:"url",label:"URL",placeholder:"/shop"},"run-action":{key:"slug",label:"Action slug",placeholder:"archive-entry"},"open-modal":{key:"block",label:"Block name",placeholder:"contact-card"},export:{key:"format",label:"Format",placeholder:"csv"},sort:{key:"field",label:"Field",placeholder:"price"},filter:{key:"field",label:"Field",placeholder:"category"},"mark-as-spam":{key:"field",label:"Flag field (optional)",placeholder:"spam"}};function d(c){return String(c??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}function R(c){return String(c||"").toLowerCase().trim().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"").slice(0,64)}let g=null;function b(){if(g){try{g.destroy()}catch{}g=null}const c=document.getElementById("ctx-preview");if(c&&E.contextMenu&&E.contextMenu.registry)for(const m of E.contextMenu.registry(c))try{m.destroy()}catch{}}function j(c){return String(c||"").split(",").map(m=>m.trim()).filter(Boolean)}export const contextMenuEditorView={templateUrl:"/admin/js/templates/context-menu-editor.html",async onMount(c){E.tabs&&E.tabs(c.find("#ctx-tabs").get(0)),b();const m=location.hash.match(/^#\/context-menus\/edit\/([^?#]+)/),y=m?decodeURIComponent(m[1]):null,x=!y;let a=[];if(!x)try{const t=await v.contextMenus.get(y);document.getElementById("ctx-title").textContent=`Edit: ${t.name||t.slug}`,$("#ctx-name").val(t.name||""),$("#ctx-slug").val(t.slug).prop("disabled",!0),$("#ctx-selector").val(t.target?.selector||""),$("#ctx-match").val(t.target?.match||""),$("#ctx-exclude").val(t.target?.exclude||""),$("#ctx-inherit").val(String(t.inherit===!1?"false":t.inherit||"append")),$("#ctx-enabled").prop("checked",t.enabled!==!1),$("#ctx-accent").val(t.theme?.accent||""),$("#ctx-transition").val(t.theme?.transition||""),$("#ctx-density").val(t.theme?.density||""),$("#ctx-radius").val(t.theme?.radius||""),$("#ctx-shadow").val(t.theme?.shadow||""),$("#ctx-opacity").val(t.theme?.opacity??""),$("#ctx-pages").val((t.binding?.pages||[]).join(", ")),$("#ctx-projects").val((t.binding?.projects||[]).join(", ")),a=Array.isArray(t.items)?t.items:[]}catch(t){E.toast(`Could not load "${y}": ${t.message||t}`,{type:"error"});return}let f=!x;$("#ctx-slug").on("input",()=>{f=!0}),$("#ctx-name").on("input",function(){f||$("#ctx-slug").val(R(this.value))});function u(){const t=document.getElementById("ctx-items"),s=document.getElementById("ctx-items-empty");s.style.display=a.length?"none":"",t.replaceChildren(),a.forEach((e,i)=>{const n=e.type||"item",o=O[e.action?.type],r=document.createElement("div");r.className="card mb-2",r.innerHTML=`
+                    <div class="card-body">
+                        <div class="row">
+                            <div class="col-4">
+                                <label class="form-label">Type</label>
+                                <select class="form-select ctx-item-type" data-i="${i}">
+                                    <option value="item"${n==="item"?" selected":""}>Item</option>
+                                    <option value="divider"${n==="divider"?" selected":""}>Divider</option>
+                                    <option value="header"${n==="header"?" selected":""}>Heading</option>
+                                </select>
+                            </div>
+                            ${n==="divider"?"":`
+                            <div class="col-8">
+                                <label class="form-label">Text</label>
+                                <input class="form-input ctx-item-text" data-i="${i}" type="text" value="${d(e.text)}">
+                            </div>`}
+                        </div>
+                        ${n==="item"?`
+                        <div class="row mt-2">
+                            <div class="col-4">
+                                <label class="form-label">Icon</label>
+                                <div class="ctx-icon-slot" data-i="${i}"></div>
+                            </div>
+                            <div class="col-4">
+                                <label class="form-label">Does</label>
+                                <select class="form-select ctx-item-action" data-i="${i}">
+                                    ${C.map(l=>`
+                                    <optgroup label="${d(l.label)}">
+                                        ${Object.entries(l.actions).map(([S,T])=>`<option value="${S}"${e.action?.type===S?" selected":""}>${d(T)}</option>`).join("")}
+                                    </optgroup>`).join("")}
+                                </select>
+                                ${I[e.action?.type]?`<small class="text-muted">${d(I[e.action.type])}</small>`:""}
+                                ${M[e.action?.type]?`<small class="text-muted">${d(M[e.action.type])}</small>`:""}
+                            </div>
+                            ${o?`
+                            <div class="col-4">
+                                <label class="form-label">${d(o.label)}</label>
+                                ${o.key==="url"?`<div class="ctx-url-slot" data-i="${i}"></div>`:`<input class="form-input ctx-item-arg" data-i="${i}" data-key="${o.key}"
+                                       type="text" value="${d(e.action?.[o.key])}" placeholder="${d(o.placeholder)}">`}
+                            </div>`:""}
+                        </div>
+                        <div class="row mt-2">
+                            <div class="col-6">
+                                <label class="form-check">
+                                    <input type="checkbox" class="ctx-item-danger" data-i="${i}"${e.danger?" checked":""}>
+                                    Destructive (red)
+                                </label>
+                            </div>
+                        </div>`:""}
+                        <div class="mt-2 text-right">
+                            <button class="btn btn-sm btn-ghost ctx-item-up" data-i="${i}" ${i===0?"disabled":""}>Up</button>
+                            <button class="btn btn-sm btn-ghost ctx-item-down" data-i="${i}" ${i===a.length-1?"disabled":""}>Down</button>
+                            <button class="btn btn-sm btn-ghost ctx-item-remove" data-i="${i}">Remove</button>
+                        </div>
+                    </div>`;const w=r.querySelector(".ctx-icon-slot");if(w){const l=B("edit",e.icon||"");l.input.className+=" ctx-item-icon",l.input.dataset.i=String(i),w.appendChild(l.el)}const N=r.querySelector(".ctx-url-slot");if(N){const l=L(o.placeholder,e.action?.url||"");l.input.className+=" ctx-item-arg",l.input.dataset.i=String(i),l.input.dataset.key="url",N.appendChild(l.el)}t.appendChild(r)}),Domma.icons.scan("#ctx-items"),p()}c.on("change",".ctx-item-type",function(){const t=Number(this.dataset.i);a[t].type=this.value,this.value!=="item"?delete a[t].action:a[t].action||(a[t].action={type:"navigate"}),u()}),c.on("input",".ctx-item-text",function(){a[Number(this.dataset.i)].text=this.value,p()}),c.on("input",".ctx-item-icon",function(){a[Number(this.dataset.i)].icon=this.value,p()}),c.on("change",".ctx-item-action",function(){const t=Number(this.dataset.i);a[t].action={type:this.value},u()}),c.on("input",".ctx-item-arg",function(){const t=Number(this.dataset.i);a[t].action=a[t].action||{},a[t].action[this.dataset.key]=this.value,p()}),c.on("change",".ctx-item-danger",function(){a[Number(this.dataset.i)].danger=this.checked,p()}),c.on("click",".ctx-item-remove",function(){a.splice(Number(this.dataset.i),1),u()}),c.on("click",".ctx-item-up",function(){const t=Number(this.dataset.i);[a[t-1],a[t]]=[a[t],a[t-1]],u()}),c.on("click",".ctx-item-down",function(){const t=Number(this.dataset.i);[a[t+1],a[t]]=[a[t],a[t+1]],u()}),$("#ctx-add-item").on("click",()=>{a.push({type:"item",text:"New item",action:{type:"navigate",url:""}}),u()});function k(){const t={},s=$("#ctx-accent").val(),e=$("#ctx-transition").val(),i=$("#ctx-density").val(),n=$("#ctx-radius").val(),o=$("#ctx-shadow").val(),r=$("#ctx-opacity").val();return s&&(t.accent=s),e&&(t.transition=e),i&&(t.density=i),n&&(t.radius=n),o&&(t.shadow=o),r!==""&&r!=null&&(t.opacity=Number(r)),t}function A(){const t=$("#ctx-inherit").val(),s=j($("#ctx-pages").val()),e=j($("#ctx-projects").val()),i={slug:$("#ctx-slug").val().trim(),name:$("#ctx-name").val().trim(),enabled:$("#ctx-enabled").is(":checked"),target:{selector:$("#ctx-selector").val().trim(),match:$("#ctx-match").val().trim(),exclude:$("#ctx-exclude").val().trim()},inherit:t==="false"?!1:t,items:a},n=k();return Object.keys(n).length&&(i.theme=n),(s.length||e.length)&&(i.binding={},s.length&&(i.binding.pages=s),e.length&&(i.binding.projects=e)),i}E.tooltip&&E.tooltip(".ctx-help",{trigger:"click",position:"right"});function p(){b();const t=a.map(e=>{const i=e.type||"item";return i==="divider"?{type:"divider"}:i==="header"?{type:"header",header:e.text||""}:{label:e.text||"(no text)",icon:e.icon||void 0,danger:!!e.danger}});if(!t.some(e=>e.label))return;const s=k();g=E.contextMenu("#ctx-preview",{items:t,inherit:!1,accent:s.accent,transition:s.transition,density:s.density,radius:s.radius,shadow:s.shadow,opacity:s.opacity})}c.on("change","#ctx-accent, #ctx-transition, #ctx-density, #ctx-radius, #ctx-shadow",p),c.on("input","#ctx-opacity",p);function h(t){const s=document.getElementById("ctx-errors");if(!t){s.style.display="none";return}s.style.display="",s.innerHTML=String(t).split("; ").map(e=>`<div>${d(e)}</div>`).join(""),s.scrollIntoView({behavior:"smooth",block:"nearest"})}$("#ctx-save").on("click",async function(){h(null);const t=A();if(!t.slug)return h("Slug is required");if(!t.name)return h("Name is required");if(!t.target.selector)return h("Container selector is required");this.disabled=!0;try{x?(await v.contextMenus.create(t),E.toast("Context menu created.",{type:"success"}),location.hash="#/context-menus"):(await v.contextMenus.update(y,t),E.toast("Context menu saved.",{type:"success"}))}catch(s){h(s.message||String(s))}finally{this.disabled=!1}}),u(),Domma.icons.scan(c.get(0))},onUnmount(){E.contextMenu&&E.contextMenu.closeAll&&E.contextMenu.closeAll(),b()}};

package/admin/js/views/context-menus.js

@@ -0,0 +1,5 @@
+import{api as l}from"../api.js";import{filterByProject as u,getProjectFromHash as g}from"../lib/project-context.js";import{keepTableIconsAlive as m}from"../lib/table-icons.js";function o(s){return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}export const contextMenusView={templateUrl:"/admin/js/templates/context-menus.html",async onMount(s){const r=E.loader(s.get(0),{type:"dots"});let c;try{c=await l.contextMenus.list().catch(()=>[])}finally{r.destroy()}const i=g(),d=i?u(c,i):c;T.create("#context-menus-table",{pageSize:25,data:d,emptyMessage:'No context menus yet. Click "New context menu" to create one.',columns:[{key:"slug",title:"Slug",sortable:!0,render:e=>`<code>${o(e)}</code>`},{key:"name",title:"Name",sortable:!0,render:(e,t)=>`<a href="#/context-menus/edit/${encodeURIComponent(t.slug)}" style="font-weight:600;">${o(e||t.slug)}</a>`},{key:"selector",title:"Binds to",render:(e,t)=>{const n=t.selector?`<code>${o(t.selector)}</code>`:'<span class="text-muted">-</span>',a=t.match?` &rarr; <code>${o(t.match)}</code>`:"";return n+a}},{key:"itemsCount",title:"Items",render:(e,t)=>String(t.itemsCount??0)},{key:"binding",title:"Scope",render:(e,t)=>{const n=t.binding;if(!n)return'<span class="badge badge-secondary">site-wide</span>';const a=[...(n.projects||[]).map(p=>`project:${p}`),...n.pages||[]];return a.length?`<span class="badge badge-info" data-tooltip="${o(a.join(", "))}">${a.length} rule${a.length===1?"":"s"}</span>`:'<span class="badge badge-warning" data-tooltip="Binding matches nothing, so this menu never appears">never matches</span>'}},{key:"enabled",title:"Enabled",render:(e,t)=>t.enabled===!1?'<span class="badge badge-secondary">off</span>':'<span class="badge badge-success">on</span>'},{key:"_actions",title:"Actions",render:(e,t)=>{const n=o(t.slug);return`
+                            <a class="btn btn-sm btn-ghost" href="#/context-menus/edit/${encodeURIComponent(t.slug)}" data-tooltip="Edit"><span data-icon="edit" data-icon-size="14"></span></a>
+                            <button class="btn btn-sm btn-ghost btn-duplicate" data-slug="${n}" data-tooltip="Duplicate"><span data-icon="copy" data-icon-size="14"></span></button>
+                            <button class="btn btn-sm btn-ghost btn-delete" data-slug="${n}" data-tooltip="Delete"><span data-icon="trash" data-icon-size="14"></span></button>
+                        `}}]}),Domma.icons.scan("#context-menus-table"),m(s.get(0)),document.querySelectorAll("#context-menus-table [data-tooltip]").forEach(e=>{E.tooltip(e,{content:e.getAttribute("data-tooltip"),position:"top"})}),s.off("click",".btn-duplicate").on("click",".btn-duplicate",async function(){const e=$(this).data("slug");try{const t=await l.contextMenus.duplicate(e);E.toast(`Duplicated as "${t.slug}".`,{type:"success"}),location.reload()}catch(t){E.toast(`Duplicate failed: ${t.message||t}`,{type:"error"})}}),s.off("click",".btn-delete").on("click",".btn-delete",async function(){const e=$(this).data("slug");if(await E.confirm(`Delete context menu "${e}"? This cannot be undone.`))try{await l.contextMenus.remove(e),E.toast("Context menu deleted.",{type:"success"}),location.reload()}catch(n){E.toast(`Delete failed: ${n.message||n}`,{type:"error"})}})}};