domma-cms 0.74.0 → 0.76.0

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

@@ -1,19 +1,78 @@
-<div class="view-header">
-    <h1><span data-icon="zap"></span> Actions</h1>
-    <button id="create-action-btn" class="btn btn-primary">
-        <span data-icon="plus"></span> New Action
-    </button>
-</div>
+<!-- Actions. Bound with M.applyBindings - see admin/views/actions-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 action is a banner action. -->
+<div class="acx">
+    <p class="acx-note">Buttons on a collection's entries that run steps - update a field, move or create an entry,
+        call a webhook, send an email.
+        <span data-help-title="Actions" data-help="An action belongs to one collection and shows as a button on its entries (in the admin's entry list, and on the site with the [transitions] shortcode). Its steps run in order. With a transition set, it only appears while the entry's field has one of its 'from' values, and moves it to 'to'. Roles decide who may run it."></span></p>
 
-<div id="actions-pro-notice" class="card mb-3" style="display:none;">
-    <div class="card-body" style="color:var(--dm-warning,#f59e0b);display:flex;align-items:center;gap:.6rem;">
-        <span data-icon="warning"></span>
-        <span>Actions require a MongoDB connection (pro mode). Configure one under Collections → Options.</span>
+    <!-- File mode: actions live in MongoDB. A state of the site, explained, not an error. -->
+    <div class="acx-card acx-pro" data-bind-hidden="!needsMongo.value">
+        <div class="acx-card-title"><span data-icon="database" data-icon-size="16"></span> Actions need MongoDB</div>
+        <p class="acx-note">Actions are a Pro feature: their settings are kept in MongoDB, and this site has no
+            MongoDB connection. Add a "default" connection (pro mode) and they appear here. Nothing else on the site
+            is affected.</p>
     </div>
