From bb1e4c197a55102bfae60dd62311933a5364a4f4 Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Sat, 15 Nov 2025 11:54:06 +0100
Subject: [PATCH] Made presets collapsible

---
 src/Views/Settings/Admin.cshtml | 60 +++++++++++++++++++--------------
 1 file changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/Views/Settings/Admin.cshtml b/src/Views/Settings/Admin.cshtml
index 3a1fe68..5980139 100644
--- a/src/Views/Settings/Admin.cshtml
+++ b/src/Views/Settings/Admin.cshtml
@@ -12,7 +12,7 @@
     ViewData["Title"] = T["Users"];
 }
 
-<form id="updateSettings">
+<form id="updateSettings" class="mb-5" method="post" asp-controller="Settings" asp-action="Admin">
     <div class="row g-3">
         <h4 class="fw-bold">@T["General settings"]</h4>
         <div class="col-md-6">
@@ -44,11 +44,20 @@
             <label class="form-label" for="updateMaxDownloadableUserImageSize">@T["Max downloadable user image size"]</label>
             <input type="number" id="updateMaxDownloadableUserImageSize" name="MaxDownloadableUserImageSize" class="form-control" value="@Model.MaxDownloadableUserImageSize" />
         </div>
-        <div class="col-md-6 mt-3">
-            <h4 class="fw-bold">@T["Presets"]</h4>
-
-            @foreach (var preset in Model.Presets)
-            {
+    </div>
+    <h4 class="fw-bold mt-3">@T["Presets"]</h4>
+    <button class="btn btn-secondary mb-3" 
+        type="button" 
+        data-bs-toggle="collapse" 
+        data-bs-target="#presetsCollapse" 
+        aria-expanded="false" 
+        aria-controls="presetsCollapse">
+        @T["Show/Hide presets"]
+    </button>
+    <div class="row g-3 collapse" id="presetsCollapse">
+        @foreach (var preset in Model.Presets)
+        {
+            <div class="col-md-6">
                 <div class="border rounded p-3 mb-3" data-preset-id="@(preset.Key)">
                     <label class="form-label" for="Presets.@(preset.Key).Key">@T["Preset name"]</label>
                     <input class="form-control mb-3" id="Presets.@(preset.Key).Key" name="Presets.@(preset.Key).Key" value="@preset.Key"/>
@@ -80,15 +89,13 @@
                         </div>
                     </div>
                 </div>
-            }
-            <div class="col-md-4">
-                <button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button>
             </div>
+        }
+        <div class="col-md-12">
+            <button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button>
         </div>
-        <form id="updateSettings" method="post" asp-controller="Settings" asp-action="Admin">
-            <button type="submit" class="btn btn-warning">@T["Update"]</button>
-        </form>
     </div>
+    <button type="submit" class="btn btn-warning float-end">@T["Apply settings and update presets"]</button>
 </form>
 
 <script>
@@ -189,7 +196,7 @@
             const presetContainer = e.target.closest('.border.rounded.p-3.mb-3');
             if (!presetContainer) return;
 
-            const presetKey = presetContainer.getAttribute("data-preset-id"); //presetContainer.querySelector('input')?.value;
+            const presetKey = presetContainer.getAttribute("data-preset-id");
             if (!presetKey) return;
 
             // Container für Attribute suchen
@@ -242,7 +249,7 @@
 
     function addDeletePresetEventListener(button) {
         button.addEventListener('click', e => {
-            const presetContainer = e.target.closest('.border.rounded.p-3.mb-3');
+            const presetContainer = e.target.closest('.col-md-6');
             if (!presetContainer) return;
             presetContainer.remove();
         });
@@ -258,19 +265,20 @@
 
             // Preset-Block erstellen
             const presetDiv = document.createElement('div');
-            presetDiv.classList.add('border', 'rounded', 'p-3', 'mb-3');
-            presetDiv.setAttribute('data-preset-id', presetId);
+            presetDiv.classList.add('col-md-6');
             presetDiv.innerHTML = `
-                <label class="form-label" for="Presets.${presetId}.Key">@T["Preset name"]</label>
-                <input class="form-control mb-3" id="Presets.${presetId}.Key" name="Presets.${presetId}.Key" value=""/>
-                <label class="form-label">@T["Attributes"]</label>
-                <div class="attributes"></div>
-                <div class="row mb-4">
-                    <div class="col-md-4">
-                        <button type="button" class="btn btn-danger" data-type="deletePreset">Delete preset</button>
-                    </div>
-                    <div class="col-md-4 ms-auto">
-                        <button type="button" class="btn btn-primary" data-type="addAttribute">Add attribute</button>
+                <div class="border rounded p-3 mb-3" data-preset-id="${presetId}">
+                    <label class="form-label" for="Presets.${presetId}.Key">@T["Preset name"]</label>
+                    <input class="form-control mb-3" id="Presets.${presetId}.Key" name="Presets.${presetId}.Key" value=""/>
+                    <label class="form-label">@T["Attributes"]</label>
+                    <div class="attributes"></div>
+                    <div class="row mb-4">
+                        <div class="col-md-4">
+                            <button type="button" class="btn btn-danger" data-type="deletePreset">Delete preset</button>
+                        </div>
+                        <div class="col-md-4 ms-auto">
+                            <button type="button" class="btn btn-primary" data-type="addAttribute">Add attribute</button>
+                        </div>
                     </div>
                 </div>
             `;