Settings: collapse the recovery phrase behind a reveal button

The masked twelve-word grid took a full screen of the Settings page just
to say "there's a backup here". Collapsed card now carries one line of
warning and the reveal button; the grid (always unmasked — the masked
state had no job once the gate exists) appears only after an explicit
reveal, and Hide collapses it again. Applies to both the main Settings
tab and the per-account screen, which share the card.

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Wvj4aoeMZwA7VUGdJP9Swi

2 files changed, 13 insertions, 8 deletions

diff --git a/src/app.js b/src/app.js
index a67a154..67a82df 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1759,20 +1759,24 @@ function recoveryCard(a) {
   }
   if (!a.mnemonic)
     return h('div', { class: 'card col' }, h('h3', {}, t('importedKey')), h('p', { class: 'small muted', style: 'margin:0' }, t('importedKeyNote')));
+  // Collapsed by default — the word grid only exists after an explicit reveal.
+  if (!shown)
+    return h('div', { class: 'card col' },
+      h('h3', {}, t('recoveryPhrase')),
+      h('p', { class: 'small muted', style: 'margin:0' }, t('recoveryDesc')),
+      h('button', { class: 'btn-block', onClick: () => { ui.revealShown = true; render(); } }, t('revealRecovery')));
   return h('div', { class: 'card col' },
     h('h3', {}, t('recoveryPhrase')),
     h('div', { class: 'warn-box' }, t('recoveryWarn')),
     h('div', { class: 'words' }, words.map((w, i) =>
-      h('div', { class: 'w' + (shown ? '' : ' masked') }, h('span', { class: 'n' }, i + 1), h('span', { class: 't' }, shown ? w : '••••••')))),
-    shown && a.passphrase
+      h('div', { class: 'w' }, h('span', { class: 'n' }, i + 1), h('span', { class: 't' }, w)))),
+    a.passphrase
       ? h('div', { class: 'col gap6' }, h('span', { class: 'lab' }, t('bip39Passphrase')), h('div', { class: 'addr-box' }, a.passphrase))
       : null,
-    shown
-      ? h('div', { class: 'row gap6 wrap' },
-          copyBtn(a.mnemonic, t('copyPhrase')),
-          a.passphrase ? copyBtn(a.passphrase, t('copyPassphrase')) : null,
-          h('button', { class: 'btn-sm grow', onClick: () => { ui.revealShown = false; render(); } }, t('hide')))
-      : h('button', { class: 'btn-primary btn-block', onClick: () => { ui.revealShown = true; render(); } }, t('revealRecovery'))
+    h('div', { class: 'row gap6 wrap' },
+      copyBtn(a.mnemonic, t('copyPhrase')),
+      a.passphrase ? copyBtn(a.passphrase, t('copyPassphrase')) : null,
+      h('button', { class: 'btn-sm grow', onClick: () => { ui.revealShown = false; render(); } }, t('hide')))
   );
 }
 
diff --git a/src/i18n.js b/src/i18n.js
index 55b55d7..4f008d4 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -199,6 +199,7 @@ const STR = {
     msgLeaveConfirm: 'Really leave? Rejoining needs a new invite',
     nostrSection: 'Nostr',
     advancedSettings: 'Advanced settings',
+    recoveryDesc: 'The twelve words that back up this wallet. Anyone who sees them can steal your funds.',
     copyAddress: 'Copy address',
     paymentReceived: 'Payment received!',
     tapToProceed: 'Tap anywhere to proceed',