domma-cms 0.73.0 → 0.75.0

package/admin/js/templates/theme.html

@@ -1,94 +1,90 @@
-<div class="page-header">
-    <h1 id="theme-title"><span data-icon="droplet"></span> Theme</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="/" target="_blank" rel="noopener" class="btn btn-ghost btn-sm">
-            <span data-icon="external-link"></span> View site
-        </a>
-        <button id="theme-save-btn" class="btn btn-primary"><span data-icon="save"></span> Save</button>
-    </div>
-</div>
+<!-- Content › Theme. Bound with M.applyBindings - see admin/js/views/theme.js, which also inserts the
+     override row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner above is the heading; Save and View site are banner actions. -->
+<div class="thx">
+    <p class="thx-alert is-bad" data-bind-hidden="!problemsText.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span data-bind-text="problemsText.value"></span></p>
+    <div class="thx-alert is-bad" data-bind-hidden="!errorsText.value">
+        <span data-icon="x-circle" data-icon-size="16"></span>
+        <span><strong>Not saved.</strong> <span data-bind-text="errorsText.value"></span></span></div>
+    <p class="thx-alert is-dirty" data-bind-hidden="!dirty.value">
+        <span data-icon="edit-3" data-icon-size="16"></span>
+        <span>Unsaved changes - Save (Ctrl+S) to apply them. Leave and they are kept as a draft for next time.</span>
+        <span class="thx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">Save</button></p>
 
-<div id="theme-errors" class="alert alert-danger mb-3" style="display:none;"></div>
+    <div class="tabs thx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Themes</button>
+            <button type="button" class="tab-item">Element overrides <span class="thx-count" data-bind-text="overrides.value.length"></span></button>
+        </div>
 
-<div class="tabs" id="theme-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">Themes</button>
-        <button class="tab-item">Element Overrides</button>
-    </div>
+        <!-- Themes -->
+        <div class="tab-panel active">
+            <div class="thx-card">
+                <div class="thx-card-title">Live now
+                    <span data-help-title="Live now" data-help="What the public site and this admin show at the moment - the saved settings, not what you are editing. With day/night switching on, the site changes theme at the times below, on each visitor's own clock."></span></div>
+                <div class="thx-chips">
+                    <span class="thx-chip is-ok" data-bind-text="liveSite.value"></span>
+                    <span class="thx-chip" data-bind-text="liveAdmin.value"></span>
+                    <span class="thx-chip" data-bind-hidden="!liveOverrides.value" data-bind-text="liveOverrides.value"></span>
+                    <span class="thx-chip" data-bind-hidden="!liveSwitcher.value" data-bind-text="liveSwitcher.value"></span>
+                </div>
+            </div>
 
-    <!-- ------------------------------------------------------------------ -->
-    <!-- Themes                                                              -->
-    <!-- ------------------------------------------------------------------ -->
-    <div class="tab-panel active">
-        <div class="card mb-4">
-            <div class="card-header"><h2>Site &amp; Admin</h2></div>
-            <div class="card-body">
-                <div class="row mb-3">
-                    <div class="col-6">
-                        <label class="form-label">Front-end Theme</label>
-                        <select id="theme-frontend" class="form-select"></select>
-                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">
-                            Applied to every public page.</p>
+            <div class="thx-card">
+                <div class="thx-card-title">Site &amp; admin</div>
+                <div class="thx-grid">
+                    <div>
+                        <label class="form-label" for="thx-site">Site theme
+                            <span data-help="Every public page. With day/night switching on, this is replaced by the day and night themes below."></span></label>
+                        <select id="thx-site" class="form-select" data-model="theme.value" data-bind-disabled="autoEnabled.value"></select>
+                        <small class="thx-hint" data-bind-hidden="!autoEnabled.value">Switching is on - the day and night themes below apply.</small>
                     </div>
-                    <div class="col-6">
-                        <label class="form-label">Admin Theme</label>
-                        <select id="theme-admin" class="form-select"></select>
-                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">
-                            Applied to this admin panel. Takes effect as soon as you save.</p>
+                    <div>
+                        <label class="form-label" for="thx-admin">Admin theme
+                            <span data-help="This admin panel, for everyone who signs in. Applied as soon as you save. Admin-only palettes (Sharp, Smooth) are offered here and nowhere else."></span></label>
+                        <select id="thx-admin" class="form-select" data-model="adminTheme.value"></select>
                     </div>
                 </div>
-
-                <div class="row">
-                    <div class="col">
-                        <label class="form-check-label" style="display:flex;align-items:center;gap:.5rem;cursor:pointer;">
-                            <input id="theme-auto-enabled" type="checkbox" class="form-check">
-                            Switch automatically between a day and a night theme
-                        </label>
-                    </div>
+                <div class="thx-setting">
+                    <label class="form-label" for="thx-auto">Switch between a day and a night theme
+                        <span data-help-title="Day and night" data-help="The site shows the day theme from the day start until the night start, then the night theme - by each visitor's local time. They need not be a light/dark pair. The admin theme is not affected."></span></label>
+                    <input id="thx-auto" type="checkbox" class="form-switch" data-model="autoEnabled.value">
                 </div>
-                <div id="theme-auto-fields" class="row mt-3" style="display:none;">
-                    <div class="col-6">
-                        <label class="form-label">Day Theme</label>
-                        <select id="theme-day" class="form-select"></select>
+                <div class="thx-grid" data-bind-hidden="!autoEnabled.value">
+                    <div>
+                        <label class="form-label" for="thx-day">Day theme</label>
+                        <select id="thx-day" class="form-select" data-model="dayTheme.value"></select>
                     </div>
-                    <div class="col-6">
-                        <label class="form-label">Night Theme</label>
-                        <select id="theme-night" class="form-select"></select>
+                    <div>
+                        <label class="form-label" for="thx-night">Night theme</label>
+                        <select id="thx-night" class="form-select" data-model="nightTheme.value"></select>
                     </div>
