Redesign for the v1 stable release (#3)

Only half done. Will continue in another PR.

Reviewed-on: #3

crates/dock/Cargo.toml

@@ -0,0 +1,18 @@
+[package]
+name = "dock"
+version.workspace = true
+edition.workspace = true
+publish.workspace = true
+
+[dependencies]
+common = { path = "../common" }
+theme = { path = "../theme" }
+ui = { path = "../ui" }
+
+gpui.workspace = true
+smallvec.workspace = true
+anyhow.workspace = true
+log.workspace = true
+
+[target.'cfg(target_os = "linux")'.dependencies]
+linicon = "2.3.0"

crates/dock/src/dock.rs

@@ -0,0 +1,428 @@
+use std::ops::Deref;
+use std::sync::Arc;
+
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    div, px, App, AppContext, Axis, Context, Element, Entity, IntoElement, MouseMoveEvent,
+    MouseUpEvent, ParentElement as _, Pixels, Point, Render, Style, Styled as _, WeakEntity,
+    Window,
+};
+use ui::StyledExt;
+
+use super::{DockArea, DockItem};
+use crate::panel::PanelView;
+use crate::resizable::{resize_handle, PANEL_MIN_SIZE};
+use crate::tab_panel::TabPanel;
+
+#[derive(Clone, Render)]
+struct ResizePanel;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum DockPlacement {
+    Center,
+    Left,
+    Bottom,
+    Right,
+}
+
+impl DockPlacement {
+    fn axis(&self) -> Axis {
+        match self {
+            Self::Left | Self::Right => Axis::Horizontal,
+            Self::Bottom => Axis::Vertical,
+            Self::Center => unreachable!(),
+        }
+    }
+
+    pub fn is_left(&self) -> bool {
+        matches!(self, Self::Left)
+    }
+
+    pub fn is_bottom(&self) -> bool {
+        matches!(self, Self::Bottom)
+    }
+
+    pub fn is_right(&self) -> bool {
+        matches!(self, Self::Right)
+    }
+}
+
+/// The Dock is a fixed container that places at left, bottom, right of the Windows.
+///
+/// This is unlike Panel, it can't be move or add any other panel.
+pub struct Dock {
+    pub(super) placement: DockPlacement,
+    dock_area: WeakEntity<DockArea>,
+
+    /// Dock layout
+    pub(crate) panel: DockItem,
+
+    /// The size is means the width or height of the Dock, if the placement is left or right, the size is width, otherwise the size is height.
+    pub(super) size: Pixels,
+
+    /// Whether the Dock is open
+    pub(super) open: bool,
+
+    /// Whether the Dock is collapsible, default: true
+    pub(super) collapsible: bool,
+
+    /// Whether the Dock is resizing
+    resizing: bool,
+}
+
+impl Dock {
+    pub(crate) fn new(
+        dock_area: WeakEntity<DockArea>,
+        placement: DockPlacement,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Self {
+        let panel = cx.new(|cx| {
+            let mut tab = TabPanel::new(None, dock_area.clone(), window, cx);
+            tab.closable = true;
+            tab
+        });
+
+        let panel = DockItem::Tabs {
+            items: Vec::new(),
+            active_ix: 0,
+            view: panel.clone(),
+        };
+
+        Self::subscribe_panel_events(dock_area.clone(), &panel, window, cx);
+
+        Self {
+            placement,
+            dock_area,
+            panel,
+            open: true,
+            collapsible: true,
+            size: px(200.0),
+            resizing: false,
+        }
+    }
+
+    pub fn left(
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Self {
+        Self::new(dock_area, DockPlacement::Left, window, cx)
+    }
+
+    pub fn bottom(
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Self {
+        Self::new(dock_area, DockPlacement::Bottom, window, cx)
+    }
+
+    pub fn right(
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Self {
+        Self::new(dock_area, DockPlacement::Right, window, cx)
+    }
+
+    /// Update the Dock to be collapsible or not.
+    ///
+    /// And if the Dock is not collapsible, it will be open.
+    pub fn set_collapsible(
+        &mut self,
+        collapsible: bool,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.collapsible = collapsible;
+        if !collapsible {
+            self.open = true
+        }
+        cx.notify();
+    }
+
+    fn subscribe_panel_events(
+        dock_area: WeakEntity<DockArea>,
+        panel: &DockItem,
+        window: &mut Window,
+        cx: &mut App,
+    ) {
+        match panel {
+            DockItem::Tabs { view, .. } => {
+                window.defer(cx, {
+                    let view = view.clone();
+                    move |window, cx| {
+                        _ = dock_area.update(cx, |this, cx| {
+                            this.subscribe_panel(&view, window, cx);
+                        });
+                    }
+                });
+            }
+            DockItem::Split { items, view, .. } => {
+                for item in items {
+                    Self::subscribe_panel_events(dock_area.clone(), item, window, cx);
+                }
+                window.defer(cx, {
+                    let view = view.clone();
+                    move |window, cx| {
+                        _ = dock_area.update(cx, |this, cx| {
+                            this.subscribe_panel(&view, window, cx);
+                        });
+                    }
+                });
+            }
+            DockItem::Panel { .. } => {
+                // Not supported
+            }
+        }
+    }
+
+    pub fn set_panel(&mut self, panel: DockItem, _window: &mut Window, cx: &mut Context<Self>) {
+        self.panel = panel;
+        cx.notify();
+    }
+
+    pub fn is_open(&self) -> bool {
+        self.open
+    }
+
+    pub fn toggle_open(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        self.set_open(!self.open, window, cx);
+    }
+
+    /// Returns the size of the Dock, the size is means the width or height of
+    /// the Dock, if the placement is left or right, the size is width,
+    /// otherwise the size is height.
+    pub fn size(&self) -> Pixels {
+        self.size
+    }
+
+    /// Set the size of the Dock.
+    pub fn set_size(&mut self, size: Pixels, _window: &mut Window, cx: &mut Context<Self>) {
+        self.size = size.max(PANEL_MIN_SIZE);
+        cx.notify();
+    }
+
+    /// Set the open state of the Dock.
+    pub fn set_open(&mut self, open: bool, window: &mut Window, cx: &mut Context<Self>) {
+        self.open = open;
+        let item = self.panel.clone();
+        cx.defer_in(window, move |_, window, cx| {
+            item.set_collapsed(!open, window, cx);
+        });
+        cx.notify();
+    }
+
+    /// Add item to the Dock.
+    pub fn add_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.panel.add_panel(panel, &self.dock_area, window, cx);
+        cx.notify();
+    }
+
+    fn render_resize_handle(
+        &mut self,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> impl IntoElement {
+        let axis = self.placement.axis();
+        let view = cx.entity().clone();
+
+        resize_handle("resize-handle", axis)
+            .placement(self.placement)
+            .on_drag(ResizePanel {}, move |info, _, _, cx| {
+                cx.stop_propagation();
+                view.update(cx, |view, _cx| {
+                    view.resizing = true;
+                });
+                cx.new(|_| info.deref().clone())
+            })
+    }
+
+    fn resize(
+        &mut self,
+        mouse_position: Point<Pixels>,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if !self.resizing {
+            return;
+        }
+
+        let dock_area = self
+            .dock_area
+            .upgrade()
+            .expect("DockArea is missing")
+            .read(cx);
+
+        let area_bounds = dock_area.bounds;
+        let mut left_dock_size = px(0.0);
+        let mut right_dock_size = px(0.0);
+
+        // Get the size of the left dock if it's open and not the current dock
+        if let Some(left_dock) = &dock_area.left_dock {
+            if left_dock.entity_id() != cx.entity().entity_id() {
+                let left_dock_read = left_dock.read(cx);
+                if left_dock_read.is_open() {
+                    left_dock_size = left_dock_read.size;
+                }
+            }
+        }
+
+        // Get the size of the right dock if it's open and not the current dock
+        if let Some(right_dock) = &dock_area.right_dock {
+            if right_dock.entity_id() != cx.entity().entity_id() {
+                let right_dock_read = right_dock.read(cx);
+                if right_dock_read.is_open() {
+                    right_dock_size = right_dock_read.size;
+                }
+            }
+        }
+
+        let size = match self.placement {
+            DockPlacement::Left => mouse_position.x - area_bounds.left(),
+            DockPlacement::Right => area_bounds.right() - mouse_position.x,
+            DockPlacement::Bottom => area_bounds.bottom() - mouse_position.y,
+            DockPlacement::Center => unreachable!(),
+        };
+
+        match self.placement {
+            DockPlacement::Left => {
+                let max_size = area_bounds.size.width - PANEL_MIN_SIZE - right_dock_size;
+                self.size = size.clamp(PANEL_MIN_SIZE, max_size);
+            }
+            DockPlacement::Right => {
+                let max_size = area_bounds.size.width - PANEL_MIN_SIZE - left_dock_size;
+                self.size = size.clamp(PANEL_MIN_SIZE, max_size);
+            }
+            DockPlacement::Bottom => {
+                let max_size = area_bounds.size.height - PANEL_MIN_SIZE;
+                self.size = size.clamp(PANEL_MIN_SIZE, max_size);
+            }
+            DockPlacement::Center => unreachable!(),
+        }
+
+        cx.notify();
+    }
+
+    fn done_resizing(&mut self, _window: &mut Window, _cx: &mut Context<Self>) {
+        self.resizing = false;
+    }
+}
+
+impl Render for Dock {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl gpui::IntoElement {
+        if !self.open && !self.placement.is_bottom() {
+            return div();
+        }
+
+        div()
+            .relative()
+            .overflow_hidden()
+            .map(|this| match self.placement {
+                DockPlacement::Left | DockPlacement::Right => this.h_flex().h_full().w(self.size),
+                DockPlacement::Bottom => this.w_full().h(self.size),
+                DockPlacement::Center => unreachable!(),
+            })
+            // Bottom Dock should keep the title bar, then user can click the Toggle button
+            .when(!self.open && self.placement.is_bottom(), |this| {
+                this.h(px(29.))
+            })
+            .map(|this| match &self.panel {
+                DockItem::Split { view, .. } => this.child(view.clone()),
+                DockItem::Tabs { view, .. } => this.child(view.clone()),
+                DockItem::Panel { view, .. } => this.child(view.clone().view()),
+            })
+            .child(self.render_resize_handle(window, cx))
+            .child(DockElement {
+                view: cx.entity().clone(),
+            })
+    }
+}
+
+struct DockElement {
+    view: Entity<Dock>,
+}
+
+impl IntoElement for DockElement {
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
+impl Element for DockElement {
+    type PrepaintState = ();
+    type RequestLayoutState = ();
+
+    fn id(&self) -> Option<gpui::ElementId> {
+        None
+    }
+
+    fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {
+        None
+    }
+
+    fn request_layout(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        window: &mut gpui::Window,
+        cx: &mut App,
+    ) -> (gpui::LayoutId, Self::RequestLayoutState) {
+        (window.request_layout(Style::default(), None, cx), ())
+    }
+
+    fn prepaint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        _: gpui::Bounds<Pixels>,
+        _: &mut Self::RequestLayoutState,
+        _window: &mut Window,
+        _cx: &mut App,
+    ) -> Self::PrepaintState {
+    }
+
+    fn paint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        _: gpui::Bounds<Pixels>,
+        _: &mut Self::RequestLayoutState,
+        _: &mut Self::PrepaintState,
+        window: &mut gpui::Window,
+        cx: &mut App,
+    ) {
+        window.on_mouse_event({
+            let view = self.view.clone();
+            let is_resizing = view.read(cx).resizing;
+            move |e: &MouseMoveEvent, phase, window, cx| {
+                if !is_resizing {
+                    return;
+                }
+                if !phase.bubble() {
+                    return;
+                }
+
+                view.update(cx, |view, cx| view.resize(e.position, window, cx))
+            }
+        });
+
+        // When any mouse up, stop dragging
+        window.on_mouse_event({
+            let view = self.view.clone();
+            move |_: &MouseUpEvent, phase, window, cx| {
+                if phase.bubble() {
+                    view.update(cx, |view, cx| view.done_resizing(window, cx));
+                }
+            }
+        })
+    }
+}

crates/dock/src/lib.rs

@@ -0,0 +1,802 @@
+use std::sync::Arc;
+
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    actions, div, px, AnyElement, AnyView, App, AppContext, Axis, Bounds, Context, Edges, Entity,
+    EntityId, EventEmitter, Focusable, InteractiveElement as _, IntoElement, ParentElement as _,
+    Pixels, Render, SharedString, Styled, Subscription, WeakEntity, Window,
+};
+use ui::ElementExt;
+
+use crate::dock::{Dock, DockPlacement};
+use crate::panel::{Panel, PanelEvent, PanelStyle, PanelView};
+use crate::stack_panel::StackPanel;
+use crate::tab_panel::TabPanel;
+
+pub mod dock;
+pub mod panel;
+pub mod resizable;
+pub mod stack_panel;
+pub mod tab;
+pub mod tab_panel;
+
+actions!(dock, [ToggleZoom, ClosePanel]);
+
+pub enum DockEvent {
+    /// The layout of the dock has changed, subscribers this to save the layout.
+    ///
+    /// This event is emitted when every time the layout of the dock has changed,
+    /// So it emits may be too frequently, you may want to debounce the event.
+    LayoutChanged,
+}
+
+/// The main area of the dock.
+pub struct DockArea {
+    pub(crate) bounds: Bounds<Pixels>,
+
+    /// The center view of the dockarea.
+    pub items: DockItem,
+
+    /// The left dock of the dock_area.
+    left_dock: Option<Entity<Dock>>,
+
+    /// The bottom dock of the dock_area.
+    bottom_dock: Option<Entity<Dock>>,
+
+    /// The right dock of the dock_area.
+    right_dock: Option<Entity<Dock>>,
+
+    /// The entity_id of the [`TabPanel`](TabPanel) where each toggle button should be displayed,
+    toggle_button_panels: Edges<Option<EntityId>>,
+
+    /// Whether to show the toggle button.
+    toggle_button_visible: bool,
+
+    /// The top zoom view of the dock_area, if any.
+    zoom_view: Option<AnyView>,
+
+    /// Lock panels layout, but allow to resize.
+    is_locked: bool,
+
+    /// The panel style, default is [`PanelStyle::Default`](PanelStyle::Default).
+    pub(crate) panel_style: PanelStyle,
+    subscriptions: Vec<Subscription>,
+}
+
+/// DockItem is a tree structure that represents the layout of the dock.
+#[derive(Clone)]
+pub enum DockItem {
+    /// Split layout
+    Split {
+        axis: Axis,
+        items: Vec<DockItem>,
+        sizes: Vec<Option<Pixels>>,
+        view: Entity<StackPanel>,
+    },
+    /// Tab layout
+    Tabs {
+        items: Vec<Arc<dyn PanelView>>,
+        active_ix: usize,
+        view: Entity<TabPanel>,
+    },
+    /// Single panel layout
+    Panel { view: Arc<dyn PanelView> },
+}
+
+impl DockItem {
+    /// Create DockItem with split layout, each item of panel have equal size.
+    pub fn split(
+        axis: Axis,
+        items: Vec<DockItem>,
+        dock_area: &WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self {
+        let sizes = vec![None; items.len()];
+
+        Self::split_with_sizes(axis, items, sizes, dock_area, window, cx)
+    }
+
+    /// Create DockItem with split layout, each item of panel have specified size.
+    ///
+    /// Please note that the `items` and `sizes` must have the same length.
+    /// Set `None` in `sizes` to make the index of panel have auto size.
+    pub fn split_with_sizes(
+        axis: Axis,
+        items: Vec<DockItem>,
+        sizes: Vec<Option<Pixels>>,
+        dock_area: &WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self {
+        let mut items = items;
+
+        let stack_panel = cx.new(|cx| {
+            let mut stack_panel = StackPanel::new(axis, window, cx);
+            for (i, item) in items.iter_mut().enumerate() {
+                let view = item.view();
+                let size = sizes.get(i).copied().flatten();
+                stack_panel.add_panel(view.clone(), size, dock_area.clone(), window, cx)
+            }
+
+            for (i, item) in items.iter().enumerate() {
+                let view = item.view();
+                let size = sizes.get(i).copied().flatten();
+                stack_panel.add_panel(view.clone(), size, dock_area.clone(), window, cx)
+            }
+
+            stack_panel
+        });
+
+        window.defer(cx, {
+            let stack_panel = stack_panel.clone();
+            let dock_area = dock_area.clone();
+            move |window, cx| {
+                _ = dock_area.update(cx, |this, cx| {
+                    this.subscribe_panel(&stack_panel, window, cx);
+                });
+            }
+        });
+
+        Self::Split {
+            axis,
+            items,
+            sizes,
+            view: stack_panel,
+        }
+    }
+
+    /// Create DockItem with panel layout
+    pub fn panel(panel: Arc<dyn PanelView>) -> Self {
+        Self::Panel { view: panel }
+    }
+
+    /// Create DockItem with tabs layout, items are displayed as tabs.
+    ///
+    /// The `active_ix` is the index of the active tab, if `None` the first tab is active.
+    pub fn tabs(
+        items: Vec<Arc<dyn PanelView>>,
+        active_ix: Option<usize>,
+        dock_area: &WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self {
+        let mut new_items: Vec<Arc<dyn PanelView>> = vec![];
+        for item in items.into_iter() {
+            new_items.push(item)
+        }
+        Self::new_tabs(new_items, active_ix, dock_area, window, cx)
+    }
+
+    pub fn tab<P: Panel>(
+        item: Entity<P>,
+        dock_area: &WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self {
+        Self::new_tabs(vec![Arc::new(item.clone())], None, dock_area, window, cx)
+    }
+
+    fn new_tabs(
+        items: Vec<Arc<dyn PanelView>>,
+        active_ix: Option<usize>,
+        dock_area: &WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self {
+        let active_ix = active_ix.unwrap_or(0);
+        let tab_panel = cx.new(|cx| {
+            let mut tab_panel = TabPanel::new(None, dock_area.clone(), window, cx);
+            for item in items.iter() {
+                tab_panel.add_panel(item.clone(), window, cx)
+            }
+            tab_panel.active_ix = active_ix;
+            tab_panel
+        });
+
+        Self::Tabs {
+            items,
+            active_ix,
+            view: tab_panel,
+        }
+    }
+
+    /// Returns all panel ids
+    pub fn panel_ids(&self, cx: &App) -> Vec<SharedString> {
+        match self {
+            Self::Tabs { view, .. } => view.read(cx).panel_ids(cx),
+            Self::Split { items, .. } => {
+                let mut total = vec![];
+
+                for item in items.iter() {
+                    if let DockItem::Tabs { view, .. } = item {
+                        total.extend(view.read(cx).panel_ids(cx));
+                    }
+                }
+
+                total
+            }
+            Self::Panel { .. } => vec![],
+        }
+    }
+
+    /// Returns the views of the dock item.
+    pub fn view(&self) -> Arc<dyn PanelView> {
+        match self {
+            Self::Split { view, .. } => Arc::new(view.clone()),
+            Self::Tabs { view, .. } => Arc::new(view.clone()),
+            Self::Panel { view, .. } => view.clone(),
+        }
+    }
+
+    /// Find existing panel in the dock item.
+    pub fn find_panel(&self, panel: Arc<dyn PanelView>) -> Option<Arc<dyn PanelView>> {
+        match self {
+            Self::Split { items, .. } => {
+                items.iter().find_map(|item| item.find_panel(panel.clone()))
+            }
+            Self::Tabs { items, .. } => items.iter().find(|item| *item == &panel).cloned(),
+            Self::Panel { view } => Some(view.clone()),
+        }
+    }
+
+    /// Add a panel to the dock item.
+    pub fn add_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        dock_area: &WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut App,
+    ) {
+        match self {
+            Self::Tabs { view, items, .. } => {
+                items.push(panel.clone());
+                view.update(cx, |tab_panel, cx| {
+                    tab_panel.add_panel(panel, window, cx);
+                });
+            }
+            Self::Split { view, items, .. } => {
+                // Iter items to add panel to the first tabs
+                for item in items.iter_mut() {
+                    if let DockItem::Tabs { view, .. } = item {
+                        view.update(cx, |tab_panel, cx| {
+                            tab_panel.add_panel(panel.clone(), window, cx);
+                        });
+                        return;
+                    }
+                }
+
+                // Unable to find tabs, create new tabs
+                let new_item = Self::tabs(vec![panel.clone()], None, dock_area, window, cx);
+                items.push(new_item.clone());
+                view.update(cx, |stack_panel, cx| {
+                    stack_panel.add_panel(new_item.view(), None, dock_area.clone(), window, cx);
+                });
+            }
+            Self::Panel { .. } => {}
+        }
+    }
+
+    /// Set the collapsed state of the dock area
+    pub fn set_collapsed(&self, collapsed: bool, window: &mut Window, cx: &mut App) {
+        match self {
+            DockItem::Tabs { view, .. } => {
+                view.update(cx, |tab_panel, cx| {
+                    tab_panel.set_collapsed(collapsed, window, cx);
+                });
+            }
+            DockItem::Split { items, .. } => {
+                // For each child item, set collapsed state
+                for item in items {
+                    item.set_collapsed(collapsed, window, cx);
+                }
+            }
+            DockItem::Panel { .. } => {}
+        }
+    }
+
+    /// Recursively traverses to find the left-most and top-most TabPanel.
+    pub(crate) fn left_top_tab_panel(&self, cx: &App) -> Option<Entity<TabPanel>> {
+        match self {
+            DockItem::Tabs { view, .. } => Some(view.clone()),
+            DockItem::Split { view, .. } => view.read(cx).left_top_tab_panel(true, cx),
+            DockItem::Panel { .. } => None,
+        }
+    }
+
+    /// Recursively traverses to find the right-most and top-most TabPanel.
+    pub(crate) fn right_top_tab_panel(&self, cx: &App) -> Option<Entity<TabPanel>> {
+        match self {
+            DockItem::Tabs { view, .. } => Some(view.clone()),
+            DockItem::Split { view, .. } => view.read(cx).right_top_tab_panel(true, cx),
+            DockItem::Panel { .. } => None,
+        }
+    }
+
+    pub(crate) fn focus_tab_panel(&self, window: &mut Window, cx: &mut App) {
+        if let DockItem::Tabs { view, .. } = self {
+            window.focus(&view.read(cx).focus_handle(cx), cx);
+        }
+    }
+}
+
+impl DockArea {
+    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let stack_panel = cx.new(|cx| StackPanel::new(Axis::Horizontal, window, cx));
+
+        let dock_item = DockItem::Split {
+            axis: Axis::Horizontal,
+            items: vec![],
+            sizes: vec![],
+            view: stack_panel.clone(),
+        };
+
+        let mut this = Self {
+            bounds: Bounds::default(),
+            items: dock_item,
+            zoom_view: None,
+            toggle_button_panels: Edges::default(),
+            toggle_button_visible: true,
+            left_dock: None,
+            right_dock: None,
+            bottom_dock: None,
+            is_locked: false,
+            panel_style: PanelStyle::Default,
+            subscriptions: vec![],
+        };
+
+        this.subscribe_panel(&stack_panel, window, cx);
+
+        this
+    }
+
+    /// Set the panel style of the dock area.
+    pub fn panel_style(mut self, style: PanelStyle) -> Self {
+        self.panel_style = style;
+        self
+    }
+
+    /// The DockItem as the center of the dock area.
+    ///
+    /// This is used to render at the Center of the DockArea.
+    pub fn set_center(&mut self, item: DockItem, window: &mut Window, cx: &mut Context<Self>) {
+        self.subscribe_item(&item, window, cx);
+        self.items = item;
+        self.update_toggle_button_tab_panels(window, cx);
+        cx.notify();
+    }
+
+    pub fn set_left_dock(
+        &mut self,
+        panel: DockItem,
+        size: Option<Pixels>,
+        open: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.subscribe_item(&panel, window, cx);
+        let weak_self = cx.entity().downgrade();
+        self.left_dock = Some(cx.new(|cx| {
+            let mut dock = Dock::left(weak_self.clone(), window, cx);
+            if let Some(size) = size {
+                dock.set_size(size, window, cx);
+            }
+            dock.set_panel(panel, window, cx);
+            dock.set_open(open, window, cx);
+            dock
+        }));
+        self.update_toggle_button_tab_panels(window, cx);
+    }
+
+    pub fn set_bottom_dock(
+        &mut self,
+        panel: DockItem,
+        size: Option<Pixels>,
+        open: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.subscribe_item(&panel, window, cx);
+        let weak_self = cx.entity().downgrade();
+        self.bottom_dock = Some(cx.new(|cx| {
+            let mut dock = Dock::bottom(weak_self.clone(), window, cx);
+            if let Some(size) = size {
+                dock.set_size(size, window, cx);
+            }
+            dock.set_panel(panel, window, cx);
+            dock.set_open(open, window, cx);
+            dock
+        }));
+        self.update_toggle_button_tab_panels(window, cx);
+    }
+
+    pub fn set_right_dock(
+        &mut self,
+        panel: DockItem,
+        size: Option<Pixels>,
+        open: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.subscribe_item(&panel, window, cx);
+        let weak_self = cx.entity().downgrade();
+        self.right_dock = Some(cx.new(|cx| {
+            let mut dock = Dock::right(weak_self.clone(), window, cx);
+            if let Some(size) = size {
+                dock.set_size(size, window, cx);
+            }
+            dock.set_panel(panel, window, cx);
+            dock.set_open(open, window, cx);
+            dock
+        }));
+        self.update_toggle_button_tab_panels(window, cx);
+    }
+
+    /// Reset all docks
+    pub fn reset(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
+        self.left_dock = None;
+        self.right_dock = None;
+        self.bottom_dock = None;
+        cx.notify();
+    }
+
+    /// Set locked state of the dock area, if locked, the dock area cannot be split or move, but allows to resize panels.
+    pub fn set_locked(&mut self, locked: bool, _window: &mut Window, _cx: &mut App) {
+        self.is_locked = locked;
+    }
+
+    /// Determine if the dock area is locked.
+    pub fn is_locked(&self) -> bool {
+        self.is_locked
+    }
+
+    /// Determine if the dock area has a dock at the given placement.
+    pub fn has_dock(&self, placement: DockPlacement) -> bool {
+        match placement {
+            DockPlacement::Left => self.left_dock.is_some(),
+            DockPlacement::Bottom => self.bottom_dock.is_some(),
+            DockPlacement::Right => self.right_dock.is_some(),
+            DockPlacement::Center => false,
+        }
+    }
+
+    /// Determine if the dock at the given placement is open.
+    pub fn is_dock_open(&self, placement: DockPlacement, cx: &App) -> bool {
+        match placement {
+            DockPlacement::Left => self
+                .left_dock
+                .as_ref()
+                .map(|dock| dock.read(cx).is_open())
+                .unwrap_or(false),
+            DockPlacement::Bottom => self
+                .bottom_dock
+                .as_ref()
+                .map(|dock| dock.read(cx).is_open())
+                .unwrap_or(false),
+            DockPlacement::Right => self
+                .right_dock
+                .as_ref()
+                .map(|dock| dock.read(cx).is_open())
+                .unwrap_or(false),
+            DockPlacement::Center => false,
+        }
+    }
+
+    /// Set the dock at the given placement to be open or closed.
+    ///
+    /// Only the left, bottom, right dock can be toggled.
+    pub fn set_dock_collapsible(
+        &mut self,
+        collapsible_edges: Edges<bool>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(left_dock) = self.left_dock.as_ref() {
+            left_dock.update(cx, |dock, cx| {
+                dock.set_collapsible(collapsible_edges.left, window, cx);
+            });
+        }
+
+        if let Some(bottom_dock) = self.bottom_dock.as_ref() {
+            bottom_dock.update(cx, |dock, cx| {
+                dock.set_collapsible(collapsible_edges.bottom, window, cx);
+            });
+        }
+
+        if let Some(right_dock) = self.right_dock.as_ref() {
+            right_dock.update(cx, |dock, cx| {
+                dock.set_collapsible(collapsible_edges.right, window, cx);
+            });
+        }
+    }
+
+    /// Determine if the dock at the given placement is collapsible.
+    pub fn is_dock_collapsible(&self, placement: DockPlacement, cx: &App) -> bool {
+        match placement {
+            DockPlacement::Left => self
+                .left_dock
+                .as_ref()
+                .map(|dock| dock.read(cx).collapsible)
+                .unwrap_or(false),
+            DockPlacement::Bottom => self
+                .bottom_dock
+                .as_ref()
+                .map(|dock| dock.read(cx).collapsible)
+                .unwrap_or(false),
+            DockPlacement::Right => self
+                .right_dock
+                .as_ref()
+                .map(|dock| dock.read(cx).collapsible)
+                .unwrap_or(false),
+            DockPlacement::Center => false,
+        }
+    }
+
+    pub fn toggle_dock(
+        &self,
+        placement: DockPlacement,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let dock = match placement {
+            DockPlacement::Left => &self.left_dock,
+            DockPlacement::Bottom => &self.bottom_dock,
+            DockPlacement::Right => &self.right_dock,
+            DockPlacement::Center => return,
+        };
+
+        if let Some(dock) = dock {
+            dock.update(cx, |view, cx| {
+                view.toggle_open(window, cx);
+            })
+        }
+    }
+
+    /// Add a panel item to the dock area at the given placement.
+    ///
+    /// If the left, bottom, right dock is not present, it will set the dock at the placement.
+    pub fn add_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        placement: DockPlacement,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let weak_self = cx.entity().downgrade();
+
+        match placement {
+            DockPlacement::Left => {
+                if let Some(dock) = self.left_dock.as_ref() {
+                    dock.update(cx, |dock, cx| dock.add_panel(panel, window, cx))
+                } else {
+                    self.set_left_dock(
+                        DockItem::tabs(vec![panel], None, &weak_self, window, cx),
+                        Some(px(320.)),
+                        true,
+                        window,
+                        cx,
+                    );
+                }
+            }
+            DockPlacement::Bottom => {
+                if let Some(dock) = self.bottom_dock.as_ref() {
+                    dock.update(cx, |dock, cx| dock.add_panel(panel, window, cx))
+                } else {
+                    self.set_bottom_dock(
+                        DockItem::tabs(vec![panel], None, &weak_self, window, cx),
+                        None,
+                        true,
+                        window,
+                        cx,
+                    );
+                }
+            }
+            DockPlacement::Right => {
+                if let Some(dock) = self.right_dock.as_ref() {
+                    dock.update(cx, |dock, cx| dock.add_panel(panel, window, cx))
+                } else {
+                    self.set_right_dock(
+                        DockItem::tabs(vec![panel], None, &weak_self, window, cx),
+                        Some(px(320.)),
+                        true,
+                        window,
+                        cx,
+                    );
+                }
+            }
+            DockPlacement::Center => {
+                self.items
+                    .add_panel(panel, &cx.entity().downgrade(), window, cx);
+            }
+        }
+    }
+
+    /// Subscribe event on the panels
+    fn subscribe_item(&mut self, item: &DockItem, window: &mut Window, cx: &mut Context<Self>) {
+        match item {
+            DockItem::Split { items, view, .. } => {
+                for item in items {
+                    self.subscribe_item(item, window, cx);
+                }
+
+                self.subscriptions.push(cx.subscribe_in(
+                    view,
+                    window,
+                    move |_, _, event, window, cx| {
+                        if let PanelEvent::LayoutChanged = event {
+                            cx.spawn_in(window, async move |view, window| {
+                                _ = view.update_in(window, |view, window, cx| {
+                                    view.update_toggle_button_tab_panels(window, cx)
+                                });
+                            })
+                            .detach();
+
+                            cx.emit(DockEvent::LayoutChanged);
+                        }
+                    },
+                ));
+            }
+            DockItem::Tabs { .. } => {
+                // We subscribe to the tab panel event in StackPanel's insert_panel
+            }
+            DockItem::Panel { .. } => {
+                // Not supported
+            }
+        }
+    }
+
+    /// Subscribe zoom event on the panel
+    pub(crate) fn subscribe_panel<P: Panel>(
+        &mut self,
+        view: &Entity<P>,
+        window: &mut Window,
+        cx: &mut Context<DockArea>,
+    ) {
+        let subscription =
+            cx.subscribe_in(
+                view,
+                window,
+                move |_this, panel, event, window, cx| match event {
+                    PanelEvent::ZoomIn => {
+                        let panel = panel.clone();
+                        cx.spawn_in(window, async move |view, window| {
+                            view.update_in(window, |view, window, cx| {
+                                view.set_zoomed_in(panel, window, cx);
+                                cx.notify();
+                            })
+                            .ok();
+                        })
+                        .detach();
+                    }
+                    PanelEvent::ZoomOut => {
+                        cx.spawn_in(window, async move |view, window| {
+                            _ = view.update_in(window, |view, window, cx| {
+                                view.set_zoomed_out(window, cx);
+                            });
+                        })
+                        .detach();
+                    }
+                    PanelEvent::LayoutChanged => {
+                        cx.spawn_in(window, async move |view, window| {
+                            view.update_in(window, |view, window, cx| {
+                                view.update_toggle_button_tab_panels(window, cx)
+                            })
+                            .ok();
+                        })
+                        .detach();
+                        // Emit layout changed event for dock
+                        cx.emit(DockEvent::LayoutChanged);
+                    }
+                },
+            );
+
+        self.subscriptions.push(subscription);
+    }
+
+    pub fn set_zoomed_in<P: Panel>(
+        &mut self,
+        panel: Entity<P>,
+        _: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.zoom_view = Some(panel.into());
+        cx.notify();
+    }
+
+    pub fn set_zoomed_out(&mut self, _window: &mut Window, cx: &mut Context<Self>) {
+        self.zoom_view = None;
+        cx.notify();
+    }
+
+    fn render_items(&self, _window: &mut Window, _cx: &mut Context<Self>) -> AnyElement {
+        match &self.items {
+            DockItem::Split { view, .. } => view.clone().into_any_element(),
+            DockItem::Tabs { view, .. } => view.clone().into_any_element(),
+            DockItem::Panel { view, .. } => view.clone().view().into_any_element(),
+        }
+    }
+
+    pub fn update_toggle_button_tab_panels(
+        &mut self,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        // Left toggle button
+        self.toggle_button_panels.left = self
+            .items
+            .left_top_tab_panel(cx)
+            .map(|view| view.entity_id());
+
+        // Right toggle button
+        self.toggle_button_panels.right = self
+            .items
+            .right_top_tab_panel(cx)
+            .map(|view| view.entity_id());
+
+        // Bottom toggle button
+        self.toggle_button_panels.bottom = self
+            .bottom_dock
+            .as_ref()
+            .and_then(|dock| dock.read(cx).panel.left_top_tab_panel(cx))
+            .map(|view| view.entity_id());
+    }
+
+    pub fn focus_tab_panel(&mut self, window: &mut Window, cx: &mut App) {
+        self.items.focus_tab_panel(window, cx);
+    }
+}
+
+impl EventEmitter<DockEvent> for DockArea {}
+
+impl Render for DockArea {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let view = cx.entity().clone();
+
+        div()
+            .id("dock-area")
+            .relative()
+            .size_full()
+            .overflow_hidden()
+            .on_prepaint(move |bounds, _, cx| view.update(cx, |r, _| r.bounds = bounds))
+            .map(|this| {
+                if let Some(zoom_view) = self.zoom_view.clone() {
+                    this.child(zoom_view)
+                } else {
+                    // render dock
+                    this.child(
+                        div()
+                            .flex()
+                            .flex_row()
+                            .h_full()
+                            // Left dock
+                            .when_some(self.left_dock.clone(), |this, dock| {
+                                this.child(div().flex().flex_none().child(dock))
+                            })
+                            // Center
+                            .child(
+                                div()
+                                    .flex()
+                                    .flex_1()
+                                    .flex_col()
+                                    .overflow_hidden()
+                                    // Top center
+                                    .child(
+                                        div()
+                                            .flex_1()
+                                            .overflow_hidden()
+                                            .child(self.render_items(window, cx)),
+                                    )
+                                    // Bottom Dock
+                                    .when_some(self.bottom_dock.clone(), |this, dock| {
+                                        this.child(dock)
+                                    }),
+                            )
+                            // Right Dock
+                            .when_some(self.right_dock.clone(), |this, dock| {
+                                this.child(div().flex().flex_none().child(dock))
+                            }),
+                    )
+                }
+            })
+    }
+}

crates/dock/src/panel.rs

@@ -0,0 +1,163 @@
+use gpui::{
+    AnyElement, AnyView, App, Element, Entity, EventEmitter, FocusHandle, Focusable, Hsla, Render,
+    SharedString, Window,
+};
+use ui::button::Button;
+use ui::popup_menu::PopupMenu;
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum PanelEvent {
+    ZoomIn,
+    ZoomOut,
+    LayoutChanged,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum PanelStyle {
+    /// Display the TabBar when there are multiple tabs, otherwise display the simple title.
+    Default,
+    /// Always display the tab bar.
+    TabBar,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub struct TitleStyle {
+    pub background: Hsla,
+    pub foreground: Hsla,
+}
+
+pub trait Panel: EventEmitter<PanelEvent> + Render + Focusable {
+    /// The name of the panel used to serialize, deserialize and identify the panel.
+    ///
+    /// This is used to identify the panel when deserializing the panel.
+    /// Once you have defined a panel id, this must not be changed.
+    fn panel_id(&self) -> SharedString;
+
+    /// The title of the panel
+    fn title(&self, _cx: &App) -> AnyElement {
+        SharedString::from("Unnamed").into_any()
+    }
+
+    /// Whether the panel can be closed, default is `true`.
+    fn closable(&self, _cx: &App) -> bool {
+        true
+    }
+
+    /// Return true if the panel is zoomable, default is `false`.
+    fn zoomable(&self, _cx: &App) -> bool {
+        true
+    }
+
+    /// Return false to hide panel, true to show panel, default is `true`.
+    ///
+    /// This method called in Panel render, we should make sure it is fast.
+    fn visible(&self, _cx: &App) -> bool {
+        true
+    }
+
+    /// Set active state of the panel.
+    ///
+    /// This method will be called when the panel is active or inactive.
+    ///
+    /// The last_active_panel and current_active_panel will be touched when the panel is active.
+    fn set_active(&self, _active: bool, _cx: &mut App) {}
+
+    /// Set zoomed state of the panel.
+    ///
+    /// This method will be called when the panel is zoomed or unzoomed.
+    ///
+    /// Only current Panel will touch this method.
+    fn set_zoomed(&self, _zoomed: bool, _cx: &mut App) {}
+
+    /// The addition popup menu of the panel, default is `None`.
+    fn popup_menu(&self, this: PopupMenu, _cx: &App) -> PopupMenu {
+        this
+    }
+
+    /// The addition toolbar buttons of the panel used to show in the right of the title bar, default is `None`.
+    fn toolbar_buttons(&self, _window: &Window, _cx: &App) -> Vec<Button> {
+        vec![]
+    }
+}
+
+pub trait PanelView: 'static + Send + Sync {
+    fn panel_id(&self, cx: &App) -> SharedString;
+    fn title(&self, cx: &App) -> AnyElement;
+    fn closable(&self, cx: &App) -> bool;
+    fn zoomable(&self, cx: &App) -> bool;
+    fn visible(&self, cx: &App) -> bool;
+    fn set_active(&self, active: bool, cx: &mut App);
+    fn set_zoomed(&self, zoomed: bool, cx: &mut App);
+    fn popup_menu(&self, menu: PopupMenu, cx: &App) -> PopupMenu;
+    fn toolbar_buttons(&self, window: &Window, cx: &App) -> Vec<Button>;
+    fn view(&self) -> AnyView;
+    fn focus_handle(&self, cx: &App) -> FocusHandle;
+}
+
+impl<T: Panel> PanelView for Entity<T> {
+    fn panel_id(&self, cx: &App) -> SharedString {
+        self.read(cx).panel_id()
+    }
+
+    fn title(&self, cx: &App) -> AnyElement {
+        self.read(cx).title(cx)
+    }
+
+    fn closable(&self, cx: &App) -> bool {
+        self.read(cx).closable(cx)
+    }
+
+    fn zoomable(&self, cx: &App) -> bool {
+        self.read(cx).zoomable(cx)
+    }
+
+    fn visible(&self, cx: &App) -> bool {
+        self.read(cx).visible(cx)
+    }
+
+    fn set_active(&self, active: bool, cx: &mut App) {
+        self.update(cx, |this, cx| {
+            this.set_active(active, cx);
+        })
+    }
+
+    fn set_zoomed(&self, zoomed: bool, cx: &mut App) {
+        self.update(cx, |this, cx| {
+            this.set_zoomed(zoomed, cx);
+        })
+    }
+
+    fn popup_menu(&self, menu: PopupMenu, cx: &App) -> PopupMenu {
+        self.read(cx).popup_menu(menu, cx)
+    }
+
+    fn toolbar_buttons(&self, window: &Window, cx: &App) -> Vec<Button> {
+        self.read(cx).toolbar_buttons(window, cx)
+    }
+
+    fn view(&self) -> AnyView {
+        self.clone().into()
+    }
+
+    fn focus_handle(&self, cx: &App) -> FocusHandle {
+        self.read(cx).focus_handle(cx)
+    }
+}
+
+impl From<&dyn PanelView> for AnyView {
+    fn from(handle: &dyn PanelView) -> Self {
+        handle.view()
+    }
+}
+
+impl<T: Panel> From<&dyn PanelView> for Entity<T> {
+    fn from(value: &dyn PanelView) -> Self {
+        value.view().downcast::<T>().unwrap()
+    }
+}
+
+impl PartialEq for dyn PanelView {
+    fn eq(&self, other: &Self) -> bool {
+        self.view() == other.view()
+    }
+}

crates/dock/src/resizable/mod.rs

@@ -0,0 +1,294 @@
+use std::ops::Range;
+
+use gpui::{
+    px, Along, App, Axis, Bounds, Context, ElementId, EventEmitter, IsZero, Pixels, Window,
+};
+
+mod panel;
+mod resize_handle;
+pub use panel::*;
+pub(crate) use resize_handle::*;
+
+pub(crate) const PANEL_MIN_SIZE: Pixels = px(100.);
+
+/// Create a [`ResizablePanelGroup`] with horizontal resizing
+pub fn h_resizable(id: impl Into<ElementId>) -> ResizablePanelGroup {
+    ResizablePanelGroup::new(id).axis(Axis::Horizontal)
+}
+
+/// Create a [`ResizablePanelGroup`] with vertical resizing
+pub fn v_resizable(id: impl Into<ElementId>) -> ResizablePanelGroup {
+    ResizablePanelGroup::new(id).axis(Axis::Vertical)
+}
+
+/// Create a [`ResizablePanel`].
+pub fn resizable_panel() -> ResizablePanel {
+    ResizablePanel::new()
+}
+
+/// State for a [`ResizablePanel`]
+#[derive(Debug, Clone)]
+pub struct ResizableState {
+    /// The `axis` will sync to actual axis of the ResizablePanelGroup in use.
+    axis: Axis,
+    panels: Vec<ResizablePanelState>,
+    sizes: Vec<Pixels>,
+    pub(crate) resizing_panel_ix: Option<usize>,
+    bounds: Bounds<Pixels>,
+}
+
+impl Default for ResizableState {
+    fn default() -> Self {
+        Self {
+            axis: Axis::Horizontal,
+            panels: vec![],
+            sizes: vec![],
+            resizing_panel_ix: None,
+            bounds: Bounds::default(),
+        }
+    }
+}
+
+impl ResizableState {
+    /// Get the size of the panels.
+    pub fn sizes(&self) -> &Vec<Pixels> {
+        &self.sizes
+    }
+
+    pub(crate) fn insert_panel(
+        &mut self,
+        size: Option<Pixels>,
+        ix: Option<usize>,
+        cx: &mut Context<Self>,
+    ) {
+        let panel_state = ResizablePanelState {
+            size,
+            ..Default::default()
+        };
+
+        let size = size.unwrap_or(PANEL_MIN_SIZE);
+
+        // We make sure that the size always sums up to the container size
+        // by reducing the size of all other panels first.
+        let container_size = self.container_size().max(px(1.));
+        let total_leftover_size = (container_size - size).max(px(1.));
+
+        for (i, panel) in self.panels.iter_mut().enumerate() {
+            let ratio = self.sizes[i] / container_size;
+            self.sizes[i] = total_leftover_size * ratio;
+            panel.size = Some(self.sizes[i]);
+        }
+
+        if let Some(ix) = ix {
+            self.panels.insert(ix, panel_state);
+            self.sizes.insert(ix, size);
+        } else {
+            self.panels.push(panel_state);
+            self.sizes.push(size);
+        };
+
+        cx.notify();
+    }
+
+    pub(crate) fn sync_panels_count(
+        &mut self,
+        axis: Axis,
+        panels_count: usize,
+        cx: &mut Context<Self>,
+    ) {
+        let mut changed = self.axis != axis;
+        self.axis = axis;
+
+        if panels_count > self.panels.len() {
+            let diff = panels_count - self.panels.len();
+            self.panels
+                .extend(vec![ResizablePanelState::default(); diff]);
+            self.sizes.extend(vec![PANEL_MIN_SIZE; diff]);
+            changed = true;
+        }
+
+        if panels_count < self.panels.len() {
+            self.panels.truncate(panels_count);
+            self.sizes.truncate(panels_count);
+            changed = true;
+        }
+
+        if changed {
+            // We need to make sure the total size is in line with the container size.
+            self.adjust_to_container_size(cx);
+        }
+    }
+
+    pub(crate) fn update_panel_size(
+        &mut self,
+        panel_ix: usize,
+        bounds: Bounds<Pixels>,
+        size_range: Range<Pixels>,
+        cx: &mut Context<Self>,
+    ) {
+        let size = bounds.size.along(self.axis);
+        // This check is only necessary to stop the very first panel from resizing on its own
+        // it needs to be passed when the panel is freshly created so we get the initial size,
+        // but its also fine when it sometimes passes later.
+        if self.sizes[panel_ix].to_f64() == PANEL_MIN_SIZE.to_f64() {
+            self.sizes[panel_ix] = size;
+            self.panels[panel_ix].size = Some(size);
+        }
+        self.panels[panel_ix].bounds = bounds;
+        self.panels[panel_ix].size_range = size_range;
+        cx.notify();
+    }
+
+    pub(crate) fn remove_panel(&mut self, panel_ix: usize, cx: &mut Context<Self>) {
+        self.panels.remove(panel_ix);
+        self.sizes.remove(panel_ix);
+        if let Some(resizing_panel_ix) = self.resizing_panel_ix {
+            if resizing_panel_ix > panel_ix {
+                self.resizing_panel_ix = Some(resizing_panel_ix - 1);
+            }
+        }
+        self.adjust_to_container_size(cx);
+    }
+
+    pub(crate) fn replace_panel(
+        &mut self,
+        panel_ix: usize,
+        panel: ResizablePanelState,
+        cx: &mut Context<Self>,
+    ) {
+        let old_size = self.sizes[panel_ix];
+
+        self.panels[panel_ix] = panel;
+        self.sizes[panel_ix] = old_size;
+        self.adjust_to_container_size(cx);
+    }
+
+    pub(crate) fn clear(&mut self) {
+        self.panels.clear();
+        self.sizes.clear();
+    }
+
+    #[inline]
+    pub(crate) fn container_size(&self) -> Pixels {
+        self.bounds.size.along(self.axis)
+    }
+
+    pub(crate) fn done_resizing(&mut self, cx: &mut Context<Self>) {
+        self.resizing_panel_ix = None;
+        cx.emit(ResizablePanelEvent::Resized);
+    }
+
+    fn panel_size_range(&self, ix: usize) -> Range<Pixels> {
+        let Some(panel) = self.panels.get(ix) else {
+            return PANEL_MIN_SIZE..Pixels::MAX;
+        };
+
+        panel.size_range.clone()
+    }
+
+    fn sync_real_panel_sizes(&mut self, _: &App) {
+        for (i, panel) in self.panels.iter().enumerate() {
+            self.sizes[i] = panel.bounds.size.along(self.axis);
+        }
+    }
+
+    /// The `ix`` is the index of the panel to resize,
+    /// and the `size` is the new size for the panel.
+    fn resize_panel(&mut self, ix: usize, size: Pixels, _: &mut Window, cx: &mut Context<Self>) {
+        let old_sizes = self.sizes.clone();
+
+        let mut ix = ix;
+        // Only resize the left panels.
+        if ix >= old_sizes.len() - 1 {
+            return;
+        }
+        let container_size = self.container_size();
+        self.sync_real_panel_sizes(cx);
+
+        let move_changed = size - old_sizes[ix];
+        if move_changed == px(0.) {
+            return;
+        }
+
+        let size_range = self.panel_size_range(ix);
+        let new_size = size.clamp(size_range.start, size_range.end);
+        let is_expand = move_changed > px(0.);
+
+        let main_ix = ix;
+        let mut new_sizes = old_sizes.clone();
+
+        if is_expand {
+            let mut changed = new_size - old_sizes[ix];
+            new_sizes[ix] = new_size;
+
+            while changed > px(0.) && ix < old_sizes.len() - 1 {
+                ix += 1;
+                let size_range = self.panel_size_range(ix);
+                let available_size = (new_sizes[ix] - size_range.start).max(px(0.));
+                let to_reduce = changed.min(available_size);
+                new_sizes[ix] -= to_reduce;
+                changed -= to_reduce;
+            }
+        } else {
+            let mut changed = new_size - size;
+            new_sizes[ix] = new_size;
+
+            while changed > px(0.) && ix > 0 {
+                ix -= 1;
+                let size_range = self.panel_size_range(ix);
+                let available_size = (new_sizes[ix] - size_range.start).max(px(0.));
+                let to_reduce = changed.min(available_size);
+                changed -= to_reduce;
+                new_sizes[ix] -= to_reduce;
+            }
+
+            new_sizes[main_ix + 1] += old_sizes[main_ix] - size - changed;
+        }
+
+        let total_size: Pixels = new_sizes.iter().map(|s| s.to_f64()).sum::<f64>().into();
+
+        // If total size exceeds container size, adjust the main panel
+        if total_size > container_size {
+            let overflow = total_size - container_size;
+            new_sizes[main_ix] = (new_sizes[main_ix] - overflow).max(size_range.start);
+        }
+
+        for (i, _) in old_sizes.iter().enumerate() {
+            let size = new_sizes[i];
+            self.panels[i].size = Some(size);
+        }
+        self.sizes = new_sizes;
+        cx.notify();
+    }
+
+    /// Adjust panel sizes according to the container size.
+    ///
+    /// When the container size changes, the panels should take up the same percentage as they did before.
+    fn adjust_to_container_size(&mut self, cx: &mut Context<Self>) {
+        if self.container_size().is_zero() {
+            return;
+        }
+
+        let container_size = self.container_size();
+        let total_size = px(self.sizes.iter().map(f32::from).sum::<f32>());
+
+        for i in 0..self.panels.len() {
+            let size = self.sizes[i];
+            let ratio = size / total_size;
+            let new_size = container_size * ratio;
+
+            self.sizes[i] = new_size;
+            self.panels[i].size = Some(new_size);
+        }
+        cx.notify();
+    }
+}
+
+impl EventEmitter<ResizablePanelEvent> for ResizableState {}
+
+#[derive(Debug, Clone, Default)]
+pub(crate) struct ResizablePanelState {
+    pub size: Option<Pixels>,
+    pub size_range: Range<Pixels>,
+    bounds: Bounds<Pixels>,
+}

crates/dock/src/resizable/panel.rs

@@ -0,0 +1,405 @@
+use std::ops::{Deref, Range};
+use std::rc::Rc;
+
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    div, Along, AnyElement, App, AppContext, Axis, Bounds, Context, Element, ElementId, Empty,
+    Entity, EventEmitter, InteractiveElement as _, IntoElement, IsZero as _, MouseMoveEvent,
+    MouseUpEvent, ParentElement, Pixels, Render, RenderOnce, Style, Styled, Window,
+};
+use ui::{h_flex, v_flex, AxisExt, ElementExt};
+
+use super::{resizable_panel, resize_handle, ResizableState};
+use crate::resizable::PANEL_MIN_SIZE;
+
+pub enum ResizablePanelEvent {
+    Resized,
+}
+
+#[derive(Clone)]
+pub(crate) struct DragPanel;
+impl Render for DragPanel {
+    fn render(&mut self, _: &mut Window, _: &mut Context<'_, Self>) -> impl IntoElement {
+        Empty
+    }
+}
+
+/// A group of resizable panels.
+#[allow(clippy::type_complexity)]
+#[derive(IntoElement)]
+pub struct ResizablePanelGroup {
+    id: ElementId,
+    state: Option<Entity<ResizableState>>,
+    axis: Axis,
+    size: Option<Pixels>,
+    children: Vec<ResizablePanel>,
+    on_resize: Rc<dyn Fn(&Entity<ResizableState>, &mut Window, &mut App)>,
+}
+
+impl ResizablePanelGroup {
+    /// Create a new resizable panel group.
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            axis: Axis::Horizontal,
+            children: vec![],
+            state: None,
+            size: None,
+            on_resize: Rc::new(|_, _, _| {}),
+        }
+    }
+
+    /// Bind yourself to a resizable state entity.
+    ///
+    /// If not provided, it will handle its own state internally.
+    pub fn with_state(mut self, state: &Entity<ResizableState>) -> Self {
+        self.state = Some(state.clone());
+        self
+    }
+
+    /// Set the axis of the resizable panel group, default is horizontal.
+    pub fn axis(mut self, axis: Axis) -> Self {
+        self.axis = axis;
+        self
+    }
+
+    /// Add a panel to the group.
+    ///
+    /// - The `axis` will be set to the same axis as the group.
+    /// - The `initial_size` will be set to the average size of all panels if not provided.
+    /// - The `group` will be set to the group entity.
+    pub fn child(mut self, panel: impl Into<ResizablePanel>) -> Self {
+        self.children.push(panel.into());
+        self
+    }
+
+    /// Add multiple panels to the group.
+    pub fn children<I>(mut self, panels: impl IntoIterator<Item = I>) -> Self
+    where
+        I: Into<ResizablePanel>,
+    {
+        self.children = panels.into_iter().map(|panel| panel.into()).collect();
+        self
+    }
+
+    /// Set size of the resizable panel group
+    ///
+    /// - When the axis is horizontal, the size is the height of the group.
+    /// - When the axis is vertical, the size is the width of the group.
+    pub fn size(mut self, size: Pixels) -> Self {
+        self.size = Some(size);
+        self
+    }
+
+    /// Set the callback to be called when the panels are resized.
+    ///
+    /// ## Callback arguments
+    ///
+    /// - Entity<ResizableState>: The state of the ResizablePanelGroup.
+    pub fn on_resize(
+        mut self,
+        on_resize: impl Fn(&Entity<ResizableState>, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_resize = Rc::new(on_resize);
+        self
+    }
+}
+
+impl<T> From<T> for ResizablePanel
+where
+    T: Into<AnyElement>,
+{
+    fn from(value: T) -> Self {
+        resizable_panel().child(value.into())
+    }
+}
+
+impl From<ResizablePanelGroup> for ResizablePanel {
+    fn from(value: ResizablePanelGroup) -> Self {
+        resizable_panel().child(value)
+    }
+}
+
+impl EventEmitter<ResizablePanelEvent> for ResizablePanelGroup {}
+
+impl RenderOnce for ResizablePanelGroup {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let state = self.state.unwrap_or(
+            window.use_keyed_state(self.id.clone(), cx, |_, _| ResizableState::default()),
+        );
+        let container = if self.axis.is_horizontal() {
+            h_flex()
+        } else {
+            v_flex()
+        };
+
+        // Sync panels to the state
+        let panels_count = self.children.len();
+        state.update(cx, |state, cx| {
+            state.sync_panels_count(self.axis, panels_count, cx);
+        });
+
+        container
+            .id(self.id)
+            .size_full()
+            .children(
+                self.children
+                    .into_iter()
+                    .enumerate()
+                    .map(|(ix, mut panel)| {
+                        panel.panel_ix = ix;
+                        panel.axis = self.axis;
+                        panel.state = Some(state.clone());
+                        panel
+                    }),
+            )
+            .on_prepaint({
+                let state = state.clone();
+                move |bounds, _, cx| {
+                    state.update(cx, |state, cx| {
+                        let size_changed =
+                            state.bounds.size.along(self.axis) != bounds.size.along(self.axis);
+
+                        state.bounds = bounds;
+
+                        if size_changed {
+                            state.adjust_to_container_size(cx);
+                        }
+                    })
+                }
+            })
+            .child(ResizePanelGroupElement {
+                state: state.clone(),
+                axis: self.axis,
+                on_resize: self.on_resize.clone(),
+            })
+    }
+}
+
+/// A resizable panel inside a [`ResizablePanelGroup`].
+#[derive(IntoElement)]
+pub struct ResizablePanel {
+    axis: Axis,
+    panel_ix: usize,
+    state: Option<Entity<ResizableState>>,
+    /// Initial size is the size that the panel has when it is created.
+    initial_size: Option<Pixels>,
+    /// size range limit of this panel.
+    size_range: Range<Pixels>,
+    children: Vec<AnyElement>,
+    visible: bool,
+}
+
+impl ResizablePanel {
+    /// Create a new resizable panel.
+    pub(super) fn new() -> Self {
+        Self {
+            panel_ix: 0,
+            initial_size: None,
+            state: None,
+            size_range: (PANEL_MIN_SIZE..Pixels::MAX),
+            axis: Axis::Horizontal,
+            children: vec![],
+            visible: true,
+        }
+    }
+
+    /// Set the visibility of the panel, default is true.
+    pub fn visible(mut self, visible: bool) -> Self {
+        self.visible = visible;
+        self
+    }
+
+    /// Set the initial size of the panel.
+    pub fn size(mut self, size: impl Into<Pixels>) -> Self {
+        self.initial_size = Some(size.into());
+        self
+    }
+
+    /// Set the size range to limit panel resize.
+    ///
+    /// Default is [`PANEL_MIN_SIZE`] to [`Pixels::MAX`].
+    pub fn size_range(mut self, range: impl Into<Range<Pixels>>) -> Self {
+        self.size_range = range.into();
+        self
+    }
+}
+
+impl ParentElement for ResizablePanel {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements);
+    }
+}
+
+impl RenderOnce for ResizablePanel {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        if !self.visible {
+            return div().id(("resizable-panel", self.panel_ix));
+        }
+
+        let state = self
+            .state
+            .expect("BUG: The `state` in ResizablePanel should be present.");
+        let panel_state = state
+            .read(cx)
+            .panels
+            .get(self.panel_ix)
+            .expect("BUG: The `index` of ResizablePanel should be one of in `state`.");
+        let size_range = self.size_range.clone();
+
+        div()
+            .id(("resizable-panel", self.panel_ix))
+            .flex()
+            .flex_grow()
+            .size_full()
+            .relative()
+            .when(self.axis.is_vertical(), |this| {
+                this.min_h(size_range.start).max_h(size_range.end)
+            })
+            .when(self.axis.is_horizontal(), |this| {
+                this.min_w(size_range.start).max_w(size_range.end)
+            })
+            // 1. initial_size is None, to use auto size.
+            // 2. initial_size is Some and size is none, to use the initial size of the panel for first time render.
+            // 3. initial_size is Some and size is Some, use `size`.
+            .when(self.initial_size.is_none(), |this| this.flex_shrink())
+            .when_some(self.initial_size, |this, initial_size| {
+                // The `self.size` is None, that mean the initial size for the panel,
+                // so we need set `flex_shrink_0` To let it keep the initial size.
+                this.when(
+                    panel_state.size.is_none() && !initial_size.is_zero(),
+                    |this| this.flex_none(),
+                )
+                .flex_basis(initial_size)
+            })
+            .map(|this| match panel_state.size {
+                Some(size) => this.flex_basis(size.min(size_range.end).max(size_range.start)),
+                None => this,
+            })
+            .on_prepaint({
+                let state = state.clone();
+                move |bounds, _, cx| {
+                    state.update(cx, |state, cx| {
+                        state.update_panel_size(self.panel_ix, bounds, self.size_range, cx)
+                    })
+                }
+            })
+            .children(self.children)
+            .when(self.panel_ix > 0, |this| {
+                let ix = self.panel_ix - 1;
+                this.child(resize_handle(("resizable-handle", ix), self.axis).on_drag(
+                    DragPanel,
+                    move |drag_panel, _, _, cx| {
+                        cx.stop_propagation();
+                        // Set current resizing panel ix
+                        state.update(cx, |state, _| {
+                            state.resizing_panel_ix = Some(ix);
+                        });
+                        cx.new(|_| drag_panel.deref().clone())
+                    },
+                ))
+            })
+    }
+}
+
+#[allow(clippy::type_complexity)]
+struct ResizePanelGroupElement {
+    state: Entity<ResizableState>,
+    on_resize: Rc<dyn Fn(&Entity<ResizableState>, &mut Window, &mut App)>,
+    axis: Axis,
+}
+
+impl IntoElement for ResizePanelGroupElement {
+    type Element = Self;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
+impl Element for ResizePanelGroupElement {
+    type PrepaintState = ();
+    type RequestLayoutState = ();
+
+    fn id(&self) -> Option<gpui::ElementId> {
+        None
+    }
+
+    fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {
+        None
+    }
+
+    fn request_layout(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> (gpui::LayoutId, Self::RequestLayoutState) {
+        (window.request_layout(Style::default(), None, cx), ())
+    }
+
+    fn prepaint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        _: Bounds<Pixels>,
+        _: &mut Self::RequestLayoutState,
+        _window: &mut Window,
+        _cx: &mut App,
+    ) -> Self::PrepaintState {
+    }
+
+    fn paint(
+        &mut self,
+        _: Option<&gpui::GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        _: Bounds<Pixels>,
+        _: &mut Self::RequestLayoutState,
+        _: &mut Self::PrepaintState,
+        window: &mut Window,
+        cx: &mut App,
+    ) {
+        window.on_mouse_event({
+            let state = self.state.clone();
+            let axis = self.axis;
+            let current_ix = state.read(cx).resizing_panel_ix;
+            move |e: &MouseMoveEvent, phase, window, cx| {
+                if !phase.bubble() {
+                    return;
+                }
+                let Some(ix) = current_ix else { return };
+
+                state.update(cx, |state, cx| {
+                    let panel = state.panels.get(ix).expect("BUG: invalid panel index");
+
+                    match axis {
+                        Axis::Horizontal => {
+                            state.resize_panel(ix, e.position.x - panel.bounds.left(), window, cx)
+                        }
+                        Axis::Vertical => {
+                            state.resize_panel(ix, e.position.y - panel.bounds.top(), window, cx);
+                        }
+                    }
+                    cx.notify();
+                })
+            }
+        });
+
+        // When any mouse up, stop dragging
+        window.on_mouse_event({
+            let state = self.state.clone();
+            let current_ix = state.read(cx).resizing_panel_ix;
+            let on_resize = self.on_resize.clone();
+            move |_: &MouseUpEvent, phase, window, cx| {
+                if current_ix.is_none() {
+                    return;
+                }
+                if phase.bubble() {
+                    state.update(cx, |state, cx| state.done_resizing(cx));
+                    on_resize(&state, window, cx);
+                }
+            }
+        })
+    }
+}

crates/dock/src/resizable/resize_handle.rs

@@ -0,0 +1,227 @@
+use std::cell::Cell;
+use std::rc::Rc;
+
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    div, px, AnyElement, App, Axis, Element, ElementId, Entity, GlobalElementId,
+    InteractiveElement, IntoElement, MouseDownEvent, MouseUpEvent, ParentElement as _, Pixels,
+    Point, Render, StatefulInteractiveElement, Styled as _, Window,
+};
+use theme::ActiveTheme;
+use ui::AxisExt;
+
+use crate::dock::DockPlacement;
+
+pub(crate) const HANDLE_PADDING: Pixels = px(4.);
+pub(crate) const HANDLE_SIZE: Pixels = px(1.);
+
+/// Create a resize handle for a resizable panel.
+pub(crate) fn resize_handle<T: 'static, E: 'static + Render>(
+    id: impl Into<ElementId>,
+    axis: Axis,
+) -> ResizeHandle<T, E> {
+    ResizeHandle::new(id, axis)
+}
+
+#[allow(clippy::type_complexity)]
+pub(crate) struct ResizeHandle<T: 'static, E: 'static + Render> {
+    id: ElementId,
+    axis: Axis,
+    drag_value: Option<Rc<T>>,
+    placement: Option<DockPlacement>,
+    on_drag: Option<Rc<dyn Fn(&Point<Pixels>, &mut Window, &mut App) -> Entity<E>>>,
+}
+
+impl<T: 'static, E: 'static + Render> ResizeHandle<T, E> {
+    fn new(id: impl Into<ElementId>, axis: Axis) -> Self {
+        let id = id.into();
+        Self {
+            id: id.clone(),
+            on_drag: None,
+            drag_value: None,
+            placement: None,
+            axis,
+        }
+    }
+
+    pub(crate) fn on_drag(
+        mut self,
+        value: T,
+        f: impl Fn(Rc<T>, &Point<Pixels>, &mut Window, &mut App) -> Entity<E> + 'static,
+    ) -> Self {
+        let value = Rc::new(value);
+        self.drag_value = Some(value.clone());
+        self.on_drag = Some(Rc::new(move |p, window, cx| {
+            f(value.clone(), p, window, cx)
+        }));
+        self
+    }
+
+    #[allow(dead_code)]
+    pub(crate) fn placement(mut self, placement: DockPlacement) -> Self {
+        self.placement = Some(placement);
+        self
+    }
+}
+
+#[derive(Default, Debug, Clone)]
+struct ResizeHandleState {
+    active: Cell<bool>,
+}
+
+impl ResizeHandleState {
+    fn set_active(&self, active: bool) {
+        self.active.set(active);
+    }
+
+    fn is_active(&self) -> bool {
+        self.active.get()
+    }
+}
+
+impl<T: 'static, E: 'static + Render> IntoElement for ResizeHandle<T, E> {
+    type Element = ResizeHandle<T, E>;
+
+    fn into_element(self) -> Self::Element {
+        self
+    }
+}
+
+impl<T: 'static, E: 'static + Render> Element for ResizeHandle<T, E> {
+    type PrepaintState = ();
+    type RequestLayoutState = AnyElement;
+
+    fn id(&self) -> Option<ElementId> {
+        Some(self.id.clone())
+    }
+
+    fn source_location(&self) -> Option<&'static std::panic::Location<'static>> {
+        None
+    }
+
+    fn request_layout(
+        &mut self,
+        id: Option<&GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> (gpui::LayoutId, Self::RequestLayoutState) {
+        let neg_offset = -HANDLE_PADDING;
+        let axis = self.axis;
+
+        window.with_element_state(id.unwrap(), |state, window| {
+            let state = state.unwrap_or(ResizeHandleState::default());
+
+            let bg_color = if state.is_active() {
+                cx.theme().border_variant
+            } else {
+                cx.theme().border
+            };
+
+            let mut el = div()
+                .id(self.id.clone())
+                .occlude()
+                .absolute()
+                .flex_shrink_0()
+                .group("handle")
+                .when_some(self.on_drag.clone(), |this, on_drag| {
+                    this.on_drag(
+                        self.drag_value.clone().unwrap(),
+                        move |_, position, window, cx| on_drag(&position, window, cx),
+                    )
+                })
+                .map(|this| match self.placement {
+                    Some(DockPlacement::Left) => {
+                        // Special for Left Dock
+                        //  FIXME: Improve this to let the scroll bar have px(HANDLE_PADDING)
+                        this.cursor_col_resize()
+                            .top_0()
+                            .right(px(1.))
+                            .h_full()
+                            .w(HANDLE_SIZE)
+                            .pl(HANDLE_PADDING)
+                    }
+                    _ => this
+                        .when(axis.is_horizontal(), |this| {
+                            this.cursor_col_resize()
+                                .top_0()
+                                .left(neg_offset)
+                                .h_full()
+                                .w(HANDLE_SIZE)
+                                .px(HANDLE_PADDING)
+                        })
+                        .when(axis.is_vertical(), |this| {
+                            this.cursor_row_resize()
+                                .top(neg_offset)
+                                .left_0()
+                                .w_full()
+                                .h(HANDLE_SIZE)
+                                .py(HANDLE_PADDING)
+                        }),
+                })
+                .child(
+                    div()
+                        .bg(bg_color)
+                        .group_hover("handle", |this| this.bg(bg_color))
+                        .when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE))
+                        .when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE)),
+                )
+                .into_any_element();
+
+            let layout_id = el.request_layout(window, cx);
+
+            ((layout_id, el), state)
+        })
+    }
+
+    fn prepaint(
+        &mut self,
+        _: Option<&GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        _: gpui::Bounds<Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Self::PrepaintState {
+        request_layout.prepaint(window, cx);
+    }
+
+    fn paint(
+        &mut self,
+        id: Option<&GlobalElementId>,
+        _: Option<&gpui::InspectorElementId>,
+        bounds: gpui::Bounds<Pixels>,
+        request_layout: &mut Self::RequestLayoutState,
+        _: &mut Self::PrepaintState,
+        window: &mut Window,
+        cx: &mut App,
+    ) {
+        request_layout.paint(window, cx);
+
+        window.with_element_state(id.unwrap(), |state: Option<ResizeHandleState>, window| {
+            let state = state.unwrap_or_default();
+
+            window.on_mouse_event({
+                let state = state.clone();
+                move |ev: &MouseDownEvent, phase, window, _| {
+                    if bounds.contains(&ev.position) && phase.bubble() {
+                        state.set_active(true);
+                        window.refresh();
+                    }
+                }
+            });
+
+            window.on_mouse_event({
+                let state = state.clone();
+                move |_: &MouseUpEvent, _, window, _| {
+                    if state.is_active() {
+                        state.set_active(false);
+                        window.refresh();
+                    }
+                }
+            });
+
+            ((), state)
+        });
+    }
+}

