# Quickstart: Inline Confirmation Buttons

## What This Feature Does

Replaces single-click destructive actions and browser `window.confirm()` dialogs with inline two-step confirmation buttons. Click once to arm, click again to execute. The button visually transforms (checkmark icon, red background, scale pulse) to signal the armed state, and auto-reverts after 5 seconds.

## Files to Create

- `apps/web/src/components/ui/confirm-button.tsx` — Reusable ConfirmButton component

## Files to Modify

- `apps/web/src/components/combatant-row.tsx` — Replace remove Button with ConfirmButton
- `apps/web/src/components/turn-navigation.tsx` — Replace trash Button with ConfirmButton
- `apps/web/src/hooks/use-encounter.ts` — Remove `window.confirm()` from clearEncounter
- `apps/web/src/index.css` — Add scale pulse keyframe animation

## How to Test

```bash
# Run all tests
pnpm test

# Run the dev server and test manually
pnpm --filter web dev
# 1. Add a combatant
# 2. Click the X button — should enter red confirm state
# 3. Click again — combatant removed
# 4. Click X, wait 5 seconds — should revert
# 5. Click trash button — same confirm behavior for clearing encounter
# 6. Test keyboard: Tab to button, Enter, Enter (confirm), Escape (cancel)
```

## Key Design Decisions

- ConfirmButton wraps the existing `Button` component (no new base component)
- Confirm state is local `useState` — no shared state or context needed
- Click-outside detection follows the `HpAdjustPopover` pattern (mousedown listener)
- Animation uses CSS `@keyframes` + `@utility` like existing animations
- Uses `bg-destructive text-primary-foreground` for the confirm state