add dock layout component

2026-11-02 16:24:20 +07:00
parent 9bce2820cc
commit 545d0986ed
11 changed files with 1914 additions and 67 deletions
@@ -6,6 +6,7 @@ description = "Data-heavy GPUI components: lists, trees, tabs, sidebars — one

 [dependencies]
 gpui = { workspace = true }
+gpui-native-core = { workspace = true, optional = true }
 gpui-native-icons = { workspace = true }
 gpui-native-theme = { workspace = true }
 gpui-native-utils = { workspace = true }
@@ -18,5 +19,5 @@ default = ["full"]
 full = ["list", "sidebar", "tabs", "tree"]
 list = []
 sidebar = []
-tabs = []
+tabs = ["dep:gpui-native-core", "gpui-native-core/button"]
 tree = []
@@ -2,23 +2,41 @@ use std::rc::Rc;

 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    AnyElement, App, ElementId, InteractiveElement as _, IntoElement, KeyDownEvent,
-    ParentElement as _, RenderOnce, Role, SharedString, StatefulInteractiveElement as _,
+    AnyElement, App, Div, ElementId, InteractiveElement as _, IntoElement, KeyDownEvent,
+    ParentElement as _, RenderOnce, Role, SharedString, Stateful, StatefulInteractiveElement as _,
    Styled as _, Window, div,
 };
+use gpui_native_core::button::{Button, ButtonVariant};
+use gpui_native_core::common::Sizable as _;
 use gpui_native_icons::{IconRole, icon};
-use gpui_native_theme::ActiveTheme as _;
+use gpui_native_theme::{ActiveTheme as _, Size};
 use gpui_native_utils::adjacent_selectable;

 /// The change reporter, fired with the next selected tab by pointer and keys.
 type ChangeHandler = Rc<dyn Fn(usize, &mut Window, &mut App)>;
+/// The close reporter, fired with the tab's index by its close control.
+type CloseHandler = Rc<dyn Fn(usize, &mut Window, &mut App)>;
+/// Decorates the rendered tab, e.g. to attach a drag payload.
+type TabWrap = Box<dyn FnOnce(Stateful<Div>) -> AnyElement>;
 type TabsFn = Box<dyn Fn(&mut Window, &mut App) -> Vec<Tab>>;

+/// The visual language of a [`Tabs`] strip.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum TabsVariant {
+    #[default]
+    Underline,
+    Pill,
+}
+
 /// One tab of a [`Tabs`] strip.
 pub struct Tab {
    label: SharedString,
    icon: Option<IconRole>,
+    lead: Option<AnyElement>,
+    busy: bool,
    disabled: bool,
+    closeable: bool,
+    wrap: Option<TabWrap>,
 }

 impl Tab {
@@ -30,7 +48,11 @@ impl Tab {
        Self {
            label: label.into(),
            icon: None,
+            lead: None,
+            busy: false,
            disabled: false,
+            closeable: false,
+            wrap: None,
        }
    }

@@ -40,11 +62,41 @@ impl Tab {
        self
    }

+    /// Sets the leading element.
+    pub fn lead<E>(mut self, lead: E) -> Self
+    where
+        E: IntoElement + 'static,
+    {
+        self.lead = Some(lead.into_any_element());
+        self
+    }
+
+    /// Shows the loading slot.
+    pub fn busy(mut self, busy: bool) -> Self {
+        self.busy = busy;
+        self
+    }
+
    /// Renders the tab dimmed; clicks and keyboard skip it.
    pub fn disabled(mut self, disabled: bool) -> Self {
        self.disabled = disabled;
        self
    }
+
+    /// Shows a close control that reports the tab through [`Tabs::on_close`].
+    pub fn closeable(mut self, closeable: bool) -> Self {
+        self.closeable = closeable;
+        self
+    }
+
+    /// Hands the rendered tab through `wrap`, e.g. to attach a drag payload.
+    pub fn wrap<F>(mut self, wrap: F) -> Self
+    where
+        F: FnOnce(Stateful<Div>) -> AnyElement + 'static,
+    {
+        self.wrap = Some(Box::new(wrap));
+        self
+    }
 }

 /// A tab strip.
