Skip to content

refactor(ui): replace native alert and prompt with in-app dialogs - #337

Merged
HugoFara merged 1 commit into
developfrom
refactor/in-app-alert-prompt
Nov 4, 2026
Merged

HugoFara merged 1 commit into
developfrom
refactor/in-app-alert-prompt

Conversation

@HugoFara

@HugoFara HugoFara commented Nov 4, 2026

Copy link
Copy Markdown
Owner

Follows #336. Moves the remaining 43 alert() and 4 prompt() calls to in-app dialogs, so native dialogs now appear only as the fallback inside confirm_dialog.ts. The browser's leave-page warning is unchanged.

What changed

  • showAlert(), showError() and promptDialog() join confirmDialog(), sharing one implementation in confirm_dialog.ts.
  • Messages that were English in every locale are translated, in 28 new common.dialog.* keys across 11 locales. They replace strings like ERROR\n\n..., and the error message for an unsupported character no longer includes a Wikipedia link.

Behaviour worth reviewing

  • One dialog at a time. check() can raise several errors in a pass. They now queue in order, so none is lost, and an alert can never answer a waiting confirmation.
  • Alerts no longer block. Code after showAlert() runs straight away. That suits every call here, because each one only reports something. The language form waits for the promise, so it can return the focus to the name once the alert is dismissed.
  • Tag entry validates in place. multiActionGo() and allActionGo() used to loop between prompt() and alert(). The error now appears under the field and the dialog stays open. A leading space or comma is now refused too: the old indexOf(...) > 0 check missed position 0.
  • Enter. An alert opened by pressing Enter takes the focus before the browser has finished with the key, so the same press would dismiss it. The dialog swallows that one keypress.

Tests

  • answerPrompts() and dismissAlerts() join the test helper and drive the real dialog.
  • confirm_dialog.test.ts covers alerts, the queue, prompts, inline validation, Tab, the Enter keypress and the native fallback.
  • The source scan now also rejects alert() and prompt().

I also tried tag entry in the real term list in the dark theme. An invalid tag kept the dialog open with the error shown and the text intact, and Escape cancelled and reset the menu. The Enter keypress is only tested with a simulated event, not a real key press from a textarea. The translations have not been reviewed by native speakers.

PHPUnit, Vitest, ESLint and TypeScript pass. Cypress passes except 24-anki-live.cy.ts, which needs npm run anki:up and was not run.

The 47 remaining alert() and prompt() calls move to showAlert(), showError()
and promptDialog(), and messages that were English in every locale are
translated.

- One dialog shows at a time. Validation can raise several errors in a pass,
  and they now queue, so none is lost and an alert cannot answer a
  confirmation.
- promptDialog() validates in place. Tag entry used to loop between prompt()
  and alert(); the error now appears under the field and the dialog stays
  open.
- A dialog swallows the keypress that follows the keydown that opened it, so
  an Enter press cannot dismiss what it just caused.
- showAlert() resolves on dismissal, so the language form can return the
  focus to the name afterwards.
@HugoFara
HugoFara merged commit e516b10 into develop Nov 4, 2026
8 checks passed
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.

1 participant