Bug: fix duplicated ids in toggle_switch component (#446)

Author: kraleppa

lib/live_debugger_web/components.ex

@@ -590,6 +590,7 @@ defmodule LiveDebuggerWeb.Components do
   attr(:checked, :boolean, default: false, doc: "Whether the switch is checked.")
   attr(:label, :string, default: "", doc: "Label for the switch.")
   attr(:wrapper_class, :any, default: nil, doc: "Additional classes to add to the switch.")
+  attr(:id, :string, default: nil, doc: "ID of the switch.")
   attr(:rest, :global)
 
   def toggle_switch(assigns) do
@@ -601,7 +602,7 @@ defmodule LiveDebuggerWeb.Components do
       <span class="text-xs font-normal text-primary-text mx-2">
         <%= @label %>
       </span>
-      <input id="highlight-switch" type="checkbox" class="sr-only peer" checked={@checked} {@rest} />
+      <input id={@id} type="checkbox" class="sr-only peer" checked={@checked} {@rest} />
       <div class="relative w-9 h-5 bg-ui-muted peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-ui-accent rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-ui-surface after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-ui-accent ">
       </div>
     </label>

lib/live_debugger_web/components/tree.ex

@@ -36,7 +36,12 @@ defmodule LiveDebuggerWeb.Components.Tree do
       <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" />
+          <.toggle_switch
+            id="highlight-switch"
+            label="Highlight"
+            checked={@highlight?}
+            phx-click="toggle-highlight"
+          />
         <% end %>
       </div>
       <div class="flex-1">