move dock to seperated crate

crates/dock/Cargo.toml

@@ -0,0 +1,15 @@
+[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

crates/dock/src/dock.rs

@@ -0,0 +1,466 @@
+use std::sync::Arc;
+
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    div, px, App, AppContext, Axis, Context, Element, Entity, InteractiveElement as _, IntoElement,
+    MouseMoveEvent, MouseUpEvent, ParentElement as _, Pixels, Point, Render,
+    StatefulInteractiveElement, Style, Styled as _, WeakEntity, Window,
+};
+use theme::ActiveTheme;
+use ui::resizable::{HANDLE_PADDING, HANDLE_SIZE, PANEL_MIN_SIZE};
+use ui::{AxisExt as _, StyledExt};
+
+use super::{DockArea, DockItem};
+use crate::panel::PanelView;
+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
+    is_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),
+            is_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 neg_offset = -HANDLE_PADDING;
+        let view = cx.entity().clone();
+
+        div()
+            .id("resize-handle")
+            .occlude()
+            .absolute()
+            .flex_shrink_0()
+            .when(self.placement.is_left(), |this| {
+                // 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)
+                    .pt_12()
+                    .pb_4()
+            })
+            .when(self.placement.is_right(), |this| {
+                this.cursor_col_resize()
+                    .top_0()
+                    .left(px(-0.5))
+                    .h_full()
+                    .w(HANDLE_SIZE)
+                    .pt_12()
+                    .pb_4()
+            })
+            .when(self.placement.is_bottom(), |this| {
+                this.cursor_row_resize()
+                    .top(neg_offset)
+                    .left_0()
+                    .w_full()
+                    .h(HANDLE_SIZE)
+                    .py(HANDLE_PADDING)
+            })
+            .child(
+                div()
+                    .rounded_full()
+                    .hover(|this| this.bg(cx.theme().border_variant))
+                    .when(axis.is_horizontal(), |this| this.h_full().w(HANDLE_SIZE))
+                    .when(axis.is_vertical(), |this| this.w_full().h(HANDLE_SIZE)),
+            )
+            .on_drag(ResizePanel {}, move |info, _, _, cx| {
+                cx.stop_propagation();
+                view.update(cx, |view, _| {
+                    view.is_resizing = true;
+                });
+                cx.new(|_| info.clone())
+            })
+    }
+
+    fn resize(
+        &mut self,
+        mouse_position: Point<Pixels>,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if !self.is_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.is_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).is_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,790 @@
+use std::sync::Arc;
+
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    actions, canvas, 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 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 stack_panel;
+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 entity_id of the [`TabPanel`](TabPanel) where each toggle button should be displayed,
+    toggle_button_panels: Edges<Option<EntityId>>,
+    /// 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 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(),
+            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 |_, 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();
+                            });
+                        })
+                        .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)
+                            });
+                        })
+                        .detach();
+                        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()
+            .child(
+                canvas(
+                    move |bounds, _, cx| view.update(cx, |r, _| r.bounds = bounds),
+                    |_, _, _, _| {},
+                )
+                .absolute()
+                .size_full(),
+            )
+            .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,162 @@
+use gpui::{
+    AnyElement, AnyView, App, Element, Entity, EventEmitter, FocusHandle, Focusable, Hsla, Render,
+    SharedString, Window,
+};
+use ui::button::Button;
+use ui::popup_menu::PopupMenu;
+
+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/stack_panel.rs

