Copy joins the pencil inside the address box

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

3 files changed, 24 insertions, 16 deletions

diff --git a/src/app.js b/src/app.js
index d6d1a1d..62a6286 100644
--- a/src/app.js
+++ b/src/app.js
@@ -3585,7 +3585,7 @@ async function importSnapshotFile(e) {
 // sits just before boot so every helper it captures is defined; the hooks are
 // only invoked at runtime (first render happens after loadLocale below).
 const ctx = {
-  h, ui, render, wallet, toast, copyBtn, pasteBtn, blankSend, goBack, goHome, openExternal,
+  h, ui, render, wallet, toast, copy, copyBtn, pasteBtn, blankSend, goBack, goHome, openExternal,
   fmtAmount, unitLabel, unitTag, parseAmount, getUnit: () => unit, toggleUnit, download,
   brandHeader, activeAccount, setAccounts: (list) => { accounts = list; },
   getAccounts: () => accounts,
diff --git a/src/features/names.js b/src/features/names.js
index 0f37658..3cff89b 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, brandHeader, goBack } = ctx;
+  const { h, ui, render, wallet, hook, toast, copy, 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.
@@ -311,13 +311,18 @@ export function namesFeature(ctx) {
       h('div', { html: qrSvg(addr) }),
       h('div', { class: 'addr-box addr-editable', style: 'width:100%;font-size:16px' },
         addr,
-        // the pen is how you change the name — right where the name is
-        h('button', {
-          class: 'addr-edit', title: t('namesCustom'),
-          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>',
-        })),
-      copyBtn(addr, t('namesCopy')),
+        // editing and copying live right where the name is
+        h('span', { class: 'addr-actions' },
+          h('button', {
+            title: t('namesCustom'),
+            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>',
+          }),
+          h('button', {
+            title: t('namesCopy'),
+            onClick: () => copy(addr),
+            html: '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>',
+          }))),
       offerSection());
   }
 
diff --git a/src/style.css b/src/style.css
index caef890..264b85e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -210,15 +210,18 @@ textarea { resize: vertical; min-height: 84px; font-family: var(--mono); font-si
   font-family: var(--mono); font-size: 15px; color: var(--ink); background: var(--surface2); border: 1px dashed var(--line-strong);
   border-radius: 11px; padding: 12px 14px; word-break: break-all; text-align: center;
 }
-/* a quiet edit affordance living inside the address box */
-.addr-editable { position: relative; padding-right: 34px; }
-.addr-edit {
-  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
-  background: none; border: none; box-shadow: none; padding: 6px; line-height: 0;
+/* quiet edit/copy affordances living inside the address box */
+.addr-editable { position: relative; padding-right: 62px; }
+.addr-actions {
+  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
+  display: flex; align-items: center;
+}
+.addr-actions button {
+  background: none; border: none; box-shadow: none; padding: 5px; line-height: 0;
   color: var(--muted); cursor: pointer;
 }
-.addr-edit:hover { color: var(--ink); background: none; }
-.addr-edit:active { transform: translateY(-50%); }
+.addr-actions button:hover { color: var(--ink); background: none; }
+.addr-actions button:active { transform: none; }
 .path { font-family: var(--mono); font-size: 12px; color: var(--faint); }
 .addr-check { font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--muted); word-break: break-all; padding: 0 2px; }
 .addr-check .hl { color: var(--ink); font-weight: 700; }