Added nested LiveView badge

lib/live_debugger/components.ex

@@ -276,7 +276,7 @@ defmodule LiveDebugger.Components do
   )
 
   slot :column, doc: "Columns with column labels" do
-    attr(:label, :string, required: true, doc: "Column label")
+    attr(:label, :string, doc: "Column label")
     # Default is not supported for slot arguments
     attr(:class, :any)
   end
@@ -288,7 +288,7 @@ defmodule LiveDebugger.Components do
         <thead class="border-b border-secondary-200">
           <tr class="h-11 mx-16">
             <th :for={col <- @column} class="first:pl-2 font-medium text-left">
-              <%= col.label %>
+              <%= Map.get(col, :label, "") %>
             </th>
           </tr>
         </thead>
@@ -462,6 +462,27 @@ defmodule LiveDebugger.Components do
     """
   end
 
+  def nested_badge(assigns) do
+    ~H"""
+    <div class="py-1 px-1.5 w-max flex gap-0.5 border border-secondary-200 text-primary-900 text-3xs font-semibold rounded-xl items-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        class="w-4 h-4 text-primary-900"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M3.25 5C3.25 4.0335 4.0335 3.25 5 3.25H9.69281C10.6593 3.25 11.4428 4.0335 11.4428 5V9.69281C11.4428 10.6593 10.6593 11.4428 9.69281 11.4428H8.09637V15.6536C8.09637 15.7917 8.2083 15.9036 8.34637 15.9036H12.5572V14.3072C12.5572 13.3407 13.3407 12.5572 14.3072 12.5572H19C19.9665 12.5572 20.75 13.3407 20.75 14.3072V19C20.75 19.9665 19.9665 20.75 19 20.75H14.3072C13.3407 20.75 12.5572 19.9665 12.5572 19V17.4036H8.34637C7.37988 17.4036 6.59637 16.6201 6.59637 15.6536V11.4428H5C4.0335 11.4428 3.25 10.6593 3.25 9.69281V5ZM5 4.75C4.86193 4.75 4.75 4.86193 4.75 5V9.69281C4.75 9.83088 4.86193 9.94281 5 9.94281H9.69281C9.83088 9.94281 9.94281 9.83088 9.94281 9.69281V5C9.94281 4.86193 9.83088 4.75 9.69281 4.75H5ZM14.0572 14.3072C14.0572 14.1691 14.1691 14.0572 14.3072 14.0572H19C19.1381 14.0572 19.25 14.1691 19.25 14.3072V19C19.25 19.1381 19.1381 19.25 19 19.25H14.3072C14.1691 19.25 14.0572 19.1381 14.0572 19V14.3072Z"
+          fill="#4C2B8A"
+        />
+      </svg>
+      <p>Nested</p>
+    </div>
+    """
+  end
+
   @doc """
   Renders a tooltip using Tooltip hook.
   """

lib/live_debugger/live_components/detail_view.ex

@@ -50,7 +50,7 @@ defmodule LiveDebugger.LiveComponents.DetailView do
         </:failed>
         <div class="overflow-auto grow p-8 items-center justify-start lg:items-start lg:justify-center flex flex-col lg:flex-row gap-4 lg:gap-8">
           <div class="w-full lg:w-1/2 flex flex-col gap-4 lg:items-end">
-            <.info_section node={node} node_type={@node_type.result} />
+            <.info_section node={node} node_type={@node_type.result} socket_id={@socket_id} />
             <.assigns_section assigns={node.assigns} />
             <.fullscreen id="assigns-display-fullscreen" title="Assigns">
               <ElixirDisplay.term
@@ -76,10 +76,14 @@ defmodule LiveDebugger.LiveComponents.DetailView do
 
   attr(:node, :any, required: true)
   attr(:node_type, :atom, required: true)
+  attr(:socket_id, :string, default: "")
 
   defp info_section(assigns) do
     ~H"""
     <.collapsible_section id="info" title={title(@node_type)}>
+      <:right_panel>
+        <.nested_badge :if={@node_type == :live_view and LiveDebugger.Utils.nested?(@socket_id)} />
+      </:right_panel>
       <div class="p-4 flex flex-col gap-1">
         <.info_row name="Module" value={inspect(@node.module)} />
         <.info_row name={id_type(@node_type)} value={TreeNode.display_id(@node)} />

lib/live_debugger/live_views/sessions_dashboard.ex

@@ -64,6 +64,9 @@ defmodule LiveDebugger.LiveViews.SessionsDashboard do
                     <%= Parsers.pid_to_string(session.pid) %>
                   </:column>
                   <:column :let={session} label="Socket"><%= session.socket_id %></:column>
+                  <:column :let={session}>
+                    <.nested_badge :if={LiveDebugger.Utils.nested?(session)} />
+                  </:column>
                 </.table>
                 <.list
                   elements={live_sessions}
@@ -72,7 +75,10 @@ defmodule LiveDebugger.LiveViews.SessionsDashboard do
                   element_attributes_fun={fn elem -> %{"phx-value-socket_id" => elem.socket_id} end}
                 >
                   <:title :let={session}>
-                    <%= session.module %>
+                    <div class="flex items-center justify-between">
+                      <p class="shrink truncate"><%= session.module %></p>
+                      <.nested_badge :if={LiveDebugger.Utils.nested?(session)} />
+                    </div>
                   </:title>
                   <:description :let={session}>
                     <%= Parsers.pid_to_string(session.pid) %> · <%= session.socket_id %>

lib/live_debugger/utils.ex

@@ -0,0 +1,11 @@
+defmodule LiveDebugger.Utils do
+  @moduledoc false
+
+  def nested?(socket_id) when is_binary(socket_id) do
+    socket_id |> String.starts_with?("phx-") |> Kernel.not()
+  end
+
+  def nested?(%{socket_id: socket_id}) do
+    nested?(socket_id)
+  end
+end