-</div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="actions-table"></div>
+    <p class="acx-notice" data-bind-hidden="!notice.value">
+        <span data-bind-text="notice.value"></span> <a href="#/actions">Show all actions</a></p>
+
+    <div class="acx-card" data-bind-hidden="needsMongo.value">
+        <div class="acx-bar">
+            <input type="search" class="form-input acx-search" placeholder="Search actions…" aria-label="Search actions" data-model="query.value">
+            <select class="form-input acx-filter" aria-label="Collection" data-model="collection.value" data-bind-hidden="!collections.value.length">
+                <option value="">All collections</option>
+            </select>
+            <span class="acx-count" data-bind-text="countText.value"></span>
+            <span data-help-title="The list" data-help="Click an action to edit it. Right-click it (or ⋮, or Shift+F10) to edit, duplicate, open its collection's entries, copy its slug or delete it."></span>
+        </div>
+        <p class="acx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="acx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="acx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="acx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.acx { display: flex; flex-direction: column; gap: .75rem; }
+.acx [hidden], .acx-form [hidden] { display: none !important; }
+.acx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.acx-note.is-bad { color: var(--dm-danger); }
+.acx-notice { margin: 0; padding: .5rem .75rem; border-radius: var(--dm-radius-md); font-size: var(--dm-text-sm);
+    background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 12%, transparent); color: var(--dm-text); }
+.acx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.acx-card-title { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
+.acx-pro { border-left: 3px solid var(--dm-warning); }
+.acx-pro .acx-card-title { color: var(--dm-warning); }
+.acx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.acx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.acx-filter { width: auto; max-width: 14rem; }
+.acx-count { color: var(--dm-text-muted); font-size: var(--dm-text-sm); margin-left: auto; }
+.acx-list { display: flex; flex-direction: column; }
+.acx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.acx-row:last-child { border-bottom: 0; }
+.acx-row:hover, .acx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.acx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-warning); background: color-mix(in srgb, var(--dm-warning) 14%, transparent); }
+.acx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.acx-main strong, .acx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.acx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.acx-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; max-width: 55%; }
+.acx-chip { display: inline-flex; align-items: center; gap: .25rem; 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); }
+.acx-chip.is-col { background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-primary); font-family: var(--dm-font-mono, monospace); }
+.acx-chip.is-trig { background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-warning); }
+.acx-chip.is-flow { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.acx-chip.is-warn { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.acx-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; }
+.acx-kebab:hover { color: var(--dm-primary); }
+/* The Duplicate slideover */
+.acx-form { display: flex; flex-direction: column; gap: .85rem; }
+.acx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.acx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.acx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.acx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.acx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.acx-spacer { flex: 1; }
+@media (max-width: 720px) { .acx-chips { display: none; } }
+</style>

package/admin/js/templates/api-endpoints.html

@@ -1,13 +1,66 @@
-<div class="page-header">
-    <h2><span data-icon="code"></span> API Builder</h2>
-    <div class="header-actions">
-        <a class="btn btn-primary" href="#/api-endpoints/new"><span data-icon="plus"></span> New endpoint</a>
-    </div>
-</div>
-<p class="text-muted mb-4">Custom REST endpoints over collection data, served at <code>/api/x/&lt;project&gt;&lt;path&gt;</code>. Each endpoint binds a clean URL to a fixed collection query - definitions are data, never code.</p>
+<!-- API Builder list. Bound with M.applyBindings - see admin/views/api-endpoints.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 endpoint is a banner action. -->
+<div class="apx">
+    <p class="apx-note">Clean REST URLs over collection data, served at <code>/api/x/&lt;project&gt;&lt;path&gt;</code>.
+        Each endpoint binds a URL to a fixed collection query - definitions are data, never code.
+        <span data-help-title="API Builder" data-help="An endpoint answers GET requests at its URL with entries from one collection, filtered by values from the URL (:params) and the query string. Who may call it is set per endpoint: Public (anyone), API token (a token for its project), or a role (signed-in users). Only the fields you list are returned. An endpoint may only read collections in its own project or Core."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="api-endpoints-table"></div>
+    <div class="apx-card">
+        <div class="apx-bar">
+            <div class="apx-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="showEnabled" data-bind-class="filter.value === 'enabled' && 'is-on'">Enabled <b data-bind-text="counts.value.enabled"></b></button>
+                <button type="button" data-on-click="showDisabled" data-bind-class="filter.value === 'disabled' && 'is-on'">Disabled <b data-bind-text="counts.value.disabled"></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>
+            </div>
+            <select class="form-input apx-project" aria-label="Project" data-model="project.value" data-bind-hidden="projectLocked.value"></select>
+            <input type="search" class="form-input apx-search" placeholder="Search endpoints…" aria-label="Search endpoints" data-model="query.value">
+            <span data-help-title="The list" data-help="Click an endpoint to open it in the builder, where you can try it. Right-click it (or ⋮, or Shift+F10) to copy its URL, open it in a new tab, enable or disable it, or delete it. A disabled endpoint answers 404 until it is enabled again."></span>
+        </div>
+        <p class="apx-note apx-scope" data-bind-hidden="!projectLocked.value">
+            <span data-bind-text="scopeText.value"></span> <a href="#/api-endpoints">Show all endpoints</a></p>
+        <p class="apx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="apx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="apx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="apx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.apx { display: flex; flex-direction: column; gap: .75rem; }
+.apx [hidden] { display: none !important; }
+.apx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.apx-note.is-bad { color: var(--dm-danger); }
+.apx-note code { font-size: .95em; }
+.apx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.apx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.apx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.apx-project { width: auto; min-width: 9rem; }
+.apx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.apx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.apx-seg button + button { border-left: 1px solid var(--dm-border); }
+.apx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.apx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.apx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.apx-list { display: flex; flex-direction: column; }
+.apx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.apx-row:last-child { border-bottom: 0; }
+.apx-row:hover, .apx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.apx-verb { flex-shrink: 0; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); font-weight: 700; padding: .15rem .45rem;
+    border-radius: var(--dm-radius-sm); color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.apx-row.is-off .apx-verb { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.apx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.apx-main strong, .apx-main code, .apx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.apx-main code { font-size: var(--dm-text-sm); color: var(--dm-text); background: none; padding: 0; }
+.apx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.apx-row.is-off .apx-main strong, .apx-row.is-off .apx-main code { color: var(--dm-text-muted); }
+.apx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.apx-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); }
+.apx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.apx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.apx-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; }
+.apx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 720px) { .apx-chips .apx-chip:not(.is-warn):not(.is-off) { display: none; } }
+</style>

package/admin/js/templates/api-tokens.html

