Plugin system: content vs system types, sidebar-aware UI, arrow visibility

- plugin.json type field: 'content' (sidebar) or 'system' (API only)
- Content-edit: label 'Plugins', hide section if layout has no sidebar
- Content-edit: disable checkboxes when no sidebar layout selected
- Content-edit: hide up arrow on first item, down arrow on last item
- PluginManager: isPluginViewable() checks type=system -> not viewable
- Admin plugins page: show Content/Systeem type badge
- HTMLBlock: add plugin.json with type=content
- Navigation: add type=content to config

admin/theme/default/views/pages/content-edit.twig

@@ -28,16 +28,16 @@
                     </select>
                 </div>
                 {% if availablePlugins is not empty %}
-                <div class="col-md-4">
+                <div class="col-md-4" id="plugin-section">
-                    <label class="form-label d-block">Zichtbare plugins (volgorde = sidebar volgorde)</label>
+                    <label class="form-label d-block">Plugins</label>
                     <ul class="list-group list-group-flush" id="plugin-order-list">
                         {% for plugin in selectedPlugins %}
                         <li class="list-group-item d-flex align-items-center justify-content-between px-2 py-1" data-plugin="{{ plugin }}">
                             <div class="form-check">
-                                <input type="checkbox" class="form-check-input" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" checked>
+                                <input type="checkbox" class="form-check-input plugin-checkbox" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off" checked>
                                 <label class="form-check-label" for="plugin-{{ plugin }}">{{ plugin }}</label>
                             </div>
-                            <div class="btn-group btn-group-sm">
+                            <div class="btn-group btn-group-sm plugin-arrows">
                                 <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-up" title="Omhoog"><i class="bi bi-arrow-up"></i></button>
                                 <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-down" title="Omlaag"><i class="bi bi-arrow-down"></i></button>
                             </div>
@@ -47,10 +47,10 @@
                         {% if plugin not in selectedPlugins %}
                         <li class="list-group-item d-flex align-items-center justify-content-between px-2 py-1" data-plugin="{{ plugin }}">
                             <div class="form-check">
-                                <input type="checkbox" class="form-check-input" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off">
+                                <input type="checkbox" class="form-check-input plugin-checkbox" id="plugin-{{ plugin }}" name="plugins[]" value="{{ plugin }}" autocomplete="off">
                                 <label class="form-check-label" for="plugin-{{ plugin }}">{{ plugin }}</label>
                             </div>
-                            <div class="btn-group btn-group-sm">
+                            <div class="btn-group btn-group-sm plugin-arrows">
                                 <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-up" title="Omhoog"><i class="bi bi-arrow-up"></i></button>
                                 <button type="button" class="btn btn-outline-secondary py-0 px-1 plugin-down" title="Omlaag"><i class="bi bi-arrow-down"></i></button>
                             </div>
