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
+53 -3
View File
@@ -2,9 +2,9 @@ use ely_browser_core::BrowserSnapshot;
use ely_design_system::{colors, spacing};
use ely_domain::{BrowserTab, DEFAULT_SIDEBAR_WIDTH_PX, HIDDEN_SIDEBAR_WIDTH_PX};
use gpui::{
AnyElement, Context, InteractiveElement, IntoElement, KeyDownEvent, MouseMoveEvent,
ParentElement, Render, SharedString, StatefulInteractiveElement, Styled, Window, div,
prelude::FluentBuilder, px, rgb, rgba,
AnyElement, Context, InteractiveElement, IntoElement, KeyDownEvent, MouseButton,
MouseMoveEvent, MouseUpEvent, ParentElement, Render, SharedString,
StatefulInteractiveElement, Styled, Window, div, prelude::FluentBuilder, px, rgb, rgba,
};
use super::chrome::command_match::visible_command_rows;
@@ -68,6 +68,7 @@ impl ElyShell {
.on_action(cx.listener(Self::on_zoom_in))
.on_action(cx.listener(Self::on_zoom_out))
.on_mouse_move(cx.listener(Self::on_window_mouse_move))
.on_mouse_up(MouseButton::Left, cx.listener(Self::on_window_mouse_up))
.capture_key_down(cx.listener(Self::on_command_overlay_key_down))
.font_family(SANS_FAMILY)
.text_color(rgb(colors::INK))
@@ -214,6 +215,15 @@ impl ElyShell {
) {
let cursor_x = f32::from(event.position.x);
if let Some((origin_x, origin_width)) = self.sidebar_resize_origin {
let delta = cursor_x - origin_x;
let candidate = (f32::from(origin_width) + delta)
.clamp(MIN_RESIZE_WIDTH_PX, MAX_RESIZE_WIDTH_PX)
.round() as u16;
self.set_active_sidebar_width(candidate, cx);
return;
}
if cursor_x >= REVEAL_THRESHOLD_PX && cursor_x <= COLLAPSE_THRESHOLD_PX {
return;
}
@@ -235,6 +245,36 @@ impl ElyShell {
}
}
pub(super) fn begin_sidebar_resize(
&mut self,
cursor_x: f32,
cx: &mut Context<Self>,
) {
let ShellState::Ready(core) = &self.state else {
return;
};
let Some(width) = core.active_space_sidebar_width() else {
return;
};
self.sidebar_resize_origin = Some((cursor_x, width));
cx.notify();
}
pub(super) fn end_sidebar_resize(&mut self, cx: &mut Context<Self>) {
if self.sidebar_resize_origin.take().is_some() {
cx.notify();
}
}
fn on_window_mouse_up(
&mut self,
_event: &MouseUpEvent,
_window: &mut Window,
cx: &mut Context<Self>,
) {
self.end_sidebar_resize(cx);
}
fn render_hidden_sidebar_rail(&mut self, cx: &mut Context<Self>) -> AnyElement {
div()
.id(SharedString::from("hidden-sidebar-rail"))
@@ -256,6 +296,16 @@ impl ElyShell {
/// never participates in hit testing.
const MAIN_PANE_HIGHLIGHT_BORDER: u32 = 0xffffff80;
/// Lower clamp for the live sidebar-resize drag. Stays a touch above
/// the per-space DEFAULT so a casual flick doesn't snap the user to a
/// nearly-collapsed pane that's awkward to recover from. The toggle
/// button still owns the discrete collapse-to-rail behavior.
pub(super) const MIN_RESIZE_WIDTH_PX: f32 = 220.0;
/// Upper clamp — wider than this and the main pane disappears on
/// smaller windows. Tuned to fit comfortably on a 1280-wide window.
pub(super) const MAX_RESIZE_WIDTH_PX: f32 = 480.0;
/// Cursor x within this px from the left edge auto-reveals the hidden sidebar.
/// Sized so the user only triggers the reveal when they actually approach the
/// rail, not when they hover the page content.