add layout crate with resize handle

examples/gallery/src/main.rs

@@ -3,7 +3,7 @@ use std::time::Duration;
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
     App, AppContext as _, Bounds, ClickEvent, Context, Entity, InteractiveElement as _,
-    IntoElement, ParentElement as _, Render, SharedString, StatefulInteractiveElement as _,
+    IntoElement, ParentElement as _, Pixels, Render, SharedString, StatefulInteractiveElement as _,
     Styled as _, Window, WindowBounds, WindowOptions, div, px, size,
 };
 use gpui_native_core::alert::{Alert, AlertSeverity, Alerts, AlertsView};
@@ -34,6 +34,7 @@ use gpui_native_data::sidebar::{Sidebar, SidebarEntry};
 use gpui_native_data::tabs::{Tab, Tabs};
 use gpui_native_data::tree::{Tree, TreeItem};
 use gpui_native_icons::{IconAssets, IconRole, icon};
+use gpui_native_layout::resize_handle::ResizeHandle;
 use gpui_native_theme::{ActiveTheme as _, Size, Theme};
 use gpui_platform::application;
 
@@ -47,6 +48,7 @@ struct Gallery {
     input_state: Entity<InputState>,
     password_state: Entity<InputState>,
     notes_state: Entity<InputState>,
+    split_width: Pixels,
     popover_open: bool,
     menu_open: bool,
     strategy: Option<Strategy>,
@@ -378,6 +380,74 @@ impl Render for Gallery {
                             )),
                     ),
             )
+            .child(
+                v_flex()
+                    .gap_2()
+                    .child(section_label(
+                        "layout · resize handle \u{2014} NSSplitView divider, WinUI GridSplitter, GtkPaned handle",
+                        colors,
+                    ))
+                    .child(
+                        h_flex()
+                            .h(px(112.))
+                            .rounded(radius.control)
+                            .border_1()
+                            .border_color(colors.border)
+                            .overflow_hidden()
+                            .child(
+                                div()
+                                    .w(self.split_width)
+                                    .h_full()
+                                    .flex()
+                                    .items_center()
+                                    .justify_center()
+                                    .bg(colors.muted)
+                                    .child("Sidebar"),
+                            )
+                            .child(
+                                ResizeHandle::new("gallery-resize")
+                                    .on_resize({
+                                        let gallery = gallery.clone();
+                                        move |delta, _, cx| {
+                                            gallery.update(cx, |gallery, cx| {
+                                                gallery.split_width = (gallery.split_width
+                                                    + delta)
+                                                    .clamp(px(96.), px(320.));
+                                                cx.notify();
+                                            });
+                                        }
+                                    })
+                                    .on_reset({
+                                        let gallery = gallery.clone();
+                                        move |_, cx| {
+                                            gallery.update(cx, |gallery, cx| {
+                                                gallery.split_width = px(200.);
+                                                cx.notify();
+                                            });
+                                        }
+                                    }),
+                            )
+                            .child(
+                                div()
+                                    .flex_1()
+                                    .h_full()
+                                    .flex()
+                                    .items_center()
+                                    .justify_center()
+                                    .bg(colors.input)
+                                    .child("Editor"),
+                            ),
+                    )
+                    .child(
+                        div()
+                            .text_xs()
+                            .text_color(colors.muted_foreground)
+                            .child(format!(
+                                "width: {} px \u{2014} drag the seam, double-click resets",
+                                f32::from(self.split_width)
+                            )),
+                    ),
+            )
             .child(
                 v_flex()
                     .gap_2()
@@ -1506,6 +1576,7 @@ fn main() {
                         input_state,
                         password_state,
                         notes_state,
+                        split_width: px(200.),
                         popover_open: false,
                         menu_open: false,
                         strategy: Some(Strategy::Curated),