-                    <div class="col-3 mt-3">
-                        <label class="form-label">Day Starts At</label>
-                        <input id="theme-day-start" type="time" class="form-input" value="07:00">
+                    <div>
+                        <label class="form-label" for="thx-day-start">Day starts at</label>
+                        <input id="thx-day-start" type="time" class="form-input" data-model="dayStart.value">
                     </div>
-                    <div class="col-3 mt-3">
-                        <label class="form-label">Night Starts At</label>
-                        <input id="theme-night-start" type="time" class="form-input" value="19:00">
-                    </div>
-                    <div class="col-12 mt-2">
-                        <p class="form-hint text-muted" style="font-size:.8rem;">Themes switch on each visitor's local
-                            time. They need not be a light/dark pair.</p>
+                    <div>
+                        <label class="form-label" for="thx-night-start">Night starts at</label>
+                        <input id="thx-night-start" type="time" class="form-input" data-model="nightStart.value">
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="card mb-4">
-            <div class="card-header"><h2>Theme Switcher</h2></div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-12">
-                        <label class="form-check-label">
-                            <input id="theme-switcher-enabled" type="checkbox" class="form-check">
-                            Show a theme switcher on the public site
-                        </label>
-                        <p class="form-hint text-muted" style="margin-top:.35rem;font-size:.8rem;">
-                            A floating disc of theme dots that lets a visitor pick their own theme.
-                            It offers every theme the stylesheet ships.</p>
-                    </div>
+            <div class="thx-card">
+                <div class="thx-card-title">Theme switcher</div>
+                <div class="thx-setting">
+                    <label class="form-label" for="thx-sw">Show a theme switcher on the public site
+                        <span data-help-title="Theme switcher" data-help="A floating disc of theme dots that lets a visitor pick their own theme, remembered in their browser. It offers the built-in themes only - custom themes cannot be switched to from the page."></span></label>
+                    <input id="thx-sw" type="checkbox" class="form-switch" data-model="swEnabled.value">
                 </div>
-                <div id="theme-switcher-fields" class="row mt-3" style="display:none;">
-                    <div class="col-4">
-                        <label class="form-label">Position</label>
-                        <select id="theme-switcher-position" class="form-select">
+                <div class="thx-grid thx-grid-3" data-bind-hidden="!swEnabled.value">
+                    <div>
+                        <label class="form-label" for="thx-sw-pos">Position</label>
+                        <select id="thx-sw-pos" class="form-select" data-model="swPosition.value">
                             <option value="right-center">Right, centred</option>
                             <option value="left-center">Left, centred</option>
                             <option value="bottom-right">Bottom right</option>
@@ -97,25 +93,24 @@
                             <option value="top-left">Top left</option>
                         </select>
                     </div>
-                    <div class="col-4">
-                        <label class="form-label">Offset X (px)</label>
-                        <input id="theme-switcher-offset-x" type="number" class="form-input" min="0" max="400">
+                    <div>
+                        <label class="form-label" for="thx-sw-x">Offset X (px)</label>
+                        <input id="thx-sw-x" type="number" class="form-input" min="0" max="400" data-model="swOffsetX.value">
                     </div>
-                    <div class="col-4">
-                        <label class="form-label">Offset Y (px)</label>
-                        <input id="theme-switcher-offset-y" type="number" class="form-input" min="0" max="400">
+                    <div>
+                        <label class="form-label" for="thx-sw-y">Offset Y (px)</label>
+                        <input id="thx-sw-y" type="number" class="form-input" min="0" max="400" data-model="swOffsetY.value">
                     </div>
                 </div>
             </div>
-        </div>
 
-        <div class="card">
-            <div class="card-header"><h2>Typography</h2></div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-6">
-                        <label class="form-label">Font Family</label>
-                        <select id="theme-font-family" class="form-select">
+            <div class="thx-card">
+                <div class="thx-card-title">Typography</div>
+                <div class="thx-grid">
+                    <div>
+                        <label class="form-label" for="thx-font">Font family
+                            <span data-help="Public site body text. The dyslexia-friendly group uses wider letterforms and spacing."></span></label>
+                        <select id="thx-font" class="form-select" data-model="fontFamily.value">
                             <optgroup label="Sans-serif">
                                 <option value="Roboto">Roboto (default)</option>
                                 <option value="Inter">Inter</option>
@@ -144,12 +139,11 @@
                                 <option value="system-ui">System UI (no web font)</option>
                             </optgroup>
                         </select>
-                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">Public site body text.
-                            The dyslexia-friendly group uses wider letterforms and spacing.</p>
                     </div>
-                    <div class="col-3">
-                        <label class="form-label">Font Size</label>
-                        <select id="theme-font-size" class="form-select">
+                    <div>
+                        <label class="form-label" for="thx-size">Font size
+                            <span data-help="The root font size. Every rem value on the site scales with it."></span></label>
+                        <select id="thx-size" class="form-select" data-model="fontSize.value">
                             <option value="13">13px - Compact</option>
                             <option value="14">14px - Small</option>
                             <option value="15">15px - Slightly small</option>
@@ -158,51 +152,89 @@
                             <option value="18">18px - Large</option>
                             <option value="20">20px - Extra large</option>
                         </select>
