domma-cms 0.76.0 → 0.77.0

package/admin/js/templates/dashboard.html

@@ -1,32 +1,194 @@
-<div class="view-header">
-    <h1><span data-icon="home"></span> Dashboard</h1>
-    <div class="view-header-actions">
-        <span class="dash-updated" id="dash-updated"></span>
-        <a href="#/pages/new" class="btn btn-primary"><span data-icon="plus"></span> New Page</a>
+<!-- The core Dashboard. Bound with M.applyBindings - see admin/views/dashboard.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; Refresh and New page are banner actions. -->
+<div class="dbx">
+    <div class="dbx-top">
+        <small class="dbx-asof" data-bind-text="asOf.value"></small>
+        <span data-help-title="Dashboard" data-help="What the site is doing and what needs you, at a glance. Traffic comes from the site's own analytics (no cookies, no third party). The numbers refresh every 30 seconds while this screen is open; Refresh in the banner reloads everything."></span>
     </div>
-</div>
+    <p class="dbx-note is-warn" data-bind-hidden="!warning.value" data-bind-text="warning.value"></p>
 
-<div id="dash-warnings" class="dash-warnings" hidden></div>
+    <div class="dbx-kpis">
+        <div class="dbx-card dbx-kpi">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="trending-up" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.hits">—</strong>
+                <span class="dbx-kpi-label">Page views today
+                    <span data-help="Every page view recorded today (UTC), compared with the whole of yesterday."></span></span>
+                <small class="dbx-delta" data-bind-hidden="!kpi.value.hitsDelta" data-bind-text="kpi.value.hitsDelta" data-bind-class="kpi.value.hitsUp ? 'is-up' : 'is-down'"></small>
+            </div>
+        </div>
+        <div class="dbx-card dbx-kpi">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="users" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.active">—</strong>
+                <span class="dbx-kpi-label">On the site now
+                    <span data-help="Visitors seen in the last 5 minutes."></span></span>
+            </div>
+        </div>
+        <a class="dbx-card dbx-kpi is-link" href="#/pages">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="file-text" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.pages">—</strong>
+                <span class="dbx-kpi-label">Pages</span>
+                <small class="dbx-kpi-sub" data-bind-text="kpi.value.pagesSub"></small>
+            </div>
+        </a>
+        <a class="dbx-card dbx-kpi is-link" href="#/forms">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="inbox" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value" data-bind-text="kpi.value.submissions">—</strong>
+                <span class="dbx-kpi-label">Form submissions this week
+                    <span data-help="Submissions to the site's forms in the last 7 days, counted where each form's submissions are kept."></span></span>
+                <small class="dbx-kpi-sub" data-bind-text="kpi.value.submissionsSub"></small>
+            </div>
+        </a>
+        <div class="dbx-card dbx-kpi">
+            <span class="dbx-kpi-icon" aria-hidden="true"><span data-icon="activity" data-icon-size="18"></span></span>
+            <div class="dbx-kpi-body">
+                <strong class="dbx-kpi-value"><span class="dbx-chip" data-bind-class="'is-' + kpi.value.healthTone" data-bind-text="kpi.value.health">—</span></strong>
+                <span class="dbx-kpi-label">Site health
+                    <span data-help="The server's own checks - disk, storage, plugins, the database when one is used. Anything that is not OK is listed under Needs attention."></span></span>
+            </div>
+        </div>
+    </div>
 
