domma-cms 0.75.0 → 0.77.0

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

@@ -1,67 +1,102 @@
-<div class="page-header">
-    <h2><span id="ps-icon" data-icon="settings"></span> <span id="ps-title">Project settings</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-secondary" id="ps-back"><span data-icon="arrow-left"></span> Back to project</a>
-        <button class="btn btn-primary" id="ps-save"><span data-icon="check"></span> Save</button>
-    </div>
-</div>
+<!-- A project's settings. Bound with M.applyBindings - see admin/js/views/project-settings.js.
+     No page heading: the Tool banner is the heading ("Projects › <name>"), with Save, Overview and All projects. -->
+<div class="psx">
+    <p class="psx-alert is-bad" data-bind-hidden="!errorText.value" data-bind-text="errorText.value"></p>
 
-<div class="card">
-    <div class="card-header">
-        <span data-icon="info"></span> Project details
+    <div class="psx-unsaved" data-bind-hidden="!dirty.value">
+        <span><span data-icon="edit" data-icon-size="14"></span> You have unsaved changes.</span>
+        <span class="psx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-    <div class="card-body">
-        <div class="grid grid-cols-2 dm-pe-grid">
-            <div class="form-group">
-                <label for="ps-slug">Slug</label>
-                <input type="text" id="ps-slug" name="slug" class="form-input" disabled>
-                <small class="form-hint">Immutable after create</small>
+
+    <div class="psx-card">
+        <div class="psx-card-title">Project details
+            <span data-help-title="Project details" data-help="A project groups pages, collections, forms and the rest for the sidebar, and can limit what a user sees. Ctrl+S saves; leaving with unsaved changes asks first and keeps them for your next visit."></span>
+        </div>
+        <div class="psx-grid">
+            <div>
+                <label class="form-label" for="psx-name">Name <span class="text-danger">*</span></label>
+                <input id="psx-name" type="text" class="form-input" maxlength="80" data-model="name.value">
+                <small class="psx-err" data-bind-hidden="!nameErr.value" data-bind-text="nameErr.value"></small>
             </div>
-            <div class="form-group">
-                <label for="ps-name">Name <span class="required">*</span></label>
-                <input type="text" id="ps-name" name="name" class="form-input" required>
+            <div>
+                <label class="form-label" for="psx-slug">Slug
+                    <span data-help="The project's id - in its admin addresses and in every artefact filed under it. It cannot be changed."></span></label>
+                <input id="psx-slug" type="text" class="form-input font-mono" disabled>
             </div>
-            <div class="form-group col-span-2">
-                <label for="ps-description">Description</label>
-                <textarea id="ps-description" name="description" class="form-input" rows="2"></textarea>
+            <div class="psx-wide">
+                <label class="form-label" for="psx-description">Description</label>
+                <textarea id="psx-description" class="form-input" rows="2" maxlength="300" data-model="description.value"></textarea>
             </div>
-            <div class="form-group">
-                <label for="ps-icon">Icon</label>
-                <div id="ps-icon-mount"></div>
-                <small class="form-hint">Click <code>⊞</code> to browse Domma icons</small>
+            <div>
+                <label class="form-label" for="psx-icon">Icon
+                    <span data-help="Shown beside the project in the sidebar and on its overview. Type a Domma icon name or browse with the grid button."></span></label>
+                <div class="psx-icon-mount"></div>
             </div>
-            <div class="form-group">
-                <label for="ps-rootUrl">Root URL</label>
-                <input type="text" id="ps-rootUrl" name="rootUrl" class="form-input" placeholder="/members">
-                <small class="form-hint">URL prefix for auto-inheritance (must start with /)</small>
+            <div>
+                <label class="form-label" for="psx-rootUrl">Root URL
+                    <span data-help-title="Root URL" data-help="Pages under this address are filed under the project without being tagged one by one - with /members, a page at /members/join belongs here. Leave it empty to file pages by hand. The core project owns /."></span></label>
+                <input id="psx-rootUrl" type="text" class="form-input font-mono" placeholder="/members" data-model="rootUrl.value" data-bind-disabled="rootLocked">
+                <small class="psx-err" data-bind-hidden="!rootErr.value" data-bind-text="rootErr.value"></small>
+                <small class="psx-hint" data-bind-hidden="!rootLocked">Locked - a built-in project.</small>
             </div>