-                        <p class="form-hint text-muted" style="margin-top:.4rem;font-size:.8rem;">Root font size. Every
-                            rem value scales with it.</p>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <!-- ------------------------------------------------------------------ -->
-    <!-- Element overrides                                                   -->
-    <!-- ------------------------------------------------------------------ -->
-    <div class="tab-panel">
-        <div class="card mb-4">
-            <div class="card-body">
-                <p class="text-muted" style="margin:0 0 .75rem;">
-                    An override re-themes one region of the page. Give it a CSS selector, then either adopt another
-                    theme wholesale or set individual design tokens. Everything inside that region follows - including
-                    components rendered later - because a Domma theme is nothing but a block of
-                    <code>--dm-*</code> values.
-                </p>
-                <button id="theme-add-override" class="btn btn-ghost btn-sm" type="button">
-                    <span data-icon="plus"></span> Add override
-                </button>
+        <!-- Element overrides -->
+        <div class="tab-panel">
+            <div class="thx-card">
+                <div class="thx-card-title">Element overrides
+                    <span data-help-title="Element overrides" data-help="An override re-themes one region of the page: give it a CSS selector, then adopt another theme there wholesale, or set individual --dm-* tokens. Everything inside the region follows, including components drawn later, because a Domma theme is nothing but a block of --dm-* values. Click an override to edit it; right-click it (or ⋮, or Shift+F10) to switch it off, duplicate, move or remove it. Order matters: later overrides win where they overlap."></span>
+                    <span class="thx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="addOverride">
+                        <span data-icon="plus" data-icon-size="14"></span> Add override</button>
+                </div>
+                <p class="thx-note" data-bind-hidden="overrides.value.length">No overrides yet - the whole site uses the site theme.</p>
+                <div class="thx-list" data-each="rows.value key=id"></div>
             </div>
-        </div>
 
-        <div id="theme-overrides"></div>
-        <p id="theme-overrides-empty" class="text-muted" style="text-align:center;padding:2rem 0;">
-            No overrides yet. The whole site uses the front-end theme.
-        </p>
-
-        <div class="card mt-4">
-            <div class="card-header">
-                <h2>Generated CSS</h2>
-                <button id="theme-refresh-css" class="btn btn-ghost btn-sm" type="button">
-                    <span data-icon="refresh-cw"></span> Refresh
-                </button>
-            </div>
-            <div class="card-body">
-                <p class="text-muted" style="margin-top:0;font-size:.85rem;">
-                    Exactly what is injected into every public page, ahead of your custom CSS.
-                </p>
-                <pre id="theme-css-preview" class="p-3"
-                     style="max-height:320px;overflow:auto;background:var(--dm-surface-raised);border-radius:var(--dm-radius-md);font-size:.8rem;margin:0;">(nothing yet)</pre>
+            <div class="thx-card">
+                <div class="thx-card-title">Generated CSS
+                    <span data-help="Exactly what is injected into every public page for the overrides, ahead of your custom CSS - so hand-written CSS still wins. It follows your edits, before you save."></span>
+                    <span class="thx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="refreshCss" title="Compile again">
+                        <span data-icon="refresh-cw" data-icon-size="14"></span> Refresh</button>
+                </div>
+                <pre class="thx-css" data-bind-class="cssError.value && 'is-bad'" data-bind-text="cssText.value">(nothing yet)</pre>
             </div>
         </div>
     </div>
 </div>
+
+<style>
+.thx { display: flex; flex-direction: column; gap: .75rem; }
+.thx [hidden], .thx-form [hidden] { display: none !important; }
+.thx-alert { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.thx-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.thx-alert.is-dirty { background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.thx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.thx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .7rem; margin-top: .75rem; }
+.thx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.thx-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.thx-spacer { flex: 1; }
+.thx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
+.thx-grid-3 { grid-template-columns: 2fr 1fr 1fr; }
+.thx .form-label, .thx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.thx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.thx-setting .form-label { margin: 0; }
+.thx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .3rem; }
+.thx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.thx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.thx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
+.thx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.thx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.thx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.thx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.thx-list { display: flex; flex-direction: column; }
+.thx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.thx-row:last-child { border-bottom: 0; }
+.thx-row:hover, .thx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.thx-row.is-off .thx-main strong { color: var(--dm-text-muted); }
+.thx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.thx-main strong, .thx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.thx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.thx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.thx-kebab:hover { color: var(--dm-primary); }
+.thx-css { margin: 0; max-height: 320px; overflow: auto; padding: .75rem; background: var(--dm-surface-raised); border-radius: var(--dm-radius-md);
+    font-size: var(--dm-text-xs); color: var(--dm-text); white-space: pre-wrap; }
+.thx-css.is-bad { color: var(--dm-danger); }
+/* The override editor (slideover) */
+.thx-form { display: flex; flex-direction: column; gap: .85rem; }
+.thx-tok { display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem; flex-wrap: wrap; }
+.thx-tok .thx-tok-name { flex: 1 1 12rem; }
+.thx-tok .thx-tok-value { flex: 0 1 9rem; }
+.thx-tok input[type="color"] { flex: 0 0 38px; height: 34px; padding: 0; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: none; cursor: pointer; }
+.thx-tok .thx-err { flex-basis: 100%; margin: 0; }
+.thx-diff { padding: .5rem .6rem; border-radius: var(--dm-radius-md); background: var(--dm-surface-raised); font-size: var(--dm-text-xs); display: flex; flex-direction: column; gap: .35rem; }
+.thx-diff p { margin: 0; }
+.thx-diff .is-warn { color: var(--dm-warning); }
+.thx-diff-list { display: flex; flex-wrap: wrap; gap: .15rem .75rem; color: var(--dm-text-muted); }
+.thx-sw { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; border: 1px solid var(--dm-border); vertical-align: middle; margin-right: .25rem; }
+.thx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.thx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 720px) { .thx-grid, .thx-grid-3 { grid-template-columns: 1fr; } }
+</style>

package/admin/js/templates/views-list.html

