Add info to the remaining node inspector sections (#969)

* add info to the remaining sections

* refactor

* move temporary assigns info to the left section

Author: srzeszut

lib/live_debugger/app/debugger/async_jobs/web/async_jobs_live.ex

@@ -84,7 +84,15 @@ defmodule LiveDebugger.App.Debugger.AsyncJobs.Web.AsyncJobsLive do
         inner_class="mx-0 p-4"
         class="flex-1"
         save_state_in_browser={true}
+        title_class="flex flex-row justify-between min-w-max gap-2"
       >
+        <:title_sub_panel>
+          <.section_info_tooltip
+            id="async-jobs-info"
+            content="Background operations spawned via start_async or assign_async"
+          />
+        </:title_sub_panel>
+
         <div class="w-full h-full flex flex-col gap-2">
           <.async_result :let={async_jobs} assign={@async_jobs}>
             <:failed>

lib/live_debugger/app/debugger/callback_tracing/web/node_traces_live.ex

@@ -102,6 +102,12 @@ defmodule LiveDebugger.App.Debugger.CallbackTracing.Web.NodeTracesLive do
     ~H"""
     <div class="max-w-full @container/traces flex flex-1">
       <.section title="Callback traces" id="traces" inner_class="mx-0 my-4 px-4" class="flex-1">
+        <:title_sub_panel>
+          <.section_info_tooltip
+            id="traces-info"
+            content="Records the execution of LiveView/LiveComponent lifecycle callbacks and handlers"
+          />
+        </:title_sub_panel>
         <:right_panel>
           <div class="flex gap-2 !h-7">
             <HookComponents.SearchInput.render

lib/live_debugger/app/debugger/node_state/web/components.ex

@@ -116,13 +116,16 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
   attr(:icon, :string, default: nil)
 
   slot(:right)
+  slot(:subtitle)
 
   defp section_title(assigns) do
     ~H"""
     <div class="bg-surface-1-bg flex items-center justify-between h-10 gap-2 p-4 border-b border-default-border font-semibold text-secondary-text w-full">
       <div class="flex items-center gap-2">
         <.icon :if={@icon} name={@icon} class="h-4 w-4" />
         <p><%= @name %></p>
+
+        <%= render_slot(@subtitle) %>
       </div>
       <div :if={@right != []} class="flex items-center gap-2">
         <%= render_slot(@right) %>
@@ -199,14 +202,16 @@ defmodule LiveDebugger.App.Debugger.NodeState.Web.Components do
         name={if(@temporary_assigns.result, do: "Temporary assigns", else: "No temporary assigns")}
         icon="icon-clock-3"
       >
-        <:right :if={@has_temporary_assigns}>
+        <:subtitle :if={@has_temporary_assigns}>
           <.tooltip
             id={@id <> "-tooltip"}
             content="Values shown are the last recorded before reset"
             position="top-center"
           >
             <.icon name="icon-info" class="w-4 h-4 bg-button-secondary-content" />
           </.tooltip>
+        </:subtitle>
+        <:right :if={@has_temporary_assigns}>
           <div class="flex">
             <.copy_button
               id={"temporary-assigns-copy-button" <> "-" <> @id}

lib/live_debugger/app/debugger/streams/web/components.ex

@@ -38,10 +38,14 @@ defmodule LiveDebugger.App.Debugger.Streams.Web.Components do
       class="h-max overflow-y-hidden"
       title="Streams"
       save_state_in_browser={true}
+      title_class="flex flex-row justify-between min-w-max gap-2"
     >
-      <:right_panel>
-        <.streams_info_tooltip id="stream-info" />
-      </:right_panel>
+      <:title_sub_panel>
+        <.section_info_tooltip
+          id="stream-info"
+          content="Streams are reconstructed from render traces. If traces are garbage collected, the stream may be incomplete."
+        />
+      </:title_sub_panel>
       <%= render_slot(@display) %>
     </.collapsible_section>
     """
@@ -131,20 +135,6 @@ defmodule LiveDebugger.App.Debugger.Streams.Web.Components do
     """
   end
 
-  attr(:id, :string, required: true)
-
-  def streams_info_tooltip(assigns) do
-    ~H"""
-    <.tooltip
-      id={@id <> "-tooltip"}
-      content="Streams are reconstructed from render traces. If traces are garbage collected, the stream may be incomplete."
-      position="top-center"
-    >
-      <.icon name="icon-info" class="w-4 h-4 bg-button-secondary-content" />
-    </.tooltip>
-    """
-  end
-
   @doc """
   Displays the fullscreen of the stream element.
   """

lib/live_debugger/app/web/components.ex

@@ -533,6 +533,7 @@ defmodule LiveDebugger.App.Web.Components do
   attr(:inner_class, :any, default: nil)
 
   slot(:right_panel)
+  slot(:title_sub_panel)
   slot(:inner_block)
 
   def collapsible_section(assigns) do
@@ -549,7 +550,13 @@ defmodule LiveDebugger.App.Web.Components do
     >
       <:label>
         <div class="ml-1 flex justify-between items-center w-full gap-2">
-          <div class={["font-medium text-sm min-w-26" | List.wrap(@title_class)]}><%= @title %></div>
+          <div class={[
+            "font-medium text-sm min-w-26 flex items-center gap-2"
+            | List.wrap(@title_class)
+          ]}>
+            <p><%= @title %></p>
+            <%= render_slot(@title_sub_panel) %>
+          </div>
           <div class="w-max">
             <%= render_slot(@right_panel) %>
           </div>
@@ -564,6 +571,28 @@ defmodule LiveDebugger.App.Web.Components do
     """
   end
 
+  @doc """
+  Info tooltip for sections
+  """
+
+  attr(:id, :string, required: true)
+  attr(:content, :string, required: true)
+  attr(:position, :string, default: "top-center")
+
+  def section_info_tooltip(assigns) do
+    ~H"""
+    <.tooltip
+      id={@id <> "-tooltip"}
+      content={@content}
+      position={@position}
+    >
+      <span class="flex items-center justify-center h-full">
+        <.icon name="icon-info" class="w-4 h-4 bg-button-secondary-content" />
+      </span>
+    </.tooltip>
+    """
+  end
+
   @doc """
   Typography component to render headings.
   """