# Button Behavior Standardization Plan

## Desired Standard Behavior

```
Default:    border: primary-color, background: secondary-color, text: primary-color
Hover:      border: accent-color, background: secondary-color, text: primary-color
Click:      border: primary-color, background: accent-color, text: secondary-color
```

In summary:
- **Hover** → border turns accent-color (everything else stays)
- **Click/Active** → fill turns accent-color, border returns to primary-color, text inverts to secondary-color

---

## Current client.css Button Variables (lines 122–129)

```css
--button-color: var(--primary-color);
--button-background-color: var(--secondary-color);
--button-hover-color: var(--accent-color);
--button-click-color: var(--muted-color);        /* WRONG — should be accent-color */
--button-border-color: var(--primary-color);
--button-border-radius: var(--border-radius);
--button-border-width: var(--border-width);
```

### Problems in client.css

1. **`--button-click-color` is `var(--muted-color)`** — should be `var(--accent-color)` for the fill on click
2. **No global button rule** — there is no `button { ... }` or `.btn { ... }` base class in client.css that applies the standard hover/active behavior. Each page defines its own button styles independently.
3. **No `:active` pseudo-class** defined globally — the click state is never standardized.
4. **Hover behavior varies** — some pages change `background-color` on hover (wrong), some change `border-color` (correct), some change `color` (text color — inconsistent).

### What client.css SHOULD add

A base button class (e.g., `.btn`) with:
```css
.btn {
  font-family: var(--font-family);
  color: var(--button-color);
  background-color: var(--button-background-color);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn:hover {
  border-color: var(--accent-color);
}

.btn:active {
  background-color: var(--accent-color);
  color: var(--secondary-color);
  border-color: var(--primary-color);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

---

## Per-Page Audit

### index.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divAppButtons` | `background-color: var(--button-hover-color)` | none | Hover fills background instead of changing border |
| `.inpKeyButton` | `background-color: var(--button-hover-color)` | `background-color: var(--button-click-color)` | Hover fills bg; click uses muted-color |
| `.inpCheckBox` | `background-color: var(--button-hover-color)` | none | Hover fills bg |
| `.svgBtn` | cursor only | none | No visual feedback |

**Fix needed:** `.divAppButtons` hover should change border only. `.inpKeyButton` active should use accent fill.

### ai.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `#btnAiNewChat` | `background: var(--accent-color); color: var(--secondary-color)` | none | Hover does fill+text change — should be border only |
| `#btnAiSend` | `background: var(--accent-color); color: var(--secondary-color)` | none | Same — hover does fill |
| `.aiButton` | `background: var(--accent-color); color: var(--secondary-color)` | none | Same |
| `.aiDeleteConvBtn` | `color: var(--accent-color); border-color: var(--accent-color)` | none | Hover changes border+icon color — close to correct but no active state |
| `.aiConversationItem` | `border-color: var(--accent-color)` | none | Correct hover behavior |

**Fix needed:** `#btnAiNewChat`, `#btnAiSend`, `.aiButton` hover should only change border. Add `:active` with accent fill.

### cashu.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.cashuBtn` | `background: var(--accent-color); color: var(--secondary-color)` | none | Hover fills — should be border only |
| `.cashuBtn.active` | `background: var(--primary-color); color: var(--secondary-color)` | — | Toggle state, not click — acceptable for tab buttons |
| `.mintDiscoveryAdd:hover` | `background: var(--accent-color)` | none | Hover fills |

**Fix needed:** `.cashuBtn` hover should change border only. Add `:active` with accent fill. The `.active` toggle class for tabs is a separate concern and can stay.

### tools.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divButton` | `background-color: var(--accent-color)` | `background-color: var(--muted-color)` | Hover fills bg; active uses muted |
| `.clsClipboard` | `opacity: 0.8` | `background-color: var(--muted-color)` | Hover dims; active uses muted |

**Fix needed:** `.divButton` hover should change border. Active should use accent fill. `.clsClipboard` active should use accent.

### event.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.btnKind` | `background-color: var(--accent-color)` | none | Hover fills |
| `.btnKindActive` | `background-color: var(--primary-color); color: var(--secondary-color)` | — | Toggle state — acceptable |
| `.btnAction` | `background-color: var(--accent-color)` | none | Hover fills |

**Fix needed:** `.btnKind` and `.btnAction` hover should change border only. Add `:active`.

### blobs.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.btnServer` | `background-color: var(--button-hover-color)` | none | Hover fills bg |
| `.btnAction` | `background-color: var(--accent-color)` | none | Hover fills |
| `.btnDelete` | `background-color: var(--accent-color)` | none | Hover fills |
| `.btnDeleteBlob` | `border-color: var(--accent-color)` | none | Correct hover |

**Fix needed:** `.btnServer`, `.btnAction`, `.btnDelete` hover should change border only.

