Enhanement: Create groups for setting

assets/app/styles/colors.css

@@ -70,6 +70,7 @@
 
   /* SWM Yellow */
   --swm-yellow-20: #fffae1;
+  --swm-yellow-30: #fef3c6;
   --swm-yellow-40: #fff1b2;
   --swm-yellow-60: #ffe780;
   --swm-yellow-80: #ffe04b;

assets/app/styles/themes/light.css

@@ -78,8 +78,8 @@
   --info-text: var(--primary-text);
 
   /* Warning */
-  --warning-bg: var(--swm-yellow-20);
-  --warning-border: var(--swm-yellow-40);
+  --warning-bg: var(--swm-yellow-30);
+  --warning-border: var(--swm-yellow-60);
   --warning-text: var(--primary-text);
 
   --search-highlight-bg: var(--swm-yellow-80);

lib/live_debugger/app/settings/web/components.ex

@@ -9,23 +9,27 @@ defmodule LiveDebugger.App.Settings.Web.Components do
 
   attr(:id, :string, required: true)
   attr(:label, :string, required: true)
-  attr(:description, :string, required: true)
+  attr(:description_text, :string)
   attr(:checked, :boolean, default: false)
   attr(:rest, :global)
 
+  slot(:description)
+
   def settings_switch(assigns) do
     ~H"""
-    <div class="flex items-center">
+    <div class="flex items-start">
       <.toggle_switch
         id={@id}
         checked={@checked}
-        wrapper_class="pr-3 py-0"
+        wrapper_class="!pr-3 !py-1"
         {@rest}
         phx-change={clear_flash("#flash-info", :info)}
       />
       <div class="flex flex-col gap-0.5">
         <p class="font-semibold"><%= @label %></p>
-        <p class="text-secondary-text"><%= @description %></p>
+        <p class="text-secondary-text">
+          <%= if(@description != [], do: render_slot(@description), else: @description_text) %>
+        </p>
       </div>
     </div>
     """

lib/live_debugger/app/settings/web/settings_live.ex

@@ -16,6 +16,7 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
   alias LiveDebugger.Bus
   alias LiveDebugger.App.Events.UserRefreshedTrace
 
+  @config_browser_features_docs_url "https://hexdocs.pm/live_debugger/config.html#browser-features"
   @available_settings SettingsStorage.available_settings() |> Enum.map(&Atom.to_string/1)
 
   @impl true
@@ -27,6 +28,7 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
     socket
     |> assign(return_to: params["return_to"])
     |> assign(settings: SettingsStorage.get_all())
+    |> assign(config_browser_features_docs_url: @config_browser_features_docs_url)
     |> noreply()
   end
 
@@ -50,56 +52,78 @@ defmodule LiveDebugger.App.Settings.Web.SettingsLive do
 
         <%!-- Upper section --%>
         <div class="mt-6 bg-surface-0-bg rounded shadow-custom border border-default-border">
-          <%!-- Appearance --%>
-          <div class="p-6">
-            <p class="font-semibold mb-3">Appearance</p>
-            <div class="flex gap-2">
-              <SettingsComponents.dark_mode_button />
-              <SettingsComponents.light_mode_button />
+          <div class="p-6 flex flex-col gap-3">
+            <p class="font-semibold mb-3 text-sm">Display</p>
+            <div>
+              <p class="font-semibold mb-3">Mode</p>
+              <div class="flex gap-2 mb-4">
+                <SettingsComponents.dark_mode_button />
+                <SettingsComponents.light_mode_button />
+              </div>
             </div>
+            <SettingsComponents.settings_switch
+              id="highlight-in-browser-switch"
+              label="Highlight components"
+              checked={@settings[:highlight_in_browser]}
+              phx-click="update"
+              phx-value-setting="highlight_in_browser"
+            >
+              <:description>
+                When enabled, it will highlight LiveViews and LiveComponents in the browser using Components Tree and Active LiveViews.
+                For this feature to work, you must have enabled browser features (See
+                <.link
+                  href={@config_browser_features_docs_url}
+                  target="_blank"
+                  class="text-link-primary hover:text-link-primary-hover"
+                >
+                  docs
+                </.link>
+                for config).
+              </:description>
+            </SettingsComponents.settings_switch>
+            <SettingsComponents.settings_switch
+              id="debug-button-switch"
+              label="Show Debug Button"
+              description_text="When enabled, a debug button will be added to every LiveView page, allowing you to quickly open LiveDebugger for the current page."
+              checked={@settings[:debug_button]}
+              phx-click="update"
+              phx-value-setting="debug_button"
+            />
           </div>
