domma-cms 0.73.0 → 0.75.0

package/admin/js/templates/forms.html

@@ -1,17 +1,70 @@
-<div class="view-header">
-    <h1><span data-icon="layout"></span> Forms</h1>
-    <div style="display:flex;gap:.5rem;">
-        <button id="test-email-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="mail"></span> Test Email
-        </button>
-        <button id="create-form-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> Create Form
-        </button>
-    </div>
-</div>
+<!-- Forms. Bound with M.applyBindings - see admin/views/forms.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; New form and Test email are banner actions. -->
+<div class="fmx">
+    <p class="fmx-note">Forms collect answers on the site - contact, sign-up, feedback - and store, email or pass on what
+        is sent.
+        <span data-help-title="Forms" data-help="Build a form, then put it on any page with its shortcode (⋮ → Copy shortcode). Each submission is saved to the form's collection, and can also be emailed, sent to a webhook or run an Action - set in the form's Actions. Click a form to edit it; its submissions are one right-click away."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="forms-table"></div>
+    <div class="fmx-card">
+        <div class="fmx-bar">
+            <div class="fmx-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="showRecent" data-bind-class="filter.value === 'recent' && 'is-on'">New this week <b data-bind-text="counts.value.recent"></b></button>
+                <button type="button" data-on-click="showEmpty" data-bind-class="filter.value === 'empty' && 'is-on'">No submissions <b data-bind-text="counts.value.empty"></b></button>
+            </div>
+            <input type="search" class="form-input fmx-search" placeholder="Search forms…" aria-label="Search forms" data-model="query.value">
+            <span data-help-title="The list" data-help="Forms with the newest submissions come first. New this week counts submissions in the last 7 days - the same number as the badge on Forms in the sidebar. Right-click a form (or ⋮, or Shift+F10) to see its submissions, copy its shortcode, duplicate it or delete it."></span>
+            <span class="fmx-spacer"></span>
+            <small class="fmx-muted" data-bind-text="summary.value"></small>
+        </div>
+        <p class="fmx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="fmx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="fmx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="fmx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.fmx { display: flex; flex-direction: column; gap: .75rem; }
+.fmx [hidden], .fmx-form [hidden] { display: none !important; }
+.fmx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fmx-note.is-bad { color: var(--dm-danger); }
+.fmx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fmx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.fmx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.fmx-spacer { flex: 1; }
+.fmx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.fmx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.fmx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.fmx-seg button + button { border-left: 1px solid var(--dm-border); }
+.fmx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.fmx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.fmx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.fmx-list { display: flex; flex-direction: column; }
+.fmx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.fmx-row:last-child { border-bottom: 0; }
+.fmx-row:hover, .fmx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.fmx-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); }
+.fmx-row.is-recent .fmx-icon { color: var(--dm-success); background: color-mix(in srgb, var(--dm-success) 14%, transparent); }
+.fmx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.fmx-main strong, .fmx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fmx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fmx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.fmx-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); }
+.fmx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.fmx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.fmx-count { min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fmx-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; }
+.fmx-kebab:hover { color: var(--dm-primary); }
+/* Slideover forms */
+.fmx-form { display: flex; flex-direction: column; gap: .85rem; }
+.fmx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.fmx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.fmx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.fmx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.fmx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 640px) { .fmx-count { display: none; } .fmx-chips { display: none; } }
+</style>

package/admin/js/templates/media.html

