Balance card: a real button to change account, not two dots

The dots were an indicator pressed into service as a control — fine
under a thumb that can just swipe, too small for a mouse. They're
replaced by a pill in the header row naming the account it takes you to
(⇄ Savings / ⇄ Spending), which is both a proper click target and a
clearer answer to "what's the other one?". Swiping the card still works.

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

3 files changed, 20 insertions, 7 deletions

diff --git a/src/app.js b/src/app.js
index c528fd7..9e680a2 100644
--- a/src/app.js
+++ b/src/app.js
@@ -2324,6 +2324,8 @@ function setAccountSel(a, dir) {
   render();
 }
 
+const SWAP_ICON = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><path d="M8 3 4 7l4 4"/><path d="M4 7h16"/><path d="m16 21 4-4-4-4"/><path d="M20 17H4"/></svg>';
+
 function balanceCard() {
   // Dim + spin until this network has data (cache, Nostr state, or a scan has
   // populated balances once). `scanning` alone misses the window between
@@ -2348,10 +2350,15 @@ function balanceCard() {
     h('div', { class: 'row between', style: 'align-items:center' },
       h('div', { class: 'small faint', style: 'text-transform:uppercase;letter-spacing:.06em' },
         hasArk ? (isSpending ? t('spendingLabel') : t('savingLabel')) : t('balance')),
+      // Swiping only helps on touch, and dots are an indicator rather than a
+      // target — so the switch is a real button that names where it goes.
       hasArk
-        ? h('div', { class: 'balance-dots' },
-            h('button', { class: 'bdot' + (isSpending ? ' on' : ''), title: t('spendingLabel'), onClick: () => setAccountSel('spending') }),
-            h('button', { class: 'bdot' + (!isSpending ? ' on' : ''), title: t('savingLabel'), onClick: () => setAccountSel('savings') }))
+        ? h('button', {
+            class: 'balance-switch',
+            onClick: () => setAccountSel(isSpending ? 'savings' : 'spending', isSpending ? 'left' : 'right'),
+          },
+            h('span', { html: SWAP_ICON }),
+            h('span', { class: 'bsw-label' }, isSpending ? t('savingLabel') : t('spendingLabel')))
         : null),
     h('div', { class: 'amt', style: firstLoad ? 'opacity:.3' : '' },
       firstLoad ? h('span', { class: 'spinner sm', style: 'margin-right:8px' }) : null,
diff --git a/src/i18n.js b/src/i18n.js
index 898abaa..1e47be4 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -140,6 +140,7 @@ const STR = {
     moveToSavingBtn: 'Move to Savings',
     spendingLabel: 'Spending',
     savingLabel: 'Savings',
+    balanceSwitch: 'Switch to {name}',
     balanceNoteSpending: 'Instant · free to send',
     balanceNoteSavings: 'On-chain · mining fees apply',
     movingLabel: 'Moving…',
diff --git a/src/style.css b/src/style.css
index c12efd3..d3bc9fa 100644
--- a/src/style.css
+++ b/src/style.css
@@ -515,10 +515,6 @@ body::after {
 /* balance card: one account at a time, dots to flip */
 .balance-face { min-height: 96px; }
 .balance-note { margin-top: 2px; }
-.balance-dots { display: flex; gap: 7px; align-items: center; }
-.bdot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; transition: background .18s, transform .18s; }
-.bdot:hover { transform: scale(1.25); background: var(--muted); }
-.bdot.on { background: var(--accent); transform: scale(1.15); }
 /* amount input with an inline Max affordance */
 .amt-field { position: relative; display: flex; flex: 1; min-width: 0; }
 .amt-field input { width: 100%; padding-right: 52px; }
@@ -531,3 +527,12 @@ body::after {
 /* recipient chip: large variant for pay/zap screens */
 .zap-chip.lg { gap: 8px; padding: 4px 12px 4px 4px; font-weight: 600; }
 .chat-avatar.chip-lg { width: 30px; height: 30px; font-size: 11px; flex-shrink: 0; }
+/* the clickable way to change account (swiping only helps on touch) */
+.balance-switch {
+  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
+  padding: 6px 12px; font-size: 13px; font-weight: 600;
+  color: var(--muted); background: var(--surface2);
+  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
+}
+.balance-switch:hover { color: var(--ink); border-color: var(--line-strong); }
+.balance-switch svg { opacity: .75; }