@@ -1,13 +1,86 @@
-<div class="page-header">
-    <h2><span data-icon="key"></span> API Tokens</h2>
-    <div class="header-actions">
-        <button class="btn btn-primary" id="btn-new-token"><span data-icon="plus"></span> New token</button>
-    </div>
-</div>
-<p class="text-muted mb-4">Project-scoped tokens for the external collections API (<code>/api/v1/&lt;collection&gt;</code>). A token only works on collections whose API access mode is set to <strong>Token</strong>, and only within the token's project. The token value is shown once, at creation.</p>
+<!-- API Tokens. Bound with M.applyBindings - see admin/js/views/api-tokens.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 token is a banner action. -->
+<div class="atx">
+    <p class="atx-note">Project-scoped keys for the external collections API (<code>/api/v1/&lt;collection&gt;</code>) and API Builder
+        endpoints set to token access.
+        <span data-help-title="API tokens" data-help="A token works only on collections in its own project, and only where a collection's API access is set to Token. The token itself is shown once, when it is made - only a fingerprint is kept, so a lost token is revoked and a new one made. Scopes narrow a token to some collections and verbs; an expiry date retires it on its own."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="api-tokens-table"></div>
+    <div class="atx-card">
+        <div class="atx-bar">
+            <div class="atx-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="showActive" data-bind-class="filter.value === 'active' && 'is-on'">Active <b data-bind-text="counts.value.active"></b></button>
+                <button type="button" data-on-click="showExpiring" data-bind-class="filter.value === 'expiring' && 'is-on'" data-bind-hidden="!counts.value.expiring">Expiring soon <b data-bind-text="counts.value.expiring"></b></button>
+                <button type="button" data-on-click="showExpired" data-bind-class="filter.value === 'expired' && 'is-on'" data-bind-hidden="!counts.value.expired">Expired <b data-bind-text="counts.value.expired"></b></button>
+                <button type="button" data-on-click="showDisabled" data-bind-class="filter.value === 'disabled' && 'is-on'" data-bind-hidden="!counts.value.disabled">Off <b data-bind-text="counts.value.disabled"></b></button>
+            </div>
+            <select class="form-input atx-project" aria-label="Project" data-model="project.value" data-bind-hidden="projects.value.length < 2">
+                <option value="">All projects</option>
+            </select>
+            <input type="search" class="form-input atx-search" placeholder="Search name, project, scope…" aria-label="Search tokens" data-model="query.value">
+            <span data-help-title="The list" data-help="Tokens that need attention come first: expired ones (every call with them is refused) and ones expiring within two weeks. Click a token to edit its name, scopes or expiry, or switch it off; right-click it (or ⋮, or Shift+F10) to do that, copy its ending, show only its project, or revoke it. A token is never shown again after it is made - only its last four characters."></span>
+        </div>
+        <p class="atx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="atx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="atx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="atx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.atx { display: flex; flex-direction: column; gap: .75rem; }
+.atx [hidden], .atx-form [hidden], .atx-secret [hidden] { display: none !important; }
+.atx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.atx-note.is-bad { color: var(--dm-danger); }
+.atx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.atx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.atx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.atx-project { width: auto; max-width: 14rem; }
+.atx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.atx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.atx-seg button + button { border-left: 1px solid var(--dm-border); }
+.atx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.atx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.atx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.atx-list { display: flex; flex-direction: column; }
+.atx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.atx-row:last-child { border-bottom: 0; }
+.atx-row:hover, .atx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.atx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.atx-row.is-off .atx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.atx-row.is-off .atx-main strong { color: var(--dm-text-muted); }
+.atx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.atx-main strong, .atx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.atx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.atx-main code { font-size: inherit; background: none; padding: 0; color: inherit; }
+.atx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.atx-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); }
+.atx-chip:empty { display: none; }
+.atx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.atx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.atx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.atx-used { min-width: 6.5rem; text-align: right; color: var(--dm-text-muted); font-size: var(--dm-text-xs); white-space: nowrap; }
+.atx-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; }
+.atx-kebab:hover { color: var(--dm-primary); }
+/* The New / Edit slideover */
+.atx-form { display: flex; flex-direction: column; gap: .85rem; }
+.atx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.atx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.atx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.atx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.atx-setting .form-label { margin: 0; }
+.atx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.atx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.atx-spacer { flex: 1; }
+.atx-fixed { padding: .45rem .6rem; border: 1px dashed var(--dm-border); border-radius: var(--dm-radius-sm); color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+/* The created token, shown once */
+.atx-secret { display: flex; flex-direction: column; gap: .8rem; }
+.atx-warn { margin: 0; padding: .6rem .75rem; border-radius: var(--dm-radius-md); color: var(--dm-text);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); border: 1px solid color-mix(in srgb, var(--dm-warning) 35%, transparent); }
+.atx-token { display: block; padding: .65rem; word-break: break-all; user-select: all; border-radius: var(--dm-radius-sm);
+    background: var(--dm-surface-raised, color-mix(in srgb, var(--dm-text) 6%, transparent)); color: var(--dm-text); font-family: var(--dm-font-mono, monospace); }
+@media (max-width: 640px) { .atx-used { display: none; } }
+</style>

