From 45ba47f772f3b6b3a5c68d239589a6668c4a64f8 Mon Sep 17 00:00:00 2001
From: r-zakarya <82443831+r-zakarya@users.noreply.github.com>
Date: Fri, 10 Jul 2026 16:53:45 +0100
Subject: [PATCH] feat(settings): keep backup pwd on disable, dedicated pwd
 button, tab icons

Auto-backup no longer wipes the stored password when disabled, so
re-enabling reuses it silently. A dedicated "Set/Change backup password"
button (mirrors sync) owns the password, with a warning status when
unset. Corrected the stale hint that claimed the backup pwd was derived
from the master password. Added icons to each settings tab.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 css/style.css                    |   2 ++
 delphi-backend/assets/assets.res | Bin 726360 -> 729216 bytes
 index.html                       |  20 +++++++++------
 js/app.backup.js                 |  41 ++++++++++++++++++++++---------
 js/app.js                        |   1 +
 5 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/css/style.css b/css/style.css
index cb0eac3..b7bf704 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2198,10 +2198,12 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
     flex: 0 0 auto; border-right: 1px solid var(--border); overflow-y: auto;
 }
 .settings-tab {
+    display: flex; align-items: center; gap: 8px;
     text-align: left; width: 100%; padding: 7px 12px; font-size: 12px; cursor: pointer;
     color: var(--text-dim); background: transparent; border: 1px solid transparent;
     border-radius: 6px; white-space: nowrap;
 }
+.settings-tab svg { width: 15px; height: 15px; flex: 0 0 auto; }
 .settings-tab:hover { background: var(--bg-elev-2); }
 .settings-tab.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
 .slideover-field.is-tab-hidden { display: none; }
diff --git a/delphi-backend/assets/assets.res b/delphi-backend/assets/assets.res
index 178ea1932a800df45418a37339fb4e678309eb38..fdc86d085aa22502582bd6a8ee67985105783b96 100644
GIT binary patch
delta 2892
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

