domma-cms 0.74.0 → 0.76.0

package/server/routes/api/collections.js

@@ -3,6 +3,7 @@
  *
  * Admin endpoints (authenticated + collections role):
  * GET    /collections                    - List all collections
+ * GET    /collections/_count             - The sidebar badge (count + popover details)
  * POST   /collections                    - Create collection
  * GET    /collections/:slug              - Get schema
  * PUT    /collections/:slug              - Update schema
@@ -53,7 +54,7 @@ import {
     updateEntry
 } from '../../services/collections.js';
 import {authenticate, requireAdmin, requirePermission} from '../../middleware/auth.js';
-import {getRoleLevel, invalidate as invalidateRoles} from '../../services/roles.js';
+import {getRoleLevel, invalidate as invalidateRoles, isBaseRole} from '../../services/roles.js';
 import {getEffectiveLevel} from '../../services/userRoles.js';
 import {getConfig, saveConfig} from '../../config.js';
 import {PRESET_COLLECTION_SLUGS} from '../../services/presetCollections.js';
@@ -64,6 +65,45 @@ import {isProjectEnabled, resolveArtefactProject} from '../../services/projects.
 
 const ALL_PRESET_SLUGS = new Set(['roles', 'user-profiles', ...PRESET_COLLECTION_SLUGS]);
 
