domma-cms 0.1.0

package/admin/js/views/page-editor.js

@@ -0,0 +1,479 @@
+/**
+ * Page Editor View
+ * Handles both create (new) and edit (existing) modes.
+ * Provides a split-pane Markdown editor with live preview, toolbar, and media picker.
+ */
+import {api} from '../api.js';
+import {createToolbar, insertAtCursor, wrapSelection} from '../lib/markdown-toolbar.js';
+
+/**
+ * Builds and opens the editor help slideover with a cheat-sheet reference.
+ */
+function openEditorHelp() {
+  const so = E.slideover({ title: 'Editor Reference', size: 'md', position: 'right' });
+
+  const codeStyle = 'background:var(--dm-surface-subtle,#1a1a2e);padding:.2rem .4rem;border-radius:3px;font-size:.85em;font-family:monospace;';
+  const h3Style = 'margin:1rem 0 .5rem;font-size:1rem;';
+
+  function makeCode(text) {
+    const el = document.createElement('code');
+    el.style.cssText = codeStyle;
+    el.textContent = text;
+    return el;
+  }
+
+  function makeH3(text) {
+    const el = document.createElement('h3');
+    el.style.cssText = h3Style;
+    el.textContent = text;
+    return el;
+  }
+
+  const wrap = document.createElement('div');
+  wrap.style.cssText = 'padding:1rem;display:flex;flex-direction:column;gap:1rem;';
+
+  // --- Section 1: Markdown Basics ---
+  const section1 = document.createElement('div');
+  section1.appendChild(makeH3('Markdown Basics'));
+
+  const table = document.createElement('table');
+  table.style.cssText = 'width:100%;border-collapse:collapse;font-size:.9em;';
+
+  const thead = document.createElement('thead');
+  const headerRow = document.createElement('tr');
+  ['Syntax', 'Result'].forEach(text => {
+    const th = document.createElement('th');
+    th.style.cssText = 'text-align:left;padding:.4rem .5rem;border-bottom:1px solid var(--dm-border,#333);';
+    th.textContent = text;
+    headerRow.appendChild(th);
+  });
+  thead.appendChild(headerRow);
+  table.appendChild(thead);
+
+  const tbody = document.createElement('tbody');
+  const rows = [
+    ['**bold**', 'bold (rendered bold)'],
+    ['_italic_', 'italic (rendered italic)'],
+    ['## Heading', 'Heading (h2)'],
+    ['[text](url)', 'Link'],
+    ['![alt](url)', 'Image'],
+    ['- item', 'Bullet list'],
+    ['`code`', 'Inline code'],
+    ['---', 'Divider'],
+  ];
+  rows.forEach(([syntax, result]) => {
+    const tr = document.createElement('tr');
+    const tdSyntax = document.createElement('td');
+    tdSyntax.style.cssText = 'padding:.35rem .5rem;vertical-align:top;';
+    tdSyntax.appendChild(makeCode(syntax));
+    const tdResult = document.createElement('td');
+    tdResult.style.cssText = 'padding:.35rem .5rem;vertical-align:top;color:var(--dm-text-muted,#aaa);font-size:.85em;';
+    tdResult.textContent = result;
+    tr.appendChild(tdSyntax);
+    tr.appendChild(tdResult);
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+  section1.appendChild(table);
+  wrap.appendChild(section1);
+
+  // --- Section 2: Grid shortcodes ---
+  const section2 = document.createElement('div');
+  section2.appendChild(makeH3('Grid & Columns'));
+
+  function makeNote(text) {
+    const el = document.createElement('p');
+    el.style.cssText = 'margin:.3rem 0 .6rem;font-size:.82em;color:var(--dm-text-muted,#aaa);';
+    el.textContent = text;
+    return el;
+  }
+
+  function makeSnippet(label, code, note) {
+    const lbl = document.createElement('p');
+    lbl.style.cssText = 'margin:.75rem 0 .25rem;font-size:.85em;font-weight:600;';
+    lbl.textContent = label;
+    const pre = document.createElement('pre');
+    pre.style.cssText = codeStyle + 'display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;margin:0;';
+    pre.textContent = code;
+    const frag = document.createDocumentFragment();
+    frag.appendChild(lbl);
+    frag.appendChild(pre);
+    if (note) frag.appendChild(makeNote(note));
+    return frag;
+  }
+
+  const gridAttrTable = document.createElement('table');
+  gridAttrTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
+  [
+    ['cols="N"', '[grid] only', 'Number of columns (1–12)'],
+    ['gap="N"', '[grid], [row]', 'Gap between columns/rows (1–6)'],
+    ['span="N"', '[col] only', 'How many columns this cell spans'],
+    ['class="x"', 'all', 'Add extra CSS classes'],
+  ].forEach(([attr, where, desc]) => {
+    const tr = document.createElement('tr');
+    [attr, where, desc].forEach((txt, i) => {
+      const td = document.createElement('td');
+      td.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
+      if (i === 0) {
+        td.appendChild(makeCode(attr));
+      } else {
+        td.style.color = 'var(--dm-text-muted,#aaa)';
+        td.textContent = txt;
+      }
+      tr.appendChild(td);
+    });
+    gridAttrTable.appendChild(tr);
+  });
+  section2.appendChild(gridAttrTable);
+
+  section2.appendChild(makeSnippet(
+    'Equal columns',
+    '[grid cols="3" gap="4"]\n[col]One[/col]\n[col]Two[/col]\n[col]Three[/col]\n[/grid]',
+    'cols sets the track count; each [col] fills one track.'
+  ));
+
+  section2.appendChild(makeSnippet(
+    'Column spanning (12-col base)',
+    '[grid cols="12" gap="3"]\n[col span="8"]Main content[/col]\n[col span="4"]Sidebar[/col]\n[/grid]',
+    'span values must add up to cols. Common splits: 8/4, 6/6, 9/3.'
+  ));
+
+  section2.appendChild(makeSnippet(
+    'Row (flexbox, equal-width)',
+    '[row gap="4"]\n[col]Left[/col]\n[col]Right[/col]\n[/row]',
+    'Use [row] when you want equal-width columns without specifying a count.'
+  ));
+
+  section2.appendChild(makeSnippet(
+    'Card in a grid',
+    '[grid cols="3" gap="4"]\n[col]\n[card title="One"]Content[/card]\n[/col]\n[col]\n[card title="Two"]Content[/card]\n[/col]\n[col]\n[card title="Three"]Content[/card]\n[/col]\n[/grid]',
+    null
+  ));
+
+  wrap.appendChild(section2);
+
+  // --- Section 3: Card shortcode ---
+  const section3 = document.createElement('div');
+  section3.appendChild(makeH3('Cards'));
+
+  section3.appendChild(makeSnippet(
+    'Basic card',
+    '[card title="Optional Title"]\nMarkdown **works** here.\n[/card]',
+    'Omit title for a card with no header.'
+  ));
+
+  section3.appendChild(makeSnippet(
+    'Collapsible card',
+    '[card title="Click to expand" collapsible="true"]\nHidden by default.\n[/card]',
+    null
+  ));
+
+  wrap.appendChild(section3);
+
+  // --- Section 4: Embedding a Form ---
+  const section4 = document.createElement('div');
+  section4.appendChild(makeH3('Embedding a Form'));
+
+  const formPre = document.createElement('pre');
+  formPre.style.cssText = codeStyle + 'display:block;padding:.5rem .75rem;white-space:pre;overflow-x:auto;';
+  formPre.textContent = '<div data-form="contact"></div>';
+  section4.appendChild(formPre);
+  section4.appendChild(makeNote('Replace "contact" with the form slug. Forms are managed under Forms in the sidebar.'));
+
+  wrap.appendChild(section4);
+
+  // --- Section 5: Effects shortcodes ---
+  const section5 = document.createElement('div');
+  section5.appendChild(makeH3('Effects'));
+  section5.appendChild(makeNote('Shortcodes for scroll-triggered animations, counters, typewriter text, and more. Requires the Domma Effects plugin.'));
+
+  const effectsRows = [
+    ['[reveal animation="fade"]...[/reveal]', 'Fade/slide/zoom on scroll'],
+    ['[breathe]...[/breathe]', 'Continuous gentle scale loop'],
+    ['[pulse]...[/pulse]', 'Repeating scale pulse'],
+    ['[shake]...[/shake]', 'One-shot shake'],
+    ['[scribe speed="50"]...[/scribe]', 'Typewriter character-by-character'],
+    ['[scramble]...[/scramble]', 'Character-scramble reveal'],
+    ['[counter to="100" /]', 'Animated number counter (self-closing)'],
+    ['[ripple]...[/ripple]', 'Click-triggered ripple'],
+    ['[twinkle count="50"]...[/twinkle]', 'Particle/star overlay'],
+    ['[animate type="fade-in-up"]...[/animate]', 'CSS-only animation (no plugin needed)'],
+    ['[ambient type="aurora"]...[/ambient]', 'CSS-only animated background'],
+    ['[firework type="burst" colour="rainbow" /]', 'CSS firework (self-closing)'],
+    ['[fireworks]...[/fireworks]', 'Fireworks display container'],
+    ['[celebrate theme="auto" /]', 'Seasonal canvas celebration'],
+  ];
+
+  const effectsTable = document.createElement('table');
+  effectsTable.style.cssText = 'width:100%;border-collapse:collapse;font-size:.85em;margin-bottom:.5rem;';
+  effectsRows.forEach(([syntax, desc]) => {
+    const tr = document.createElement('tr');
+    const tdCode = document.createElement('td');
+    tdCode.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;';
+    tdCode.appendChild(makeCode(syntax));
+    const tdDesc = document.createElement('td');
+    tdDesc.style.cssText = 'padding:.3rem .4rem;border-bottom:1px solid var(--dm-border,#333);vertical-align:top;color:var(--dm-text-muted,#aaa);';
+    tdDesc.textContent = desc;
+    tr.appendChild(tdCode);
+    tr.appendChild(tdDesc);
+    effectsTable.appendChild(tr);
+  });
+  section5.appendChild(effectsTable);
+
+  const effectsLink = document.createElement('p');
+  effectsLink.style.cssText = 'margin:.5rem 0 0;font-size:.82em;';
+  const a = document.createElement('a');
+  a.href = '#/plugins/domma-effects';
+  a.textContent = 'Full reference & examples →';
+  a.addEventListener('click', () => so.close());
+  effectsLink.appendChild(a);
+  section5.appendChild(effectsLink);
+
+  wrap.appendChild(section5);
+
+  so.setContent(wrap);
+  so.open();
+}
+
+// Module-level state for unsaved-changes guard
+let _dirty = false;
+let _beforeUnload = null;
+let _saveShortcut = null;
+let _guardRegistered = false;
+
+export const pageEditorView = {
+    templateUrl: '/admin/js/templates/page-editor.html',
+
+    async onMount($container) {
+        const hash = window.location.hash;
+        const editMatch = hash.match(/#\/pages\/edit(\/.*)/);  // .* allows home page path "/"
+        const urlPath = editMatch ? editMatch[1] : null;
+        const isEdit = !!urlPath;
+
+        const fetches = [api.layouts.get().catch(() => ({}))];
+        if (isEdit) fetches.push(api.pages.get(urlPath).catch(() => null));
+
+        const [layouts, page] = await Promise.all(fetches);
+
+        if (isEdit && !page) {
+            E.toast('Page not found.', { type: 'error' });
+            R.navigate('/pages');
+            return;
+        }
+
+        // Title
+        $container.find('#editor-title').text(isEdit ? 'Edit Page' : 'New Page');
+
+        // URL path field
+        if (isEdit) {
+            $container.find('#page-url-path').val(urlPath);
+        }
+
+        // Populate form fields
+        if (page) {
+            $container.find('#field-title').val(page.title || '');
+            $container.find('#field-description').val(page.description || '');
+            $container.find('#field-status').val(page.status || 'draft');
+            $container.find('#field-sort-order').val(page.sortOrder ?? 99);
+            $container.find('#field-show-in-nav').prop('checked', !!page.showInNav);
+            $container.find('#field-sidebar').prop('checked', !!page.sidebar);
+          $container.find('#field-category').val(page.category || '');
+          $container.find('#field-visibility').val(page.visibility || 'public');
+            $container.find('#field-seo-title').val(page.seo?.title || '');
+            $container.find('#field-seo-desc').val(page.seo?.description || '');
+        }
+
+        // Layouts dropdown
+        const $layoutSelect = $container.find('#field-layout').empty();
+        Object.entries(layouts).forEach(([key, preset]) => {
+            const selected = (page?.layout || 'default') === key ? 'selected' : '';
+            $layoutSelect.append(`<option value="${key}" ${selected}>${preset.label || key}</option>`);
+        });
+
+        // Markdown editor + live preview
+        const $editor = $container.find('#markdown-editor');
+        const $preview = $container.find('#markdown-preview');
+        if (page) $editor.val(page.content || '');
+
+      let _previewTimer = null;
+        const updatePreview = () => {
+          clearTimeout(_previewTimer);
+          _previewTimer = setTimeout(async () => {
+            try {
+              const {html} = await api.pages.preview($editor.val());
+              $preview.html(html);
+              Domma.icons.scan();
+            } catch {
+              if (window.marked) $preview.html(marked.parse($editor.val()));
+            }
+          }, 400);
+        };
+
+      // Create toolbar
+      const toolbar = createToolbar($editor, $container.find('#editor-toolbar'));
+
+      // Link callback: prompt for URL
+      toolbar.onLink((ta) => {
+        const url = prompt('Enter URL:');
+        if (url) wrapSelection(ta, '[', `](${url})`);
+      });
+
+      // Image callback: open media picker modal
+      toolbar.onImage(async (ta) => {
+        const files = await api.media.list().catch(() => []);
+        const images = files.filter(f => /\.(png|jpe?g|gif|webp|svg)$/i.test(f.name));
+
+        const grid = document.createElement('div');
+        grid.className = 'media-picker-grid';
+
+        if (images.length) {
+          images.forEach(img => {
+            const item = document.createElement('div');
+            item.className = 'media-picker-item';
+            item.dataset.url = img.url;
+
+            const image = document.createElement('img');
+            image.src = img.url;
+            image.alt = img.name;
+
+            const label = document.createElement('span');
+            label.textContent = img.name;
+
+            item.appendChild(image);
+            item.appendChild(label);
+            grid.appendChild(item);
+          });
+        } else {
+          const empty = document.createElement('p');
+          empty.className = 'text-muted p-3';
+          empty.textContent = 'No images uploaded yet.';
+          grid.appendChild(empty);
+        }
+
+        const modal = E.modal({title: 'Insert Image', size: 'lg'});
+        modal.element.appendChild(grid);
+
+        $(modal.element).on('click', '.media-picker-item', function () {
+          const url = $(this).data('url');
+          const alt = $(this).find('span').text();
+          insertAtCursor(ta, `![${alt}](${url})`);
+          modal.close();
+          $editor.get(0).dispatchEvent(new Event('input', {bubbles: true}));
+        });
+
+        modal.open();
+      });
+
+      // Help callback: open editor reference slideover
+      toolbar.onHelp(() => {
+        openEditorHelp();
+      });
+
+      // View mode switching
+      $container.find('.editor-view-btn').on('click', function () {
+        const mode = $(this).data('mode');
+        $container.find('.editor-view-btn').removeClass('active');
+        $(this).addClass('active');
+        $container.find('#editor-body')
+          .removeClass('editor-mode-split editor-mode-write editor-mode-preview')
+          .addClass(`editor-mode-${mode}`);
+      });
+
+      // Fullscreen toggle
+      $container.find('#fullscreen-btn').on('click', function () {
+        $container.find('.editor-card').toggleClass('editor-fullscreen');
+      });
+
+      // Dirty tracking + unsaved-changes guard
+      _dirty = false;
+      if (_beforeUnload) window.removeEventListener('beforeunload', _beforeUnload);
+      _beforeUnload = (e) => {
+        if (_dirty) e.preventDefault();
+      };
+      window.addEventListener('beforeunload', _beforeUnload);
+
+      // SPA navigation guard — registered once at module level
+      if (!_guardRegistered) {
+        _guardRegistered = true;
+        R.use((to, from, next) => {
+          const onEditor = window.location.hash.startsWith('#/pages/edit') ||
+            window.location.hash === '#/pages/new';
+          if (!_dirty || !onEditor) return next();
+          E.confirm('You have unsaved changes. Leave this page?').then(ok => {
+            if (ok) {
+              _dirty = false;
+              if (_saveShortcut) {
+                document.removeEventListener('keydown', _saveShortcut);
+                _saveShortcut = null;
+              }
+              next();
+            }
+          });
+        });
+      }
+
+      $editor.on('input', () => {
+        _dirty = true;
+        updatePreview();
+      });
+        updatePreview();
+
+        // Save
+        $container.find('#save-btn').on('click', async () => {
+            const enteredPath = $container.find('#page-url-path').val().trim();
+            if (!enteredPath) { E.toast('URL path is required.', { type: 'warning' }); return; }
+
+            const frontmatter = {
+                title: $container.find('#field-title').val().trim() || 'Untitled',
+                description: $container.find('#field-description').val().trim(),
+                layout: $container.find('#field-layout').val(),
+                status: $container.find('#field-status').val(),
+                sortOrder: parseInt($container.find('#field-sort-order').val(), 10) || 99,
+                showInNav: $container.find('#field-show-in-nav').is(':checked'),
+                sidebar: $container.find('#field-sidebar').is(':checked'),
+              category: $container.find('#field-category').val().trim() || null,
+              visibility: $container.find('#field-visibility').val() || 'public',
+                seo: {
+                    title: $container.find('#field-seo-title').val().trim(),
+                    description: $container.find('#field-seo-desc').val().trim()
+                }
+            };
+
+            try {
+                $container.find('#save-btn').prop('disabled', true).text('Saving…');
+                if (isEdit) {
+                    const payload = { frontmatter, body: $editor.val() };
+                    if (enteredPath !== urlPath) payload.newUrlPath = enteredPath;
+                    await api.pages.update(urlPath, payload);
+                    E.toast('Page saved successfully.', { type: 'success' });
+                  _dirty = false;
+                    if (enteredPath !== urlPath) R.navigate(`/pages/edit${enteredPath}`);
+                } else {
+                    await api.pages.create({ urlPath: enteredPath, frontmatter, body: $editor.val() });
+                    E.toast('Page saved successfully.', { type: 'success' });
+                  _dirty = false;
+                    R.navigate('/pages');
+                }
+            } catch (err) {
+                E.toast(`Save failed: ${err.message || 'Unknown error'}`, { type: 'error' });
+            } finally {
+                $container.find('#save-btn').prop('disabled', false).text('Save');
+            }
+        });
+
+      // Ctrl+S / Cmd+S → save
+      if (_saveShortcut) document.removeEventListener('keydown', _saveShortcut);
+      _saveShortcut = (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+          e.preventDefault();
+          $container.find('#save-btn').get(0).click();
+        }
+      };
+      document.addEventListener('keydown', _saveShortcut);
+
+        // Cancel
+        $container.find('#cancel-btn').on('click', () => R.navigate('/pages'));
+
+        Domma.icons.scan();
+    }
+};

package/admin/js/views/pages.js

@@ -0,0 +1,64 @@
+/**
+ * Pages List View
+ * Shows all pages in a Domma table with status filter.
+ */
+import {api} from '../api.js';
+
+export const pagesView = {
+    templateUrl: '/admin/js/templates/pages.html',
+
+    async onMount($container) {
+        let pages = await api.pages.list().catch(() => []);
+
+        const renderTable = (data) => {
+            T.create('#pages-table', {
+                data,
+                columns: [
+                    { key: 'title', label: 'Title', render: (val, row) => `<a href="#/pages/edit${row.urlPath}">${val}</a>` },
+                    { key: 'urlPath', label: 'URL', render: (val) => `<code>${val}</code>` },
+                    { key: 'layout', label: 'Layout' },
+                    { key: 'status', label: 'Status', render: (val) => `<span class="badge badge-${val === 'published' ? 'success' : 'warning'}">${val}</span>` },
+                    { key: 'updatedAt', label: 'Updated', render: (val) => val ? D(val).format('DD MMM YYYY') : '—' },
+                    {
+                        key: 'actions', label: 'Actions',
+                        render: (_, row) => `
+                            <a href="#/pages/edit${row.urlPath}" class="btn btn-sm btn-outline">Edit</a>
+                            <a href="${row.urlPath}" target="_blank" class="btn btn-sm btn-ghost" data-tooltip="View"><span data-icon="external-link"></span></a>
+                            <button class="btn btn-sm btn-danger btn-delete" data-path="${row.urlPath}">Delete</button>
+                        `
+                    }
+                ],
+                emptyMessage: 'No pages found. <a href="#/pages/new">Create one</a>.'
+            });
+            Domma.icons.scan();
+          document.querySelectorAll('#pages-table [data-tooltip]').forEach(el => {
+            E.tooltip(el, {content: el.getAttribute('data-tooltip'), position: 'top'});
+          });
+            Domma.effects.reveal('.card', { animation: 'fade', duration: 350 });
+        };
+
+        renderTable(pages);
+
+        // Status filter
+        $container.find('#status-filter').off('change').on('change', function () {
+            const val = $(this).val();
+            const filtered = val ? pages.filter(p => p.status === val) : pages;
+            renderTable(filtered);
+        });
+
+        // Delete handler (delegated)
+        $container.off('click', '.btn-delete').on('click', '.btn-delete', async function () {
+            const urlPath = $(this).data('path');
+            const confirmed = await E.confirm(`Delete page at <strong>${urlPath}</strong>? This cannot be undone.`);
+            if (!confirmed) return;
+            try {
+                await api.pages.delete(urlPath);
+                E.toast('Page deleted.', { type: 'success' });
+                pages = pages.filter(p => p.urlPath !== urlPath);
+                renderTable(pages);
+            } catch {
+                E.toast('Failed to delete page.', { type: 'error' });
+            }
+        });
+    }
+};

package/admin/js/views/plugins.js

@@ -0,0 +1,100 @@
+/**
+ * Plugins Management View
+ * Card grid of discovered plugins with enable/disable toggle and settings.
+ */
+import { api } from '../api.js';
+
+export const pluginsView = {
+    templateUrl: '/admin/js/templates/plugins.html',
+
+    async onMount($container) {
+        let plugins = [];
+        try {
+            plugins = await api.plugins.list();
+        } catch (err) {
+            E.toast(`Failed to load plugins: ${err.message}`, { type: 'error' });
+        }
+
+        if (!plugins.length) {
+            $container.find('#plugins-empty').show();
+            return;
+        }
+
+        renderPlugins($container, plugins);
+        Domma.icons.scan();
+    }
+};
+
+// ---------------------------------------------------------------------------
+// Render
+// ---------------------------------------------------------------------------
+
+function renderPlugins($container, plugins) {
+    const $grid = $container.find('#plugins-grid').empty();
+
+    plugins.forEach(plugin => {
+        const enabledClass = plugin.enabled ? 'badge-success' : 'badge-secondary';
+        const enabledLabel = plugin.enabled ? 'Enabled' : 'Disabled';
+        const btnLabel     = plugin.enabled ? 'Disable' : 'Enable';
+        const btnClass     = plugin.enabled ? 'btn-ghost' : 'btn-primary';
+
+        const authorLine = plugin.author ? `by ${escapeHtml(plugin.author)}` : '';
+        const dateLine   = plugin.date   ? escapeHtml(plugin.date)              : '';
+
+        const card = `
+            <div class="card plugin-card" data-plugin="${plugin.name}">
+                <div class="card-body">
+                    <div class="plugin-header">
+                        <div class="plugin-icon"><span data-icon="${plugin.icon || 'package'}"></span></div>
+                        <div class="plugin-meta">
+                            <div class="plugin-name">${escapeHtml(plugin.displayName)}</div>
+                            <div class="plugin-version">v${escapeHtml(plugin.version)}${authorLine ? ` &middot; ${authorLine}` : ''}</div>
+                        </div>
+                        <span class="badge ${enabledClass}">${enabledLabel}</span>
+                    </div>
+                    <p class="plugin-desc">${escapeHtml(plugin.description)}</p>
+                    ${dateLine ? `<p class="plugin-date text-muted" style="font-size:.8rem;margin:0">Released ${dateLine}</p>` : ''}
+                </div>
+                <div class="plugin-footer">
+                    <span class="text-muted" style="font-size:.8rem">Restart server after changes</span>
+                    <button class="btn btn-sm ${btnClass} btn-toggle-plugin"
+                            data-name="${plugin.name}"
+                            data-enabled="${plugin.enabled ? '1' : '0'}">
+                        ${btnLabel}
+                    </button>
+                </div>
+            </div>`;
+        $grid.append(card);
+    });
+
+    Domma.icons.scan();
+    Domma.effects.reveal('.plugin-card', { animation: 'fade', stagger: 60, duration: 400 });
+    Domma.effects.ripple('.btn-toggle-plugin');
+
+    // Toggle handler
+    $grid.on('click', '.btn-toggle-plugin', async function () {
+        const $btn     = $(this);
+        const name     = $btn.data('name');
+        const enabling = $btn.data('enabled') !== 1 && $btn.data('enabled') !== '1';
+
+        $btn.prop('disabled', true).text(enabling ? 'Enabling…' : 'Disabling…');
+        try {
+            await api.plugins.update(name, { enabled: enabling });
+            E.toast(`Plugin ${enabling ? 'enabled' : 'disabled'}. Restart the server to apply changes.`, { type: 'success' });
+            // Re-fetch and re-render
+            const updated = await api.plugins.list();
+            renderPlugins($container, updated);
+        } catch (err) {
+            E.toast(`Failed: ${err.message}`, { type: 'error' });
+            $btn.prop('disabled', false);
+        }
+    });
+}
+
+function escapeHtml(str) {
+    return String(str)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}