# Sidebar Navigation 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:** Replace the horizontal tab bar in both frontends with a vertical sidebar showing app title, node status, and icon+label nav items.

**Architecture:** Move `#main-ui` outside the `.container` div so it can span full viewport height as a flex row. The sidebar (`<aside class="sidebar">`) is the left column; `.main-content` is the right scrollable column. Home screens stay inside `#home-container` (the renamed `.container`). JS show/hide functions toggle `#home-container` alongside `#main-ui`.

**Tech Stack:** Vanilla JS, CSS custom properties, no build step. Tauri WebView (online + offline modes) and Flask web UI.

---

## File Structure

| File | Change |
|---|---|
| `tauri/src/style.css` | Remove old nav/header rules; add sidebar CSS |
| `ui/static/style.css` | Identical CSS changes |
| `tauri/src/index.html` | Restructure layout; add sidebar HTML |
| `ui/static/index.html` | Restructure layout; add static sidebar HTML |
| `tauri/src/app.js` | Update `buildNav`, `showTab`, `checkStatus`, show/hide functions |
| `ui/static/app.js` | Update `showTab`, `checkStatus`, show/hide functions |

---

## Task 1: Add sidebar CSS to both style sheets

**Files:**
- Modify: `tauri/src/style.css`
- Modify: `ui/static/style.css`

Add new sidebar rules **without removing** existing `header`/`nav` rules yet (cleanup is Task 6).

- [ ] **Step 1: Add sidebar CSS to `tauri/src/style.css`**

Append after the last rule in the file:

```css
/* ── Sidebar layout ─────────────────────────────────────────────────── */

#main-ui {
    display: flex;
    height: 100vh;
}

.sidebar {
    width: 168px;
    flex-shrink: 0;
    background: #1c2128;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

.sidebar-header {
    padding: 14px 12px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.sidebar-title {
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}

.sidebar-status {
    font-size: 9.5px;
}

.sidebar-status-network {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 2px;
    color: var(--green);
    font-size: 10px;
    font-weight: 500;
}

.sidebar-status-detail {
    color: var(--text-dim);
    padding-left: 10px;
    margin-bottom: 1px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
}

.sidebar-footer {
    padding: 4px 8px 8px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border-radius: 10px;
    border: none;
    background: none;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    margin-bottom: 2px;
    transition: color 0.15s;
    font-family: inherit;
}

.nav-item:hover { color: var(--text); }

.nav-item.active {
    background: rgba(63, 185, 80, 0.13);
    color: var(--green);
    font-weight: 500;
}

.nav-icon {
    flex-shrink: 0;
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.main-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}
```

- [ ] **Step 2: Copy the same block to `ui/static/style.css`**

Append the identical CSS block from Step 1 to the end of `ui/static/style.css`.

- [ ] **Step 3: Verify CSS loads without errors**

Run: open `tauri/src/index.html` in a browser (or `open tauri/src/index.html`) and check the DevTools console for CSS parse errors.

Expected: no errors.

- [ ] **Step 4: Commit**

```bash
git add tauri/src/style.css ui/static/style.css
git commit -m "feat: add sidebar CSS to both apps"
```

---

## Task 2: Restructure Tauri HTML layout

**Files:**
- Modify: `tauri/src/index.html`

- [ ] **Step 1: Add `id="home-container"` to the `.container` div**

In `tauri/src/index.html` line 10, change:

```html
    <div class="container">
```
to:
```html
    <div class="container" id="home-container">
```

- [ ] **Step 2: Remove the `<header>` block**

Remove lines 11–20 (the entire `<header>…</header>` block):

```html
        <header>
            <h1><span>Armory</span> <span id="mode-label">Online</span></h1>
            <div style="display: flex; align-items: center; gap: 16px;">
                <button id="logout-btn" class="secondary" onclick="logoutCurrentWallet()" style="display:none; font-size: 12px; padding: 5px 12px;">Log Out</button>
                <div id="node-status">
                    <span class="status-dot disconnected" id="status-dot"></span>
                    <span id="status-text">Starting...</span>
                </div>
            </div>
        </header>
```