@@ -1,16 +1,102 @@
-<div class="view-header">
-    <h1><span data-icon="image"></span> Media</h1>
-    <div class="view-header-actions">
-        <input id="file-input" type="file" multiple accept="image/*,video/*,.pdf,.svg" style="display:none">
-        <button id="upload-btn" class="btn btn-primary"><span data-icon="upload"></span> Upload</button>
+<!-- Media. Bound with M.applyBindings - see admin/views/media.js, which also inserts the tile template
+     (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the Tool
+     banner above is the heading, and Upload is a banner action. -->
+<div class="mdx">
+    <input class="mdx-file-input" type="file" multiple accept="image/*,video/*,audio/*,.pdf,.svg,.txt,.csv,.doc,.docx,.xls,.xlsx" hidden>
+    <p class="mdx-note">Files for your pages, stored in <code>content/media/</code>. Drop files anywhere on this screen to
+        upload them.
+        <span data-help-title="Media" data-help="Upload with the button in the banner, or drop files onto this screen. Click a file for its details - its address, a snippet to paste into a page, a rename box, and the image editor for pictures. Right-click a file (or ⋮, or Shift+F10) for the same actions without opening it. Uploading a file with the same name as one already here replaces it; you are asked first."></span></p>
+    <p class="mdx-busy" data-bind-hidden="!busyText.value"><span class="mdx-spinner" aria-hidden="true"></span><span data-bind-text="busyText.value"></span></p>
+
+    <div class="mdx-card" data-bind-class="dragging.value && 'is-drop'">
+        <div class="mdx-bar">
+            <div class="mdx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="kindAll" data-bind-class="kind.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="kindImage" data-bind-class="kind.value === 'image' && 'is-on'" data-bind-hidden="!counts.value.image">Images <b data-bind-text="counts.value.image"></b></button>
+                <button type="button" data-on-click="kindVideo" data-bind-class="kind.value === 'video' && 'is-on'" data-bind-hidden="!counts.value.video">Video <b data-bind-text="counts.value.video"></b></button>
+                <button type="button" data-on-click="kindAudio" data-bind-class="kind.value === 'audio' && 'is-on'" data-bind-hidden="!counts.value.audio">Audio <b data-bind-text="counts.value.audio"></b></button>
+                <button type="button" data-on-click="kindDocument" data-bind-class="kind.value === 'document' && 'is-on'" data-bind-hidden="!counts.value.document">Documents <b data-bind-text="counts.value.document"></b></button>
+                <button type="button" data-on-click="kindOther" data-bind-class="kind.value === 'other' && 'is-on'" data-bind-hidden="!counts.value.other">Other <b data-bind-text="counts.value.other"></b></button>
+            </div>
+            <input type="search" class="form-input mdx-search" placeholder="Search file names…" aria-label="Search file names" data-model="query.value">
+            <select class="form-input mdx-sort" aria-label="Sort" data-model="sort.value">
+                <option value="newest">Newest first</option>
+                <option value="oldest">Oldest first</option>
+                <option value="name">Name</option>
+                <option value="size">Largest first</option>
+            </select>
+            <span class="mdx-total" data-bind-text="totalText.value"></span>
+        </div>
+        <p class="mdx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="mdx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <div class="mdx-empty" data-bind-hidden="loading.value || loadError.value || tiles.value.length">
+            <span data-icon="upload" data-icon-size="28"></span>
+            <span data-bind-text="emptyText.value"></span>
+        </div>
+        <div class="mdx-grid" data-each="tiles.value key=name"></div>
+        <div class="mdx-drop" aria-hidden="true"><span data-icon="upload" data-icon-size="28"></span> Drop to upload</div>
     </div>
 </div>
 
-<p class="text-muted mb-4">
-    Uploaded files are stored in <code>content/media/</code>.
-    Use the copy button to get a URL you can embed in your pages.
-</p>
-
-<div id="media-grid" class="media-grid">
-    <p class="text-muted">Loading…</p>
-</div>
+<style>
+.mdx { display: flex; flex-direction: column; gap: .75rem; }
+.mdx [hidden], .mdx-panel [hidden] { display: none !important; }
+.mdx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mdx-note.is-bad { color: var(--dm-danger); }
+.mdx-busy { margin: 0; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 12%, transparent); color: var(--dm-text); font-size: var(--dm-text-sm); }
+.mdx-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--dm-primary) 30%, transparent);
+    border-top-color: var(--dm-primary); animation: mdx-spin .8s linear infinite; flex-shrink: 0; }
+@keyframes mdx-spin { to { transform: rotate(360deg); } }
+.mdx-card { position: relative; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .75rem; }
+.mdx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.mdx-search { flex: 1; min-width: 10rem; max-width: 20rem; }
+.mdx-sort { width: auto; }
+.mdx-total { margin-left: auto; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mdx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.mdx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.mdx-seg button + button { border-left: 1px solid var(--dm-border); }
+.mdx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.mdx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.mdx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.mdx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .75rem; }
+.mdx-tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md);
+    background: var(--dm-surface); overflow: hidden; cursor: pointer; outline: none; }
+.mdx-tile:hover, .mdx-tile:focus-visible { border-color: var(--dm-primary); box-shadow: 0 0 0 1px var(--dm-primary); }
+.mdx-thumb { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden;
+    background: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface)); color: var(--dm-text-muted); }
+.mdx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.mdx-glyph { display: inline-flex; }
+.mdx-info { display: flex; flex-direction: column; padding: .45rem .55rem .5rem; min-width: 0; }
+.mdx-name { font-weight: 600; font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mdx-meta { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.mdx-chip { position: absolute; top: .4rem; left: .4rem; font-size: var(--dm-text-xs); font-weight: 600; padding: .05rem .45rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-surface) 85%, transparent); color: var(--dm-text); border: 1px solid var(--dm-border); }
+.mdx-kebab { position: absolute; top: .3rem; right: .3rem; border: 1px solid var(--dm-border); background: color-mix(in srgb, var(--dm-surface) 85%, transparent);
+    cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text); border-radius: var(--dm-radius-sm); padding: 0 .35rem; }
+.mdx-kebab:hover { color: var(--dm-primary); }
+.mdx-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--dm-text-muted);
+    border: 2px dashed var(--dm-border); border-radius: var(--dm-radius-md); text-align: center; }
+.mdx-drop { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; gap: .5rem; font-weight: 600;
+    border: 2px dashed var(--dm-primary); border-radius: var(--dm-radius-md); color: var(--dm-primary);
+    background: color-mix(in srgb, var(--dm-primary) 10%, var(--dm-surface)); z-index: 2; pointer-events: none; }
+.mdx-card.is-drop .mdx-drop { display: flex; }
+/* The details slideover */
+.mdx-panel { display: flex; flex-direction: column; gap: .85rem; }
+.mdx-preview { display: flex; align-items: center; justify-content: center; min-height: 10rem; max-height: 22rem; overflow: hidden;
+    border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-text) 6%, var(--dm-surface)); color: var(--dm-text-muted); }
+.mdx-preview img, .mdx-preview video { max-width: 100%; max-height: 22rem; display: block; }
+.mdx-preview audio { width: 100%; margin: 1rem; }
+.mdx-facts { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; font-size: var(--dm-text-sm); }
+.mdx-facts dt { color: var(--dm-text-muted); }
+.mdx-facts dd { margin: 0; overflow-wrap: anywhere; }
+.mdx-copy { display: flex; gap: .4rem; }
+.mdx-copy input { flex: 1; font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.mdx-panel .form-label { display: flex; align-items: center; gap: .3rem; }
+.mdx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.mdx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.mdx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.mdx-actions .btn, .mdx-copy .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.mdx-spacer { flex: 1; }
+@media (max-width: 640px) { .mdx-grid { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); } .mdx-total { margin-left: 0; } }
+</style>

