domma-cms 1.6.60 → 1.7.0

package/docs/plans/2026-03-02-tooltip-sweep-back-to-top.md

@@ -0,0 +1,427 @@
+# Tooltip Sweep & Back-to-Top Plugin
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add `data-tooltip` to all remaining icon-only admin buttons, and build a complete `back-to-top` CMS plugin.
+
+**Architecture:** Tooltip sweep targets two files (`pages.js`, `navigation.js`) - replace `title=""` with
+`data-tooltip=""` and call `E.tooltip()` after icons scan. Plugin follows the exact `contact-form` structure:
+`plugin.json` + `plugin.js` + `config.js` + admin view/template + public `inject-body.html` IIFE.
+
+---
+
+## Task 1: Tooltip sweep - pages.js
+
+**Modify:** `admin/js/views/pages.js`
+
+Two changes, both inside `renderTable()`:
+
+**Step 1: Replace `title` with `data-tooltip` on the view link (line 26)**
+
+Old:
+
+```html
+<a href="${row.urlPath}" target="_blank" class="btn btn-sm btn-ghost" title="View"><span data-icon="external-link"></span></a>
+```
+
+New:
+
+```html
+<a href="${row.urlPath}" target="_blank" class="btn btn-sm btn-ghost" data-tooltip="View"><span data-icon="external-link"></span></a>
+```
+
+**Step 2: Add `E.tooltip()` call after `Domma.icons.scan()` (line 33)**
+
+Old:
+
+```js
+Domma.icons.scan();
+Domma.effects.reveal('.card', { animation: 'fade', duration: 350 });
+```
+
+New:
+
+```js
+Domma.icons.scan();
+E.tooltip('[data-tooltip]', { placement: 'top' });
+Domma.effects.reveal('.card', { animation: 'fade', duration: 350 });
+```
+
+---
+
+## Task 2: Tooltip sweep - navigation.js
+
+**Modify:** `admin/js/views/navigation.js`
+
+Two changes, both inside `renderItems()`:
+
+**Step 1: Replace `title` with `data-tooltip` on the Remove button (line 90)**
+
+Old:
+
+```html
+<button class="btn btn-sm btn-danger btn-remove-item" data-id="${item._id}" title="Remove"><span data-icon="trash"></span></button>
+```
+
+New:
+
+```html
+<button class="btn btn-sm btn-danger btn-remove-item" data-id="${item._id}" data-tooltip="Remove"><span data-icon="trash"></span></button>
+```
+
+**Step 2: Add `E.tooltip()` call after `Domma.icons.scan('#nav-items-list')` (line 95)**
+
+Old:
+
+```js
+Domma.icons.scan('#nav-items-list');
+```
+
+New:
+
+```js
+Domma.icons.scan('#nav-items-list');
+E.tooltip('[data-tooltip]', { placement: 'top' });
+```
+
+---
+
+## Task 3: Create plugins/back-to-top/plugin.json
+
+**New file:** `plugins/back-to-top/plugin.json`
+
+```json
+{
+    "name": "back-to-top",
+    "displayName": "Back to Top",
+    "version": "1.0.0",
+    "description": "Injects a configurable scroll-to-top button into every public page.",
+    "author": "Darryl Waterhouse",
+    "date": "2026-03-02",
+    "icon": "arrow-up",
+    "admin": {
+        "sidebar": [
+            { "id": "back-to-top", "text": "Back to Top", "icon": "arrow-up", "url": "#/plugins/back-to-top", "section": "#/plugins/back-to-top" }
+        ],
+        "routes": [
+            { "path": "/plugins/back-to-top", "view": "plugin-back-to-top-settings", "title": "Back to Top - Domma CMS" }
+        ],
+        "views": {
+            "plugin-back-to-top-settings": {
+                "entry": "back-to-top/admin/views/back-to-top-settings.js",
+                "exportName": "backToTopSettingsView"
+            }
+        }
+    },
+    "inject": {
+        "bodyEnd": "public/inject-body.html"
+    }
+}
+```
+
+---
+
+## Task 4: Create plugins/back-to-top/config.js
+
+**New file:** `plugins/back-to-top/config.js`
+
+```js
+/**
+ * Back to Top Plugin - Default Configuration
+ */
+export default {
+    scrollThreshold: 300,
+    position: 'bottom-right',
+    label: '',
+    smooth: true,
+    offset: 32
+};
+```
+
+---
+
+## Task 5: Create plugins/back-to-top/plugin.js
+
+**New file:** `plugins/back-to-top/plugin.js`
+
+```js
+/**
+ * Back to Top Plugin - Server
+ *
+ * Endpoints (prefix: /api/plugins/back-to-top):
+ *   GET  /settings  - public (called from public site IIFE)
+ *   PUT  /settings  - admin-auth - saves user overrides
+ */
+import { getPluginSettings, savePluginState } from '../../server/services/plugins.js';
+
+export default async function backToTopPlugin(fastify, options) {
+    const { authenticate, requireAdmin } = options.auth;
+
+    // GET /settings - no auth, public read (returns non-sensitive display config)
+    fastify.get('/settings', async () => {
+        return getPluginSettings('back-to-top');
+    });
+
+    // PUT /settings - admin only
+    fastify.put('/settings', { preHandler: [authenticate, requireAdmin] }, async (request) => {
+        const body = request.body || {};
+        savePluginState('back-to-top', { settings: body });
+        return { ok: true };
+    });
+}
+```
+
+---
+
+## Task 6: Create admin template
+
+**New file:** `plugins/back-to-top/admin/templates/back-to-top-settings.html`
+
+```html
+<div class="view-header">
+    <h1><span data-icon="arrow-up"></span> Back to Top</h1>
+    <div>
+        <button id="save-settings-btn" class="btn btn-primary">
+            <span data-icon="save"></span> Save
+        </button>
+    </div>
+</div>
+
+<div class="card mb-4">
+    <div class="card-header"><h2>Appearance</h2></div>
+    <div class="card-body">
+        <div class="row mb-3">
+            <div class="col-6">
+                <label class="form-label">Position</label>
+                <select id="field-position" class="form-select">
+                    <option value="bottom-right">Bottom right</option>
+                    <option value="bottom-left">Bottom left</option>
+                </select>
+            </div>
+            <div class="col-6">
+                <label class="form-label">Edge offset (px)</label>
+                <input id="field-offset" type="number" class="form-input" min="0" max="200" placeholder="32">
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <label class="form-label">Button label <span class="text-muted">(optional text beside icon)</span></label>
+                <input id="field-label" type="text" class="form-input" placeholder="Leave empty for icon only">
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="card mb-4">
+    <div class="card-header"><h2>Behaviour</h2></div>
+    <div class="card-body">
+        <div class="row mb-3">
+            <div class="col-6">
+                <label class="form-label">Scroll threshold (px)</label>
+                <input id="field-threshold" type="number" class="form-input" min="0" max="9999" placeholder="300">
+                <span class="form-hint">Button appears after scrolling this far down.</span>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <label class="form-check-label">
+                    <input id="field-smooth" type="checkbox">
+                    Smooth scroll
+                </label>
+                <span class="form-hint">Animates scroll to top instead of jumping instantly.</span>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+---
+
+## Task 7: Create admin settings view
+
+**New file:** `plugins/back-to-top/admin/views/back-to-top-settings.js`
+
+```js
+/**
+ * Back to Top Plugin - Admin Settings View
+ */
+export const backToTopSettingsView = {
+    templateUrl: '/plugins/back-to-top/admin/templates/back-to-top-settings.html',
+
+    async onMount($container) {
+        let settings = {};
+        try {
+            const res = await fetch('/api/plugins/back-to-top/settings', {
+                headers: { 'Authorization': 'Bearer ' + (S.get('auth_token') || '') }
+            });
+            if (!res.ok) throw new Error(`HTTP ${res.status}`);
+            settings = await res.json();
+        } catch {
+            E.toast('Could not load settings.', { type: 'error' });
+        }
+
+        $container.find('#field-threshold').val(settings.scrollThreshold ?? 300);
+        $container.find('#field-position').val(settings.position || 'bottom-right');
+        $container.find('#field-label').val(settings.label || '');
+        $container.find('#field-smooth').prop('checked', settings.smooth !== false);
+        $container.find('#field-offset').val(settings.offset ?? 32);
+
+        $container.find('#save-settings-btn').off('click').on('click', async () => {
+            const data = {
+                scrollThreshold: parseInt($container.find('#field-threshold').val(), 10) || 300,
+                position:        $container.find('#field-position').val(),
+                label:           $container.find('#field-label').val().trim(),
+                smooth:          $container.find('#field-smooth').prop('checked'),
+                offset:          parseInt($container.find('#field-offset').val(), 10) || 32
+            };
+            try {
+                const res = await fetch('/api/plugins/back-to-top/settings', {
+                    method:  'PUT',
+                    headers: {
+                        'Content-Type':  'application/json',
+                        'Authorization': 'Bearer ' + (S.get('auth_token') || '')
+                    },
+                    body: JSON.stringify(data)
+                });
+                if (!res.ok) throw new Error('Save failed');
+                E.toast('Settings saved.', { type: 'success' });
+            } catch {
+                E.toast('Failed to save settings.', { type: 'error' });
+            }
+        });
+
+        Domma.icons.scan();
+    }
+};
+```
+
+---
+
+## Task 8: Create public inject-body.html
+
+**New file:** `plugins/back-to-top/public/inject-body.html`
+
+Self-contained IIFE. No Domma dependency. Inline SVG for the arrow-up icon (path from Domma's built-in icon set).
+
+```html
+<script>
+(function () {
+    'use strict';
+
+    var BTN_ID = 'back-to-top-btn';
+
+    fetch('/api/plugins/back-to-top/settings')
+        .then(function (r) { return r.json(); })
+        .then(function (cfg) {
+            var threshold = cfg.scrollThreshold || 300;
+            var position  = cfg.position || 'bottom-right';
+            var label     = cfg.label || '';
+            var smooth    = cfg.smooth !== false;
+            var offset    = cfg.offset || 32;
+
+            var btn = document.createElement('button');
+            btn.id          = BTN_ID;
+            btn.type        = 'button';
+            btn.setAttribute('aria-label', 'Back to top');
+            btn.setAttribute('title', 'Back to top');
+
+            // Inline SVG - arrow-up (Domma icon set path)
+            var svgNS = 'http://www.w3.org/2000/svg';
+            var svg   = document.createElementNS(svgNS, 'svg');
+            svg.setAttribute('viewBox', '0 0 24 24');
+            svg.setAttribute('width', '20');
+            svg.setAttribute('height', '20');
+            svg.setAttribute('fill', 'none');
+            svg.setAttribute('stroke', 'currentColor');
+            svg.setAttribute('stroke-width', '2');
+            svg.setAttribute('stroke-linecap', 'round');
+            svg.setAttribute('stroke-linejoin', 'round');
+            var path = document.createElementNS(svgNS, 'path');
+            path.setAttribute('d', 'M12 19V5M5 12l7-7 7 7');
+            svg.appendChild(path);
+            btn.appendChild(svg);
+
+            if (label) {
+                var span = document.createElement('span');
+                span.textContent = label;
+                span.style.marginLeft = '6px';
+                btn.appendChild(span);
+            }
+
+            // Inline styles - self-contained, no site.css dependency
+            var isRight = position !== 'bottom-left';
+            Object.assign(btn.style, {
+                position:     'fixed',
+                bottom:       offset + 'px',
+                right:        isRight ? offset + 'px' : 'auto',
+                left:         isRight ? 'auto' : offset + 'px',
+                zIndex:       '9999',
+                display:      'flex',
+                alignItems:   'center',
+                padding:      '10px',
+                borderRadius: '50%',
+                border:       'none',
+                cursor:       'pointer',
+                background:   'rgba(0,0,0,0.5)',
+                color:        '#fff',
+                backdropFilter: 'blur(4px)',
+                opacity:      '0',
+                transform:    'translateY(12px)',
+                transition:   'opacity .25s, transform .25s',
+                pointerEvents: 'none'
+            });
+
+            if (label) {
+                btn.style.borderRadius = '999px';
+                btn.style.padding      = '10px 16px';
+            }
+
+            document.body.appendChild(btn);
+
+            function show() {
+                btn.style.opacity      = '1';
+                btn.style.transform    = 'translateY(0)';
+                btn.style.pointerEvents = 'auto';
+            }
+            function hide() {
+                btn.style.opacity      = '0';
+                btn.style.transform    = 'translateY(12px)';
+                btn.style.pointerEvents = 'none';
+            }
+
+            window.addEventListener('scroll', function () {
+                if (window.scrollY > threshold) { show(); } else { hide(); }
+            }, { passive: true });
+
+            btn.addEventListener('click', function () {
+                window.scrollTo({ top: 0, behavior: smooth ? 'smooth' : 'auto' });
+            });
+        })
+        .catch(function () {
+            // Settings fetch failed - don't inject button
+        });
+})();
+</script>
+```
+
+---
+
+## Verification
+
+After all tasks:
+
+1. **Pages view tooltips** - navigate to Pages. Hover the external-link icon on a row. Tooltip "View" should appear.
+
+2. **Navigation view tooltips** - navigate to Navigation. Hover the trash button on an item. Tooltip "Remove" should
+   appear.
+
+3. **Plugin appears in sidebar** - restart the server. Navigate to Plugins. The "Back to Top" plugin card should appear.
+   The sidebar should show "Back to Top" under the Plugins section.
+
+4. **Settings page loads** - click the Back to Top sidebar link. Settings form should show with defaults (threshold 300,
+   position bottom-right, smooth checked, offset 32).
+
+5. **Save settings** - change threshold to 200, click Save. Toast "Settings saved." should appear.
+
+6. **Public injection** - visit the public site (e.g. `/`). Scroll down more than 300px. The back-to-top button should
+   appear in the bottom-right corner. Clicking it should scroll back to the top.

package/docs/plans/2026-03-05-cookie-consent-btt-core.md

@@ -0,0 +1,115 @@
+# Cookie Consent + Back to Top - Migrate to Core
+
+**Date:** 2026-03-05
+
+## Problem
+
+Cookie Consent and Back to Top are currently implemented as plugins. They are universal features needed on every site - not optional add-ons. Living as plugins creates friction: they must be individually enabled, their settings are separate from Site Settings, and they clutter the plugin list with non-optional items. The plugin directories will be deleted entirely.
+
+## Approach
+
+**Piggyback on `window.__CMS_SITE__`** (Approach B).
+
+The renderer already injects `window.__CMS_SITE__` (the full site config) into every public page. The new scripts will read their configuration directly from that global, eliminating any HTTP fetch on page load. The renderer conditionally injects each `<script>` tag based on the feature's `enabled` flag.
+
+## Data Model
+
+Two new top-level keys added to `config/site.json`:
+
+```json
+"backToTop": {
+    "enabled": false,
+    "scrollThreshold": 300,
+    "position": "bottom-right",
+    "label": "Back to top",
+    "smooth": true,
+    "offset": 40
+},
+"cookieConsent": {
+    "enabled": false,
+    "message": "We use cookies to improve your experience.",
+    "acceptButton": "Accept All",
+    "declineButton": "Decline",
+    "policyLink": "",
+    "policyText": "Privacy Policy",
+    "position": "bottom",
+    "layout": "bar",
+    "theme": "dark",
+    "consentVersion": "1",
+    "categories": {
+        "functional": true,
+        "analytics": false,
+        "marketing": false
+    }
+}
+```
+
+`enabled: false` means the script tag is not injected - no runtime overhead for disabled features.
+
+## Renderer Changes
+
+`server/services/renderer.js` - after assembling `bodyEndInject`, conditionally append script tags:
+
+```js
+if (site.backToTop?.enabled) {
+    bodyEndInject += '\n<script src="/public/js/btt.js"></script>';
+}
+if (site.cookieConsent?.enabled) {
+    bodyEndInject += '\n<script src="/public/js/cookie-consent.js"></script>';
+}
+```
+
+The scripts are served as static files from `public/js/` via Fastify's existing static serving.
+
+## Public Scripts
+
+### `public/js/btt.js`
+
+Ported from `plugins/back-to-top/public/inject-body.html`. Key change: reads config from `window.__CMS_SITE__.backToTop` instead of fetching `/api/plugins/back-to-top/settings`. Same scroll-listener + button-inject logic.
+
+### `public/js/cookie-consent.js`
+
+Ported from `plugins/cookie-consent/public/inject-body.html`. Key change: reads config from `window.__CMS_SITE__.cookieConsent` instead of fetching `/api/plugins/cookie-consent/settings`. Same consent-bar + localStorage logic.
+
+## Admin - Site Settings Tabs
+
+Two new tabs added to `admin/js/templates/settings.html` alongside General / SEO / Footer / Email:
+
+- **Back to Top** - fields: Enabled toggle, Scroll threshold, Position (bottom-right/bottom-left), Label, Smooth scroll, Bottom offset
+- **Cookie Consent** - fields: Enabled toggle, Message, Accept/Decline button text, Policy link + text, Position (bottom/top), Layout (bar/modal), Theme (dark/light), Consent version, Category toggles (functional/analytics/marketing)
+
+`admin/js/views/settings.js` - extends existing save/load logic to include `backToTop` and `cookieConsent` keys when reading/writing `config/site.json` via `PUT /api/settings/site`.
+
+## Deletions
+
+- Delete `plugins/back-to-top/` directory entirely
+- Delete `plugins/cookie-consent/` directory entirely
+- Remove their entries from `config/plugins.json`
+
+No migration of existing plugin settings is needed - defaults in `config/site.json` will be used, and admins can re-enable and configure via Site Settings.
+
+## Files Summary
+
+### New Files
+- `public/js/btt.js` - Back to Top script (reads from `window.__CMS_SITE__`)
+- `public/js/cookie-consent.js` - Cookie Consent script (reads from `window.__CMS_SITE__`)
+
+### Modified Files
+- `config/site.json` - Add `backToTop` and `cookieConsent` keys
+- `server/services/renderer.js` - Conditionally inject script tags
+- `admin/js/templates/settings.html` - Add Back to Top and Cookie Consent tab panels
+- `admin/js/views/settings.js` - Handle new settings sections on load/save
+
+### Deleted
+- `plugins/back-to-top/` (entire directory)
+- `plugins/cookie-consent/` (entire directory)
+- Entries for both in `config/plugins.json`
+
+## Verification
+
+1. Enable Back to Top in Site Settings → save → visit public page → scroll down → button appears
+2. Disable Back to Top → save → visit public page → no button, no script tag in source
+3. Enable Cookie Consent → save → visit public page in private window → consent bar appears
+4. Disable Cookie Consent → save → visit public page → no consent bar, no script tag
+5. Plugin list in admin → back-to-top and cookie-consent no longer appear
+6. Site Settings → two new tabs visible (Back to Top, Cookie Consent) with correct fields

package/docs/plans/2026-03-05-custom-css-migrate-to-core-design.md

@@ -0,0 +1,35 @@
+# Custom CSS - Migrate to Core
+
+**Date:** 2026-03-05
+**Status:** Approved
+
+## Goal
+
+Move the Custom CSS plugin into core, eliminating the plugin directory. The feature becomes a tab in Site Settings backed by a content file and core API routes.
+
+## Storage
+
+CSS is stored at `content/custom.css` - a plain text file, consistent with other content files. Empty by default.
+
+## Renderer
+
+`server/services/renderer.js` reads `content/custom.css` at render time. If the file is non-empty, an inline `<style>` block is injected into the `headLate` slot. The string `</style>` inside CSS values is escaped to `<\/style>` to prevent injection.
+
+## Admin API
+
+Two new routes added to `server/routes/api/settings.js`:
+
+- `GET /api/settings/custom-css` - authenticated, returns `{ css: "..." }`
+- `PUT /api/settings/custom-css` - requireAdmin, validates string type + 100 KB limit, writes `content/custom.css`
+
+## Admin UI
+
+A new **Custom CSS** tab added to `admin/js/templates/settings.html` containing a full-height monospace `<textarea id="field-custom-css">`.
+
+Since CSS is a file rather than part of the JSON config blob, it gets its own **Save CSS** button inside the tab. `admin/js/views/settings.js` wires up the tab: loads CSS on mount, saves via the new API endpoint on button click.
+
+## Cleanup
+
+- Delete `plugins/custom-css/` directory entirely
+- Remove `custom-css` entry from `config/plugins.json`
+- No sidebar entry needed - accessible via Settings → Custom CSS tab