crates/dock/src/stack_panel.rs

@@ -0,0 +1,405 @@
+use std::sync::Arc;
+
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    App, AppContext, Axis, Context, DismissEvent, Entity, EventEmitter, FocusHandle, Focusable,
+    IntoElement, ParentElement, Pixels, Render, SharedString, Styled, Subscription, WeakEntity,
+    Window,
+};
+use smallvec::SmallVec;
+use theme::{ActiveTheme, CLIENT_SIDE_DECORATION_ROUNDING};
+use ui::{h_flex, AxisExt as _, Placement};
+
+use super::{DockArea, PanelEvent};
+use crate::panel::{Panel, PanelView};
+use crate::resizable::{
+    resizable_panel, ResizablePanelEvent, ResizablePanelGroup, ResizablePanelState, ResizableState,
+    PANEL_MIN_SIZE,
+};
+use crate::tab_panel::TabPanel;
+
+pub struct StackPanel {
+    pub(super) parent: Option<WeakEntity<StackPanel>>,
+    pub(super) axis: Axis,
+    focus_handle: FocusHandle,
+    pub(crate) panels: SmallVec<[Arc<dyn PanelView>; 2]>,
+    state: Entity<ResizableState>,
+    _subscriptions: Vec<Subscription>,
+}
+
+impl Panel for StackPanel {
+    fn panel_id(&self) -> SharedString {
+        "StackPanel".into()
+    }
+
+    fn title(&self, _cx: &App) -> gpui::AnyElement {
+        "StackPanel".into_any_element()
+    }
+}
+
+impl StackPanel {
+    pub fn new(axis: Axis, window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let state = cx.new(|_| ResizableState::default());
+
+        // Bubble up the resize event.
+        let subscriptions =
+            vec![
+                cx.subscribe_in(&state, window, |_, _, _: &ResizablePanelEvent, _, cx| {
+                    cx.emit(PanelEvent::LayoutChanged)
+                }),
+            ];
+
+        Self {
+            axis,
+            parent: None,
+            focus_handle: cx.focus_handle(),
+            panels: SmallVec::new(),
+            state,
+            _subscriptions: subscriptions,
+        }
+    }
+
+    /// The first level of the stack panel is root, will not have a parent.
+    fn is_root(&self) -> bool {
+        self.parent.is_none()
+    }
+
+    /// Return true if self or parent only have last panel.
+    pub(super) fn is_last_panel(&self, cx: &App) -> bool {
+        if self.panels.len() > 1 {
+            return false;
+        }
+
+        if let Some(parent) = &self.parent {
+            if let Some(parent) = parent.upgrade() {
+                return parent.read(cx).is_last_panel(cx);
+            }
+        }
+
+        true
+    }
+
+    pub(super) fn panels_len(&self) -> usize {
+        self.panels.len()
+    }
+
+    /// Return the index of the panel.
+    pub(crate) fn index_of_panel(&self, panel: Arc<dyn PanelView>) -> Option<usize> {
+        self.panels.iter().position(|p| p == &panel)
+    }
+
+    /// Add a panel at the end of the stack.
+    pub fn add_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        size: Option<Pixels>,
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.insert_panel(panel, self.panels.len(), size, dock_area, window, cx);
+    }
+
+    pub fn add_panel_at(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        placement: Placement,
+        size: Option<Pixels>,
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.insert_panel_at(
+            panel,
+            self.panels_len(),
+            placement,
+            size,
+            dock_area,
+            window,
+            cx,
+        );
+    }
+
+    #[allow(clippy::too_many_arguments)]
+    pub fn insert_panel_at(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        ix: usize,
+        placement: Placement,
+        size: Option<Pixels>,
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        match placement {
+            Placement::Top | Placement::Left => {
+                self.insert_panel_before(panel, ix, size, dock_area, window, cx)
+            }
+            Placement::Right | Placement::Bottom => {
+                self.insert_panel_after(panel, ix, size, dock_area, window, cx)
+            }
+        }
+    }
+
+    /// Insert a panel at the index.
+    pub fn insert_panel_before(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        ix: usize,
+        size: Option<Pixels>,
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.insert_panel(panel, ix, size, dock_area, window, cx);
+    }
+
+    /// Insert a panel after the index.
+    pub fn insert_panel_after(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        ix: usize,
+        size: Option<Pixels>,
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.insert_panel(panel, ix + 1, size, dock_area, window, cx);
+    }
+
+    fn insert_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        ix: usize,
+        size: Option<Pixels>,
+        dock_area: WeakEntity<DockArea>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        // If the panel is already in the stack, return.
+        if self.index_of_panel(panel.clone()).is_some() {
+            return;
+        }
+
+        let view = cx.entity().clone();
+
+        window.defer(cx, {
+            let panel = panel.clone();
+
+            move |window, cx| {
+                // If the panel is a TabPanel, set its parent to this.
+                if let Ok(tab_panel) = panel.view().downcast::<TabPanel>() {
+                    tab_panel.update(cx, |tab_panel, _| tab_panel.set_parent(view.downgrade()));
+                } else if let Ok(stack_panel) = panel.view().downcast::<Self>() {
+                    stack_panel.update(cx, |stack_panel, _| {
+                        stack_panel.parent = Some(view.downgrade())
+                    });
+                }
+
+                // Subscribe to the panel's layout change event.
+                _ = dock_area.update(cx, |this, cx| {
+                    if let Ok(tab_panel) = panel.view().downcast::<TabPanel>() {
+                        this.subscribe_panel(&tab_panel, window, cx);
+                    } else if let Ok(stack_panel) = panel.view().downcast::<Self>() {
+                        this.subscribe_panel(&stack_panel, window, cx);
+                    }
+                });
+            }
+        });
+
+        let ix = if ix > self.panels.len() {
+            self.panels.len()
+        } else {
+            ix
+        };
+
+        // Get avg size of all panels to insert new panel, if size is None.
+        let size = match size {
+            Some(size) => size,
+            None => {
+                let state = self.state.read(cx);
+                (state.container_size() / (state.sizes().len() + 1) as f32).max(PANEL_MIN_SIZE)
+            }
+        };
+
+        // Insert panel
+        self.panels.insert(ix, panel.clone());
+
+        // Update resizable state
+        self.state.update(cx, |state, cx| {
+            state.insert_panel(Some(size), Some(ix), cx);
+        });
+
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    /// Remove panel from the stack.
+    ///
+    /// If `ix` is not found, do nothing.
+    pub fn remove_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let Some(ix) = self.index_of_panel(panel.clone()) else {
+            return;
+        };
+
+        self.panels.remove(ix);
+        self.state.update(cx, |state, cx| {
+            state.remove_panel(ix, cx);
+        });
+
+        cx.emit(PanelEvent::LayoutChanged);
+        self.remove_self_if_empty(window, cx);
+    }
+
+    /// Replace the old panel with the new panel at same index.
+    pub(super) fn replace_panel(
+        &mut self,
+        old_panel: Arc<dyn PanelView>,
+        new_panel: Entity<StackPanel>,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(ix) = self.index_of_panel(old_panel.clone()) {
+            self.panels[ix] = Arc::new(new_panel.clone());
+            let panel_state = ResizablePanelState::default();
+            self.state.update(cx, |state, cx| {
+                state.replace_panel(ix, panel_state, cx);
+            });
+            cx.emit(PanelEvent::LayoutChanged);
+        }
+    }
+
+    /// If children is empty, remove self from parent view.
+    pub(crate) fn remove_self_if_empty(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        if self.is_root() {
+            return;
+        }
+
+        if !self.panels.is_empty() {
+            return;
+        }
+
+        let view = cx.entity().clone();
+        if let Some(parent) = self.parent.as_ref() {
+            _ = parent.update(cx, |parent, cx| {
+                parent.remove_panel(Arc::new(view.clone()), window, cx);
+            });
+        }
+
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    /// Find the first top left in the stack.
+    pub(super) fn left_top_tab_panel(
+        &self,
+        check_parent: bool,
+        cx: &App,
+    ) -> Option<Entity<TabPanel>> {
+        if check_parent {
+            if let Some(parent) = self.parent.as_ref().and_then(|parent| parent.upgrade()) {
+                if let Some(panel) = parent.read(cx).left_top_tab_panel(true, cx) {
+                    return Some(panel);
+                }
+            }
+        }
+
+        let first_panel = self.panels.first();
+        if let Some(view) = first_panel {
+            if let Ok(tab_panel) = view.view().downcast::<TabPanel>() {
+                Some(tab_panel)
+            } else if let Ok(stack_panel) = view.view().downcast::<StackPanel>() {
+                stack_panel.read(cx).left_top_tab_panel(false, cx)
+            } else {
+                None
+            }
+        } else {
+            None
+        }
+    }
+
+    /// Find the first top right in the stack.
+    pub(super) fn right_top_tab_panel(
+        &self,
+        check_parent: bool,
+        cx: &App,
+    ) -> Option<Entity<TabPanel>> {
+        if check_parent {
+            if let Some(parent) = self.parent.as_ref().and_then(|parent| parent.upgrade()) {
+                if let Some(panel) = parent.read(cx).right_top_tab_panel(true, cx) {
+                    return Some(panel);
+                }
+            }
+        }
+
+        let panel = if self.axis.is_vertical() {
+            self.panels.first()
+        } else {
+            self.panels.last()
+        };
+
+        if let Some(view) = panel {
+            if let Ok(tab_panel) = view.view().downcast::<TabPanel>() {
+                Some(tab_panel)
+            } else if let Ok(stack_panel) = view.view().downcast::<StackPanel>() {
+                stack_panel.read(cx).right_top_tab_panel(false, cx)
+            } else {
+                None
+            }
+        } else {
+            None
+        }
+    }
+
+    /// Remove all panels from the stack.
+    pub(super) fn remove_all_panels(&mut self, _: &mut Window, cx: &mut Context<Self>) {
+        self.panels.clear();
+        self.state.update(cx, |state, cx| {
+            state.clear();
+            cx.notify();
+        });
+    }
+
+    /// Change the axis of the stack panel.
+    pub(super) fn set_axis(&mut self, axis: Axis, _: &mut Window, cx: &mut Context<Self>) {
+        self.axis = axis;
+        cx.notify();
+    }
+}
+
+impl Focusable for StackPanel {
+    fn focus_handle(&self, _cx: &App) -> FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl EventEmitter<PanelEvent> for StackPanel {}
+
+impl EventEmitter<DismissEvent> for StackPanel {}
+
+impl Render for StackPanel {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        h_flex()
+            .size_full()
+            .overflow_hidden()
+            .bg(cx.theme().panel_background)
+            .when(cx.theme().platform.is_linux(), |this| {
+                this.rounded_br(CLIENT_SIDE_DECORATION_ROUNDING)
+            })
+            .child(
+                ResizablePanelGroup::new("stack-panel-group")
+                    .with_state(&self.state)
+                    .axis(self.axis)
+                    .children(self.panels.clone().into_iter().map(|panel| {
+                        resizable_panel()
+                            .child(panel.view())
+                            .visible(panel.visible(cx))
+                    })),
+            )
+    }
+}