-<div class="dashboard-grid">
-    <section id="dash-kpi-strip" class="dash-row dash-row-kpi"></section>
+    <div class="dbx-split">
+        <section class="dbx-card">
+            <div class="dbx-card-title">Needs attention
+                <span data-help-title="Needs attention" data-help="What the rest of the admin is flagging: the red and amber badges from the sidebar (a missing layout, an expired API token, a plugin that is not running, settings quietly wrong…), unread notifications, and any health check that is not OK. Click one to go there."></span>
+                <span class="dbx-count" data-bind-text="attention.value.length"></span></div>
+            <p class="dbx-note is-ok" data-bind-hidden="!loaded.value || attention.value.length">
+                <span data-icon="check-circle" data-icon-size="15"></span> Nothing needs you right now.</p>
+            <div class="dbx-list dbx-attention" data-each="attention.value key=id"></div>
+        </section>
+        <section class="dbx-card">
+            <div class="dbx-card-title">Recent activity
+                <span data-help="Pages edited or published, and new entries in the site's collections - newest first. Click one to open it."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || activity.value.length">Nothing yet.</p>
+            <div class="dbx-list dbx-activity" data-each="activity.value key=id"></div>
+        </section>
+    </div>
 
-    <section class="dash-row dash-row-traffic">
-        <div id="dash-traffic-chart" class="dash-card dash-card-wide"></div>
-        <div id="dash-spike-feed" class="dash-card"></div>
+    <section class="dbx-card">
+        <div class="dbx-card-title">Traffic - the last 30 days
+            <span data-help="Page views per day, across the whole site."></span></div>
+        <div class="dbx-chart" data-bind-hidden="!hasChart.value"><canvas class="dbx-canvas"></canvas></div>
+        <p class="dbx-note" data-bind-hidden="hasChart.value" data-bind-text="chartNote.value"></p>
     </section>
 
-    <section class="dash-row dash-row-content">
-        <div id="dash-top-pages" class="dash-card"></div>
-        <div id="dash-journeys" class="dash-card"></div>
-    </section>
+    <div class="dbx-split">
+        <section class="dbx-card">
+            <div class="dbx-card-title">Top pages - the last 7 days
+                <span data-help="The most-viewed addresses this week, with the change on the week before. Right-click (or ⋮) one to open it, copy its address or edit the page."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || topPages.value.length">No page views recorded yet.</p>
+            <div class="dbx-list dbx-top-pages" data-each="topPages.value key=id"></div>
+        </section>
+        <section class="dbx-card">
+            <div class="dbx-card-title">Spikes - the last hour
+                <span data-help="Addresses getting far more views than usual this hour - a link shared somewhere, or a bot. The number beside each is how many times its normal rate."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || spikes.value.length">Nothing unusual.</p>
+            <div class="dbx-list dbx-spikes" data-each="spikes.value key=id"></div>
+        </section>
+    </div>
 
-    <section class="dash-row dash-row-health">
-        <div id="dash-health-detail" class="dash-card"></div>
-        <div id="dash-activity-feed" class="dash-card"></div>
+    <section class="dbx-card">
+        <div class="dbx-card-title">Visits - the last 7 days
+            <span data-help-title="Visits" data-help="Where visits start and end, the commonest moves between pages, and the bounce rate - visits that viewed a single page."></span>
+            <span class="dbx-spacer"></span>
+            <small class="dbx-muted" data-bind-hidden="!bounce.value" data-bind-text="bounce.value"></small></div>
+        <p class="dbx-note" data-bind-hidden="!loaded.value || hasJourneys.value">No visits recorded yet.</p>
+        <div class="dbx-journeys" data-bind-hidden="!hasJourneys.value">
+            <div><h4>Arrived at</h4><div class="dbx-list dbx-entry" data-each="entry.value key=id"></div></div>
+            <div><h4>Left from</h4><div class="dbx-list dbx-exit" data-each="exit.value key=id"></div></div>
+            <div><h4>Moved between</h4><div class="dbx-list dbx-paths" data-each="paths.value key=id"></div></div>
+        </div>
     </section>
 