- [ ] **Step 3: Close `#home-container` before `#main-ui`**

The `.container` div currently closes at line 465 (`</div>` before the password overlay). After removing the header and before `#main-ui`, the structure inside `.container` is just the two home screen divs. Find the closing `</div>` of `.container` (currently wraps everything) and split it: close `#home-container` after the home screens, then put `#main-ui` at body level.

Replace the closing structure — currently:

```html
        </div>
    </div>
    <!-- Password Dialog -->
```

The outer `</div>` closes `.container`, the inner closes `#main-ui`. Change to:

```html
        </div>
    </div>
    <!-- Password Dialog -->
```

Wait — actually the existing structure is:
```
<div class="container">          ← #home-container (after Step 1)
  <div id="online-home">...</div>
  <div id="offline-home">...</div>
  <div id="main-ui">             ← needs to move outside
    <nav id="main-nav"></nav>
    .panel divs...
  </div>
</div>                           ← closes .container
```

Move `#main-ui` outside `.container` by closing `#home-container` before `#main-ui`.

Find and replace this block (after the `</div>` that closes `#offline-home` at line ~172, before `#main-ui` at line ~177):

```html
        <!-- ============================================================ -->
        <!-- MAIN UI (both modes, different tabs visible)                 -->
        <!-- ============================================================ -->
        <div id="main-ui" style="display:none">
            <nav id="main-nav"></nav>
```

Replace with:

```html
    </div><!-- /#home-container -->

    <!-- ============================================================ -->
    <!-- MAIN UI (both modes, different tabs visible)                 -->
    <!-- ============================================================ -->
    <div id="main-ui" style="display:none">
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">Armory</div>
                <div class="sidebar-status">
                    <div class="sidebar-status-network">
                        <span class="status-dot disconnected" id="status-dot"></span>
                        <span id="sidebar-network">–</span>
                    </div>
                    <div class="sidebar-status-detail" id="sidebar-block"></div>
                    <div class="sidebar-status-detail" id="sidebar-sync"></div>
                </div>
            </div>
            <nav id="main-nav" class="sidebar-nav"></nav>
            <div class="sidebar-footer">
                <button class="nav-item" onclick="showTab('settings', this)">
                    <span class="nav-icon">⚙</span> Settings
                </button>
                <button id="logout-btn" class="secondary" onclick="logoutCurrentWallet()" style="display:none; width:100%; margin-top:4px; font-size:12px; padding:5px 9px;">Log Out</button>
            </div>
        </aside>
        <div class="main-content">
```

- [ ] **Step 4: Close `.main-content` and `#main-ui` correctly, remove old `.container` close tag**

Find the closing `</div>` that currently closes `#main-ui` (line ~464) then `</div>` closing `.container` (line ~465). After the restructure:

- `.main-content` needs its own `</div>` before `#main-ui` closes
- The old `.container` close tag is removed (container was already closed in Step 3)

Find:
```html
        </div>
    </div>
    <!-- Password Dialog -->
```

Replace with:
```html
        </div><!-- /.main-content -->
    </div><!-- /#main-ui -->
    <!-- Password Dialog -->
```

- [ ] **Step 5: Verify HTML structure is valid**

Run:
```bash
grep -n "id=\"home-container\"\|id=\"main-ui\"\|class=\"main-content\"\|class=\"sidebar\"" tauri/src/index.html
```

Expected output (4 lines, in order):
```
10:    <div class="container" id="home-container">
NNN:    <div id="main-ui" style="display:none">
NNN:        <aside class="sidebar">
NNN:        <div class="main-content">
```

- [ ] **Step 6: Commit**

```bash
git add tauri/src/index.html
git commit -m "feat: restructure Tauri HTML for sidebar layout"
```

---

## Task 3: Update Tauri JS functions

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

- [ ] **Step 1: Update `buildNav()` — add icons, remove Settings, handle offline status**

At line 118, replace the entire `buildNav()` function:

```javascript
const ONLINE_TABS = [
    { id: 'overview',     icon: '◈', label: 'Overview' },
    { id: 'transactions', icon: '⟳', label: 'Transactions' },
    { id: 'explorer',     icon: '⌕', label: 'Explorer' },
    { id: 'receive',      icon: '↓', label: 'Receive' },
    { id: 'send',         icon: '↑', label: 'Send' },
    { id: 'broadcast',    icon: '⇢', label: 'Broadcast' },
    { id: 'silent',       icon: '◎', label: 'Silent Pmts' },
    { id: 'addresses',    icon: '≡', label: 'Addresses' },
];

const OFFLINE_TABS = [
    { id: 'wallet',    icon: '◈', label: 'Wallet' },
    { id: 'sign',      icon: '✎', label: 'Sign' },
    { id: 'export',    icon: '↑', label: 'Export' },
    { id: 'addresses', icon: '≡', label: 'Addresses' },
];

function buildNav() {
    const nav = document.getElementById('main-nav');
    const tabs = MODE === 'online' ? ONLINE_TABS : OFFLINE_TABS;
    nav.innerHTML = tabs.map((t, i) =>
        `<button class="nav-item${i === 0 ? ' active' : ''}" onclick="showTab('${t.id}', this)">` +
        `<span class="nav-icon">${t.icon}</span> ${t.label}</button>`
    ).join('');

    if (MODE === 'offline') {
        const dot = document.getElementById('status-dot');
        const net = document.getElementById('sidebar-network');
        if (dot) dot.style.display = 'none';
        if (net) net.textContent = 'offline';
    }
}
```

- [ ] **Step 2: Update `showTab()` — fix selector and scroll target**

At line 153, replace `showTab`:

```javascript
function showTab(name, btn) {
    activeTab = name;
    document.querySelectorAll('#main-ui .panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));

    const panel = document.getElementById('tab-' + name);
    if (panel) panel.classList.add('active');
    if (btn) btn.classList.add('active');
    const mc = document.querySelector('.main-content');
    if (mc) mc.scrollTo({ top: 0, behavior: 'smooth' });

    // Stop SP background polling when leaving tab
    if (spBgPolling) { clearInterval(spBgPolling); spBgPolling = null; }

    // Load data for the tab
    if (MODE === 'online') {
        if (name === 'overview') refreshBalance();
        if (name === 'transactions') loadTransactions();
        if (name === 'explorer') loadExplorer();
        if (name === 'receive') loadReceiveAddresses();
        if (name === 'send') loadFeeEstimates();
        if (name === 'silent') {
            loadSpTab();
            spBgPolling = setInterval(() => {
                refreshSpScanStatus();
                loadSpUtxos();
            }, 10000);
        }
        if (name === 'addresses') loadAddresses();
        if (name === 'settings') loadSettings();
    } else {
        if (name === 'wallet') loadOfflineWalletInfo();
        if (name === 'addresses') loadOfflineAddresses();
        if (name === 'settings') loadSettings();
    }
}
```

- [ ] **Step 3: Update `checkStatus()` — write to sidebar elements**

At line 222, in `checkStatus()`, replace the status-update block:

Find:
```javascript
        if (data.node_connected) {
            dot.className = 'status-dot connected';
            const syncPct = (data.sync * 100).toFixed(2);
            text.textContent = `${data.chain} | Block ${data.blocks} | Sync ${syncPct}%`;
            const bh = document.getElementById('block-height');
            const sp = document.getElementById('sync-pct');
            if (bh) bh.textContent = data.blocks;
            if (sp) sp.textContent = syncPct + '%';
            if (data.blocks !== lastBlockHeight) {
                lastBlockHeight = data.blocks;
                refreshActiveTab();
            }
        } else {
            dot.className = 'status-dot disconnected';
            text.textContent = 'Not connected to Bitcoin Core';
        }
    } catch (e) {
        document.getElementById('status-dot').className = 'status-dot disconnected';
        document.getElementById('status-text').textContent = 'Server unreachable';
    }
```