+/**
+ * The sidebar badge on Collections (GET /collections/_count): how many
+ * collections this user sees and how many entries they hold, with where they
+ * are stored and the biggest ones. Plain text throughout - the popover sets it
+ * with textContent.
+ *
+ * @param {object[]} list - collections with entryCount, as listCollections answers
+ * @returns {{count: number, label: string, tone: string, details: object}}
+ */
+export function collectionsBadge(list = []) {
+    const plural = (n, one, many = `${one}s`) => `${n.toLocaleString('en-GB')} ${n === 1 ? one : many}`;
+    const kind = (c) => (ALL_PRESET_SLUGS.has(c.slug) ? 'builtin' : c.plugin ? 'plugin' : 'own');
+    const counts = {own: 0, builtin: 0, plugin: 0};
+    for (const c of list) counts[kind(c)]++;
+    const entries = list.reduce((s, c) => s + (Number(c.entryCount) || 0), 0);
+    const mongo = list.filter(c => c.storage?.adapter === 'mongodb').length;
+    const biggest = list.filter(c => Number(c.entryCount) > 0)
+        .sort((a, b) => b.entryCount - a.entryCount || String(a.title || a.slug).localeCompare(String(b.title || b.slug)));
+    return {
+        count: list.length,
+        label: `${plural(list.length, 'collection')}, ${plural(entries, 'entry', 'entries')}`,
+        tone: 'info',
+        details: {
+            title: 'Collections',
+            rows: [
+                {label: 'Yours', value: String(counts.own)},
+                {label: 'Built in', value: String(counts.builtin)},
+                {label: 'Plugins', value: String(counts.plugin)},
+                {label: 'On MongoDB', value: String(mongo)}
+            ],
+            items: biggest.slice(0, 6).map(c => ({
+                text: String(c.title || c.slug),
+                meta: `${plural(Number(c.entryCount), 'entry', 'entries')} · ${c.slug}`
+            })),
+            empty: 'No entries in any collection yet.'
+        }
+    };
+}
+
 /**
  * Resolve the role level number for a named role.
  *
@@ -222,6 +262,9 @@ async function keepRoleSystemFields(id, data) {
         if (existing[field] !== undefined) out[field] = existing[field];
         else delete out[field];
     }
+    // A built-in role keeps its name: renaming `admin` and then deleting it went round
+    // the delete guard (and every user and route that names it would lose it).
+    if (isBaseRole(existing.name)) out.name = existing.name;
     return out;
 }
 
@@ -242,11 +285,23 @@ export async function collectionsRoutes(fastify) {
         for (const c of all) {
             // listCollections returns metadata only; getCollection returns full record with meta
             const full = await getCollection(c.slug);
-            if (canSeeArtefact(request.user, full)) filtered.push(c);
+            // builtIn: the ones DELETE refuses (seeding turns `preset` into `bundled`, which
+            // also covers deletable seeded collections - so the list says which is which).
+            if (canSeeArtefact(request.user, full)) filtered.push(ALL_PRESET_SLUGS.has(c.slug) ? {...c, builtIn: true} : c);
         }
         return filtered;
     });
 
+    // The sidebar badge. Static, so it wins over /collections/:slug; `_` is never in a slug.
+    fastify.get('/collections/_count', canRead, async (request) => {
+        const {canSeeArtefact} = await import('../../services/projects.js');
+        const visible = [];
+        for (const c of await listCollections()) {
+            if (canSeeArtefact(request.user, await getCollection(c.slug))) visible.push(c);
+        }
+        return collectionsBadge(visible);
+    });
+
     fastify.get('/collections/pro-status', canRead, async () => {
     try {
       const connections = getConfig('connections');
@@ -442,6 +497,11 @@ export async function collectionsRoutes(fastify) {
             if (entry?.data?.level === 0) {
                 return reply.status(403).send({ error: 'Cannot delete the root admin role' });
             }
+            // admin and user too: removeRole() refused them by name, but this route did not,
+            // and the old Roles screen offered Delete on both.
+            if (isBaseRole(entry?.data?.name)) {
+                return reply.status(403).send({ error: `Cannot delete the built-in role '${entry.data.name}'` });
+            }
         }
         try {
             await deleteEntry(request.params.slug, request.params.id);
@@ -455,6 +515,10 @@ export async function collectionsRoutes(fastify) {
 
     // Clear all entries - DELETE /collections/:slug/entries (no :id)
     fastify.delete('/collections/:slug/entries', canDelete, async (request, reply) => {
+        // Clearing roles would leave every user holding a role that no longer exists.
+        if (request.params.slug === 'roles') {
+            return reply.status(403).send({ error: 'Roles cannot be cleared - delete them one at a time' });
+        }
         try {
             await clearEntries(request.params.slug);
             return { success: true };

package/server/routes/api/components.js

@@ -3,6 +3,7 @@
  * CRUD + compilation + export/import for .dmc components.
  *
  * GET    /api/components              - list
+ * GET    /api/components/_count       - the sidebar badge (`_` is outside NAME_RE, so no component shadows it)
  * GET    /api/components/:name        - raw source + parsed props
  * GET    /api/components/:name.js     - compiled JS module (public)
  * POST   /api/components/compile      - transient compile for preview
@@ -12,6 +13,7 @@
  * DELETE /api/components/:name        - delete
  */
 import {authenticate, requirePermission} from '../../middleware/auth.js';