-    <section class="dash-row">
-        <div id="dash-cache" class="dash-card dash-card-wide"></div>
-    </section>
+    <div class="dbx-split">
+        <section class="dbx-card">
+            <div class="dbx-card-title">Health checks
+                <span data-help="Each check the server runs on itself, with what it found."></span></div>
+            <p class="dbx-note" data-bind-hidden="!loaded.value || checks.value.length">No checks reported.</p>
+            <div class="dbx-list dbx-checks" data-each="checks.value key=id"></div>
+        </section>
+        <section class="dbx-card" data-bind-hidden="!cache.value">
+            <div class="dbx-card-title">Response cache
+                <span data-help-title="Response cache" data-help="Pages are kept ready-rendered so repeat visits are fast; editing anything clears what it affects. Hit rate is how often a visit was served from it. Turning it off makes every visit render afresh."></span>
+                <span class="dbx-spacer"></span>
+                <label class="dbx-switch" title="Turn the cache on or off">
+                    <input type="checkbox" class="form-switch" data-bind-checked="cacheOn.value" data-on-change="toggleCache">
+                    <span data-bind-text="cacheOn.value ? 'On' : 'Off'"></span>
+                </label></div>
+            <div class="dbx-stats">
+                <div><small>Hit rate</small><strong data-bind-text="cacheView.value.hitRate"></strong><small data-bind-text="cacheView.value.hitsMisses"></small></div>
+                <div><small>Entries</small><strong data-bind-text="cacheView.value.size"></strong><small data-bind-text="cacheView.value.driver"></small></div>
+                <div><small>Writes</small><strong data-bind-text="cacheView.value.writes"></strong><small data-bind-text="cacheView.value.invalidations"></small></div>
+                <div><small>Last cleared</small><strong data-bind-text="cacheView.value.cleared"></strong></div>
+            </div>
+            <div class="dbx-actions">
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearCache"><span data-icon="trash" data-icon-size="13"></span> Clear the cache</button>
+            </div>
+        </section>
+    </div>
 </div>
+
+<style>
+.dbx { display: flex; flex-direction: column; gap: 1rem; }
+.dbx [hidden] { display: none !important; }
+.dbx-top { display: flex; align-items: center; gap: .4rem; justify-content: flex-end; }
+.dbx-asof, .dbx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); display: flex; align-items: center; gap: .35rem; }
+.dbx-note.is-warn { padding: .55rem .8rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-warning) 14%, transparent); color: var(--dm-text); }
+.dbx-note.is-ok { color: var(--dm-success); }
+.dbx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .6rem;
+    background: var(--dm-surface); min-width: 0; }
+.dbx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.dbx-card h4 { margin: 0 0 .35rem; font-size: var(--dm-text-sm); color: var(--dm-text-muted); font-weight: 600; }
+.dbx-count { font-size: var(--dm-text-xs); color: var(--dm-text-muted); font-weight: 500; }
+.dbx-spacer { flex: 1; }
+.dbx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
+.dbx-kpi { flex-direction: row; align-items: center; gap: .8rem; color: inherit; text-decoration: none; }
+.dbx-kpi.is-link:hover, .dbx-kpi.is-link:focus-visible { border-color: var(--dm-primary); outline: none; }
+.dbx-kpi-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 12%, transparent); }
+.dbx-kpi-body { display: flex; flex-direction: column; min-width: 0; }
+.dbx-kpi-value { font-size: var(--dm-text-2xl, 1.5rem); line-height: 1.2; font-variant-numeric: tabular-nums; }
+.dbx-kpi-label { display: flex; align-items: center; gap: .3rem; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.dbx-kpi-sub { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-delta { font-size: var(--dm-text-xs); font-weight: 600; }
+.dbx-delta.is-up { color: var(--dm-success); }
+.dbx-delta.is-down { color: var(--dm-danger); }
+.dbx-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; }
+.dbx-list { display: flex; flex-direction: column; }
+.dbx-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .3rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; min-width: 0; }
+.dbx-row:last-child { border-bottom: 0; }
+.dbx-row:hover, .dbx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.dbx-row.is-static { cursor: default; }
+.dbx-row.is-static:hover { background: none; }
+.dbx-row.is-danger { box-shadow: inset 3px 0 0 var(--dm-danger); }
+.dbx-row.is-warn { box-shadow: inset 3px 0 0 var(--dm-warning); }
+.dbx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.dbx-main strong, .dbx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dbx-main strong { font-weight: 500; }
+.dbx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-value { font-variant-numeric: tabular-nums; font-weight: 600; flex-shrink: 0; }
+.dbx-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); }
+.dbx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.dbx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.dbx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.dbx-kpi-value .dbx-chip { font-size: var(--dm-text-sm); padding: .15rem .6rem; }
+.dbx-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; flex-shrink: 0; }
+.dbx-kebab:hover { color: var(--dm-primary); }
+.dbx-chart { height: 240px; position: relative; }
+.dbx-journeys { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
+.dbx-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .8rem; }
+.dbx-stats > div { display: flex; flex-direction: column; }
+.dbx-stats small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.dbx-stats strong { font-size: var(--dm-text-lg); font-variant-numeric: tabular-nums; }
+.dbx-switch { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; font-size: var(--dm-text-sm); cursor: pointer; }
+.dbx-actions { display: flex; justify-content: flex-end; }
+.dbx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 640px) { .dbx-split { grid-template-columns: 1fr; } }
+</style>

