wip-feat: mercure alerts

assets/app.js

@@ -8,3 +8,13 @@ import './bootstrap.js';
 import './styles/app.css';
 
 console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
+
+let alert = document.querySelector('.alert');
+var observer = new MutationObserver(function(mutations) {
+    if (document.contains(alert)) {
+        observer.disconnect();
+    }
+});
+
+observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
+

assets/controllers.json

@@ -8,6 +8,16 @@
                     "@symfony/ux-live-component/dist/live.min.css": true
                 }
             }
+        },
+        "@symfony/ux-turbo": {
+            "turbo-core": {
+                "enabled": true,
+                "fetch": "eager"
+            },
+            "mercure-turbo-stream": {
+                "enabled": true,
+                "fetch": "eager"
+            }
         }
     },
     "entrypoints": []

assets/controllers/alert_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    connect() {
+        let timer = setTimeout(() => {
+                this.element.remove();
+            },
+            "3000"
+        );
+
+        this.element.addEventListener('mouseout', () => timer = setTimeout(() => {
+                this.element.remove();
+            },
+            "3000"
+        ));
+        this.element.addEventListener('mouseover', () => clearTimeout(timer));
+    }
+}