@@ -1,12 +1,66 @@
-<div class="view-header">
-    <h1><span data-icon="eye"></span> Views</h1>
-    <button id="create-view-btn" class="btn btn-primary">
-        <span data-icon="plus"></span> New View
-    </button>
-</div>
+<!-- Data › Views. Bound with M.applyBindings - see admin/views/views-list.js, which also inserts the row
+     template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the
+     Tool banner above is the heading, and New view is a banner action. -->
+<div class="vwx">
+    <p class="vwx-note">Saved queries over a collection - filter, sort, group, join - shown with
+        <code>[view slug="…" /]</code> on any page, or read through the API.
+        <span data-help-title="Views" data-help="A view reads one collection through a pipeline of stages and shows the result in a display mode (table, cards, list…). MongoDB collections run the pipeline as a native aggregation; file collections run the same stages in the CMS. Access decides who may see it: public, or only the roles listed."></span></p>
+
+    <p class="vwx-scope" data-bind-hidden="!project">
+        <span data-bind-text="scopeText.value"></span>
+        <a href="#/views">Show all views</a>
+    </p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="views-table"></div>
+    <div class="vwx-card">
+        <div class="vwx-bar">
+            <div class="vwx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showAll" data-bind-class="filter.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showPublic" data-bind-class="filter.value === 'public' && 'is-on'">Public <b data-bind-text="counts.value.public"></b></button>
+                <button type="button" data-on-click="showRestricted" data-bind-class="filter.value === 'restricted' && 'is-on'">Restricted <b data-bind-text="counts.value.restricted"></b></button>
+                <button type="button" data-on-click="showBroken" data-bind-class="filter.value === 'broken' && 'is-on'" data-bind-hidden="!counts.value.broken">Missing source <b data-bind-text="counts.value.broken"></b></button>
+            </div>
+            <input type="search" class="form-input vwx-search" placeholder="Search views…" aria-label="Search views" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a view to edit it. Right-click it (or ⋮, or Shift+F10) to preview its results, copy its shortcode, duplicate it or delete it. A view whose collection has been deleted is listed first, in red - it errors wherever it is shown until it reads from another collection."></span>
+        </div>
+        <p class="vwx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="vwx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="vwx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="vwx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.vwx { display: flex; flex-direction: column; gap: .75rem; }
+.vwx [hidden] { display: none !important; }
+.vwx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.vwx-note.is-bad { color: var(--dm-danger); }
+.vwx-scope { margin: 0; display: flex; gap: .5rem; align-items: center; padding: .5rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 10%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.vwx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.vwx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.vwx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.vwx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.vwx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.vwx-seg button + button { border-left: 1px solid var(--dm-border); }
+.vwx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.vwx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.vwx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.vwx-list { display: flex; flex-direction: column; }
+.vwx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.vwx-row:last-child { border-bottom: 0; }
+.vwx-row:hover, .vwx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.vwx-row.is-broken { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.vwx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.vwx-main strong, .vwx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vwx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.vwx-main small.is-bad { color: var(--dm-danger); }
+.vwx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.vwx-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); max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
+.vwx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.vwx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.vwx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.vwx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; }
+.vwx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 720px) { .vwx-chips .vwx-chip.is-info { display: none; } }
+</style>

package/admin/js/views/actions-list.js

