Make flash messages destroyable

Author: janpeterka

app/javascript/controllers/index.js

@@ -3,6 +3,9 @@ import { application } from "controllers/application"
 import ClickableController from "controllers/clickable_controller"
 application.register("clickable", ClickableController)
 
+import FlashController from "controllers/flash_controller"
+application.register("flash", FlashController)
+
 import DebugTurboController from "controllers/debug_turbo_controller"
 application.register("debug-turbo", DebugTurboController)
 

app/views/shared/_flash.html.slim

@@ -1,15 +1,14 @@
 - flash.each do |type, message|
     - if type.to_sym == :notice
         - color_classes = "bg-blue-100 border-blue-500"
-    - elsif type.to_sym == :error
+    - elsif type.to_sym.in?([ :error, :alert ])
         - color_classes = "bg-red-100 border-red-500"
+    - else
+        - color_classes = "bg-white"
 
     div class="absolute border-t-4 rounded-b px-4 py-3 shadow-md #{color_classes} right-10" role="alert" data-controller="flash" data-action="click->flash#hide"
         div class="flex"
             div class="py-1"
                 = icon(:bell)
-                / svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"
-                    path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
             div
-                p class="font-bold" = t(type)
                 p = message