Skip to content

Replace native alert()/confirm() with tpen-alert/tpen-confirm modal dialogs#496

Merged
cubap merged 13 commits intomainfrom
copilot/refactor-alert-confirm-dialogs
Mar 5, 2026
Merged

Replace native alert()/confirm() with tpen-alert/tpen-confirm modal dialogs#496
cubap merged 13 commits intomainfrom
copilot/refactor-alert-confirm-dialogs

Conversation

Copy link
Contributor

Copilot AI commented Feb 23, 2026

Native alert() and confirm() calls produce inconsistent, browser-controlled blocking dialogs. This replaces all instances across the codebase with the existing tpen-alert / tpen-confirm event-dispatch system.

Alert replacements

alert()TPEN.eventDispatcher.dispatch('tpen-alert', { message })

Affected: annotorious-annotator/plain.js, roles-handler, projects/index.js, project-list-write.js, api/Project.js, manage-project/index.js

The permissions-denied alert in manage-project/index.js now defers the redirect via tpen-alert-acknowledged so the user sees the dialog before being navigated away.

Confirm replacements

All confirm() calls are replaced via a new utilities/confirmAction.js helper:

confirmAction(message, onConfirm, onCancel, { positiveButtonText, negativeButtonText })

The helper generates a unique confirmId (crypto.randomUUID() with a fallback) for each dialog. ConfirmContainer echoes the ID through button-click events; listeners use on() with an ID guard so stale callbacks from earlier dialogs never fire on a later one.

Affected: decline-project, leave-project, manage-layers, manage-pages, manifest-import, navigation-manager, quicktype-manager, roles-handler (3 instances), line-parser.js (3 instances), manage-project/index.js

ConfirmContainer improvements

  • Stacking prevention: ignores new tpen-confirm requests while a dialog is already visible, preventing button-mash stacking.
  • Keyboard accessibility: auto-focuses the positive button when a dialog opens; added :focus-visible CSS so the focused button has a visible outline, making tab/enter navigation work correctly.
  • Contextual button labels: all call sites pass explicit positiveButtonText/negativeButtonText. Destructive or statement-style confirms use specific labels (e.g., Delete/Cancel, Leave/Cancel, Publish/Cancel, Transfer/Cancel, Discard/Keep Editing); question-style confirms keep the Yes/No defaults.

Methods that were async solely due to await confirm(…) patterns have had async/await removed from both the method and its call sites.

Original prompt

This section details on the original issue you should resolve

<issue_title>alert() and confirm() where a dialog or modal makes more sense</issue_title>
<issue_description>There are a few things noted here that are out of scope but should be handled somewhere else.
...
3. Old pattern has alert() and confirm() where a dialog or modal makes more sense.</issue_description>

Comments on the Issue (you are @copilot in this section)

@thehabes See #327

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

alert() and confirm() where a dialog or modal makes more sense

4 participants