domma-cms 0.66.0 → 0.69.3

package/plugins/blog/admin/templates/post-editor.html

@@ -1,9 +1,18 @@
-<div class="view-header">
-  <h1 id="editor-title">New Post</h1>
+<div class="view-header blog-editor-bar">
+  <button type="button" id="btn-back" class="btn btn-sm btn-ghost" title="Back to Posts - asks first if there is anything unsaved">
+    <span data-icon="arrow-left" data-icon-size="14"></span> Posts
+  </button>
+  <span id="editor-title" class="blog-editor-title">New post</span>
+  <span id="save-state" class="blog-save-state" role="status" aria-live="polite"></span>
   <div class="view-header-actions">
-    <button id="btn-save-draft" class="btn btn-secondary">Save Draft</button>
-    <button id="btn-schedule" class="btn btn-warning blog-hidden">Schedule</button>
-    <button id="btn-publish" class="btn btn-primary">Publish Now</button>
+    <span data-help-title="Saving and publishing"
+          data-help="Save (or Ctrl+S) stores your changes and keeps the post as it is - a draft stays a draft, a live post stays live and updates. Publish puts it on the site now; Schedule picks a date and time. Move to drafts takes a live or scheduled post off the site. You stay on this page throughout; Posts takes you back to the list."></span>
+    <button type="button" id="btn-drafts" class="btn btn-sm btn-ghost blog-hidden" title="Take this post off the site">Move to drafts</button>
+    <button type="button" id="btn-schedule" class="btn btn-secondary">Schedule</button>
+    <button type="button" id="btn-publish" class="btn btn-secondary">Publish</button>
+    <button type="button" id="btn-save" class="btn btn-primary" title="Save (Ctrl+S)">
+      <span data-icon="save" data-icon-size="14"></span> Save
+    </button>
   </div>
 </div>
 
@@ -17,7 +26,7 @@
           <input type="text" id="post-title" class="form-input form-input-lg" placeholder="Post title…">
         </div>
         <div class="mb-3">
-          <label class="form-label" for="post-slug">Slug</label>
+          <label class="form-label" for="post-slug">Slug <span data-help="The last part of the post's address, e.g. my-first-post. With Auto ticked it follows the title. Changing it on a published post breaks links to the old address."></span></label>
           <div class="flex gap-2 items-center">
             <input type="text" id="post-slug" class="form-input font-mono">
             <label class="flex items-center gap-1 text-muted text-sm blog-nowrap" for="slug-auto">
@@ -29,11 +38,11 @@
           </div>
         </div>
         <div class="mb-3">
-          <label class="form-label" for="post-excerpt">Excerpt</label>
+          <label class="form-label" for="post-excerpt">Excerpt <span data-help="A sentence or two shown in post listings and used as the search-engine description when SEO Description is empty."></span></label>
           <textarea id="post-excerpt" class="form-textarea" rows="2" placeholder="Short summary…"></textarea>
         </div>
         <div class="mb-3">
-          <label class="form-label" for="post-content">Content</label>
+          <label class="form-label" for="post-content">Content <span data-help="Markdown. Every shortcode the site supports works here too."></span></label>
           <textarea id="post-content" class="form-textarea font-mono" rows="20" placeholder="Write in Markdown…"></textarea>
         </div>
       </div>
@@ -42,7 +51,7 @@
     <!-- SEO accordion -->
     <div class="card mb-3">
       <div class="card-header blog-clickable" id="seo-toggle">
-        SEO <span class="text-muted text-sm">(click to expand)</span>
+        SEO <span class="text-muted text-sm">(click to expand)</span> <span data-help="Optional overrides for what search engines and link previews show. Leave empty to use the title and excerpt."></span>
       </div>
       <div class="card-body blog-hidden" id="seo-panel">
         <div class="mb-3">
@@ -60,7 +69,7 @@
   <!-- Sidebar -->
   <div class="blog-editor-side">
     <div class="card mb-3">
-      <div class="card-header">Status</div>
+      <div class="card-header">Status <span data-help="Save Draft keeps the post private. Publish Now puts it live. Schedule publishes it at the date and time you choose."></span></div>
       <div class="card-body">
         <div id="schedule-picker" class="mb-3 blog-hidden">
           <label class="form-label" for="post-scheduled-at">Scheduled for</label>