+import {ago, plural} from '../../services/sidebarBadges.js';
 import {
     compileComponent,
     deleteComponent,
@@ -23,6 +25,43 @@ import {
     saveComponent
 } from '../../services/components.js';
 
+/**
+ * The sidebar badge on Components (its countUrl): how many there are, split
+ * by where they come from, with the most recently changed ones in the popover.
+ * A count to glance at, never a warning. Plain text throughout - the popover
+ * sets it with textContent.
+ *
+ * @param {object[]} list - as listComponents() returns them, already scoped to the viewer
+ * @param {number} [now]
+ * @returns {{count: number, label: string, tone: string, details: object}}
+ */
+export function componentsBadge(list = [], now = Date.now()) {
+    const plugin = list.filter(c => c.origin === 'plugin');
+    const builtin = list.filter(c => c.origin !== 'plugin' && c.bundled);
+    const mine = list.length - plugin.length - builtin.length;
+    const recent = list.filter(c => c.updatedAt)
+        .sort((a, b) => String(b.updatedAt).localeCompare(String(a.updatedAt)))
+        .slice(0, 6);
+    return {
+        count: list.length,
+        label: `${plural(list.length, 'component')}${mine ? `, ${mine} of yours` : ''}`,
+        tone: 'info',
+        details: {
+            title: 'Components',
+            rows: [
+                {label: 'Yours', value: String(mine)},
+                {label: 'Built in', value: String(builtin.length)},
+                {label: 'From plugins', value: String(plugin.length)}
+            ],
+            items: recent.map(c => {
+                const props = Object.keys(c.props || {}).length;
+                return {text: `<dm-${c.name}>`, meta: `${plural(props, 'prop')} · changed ${ago(c.updatedAt, now)}`};
+            }),
+            empty: 'No components yet.'
+        }
+    };
+}
+
 export async function componentsRoutes(fastify) {
     const canRead   = {preHandler: [authenticate, requirePermission('components', 'read')]};
     const canUpdate = {preHandler: [authenticate, requirePermission('components', 'update')]};
@@ -53,6 +92,13 @@ export async function componentsRoutes(fastify) {
         return all.filter(c => canSeeArtefact(request.user, c));
     });
 
+    // Static, so it wins over /components/:name; `_count` can never be a component name.
+    fastify.get('/components/_count', canRead, async (request) => {
+        const {canSeeArtefact} = await import('../../services/projects.js');
+        const all = await listComponents();
+        return componentsBadge(all.filter(c => canSeeArtefact(request.user, c)));
+    });
+
     fastify.get('/components/:name', canRead, async (request, reply) => {
         let component;
         try { component = await getComponent(request.params.name); }

package/server/routes/api/context-menus.js

@@ -2,6 +2,7 @@
  * Context menus API
  *
  * GET    /api/context-menus                  - list (metadata only)
+ * GET    /api/context-menus/_count           - the sidebar badge (the underscore can never be a slug)
  * GET    /api/context-menus/:slug            - full menu
  * POST   /api/context-menus                  - create
  * PUT    /api/context-menus/:slug            - replace
@@ -18,6 +19,7 @@ import {
 } from '../../middleware/auth.js';
 import {
     ACTION_TYPES,
+    contextMenusBadge,
     createContextMenu,
     deleteContextMenu,
     duplicateContextMenu,
@@ -45,6 +47,12 @@ export async function contextMenusRoutes(fastify, opts = {}) {
         return all.filter((m) => canSeeArtefact(request.user, m));
     });
 
+    // Registered before /context-menus/:slug; `_` is outside the slug alphabet, so no menu can shadow it.
+    fastify.get('/context-menus/_count', canRead, async (request) => {
+        const {canSeeArtefact} = await import('../../services/projects.js');
+        return contextMenusBadge((await listContextMenus()).filter((m) => canSeeArtefact(request.user, m)));
+    });
+
     fastify.get('/context-menus/:slug', canRead, async (request, reply) => {
         const menu = await getContextMenu(request.params.slug);
         if (!menu) return reply.code(404).send({error: 'Context menu not found'});

package/server/routes/api/effects.js

@@ -2,22 +2,77 @@
  * Effects API Routes
  * GET  /api/effects/settings  - public (read by public site IIFE)
  * PUT  /api/effects/settings  - admin-only (save user overrides)
+ *
+ * The PUT whitelists and checks what it stores (normaliseEffectsSettings): it
+ * used to write the request body to config/effects.json verbatim, and GET
+ * hands that file to every public page. Keys this route does not know are
+ * left as they are in the file, never added from a request.
  */
-import {authenticate, requireAdmin} from '../../middleware/auth.js';
+import {
+    authenticate as defaultAuthenticate,
+    requireAdmin as defaultRequireAdmin
+} from '../../middleware/auth.js';
 import {getConfig, saveConfig} from '../../config.js';
 
-export async function effectsRoutes(fastify) {
-    fastify.get('/effects/settings', async () => {
-        try {
-            return getConfig('effects');
-        } catch {
-            return {respectMotion: true, defaultDuration: 600, defaultAnimation: 'fade', defaultThreshold: 0.1};
-        }
-    });
+export const EFFECT_ANIMATIONS = ['fade', 'slide-up', 'slide-down', 'zoom', 'flip'];
+export const EFFECTS_DEFAULTS = {respectMotion: true, defaultDuration: 600, defaultAnimation: 'fade', defaultThreshold: 0.1};
+
+/**
+ * A request body -> {errors, settings}. The same rules as checkSettings() in
+ * admin/js/lib/effects-arrange.js. A duration of 0 is refused: public/js/effects.js
+ * reads `defaultDuration || 600`, so 0 would silently mean 600.
+ *
+ * @param {object} body
+ * @returns {{errors: string[], settings: object}}
+ */
+export function normaliseEffectsSettings(body) {
+    const b = body && typeof body === 'object' ? body : {};
+    const errors = [];
+    const settings = {};
+    if ('respectMotion' in b) settings.respectMotion = b.respectMotion !== false;
+    if ('defaultDuration' in b) {
+        const n = Number(b.defaultDuration);
+        if (!Number.isInteger(n) || n < 1 || n > 10000) errors.push('defaultDuration must be a whole number from 1 to 10000');
+        else settings.defaultDuration = n;
+    }
+    if ('defaultAnimation' in b) {
+        if (!EFFECT_ANIMATIONS.includes(b.defaultAnimation)) errors.push(`defaultAnimation must be one of ${EFFECT_ANIMATIONS.join(', ')}`);
+        else settings.defaultAnimation = b.defaultAnimation;
+    }
+    if ('defaultThreshold' in b) {
+        const n = Number(b.defaultThreshold);
+        if (b.defaultThreshold === '' || b.defaultThreshold === null || !Number.isFinite(n) || n < 0 || n > 1) {
+            errors.push('defaultThreshold must be a number from 0 to 1');
+        } else settings.defaultThreshold = n;
+    }
+    return {errors, settings};
+}
+
+function loadSettings() {
+    try {
+        return {...EFFECTS_DEFAULTS, ...(getConfig('effects') || {})};
+    } catch {
+        return {...EFFECTS_DEFAULTS};
+    }
+}
+
+/**
+ * @param {import('fastify').FastifyInstance} fastify
+ * @param {{authenticate?: Function, requireAdmin?: Function}} [opts] - injectable for tests
+ */
+export async function effectsRoutes(fastify, opts = {}) {
+    const authenticate = opts.authenticate || defaultAuthenticate;
+    const requireAdmin = opts.requireAdmin || defaultRequireAdmin;
+
+    fastify.get('/effects/settings', async () => loadSettings());
 
-    fastify.put('/effects/settings', {preHandler: [authenticate, requireAdmin]}, async (request) => {
-        const body = request.body || {};
-        saveConfig('effects', body);
-        return {ok: true};
+    fastify.put('/effects/settings', {preHandler: [authenticate, requireAdmin]}, async (request, reply) => {
+        const {errors, settings} = normaliseEffectsSettings(request.body);
+        if (errors.length) return reply.status(400).send({error: errors.join('; ')});
+        let current = {};
+        try { current = getConfig('effects') || {}; } catch { /* no file yet */ }
+        const next = {...current, ...settings};
+        saveConfig('effects', next);
+        return {ok: true, settings: {...EFFECTS_DEFAULTS, ...next}};
     });
 }

package/server/routes/api/forms.js

@@ -36,6 +36,7 @@ import {authenticate, requireAdmin, requirePermission} from '../../middleware/au
 import {hooks} from '../../services/hooks.js';
 import {saveMedia} from '../../services/content.js';
 import {v4 as uuidv4} from 'uuid';
+import {ago, clip, plural} from '../../services/sidebarBadges.js';
 
 /**
  * Detect form↔collection mismatches at save time so admins know BEFORE
@@ -228,6 +229,104 @@ function submissionsToCSV(form, entries) {
     return [headers.join(','), ...rows].join('\n');
 }
 
+/**
+ * Where a form's submissions are stored: its collection action's collection
+ * when that is on, else a collection named after the form. The submissions
+ * screen reads from here, so every count must too - the list used to count
+ * `form.slug` and disagreed with it for any form writing elsewhere.
+ *
+ * @param {object} form
+ * @returns {string}
+ */
+export function submissionsCollectionFor(form) {
+    const c = form?.actions?.collection;
+    return c?.enabled && c.slug ? c.slug : form?.slug;
+}
+
+const DAY_MS = 86_400_000;
+
+/**
+ * Submission figures for one form: total, this week (last 7 days), today
+ * (last 24 hours) and the newest one's time. A form whose collection does not
+ * exist yet has none.
+ *
+ * @param {object} form
+ * @param {number} [now]
+ * @returns {Promise<{total: number, week: number, today: number, last: string|null}>}
+ */
+async function submissionStats(form, now = Date.now()) {
+    try {
+        const r = await listEntries(submissionsCollectionFor(form), {limit: 0});
+        const entries = r.entries || [];
+        let week = 0;
+        let today = 0;
+        let last = null;
+        for (const e of entries) {
+            const at = e.meta?.createdAt;
+            const t = at ? Date.parse(at) : NaN;
+            if (!Number.isFinite(t)) continue;
+            if (now - t <= 7 * DAY_MS) week++;
+            if (now - t <= DAY_MS) today++;
+            if (!last || at > last) last = at;
+        }
+        return {total: r.total ?? entries.length, week, today, last};
+    } catch {
+        return {total: 0, week: 0, today: 0, last: null};
+    }
+}
+
+/**
+ * The sidebar badge on Forms (its countUrl, GET /api/forms/_count): the
+ * submissions that came in over the last 7 days, with the forms they came
+ * through. There is no "read" state for a submission, so recent is the
+ * useful number. Plain text throughout - the popover sets it with textContent.
+ *
+ * @param {{title: string, slug: string, stats: {total, week, today, last}}[]} forms
+ * @param {number} [now]
+ */
+/**
+ * Each form's submission stats, kept a minute: the sidebar asks for the Forms
+ * badge every minute from every open admin tab, and stats read every
+ * submission. Per form, not per user - who may see which form is still
+ * decided on each request.
+ */
+const statsCache = new Map();
+async function cachedStats(form, now) {
+    const hit = statsCache.get(form.slug);
+    if (hit && now - hit.at < 60_000) return hit.value;
+    const value = await submissionStats(form, now);
+    statsCache.set(form.slug, {at: now, value});
+    return value;
+}
+
+export function formsBadge(forms = [], now = Date.now()) {
+    const week = forms.reduce((n, f) => n + (f.stats?.week || 0), 0);
+    const today = forms.reduce((n, f) => n + (f.stats?.today || 0), 0);
+    const total = forms.reduce((n, f) => n + (f.stats?.total || 0), 0);
+    const busy = forms.filter(f => f.stats?.week > 0)
+        .sort((a, b) => String(b.stats.last).localeCompare(String(a.stats.last)));
+    return {
+        // The number stays what the sidebar has always shown on Forms (how many); submissions are the label.
+        count: forms.length,
+        label: `${plural(forms.length, 'form')}${week ? `, ${plural(week, 'submission')} this week` : ', no submissions this week'}`,
+        tone: 'info',
+        details: {
+            title: 'Forms',
+            rows: [
+                {label: 'Last 24 hours', value: String(today)},
+                {label: 'Last 7 days', value: String(week)},
+                {label: 'All time', value: String(total)},
+                {label: 'Forms', value: String(forms.length)}
+            ],
+            items: busy.slice(0, 6).map(f => ({
+                text: clip(f.title || f.slug),
+                meta: `${f.stats.week} this week · last ${ago(f.stats.last, now)}`
+            })),
+            empty: 'No submissions in the last 7 days.'
+        }
+    };
+}
+
 export async function formsRoutes(fastify) {
     await ensureFormsDir();
 
@@ -242,26 +341,40 @@ export async function formsRoutes(fastify) {
     fastify.get('/forms', canRead, async (request) => {
         const {canSeeArtefact} = await import('../../services/projects.js');
         const forms = await listForms();
+        const now = Date.now();
         const result = await Promise.all(forms.map(async form => {
-            let submissionCount = 0;
-            try {
-                // listEntries returns { entries, total, page, limit } - total is the
-                // unpaginated count which is what we want for the badge here.
-                const r = await listEntries(form.slug, { limit: 0 });
-                submissionCount = r.total ?? (r.entries || []).length;
-            } catch {
-                // collection may not exist yet
-            }
+            // Counted where the submissions screen reads them (submissionsCollectionFor).
+            const stats = await submissionStats(form, now);
             // listForms returns metadata only; readForm returns full record with meta
             let full = null;
             try { full = await readForm(form.slug); } catch { /* skip */ }
-            return { form: { ...form, submissionCount }, full };
+            return {
+                form: {...form, submissionCount: stats.total, submissionsThisWeek: stats.week, lastSubmissionAt: stats.last},
+                full
+            };
         }));
         return result
             .filter(({ full }) => canSeeArtefact(request.user, full))
             .map(({ form }) => form);
     });
 
+    // -----------------------------------------------------------------------
+    // GET /forms/_count - the sidebar badge (formsBadge). `_` is outside the
+    // slug alphabet (slugify), so no form can shadow it.
+    // -----------------------------------------------------------------------
+    fastify.get('/forms/_count', canRead, async (request) => {
+        const {canSeeArtefact} = await import('../../services/projects.js');
+        const now = Date.now();
+        const forms = await listForms();
+        const seen = await Promise.all(forms.map(async (form) => {
+            let full = null;
+            try { full = await readForm(form.slug); } catch { /* skip */ }
+            if (!canSeeArtefact(request.user, full)) return null;
+            return {title: form.title, slug: form.slug, stats: await cachedStats(form, now)};
+        }));
+        return formsBadge(seen.filter(Boolean), now);
+    });
+
     // -----------------------------------------------------------------------
     // POST /forms - create new form
     // -----------------------------------------------------------------------

package/server/routes/api/layouts.js

@@ -7,9 +7,16 @@
  * DELETE /api/layouts/:key   - delete a preset (builtin presets cannot be deleted)
  * GET    /api/layouts/options - get layout options
  * PUT    /api/layouts/options - save layout options
+ * GET    /api/layouts/_usage  - which pages use each layout, and which use one that is gone
+ * GET    /api/layouts/_count  - the sidebar badge: pages whose layout no longer exists
+ *
+ * `_` is outside the key alphabet (slugify below), so no layout can shadow the last two.
  */
 import {getConfig, saveConfig} from '../../config.js';
-import {authenticate, requirePermission} from '../../middleware/auth.js';
+import {
+    authenticate as defaultAuthenticate,
+    requirePermission as defaultRequirePermission
+} from '../../middleware/auth.js';
 
 const VALID_WIDTHS = new Set(['narrow', 'normal', 'wide', 'full']);
 const BG_COLOR_RE = /^[a-zA-Z0-9#(),.\s%/-]+$/;
@@ -78,7 +85,74 @@ function sanitisePreset(data) {
     };
 }
 
-export async function layoutsRoutes(fastify) {
+/**
+ * Which pages use each layout. A page names its layout in frontmatter
+ * (`layout: key`); none means `default`. A page naming a layout that no longer
+ * exists is rendered with the default one (renderer.js: presets[page.layout] ||
+ * presets.default) - nothing says so, which is what `missing` is for.
+ *
+ * @param {Record<string, object>} presets
+ * @param {{urlPath: string, title?: string, status?: string, layout?: string}[]} pages
+ * @returns {{byKey: Record<string, {urlPath, title, status}[]>, missing: {urlPath, title, status, layout}[]}}
+ */
+export function layoutUsage(presets = {}, pages = []) {
+    const byKey = Object.fromEntries(Object.keys(presets).map(k => [k, []]));
+    const missing = [];
+    for (const p of pages) {
+        const key = typeof p.layout === 'string' && p.layout.trim() ? p.layout.trim() : 'default';
+        const item = {urlPath: p.urlPath, title: p.title || p.urlPath, status: p.status || 'published'};
+        if (byKey[key]) byKey[key].push(item);
+        else missing.push({...item, layout: key});
+    }
+    return {byKey, missing};
+}
+
+/**
+ * The sidebar badge on Layouts: pages that name a layout which no longer
+ * exists (they quietly show as Default). A count of layouts would be noise -
+ * nothing needs doing about it - so this answers 0 (no badge) until something
+ * is wrong. Plain text throughout: the popover sets it with textContent.
+ *
+ * @param {Record<string, object>} presets
+ * @param {ReturnType<typeof layoutUsage>} usage
+ */
+export function layoutsBadge(presets = {}, usage = {byKey: {}, missing: []}) {
+    const all = Object.values(presets);
+    const builtin = all.filter(p => p.builtin).length;
+    const missing = usage.missing || [];
+    const inUse = Object.values(usage.byKey || {}).filter(list => list.length).length;
+    const n = missing.length;
+    return {
+        count: n,
+        label: n
+            ? `${n} page${n === 1 ? '' : 's'} use${n === 1 ? 's' : ''} a layout that no longer exists`
+            : `${all.length} layout${all.length === 1 ? '' : 's'}, every page's layout exists`,
+        tone: 'attention',
+        details: {
+            title: 'Layouts',
+            rows: [
+                {label: 'Layouts', value: `${all.length} (${builtin} built in)`},
+                {label: 'In use', value: String(inUse)},
+                {label: 'Pages on a missing layout', value: String(n), ...(n && {tone: 'danger'})}
+            ],
+            items: missing.slice(0, 8).map(p => ({
+                text: String(p.title || p.urlPath),
+                meta: `${p.urlPath} · "${p.layout}" is gone - showing as Default`,
+                tone: 'danger'
+            })),
+            empty: "Every page's layout exists."
+        }
+    };
+}
+
+/**
+ * @param {import('fastify').FastifyInstance} fastify
+ * @param {{authenticate?: Function, requirePermission?: Function, listPages?: Function}} [opts] - DI for tests
+ */
+export async function layoutsRoutes(fastify, opts = {}) {
+    const authenticate      = opts.authenticate      || defaultAuthenticate;
+    const requirePermission = opts.requirePermission || defaultRequirePermission;
+    const listPages = opts.listPages || (async () => (await import('../../services/content.js')).listPages());
     // ── Merge-in seeding: ensure built-in presets exist ──────────────────────
     const existing = getConfig('presets') || {};
     let seeded = false;
@@ -174,6 +248,23 @@ export async function layoutsRoutes(fastify) {
         return {success: true};
     });
 
+    // ── Usage and the sidebar badge ──────────────────────────────────────────
+    const usageNow = async () => layoutUsage(getConfig('presets') || {}, await listPages().catch(() => []));
+
+    fastify.get('/layouts/_usage', canRead, async () => usageNow());
+
+    // Polled every minute from every open admin tab, and reading every page is not
+    // free: the answer is kept a minute (the screen's own _usage always reads afresh).
+    let badgeCache = {at: 0, key: '', value: null};
+    fastify.get('/layouts/_count', canRead, async () => {
+        const presets = getConfig('presets') || {};
+        const key = Object.keys(presets).sort().join('|');
+        if (!badgeCache.value || badgeCache.key !== key || Date.now() - badgeCache.at > 60_000) {
+            badgeCache = {at: Date.now(), key, value: layoutsBadge(presets, await usageNow())};
+        }
+        return badgeCache.value;
+    });
+
     // ── Layout options ────────────────────────────────────────────────────────
     fastify.get('/layouts/options', canRead, async () => {
         return getConfig('site')?.layoutOptions ?? {spacerSize: 8};