Feature: add settings panel

lib/live_debugger_web/components.ex

@@ -598,11 +598,15 @@ 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(:rest, :global)
 
   def toggle_switch(assigns) do
     ~H"""
-    <label class="inline-flex items-center cursor-pointer pr-6 py-3">
+    <label class={[
+      "inline-flex items-center cursor-pointer pr-6 py-3"
+      | List.wrap(@wrapper_class)
+    ]}>
       <span class="text-xs font-normal text-primary-text mx-2">
         <%= @label %>
       </span>

lib/live_debugger_web/components/navbar.ex

@@ -5,6 +5,8 @@ defmodule LiveDebuggerWeb.Components.Navbar do
 
   use LiveDebuggerWeb, :component
 
+  alias LiveDebuggerWeb.Helpers.RoutesHelper
+
   @doc """
   Renders base navbar component.
   """
@@ -65,20 +67,13 @@ defmodule LiveDebuggerWeb.Components.Navbar do
     """
   end
 
-  @doc """
-  Renders a theme toggle button.
-  """
-  def theme_toggle(assigns) do
+  attr(:class, :any, default: nil, doc: "Additional classes to add to the link.")
+
+  def settings_button(assigns) do
     ~H"""
-    <div class="flex">
-      <.nav_icon id="light-mode-switch" class="dark:hidden" icon="icon-moon" phx-hook="ToggleTheme" />
-      <.nav_icon
-        id="dark-mode-switch"
-        class="hidden dark:block"
-        icon="icon-sun"
-        phx-hook="ToggleTheme"
-      />
-    </div>
+    <.link navigate={RoutesHelper.settings()} class={@class}>
+      <.nav_icon icon="icon-settings" />
+    </.link>
     """
   end
 

lib/live_debugger_web/helpers/routes_helper.ex

@@ -26,4 +26,9 @@ defmodule LiveDebuggerWeb.Helpers.RoutesHelper do
   def error(error) do
     ~p"/error/#{error}"
   end
+
+  @spec settings() :: String.t()
+  def settings() do
+    ~p"/settings"
+  end
 end

lib/live_debugger_web/live/channel_dashboard_live.ex

@@ -55,7 +55,7 @@ defmodule LiveDebuggerWeb.ChannelDashboardLive do
           pid={Parsers.pid_to_string(@lv_process.result.pid)}
         />
         <div class="flex items-center gap-2">
-          <Navbar.theme_toggle />
+          <Navbar.settings_button />
           <span :if={@lv_process.ok?} class="h-5 border-r border-default-border lg:hidden"></span>
           <.nav_icon
             :if={@lv_process.ok?}

lib/live_debugger_web/live/live_views_dashboard_live.ex

@@ -23,7 +23,7 @@ defmodule LiveDebuggerWeb.LiveViewsDashboardLive do
     <div class="flex-1 min-w-[25rem] grid grid-rows-[auto_1fr]">
       <Navbar.navbar class="flex justify-between">
         <Navbar.live_debugger_logo />
-        <Navbar.theme_toggle />
+        <Navbar.settings_button />
       </Navbar.navbar>
       <div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
         <div class="flex items-center justify-between">

lib/live_debugger_web/live/settings_live.ex