@@ -1 +1,37 @@
-import{api as r}from"../api.js";import{filterByProject as p,getProjectFromHash as m,renderProjectFilterNotice as u}from"../lib/project-context.js";import{keepTableIconsAlive as g}from"../lib/table-icons.js";function i(e){return String(e).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}export const actionsListView={templateUrl:"/admin/js/templates/actions-list.html",async onMount(e){await d(e),g(e.get(0)),e.off("click",".js-delete-action").on("click",".js-delete-action",async function(){const n=this.dataset.slug;if(await E.confirm(`Delete action "${n}"? This cannot be undone.`))try{await r.actions.delete(n),E.toast("Action deleted.",{type:"success"}),await d(e)}catch{E.toast("Failed to delete action.",{type:"error"})}}),e.find("#create-action-btn").off("click").on("click",()=>{R.navigate("/actions/new")}),Domma.icons.scan()}};async function d(e){let n=[];const l=E.loader(e.get(0),{type:"dots"});try{n=await r.actions.list(),e.find("#actions-pro-notice").hide()}catch(t){t.message?.includes("MongoDB")||t.message?.includes("pro mode")||t.message?.includes("connection")?e.find("#actions-pro-notice").show():E.toast("Could not load actions.",{type:"error"})}finally{l.destroy()}const c=m();if(c){const t=n.length;n=p(n,c),u(e,{total:t,shown:n.length,slug:c,allHref:"#/actions",noun:"actions"})}T.create("#actions-table",{pageSize:25,data:n,columns:[{key:"title",title:"Title",render:(t,a)=>{const o=document.createElement("a");return o.href=`#/actions/edit/${i(a.slug)}`,o.textContent=t,o.style.fontWeight="600",o.outerHTML}},{key:"slug",title:"Slug",render:t=>`<code>${i(t)}</code>`},{key:"collection",title:"Collection",render:t=>`<code>${i(t||"-")}</code>`},{key:"trigger",title:"Trigger",render:t=>i(t?.label||t?.type||"manual")},{key:"steps",title:"Steps",render:t=>String(Array.isArray(t)?t.length:0)},{key:"access",title:"Roles",render:t=>(t?.roles||[]).map(a=>`<span class="badge badge-secondary">${i(a)}</span>`).join(" ")},{key:"slug",title:"Actions",render:t=>{const a=document.createElement("div");a.style.cssText="display:flex;gap:.4rem;justify-content:flex-end;";const o=document.createElement("a");o.href=`#/actions/edit/${i(t)}`,o.className="btn btn-sm btn-ghost",o.setAttribute("data-tooltip","Edit"),o.innerHTML='<span data-icon="edit" data-icon-size="14"></span>';const s=document.createElement("button");return s.className="btn btn-sm btn-ghost js-delete-action",s.dataset.slug=t,s.setAttribute("data-tooltip","Delete"),s.innerHTML='<span data-icon="trash" data-icon-size="14"></span>',a.appendChild(o),a.appendChild(s),a.outerHTML}}],emptyMessage:'No actions yet. Click "New Action" to create your first action.'}),Domma.icons.scan(),document.querySelectorAll("#actions-table [data-tooltip]").forEach(t=>{E.tooltip(t,{content:t.getAttribute("data-tooltip"),position:"top"})})}
+import{apiRequest as $}from"../api.js";import{addBannerAction as ge}from"../lib/plugin-chrome.js";import{helpPopovers as Q}from"../lib/help-popover.js";import{onceClosed as he,openMenuAt as X,sidebarCount as Z,viewLifetime as be}from"../lib/tool-kit.js";import{filterByProject as ye,getProjectFromHash as we}from"../lib/project-context.js";import{actionRow as xe,arrangeActions as Ee,collectionsOf as Me,duplicateAction as ke,isMongoMissing as Se,projectNotice as $e}from"../lib/actions-arrange.js";const ee=/^#\/(actions|projects\/[^/?#]+\/actions)\/?(\?.*)?$/,te="#/actions",T="actions.duplicate.draft",Te=`
+<div class="acx-row" data-slug="{{slug}}" tabindex="0">
+    <span class="acx-icon" aria-hidden="true"><span data-icon="zap" data-icon-size="16"></span></span>
+    <span class="acx-main"><strong>{{title}}</strong><small>{{meta}}</small></span>
+    <span class="acx-chips">
+        <span class="acx-chip is-col" title="Runs on this collection's entries" data-bind-hidden="!collection">{{collection}}</span>
+        <span class="acx-chip is-trig" title="Its button">{{trigger}}</span>
+        <span class="acx-chip is-flow" title="State transition" data-bind-hidden="!transition">{{transition}}</span>
+        <span class="acx-chip" title="{{stepsTitle}}" data-bind-class="noSteps ? 'is-warn' : ''">{{steps}}</span>
+        <span class="acx-chip" title="Who may run it">{{roles}}</span>
+        <span class="acx-chip" title="Project" data-bind-hidden="!project">{{project}}</span>
+    </span>
+    <button type="button" class="acx-kebab" aria-label="Actions for {{title}}" title="Actions">\u22EE</button>
+</div>`,C=u=>String(u??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");function Ce(u){const l=document.createElement("template");return l.innerHTML=u.trim(),l.content.firstElementChild}const o=be(ee);export const actionsListView={templateUrl:"/admin/js/templates/actions-list.html",async onMount(u){o.reset();const l=u.get(0).querySelector(".acx")||u.get(0),f=()=>ee.test(location.hash)&&l.isConnected,v=we(),i=M.observable([]),q=M.observable(0),U=M.observable(!0),L=M.observable(""),h=M.observable(!1),H=M.observable(""),b=M.observable(""),y=M.observable([]);o.add(M.effect(()=>{y.value=Ee(i.value,{query:H.value,collection:b.value}).map(xe)}));const P=M.computed(()=>Me(i.value)),ae=M.computed(()=>{const e=y.value.length,t=i.value.length;return e===t?`${t} action${t===1?"":"s"}`:`${e} of ${t}`}),ne=M.computed(()=>i.value.length?"No actions match.":"No actions yet - New action in the banner makes one."),se=M.computed(()=>$e(q.value,i.value.length,v)),w=e=>i.peek().find(t=>t.slug===e);async function A(){try{const e=await $("/actions/_count",{method:"GET"}).catch(()=>null);if(!f())return;if(e?.available===!1){h.value=!0;return}const t=await $("/actions",{method:"GET"});if(!f())return;const a=Array.isArray(t)?t:[];q.value=a.length,i.value=v?ye(a,v):a,h.value=!1,L.value=""}catch(e){if(!f())return;Se(e)?h.value=!0:L.value=`Could not load the actions: ${e.message||e}`}finally{U.value=!1}}const D=e=>{location.hash=`#/actions/edit/${encodeURIComponent(e)}`},oe=()=>{location.hash=v?`#/actions/new?project=${encodeURIComponent(v)}`:"#/actions/new"};async function le(e){if(await E.confirm(`Delete the action "${C(e.title||e.slug)}"? Its button disappears from the "${C(e.collection)}" entries. This cannot be undone.`))try{await $(`/actions/${encodeURIComponent(e.slug)}`,{method:"DELETE"}),E.toast(`Deleted "${e.title||e.slug}".`,{type:"success"}),Z(te),await A()}catch(t){E.toast(`Not deleted: ${t.message||t}`,{type:"error"})}}async function ie(e){try{await navigator.clipboard.writeText(e.slug),E.toast(`Copied "${e.slug}".`,{type:"success"})}catch{E.toast("The browser would not copy it - the slug is in the row.",{type:"warning"})}}let d=null;const O=new Set;function B(e,t=null){const a=w(e);if(!a){E.toast(`There is no action "${e}" here.`,{type:"warning"});return}const R={title:t?.title??`${a.title||a.slug} copy`,slug:t?.slug??""},g={title:M.observable(R.title),slug:M.observable(R.slug)},_=()=>({title:g.title.peek(),slug:g.slug.peek()}),de=JSON.stringify(R),J=()=>JSON.stringify(_())!==de||!!t,k=M.observable(!1),p=M.computed(()=>ke(a,{title:g.title.value,slug:g.slug.value},i.value.map(n=>n.slug))),W={...g,saving:k,titleErr:M.computed(()=>p.value.errors.title||""),slugErr:M.computed(()=>p.value.errors.slug||""),slugHint:M.computed(()=>p.value.errors.slug?"":`Will be created as "${p.value.payload.slug}".`),cannot:M.computed(()=>k.value||Object.keys(p.value.errors).length>0)},s=E.slideover({title:`Duplicate ${C(a.title||a.slug)}`,size:"sm",position:"right"}),m=Ce(`
+                <div class="acx-form">
+                    <p class="acx-note">The copy runs on the same collection, with the same button, steps, roles and
+                        transition. Edit it afterwards to make it different.</p>
+                    <div>
+                        <label class="form-label" for="acx-f-title">Title <span class="text-danger">*</span></label>
+                        <input id="acx-f-title" type="text" class="form-input" maxlength="120" data-model="title.value">
+                        <small class="acx-err" data-bind-hidden="!titleErr.value" data-bind-text="titleErr.value"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="acx-f-slug">Slug
+                            <span data-help="The action's id - in its address and in the [transitions] shortcode. Leave it empty to make one from the title."></span></label>
+                        <input id="acx-f-slug" type="text" class="form-input font-mono" maxlength="100" placeholder="from the title" data-model="slug.value">
+                        <small class="acx-err" data-bind-hidden="!slugErr.value" data-bind-text="slugErr.value"></small>
+                        <small class="acx-hint" data-bind-hidden="!slugHint.value" data-bind-text="slugHint.value"></small>
+                    </div>
+                    <div class="acx-actions">
+                        <small class="acx-hint">Ctrl+Enter saves.</small>
+                        <span class="acx-spacer"></span>
+                        <button type="button" class="btn btn-sm btn-ghost" data-on-click="cancel">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
+                            <span data-icon="copy" data-icon-size="13"></span> Duplicate</button>
+                    </div>
+                </div>`);let j=!1;async function G(){if(!W.cannot.peek()){k.value=!0;try{const n=await $("/actions",{method:"POST",body:JSON.stringify(p.peek().payload)});E.toast(`Made "${n?.title||p.peek().payload.title}".`,{type:"success"}),j=!0,s.close(),Z(te),f()&&await A()}catch(n){E.toast(`Not duplicated: ${n.message||n}`,{type:"error"})}finally{k.value=!1}}}s.element.appendChild(m);const pe=Q(m),fe=M.applyBindings(W,m,{methods:{save:G,cancel:()=>s.close()}});m.addEventListener("keydown",n=>{(n.ctrlKey||n.metaKey)&&n.key==="Enter"&&(n.preventDefault(),G())});const V={source:a.slug,dirty:J,values:_};d=V,O.add(s),he(s,()=>{fe.dispose(),pe(),O.delete(s),d===V&&(d=null)});const me=s.close.bind(s);let N=!1;s.close=async n=>{if(!j&&n!==!0&&J()){if(N)return;N=!0;const ve=await E.confirm("Discard the changes you have not saved?");if(N=!1,!ve)return}return j=!0,me()},I.scan(m),s.open();const Y=m.querySelector("#acx-f-title");Y?.focus(),Y?.select()}function ce(e){const t=w(e);return t?[{header:t.title||t.slug},{label:"Edit",icon:"edit",action:()=>D(t.slug)},{label:"Duplicate\u2026",icon:"copy",action:()=>B(t.slug)},{type:"divider"},{label:`Open ${t.collection||"collection"} entries`,icon:"database",disabled:!t.collection,action:()=>{location.hash=`#/collections/${encodeURIComponent(t.collection)}/entries`}},{label:"Copy slug",icon:"clipboard",action:()=>ie(t)},{type:"divider"},{label:"Delete\u2026",icon:"trash",danger:!0,action:()=>le(t)}]:[]}const c=l.querySelector(".acx-list");c.innerHTML=Te;const re=M.applyBindings({loading:U,loadError:L,needsMongo:h,query:H,collection:b,collections:P,rows:y,countText:ae,emptyText:ne,notice:se},l);o.add(()=>re.dispose()),o.add(Q(l,{position:"bottom"}));const x=l.querySelector(".acx-filter");o.add(M.effect(()=>{const e=P.value,t=b.peek();x.replaceChildren(new Option("All collections",""),...e.map(a=>new Option(a,a))),x.value=e.includes(t)?t:"",x.value!==t&&(b.value=x.value)})),o.add(M.effect(()=>{y.value,requestAnimationFrame(()=>{c.isConnected&&I.scan(c)})}));const ue=E.contextMenu(c,{cursor:"glyph",match:".acx-row",inherit:!1,density:"compact",items:e=>ce(e.dataset.slug)});o.add(()=>ue?.destroy?.());const F=e=>{const t=e.target.closest(".acx-row");if(!t)return;const a=e.target.closest(".acx-kebab");if(a){X(a);return}D(t.dataset.slug)},K=e=>{const t=e.target.closest(".acx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),X(t)):e.key==="Enter"&&e.target===t&&D(t.dataset.slug))};c.addEventListener("click",F),c.addEventListener("keydown",K),o.add(()=>{c.removeEventListener("click",F),c.removeEventListener("keydown",K)}),ge(u,{id:"actions-new",icon:"plus",title:"New action",onClick:oe});const z=e=>{d?.dirty()&&(e.preventDefault(),e.returnValue="")};if(window.addEventListener("beforeunload",z),o.add(()=>window.removeEventListener("beforeunload",z)),o.add(()=>{if(d?.dirty())try{S.set(T,{source:d.source,values:d.values(),at:new Date().toISOString()})}catch{}[...O].forEach(e=>{try{e.close(!0)}catch{}})}),I.scan(l),await A(),!f())return;let r=null;try{r=S.get(T)}catch{}if(r?.values&&r.source){try{S.remove?S.remove(T):S.set(T,null)}catch{}w(r.source)&&await E.confirm(`You left a copy of "${C(w(r.source).title||r.source)}" unfinished. Pick up where you left off?`)&&f()&&B(r.source,r.values)}}};

