initiative/specs/032-inline-confirm-buttons/quickstart.md

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

# 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