-            <div class="form-group">
-                <label for="ps-sortOrder">Sort order</label>
-                <input type="number" id="ps-sortOrder" name="sortOrder" class="form-input" value="0">
-                <small class="form-hint">Lower = higher in the sidebar</small>
+            <div>
+                <label class="form-label" for="psx-sortOrder">Sort order
+                    <span data-help="Lower numbers come first, in Manage projects and in the sidebar."></span></label>
+                <input id="psx-sortOrder" type="number" class="form-input" data-model="sortOrder.value">
             </div>
-            <div class="form-group col-span-2" id="ps-enabled-group">
-                <label class="dm-checkbox-label" style="display:inline-flex;align-items:center;gap:.5rem;">
-                    <input type="checkbox" id="ps-enabled" name="enabled" checked>
-                    <span>Enabled</span>
-                </label>
-                <small class="form-hint">Off = hard kill-switch: public pages 404 and the external API stops responding. Admin editing of its artefacts is unaffected.</small>
+            <div class="psx-setting" data-bind-hidden="!canToggle">
+                <label class="form-label" for="psx-enabled">Enabled
+                    <span data-help="Off is a hard switch: the project's public pages 404 and its external API stops answering. Editing it in the admin carries on."></span></label>
+                <input id="psx-enabled" type="checkbox" class="form-switch" data-model="enabled.value">
             </div>
         </div>
     </div>
-</div>
 
-<div class="card" id="ps-danger-zone" style="border-color:#c33;">
-    <div class="card-header"><h3>Danger zone</h3></div>
-    <div class="card-body">
-        <p>Untagging removes <code>meta.project</code> from every artefact currently tagged with this project. The artefacts remain (untagged); the project record is unchanged.</p>
-        <p>
-            <button class="btn btn-warning" id="ps-untag-all"><span data-icon="tag"></span> Untag all artefacts</button>
-        </p>
-        <hr>
-        <p>Deleting a project is only possible when no artefacts are tagged. The server returns an explanatory error otherwise.</p>
-        <p>
-            <button class="btn btn-danger" id="ps-delete"><span data-icon="trash"></span> Delete project</button>
-        </p>
+    <div class="psx-card psx-danger" data-bind-hidden="!dangerShown">
+        <div class="psx-card-title">Danger zone
+            <span data-help-title="Danger zone" data-help="Untagging takes the project tag off everything filed under it: the artefacts stay and belong to Core. A project can only be deleted once nothing is filed under it. Both ask first."></span>
+        </div>
+        <p class="psx-note" data-bind-text="filedText.value"></p>
+        <div class="psx-danger-row" data-bind-hidden="!canUntag">
+            <span><strong>Untag everything</strong><small>Everything filed here goes back to Core. The project is kept.</small></span>
+            <button type="button" class="btn btn-sm btn-warning" data-on-click="untagAll" data-bind-disabled="noneFiled.value || busy.value">
+                <span data-icon="tag" data-icon-size="13"></span> Untag all…</button>
+        </div>
+        <div class="psx-danger-row" data-bind-hidden="!canDelete">
+            <span><strong>Delete this project</strong><small data-bind-text="deleteHint.value"></small></span>
+            <button type="button" class="btn btn-sm btn-danger" data-on-click="remove" data-bind-disabled="deleteBlocked.value">
+                <span data-icon="trash" data-icon-size="13"></span> Delete…</button>
+        </div>
     </div>
 </div>
