From 3bac76b3fbbe5d6eb43b94953043b24e1bc5591e Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Fri, 22 May 2026 14:46:45 +0100
Subject: [PATCH] fix(webui): tag only the default Backup style preset and
 float it to top
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The retention "Backup style" dropdown hardcoded "(default)" into two preset
labels, so both the global and per-location selectors showed two "(default)"
tags, and the global selector listed "Inherit global retention" — which has
nothing to inherit at the global level.

Apply "(default)" dynamically to the scope's actual default (self-hosting
globally, inherit-global per-location) via a shared retentionPresetOptions
helper that also floats that option to the top. All presets stay in the list;
inherit-global remains omitted from the global scope.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../js/components/backup/backup-page.js       | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/containers/libreportal/frontend/js/components/backup/backup-page.js b/containers/libreportal/frontend/js/components/backup/backup-page.js
index c11ae2f..668094f 100644
--- a/containers/libreportal/frontend/js/components/backup/backup-page.js
+++ b/containers/libreportal/frontend/js/components/backup/backup-page.js
@@ -12,8 +12,8 @@ const BACKUP_RETENTION_PRESETS = {
 };
 
 const BACKUP_RETENTION_PRESET_META = {
-    'inherit-global': { label: 'Inherit global retention (default)', hint: 'Use whatever the Configuration tab specifies. Pick something else here only when this location needs a different policy.' },
-    'self-hosting':   { label: 'Self-hosting (default)',             hint: '30 days of daily backups. Plenty for a homelab — covers accidental deletes and app screw-ups.' },
+    'inherit-global': { label: 'Inherit global retention',           hint: 'Use whatever the Configuration tab specifies. Pick something else here only when this location needs a different policy.' },
+    'self-hosting':   { label: 'Self-hosting',                       hint: '30 days of daily backups. Plenty for a homelab — covers accidental deletes and app screw-ups.' },
     'personal':       { label: 'Personal',                           hint: '30 days of daily backups plus 6 monthly snapshots. Good for personal data where "what did this look like last summer" matters.' },
     'enterprise':     { label: 'Enterprise',                         hint: '30 daily + 12 monthly + 5 yearly. Compliance-style retention with multi-year history.' },
     'custom':         { label: 'Custom…',                            hint: 'Define each retention tier yourself.' }
@@ -937,9 +937,7 @@ class BackupPage {
 
         const preset = backupRetentionDetectPreset(readVals());
         const meta = BACKUP_RETENTION_PRESET_META[preset];
-        const presetOptions = Object.entries(BACKUP_RETENTION_PRESET_META)
-            .map(([k, v]) => `<option value="${k}" ${k === preset ? 'selected' : ''}>${this.escape(v.label)}</option>`)
-            .join('');
+        const presetOptions = this.retentionPresetOptions(preset, false);
 
         const block = document.createElement('div');
         block.className = 'backup-retention-preset-block';
@@ -980,6 +978,23 @@ class BackupPage {
         });
     }
 
+    /* Build the <option> list for a "Backup style" dropdown. The scope's
+       default preset is tagged "(default)" and floated to the top; the rest
+       follow in declared order. inherit-global only makes sense per-location
+       (there's nothing to inherit at the global level), so it's omitted when
+       includeInherit is false. */
+    retentionPresetOptions(selected, includeInherit = false) {
+        const defaultKey = includeInherit ? 'inherit-global' : 'self-hosting';
+        const keys = Object.keys(BACKUP_RETENTION_PRESET_META)
+            .filter(k => k !== 'inherit-global' || includeInherit);
+        const ordered = [defaultKey, ...keys.filter(k => k !== defaultKey)];
+        return ordered.map(k => {
+            const base = BACKUP_RETENTION_PRESET_META[k].label;
+            const label = k === defaultKey ? `${base} (default)` : base;
+            return `<option value="${k}" ${k === selected ? 'selected' : ''}>${this.escape(label)}</option>`;
+        }).join('');
+    }
+
     /* Retention preset dropdown + hidden underlying fields.
        `prefix` is the CFG name prefix, e.g. 'CFG_BACKUP_' or 'CFG_BACKUP_LOC_3_'.
        When `includeInherit` is true (per-location scope), an "Inherit global"
@@ -990,10 +1005,7 @@ class BackupPage {
     formRetention(prefix, values, includeInherit = false) {
         const preset = backupRetentionDetectPreset(values, includeInherit);
         const meta = BACKUP_RETENTION_PRESET_META[preset];
-        const presetOptions = Object.entries(BACKUP_RETENTION_PRESET_META)
-            .filter(([k]) => k !== 'inherit-global' || includeInherit)
-            .map(([k, v]) => `<option value="${k}" ${k === preset ? 'selected' : ''}>${this.escape(v.label)}</option>`)
-            .join('');
+        const presetOptions = this.retentionPresetOptions(preset, includeInherit);
 
         const customRetentionHidden = includeInherit
             ? `<input type="hidden" name="${prefix}CUSTOM_RETENTION" value="${preset === 'inherit-global' ? 'false' : 'true'}" data-backup-field>`