From d86513dabf5125598828b7cae39b9005f4a77ca6 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 11:39:00 +0200
Subject: [PATCH 1/8] formatting

---
 lib/live_debugger/live_components/live_dropdown.ex     | 2 +-
 lib/live_debugger/services/module_discovery_service.ex | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/live_debugger/live_components/live_dropdown.ex b/lib/live_debugger/live_components/live_dropdown.ex
index 19b228fd8..237d0b962 100644
--- a/lib/live_debugger/live_components/live_dropdown.ex
+++ b/lib/live_debugger/live_components/live_dropdown.ex
@@ -62,7 +62,7 @@ defmodule LiveDebugger.LiveComponents.LiveDropdown do
         variant={Map.get(button_slot, :variant, "secondary")}
         size={Map.get(button_slot, :size, "sm")}
         id={@id <> "-button"}
-        phx-click={unless @open, do: "open"}
+        phx-click={if !@open, do: "open"}
         phx-target={@myself}
       >
         <%= render_slot(button_slot) %>
diff --git a/lib/live_debugger/services/module_discovery_service.ex b/lib/live_debugger/services/module_discovery_service.ex
index bf3d94eb8..6f804f8c8 100644
--- a/lib/live_debugger/services/module_discovery_service.ex
+++ b/lib/live_debugger/services/module_discovery_service.ex
@@ -11,7 +11,9 @@ defmodule LiveDebugger.Services.ModuleDiscoveryService do
   @spec all_modules() :: [module()]
   def all_modules() do
     ModuleService.all()
-    |> Enum.map(fn {module_charlist, _, _} -> module_charlist |> to_string |> String.to_atom() end)
+    |> Enum.map(fn {module_charlist, _, _} ->
+      module_charlist |> to_string |> String.to_atom()
+    end)
   end
 
   @doc """

From e42d9dfdcbb7f6ef874b8010afafcf3a59a1d7b3 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 12:54:01 +0200
Subject: [PATCH 2/8] styling without w-full

---
 lib/live_debugger/components.ex      |   4 +-
 lib/live_debugger/components/tree.ex | 115 ++++++++++++---------------
 2 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index 6b4a21480..b7b672b25 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -103,7 +103,7 @@ defmodule LiveDebugger.Components do
   @doc """
   Collapsible element that can be toggled open and closed.
   It uses the `details` and `summary` HTML elements.
-  If you add `hide-on-open` class to element it will be hidden when collapsible is opened.
+  `hide-on-open` and `show-on-open` css classes are used to hide or show elements based on the open state of the collapsible.
 
   ## Examples
 
@@ -489,7 +489,7 @@ defmodule LiveDebugger.Components do
     <svg
       {@rest}
       class={
-        ["animate-spin", @size_class, unless(@show, do: "hidden")] ++
+        ["animate-spin", @size_class, if(!@show, do: "hidden")] ++
           List.wrap(@class)
       }
       xmlns="http://www.w3.org/2000/svg"
diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex
index a8b41013e..a56760cda 100644
--- a/lib/live_debugger/components/tree.ex
+++ b/lib/live_debugger/components/tree.ex
@@ -31,23 +31,21 @@ defmodule LiveDebugger.Components.Tree do
 
   def tree(assigns) do
     ~H"""
-    <div class={["min-h-20 w-full overflow-y-auto flex flex-col", @class]}>
+    <div class={["min-h-20 px-1 overflow-y-auto overflow-x-hidden flex flex-col", @class]}>
       <div class="flex items-center justify-between">
         <div class="shrink-0 font-medium text-secondary-text px-6 py-3"><%= @title %></div>
         <%= if LiveDebugger.Feature.enabled?(:highlighting) do %>
           <.toggle_switch label="Highlight" checked={@highlight?} phx-click="toggle-highlight" />
         <% end %>
       </div>
-      <div class="w-full px-1 overflow-y-auto">
-        <.tree_node
-          tree_id={@id}
-          tree_node={@tree_node}
-          selected_node_id={@selected_node_id}
-          root?={true}
-          max_opened_node_level={@max_opened_node_level}
-          level={0}
-        />
-      </div>
+      <.tree_node
+        tree_id={@id}
+        tree_node={@tree_node}
+        selected_node_id={@selected_node_id}
+        root?={true}
+        max_opened_node_level={@max_opened_node_level}
+        level={0}
+      />
     </div>
     """
   end
