domma-cms 0.75.0 → 0.77.0

package/admin/js/templates/plugin-code.html

@@ -1,82 +1,100 @@
-<style>
-    .pcode-layout { display: flex; gap: 1rem; align-items: stretch; min-height: 70vh; }
-    .pcode-files { flex: 0 0 250px; overflow-y: auto; }
-    .pcode-files .card-body { padding: .5rem; }
-    .pcode-dir {
-        padding: .5rem .5rem .2rem; font-size: .7rem; font-weight: 700;
-        text-transform: uppercase; letter-spacing: .04em;
-        color: var(--dm-text-muted, #6b7280);
-    }
-    .pcode-file {
-        display: flex; align-items: center; gap: .4rem; width: 100%;
-        padding: .3rem .5rem .3rem 1rem; border: 0; background: none; cursor: pointer;
-        border-radius: var(--dm-radius-md, 6px); text-align: left;
-        color: var(--dm-text, inherit); font-size: .82rem;
-        font-family: var(--dm-font-mono, ui-monospace, Menlo, Consolas, monospace);
-        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-    }
-    .pcode-file:hover { background: var(--dm-hover-bg, rgba(128,128,128,.12)); }
-    .pcode-file.active { background: var(--dm-primary, #2563eb); color: #fff; }
-    .pcode-file .pcode-dirty { margin-left: auto; font-weight: 700; }
-    .pcode-editor-card { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-    .pcode-editor-card .card-body { flex: 1; display: flex; flex-direction: column; padding: 0; }
-    .pcode-toolbar {
-        display: flex; align-items: center; gap: .5rem;
-        padding: .5rem .75rem; border-bottom: 1px solid var(--dm-border, rgba(128,128,128,.25));
-    }
-    .pcode-current {
-        font-family: var(--dm-font-mono, ui-monospace, Menlo, Consolas, monospace);
-        font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
-    }
-    #pcode-editor { flex: 1; display: flex; min-height: 55vh; }
-    #pcode-editor > .dm-edit-wrap { flex: 1; }
-    .pcode-statusbar {
-        display: flex; align-items: center; gap: .75rem; padding: .4rem .75rem;
-        border-top: 1px solid var(--dm-border, rgba(128,128,128,.25));
-        font-size: .78rem; color: var(--dm-text-muted, #6b7280);
-    }
-    #pcode-cursor { margin-left: auto; font-family: var(--dm-font-mono, ui-monospace, Menlo, Consolas, monospace); }
-</style>
-
-<div class="view-header d-flex justify-content-between align-items-center mb-4">
-    <div>
-        <h1 class="view-title"><span data-icon="code"></span> <span id="pcode-title">Plugin Code</span></h1>
-        <p class="view-subtitle text-muted" style="margin:0;font-size:.875rem">
-            <code>admin/</code> files apply on a hard refresh; everything else needs a server restart.
-        </p>
-    </div>
-    <div class="d-flex gap-2">
-        <button id="pcode-back" class="btn btn-ghost"><span data-icon="arrow-left"></span> Plugins</button>
-        <button id="pcode-restart" class="btn btn-warning"><span data-icon="refresh-cw"></span> Restart Server</button>
-    </div>
-</div>
+<!-- Plugin code editor. Bound with M.applyBindings - see admin/js/views/plugin-code.js, which also inserts
+     the file-row template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner ("Marketplace › <plugin>") is the heading; Back, New file, Save all
+     and Restart server are banner actions. -->
+<div class="pcx">
+    <p class="pcx-alert is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+    <p class="pcx-alert" data-bind-hidden="!restartPending.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span>Server files were saved - they apply when the server restarts.</span>
+        <button type="button" class="btn btn-sm btn-warning" data-on-click="restart">Restart server</button>
+    </p>
 
-<div class="pcode-layout">
-    <div class="card pcode-files">
-        <div class="card-body">
-            <div style="display:flex;justify-content:space-between;align-items:center;padding:.25rem .5rem .5rem;">
-                <strong style="font-size:.8rem">Files</strong>
-                <button id="pcode-newfile" class="btn btn-sm btn-ghost" title="New file"><span data-icon="plus"></span></button>
+    <div class="pcx-layout">
+        <div class="pcx-card pcx-files">
+            <div class="pcx-card-title">Files
+                <span class="pcx-count" data-bind-text="files.value.length"></span>
+                <span data-help-title="Files" data-help="Every editable file in the plugin (.js, .json, .md, .html, .css, .txt, .svg). Click one to open it - unsaved edits are kept per file while you switch, and a ● marks them. Right-click a file (or ⋮, or Shift+F10) to save, revert, copy its path, rename, duplicate or delete it. plugin.json, plugin.js and config.js cannot be deleted or renamed."></span>
+                <span class="pcx-spacer"></span>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="newFile" title="New file" aria-label="New file"><span data-icon="plus" data-icon-size="14"></span></button>
             </div>
-            <div id="pcode-filelist"></div>
+            <input type="search" class="form-input pcx-search" placeholder="Filter files…" aria-label="Filter files" data-model="query.value">
+            <p class="pcx-note" data-bind-hidden="!loading.value">Loading…</p>
+            <p class="pcx-note" data-bind-hidden="loading.value || rows.value.length" data-bind-text="emptyText.value"></p>
+            <div class="pcx-list" data-each="rows.value key=key"></div>
         </div>
-    </div>
 
-    <div class="card pcode-editor-card">
-        <div class="card-body">
-            <div class="pcode-toolbar">
-                <span class="pcode-current" id="pcode-current">Select a file</span>
-                <span style="flex:1"></span>
-                <button id="pcode-rename" class="btn btn-sm btn-ghost" title="Rename file" disabled><span data-icon="edit-3"></span></button>
-                <button id="pcode-delete" class="btn btn-sm btn-ghost" title="Delete file" disabled><span data-icon="trash"></span></button>
-                <button id="pcode-saveall" class="btn btn-sm btn-ghost" disabled>Save All</button>
-                <button id="pcode-save" class="btn btn-sm btn-primary" disabled><span data-icon="save"></span> Save</button>
+        <div class="pcx-card pcx-editor-card">
+            <div class="pcx-toolbar">
+                <span class="pcx-current" data-bind-text="currentText.value">Select a file</span>
+                <span class="pcx-chip" data-bind-hidden="!openPath.value" data-bind-class="scopeCls.value" data-bind-text="scopeLabel.value" data-bind-title="scopeHint.value"></span>
+                <span class="pcx-chip is-warn" data-bind-hidden="!currentDirty.value">Unsaved</span>
+                <span data-help-title="Saving" data-help="Ctrl+S saves the open file, Ctrl+Shift+S every unsaved file. An admin/ file applies when the admin tab is refreshed; anything else (plugin.js, config.js, public snippets…) is read when the server starts, so it needs a restart - Restart server is in the banner. Leaving with unsaved files asks first and keeps them as a draft for your next visit."></span>
+                <span class="pcx-spacer"></span>
+                <button type="button" class="btn btn-sm btn-ghost" data-on-click="revert" data-bind-hidden="!currentDirty.value" title="Put the open file back as it was saved">Revert</button>
+                <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="!currentDirty.value || saving.value">
+                    <span data-icon="save" data-icon-size="14"></span> Save</button>
+                <button type="button" class="pcx-kebab pcx-more" data-bind-hidden="!openPath.value" aria-label="More for this file" title="More">⋮</button>
             </div>
-            <div id="pcode-editor"></div>
-            <div class="pcode-statusbar">
-                <span id="pcode-status">Ctrl+S saves the open file. Unsaved edits survive switching files.</span>
-                <span id="pcode-cursor"></span>
+            <div class="pcx-editor" id="pcode-editor"></div>
+            <p class="pcx-empty" data-bind-hidden="openPath.value">Choose a file on the left to edit it.</p>
+            <div class="pcx-statusbar">
+                <span data-bind-text="status.value"></span>
+                <span class="pcx-spacer"></span>
+                <span data-bind-hidden="!dirtyCount.value" data-bind-text="dirtyText.value"></span>
+                <span class="pcx-cursor" data-bind-text="cursor.value"></span>
             </div>
         </div>
     </div>
 </div>
+
+<style>
+.pcx { display: flex; flex-direction: column; gap: .75rem; }
+.pcx [hidden], .pcx-form [hidden] { display: none !important; }
+.pcx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .55rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 16%, transparent); color: var(--dm-text); }
+.pcx-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); color: var(--dm-danger); }
+.pcx-layout { display: flex; gap: .75rem; align-items: stretch; min-height: 70vh; }
+.pcx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); display: flex; flex-direction: column; min-width: 0; }
+.pcx-files { flex: 0 0 270px; padding: .6rem; gap: .5rem; overflow-y: auto; max-height: 80vh; }
+.pcx-card-title { display: flex; align-items: center; gap: .3rem; font-weight: 600; }
+.pcx-count { opacity: .6; font-size: var(--dm-text-xs); font-weight: 400; }
+.pcx-spacer { flex: 1; }
+.pcx-search { width: 100%; }
+.pcx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pcx-list { display: flex; flex-direction: column; }
+.pcx-dir { padding: .5rem .35rem .15rem; font-size: var(--dm-text-xs); font-weight: 700; letter-spacing: .03em; color: var(--dm-text-muted);
+    font-family: var(--dm-font-mono, monospace); }
+.pcx-file { display: flex; align-items: center; gap: .35rem; padding: .28rem .35rem; border-radius: var(--dm-radius-sm); cursor: pointer;
+    color: var(--dm-text); font-size: var(--dm-text-sm); font-family: var(--dm-font-mono, monospace); min-width: 0; }
+.pcx-file.is-nested { padding-left: 1rem; }
+.pcx-file:hover, .pcx-file:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.pcx-file.is-open { background: color-mix(in srgb, var(--dm-primary) 16%, transparent); box-shadow: inset 3px 0 0 var(--dm-primary); }
+.pcx-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pcx-dirty { color: var(--dm-warning); font-weight: 700; }
+.pcx-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 .3rem; }
+.pcx-kebab:hover { color: var(--dm-primary); }
+.pcx-editor-card { flex: 1; }
+.pcx-toolbar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--dm-border); }
+.pcx-toolbar .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.pcx-current { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.pcx-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); }
+.pcx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 14%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.pcx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.pcx-editor { flex: 1; display: flex; min-height: 55vh; }
+.pcx-editor > .dm-edit-wrap { flex: 1; }
+.pcx-empty { margin: 0; padding: 2rem; color: var(--dm-text-muted); text-align: center; }
+.pcx-statusbar { display: flex; align-items: center; gap: .75rem; padding: .4rem .75rem; border-top: 1px solid var(--dm-border);
+    font-size: var(--dm-text-xs); color: var(--dm-text-muted); }
+.pcx-cursor { font-family: var(--dm-font-mono, monospace); }
+/* The path slideover */
+.pcx-form { display: flex; flex-direction: column; gap: .85rem; }
+.pcx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.pcx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pcx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.pcx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.pcx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+@media (max-width: 800px) { .pcx-layout { flex-direction: column; } .pcx-files { flex-basis: auto; max-height: 40vh; } }
+</style>

