From fe1329985fa311a6b5ecbe2ec821d9274bc892d3 Mon Sep 17 00:00:00 2001
From: LD-Reborn <lucretia.dietz@gmx.de>
Date: Sat, 15 Nov 2025 12:26:01 +0100
Subject: [PATCH] Improved Admin.cshtml preset collapsing

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

diff --git a/src/Views/Settings/Admin.cshtml b/src/Views/Settings/Admin.cshtml
index 5980139..c6d42d4 100644
--- a/src/Views/Settings/Admin.cshtml
+++ b/src/Views/Settings/Admin.cshtml
@@ -12,7 +12,7 @@
     ViewData["Title"] = T["Users"];
 }
 
-<form id="updateSettings" class="mb-5" method="post" asp-controller="Settings" asp-action="Admin">
+<form id="updateSettings" style="margin-bottom: 4rem !important" 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">
@@ -45,15 +45,18 @@
             <input type="number" id="updateMaxDownloadableUserImageSize" name="MaxDownloadableUserImageSize" class="form-control" value="@Model.MaxDownloadableUserImageSize" />
         </div>
     </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="mt-3 p-2 bg border rounded d-flex justify-content-between align-items-center"
+        data-bs-toggle="collapse"
+        data-bs-target="#presetsCollapse"
+        style="cursor: pointer;">
+
+        <h4 class="fw-bold m-0">@T["Presets"]</h4>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+            viewBox="0 0 16 16" class="chevron-svg">
+            <path fill-rule="evenodd"
+                d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+        </svg>
+    </div>
     <div class="row g-3 collapse" id="presetsCollapse">
         @foreach (var preset in Model.Presets)
         {
@@ -65,37 +68,37 @@
                     @foreach (var attr in preset.Value.Attribute)
                     {
                         <div class="row mb-2" data-type="attribute">
-                            <div class="col-md-3">
+                            <div class="col-md-3 mt-2">
                                 <input class="form-control"
                                     name="Presets.@(preset.Key).Attribute.@(attr.Key).Key"
                                     value="@attr.Key" placeholder="@T["Name"]" aria-label="@T["Name"]" />
                             </div>
-                            <div class="col-md-5">
+                            <div class="col-md-5 mt-2">
                                 <input class="form-control"
                                     name="Presets.@(preset.Key).Attribute.@(attr.Key).Value"
                                     value="@attr.Value" placeholder="@T["Value"]" aria-label="@T["Value"]" />
                             </div>
-                            <div class="col-md-4">
+                            <div class="col-md-4 mt-2">
                                 <button type="button" class="btn btn-danger" data-type="deleteAttribute">@T["Delete attribute"]</button>
                             </div>
                         </div>
                     }
-                    <div class="row mb-4">
+                    <div class="row mb-2">
                         <div class="col-md-4">
                             <button type="button" class="btn btn-danger" data-type="deletePreset">@T["Delete preset"]</button>
                         </div>
-                        <div class="col-md-4 ms-auto">
+                        <div class="col-md-4 ms-auto mt-2">
                             <button type="button" class="btn btn-primary" data-type="addAttribute">@T["Add attribute"]</button>
                         </div>
                     </div>
                 </div>
             </div>
         }
-        <div class="col-md-12">
+        <div class="col-md-12 mt-2">
             <button type="button" class="btn btn-primary" data-type="addPreset">@T["Add preset"]</button>
         </div>
     </div>
-    <button type="submit" class="btn btn-warning float-end">@T["Apply settings and update presets"]</button>
+    <button type="submit" class="btn btn-warning float-end mt-3">@T["Apply settings and update presets"]</button>
 </form>
 
 <script>
@@ -175,6 +178,14 @@
         presetContainer.querySelector('.attributes').appendChild(row);
     }
 
+    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(toggler => {
+        toggler.addEventListener('click', () => {
+            const icon = toggler.querySelector('.chevron-svg');
+            icon.classList.toggle('rotate');
+            icon.parentElement.classList.toggle("no-bottom-border");
+        });
+    });
+
     document.querySelectorAll('button[data-type="addAttribute"]').forEach(btn => {
         addAddAttributeEventListener(btn);
     });
@@ -295,3 +306,18 @@
         });
     }
 </script>
+
+<style defer>
+    .chevron-svg {
+        transition: transform 0.2s ease;
+    }
+
+    .chevron-svg.rotate {
+        transform: rotate(180deg);
+    }
+
+    .no-bottom-border {
+        border-bottom: none !important;
+        border-radius: 0.5rem 0.5rem 0 0 !important;
+    }
+</style>
\ No newline at end of file