### post.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `#btnSeeMore` | `color: var(--button-hover-color)` | none | Changes text color on hover — should change border |
| `#btnMarkRead` | `color: var(--button-hover-color)` | none | Same |
| `.viewed-sidenav-control` | `color: var(--button-hover-color)` | none | Same |

**Fix needed:** All should change border-color on hover, not text color.

### msg.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `#btnSendMessage` | `color: var(--button-hover-color)` | none | Changes text color |
| `.msgConversationItem` | `border-color: var(--accent-color)` | none | Correct |

**Fix needed:** `#btnSendMessage` hover should change border.

### note.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divNoteTitle` | `background-color: var(--button-hover-color)` | none | Hover fills bg |
| `.divNewNote` | `background-color: var(--button-hover-color)` | none | Same |
| `#tblNotes tr` | `background: var(--button-hover-color)` | none | Table row — acceptable |
| `#btnSaveNote` | inline style `background-color: var(--button-hover-color)` | none | Inline style — needs refactor |

**Fix needed:** Button hovers should change border. Table row hover is acceptable.

### todo.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divTodo` | `border-color: var(--accent-color)` | none | Correct |
| `.btnReorder` | `border-color: var(--accent-color)` on hover | `background-color: var(--muted-color)` on active | Hover correct; active uses muted instead of accent |

**Fix needed:** `.btnReorder:active` should use accent fill.

### db.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.btnRefresh` | `background: var(--accent-color)` | none | Hover fills |
| `#tblDB th` | `background: var(--accent-color)` | none | Table header — acceptable |

**Fix needed:** `.btnRefresh` hover should change border only.

### didactyl.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.btn` | `background-color: var(--accent-color); color: var(--secondary-color)` | none | Hover fills |

**Fix needed:** Hover should change border only. Add `:active`.

### profile.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divButton` | `cursor: pointer` only | none | No visual hover feedback at all |

**Fix needed:** Add border-color change on hover and accent fill on active.

### relays.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divSvg` | `stroke: var(--button-hover-color)` | none | SVG icon — acceptable |
| `.tblRelayRow` | `cursor: pointer` | none | Table row — minimal |

**Fix needed:** Minor — relay rows could use border highlight.

### cal.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.divQuickButton` | `background-color: red` | none | Hardcoded red — should use var |
| `.divFood` | `background-color: var(--button-hover-color)` | none | Hover fills |
| `.divServingButton` | `background-color: red` | none | Hardcoded red |
| `.divButton` | `background-color: var(--button-hover-color)` | none | Hover fills |
| `.AddFood, .EditFood` | `background-color: green` | none | Hardcoded green |
| `.DelFood` | `background-color: red` | none | Hardcoded red |

**Fix needed:** Replace hardcoded colors with CSS variables. Change hover to border-only.

### links.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `#btnAddLink` | inline style, no hover | none | No visual feedback |
| `#btnDownloadBookmarks` | inline style, no hover | none | No visual feedback |

**Fix needed:** Add proper button classes.

### npub.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `#divQRContainer` | none | `background-color: var(--button-hover-color)` | Active uses hover color for bg |

**Fix needed:** Active should use accent-color.

### test42.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `.button` | `background: #ff6b6b` | none | Hardcoded colors — test page, low priority |

### tab.html
| Class/ID | Hover | Active/Click | Issue |
|---|---|---|---|
| `button` | `background: #5568d3` | none | Hardcoded colors — test page, low priority |

---

## Implementation Plan

### Step 1: Fix client.css button variables
- Change `--button-click-color` from `var(--muted-color)` to `var(--accent-color)`
- Add `--button-click-text-color: var(--secondary-color)` variable

### Step 2: Add global `.btn` base class to client.css
- Standard default/hover/active/disabled states
- All pages can opt in by adding `class="btn"` to their buttons

### Step 3: Fix pages in priority order

**High priority — main user-facing pages:**
1. `ai.html` — `#btnAiNewChat`, `#btnAiSend`, `.aiButton`
2. `cashu.html` — `.cashuBtn`
3. `index.html` — `.divAppButtons`
4. `post.html` — `#btnSeeMore`, `#btnMarkRead`
5. `msg.html` — `#btnSendMessage`

**Medium priority:**
6. `tools.html` — `.divButton`, `.clsClipboard`
7. `event.html` — `.btnKind`, `.btnAction`
8. `blobs.html` — `.btnServer`, `.btnAction`, `.btnDelete`
9. `todo.html` — `.btnReorder` active state
10. `db.html` — `.btnRefresh`
11. `didactyl.html` — `.btn`
12. `note.html` — `.divNoteTitle`, `.divNewNote`, `#btnSaveNote`

**Low priority:**
13. `cal.html` — replace hardcoded colors
14. `links.html` — add button classes
15. `profile.html` — add hover/active
16. `relays.html` — minor row highlights
17. `npub.html` — fix active color
18. `test42.html`, `tab.html` — test pages, optional

### Step 4: Verify dark mode
- Ensure all changes work in both light and dark mode since CSS variables auto-adapt.