-          <%!-- Checkboxes --%>
           <div class="p-6 border-t border-default-border flex flex-col gap-3">
+            <p class="font-semibold mb-3 text-sm">Debugging behavior</p>
             <SettingsComponents.settings_switch
               id="dead-view-mode-switch"
               label="Enable DeadView mode"
-              description="When enabled, LiveDebugger won't redirect to new LiveView after page redirect or reload, allowing you to browse assigns and traces of dead LiveViews."
+              description_text="When enabled, LiveDebugger won't redirect to new LiveView after page redirect or reload, allowing you to browse assigns and traces of dead LiveViews."
               checked={@settings[:dead_view_mode]}
               phx-click="update"
               phx-value-setting="dead_view_mode"
             />
-
-            <SettingsComponents.settings_switch
-              id="garbage-collection-switch"
-              label="Garbage Collection"
-              description="When enabled, LiveDebugger will remove old data to free up memory. Disabling this option will lead to increased memory usage."
-              checked={@settings[:garbage_collection]}
-              phx-click="update"
-              phx-value-setting="garbage_collection"
-            />
-            <SettingsComponents.settings_switch
-              id="debug-button-switch"
-              label="Debug Button"
-              description="When enabled, a debug button will be added to every LiveView page, allowing you to quickly open LiveDebugger for the current page."
-              checked={@settings[:debug_button]}
-              phx-click="update"
-              phx-value-setting="debug_button"
-            />
             <SettingsComponents.settings_switch
               id="tracing-enabled-on-start-switch"
               label="Tracing enabled on start"
-              description="When enabled, LiveDebugger will start tracing as soon as you open the debugger. When disabled, LiveDebugger still records all traces, but you will need to manually start tracing to see new traces coming."
+              description_text="When enabled, LiveDebugger will start tracing as soon as you open the debugger. When disabled, LiveDebugger still records all traces, but you will need to manually start tracing to see new traces coming."
               checked={@settings[:tracing_enabled_on_start]}
               phx-click="update"
               phx-value-setting="tracing_enabled_on_start"
             />
+          </div>
+          <div class="p-6 border-t border-default-border flex flex-col gap-3">
+            <div class="flex gap-3 mb-3 items-center">
+              <p class="font-semibold text-sm">Performance & memory</p>
+              <div class="flex gap-1 items-center bg-warning-bg border border-warning-border rounded-full text-warning-text py-1 px-2">
+                <.icon name="icon-triangle-alert" class="w-3 h-3" />
+                <span class="text-[11px] font-semibold">High impact</span>
+              </div>
+            </div>
             <SettingsComponents.settings_switch
-              id="highlight-in-browser-switch"
-              label="Highlight components"
-              description="When enabled, it will highlight LiveViews and LiveComponent in the browser using Components Tree and Active LiveViews. For this feature to work, you must have enabled browser features (See docs for config)."
-              checked={@settings[:highlight_in_browser]}
+              id="garbage-collection-switch"
+              label="Garbage Collection"
+              description_text="When enabled, LiveDebugger will remove old data to free up memory. Disabling this option will lead to increased memory usage."
+              checked={@settings[:garbage_collection]}
               phx-click="update"
-              phx-value-setting="highlight_in_browser"
+              phx-value-setting="garbage_collection"
             />
           </div>
         </div>

lib/live_debugger/app/web/components.ex

@@ -990,7 +990,7 @@ defmodule LiveDebugger.App.Web.Components do
   Based on [Tailwind CSS Toggle - Flowbite](https://flowbite.com/docs/forms/toggle)
   """
   attr(:checked, :boolean, default: false, doc: "Whether the switch is checked.")
-  attr(:label, :string, default: "", doc: "Label for the switch.")
+  attr(:label, :string, default: nil, doc: "Label for the switch.")
   attr(:wrapper_class, :any, default: nil, doc: "Additional classes to add to the switch.")
   attr(:id, :string, required: true, doc: "ID of the switch.")
   attr(:disabled, :boolean, default: false, doc: "Whether the switch is disabled.")
@@ -1004,7 +1004,7 @@ defmodule LiveDebugger.App.Web.Components do
         if(@disabled, do: "opacity-50 pointer-events-none", else: "cursor-pointer")
       ] ++ List.wrap(@wrapper_class)
     }>
-      <span class="text-xs font-normal text-primary-text mx-2">
+      <span :if={@label} class="text-xs font-normal text-primary-text mx-2">
         <%= @label %>
       </span>
       <form>