feat: render flash messages as toasts

Co-Authored-By: Claude Opus 5 <[email protected]>

templates/_partials/_flashes.html.twig

@@ -1,12 +1,10 @@
-{# Just the alerts. The positioned container with id="flashes" lives in layout.html.twig, because
-   that is the element htmx swaps out of band after a booking. Flat inline alerts for now: myep
-   renders these as Toastify toasts, which would mean adopting toastify-js (plan step 2/7). #}
-{% set levels = { error: 'bg-red-600', warning: 'bg-amber-600', success: 'bg-emerald-600', info: 'bg-primary' } %}
+{# Just the toast triggers. The container with id="flashes" lives in layout.html.twig, because
+   that is the element htmx swaps out of band after a booking. Each element is empty: the
+   toast_controller hands the message to Toastify, which renders it at the top right. #}
+{% set levels = ['error', 'warning', 'success', 'info'] %}
 
-{% for level, messages in app.flashes(levels|keys) %}
+{% for level, messages in app.flashes(levels) %}
     {% for message in messages %}
-        <div class="{{ levels[level] }} text-white rounded shadow-lg px-4 py-3 text-sm">
-            {{ message|trans }}
-        </div>
+        <div {{ stimulus_controller('toast', { text: message|trans, class: 'toastify--' ~ level }) }}></div>
     {% endfor %}
 {% endfor %}

templates/layout.html.twig

@@ -31,7 +31,7 @@
 
     {# Swapped out of band after a booking, hence the stable id and the conditional attribute. #}
     {% block flashes %}
-        <div id="flashes" class="fixed bottom-4 right-4 z-50 space-y-2"
+        <div id="flashes"
              {%- if htmx_oob_swap is defined and htmx_oob_swap %} hx-swap-oob="true"{% endif %}>
             {% include '_partials/_flashes.html.twig' %}
         </div>

templates/security/login.html.twig

@@ -18,9 +18,9 @@
                 Mit myep anmelden
             </a>
 
-            <div class="fixed bottom-4 right-4 z-50 space-y-2">
-                {% include '_partials/_flashes.html.twig' %}
-            </div>
+            {# Toastify positions itself, so this needs no wrapper -- and the login page has no
+               board to swap, so it needs no #flashes container either. #}
+            {% include '_partials/_flashes.html.twig' %}
         </div>
     </div>
 {% endblock %}