Choosing a name gets a page of its own

The pencil opens a dedicated screen — no balances, no tabs — wired into
the history stack like the other sub-pages.

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

2 files changed, 19 insertions, 7 deletions

diff --git a/src/app.js b/src/app.js
index 2124927..d6d1a1d 100644
--- a/src/app.js
+++ b/src/app.js
@@ -361,7 +361,7 @@ function render() {
   // Navigation animates; background repaints must not. The key is every
   // ui field that decides which page is on screen.
   const navKey = [ui.screen, ui.tab === 'settings', ui.chatOpen, ui.msgView, ui.msgPeer, ui.msgCommunity,
-    ui.profilePk, ui.settingsPage, ui.addrScan, ui.arkExitPage, ui.txDetail, ui.giftMode, ui.claimStep].join('|');
+    ui.profilePk, ui.settingsPage, ui.addrScan, ui.arkExitPage, ui.txDetail, ui.giftMode, ui.claimStep, ui.nameEditOpen].join('|');
   if (uiChanged('nav', navKey)) _navAt = performance.now();
   applyAnim(screen, 'anim-page', (performance.now() - _navAt) < 340 ? performance.now() - _navAt : -1);
   root.replaceChildren(screen, footer());
@@ -407,7 +407,7 @@ wallet.subscribe(scheduleRender);
 // buttons (and Android/system back) move between screens we've actually viewed.
 // We snapshot only the navigation-relevant `ui` fields, so incidental re-renders
 // (typing, polling, balance updates) don't create history entries.
-const NAV_FIELDS = ['screen', 'tab', 'txDetail', 'bump', 'giftMode', 'claimStep', 'chatOpen', 'msgView', 'msgCommunity', 'msgPeer', 'profilePk', 'settingsPage'];
+const NAV_FIELDS = ['screen', 'tab', 'txDetail', 'bump', 'giftMode', 'claimStep', 'chatOpen', 'msgView', 'msgCommunity', 'msgPeer', 'profilePk', 'settingsPage', 'nameEditOpen'];
 function navSnapshot() {
   const s = {};
   for (const f of NAV_FIELDS) s[f] = ui[f] ?? null;
diff --git a/src/features/names.js b/src/features/names.js
index d26a654..0f37658 100644
--- a/src/features/names.js
+++ b/src/features/names.js
@@ -23,7 +23,7 @@ const DOMAIN = 'coinos.io';
 const AUTH_KIND = 21353;
 
 export function namesFeature(ctx) {
-  const { h, ui, render, wallet, hook, toast, copyBtn } = ctx;
+  const { h, ui, render, wallet, hook, toast, copyBtn, brandHeader, goBack } = ctx;
 
   // The wallet's own key signs registrar requests: it's the one key that is
   // always available — offline, in the background, with no signer attached.
@@ -314,12 +314,9 @@ export function namesFeature(ctx) {
         // the pen is how you change the name — right where the name is
         h('button', {
           class: 'addr-edit', title: t('namesCustom'),
-          onClick: () => { ui.nameEditOpen = !ui.nameEditOpen; ui.nameClaimError = null; render(); },
+          onClick: () => { ui.nameEditOpen = true; ui.nameClaimError = null; render(); },
           html: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z"/></svg>',
         })),
-      ui.nameEditOpen ? h('div', { class: 'col', style: 'gap:8px;width:100%' },
-        h('p', { class: 'small muted', style: 'margin:0' }, t('namesCustomHow')),
-        claimForm(false)) : null,
       copyBtn(addr, t('namesCopy')),
       offerSection());
   }
@@ -396,6 +393,21 @@ export function namesFeature(ctx) {
   return {
     id: 'names',
     init() { checked = false; lastError = null; refresh(); },
+    // The pencil by the address opens this: choosing a name gets a page of
+    // its own — no balances, no tabs, just the name.
+    screenView() {
+      if (ui.screen !== 'wallet' || !ui.nameEditOpen) return null;
+      const st = load();
+      const addr = st.name ? `${st.name}@${st.domain || DOMAIN}` : null;
+      return h('div', { class: 'col', style: 'gap:16px' },
+        brandHeader(false),
+        h('div', { class: 'card col' },
+          h('h3', {}, t('namesCustom')),
+          addr ? h('div', { class: 'addr-box break', style: 'font-size:14px' }, addr) : null,
+          h('p', { class: 'small muted', style: 'margin:0' }, t('namesCustomHow')),
+          claimForm(true)),
+        h('button', { class: 'btn-ghost btn-block', onClick: () => goBack(() => { ui.nameEditOpen = null; ui.nameClaimError = null; }) }, t('back')));
+    },
     namesAdoptIdentity(signer, npub) { return adoptIdentity(signer, npub); },
     // the claimed payment address, for anyone prefilling a lightning address
     namesAddress() { const st = load(); return st.name ? `${st.name}@${st.domain || DOMAIN}` : null; },