# Addresses Page Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Polish the Addresses tab with better-styled address book entry cards, chevron-icon group headers for wallet addresses, and explicit copy buttons on every address row.

**Architecture:** Three files change — CSS classes are added to `style.css`, then `app.js` render functions are updated to use those classes and inject Lucide icon markup, followed by a `lucide.createIcons()` call after each `innerHTML` write. No HTML structural changes, no backend changes.

**Tech Stack:** Vanilla JS, Lucide icons (already bundled as `lucide.min.js`), CSS custom properties.

---

### Task 1: CSS — Address Book entry card classes

**Files:**
- Modify: `tauri/src/style.css` (append after line 1139)

- [ ] **Step 1: Add the CSS classes**

Append to the end of `tauri/src/style.css`:

```css
/* Address Book entry cards */
.ab-entry-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: background 0.12s;
}
.ab-entry-card:hover { background: rgba(59, 130, 246, 0.06); }
.ab-entry-info { min-width: 0; flex: 1; }
.ab-entry-label { font-weight: 500; font-size: 13px; }
.ab-entry-addr {
    font-size: 11px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--mono);
}
.ab-entry-notes { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ab-entry-actions { display: flex; gap: 4px; margin-left: 8px; flex-shrink: 0; align-items: center; }
.ab-entry-copy-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    line-height: 0;
    margin-bottom: 0;
    transition: color 0.15s, background 0.15s;
}
.ab-entry-copy-btn:hover { color: var(--text); background: var(--border); }
```

- [ ] **Step 2: Commit**

```bash
git add tauri/src/style.css
git commit -m "style: add CSS classes for address book entry cards"
```

---

### Task 2: JS — Update renderAddressBook()

**Files:**
- Modify: `tauri/src/app.js:1424-1442`

- [ ] **Step 1: Replace the function body**

Find `function renderAddressBook(entries)` at line 1424 and replace the entire function (lines 1424–1442) with:

```javascript
function renderAddressBook(entries) {
    const container = document.getElementById('address-book-list');
    if (!entries.length) {
        container.innerHTML = '<p style="color:var(--text-dim); font-size:13px;">No saved addresses. Click + Add to save an address for quick sending.</p>';
        return;
    }
    container.innerHTML = entries.map(e => `
        <div class="ab-entry-card">
            <div class="ab-entry-info">
                <div class="ab-entry-label">${e.label}</div>
                <div class="ab-entry-addr">${e.address}</div>
                ${e.notes ? `<div class="ab-entry-notes">${e.notes}</div>` : ''}
            </div>
            <div class="ab-entry-actions">
                <button class="ab-entry-copy-btn" onclick="navigator.clipboard.writeText('${e.address}')" title="Copy address"><i data-lucide="copy" style="width:13px;height:13px;display:block;"></i></button>
                <button class="secondary" onclick="sendToBookAddress('${e.address}')" style="font-size:11px; padding:3px 8px;">Send</button>
                <button class="secondary" onclick="deleteAddressBookEntry('${e.address}')" style="font-size:11px; padding:3px 8px; color:var(--error);">&#10005;</button>
            </div>
        </div>`).join('');
    lucide.createIcons({ nodes: [container], attrs: { 'stroke-width': '1.5' } });
}
```

- [ ] **Step 2: Verify visually**

Open the app, go to the Addresses tab. The address book section should show:
- Cards with a visible border and subtle blue hover
- Copy icon button (clipboard icon) to the left of Send
- Address text is no longer clickable (the icon button replaces that)

- [ ] **Step 3: Commit**

```bash
git add tauri/src/app.js
git commit -m "feat: polish address book entry cards with CSS classes and copy button"
```

---

### Task 3: CSS — Wallet address group header and row copy button classes