package/admin/js/templates/blocks.html

@@ -1,18 +1,79 @@
-<div class="view-header">
-    <h1><span data-icon="box"></span> Blocks</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <button id="import-block-btn" class="btn btn-ghost"
-                title="Import a .dmblock.json bundle">
-            <span data-icon="upload"></span> Import
-        </button>
-        <a href="#/blocks/new" class="btn btn-primary">
-            <span data-icon="plus"></span> New Block
-        </a>
+<!-- Blocks. Bound with M.applyBindings - see admin/views/blocks.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 block and Import are banner actions. -->
+<div class="blx">
+    <p class="blx-note">Reusable HTML templates - one look for a collection's entries, a card, a call to action - placed on a
+        page with a shortcode.
+        <span data-help-title="Blocks" data-help="A block is an HTML template with a placeholder for each field (the field name in double curly braces), and optionally its own CSS. Use it to show collection entries ([collection … display=&quot;block&quot; block=&quot;name&quot;]), on its own ([block template=&quot;name&quot; …]), or by its name as a short tag ([name … /]). Each block's comment at the top says what it expects; right-click a block to copy its shortcode."></span></p>
+
+    <!-- Hidden file picker driven by the Import banner action -->
+    <input class="blx-import-file" type="file" accept=".dmblock.json,application/json" hidden>
+
+    <div class="blx-card">
+        <div class="blx-bar">
+            <div class="blx-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="showUsed" data-bind-class="filter.value === 'used' && 'is-on'">In use <b data-bind-text="counts.value.used"></b></button>
+                <button type="button" data-on-click="showUnused" data-bind-class="filter.value === 'unused' && 'is-on'">Unused <b data-bind-text="counts.value.unused"></b></button>
+            </div>
+            <input type="search" class="form-input blx-search" placeholder="Search blocks…" aria-label="Search blocks" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a block to edit it. Right-click it (or ⋮, or Shift+F10) to copy its shortcode, see where it is used, duplicate, export or delete it. In use counts pages and views that place it; a block a plugin uses from its own code does not count, so check before deleting one marked unused."></span>
+        </div>
+        <p class="blx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="blx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="blx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="blx-list" data-each="rows.value key=name"></div>
     </div>
 </div>
 
-<!-- Hidden file picker driven by the Import button -->
-<input id="import-block-file" type="file" accept=".dmblock.json,application/json"
-       style="display:none;">
-
-<div id="blocks-table-container"></div>
+<style>
+.blx { display: flex; flex-direction: column; gap: .75rem; }
+.blx [hidden], .blx-form [hidden] { display: none !important; }
+.blx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.blx-note.is-bad { color: var(--dm-danger); }
+.blx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.blx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.blx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.blx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.blx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.blx-seg button + button { border-left: 1px solid var(--dm-border); }
+.blx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.blx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.blx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.blx-list { display: flex; flex-direction: column; }
+.blx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.blx-row:last-child { border-bottom: 0; }
+.blx-row:hover, .blx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.blx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.blx-row.is-unused .blx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.blx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.blx-main strong, .blx-main small, .blx-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.blx-main span { color: var(--dm-text); font-size: var(--dm-text-sm); }
+.blx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.blx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.blx-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); }
+.blx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.blx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.blx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.blx-uses { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.blx-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; }
+.blx-kebab:hover { color: var(--dm-primary); }
+/* Slideovers */
+.blx-form { display: flex; flex-direction: column; gap: .85rem; }
+.blx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.blx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.blx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.blx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.blx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.blx-spacer { flex: 1; }
+.blx-where { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
+.blx-where li { padding: .4rem .2rem; border-bottom: 1px solid var(--dm-border); }
+.blx-where li:last-child { border-bottom: 0; }
+.blx-where a { color: var(--dm-primary); text-decoration: none; }
+.blx-where small { color: var(--dm-text-muted); margin-left: .4rem; }
+.blx-code { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); background: var(--dm-surface-raised, color-mix(in srgb, var(--dm-text) 6%, transparent));
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); padding: .4rem .5rem; word-break: break-all; }
+@media (max-width: 640px) { .blx-uses, .blx-chips { display: none; } }
+</style>

