domma-cms 1.14.0 → 1.16.0

package/admin/js/templates/settings.html

@@ -18,14 +18,14 @@
             <button type="button" class="tab-item active">General <i class="stx-dot" data-bind-hidden="!tabs.value.general" title="Changed"></i></button>
             <button type="button" class="tab-item">Branding <i class="stx-dot" data-bind-hidden="!tabs.value.branding" title="Changed"></i></button>
             <button type="button" class="tab-item">Favicon <i class="stx-dot" data-bind-hidden="!tabs.value.favicon" title="Changed"></i></button>
-            <button type="button" class="tab-item">SEO <i class="stx-dot" data-bind-hidden="!tabs.value.seo" title="Changed"></i></button>
             <button type="button" class="tab-item">Footer <i class="stx-dot" data-bind-hidden="!tabs.value.footer" title="Changed"></i></button>
             <button type="button" class="tab-item">Email <i class="stx-dot" data-bind-hidden="!tabs.value.email" title="Changed"></i><i class="stx-dot is-bad" data-bind-hidden="!noSmtp.value || tabs.value.email" title="No SMTP host"></i></button>
             <button type="button" class="tab-item">Page navigation <i class="stx-dot" data-bind-hidden="!tabs.value.pageNavigation" title="Changed"></i></button>
             <button type="button" class="tab-item">Cookie consent <i class="stx-dot" data-bind-hidden="!tabs.value.cookies" title="Changed"></i></button>
-            <button type="button" class="tab-item">Analytics <i class="stx-dot" data-bind-hidden="!tabs.value.analytics" title="Changed"></i></button>
             <button type="button" class="tab-item">Breadcrumbs <i class="stx-dot" data-bind-hidden="!tabs.value.breadcrumbs" title="Changed"></i></button>
+            <button type="button" class="tab-item">Reduce motion <i class="stx-dot" data-bind-hidden="!tabs.value.motion" title="Changed"></i></button>
             <button type="button" class="tab-item">Cache</button>
+            <button type="button" class="tab-item" data-site-search-tab>Search <i class="stx-dot" data-site-search-dirty hidden title="Changed"></i></button>
         </div>
 
         <!-- General -->
@@ -91,6 +91,9 @@
         <div class="tab-panel">
             <div class="stx-card-columns">
             <div class="stx-card"><div class="stx-card-title"><span data-icon="globe" data-icon-size="16" aria-hidden="true"></span>Public site</div><div class="stx-grid">
+                <div class="stx-setting stx-wide"><label class="form-label" for="stx-brand-enabled">Show public site branding
+                    <span data-help="Shows the name and mark in the navbar and footer. Off hides them and keeps the saved values for next time."></span></label>
+                    <input id="stx-brand-enabled" type="checkbox" class="form-switch" data-model="brandEnabled.value"></div>
                 <div><label class="form-label" for="stx-brandText">Brand name</label>
                     <input id="stx-brandText" type="text" class="form-input" placeholder="My Site" data-model="brandText.value">
                 </div>
@@ -110,6 +113,9 @@
             </div><p class="text-muted">The logo takes priority over the icon. Set the browser icon in the Favicon tab.</p></div>
             <div class="stx-card"><div class="stx-card-title"><span data-icon="layout" data-icon-size="16" aria-hidden="true"></span>Admin
                 <span data-help-title="Admin name and mark" data-help="The name and logo or icon at the top of the admin - in the top bar, the sidebar and the browser tab - for everyone who signs in. Leave the name empty to use the site title."></span></div><div class="stx-grid">
+                <div class="stx-setting stx-wide"><label class="form-label" for="stx-admin-brand-enabled">Show admin branding
+                    <span data-help="Shows the name and mark in the admin top bar and sidebar, and the name in browser tab titles. Off hides them and keeps the saved values."></span></label>
+                    <input id="stx-admin-brand-enabled" type="checkbox" class="form-switch" data-model="adminBrandEnabled.value"></div>
                 <div><label class="form-label" for="stx-adminBrandTitle">Admin name</label>
                     <input id="stx-adminBrandTitle" type="text" class="form-input" placeholder="Uses the site title when empty" data-model="adminBrandTitle.value">
                 </div>
@@ -150,30 +156,6 @@
             </div>
         </div>
 
-        <!-- SEO -->
-        <div class="tab-panel">
-            <div class="stx-card">
-                <div class="stx-card-title"><span data-icon="search" data-icon-size="16" aria-hidden="true"></span>Search engines
-                    <span data-help-title="SEO defaults" data-help="Used on every page that does not set its own. A page's title becomes “Page title” + separator + default site title."></span></div>
-                <div class="stx-grid">
-                    <div>
-                        <label class="form-label" for="stx-seo-title">Default site title</label>
-                        <input id="stx-seo-title" type="text" class="form-input" placeholder="My Site" data-model="seoTitle.value">
-                    </div>
-                    <div>
-                        <label class="form-label" for="stx-seo-sep">Title separator</label>
-                        <input id="stx-seo-sep" type="text" class="form-input" placeholder=" | " data-model="seoSeparator.value">
-                    </div>
-                    <div class="stx-wide">
-                        <label class="form-label" for="stx-seo-desc">Default meta description
-                            <span data-help="The summary search engines show under a page that has no description of its own. About 150 characters is what they display."></span></label>
-                        <input id="stx-seo-desc" type="text" class="form-input" placeholder="Brief description of your site" data-model="seoDescription.value">
-                        <small class="stx-hint" data-bind-text="seoLength.value"></small>
-                    </div>
-                </div>
-            </div>
-        </div>
-
         <!-- Footer -->
         <div class="tab-panel">
             <div class="stx-card-columns">
@@ -203,28 +185,8 @@
                             <span data-help="Blocks (Content › Blocks) shown side by side at the top of the footer on every page, by name, in order - for example wp-footer-1, wp-footer-2. Import from WordPress puts a site's footer widget areas here. Leave it empty for none; a name that is not a block is left out."></span></label>
                         <input id="stx-footer-blocks" type="text" class="form-input" maxlength="400" placeholder="wp-footer-1, wp-footer-2" data-model="footerBlocks.value">
                     </div>
-                    <div class="stx-wide stx-setting">
-                        <label class="form-label" for="stx-motion">Show a “Reduce motion” switch
-                            <span data-help="An accessibility switch in the footer that lets visitors turn animations off. Turning this off only hides the switch - visitors who already chose it, and anyone whose browser asks for reduced motion, still get a calmer site."></span></label>
-                        <input id="stx-motion" type="checkbox" class="form-switch" data-model="footerMotionToggle.value">
-                    </div>
-                    <div class="stx-setting">
-                        <label class="form-label" for="stx-motion-default">Reduced motion for new visitors
-                            <span data-help="What a visitor who has not used the switch gets. Follow their device honours the system setting (the accessible default). Off shows every animation until they ask for less; On starts calm. A visitor's own choice always wins."></span></label>
-                        <select id="stx-motion-default" class="form-input" data-model="footerMotionDefault.value">
-                            <option value="system">Follow their device</option>
-                            <option value="off">Off - full motion</option>
-                            <option value="on">On - calm</option>
-                        </select>
-                    </div>
-                    <div class="stx-setting">
-                        <label class="form-label" for="stx-motion-control">The control
-                            <span data-help="How the Reduce motion control looks in the footer."></span></label>
-                        <select id="stx-motion-control" class="form-input" data-model="footerMotionControl.value">
-                            <option value="switch">A switch</option>
-                            <option value="checkbox">A checkbox</option>
-                        </select>
-                    </div>
+                    <p class="stx-wide stx-hint">The “Reduce motion” control now has a tab of its own:
+                        <button type="button" class="stx-inline-link" data-on-click="goTab('motion')">Reduce motion</button>.</p>
                     <div>
                         <label class="form-label" for="stx-footer-class">Footer CSS classes
                             <span data-help-title="Footer CSS classes" data-help="Your own class names, separated by spaces, added to the site footer. Style them in Custom CSS. The footer's menus take classes of their own in Menus."></span></label>
