diff --git a/src/popup/views/settings.js b/src/popup/views/settings.js index 535d38a..bfd50bd 100644 --- a/src/popup/views/settings.js +++ b/src/popup/views/settings.js @@ -78,8 +78,11 @@ function renderWalletListSettings() { state.wallets.forEach((wallet, idx) => { const name = escapeHtml(wallet.name || "Wallet " + (idx + 1)); html += `
`; - html += `${name}`; + html += `${name}`; + html += ``; + html += ``; html += ``; + html += ``; html += `
`; }); container.innerHTML = html; @@ -94,35 +97,42 @@ 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); + container.querySelectorAll(".btn-rename-wallet").forEach((btn) => { + btn.addEventListener("click", () => { + const idx = parseInt(btn.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); + const currentName = wallet.name || "Wallet " + (idx + 1); + const row = btn.closest(".flex.justify-between"); + const nameSpan = row.querySelector(".wallet-name-label"); + const buttonsSpan = row.querySelector("span.flex.gap-1"); + + nameSpan.innerHTML = ``; + buttonsSpan.innerHTML = + `` + + ``; + + const input = nameSpan.querySelector("input"); input.focus(); input.select(); - const finish = async () => { - const val = input.value.trim(); - if (val && val !== wallet.name) { - wallet.name = val; + + const save = async () => { + const newName = input.value.trim(); + if (newName) { + wallet.name = newName; await saveState(); } renderWalletListSettings(); }; - input.addEventListener("blur", finish); + + buttonsSpan + .querySelector(".btn-rename-save") + .addEventListener("click", save); + buttonsSpan + .querySelector(".btn-rename-cancel") + .addEventListener("click", () => renderWalletListSettings()); input.addEventListener("keydown", (e) => { - if (e.key === "Enter") input.blur(); - if (e.key === "Escape") { - input.value = wallet.name || "Wallet " + (idx + 1); - input.blur(); - } + if (e.key === "Enter") save(); + if (e.key === "Escape") renderWalletListSettings(); }); }); });