client/plans/template-update-plan.md

# Template.html Update Plan

## Overview
Update `www/template.html` to match the formatting and features from `www/blobs.html` without adding blob/blossom server functionality. The template should serve as a clean starting point for future pages.

## Key Changes Required

### 1. Header Updates
**Current State (template.html):**
- Uses static SVG hamburger menu with hardcoded path
- Simple SVG structure in `#divSvgHam`

**Target State (blobs.html):**
- Uses HamburgerMorphing library for animated hamburger menu
- Hamburger morphs to X when sidenav opens
- Container div for HamburgerMorphing injection

**Changes:**
- Replace static SVG with container div for HamburgerMorphing
- Add SVG.js library dependency (required by HamburgerMorphing)
- Import HamburgerMorphing module
- Initialize hamburger instance with morphing animation
- Update click handlers to trigger morphing animations

### 2. Footer Updates
**Current State (template.html):**
```html
<div id="divFooter">
  <div id="divFoot01" class="divFooterBox"></div>
  <div id="divFoot02" class="divFooterBox"></div>
  <div id="divFoot03" class="divFooterBox"></div>
  <div id="divFoot04" class="divFooterBox"></div>
  <div id="divFoot05" class="divFooterBox"></div>
</div>
```

**Target State (blobs.html):**
```html
<div id="divFooter" style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
  <div id="divFooterLeft" class="divFooterSection" style="flex: 1; height: 100%; display: flex; justify-content: flex-start; align-items: center; padding: 0 10px; border-right: 3px solid var(--primary-color); gap: 5px;"></div>
  <div id="divFooterCenter" class="divFooterSection" style="flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; padding: 0 10px; border-right: 3px solid var(--primary-color);"></div>
  <div id="divFooterRight" class="divFooterSection" style="flex: 1; height: 100%; display: flex; justify-content: flex-end; align-items: center; padding: 0 10px;"></div>
</div>
```

**Changes:**
- Replace 5-box footer with 3-section layout (left, center, right)
- Add flexbox styling for proper alignment
- Left section: Relay status animations (HamburgerMorphing instances)
- Center section: General status info
- Right section: Additional info

### 3. Sidenav Footer (Version Bar)
**Current State (template.html):**
- No footer in sidenav
- Sidenav ends with `divSideNavBody`

**Target State (blobs.html):**
```html
<div id="divVersionBar" style="flex-shrink: 0; height: max(var(--header-height), var(--header-min-height)); min-height: var(--header-min-height); background-color: var(--secondary-color); border-top: 3px solid var(--primary-color); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; box-sizing: border-box;">
  <span id="versionDisplay" style="font-size: 14px; color: var(--primary-color); font-weight: 500;">v0.0.1</span>
  <div style="display: flex; gap: 10px; align-items: center;">
    <button id="themeToggleButton" style="background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease;" title="Toggle Dark/Light Mode">
      <div id="themeToggleHamburgerContainer" style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;"></div>
    </button>
    <button id="logoutButton" style="background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease;" title="Logout">
      <div id="logoutHamburgerContainer" style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;"></div>
    </button>
  </div>
</div>
```

**Changes:**
- Add version bar footer to sidenav
- Include version display
- Add theme toggle button with HamburgerMorphing icon (moon/circle)
- Add logout button with HamburgerMorphing icon (X)
- Initialize HamburgerMorphing instances for both buttons

### 4. Relay Status Visualization
**Current State (template.html):**
- No relay status visualization
- Footer shows static pubkey info

**Target State (blobs.html):**
- Dynamic relay status icons in footer left section
- Each connected relay gets a HamburgerMorphing instance
- Icons morph based on relay activity:
  - `plus`: Connected, can read and write
  - `arrow_up`: Only uploads
  - `arrow_down`: More downloads
  - `carrot_up`: Active write (temporary, 3 seconds)
  - `carrot_down`: Active read (temporary, 3 seconds)

**Changes:**
- Import `getRelayData` and `getRelayStats` from init-ndk.mjs
- Add relay status tracking variables:
  - `relayStatusInstances` (Map): relay URL → HamburgerMorphing instance
  - `relayActivityStates` (Map): relay URL → { activity, timeout }
  - `lastRelayShapes` (Map): relay URL → last rendered shape
- Implement `updateRelayStatusVisuals()` function
- Implement `setRelayActivityState()` function
- Listen for 'ndkRelayActivity' events from worker
- Update footer periodically with relay status

### 5. JavaScript Structure Updates