delta 1060
zcmZ`&U1%It7~R~>?#@g%-Ox=;T21q1vE8KI?j|;gW`iZQ5-BMmsg&wNa3?c&cZc1~
zOlD@Y2_;yOniq?qSN#+UwnC+w{-iqMVALkEtpy*_roIFbq}m66pb8}*g6L#hB`;n$
z+za3R4(B`P-s4}!R_9`~KoZ+Nj40!5e*7i=xpGM@mkcq_&UWo!H;u+RlS&0cv8E#X
zo-daw$8zamace-5w1R3y*t9ud-!qesvn!`s?VIoLA^XKSnPaJGKMQ@<WnZ@2s#)r_
zAiH%Uz_!~xZ0UtCTe{7$lOuKZug+~DC{sh3pfaQlZH$d9Y{S$E;){!>MGeqJ(=2L+
z46UXH1~o0sprBGJn_y)rj6Jv|TDbqTzn;~~+-6G|qoAc>RFrZBoh8eR)qb*ry+06U
zsYRX*osPIl{Pwx)uUFYM=MNF4e$!=l+*k<Pe}4P(Gc$Las+_w`r0<wd*yZu`;Yzo+
z-r4sq84&Q*4@lVg^c-pM;mN=K0bIO5cGoFsXl;?wnRr$-hl(=n+zBmcUM4NgZE#G0
z4U101Ez!tOD=uZJl*7<pfkymo+Uv*J8DA~72ffvp9_K^&{TvxYc8P>><RS?iinjIs
z$CF6FVVZV*$X3Re6(f;%EdW_D^}IL*iVBiwQYcb)cYRp56eKM#gK3EtjlZ>A-GpCX
zAf3Jn3C_OfYs51bN$ll*ZCzT0wPLdT&_K}Lp(@_*p{h8VSJVvXE~{>tF8jKWACAAd
zQD4T*@<BKS(+yCBqN~f&K+1}0hJs>2QL(aG!2&vI86q4x7<bz-HO|*#O^NVTQM@-t
zI<dX%4XwM-icLe+A^h$dsd1X;$tw-S<8jV>MPfSH-#oM2?R8P@!so*8BH%1{bHl;G
zp@V}^Q1hCUizXrZ?@NxxAUa%7q}>114pT{+pvDyB=+wqO+<SnF;Q0gG^|$-Eqe%O?
z-8l9vx8}_Db5GxL8XEYnKA*?q`AKsIkMg{POHuz8{5?fDyn5CjbnY+k_k(2Mi1W)0
zzWa`|Ruc38Ub`ebif?=@aJXq+*yLRKNLb@HXAG^NgR9q4G}XkV&xKuHOB}_O6(Rgs
zM%0tgsZaL0A48ViERxU;9o_mQJf-8E6`>B7z7QVSn$FY7By{w`n4<0}DzcSL!jtW8
t8xH@-hjC$*-+}{Ig&s^a3Vuwj@<BZH2j7F+7lkLP_Bz9hLPD(a`~&4+fiD06

diff --git a/index.html b/index.html
index 837df8e..53d5482 100644
--- a/index.html
+++ b/index.html
@@ -415,11 +415,11 @@
         </div>
         <div class="settings-main">
         <div class="settings-tabs" id="settingsTabs">
-            <button class="settings-tab is-active" data-tab="general">General</button>
-            <button class="settings-tab" data-tab="security">Security</button>
-            <button class="settings-tab" data-tab="autofill">Autofill</button>
-            <button class="settings-tab" data-tab="account">Account</button>
-            <button class="settings-tab" data-tab="sync">Sync &amp; Backup</button>
+            <button class="settings-tab is-active" data-tab="general"><svg><use href="#i-settings"/></svg>General</button>
+            <button class="settings-tab" data-tab="security"><svg><use href="#i-shield"/></svg>Security</button>
+            <button class="settings-tab" data-tab="autofill"><svg><use href="#i-key"/></svg>Autofill</button>
+            <button class="settings-tab" data-tab="account"><svg><use href="#i-user"/></svg>Account</button>
+            <button class="settings-tab" data-tab="sync"><svg><use href="#i-rotate-ccw"/></svg>Sync &amp; Backup</button>
         </div>
         <div class="slideover-body" id="settingsBody">
             <div class="slideover-field">
@@ -769,10 +769,14 @@
                         </label>
                     </div>
                     <p style="font-size:11px;color:var(--text-faint);margin:0 0 8px;line-height:1.4">
-                        Backups are encrypted with a password derived from your
-                        master password (so restore needs the master at the
-                        time of backup). Filename pattern: <code>vault-autobackup-YYYYMMDD-HHmmss.json</code>.
+                        Backups are encrypted with a password you choose
+                        (independent of your master password — you'll need it
+                        to restore). Filename pattern: <code>vault-autobackup-YYYYMMDD-HHmmss.json</code>.
                     </p>
+                    <div style="display:flex;gap:8px;align-items:center;margin-bottom:8px">
+                        <button class="btn btn-ghost btn-sm" id="autoBackupSetPwdBtn">Set backup password</button>
+                        <span id="autoBackupPwdStatus" style="font-size:11px;display:inline-flex;align-items:center;gap:4px"></span>
+                    </div>
                     <div style="display:flex;gap:6px;flex-wrap:wrap;align-items:center">
                         <button class="btn btn-ghost btn-sm" id="autoBackupNowBtn">
                             <svg><use href="#i-log-out"/></svg> Backup now
diff --git a/js/app.backup.js b/js/app.backup.js
index ee65f42..2a82851 100644
--- a/js/app.backup.js
+++ b/js/app.backup.js
@@ -59,6 +59,18 @@ function refreshAutoBackupUI(cfg) {
     $('#autoBackupLast').textContent = cfg.last
         ? 'Last run: ' + cfg.last.replace('T', ' ').slice(0, 16)
         : 'Never run yet';
+    $('#autoBackupSetPwdBtn').textContent = cfg.hasPwd
+        ? 'Change backup password' : 'Set backup password';
+    const pwdStatus = $('#autoBackupPwdStatus');
+    if (cfg.hasPwd) {
+        pwdStatus.innerHTML = '';
+        pwdStatus.style.color = 'var(--text-faint)';
+        pwdStatus.textContent = 'Set.';
+    } else {
+        pwdStatus.style.color = 'var(--warning, #e0a800)';
+        pwdStatus.innerHTML = '<svg width="13" height="13"><use href="#i-alert"/></svg>' +
+            '<span>Not set — backups won\'t run</span>';
+    }
 }
 
 async function pickAutoBackupFolder() {
@@ -100,27 +112,32 @@ async function promptAndStoreBackupPwd() {
 async function onToggleAutoBackup(ev) {
     const enabled = ev.target.checked;
     if (enabled) {
-        const cfg = await loadAutoBackupConfig();
-        if (!cfg.hasPwd && !(await promptAndStoreBackupPwd())) {
-            ev.target.checked = false;
-            return;
-        }
         Bridge.setPref(ABK.enabled, '1');
         $('#autoBackupConfig').style.display = '';
-        toast('Auto-backup enabled');
-        // Refresh the dir/last display in case we came from cold state.
-        const fresh = await loadAutoBackupConfig();
-        refreshAutoBackupUI(fresh);
+        // No pwd prompt here — the dedicated "Set backup password" button
+        // owns it (like sync). Backups no-op until it's set.
+        const cfg = await loadAutoBackupConfig();
+        refreshAutoBackupUI(cfg);
+        toast(cfg.hasPwd ? 'Auto-backup enabled'
+                         : 'Auto-backup enabled — set a backup password to start');
     } else {
         Bridge.setPref(ABK.enabled, '');
-        // Forget the stored backup pwd so re-enabling prompts fresh —
-        // gives the user a way to change it without extra UI.
-        Bridge.setPref(ABK.pwd, '');
+        // Keep the stored pwd — re-enabling reuses it silently. Change it
+        // anytime via the dedicated "Change backup password" button.
         $('#autoBackupConfig').style.display = 'none';
         toast('Auto-backup disabled');
     }
 }
 
+// Dedicated pwd button (mirrors sync's syncSetEncPwdFlow) so the user can
+// change the backup password without the disable/re-enable dance.
+async function changeBackupPwd() {
+    if (await promptAndStoreBackupPwd()) {
+        refreshAutoBackupUI(await loadAutoBackupConfig());
+        toast('Backup password saved');
+    }
+}
+
 async function runAutoBackupNow(silent) {
     const cfg = await loadAutoBackupConfig();
     if (!cfg) return silent || toast('Bridge not available', 'error');
diff --git a/js/app.js b/js/app.js
index 645659e..7ad20a9 100644
--- a/js/app.js
+++ b/js/app.js
@@ -8994,6 +8994,7 @@ async function init() {
         e.target.value = n;
         Bridge.setPref(ABK.keep, String(n));
     });
+    $('#autoBackupSetPwdBtn').addEventListener('click', changeBackupPwd);
     $('#autoBackupNowBtn').addEventListener('click', () => runAutoBackupNow());
 
     $('#settingFavicons').addEventListener('change', e => {