From 6da8f80477199c2f8af0a6143024e8e8de7ddced Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Sat, 23 May 2026 14:31:36 +0100
Subject: [PATCH] feat(backup): tabbed location editor (Connection / Retention
 / Advanced)

The expanded location row was one long form. Split it into tabs so it opens
showing only the Connection fields. Retention moves from a stacked section
into its own tab, and the advanced overrides (URI/SSH port/append-only) get
their own tab instead of the inline disclosure from the previous pass.

Field grouping is metadata-driven: locFieldGroups partitions a type's fields
into Connection vs Advanced via the configs.json "advanced" flag (with
LOC_ADVANCED_SUFFIXES as the legacy fallback). Type changes rebuild both the
Connection and Advanced panels since advanced fields are type-dependent too.
Save still reads every field across all panels (hidden tabs stay in the DOM).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../libreportal/frontend/css/backup.css       |  55 +++---
 .../js/components/backup/backup-page.js       | 185 ++++++++++--------
 2 files changed, 126 insertions(+), 114 deletions(-)

diff --git a/containers/libreportal/frontend/css/backup.css b/containers/libreportal/frontend/css/backup.css
index ede4a82..047bed5 100755
--- a/containers/libreportal/frontend/css/backup.css
+++ b/containers/libreportal/frontend/css/backup.css
@@ -723,47 +723,48 @@
     border-top: 1px dashed rgba(var(--text-rgb), 0.08);
 }
 
