41 lines
1.6 KiB
Markdown
41 lines
1.6 KiB
Markdown
# 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
|