@@ -90,50 +88,46 @@ defmodule LiveDebugger.Components.Tree do
       |> assign(:open, assigns.level < assigns.max_opened_node_level)
 
     ~H"""
-    <div class="relative flex max-w-full">
-      <div class="w-full">
-        <.collapsible
-          :if={@collapsible?}
-          id={"collapsible-#{@tree_node.parsed_id}-#{@tree_id}"}
-          chevron_class="text-accent-icon h-5 w-5"
-          open={@open}
-          label_class="w-full rounded-md py-1 hover:bg-surface-1-bg-hover"
-          style={style_for_padding(@level, @collapsible?)}
-        >
-          <:label>
-            <.label
-              tree_id={@tree_id}
-              selected?={@selected?}
-              parent_dom_id={@parent_dom_id}
-              node={@tree_node}
-              level={@level}
-              collapsible?={true}
-            />
-          </:label>
-          <div class="flex flex-col">
-            <.tree_node
-              :for={child <- @tree_node.children}
-              tree_id={@tree_id}
-              parent_dom_id={if @tree_node[:dom_id], do: @tree_node.dom_id, else: @parent_dom_id}
-              tree_node={child}
-              selected_node_id={@selected_node_id}
-              root?={false}
-              max_opened_node_level={@max_opened_node_level}
-              level={@level + 1}
-            />
-          </div>
-        </.collapsible>
+    <.collapsible
+      :if={@collapsible?}
+      id={"collapsible-#{@tree_node.parsed_id}-#{@tree_id}"}
+      chevron_class="text-accent-icon h-5 w-5"
+      open={@open}
+      label_class="rounded-md py-1 hover:bg-surface-1-bg-hover"
+      style={style_for_padding(@level, @collapsible?)}
+    >
+      <:label>
         <.label
-          :if={not @collapsible?}
           tree_id={@tree_id}
           selected?={@selected?}
           parent_dom_id={@parent_dom_id}
           node={@tree_node}
           level={@level}
-          collapsible?={false}
+          collapsible?={true}
+        />
+      </:label>
+      <div class="flex flex-col">
+        <.tree_node
+          :for={child <- @tree_node.children}
+          tree_id={@tree_id}
+          parent_dom_id={if @tree_node[:dom_id], do: @tree_node.dom_id, else: @parent_dom_id}
+          tree_node={child}
+          selected_node_id={@selected_node_id}
+          root?={false}
+          max_opened_node_level={@max_opened_node_level}
+          level={@level + 1}
         />
       </div>
-    </div>
+    </.collapsible>
+    <.label
+      :if={not @collapsible?}
+      tree_id={@tree_id}
+      selected?={@selected?}
+      parent_dom_id={@parent_dom_id}
+      node={@tree_node}
+      level={@level}
+      collapsible?={false}
+    />
     """
   end
 
@@ -143,42 +137,39 @@ defmodule LiveDebugger.Components.Tree do
   attr(:level, :integer, required: true)
   attr(:collapsible?, :boolean, required: true)
   attr(:selected?, :boolean, required: true)
-  attr(:class, :string, default: nil)
 
   defp label(assigns) do
     assigns =
