Implement the 019-combatant-row-declutter feature that replaces always-visible HP controls and AC/MaxHP inputs with compact click-to-edit and click-to-adjust patterns in the encounter tracker

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-06 15:07:04 +01:00
parent e59fd83292
commit 0c0da9b90e
11 changed files with 723 additions and 207 deletions

View File

@@ -0,0 +1,44 @@
# Quickstart: Combatant Row Declutter
**Feature**: 019-combatant-row-declutter
**Date**: 2026-03-06
## What This Feature Does
Replaces always-visible HP adjustment controls and AC input with compact, on-demand interactions:
1. **HP**: Click the current HP number to open a small popover for damage/healing.
2. **AC**: Click the shield+number display to edit AC inline.
## Key Files
| File | Role |
|------|------|
| `apps/web/src/components/combatant-row.tsx` | Main combatant row — modified to use new patterns |
| `apps/web/src/components/hp-adjust-popover.tsx` | New popover component for HP adjustment |
| `apps/web/src/components/quick-hp-input.tsx` | Removed — replaced by HP popover |
## How It Works
### HP Adjustment Flow
1. Current HP displays as a clickable, color-coded number (amber=bloodied, red=unconscious)
2. Click opens a popover with auto-focused numeric input + Damage/Heal buttons
3. Enter = apply damage (negative delta), Shift+Enter = apply healing (positive delta)
4. Popover dismisses on action, Escape, or click-outside
### AC Edit Flow
1. AC displays as static text: shield icon + number (or just shield if unset)
2. Click opens inline input (same pattern as editable name)
3. Enter/blur commits, Escape cancels
## Development
```bash
pnpm --filter web dev # Start dev server
pnpm check # Run full quality gate before committing
```
## Constraints
- Domain and application layers are unchanged
- `onAdjustHp` and `onSetAc` callback signatures unchanged
- Max HP input remains always-visible