Added timeout to flash messages.

lib/beet_round_server_web/components/core_components.ex

@@ -55,6 +55,8 @@ defmodule BeetRoundServerWeb.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}
@@ -75,6 +77,28 @@ defmodule BeetRoundServerWeb.CoreComponents do
           <.icon name="hero-x-mark" class="size-5 opacity-40 group-hover:opacity-70" />
         </button>
       </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>
     </div>
     """
   end