crates/dock/src/tab/mod.rs

@@ -0,0 +1,165 @@
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
+    RenderOnce, StatefulInteractiveElement, Styled, Window,
+};
+use theme::{ActiveTheme, TABBAR_HEIGHT};
+use ui::{Selectable, Sizable, Size};
+
+pub mod tab_bar;
+
+#[derive(IntoElement)]
+pub struct Tab {
+    ix: usize,
+    base: Div,
+    label: Option<AnyElement>,
+    prefix: Option<AnyElement>,
+    suffix: Option<AnyElement>,
+    disabled: bool,
+    selected: bool,
+    size: Size,
+}
+
+impl Tab {
+    pub fn new() -> Self {
+        Self {
+            ix: 0,
+            base: div(),
+            label: None,
+            disabled: false,
+            selected: false,
+            prefix: None,
+            suffix: None,
+            size: Size::default(),
+        }
+    }
+
+    /// Set label for the tab.
+    pub fn label(mut self, label: impl Into<AnyElement>) -> Self {
+        self.label = Some(label.into());
+        self
+    }
+
+    /// Set the left side of the tab
+    pub fn prefix(mut self, prefix: impl Into<AnyElement>) -> Self {
+        self.prefix = Some(prefix.into());
+        self
+    }
+
+    /// Set the right side of the tab
+    pub fn suffix(mut self, suffix: impl Into<AnyElement>) -> Self {
+        self.suffix = Some(suffix.into());
+        self
+    }
+
+    /// Set disabled state to the tab
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    /// Set index to the tab.
+    pub fn ix(mut self, ix: usize) -> Self {
+        self.ix = ix;
+        self
+    }
+}
+
+impl Default for Tab {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl Selectable for Tab {
+    fn selected(mut self, selected: bool) -> Self {
+        self.selected = selected;
+        self
+    }
+
+    fn is_selected(&self) -> bool {
+        self.selected
+    }
+}
+
+impl InteractiveElement for Tab {
+    fn interactivity(&mut self) -> &mut gpui::Interactivity {
+        self.base.interactivity()
+    }
+}
+
+impl StatefulInteractiveElement for Tab {}
+
+impl Styled for Tab {
+    fn style(&mut self) -> &mut gpui::StyleRefinement {
+        self.base.style()
+    }
+}
+
+impl Sizable for Tab {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
+impl RenderOnce for Tab {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let (text_color, hover_text_color, bg_color, border_color) =
+            match (self.selected, self.disabled) {
+                (true, false) => (
+                    cx.theme().tab_active_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().tab_active_background,
+                    cx.theme().border,
+                ),
+                (false, false) => (
+                    cx.theme().tab_inactive_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().ghost_element_background,
+                    cx.theme().border_transparent,
+                ),
+                (true, true) => (
+                    cx.theme().tab_inactive_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().ghost_element_background,
+                    cx.theme().border_disabled,
+                ),
+                (false, true) => (
+                    cx.theme().tab_inactive_foreground,
+                    cx.theme().tab_hover_foreground,
+                    cx.theme().ghost_element_background,
+                    cx.theme().border_disabled,
+                ),
+            };
+
+        self.base
+            .id(self.ix)
+            .h(TABBAR_HEIGHT)
+            .px_4()
+            .relative()
+            .flex()
+            .items_center()
+            .flex_shrink_0()
+            .cursor_pointer()
+            .overflow_hidden()
+            .text_xs()
+            .text_ellipsis()
+            .text_color(text_color)
+            .bg(bg_color)
+            .border_l(px(1.))
+            .border_r(px(1.))
+            .border_color(border_color)
+            .when(!self.selected && !self.disabled, |this| {
+                this.hover(|this| this.text_color(hover_text_color))
+            })
+            .when_some(self.prefix, |this, prefix| {
+                this.child(prefix).text_color(text_color)
+            })
+            .when_some(self.label, |this, label| this.child(label))
+            .when_some(self.suffix, |this, suffix| this.child(suffix))
+            .on_mouse_down(MouseButton::Left, |_ev, _window, cx| {
+                cx.stop_propagation();
+            })
+    }
+}

crates/dock/src/tab/tab_bar.rs

@@ -0,0 +1,127 @@
+use gpui::prelude::FluentBuilder as _;
+#[cfg(not(target_os = "windows"))]
+use gpui::Pixels;
+use gpui::{
+    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce,
+    ScrollHandle, StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
+};
+use smallvec::SmallVec;
+use theme::ActiveTheme;
+use ui::{h_flex, Sizable, Size, StyledExt};
+
+#[derive(IntoElement)]
+pub struct TabBar {
+    base: Div,
+    style: StyleRefinement,
+    scroll_handle: Option<ScrollHandle>,
+    prefix: Option<AnyElement>,
+    suffix: Option<AnyElement>,
+    last_empty_space: AnyElement,
+    children: SmallVec<[AnyElement; 2]>,
+    size: Size,
+}
+
+impl TabBar {
+    pub fn new() -> Self {
+        Self {
+            base: h_flex().px(px(-1.)),
+            style: StyleRefinement::default(),
+            scroll_handle: None,
+            children: SmallVec::new(),
+            prefix: None,
+            suffix: None,
+            size: Size::default(),
+            last_empty_space: div().w_3().into_any_element(),
+        }
+    }
+
+    /// Track the scroll of the TabBar.
+    pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
+        self.scroll_handle = Some(scroll_handle.clone());
+        self
+    }
+
+    /// Set the prefix element of the TabBar
+    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
+        self.prefix = Some(prefix.into_any_element());
+        self
+    }
+
+    /// Set the suffix element of the TabBar
+    pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
+        self.suffix = Some(suffix.into_any_element());
+        self
+    }
+
+    /// Set the last empty space element of the TabBar.
+    pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self {
+        self.last_empty_space = last_empty_space.into_any_element();
+        self
+    }
+
+    #[cfg(not(target_os = "windows"))]
+    pub fn height(window: &mut Window) -> Pixels {
+        (1.75 * window.rem_size()).max(px(36.))
+    }
+}
+
+impl Default for TabBar {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl ParentElement for TabBar {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements)
+    }
+}
+
+impl Styled for TabBar {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.style
+    }
+}
+
+impl Sizable for TabBar {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
+        self
+    }
+}
+
+impl RenderOnce for TabBar {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        self.base
+            .group("tab-bar")
+            .relative()
+            .refine_style(&self.style)
+            .bg(cx.theme().surface_background)
+            .child(
+                div()
+                    .id("border-bottom")
+                    .absolute()
+                    .left_0()
+                    .bottom_0()
+                    .size_full()
+                    .border_b_1()
+                    .border_color(cx.theme().border),
+            )
+            .text_color(cx.theme().text)
+            .when_some(self.prefix, |this, prefix| this.child(prefix))
+            .child(
+                h_flex()
+                    .id("tabs")
+                    .flex_grow()
+                    .overflow_x_scroll()
+                    .when_some(self.scroll_handle, |this, scroll_handle| {
+                        this.track_scroll(&scroll_handle)
+                    })
+                    .children(self.children)
+                    .when(self.suffix.is_some(), |this| {
+                        this.child(self.last_empty_space)
+                    }),
+            )
+            .when_some(self.suffix, |this, suffix| this.child(suffix))
+    }
+}