Replace with:
```javascript
        const network = document.getElementById('sidebar-network');
        const block   = document.getElementById('sidebar-block');
        const sync    = document.getElementById('sidebar-sync');
        if (data.node_connected) {
            dot.className = 'status-dot connected';
            const syncPct = (data.sync * 100).toFixed(2);
            if (network) network.textContent = data.chain;
            if (block)   block.textContent   = 'Block ' + data.blocks;
            if (sync)    sync.textContent    = 'Sync ' + syncPct + '%';
            const bh = document.getElementById('block-height');
            const sp = document.getElementById('sync-pct');
            if (bh) bh.textContent = data.blocks;
            if (sp) sp.textContent = syncPct + '%';
            if (data.blocks !== lastBlockHeight) {
                lastBlockHeight = data.blocks;
                refreshActiveTab();
            }
        } else {
            dot.className = 'status-dot disconnected';
            if (network) network.textContent = 'Not connected';
            if (block)   block.textContent   = '';
            if (sync)    sync.textContent    = '';
        }
    } catch (e) {
        document.getElementById('status-dot').className = 'status-dot disconnected';
        const network = document.getElementById('sidebar-network');
        if (network) network.textContent = 'Server unreachable';
    }
```

Also update the two lines just above the `if (data.node_connected)` block that reference `text`:

Find (lines ~225–227 inside `checkStatus`):
```javascript
        const dot = document.getElementById('status-dot');
        const text = document.getElementById('status-text');

        if (data.node_connected) {
```

Replace with:
```javascript
        const dot = document.getElementById('status-dot');

        if (data.node_connected) {
```

- [ ] **Step 4: Update `initOnline()` — remove status-text reference**

At line ~193, find inside `initOnline()`:
```javascript
        const dot = document.getElementById('status-dot');
        const text = document.getElementById('status-text');
        text.textContent = 'Starting Python backend...';
```

Replace with:
```javascript
        const network = document.getElementById('sidebar-network');
        if (network) network.textContent = 'Starting…';
```

- [ ] **Step 5: Update `enterOnlineWallet()` — flex display, hide home container**

At line ~267, find `enterOnlineWallet()` and update the show/hide block:

Find:
```javascript
            document.getElementById('online-home').style.display = 'none';
            document.getElementById('main-ui').style.display = 'block';
            document.getElementById('logout-btn').style.display = 'inline-block';
```

Replace with:
```javascript
            document.getElementById('online-home').style.display = 'none';
            document.getElementById('home-container').style.display = 'none';
            document.getElementById('main-ui').style.display = 'flex';
            document.getElementById('logout-btn').style.display = 'inline-block';
```

- [ ] **Step 6: Update `showOnlineHome()` — show home container**

At line ~288, find `showOnlineHome()`:

Find:
```javascript
    document.getElementById('main-ui').style.display = 'none';
    document.getElementById('online-home').style.display = 'block';
    document.getElementById('logout-btn').style.display = 'none';
```

Replace with:
```javascript
    document.getElementById('main-ui').style.display = 'none';
    document.getElementById('home-container').style.display = 'block';
    document.getElementById('online-home').style.display = 'block';
    document.getElementById('logout-btn').style.display = 'none';
```

- [ ] **Step 7: Update `enterOfflineWallet()` — flex display, hide home container**

At line ~1483, find:
```javascript
    document.getElementById('offline-home').style.display = 'none';
    document.getElementById('main-ui').style.display = 'block';
    document.getElementById('logout-btn').style.display = 'inline-block';
```

Replace with:
```javascript
    document.getElementById('offline-home').style.display = 'none';
    document.getElementById('home-container').style.display = 'none';
    document.getElementById('main-ui').style.display = 'flex';
    document.getElementById('logout-btn').style.display = 'inline-block';
```

- [ ] **Step 8: Update `showOfflineHome()` — show home container**

At line ~1399, find `showOfflineHome()`:

Find:
```javascript
    document.getElementById('main-ui').style.display = 'none';
    document.getElementById('offline-home').style.display = 'block';
    document.getElementById('logout-btn').style.display = 'none';
```

