Replace confirmation modals with inline confirmation buttons for destructive actions. On first click, the button transitions into a confirm state — swapping the icon to a Lucide Check on a red/danger background with a subtle scale pulse animation. The button reverts after 5 seconds if not clicked again. This provides a faster, more modern UX while still preventing accidental destructive actions.
Acceptance Criteria
Confirm-to-delete for removing a combatant
Clicking the remove button once transitions it to a confirm state with a checkmark icon, red/danger background, and scale pulse animation
Clicking the confirm-state button a second time removes the combatant
The button reverts to its original state after 5 seconds without a second click
Clicking outside the button cancels the confirm state without removing the combatant
Pressing Escape cancels the confirm state without removing the combatant
Confirm-to-clear for resetting the encounter
Clicking the clear encounter button once transitions it to a confirm state with a checkmark icon, red/danger background, and scale pulse animation
Clicking the confirm-state button a second time clears the entire encounter
The button reverts after 5 seconds, on click-outside, or on Escape without clearing the encounter
The clear button remains disabled when there are no combatants
Keyboard-accessible confirmation flow
Pressing Enter or Space on a focused destructive button enters the confirm state
Pressing Enter or Space again in confirm state executes the destructive action
Pressing Escape in confirm state reverts the button
Tabbing away from a confirm-state button reverts it to its original state
Edge Cases
Rapid triple-click results in confirm then execute — no errors from extra clicks
Timer is cleaned up if the component unmounts while in confirm state
Multiple confirm buttons can be in confirm state independently
Confirm state persists through re-renders as long as the item identity is stable
## Summary
Replace confirmation modals with inline confirmation buttons for destructive actions. On first click, the button transitions into a confirm state — swapping the icon to a Lucide `Check` on a red/danger background with a subtle scale pulse animation. The button reverts after 5 seconds if not clicked again. This provides a faster, more modern UX while still preventing accidental destructive actions.
## Acceptance Criteria
### Confirm-to-delete for removing a combatant
- [x] Clicking the remove button once transitions it to a confirm state with a checkmark icon, red/danger background, and scale pulse animation
- [x] Clicking the confirm-state button a second time removes the combatant
- [x] The button reverts to its original state after 5 seconds without a second click
- [x] Clicking outside the button cancels the confirm state without removing the combatant
- [x] Pressing Escape cancels the confirm state without removing the combatant
### Confirm-to-clear for resetting the encounter
- [x] Clicking the clear encounter button once transitions it to a confirm state with a checkmark icon, red/danger background, and scale pulse animation
- [x] Clicking the confirm-state button a second time clears the entire encounter
- [x] The button reverts after 5 seconds, on click-outside, or on Escape without clearing the encounter
- [x] The clear button remains disabled when there are no combatants
### Keyboard-accessible confirmation flow
- [x] Pressing Enter or Space on a focused destructive button enters the confirm state
- [x] Pressing Enter or Space again in confirm state executes the destructive action
- [x] Pressing Escape in confirm state reverts the button
- [x] Tabbing away from a confirm-state button reverts it to its original state
### Edge Cases
- [x] Rapid triple-click results in confirm then execute — no errors from extra clicks
- [x] Timer is cleaned up if the component unmounts while in confirm state
- [x] Multiple confirm buttons can be in confirm state independently
- [x] Confirm state persists through re-renders as long as the item identity is stable
dostulata
self-assigned this 2026-03-11 10:04:19 +01:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Summary
Replace confirmation modals with inline confirmation buttons for destructive actions. On first click, the button transitions into a confirm state — swapping the icon to a Lucide
Checkon a red/danger background with a subtle scale pulse animation. The button reverts after 5 seconds if not clicked again. This provides a faster, more modern UX while still preventing accidental destructive actions.Acceptance Criteria
Confirm-to-delete for removing a combatant
Confirm-to-clear for resetting the encounter
Keyboard-accessible confirmation flow
Edge Cases