@@ -52,8 +104,10 @@ impl Tab {
 pub struct Tabs {
    id: ElementId,
    selected: usize,
+    variant: TabsVariant,
    a11y_label: Option<SharedString>,
    on_change: Option<ChangeHandler>,
+    on_close: Option<CloseHandler>,
    tabs: Option<TabsFn>,
 }

@@ -66,8 +120,10 @@ impl Tabs {
        Self {
            id: id.into(),
            selected: 0,
+            variant: TabsVariant::default(),
            a11y_label: None,
            on_change: None,
+            on_close: None,
            tabs: None,
        }
    }
@@ -78,6 +134,12 @@ impl Tabs {
        self
    }

+    /// Sets the strip's visual language.
+    pub fn variant(mut self, variant: TabsVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
    /// Reports the next selected tab, from clicks and keys alike.
    pub fn on_change<F>(mut self, handler: F) -> Self
    where
@@ -87,6 +149,15 @@ impl Tabs {
        self
    }

+    /// Reports a closed tab by index.
+    pub fn on_close<F>(mut self, handler: F) -> Self
+    where
+        F: Fn(usize, &mut Window, &mut App) + 'static,
+    {
+        self.on_close = Some(Rc::new(handler));
+        self
+    }
+
    /// Sets the tabs, built fresh each render.
    pub fn tabs<F>(mut self, tabs: F) -> Self
    where
@@ -129,27 +200,27 @@ impl RenderOnce for Tabs {
            .unwrap_or_else(|| SharedString::from(self.id.to_string()));

        let strip: Vec<AnyElement> = tabs
-            .iter()
+            .into_iter()
            .enumerate()
            .map(|(index, tab)| {
                render_tab(
+                    &self.id,
                    cx,
                    tab,
                    index,
                    self.selected == index,
                    self.selected,
+                    self.variant,
                    &self.on_change,
+                    &self.on_close,
                    &focus,
                )
            })
            .collect();

-        div()
-            .id(self.id)
+        let mut strip_root = div()
+            .id(self.id.clone())
            .flex()
-            .gap_1()
-            .border_b_1()
-            .border_color(theme.colors.border)
            .text_size(theme.sizes.medium.text_size)
            .track_focus(&focus)
            .focusable()
@@ -175,62 +246,121 @@ impl RenderOnce for Tabs {
                    }
                    cx.stop_propagation();
                }
-            })
-            .children(strip)
+            });
+
+        strip_root = match self.variant {
+            TabsVariant::Underline => strip_root
+                .gap_1()
+                .border_b_1()
+                .border_color(theme.colors.border),
+            TabsVariant::Pill => strip_root.items_center().gap_1(),
+        };
+
+        strip_root.children(strip)
    }
 }

