Spending settings: the coins first, then the custody strategy as a drop-down that describes only the chosen one

Adam, 2026-10-23: three descriptions at once were a wall of text. The card now sits between the coins table and Renewal, is a select of the three strategies with their prices, and shows one paragraph — the chosen strategy's. The intro is two sentences shorter.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

1 files changed, 10 insertions, 11 deletions

diff --git a/src/features/ark.js b/src/features/ark.js
index df33e0f..bc5bd10 100644
--- a/src/features/ark.js
+++ b/src/features/ark.js
@@ -2604,6 +2604,7 @@ export function arkFeature(ctx) {
               h('td', { class: 'num' }, '—'),
               h('td', { class: 'num' }, h('span', { class: 'tag pending' }, t('arkCoinsRenewing'))))))))),
       renewingCard,
+      embedded ? custodyCard() : null,
       h('div', { class: 'card col', style: 'gap:8px' },
         h('h4', { style: 'margin:0' }, t('arkCoinsRenewTitle')),
         // the round cadence comes from the server (it has been an hour and
@@ -2678,18 +2679,16 @@ export function arkFeature(ctx) {
       { id: 'self', label: t('arkCustodySelf'), desc: t('arkCustodySelfDesc', { days: lifeDays }), cost: t('arkCustodyCostSelf', { base: baseCost }) },
       { id: 'exit', label: t('arkCustodyExit'), desc: t('arkCustodyExitDesc', { hops }), cost: t('arkCustodyCostExit', { pct: earlyPct, base: baseCost }) },
     ].filter((x) => honors || x.id !== 'custodial');
+    const chosen = tiers.find((x) => x.id === cur) || tiers[0];
+    // A drop-down, and only the chosen strategy's description under it: three
+    // paragraphs at once read as a wall, and two of them are about choices
+    // the reader has not made.
     return h('div', { class: 'card col ark-custody', style: 'gap:10px' },
-      h('h3', { style: 'margin:0' }, t('arkCustodyTitle')),
+      h('h4', { style: 'margin:0' }, t('arkCustodyTitle')),
       h('p', { class: 'small muted', style: 'margin:0' }, t('arkCustodyDesc', { days: lifeDays })),
-      h('div', { class: 'col', style: 'gap:8px' }, ...tiers.map((x) => h('label', {
-        class: 'row gap6 ark-custody-opt' + (x.id === cur ? ' active' : ''), style: 'align-items:flex-start;cursor:pointer',
-        'data-tier': x.id,
-      },
-        h('input', { type: 'radio', name: 'arkCustody', value: x.id, checked: x.id === cur, disabled: !honors, style: 'flex:0 0 auto;margin:3px 0 0',
-          onChange: () => applyCustody(x.id) }),
-        h('div', { class: 'col', style: 'gap:2px;flex:1' },
-          h('div', { class: 'row between gap6', style: 'align-items:baseline' }, h('span', { style: 'white-space:nowrap' }, x.label), h('span', { class: 'small' + (x.id === 'custodial' ? ' faint' : ''), style: 'text-align:right' }, x.cost)),
-          h('div', { class: 'small muted' }, x.desc))))),
+      h('select', { id: 'ark-custody-select', disabled: !honors, onChange: (e) => applyCustody(e.target.value) },
+        ...tiers.map((x) => h('option', { value: x.id, selected: x.id === cur }, x.label + ' · ' + x.cost))),
+      h('p', { class: 'small muted ark-custody-desc', style: 'margin:0' }, chosen.desc),
       honors ? null : h('p', { class: 'small faint', style: 'margin:0' }, t('arkCustodyNotHere')));
   }
 
@@ -3809,7 +3808,7 @@ export function arkFeature(ctx) {
     // the Spending face's settings page: the custody choice, then its coins
     spendingSettings() {
       if (wallet.watchOnly) return null; // a locked wallet can't renew or exit
-      return h('div', { class: 'col', style: 'gap:16px' }, custodyCard(), arkCoinsPage({ embedded: true }));
+      return arkCoinsPage({ embedded: true }); // the custody strategy sits inside, after the coins
     },
     // the wallet's own pages keep the top nav: these are pages, not takeovers
     screenView() {