+
+<style>
+.psx { display: flex; flex-direction: column; gap: .9rem; }
+.psx [hidden] { display: none !important; }
+.psx-alert { margin: 0; padding: .6rem .8rem; border-radius: var(--dm-radius-md); color: var(--dm-text); background: color-mix(in srgb, var(--dm-danger) 14%, transparent); }
+.psx-unsaved { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border-radius: var(--dm-radius-md);
+    border: 1px solid color-mix(in srgb, var(--dm-warning, var(--dm-primary)) 40%, transparent);
+    background: color-mix(in srgb, var(--dm-warning, var(--dm-primary)) 14%, var(--dm-surface)); color: var(--dm-text); }
+.psx-unsaved > span:first-child { display: inline-flex; align-items: center; gap: .4rem; }
+.psx-unsaved .btn, .psx-danger-row .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.psx-spacer { flex: 1; }
+.psx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .8rem .95rem; display: flex; flex-direction: column; gap: .75rem; }
+.psx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.psx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.psx-wide { grid-column: 1 / -1; }
+.psx .form-label { display: flex; align-items: center; gap: .3rem; }
+.psx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.psx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.psx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.psx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
+.psx-setting .form-label { margin: 0; }
+.psx-danger { border-color: color-mix(in srgb, var(--dm-danger) 45%, var(--dm-border)); }
+.psx-danger .psx-card-title { color: var(--dm-danger); }
+.psx-danger-row { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--dm-border); }
+.psx-danger-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.psx-danger-row small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+@media (max-width: 640px) { .psx-grid { grid-template-columns: 1fr; } .psx-danger-row { flex-wrap: wrap; } }
+</style>

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

@@ -1,98 +1,173 @@
-<div class="view-header">
-    <h1><span data-icon="shield"></span> <span id="role-title">Edit Role</span></h1>
-    <div>
-        <a href="#/roles" class="btn btn-secondary"><span data-icon="arrow-left"></span> Back</a>
-        <button id="btn-save-role" class="btn btn-primary"><span data-icon="save"></span> Save</button>
+<!-- Role editor. Bound with M.applyBindings - see admin/views/role-editor.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 ("Roles › <role>"), with Save and Back to roles in it. -->
+<div class="rex">
+    <div class="rex-bar" data-bind-hidden="!dirty.value">
+        <span class="rex-chip is-warn">Unsaved</span>
+        <span class="rex-note">Changes to this role are not saved yet.</span>
+        <span class="rex-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="cannot.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-</div>
-
-<div class="tabs" id="role-tabs">
-    <div class="tab-list">
-        <button class="tab-item active">General</button>
-        <button class="tab-item">Permissions</button>
+    <div class="rex-alert is-bad" data-bind-hidden="!risks.value.length">
+        <strong>Careful - this is your own role.</strong>
+        <ul class="rex-risks" data-each="riskRows.value key=id"></ul>
     </div>
-    <div class="tab-content">
-        <!-- General Tab -->
-        <div class="tab-panel active" id="panel-general">
-            <div class="card">
-                <div class="card-body">
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Name (slug)</label>
-                                <input id="role-name" type="text" class="form-input" placeholder="e.g. moderator">
-                                <p class="form-hint">Lowercase identifier. Cannot be changed for the root admin
-                                    role.</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Display Label</label>
-                                <input id="role-label" type="text" class="form-input" placeholder="e.g. Moderator">
-                            </div>
-                        </div>
+    <p class="rex-alert" data-bind-hidden="!isRoot">
+        The root role holds every permission - core and plugins - whatever is ticked here, and keeps its name and level.
+    </p>
+
+    <div class="tabs rex-tabs">
+        <div class="tab-list">
+            <button type="button" class="tab-item active">General <b class="rex-dot" data-bind-hidden="!generalDirty.value" title="Unsaved changes">•</b></button>
+            <button type="button" class="tab-item">Permissions <span class="rex-count" data-bind-text="grantedCount.value"></span>
+                <b class="rex-dot" data-bind-hidden="!permsDirty.value" title="Unsaved changes">•</b></button>
+            <button type="button" class="tab-item">What it can do</button>
+        </div>
+
+        <!-- General -->
+        <div class="tab-panel active">
+            <div class="rex-card">
+                <div class="rex-card-title">Role
+                    <span class="rex-badge-preview badge" data-bind-class="badgeClass.value" data-bind-text="previewLabel.value"></span>
+                    <span class="rex-chip" data-bind-hidden="!holdersText.value" data-bind-text="holdersText.value"></span>
+                    <span class="rex-chip" data-bind-hidden="!pluginText" data-bind-text="pluginText"></span>
+                </div>
+                <div class="rex-grid">
+                    <div>
+                        <label class="form-label" for="rex-label">Label <span class="text-danger">*</span>
+                            <span data-help="The name people see - on the user list, the role badge and this screen."></span></label>
+                        <input id="rex-label" type="text" class="form-input" maxlength="60" data-model="label.value">
+                        <small class="rex-err" data-bind-hidden="!errors.value.label" data-bind-text="errors.value.label"></small>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rex-name">Name
+                            <span data-help-title="Name" data-help="The role's id: users hold it by this name, and routes and plugins refer to it. Renaming a role leaves the users who hold it on a name that no longer exists until you move them - the screen says how many that is."></span></label>
+                        <input id="rex-name" type="text" class="form-input font-mono" maxlength="60" data-model="name.value" data-bind-disabled="nameLockedText">
+                        <small class="rex-hint" data-bind-hidden="!nameLockedText" data-bind-text="nameLockedText"></small>
+                        <small class="rex-hint is-warn" data-bind-hidden="!renameNote.value" data-bind-text="renameNote.value"></small>
+                        <small class="rex-err" data-bind-hidden="!errors.value.name" data-bind-text="errors.value.name"></small>
                     </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Level</label>
