feat: improve oidc only mode

lib/mv_web/components/core_components.ex

@@ -63,6 +63,11 @@ defmodule MvWeb.CoreComponents do
     values: [:info, :error, :success, :warning],
     doc: "used for styling and flash lookup"
 
+  attr :auto_clear_ms, :integer,
+    default: nil,
+    doc:
+      "when set, flash is auto-dismissed after this many milliseconds (e.g. 5000 for success toasts)"
+
   attr :rest, :global, doc: "the arbitrary HTML attributes to add to the flash container"
 
   slot :inner_block, doc: "the optional inner block that renders the flash message"
@@ -74,6 +79,9 @@ defmodule MvWeb.CoreComponents do
     <div
       :if={msg = render_slot(@inner_block) || Phoenix.Flash.get(@flash, @kind)}
       id={@id}
+      phx-hook={@auto_clear_ms && "FlashAutoDismiss"}
+      data-auto-clear-ms={@auto_clear_ms}
+      data-clear-flash-key={@auto_clear_ms && @kind}
       phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
       role="alert"
       class="pointer-events-auto"

lib/mv_web/components/layouts.ex

@@ -171,7 +171,7 @@ defmodule MvWeb.Layouts do
             </label>
             <span class="font-bold">{@club_name}</span>
           </header>
-          
+
     <!-- Main Content (shared between mobile and desktop) -->
           <main class="px-4 py-8 sm:px-6 lg:px-8">
             <div class="mx-auto space-y-4 max-full">
@@ -265,7 +265,7 @@ defmodule MvWeb.Layouts do
       aria-live="polite"
       class="z-50 toast toast-bottom toast-end flex flex-col gap-2 pointer-events-none"
     >
-      <.flash kind={:success} flash={@flash} />
+      <.flash kind={:success} flash={@flash} auto_clear_ms={5000} />
       <.flash kind={:warning} flash={@flash} />
       <.flash kind={:info} flash={@flash} />
       <.flash kind={:error} flash={@flash} />

lib/mv_web/components/layouts/root.html.heex

@@ -74,7 +74,7 @@
       aria-live="polite"
       class="z-50 flex flex-col gap-2 toast toast-bottom toast-end"
     >
-      <.flash id="flash-success-root" kind={:success} flash={@flash} />
+      <.flash id="flash-success-root" kind={:success} flash={@flash} auto_clear_ms={5000} />
       <.flash id="flash-warning-root" kind={:warning} flash={@flash} />
       <.flash id="flash-info-root" kind={:info} flash={@flash} />
       <.flash id="flash-error-root" kind={:error} flash={@flash} />