@@ -70,15 +79,29 @@
       </div>
     </div>
 
+    <div class="card mb-3" id="layout-card">
+      <div class="card-header blog-card-head">Layout
+        <span data-help-title="Post layout"
+              data-help="How this post looks on the site. Site default follows Blog settings, so changing the default there moves every post that has not chosen. Each layout is a block you can restyle under Blocks."></span>
+        <button type="button" class="btn btn-xs btn-ghost blog-preview-btn" id="btn-preview" title="See the post as readers will, before saving">
+          <span data-icon="eye" data-icon-size="13"></span> Preview
+        </button>
+      </div>
+      <div class="card-body">
+        <div class="blog-layouts" role="radiogroup" aria-label="Layout" data-each="layoutChoices.value key=id"></div>
+        <p class="blog-layout-desc" data-bind-text="layoutDesc.value"></p>
+      </div>
+    </div>
+
     <div class="card mb-3">
-      <div class="card-header">Categories</div>
+      <div class="card-header">Categories <span data-help="Manage the list under Blog > Categories. A post can be in several."></span></div>
       <div class="card-body" id="categories-checklist">
         <p class="text-muted text-sm">Loading…</p>
       </div>
     </div>
 
     <div class="card mb-3">
-      <div class="card-header">Tags</div>
+      <div class="card-header">Tags <span data-help="Free-form labels, comma-separated. Each tag gets its own page on the site."></span></div>
       <div class="card-body">
         <input type="text" id="post-tags" class="form-input" placeholder="tag1, tag2, …">
         <div class="text-muted text-sm mt-1">Comma-separated</div>
@@ -86,7 +109,7 @@
     </div>
 
     <div class="card mb-3">
-      <div class="card-header">Featured Image</div>
+      <div class="card-header">Featured Image <span data-help="Shown at the top of the post and in listings. Pick one from the Media library."></span></div>
       <div class="card-body">
         <div id="featured-image-preview" class="mb-2"></div>
         <button id="btn-pick-image" class="btn btn-sm btn-secondary">Pick Image</button>

package/plugins/blog/admin/templates/settings.html

@@ -1,14 +1,5 @@
-<div class="view-header">
-  <h1><span data-icon="settings"></span> Blog Settings</h1>
-  <button id="btn-save-settings" class="btn btn-primary">
-    <span data-icon="save"></span> Save
-  </button>
-</div>
-
-<div class="alert alert-warning mb-4">
-  Base path and posts-per-page changes require a server restart to take effect.
-</div>
-
+<!-- No heading: the banner above is the title. The same panel opens from the
+     banner's cog on every Blog screen; this page is for links that land here. -->
 <div class="card blog-settings-card">
   <div class="card-body" id="settings-form"></div>
 </div>

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

@@ -1,202 +1,328 @@
 /**
- * Blog posts overview - KPI cards + filterable, sortable post table.
+ * Blog posts - the list, on the Tool upgrade path.
+ *
+ * State is domma-reactive observables bound with M.applyBindings; there is no
+ * render function. The four status counts are chips that also filter, which is
+ * what the KPI cards were taking a row of screen for. Everything you can do to
+ * a post is on its context menu (right-click, Shift+F10, or ⋮); a click on the
+ * row opens it.
  *
  * @module blog/admin/views/blog
  */
 
