Upload app/webui/js/components/notifications.js

app/webui/js/components/notifications.js

@@ -0,0 +1,44 @@
+/**
+ * Toast-Notification Component (Alpine.js)
+ *
+ * Renders the global notification queue from $store.notifications as a stack
+ * of toasts in the top-right corner. Pages include this component exactly once,
+ * typically in a shared layout fragment (e.g. app.html and index.html).
+ *
+ * Usage in HTML:
+ *   <div x-data="toastContainer()" class="crm-toast-container" x-cloak>
+ *     <template x-for="n in items" :key="n.id">
+ *       <div class="crm-toast" :class="'toast-' + n.type"
+ *            @click="dismiss(n.id)" x-text="n.message"></div>
+ *     </template>
+ *   </div>
+ *
+ * R-5: x-text only, never x-html.
+ */
+
+export function toastContainer() {
+    return {
+        get items() {
+            return window.Alpine ? Alpine.store('notifications').items : [];
+        },
+        dismiss(id) {
+            if (window.Alpine) Alpine.store('notifications').dismiss(id);
+        },
+    };
+}
+
+// Register the component as a global Alpine.data() factory. Pages can use
+// `x-data="toastContainer()"` after this module is imported.
+if (typeof window !== 'undefined') {
+    document.addEventListener('alpine:init', () => {
+        if (window.Alpine && !Alpine.$data_registry) {
+            // no-op: Alpine 3 stores factories on the global namespace
+        }
+        // Alpine 3: Alpine.data(name, factory) registers globally for x-data="name"
+        if (window.Alpine) {
+            window.Alpine.data('toastContainer', toastContainer);
+        }
+    });
+}
+
+export default toastContainer;