Skip to content

consolidate sidebar children #506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kraleppa merged 6 commits into from
Jun 24, 2025
Merged

consolidate sidebar children #506

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6bffb5f
consolidate sidebar children
samrobinsonsauce Jun 12, 2025
db36293
formatting
samrobinsonsauce Jun 12, 2025
132d149
PR Feedback
samrobinsonsauce Jun 16, 2025
900b607
Updated assets
kraleppa Jun 24, 2025
f3042e1
Fixed tests
kraleppa Jun 24, 2025
364d643
Merge branch 'main' into 495-consolidate-sidebar-children
kraleppa Jun 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 20 additions & 10 deletions lib/live_debugger_web/components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,22 +373,32 @@ defmodule LiveDebuggerWeb.Components do
"""
end

attr(:sidebar_hidden?, :boolean, default: true, doc: "The default state of the sidebar")
slot(:inner_block)

def sidebar_slide_over(assigns) do
~H"""
<div class="absolute z-20 top-0 left-0 bg-black/25 w-full h-full flex lg:hidden justify-end">
<div class="w-max flex bg-sidebar-bg shadow-custom h-full">
<div
class="w-80 h-full flex flex-col bg-sidebar-bg justify-between"
phx-click-away="close_mobile_content"
id="filters-sidebar-form"
class={[
(@sidebar_hidden? && "hidden") || "flex",
"fixed inset-0 bg-black/25 justify-end items-start lg:flex lg:static lg:inset-auto lg:bg-transparent"
]}
>
<.icon_button
icon="icon-cross"
class="absolute top-4 right-4"
variant="secondary"
phx-click="close_mobile_content"
/>
<%= render_slot(@inner_block) %>
<div
phx-click-away="close_mobile_content"
class="h-full w-80 bg-sidebar-bg flex flex-col gap-1 justify-between border-x border-default-border lg:border-l"
>
<.icon_button
:if={!@sidebar_hidden?}
icon="icon-cross"
class="absolute top-4 right-4 lg:hidden"
variant="secondary"
phx-click="close_mobile_content"
/>
<%= render_slot(@inner_block) %>
</div>
</div>
</div>
"""
Expand Down
38 changes: 12 additions & 26 deletions lib/live_debugger_web/live/nested/node_inspector_sidebar_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,32 +84,18 @@ defmodule LiveDebuggerWeb.Live.Nested.NodeInspectorSidebarLive do
@impl true
def render(assigns) do
~H"""
<div class="w-max flex bg-sidebar-bg shadow-custom h-full">
<div class="hidden lg:flex max-h-full flex-col w-72 border-x border-default-border lg:w-80 gap-1 justify-between">
<.sidebar_content
id="sidebar-content"
lv_process={@lv_process}
tree={@tree}
max_opened_node_level={@max_opened_node_level}
node_id={@node_id}
highlight?={@highlight?}
parent_lv_process={@parent_lv_process}
node_module={@node_module}
/>
</div>
<.sidebar_slide_over :if={not @hidden?}>
<.sidebar_content
id="sidebar-content-slide-over"
lv_process={@lv_process}
tree={@tree}
max_opened_node_level={@max_opened_node_level}
node_id={@node_id}
highlight?={@highlight?}
parent_lv_process={@parent_lv_process}
node_module={@node_module}
/>
</.sidebar_slide_over>
</div>
<.sidebar_slide_over sidebar_hidden?={@hidden?}>
<.sidebar_content
id="sidebar-content-slide-over"
lv_process={@lv_process}
tree={@tree}
max_opened_node_level={@max_opened_node_level}
node_id={@node_id}
highlight?={@highlight?}
parent_lv_process={@parent_lv_process}
node_module={@node_module}
/>
</.sidebar_slide_over>
"""
end

Expand Down
28 changes: 9 additions & 19 deletions lib/live_debugger_web/live/traces/components/filters_sidebar.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,25 +30,15 @@ defmodule LiveDebuggerWeb.Live.Traces.Components.FiltersSidebar do

def sidebar(assigns) do
~H"""
<div class="w-max flex bg-sidebar-bg shadow-custom h-full">
<div class="hidden lg:flex max-h-full flex-col w-72 border-x border-default-border lg:w-80 gap-1 justify-between">
<.sidebar_content
id="filters-sidebar-form"
current_filters={@current_filters}
default_filters={@default_filters}
tracing_started?={@tracing_started?}
revert_button_visible?={true}
/>
</div>
<.sidebar_slide_over :if={not @sidebar_hidden?}>
<.sidebar_content
id="mobile-filters-sidebar-form"
current_filters={@current_filters}
default_filters={@default_filters}
tracing_started?={@tracing_started?}
/>
</.sidebar_slide_over>
</div>
<.sidebar_slide_over sidebar_hidden?={@sidebar_hidden?}>
<.sidebar_content
id="filters-sidebar-form"
current_filters={@current_filters}
default_filters={@default_filters}
tracing_started?={@tracing_started?}
revert_button_visible?={true}
/>
</.sidebar_slide_over>
"""
end

Expand Down
2 changes: 1 addition & 1 deletion priv/static/app.css
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 10 additions & 6 deletions test/live_debugger/channel_dashboard_test.exs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ defmodule LiveDebugger.ChannelDashboardTest do
|> visit("/")
|> click(first_link())
|> click(conditional_component_5_node_button())
|> find(css("#sidebar-content-basic-info"), fn info ->
|> find(sidebar_basic_info(), fn info ->
info
|> assert_text("LiveComponent")
|> assert_text("LiveDebuggerDev.LiveComponents.Conditional")
Expand Down Expand Up @@ -502,7 +502,7 @@ defmodule LiveDebugger.ChannelDashboardTest do
debugger
|> visit("/")
|> click(first_link())
|> find(css("#sidebar-content-basic-info"))
|> find(sidebar_basic_info())
|> assert_text("LiveDebuggerDev.LiveViews.Main")

dev_app
Expand All @@ -520,7 +520,7 @@ defmodule LiveDebugger.ChannelDashboardTest do
Process.sleep(1000)

debugger
|> find(css("#sidebar-content-basic-info"))
|> find(sidebar_basic_info())
|> assert_text("LiveDebuggerDev.LiveViews.Side")
end

Expand Down Expand Up @@ -579,15 +579,19 @@ defmodule LiveDebugger.ChannelDashboardTest do
defp reset_filters_button(), do: css("button[phx-click=\"reset-filters\"]")

defp conditional_component_5_node_button() do
css("#tree-node-button-5-component-tree-sidebar-content")
css("#tree-node-button-5-component-tree-sidebar-content-slide-over")
end

defp conditional_component_6_node_button() do
css("#tree-node-button-6-component-tree-sidebar-content")
css("#tree-node-button-6-component-tree-sidebar-content-slide-over")
end

defp many_assigns_15_node_button() do
css("#tree-node-button-15-component-tree-sidebar-content")
css("#tree-node-button-15-component-tree-sidebar-content-slide-over")
end

defp sidebar_basic_info() do
css("#sidebar-content-slide-over-basic-info")
end

defp reset_group_button(group) do
Expand Down