package/admin/js/templates/menus.html

@@ -1,14 +1,60 @@
-<div class="page-header">
-    <h2><span data-icon="menu"></span> Menus</h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" href="#/menu-locations"><span data-icon="map"></span> Manage locations</a>
-        <a class="btn btn-primary" href="#/menus/new"><span data-icon="plus"></span> New menu</a>
-    </div>
-</div>
-<p class="text-muted mb-4">Multi-named menus for the public site, footers, and any plugin-registered slot.</p>
+<!-- Menus. Bound with M.applyBindings - see admin/views/menus.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 menu / Locations are banner actions. -->
+<div class="mnx">
+    <p class="mnx-note">Menus for the site's navbar and footers, the admin sidebar, floating overlays, and any slot a
+        plugin adds.
+        <span data-help-title="Menus and locations" data-help="A menu is a list of links. A location (a slot) is where one is shown: the navbar, the footers, the admin sidebar, a page overlay, or a plugin's slot. Locations maps each slot to a menu site-wide; a menu's own binding can take a slot over on chosen pages or projects instead. Any menu can also be shown inside page content with its [menu] shortcode."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="menus-table"></div>
+    <div class="mnx-card">
+        <div class="mnx-bar">
+            <div class="mnx-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="showPlaced" data-bind-class="filter.value === 'placed' && 'is-on'">In a location <b data-bind-text="counts.value.placed"></b></button>
+                <button type="button" data-on-click="showUnplaced" data-bind-class="filter.value === 'unplaced' && 'is-on'">Not in a location <b data-bind-text="counts.value.unplaced"></b></button>
+            </div>
+            <input type="search" class="form-input mnx-search" placeholder="Search menus…" aria-label="Search menus" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a menu to edit it. Right-click it (or ⋮, or Shift+F10) to duplicate it, copy its [menu] shortcode, open Locations, or delete it. A menu that a location uses cannot be deleted until it is taken out of the location. 'Not in a location' does not mean unused - a page may show it with its shortcode."></span>
+        </div>
+        <p class="mnx-note" data-bind-hidden="!projectText.value" data-bind-text="projectText.value"></p>
+        <p class="mnx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="mnx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="mnx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="mnx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.mnx { display: flex; flex-direction: column; gap: .75rem; }
+.mnx [hidden] { display: none !important; }
+.mnx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.mnx-note.is-bad { color: var(--dm-danger); }
+.mnx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.mnx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.mnx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.mnx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.mnx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.mnx-seg button + button { border-left: 1px solid var(--dm-border); }
+.mnx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.mnx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.mnx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.mnx-list { display: flex; flex-direction: column; }
+.mnx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.mnx-row:last-child { border-bottom: 0; }
+.mnx-row:hover, .mnx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.mnx-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); }
+.mnx-row.is-unplaced .mnx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.mnx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.mnx-main strong, .mnx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mnx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.mnx-chips { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; flex-shrink: 0; max-width: 45%; }
+.mnx-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); }
+.mnx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.mnx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 16%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.mnx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.mnx-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; }
+.mnx-kebab:hover { color: var(--dm-primary); }
+@media (max-width: 640px) { .mnx-chips { display: none; } }
+</style>