@@ -0,0 +1,160 @@
+defmodule LiveDebuggerWeb.SettingsLive do
+  @moduledoc """
+  LiveView for the settings page.
+  """
+
+  use LiveDebuggerWeb, :live_view
+
+  alias LiveDebuggerWeb.Components.Navbar
+  alias LiveDebuggerWeb.Helpers.RoutesHelper
+
+  @impl true
+  def render(assigns) do
+    ~H"""
+    <div class="flex-1 min-w-[25rem] grid grid-rows-[auto_1fr]">
+      <Navbar.navbar class="flex">
+        <Navbar.return_link return_link={RoutesHelper.live_views_dashboard()} />
+        <Navbar.live_debugger_logo />
+      </Navbar.navbar>
+      <div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
+        <div class="flex items-center justify-between">
+          <.h1>Settings</.h1>
+        </div>
+
+        <%!-- 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">
+              <.dark_mode_button />
+              <.light_mode_button />
+            </div>
+          </div>
+          <%!-- Checkboxes --%>
+          <div class="p-6 border-t border-default-border flex flex-col gap-3">
+            <.settings_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."
+              checked={false}
+              phx-click="update"
+              phx-value-setting="deadview_mode"
+            />
+
+            <.settings_switch
+              label="Enable global tracing"
+              description="Enabling this feature may have a negative impact on application performance."
+              checked={false}
+              phx-click="update"
+              phx-value-setting="global_tracing"
+            />
+
+            <.settings_switch
+              label="Refresh tracing on reload"
+              description="Enabling this feature may have a negative impact on application performance."
+              checked={false}
+              phx-click="update"
+              phx-value-setting="refresh_tracing_on_reload"
+            />
+          </div>
+        </div>
+
+        <%!-- Lower section --%>
+        <div class="mt-6 bg-surface-0-bg rounded shadow-custom border border-default-border">
+          <%!-- Restart button --%>
+          <div class="p-6 flex flex-col md:flex-row justify-between md:items-center gap-4">
+            <div class="flex flex-col gap-1">
+              <p class="font-semibold">Restart LiveDebugger</p>
+              <p class="text-secondary-text">
+                Use this option if LiveDebugger appears to stop responding or not working properly.
+              </p>
+            </div>
+            <.button variant="secondary" phx-click="restart">Restart&nbsp;LiveDebugger</.button>
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
+  @impl true
+  def handle_event("update", %{"setting" => _setting}, socket) do
+    {:noreply, socket}
+  end
+
+  @impl true
+  def handle_event("restart", _, socket) do
+    {:noreply, socket}
+  end
+
+  attr(:label, :string, required: true)
+  attr(:description, :string, required: true)
+  attr(:checked, :boolean, default: false)
+  attr(:rest, :global)
+
+  defp settings_switch(assigns) do
+    ~H"""
+    <div class="flex items-center">
+      <.toggle_switch checked={@checked} wrapper_class="pr-3 py-0" {@rest} />
+      <div class="flex flex-col gap-0.5">
+        <p class="font-semibold"><%= @label %></p>
+        <p class="text-secondary-text"><%= @description %></p>
+      </div>
+    </div>
+    """
+  end
+
+  defp dark_mode_button(assigns) do
+    ~H"""
+    <.mode_button
+      id="dark-mode-switch"
+      icon="icon-moon"
+      text="Dark"
+      class="dark:hidden text-button-secondary-content bg-button-secondary-bg hover:bg-button-secondary-bg-hover border border-default-border"
+      phx-hook="ToggleTheme"
+    />
+    <.mode_button
+      icon="icon-moon"
+      text="Dark"
+      class="hidden dark:flex text-button-primary-content bg-button-primary-bg"
+    />
+    """
+  end
+
+  defp light_mode_button(assigns) do
+    ~H"""
+    <.mode_button
+      id="light-mode-switch"
+      icon="icon-sun"
+      text="Light"
+      class="hidden dark:flex text-button-secondary-content bg-button-secondary-bg hover:bg-button-secondary-bg-hover border border-default-border"
+      phx-hook="ToggleTheme"
+    />
+    <.mode_button
+      icon="icon-sun"
+      text="Light"
+      class="dark:hidden text-button-primary-content bg-button-primary-bg"
+    />
+    """
+  end
+
+  attr(:icon, :string, required: true)
+  attr(:text, :string, required: true)
+  attr(:class, :string, default: "")
+  attr(:rest, :global)
+
+  defp mode_button(assigns) do
+    ~H"""
+    <button
+      class={[
+        "flex items-center justify-center gap-2 py-2 px-4 rounded",
+        @class
+      ]}
+      {@rest}
+    >
+      <.icon name={@icon} class="w-5 h-5" />
+      <p><%= @text %></p>
+    </button>
+    """
+  end
+end

lib/live_debugger_web/live/traces_live.ex

@@ -84,7 +84,7 @@ defmodule LiveDebuggerWeb.TracesLive do
   def render(assigns) do
     ~H"""
     <div class="max-w-full @container/traces flex flex-1">
