use slot in stream component

Author: GuzekAlan

lib/live_debugger_web/live/traces/components/stream.ex

@@ -33,6 +33,8 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Stream do
   attr(:existing_traces_status, :atom, required: true)
   attr(:existing_traces, :any, required: true)
 
+  slot(:trace, required: true, doc: "Used for styling trace element. Remember to add `id`")
+
   def traces_stream(assigns) do
     ~H"""
     <div id={"#{@id}-stream"} phx-update="stream" class="flex flex-col gap-2">
@@ -56,7 +58,7 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.Stream do
         <%= if wrapped_trace.id == "separator" do %>
           <.separator id={dom_id} />
         <% else %>
-          <Trace.trace id={dom_id} wrapped_trace={wrapped_trace} />
+          <%= render_slot(@trace, {dom_id, wrapped_trace}) %>
         <% end %>
       <% end %>
     </div>

lib/live_debugger_web/live/traces/node_traces_live.ex

@@ -7,6 +7,7 @@ defmodule LiveDebuggerWeb.Live.Traces.NodeTracesLive do
 
   require Logger
 
+  alias LiveDebuggerWeb.Live.Traces.Components.Trace
   alias LiveDebuggerWeb.Helpers.NestedLiveViewHelper
 
   alias LiveDebuggerWeb.Live.Traces.Hooks
@@ -111,7 +112,11 @@ defmodule LiveDebuggerWeb.Live.Traces.NodeTracesLive do
             id={@id}
             existing_traces_status={@existing_traces_status}
             existing_traces={@streams.existing_traces}
-          />
+          >
+            <:trace :let={{id, wrapped_trace}}>
+              <Trace.trace id={id} wrapped_trace={wrapped_trace} />
+            </:trace>
+          </Components.Stream.traces_stream>
           <Components.LoadMoreButton.load_more_button
             :if={not @tracing_started? and not @traces_empty?}
             traces_continuation={@traces_continuation}

lib/live_debugger_web/live/traces/process_traces_live.ex

@@ -1,6 +1,7 @@
 defmodule LiveDebuggerWeb.Live.Traces.ProcessTracesLive do
   use LiveDebuggerWeb, :live_view
 
+  alias LiveDebuggerWeb.Live.Traces.Components.Trace
   alias LiveDebuggerWeb.Live.Traces.Components
   alias LiveDebuggerWeb.Live.Traces.Helpers
   alias LiveDebuggerWeb.Live.Traces.Hooks
@@ -83,7 +84,11 @@ defmodule LiveDebuggerWeb.Live.Traces.ProcessTracesLive do
               id={@id}
               existing_traces_status={@existing_traces_status}
               existing_traces={@streams.existing_traces}
-            />
+            >
+              <:trace :let={{id, wrapped_trace}}>
+                <Trace.trace id={id} wrapped_trace={wrapped_trace} />
+              </:trace>
+            </Components.Stream.traces_stream>
             <Components.LoadMoreButton.load_more_button
               :if={not @tracing_started? and not @traces_empty?}
               traces_continuation={@traces_continuation}