toats notifications in the web

web/templates/ui/toast.html

@@ -0,0 +1,26 @@
+{#
+  Transient success toast.
+
+  The toast itself is Penguin UI's stacking toast notification, used straight
+  from the library — `penguinui-components/toast-notification/`, included
+  unmodified by ui/base.html, which is also where the demo trigger buttons that
+  ship in that file are dealt with. It listens for a `notify` window event.
+
+  This file is only the trigger. The library fires `notify` from a button's
+  x-on:click; here the server decides, so the trigger is an empty element that
+  dispatches the same event as Alpine initialises it. Alpine initialises
+  htmx-swapped markup too, so a fragment carrying this shows a toast when it
+  lands.
+
+    {% import "ui/toast.html" as toast %}
+    {% call toast::success("Draft updated", message) %}{% endcall %}
+
+  `title` and `message` travel as data attributes rather than interpolated into
+  the JS, because Askama escapes an attribute value correctly and a message
+  containing a quote or an apostrophe would otherwise break the expression.
+#}
+{% macro success(title, message) %}
+<div hidden data-title="{{ title }}" data-message="{{ message }}"
+     x-data
+     x-init="$dispatch('notify', { variant: 'success', title: $el.dataset.title, message: $el.dataset.message })"></div>
+{% endmacro %}