-                                <input id="role-level" type="number" class="form-input" min="0">
-                                <p class="form-hint">Lower = more privileged. 0 is reserved for the root admin.</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Badge Colour</label>
-                                <select id="role-badge" class="form-input"></select>
-                            </div>
-                        </div>
+                    <div>
+                        <label class="form-label" for="rex-level">Level
+                            <span data-help-title="Level" data-help="Seniority: lower is more senior. A user can manage only users whose role is strictly less senior than theirs, and a page or menu item visible to a level is visible to every more senior one. 0 is the root role alone."></span></label>
+                        <input id="rex-level" type="number" class="form-input" min="1" data-model="level.value" data-bind-disabled="isRoot">
+                        <small class="rex-err" data-bind-hidden="!errors.value.level" data-bind-text="errors.value.level"></small>
                     </div>
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Project</label>
-                                <select id="role-project" class="form-input">
-                                    <option value="">- none -</option>
-                                </select>
-                                <p class="form-hint">Tag this role to a project for grouping.</p>
-                            </div>
-                        </div>
+                    <div>
+                        <label class="form-label" for="rex-badge">Badge colour</label>
+                        <select id="rex-badge" class="form-input" data-model="badgeClass.value"></select>
+                    </div>
+                    <div>
+                        <label class="form-label" for="rex-project">Project
+                            <span data-help="Files the role under a project, for the sidebar and the project's own Roles list. It does not limit what the role can do."></span></label>
+                        <select id="rex-project" class="form-input" data-model="project.value"><option value="">- none -</option></select>
                     </div>
                 </div>
             </div>
-            <div class="card mt-3" id="role-admin-scope-card">
-                <div class="card-body">
-                    <h3 class="card-title"><span data-icon="lock"></span> Admin area</h3>
-                    <p class="form-hint">Leave both blank to let this role use every admin screen its permissions
-                        allow. Fill in the allowed screens to confine it - customers who should only ever see their
-                        own portal, say. A user is confined only if every role they hold is; My Profile is always
-                        open.</p>
-                    <div class="row">
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Allowed screens</label>
-                                <textarea id="role-admin-allow" class="form-input" rows="4"
-                                          placeholder="/portal"></textarea>
-                                <p class="form-hint">One admin route per line. A route also allows everything under
-                                    it (<code>/portal</code> allows <code>/portal/orders</code>).</p>
-                            </div>
-                        </div>
-                        <div class="col-6">
-                            <div class="mb-3">
-                                <label class="form-label">Home screen</label>
-                                <input id="role-admin-home" type="text" class="form-input" placeholder="/portal">
-                                <p class="form-hint">Where the user lands, and where they are sent from anywhere
-                                    else. Defaults to the first allowed screen.</p>
-                            </div>
-                        </div>
+
+            <div class="rex-card" data-bind-hidden="isRoot">
+                <div class="rex-card-title"><span data-icon="lock" data-icon-size="15"></span> Admin area
+                    <span data-help-title="Admin area" data-help="Leave both blank to let this role use every admin screen its permissions allow. Fill in the allowed screens to confine it - customers who should only ever see their own portal, say. A user is confined only if EVERY role they hold is; My Profile is always open."></span>
+                    <span class="rex-chip is-warn" data-bind-hidden="!scopeText.value" data-bind-text="scopeText.value"></span></div>
+                <div class="rex-grid">
+                    <div>
+                        <label class="form-label" for="rex-allow">Allowed screens
+                            <span data-help="One admin route per line. A route also allows everything under it: /portal allows /portal/orders."></span></label>
+                        <textarea id="rex-allow" class="form-input font-mono" rows="4" placeholder="/portal" data-model="adminAllow.value"></textarea>
                     </div>
