remove hook, make only text select node, add underline

Author: GuzekAlan

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,

assets/js/hooks/collapsible.js

@@ -0,0 +1,7 @@
+const CollapsibleOpen = {
+  mounted() {
+    this.el.open = true;
+  },
+};
+
+export default CollapsibleOpen;

assets/js/hooks/collapsible_open.js

@@ -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.
   """

lib/live_debugger/components.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