Enhancement: Add :info flash (#727)

* add key to push_flash function

* add flash_group component and extend flash component with :info kind

* change colors for :info messages

Author: srzeszut

assets/app/styles/themes/dark.css

@@ -71,5 +71,11 @@
 
     --search-highlight-bg: var(--swm-yellow-100);
     --search-highlight-text: var(--gray-900);
+
+    /* Info */
+    --info-bg: var(--surface-0-bg);
+    --info-border: var(--default-border);
+    --info-icon: var(--primary-text);
+    --info-text: var(--primary-text);
   }
 }

assets/app/styles/themes/light.css

@@ -65,6 +65,12 @@
   --error-icon: var(--red-500);
   --error-text: var(--red-800);
 
+  /* Info */
+  --info-bg: var(--surface-0-bg);
+  --info-border: var(--default-border);
+  --info-icon: var(--primary-text);
+  --info-text: var(--primary-text);
+
   /* Warning */
   --warning-text: #9a7e00;
 

assets/app/tailwind.config.js

@@ -57,6 +57,10 @@ module.exports = {
         'error-border': 'var(--error-border)',
         'error-icon': 'var(--error-icon)',
         'error-text': 'var(--error-text)',
+        'info-bg': 'var(--info-bg)',
+        'info-border': 'var(--info-border)',
+        'info-icon': 'var(--info-icon)',
+        'info-text': 'var(--info-text)',
         'warning-text': 'var(--warning-text)',
       },
       screens: { xs: '380px' },

lib/live_debugger/app/debugger/callback_tracing/web/hook_components/trace_wrapper.ex

@@ -19,7 +19,7 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.HookComponents.TraceWrap
 
   use LiveDebugger.App.Web, :hook_component
 
-  import LiveDebugger.App.Web.Hooks.Flash, only: [push_flash: 3]
+  import LiveDebugger.App.Web.Hooks.Flash, only: [push_flash: 4]
 
   alias LiveDebugger.API.TracesStorage
   alias LiveDebugger.App.Debugger.CallbackTracing.Structs.TraceDisplay
@@ -105,7 +105,7 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.HookComponents.TraceWrap
     |> case do
       nil ->
         socket
-        |> push_flash("Trace has been removed.", socket.assigns.parent_pid)
+        |> push_flash(:error, "Trace has been removed.", socket.assigns.parent_pid)
 
       trace ->
         socket
@@ -133,7 +133,7 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.HookComponents.TraceWrap
 
   defp handle_info({:trace_wrapper_not_found, string_trace_id}, socket) do
     socket
-    |> push_flash("Trace has been removed.", socket.assigns.parent_pid)
+    |> push_flash(:error, "Trace has been removed.", socket.assigns.parent_pid)
     |> push_event("existing_traces-#{string_trace_id}-collapsible", %{action: "close"})
     |> halt()
   end

lib/live_debugger/app/debugger/callback_tracing/web/hooks/tracing_fuse.ex

@@ -106,6 +106,7 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.Hooks.TracingFuse do
 
     socket
     |> Flash.push_flash(
+      :error,
       "Callback tracer stopped: Too many callbacks in a short time. Current limit is #{limit} callbacks in #{period}.",
       socket.assigns.parent_pid
     )

lib/live_debugger/app/settings/web/settings_live.ex

@@ -111,7 +111,7 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
         assign(socket, settings: new_settings)
 
       {:error, _} ->
-        push_flash(socket, "Failed to update setting")
+        push_flash(socket, :error, "Failed to update setting")
     end
     |> noreply()
   end

lib/live_debugger/app/web.ex

@@ -13,7 +13,7 @@ defmodule LiveDebugger.App.Web do
       import Phoenix.HTML
       import LiveDebugger.Helpers
       import unquote(__MODULE__).Components
-      import unquote(__MODULE__).Hooks.Flash, only: [push_flash: 2, push_flash: 3]
+      import unquote(__MODULE__).Hooks.Flash, only: [push_flash: 3, push_flash: 4]
     end
   end
 
@@ -24,7 +24,7 @@ defmodule LiveDebugger.App.Web do
       import Phoenix.HTML
       import LiveDebugger.Helpers
       import unquote(__MODULE__).Components
-      import unquote(__MODULE__).Hooks.Flash, only: [push_flash: 2, push_flash: 3]
+      import unquote(__MODULE__).Hooks.Flash, only: [push_flash: 3, push_flash: 4]
     end
   end
 