@@ -532,21 +494,6 @@
             </div>
         </div>
 
-        <!-- Analytics -->
-        <div class="tab-panel">
-            <div class="stx-card">
-                <div class="stx-card-title"><span data-icon="bar-chart" data-icon-size="16" aria-hidden="true"></span>Google Analytics
-                    <span data-help-title="Google Analytics" data-help="Paste the measurement ID of your Google Analytics 4 web stream (Admin > Data streams). Google Analytics sets cookies, so it loads only for visitors who accept Analytics cookies in the cookie banner - the banner is shown whenever an ID is set. Leave it empty to switch Google Analytics off. The built-in Analytics Tool is separate and needs no cookies."></span></div>
-                <div class="stx-grid">
-                    <div class="stx-wide"><label class="form-label" for="stx-ga-id">Measurement ID</label>
-                        <input id="stx-ga-id" type="text" class="form-input" placeholder="G-XXXXXXXXXX" autocomplete="off" spellcheck="false" data-model="gaId.value">
-                        <small class="text-danger" data-bind-hidden="!gaIdError.value" data-bind-text="gaIdError.value"></small></div>
-                </div>
-                <p class="stx-note">Loads only after a visitor accepts Analytics cookies. Visitors who reject them, or have not answered yet, are not sent to Google.</p>
-                <p class="stx-note" data-bind-hidden="!gaForcesBanner.value">The cookie banner is switched off under Cookie consent, but it will still be shown while Google Analytics is set - it is how visitors give consent.</p>
-            </div>
-        </div>
-
         <!-- Breadcrumbs -->
         <div class="tab-panel">
             <div class="stx-card-columns">
@@ -584,6 +531,91 @@
             </div>
         </div>
 
+        <!-- Reduce motion -->
+        <div class="tab-panel">
+            <div class="stx-card-columns">
+            <div class="stx-card">
+                <div class="stx-card-title"><span data-icon="pause" data-icon-size="16" aria-hidden="true"></span>The control
+                    <span data-help-title="Reduce motion" data-help="An accessibility control that lets visitors turn animations off. Turning it off only hides the control - visitors who already chose it, and anyone whose browser asks for reduced motion, still get a calmer site."></span></div>
+                <div class="stx-grid">
+                    <div class="stx-wide stx-setting"><label class="form-label" for="stx-mt-on">Show it</label>
+                        <input id="stx-mt-on" type="checkbox" class="form-switch" data-model="mtEnabled.value"></div>
+                    <div class="stx-wide"><label class="form-label" for="stx-mt-label">Label
+                        <span data-help="The words on the control, and what a screen reader announces. Up to 40 characters."></span></label>
+                        <input id="stx-mt-label" type="text" class="form-input" maxlength="40" placeholder="Reduce motion" data-model="mtLabel.value"></div>
+                    <div class="stx-wide stx-setting">
+                        <label class="form-label" for="stx-motion-default">Reduced motion for new visitors
+                            <span data-help="What a visitor who has not used the control gets. Follow their device honours the system setting (the accessible default). Off shows every animation until they ask for less; On starts calm. A visitor's own choice always wins."></span></label>
+                        <select id="stx-motion-default" class="form-input" data-model="mtDefault.value">
+                            <option value="system">Follow their device</option>
+                            <option value="off">Off - full motion</option>
+                            <option value="on">On - calm</option>
+                        </select>
+                    </div>
+                    <div class="stx-wide stx-setting" data-bind-hidden="mtPlacement.value !== 'footer'">
+                        <label class="form-label" for="stx-motion-control">Footer style
+                            <span data-help="How the Reduce motion control looks in the footer."></span></label>
+                        <select id="stx-motion-control" class="form-input" data-model="mtControl.value">
+                            <option value="switch">A switch</option>
+                            <option value="checkbox">A checkbox</option>
+                        </select>
+                    </div>
+                    <div class="stx-wide">
+                        <label class="form-label" for="stx-mt-class">CSS classes
+                            <span data-help="Your own class names, separated by spaces, added to the control wherever it sits. Style them in Custom CSS."></span></label>
+                        <input id="stx-mt-class" type="text" class="form-input" placeholder="motion-quiet" autocomplete="off" spellcheck="false" data-model="mtClass.value">
+                    </div>
+                </div>
+            </div>
+            <div class="stx-card">
+                <div class="stx-card-title"><span data-icon="layout" data-icon-size="16" aria-hidden="true"></span>Placement
+                    <span data-help-title="Placement" data-help="Footer puts it at the foot of every page, as it always was. Floating button is a disc fixed to a corner of the window, kept clear of Search, Back to top and the theme switcher. Navbar adds it at the end of the navbar - on a page with no navbar, or on a phone when the navbar shows only its menu button, it floats instead."></span></div>
+                <div class="stx-grid">
+                    <div class="stx-wide">
+                        <span class="form-label">Where it goes</span>
+                        <div class="stx-segments" role="group" aria-label="Where it goes">
+                            <button type="button" data-on-click="motionPlacement('footer')" data-bind-class="mtPlacement.value === 'footer' && 'is-on'">Footer</button>
+                            <button type="button" data-on-click="motionPlacement('floating')" data-bind-class="mtPlacement.value === 'floating' && 'is-on'">Floating button</button>
+                            <button type="button" data-on-click="motionPlacement('navbar')" data-bind-class="mtPlacement.value === 'navbar' && 'is-on'">Navbar</button>
+                        </div>
+                    </div>
+                    <div class="stx-setting stx-wide" data-bind-hidden="mtPlacement.value === 'footer'">
+                        <label class="form-label" for="stx-mt-style">Button
+                            <span data-help="An icon on its own (the label is still read out by screen readers), or the icon with the label beside it."></span></label>
+                        <select id="stx-mt-style" class="form-input" data-model="mtTriggerStyle.value">
+                            <option value="icon">Icon</option>
+                            <option value="icon-text">Icon and label</option>
+                        </select>
+                    </div>
+                    <div class="stx-wide" data-bind-hidden="mtPlacement.value !== 'floating'">
+                        <span class="form-label">Corner</span>
+                        <div class="stx-corners" role="group" aria-label="Corner">
+                            <button type="button" data-on-click="motionCorner('TL')" data-bind-class="mtPosition.value === 'TL' && 'is-on'">↖ Top left</button>
+                            <button type="button" data-on-click="motionCorner('TR')" data-bind-class="mtPosition.value === 'TR' && 'is-on'">Top right ↗</button>
+                            <button type="button" data-on-click="motionCorner('BL')" data-bind-class="mtPosition.value === 'BL' && 'is-on'">↙ Bottom left</button>
+                            <button type="button" data-on-click="motionCorner('BR')" data-bind-class="mtPosition.value === 'BR' && 'is-on'">Bottom right ↘</button>
+                        </div>
+                    </div>
+                    <div class="stx-pair stx-wide" data-bind-hidden="mtPlacement.value !== 'floating'">
+                        <div><label class="form-label" for="stx-mt-x">From the side (px)</label>
+                            <input id="stx-mt-x" type="number" class="form-input" min="0" max="500" placeholder="32" data-model="mtOffsetX.value"></div>
+                        <div><label class="form-label" for="stx-mt-y">From the top/bottom (px)</label>
+                            <input id="stx-mt-y" type="number" class="form-input" min="0" max="500" placeholder="32" data-model="mtOffsetY.value"></div>
+                    </div>
+                    <div class="stx-pair stx-wide" data-bind-hidden="mtPlacement.value !== 'floating' || mtTriggerStyle.value !== 'icon'">
+                        <div><label class="form-label" for="stx-mt-size">Size <span class="stx-readout" data-bind-text="mtSizeText.value"></span>
+                            <span data-help="How big the disc is (32-96 px). The glyph inside scales with it. 44 px and up is comfortable to tap on a phone."></span></label>
+                            <input id="stx-mt-size" type="range" min="32" max="96" step="2" data-model="mtIconSize.value"></div>
+                        <div><label class="form-label" for="stx-mt-radius">Corners <span class="stx-readout" data-bind-text="mtRadiusText.value"></span>
+                            <span data-help="0 is a square; the top of the range is a circle, and it is always half the size - so it moves when the size does."></span></label>
+                            <input id="stx-mt-radius" type="range" min="0" step="1" data-model="mtIconRadius.value"></div>
+                    </div>
+                </div>
+                <p class="stx-hint" data-bind-hidden="mtPlacement.value !== 'floating'">If Search, Back to top or the theme switcher sits in the same corner, the disc stacks clear of it, further from the edge.</p>
+            </div>
+            </div>
+        </div>
+
         <!-- Cache -->
         <div class="tab-panel">
             <div class="stx-card">
