# 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