Replace with:
```javascript
    document.getElementById('main-ui').style.display = 'none';
    document.getElementById('home-container').style.display = 'block';
    document.getElementById('offline-home').style.display = 'block';
    document.getElementById('logout-btn').style.display = 'none';
```

- [ ] **Step 9: Verify the Tauri app loads correctly**

Open `tauri/src/index.html` in a browser (or build and run the Tauri app).

Check:
- Home screen renders without sidebar (sidebar only appears when wallet is loaded)
- After selecting a wallet, sidebar appears with "Armory" title and nav items
- Clicking nav items switches panels
- Settings appears in sidebar footer
- Status dot + network/block/sync update when connected
- Log Out button appears in sidebar footer when wallet is loaded

- [ ] **Step 10: Commit**

```bash
git add tauri/src/app.js
git commit -m "feat: update Tauri JS for sidebar nav"
```

---

## Task 4: Restructure web app HTML layout

**Files:**
- Modify: `ui/static/index.html`

- [ ] **Step 1: Add `id="home-container"` to `.container`**

Line 10, change:
```html
    <div class="container">
```
to:
```html
    <div class="container" id="home-container">
```

- [ ] **Step 2: Remove the `<header>` block (lines 11–20)**

Remove:
```html
        <header>
            <h1><span>Armory</span> Online</h1>
            <div style="display: flex; align-items: center; gap: 16px;">
                <button id="logout-btn" class="secondary" onclick="logoutOnlineWallet()" style="display:none; font-size: 12px; padding: 5px 12px;">Log Out</button>
                <div id="node-status">
                    <span class="status-dot disconnected" id="status-dot"></span>
                    <span id="status-text">Connecting...</span>
                </div>
            </div>
        </header>
```

- [ ] **Step 3: Replace `<div id="main-ui">` and its static `<nav>` with the full sidebar structure**

The web app's `#main-ui` and `<nav>` currently start at line 76–87. Find and replace:

Find:
```html
        <div id="main-ui" style="display:none">
            <nav>
                <button class="active" onclick="showTab('overview')">Overview</button>
                <button onclick="showTab('transactions')">Transactions</button>
                <button onclick="showTab('explorer')">Explorer</button>
                <button onclick="showTab('receive')">Receive</button>
                <button onclick="showTab('send')">Send</button>
                <button onclick="showTab('broadcast')">Broadcast</button>
                <button onclick="showTab('silent')">Silent Payments</button>
                <button onclick="showTab('addresses')">Addresses</button>
                <button onclick="showTab('settings')">Settings</button>
            </nav>
```

Replace with:
```html
    </div><!-- /#home-container -->

    <div id="main-ui" style="display:none">
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">Armory</div>
                <div class="sidebar-status">
                    <div class="sidebar-status-network">
                        <span class="status-dot disconnected" id="status-dot"></span>
                        <span id="sidebar-network">–</span>
                    </div>
                    <div class="sidebar-status-detail" id="sidebar-block"></div>
                    <div class="sidebar-status-detail" id="sidebar-sync"></div>
                </div>
            </div>
            <nav class="sidebar-nav" id="main-nav">
                <button class="nav-item active" onclick="showTab('overview', this)"><span class="nav-icon">◈</span> Overview</button>
                <button class="nav-item" onclick="showTab('transactions', this)"><span class="nav-icon">⟳</span> Transactions</button>
                <button class="nav-item" onclick="showTab('explorer', this)"><span class="nav-icon">⌕</span> Explorer</button>
                <button class="nav-item" onclick="showTab('receive', this)"><span class="nav-icon">↓</span> Receive</button>
                <button class="nav-item" onclick="showTab('send', this)"><span class="nav-icon">↑</span> Send</button>
                <button class="nav-item" onclick="showTab('broadcast', this)"><span class="nav-icon">⇢</span> Broadcast</button>
                <button class="nav-item" onclick="showTab('silent', this)"><span class="nav-icon">◎</span> Silent Pmts</button>
                <button class="nav-item" onclick="showTab('addresses', this)"><span class="nav-icon">≡</span> Addresses</button>
            </nav>
            <div class="sidebar-footer">
                <button class="nav-item" onclick="showTab('settings', this)"><span class="nav-icon">⚙</span> Settings</button>
                <button id="logout-btn" class="secondary" onclick="logoutOnlineWallet()" style="display:none; width:100%; margin-top:4px; font-size:12px; padding:5px 9px;">Log Out</button>
            </div>
        </aside>
        <div class="main-content">
```