package/admin/js/templates/collections.html

@@ -1,59 +1,115 @@
-<div class="view-header">
-    <h1><span data-icon="database"></span> Collections</h1>
-  <div id="collections-header-actions">
-    <button id="create-collection-btn" class="btn btn-primary">
-      <span data-icon="plus"></span> New Collection
-    </button>
-  </div>
-</div>
-
-<div class="tabs" id="collections-tabs">
-  <div class="tab-list">
-    <button class="tab-item active">Collections</button>
-    <button class="tab-item">Options</button>
-  </div>
-  <div class="tab-content">
+<!-- Collections. Bound with M.applyBindings - see admin/js/views/collections.js, which also inserts the row
+     templates (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the
+     Tool banner above is the heading, and New collection is a banner action. -->
+<div class="clx">
+    <p class="clx-note clx-scope" data-bind-hidden="!project.value">
+        <span data-bind-text="scopeText.value"></span>
+        <a href="#/collections">Show all collections</a>
+    </p>
 
-    <!-- Collections tab -->
-    <div class="tab-panel active">
-      <div class="card">
-        <div class="card-body">
-          <div id="collections-table"></div>
+    <div class="tabs clx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Collections <span class="clx-count" data-bind-text="kinds.value.all"></span></button>
+            <button type="button" class="tab-item" data-bind-hidden="!canConnect.value">Database connections <span class="clx-dirty" data-bind-hidden="!connDirty.value" title="Changes not saved yet">●</span></button>
         </div>
-      </div>
-    </div>
 
-    <!-- Options tab -->
-    <div class="tab-panel">
-      <div class="card">
-        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-          <h2>Database Connections</h2>
-          <div style="display:flex;align-items:center;gap:.75rem;">
-            <label style="display:flex;align-items:center;gap:.4rem;font-size:.875rem;cursor:pointer;">
-              <input type="checkbox" id="connections-raw-toggle"> Raw JSON
-            </label>
-            <button id="add-connection-btn" class="btn btn-ghost btn-sm" type="button">
-              <span data-icon="plus"></span> Add Connection
-            </button>
-            <button id="save-connections-btn" class="btn btn-primary btn-sm" type="button">
-              <span data-icon="save"></span> Save
-            </button>
-          </div>
+        <!-- Collections -->
+        <div class="tab-panel active">
+            <div class="clx-card">
+                <div class="clx-bar">
+                    <div class="clx-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="kinds.value.all"></b></button>
+                        <button type="button" data-on-click="showOwn" data-bind-class="filter.value === 'own' && 'is-on'">Yours <b data-bind-text="kinds.value.own"></b></button>
+                        <button type="button" data-on-click="showBuiltin" data-bind-class="filter.value === 'builtin' && 'is-on'">Built in <b data-bind-text="kinds.value.builtin"></b></button>
+                        <button type="button" data-on-click="showPlugin" data-bind-class="filter.value === 'plugin' && 'is-on'">Plugins <b data-bind-text="kinds.value.plugin"></b></button>
+                    </div>
+                    <input type="search" class="form-input clx-search" placeholder="Search collections…" aria-label="Search collections" data-model="query.value">
+                    <span data-help-title="Collections" data-help="A collection is a set of entries with the fields you define - products, events, testimonials. Click one to see its entries. Right-click it (or ⋮, or Shift+F10) to edit its fields and settings, open its form, copy its slug, or delete it. Built-in collections are the CMS's own and cannot be deleted; a plugin's can, but the plugin may stop working."></span>
+                    <span class="clx-spacer"></span>
+                    <span class="clx-note" data-bind-text="totalText.value"></span>
+                </div>
+                <p class="clx-note" data-bind-hidden="!loading.value">Loading…</p>
+                <p class="clx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="clx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+                <div class="clx-list" data-each="rows.value key=slug"></div>
+            </div>
         </div>
-        <div class="card-body">
-          <div id="connections-form-view">
-            <div id="connections-list"></div>
-            <p id="connections-empty" class="text-muted" style="text-align:center;padding:2rem 0;">
-              No connections configured. Add a connection to enable MongoDB storage.
-            </p>
-          </div>
-          <div id="connections-raw-view" style="display:none;">
-                        <textarea id="connections-raw-json" class="form-input" rows="12"
-                                  style="font-family:monospace;font-size:.8rem;resize:vertical;width:100%;"></textarea>
-          </div>
+
+        <!-- Database connections (admins only) -->
+        <div class="tab-panel">
+            <div class="clx-card">
+                <div class="clx-bar">
+                    <strong>MongoDB connections</strong>
+                    <span data-help-title="Database connections" data-help="Collections are stored as files unless their storage is set to MongoDB, which needs a connection here - usually one called default. Each needs a URI (mongodb://…) and a database name. Kept in config/connections.json; with none, every collection stays on files. Ctrl+S saves."></span>
+                    <span class="clx-spacer"></span>
+                    <label class="clx-toggle"><input type="checkbox" data-model="raw.value"> Raw JSON</label>
+                    <button type="button" class="btn btn-sm btn-ghost" data-on-click="addConnection" data-bind-hidden="raw.value">
+                        <span data-icon="plus" data-icon-size="14"></span> Add connection</button>
+                    <button type="button" class="btn btn-sm btn-primary" data-on-click="saveConnections" data-bind-disabled="savingConn.value || !connDirty.value">
+                        <span data-icon="save" data-icon-size="14"></span> Save</button>
+                </div>
+                <p class="clx-note" data-bind-hidden="!connLoading.value">Loading…</p>
+                <div data-bind-hidden="raw.value || connLoading.value">
+                    <p class="clx-note" data-bind-hidden="connRows.value.length">No connections - every collection is stored as files. Add one to use MongoDB.</p>
+                    <div class="clx-conns" data-each="connRows.value key=id"></div>
+                </div>
+                <div data-bind-hidden="!raw.value">
+                    <textarea class="form-input clx-raw" rows="12" spellcheck="false" aria-label="Connections as JSON" data-model="rawText.value"></textarea>
+                </div>
+                <p class="clx-note is-bad" data-bind-hidden="!connError.value" data-bind-text="connError.value"></p>
+            </div>
         </div>
-      </div>
     </div>
-
-  </div>
 </div>
+
+<style>
+.clx { display: flex; flex-direction: column; gap: .75rem; }
+.clx [hidden], .clx-form [hidden] { display: none !important; }
+.clx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.clx-note.is-bad { color: var(--dm-danger); }
+.clx-scope { padding: .5rem .75rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 10%, transparent); color: var(--dm-text); }
+.clx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.clx-dirty { color: var(--dm-warning); margin-left: .2rem; }
+.clx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; margin-top: .75rem; }
+.clx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.clx-bar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.clx-spacer { flex: 1; }
+.clx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.clx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.clx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.clx-seg button + button { border-left: 1px solid var(--dm-border); }
+.clx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.clx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.clx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.clx-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--dm-text-sm); cursor: pointer; }
+.clx-list { display: flex; flex-direction: column; }
+.clx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.clx-row:last-child { border-bottom: 0; }
+.clx-row:hover, .clx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.clx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.clx-row.is-builtin .clx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.clx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.clx-main strong, .clx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.clx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.clx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.clx-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); }
+.clx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.clx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.clx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.clx-num { min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.clx-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; }
+.clx-kebab:hover { color: var(--dm-primary); }
+.clx-conns { display: flex; flex-direction: column; gap: .5rem; }
+.clx-conn { display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: .5rem; align-items: end; padding: .6rem; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); }
+.clx-conn label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.clx-raw { width: 100%; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); resize: vertical; }
+.clx-form { display: flex; flex-direction: column; gap: .85rem; }
+.clx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.clx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.clx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.clx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.clx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 720px) { .clx-conn { grid-template-columns: 1fr; } .clx-num { display: none; } }
+</style>