From 107c243f658ff3b0eba60e208a6e03b169566f47 Mon Sep 17 00:00:00 2001
From: clawbot <clawbot@noreply.example.org>
Date: Fri, 27 Feb 2026 12:53:05 -0800
Subject: [PATCH] fix: use consistent [x] delete buttons, add inline rename

- Delete buttons now use [x] with border, matching token and site
  removal patterns in settings
- Wallet names are click-to-rename (inline input), matching the
  home view rename UX
---
 src/popup/views/settings.js | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/popup/views/settings.js b/src/popup/views/settings.js
index ecbb038..535d38a 100644
--- a/src/popup/views/settings.js
+++ b/src/popup/views/settings.js
@@ -78,8 +78,8 @@ function renderWalletListSettings() {
     state.wallets.forEach((wallet, idx) => {
         const name = escapeHtml(wallet.name || "Wallet " + (idx + 1));
         html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
-        html += `<span>${name}</span>`;
-        html += `<span class="btn-delete-wallet border-b border-dashed border-fg text-fg cursor-pointer" data-idx="${idx}">[delete]</span>`;
+        html += `<span class="settings-wallet-name cursor-pointer underline decoration-dashed" data-idx="${idx}">${name}</span>`;
+        html += `<button class="btn-delete-wallet border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
         html += `</div>`;
     });
     container.innerHTML = html;
@@ -94,6 +94,38 @@ function renderWalletListSettings() {
             $("delete-wallet-confirm").classList.remove("hidden");
         });
     });
+
+    // Inline rename on click
+    container.querySelectorAll(".settings-wallet-name").forEach((span) => {
+        span.addEventListener("click", () => {
+            const idx = parseInt(span.dataset.idx, 10);
+            const wallet = state.wallets[idx];
+            const input = document.createElement("input");
+            input.type = "text";
+            input.className =
+                "border border-border p-0 text-xs bg-bg text-fg w-full";
+            input.value = wallet.name || "Wallet " + (idx + 1);
+            span.replaceWith(input);
+            input.focus();
+            input.select();
+            const finish = async () => {
+                const val = input.value.trim();
+                if (val && val !== wallet.name) {
+                    wallet.name = val;
+                    await saveState();
+                }
+                renderWalletListSettings();
+            };
+            input.addEventListener("blur", finish);
+            input.addEventListener("keydown", (e) => {
+                if (e.key === "Enter") input.blur();
+                if (e.key === "Escape") {
+                    input.value = wallet.name || "Wallet " + (idx + 1);
+                    input.blur();
+                }
+            });
+        });
+    });
 }
 
 function show() {