domma-cms 0.55.1 → 0.69.3

package/plugins/blog/admin/views/post-editor.js

@@ -14,12 +14,169 @@ function slugify(s) {
 
 const BASE = '/api/plugins/blog';
 
+// The loader's cache-busting token, passed on so helpers are refetched with this view.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
+
+/** One layout choice - the body of the picker's data-each (see mountLayoutCard). */
+const LAYOUT_CHOICE = `
+<button type="button" class="blog-layout {{cls}}" role="radio" aria-checked="{{checked}}" data-layout="{{id}}" title="{{description}}">
+    <span class="blog-thumb" data-thumb="{{thumb}}" aria-hidden="true"></span>
+    <span class="blog-layout-name">{{label}}</span>
+</button>`;
+
+const PREVIEW_PANEL = `
+<div class="blog-preview">
+    <div class="blog-preview-bar">
+        <select class="form-select form-select-sm" aria-label="Layout" data-model="layout.value"
+                data-options="options.value" data-options-text="label" data-options-value="id"></select>
+        <div class="blog-seg" role="group" aria-label="Width">
+            <button type="button" data-on-click="desktop" data-bind-class="width.value === 'desktop' && 'is-on'" title="Desktop">
+                <span data-icon="monitor" data-icon-size="14"></span></button>
+            <button type="button" data-on-click="tablet" data-bind-class="width.value === 'tablet' && 'is-on'" title="Tablet">
+                <span data-icon="tablet" data-icon-size="14"></span></button>
+            <button type="button" data-on-click="phone" data-bind-class="width.value === 'phone' && 'is-on'" title="Phone">
+                <span data-icon="smartphone" data-icon-size="14"></span></button>
+        </div>
+        <span data-help-title="Preview"
+              data-help="The post as it will look on the site, from what is in the editor now - nothing is saved. Try another layout here; Use this layout keeps it for the post. Links are switched off inside the preview."></span>
+        <span class="blog-spacer"></span>
+        <span class="blog-preview-state" data-bind-text="state.value"></span>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="use" data-bind-disabled="!changed.value">Use this layout</button>
+    </div>
+    <div class="blog-preview-stage" data-bind-class="'is-' + width.value">
+        <iframe title="Post preview"></iframe>
+    </div>
+</div>`;
+
+/**
+ * The Layout card: a picker over every post layout on offer (the shipped four
+ * and any blog-post-* block the site added), and a Preview panel that renders
+ * the UNSAVED post in any of them.
+ *
+ * domma-reactive, like the rest of the Tool upgrade path; the item template is
+ * inserted here because the router renders the page template through _.render,
+ * which eats {{…}}.
+ *
+ * @param {HTMLElement} card
+ * @param {{current: string, collect: () => object}} opts
+ * @returns {Promise<{value: () => string}>}
+ */
+async function mountLayoutCard(card, {current, collect}) {
+    const BASE_URL = '/api/plugins/blog';
+    let catalogue = {postLayouts: [], postLayout: 'blog-post-classic'};
+    try { catalogue = await H.get(`${BASE_URL}/layouts`); } catch { /* the card still offers Site default */ }
+    const known = catalogue.postLayouts ?? [];
+    const defaultLabel = known.find(l => l.id === catalogue.postLayout)?.label ?? 'Classic';
+    const thumbOf = (id) => (['blog-post-classic', 'blog-post-feature', 'blog-post-minimal', 'blog-post-sidebar'].includes(id) ? id.slice(10) : 'custom');
+
+    const choices = [
+        {id: '', label: 'Site default', description: `Follows Blog settings - currently ${defaultLabel}.`, thumb: thumbOf(catalogue.postLayout)},
+        ...known.map(l => ({id: l.id, label: l.label, description: l.description, thumb: thumbOf(l.id)})),
+        ...(current && !known.some(l => l.id === current) ? [{id: current, label: `${current} (missing)`, description: 'This block no longer exists; the site default is used.', thumb: 'custom'}] : [])
+    ];
+
+    const layout = M.observable(current || '');
+    const layoutChoices = M.observable([]);
+    M.effect(() => {
+        layoutChoices.value = choices.map(c => ({...c, id: c.id || 'default', checked: String(c.id === layout.value), cls: c.id === layout.value ? 'is-on' : ''}));
+    });
+    const data = {
+        layoutChoices,
+        layoutDesc: M.computed(() => choices.find(c => c.id === layout.value)?.description ?? '')
+    };
+
+    card.querySelector('.blog-layouts').innerHTML = LAYOUT_CHOICE;
+    M.applyBindings(data, card.querySelector('.card-body'));
+    card.querySelector('.blog-layouts').addEventListener('click', (e) => {
+        const b = e.target.closest('[data-layout]');
+        if (b) layout.value = b.dataset.layout === 'default' ? '' : b.dataset.layout;
+    });
+    card.querySelector('#btn-preview').addEventListener('click', () => openPreview());
+
+    async function openPreview() {
+        const kit = await import('./kit.js?v=' + (new URL(import.meta.url).searchParams.get('v') ?? '1'));
+        const trial = M.observable(layout.peek() || catalogue.postLayout || 'blog-post-classic');
+        const width = M.observable('desktop');
+        const state = M.observable('');
+        const pdata = {
+            layout: trial, width, state,
+            options: M.observable(known.map(l => ({id: l.id, label: l.label}))),
+            changed: M.computed(() => trial.value !== (layout.value || catalogue.postLayout))
+        };
+        const so = E.slideover({title: 'Preview', size: 'xl', position: 'right'});
+        const el = kit.fragment(PREVIEW_PANEL);
+        so.element.appendChild(el);
+        const disposeHelp = await kit.scanHelp(el);
+        const frame = el.querySelector('iframe');
+        const handle = M.applyBindings(pdata, el, {
+            methods: {
+                desktop: () => { width.value = 'desktop'; },
+                tablet: () => { width.value = 'tablet'; },
+                phone: () => { width.value = 'phone'; },
+                use() {
+                    layout.value = trial.peek() === catalogue.postLayout && !layout.peek() ? '' : trial.peek();
+                    E.toast('Layout chosen - Save to keep it.', {type: 'success'});
+                }
+            }
+        });
+        if (typeof I !== 'undefined' && I.scan) I.scan(el);
+
+        let seq = 0;
+        const stop = M.effect(async () => {
+            const chosen = trial.value;
+            const mine = ++seq;
+            state.value = 'Rendering…';
+            try {
+                const res = await H.post(`${BASE_URL}/preview`, {...collect(), layout: chosen});
+                if (mine !== seq) return;
+                if (res?.error) throw new Error(res.error);
+                // The page's own addresses (/dist/…, /plugins/…) resolve against the site.
+                frame.srcdoc = String(res.html).replace(/<head>/i, `<head><base href="${location.origin}/">`);
+                state.value = '';
+            } catch (err) {
+                if (mine === seq) state.value = err?.message ?? 'Preview failed.';
+            }
+        });
+        // Links inside the preview would navigate the frame away from the post.
+        frame.addEventListener('load', () => {
+            try {
+                frame.contentDocument.addEventListener('click', (e) => {
+                    if (e.target.closest('a[href]') && !e.target.closest('a[href^="#"]')) {
+                        e.preventDefault();
+                        E.toast('Links are switched off in the preview.', {type: 'info'});
+                    }
+                }, true);
+            } catch { /* not ours to reach */ }
+        });
+        kit.onceClosed(so, () => { stop?.(); handle.dispose(); disposeHelp(); });
+        so.open();
+    }
+
+    return {value: () => layout.peek()};
+}
+
 export const postEditorView = {
     templateUrl: '/plugins/blog/admin/templates/post-editor.html',
 
     async onMount($container) {
-        const id = R.current?.params?.id !== 'new' ? R.current?.params?.id : null;
-        const isEdit = Boolean(id);
+        // Help (?) popovers, loaded at run time - a plugin must not import admin/.
+        // Scanned now, before anything below reshapes the form.
+        import('/admin/js/lib/help-popover.js')
+            .then(m => m.helpPopovers?.($container, {position: 'bottom'}))
+            .catch(() => null);
+        import(`./settings-cog.js?v=${ASSET_VERSION}`)
+            .then(m => m.addSettingsCog($container, '.view-header-actions'))
+            .catch(() => { /* no cog is better than no screen */ });
+        // Domma's router hands onMount ONE argument and never the route params,
+        // and `R.current` is a METHOD - `R.current?.params` is undefined on the
+        // function object, so this view opened blank on every edit and Save
+        // created a duplicate. Read the slug off the hash, as every core editor
+        // view does.
+        const routeMatch = location.hash.match(/^#\/plugins\/blog\/posts\/([^?#]+)/);
+        const routeId = routeMatch ? decodeURIComponent(routeMatch[1]) : null;
+        // `let`: a new post becomes an existing one on its first Save.
+        let id = routeId && routeId !== 'new' ? routeId : null;
+        let isEdit = Boolean(id);
 
         let post = null;
         let categories = [];
@@ -40,7 +197,7 @@ export const postEditorView = {
                 post = res.data ?? res;
             } catch {
                 E.toast('Failed to load post.', { type: 'error' });
-                R.navigate('#/plugins/blog');
+                R.navigate('#/plugins/blog/posts');
                 return;
             }
         }
@@ -62,7 +219,7 @@ export const postEditorView = {
         const imagePreviewEl = $container.find('#featured-image-preview').get(0);
         const clearImageBtn = $container.find('#btn-clear-image').get(0);
 
-        if (titleEl) titleEl.textContent = isEdit ? 'Edit Post' : 'New Post';
+        if (titleEl) titleEl.textContent = isEdit ? 'Editing post' : 'New post';
 
         if (isEdit && post) {
             if (postTitleEl) postTitleEl.value = post.title ?? '';
@@ -87,11 +244,11 @@ export const postEditorView = {
                 const img = document.createElement('img');
                 img.src = featuredImageUrl;
                 img.alt = 'Featured image';
-                img.style.cssText = 'max-width:100%;border-radius:.25rem;display:block;margin-bottom:.5rem;';
+                img.className = 'blog-image-preview';
                 imagePreviewEl.appendChild(img);
-                if (clearImageBtn) clearImageBtn.style.display = '';
+                if (clearImageBtn) clearImageBtn.classList.remove('blog-hidden');
             } else {
-                if (clearImageBtn) clearImageBtn.style.display = 'none';
+                if (clearImageBtn) clearImageBtn.classList.add('blog-hidden');
             }
         }
 
@@ -99,14 +256,13 @@ export const postEditorView = {
             while (catsListEl.firstChild) catsListEl.removeChild(catsListEl.firstChild);
             if (categories.length === 0) {
                 const p = document.createElement('p');
-                p.className = 'text-muted small';
+                p.className = 'text-muted text-sm';
                 p.textContent = 'No categories yet.';
                 catsListEl.appendChild(p);
             } else {
                 categories.forEach((cat) => {
                     const label = document.createElement('label');
-                    label.className = 'd-flex align-items-center gap-2 mb-2';
-                    label.style.cursor = 'pointer';
+                    label.className = 'flex items-center gap-2 mb-2 blog-clickable';
 
                     const cb = document.createElement('input');
                     cb.type = 'checkbox';
@@ -130,8 +286,14 @@ export const postEditorView = {
             }
         }
 
+        const layoutCard = await mountLayoutCard($container.find('#layout-card').get(0), {
+            current: post?.template ?? '',
+            collect: () => ({...collectValues(), id})
+        });
+
         function collectValues() {
             return {
+                template:      layoutCard.value(),
                 title:         postTitleEl?.value?.trim() ?? '',
                 slug:          postSlugEl?.value?.trim() ?? '',
                 excerpt:       excerptEl?.value?.trim() ?? '',
@@ -150,6 +312,7 @@ export const postEditorView = {
             const body = { ...collectValues(), ...extra };
             if (!body.title) {
                 E.toast('Title is required.', { type: 'error' });
+                postTitleEl?.focus();
                 return null;
             }
             try {
@@ -157,13 +320,107 @@ export const postEditorView = {
                     ? await H.put(`${BASE}/posts/${id}`, body)
                     : await H.post(`${BASE}/posts`, body);
                 if (res.error) throw new Error(res.error);
-                return res.data ?? res;
+                const saved = res.data ?? res;
+                // A new post is an existing one from here on: later saves
+                // update it, and the address says which post this is (no
+                // hashchange, so the view is not re-mounted).
+                if (!isEdit && saved?.id) {
+                    id = saved.id;
+                    isEdit = true;
+                    history.replaceState(history.state, '', `#/plugins/blog/posts/${encodeURIComponent(id)}`);
+                    if (titleEl) titleEl.textContent = 'Editing post';
+                }
+                post = saved;
+                baseline = JSON.stringify(collectValues());
+                setStatus(saved.status ?? status);
+                showSaved();
+                return saved;
             } catch (err) {
                 E.toast(err?.message ?? 'Failed to save post.', { type: 'error' });
                 return null;
             }
         }
 
+        // ---- Status, and whether anything is unsaved ----
+        let status = post?.status ?? 'draft';
+        let baseline = JSON.stringify(collectValues());
+        let savedAt = null;
+        const saveStateEl = $container.find('#save-state').get(0);
+        const draftsBtn = $container.find('#btn-drafts').get(0);
+        const isDirty = () => JSON.stringify(collectValues()) !== baseline;
+
+        function showSaved() {
+            savedAt = new Date();
+            refreshState();
+        }
+        function refreshState() {
+            if (!saveStateEl) return;
+            const dirty = isDirty();
+            saveStateEl.classList.toggle('is-dirty', dirty);
+            saveStateEl.textContent = dirty
+                ? 'Unsaved changes'
+                : savedAt ? `Saved ${savedAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}` : '';
+        }
+        function setStatus(next) {
+            status = next || 'draft';
+            if (statusBadge) {
+                statusBadge.textContent = status;
+                statusBadge.className = `badge ${({ published: 'badge-success', scheduled: 'badge-warning' })[status] ?? 'badge-secondary'}`;
+            }
+            const live = status === 'published';
+            $container.find('#btn-publish').get(0)?.classList.toggle('blog-hidden', live);
+            $container.find('#btn-schedule').get(0)?.classList.toggle('blog-hidden', live);
+            draftsBtn?.classList.toggle('blog-hidden', status === 'draft');
+        }
+        setStatus(status);
+
+        // Anything typed, ticked or picked may change what would be saved.
+        let queued = false;
+        const recheck = () => {
+            if (queued) return;
+            queued = true;
+            queueMicrotask(() => { queued = false; refreshState(); });
+        };
+        ['input', 'change', 'click'].forEach(ev => $container.get(0).addEventListener(ev, recheck));
+
+        async function save() {
+            if (await doSave()) E.toast(status === 'published' ? 'Saved - the live post is updated.' : 'Saved.', { type: 'success' });
+        }
+
+        async function goBack() {
+            if (isDirty() && !(await E.confirm('Leave without saving? Your changes to this post will be lost.'))) return;
+            baseline = JSON.stringify(collectValues());   // do not ask twice (beforeunload)
+            R.navigate('#/plugins/blog/posts');
+        }
+
+        $container.find('#btn-save').get(0)?.addEventListener('click', save);
+        $container.find('#btn-back').get(0)?.addEventListener('click', goBack);
+        draftsBtn?.addEventListener('click', async () => {
+            const saved = await doSave({ status: 'draft' });
+            if (saved) E.toast('Moved to drafts - it is no longer on the site.', { type: 'success' });
+        });
+
+        // Ctrl/Cmd+S saves; a closing tab with unsaved work asks first. Both
+        // come off when the hash leaves this editor (the router has no unmount).
+        const onKey = (e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+                e.preventDefault();
+                save();
+            }
+        };
+        const onUnload = (e) => {
+            if (isDirty()) { e.preventDefault(); e.returnValue = ''; }
+        };
+        document.addEventListener('keydown', onKey);
+        window.addEventListener('beforeunload', onUnload);
+        const onHash = () => {
+            if (/^#\/plugins\/blog\/posts\/[^/]+$/.test(location.hash)) return;
+            document.removeEventListener('keydown', onKey);
+            window.removeEventListener('beforeunload', onUnload);
+            window.removeEventListener('hashchange', onHash);
+        };
+        window.addEventListener('hashchange', onHash);
+
         if (postTitleEl) {
             postTitleEl.addEventListener('input', () => {
                 if (slugAutoEl?.checked && postSlugEl) {
@@ -175,9 +432,9 @@ export const postEditorView = {
         if (slugAutoEl) {
             slugAutoEl.addEventListener('change', () => {
                 if (!slugAutoEl.checked && isEdit && post?.status === 'published') {
-                    if (slugWarnEl) slugWarnEl.style.display = '';
+                    if (slugWarnEl) slugWarnEl.classList.remove('blog-hidden');
                 } else {
-                    if (slugWarnEl) slugWarnEl.style.display = 'none';
+                    if (slugWarnEl) slugWarnEl.classList.add('blog-hidden');
                 }
                 if (slugAutoEl.checked && postTitleEl && postSlugEl) {
                     postSlugEl.value = slugify(postTitleEl.value);
@@ -189,18 +446,7 @@ export const postEditorView = {
         const seoPanel  = $container.find('#seo-panel').get(0);
         if (seoToggle && seoPanel) {
             seoToggle.addEventListener('click', () => {
-                seoPanel.style.display = seoPanel.style.display === 'none' ? '' : 'none';
-            });
-        }
-
-        const saveDraftBtn = $container.find('#btn-save-draft').get(0);
-        if (saveDraftBtn) {
-            saveDraftBtn.addEventListener('click', async () => {
-                const saved = await doSave({ status: 'draft' });
-                if (saved) {
-                    E.toast('Draft saved.', { type: 'success' });
-                    R.navigate('#/plugins/blog/posts');
-                }
+                seoPanel.classList.toggle('blog-hidden');
             });
         }
 
@@ -211,10 +457,11 @@ export const postEditorView = {
                 if (!saved) return;
                 const savedId = saved.id ?? id;
                 try {
-                    const res = await H.post(`${BASE}/posts/${savedId}/publish`);
+                    const res = await H.post(`${BASE}/posts/${savedId}/publish`, {});
                     if (res.error) throw new Error(res.error);
-                    E.toast('Post published.', { type: 'success' });
-                    R.navigate('#/plugins/blog/posts');
+                    post = res.data ?? res;
+                    setStatus('published');
+                    E.toast('Published - the post is live.', { type: 'success' });
                 } catch (err) {
                     E.toast(err?.message ?? 'Failed to publish post.', { type: 'error' });
                 }
@@ -223,15 +470,15 @@ export const postEditorView = {
 
         const scheduleBtn = $container.find('#btn-schedule').get(0);
         if (scheduleBtn) {
-            scheduleBtn.style.display = '';
             scheduleBtn.addEventListener('click', async () => {
-                if (scheduleEl) scheduleEl.style.display = scheduleEl.style.display === 'none' ? '' : 'none';
-                if (scheduleEl && scheduleEl.style.display !== 'none') return;
+                // First click reveals the picker; the second one schedules.
+                if (scheduleEl) scheduleEl.classList.toggle('blog-hidden');
+                if (scheduleEl && !scheduleEl.classList.contains('blog-hidden')) return;
 
                 const publishedAt = schedAtEl?.value;
                 if (!publishedAt) {
                     E.toast('Please select a scheduled date/time.', { type: 'error' });
-                    if (scheduleEl) scheduleEl.style.display = '';
+                    if (scheduleEl) scheduleEl.classList.remove('blog-hidden');
                     return;
                 }
 
@@ -241,8 +488,10 @@ export const postEditorView = {
                 try {
                     const res = await H.post(`${BASE}/posts/${savedId}/schedule`, { publishedAt });
                     if (res.error) throw new Error(res.error);
-                    E.toast('Post scheduled.', { type: 'success' });
-                    R.navigate('#/plugins/blog/posts');
+                    post = res.data ?? res;
+                    setStatus('scheduled');
+                    if (scheduleEl) scheduleEl.classList.add('blog-hidden');
+                    E.toast(`Scheduled for ${new Date(publishedAt).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}.`, { type: 'success' });
                 } catch (err) {
                     E.toast(err?.message ?? 'Failed to schedule post.', { type: 'error' });
                 }
@@ -271,7 +520,7 @@ export const postEditorView = {
             }
 
             const grid = document.createElement('div');
-            grid.style.cssText = 'display:grid;grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));gap:.75rem;padding:.5rem;';
+            grid.className = 'blog-media-grid';
 
             if (!media.length) {
                 const p = document.createElement('p');
@@ -282,14 +531,14 @@ export const postEditorView = {
                 media.forEach((m) => {
                     const tile = document.createElement('button');
                     tile.type = 'button';
-                    tile.style.cssText = 'border:1px solid var(--dm-border,#333);background:transparent;border-radius:.25rem;padding:.25rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.25rem;';
+                    tile.className = 'blog-media-tile';
                     const img = document.createElement('img');
                     img.src = m.url;
                     img.alt = m.name;
-                    img.style.cssText = 'width:100%;height:90px;object-fit:cover;border-radius:.15rem;';
+
                     const cap = document.createElement('span');
                     cap.textContent = m.name;
-                    cap.style.cssText = 'font-size:.7rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%;';
+
                     tile.appendChild(img);
                     tile.appendChild(cap);
                     tile.addEventListener('click', () => {
@@ -301,10 +550,28 @@ export const postEditorView = {
                 });
             }
 
-            const slideover = E.slideover({ title: 'Pick Featured Image', size: 'lg', position: 'right', content: grid });
+            // close() only hides the panel and destroy() tears the component down
+            // without detaching its element, so every trip to the media library
+            // used to leave another slideover in the document.
+            const slideover = E.slideover({
+                title: 'Pick Featured Image',
+                size: 'lg',
+                position: 'right',
+                content: grid,
+                onClose: () => setTimeout(() => {
+                    slideover.destroy();
+                    slideover.element?.remove();
+                }, 350)
+            });
             slideover.open();
         }
 
+        // Again at the end: the plugin chrome rebuilds the header after the
+        // scan at the top, so its (?) would otherwise never appear. Markers
+        // already converted are skipped.
+        import('/admin/js/lib/help-popover.js')
+            .then(m => m.helpPopovers?.($container, {position: 'bottom'}))
+            .catch(() => null);
         Domma.icons.scan();
     }
 };

package/plugins/blog/admin/views/settings-cog.js

@@ -0,0 +1,56 @@
+/**
+ * The settings cog in the admin's plugin banner, to the left of the licence.
+ * It opens the settings in a (resizable) slideover rather than leaving the
+ * screen; #/plugins/blog/settings still works for anything that links there.
+ *
+ * Every plugin puts its settings in the same place, so it is not a sidebar item
+ * here any more. The banner belongs to the admin, and addBannerAction() is its
+ * door - imported at RUN time, because a static import would take the view
+ * down on a CMS whose admin predates it. There, the cog goes at the end of the
+ * view's own header row instead.
+ *
+ * @module blog/admin/views/settings-cog
+ */
+
+// The loader's cache-busting token, passed on so the kit is refetched with this file.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
+
+/** Settings open in a slideover over whichever Blog screen you are on. */
+async function openSettings() {
+    try {
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        await kit.openSettings();
+    } catch {
+        // The slideover is the better place, not the only one.
+        R.navigate('#/plugins/blog/settings');
+    }
+}
+
+/**
+ * @param {object} $container - the view container onMount was given
+ * @param {string} fallback    - selector for the header row to use without a banner
+ */
+export async function addSettingsCog($container, fallback) {
+    const onClick = () => openSettings();
+    try {
+        const chrome = await import('/admin/js/lib/plugin-chrome.js');
+        const placed = chrome.addBannerAction?.($container, {
+            id: 'blog-settings', icon: 'settings', title: 'Blog settings', onClick
+        });
+        if (placed) return;
+    } catch { /* older admin: fall through */ }
+
+    const row = $container.find(fallback).get(0);
+    if (!row) return;
+    const cog = document.createElement('button');
+    cog.type = 'button';
+    cog.className = 'btn btn-sm btn-ghost';
+    cog.title = 'Settings';
+    const glyph = document.createElement('span');
+    glyph.setAttribute('data-icon', 'settings');
+    glyph.setAttribute('data-icon-size', '16');
+    cog.appendChild(glyph);
+    cog.addEventListener('click', onClick);
+    row.appendChild(cog);
+    if (typeof I !== 'undefined' && I.scan) I.scan(cog);
+}

package/plugins/blog/admin/views/settings.js

@@ -1,100 +1,32 @@
 /**
- * Blog settings admin view.
+ * Blog settings as a page - the old #/plugins/blog/settings route.
+ *
+ * Settings live behind the banner cog now, in a slideover over whichever Blog
+ * screen you are on. This route stays so a bookmark or a link from elsewhere
+ * still lands somewhere useful: it renders the SAME panel (kit.settingsPanel),
+ * so the page and the slideover cannot drift apart.
  *
  * @module blog/admin/views/settings
  */
 
-const BASE = '/api/plugins/blog';
+// The loader's cache-busting token, passed on so the kit is refetched with this view.
+const ASSET_VERSION = new URL(import.meta.url).searchParams.get('v') ?? '1';
 
 export const settingsView = {
     templateUrl: '/plugins/blog/admin/templates/settings.html',
 
     /**
-     * Mount the blog settings view.
-     *
      * @param {object} $container - Domma-wrapped container element
      * @returns {Promise<void>}
      */
     async onMount($container) {
-        let settings = {};
-
-        // ---------------------------------------------------------------
-        // Load
-        // ---------------------------------------------------------------
-
-        try {
-            const res = await H.get(`${BASE}/settings`);
-            if (res.error) throw new Error(res.error);
-            settings = res.data ?? res ?? {};
-        } catch {
-            E.toast('Failed to load settings.', { type: 'error' });
-        }
-
-        // ---------------------------------------------------------------
-        // Render form using F.create
-        // ---------------------------------------------------------------
-
-        const formEl = $container.find('#settings-form').get(0);
-        if (!formEl) return;
-
-        F.create(formEl, {
-            blueprint: [
-                {
-                    key: 'basePath',
-                    label: 'Base path',
-                    type: 'text',
-                    placeholder: '/blog',
-                    value: settings.basePath ?? '/blog',
-                    hint: 'URL prefix for all blog pages (e.g. /blog).'
-                },
-                {
-                    key: 'postsPerPage',
-                    label: 'Posts per page',
-                    type: 'number',
-                    placeholder: '10',
-                    value: settings.postsPerPage ?? 10,
-                    hint: 'Number of posts shown per listing page.'
-                },
-                {
-                    key: 'commentsEnabled',
-                    label: 'Enable comments',
-                    type: 'toggle',
-                    value: settings.commentsEnabled ?? true,
-                    hint: 'Allow readers to submit comments on posts.'
-                },
-                {
-                    key: 'commentModeration',
-                    label: 'Moderate comments',
-                    type: 'toggle',
-                    value: settings.commentModeration ?? true,
-                    hint: 'Hold new comments for approval before they appear.'
-                },
-                {
-                    key: 'feedLength',
-                    label: 'RSS feed length',
-                    type: 'number',
-                    placeholder: '20',
-                    value: settings.feedLength ?? 20,
-                    hint: 'Maximum number of items in the RSS/Atom feed.'
-                }
-            ],
-            onSubmit: async (values) => {
-                try {
-                    const res = await H.put(`${BASE}/settings`, {
-                        basePath: values.basePath,
-                        postsPerPage: Number(values.postsPerPage) || 10,
-                        commentsEnabled: Boolean(values.commentsEnabled),
-                        commentModeration: Boolean(values.commentModeration),
-                        feedLength: Number(values.feedLength) || 20
-                    });
-                    if (res.error) throw new Error(res.error);
-                    E.toast('Settings saved.', { type: 'success' });
-                } catch (err) {
-                    E.toast(err?.message ?? 'Failed to save settings.', { type: 'error' });
-                }
-            }
-        });
-
-        Domma.icons.scan();
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        const add = kit.viewScope('settings', /^#\/plugins\/blog\/settings\b/);
+
+        const host = $container.find('#settings-form').get(0);
+        if (!host) return;
+        const {el, dispose} = await kit.settingsPanel();
+        host.appendChild(el);
+        add(dispose);
     }
 };