Added timeout to flash messages.

lib/generic_rest_server_web/components/core_components.ex

@@ -55,6 +55,8 @@ defmodule GenericRestServerWeb.CoreComponents do
       :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
       id={@id}
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
+      phx-hook=".FlashTimeout"
+      kind={@kind}
       role="alert"
       class="toast toast-top toast-end z-50"
       {@rest}
@@ -76,6 +78,28 @@ defmodule GenericRestServerWeb.CoreComponents do
         </button>
       </div>
     </div>
+    <script :type={Phoenix.LiveView.ColocatedHook} name=".FlashTimeout">
+      export default {
+        mounted() {
+          const kind = this.el.getAttribute("kind")
+
+          let timeout = 3000
+          if (kind == "error") {
+            timeout = 9000
+          }
+          let hide = () => liveSocket.execJS(this.el, this.el.getAttribute("phx-click"))
+          this.timer = setTimeout(() => hide(), timeout)
+
+          this.el.addEventListener("phx:hide-start", () => clearTimeout(this.timer))
+
+          this.el.addEventListener("mouseover", () => {
+            clearTimeout(this.timer)
+            this.timer = setTimeout(() => hide(), 9000)
+          })
+       },
+       destroyed() { clearTimeout(this.timer) }
+      };
+    </script>
     """
   end