@@ -88,8 +88,10 @@ document.addEventListener('DOMContentLoaded', function () {
     var backBtn = document.getElementById('back-btn');
     var filenameInput = document.getElementById('filename');
     var layoutSelect = document.getElementById('layout');
+    var pluginSection = document.getElementById('plugin-section');
     if (!backBtn) return;
 
+    var sidebarLayouts = {{ sidebarLayouts|json_encode|raw }};
     var changed = false;
 
     function markChanged() {
@@ -104,11 +106,36 @@ document.addEventListener('DOMContentLoaded', function () {
         filenameInput.addEventListener('input', markChanged);
     }
 
+    // Show/hide plugin section based on layout
+    function updatePluginVisibility() {
+        if (!layoutSelect || !pluginSection) return;
+        var hasSidebar = sidebarLayouts.indexOf(layoutSelect.value) !== -1;
+        pluginSection.style.display = hasSidebar ? '' : 'none';
+        // Disable checkboxes if no sidebar
+        pluginSection.querySelectorAll('.plugin-checkbox').forEach(function(cb) {
+            cb.disabled = !hasSidebar;
+        });
+    }
+
+    // Update arrow visibility — hide up on first, down on last
+    function updateArrows() {
+        if (!pluginList) return;
+        var items = pluginList.querySelectorAll('li[data-plugin]');
+        items.forEach(function(item, i) {
+            var upBtn = item.querySelector('.plugin-up');
+            var downBtn = item.querySelector('.plugin-down');
+            if (upBtn) upBtn.style.visibility = (i === 0) ? 'hidden' : '';
+            if (downBtn) downBtn.style.visibility = (i === items.length - 1) ? 'hidden' : '';
+        });
+    }
+
     // Update the layout value in the editor's frontmatter when the select changes
     if (layoutSelect) {
         layoutSelect.addEventListener('change', function () {
             var newLayout = this.value;
             var editor = document.getElementById('editor-textarea');
+            updatePluginVisibility();
+
             if (!editor) return;
 
             var cm = window.codeMirrorEditor;
@@ -117,7 +144,6 @@ document.addEventListener('DOMContentLoaded', function () {
             // Check if frontmatter exists
             var fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
             if (fmMatch) {
-                // Update existing layout line in frontmatter
                 var frontmatter = fmMatch[1];
                 if (/^layout:\s*.+$/m.test(frontmatter)) {
                     frontmatter = frontmatter.replace(/^layout:\s*.+$/m, 'layout: ' + newLayout);
@@ -126,7 +152,6 @@ document.addEventListener('DOMContentLoaded', function () {
                 }
                 content = content.replace(/^---\n([\s\S]*?)\n---/, '---\n' + frontmatter + '\n---');
             } else {
-                // No frontmatter yet — add one
                 content = '---\nlayout: ' + newLayout + '\n---\n\n' + content;
             }
 
@@ -160,17 +185,13 @@ document.addEventListener('DOMContentLoaded', function () {
                 pluginList.insertBefore(item, item.nextElementSibling.nextElementSibling);
                 markChanged();
             }
+            updateArrows();
         });
+    }
 
-        // On form submit, reorder the checkboxes to match the visual order
+    // Initialize
-        var form = document.getElementById('editor-form');
+    updatePluginVisibility();
-        if (form) {
+    updateArrows();
-            form.addEventListener('submit', function () {
-                // The DOM order of the <li> elements already determines the form submission order
-                // because the checkboxes are inside the <li> elements
-            });
-        }
-    }
 });
 </script>
 {% endblock %}

admin/theme/default/views/pages/plugins.twig

@@ -16,13 +16,16 @@
         <div class="card shadow-sm h-100">
             <div class="card-header d-flex justify-content-between align-items-center">
                 <span class="fw-bold">{{ plugin.name|default(plugin.name) }}</span>
+                <span>
+                    {% if plugin.type == 'system' %}<span class="badge bg-info">Systeem</span>{% else %}<span class="badge bg-primary">Content</span>{% endif %}
                     <span class="badge bg-{{ plugin.enabled ? 'success' : 'secondary' }}">{{ plugin.enabled ? 'Actief' : 'Inactief' }}</span>
+                </span>
             </div>
             <div class="card-body">
                 <p class="card-text text-muted mb-2">{{ plugin.description|default('Geen beschrijving') }}</p>
                 <p class="small text-muted mb-3">
-                    {% if plugin.version %}<span class="badge bg-info">v{{ plugin.version }}</span>{% endif %}
+                    {% if plugin.version %}<span class="badge bg-secondary">v{{ plugin.version }}</span>{% endif %}
-                    {% if plugin.author %}<span class="badge bg-secondary">{{ plugin.author }}</span>{% endif %}
+                    {% if plugin.author %}<span class="badge bg-light text-dark">{{ plugin.author }}</span>{% endif %}
                 </p>
             </div>
             <div class="card-footer bg-white">

cms/core/plugin/PluginManager.php

@@ -132,7 +132,13 @@ class PluginManager
     {
         if (method_exists($plugin, 'getConfig')) {
             $config = $plugin->getConfig();
-            return !isset($config['viewable']) || $config['viewable'] !== false;
+            if (isset($config['viewable']) && $config['viewable'] === false) {
+                return false;
+            }
+            // System plugins don't show in sidebar
+            if (isset($config['type']) && $config['type'] === 'system') {
+                return false;
+            }
         }
         return true;
     }

plugins/HTMLBlock/plugin.json

@@ -0,0 +1,7 @@
+{
+    "name": "HTMLBlock",
+    "version": "1.0.0",
+    "author": "CodePress",
+    "description": "Voorbeeld sidebar plugin met pagina info en quick navigation",
+    "type": "content"
+}

plugins/Navigation/Navigation.php

@@ -10,6 +10,7 @@ class Navigation
         $this->config = [
             'title' => 'Navigatie',
             'viewable' => true,
+            'type' => 'content',
         ];
     }
 

plugins/Navigation/plugin.json

@@ -2,5 +2,6 @@
     "name": "Navigation",
     "version": "1.0.0",
     "author": "CodePress",
-    "description": "Essentiële navigatie plugin voor handleidingen en content"
+    "description": "Essentiële navigatie plugin voor handleidingen en content",
+    "type": "content"
 }

public/admin.php

@@ -508,9 +508,10 @@ function handleContentEdit($auth, $config, $twig, $user, $csrf, $siteConfig): vo
         }
     }
 
-    // Get available plugins (must have plugin.json or <PluginName>.php)
+    // Get available content plugins (type=content in plugin.json, or no type = content)
     $pluginsDir = $config['plugins_dir'];
     $availablePlugins = [];
+    $sidebarLayouts = [];
     if (is_dir($pluginsDir)) {
         foreach (glob($pluginsDir . '*', GLOB_ONLYDIR) as $pluginDir) {
             $pluginName = basename($pluginDir);
@@ -518,11 +519,26 @@ function handleContentEdit($auth, $config, $twig, $user, $csrf, $siteConfig): vo
                 $hasJson = file_exists($pluginDir . '/plugin.json');
                 $hasPhp = file_exists($pluginDir . '/' . $pluginName . '.php');
                 if ($hasJson || $hasPhp) {
+                    // Check plugin type — only content plugins show in sidebar
+                    $pluginType = 'content';
+                    if ($hasJson) {
+                        $pj = json_decode(file_get_contents($pluginDir . '/plugin.json'), true);
+                        $pluginType = $pj['type'] ?? 'content';
+                    }
+                    if ($pluginType === 'content') {
                         $availablePlugins[] = $pluginName;
                     }
                 }
             }
         }
+    }
+
+    // Determine which layouts have a sidebar (based on theme twig files)
+    foreach ($themeLayouts as $key => $twigFile) {
+        if (strpos($key, 'sidebar') !== false) {
+            $sidebarLayouts[] = $key;
+        }
+    }
 
     $currentLang = extractLanguagePrefix($file);
     $route = 'content-edit';
@@ -541,6 +557,7 @@ function handleContentEdit($auth, $config, $twig, $user, $csrf, $siteConfig): vo
         'currentLayout' => $currentLayout ?: $themeDefaultLayout,
         'themeLayouts' => $themeLayouts,
         'themeDefaultLayout' => $themeDefaultLayout,
+        'sidebarLayouts' => $sidebarLayouts,
         'activeThemeName' => $activeThemeName,
         'availablePlugins' => $availablePlugins,
         'selectedPlugins' => $selectedPlugins,