- [ ] **Step 4: Fix the closing tags**

At the end of `#main-ui`, the current closing tag closes both `#main-ui` and `.container`. After the restructure, `#home-container` was already closed in Step 3, so we only need to close `.main-content` and `#main-ui`.

Find the last two closing `</div>` tags at the bottom of the file (before `<script>`):
```html
        </div>
    </div>
    <script src="/app.js"></script>
```

Replace with:
```html
        </div><!-- /.main-content -->
    </div><!-- /#main-ui -->
    <script src="/app.js"></script>
```

- [ ] **Step 5: Verify structure**

Run:
```bash
grep -n "id=\"home-container\"\|id=\"main-ui\"\|class=\"main-content\"\|class=\"sidebar\"" ui/static/index.html
```

Expected (4 lines in order):
```
10:    <div class="container" id="home-container">
NN:    <div id="main-ui" style="display:none">
NN:        <aside class="sidebar">
NN:        <div class="main-content">
```

- [ ] **Step 6: Commit**

```bash
git add ui/static/index.html
git commit -m "feat: restructure web HTML for sidebar layout"
```

---

## Task 5: Update web app JS functions

**Files:**
- Modify: `ui/static/app.js`

- [ ] **Step 1: Update `checkStatus()` — write to sidebar elements**

At line 45, in `checkStatus()`, replace the entire status-update block:

Find:
```javascript
        const dot = document.getElementById('status-dot');
        const text = document.getElementById('status-text');

        if (data.node_connected) {
            dot.className = 'status-dot connected';
            const syncPct = (data.sync * 100).toFixed(2);
            text.textContent = `${data.chain} | Block ${data.blocks} | Sync ${syncPct}%`;
            document.getElementById('block-height').textContent = data.blocks;
            document.getElementById('sync-pct').textContent = syncPct + '%';
```

Replace with:
```javascript
        const dot     = document.getElementById('status-dot');
        const network = document.getElementById('sidebar-network');
        const block   = document.getElementById('sidebar-block');
        const sync    = document.getElementById('sidebar-sync');

        if (data.node_connected) {
            dot.className = 'status-dot connected';
            const syncPct = (data.sync * 100).toFixed(2);
            if (network) network.textContent = data.chain;
            if (block)   block.textContent   = 'Block ' + data.blocks;
            if (sync)    sync.textContent    = 'Sync ' + syncPct + '%';
            document.getElementById('block-height').textContent = data.blocks;
            document.getElementById('sync-pct').textContent = syncPct + '%';
```

Also update the `else` and `catch` blocks. Find:
```javascript
        } else {
            dot.className = 'status-dot disconnected';
            text.textContent = 'Not connected to Bitcoin Core';
```

Replace with:
```javascript
        } else {
            dot.className = 'status-dot disconnected';
            if (network) network.textContent = 'Not connected';
            if (block)   block.textContent   = '';
            if (sync)    sync.textContent    = '';
```

Find:
```javascript
        document.getElementById('status-dot').className = 'status-dot disconnected';
        document.getElementById('status-text').textContent = 'Server unreachable';
```

Replace with:
```javascript
        document.getElementById('status-dot').className = 'status-dot disconnected';
        const net = document.getElementById('sidebar-network');
        if (net) net.textContent = 'Server unreachable';
```

- [ ] **Step 2: Update `showTab()` — add `btn` parameter, fix selectors**

At line 273, replace the entire `showTab` function:

```javascript
function showTab(name, btn) {
    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.nav-item').forEach(b => b.classList.remove('active'));

    document.getElementById('tab-' + name).classList.add('active');
    if (btn) btn.classList.add('active');

    if (name === 'overview') refreshBalance();
    if (name === 'transactions') loadTransactions();
    if (name === 'explorer') loadExplorer();
    if (name === 'receive') loadReceiveAddresses();
    if (name === 'send') loadFeeEstimates();
    if (name === 'silent') loadSpTab();
    if (name === 'addresses') loadAddresses();
    if (name === 'settings') loadSettings();
}
```

- [ ] **Step 3: Update `enterOnlineWallet()` — flex display, hide home container**

At line ~176, find:
```javascript
            document.getElementById('online-home').style.display = 'none';
            document.getElementById('main-ui').style.display = 'block';
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) logoutBtn.style.display = 'inline-block';
```

Replace with:
```javascript
            document.getElementById('online-home').style.display = 'none';
            document.getElementById('home-container').style.display = 'none';
            document.getElementById('main-ui').style.display = 'flex';
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) logoutBtn.style.display = 'inline-block';
```

- [ ] **Step 4: Update `showOnlineHome()` — show home container**

At line ~85, find:
```javascript
    document.getElementById('main-ui').style.display = 'none';
    document.getElementById('online-home').style.display = 'block';
```

Replace with:
```javascript
    document.getElementById('main-ui').style.display = 'none';
    document.getElementById('home-container').style.display = 'block';
    document.getElementById('online-home').style.display = 'block';
```

- [ ] **Step 5: Verify the web app works**

Start the Flask server and open the web UI in a browser:

```bash
cd ui && python app.py
```

Check:
- Home screen (wallet list / import) renders without sidebar
- After loading a wallet, sidebar appears with nav items and status
- Clicking nav items switches panels correctly
- Settings in sidebar footer works
- Log Out button appears in sidebar footer

- [ ] **Step 6: Commit**

```bash
git add ui/static/app.js
git commit -m "feat: update web app JS for sidebar nav"
```

---

## Task 6: Remove old CSS rules

**Files:**
- Modify: `tauri/src/style.css`
- Modify: `ui/static/style.css`

Both files are identical — apply the same removal to each.

- [ ] **Step 1: Remove `header`, `header h1`, `header h1 span` rules from `tauri/src/style.css`**

Remove these rules (lines ~44–58):

```css
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

header h1 {
    font-size: 20px;
    font-weight: 600;
}

header h1 span { color: var(--accent); }
```

- [ ] **Step 2: Remove `#node-status` rule from `tauri/src/style.css`**

Remove:
```css
#node-status {
    font-size: 13px;
    color: var(--text-dim);
}
```

- [ ] **Step 3: Remove old `nav` and `nav button` rules from `tauri/src/style.css`**

Remove:
```css
nav {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
    overflow-x: auto;
}

nav button {
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 8px 16px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all 0.15s;
    white-space: nowrap;
}

nav button:hover { color: var(--text); }
nav button.active {
    color: var(--text);
    border-bottom-color: var(--accent);
}
```

- [ ] **Step 4: Apply identical removals to `ui/static/style.css`**

Remove the same three blocks (same content, same line numbers approximately) from `ui/static/style.css`.

- [ ] **Step 5: Remove `margin-right` from `.status-dot` in both style sheets**

The `.status-dot` rule currently has `margin-right: 6px` left over from the old inline header layout. The sidebar uses `gap: 4px` on `.sidebar-status-network`, so the margin is redundant and causes extra spacing.

Find in both files:
```css
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
```

Replace with:
```css
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
```

- [ ] **Step 6: Verify both apps still work after CSS cleanup**

Open both apps and confirm nav items still highlight correctly and there are no visual regressions from the CSS removal.

- [ ] **Step 7: Commit**

```bash
git add tauri/src/style.css ui/static/style.css
git commit -m "chore: remove old header/nav CSS now replaced by sidebar"
```

---

## Completion

After all 6 tasks are committed, both apps should show a vertical sidebar with:
- "Armory" title at top
- Network dot + name, block height, sync % (online) or "offline" label (offline mode)
- Icon + label nav items with 10px-radius active highlight
- Settings pinned to footer
- Log Out button in footer (visible only when wallet loaded)