+                    <div>
+                        <label class="form-label" for="rex-home">Home screen
+                            <span data-help="Where holders land after signing in, and where they are sent from anywhere they may not go. Defaults to the first allowed screen."></span></label>
+                        <input id="rex-home" type="text" class="form-input font-mono" placeholder="/portal" data-model="adminHome.value">
+                    </div>
+                </div>
+                <small class="rex-err" data-bind-hidden="!errors.value.admin" data-bind-text="errors.value.admin"></small>
+            </div>
+        </div>
+
+        <!-- Permissions -->
+        <div class="tab-panel">
+            <div class="rex-card" data-bind-class="isRoot && 'is-locked'">
+                <div class="rex-bar-tools">
+                    <input type="search" class="form-input rex-search" placeholder="Search permissions…" aria-label="Search permissions" data-model="query.value">
+                    <div class="rex-seg" role="group" aria-label="Show">
+                        <button type="button" data-on-click="showAll" data-bind-class="show.value === 'all' && 'is-on'">All</button>
+                        <button type="button" data-on-click="showOn" data-bind-class="show.value === 'on' && 'is-on'">Granted</button>
+                        <button type="button" data-on-click="showOff" data-bind-class="show.value === 'off' && 'is-on'">Not granted</button>
+                    </div>
+                    <span data-help-title="Permissions" data-help="Click an action to grant or take it away; Full turns a whole area on or off. Right-click an area (or ⋮, or Shift+F10) for view only or none; right-click a group heading to grant or clear the whole group. Plugins add their own areas under Plugins."></span>
+                    <span class="rex-spacer"></span>
+                    <span class="rex-note" data-bind-text="grantedText.value"></span>
                 </div>
+                <p class="rex-note" data-bind-hidden="rows.value.length">Nothing matches.</p>
+                <div class="rex-matrix" data-each="rows.value key=id"></div>
             </div>
         </div>
 
-        <!-- Permissions Tab -->
-        <div class="tab-panel" id="panel-permissions">
-            <div id="permissions-container"></div>
+        <!-- What it can do -->
+        <div class="tab-panel">
+            <div class="rex-card">
+                <div class="rex-card-title">What <span data-bind-text="previewLabel.value"></span> can do
+                    <span data-help="Read back from the ticks as they are now - saved or not. Anyone holding this role and another gets both roles' permissions together."></span></div>
+                <div class="rex-summary" data-each="summary.value key=id"></div>
+            </div>
         </div>
     </div>
 </div>