lib/live_debugger/app/web/components.ex

@@ -175,14 +175,15 @@ defmodule LiveDebugger.App.Web.Components do
   """
   attr(:id, :string, doc: "the optional id of flash container")
   attr(:flash, :map, default: %{}, doc: "the map of flash messages to display")
+  attr(:kind, :atom, values: [:info, :error], doc: "used for styling and flash lookup")
   attr(:rest, :global, doc: "the arbitrary HTML attributes to add to the flash container")
 
   def flash(assigns) do
-    message = Phoenix.Flash.get(assigns.flash, :error)
+    message = Phoenix.Flash.get(assigns.flash, assigns.kind)
 
     assigns =
       assigns
-      |> assign_new(:id, fn -> "flash" end)
+      |> assign_new(:id, fn -> "flash-#{assigns.kind}" end)
       |> assign(:message, message)
 
     ~H"""
@@ -193,13 +194,16 @@ defmodule LiveDebugger.App.Web.Components do
       role="alert"
       class={[
         "fixed left-2 bottom-2 w-80 sm:w-96 z-50 rounded-sm p-4 flex justify-between items-center gap-3",
-        "bg-error-bg text-error-text border-error-text border"
+        @kind == :error && "bg-error-bg text-error-text border-error-text border",
+        @kind == :info &&
+          "bg-info-bg text-info-text border-info-border border"
       ]}
       {@rest}
     >
       <div class="flex gap-3 items-start">
         <div>
-          <.icon name="icon-x-circle" class="text-error-icon w-3 h-3" />
+          <.icon :if={@kind == :error} name="icon-x-circle" class="text-error-icon w-3 h-3" />
+          <.icon :if={@kind == :info} name="icon-info" class="text-info-icon w-3 h-3" />
         </div>
         <p>
           <%= @message %>
@@ -208,7 +212,7 @@ defmodule LiveDebugger.App.Web.Components do
       <button
         phx-click={
           "lv:clear-flash"
-          |> JS.push(value: %{key: :error})
+          |> JS.push(value: %{key: @kind})
           |> JS.hide(
             to: "##{@id}",
             time: 200,
@@ -223,6 +227,25 @@ defmodule LiveDebugger.App.Web.Components do
     """
   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} flash={@flash} />
+      <.flash kind={:error} flash={@flash} />
+    </div>
+    """
+  end
+
   attr(:id, :string, required: true)
   attr(:title, :string, required: true)
   attr(:class, :any, default: nil)

lib/live_debugger/app/web/hooks/flash.ex

@@ -18,27 +18,31 @@ defmodule LiveDebugger.App.Web.Hooks.Flash do
   """
   @spec push_flash(
           socket :: Phoenix.LiveView.Socket.t(),
+          key :: String.t() | atom(),
           message :: String.t()
         ) ::
           Phoenix.LiveView.Socket.t()
-  def push_flash(socket, message) when is_binary(message) do
-    push_flash(socket, message, self())
+  def push_flash(socket, key, message)
+      when is_binary(message) and key in [:error, :info] do
+    push_flash(socket, key, message, self())
   end
 
   @spec push_flash(
           socket :: Phoenix.LiveView.Socket.t(),
+          key :: String.t() | atom(),
           message :: String.t(),
           pid :: pid()
         ) ::
           Phoenix.LiveView.Socket.t()
-  def push_flash(socket, message, pid) when is_pid(pid) and is_binary(message) do
-    send(pid, {:put_flash, message})
+  def push_flash(socket, key, message, pid)
+      when is_pid(pid) and is_binary(message) and key in [:error, :info] do
+    send(pid, {:put_flash, key, message})
 
     socket
   end
 
-  defp maybe_receive_flash({:put_flash, message}, socket) do
-    {:halt, put_flash(socket, :error, message)}
+  defp maybe_receive_flash({:put_flash, key, message}, socket) do
+    {:halt, put_flash(socket, key, message)}
   end
 
   defp maybe_receive_flash(_, socket), do: {:cont, socket}

lib/live_debugger/app/web/layout.ex

@@ -63,7 +63,7 @@ defmodule LiveDebugger.App.Web.Layout do
   def render("app.html", assigns) do
     ~H"""
     <main class="h-screen w-screen max-w-full">
-      <LiveDebugger.App.Web.Components.flash flash={@flash} />
+      <LiveDebugger.App.Web.Components.flash_group flash={@flash} />
       <%= @inner_content %>
     </main>
     """