package/admin/js/templates/pages.html

@@ -1,27 +1,82 @@
-<div class="view-header">
-    <h1><span data-icon="file-text"></span> Pages</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;margin-left:auto;">
-        <input id="pages-search" type="text" class="form-input form-input-sm" placeholder="Search pages…"
-               style="width:220px;">
-        <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
-    </div>
-</div>
+<!-- Pages. Bound with M.applyBindings - see admin/views/pages.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 page is a banner action. -->
+<div class="pgx">
+    <p class="pgx-notice" data-bind-hidden="!projectNote.value">
+        <span data-bind-text="projectNote.value"></span> <a href="#/pages">Show all pages</a>
+    </p>
 
-<div class="toolbar mb-3" style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
-    <select id="status-filter" class="form-select form-select-sm" style="width:auto">
-        <option value="">All statuses</option>
-        <option value="published">Published</option>
-        <option value="draft">Draft</option>
-    </select>
-    <div class="btn-group" style="margin-left:auto;">
-        <button id="view-table-btn" class="btn btn-sm btn-primary" data-tooltip="Table view"><span data-icon="list"></span></button>
-        <button id="view-tree-btn" class="btn btn-sm btn-ghost" data-tooltip="Tree view"><span data-icon="tree"></span></button>
+    <div class="pgx-card">
+        <div class="pgx-bar">
+            <div class="pgx-seg" role="group" aria-label="Status">
+                <button type="button" data-on-click="showAll" data-bind-class="status.value === 'all' && 'is-on'">All <b data-bind-text="counts.value.all"></b></button>
+                <button type="button" data-on-click="showPublished" data-bind-class="status.value === 'published' && 'is-on'">Published <b data-bind-text="counts.value.published"></b></button>
+                <button type="button" data-on-click="showDrafts" data-bind-class="status.value === 'draft' && 'is-on'">Drafts <b data-bind-text="counts.value.draft"></b></button>
+            </div>
+            <input type="search" class="form-input pgx-search" placeholder="Search title, URL, tag or layout…" aria-label="Search pages" data-model="query.value">
+            <select class="form-input pgx-sort" aria-label="Sort" data-model="sort.value" data-bind-hidden="mode.value === 'tree'">
+                <option value="order">Navigation order</option>
+                <option value="updated">Recently changed</option>
+                <option value="title">Title</option>
+                <option value="url">URL</option>
+            </select>
+            <span class="pgx-spacer"></span>
+            <div class="pgx-seg" role="group" aria-label="View">
+                <button type="button" data-on-click="showList" data-bind-class="mode.value === 'list' && 'is-on'" title="List">List</button>
+                <button type="button" data-on-click="showTree" data-bind-class="mode.value === 'tree' && 'is-on'" title="Tree - pages under the page whose URL they sit beneath">Tree</button>
+            </div>
+            <span data-help-title="Pages" data-help="Click a page to edit it. Right-click it (or ⋮, or Shift+F10) to view it on the site, copy its address, trim its revision history or delete it. Drafts are not public: visitors get a 404, while anyone who can edit pages sees them with a Draft banner. Tree shows each page under the page whose address it sits beneath. Your filter, sort and view are remembered."></span>
+        </div>
+        <p class="pgx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="pgx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="pgx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="pgx-list" data-each="rows.value key=urlPath" data-bind-hidden="mode.value === 'tree'"></div>
+        <div class="pgx-tree" data-bind-hidden="mode.value !== 'tree' || !rows.value.length"></div>
     </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="pages-table"></div>