+
+<style>
+.rex { display: flex; flex-direction: column; gap: .75rem; }
+.rex [hidden] { display: none !important; }
+.rex-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid 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; }
+.rex-bar .btn, .rex-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.rex-alert { margin: 0; padding: .6rem .8rem; border-radius: var(--dm-radius-md); background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 12%, transparent); color: var(--dm-text); }
+.rex-alert.is-bad { background: color-mix(in srgb, var(--dm-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--dm-danger) 35%, transparent); }
+.rex-risks { margin: .35rem 0 0; padding-left: 1.2rem; }
+.rex-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .7rem; margin-top: .75rem; }
+.rex-card-title { display: flex; align-items: center; gap: .45rem; font-weight: 600; flex-wrap: wrap; }
+.rex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
+.rex-grid .form-label { display: flex; align-items: center; gap: .3rem; }
+.rex-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rex-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rex-hint.is-warn { color: var(--dm-warning); }
+.rex-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.rex-spacer { flex: 1; }
+.rex-dot { color: var(--dm-warning); margin-left: .2rem; }
+.rex-count { opacity: .65; font-size: var(--dm-text-xs); margin-left: .2rem; }
+.rex-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); }
+.rex-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.rex-badge-preview { font-weight: 600; }
+.rex-bar-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.rex-search { flex: 1; min-width: 10rem; max-width: 20rem; }
+.rex-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.rex-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.rex-seg button + button { border-left: 1px solid var(--dm-border); }
+.rex-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.rex-matrix { display: flex; flex-direction: column; }
+.rex-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .35rem; border-bottom: 1px solid var(--dm-border); }
+.rex-row:focus-visible, .rex-row:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.rex-row.is-group { background: color-mix(in srgb, var(--dm-text) 5%, transparent); border-top: 1px solid var(--dm-border); margin-top: .5rem; }
+.rex-row.is-group .rex-main strong { text-transform: uppercase; letter-spacing: .04em; font-size: var(--dm-text-xs); }
+.rex-icon { display: inline-flex; width: 1.6rem; justify-content: center; color: var(--dm-text-muted); flex-shrink: 0; }
+.rex-main { min-width: 11rem; flex: 0 1 16rem; display: flex; flex-direction: column; }
+.rex-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.rex-acts { display: flex; flex-wrap: wrap; gap: .3rem; flex: 1; }
+.rex-act, .rex-full { border: 1px solid var(--dm-border); background: none; color: var(--dm-text-muted); border-radius: 999px; padding: .15rem .6rem;
+    font: inherit; font-size: var(--dm-text-xs); cursor: pointer; }
+.rex-act[aria-pressed="true"] { background: color-mix(in srgb, var(--dm-success) 16%, transparent); border-color: color-mix(in srgb, var(--dm-success) 45%, transparent); color: var(--dm-success); font-weight: 600; }
+.rex-full[data-state="all"] { background: var(--dm-primary); border-color: var(--dm-primary); color: var(--dm-primary-text); }
+.rex-full[data-state="some"] { border-style: dashed; color: var(--dm-text); }
+.rex-act:disabled, .rex-full:disabled, .is-locked .rex-act { cursor: not-allowed; opacity: .6; }
+.rex-state { font-size: var(--dm-text-xs); color: var(--dm-text-muted); min-width: 6rem; text-align: right; }
+.rex-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; }
+.rex-kebab:hover { color: var(--dm-primary); }
+.rex-summary { display: flex; flex-direction: column; }
+.rex-sum { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--dm-border); }
+.rex-sum:last-child { border-bottom: 0; }
+.rex-sum strong { font-weight: 600; }
+@media (max-width: 720px) { .rex-grid { grid-template-columns: 1fr; } .rex-main { flex-basis: 100%; } .rex-state { display: none; } }
+</style>

package/admin/js/templates/roles.html

@@ -1,10 +1,81 @@
-<div class="view-header">
-    <h1><span data-icon="shield"></span> Roles &amp; Permissions</h1>
-    <button id="btn-add-role" class="btn btn-primary"><span data-icon="plus"></span> Add Role</button>
-</div>
+<!-- Roles. Bound with M.applyBindings - see admin/js/views/roles.js, which also inserts the row template
+     (the router renders a templateUrl through _.render, eating any {{…}}). No page heading: the Tool
+     banner is the heading, and New role is a banner action. -->
+<div class="rlx">
+    <p class="rlx-note">Who can do what. A user holds one role (plus any extra ones); a role's level decides who
+        outranks whom, and its permissions what its holders may use.
+        <span data-help-title="Roles" data-help="Level 0 is the root role: it holds every permission, plugins included, and cannot be deleted. A lower number outranks a higher one - an admin can only manage users below their own level. Plugins bring roles of their own; those go when the plugin is uninstalled. A role with an admin scope confines its holders to the admin screens it names."></span></p>
+
+    <p class="rlx-scope" data-bind-hidden="!projectSlug">Showing only roles in the <strong data-bind-text="projectSlug"></strong> project.
+        <a href="#/roles">Show all roles</a></p>
 