+#[allow(clippy::too_many_arguments)]
 fn render_tab(
+    tabs_id: &ElementId,
    cx: &App,
-    tab: &Tab,
+    tab: Tab,
    index: usize,
    selected: bool,
    selected_index: usize,
+    variant: TabsVariant,
    on_change: &Option<ChangeHandler>,
+    on_close: &Option<CloseHandler>,
    focus: &gpui::FocusHandle,
 ) -> AnyElement {
+    let mut tab = tab;
+
    let theme = cx.theme();
-    let label_color = if tab.disabled {
-        theme.colors.muted_foreground
-    } else if selected {
-        theme.ramps.primary.base
-    } else {
-        theme.colors.foreground
+    let metrics = theme.sizes.resolve(Size::default());
+
+    let label_color = match variant {
+        TabsVariant::Underline => {
+            if tab.disabled {
+                theme.colors.muted_foreground
+            } else if selected {
+                theme.ramps.primary.base
+            } else {
+                theme.colors.foreground
+            }
+        }
+        TabsVariant::Pill => {
+            if tab.disabled {
+                theme.colors.muted_foreground
+            } else {
+                theme.colors.foreground
+            }
+        }
    };

    let mut strip_tab = div()
        .id(("tab", index))
+        .debug_selector({
+            let id = format!("{tabs_id}-tab-{}", tab.label);
+            move || id
+        })
        .flex()
        .items_center()
        .gap_1p5()
-        .px_2()
-        .py_1()
-        .rounded_tl(theme.radius.sm)
-        .rounded_tr(theme.radius.sm)
        .role(Role::Tab)
        .aria_selected(selected)
        .text_color(label_color)
-        .when(selected, |strip_tab| {
-            strip_tab
-                .border_b_2()
-                .border_color(theme.ramps.primary.base)
-        })
        .when(!tab.disabled && !selected, |strip_tab| {
            strip_tab.hover(|strip_tab| strip_tab.bg(theme.colors.muted))
-        })
-        .child(
+        });
+
+    strip_tab = match variant {
+        TabsVariant::Underline => strip_tab
+            .px_2()
+            .py_1()
+            .rounded_tl(theme.radius.sm)
+            .rounded_tr(theme.radius.sm)
+            .when(selected, |strip_tab| {
+                strip_tab
+                    .border_b_2()
+                    .border_color(theme.ramps.primary.base)
+            }),
+        TabsVariant::Pill => strip_tab
+            .h(metrics.control_height)
+            .px(metrics.padding_x)
+            .rounded(theme.radius.control)
+            .when(selected, |strip_tab| {
+                strip_tab
+                    .bg(theme.colors.muted)
+                    .font_weight(gpui::FontWeight::MEDIUM)
+            }),
+    };
+
+    let lead = tab.lead.take();
+    strip_tab = match lead {
+        Some(lead) => strip_tab.child(lead),
+        None => strip_tab.child(
            div()
                .flex_none()
-                .pb_0p5()
-                .when_some(tab.icon, |strip_tab, role| {
-                    strip_tab.child(
-                        icon(role)
-                            .size(theme.sizes.medium.dense_icon_size)
-                            .color(label_color),
-                    )
+                .when(variant == TabsVariant::Underline, |slot| slot.pb_0p5())
+                .when_some(tab.icon, |slot, role| {
+                    slot.child(icon(role).size(metrics.dense_icon_size).color(label_color))
                }),
-        )
-        .child(strip_tab_label(tab.label.clone(), selected, cx));
+        ),
+    };
+
+    strip_tab = strip_tab.child(strip_tab_label(&tab, selected, variant, cx));
+
+    if variant == TabsVariant::Pill {
+        strip_tab = strip_tab.child(div().flex_none().w(metrics.padding_x * 1.5));
+    }
+
+    if tab.busy && !tab.disabled {
+        strip_tab = strip_tab.child(busy_slot(cx));
+    }
+
+    if tab.closeable && on_close.is_some() && !tab.disabled {
+        strip_tab = strip_tab.child(render_tab_close(tabs_id, &tab, index, on_close));
+    }

    if !tab.disabled {
        strip_tab = strip_tab.cursor_pointer().on_click({
@@ -247,17 +377,77 @@ fn render_tab(
        });
    }

-    strip_tab.into_any_element()
+    match tab.wrap {
+        Some(wrap) => wrap(strip_tab),
+        None => strip_tab.into_any_element(),
+    }
 }

-fn strip_tab_label(label: SharedString, selected: bool, cx: &App) -> AnyElement {
-    let theme = cx.theme();
+fn render_tab_close(
+    tabs_id: &ElementId,
+    tab: &Tab,
+    index: usize,
+    on_close: &Option<CloseHandler>,
+) -> AnyElement {
+    // The wrapper carries the test selector; the button paints itself.
    div()
-        .text_color(if selected {
-            theme.ramps.primary.base
-        } else {
-            theme.colors.foreground
+        .id(("tab-close", index))
+        .debug_selector({
+            let id = format!("{tabs_id}-close-{}", tab.label);
+            move || id
        })
-        .child(label)
+        .flex_none()
+        .child(
+            Button::new(("tab-close-button", index))
+                .icon(IconRole::Close)
+                .variant(ButtonVariant::Ghost)
+                .small()
+                .tab_stop(false)
+                .accessibility_label(SharedString::from(format!("Close {}", tab.label)))
+                .on_click({
+                    let on_close = on_close.clone();
+                    move |_, window, cx| {
+                        cx.stop_propagation();
+                        if let Some(on_close) = &on_close {
+                            on_close(index, window, cx);
+                        }
+                    }
+                }),
+        )
+        .into_any_element()
+}
+
+fn strip_tab_label(tab: &Tab, selected: bool, variant: TabsVariant, cx: &App) -> AnyElement {
+    let theme = cx.theme();
+    let color = match variant {
+        TabsVariant::Underline => {
+            if selected {
+                theme.ramps.primary.base
+            } else {
+                theme.colors.foreground
+            }
+        }
+        TabsVariant::Pill => {
+            if tab.disabled {
+                theme.colors.muted_foreground
+            } else {
+                theme.colors.foreground
+            }
+        }
+    };
+    div()
+        .text_color(color)
+        .child(tab.label.clone())
+        .into_any_element()
+}
+
+fn busy_slot(cx: &App) -> AnyElement {
+    let theme = cx.theme();
+    div()
+        .flex_none()
+        .size(theme.sizes.medium.dense_icon_size)
+        .rounded(theme.radius.full)
+        .border_1()
+        .border_color(theme.colors.border)
        .into_any_element()
 }