@@ -612,6 +644,7 @@
                 <div class="stx-list" data-each="cacheRows.value key=id"></div>
             </div>
         </div>
+        <div class="tab-panel" data-site-search-panel><p role="status">Open Search to load its settings.</p></div>
     </div>
 </div>
 
@@ -662,6 +695,14 @@
 .stx-corners button:nth-child(-n+2) { border-bottom: 1px solid var(--dm-border); }
 .stx-corners button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
 .stx-corners button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.stx-segments { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.stx-segments button { border: 0; background: none; color: var(--dm-text); padding: .45rem .8rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.stx-segments button + button { border-left: 1px solid var(--dm-border); }
+.stx-segments button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.stx-segments button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.stx-readout { color: var(--dm-text-muted); font-weight: 400; font-variant-numeric: tabular-nums; }
+.stx-pair input[type="range"] { width: 100%; }
+.stx-inline-link { background: none; border: 0; padding: 0; font: inherit; color: var(--dm-primary); text-decoration: underline; cursor: pointer; }
 .stx-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
 .stx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
     background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }

package/admin/js/views/analytics.js

@@ -1,4 +1,4 @@
-import{apiRequest as b,getToken as be,refreshAccessToken as he}from"../api.js";import{addBannerAction as fe}from"../lib/plugin-chrome.js";import{helpPopovers as te}from"../lib/help-popover.js";import{onceClosed as ye,openMenuAt as ae,settingsStore as ge,sidebarCount as se,viewLifetime as we}from"../lib/tool-kit.js";import{DEFAULT_SETTINGS as Me,journeyRows as ke,kpis as Ee,LIMITS as Re,normaliseSettings as ne,pageEditHash as Se,RANGE_LABEL as V,RANGES as Ce,seriesRange as Le,siteAddress as Ae,tabCounts as Te,topRows as xe}from"../lib/analytics-shape.js";import{fmtDate as Pe}from"../lib/dates.js";import{SHAPES as $e,showLoading as je}from"../lib/loading.js";const He="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js",Ie=3e4,oe=ge("analytics.settings",ne),Ue=`
+import{apiRequest as h,getToken as fe,refreshAccessToken as ye}from"../api.js";import{addBannerAction as ge}from"../lib/plugin-chrome.js";import{helpPopovers as ae}from"../lib/help-popover.js";import{mountGoogleAnalytics as we}from"../lib/google-analytics-panel.js";import{onceClosed as Me,openMenuAt as se,settingsStore as ke,sidebarCount as ne,viewLifetime as Ee}from"../lib/tool-kit.js";import{DEFAULT_SETTINGS as Re,journeyRows as Se,kpis as Ce,LIMITS as Ae,normaliseSettings as oe,pageEditHash as Le,RANGE_LABEL as q,RANGES as Te,seriesRange as xe,siteAddress as Pe,tabCounts as $e,topRows as je}from"../lib/analytics-shape.js";import{fmtDate as He}from"../lib/dates.js";import{SHAPES as Ie,showLoading as Ue}from"../lib/loading.js";const De="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js",Oe=3e4,le=ke("analytics.settings",oe),_e=`
 <div class="an-row" tabindex="0" data-url="{{url}}">
     <span class="an-bar-fill" style="width: {{bar}}"></span>
     <span class="an-rank">{{rank}}</span>
@@ -12,18 +12,20 @@ import{apiRequest as b,getToken as be,refreshAccessToken as he}from"../api.js";i
     <span class="an-url" title="{{label}}">{{label}}</span>
     <span class="an-num">{{count}}</span>
     <button type="button" class="an-kebab" aria-label="Page actions" title="Actions">\u22EE</button>
-</div>`,De=`
+</div>`,Ne=`
 <div class="an-row" tabindex="0" data-url="{{url}}">
     <span class="an-url" title="{{url}}">{{url}}</span>
     <span class="an-num" title="Views per hour today, against the usual {{baseline}}">{{hits}}/h</span>
     <span class="an-share">\xD7{{ratio}}</span>
     <button type="button" class="an-kebab" aria-label="Page actions" title="Actions">\u22EE</button>
-</div>`;function Oe(){return window.Chart?Promise.resolve():new Promise((p,n)=>{const a=document.createElement("script");a.src=He,a.async=!0,a.onload=()=>p(),a.onerror=()=>n(new Error("chart.js load failed")),document.head.appendChild(a)})}function _e(p){const n=document.createElement("template");return n.innerHTML=p.trim(),n.content.firstElementChild}async function Ne(p){const n=v=>fetch("/api/analytics/export.csv?range="+encodeURIComponent(p),{headers:v?{Authorization:"Bearer "+v}:{}});let a=await n(be());if(a.status===401&&(a=await n(await he())),!a.ok)throw new Error("export failed");const i=await a.blob(),d=(a.headers.get("Content-Disposition")||"").match(/filename="?([^"]+)"?/),u=URL.createObjectURL(i),c=document.createElement("a");c.href=u,c.download=d?d[1]:"analytics.csv",document.body.appendChild(c),c.click(),c.remove(),URL.revokeObjectURL(u)}const l=we(/^#\/analytics\b/);export const analyticsView={templateUrl:"/admin/js/templates/analytics.html",async onMount(p){l.reset();const n=p.get(0);let a=!0;l.add(()=>{a=!1});const i=M.observable(oe.read()),d=M.observable(i.peek().range),u=M.observable("pages"),c=M.observable(""),v=M.observable(null),q=M.observable([]),g=M.observable(null),A=M.observable([]),h=M.observable(null),w=M.observable(""),f=M.observable(""),T=M.observable(null),x=M.observable(null),P=M.observable(null),$=M.observable(!0),F=M.observable(!!window.Chart);let G=new Set;const W=M.observable([]),J=M.observable("");l.add(M.effect(()=>{const e=v.value,{rows:t,matched:s}=xe(e?.top,{filter:c.value,limit:i.value.limit,total:e?.total});W.value=t,J.value=e?e.top.length?s?s>t.length?`Showing ${t.length} of ${s} pages - the cog changes how many.`:"":"No pages match that filter.":"No page views recorded in this range yet.":""}));const z=M.observable([]),K=M.observable([]),Y=M.observable([]);l.add(M.effect(()=>{const e=ke(g.value);z.value=e.entry,K.value=e.exit,Y.value=e.paths}));const le={range:d,section:u,filter:c,spikes:A,pageRows:W,pagesNote:J,entryRows:z,exitRows:K,pathRows:Y,loadError:w,liveError:f,loading:$,counts:M.computed(()=>Te(v.value,g.value,$.value?null:A.value)),freshness:M.computed(()=>T.value?`Last updated ${D(T.value).format("HH:mm:ss")} \xB7 ${V[P.value]||P.value}${w.value?" \xB7 Figures are stale":""}`:w.value?"Figures unavailable":"Loading figures\u2026"),kpi:M.computed(()=>Ee(v.value,g.value)),isAllTime:M.computed(()=>d.value==="all"),sessionsCount:M.computed(()=>g.value?.totalSessions??0),liveText:M.computed(()=>f.value?h.value===null?"Active now unavailable":`${h.value} active \xB7 stale`:h.value===null?"Active now: -":`${h.value} active now`),liveClass:M.computed(()=>!f.value&&h.value?"is-on":""),liveTitle:M.computed(()=>(x.value?`Last updated ${D(x.value).format("HH:mm:ss")}. `:"")+(f.value||(i.value.live?"Refreshes every 30 seconds":"Live refresh is off - see settings")))};l.add(M.effect(()=>oe.write(i.value)));const ie=(e,t)=>{i.value=ne({...i.peek(),[e]:t})};let Z=je(n.querySelector(".an-loading"),$e.rows);const Q=async()=>{const e=Z;Z=null,e&&await e.done(),a&&($.value=!1)};let j=0;async function S(){const e=d.peek(),t=++j;try{const[s,r,y,R]=await Promise.all([b("/analytics/stats?range="+encodeURIComponent(e)),b("/analytics/series?range="+encodeURIComponent(Le(e))),b("/analytics/journeys?range="+encodeURIComponent(e)),b("/analytics/spikes")]);if(await Q(),!a||t!==j)return;v.value=s,q.value=r?.series??[],g.value=y,A.value=(R?.items??[]).map(o=>({...o,key:o.url})),P.value=e,T.value=new Date().toISOString(),w.value=""}catch{await Q(),a&&t===j&&(w.value="Could not refresh analytics. Previous figures, if shown, are retained.")}}async function re(){try{const e=await b("/pages");a&&(G=new Set((Array.isArray(e)?e:[]).map(t=>t.urlPath).filter(Boolean)))}catch{}}let H=0;async function U(){const e=++H;try{const t=await b("/analytics/realtime");if(!a||e!==H)return;h.value=t?.activeSessions??0,x.value=new Date().toISOString(),f.value="",se("#/analytics")}catch{a&&e===H&&(f.value="Live visitor count is unavailable. Retry to refresh it.")}}let X=!0;l.add(M.effect(()=>{if(d.value,X){X=!1;return}S()}));let O=null;l.add(M.effect(()=>{clearInterval(O),O=i.value.live?setInterval(()=>{document.hidden||U()},Ie):null})),l.add(()=>clearInterval(O));const ee=n.querySelector(".an-chart");let C=null;l.add(()=>{C?.destroy(),C=null}),l.add(M.effect(()=>{const e=q.value,t=i.value.chart;if(!F.value||!window.Chart||!ee.isConnected)return;const s=getComputedStyle(document.documentElement),r=s.getPropertyValue("--dm-primary").trim()||"rgb(99, 102, 241)",y=s.getPropertyValue("--dm-text-muted").trim()||"#888",R=`color-mix(in srgb, ${s.getPropertyValue("--dm-border").trim()||"#888"} 45%, transparent)`;C?.destroy(),C=new window.Chart(ee,{type:t,data:{labels:e.map(o=>Pe(o.date).slice(0,5)),datasets:[{label:"Page views",data:e.map(o=>o.hits),borderColor:r,backgroundColor:t==="bar"?r:`color-mix(in srgb, ${r} 18%, transparent)`,fill:t==="line",tension:.3,borderWidth:2,pointRadius:e.length>40?0:2,borderRadius:3}]},options:{responsive:!0,maintainAspectRatio:!1,animation:!1,plugins:{legend:{display:!1}},scales:{y:{beginAtZero:!0,ticks:{precision:0,color:y},grid:{color:R}},x:{ticks:{maxRotation:0,autoSkip:!0,maxTicksLimit:10,color:y},grid:{display:!1}}}}})}));let m=null;l.add(()=>{try{m?.close()}catch{}});function ce(){if(!m){m=!0;try{de()}catch(e){throw m=null,e}}}function de(){const e=E.slideover({title:"Analytics settings",size:"sm",position:"right"}),t=_e(`
+</div>`;function Ve(){return window.Chart?Promise.resolve():new Promise((v,n)=>{const a=document.createElement("script");a.src=De,a.async=!0,a.onload=()=>v(),a.onerror=()=>n(new Error("chart.js load failed")),document.head.appendChild(a)})}function qe(v){const n=document.createElement("template");return n.innerHTML=v.trim(),n.content.firstElementChild}async function Be(v){const n=m=>fetch("/api/analytics/export.csv?range="+encodeURIComponent(v),{headers:m?{Authorization:"Bearer "+m}:{}});let a=await n(fe());if(a.status===401&&(a=await n(await ye())),!a.ok)throw new Error("export failed");const l=await a.blob(),d=(a.headers.get("Content-Disposition")||"").match(/filename="?([^"]+)"?/),u=URL.createObjectURL(l),c=document.createElement("a");c.href=u,c.download=d?d[1]:"analytics.csv",document.body.appendChild(c),c.click(),c.remove(),URL.revokeObjectURL(u)}const o=Ee(/^#\/analytics\b/);export const analyticsView={templateUrl:"/admin/js/templates/analytics.html",async onMount(v){o.reset();const n=v.get(0);let a=!0;o.add(()=>{a=!1});const l=M.observable(le.read()),d=M.observable(l.peek().range),u=M.observable("pages"),c=M.observable(""),m=M.observable(null),G=M.observable([]),w=M.observable(null),T=M.observable([]),f=M.observable(null),k=M.observable(""),y=M.observable(""),x=M.observable(null),P=M.observable(null),$=M.observable(null),j=M.observable(!0),F=M.observable(!!window.Chart);let W=new Set;const J=M.observable([]),z=M.observable("");o.add(M.effect(()=>{const e=m.value,{rows:t,matched:s}=je(e?.top,{filter:c.value,limit:l.value.limit,total:e?.total});J.value=t,z.value=e?e.top.length?s?s>t.length?`Showing ${t.length} of ${s} pages - the cog changes how many.`:"":"No pages match that filter.":"No page views recorded in this range yet.":""}));const K=M.observable([]),Y=M.observable([]),Z=M.observable([]);o.add(M.effect(()=>{const e=Se(w.value);K.value=e.entry,Y.value=e.exit,Z.value=e.paths}));const ie={range:d,section:u,filter:c,spikes:T,pageRows:J,pagesNote:z,entryRows:K,exitRows:Y,pathRows:Z,loadError:k,liveError:y,loading:j,counts:M.computed(()=>$e(m.value,w.value,j.value?null:T.value)),freshness:M.computed(()=>x.value?`Last updated ${D(x.value).format("HH:mm:ss")} \xB7 ${q[$.value]||$.value}${k.value?" \xB7 Figures are stale":""}`:k.value?"Figures unavailable":"Loading figures\u2026"),kpi:M.computed(()=>Ce(m.value,w.value)),isAllTime:M.computed(()=>d.value==="all"),sessionsCount:M.computed(()=>w.value?.totalSessions??0),liveText:M.computed(()=>y.value?f.value===null?"Active now unavailable":`${f.value} active \xB7 stale`:f.value===null?"Active now: -":`${f.value} active now`),liveClass:M.computed(()=>!y.value&&f.value?"is-on":""),liveTitle:M.computed(()=>(P.value?`Last updated ${D(P.value).format("HH:mm:ss")}. `:"")+(y.value||(l.value.live?"Refreshes every 30 seconds":"Live refresh is off - see settings")))};o.add(M.effect(()=>le.write(l.value)));const re=(e,t)=>{l.value=oe({...l.peek(),[e]:t})};let Q=Ue(n.querySelector(".an-loading"),Ie.rows);const X=async()=>{const e=Q;Q=null,e&&await e.done(),a&&(j.value=!1)};let H=0;async function C(){const e=d.peek(),t=++H;try{const[s,i,g,S]=await Promise.all([h("/analytics/stats?range="+encodeURIComponent(e)),h("/analytics/series?range="+encodeURIComponent(xe(e))),h("/analytics/journeys?range="+encodeURIComponent(e)),h("/analytics/spikes")]);if(await X(),!a||t!==H)return;m.value=s,G.value=i?.series??[],w.value=g,T.value=(S?.items??[]).map(p=>({...p,key:p.url})),$.value=e,x.value=new Date().toISOString(),k.value=""}catch{await X(),a&&t===H&&(k.value="Could not refresh analytics. Previous figures, if shown, are retained.")}}async function ce(){try{const e=await h("/pages");a&&(W=new Set((Array.isArray(e)?e:[]).map(t=>t.urlPath).filter(Boolean)))}catch{}}let U=0;async function O(){const e=++U;try{const t=await h("/analytics/realtime");if(!a||e!==U)return;f.value=t?.activeSessions??0,P.value=new Date().toISOString(),y.value="",ne("#/analytics")}catch{a&&e===U&&(y.value="Live visitor count is unavailable. Retry to refresh it.")}}let ee=!0;o.add(M.effect(()=>{if(d.value,ee){ee=!1;return}C()}));let _=null;o.add(M.effect(()=>{clearInterval(_),_=l.value.live?setInterval(()=>{document.hidden||O()},Oe):null})),o.add(()=>clearInterval(_));const te=n.querySelector(".an-chart");let A=null;o.add(()=>{A?.destroy(),A=null}),o.add(M.effect(()=>{const e=G.value,t=l.value.chart;if(!F.value||!window.Chart||!te.isConnected)return;const s=getComputedStyle(document.documentElement),i=s.getPropertyValue("--dm-primary").trim()||"rgb(99, 102, 241)",g=s.getPropertyValue("--dm-text-muted").trim()||"#888",S=`color-mix(in srgb, ${s.getPropertyValue("--dm-border").trim()||"#888"} 45%, transparent)`;A?.destroy(),A=new window.Chart(te,{type:t,data:{labels:e.map(p=>He(p.date).slice(0,5)),datasets:[{label:"Page views",data:e.map(p=>p.hits),borderColor:i,backgroundColor:t==="bar"?i:`color-mix(in srgb, ${i} 18%, transparent)`,fill:t==="line",tension:.3,borderWidth:2,pointRadius:e.length>40?0:2,borderRadius:3}]},options:{responsive:!0,maintainAspectRatio:!1,animation:!1,plugins:{legend:{display:!1}},scales:{y:{beginAtZero:!0,ticks:{precision:0,color:g},grid:{color:S}},x:{ticks:{maxRotation:0,autoSkip:!0,maxTicksLimit:10,color:g},grid:{display:!1}}}}})}));let b=null;o.add(()=>{try{b?.close(!0)}catch{}});function de(){if(!b){b=!0;try{ue()}catch(e){throw b=null,e}}}function ue(){const e=E.slideover({title:"Analytics settings",size:"md",position:"right"}),t=qe(`
                 <div class="an-panel-form">
+                    <section data-google-analytics></section>
+                    <h4>Display preferences</h4>
                     <div>
                         <label class="form-label" for="an-set-range">Open on</label>
                         <select id="an-set-range" class="form-input" data-model="range.value">
-                            ${Ce.map(o=>`<option value="${o}">${V[o]}</option>`).join("")}
+                            ${Te.map(r=>`<option value="${r}">${q[r]}</option>`).join("")}
                         </select>
                     </div>
                     <div>
@@ -31,7 +33,7 @@ import{apiRequest as b,getToken as be,refreshAccessToken as he}from"../api.js";i
                             <span data-help="How many pages the Top pages list shows. The filter still searches all of them, and the CSV export always has every page."></span>
                         </label>
                         <select id="an-set-limit" class="form-input" data-model="limit.value">
-                            ${Re.map(o=>`<option value="${o}">${o||"All"}</option>`).join("")}
+                            ${Ae.map(r=>`<option value="${r}">${r||"All"}</option>`).join("")}
                         </select>
                     </div>
                     <div>
@@ -59,4 +61,4 @@ import{apiRequest as b,getToken as be,refreshAccessToken as he}from"../api.js";i
                         <span class="spacer"></span>
                         <button type="button" class="btn btn-sm btn-primary" data-on-click="done">Done</button>
                     </div>
-                </div>`),s=(o,me=N=>N)=>M.computed({read:()=>i.value[o],write:N=>ie(o,me(N))}),r={range:s("range"),limit:s("limit",Number),chart:s("chart"),live:s("live"),confirmReset:s("confirmReset")};e.element.appendChild(t);const y=te(t),R=M.applyBindings(r,t,{methods:{done:()=>e.close(),reset:()=>{i.value={...Me}}}});ye(e,()=>{R.dispose(),y(),m===e&&(m=null)}),m=e,e.open()}fe(p,{id:"analytics-settings",icon:"settings",title:"Analytics settings",onClick:ce});const k=[...n.querySelectorAll(".an-list")];k[0].innerHTML=Ue,k[1].innerHTML=B,k[2].innerHTML=B,k[3].innerHTML=B,k[4].innerHTML=De,l.add(te(n,{position:"bottom"}));const ue=M.applyBindings(le,n,{methods:{refresh:()=>{S(),U()},showPages:()=>{u.value="pages"},showJourneys:()=>{u.value="journeys"},showSpikes:()=>{u.value="spikes"}}});l.add(()=>ue.dispose());const L=e=>Ae(e,location.origin),_=e=>{const t=L(e);t?window.open(t,"_blank","noopener"):E.toast("That address is not on this site, so it is not opened.",{type:"warning"})},pe=E.contextMenu(n,{cursor:"glyph",match:".an-row",inherit:!1,density:"compact",items:e=>{const t=e.dataset.url,s=Se(t,G);return[{header:t},{label:"Open on the site",icon:"external-link",disabled:!L(t),action:()=>_(t)},...s?[{label:"Edit the page",icon:"edit",action:()=>{location.hash=s}}]:[],{label:"Copy address",icon:"copy",disabled:!L(t),action:async()=>{const r=L(t);if(r)try{await navigator.clipboard.writeText(r),E.toast("Address copied.",{type:"success"})}catch{E.toast(r,{type:"info",duration:8e3})}}},{label:"Show only this page",icon:"filter",disabled:u.peek()==="pages"&&c.peek()===t,action:()=>{u.value="pages",c.value=t}}]}});l.add(()=>pe?.destroy?.());const ve=E.contextMenu(n.querySelector(".an-bar-end"),{cursor:"glyph",match:".an-more",inherit:!1,density:"compact",items:()=>[{label:`Export ${V[d.peek()].toLowerCase()} as CSV`,icon:"download",action:async()=>{try{await Ne(d.peek())}catch{E.toast("Export failed.",{type:"error"})}}},{type:"divider"},{label:"Reset all statistics\u2026",icon:"trash",danger:!0,action:async()=>{if(!(i.peek().confirmReset&&!await E.confirm("Delete every analytics counter for this site? This cannot be undone.")))try{if(await b("/analytics/stats",{method:"DELETE"}),!a)return;E.toast("Analytics reset.",{type:"success"}),se("#/analytics"),S()}catch{E.toast("Reset failed.",{type:"error"})}}}]});l.add(()=>ve?.destroy?.()),n.addEventListener("click",e=>{const t=e.target.closest(".an-kebab, .an-more");if(t){ae(t);return}const s=e.target.closest(".an-row");s?.dataset.url&&_(s.dataset.url)}),n.addEventListener("keydown",e=>{const t=e.target.closest(".an-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),ae(t)):e.key==="Enter"&&e.target===t&&t.dataset.url&&_(t.dataset.url))}),I.scan(n),Oe().then(()=>{a&&(F.value=!0)},()=>{a&&E.toast("The chart library could not be loaded; figures still work.",{type:"warning"})}),re(),await Promise.all([S(),U()])}};
+                </div>`),s=(r,he=V=>V)=>M.computed({read:()=>l.value[r],write:V=>re(r,he(V))}),i={range:s("range"),limit:s("limit",Number),chart:s("chart"),live:s("live"),confirmReset:s("confirmReset")};e.element.appendChild(t);const g=ae(t),S=M.applyBindings(i,t,{methods:{done:()=>e.close(),reset:()=>{l.value={...Re}}}}),p=we(t.querySelector("[data-google-analytics]"));Me(e,()=>{p.dispose(),S.dispose(),g(),b===e&&(b=null)});const be=e.close.bind(e);e.close=async r=>{!r&&p.dirty()&&!await E.confirm("Close with unsaved Google Analytics changes? They will be kept as a draft in this browser.")||be(r)},b=e,e.open()}ge(v,{id:"analytics-settings",icon:"settings",title:"Analytics settings",onClick:de});const R=[...n.querySelectorAll(".an-list")];R[0].innerHTML=_e,R[1].innerHTML=B,R[2].innerHTML=B,R[3].innerHTML=B,R[4].innerHTML=Ne,o.add(ae(n,{position:"bottom"}));const pe=M.applyBindings(ie,n,{methods:{refresh:()=>{C(),O()},showPages:()=>{u.value="pages"},showJourneys:()=>{u.value="journeys"},showSpikes:()=>{u.value="spikes"}}});o.add(()=>pe.dispose());const L=e=>Pe(e,location.origin),N=e=>{const t=L(e);t?window.open(t,"_blank","noopener"):E.toast("That address is not on this site, so it is not opened.",{type:"warning"})},ve=E.contextMenu(n,{cursor:"glyph",match:".an-row",inherit:!1,density:"compact",items:e=>{const t=e.dataset.url,s=Le(t,W);return[{header:t},{label:"Open on the site",icon:"external-link",disabled:!L(t),action:()=>N(t)},...s?[{label:"Edit the page",icon:"edit",action:()=>{location.hash=s}}]:[],{label:"Copy address",icon:"copy",disabled:!L(t),action:async()=>{const i=L(t);if(i)try{await navigator.clipboard.writeText(i),E.toast("Address copied.",{type:"success"})}catch{E.toast(i,{type:"info",duration:8e3})}}},{label:"Show only this page",icon:"filter",disabled:u.peek()==="pages"&&c.peek()===t,action:()=>{u.value="pages",c.value=t}}]}});o.add(()=>ve?.destroy?.());const me=E.contextMenu(n.querySelector(".an-bar-end"),{cursor:"glyph",match:".an-more",inherit:!1,density:"compact",items:()=>[{label:`Export ${q[d.peek()].toLowerCase()} as CSV`,icon:"download",action:async()=>{try{await Be(d.peek())}catch{E.toast("Export failed.",{type:"error"})}}},{type:"divider"},{label:"Reset all statistics\u2026",icon:"trash",danger:!0,action:async()=>{if(!(l.peek().confirmReset&&!await E.confirm("Delete every analytics counter for this site? This cannot be undone.")))try{if(await h("/analytics/stats",{method:"DELETE"}),!a)return;E.toast("Analytics reset.",{type:"success"}),ne("#/analytics"),C()}catch{E.toast("Reset failed.",{type:"error"})}}}]});o.add(()=>me?.destroy?.()),n.addEventListener("click",e=>{const t=e.target.closest(".an-kebab, .an-more");if(t){se(t);return}const s=e.target.closest(".an-row");s?.dataset.url&&N(s.dataset.url)}),n.addEventListener("keydown",e=>{const t=e.target.closest(".an-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),se(t)):e.key==="Enter"&&e.target===t&&t.dataset.url&&N(t.dataset.url))}),I.scan(n),Ve().then(()=>{a&&(F.value=!0)},()=>{a&&E.toast("The chart library could not be loaded; figures still work.",{type:"warning"})}),ce(),await Promise.all([C(),O()])}};

package/admin/js/views/search.js

@@ -1,7 +1,7 @@
-import{apiRequest as O}from"../api.js";import{addBannerAction as ae}from"../lib/plugin-chrome.js";import{helpPopovers as xe}from"../lib/help-popover.js";import{openMenuAt as re,sidebarCount as Se}from"../lib/tool-kit.js";import{POSITION_LABEL as ke,clampNotes as Me,draftQuestion as Ee,formFromSettings as _,keptDraft as Te,searchDraftKey as Re,liveChips as Le,maxRadius as Ce,payloadFromForm as l,previewState as ie,radiusForSize as Pe,resultRow as ze,snapshot as v}from"../lib/search-settings-arrange.js";import{fmtDateTime as qe}from"../lib/dates.js";import{SHAPES as Ae,whileLoading as De}from"../lib/loading.js";const Y=/^\/search(\?.*)?$/,Ne="#/search",Oe='<span class="ssx-chip" data-bind-class="cls">{{text}}</span>',_e=`
+import{apiRequest as A}from"../api.js";import{helpPopovers as ge}from"../lib/help-popover.js";import{openMenuAt as oe,sidebarCount as ye}from"../lib/tool-kit.js";import{POSITION_LABEL as xe,clampNotes as Se,draftQuestion as we,formFromSettings as D,keptDraft as ke,searchDraftKey as Me,liveChips as Ee,maxRadius as Te,payloadFromForm as l,previewState as ne,radiusForSize as Le,resultRow as Re,snapshot as d}from"../lib/search-settings-arrange.js";import{fmtDateTime as Pe}from"../lib/dates.js";import{SHAPES as ze,whileLoading as qe}from"../lib/loading.js";const Oe="#/search",Ae='<span class="ssx-chip" data-bind-class="cls">{{text}}</span>',De=`
 <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 d=null,ce=!1;function $e(){ce||!window.R?.use||(ce=!0,R.use((u,m,r)=>!(Y.test(m?.path||"")&&!Y.test(u?.path||""))||!d?.dirty()?r():E.confirm("You have unsaved search settings. Leave anyway? They are kept as a draft for your next visit.").then(o=>{o?r():history.replaceState(null,"","#/search")})),M.subscribe("router:afterChange",({to:u}={})=>{if(d&&!Y.test(u?.path||"")){const m=d;d=null,m.dispose()}}))}export const searchView={templateUrl:"/admin/js/templates/search.html",async onMount(u){if($e(),d){const e=d;d=null,e.dispose()}const m=[],r=e=>(m.push(e),e);let $=!1;const o=u.get(0).querySelector(".ssx")||u.get(0),j=()=>!$&&o.isConnected;let P="";try{P=S.get("auth_user")?.id||""}catch{}const c=Re(P),y=o.querySelector(".ssx-loading"),J=o.querySelector(".ssx-body");let F,K=null;try{[F,K]=await De(y,Promise.all([O("/search/settings"),O("/search/_count").catch(()=>null)]),Ae.rows)}catch(e){if(!o.isConnected)return;y&&(y.hidden=!0);const t=o.querySelector(".ssx-failed");t&&(t.textContent=`Could not load the search settings: ${e.message||e}. Reload the page to try again.`,t.hidden=!1);return}if(!o.isConnected)return;y&&(y.hidden=!0),J&&(J.hidden=!1);const z=M.observable(F),W=_(F),s={};for(const[e,t]of Object.entries(W))s[e]=M.observable(t);const g=()=>Object.fromEntries(Object.keys(s).map(e=>[e,s[e].peek()])),f=()=>Object.fromEntries(Object.keys(s).map(e=>[e,s[e].value])),w=M.observable(v(W)),x=M.computed(()=>v(f())!==w.value),q=M.observable(!1);let A=w.peek();const G=M.observable(K?{searchable:K.count}:null),X=M.observable([]);r(M.effect(()=>{X.value=Le(z.value,G.value).map(e=>({text:e.text,cls:e.tone?`is-${e.tone}`:""}))}));let h=Number(s.iconSize.peek())||52;r(M.effect(()=>{const e=Number(s.iconSize.value)||52;if(e===h)return;const t=Pe(s.iconRadius.peek(),h,e);h=e,String(t)!==String(s.iconRadius.peek())&&(s.iconRadius.value=String(t))}));const le=M.computed(()=>Ce(s.iconSize.value)),Z=o.querySelector("#ssx-radius");r(M.effect(()=>{Z&&(Z.max=String(le.value))}));const k=M.observable(""),T=M.observable([]),D=M.observable(""),N=M.observable(""),ue=M.computed(()=>ie(k.value,s.minQueryLength.value).note);let U=0,B=null;async function pe(){const e=ie(k.peek(),s.minQueryLength.peek()),t=++U;if(!e.run){T.value=[],N.value="",D.value="";return}const a=l(g()).maxResults;try{const n=await O(`/search/preview?q=${encodeURIComponent(k.peek().trim())}&max=${a}`);if(t!==U||!j())return;T.value=(n.results||[]).map(ze),D.value="";const i=T.peek().length;N.value=i?`${i} result${i===1?"":"s"} (showing up to ${n.maxResults}) from ${n.coverage?.searchable??"?"} searchable pages.`:`Nothing found in ${n.coverage?.searchable??"?"} searchable pages.`,n.coverage&&(G.value=n.coverage)}catch(n){if(t!==U)return;T.value=[],N.value="",D.value=`Search failed: ${n.message||n}`}}r(M.effect(()=>{k.value,s.maxResults.value,clearTimeout(B),B=setTimeout(pe,l(g()).debounceMs)})),r(()=>clearTimeout(B));async function H(){if(q.peek())return;q.value=!0;const e=g(),t=v(e);try{const n=(await O("/search/settings",{method:"PUT",body:JSON.stringify(l(e))}))?.settings||l(e),i=_(n);if(!j()){de(v(i),t);return}if(z.value=n,v(g())===t){h=Number(i.iconSize)||52;for(const[ge,we]of Object.entries(i))s[ge].value=we}w.value=v(i),A=w.peek(),x.peek()||L(),Se(Ne),E.toast(n.enabled?"Search settings saved.":"Saved - search is off on the public site.",{type:"success"})}catch(a){E.toast(`Not saved: ${a.message||a}`,{type:"error"})}finally{q.value=!1}}function L(){if(c)try{S.remove?S.remove(c):S.set(c,null)}catch{}}function de(...e){if(!c)return;let t=null;try{t=S.get(c)}catch{return}if(t?.form)try{e.includes(v(t.form))&&L()}catch{}}function fe(){const e=_(z.peek());h=Number(e.iconSize)||52;for(const[t,a]of Object.entries(e))s[t].value=a}o.querySelector(".ssx-chips").innerHTML=Oe;const b=o.querySelector(".ssx-list");b.innerHTML=_e;const C=e=>`${e}px`,ve={...s,dirty:x,saving:q,chips:X,query:k,results:T,previewNote:ue,previewError:D,previewMeta:N,clampText:M.computed(()=>Me(f()).join(" ")),sizeText:M.computed(()=>C(l(f()).iconSize)),radiusText:M.computed(()=>C(l(f()).iconRadius)),sizePx:M.computed(()=>C(l(f()).iconSize)),radiusPx:M.computed(()=>C(l(f()).iconRadius)),glyphPx:M.computed(()=>C(Math.round(l(f()).iconSize*20/52))),positionText:M.computed(()=>ke[s.position.value]||s.position.value)},me=E.tabs(o.querySelector(".ssx-tabs"),{tabSelector:".tab-item",panelSelector:".tab-panel"}),he=M.applyBindings(ve,o,{methods:{save:()=>H(),discard:()=>fe(),useNavbar:()=>{s.displayMode.value="navbar"},useFloating:()=>{s.displayMode.value="floating"},setPos:e=>{s.position.value=e}}});r(()=>he.dispose()),r(xe(o,{position:"bottom"}));const be=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}))}}],ye=E.contextMenu(b,{cursor:"glyph",match:".ssx-row",inherit:!1,density:"compact",items:e=>be(e.dataset.url)});r(()=>ye?.destroy?.());const ee=e=>{const t=e.target.closest(".ssx-row");if(!t)return;const a=e.target.closest(".ssx-kebab");if(a){re(a);return}window.open(t.dataset.url,"_blank","noopener")},te=e=>{const t=e.target.closest(".ssx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),re(t)):e.key==="Enter"&&e.target===t&&(e.preventDefault(),e.stopPropagation(),window.open(t.dataset.url,"_blank","noopener")))};b.addEventListener("click",ee),b.addEventListener("keydown",te),r(()=>{b.removeEventListener("click",ee),b.removeEventListener("keydown",te)}),ae(u,{id:"search-view-site",icon:"external-link",title:"View site",onClick:()=>window.open("/","_blank","noopener")}),ae(u,{id:"search-save",icon:"save",title:"Save (Ctrl+S)",onClick:()=>H()});const se=e=>{!(e.ctrlKey||e.metaKey)||e.key!=="s"||(e.preventDefault(),e.stopImmediatePropagation(),H())};document.addEventListener("keydown",se,!0),r(()=>document.removeEventListener("keydown",se,!0));let Q=null;try{Q=c?S.get(c):null}catch{}const p=Te(Q,w.peek(),P);let V=!p;const ne=()=>{if(c)if(x.peek())try{S.set(c,{owner:P,form:g(),was:A,at:new Date().toISOString()})}catch{}else V&&L()},oe=e=>{x.peek()&&(ne(),e.preventDefault(),e.returnValue="")};if(window.addEventListener("beforeunload",oe),r(()=>window.removeEventListener("beforeunload",oe)),d={dirty:()=>x.peek(),dispose(){$=!0,ne(),m.splice(0).reverse().forEach(e=>{try{e()}catch{}})}},I.scan(o),!p&&Q&&L(),p){const e=Ee({when:p.at?qe(p.at):"",stale:p.stale});if(await new Promise(a=>setTimeout(a,0)),await E.confirm(e.text,{title:e.title,confirmText:e.confirmText,cancelText:e.cancelText}))L(),V=!0;else if(j()){V=!0;const a={..._(z.peek()),...p.form};h=Number(a.iconSize)||52;for(const[n,i]of Object.entries(a))s[n]&&(s[n].value=i);A=p.was||A}}}};
+</div>`;export async function mountSearchSettings(H,{onDirty:ae=()=>{},onReady:re=()=>{}}={}){const K=[],r=e=>(K.push(e),e);let B=!1;const a=H.get(0).querySelector(".ssx")||H.get(0),T=()=>!B&&a.isConnected;let L="";try{L=S.get("auth_user")?.id||""}catch{}const c=Me(L),b=a.querySelector(".ssx-loading"),Q=a.querySelector(".ssx-body");let $,C=null;try{[$,C]=await qe(b,Promise.all([A("/search/settings"),A("/search/_count").catch(()=>null)]),ze.rows)}catch(e){if(!a.isConnected)return;b&&(b.hidden=!0);const t=a.querySelector(".ssx-failed");t&&(t.textContent=`Could not load the search settings: ${e.message||e}. Reload the page to try again.`,t.hidden=!1);return}if(!a.isConnected)return;b&&(b.hidden=!0),Q&&(Q.hidden=!1);const R=M.observable($),V=D($),s={};for(const[e,t]of Object.entries(V))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])),g=M.observable(d(V)),f=M.computed(()=>d(p())!==g.value);r(M.effect(()=>ae(f.value)));const P=M.observable(!1);let z=g.peek();const J=M.observable(C?{searchable:C.count}:null),Y=M.observable([]);r(M.effect(()=>{Y.value=Ee(R.value,J.value).map(e=>({text:e.text,cls:e.tone?`is-${e.tone}`:""}))}));let m=Number(s.iconSize.peek())||52;r(M.effect(()=>{const e=Number(s.iconSize.value)||52;if(e===m)return;const t=Le(s.iconRadius.peek(),m,e);m=e,String(t)!==String(s.iconRadius.peek())&&(s.iconRadius.value=String(t))}));const ie=M.computed(()=>Te(s.iconSize.value)),G=a.querySelector("#ssx-radius");r(M.effect(()=>{G&&(G.max=String(ie.value))}));const y=M.observable(""),x=M.observable([]),q=M.observable(""),O=M.observable(""),ce=M.computed(()=>ne(y.value,s.minQueryLength.value).note);let N=0,_=null;async function le(){const e=ne(y.peek(),s.minQueryLength.peek()),t=++N;if(!e.run){x.value=[],O.value="",q.value="";return}const n=l(h()).maxResults;try{const o=await A(`/search/preview?q=${encodeURIComponent(y.peek().trim())}&max=${n}`);if(t!==N||!T())return;x.value=(o.results||[]).map(Re),q.value="";const i=x.peek().length;O.value=i?`${i} result${i===1?"":"s"} (showing up to ${o.maxResults}) from ${o.coverage?.searchable??"?"} searchable pages.`:`Nothing found in ${o.coverage?.searchable??"?"} searchable pages.`,o.coverage&&(J.value=o.coverage)}catch(o){if(t!==N)return;x.value=[],O.value="",q.value=`Search failed: ${o.message||o}`}}r(M.effect(()=>{y.value,s.maxResults.value,clearTimeout(_),_=setTimeout(le,l(h()).debounceMs)})),r(()=>clearTimeout(_));async function W(){if(P.peek())return;P.value=!0;const e=h(),t=d(e);try{const o=(await A("/search/settings",{method:"PUT",body:JSON.stringify(l(e))}))?.settings||l(e),i=D(o);if(!T()){ue(d(i),t);return}if(R.value=o,d(h())===t){m=Number(i.iconSize)||52;for(const[be,he]of Object.entries(i))s[be].value=he}return g.value=d(i),z=g.peek(),f.peek()||w(),ye(Oe),E.toast(o.enabled?"Search settings saved.":"Saved - search is off on the public site.",{type:"success"}),!0}catch(n){return E.toast(`Search not saved: ${n.message||n}`,{type:"error"}),!1}finally{P.value=!1}}function w(){if(c)try{S.remove?S.remove(c):S.set(c,null)}catch{}}function ue(...e){if(!c)return;let t=null;try{t=S.get(c)}catch{return}if(t?.form)try{e.includes(d(t.form))&&w()}catch{}}function X(){const e=D(R.peek());m=Number(e.iconSize)||52;for(const[t,n]of Object.entries(e))s[t].value=n}a.querySelector(".ssx-chips").innerHTML=Ae;const v=a.querySelector(".ssx-list");v.innerHTML=De;const k=e=>`${e}px`,pe={...s,dirty:f,saving:P,chips:Y,query:y,results:x,previewNote:ce,previewError:q,previewMeta:O,clampText:M.computed(()=>Se(p()).join(" ")),sizeText:M.computed(()=>k(l(p()).iconSize)),radiusText:M.computed(()=>k(l(p()).iconRadius)),sizePx:M.computed(()=>k(l(p()).iconSize)),radiusPx:M.computed(()=>k(l(p()).iconRadius)),glyphPx:M.computed(()=>k(Math.round(l(p()).iconSize*20/52))),positionText:M.computed(()=>xe[s.position.value]||s.position.value)},de=E.tabs(a.querySelector(".ssx-tabs"),{tabSelector:".tab-item",panelSelector:".tab-panel"});r(()=>de.destroy?.());const fe=M.applyBindings(pe,a,{methods:{save:()=>W(),discard:()=>X(),useNavbar:()=>{s.displayMode.value="navbar"},useFloating:()=>{s.displayMode.value="floating"},setPos:e=>{s.position.value=e}}});r(()=>fe.dispose()),r(ge(a,{position:"bottom"}));const me=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}))}}],ve=E.contextMenu(v,{cursor:"glyph",match:".ssx-row",inherit:!1,density:"compact",items:e=>me(e.dataset.url)});r(()=>ve?.destroy?.());const Z=e=>{const t=e.target.closest(".ssx-row");if(!t)return;const n=e.target.closest(".ssx-kebab");if(n){oe(n);return}window.open(t.dataset.url,"_blank","noopener")},ee=e=>{const t=e.target.closest(".ssx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),oe(t)):e.key==="Enter"&&e.target===t&&(e.preventDefault(),e.stopPropagation(),window.open(t.dataset.url,"_blank","noopener")))};v.addEventListener("click",Z),v.addEventListener("keydown",ee),r(()=>{v.removeEventListener("click",Z),v.removeEventListener("keydown",ee)});let j=null;try{j=c?S.get(c):null}catch{}const u=ke(j,g.peek(),L);let F=!u;const te=()=>{if(c)if(f.peek())try{S.set(c,{owner:L,form:h(),was:z,at:new Date().toISOString()})}catch{}else F&&w()},se=e=>{f.peek()&&(te(),e.preventDefault(),e.returnValue="")};window.addEventListener("beforeunload",se),r(()=>window.removeEventListener("beforeunload",se));const U={save:W,discard:X,dirty:()=>f.peek(),dispose(){B=!0,te(),K.splice(0).reverse().forEach(e=>{try{e()}catch{}})}};if(re(U),!T())return U;if(I.scan(a),!u&&j&&w(),u){const e=we({when:u.at?Pe(u.at):"",stale:u.stale});if(await new Promise(n=>setTimeout(n,0)),await E.confirm(e.text,{title:e.title,confirmText:e.confirmText,cancelText:e.cancelText}))w(),F=!0;else if(T()){F=!0;const n={...D(R.peek()),...u.form};m=Number(n.iconSize)||52;for(const[o,i]of Object.entries(n))s[o]&&(s[o].value=i);z=u.was||z}}return U}export const searchView={template:"",onMount(){location.replace("#/settings?tab=search")}};