-      assign(assigns, :padding_style, style_for_padding(assigns.level, assigns.collapsible?))
+      assigns
+      |> assign(:padding_style, style_for_padding(assigns.level, assigns.collapsible?))
+      |> assign(:button_id, "tree-node-button-#{assigns.node.parsed_id}-#{assigns.tree_id}")
 
     ~H"""
     <button
-      id={"tree-node-button-#{@node.parsed_id}-#{@tree_id}"}
+      id={@button_id}
       phx-click="select_node"
       phx-value-node_id={@node.parsed_id}
       phx-value-search-attribute={get_search_attribute(@node)}
       phx-value-search-value={get_search_value(@node, @parent_dom_id)}
       phx-hook="Highlight"
       class={[
-        "flex w-full rounded-md hover:bg-surface-1-bg-hover",
-        unless(@collapsible?, do: "p-1"),
-        @class
+        "flex shrink items-center rounded-md hover:bg-surface-1-bg-hover",
+        if(!@collapsible?, do: "p-1")
       ]}
-      style={unless(@collapsible?, do: @padding_style)}
+      style={if(!@collapsible?, do: @padding_style)}
     >
-      <div class="flex w-full gap-0.5 items-center">
+      <span class="flex flex-1 min-w-0 gap-0.5 items-center">
         <.icon name={@node.icon} class="text-accent-icon w-5 h-5 shrink-0" />
         <.tooltip
           id={"tree-node-#{@node.parsed_id}-#{@tree_id}"}
           content={@node.tooltip}
-          class="w-full flex overflow-x-hidden"
+          class="truncate"
         >
-          <div class={[
-            "truncate",
-            if(@selected?, do: "font-semibold")
-          ]}>
+          <span class={if(@selected?, do: "font-semibold")}>
             <%= @node.label %>
-          </div>
+          </span>
         </.tooltip>
-      </div>
+      </span>
     </button>
     """
   end

From 8c9493cfbc0e349e130b557558c79b2356e701cf Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 13:37:23 +0200
Subject: [PATCH 3/8] making only chevron collapse details via hook

---
 assets/js/hooks.js                   |  3 ++-
 assets/js/hooks/collapsible.js       | 26 ++++++++++++++++++++++++
 assets/js/hooks/collapsible_open.js  |  7 -------
 lib/live_debugger/components.ex      | 30 +++++++++++++++++++++++-----
 lib/live_debugger/components/tree.ex | 19 ++++++++++--------
 5 files changed, 64 insertions(+), 21 deletions(-)
 create mode 100644 assets/js/hooks/collapsible.js
 delete mode 100644 assets/js/hooks/collapsible_open.js

diff --git a/assets/js/hooks.js b/assets/js/hooks.js
index ceabb63a0..a8fff4d24 100644
--- a/assets/js/hooks.js
+++ b/assets/js/hooks.js
@@ -1,7 +1,7 @@
 import Alpine from 'alpinejs';
 import collapse from '@alpinejs/collapse';
 
-import CollapsibleOpen from './hooks/collapsible_open';
+import { CollapsibleOpen, CollapsibleChevronOnly } from './hooks/collapsible';
 import Fullscreen from './hooks/fullscreen';
 import ToggleTheme from './hooks/toggle_theme';
 import Tooltip from './hooks/tooltip';
