Added autohide with animation for flash message

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["notification"];
+
+  connect() {
+    // Startet den Timer: Ruft nach 5000 Millisekunden (5 Sekunden) die dismiss-Methode auf
+    this.timeout = setTimeout(() => {
+      this.dismiss();
+    }, 5000);
+  }
+
+  disconnect() {
+    // Wichtig: Löscht den Timer, falls der Nutzer die Nachricht vor Ablauf der 5 Sekunden manuell schließt
+    clearTimeout(this.timeout);
+  }
+
+  dismiss() {
+    // 1. Tailwind-Klassen für das Ausblenden hinzufügen
+    // this.notificationTarget.classList.add("opacity-0","translate-y-2","scale-95");
+
+    // Verschiebt das Element auf der X-Achse weit nach rechts (translate-x-full)
+    // und blendet es leicht aus, damit es weicher wirkt
+    // 1. Alten Startpunkt entfernen (wichtig für Tailwind v4/v3)
+    this.notificationTarget.classList.remove("translate-x-0", "opacity-100");
+    // 2. Neuen Endpunkt hinzufügen (löst die Animation aus)
+    this.notificationTarget.classList.add("translate-x-full", "opacity-20");
+
+    // Fügt Klassen für Deckkraft (0) und minimale Skalierung hinzu
+    // 1. Den Startwert (voll sichtbar) entfernen
+    //this.notificationTarget.classList.remove("opacity-100");
+    // 2. Den Endwert (vollständig transparent) hinzufügen -> startet das Verblassen
+    //this.notificationTarget.classList.add("opacity-0", "scale-95");
+
+    // 2. Nach dem Ende der CSS-Animation (300ms) das Element komplett aus dem DOM löschen
+    setTimeout(() => {
+      this.element.remove();
+    }, 300);
+  }
+}