package/admin/js/templates/form-editor.html

@@ -1,13 +1,12 @@
-<div class="view-header">
-    <h1 id="editor-title"><span data-icon="edit-3"></span> Form Editor</h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/forms" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Forms
-        </a>
-        <button id="save-form-btn" class="btn btn-primary">
-            <span data-icon="save"></span> Save
-        </button>
-    </div>
+<!-- Form editor. No page heading: the Tool banner ("Forms › <title>") is the heading, and Save / All forms /
+     Submissions are banner actions. The bar below is bound with M.applyBindings (admin/js/views/form-editor.js). -->
+<div class="fex-bar" data-bind-hidden="!dirty.value">
+    <span class="fex-chip">Unsaved changes</span>
+    <small class="fex-note">Ctrl+S saves. Leaving asks first and keeps a draft of this form.</small>
+    <span class="fex-spacer"></span>
+    <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+    <button type="button" id="save-form-btn" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+        <span data-icon="save" data-icon-size="13"></span> Save</button>
 </div>
 
 <div class="tabs" id="editor-tabs">
@@ -24,20 +23,20 @@
       <div class="fb-fields-layout">
       <div class="card mb-4">
         <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-          <h2>Fields</h2>
+          <h2>Fields <span data-help-title="Fields" data-help="Click a field to open it; drag its header to reorder. Right-click a field (or ⋮, or Shift+F10 on it) to edit it, open its logic and triggers, duplicate it, move it up or down, copy its name or delete it. A Page Break splits the form into wizard steps; a Spacer adds room between fields."></span></h2>
           <div id="add-element-dropdown" style="position:relative;">
             <button id="add-element-btn" class="btn btn-ghost btn-sm" type="button">
               <span data-icon="plus"></span> Add <span data-icon="chevron-down" data-icon-size="12"
                 style="opacity:.6;margin-left:.1rem;display:inline-flex;align-items:center;vertical-align:middle;"></span>
             </button>
             <div id="add-element-menu"
-                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--dm-card-bg,#1e1e2e);border:1px solid var(--dm-border,#333);border-radius:6px;min-width:140px;z-index:100;box-shadow:var(--dm-shadow-lg);overflow:hidden;">
+                 style="display:none;position:absolute;right:0;top:calc(100% + .2rem);background:var(--dm-card-bg);border:1px solid var(--dm-border);border-radius:6px;min-width:140px;z-index:100;box-shadow:var(--dm-shadow-lg);overflow:hidden;">
               <button id="add-field-btn" type="button"
-                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border,#333);">
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border);">
                 Field
               </button>
               <button id="add-spacer-btn" type="button"
-                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border,#333);">
+                      style="display:block;width:100%;text-align:left;padding:.5rem .85rem;background:none;border:none;color:inherit;cursor:pointer;font-size:.875rem;border-bottom:1px solid var(--dm-border);">
                 Spacer
               </button>
               <button id="add-page-break-btn" type="button"
@@ -49,8 +48,8 @@
         </div>
         <div class="card-body" style="padding:0;">
           <div id="fields-list" style="padding:1rem;">