@@ -22,6 +22,7 @@ window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide());
 function createHooks() {
   return {
     CollapsibleOpen,
+    CollapsibleChevronOnly,
     Fullscreen,
     Tooltip,
     ToggleTheme,
diff --git a/assets/js/hooks/collapsible.js b/assets/js/hooks/collapsible.js
new file mode 100644
index 000000000..5de5815d1
--- /dev/null
+++ b/assets/js/hooks/collapsible.js
@@ -0,0 +1,26 @@
+const CollapsibleOpen = {
+  mounted() {
+    this.el.open = true;
+  },
+};
+
+const CollapsibleChevronOnly = {
+  mounted() {
+    this.chevron = this.el.querySelector('.chevron');
+    this.details = this.el.parentElement;
+    this.handleClick = (e) => {
+      if (e.target === this.chevron) {
+        console.log('open');
+        this.details.open = !this.details.open;
+      }
+      e.preventDefault();
+    };
+
+    this.el.addEventListener('click', this.handleClick);
+  },
+  destroyed() {
+    this.el.removeEventListener('click', this.handleClick);
+  },
+};
+
+export { CollapsibleOpen, CollapsibleChevronOnly };
diff --git a/assets/js/hooks/collapsible_open.js b/assets/js/hooks/collapsible_open.js
deleted file mode 100644
index c643734ae..000000000
--- a/assets/js/hooks/collapsible_open.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const CollapsibleOpen = {
-  mounted() {
-    this.el.open = true;
-  },
-};
-
-export default CollapsibleOpen;
diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index b7b672b25..31bc03d8b 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -121,6 +121,11 @@ defmodule LiveDebugger.Components do
   attr(:chevron_class, :any, default: nil, doc: "CSS class for the chevron icon")
   attr(:open, :boolean, default: false, doc: "Whether the collapsible is open by default")
 
+  attr(:chevron_only?, :boolean,
+    default: false,
+    doc: "Weather to make only chevron clickable to open/close the collapsible"
+  )
+
   attr(:icon, :string,
     default: "icon-chevron-right",
     doc: "Icon for chevron. It will be rotated 90 degrees when the collapsible is open"
@@ -142,12 +147,21 @@ defmodule LiveDebugger.Components do
       {show_collapsible_assign(@open)}
     >
       <summary
-        class={[
-          "block flex items-center cursor-pointer" | List.wrap(@label_class)
-        ]}
+        id={@id <> "-summary"}
+        class={
+          [
+            "block flex items-center",
+            if(@chevron_only?, do: "cursor-default", else: "cursor-pointer")
+          ] ++
+            List.wrap(@label_class)
+        }
+        {allow_only_chevron_to_collapse(@chevron_only?)}
         {@rest}
       >
-        <.icon name={@icon} class={["rotate-icon shrink-0" | List.wrap(@chevron_class)]} />
+        <.icon
+          name={@icon}
+          class={["chevron cursor-pointer rotate-icon shrink-0" | List.wrap(@chevron_class)]}
+        />
         <%= render_slot(@label) %>
       </summary>
       <%= render_slot(@inner_block) %>
@@ -246,11 +260,17 @@ defmodule LiveDebugger.Components do
   end
 
   @doc """
-  Used to add Hook to element based on condition.
+  Used to add CollapsibleOpen hook to element based on condition.
   """
   def show_collapsible_assign(true), do: %{:"phx-hook" => "CollapsibleOpen"}
   def show_collapsible_assign(_), do: %{}
 
+  @doc """
+  Used to add CollapsibleChevronOnly hook to element based on condition.
+  """
+  def allow_only_chevron_to_collapse(true), do: %{:"phx-hook" => "CollapsibleChevronOnly"}
+  def allow_only_chevron_to_collapse(_), do: %{}
+
   @doc """
   Typography component to render headings.
   """
diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex
index a56760cda..0ca82a8bf 100644
--- a/lib/live_debugger/components/tree.ex
+++ b/lib/live_debugger/components/tree.ex
@@ -94,6 +94,7 @@ defmodule LiveDebugger.Components.Tree do
       chevron_class="text-accent-icon h-5 w-5"
       open={@open}
       label_class="rounded-md py-1 hover:bg-surface-1-bg-hover"
+      chevron_only?={true}
       style={style_for_padding(@level, @collapsible?)}
     >
       <:label>
@@ -145,12 +146,8 @@ defmodule LiveDebugger.Components.Tree do
       |> assign(:button_id, "tree-node-button-#{assigns.node.parsed_id}-#{assigns.tree_id}")
 
     ~H"""
-    <button
+    <span
       id={@button_id}
-      phx-click="select_node"
-      phx-value-node_id={@node.parsed_id}
-      phx-value-search-attribute={get_search_attribute(@node)}
-      phx-value-search-value={get_search_value(@node, @parent_dom_id)}
       phx-hook="Highlight"
       class={[
         "flex shrink items-center rounded-md hover:bg-surface-1-bg-hover",
@@ -158,7 +155,13 @@ defmodule LiveDebugger.Components.Tree do
       ]}
       style={if(!@collapsible?, do: @padding_style)}
     >
-      <span class="flex flex-1 min-w-0 gap-0.5 items-center">
+      <button
+        class="flex min-w-0 gap-0.5 items-center"
+        phx-click="select_node"
+        phx-value-node_id={@node.parsed_id}
+        phx-value-search-attribute={get_search_attribute(@node)}
+        phx-value-search-value={get_search_value(@node, @parent_dom_id)}
+      >
         <.icon name={@node.icon} class="text-accent-icon w-5 h-5 shrink-0" />
         <.tooltip
           id={"tree-node-#{@node.parsed_id}-#{@tree_id}"}
@@ -169,8 +172,8 @@ defmodule LiveDebugger.Components.Tree do
             <%= @node.label %>
           </span>
         </.tooltip>
-      </span>
-    </button>
+      </button>
+    </span>
     """
   end
 

From b6dc6a1c8e82f0f33cc13256214199f7633852b3 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 14:00:06 +0200
Subject: [PATCH 4/8] remove log

---
 assets/js/hooks/collapsible.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/assets/js/hooks/collapsible.js b/assets/js/hooks/collapsible.js
index 5de5815d1..6f1fd8973 100644
--- a/assets/js/hooks/collapsible.js
+++ b/assets/js/hooks/collapsible.js
@@ -10,7 +10,6 @@ const CollapsibleChevronOnly = {
     this.details = this.el.parentElement;
     this.handleClick = (e) => {
       if (e.target === this.chevron) {
-        console.log('open');
         this.details.open = !this.details.open;
       }
       e.preventDefault();

From 04db498cf15f210357bcba30104440785640ac52 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 14:36:23 +0200
Subject: [PATCH 5/8] add doc

---
 lib/live_debugger/components.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index 31bc03d8b..f774a4bf0 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -541,7 +541,7 @@ defmodule LiveDebugger.Components do
   @doc """
   Renders a tooltip using Tooltip hook.
   """
-  attr(:id, :string, required: true)
+  attr(:id, :string, required: true, doc: "ID of the tooltip. Prefix is added automatically.")
   attr(:content, :string, default: nil)
   attr(:position, :string, default: "top", values: ["top", "bottom"])
   attr(:rest, :global)

From ee6fe85103454f5899d9f9d53d34b9ea3f9cc97d Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Wed, 23 Apr 2025 14:37:43 +0200
Subject: [PATCH 6/8] highlighting fixed

---
 lib/live_debugger/components/tree.ex | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex
index 0ca82a8bf..1edebf97d 100644
--- a/lib/live_debugger/components/tree.ex
+++ b/lib/live_debugger/components/tree.ex
@@ -146,22 +146,20 @@ defmodule LiveDebugger.Components.Tree do
       |> assign(:button_id, "tree-node-button-#{assigns.node.parsed_id}-#{assigns.tree_id}")
 
     ~H"""
-    <span
+    <button
       id={@button_id}
       phx-hook="Highlight"
+      phx-click="select_node"
+      phx-value-node_id={@node.parsed_id}
+      phx-value-search-attribute={get_search_attribute(@node)}
+      phx-value-search-value={get_search_value(@node, @parent_dom_id)}
       class={[
-        "flex shrink items-center rounded-md hover:bg-surface-1-bg-hover",
+        "flex shrink grow items-center rounded-md hover:bg-surface-1-bg-hover",
         if(!@collapsible?, do: "p-1")
       ]}
       style={if(!@collapsible?, do: @padding_style)}
     >
-      <button
-        class="flex min-w-0 gap-0.5 items-center"
-        phx-click="select_node"
-        phx-value-node_id={@node.parsed_id}
-        phx-value-search-attribute={get_search_attribute(@node)}
-        phx-value-search-value={get_search_value(@node, @parent_dom_id)}
-      >
+      <span class="flex min-w-0 gap-0.5 items-center">
         <.icon name={@node.icon} class="text-accent-icon w-5 h-5 shrink-0" />
         <.tooltip
           id={"tree-node-#{@node.parsed_id}-#{@tree_id}"}
@@ -172,8 +170,8 @@ defmodule LiveDebugger.Components.Tree do
             <%= @node.label %>
           </span>
         </.tooltip>
-      </button>
-    </span>
+      </span>
+    </button>
     """
   end
 

From 97fdaa460896eb0faff741db0f550d89c98d7612 Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Thu, 24 Apr 2025 12:35:38 +0200
Subject: [PATCH 7/8] remove hook, make only text select node, add underline

---
 assets/js/hooks.js                   |  3 +--
 assets/js/hooks/collapsible.js       | 25 -------------------------
 assets/js/hooks/collapsible_open.js  |  7 +++++++
 lib/live_debugger/components.ex      | 25 ++-----------------------
 lib/live_debugger/components/tree.ex | 25 +++++++++++++------------
 5 files changed, 23 insertions(+), 62 deletions(-)
 delete mode 100644 assets/js/hooks/collapsible.js
 create mode 100644 assets/js/hooks/collapsible_open.js

diff --git a/assets/js/hooks.js b/assets/js/hooks.js
index a8fff4d24..ceabb63a0 100644
--- a/assets/js/hooks.js
+++ b/assets/js/hooks.js
@@ -1,7 +1,7 @@
 import Alpine from 'alpinejs';
 import collapse from '@alpinejs/collapse';
 
-import { CollapsibleOpen, CollapsibleChevronOnly } from './hooks/collapsible';
+import CollapsibleOpen from './hooks/collapsible_open';
 import Fullscreen from './hooks/fullscreen';
 import ToggleTheme from './hooks/toggle_theme';
 import Tooltip from './hooks/tooltip';
@@ -22,7 +22,6 @@ window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide());
 function createHooks() {
   return {
     CollapsibleOpen,
-    CollapsibleChevronOnly,
     Fullscreen,
     Tooltip,
     ToggleTheme,
diff --git a/assets/js/hooks/collapsible.js b/assets/js/hooks/collapsible.js
deleted file mode 100644
index 6f1fd8973..000000000
--- a/assets/js/hooks/collapsible.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const CollapsibleOpen = {
-  mounted() {
-    this.el.open = true;
-  },
-};
-
-const CollapsibleChevronOnly = {
-  mounted() {
-    this.chevron = this.el.querySelector('.chevron');
-    this.details = this.el.parentElement;
-    this.handleClick = (e) => {
-      if (e.target === this.chevron) {
-        this.details.open = !this.details.open;
-      }
-      e.preventDefault();
-    };
-
-    this.el.addEventListener('click', this.handleClick);
-  },
-  destroyed() {
-    this.el.removeEventListener('click', this.handleClick);
-  },
-};
-
-export { CollapsibleOpen, CollapsibleChevronOnly };
diff --git a/assets/js/hooks/collapsible_open.js b/assets/js/hooks/collapsible_open.js
new file mode 100644
index 000000000..c643734ae
--- /dev/null
+++ b/assets/js/hooks/collapsible_open.js
@@ -0,0 +1,7 @@
+const CollapsibleOpen = {
+  mounted() {
+    this.el.open = true;
+  },
+};
+
+export default CollapsibleOpen;
diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index f774a4bf0..da0ee9494 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -121,11 +121,6 @@ defmodule LiveDebugger.Components do
   attr(:chevron_class, :any, default: nil, doc: "CSS class for the chevron icon")
   attr(:open, :boolean, default: false, doc: "Whether the collapsible is open by default")
 
-  attr(:chevron_only?, :boolean,
-    default: false,
-    doc: "Weather to make only chevron clickable to open/close the collapsible"
-  )
-
   attr(:icon, :string,
     default: "icon-chevron-right",
     doc: "Icon for chevron. It will be rotated 90 degrees when the collapsible is open"
@@ -148,20 +143,10 @@ defmodule LiveDebugger.Components do
     >
       <summary
         id={@id <> "-summary"}
-        class={
-          [
-            "block flex items-center",
-            if(@chevron_only?, do: "cursor-default", else: "cursor-pointer")
-          ] ++
-            List.wrap(@label_class)
-        }
-        {allow_only_chevron_to_collapse(@chevron_only?)}
+        class={["block flex items-center cursor-pointer" | List.wrap(@label_class)]}
         {@rest}
       >
-        <.icon
-          name={@icon}
-          class={["chevron cursor-pointer rotate-icon shrink-0" | List.wrap(@chevron_class)]}
-        />
+        <.icon name={@icon} class={["rotate-icon shrink-0" | List.wrap(@chevron_class)]} />
         <%= render_slot(@label) %>
       </summary>
       <%= render_slot(@inner_block) %>
@@ -265,12 +250,6 @@ defmodule LiveDebugger.Components do
   def show_collapsible_assign(true), do: %{:"phx-hook" => "CollapsibleOpen"}
   def show_collapsible_assign(_), do: %{}
 
-  @doc """
-  Used to add CollapsibleChevronOnly hook to element based on condition.
-  """
-  def allow_only_chevron_to_collapse(true), do: %{:"phx-hook" => "CollapsibleChevronOnly"}
-  def allow_only_chevron_to_collapse(_), do: %{}
-
   @doc """
   Typography component to render headings.
   """
diff --git a/lib/live_debugger/components/tree.ex b/lib/live_debugger/components/tree.ex
index 1edebf97d..3b84cf8b7 100644
--- a/lib/live_debugger/components/tree.ex
+++ b/lib/live_debugger/components/tree.ex
@@ -94,7 +94,6 @@ defmodule LiveDebugger.Components.Tree do
       chevron_class="text-accent-icon h-5 w-5"
       open={@open}
       label_class="rounded-md py-1 hover:bg-surface-1-bg-hover"
-      chevron_only?={true}
       style={style_for_padding(@level, @collapsible?)}
     >
       <:label>
@@ -146,32 +145,34 @@ defmodule LiveDebugger.Components.Tree do
       |> assign(:button_id, "tree-node-button-#{assigns.node.parsed_id}-#{assigns.tree_id}")
 
     ~H"""
-    <button
-      id={@button_id}
-      phx-hook="Highlight"
-      phx-click="select_node"
-      phx-value-node_id={@node.parsed_id}
-      phx-value-search-attribute={get_search_attribute(@node)}
-      phx-value-search-value={get_search_value(@node, @parent_dom_id)}
+    <span
       class={[
         "flex shrink grow items-center rounded-md hover:bg-surface-1-bg-hover",
         if(!@collapsible?, do: "p-1")
       ]}
       style={if(!@collapsible?, do: @padding_style)}
     >
-      <span class="flex min-w-0 gap-0.5 items-center">
+      <button
+        id={@button_id}
+        phx-hook="Highlight"
+        phx-click="select_node"
+        phx-value-node_id={@node.parsed_id}
+        phx-value-search-attribute={get_search_attribute(@node)}
+        phx-value-search-value={get_search_value(@node, @parent_dom_id)}
+        class="flex min-w-0 gap-0.5 items-center"
+      >
         <.icon name={@node.icon} class="text-accent-icon w-5 h-5 shrink-0" />
         <.tooltip
           id={"tree-node-#{@node.parsed_id}-#{@tree_id}"}
           content={@node.tooltip}
           class="truncate"
         >
-          <span class={if(@selected?, do: "font-semibold")}>
+          <span class={["hover:underline", if(@selected?, do: "font-semibold")]}>
             <%= @node.label %>
           </span>
         </.tooltip>
-      </span>
-    </button>
+      </button>
+    </span>
     """
   end
 

From 77612a0f63a3f29208a228b7461128037b0465cf Mon Sep 17 00:00:00 2001
From: Alan Guzek <alan.guzek@swmansion.com>
Date: Fri, 25 Apr 2025 10:29:06 +0200
Subject: [PATCH 8/8] remove duplicate styling

---
 lib/live_debugger/components.ex | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/live_debugger/components.ex b/lib/live_debugger/components.ex
index da0ee9494..e0ced7f96 100644
--- a/lib/live_debugger/components.ex
+++ b/lib/live_debugger/components.ex
@@ -143,7 +143,7 @@ defmodule LiveDebugger.Components do
     >
       <summary
         id={@id <> "-summary"}
-        class={["block flex items-center cursor-pointer" | List.wrap(@label_class)]}
+        class={["flex items-center cursor-pointer" | List.wrap(@label_class)]}
         {@rest}
       >
         <.icon name={@icon} class={["rotate-icon shrink-0" | List.wrap(@chevron_class)]} />