flash messages can now be closed

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

Author: ImTheKai

app/assets/stylesheets/components/form.css

@@ -31,6 +31,27 @@ input[type=submit], input[type=button] {
   gap: var(--spacing-2);
 }
 
+.flash-message {
+  flex: 1;
+}
+
+.flash-close {
+  margin-left: auto;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.8;
+
+  &:hover,
+  &:focus-visible {
+    opacity: 1;
+  }
+}
+
 .flash.alert {
   background-color: var(--color-danger-soft);
   color: var(--color-danger);

app/javascript/controllers/flash_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  dismiss() {
+    this.element.remove()
+  }
+}

app/views/layouts/application.html.slim

@@ -134,14 +134,16 @@ 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-controller="flash"
               = flash_icon(type)
-              = message
+              span.flash-message = message
+              button.flash-close type="button" aria-label="Dismiss message" data-action="flash#dismiss" x
           = yield
     - else
       main.container
         - flash.each do |type, message|
-          .flash class=type
+          .flash class=type data-controller="flash"
             = flash_icon(type)
-            = message
+            span.flash-message = message
+            button.flash-close type="button" aria-label="Dismiss message" data-action="flash#dismiss" x
         = yield