-            <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet. Click
-              "Add Field" to get started.</p>
+            <p class="text-muted" id="fields-empty-msg" style="text-align:center;padding:2rem 0;">No fields yet - use
+              Add to put the first one in.</p>
           </div>
         </div>
       </div>
@@ -58,9 +57,9 @@
       <aside class="fb-preview-pane">
         <div class="card mb-4" id="preview-card">
           <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
-            <h2><span data-icon="eye"></span> Preview</h2>
+            <h2><span data-icon="eye"></span> Preview <span data-help-title="Preview" data-help="The form as visitors will see it, updated as you edit - conditional logic and triggers included. Once the form is saved, a test submission here is stored like a real one."></span></h2>
             <span id="preview-test-badge"
-                  style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb, var(--dm-primary) 15%, transparent);color:var(--dm-primary,#6366f1);">Test Mode - submissions are stored</span>
+                  style="display:none;font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:color-mix(in srgb, var(--dm-primary) 15%, transparent);color:var(--dm-primary);">Test Mode - submissions are stored</span>
           </div>
           <div class="card-body">
             <div id="preview-container"></div>
@@ -83,7 +82,7 @@
               <input id="field-title" type="text" class="form-input" placeholder="My Form">
             </div>
             <div class="col-5">
-              <label class="form-label">Slug</label>
+              <label class="form-label">Slug <span data-help="The form's id - how pages embed it ([form name=&quot;slug&quot;]) and where its submissions are filed. Made from the title for a new form; changing it later breaks existing embeds."></span></label>
               <input id="field-slug" type="text" class="form-input" placeholder="my-form">
               <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Used in embed: <code>data-form="slug"</code>
               </p>
@@ -98,7 +97,7 @@
           </div>
             <div class="row mt-3">
                 <div class="col-6">
-                    <label class="form-label">Project</label>
+                    <label class="form-label">Project <span data-help="Files the form under a project: it shows in that project's lists, and users limited to other projects cannot see it."></span></label>
                     <select id="field-project" class="form-input">
                         <option value="">- none -</option>
                     </select>
@@ -131,7 +130,7 @@
                       placeholder="Thank you for your submission."></textarea>
           </div>
           <div class="mb-3">
-            <label class="form-label">Success Redirect URL</label>
+            <label class="form-label">Success Redirect URL <span data-help="Where the visitor goes after a successful submission - a page on this site (/thank-you) or a full address. Leave empty to show the success message in place."></span></label>
             <input id="setting-success-redirect" type="text" class="form-input"
                    placeholder="/thank-you">
             <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">
@@ -139,7 +138,7 @@
             </p>
           </div>
             <div class="mb-3">
-            <label class="form-label">Layout</label>
+            <label class="form-label">Layout <span data-help="Grid lays fields out in columns (each field can span several); Stacked puts one field per row; Inline puts short fields side by side."></span></label>
             <select id="setting-layout" class="form-select">
                 <option value="grid">Grid</option>
               <option value="stacked">Stacked</option>
@@ -181,7 +180,7 @@
                 </label>
               </div>
               <div class="mb-3">
-                <label class="form-label">Recipients</label>
+                <label class="form-label">Recipients <span data-help="Who is emailed each submission - one or more addresses, comma-separated. Sent through the site's SMTP settings (System › Site Settings › Email); without them nothing is delivered."></span></label>
                 <input id="action-email-recipients" type="text" class="form-input" placeholder="admin@example.com">
                 <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Comma-separated. Uses global
                   SMTP settings.</p>
@@ -203,7 +202,7 @@
                 </label>
               </div>
               <div class="mb-3">
-                <label class="form-label">URL</label>
+                <label class="form-label">URL <span data-help="Each submission is sent here as JSON. The address is not kept in the editor's draft, in case it carries a secret token."></span></label>
                 <input id="action-webhook-url" type="url" class="form-input"
                        placeholder="https://hooks.example.com/form">
               </div>
@@ -222,7 +221,7 @@
             <div class="card-header"><h2>CMS Action</h2></div>
             <div class="card-body">
               <div class="mb-3">
-                <label class="form-label">Action on Submit</label>
+                <label class="form-label">Action on Submit <span data-help="A CMS Action (Data › Actions) run after the submission is stored - for example to create an entry elsewhere or move one on a step. It needs MongoDB; a failure never loses the submission."></span></label>
                 <select id="action-cms-slug" class="form-select">
                   <option value="">- None -</option>
                 </select>
@@ -247,7 +246,7 @@
               that fill a hidden field.</p>
           </div>
           <div>
-            <label class="form-label">Rate Limit (per minute)</label>
+            <label class="form-label">Rate Limit (per minute) <span data-help="How many submissions one visitor's address may make in a minute; more are refused. Keeps a form from being flooded."></span></label>
             <input id="setting-rate-limit" type="number" class="form-input" min="1" max="60" value="3">
             <p class="form-hint text-muted" style="margin-top:.3rem;font-size:.8rem;">Max submissions per IP per
               minute.</p>
@@ -258,3 +257,19 @@
 
   </div>
 </div>
+
+<style>
+.fex-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .5rem .75rem; margin-bottom: .75rem;
+    border: 1px solid color-mix(in srgb, var(--dm-warning) 45%, var(--dm-border)); border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 10%, transparent); position: sticky; top: 0; z-index: 5; }
+.fex-bar[hidden] { display: none !important; }
+.fex-chip { font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px;
+    background: color-mix(in srgb, var(--dm-warning) 22%, transparent); color: var(--dm-warning); white-space: nowrap; }
+.fex-note { color: var(--dm-text-muted); }
+.fex-spacer { flex: 1; }
+.fex-bar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.fex-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); line-height: 1; color: var(--dm-text-muted);
+    border-radius: var(--dm-radius-sm); padding: 0 .35rem; flex-shrink: 0; }
+.fex-kebab:hover { color: var(--dm-primary); }
+#fields-list .fb-field-card:focus-visible { outline: 2px solid var(--dm-primary); outline-offset: 2px; }
+</style>

