Add toast notification component with JS init, template, examples, migration, and tests

[lovasoa]

addresses #1358

small.mp4

Motivation

• Provide a lightweight, accessible notification UI that can show transient confirmations and queued notifications without occupying page content.
• Replace transient inline alert usages with a dedicated toast component that supports auto-dismiss, manual dismissal, positions, icons, colors, Markdown, and URL-fragment triggers.

Description

• Introduce a new toast Handlebars template (sqlpage/templates/toast.handlebars) that supports title, description, description_md, icon, color, dismissible, duration, position, trigger, id, and class properties.
• Add client-side logic in sqlpage/sqlpage.js to initialize toasts, create per-position containers, manage stacking and automatic/manual dismissal, and open toasts via URL fragment triggers with open_toasts_for_hash and sqlpage_toast initialization hooks.
• Add a migration (examples/official-site/sqlpage/migrations/76_toast.sql) that registers the toast component, its parameters, and multiple examples in the component registry.
• Update example pages to use toast instead of transient alert entries and add a component rendering test file at tests/sql_test_files/component_rendering/toast.sql.
• Update the changelog (CHANGELOG.md) to document the new toast component.

Testing

• Added an end-to-end Playwright test tests/end-to-end/official-site.spec.ts that verifies initialization, stacking, dismiss behavior, Markdown rendering, fragment-trigger behavior, and positioning of toasts, and the new test passed in the test run.
• Added a SQL component rendering test file tests/sql_test_files/component_rendering/toast.sql to validate server-side output for various toast configurations and it passed in automated checks.
• Ran the existing UI test suite (including chart, map, and form examples) with the new toast tests and all automated tests succeeded.

---

Codex Task

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:9f551bc483

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:500e2f39e0

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:93c9f08843

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit:b29821716d

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Add an explicit mapping for the gray toast color

When color = 'gray'—a color listed in examples/official-site/colors.sql—this emits bg-gray text-gray-fg, but neither the bundled Tabler 1.4 stylesheet nor sqlpage.css defines those utilities. The toast consequently retains its neutral background instead of rendering gray; map gray to an available gray shade, define the missing utilities, or explicitly exclude it from the documented toast colors.

Useful? React with 👍 / 👎.