-      <.section title="Callback traces" id="traces" inner_class="mx-0 my-4 px-4" class="flex-1">
+      <.section title="Callback traces" id="traces" inner_class="mx-0 mt-4 px-4" class="flex-1">
         <:right_panel>
           <div class="flex gap-2 items-center">
             <Traces.toggle_tracing_button tracing_started?={@tracing_helper.tracing_started?} />
@@ -145,13 +145,13 @@ defmodule LiveDebuggerWeb.TracesLive do
               <.button
                 :if={not @tracing_helper.tracing_started? && @traces_continuation != :end_of_table}
                 phx-click="load-more"
-                class="w-40"
+                class="w-4 mb-4"
                 variant="secondary"
               >
                 Load more
               </.button>
             <% else %>
-              <.spinner size="sm" />
+              <.spinner size="sm" class="mb-4" />
             <% end %>
           </div>
         </div>

lib/live_debugger_web/live/window_dashboard_live.ex

@@ -35,7 +35,7 @@ defmodule LiveDebuggerWeb.WindowDashboardLive do
         />
         <Navbar.live_debugger_logo />
         <Navbar.fill />
-        <Navbar.theme_toggle />
+        <Navbar.settings_button />
       </Navbar.navbar>
       <div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
         <div class="flex items-center justify-between">

lib/live_debugger_web/router.ex

@@ -22,6 +22,7 @@ defmodule LiveDebuggerWeb.Router do
     live("/pid/:pid", ChannelDashboardLive)
     live("/transport_pid/:transport_pid", WindowDashboardLive)
 
+    live("/settings", SettingsLive)
     live("/", LiveViewsDashboardLive)
   end
 end

test/live_debugger/channel_dashboard_test.exs

@@ -108,6 +108,21 @@ defmodule LiveDebugger.ChannelDashboardTest do
     end)
   end
 
+  @sessions 2
+  feature "settings button exists and redirects to settings page", %{
+    sessions: [dev_app, debugger]
+  } do
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(first_link())
+    |> assert_has(css("navbar a[href=\"/settings\"]"))
+    |> click(css("navbar a[href=\"/settings\"]"))
+    |> assert_has(css("h1", text: "Settings"))
+  end
+
   @sessions 2
   feature "user can change nodes using node tree and see their assigns and callback traces", %{
     sessions: [dev_app, debugger]

test/live_debugger/live_views_dashboard_test.exs

@@ -22,6 +22,20 @@ defmodule LiveDebugger.LiveViewsDashboardTest do
     |> assert_has(live_sessions(count: 2))
   end
 
+  @sessions 2
+  feature "settings button exists and redirects to settings page", %{
+    sessions: [dev_app, debugger]
+  } do
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> assert_has(css("navbar a[href=\"/settings\"]"))
+    |> click(css("navbar a[href=\"/settings\"]"))
+    |> assert_has(css("h1", text: "Settings"))
+  end
+
   defp title(text: text), do: css("h1", text: text)
 
   defp live_sessions(count: count), do: css("#live-sessions > div", count: count)

test/live_debugger/window_dashboard_test.exs

@@ -31,6 +31,22 @@ defmodule LiveDebugger.WindowDashboardTest do
     |> assert_has(live_sessions(count: 1))
   end
 
+  @sessions 2
+  feature "settings button exists and redirects to settings page", %{
+    sessions: [dev_app, debugger]
+  } do
+    dev_app
+    |> visit(@dev_app_url)
+
+    debugger
+    |> visit("/")
+    |> click(window_link())
+    |> assert_has(title(text: "Active LiveViews in a single window"))
+    |> assert_has(css("navbar a[href=\"/settings\"]"))
+    |> click(css("navbar a[href=\"/settings\"]"))
+    |> assert_has(css("h1", text: "Settings"))
+  end
+
   defp title(text: text), do: css("h1", text: text)
 
   defp live_sessions(count: count), do: css("#live-sessions ", count: count)