#### Variables to Add:
```javascript
// Hamburger menu
let hamburgerInstance = null;
let isNavOpen = false;

// Relay status visualization
let relayStatusInstances = new Map();
let relayActivityStates = new Map();
let lastRelayShapes = new Map();

// Version bar buttons
let logoutHamburger = null;
let themeToggleHamburger = null;
let isDarkMode = false;
```

#### Functions to Add:
```javascript
// Hamburger menu initialization
function initHamburgerMenu() { ... }

// Sidenav functions (update to use morphing)
function openNav() { ... }
function closeNav() { ... }
function toggleNav() { ... }

// Relay status visualization
async function updateRelayStatusVisuals() { ... }
function setRelayActivityState(relayUrl, activity) { ... }

// Update footer
const UpdateFooter = async () => { ... }
```

#### Event Listeners to Update:
```javascript
// Hamburger click handler
divSvgHam.addEventListener('click', toggleNav);

// Listen for relay activity
window.addEventListener('ndkRelayActivity', (event) => { ... });
window.addEventListener('message', (event) => { ... });

// Theme toggle button
themeToggleButton.addEventListener('click', () => { ... });

// Logout button
logoutButton.addEventListener('click', async () => { ... });
```

### 6. Import Updates
**Add to imports:**
```javascript
import { initNDKPage, getPubkey, subscribe, publishEvent, disconnect, getRelayData, getRelayStats } from './js/init-ndk.mjs';
import { HamburgerMorphing } from "./hamburger_morphing/hamburger.mjs";
```

**Add to head:**
```html
<!-- SVG.js library (required by HamburgerMorphing) -->
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
```

### 7. Initialization Sequence Updates

**Current:**
1. Initialize NDK
2. Get pubkey
3. Start update loop

**Target:**
1. Initialize hamburger menu
2. Add click handler to hamburger
3. Initialize version bar buttons (lazy load when sidenav opens)
4. Initialize NDK
5. Get pubkey
6. Listen for relay activity events
7. Start update loop (includes relay status updates)

## Implementation Steps

### Step 1: Update HTML Structure
- [ ] Add SVG.js library to `<head>`
- [ ] Replace hamburger SVG with container div
- [ ] Update footer structure (5 boxes → 3 sections)
- [ ] Add version bar to sidenav

### Step 2: Update JavaScript Imports
- [ ] Add HamburgerMorphing import
- [ ] Add getRelayData and getRelayStats imports

### Step 3: Add Variables
- [ ] Add hamburger menu variables
- [ ] Add relay status tracking variables
- [ ] Add version bar button variables

### Step 4: Implement Functions
- [ ] Implement `initHamburgerMenu()`
- [ ] Update `openNav()` with morphing animation
- [ ] Update `closeNav()` with morphing animation
- [ ] Add `toggleNav()` function
- [ ] Implement `updateRelayStatusVisuals()`
- [ ] Implement `setRelayActivityState()`
- [ ] Update `UpdateFooter()` to include relay status

### Step 5: Update Event Listeners
- [ ] Update hamburger click handler
- [ ] Add relay activity event listeners
- [ ] Add theme toggle button listener
- [ ] Add logout button listener

### Step 6: Update Initialization
- [ ] Initialize hamburger menu first
- [ ] Lazy load version bar buttons when sidenav opens
- [ ] Add relay activity event listeners
- [ ] Update footer update loop

## Key Differences to Maintain

### Keep from template.html:
- Generic page structure (no blob-specific functionality)
- Example subscription/publish code in comments
- Educational comments explaining architecture
- Simple, clean body content

### Remove from template.html:
- Static hamburger SVG
- 5-box footer layout
- Simple pubkey display in footer

### Add from blobs.html:
- HamburgerMorphing animations
- 3-section footer with relay status
- Sidenav version bar with theme toggle and logout
- Relay status visualization
- Dynamic footer updates

## Testing Checklist

After implementation:
- [ ] Hamburger menu morphs to X when clicked
- [ ] Hamburger morphs back to burger when sidenav closes
- [ ] Footer shows relay status icons (if relays connected)
- [ ] Relay icons animate on activity
- [ ] Theme toggle button shows correct icon (moon/circle)
- [ ] Theme toggle works correctly
- [ ] Logout button shows X icon
- [ ] Logout button works correctly
- [ ] Footer updates every second
- [ ] No blob-specific functionality present

## Notes

- The template should remain generic and educational
- All HamburgerMorphing instances should be properly initialized
- Relay status visualization should gracefully handle no relays
- Version bar buttons should lazy load to avoid initialization errors
- Keep all the helpful comments from template.html
- Maintain the distributed architecture documentation