package/admin/js/templates/plugins.html

@@ -1,35 +1,107 @@
-<div class="view-header d-flex justify-content-between align-items-center">
-    <div>
-        <h1><span data-icon="store"></span> Marketplace</h1>
-        <p class="text-muted" style="margin:0;font-size:.875rem">Install plugins to add features. Once enabled, a plugin appears under Tools. Changes take effect after a server restart.</p>
-    </div>
-    <div style="display:flex;gap:.5rem;align-items:center;">
-        <button id="install-file-btn" class="btn btn-secondary" title="Install a .dcmsplugin file">
-            <span data-icon="upload"></span> Install from File
-        </button>
-        <button id="new-plugin-btn" class="btn btn-primary">
-            <span data-icon="plus"></span> New Plugin
-        </button>
-    </div>
-    <input type="file" id="install-file-input" accept=".dcmsplugin" hidden>
-</div>
+<!-- The Marketplace (System › Plugins). Bound with M.applyBindings - see admin/js/views/plugins.js, which
+     also inserts the row templates (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner is the heading; New plugin and Install from file are banner actions. -->
+<div class="plx">
+    <p class="plx-note">Install plugins to add features. Once switched on, a plugin is a Tool and appears in the sidebar.
+        <span data-help-title="The Marketplace" data-help="Installed lists what is on this site; Browse lists what this site can get from its manager (a site that is not managed installs from a .dcmsplugin file instead - Install from file in the banner). Switching a plugin on or off restarts the server, because a plugin's routes and screens are only read at start-up. Licensed plugins carry their licence with them: one that is switched on but not licensed does not run, and says so here."></span></p>
+    <input type="file" class="plx-file" accept=".dcmsplugin" hidden>
 
-<div id="plugin-tabs" class="tabs">
-    <div class="tab-list">
-        <button class="tab-item active" data-tab="installed">Installed</button>
-        <button class="tab-item" data-tab="marketplace">Browse</button>
-    </div>
+    <p class="plx-alert" data-bind-hidden="!restarting.value">
+        <span class="plx-spinner" aria-hidden="true"></span>
+        <span data-bind-text="restarting.value"></span>
+    </p>
 
-    <div class="tab-panel active" data-panel="installed">
-        <div id="plugins-empty" class="card" style="display:none">
-            <div class="card-body text-muted">
-                No plugins found. Drop a plugin folder into the <code>plugins/</code> directory to get started.
+    <div class="tabs plx-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">Installed <span class="plx-count" data-bind-text="plugins.value.length"></span></button>
+            <button type="button" class="tab-item">Browse <span class="plx-count" data-bind-hidden="!updateCount.value" data-bind-text="updateCountText.value"></span></button>
+        </div>
+
+        <!-- Installed -->
+        <div class="tab-panel active">
+            <div class="plx-card">
+                <div class="plx-bar">
+                    <div class="plx-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="showOn" data-bind-class="filter.value === 'on' && 'is-on'">On <b data-bind-text="counts.value.on"></b></button>
+                        <button type="button" data-on-click="showOff" data-bind-class="filter.value === 'off' && 'is-on'">Off <b data-bind-text="counts.value.off"></b></button>
+                        <button type="button" data-on-click="showAttention" data-bind-class="filter.value === 'attention' && 'is-on'" data-bind-hidden="!counts.value.attention">Needs attention <b data-bind-text="counts.value.attention"></b></button>
+                    </div>
+                    <input type="search" class="form-input plx-search" placeholder="Search plugins…" aria-label="Search plugins" data-model="query.value">
+                    <span data-help-title="Installed plugins" data-help="Click a plugin for its details and settings. Right-click it (or ⋮, or Shift+F10) to switch it on or off, configure it, update it, view its source, export it as a .dcmsplugin file or uninstall it. Built-in plugins are part of the CMS and always on. Licensed plugins cannot be viewed or exported here."></span>
+                </div>
+                <p class="plx-note" data-bind-hidden="!loading.value">Loading…</p>
+                <p class="plx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+                <p class="plx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+                <div class="plx-list plx-installed" data-each="rows.value key=name"></div>
             </div>
         </div>
-        <div id="plugins-grid" class="plugins-grid"></div>
-    </div>
 
-    <div class="tab-panel" data-panel="marketplace">
-        <div id="marketplace-mount"></div>
+        <!-- Browse -->
+        <div class="tab-panel">
+            <div class="plx-browse"></div>
+        </div>
     </div>
 </div>
+
+<style>
+.plx { display: flex; flex-direction: column; gap: .75rem; }
+.plx [hidden], .plx-form [hidden] { display: none !important; }
+.plx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.plx-note.is-bad { color: var(--dm-danger); }
+.plx-alert { margin: 0; display: flex; gap: .5rem; align-items: center; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-primary) 14%, transparent); color: var(--dm-text); }
+.plx-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: plx-spin .8s linear infinite; flex-shrink: 0; }
+@keyframes plx-spin { to { transform: rotate(360deg); } }
+.plx-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.plx-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; }
+.plx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.plx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.plx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.plx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.plx-seg button + button { border-left: 1px solid var(--dm-border); }
+.plx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.plx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.plx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.plx-list { display: flex; flex-direction: column; }
+.plx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.plx-row:last-child { border-bottom: 0; }
+.plx-row:hover, .plx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.plx-row.is-attention { box-shadow: inset 3px 0 0 var(--dm-warning); }
+.plx-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; flex-shrink: 0;
+    border-radius: var(--dm-radius-md); color: var(--plugin-accent, var(--dm-primary));
+    background: color-mix(in srgb, var(--plugin-accent, var(--dm-primary)) 14%, transparent); }
+.plx-row.is-off .plx-icon { color: var(--dm-text-muted); background: color-mix(in srgb, var(--dm-text-muted) 12%, transparent); }
+.plx-row.is-off .plx-main strong { color: var(--dm-text-muted); }
+.plx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.plx-main strong, .plx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.plx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.plx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.plx-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); }
+.plx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.plx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 16%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.plx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.plx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.plx-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; }
+.plx-kebab:hover { color: var(--dm-primary); }
+.plx-act { flex-shrink: 0; }
+/* Slideovers */
+.plx-form { display: flex; flex-direction: column; gap: .85rem; }
+.plx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.plx-facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; font-size: var(--dm-text-sm); }
+.plx-facts dt { color: var(--dm-text-muted); }
+.plx-facts dd { margin: 0; }
+.plx-desc { margin: 0; }
+.plx-sub { margin: .25rem 0 0; font-size: var(--dm-text-sm); font-weight: 600; }
+.plx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.plx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.plx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.plx-setting .form-label { margin: 0; }
+.plx-json { font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-sm); }
+.plx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); flex-wrap: wrap; }
+.plx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.plx-spacer { flex: 1; }
+@media (max-width: 640px) { .plx-main small { white-space: normal; } .plx-chips { display: none; } }
+</style>

