From e930c742b5f1ed819d7d9094bf15405ac02e9c7b Mon Sep 17 00:00:00 2001
From: Bent Witthold <bent@working-copy.org>
Date: Tue, 21 Apr 2026 12:39:07 +0200
Subject: [PATCH] Added timeout to flash messages.

---
 .../components/core_components.ex             | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/lib/generic_rest_server_web/components/core_components.ex b/lib/generic_rest_server_web/components/core_components.ex
index b4991bc..9d36bf8 100644
--- a/lib/generic_rest_server_web/components/core_components.ex
+++ b/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