Add a draggable sidebar resize handle

User reports the sidebar can't be resized. Until now sidebar width
was only mutable through the COLLAPSED/DEFAULT toggle and through
typed settings. Real browsers (Arc, Dia, Zen) all let you drag the
right edge of the sidebar to size it live.

Wire it through the existing space.sidebar_width_px:

* `ElyShell.sidebar_resize_origin: Option<(f32, u16)>` records the
  cursor-x and width-px at the moment the handle is grabbed.
* `begin_sidebar_resize` / `end_sidebar_resize` set and clear it.
* Window-level `on_mouse_move` consults the origin first; while held,
  it forwards the delta to `set_active_sidebar_width` clamped to
  220–480 px so you can't accidentally annihilate either pane.
* Window-level `on_mouse_up` releases the drag.
* The handle itself is a 6 px transparent strip pinned to the right
  edge of the expanded sidebar, `cursor_col_resize`, with a soft white
  hover. mouse-down captures the origin; the rest is window events.

cargo test --workspace: 440 passed, 0 failed.
This commit is contained in:
2026-05-09 21:16:23 -04:00
parent 573eaae4a8
commit 85d1e09916
3 changed files with 88 additions and 6 deletions
+30 -3
View File
@@ -2,9 +2,9 @@ use ely_browser_core::BrowserSnapshot;
use ely_design_system::{colors, spacing};
use ely_domain::BrowserTab;
use gpui::{
AnyElement, BoxShadow, Context, InteractiveElement, IntoElement, ParentElement, SharedString,
StatefulInteractiveElement, Styled, div, hsla, linear_color_stop, linear_gradient, point,
prelude::FluentBuilder, px, rgb, rgba,
AnyElement, BoxShadow, Context, InteractiveElement, IntoElement, MouseButton,
ParentElement, SharedString, StatefulInteractiveElement, Styled, div, hsla,
linear_color_stop, linear_gradient, point, prelude::FluentBuilder, px, rgb, rgba,
};
use gpui_component::{IconName, StyledExt, scroll::ScrollableElement};
@@ -22,6 +22,7 @@ impl ElyShell {
div()
.w(px(sidebar_width))
.h_full()
.relative()
.flex()
.flex_col()
.rounded(px(spacing::RADIUS_CARD))
@@ -60,6 +61,7 @@ impl ElyShell {
.child(self.render_new_tab_row(cx)),
)
.child(self.render_sidebar_footer(snapshot, cx))
.child(render_sidebar_resize_handle(cx))
.into_any_element()
}
@@ -419,6 +421,31 @@ const UNREAD_BADGE_BG: u32 = 0x281e140f;
/// never participates in hit testing.
const HIGHLIGHT_BORDER: u32 = 0xffffff80;
/// Sidebar resize affordance pinned to the panel's right edge. The
/// strip itself is invisible until hovered; on mouse-down it tells the
/// shell to capture the drag origin so window-level mouse-move can
/// compute the live width.
fn render_sidebar_resize_handle(cx: &mut Context<ElyShell>) -> AnyElement {
div()
.id(SharedString::from("sidebar-resize-handle"))
.absolute()
.top_0()
.bottom_0()
.right(px(-2.0))
.w(px(6.0))
.cursor_col_resize()
.hover(|style| style.bg(rgba(RESIZE_HANDLE_HOVER_BG)))
.on_mouse_down(
MouseButton::Left,
cx.listener(|shell, event: &gpui::MouseDownEvent, _, cx| {
shell.begin_sidebar_resize(f32::from(event.position.x), cx);
}),
)
.into_any_element()
}
const RESIZE_HANDLE_HOVER_BG: u32 = 0xffffff66;
/// Maps appearance translucency_pct to a panel rgba u32 tinted by the
/// active wallpaper theme.
///