Make plugin cards always collapsible, start collapsed

- Card header is clickable to expand/collapse regardless of enabled state
- Cards start collapsed by default so the page is clean
- Enable/disable toggle only saves the setting, doesn't control collapse
- stopPropagation on the switch prevents clicking it from also
  toggling the collapse

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: compscidr

themes/default/templates/admin_settings.html

@@ -42,15 +42,15 @@ <h1>Site Settings</h1>
     {{ $values := .CurrentValues }}
     {{ $enabled := index $values "enabled" }}
     <div class="card mb-4">
-        <div class="card-header d-flex justify-content-between align-items-center">
+        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#plugin-body-{{ $pluginName }}">
             <span><strong>Plugin: {{ .DisplayName }}</strong> <span class="text-muted">({{ .PluginName }})</span></span>
-            <div class="form-check form-switch mb-0">
+            <div class="form-check form-switch mb-0" onclick="event.stopPropagation();">
                 <input class="form-check-input plugin-enable-toggle" type="checkbox" id="{{ $pluginName }}.enabled" name="{{ $pluginName }}.enabled" data-plugin="{{ $pluginName }}" {{ if eq $enabled "true" }}checked{{ end }}
                     onchange="togglePluginEnabled(this);">
                 <label class="form-check-label" for="{{ $pluginName }}.enabled">Enabled</label>
             </div>
         </div>
-        <div class="collapse {{ if eq $enabled "true" }}show{{ end }}" id="plugin-body-{{ $pluginName }}">
+        <div class="collapse" id="plugin-body-{{ $pluginName }}">
             <div class="card-body">
                 <form class="plugin-settings-form" data-plugin="{{ $pluginName }}">
                     {{ range .Settings }}

themes/forest/templates/admin_settings.html

@@ -42,15 +42,15 @@ <h1>Site Settings</h1>
     {{ $values := .CurrentValues }}
     {{ $enabled := index $values "enabled" }}
     <div class="card mb-4">
-        <div class="card-header d-flex justify-content-between align-items-center">
+        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#plugin-body-{{ $pluginName }}">
             <span><strong>Plugin: {{ .DisplayName }}</strong> <span class="text-muted">({{ .PluginName }})</span></span>
-            <div class="form-check form-switch mb-0">
+            <div class="form-check form-switch mb-0" onclick="event.stopPropagation();">
                 <input class="form-check-input plugin-enable-toggle" type="checkbox" id="{{ $pluginName }}.enabled" name="{{ $pluginName }}.enabled" data-plugin="{{ $pluginName }}" {{ if eq $enabled "true" }}checked{{ end }}
                     onchange="togglePluginEnabled(this);">
                 <label class="form-check-label" for="{{ $pluginName }}.enabled">Enabled</label>
             </div>
         </div>
-        <div class="collapse {{ if eq $enabled "true" }}show{{ end }}" id="plugin-body-{{ $pluginName }}">
+        <div class="collapse" id="plugin-body-{{ $pluginName }}">
             <div class="card-body">
                 <form class="plugin-settings-form" data-plugin="{{ $pluginName }}">
                     {{ range .Settings }}

themes/minimal/templates/admin_settings.html

@@ -42,15 +42,15 @@ <h1>Site Settings</h1>
     {{ $values := .CurrentValues }}
     {{ $enabled := index $values "enabled" }}
     <div class="card mb-4">
-        <div class="card-header d-flex justify-content-between align-items-center">
+        <div class="card-header d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#plugin-body-{{ $pluginName }}">
             <span><strong>Plugin: {{ .DisplayName }}</strong> <span class="text-muted">({{ .PluginName }})</span></span>
-            <div class="form-check form-switch mb-0">
+            <div class="form-check form-switch mb-0" onclick="event.stopPropagation();">
                 <input class="form-check-input plugin-enable-toggle" type="checkbox" id="{{ $pluginName }}.enabled" name="{{ $pluginName }}.enabled" data-plugin="{{ $pluginName }}" {{ if eq $enabled "true" }}checked{{ end }}
                     onchange="togglePluginEnabled(this);">
                 <label class="form-check-label" for="{{ $pluginName }}.enabled">Enabled</label>
             </div>
         </div>
-        <div class="collapse {{ if eq $enabled "true" }}show{{ end }}" id="plugin-body-{{ $pluginName }}">
+        <div class="collapse" id="plugin-body-{{ $pluginName }}">
             <div class="card-body">
                 <form class="plugin-settings-form" data-plugin="{{ $pluginName }}">
                     {{ range .Settings }}

www/js/admin-script.js

@@ -234,13 +234,6 @@ function rollbackRevision(postId, revisionId) {
 function togglePluginEnabled(checkbox) {
     var pluginName = $(checkbox).data("plugin");
     var enabled = checkbox.checked ? "true" : "false";
-    var $body = $("#plugin-body-" + pluginName);
-
-    if (checkbox.checked) {
-        $body.collapse("show");
-    } else {
-        $body.collapse("hide");
-    }
 
     // Save the enabled setting immediately
     var settings = [{"key": pluginName + ".enabled", "value": enabled, "type": "text"}];