**Files:**
- Modify: `tauri/src/style.css` (append after Task 1's additions)

- [ ] **Step 1: Add the CSS classes**

Append to the end of `tauri/src/style.css`:

```css
/* Wallet address group headers */
.addr-group-header {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: background 0.12s;
    user-select: none;
}
.addr-group-header:hover { background: rgba(59, 130, 246, 0.06); }
.addr-group-chevron {
    transition: transform 0.15s ease;
    color: var(--text-dim);
    flex-shrink: 0;
}
.addr-group-header.expanded .addr-group-chevron { transform: rotate(90deg); }
.addr-group-title { font-size: 13px; font-weight: 600; }
.addr-group-count { font-size: 12px; color: var(--text-dim); margin-left: auto; }

/* Address row copy button (visible on row hover) */
.addr-row-copy-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 2px 3px;
    border-radius: 4px;
    line-height: 0;
    margin-bottom: 0;
    opacity: 0;
    transition: opacity 0.1s, color 0.15s, background 0.15s;
}
tr:hover .addr-row-copy-btn { opacity: 1; }
.addr-row-copy-btn:hover { color: var(--text); background: var(--border); }
```

- [ ] **Step 2: Commit**

```bash
git add tauri/src/style.css
git commit -m "style: add CSS classes for wallet address group headers and row copy buttons"
```

---

### Task 4: JS — Update renderWalletAddresses()

**Files:**
- Modify: `tauri/src/app.js:1515-1547`

- [ ] **Step 1: Replace the rows helper and group template inside renderWalletAddresses**

Find the `const rows = arr => arr.map(...)` definition inside `renderWalletAddresses` (around line 1521) and replace it with:

```javascript
        const rows = arr => arr.map(a => {
            const status = a.used ? 'used' : (a.is_change ? 'change' : 'unused');
            return `<tr class="${a.used ? 'row-used' : ''}">
                <td><span class="badge ${status}">${status}</span></td>
                <td style="font-size:12px;">
                    <div style="display:flex;align-items:center;gap:4px;">
                        ${a.address}
                        <button class="addr-row-copy-btn" onclick="navigator.clipboard.writeText('${a.address}')" title="Copy"><i data-lucide="copy" style="width:12px;height:12px;display:block;"></i></button>
                    </div>
                </td>
                <td style="color:var(--text-dim); font-size:11px;">${a.path}</td>
            </tr>`;
        }).join('');
```

- [ ] **Step 2: Replace the group container template**

Find the `return \`` block inside the `sortedKeys.map(...)` call (around line 1529) and replace it with:

```javascript
        return `
        <div style="margin-bottom:16px;">
            <div class="addr-group-header" onclick="const b=this.nextElementSibling;const o=b.style.display==='none';b.style.display=o?'':'none';this.classList.toggle('expanded',o);">
                <i data-lucide="chevron-right" class="addr-group-chevron" style="width:14px;height:14px;display:block;"></i>
                <span class="addr-group-title">${label}</span>
                <span class="addr-group-count">${g.used} used · ${g.unused} unused</span>
            </div>
            <div style="display:none;">
                <table style="width:100%;"><thead><tr>
                    <th style="width:70px;">Status</th><th>Address</th><th style="width:120px;">Path</th>
                </tr></thead><tbody class="addr-section-body">${rows(preview)}</tbody></table>
                ${rest.length > 0 ? `
                    <div class="addr-expand-row">
                        <button class="secondary" onclick="expandAddrSection(this, '${key}')" style="font-size:11px; padding:3px 10px; margin-top:4px;">Show ${rest.length} more</button>
                    </div>` : ''}
            </div>
        </div>`;
```

- [ ] **Step 3: Add lucide.createIcons() call after container.innerHTML is set**

Find the line `container.innerHTML = sortedKeys.map(...).join('');` and add immediately after it:

```javascript
    lucide.createIcons({ nodes: [container], attrs: { 'stroke-width': '1.5' } });
```

- [ ] **Step 4: Verify visually**

Open the app, go to the Addresses tab. The Wallet Addresses section should show:
- Group headers are styled cards with a border and a Lucide chevron icon on the left
- Clicking a header expands/collapses it with the chevron rotating 90°
- Expanded rows show a copy icon that appears on row hover
- Count reads `N used · N unused` (middle dot instead of parentheses)

- [ ] **Step 5: Commit**

```bash
git add tauri/src/app.js
git commit -m "feat: styled group headers with chevron icons and row copy buttons in wallet addresses"
```

---

### Task 5: JS — Update expandAddrSection()

**Files:**
- Modify: `tauri/src/app.js:1558-1566`

- [ ] **Step 1: Replace the rows template inside expandAddrSection**

Find `tbody.innerHTML = sorted.map(a => {` at line 1558 and replace the map body and the line after it with:

```javascript
    tbody.innerHTML = sorted.map(a => {
        const status = a.used ? 'used' : (a.is_change ? 'change' : 'unused');
        return `<tr class="${a.used ? 'row-used' : ''}">
            <td><span class="badge ${status}">${status}</span></td>
            <td style="font-size:12px;">
                <div style="display:flex;align-items:center;gap:4px;">
                    ${a.address}
                    <button class="addr-row-copy-btn" onclick="navigator.clipboard.writeText('${a.address}')" title="Copy"><i data-lucide="copy" style="width:12px;height:12px;display:block;"></i></button>
                </div>
            </td>
            <td style="color:var(--text-dim); font-size:11px;">${a.path}</td>
        </tr>`;
    }).join('');
    lucide.createIcons({ nodes: [tbody], attrs: { 'stroke-width': '1.5' } });
    btn.parentElement.remove();
```

- [ ] **Step 2: Verify visually**

Open the app, go to Addresses, expand a wallet address group, then click "Show N more". The newly expanded rows should show the same copy icon on hover as the initial rows.

- [ ] **Step 3: Commit**

```bash
git add tauri/src/app.js
git commit -m "feat: copy button on dynamically expanded address rows"
```