package/admin/js/templates/form-submissions.html

@@ -1,30 +1,82 @@
-<div class="view-header">
-    <h1><span data-icon="inbox"></span> <span id="submissions-title">Submissions</span></h1>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <a href="#/forms" class="btn btn-ghost btn-sm">
-            <span data-icon="arrow-left"></span> All Forms
-        </a>
-        <button id="export-btn" class="btn btn-ghost btn-sm">
-            <span data-icon="download"></span> Export
-        </button>
-        <button id="clear-all-btn" class="btn btn-danger btn-sm">
-            <span data-icon="trash"></span> Clear All
-        </button>
-    </div>
-</div>
+<!-- Form submissions. Bound with M.applyBindings - see admin/views/form-submissions.js, which also inserts the
+     row template (the router renders a templateUrl through _.render, eating any {{…}}). No page heading:
+     the Tool banner ("Forms › <form> submissions") is the heading; All forms, Export and Clear all are banner
+     actions. -->
+<div class="fsx">
+    <p class="fsx-note"><span data-bind-text="intro.value">What people sent through this form.</span>
+        <span data-help-title="Submissions" data-help="Every answer sent through this form, newest first, read from the collection the form saves to (its collection action, or one named after the form). Click one for everything that was sent; right-click it (or ⋮, or Shift+F10) to copy it, copy the sender's email, mark it as spam or delete it. Spam is kept out of the inbox but not deleted - you can put it back."></span></p>
 