-<div class="card">
-    <div class="card-body">
-        <div id="roles-table"></div>
+    <p class="rlx-alert" data-bind-hidden="!orphanText.value">
+        <span data-icon="alert-triangle" data-icon-size="16"></span>
+        <span data-bind-text="orphanText.value"></span>
+    </p>
+
+    <div class="rlx-card">
+        <div class="rlx-bar">
+            <div class="rlx-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="showBuiltIn" data-bind-class="filter.value === 'built-in' && 'is-on'">Built in <b data-bind-text="counts.value['built-in']"></b></button>
+                <button type="button" data-on-click="showCustom" data-bind-class="filter.value === 'custom' && 'is-on'">Yours <b data-bind-text="counts.value.custom"></b></button>
+                <button type="button" data-on-click="showPlugins" data-bind-class="filter.value === 'plugins' && 'is-on'" data-bind-hidden="!counts.value.plugins">Plugins <b data-bind-text="counts.value.plugins"></b></button>
+            </div>
+            <input type="search" class="form-input rlx-search" placeholder="Search roles…" aria-label="Search roles" data-model="query.value">
+            <span data-help-title="The list" data-help="Most senior first. Click a role to set its permissions. Right-click it (or ⋮, or Shift+F10) to duplicate it, copy its name or delete it. Built-in roles and plugin roles cannot be deleted here; a role nobody holds says so."></span>
+        </div>
+        <p class="rlx-note" data-bind-hidden="!loading.value">Loading…</p>
+        <p class="rlx-note is-bad" data-bind-hidden="!loadError.value" data-bind-text="loadError.value"></p>
+        <p class="rlx-note" data-bind-hidden="loading.value || loadError.value || rows.value.length" data-bind-text="emptyText.value"></p>
+        <div class="rlx-list" data-each="rows.value key=id"></div>
     </div>
 </div>
+
+<style>
+.rlx { display: flex; flex-direction: column; gap: .75rem; }
+.rlx [hidden], .rlx-form [hidden] { display: none !important; }
+.rlx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.rlx-note.is-bad { color: var(--dm-danger); }
+.rlx-scope { margin: 0; padding: .5rem .75rem; border-radius: var(--dm-radius-md); font-size: var(--dm-text-sm);
+    background: color-mix(in srgb, var(--dm-primary) 10%, transparent); color: var(--dm-text); }
+.rlx-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-danger) 14%, transparent); color: var(--dm-text); }
+.rlx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
+.rlx-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
+.rlx-search { flex: 1; min-width: 10rem; max-width: 22rem; }
+.rlx-seg { display: inline-flex; border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); overflow: hidden; }
+.rlx-seg button { border: 0; background: none; color: var(--dm-text); padding: .3rem .7rem; cursor: pointer; font: inherit; font-size: var(--dm-text-sm); }
+.rlx-seg button + button { border-left: 1px solid var(--dm-border); }
+.rlx-seg button b { font-weight: 500; opacity: .65; margin-left: .2rem; }
+.rlx-seg button:hover { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); }
+.rlx-seg button.is-on { background: var(--dm-primary); color: var(--dm-primary-text); }
+.rlx-list { display: flex; flex-direction: column; }
+.rlx-row { display: flex; align-items: center; gap: .75rem; padding: .55rem .35rem; border-bottom: 1px solid var(--dm-border); cursor: pointer; }
+.rlx-row:last-child { border-bottom: 0; }
+.rlx-row:hover, .rlx-row:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.rlx-badge { flex-shrink: 0; min-width: 6.5rem; }
+.rlx-badge .badge { white-space: nowrap; }
+.rlx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.rlx-main strong, .rlx-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.rlx-main small { color: var(--dm-text-muted); font-size: var(--dm-text-xs); }
+.rlx-chips { display: inline-flex; gap: .3rem; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
+.rlx-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); }
+.rlx-chip.is-info { background: color-mix(in srgb, var(--dm-info, var(--dm-primary)) 15%, transparent); color: var(--dm-info, var(--dm-primary)); }
+.rlx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.rlx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.rlx-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; }
+.rlx-kebab:hover { color: var(--dm-primary); }
+/* New role slideover */
+.rlx-form { display: flex; flex-direction: column; gap: .85rem; }
+.rlx-form .form-label { display: flex; align-items: center; gap: .3rem; }
+.rlx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rlx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.rlx-preview { display: flex; align-items: center; gap: .5rem; }
+.rlx-preview .badge { white-space: nowrap; flex-shrink: 0; }
+.rlx-actions { display: flex; align-items: center; gap: .4rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.rlx-actions .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.rlx-spacer { flex: 1; }
+@media (max-width: 640px) { .rlx-chips { display: none; } .rlx-badge { min-width: 0; } }
+</style>