notice flash messages now auto-dismiss after 3 seconds

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/form.css

@@ -29,6 +29,11 @@ input[type=submit], input[type=button] {
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
+  transition: opacity 0.25s ease;
+}
+
+.flash.is-hiding {
+  opacity: 0;
 }
 
 .flash.alert {

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = { delay: { type: Number, default: 3000 } }
+
+  connect() {
+    this.timeout = setTimeout(() => this.dismiss(), this.delayValue)
+  }
+
+  disconnect() {
+    if (this.timeout) clearTimeout(this.timeout)
+    if (this.removeTimeout) clearTimeout(this.removeTimeout)
+  }
+
+  dismiss() {
+    this.element.classList.add("is-hiding")
+    this.removeTimeout = setTimeout(() => this.element.remove(), 250)
+  }
+}

app/views/layouts/application.html.slim

@@ -134,14 +134,14 @@ html data-theme="light"
         .layout-sidebar-overlay data-sidebar-target="overlay" data-action="click->sidebar#closeMobile"
         main.container
           - flash.each do |type, message|
-            .flash class=type
+            .flash class=type data=(type.to_s == "notice" ? { controller: "flash", "flash-delay-value": 3000 } : {})
               = flash_icon(type)
               = message
           = yield
     - else
       main.container
         - flash.each do |type, message|
-          .flash class=type
+          .flash class=type data=(type.to_s == "notice" ? { controller: "flash", "flash-delay-value": 3000 } : {})
             = flash_icon(type)
             = message
         = yield