Skip to content

Commit 90711d3

Browse files
kraleppakraleppa
authored
Feature: add settings panel (#435)
* Added settings button * Basic settings view * Added navbar and stuff * Added appearance select * Removed comment * All buttons added * Added description of deadview * Added clicks * Added tests with checks for settings button * Post merge fix * Removed obsolete margin from callback traces * Added margins for load more button * Simplified html * Refactored settings * Removed phx-click
1 parent 2ddf891 commit 90711d3

13 files changed

Lines changed: 234 additions & 20 deletions

‎assets/icons/settings.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎lib/live_debugger_web/components.ex‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -598,11 +598,15 @@ defmodule LiveDebuggerWeb.Components do
598598
"""
599599
attr(:checked, :boolean, default: false, doc: "Whether the switch is checked.")
600600
attr(:label, :string, default: "", doc: "Label for the switch.")
601+
attr(:wrapper_class, :any, default: nil, doc: "Additional classes to add to the switch.")
601602
attr(:rest, :global)
602603

603604
def toggle_switch(assigns) do
604605
~H"""
605-
<label class="inline-flex items-center cursor-pointer pr-6 py-3">
606+
<label class={[
607+
"inline-flex items-center cursor-pointer pr-6 py-3"
608+
| List.wrap(@wrapper_class)
609+
]}>
606610
<span class="text-xs font-normal text-primary-text mx-2">
607611
<%= @label %>
608612
</span>

‎lib/live_debugger_web/components/navbar.ex‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ defmodule LiveDebuggerWeb.Components.Navbar do
55

66
use LiveDebuggerWeb, :component
77

8+
alias LiveDebuggerWeb.Helpers.RoutesHelper
9+
810
@doc """
911
Renders base navbar component.
1012
"""
@@ -65,20 +67,13 @@ defmodule LiveDebuggerWeb.Components.Navbar do
6567
"""
6668
end
6769

68-
@doc """
69-
Renders a theme toggle button.
70-
"""
71-
def theme_toggle(assigns) do
70+
attr(:class, :any, default: nil, doc: "Additional classes to add to the link.")
71+
72+
def settings_button(assigns) do
7273
~H"""
73-
<div class="flex">
74-
<.nav_icon id="light-mode-switch" class="dark:hidden" icon="icon-moon" phx-hook="ToggleTheme" />
75-
<.nav_icon
76-
id="dark-mode-switch"
77-
class="hidden dark:block"
78-
icon="icon-sun"
79-
phx-hook="ToggleTheme"
80-
/>
81-
</div>
74+
<.link navigate={RoutesHelper.settings()} class={@class}>
75+
<.nav_icon icon="icon-settings" />
76+
</.link>
8277
"""
8378
end
8479

‎lib/live_debugger_web/helpers/routes_helper.ex‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,9 @@ defmodule LiveDebuggerWeb.Helpers.RoutesHelper do
2626
def error(error) do
2727
~p"/error/#{error}"
2828
end
29+
30+
@spec settings() :: String.t()
31+
def settings() do
32+
~p"/settings"
33+
end
2934
end

‎lib/live_debugger_web/live/channel_dashboard_live.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ defmodule LiveDebuggerWeb.ChannelDashboardLive do
5555
pid={Parsers.pid_to_string(@lv_process.result.pid)}
5656
/>
5757
<div class="flex items-center gap-2">
58-
<Navbar.theme_toggle />
58+
<Navbar.settings_button />
5959
<span :if={@lv_process.ok?} class="h-5 border-r border-default-border lg:hidden"></span>
6060
<.nav_icon
6161
:if={@lv_process.ok?}

‎lib/live_debugger_web/live/live_views_dashboard_live.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ defmodule LiveDebuggerWeb.LiveViewsDashboardLive do
2323
<div class="flex-1 min-w-[25rem] grid grid-rows-[auto_1fr]">
2424
<Navbar.navbar class="flex justify-between">
2525
<Navbar.live_debugger_logo />
26-
<Navbar.theme_toggle />
26+
<Navbar.settings_button />
2727
</Navbar.navbar>
2828
<div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
2929
<div class="flex items-center justify-between">

‎lib/live_debugger_web/live/settings_live.ex‎

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
defmodule LiveDebuggerWeb.SettingsLive do
2+
@moduledoc """
3+
LiveView for the settings page.
4+
"""
5+
6+
use LiveDebuggerWeb, :live_view
7+
8+
alias LiveDebuggerWeb.Components.Navbar
9+
alias LiveDebuggerWeb.Helpers.RoutesHelper
10+
11+
@impl true
12+
def render(assigns) do
13+
~H"""
14+
<div class="flex-1 min-w-[25rem] grid grid-rows-[auto_1fr]">
15+
<Navbar.navbar class="flex">
16+
<Navbar.return_link return_link={RoutesHelper.live_views_dashboard()} />
17+
<Navbar.live_debugger_logo />
18+
</Navbar.navbar>
19+
<div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
20+
<div class="flex items-center justify-between">
21+
<.h1>Settings</.h1>
22+
</div>
23+
24+
<%!-- Upper section --%>
25+
<div class="mt-6 bg-surface-0-bg rounded shadow-custom border border-default-border">
26+
<%!-- Appearance --%>
27+
<div class="p-6">
28+
<p class="font-semibold mb-3">Appearance</p>
29+
<div class="flex gap-2">
30+
<.dark_mode_button />
31+
<.light_mode_button />
32+
</div>
33+
</div>
34+
<%!-- Checkboxes --%>
35+
<div class="p-6 border-t border-default-border flex flex-col gap-3">
36+
<.settings_switch
37+
label="Enable DeadView mode"
38+
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."
39+
checked={false}
40+
phx-click="update"
41+
phx-value-setting="deadview_mode"
42+
/>
43+
44+
<.settings_switch
45+
label="Enable global tracing"
46+
description="Enabling this feature may have a negative impact on application performance."
47+
checked={false}
48+
phx-click="update"
49+
phx-value-setting="global_tracing"
50+
/>
51+
52+
<.settings_switch
53+
label="Refresh tracing on reload"
54+
description="Enabling this feature may have a negative impact on application performance."
55+
checked={false}
56+
phx-click="update"
57+
phx-value-setting="refresh_tracing_on_reload"
58+
/>
59+
</div>
60+
</div>
61+
62+
<%!-- Lower section --%>
63+
<div class="mt-6 bg-surface-0-bg rounded shadow-custom border border-default-border">
64+
<%!-- Restart button --%>
65+
<div class="p-6 flex flex-col md:flex-row justify-between md:items-center gap-4">
66+
<div class="flex flex-col gap-1">
67+
<p class="font-semibold">Restart LiveDebugger</p>
68+
<p class="text-secondary-text">
69+
Use this option if LiveDebugger appears to stop responding or not working properly.
70+
</p>
71+
</div>
72+
<.button variant="secondary" phx-click="restart">Restart&nbsp;LiveDebugger</.button>
73+
</div>
74+
</div>
75+
</div>
76+
</div>
77+
"""
78+
end
79+
80+
@impl true
81+
def handle_event("update", %{"setting" => _setting}, socket) do
82+
{:noreply, socket}
83+
end
84+
85+
@impl true
86+
def handle_event("restart", _, socket) do
87+
{:noreply, socket}
88+
end
89+
90+
attr(:label, :string, required: true)
91+
attr(:description, :string, required: true)
92+
attr(:checked, :boolean, default: false)
93+
attr(:rest, :global)
94+
95+
defp settings_switch(assigns) do
96+
~H"""
97+
<div class="flex items-center">
98+
<.toggle_switch checked={@checked} wrapper_class="pr-3 py-0" {@rest} />
99+
<div class="flex flex-col gap-0.5">
100+
<p class="font-semibold"><%= @label %></p>
101+
<p class="text-secondary-text"><%= @description %></p>
102+
</div>
103+
</div>
104+
"""
105+
end
106+
107+
defp dark_mode_button(assigns) do
108+
~H"""
109+
<.mode_button
110+
id="dark-mode-switch"
111+
icon="icon-moon"
112+
text="Dark"
113+
class="dark:hidden text-button-secondary-content bg-button-secondary-bg hover:bg-button-secondary-bg-hover border border-default-border"
114+
phx-hook="ToggleTheme"
115+
/>
116+
<.mode_button
117+
icon="icon-moon"
118+
text="Dark"
119+
class="hidden dark:flex text-button-primary-content bg-button-primary-bg"
120+
/>
121+
"""
122+
end
123+
124+
defp light_mode_button(assigns) do
125+
~H"""
126+
<.mode_button
127+
id="light-mode-switch"
128+
icon="icon-sun"
129+
text="Light"
130+
class="hidden dark:flex text-button-secondary-content bg-button-secondary-bg hover:bg-button-secondary-bg-hover border border-default-border"
131+
phx-hook="ToggleTheme"
132+
/>
133+
<.mode_button
134+
icon="icon-sun"
135+
text="Light"
136+
class="dark:hidden text-button-primary-content bg-button-primary-bg"
137+
/>
138+
"""
139+
end
140+
141+
attr(:icon, :string, required: true)
142+
attr(:text, :string, required: true)
143+
attr(:class, :string, default: "")
144+
attr(:rest, :global)
145+
146+
defp mode_button(assigns) do
147+
~H"""
148+
<button
149+
class={[
150+
"flex items-center justify-center gap-2 py-2 px-4 rounded",
151+
@class
152+
]}
153+
{@rest}
154+
>
155+
<.icon name={@icon} class="w-5 h-5" />
156+
<p><%= @text %></p>
157+
</button>
158+
"""
159+
end
160+
end

‎lib/live_debugger_web/live/traces_live.ex‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ defmodule LiveDebuggerWeb.TracesLive do
8484
def render(assigns) do
8585
~H"""
8686
<div class="max-w-full @container/traces flex flex-1">
87-
<.section title="Callback traces" id="traces" inner_class="mx-0 my-4 px-4" class="flex-1">
87+
<.section title="Callback traces" id="traces" inner_class="mx-0 mt-4 px-4" class="flex-1">
8888
<:right_panel>
8989
<div class="flex gap-2 items-center">
9090
<Traces.toggle_tracing_button tracing_started?={@tracing_helper.tracing_started?} />
@@ -145,13 +145,13 @@ defmodule LiveDebuggerWeb.TracesLive do
145145
<.button
146146
:if={not @tracing_helper.tracing_started? && @traces_continuation != :end_of_table}
147147
phx-click="load-more"
148-
class="w-40"
148+
class="w-4 mb-4"
149149
variant="secondary"
150150
>
151151
Load more
152152
</.button>
153153
<% else %>
154-
<.spinner size="sm" />
154+
<.spinner size="sm" class="mb-4" />
155155
<% end %>
156156
</div>
157157
</div>

‎lib/live_debugger_web/live/window_dashboard_live.ex‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ defmodule LiveDebuggerWeb.WindowDashboardLive do
3535
/>
3636
<Navbar.live_debugger_logo />
3737
<Navbar.fill />
38-
<Navbar.theme_toggle />
38+
<Navbar.settings_button />
3939
</Navbar.navbar>
4040
<div class="flex-1 max-lg:p-8 pt-8 lg:w-[60rem] lg:m-auto">
4141
<div class="flex items-center justify-between">

‎lib/live_debugger_web/router.ex‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ defmodule LiveDebuggerWeb.Router do
2222
live("/pid/:pid", ChannelDashboardLive)
2323
live("/transport_pid/:transport_pid", WindowDashboardLive)
2424

25+
live("/settings", SettingsLive)
2526
live("/", LiveViewsDashboardLive)
2627
end
2728
end

0 commit comments

Comments
 (0)