package/admin/js/views/api-endpoints.js

@@ -1,7 +1,11 @@
-import{api as d}from"../api.js";import{filterByProject as p,getProjectFromHash as c,renderProjectFilterNotice as r}from"../lib/project-context.js";import{keepTableIconsAlive as b}from"../lib/table-icons.js";function n(a){return String(a??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function g(a){return a==="public"?'<span class="badge badge-warning">Public</span>':a==="token"?'<span class="badge badge-info">Token</span>':`<span class="badge badge-secondary">${n(a)}</span>`}export const apiEndpointsView={templateUrl:"/admin/js/templates/api-endpoints.html",async onMount(a){const l=E.loader(a.get(0),{type:"dots"});let o=await d.apiEndpoints.list().catch(()=>[]);l.destroy();const s=c();if(s){const e=o.length;o=p(o,s),r(a,{total:e,shown:o.length,slug:s,allHref:"#/api-endpoints",noun:"endpoints"})}T.create("#api-endpoints-table",{pageSize:25,data:o,emptyMessage:'No endpoints yet. Click "New endpoint" to build one.',columns:[{key:"name",title:"Name",sortable:!0},{key:"path",title:"URL",render:(e,t)=>`<code>/api/x/${n(t.project)}${n(t.path)}</code>`},{key:"collection",title:"Collection",sortable:!0,render:e=>`<code>${n(e)}</code>`},{key:"mode",title:"Mode",render:e=>n(e)},{key:"auth",title:"Auth",render:e=>g(e)},{key:"enabled",title:"Status",render:e=>e?'<span class="badge badge-success">Enabled</span>':'<span class="badge badge-secondary">Disabled</span>'},{key:"_actions",title:"Actions",render:(e,t)=>`
-                        <span style="display:inline-flex;gap:0.25rem;">
-                            <a class="btn btn-sm btn-ghost" href="#/api-endpoints/edit/${encodeURIComponent(t.id)}" data-tooltip="Edit"><span data-icon="edit" data-icon-size="14"></span></a>
-                            <button class="btn btn-sm btn-ghost btn-toggle-endpoint" data-id="${n(t.id)}" data-enabled="${t.enabled?"1":""}" data-tooltip="${t.enabled?"Disable":"Enable"}"><span data-icon="${t.enabled?"pause":"play"}" data-icon-size="14"></span></button>
-                            <button class="btn btn-sm btn-ghost btn-delete-endpoint" data-id="${n(t.id)}" data-name="${n(t.name)}" data-tooltip="Delete"><span data-icon="trash" data-icon-size="14"></span></button>
-                        </span>
-                    `}]}),Domma.icons.scan(a.get(0)),b(a.get(0)),document.querySelectorAll("#api-endpoints-table [data-tooltip]").forEach(e=>{E.tooltip(e,{content:e.getAttribute("data-tooltip"),position:"top"})}),a.off("click",".btn-toggle-endpoint").on("click",".btn-toggle-endpoint",async function(){const e=$(this).data("id"),t=!!$(this).data("enabled");try{await d.apiEndpoints.update(e,{enabled:!t}),E.toast(`Endpoint ${t?"disabled":"enabled"}.`,{type:"success"}),location.reload()}catch(i){E.toast(`Update failed: ${i.message||i}`,{type:"error"})}}),a.off("click",".btn-delete-endpoint").on("click",".btn-delete-endpoint",async function(){const e=$(this).data("id"),t=$(this).data("name");if(await E.confirm(`Delete endpoint "${t}"? External callers using it will immediately get 404s. This cannot be undone.`))try{await d.apiEndpoints.remove(e),E.toast("Endpoint deleted.",{type:"success"}),location.reload()}catch(i){E.toast(`Delete failed: ${i.message||i}`,{type:"error"})}})}};
+import{apiRequest as y}from"../api.js";import{addBannerAction as z}from"../lib/plugin-chrome.js";import{helpPopovers as Q}from"../lib/help-popover.js";import{openMenuAt as D,sidebarCount as P,viewLifetime as X}from"../lib/tool-kit.js";import{getProjectFromHash as Z}from"../lib/project-context.js";import{FILTERS as ee,arrangeEndpoints as te,countEndpoints as ne,endpointRow as g,endpointUrl as q,pathParams as oe,projectsOf as ae}from"../lib/api-endpoints-arrange.js";const O=/^#\/(api-endpoints|projects\/[^/?#]+\/apis)\/?(\?.*)?$/,N="#/api-endpoints",w="api-endpoints.filter",se=`
+<div class="apx-row" data-id="{{id}}" tabindex="0" data-bind-class="rowCls">
+    <span class="apx-verb" title="Endpoints answer GET requests">GET</span>
+    <span class="apx-main"><strong>{{name}}</strong><code title="{{url}}">{{url}}</code><small>{{meta}}</small></span>
+    <span class="apx-chips">
+        <span class="apx-chip" title="Project - the first part of its URL">{{project}}</span>
+        <span class="apx-chip" data-bind-class="authCls" title="Who may call it">{{auth}}</span>
+        <span class="apx-chip is-off" data-bind-hidden="!off" title="Answers 404 until enabled">Disabled</span>
+    </span>
+    <button type="button" class="apx-kebab" aria-label="Actions for {{name}}" title="Actions">\u22EE</button>
+</div>`,f=l=>String(l??"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;"),c=X(O);async function ie(l){try{return await navigator.clipboard.writeText(l),!0}catch{const o=document.createElement("textarea");o.value=l,o.setAttribute("readonly",""),o.style.cssText="position:fixed;left:-9999px;top:0;",document.body.appendChild(o),o.select();let m=!1;try{m=document.execCommand("copy")}catch{}return o.remove(),m}}export const apiEndpointsView={templateUrl:"/admin/js/templates/api-endpoints.html",async onMount(l){c.reset();const o=l.get(0).querySelector(".apx")||l.get(0),m=()=>O.test(location.hash)&&o.isConnected,s=/^#\/projects\//.test(location.hash)?Z():null,a=M.observable([]),x=M.observable(!0),v=M.observable("");let C="all";try{C=ee.includes(S.get(w))?S.get(w):"all"}catch{}const r=M.observable(C),b=M.observable(s||""),k=M.observable("");c.add(M.effect(()=>{const e=r.value;try{S.set(w,e)}catch{}}));const d=M.computed(()=>s?a.value.filter(e=>e.project===s):a.value),$=M.observable([]);c.add(M.effect(()=>{$.value=te(d.value,{filter:r.value,project:b.value,query:k.value}).map(g)}));const B=M.computed(()=>ne(d.value)),F=M.computed(()=>d.value.length?"No endpoints match.":s?"This project has no endpoints yet - New endpoint in the banner makes one.":"No endpoints yet - New endpoint in the banner builds one."),H=M.computed(()=>s?`Showing the ${d.value.length} endpoint${d.value.length===1?"":"s"} of the "${s}" project (of ${a.value.length}).`:""),j=e=>a.peek().find(t=>t.id===e);async function _(){try{const e=await y("/api-endpoints",{method:"GET"});if(!m())return;a.value=Array.isArray(e)?e:[],v.value=""}catch(e){v.value=`Could not load the endpoints: ${e.message||e}`}finally{x.value=!1}}const T=e=>`#/api-endpoints/edit/${encodeURIComponent(e)}`,G=()=>s?`#/api-endpoints/new?project=${encodeURIComponent(s)}`:"#/api-endpoints/new";async function L(e,t){if(!(!t&&!await E.confirm(`Disable "${f(e.name)}"? Callers of ${f(g(e).url)} get 404s until it is enabled again.`)))try{const n=await y(`/api-endpoints/${encodeURIComponent(e.id)}`,{method:"PUT",body:JSON.stringify({enabled:t})});a.value=a.peek().map(i=>i.id===e.id?{...i,...n||{},enabled:t}:i),E.toast(`"${e.name}" ${t?"enabled":"disabled"}.`,{type:"success"}),P(N)}catch(n){E.toast(`Not changed: ${n.message||n}`,{type:"error"})}}async function K(e){if(await E.confirm(`Delete the endpoint "${f(e.name)}"? Callers of ${f(g(e).url)} get 404s at once. This cannot be undone.`))try{await y(`/api-endpoints/${encodeURIComponent(e.id)}`,{method:"DELETE"}),a.value=a.peek().filter(t=>t.id!==e.id),E.toast(`Deleted "${e.name}".`,{type:"success"}),P(N)}catch(t){E.toast(`Delete failed: ${t.message||t}`,{type:"error"})}}async function W(e){const t=q(e,location.origin);E.toast(await ie(t)?`Copied ${t}`:`Copy this URL: ${t}`,{type:"success"})}function J(e){const t=j(e);if(!t)return[];const n=t.enabled===!1,i=oe(t.path).length>0,u=!n&&t.auth==="public"&&!i;return[{header:t.name||t.path},{label:"Open in the builder",icon:"edit",action:()=>{location.hash=T(t.id)}},{label:"Copy URL",icon:"copy",action:()=>W(t)},{label:i?"Open in a new tab (needs params)":t.auth==="public"?"Open in a new tab":"Open in a new tab (not public)",icon:"external-link",disabled:!u,action:()=>window.open(q(t,location.origin),"_blank","noopener")},{type:"divider"},n?{label:"Enable",icon:"play",action:()=>L(t,!0)}:{label:"Disable\u2026",icon:"pause",action:()=>L(t,!1)},{type:"divider"},{label:"Delete\u2026",icon:"trash",danger:!0,action:()=>K(t)}]}const p=o.querySelector(".apx-list");p.innerHTML=se;const h=o.querySelector(".apx-project");c.add(M.effect(()=>{const e=ae(a.value),t=b.peek();h.replaceChildren();const n=document.createElement("option");n.value="",n.textContent="All projects",h.appendChild(n);for(const i of e){const u=document.createElement("option");u.value=i,u.textContent=i,h.appendChild(u)}h.value=e.includes(t)?t:"",!s&&t&&!e.includes(t)&&(b.value="")}));const V=M.applyBindings({endpoints:a,loading:x,loadError:v,filter:r,project:b,query:k,rows:$,counts:B,emptyText:F,scopeText:H,projectLocked:M.observable(!!s)},o,{methods:{showAll:()=>{r.value="all"},showEnabled:()=>{r.value="enabled"},showDisabled:()=>{r.value="disabled"},showPublic:()=>{r.value="public"}}});c.add(()=>V.dispose()),c.add(Q(o,{position:"bottom"}));const Y=E.contextMenu(p,{cursor:"glyph",match:".apx-row",inherit:!1,density:"compact",items:e=>J(e.dataset.id)});c.add(()=>Y?.destroy?.());const R=e=>{j(e)&&(location.hash=T(e))},U=e=>{const t=e.target.closest(".apx-row");if(!t)return;const n=e.target.closest(".apx-kebab");if(n){D(n);return}R(t.dataset.id)},A=e=>{const t=e.target.closest(".apx-row");t&&(e.key==="F10"&&e.shiftKey?(e.preventDefault(),D(t)):e.key==="Enter"&&e.target===t&&R(t.dataset.id))};p.addEventListener("click",U),p.addEventListener("keydown",A),c.add(()=>{p.removeEventListener("click",U),p.removeEventListener("keydown",A)}),z(l,{id:"api-endpoints-new",icon:"plus",title:"New endpoint",onClick:()=>{location.hash=G()}}),I.scan(o),await _()}};