Inline confirmation buttons replace modals for destructive actions #1

New Issue

dostulata · 2026-03-11T01:18:46+01:00

dostulata commented

2026-03-11 01:18:46 +01:00

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

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

dostulata closed this issue

2026-03-11 10:04:47 +01:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dostulata/initiative#1