From afaa43de36a7e0554f2cea5acad27aed1a14c101 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Fri, 22 May 2026 11:41:53 +0100
Subject: [PATCH] feat(config): add section dividers to the config form

Add a thin divider above the Save/Reset buttons, and one at the top of
#advanced-sections so a line appears between the "Show Advanced Options"
toggle and the advanced fields only when they're revealed. Shared config
renderer, so it applies to every config category (backup included).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/config.css        | 11 +++++++++++
 .../frontend/js/components/config/config-manager.js   |  2 +-
 .../frontend/js/components/config/config-utils.js     |  4 ++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/containers/libreportal/frontend/css/config.css b/containers/libreportal/frontend/css/config.css
index 7da081e..ea1031f 100644
--- a/containers/libreportal/frontend/css/config.css
+++ b/containers/libreportal/frontend/css/config.css
@@ -343,6 +343,17 @@
   margin-top: 0px;
 }
 
+/* Thin horizontal rule that separates the config form's sections — one sits
+   above the Save/Reset buttons, and one at the top of #advanced-sections so a
+   line appears between the "Show Advanced Options" toggle and the advanced
+   fields only when they're revealed. */
+.config-divider {
+  height: 0;
+  border: none;
+  border-top: 1px solid var(--border-color, rgba(var(--text-rgb), 0.12));
+  margin: 24px 0;
+}
+
 .git-master-toggle .master-toggle {
   display: flex;
   align-items: center;
diff --git a/containers/libreportal/frontend/js/components/config/config-manager.js b/containers/libreportal/frontend/js/components/config/config-manager.js
index 4f1ce6d..83f23ab 100755
--- a/containers/libreportal/frontend/js/components/config/config-manager.js
+++ b/containers/libreportal/frontend/js/components/config/config-manager.js
@@ -144,7 +144,7 @@ if (typeof window.ConfigManager === 'undefined') {
               '</div>' +
             '</div>';
 
-          configSection.innerHTML = headerHTML + '<form id="config-form" class="config-form">' + formHTML + '<div class="config-actions">' +
+          configSection.innerHTML = headerHTML + '<form id="config-form" class="config-form">' + formHTML + '<div class="config-divider"></div><div class="config-actions">' +
             '<button type="submit" class="btn btn-primary">' +
               '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
                 '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>' +
diff --git a/containers/libreportal/frontend/js/components/config/config-utils.js b/containers/libreportal/frontend/js/components/config/config-utils.js
index 91223cc..b0943d5 100755
--- a/containers/libreportal/frontend/js/components/config/config-utils.js
+++ b/containers/libreportal/frontend/js/components/config/config-utils.js
@@ -53,6 +53,10 @@ class ConfigUtils {
     // .is-advanced .domains-header h3::after in config.css).
     if (advancedSubcategories.length > 0) {
       formHTML += '<div id="advanced-sections" class="advanced-sections" style="display: none;">';
+      // Divider between the "Show Advanced Options" toggle and the advanced
+      // fields. It lives inside #advanced-sections so it only appears once the
+      // user reveals them.
+      formHTML += '<div class="config-divider"></div>';
 
       for (const subcategoryName of advancedSubcategories) {
         const subcategoryData = configData[subcategoryName];