-/* Full-width "Advanced" disclosure in the location editor's Connection
-   section. Reveals the advanced fields (URI override, SSH port, append-only). */
-.backup-loc-advanced-toggle {
+/* Tabbed location editor (Connection | Retention | Advanced). Splits the
+   formerly long single form into one panel per concern. */
+.backup-loc-tabs {
     display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    margin-top: 14px;
-    padding: 10px 12px;
-    background: rgba(var(--text-rgb), 0.03);
-    border: 1px solid rgba(var(--text-rgb), 0.08);
-    border-radius: 8px;
-    color: var(--text-primary);
+    gap: 4px;
+    border-bottom: 1px solid rgba(var(--text-rgb), 0.10);
+    margin-bottom: 16px;
+}
+
+.backup-loc-tab {
+    appearance: none;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    padding: 8px 14px;
+    color: rgba(var(--text-rgb), 0.6);
     font: inherit;
     font-size: 0.9rem;
     font-weight: 600;
     cursor: pointer;
-    transition: background 0.15s ease;
+    transition: color 0.15s ease, border-color 0.15s ease;
 }
 
-.backup-loc-advanced-toggle:hover {
-    background: rgba(var(--text-rgb), 0.06);
+.backup-loc-tab:hover {
+    color: var(--text-primary);
 }
 
-.backup-loc-advanced-chevron {
-    transition: transform 0.15s ease;
-    flex-shrink: 0;
+.backup-loc-tab.active {
+    color: var(--accent);
+    border-bottom-color: var(--accent);
 }
 
-.backup-loc-advanced-toggle.open .backup-loc-advanced-chevron {
-    transform: rotate(90deg);
-}
-
-.backup-loc-advanced {
-    margin-top: 12px;
-}
-
-.backup-loc-advanced[hidden] {
+.backup-loc-tab-panel[hidden] {
     display: none;
 }
 
+.backup-loc-tab-panel > .category-description {
+    margin-top: 0;
+    margin-bottom: 12px;
+}
+
 .backup-form-footer {
     display: flex;
     justify-content: flex-end;
diff --git a/containers/libreportal/frontend/js/components/backup/backup-page.js b/containers/libreportal/frontend/js/components/backup/backup-page.js
index 816f003..4b66dee 100644
--- a/containers/libreportal/frontend/js/components/backup/backup-page.js
+++ b/containers/libreportal/frontend/js/components/backup/backup-page.js
@@ -62,6 +62,11 @@ const BACKUP_LOC_FIELDS_BY_TYPE = {
     rclone: ['NAME', 'ENGINE', 'TYPE', 'URI', 'APPEND_ONLY']
 };
 
+// Suffixes that live in the editor's "Advanced" tab. configs.json can flag
+// more via a **ADVANCED** comment marker; this set keeps the known overrides
+// advanced even on legacy location.configs that predate the marker.
+const LOC_ADVANCED_SUFFIXES = new Set(['URI', 'SSH_PORT', 'APPEND_ONLY']);
+
 function backupRetentionDetectPreset(values, includeInherit = false) {
     const norm = (v) => (v == null ? '' : String(v).trim());
     for (const [key, p] of Object.entries(BACKUP_RETENTION_PRESETS)) {
@@ -198,15 +203,19 @@ class BackupPage {
                 return;
             }
 
-            const advToggle = e.target.closest('[data-action="toggle-loc-advanced"]');
-            if (advToggle) {
-                const sec = document.getElementById(advToggle.dataset.target);
-                if (sec) {
-                    const show = sec.hasAttribute('hidden');
-                    sec.toggleAttribute('hidden', !show);
-                    advToggle.setAttribute('aria-expanded', show ? 'true' : 'false');
-                    advToggle.classList.toggle('open', show);
-                }
+            const locTab = e.target.closest('[data-action="loc-tab"]');
+            if (locTab) {
+                const tabIdx = locTab.dataset.loc;
+                const tabName = locTab.dataset.tab;
+                const root = locTab.closest('.backup-location-config') || document;
+                root.querySelectorAll(`[data-action="loc-tab"][data-loc="${tabIdx}"]`).forEach(b => {
+                    const on = b === locTab;
+                    b.classList.toggle('active', on);
+                    b.setAttribute('aria-selected', on ? 'true' : 'false');
+                });
+                root.querySelectorAll(`[data-tab-panel][data-loc="${tabIdx}"]`).forEach(p => {
+                    p.toggleAttribute('hidden', p.dataset.tabPanel !== tabName);
+                });
                 return;
             }
 
@@ -659,7 +668,7 @@ class BackupPage {
 
     renderLocationDetailsBody(l) {
         const idx = l.idx;
-        const connectionFields = BACKUP_LOC_FIELDS_BY_TYPE[l.type] || BACKUP_LOC_FIELDS_BY_TYPE.local;
+        const groups = this.locFieldGroups(idx, l.type);
         const retentionValues = {
             last:    l.custom_retention ? (l.keep_last    || '') : '',
             daily:   l.custom_retention ? (l.keep_daily   || '') : '',
@@ -668,34 +677,37 @@ class BackupPage {
             yearly:  l.custom_retention ? (l.keep_yearly  || '') : ''
         };
 
+        const tab = (id, label) => `
+            <button type="button" class="backup-loc-tab${id === 'connection' ? ' active' : ''}" data-action="loc-tab" data-loc="${idx}" data-tab="${id}" role="tab" aria-selected="${id === 'connection'}">${label}</button>`;
+        const advancedBody = groups.advanced.length
+            ? this.renderLocFields(idx, groups.advanced, l)
+            : `<div class="backup-empty-state">No advanced options for this location type.</div>`;
+
         return `
             <div class="config-category backup-location-config" data-section="location-${idx}">
-                <div class="domains-wrapper">
-                    <div class="domains-header">
-                        <div>
-                            <h3>Connection</h3>
-                            <p class="category-description">How LibrePortal connects to this storage location.</p>
-                        </div>
-                    </div>
-                    <div class="domains-divider"></div>
+                <div class="backup-loc-tabs" role="tablist">
+                    ${tab('connection', 'Connection')}
+                    ${tab('retention', 'Retention')}
+                    ${tab('advanced', 'Advanced')}
+                </div>
+                <div class="backup-loc-tab-panel" data-tab-panel="connection" data-loc="${idx}">
+                    <p class="category-description">How LibrePortal connects to this storage location.</p>
                     <div class="backup-location-connection-fields" id="backup-location-${idx}-connection">
-                        ${this.renderLocFields(idx, connectionFields, l)}
+                        ${this.renderLocFields(idx, groups.connection, l)}
                     </div>
                 </div>
-            </div>
-            <div class="config-category backup-location-config">
-                <div class="domains-wrapper">
-                    <div class="domains-header">
-                        <div>
-                            <h3>Retention</h3>
-                            <p class="category-description">When to delete old backups from this location.</p>
-                        </div>
-                    </div>
-                    <div class="domains-divider"></div>
+                <div class="backup-loc-tab-panel" data-tab-panel="retention" data-loc="${idx}" hidden>
+                    <p class="category-description">When to delete old backups from this location.</p>
                     <div id="backup-location-${idx}-retention">
                         ${this.formRetention(`CFG_BACKUP_LOC_${idx}_`, retentionValues, true)}
                     </div>
                 </div>
+                <div class="backup-loc-tab-panel" data-tab-panel="advanced" data-loc="${idx}" hidden>
+                    <p class="category-description">Overrides most locations don't need.</p>
+                    <div id="backup-location-${idx}-advanced">
+                        ${advancedBody}
+                    </div>
+                </div>
             </div>
             <div class="backup-location-actions">
                 <button class="backup-primary-btn" data-action="save-location" data-loc="${idx}">
@@ -750,15 +762,27 @@ class BackupPage {
     }
 
     refreshInlineTypeFields(idx, type) {
-        const container = document.getElementById(`backup-location-${idx}-connection`);
-        if (!container) return;
         const loc = (this.locations?.locations || []).find(l => l.idx === idx) || {};
-        const suffixes = BACKUP_LOC_FIELDS_BY_TYPE[type] || BACKUP_LOC_FIELDS_BY_TYPE.local;
-        container.innerHTML = this.renderLocFields(idx, suffixes, { ...loc, type });
-        this.tagFieldsForSave(container);
-        this.filterEngineSelect(container, type, loc.engine);
-        this.applySshAuthVisibility(container);
-        this.applyPathModeVisibility(container);
+        const groups = this.locFieldGroups(idx, type);
+
+        const conn = document.getElementById(`backup-location-${idx}-connection`);
+        if (conn) {
+            conn.innerHTML = this.renderLocFields(idx, groups.connection, { ...loc, type });
+            this.tagFieldsForSave(conn);
+            this.filterEngineSelect(conn, type, loc.engine);
+            this.applySshAuthVisibility(conn);
+            this.applyPathModeVisibility(conn);
+        }
+
+        // The Advanced tab's fields are type-dependent too (URI override only
+        // applies to some types), so rebuild it alongside the Connection tab.
+        const adv = document.getElementById(`backup-location-${idx}-advanced`);
+        if (adv) {
+            adv.innerHTML = groups.advanced.length
+                ? this.renderLocFields(idx, groups.advanced, { ...loc, type })
+                : `<div class="backup-empty-state">No advanced options for this location type.</div>`;
+            this.tagFieldsForSave(adv);
+        }
         this.enhanceEngineDetailsButton();
     }
 
@@ -1426,62 +1450,49 @@ class BackupPage {
             KEEP_YEARLY: loc.keep_yearly
         };
 
-        // Field metadata now comes from configs.json (window.configData): the
-        // generator emits CFG_BACKUP_LOC_N_* titles/descriptions plus an
-        // "advanced" flag. BACKUP_LOC_FIELD_DEFS stays only as a fallback for a
-        // sparse location.config that doesn't describe a field yet.
-        const advancedFallback = new Set(['URI', 'SSH_PORT', 'APPEND_ONLY']);
-        const fieldMeta = (suffix) => {
-            const key = `CFG_BACKUP_LOC_${idx}_${suffix}`;
-            const cfg = window.configData?.config?.[key] || {};
-            const def = BACKUP_LOC_FIELD_DEFS[suffix] || {};
-            // Fallback set keeps these advanced even on legacy locations whose
-            // location.config predates the **ADVANCED** marker; configData can
-            // additionally flag others.
-            const advanced = advancedFallback.has(suffix) || cfg.advanced === true;
-            return {
-                key,
-                exists: !!(cfg.title || cfg.description || BACKUP_LOC_FIELD_DEFS[suffix]),
-                title: cfg.title || def.title || suffix,
-                description: cfg.description ?? def.description ?? '',
-                advanced
-            };
-        };
-
-        const renderField = (suffix) => {
-            const m = fieldMeta(suffix);
+        // Field metadata comes from configs.json (window.configData) via
+        // locFieldMeta; the basic/advanced split is decided by the caller, which
+        // renders each group into its own tab (Connection vs Advanced).
+        let html = '<div class="config-fields">';
+        for (const suffix of suffixes) {
+            const m = this.locFieldMeta(idx, suffix);
+            if (!m.exists) continue;
             const value = (locValueLookup[suffix] ?? '').toString();
-            return ConfigShared.generateField(`config-${m.key}`, m.key, value, m.title, m.description, {}, {});
-        };
+            html += ConfigShared.generateField(`config-${m.key}`, m.key, value, m.title, m.description, {}, {});
+        }
+        html += '</div>';
+        return html;
+    }
 
-        const basic = [];
+    /* Resolve a location field's metadata. Source of truth is configs.json
+       (window.configData) — titles/descriptions/options + a per-field "advanced"
+       flag; BACKUP_LOC_FIELD_DEFS is the fallback for sparse location.configs.
+       LOC_ADVANCED_SUFFIXES keeps the known overrides advanced even on legacy
+       locations whose config predates the **ADVANCED** marker. */
+    locFieldMeta(idx, suffix) {
+        const key = `CFG_BACKUP_LOC_${idx}_${suffix}`;
+        const cfg = window.configData?.config?.[key] || {};
+        const def = BACKUP_LOC_FIELD_DEFS[suffix] || {};
+        return {
+            key,
+            exists: !!(cfg.title || cfg.description || BACKUP_LOC_FIELD_DEFS[suffix]),
+            title: cfg.title || def.title || suffix,
+            description: cfg.description ?? def.description ?? '',
+            advanced: LOC_ADVANCED_SUFFIXES.has(suffix) || cfg.advanced === true
+        };
+    }
+
+    /* Split a type's fields into the Connection tab vs the Advanced tab. */
+    locFieldGroups(idx, type) {
+        const suffixes = BACKUP_LOC_FIELDS_BY_TYPE[type] || BACKUP_LOC_FIELDS_BY_TYPE.local;
+        const connection = [];
         const advanced = [];
         for (const suffix of suffixes) {
-            const m = fieldMeta(suffix);
+            const m = this.locFieldMeta(idx, suffix);
             if (!m.exists) continue;
-            (m.advanced ? advanced : basic).push(suffix);
+            (m.advanced ? advanced : connection).push(suffix);
         }
-
-        // Basics stay in the .config-fields grid (same as /config). Advanced
-        // fields (URI override, SSH port, append-only) tuck behind a full-width
-        // disclosure so the common case opens simple.
-        let html = '<div class="config-fields">';
-        html += basic.map(renderField).join('');
-        html += '</div>';
-
-        if (advanced.length) {
-            const secId = `backup-loc-${idx}-advanced`;
-            html += `
-                <button type="button" class="backup-loc-advanced-toggle" data-action="toggle-loc-advanced" data-target="${secId}" aria-expanded="false" aria-controls="${secId}">
-                    <svg class="backup-loc-advanced-chevron" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
-                    <span>Advanced</span>
-                </button>
-                <div class="config-fields backup-loc-advanced" id="${secId}" hidden>
-                    ${advanced.map(renderField).join('')}
-                </div>
-            `;
-        }
-        return html;
+        return { connection, advanced };
     }
 
     tagFieldsForSave(container) {