-<div class="card mb-3">
-    <div class="card-body" style="display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;">
-        <input id="sub-search" type="text" class="form-input" placeholder="Search submissions…" style="flex:1;min-width:200px;">
-        <input id="sub-date-from" type="date" class="form-input" style="width:auto;">
-        <span style="color:var(--dm-text-muted,#888);">to</span>
-        <input id="sub-date-to" type="date" class="form-input" style="width:auto;">
-        <span id="sub-count" class="text-muted" style="white-space:nowrap;font-size:.85rem;"></span>
+    <div class="fsx-card">
+        <div class="fsx-bar">
+            <div class="fsx-seg" role="group" aria-label="Show">
+                <button type="button" data-on-click="showInbox" data-bind-class="filter.value === 'inbox' && 'is-on'">Inbox <b data-bind-text="counts.value.inbox"></b></button>
+                <button type="button" data-on-click="showNew" data-bind-class="filter.value === 'new' && 'is-on'">New this week <b data-bind-text="counts.value.new"></b></button>
+                <button type="button" data-on-click="showSpam" data-bind-class="filter.value === 'spam' && 'is-on'">Spam <b data-bind-text="counts.value.spam"></b></button>
+            </div>
+            <input type="search" class="form-input fsx-search" placeholder="Search answers…" aria-label="Search answers" data-model="query.value">
+            <span class="fsx-dates">
+                <input type="date" class="form-input" aria-label="From" data-model="from.value">
+                <span class="fsx-muted">to</span>
+                <input type="date" class="form-input" aria-label="To" data-model="to.value">
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="clearDates" data-bind-hidden="!from.value && !to.value" title="Clear the dates">×</button>
+            </span>
+            <span data-help-title="Finding one" data-help="Search looks through every answer. The dates are the day it was sent, both ends included. New this week is the last 7 days - the same count as the badge on Forms in the sidebar."></span>
+            <span class="fsx-spacer"></span>
+            <small class="fsx-muted" data-bind-text="summary.value"></small>
+        </div>
+        <p class="fsx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="fsx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="fsx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="fsx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
 
-<div class="card">
-    <div class="card-body">
-        <div id="submissions-table"></div>
-    </div>
-</div>
+<style>
+.fsx { display: flex; flex-direction: column; gap: .75rem; }
+.fsx [hidden], .fsx-detail [hidden] { display: none !important; }
+.fsx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fsx-note.is-bad { color: var(--dm-danger); }
+.fsx-muted { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.fsx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.fsx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.fsx-spacer { flex: 1; }
+.fsx-search { flex: 1; min-width: 10rem; max-width: 18rem; }
+.fsx-dates { display: inline-flex; align-items: center; gap: .35rem; }
+.fsx-dates .form-input { width: auto; }
+.fsx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.fsx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.fsx-seg button + button { border-left: 1px solid var(--dm-border); }
+.fsx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.fsx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.fsx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.fsx-list { display: flex; flex-direction: column; }
+.fsx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.fsx-row:last-child { border-bottom: 0; }
+.fsx-row:hover, .fsx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.fsx-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; background: transparent; }
+.fsx-row.is-new .fsx-dot { background: var(--dm-success); }
+.fsx-row.is-spam .fsx-main strong { color: var(--dm-text-muted); text-decoration: line-through; }
+.fsx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.fsx-main strong, .fsx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fsx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fsx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; }
+.fsx-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); }
+.fsx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.fsx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.fsx-when { min-width: 7.5rem; text-align: right; color: var(--dm-text-muted); font-size: var(--dm-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.fsx-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; }
+.fsx-kebab:hover { color: var(--dm-primary); }
+/* The details slideover */
+.fsx-detail { display: flex; flex-direction: column; gap: .85rem; }
+.fsx-answers { display: flex; flex-direction: column; margin: 0; }
+.fsx-answer { padding: .55rem 0; border-bottom: 1px solid var(--dm-border); }
+.fsx-answer dt { font-size: var(--dm-text-xs); font-weight: 600; color: var(--dm-text-muted); margin-bottom: .15rem; }
+.fsx-answer dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
+.fsx-facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.fsx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.fsx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.fsx-export { display: flex; flex-direction: column; gap: .6rem; }
+.fsx-export .btn { justify-content: flex-start; display: inline-flex; align-items: center; gap: .4rem; }
+@media (max-width: 720px) { .fsx-when { display: none; } .fsx-dates { flex-basis: 100%; } }
+</style>