sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: consistent [x] delete buttons + [rename] with inline editing
Some checks failed
check / check (push) Has been cancelled
Details

Browse Source 
- Replace dashed-underline wallet name with plain text + [rename] button
- [rename] button matches existing [x] button style (border border-border px-1)
- Inline rename shows input field with [save] and [cancel] buttons
- Support Enter to save, Escape to cancel
- Wallet list row: Name [rename] [x] with flex justify-between layout
- All buttons use monochrome hover style (hover:bg-fg hover:text-bg)
This commit is contained in:
clawbot
2026-02-27 12:53:46 -08:00
parent c5066f9aaf
commit e8c4dde81e
1 changed files with 32 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/popup/views/settings.js
View File

@@ -78,8 +78,11 @@ function renderWalletListSettings() {
state.wallets.forEach((wallet, idx) => { state.wallets.forEach((wallet, idx) => {
const name = escapeHtml(wallet.name || "Wallet " + (idx + 1)); 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 += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
html += `<span class="settings-wallet-name cursor-pointer underline decoration-dashed" data-idx="${idx}">${name}</span>`; html += `<span class="wallet-name-label">${name}</span>`;
html += `<span class="flex gap-1">`;
html += `<button class="btn-rename-wallet border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[rename]</button>`;
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 += `<button class="btn-delete-wallet border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
html += `</span>`;
html += `</div>`; html += `</div>`;
}); });
container.innerHTML = html; container.innerHTML = html;
@@ -94,35 +97,42 @@ function renderWalletListSettings() {
$("delete-wallet-confirm").classList.remove("hidden"); $("delete-wallet-confirm").classList.remove("hidden");
}); });
}); });
container.querySelectorAll(".btn-rename-wallet").forEach((btn) => {
// Inline rename on click btn.addEventListener("click", () => {
container.querySelectorAll(".settings-wallet-name").forEach((span) => { const idx = parseInt(btn.dataset.idx, 10);
span.addEventListener("click", () => {
const idx = parseInt(span.dataset.idx, 10);
const wallet = state.wallets[idx]; const wallet = state.wallets[idx];
const input = document.createElement("input"); const currentName = wallet.name || "Wallet " + (idx + 1);
input.type = "text"; const row = btn.closest(".flex.justify-between");
input.className = const nameSpan = row.querySelector(".wallet-name-label");
"border border-border p-0 text-xs bg-bg text-fg w-full"; const buttonsSpan = row.querySelector("span.flex.gap-1");
input.value = wallet.name || "Wallet " + (idx + 1);
span.replaceWith(input); nameSpan.innerHTML = `<input type="text" class="rename-wallet-input border border-border px-1 text-xs bg-bg text-fg" value="${escapeHtml(currentName)}" />`;
buttonsSpan.innerHTML =
`<button class="btn-rename-save border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer">[save]</button>` +
`<button class="btn-rename-cancel border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer">[cancel]</button>`;
const input = nameSpan.querySelector("input");
input.focus(); input.focus();
input.select(); input.select();
const finish = async () => {
const val = input.value.trim(); const save = async () => {
if (val && val !== wallet.name) { const newName = input.value.trim();
wallet.name = val; if (newName) {
wallet.name = newName;
await saveState(); await saveState();
} }
renderWalletListSettings(); 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) => { input.addEventListener("keydown", (e) => {
if (e.key === "Enter") input.blur(); if (e.key === "Enter") save();
if (e.key === "Escape") { if (e.key === "Escape") renderWalletListSettings();
input.value = wallet.name || "Wallet " + (idx + 1);
input.blur();
}
}); });
}); });
}); });