@@ -0,0 +1,397 @@
+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 ui::resizable::{
+    h_resizable, resizable_panel, v_resizable, ResizablePanel, ResizablePanelEvent,
+    ResizablePanelGroup,
+};
+use ui::{h_flex, AxisExt as _, Placement};
+
+use super::{DockArea, PanelEvent};
+use crate::panel::{Panel, PanelView};
+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]>,
+    panel_group: Entity<ResizablePanelGroup>,
+    #[allow(dead_code)]
+    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 panel_group = cx.new(|cx| {
+            if axis == Axis::Horizontal {
+                h_resizable(window, cx)
+            } else {
+                v_resizable(window, cx)
+            }
+        });
+
+        // Bubble up the resize event.
+        let subscriptions = vec![cx.subscribe_in(
+            &panel_group,
+            window,
+            |_, _, _: &ResizablePanelEvent, _, cx| cx.emit(PanelEvent::LayoutChanged),
+        )];
+
+        Self {
+            axis,
+            parent: None,
+            focus_handle: cx.focus_handle(),
+            panels: SmallVec::new(),
+            panel_group,
+            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 new_resizable_panel(panel: Arc<dyn PanelView>, size: Option<Pixels>) -> ResizablePanel {
+        resizable_panel()
+            .content_view(panel.view())
+            .content_visible(move |cx| panel.visible(cx))
+            .when_some(size, |this, size| this.size(size))
+    }
+
+    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
+        };
+
+        self.panels.insert(ix, panel.clone());
+        self.panel_group.update(cx, |view, cx| {
+            view.insert_child(
+                Self::new_resizable_panel(panel.clone(), size),
+                ix,
+                window,
+                cx,
+            )
+        });
+
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    /// Remove panel from the stack.
+    pub fn remove_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(ix) = self.index_of_panel(panel.clone()) {
+            self.panels.remove(ix);
+            self.panel_group.update(cx, |view, cx| {
+                view.remove_child(ix, window, 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());
+            self.panel_group.update(cx, |view, cx| {
+                view.replace_child(
+                    Self::new_resizable_panel(Arc::new(new_panel.clone()), None),
+                    ix,
+                    window,
+                    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, window: &mut Window, cx: &mut Context<Self>) {
+        self.panels.clear();
+        self.panel_group
+            .update(cx, |view, cx| view.remove_all_children(window, cx));
+    }
+
+    /// Change the axis of the stack panel.
+    pub(super) fn set_axis(&mut self, axis: Axis, window: &mut Window, cx: &mut Context<Self>) {
+        self.axis = axis;
+        self.panel_group
+            .update(cx, |view, cx| view.set_axis(axis, window, cx));
+        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()
+            .child(self.panel_group.clone())
+    }
+}

crates/dock/src/tab_panel.rs

@@ -0,0 +1,983 @@
+use std::sync::Arc;
+
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    div, px, rems, App, AppContext, Context, Corner, DefiniteLength, DismissEvent, DragMoveEvent,
+    Empty, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement as _, IntoElement,
+    MouseButton, ParentElement, Pixels, Render, ScrollHandle, SharedString,
+    StatefulInteractiveElement, Styled, WeakEntity, Window,
+};
+use theme::ActiveTheme;
+use ui::button::{Button, ButtonVariants as _};
+use ui::popup_menu::{PopupMenu, PopupMenuExt};
+use ui::tab::tab_bar::TabBar;
+use ui::tab::Tab;
+use ui::{h_flex, v_flex, AxisExt, IconName, Placement, Selectable, Sizable, StyledExt};
+
+use crate::panel::{Panel, PanelView};
+use crate::stack_panel::StackPanel;
+use crate::{ClosePanel, DockArea, PanelEvent, PanelStyle, ToggleZoom};
+
+#[derive(Clone)]
+struct TabState {
+    closable: bool,
+    zoomable: bool,
+    draggable: bool,
+    droppable: bool,
+    active_panel: Option<Arc<dyn PanelView>>,
+}
+
+#[derive(Clone)]
+pub(crate) struct DragPanel {
+    pub(crate) panel: Arc<dyn PanelView>,
+    pub(crate) tab_panel: Entity<TabPanel>,
+}
+
+impl DragPanel {
+    pub(crate) fn new(panel: Arc<dyn PanelView>, tab_panel: Entity<TabPanel>) -> Self {
+        Self { panel, tab_panel }
+    }
+}
+
+impl Render for DragPanel {
+    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        div()
+            .id("drag-panel")
+            .cursor_grab()
+            .py_1()
+            .px_2()
+            .w_24()
+            .flex()
+            .items_center()
+            .justify_center()
+            .overflow_hidden()
+            .whitespace_nowrap()
+            .rounded(cx.theme().radius_lg)
+            .text_xs()
+            .when(cx.theme().shadow, |this| this.shadow_lg())
+            .bg(cx.theme().background)
+            .text_color(cx.theme().text_accent)
+            .child(self.panel.title(cx))
+    }
+}
+
+pub struct TabPanel {
+    focus_handle: FocusHandle,
+    dock_area: WeakEntity<DockArea>,
+    /// The stock_panel can be None, if is None, that means the panels can't be split or move
+    stack_panel: Option<WeakEntity<StackPanel>>,
+    pub(crate) panels: Vec<Arc<dyn PanelView>>,
+    pub(crate) active_ix: usize,
+    /// If this is true, the Panel closeable will follow the active panel's closeable,
+    /// otherwise this TabPanel will not able to close
+    pub(crate) closable: bool,
+    tab_bar_scroll_handle: ScrollHandle,
+    is_zoomed: bool,
+    is_collapsed: bool,
+    /// When drag move, will get the placement of the panel to be split
+    will_split_placement: Option<Placement>,
+}
+
+impl Panel for TabPanel {
+    fn panel_id(&self) -> SharedString {
+        "TabPanel".into()
+    }
+
+    fn title(&self, cx: &App) -> gpui::AnyElement {
+        self.active_panel(cx)
+            .map(|panel| panel.title(cx))
+            .unwrap_or("Empty Tab".into_any_element())
+    }
+
+    fn closable(&self, cx: &App) -> bool {
+        if !self.closable {
+            return false;
+        }
+
+        self.active_panel(cx)
+            .map(|panel| panel.closable(cx))
+            .unwrap_or(true)
+    }
+
+    fn zoomable(&self, cx: &App) -> bool {
+        self.active_panel(cx)
+            .map(|panel| panel.zoomable(cx))
+            .unwrap_or(false)
+    }
+
+    fn visible(&self, cx: &App) -> bool {
+        self.visible_panels(cx).next().is_some()
+    }
+
+    fn popup_menu(&self, menu: PopupMenu, cx: &App) -> PopupMenu {
+        if let Some(panel) = self.active_panel(cx) {
+            panel.popup_menu(menu, cx)
+        } else {
+            menu
+        }
+    }
+
+    fn toolbar_buttons(&self, window: &Window, cx: &App) -> Vec<Button> {
+        if let Some(panel) = self.active_panel(cx) {
+            panel.toolbar_buttons(window, cx)
+        } else {
+            vec![]
+        }
+    }
+}
+
+impl TabPanel {
+    pub fn new(
+        stack_panel: Option<WeakEntity<StackPanel>>,
+        dock_area: WeakEntity<DockArea>,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> Self {
+        Self {
+            focus_handle: cx.focus_handle(),
+            dock_area,
+            stack_panel,
+            panels: Vec::new(),
+            active_ix: 0,
+            tab_bar_scroll_handle: ScrollHandle::new(),
+            will_split_placement: None,
+            is_zoomed: false,
+            is_collapsed: false,
+            closable: true,
+        }
+    }
+
+    pub(super) fn set_parent(&mut self, view: WeakEntity<StackPanel>) {
+        self.stack_panel = Some(view);
+    }
+
+    /// Return current active_panel view
+    pub fn active_panel(&self, cx: &App) -> Option<Arc<dyn PanelView>> {
+        let panel = self.panels.get(self.active_ix);
+
+        if let Some(panel) = panel {
+            if panel.visible(cx) {
+                Some(panel.clone())
+            } else {
+                // Return the first visible panel
+                self.visible_panels(cx).next()
+            }
+        } else {
+            None
+        }
+    }
+
+    fn set_active_ix(&mut self, ix: usize, window: &mut Window, cx: &mut Context<Self>) {
+        if ix == self.active_ix {
+            self.focus_active_panel(window, cx);
+            return;
+        }
+
+        let last_active_ix = self.active_ix;
+
+        self.active_ix = ix;
+        self.tab_bar_scroll_handle.scroll_to_item(ix);
+        self.focus_active_panel(window, cx);
+
+        // Sync the active state to all panels
+        cx.spawn(async move |view, cx| {
+            view.update(cx, |view, cx| {
+                if let Some(last_active) = view.panels.get(last_active_ix) {
+                    last_active.set_active(false, cx);
+                }
+                if let Some(active) = view.panels.get(view.active_ix) {
+                    active.set_active(true, cx);
+                }
+            })
+            .ok();
+        })
+        .detach();
+
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    /// Add a panel to the end of the tabs
+    pub fn add_panel(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.add_panel_with_active(panel, true, window, cx);
+    }
+
+    fn add_panel_with_active(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        active: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if self
+            .panels
+            .iter()
+            .any(|p| p.panel_id(cx) == panel.panel_id(cx))
+        {
+            // Set the active panel to the matched panel
+            if active {
+                if let Some(ix) = self
+                    .panels
+                    .iter()
+                    .position(|p| p.panel_id(cx) == panel.panel_id(cx))
+                {
+                    self.set_active_ix(ix, window, cx);
+                }
+            }
+
+            return;
+        }
+
+        self.panels.push(panel);
+
+        // Set the active panel to the new panel
+        if active {
+            self.set_active_ix(self.panels.len() - 1, window, cx);
+        }
+
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    /// Add panel to try to split
+    pub fn add_panel_at(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        placement: Placement,
+        size: Option<Pixels>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        cx.spawn_in(window, async move |view, cx| {
+            cx.update(|window, cx| {
+                view.update(cx, |view, cx| {
+                    view.will_split_placement = Some(placement);
+                    view.split_panel(panel, placement, size, window, cx)
+                })
+                .ok()
+            })
+            .ok()
+        })
+        .detach();
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    fn insert_panel_at(
+        &mut self,
+        panel: Arc<dyn PanelView>,
+        ix: usize,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if self
+            .panels
+            .iter()
+            .any(|p| p.view().entity_id() == panel.view().entity_id())
+        {
+            return;
+        }
+
+        self.panels.insert(ix, panel);
+        self.set_active_ix(ix, window, cx);
+        cx.emit(PanelEvent::LayoutChanged);
+        cx.notify();
+    }
+
+    /// Remove a panel from the tab panel
+    pub fn remove_panel(
+        &mut self,
+        panel: &Arc<dyn PanelView>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.detach_panel(panel, window, cx);
+        self.remove_self_if_empty(window, cx);
+
+        cx.emit(PanelEvent::ZoomOut);
+        cx.emit(PanelEvent::LayoutChanged);
+    }
+
+    fn detach_panel(
+        &mut self,
+        panel: &Arc<dyn PanelView>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let panel_view = panel.view();
+        self.panels.retain(|p| p.view() != panel_view);
+
+        if self.active_ix >= self.panels.len() {
+            self.set_active_ix(self.panels.len().saturating_sub(1), window, cx)
+        }
+    }
+
+    /// Check to remove self from the parent StackPanel, if there is no panel left
+    fn remove_self_if_empty(&self, window: &mut Window, cx: &mut Context<Self>) {
+        if !self.panels.is_empty() {
+            return;
+        }
+
+        let tab_view = cx.entity().clone();
+
+        if let Some(stack_panel) = self.stack_panel.as_ref() {
+            _ = stack_panel.update(cx, |view, cx| {
+                view.remove_panel(Arc::new(tab_view), window, cx);
+            });
+        }
+    }
+
+    pub(super) fn set_collapsed(
+        &mut self,
+        collapsed: bool,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        self.is_collapsed = collapsed;
+        cx.notify();
+    }
+
+    fn is_locked(&self, cx: &App) -> bool {
+        let Some(dock_area) = self.dock_area.upgrade() else {
+            return true;
+        };
+
+        if dock_area.read(cx).is_locked() {
+            return true;
+        }
+
+        if self.is_zoomed {
+            return true;
+        }
+
+        self.stack_panel.is_none()
+    }
+
+    /// Return true if self or parent only have last panel.
+    fn is_last_panel(&self, cx: &App) -> bool {
+        if let Some(parent) = &self.stack_panel {
+            if let Some(stack_panel) = parent.upgrade() {
+                if !stack_panel.read(cx).is_last_panel(cx) {
+                    return false;
+                }
+            }
+        }
+
+        self.panels.len() <= 1
+    }
+
+    /// Return all visible panels
+    fn visible_panels<'a>(&'a self, cx: &'a App) -> impl Iterator<Item = Arc<dyn PanelView>> + 'a {
+        self.panels.iter().filter_map(|panel| {
+            if panel.visible(cx) {
+                Some(panel.clone())
+            } else {
+                None
+            }
+        })
+    }
+
+    /// Return all panel ids
+    pub fn panel_ids<'a>(&'a self, cx: &'a App) -> Vec<SharedString> {
+        self.panels.iter().map(|panel| panel.panel_id(cx)).collect()
+    }
+
+    /// Return true if the tab panel is draggable.
+    ///
+    /// E.g. if the parent and self only have one panel, it is not draggable.
+    fn draggable(&self, cx: &App) -> bool {
+        !self.is_locked(cx) && !self.is_last_panel(cx)
+    }
+
+    /// Return true if the tab panel is droppable.
+    ///
+    /// E.g. if the tab panel is locked, it is not droppable.
+    fn droppable(&self, cx: &App) -> bool {
+        !self.is_locked(cx)
+    }
+
+    fn render_toolbar(
+        &self,
+        state: &TabState,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> impl IntoElement {
+        let is_zoomed = self.is_zoomed && state.zoomable;
+        let view = cx.entity().clone();
+        let build_popup_menu = move |this, cx: &App| view.read(cx).popup_menu(this, cx);
+        let toolbar = self.toolbar_buttons(window, cx);
+        let has_toolbar = !toolbar.is_empty();
+
+        h_flex()
+            .p_0p5()
+            .gap_1()
+            .occlude()
+            .rounded_full()
+            .children(toolbar.into_iter().map(|btn| btn.small().ghost().rounded()))
+            .when(self.is_zoomed, |this| {
+                this.child(
+                    Button::new("zoom")
+                        .icon(IconName::Zoom)
+                        .small()
+                        .ghost()
+                        .tooltip("Zoom Out")
+                        .on_click(cx.listener(|view, _, window, cx| {
+                            view.on_action_toggle_zoom(&ToggleZoom, window, cx)
+                        })),
+                )
+            })
+            .when(has_toolbar, |this| {
+                this.bg(cx.theme().surface_background)
+                    .child(div().flex_shrink_0().h_4().w_px().bg(cx.theme().border))
+            })
+            .child(
+                Button::new("menu")
+                    .icon(IconName::Ellipsis)
+                    .small()
+                    .ghost()
+                    .rounded()
+                    .popup_menu({
+                        let zoomable = state.zoomable;
+                        let closable = state.closable;
+
+                        move |this, _window, cx| {
+                            build_popup_menu(this, cx)
+                                .when(zoomable, |this| {
+                                    let name = if is_zoomed { "Zoom Out" } else { "Zoom In" };
+                                    this.separator().menu(name, Box::new(ToggleZoom))
+                                })
+                                .when(closable, |this| {
+                                    this.separator().menu("Close", Box::new(ClosePanel))
+                                })
+                        }
+                    })
+                    .anchor(Corner::TopRight),
+            )
+    }
+
+    fn render_title_bar(
+        &self,
+        state: &TabState,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> impl IntoElement {
+        let view = cx.entity().clone();
+
+        let Some(dock_area) = self.dock_area.upgrade() else {
+            return div().into_any_element();
+        };
+
+        let panel_style = dock_area.read(cx).panel_style;
+
+        if self.panels.len() == 1 && panel_style == PanelStyle::Default {
+            let panel = self.panels.first().unwrap();
+
+            if !panel.visible(cx) {
+                return div().into_any_element();
+            }
+
+            return h_flex()
+                .justify_between()
+                .items_center()
+                .line_height(rems(1.0))
+                .h(px(30.))
+                .py_2()
+                .px_3()
+                .child(
+                    div()
+                        .id("tab")
+                        .flex_1()
+                        .min_w_16()
+                        .overflow_hidden()
+                        .whitespace_nowrap()
+                        .child(
+                            div()
+                                .w_full()
+                                .text_ellipsis()
+                                .text_xs()
+                                .child(panel.title(cx)),
+                        )
+                        .when(state.draggable, |this| {
+                            this.on_drag(
+                                DragPanel {
+                                    panel: panel.clone(),
+                                    tab_panel: view,
+                                },
+                                |drag, _, _, cx| {
+                                    cx.stop_propagation();
+                                    cx.new(|_| drag.clone())
+                                },
+                            )
+                        }),
+                )
+                .child(
+                    h_flex()
+                        .flex_shrink_0()
+                        .ml_1()
+                        .gap_1()
+                        .child(self.render_toolbar(state, window, cx)),
+                )
+                .into_any_element();
+        }
+
+        let tabs_count = self.panels.len();
+
+        TabBar::new("tab-bar")
+            .track_scroll(self.tab_bar_scroll_handle.clone())
+            .children(self.panels.iter().enumerate().filter_map(|(ix, panel)| {
+                let mut active = state.active_panel.as_ref() == Some(panel);
+                let disabled = self.is_collapsed;
+
+                if !panel.visible(cx) {
+                    return None;
+                }
+
+                // Always not show active tab style, if the panel is collapsed
+                if self.is_collapsed {
+                    active = false;
+                }
+
+                Some(
+                    Tab::new(("tab", ix), panel.title(cx))
+                        .py_2()
+                        .selected(active)
+                        .disabled(disabled)
+                        .when(!disabled, |this| {
+                            this.on_mouse_down(
+                                MouseButton::Middle,
+                                cx.listener({
+                                    let panel = panel.clone();
+                                    move |view, _, window, cx| {
+                                        view.remove_panel(&panel, window, cx);
+                                    }
+                                }),
+                            )
+                            .on_click(cx.listener(move |view, _, window, cx| {
+                                view.set_active_ix(ix, window, cx);
+                            }))
+                            .when(state.draggable, |this| {
+                                this.on_drag(
+                                    DragPanel::new(panel.clone(), view.clone()),
+                                    |drag, _, _, cx| {
+                                        cx.stop_propagation();
+                                        cx.new(|_| drag.clone())
+                                    },
+                                )
+                            })
+                            .when(state.droppable, |this| {
+                                this.drag_over::<DragPanel>(|this, _, _, cx| {
+                                    this.rounded_l_none()
+                                        .border_l_2()
+                                        .border_r_0()
+                                        .border_color(cx.theme().border)
+                                })
+                                .on_drop(cx.listener(
+                                    move |this, drag: &DragPanel, window, cx| {
+                                        this.will_split_placement = None;
+                                        this.on_drop(drag, Some(ix), true, window, cx)
+                                    },
+                                ))
+                            })
+                        }),
+                )
+            }))
+            .child(
+                // empty space to allow move to last tab right
+                div()
+                    .id("tab-bar-empty-space")
+                    .h_full()
+                    .flex_grow()
+                    .min_w_16()
+                    .rounded(cx.theme().radius)
+                    .when(state.droppable, |this| {
+                        this.drag_over::<DragPanel>(|this, _, _, cx| {
+                            this.bg(cx.theme().surface_background)
+                        })
+                        .on_drop(cx.listener(
+                            move |this, drag: &DragPanel, window, cx| {
+                                this.will_split_placement = None;
+
+                                let ix = if drag.tab_panel == view {
+                                    Some(tabs_count - 1)
+                                } else {
+                                    None
+                                };
+
+                                this.on_drop(drag, ix, false, window, cx)
+                            },
+                        ))
+                    }),
+            )
+            .suffix(
+                h_flex()
+                    .items_center()
+                    .top_0()
+                    .right_0()
+                    .h_full()
+                    .px_2()
+                    .gap_1()
+                    .child(self.render_toolbar(state, window, cx)),
+            )
+            .into_any_element()
+    }
+
+    fn render_active_panel(
+        &self,
+        state: &TabState,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) -> impl IntoElement {
+        if self.is_collapsed {
+            return Empty {}.into_any_element();
+        }
+
+        let Some(active_panel) = state.active_panel.as_ref() else {
+            return Empty {}.into_any_element();
+        };
+
+        v_flex()
+            .id("tab-content")
+            .group("")
+            .overflow_hidden()
+            .flex_1()
+            .child(
+                div()
+                    .size_full()
+                    .bg(cx.theme().panel_background)
+                    .overflow_hidden()
+                    .child(
+                        active_panel
+                            .view()
+                            .cached(gpui::StyleRefinement::default().v_flex().size_full()),
+                    ),
+            )
+            .when(state.droppable, |this| {
+                this.on_drag_move(cx.listener(Self::on_panel_drag_move))
+                    .child(
+                        div()
+                            .invisible()
+                            .absolute()
+                            .child(
+                                div()
+                                    .rounded(cx.theme().radius_lg)
+                                    .border_1()
+                                    .border_color(cx.theme().element_disabled)
+                                    .bg(cx.theme().drop_target_background)
+                                    .size_full(),
+                            )
+                            .map(|this| match self.will_split_placement {
+                                Some(placement) => {
+                                    let size = DefiniteLength::Fraction(0.35);
+                                    match placement {
+                                        Placement::Left => this.left_0().top_0().bottom_0().w(size),
+                                        Placement::Right => {
+                                            this.right_0().top_0().bottom_0().w(size)
+                                        }
+                                        Placement::Top => this.top_0().left_0().right_0().h(size),
+                                        Placement::Bottom => {
+                                            this.bottom_0().left_0().right_0().h(size)
+                                        }
+                                    }
+                                }
+                                None => this.top_0().left_0().size_full(),
+                            })
+                            .group_drag_over::<DragPanel>("", |this| this.visible())
+                            .on_drop(cx.listener(|this, drag: &DragPanel, window, cx| {
+                                this.on_drop(drag, None, true, window, cx)
+                            })),
+                    )
+            })
+            .into_any_element()
+    }
+
+    /// Calculate the split direction based on the current mouse position
+    fn on_panel_drag_move(
+        &mut self,
+        drag: &DragMoveEvent<DragPanel>,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let bounds = drag.bounds;
+        let position = drag.event.position;
+
+        // Check the mouse position to determine the split direction
+        if position.x < bounds.left() + bounds.size.width * 0.35 {
+            self.will_split_placement = Some(Placement::Left);
+        } else if position.x > bounds.left() + bounds.size.width * 0.65 {
+            self.will_split_placement = Some(Placement::Right);
+        } else if position.y < bounds.top() + bounds.size.height * 0.35 {
+            self.will_split_placement = Some(Placement::Top);
+        } else if position.y > bounds.top() + bounds.size.height * 0.65 {
+            self.will_split_placement = Some(Placement::Bottom);
+        } else {
+            // center to merge into the current tab
+            self.will_split_placement = None;
+        }
+
+        cx.notify();
+    }
+
+    /// Handle the drop event when dragging a panel
+    ///
+    /// - `active` - When true, the panel will be active after the drop
+    fn on_drop(
+        &mut self,
+        drag: &DragPanel,
+        ix: Option<usize>,
+        active: bool,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let panel = drag.panel.clone();
+        let is_same_tab = drag.tab_panel == cx.entity();
+
+        // If target is same tab, and it is only one panel, do nothing.
+        if is_same_tab
+            && ix.is_none()
+            && (self.will_split_placement.is_none() || self.panels.len() == 1)
+        {
+            return;
+        }
+
+        // Here is looks like remove_panel on a same item, but it difference.
+        //
+        // We must to split it to remove_panel, unless it will be crash by error:
+        // Cannot update ui::dock::tab_panel::TabPanel while it is already being updated
+        if is_same_tab {
+            self.detach_panel(&panel, window, cx);
+        } else {
+            drag.tab_panel.update(cx, |view, cx| {
+                view.detach_panel(&panel, window, cx);
+                view.remove_self_if_empty(window, cx);
+            });
+        }
+
+        // Insert into new tabs
+        if let Some(placement) = self.will_split_placement {
+            self.split_panel(panel, placement, None, window, cx);
+        } else if let Some(ix) = ix {
+            self.insert_panel_at(panel, ix, window, cx)
+        } else {
+            self.add_panel_with_active(panel, active, window, cx)
+        }
+
+        self.remove_self_if_empty(window, cx);
+        cx.emit(PanelEvent::LayoutChanged);
+    }
+
+    /// Add panel with split placement
+    fn split_panel(
+        &self,
+        panel: Arc<dyn PanelView>,
+        placement: Placement,
+        size: Option<Pixels>,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        let dock_area = self.dock_area.clone();
+        // wrap the panel in a TabPanel
+        let new_tab_panel = cx.new(|cx| Self::new(None, dock_area.clone(), window, cx));
+        new_tab_panel.update(cx, |view, cx| {
+            view.add_panel(panel, window, cx);
+        });
+
+        let stack_panel = match self.stack_panel.as_ref().and_then(|panel| panel.upgrade()) {
+            Some(panel) => panel,
+            None => return,
+        };
+
+        let parent_axis = stack_panel.read(cx).axis;
+
+        let ix = stack_panel
+            .read(cx)
+            .index_of_panel(Arc::new(cx.entity().clone()))
+            .unwrap_or_default();
+
+        if parent_axis.is_vertical() && placement.is_vertical() {
+            stack_panel.update(cx, |view, cx| {
+                view.insert_panel_at(
+                    Arc::new(new_tab_panel),
+                    ix,
+                    placement,
+                    size,
+                    dock_area.clone(),
+                    window,
+                    cx,
+                );
+            });
+        } else if parent_axis.is_horizontal() && placement.is_horizontal() {
+            stack_panel.update(cx, |view, cx| {
+                view.insert_panel_at(
+                    Arc::new(new_tab_panel),
+                    ix,
+                    placement,
+                    size,
+                    dock_area.clone(),
+                    window,
+                    cx,
+                );
+            });
+        } else {
+            // 1. Create new StackPanel with new axis
+            // 2. Move cx.entity() from parent StackPanel to the new StackPanel
+            // 3. Add the new TabPanel to the new StackPanel at the correct index
+            // 4. Add new StackPanel to the parent StackPanel at the correct index
+            let tab_panel = cx.entity().clone();
+
+            // Try to use the old stack panel, not just create a new one, to avoid too many nested stack panels
+            let new_stack_panel = if stack_panel.read(cx).panels_len() <= 1 {
+                stack_panel.update(cx, |view, cx| {
+                    view.remove_all_panels(window, cx);
+                    view.set_axis(placement.axis(), window, cx);
+                });
+                stack_panel.clone()
+            } else {
+                cx.new(|cx| {
+                    let mut panel = StackPanel::new(placement.axis(), window, cx);
+                    panel.parent = Some(stack_panel.downgrade());
+                    panel
+                })
+            };
+
+            new_stack_panel.update(cx, |view, cx| match placement {
+                Placement::Left | Placement::Top => {
+                    view.add_panel(Arc::new(new_tab_panel), size, dock_area.clone(), window, cx);
+                    view.add_panel(
+                        Arc::new(tab_panel.clone()),
+                        None,
+                        dock_area.clone(),
+                        window,
+                        cx,
+                    );
+                }
+                Placement::Right | Placement::Bottom => {
+                    view.add_panel(
+                        Arc::new(tab_panel.clone()),
+                        None,
+                        dock_area.clone(),
+                        window,
+                        cx,
+                    );
+                    view.add_panel(Arc::new(new_tab_panel), size, dock_area.clone(), window, cx);
+                }
+            });
+
+            if stack_panel != new_stack_panel {
+                stack_panel.update(cx, |view, cx| {
+                    view.replace_panel(
+                        Arc::new(tab_panel.clone()),
+                        new_stack_panel.clone(),
+                        window,
+                        cx,
+                    );
+                });
+            }
+
+            cx.spawn_in(window, async move |_, cx| {
+                cx.update(|window, cx| {
+                    tab_panel.update(cx, |view, cx| view.remove_self_if_empty(window, cx))
+                })
+            })
+            .detach()
+        }
+
+        cx.emit(PanelEvent::LayoutChanged);
+    }
+
+    fn focus_active_panel(&self, window: &mut Window, cx: &mut Context<Self>) {
+        if let Some(active_panel) = self.active_panel(cx) {
+            window.focus(&active_panel.focus_handle(cx), cx);
+        }
+    }
+
+    fn on_action_toggle_zoom(
+        &mut self,
+        _action: &ToggleZoom,
+        _window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if !self.zoomable(cx) {
+            return;
+        }
+
+        if !self.is_zoomed {
+            cx.emit(PanelEvent::ZoomIn)
+        } else {
+            cx.emit(PanelEvent::ZoomOut)
+        }
+
+        self.is_zoomed = !self.is_zoomed;
+
+        cx.spawn({
+            let is_zoomed = self.is_zoomed;
+            async move |view, cx| {
+                view.update(cx, |view, cx| {
+                    view.set_zoomed(is_zoomed, cx);
+                })
+                .ok();
+            }
+        })
+        .detach();
+    }
+
+    fn on_action_close_panel(
+        &mut self,
+        _: &ClosePanel,
+        window: &mut Window,
+        cx: &mut Context<Self>,
+    ) {
+        if let Some(panel) = self.active_panel(cx) {
+            self.remove_panel(&panel, window, cx);
+        }
+    }
+}
+
+impl Focusable for TabPanel {
+    fn focus_handle(&self, cx: &App) -> gpui::FocusHandle {
+        if let Some(active_panel) = self.active_panel(cx) {
+            active_panel.focus_handle(cx)
+        } else {
+            self.focus_handle.clone()
+        }
+    }
+}
+
+impl EventEmitter<DismissEvent> for TabPanel {}
+
+impl EventEmitter<PanelEvent> for TabPanel {}
+
+impl Render for TabPanel {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl gpui::IntoElement {
+        let focus_handle = self.focus_handle(cx);
+        let active_panel = self.active_panel(cx);
+
+        let mut state = TabState {
+            closable: self.closable(cx),
+            draggable: self.draggable(cx),
+            droppable: self.droppable(cx),
+            zoomable: self.zoomable(cx),
+            active_panel,
+        };
+
+        if !state.draggable {
+            state.closable = false;
+        }
+
+        v_flex()
+            .when(!self.is_collapsed, |this| {
+                this.on_action(cx.listener(Self::on_action_toggle_zoom))
+                    .on_action(cx.listener(Self::on_action_close_panel))
+            })
+            .id("tab-panel")
+            .track_focus(&focus_handle)
+            .size_full()
+            .overflow_hidden()
+            .child(self.render_title_bar(&state, window, cx))
+            .child(self.render_active_panel(&state, window, cx))
+    }
+}