-function escapeHtml(s) {
-    return String(s ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
-}
+// 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';
 
-const BASE = '/api/plugins/blog';
+const STATUSES = [
+    {key: '', label: 'All'},
+    {key: 'published', label: 'Published'},
+    {key: 'draft', label: 'Drafts'},
+    {key: 'scheduled', label: 'Scheduled'}
+];
 
-const STATUS_BADGE = {
-    draft: 'badge-secondary',
-    scheduled: 'badge-warning',
-    published: 'badge-success'
-};
+/**
+ * One post row - the body of the rows `data-each`. Here, not in blog.html,
+ * because the router renders a templateUrl through `_.render` first, which
+ * would replace every `{{…}}` with nothing. Mustache escapes its values.
+ */
+const ROW_TEMPLATE = `
+<div class="blog-row" data-id="{{id}}" tabindex="0">
+    <span class="blog-row-main">
+        <strong class="blog-row-title">{{title}}</strong>
+        <small class="blog-row-sub">{{sub}}</small>
+    </span>
+    <span class="badge {{badge}}">{{status}}</span>
+    <span class="blog-row-cats">{{cats}}</span>
+    <time class="blog-row-date" title="{{dateTitle}}">{{date}}</time>
+    <button type="button" class="blog-kebab" aria-label="Actions" title="Actions">⋮</button>
+</div>`;
+
+const CHIP_TEMPLATE = `<button type="button" class="blog-chip" data-status="{{key}}">{{label}} <b>{{count}}</b></button>`;
+
+const BADGE = {draft: 'badge-secondary', scheduled: 'badge-warning', published: 'badge-success'};
 
 export const blogView = {
     templateUrl: '/plugins/blog/admin/templates/blog.html',
 
     async onMount($container) {
-        let allPosts = [];
-        let categories = [];
-        let postsTable = null;
-
-        function buildTable(data) {
-            const tableEl = $container.find('#posts-table').get(0);
-            if (!tableEl) return;
-
-            if (postsTable) {
-                postsTable.setData(data);
-                Domma.icons.scan(tableEl);
-                return;
-            }
+        // Not awaited: the cog is chrome, and the screen should not wait on it.
+        import(`./settings-cog.js?v=${ASSET_VERSION}`)
+            .then(m => m.addSettingsCog($container, '.blog-bar'))
+            .catch(() => { /* no cog is better than no screen */ });
 
-            const catNameById = (id) => categories.find((c) => c.id === id)?.name ?? '';
-
-            postsTable = T.create(tableEl, {
-                data,
-                columns: [
-                    {
-                        key: 'title',
-                        title: 'Title',
-                        sortable: true,
-                        render: (v, row) =>
-                            `<a href="#/plugins/blog/posts/${escapeHtml(row.id)}" class="blog-title-link">${escapeHtml(v || 'Untitled')}</a>`
-                    },
-                    {
-                        key: 'status',
-                        title: 'Status',
-                        sortable: true,
-                        render: (v) => {
-                            const cls = STATUS_BADGE[v] || 'badge-secondary';
-                            return `<span class="badge ${cls}">${escapeHtml(v ?? 'draft')}</span>`;
-                        }
-                    },
-                    {
-                        key: 'categories',
-                        title: 'Categories',
-                        sortable: false,
-                        render: (val) => Array.isArray(val) && val.length
-                            ? val.map((id) => `<span class="badge badge-secondary mr-1">${escapeHtml(catNameById(id) || id)}</span>`).join('')
-                            : '<span class="blog-empty-cell">-</span>'
-                    },
-                    {
-                        key: 'publishedAt',
-                        title: 'Published',
-                        sortable: true,
-                        render: (v) => v
-                            ? `<span title="${escapeHtml(D(v).format('DD MMM YYYY HH:mm'))}">${escapeHtml(D(v).format('DD MMM YYYY'))}</span>`
-                            : '<span class="blog-empty-cell">-</span>'
-                    },
-                    {
-                        key: 'id',
-                        title: 'Actions',
-                        sortable: false,
-                        render: (id, row) => {
-                            const slug = escapeHtml(row.slug || '');
-                            const viewLink = row.status === 'published' && slug
-                                ? `<a href="/blog/${slug}" target="_blank" class="btn btn-sm btn-outline" title="View on site"><span data-icon="external-link" data-icon-size="14"></span></a>`
-                                : '';
-                            return `<div class="blog-row-actions">` +
-                                `<button class="btn btn-sm btn-outline post-edit-btn" data-id="${escapeHtml(id)}"><span data-icon="edit" data-icon-size="14"></span></button>` +
-                                viewLink +
-                                `<button class="btn btn-sm btn-danger post-delete-btn" data-id="${escapeHtml(id)}"><span data-icon="trash" data-icon-size="14"></span></button>` +
-                                `</div>`;
-                        }
-                    }
-                ],
-                emptyMessage: 'No posts found.'
-            });
+        const kit = await import(`./kit.js?v=${ASSET_VERSION}`);
+        const {BASE} = kit;
+        const add = kit.viewScope('posts', /^#\/plugins\/blog(\/posts)?\/?$/);
+        const root = $container.get(0);
 
-            tableEl.addEventListener('click', async (e) => {
-                const editBtn = e.target.closest('.post-edit-btn');
-                const deleteBtn = e.target.closest('.post-delete-btn');
+        // ---- State ----
+        const posts = M.observable([]);
+        const categories = M.observable([]);
+        const status = M.observable('');
+        const category = M.observable(kit.takeHandOff('category') || '');
+        const query = M.observable('');
+        const sort = M.observable('newest');
+        const loading = M.observable(true);
+        let site = '/blog';
 
-                if (editBtn) {
-                    R.navigate('#/plugins/blog/posts/' + editBtn.dataset.id);
-                }
+        const catName = (id) => categories.peek().find(c => c.id === id)?.name ?? id;
+        const when = (p) => p.publishedAt || p.updatedAt || p.createdAt || '';
 
-                if (deleteBtn) {
-                    const id = deleteBtn.dataset.id;
-                    const post = allPosts.find((p) => p.id === id);
-                    const ok = await E.confirm(`Delete "${post?.title ?? 'this post'}"?`);
-                    if (!ok) return;
-                    try {
-                        await H.delete(`${BASE}/posts/${id}`);
-                        E.toast('Post deleted.', { type: 'success' });
-                        await reload();
-                    } catch {
-                        E.toast('Failed to delete post.', { type: 'error' });
-                    }
-                }
+        const categoryOptions = M.computed(() => categories.value.map(c => ({id: c.id, name: c.name ?? c.slug ?? c.id})));
+
+        // Plain observables fed by effects: the admin's Domma never re-renders
+        // a data-each whose source is a computed.
+        const rows = M.observable([]);
+        const chips = M.observable([]);
+        add(M.effect(() => {
+            const term = query.value.trim().toLowerCase();
+            const list = posts.value.filter(p =>
+                (!status.value || p.status === status.value)
+                && (!category.value || (Array.isArray(p.categories) && p.categories.includes(category.value)))
+                && (!term || [p.title, p.excerpt, p.slug].some(v => String(v ?? '').toLowerCase().includes(term))));
+            const order = {
+                newest: (a, b) => String(when(b)).localeCompare(String(when(a))),
+                oldest: (a, b) => String(when(a)).localeCompare(String(when(b))),
+                title: (a, b) => String(a.title ?? '').localeCompare(String(b.title ?? ''), undefined, {sensitivity: 'base'})
+            }[sort.value];
+            categories.value;   // re-label when categories arrive
+            rows.value = [...list].sort(order).map(p => {
+                const at = when(p);
+                const label = p.status === 'published' ? 'Published' : p.status === 'scheduled' ? 'Scheduled for' : 'Updated';
+                return {
+                    id: p.id,
+                    title: p.title || 'Untitled',
+                    sub: `${p.sample ? 'Sample · ' : ''}/${p.slug || ''}${p.excerpt ? ' · ' + String(p.excerpt).slice(0, 90) : ''}`,
+                    status: p.status ?? 'draft',
+                    badge: BADGE[p.status] || 'badge-secondary',
+                    cats: (p.categories || []).map(catName).join(', '),
+                    date: at ? D(at).format('DD MMM YYYY') : '',
+                    dateTitle: at ? `${label} ${D(at).format('DD MMM YYYY HH:mm')}` : ''
+                };
             });
+        }));
+        add(M.effect(() => {
+            const all = posts.value;
+            chips.value = STATUSES.map(s => ({
+                key: s.key || 'all', label: s.label,
+                count: s.key ? all.filter(p => (p.status ?? 'draft') === s.key).length : all.length
+            }));
+        }));
+        // The active chip, marked without re-rendering the list.
+        add(M.effect(() => {
+            const active = status.value || 'all';
+            chips.value;
+            queueMicrotask(() => root.querySelectorAll('.blog-chip').forEach(c =>
+                c.classList.toggle('is-active', c.dataset.status === active)));
+        }));
+
+        const filtered = M.computed(() => Boolean(status.value || category.value || query.value.trim()));
+        const data = {
+            rows, chips, query, category, categoryOptions, sort, loading,
+            hasRows: M.computed(() => rows.value.length > 0),
+            isEmpty: M.computed(() => !loading.value && rows.value.length === 0),
+            emptyText: M.computed(() => filtered.value ? 'No posts match these filters.' : 'No posts yet - New post starts one, or ⋮ adds some samples to look at.'),
+            canReset: filtered
+        };
+
+        // ---- Server ----
+        const byId = (id) => posts.peek().find(p => p.id === id);
 
-            Domma.icons.scan(tableEl);
+        async function load() {
+            loading.value = true;
+            try {
+                const [postsRes, catsRes] = await Promise.all([
+                    H.get(`${BASE}/posts`),
+                    H.get(`${BASE}/categories`).catch(() => [])
+                ]);
+                site = await kit.sitePath();
+                // GET /posts sends a BARE ARRAY; `.data` is only for a wrapped reply.
+                posts.value = postsRes?.data ?? (Array.isArray(postsRes) ? postsRes : []);
+                categories.value = catsRes?.data ?? (Array.isArray(catsRes) ? catsRes : []);
+            } catch {
+                E.toast('Failed to load posts.', {type: 'error'});
+            } finally {
+                loading.value = false;
+            }
         }
 
-        function refreshKpis() {
-            const counts = { total: allPosts.length, published: 0, draft: 0, scheduled: 0 };
-            for (const p of allPosts) {
-                if (p.status === 'published') counts.published++;
-                else if (p.status === 'scheduled') counts.scheduled++;
-                else counts.draft++;
+        /** Replace one post in place, as a NEW array, from a route's reply. */
+        const upsert = (post) => {
+            const list = posts.peek();
+            posts.value = list.some(p => p.id === post.id) ? list.map(p => (p.id === post.id ? post : p)) : [post, ...list];
+        };
+
+        async function publish(id) {
+            try {
+                upsert(await H.post(`${BASE}/posts/${id}/publish`, {}));
+                E.toast('Post published.', {type: 'success'});
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to publish.', {type: 'error'});
             }
-            $container.find('#kpi-total').text(counts.total);
-            $container.find('#kpi-published').text(counts.published);
-            $container.find('#kpi-drafts').text(counts.draft);
-            $container.find('#kpi-scheduled').text(counts.scheduled);
         }
 
-        function applyFilters() {
-            const status = $container.find('#filter-status').val() || '';
-            const cat    = $container.find('#filter-category').val() || '';
-            const query  = ($container.find('#filter-search').val() || '').toString().toLowerCase().trim();
-
-            let filtered = allPosts;
-            if (status) filtered = filtered.filter((p) => p.status === status);
-            if (cat)    filtered = filtered.filter((p) => Array.isArray(p.categories) && p.categories.includes(cat));
-            if (query) {
-                filtered = filtered.filter((p) =>
-                    (p.title ?? '').toLowerCase().includes(query) ||
-                    (p.excerpt ?? '').toLowerCase().includes(query)
-                );
+        async function unpublish(id) {
+            try {
+                upsert(await H.put(`${BASE}/posts/${id}`, {status: 'draft'}));
+                E.toast('Post moved back to drafts.', {type: 'success'});
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to unpublish.', {type: 'error'});
             }
-            buildTable(filtered);
         }
 
-        function populateCategoryFilter() {
-            const select = $container.find('#filter-category').get(0);
-            if (!select) return;
-            for (const cat of categories) {
-                const opt = document.createElement('option');
-                opt.value = cat.id;
-                opt.textContent = cat.name ?? cat.slug ?? cat.id;
-                select.appendChild(opt);
+        async function duplicate(id) {
+            const p = byId(id);
+            if (!p) return;
+            try {
+                const copy = await H.post(`${BASE}/posts`, {
+                    title: `${p.title || 'Untitled'} (copy)`,
+                    slug: `${p.slug || 'post'}-copy-${Date.now().toString(36)}`,
+                    content: p.content ?? '', excerpt: p.excerpt ?? '', featuredImage: p.featuredImage ?? null,
+                    categories: p.categories ?? [], tags: p.tags ?? [], template: p.template ?? '', status: 'draft'
+                });
+                upsert(copy);
+                E.toast('Copied as a draft.', {type: 'success'});
+            } catch (err) {
+                E.toast(err?.message ?? 'Failed to duplicate.', {type: 'error'});
             }
         }
 
-        async function reload() {
+        async function remove(id) {
+            const p = byId(id);
+            // No title in the prompt: E.confirm is not promised to escape it.
+            const ok = await E.confirm(p?.status === 'published'
+                ? 'Delete this published post? Its page goes offline and links to it will break.'
+                : 'Delete this post? This cannot be undone.');
+            if (!ok) return;
             try {
-                const [postsRes, catsRes] = await Promise.all([
-                    H.get(`${BASE}/posts`),
-                    H.get(`${BASE}/categories`).catch(() => ({ data: [] }))
-                ]);
-                if (postsRes.error) throw new Error(postsRes.error);
-                // GET /posts sends a BARE ARRAY, so `.data` is undefined and this
-                // read emptied the whole screen - no rows, all four KPIs zero.
-                // Same guard as categories.js and comments.js.
-                allPosts = postsRes.data ?? (Array.isArray(postsRes) ? postsRes : []);
-                categories = catsRes.data ?? catsRes ?? [];
+                await H.delete(`${BASE}/posts/${id}`);
+                posts.value = posts.peek().filter(x => x.id !== id);
+                E.toast('Post deleted.', {type: 'success'});
             } catch {
-                allPosts = [];
-                categories = [];
-                E.toast('Failed to load posts.', { type: 'error' });
+                E.toast('Failed to delete post.', {type: 'error'});
             }
-            refreshKpis();
-            populateCategoryFilter();
-            applyFilters();
         }
 
-        $container.find('#btn-new-post').on('click', () => R.navigate('#/plugins/blog/posts/new'));
-        $container.find('#filter-status').on('change', applyFilters);
-        $container.find('#filter-category').on('change', applyFilters);
-        $container.find('#filter-reset').on('click', () => {
-            $container.find('#filter-status').val('');
-            $container.find('#filter-category').val('');
-            $container.find('#filter-search').val('');
-            applyFilters();
+        async function copyLink(p) {
+            try {
+                await navigator.clipboard.writeText(`${location.origin}${site}/${p.slug}`);
+                E.toast('Link copied.', {type: 'success'});
+            } catch {
+                E.toast('The browser would not allow copying.', {type: 'error'});
+            }
+        }
+
+        // ---- Bindings ----
+        // Refs and help BEFORE binding: data-if lifts elements out of the document.
+        const list = root.querySelector('.blog-list');
+        root.querySelector('.blog-rows').innerHTML = ROW_TEMPLATE;
+        root.querySelector('.blog-chips').innerHTML = CHIP_TEMPLATE;
+        add(await kit.scanHelp(root));
+        const handle = M.applyBindings(data, root, {
+            methods: {
+                create: () => R.navigate('#/plugins/blog/posts/new'),
+                reset() {
+                    status.value = '';
+                    category.value = '';
+                    query.value = '';
+                }
+            }
+        });
+        add(() => handle.dispose());
+
+        root.querySelector('.blog-chips').addEventListener('click', (e) => {
+            const chip = e.target.closest('.blog-chip');
+            if (chip) status.value = chip.dataset.status === 'all' ? '' : chip.dataset.status;
+        });
+
+        // ---- Context menu: every action on a post ----
+        const menu = E.contextMenu(list, {
+            match: '.blog-row',
+            inherit: false,
+            density: 'compact',
+            items: (row) => {
+                const p = byId(row.dataset.id);
+                if (!p) return [];
+                const live = p.status === 'published';
+                return kit.tidy([
+                    {label: 'Edit', icon: 'edit', action: () => R.navigate(`#/plugins/blog/posts/${p.id}`)},
+                    {label: 'View on site', icon: 'external-link', visible: live && Boolean(p.slug),
+                        action: () => window.open(`${site}/${encodeURIComponent(p.slug)}`, '_blank', 'noopener')},
+                    {label: 'Copy link', icon: 'link', visible: live && Boolean(p.slug), action: () => copyLink(p)},
+                    {type: 'divider'},
+                    {label: 'Publish now', icon: 'check-circle', visible: !live, action: () => publish(p.id)},
+                    {label: 'Unpublish', icon: 'eye-off', visible: p.status !== 'draft', action: () => unpublish(p.id)},
+                    {label: 'Duplicate as draft', icon: 'copy', action: () => duplicate(p.id)},
+                    {type: 'divider'},
+                    {label: 'Delete', icon: 'trash', danger: true, action: () => remove(p.id)}
+                ]);
+            }
         });
+        add(() => menu?.destroy?.());
 
-        let searchTimer = null;
-        $container.find('#filter-search').on('input', () => {
-            clearTimeout(searchTimer);
-            searchTimer = setTimeout(applyFilters, 250);
+        // ---- The bar's ⋮: the blog as a whole ----
+        // Adding and removing samples is admin-only on the server; ask it who
+        // this is rather than trusting whatever the browser cached at login.
+        let isAdmin = false;
+        H.get('/api/auth/me')
+            .then(me => { isAdmin = ['admin', 'super-admin'].includes((me?.data ?? me)?.role); })
+            .catch(() => { /* not shown, then */ });
+        const samples = () => posts.peek().filter(p => p.sample === true).length;
+        const barMenu = E.contextMenu(root.querySelector('.blog-bar-end'), {
+            match: '.blog-more',
+            inherit: false,
+            density: 'compact',
+            items: () => kit.tidy([
+                {label: 'View the blog', icon: 'external-link', action: () => window.open(site, '_blank', 'noopener')},
+                {label: 'Edit layouts in Blocks', icon: 'layout', action: () => R.navigate('#/blocks')},
+                {type: 'divider'},
+                {label: 'Add sample posts', icon: 'file-plus', visible: isAdmin && !samples(), action: addSamples},
+                {label: `Remove ${samples()} sample post${samples() === 1 ? '' : 's'}…`, icon: 'trash', danger: true,
+                    visible: isAdmin && samples() > 0, action: removeSamples}
+            ])
+        });
+        add(() => barMenu?.destroy?.());
+        root.querySelector('.blog-bar-end').addEventListener('click', (e) => {
+            const more = e.target.closest('.blog-more');
+            if (more) kit.openMenuFrom(more);
+        });
+
+        async function addSamples() {
+            try {
+                const res = await H.post(`${BASE}/samples`, {});
+                if (res?.error) throw new Error(res.error);
+                E.toast(res.added ? `Added ${res.added} sample posts. Remove them from ⋮ whenever you like.` : 'The sample posts are already here.', {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(err?.message ?? 'Could not add the sample posts.', {type: 'error'});
+            }
+        }
+
+        async function removeSamples() {
+            if (!(await E.confirm('Remove the sample posts, and any sample category nothing else uses? Your own posts are not touched.'))) return;
+            try {
+                const res = await H.delete(`${BASE}/samples`);
+                if (res?.error) throw new Error(res.error);
+                E.toast(`Removed ${res.posts} sample posts.`, {type: 'success'});
+                await load();
+            } catch (err) {
+                E.toast(err?.message ?? 'Could not remove the sample posts.', {type: 'error'});
+            }
+        }
+
+        list.addEventListener('click', (e) => {
+            const row = e.target.closest('.blog-row');
+            if (!row) return;
+            const kebab = e.target.closest('.blog-kebab');
+            if (kebab) return kit.openMenuFrom(kebab);
+            R.navigate(`#/plugins/blog/posts/${row.dataset.id}`);
+        });
+        list.addEventListener('keydown', (e) => {
+            const row = e.target.closest?.('.blog-row');
+            if (row && e.key === 'Enter' && e.target === row) R.navigate(`#/plugins/blog/posts/${row.dataset.id}`);
         });
 
-        await reload();
-        Domma.icons.scan();
+        if (typeof I !== 'undefined' && I.scan) I.scan(root);
+        await load();
     }
 };