package/admin/js/templates/project-detail.html

@@ -1,152 +1,90 @@
-<style>
-    .pd-wrap { display: flex; flex-direction: column; gap: 1.5rem; }
-
-    /* ── Hero ─────────────────────────────────────────────────────────── */
-    .pd-hero {
-        display: flex;
-        gap: 1.25rem;
-        align-items: flex-start;
-        padding: 1.5rem;
-        border: 1px solid var(--dm-border, rgba(255,255,255,.08));
-        border-radius: 14px;
-        background:
-            radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--dm-primary) 12%, transparent), transparent 55%),
-            var(--dm-card-bg, rgba(255,255,255,.04));
-        position: relative;
-        overflow: hidden;
-    }
-    .pd-hero::before {
-        content: '';
-        position: absolute;
-        top: 0; bottom: 0; left: 0;
-        width: 4px;
-        background: linear-gradient(180deg, var(--dm-primary), var(--dm-primary-dark));
-    }
-    .pd-hero-icon {
-        width: 64px; height: 64px;
-        flex-shrink: 0;
-        border-radius: 16px;
-        display: flex; align-items: center; justify-content: center;
-        background: linear-gradient(135deg, color-mix(in srgb, var(--dm-primary) 28%, transparent), color-mix(in srgb, var(--dm-primary-dark) 28%, transparent));
-        color: var(--dm-primary);
-        box-shadow: 0 6px 18px color-mix(in srgb, var(--dm-primary) 18%, transparent);
-    }
-    .pd-hero-icon svg, .pd-hero-icon span[data-icon] { width: 32px; height: 32px; }
-    .pd-hero-main { flex: 1; min-width: 0; }
-    .pd-hero-top {
-        display: flex; align-items: flex-start; justify-content: space-between;
-        gap: 1rem; flex-wrap: wrap;
-    }
-    .pd-title { font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.15; }
-    .pd-actions { display: flex; gap: .5rem; flex-shrink: 0; }
-    .pd-desc { color: var(--dm-text-muted, #888); margin: .5rem 0 0; max-width: 64ch; }
-    .pd-desc:empty { display: none; }
-
-    /* ── Meta badges ──────────────────────────────────────────────────── */
-    .pd-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
-    .pd-meta-badge {
-        display: inline-flex; align-items: center; gap: .45rem;
-        padding: .4rem .7rem;
-        border-radius: 999px;
-        font-size: .8rem; line-height: 1;
-        border: 1px solid transparent;
-    }
-    .pd-meta-badge svg, .pd-meta-badge span[data-icon] { width: 14px; height: 14px; }
-    .pd-meta-k { color: var(--dm-text-muted, #999); font-weight: 500; }
-    .pd-meta-v { font-weight: 600; }
-
-    /* ── Section header ───────────────────────────────────────────────── */
-    .pd-section-head {
-        display: flex; align-items: baseline; gap: .6rem;
-        margin: 0 0 .35rem;
-    }
-    .pd-section-title {
-        font-size: 1rem; font-weight: 600; margin: 0;
-        display: flex; align-items: center; gap: .5rem;
-    }
-    .pd-section-title svg, .pd-section-title span[data-icon] {
-        width: 17px; height: 17px; color: var(--dm-text-muted, #888);
-    }
-    .pd-total { font-size: .8rem; color: var(--dm-text-muted, #888); }
-    .pd-hint { color: var(--dm-text-muted, #888); margin: 0 0 .9rem; font-size: .82rem; }
-
-    /* ── Artefact stat tiles (each with a + to create one) ────────────── */
-    .pd-tiles {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
-        gap: .85rem;
-    }
-    .pd-tile {
-        position: relative;
-        border: 1px solid var(--dm-border, rgba(255,255,255,.08));
-        border-left: 3px solid var(--c, #5b8cff);
-        border-radius: 11px;
-        background: var(--dm-card-bg, rgba(255,255,255,.04));
-        transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
-    }
-    .pd-tile--link:hover {
-        transform: translateY(-2px);
-        box-shadow: var(--dm-shadow-lg);
-        border-color: var(--c, #5b8cff);
-    }
-    .pd-tile-link {
-        display: flex; align-items: center; gap: .85rem;
-        padding: .9rem 1rem; padding-right: 2.6rem;   /* room for the + */
-        text-decoration: none; color: inherit;
-    }
-    .pd-tile-link--empty { opacity: .55; }
-    .pd-tile-chip {
-        width: 40px; height: 40px; flex-shrink: 0;
-        border-radius: 10px;
-        display: flex; align-items: center; justify-content: center;
-    }
-    .pd-tile-chip svg, .pd-tile-chip span[data-icon] { width: 20px; height: 20px; }
-    .pd-tile-body { display: flex; flex-direction: column; min-width: 0; }
-    .pd-tile-count { font-size: 1.5rem; font-weight: 700; line-height: 1; }
-    .pd-tile-label {
-        font-size: .78rem; color: var(--dm-text-muted, #888);
-        margin-top: .2rem; text-transform: uppercase; letter-spacing: .03em;
-    }
-    .pd-tile-add {
-        position: absolute; top: 8px; right: 8px;
-        width: 26px; height: 26px; border-radius: 7px;
-        display: flex; align-items: center; justify-content: center;
-        border: 1px solid var(--dm-border, rgba(255,255,255,.12));
-        background: var(--dm-card-bg, rgba(255,255,255,.05));
-        color: var(--c, #5b8cff);
-        cursor: pointer; opacity: .7;
-        transition: opacity .14s ease, background .14s ease, border-color .14s ease, transform .14s ease;
-    }
-    .pd-tile-add:hover {
-        opacity: 1; transform: scale(1.08);
-        border-color: var(--c, #5b8cff);
-        background: var(--dm-hover-bg);
-    }
-    .pd-tile-add svg, .pd-tile-add span[data-icon] { width: 15px; height: 15px; }
-</style>
+<!-- A project's overview. Bound with M.applyBindings - see admin/js/views/project-detail.js, which also
+     inserts the tile template (the router renders a templateUrl through _.render, eating any {{…}}).
+     No page heading: the Tool banner is the heading ("Projects › <name>"), with Settings in it. -->
+<div class="pdx">
+    <p class="pdx-alert" data-bind-hidden="!off.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span>This project is <strong>disabled</strong>: its public pages 404 and its external API does not answer. Editing it here carries on.</span>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="enable" data-bind-disabled="busy.value">Enable</button>
+    </p>
+    <p class="pdx-alert is-bad" data-bind-hidden="!loadError.value">
+        <span data-bind-text="loadError.value"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="retry">Try again</button>
+    </p>
 
-<div class="pd-wrap">
-    <div class="pd-hero">
-        <div class="pd-hero-icon"><span id="pd-icon" data-icon="folder"></span></div>
-        <div class="pd-hero-main">
-            <div class="pd-hero-top">
-                <h2 class="pd-title"><span id="pd-name">Project</span></h2>
-                <div class="pd-actions">
-                    <a class="btn btn-secondary btn-sm" href="#/projects"><span data-icon="arrow-left"></span> Projects</a>
-                    <a class="btn btn-secondary btn-sm" id="pd-settings"><span data-icon="settings"></span> Settings</a>
-                </div>
+    <div class="pdx-hero">
+        <div class="pdx-hero-icon" aria-hidden="true"><span data-icon="folder" data-icon-size="32"></span></div>
+        <div class="pdx-hero-main">
+            <strong class="pdx-name" data-bind-text="name.value"></strong>
+            <p class="pdx-desc" data-bind-hidden="!description.value" data-bind-text="description.value"></p>
+            <div class="pdx-chips">
+                <span class="pdx-chip is-warn" data-bind-hidden="!off.value">Disabled</span>
+                <span class="pdx-chip is-ok" data-bind-hidden="off.value || loading.value">Enabled</span>
+                <span class="pdx-chip" data-bind-hidden="!builtIn.value" title="Built in - cannot be deleted">Built in</span>
+                <span class="pdx-chip" data-bind-text="rootText.value"></span>
+                <span data-help-title="Root URL" data-help="Pages whose address starts with the project's root URL are filed under it without being tagged one by one. Change it, or the name, icon and order, on the project's Settings (banner)."></span>
+            </div>
+            <div class="pdx-meta">
+                <span data-bind-hidden="!created.value"><span data-icon="calendar" data-icon-size="13"></span> Created <b data-bind-text="created.value"></b></span>
+                <span data-bind-hidden="!creator.value"><span data-icon="user" data-icon-size="13"></span> by <b data-bind-text="creator.value"></b></span>
+                <span data-bind-hidden="!updated.value" data-bind-title="updatedTitle.value"><span data-icon="clock" data-icon-size="13"></span> Changed <b data-bind-text="updated.value"></b></span>
             </div>
-            <p id="pd-desc" class="pd-desc"></p>
-            <div id="pd-meta" class="pd-meta"></div>
         </div>
     </div>
 
-    <section>
-        <div class="pd-section-head">
-            <h3 class="pd-section-title"><span data-icon="layers"></span> Artefacts in this project</h3>
-            <span id="pd-total" class="pd-total"></span>
+    <div class="pdx-card">
+        <div class="pdx-card-title">
+            <span data-icon="layers" data-icon-size="16"></span> Artefacts in this project
+            <small class="pdx-muted" data-bind-text="totalText.value"></small>
+            <span data-help-title="Artefacts" data-help="Everything filed under this project, by type. Click a type to open its list (or, when there are none, to make the first). The + makes a new one filed under this project - pages, collections, menus and blocks in a quick panel here, the rest in their own editor. Right-click a type (or ⋮, or Shift+F10) for both."></span>
         </div>
-        <p class="pd-hint">Click the <strong>+</strong> on any card to create one, filed under this project automatically.</p>
-        <div id="pd-counts"></div>
-    </section>
+        <p class="pdx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <div class="pdx-tiles" data-each="tiles.value key=key"></div>
+    </div>
 </div>
+
+<style>
+.pdx { display: flex; flex-direction: column; gap: .9rem; }
+.pdx [hidden] { display: none !important; }
+.pdx-alert { margin: 0; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem .8rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning, var(--dm-primary)) 16%, transparent); color: var(--dm-text); }
+.pdx-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.pdx-alert > span:not([data-icon]) { flex: 1; min-width: 12rem; }
+.pdx-hero { display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.1rem 1.25rem; border: 1px solid var(--dm-border);
+    border-left: 4px solid var(--dm-primary); border-radius: var(--dm-radius-md);
+    background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--dm-primary) 10%, transparent), transparent 55%), var(--dm-surface); }
+.pdx-hero-icon { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--dm-radius-md); display: flex; align-items: center; justify-content: center;
+    color: var(--dm-primary); background: color-mix(in srgb, var(--dm-primary) 16%, transparent); }
+.pdx-hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
+.pdx-name { font-size: var(--dm-text-xl, 1.4rem); line-height: 1.2; }
+.pdx-desc { margin: 0; color: var(--dm-text-muted); max-width: 64ch; }
+.pdx-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
+.pdx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .55rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.pdx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.pdx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning, var(--dm-danger)) 18%, transparent); color: var(--dm-warning, var(--dm-danger)); }
+.pdx-meta { display: flex; flex-wrap: wrap; gap: .9rem; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pdx-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
+.pdx-meta b { color: var(--dm-text); font-weight: 600; }
+.pdx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .7rem; }
+.pdx-card-title { display: flex; align-items: center; gap: .45rem; font-weight: 600; }
+.pdx-muted { color: var(--dm-text-muted); font-weight: 400; font-size: var(--dm-text-sm); }
+.pdx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.pdx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
+.pdx-tile { position: relative; display: flex; align-items: center; gap: .75rem; padding: .75rem .8rem; cursor: pointer;
+    border: 1px solid var(--dm-border); border-left: 3px solid var(--c, var(--dm-primary)); border-radius: var(--dm-radius-md); background: var(--dm-surface);
+    transition: border-color .14s ease, background .14s ease; }
+.pdx-tile:hover, .pdx-tile:focus-visible { border-color: var(--c, var(--dm-primary)); background: var(--dm-table-hover-bg, var(--dm-surface-raised)); outline: none; }
+.pdx-tile.is-empty .pdx-tile-chip, .pdx-tile.is-empty .pdx-tile-body { opacity: .55; }
+.pdx-tile-chip { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--dm-radius-md); display: flex; align-items: center; justify-content: center;
+    color: var(--c, var(--dm-primary)); background: color-mix(in srgb, var(--c, var(--dm-primary)) 14%, transparent); }
+.pdx-tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.pdx-tile-body strong { font-size: 1.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
+.pdx-tile-body small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .03em; margin-top: .2rem; }
+.pdx-tile-actions { display: flex; flex-direction: column; gap: .2rem; align-self: flex-start; }
+.pdx-add, .pdx-kebab { border: 1px solid transparent; background: none; cursor: pointer; color: var(--dm-text-muted); border-radius: var(--dm-radius-sm);
+    width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--dm-text-base); line-height: 1; padding: 0; }
+.pdx-add { color: var(--c, var(--dm-primary)); border-color: var(--dm-border); font-weight: 700; }
+.pdx-add:hover, .pdx-kebab:hover { color: var(--dm-primary); border-color: var(--c, var(--dm-primary)); }
+@media (max-width: 640px) { .pdx-hero { flex-direction: column; } }
+</style>