From 1cc4b74b2e96d1d6a8342597b51f1ecd9206da20 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Sat, 23 May 2026 15:14:47 +0100
Subject: [PATCH] style(backup): show Type before Name in the location editor
 and add dialog
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Type is the choice that determines which other fields appear, so it should be
the first thing you pick; Name is just a label. Reorder the Connection-tab
fields (and the Add-location dialog) to Type → Name.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../js/components/backup/backup-page.js       | 21 +++++++++++--------
 1 file changed, 12 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 ec67c31..e139cd3 100644
--- a/containers/libreportal/frontend/js/components/backup/backup-page.js
+++ b/containers/libreportal/frontend/js/components/backup/backup-page.js
@@ -51,15 +51,18 @@ const BACKUP_LOC_FIELD_DEFS = {
     KEEP_YEARLY:      { title: 'Keep yearly',                         description: 'One snapshot per year for this many years.' }
 };
 
+// Type leads each list: it's the choice that shapes the rest of the form, so
+// it renders before the friendly Name. ENGINE stays here but is filtered into
+// the Advanced tab by locFieldGroups.
 const BACKUP_LOC_FIELDS_BY_TYPE = {
-    local:  ['NAME', 'ENGINE', 'TYPE', 'PATH_MODE', 'PATH', 'APPEND_ONLY'],
-    sftp:   ['NAME', 'ENGINE', 'TYPE', 'SSH_USER', 'SSH_HOST', 'SSH_PORT', 'SSH_PATH', 'SSH_AUTH', 'SSH_PASS', 'URI', 'APPEND_ONLY'],
-    rest:   ['NAME', 'ENGINE', 'TYPE', 'URI', 'APPEND_ONLY'],
-    s3:     ['NAME', 'ENGINE', 'TYPE', 'URI', 'S3_ACCESS_KEY', 'S3_SECRET_KEY', 'APPEND_ONLY'],
-    b2:     ['NAME', 'ENGINE', 'TYPE', 'URI', 'B2_ACCOUNT_ID', 'B2_ACCOUNT_KEY', 'APPEND_ONLY'],
-    gs:     ['NAME', 'ENGINE', 'TYPE', 'URI', 'APPEND_ONLY'],
-    azure:  ['NAME', 'ENGINE', 'TYPE', 'URI', 'APPEND_ONLY'],
-    rclone: ['NAME', 'ENGINE', 'TYPE', 'URI', 'APPEND_ONLY']
+    local:  ['TYPE', 'NAME', 'ENGINE', 'PATH_MODE', 'PATH', 'APPEND_ONLY'],
+    sftp:   ['TYPE', 'NAME', 'ENGINE', 'SSH_USER', 'SSH_HOST', 'SSH_PORT', 'SSH_PATH', 'SSH_AUTH', 'SSH_PASS', 'URI', 'APPEND_ONLY'],
+    rest:   ['TYPE', 'NAME', 'ENGINE', 'URI', 'APPEND_ONLY'],
+    s3:     ['TYPE', 'NAME', 'ENGINE', 'URI', 'S3_ACCESS_KEY', 'S3_SECRET_KEY', 'APPEND_ONLY'],
+    b2:     ['TYPE', 'NAME', 'ENGINE', 'URI', 'B2_ACCOUNT_ID', 'B2_ACCOUNT_KEY', 'APPEND_ONLY'],
+    gs:     ['TYPE', 'NAME', 'ENGINE', 'URI', 'APPEND_ONLY'],
+    azure:  ['TYPE', 'NAME', 'ENGINE', 'URI', 'APPEND_ONLY'],
+    rclone: ['TYPE', 'NAME', 'ENGINE', 'URI', 'APPEND_ONLY']
 };
 
 // Suffixes that live in the editor's "Advanced" tab. configs.json can flag
@@ -1541,7 +1544,6 @@ class BackupPage {
         if (!modal || !body) return;
         body.innerHTML = `
             <div class="backup-form-grid">
-                ${this.formInput('__add_name', 'Friendly name', '', 'text', 'e.g. Office NAS')}
                 ${this.formSelect('__add_type', 'Type', 'local', [
                     ['local',  'Local / mounted path'],
                     ['sftp',   'SFTP'],
@@ -1552,6 +1554,7 @@ class BackupPage {
                     ['azure',  'Azure'],
                     ['rclone', 'rclone']
                 ])}
+                ${this.formInput('__add_name', 'Friendly name', '', 'text', 'e.g. Office NAS')}
             </div>
             <p class="backup-card-hint" style="margin-top:12px">The location starts disabled — fill in its connection details on the next screen, then toggle Enabled.</p>
         `;