feat: add htmx server-side plumbing

templates/htmx_error_modal.html.twig

@@ -0,0 +1,9 @@
+{% embed 'htmx_modal.html.twig' %}
+    {% block title %}Oops…{% endblock %}
+    {% block content %}
+        <div class="bg-red-600 text-gray-100 rounded px-4 py-3 text-sm">
+            Da ist etwas schiefgelaufen. Wir haben uns Notizen gemacht und kümmern uns
+            schnellstmöglich darum.
+        </div>
+    {% endblock %}
+{% endembed %}

templates/htmx_modal.html.twig

@@ -0,0 +1,29 @@
+{# Standalone modal fragment -- extends nothing, so it is valid on its own as an htmx response.
+   Openers are plain `hx-get` buttons with hx-target="body" hx-swap="beforeend", which append
+   this to the end of <body>. Closing is not htmx: modal_controller.js just removes the element.
+   Ported from myep's htmx_modal_admin.html.twig (bg-black/70 backdrop, no shadow). #}
+<div id="htmx-modal"
+     class="fixed inset-0 w-full h-full z-50"
+     {{ stimulus_controller('modal') }}
+     {{ stimulus_action('modal', 'close', 'modal-close@window') }}>
+    <div class="absolute inset-0 w-full h-full bg-black/70" {{ stimulus_action('modal', 'close', 'click') }}></div>
+    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 w-full max-w-3xl">
+        <div class="relative bg-white py-8 rounded-md">
+            <div class="flex justify-between pb-4 px-8">
+                <div class="text-2xl font-bold">
+                    {% block title %}{% endblock %}
+                </div>
+                <button type="button"
+                        class="inline-flex items-center justify-center bg-gray-200 rounded-md w-10 h-10"
+                        {{ stimulus_action('modal', 'close') }}>
+                    {{ ux_icon('lucide:x', { class: 'w-8 h-8' }) }}
+                </button>
+            </div>
+            <div class="max-h-svh overflow-y-auto">
+                <div class="px-8">
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>