-        <div id="pages-tree" style="display:none;"></div>
-    </div>
-</div>
+<style>
+.pgx { display: flex; flex-direction: column; gap: .75rem; }
+.pgx [hidden], .pgx-form [hidden] { display: none !important; }
+.pgx-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); }
+.pgx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pgx-note.is-bad { color: var(--dm-danger); }
+.pgx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.pgx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.pgx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.pgx-sort { width: auto; }
+.pgx-spacer { flex: 1; }
+.pgx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.pgx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.pgx-seg button + button { border-left: 1px solid var(--dm-border); }
+.pgx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.pgx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.pgx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.pgx-list { display: flex; flex-direction: column; }
+.pgx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.pgx-row:last-child { border-bottom: 0; }
+.pgx-row:hover, .pgx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pgx-row.is-draft .pgx-main strong { color: var(--dm-text-muted); }
+.pgx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.pgx-main strong, .pgx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pgx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.pgx-tags { color: var(--dm-info, var(--dm-primary)); }
+.pgx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.pgx-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); }
+.pgx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.pgx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pgx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.pgx-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; }
+.pgx-kebab:hover { color: var(--dm-primary); }
+.pgx-tree { padding: .25rem 0; }
+/* The prune slideover */
+.pgx-form { display: flex; flex-direction: column; gap: .85rem; }
+.pgx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.pgx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pgx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pgx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.pgx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 720px) { .pgx-chips { display: none; } }
+</style>

package/admin/js/templates/projects.html

@@ -1,13 +1,72 @@
-<div class="page-header">
-    <h2><span data-icon="folder"></span> Projects</h2>
-    <div class="header-actions">
-        <a class="btn btn-primary" href="#/projects/new"><span data-icon="plus"></span> New project</a>
-    </div>
-</div>
-<p class="text-muted mb-4">Group related artefacts under a project for navigation and per-user access scoping.</p>
+<!-- Manage projects. Bound with M.applyBindings - see admin/views/projects.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 project is a banner action. -->
+<div class="pjx">
+    <p class="pjx-note">Group related pages, collections, forms and the rest under a project - for the sidebar, and to
+        limit what a user can see.
+        <span data-help-title="Projects" data-help="Everything not filed under a project belongs to Core, which cannot be removed. A project's root URL files pages under it automatically (a page at /members/join belongs to the project whose root URL is /members). A user given projects sees only those, plus Core. Disabling a project takes its public pages and external API offline; editing in the admin carries on."></span></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="projects-table"></div>
+    <div class="pjx-card">
+        <div class="pjx-bar">
+            <div class="pjx-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>
+            </div>
+            <input type="search" class="form-input pjx-search" placeholder="Search projects…" aria-label="Search projects" data-model="query.value">
+            <span data-help-title="The list" data-help="Click a project to open its overview. Right-click it (or ⋮, or Shift+F10) to edit it, open its settings, enable or disable it, untag everything filed under it, or delete it. A project can only be deleted once nothing is filed under it; built-in projects cannot be deleted."></span>
+        </div>
+        <p class="pjx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="pjx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="pjx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="pjx-list" data-each="rows.value key=slug"></div>
     </div>
 </div>
+
+<style>
+.pjx { display: flex; flex-direction: column; gap: .75rem; }
+.pjx [hidden], .pjx-form [hidden] { display: none !important; }
+.pjx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pjx-note.is-bad { color: var(--dm-danger); }
+.pjx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.pjx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.pjx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.pjx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.pjx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.pjx-seg button + button { border-left: 1px solid var(--dm-border); }
+.pjx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.pjx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.pjx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.pjx-list { display: flex; flex-direction: column; }
+.pjx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.pjx-row:last-child { border-bottom: 0; }
+.pjx-row:hover, .pjx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pjx-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); }
+.pjx-row.is-off .pjx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.pjx-row.is-off .pjx-main strong { color: var(--dm-text-muted); }
+.pjx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.pjx-main strong, .pjx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pjx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.pjx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.pjx-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); }
+.pjx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.pjx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pjx-count { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pjx-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; }
+.pjx-kebab:hover { color: var(--dm-primary); }
+/* The editor slideover */
+.pjx-form { display: flex; flex-direction: column; gap: .85rem; }
+.pjx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.pjx-wide { grid-column: 1 / -1; }
+.pjx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.pjx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pjx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pjx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.pjx-setting .form-label { margin: 0; }
+.pjx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.pjx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.pjx-spacer { flex: 1; }
+@media (max-width: 640px) { .pjx-grid { grid-template-columns: 1fr; } .pjx-count { display: none; } }
+</style>