Use live_toast instead of built-in flash

Precursor for building better notifications

lib/music_library_web/components/core_components.ex

@@ -34,90 +34,6 @@ defmodule MusicLibraryWeb.CoreComponents do
   defdelegate separator(assigns), to: Fluxon.Components.Separator
   defdelegate sheet(assigns), to: Fluxon.Components.Sheet
 
-  @doc """
-  Renders flash notices.
-
-  ## Examples
-
-      <.flash kind={:info} flash={@flash} />
-      <.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>
-  """
-  attr :id, :string, doc: "the optional id of flash container"
-  attr :flash, :map, default: %{}, doc: "the map of flash messages to display"
-  attr :title, :string, default: nil
-  attr :kind, :atom, values: [:info, :warning, :error], doc: "used for styling and flash lookup"
-  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"
-
-  def flash(assigns) do
-    assigns = assign_new(assigns, :id, fn -> "flash-#{assigns.kind}" end)
-
-    ~H"""
-    <div
-      :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}")}
-      role="alert"
-      class={[
-        "fixed top-2 right-2 mr-2 w-80 sm:w-96 z-50 rounded-md shadow-md p-3 ring-1 ring-zinc-400 border-l-2",
-        @kind == :info &&
-          "border-l-emerald-500 bg-white dark:bg-zinc-700 text-emerald-700 dark:text-emerald-300",
-        @kind == :warning &&
-          "border-l-yellow-500 bg-white dark:bg-zinc-700 text-yellow-900 dark:text-yellow-300",
-        @kind == :error &&
-          "border-l-red-500 bg-white dark:bg-zinc-700 text-red-900 dark:text-red-300"
-      ]}
-      {@rest}
-    >
-      <p :if={@title} class="flex items-center gap-1.5 text-sm font-semibold leading-6">
-        <.icon :if={@kind == :info} name="hero-information-circle-mini" class="h-4 w-4" />
-        <.icon :if={@kind == :warning} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        <.icon :if={@kind == :error} name="hero-exclamation-circle-mini" class="h-4 w-4" />
-        {@title}
-      </p>
-      <p class="mt-2 text-sm leading-5 text-zinc-700 dark:text-zinc-300">{msg}</p>
-      <button type="button" class="group absolute top-1 right-1 p-2" aria-label={gettext("close")}>
-        <.icon
-          name="hero-x-mark-solid"
-          class="text-zinc-700 dark:text-zinc-100 h-5 w-5 opacity-40 group-hover:opacity-70"
-        />
-      </button>
-    </div>
-    """
-  end
-
-  @doc """
-  Shows the flash group with standard titles and content.
-
-  ## Examples
-
-      <.flash_group flash={@flash} />
-  """
-  attr :flash, :map, required: true, doc: "the map of flash messages"
-  attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
-
-  def flash_group(assigns) do
-    ~H"""
-    <div id={@id}>
-      <.flash kind={:info} title={gettext("Success!")} flash={@flash} />
-      <.flash kind={:warning} title={gettext("Warning!")} flash={@flash} />
-      <.flash kind={:error} title={gettext("Error!")} flash={@flash} />
-      <.flash
-        id="server-error"
-        kind={:error}
-        title={gettext("Something went wrong!")}
-        phx-disconnected={show(".phx-server-error #server-error")}
-        phx-connected={hide("#server-error")}
-        hidden
-      >
-        {gettext("Hang in there while we get back on track")}
-        <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
-      </.flash>
-    </div>
-    """
-  end
-
   @doc """
   Renders a simple form.
 

lib/music_library_web/components/layouts/app.html.heex

@@ -90,7 +90,12 @@
 </nav>
 <main class="px-4 py-4 max-sm:pb-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-screen-xl">
-    <.flash_group flash={@flash} />
+    <LiveToast.toast_group
+      flash={@flash}
+      corner={:top_right}
+      connected={assigns[:socket] != nil}
+      toasts_sync={assigns[:toasts_sync]}
+    />
     {@inner_content}
   </div>
 </main>

lib/music_library_web/components/layouts/unauthenticated.html.heex

@@ -1,6 +1,11 @@
 <main class="px-4 py-8 max-sm:pb-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-5xl">
-    <.flash_group flash={@flash} />
+    <LiveToast.toast_group
+      flash={@flash}
+      corner={:top_right}
+      connected={assigns[:socket] != nil}
+      toasts_sync={assigns[:toasts_sync]}
+    />
     {@inner_content}
   </div>
 </main>