chore: make the ui consistent (#19)

Reviewed-on: #19
Co-authored-by: Ren Amamiya <reya@lume.nu>
Co-committed-by: Ren Amamiya <reya@lume.nu>

crates/ui/src/tab/mod.rs

@@ -1,74 +1,557 @@
-use gpui::prelude::FluentBuilder;
-use gpui::{
-    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, MouseButton, ParentElement,
-    RenderOnce, StatefulInteractiveElement, Styled, Window,
-};
-use theme::{ActiveTheme, TABBAR_HEIGHT};
+use std::rc::Rc;
 
-use crate::{Selectable, Sizable, Size};
+use gpui::prelude::FluentBuilder as _;
+use gpui::{
+    AnyElement, App, ClickEvent, Div, Edges, Hsla, InteractiveElement, IntoElement, MouseButton,
+    ParentElement, Pixels, RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window,
+    div, px, relative,
+};
+use theme::ActiveTheme;
+
+use crate::{Icon, IconName, Selectable, Sizable, Size, StyledExt, h_flex};
 
 pub mod tab_bar;
 
+/// Tab variants.
+#[derive(Debug, Clone, Default, Copy, PartialEq, Eq, Hash)]
+pub enum TabVariant {
+    #[default]
+    Tab,
+    Outline,
+    Pill,
+    Segmented,
+    Underline,
+}
+
+impl TabVariant {
+    fn height(&self, size: Size) -> Pixels {
+        match size {
+            Size::XSmall => match self {
+                TabVariant::Underline => px(26.),
+                _ => px(20.),
+            },
+            Size::Small => match self {
+                TabVariant::Underline => px(30.),
+                _ => px(24.),
+            },
+            Size::Large => match self {
+                TabVariant::Underline => px(44.),
+                _ => px(36.),
+            },
+            _ => match self {
+                TabVariant::Underline => px(36.),
+                _ => px(32.),
+            },
+        }
+    }
+
+    fn inner_height(&self, size: Size) -> Pixels {
+        match size {
+            Size::XSmall => match self {
+                TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(18.),
+                TabVariant::Segmented => px(16.),
+                TabVariant::Underline => px(20.),
+            },
+            Size::Small => match self {
+                TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(22.),
+                TabVariant::Segmented => px(18.),
+                TabVariant::Underline => px(22.),
+            },
+            Size::Large => match self {
+                TabVariant::Tab | TabVariant::Outline | TabVariant::Pill => px(36.),
+                TabVariant::Segmented => px(28.),
+                TabVariant::Underline => px(32.),
+            },
+            _ => match self {
+                TabVariant::Tab => px(30.),
+                TabVariant::Outline | TabVariant::Pill => px(26.),
+                TabVariant::Segmented => px(24.),
+                TabVariant::Underline => px(26.),
+            },
+        }
+    }
+
+    /// Default px(12) to match panel px_3, See [`crate::dock::TabPanel`]
+    fn inner_paddings(&self, size: Size) -> Edges<Pixels> {
+        let mut padding_x = match size {
+            Size::XSmall => px(8.),
+            Size::Small => px(10.),
+            Size::Large => px(16.),
+            _ => px(12.),
+        };
+
+        if matches!(self, TabVariant::Underline) {
+            padding_x = px(0.);
+        }
+
+        Edges {
+            left: padding_x,
+            right: padding_x,
+            ..Default::default()
+        }
+    }
+
+    fn inner_margins(&self, size: Size) -> Edges<Pixels> {
+        match size {
+            Size::XSmall => match self {
+                TabVariant::Underline => Edges {
+                    top: px(1.),
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+            Size::Small => match self {
+                TabVariant::Underline => Edges {
+                    top: px(2.),
+                    bottom: px(3.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+            Size::Large => match self {
+                TabVariant::Underline => Edges {
+                    top: px(5.),
+                    bottom: px(6.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+            _ => match self {
+                TabVariant::Underline => Edges {
+                    top: px(3.),
+                    bottom: px(4.),
+                    ..Default::default()
+                },
+                _ => Edges::all(px(0.)),
+            },
+        }
+    }
+
+    fn normal(&self, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges::all(px(1.)),
+                border_color: cx.theme().border,
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: cx.theme().text,
+                bg: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: gpui::transparent_black(),
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+        }
+    }
+
+    fn hovered(&self, selected: bool, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().secondary_foreground,
+                bg: cx.theme().secondary_hover,
+                borders: Edges::all(px(1.)),
+                border_color: cx.theme().border,
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: cx.theme().secondary_foreground,
+                bg: cx.theme().secondary_background,
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: if selected {
+                    cx.theme().background
+                } else {
+                    gpui::transparent_black()
+                },
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().tab_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: gpui::transparent_black(),
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                border_color: gpui::transparent_black(),
+                ..Default::default()
+            },
+        }
+    }
+
+    fn selected(&self, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().tab_active_foreground,
+                bg: cx.theme().tab_active_background,
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                border_color: cx.theme().border,
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().text_accent,
+                bg: gpui::transparent_black(),
+                borders: Edges::all(px(1.)),
+                border_color: cx.theme().element_active,
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: cx.theme().element_foreground,
+                bg: cx.theme().element_background,
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().tab_active_foreground,
+                bg: gpui::transparent_black(),
+                inner_bg: cx.theme().background,
+                shadow: true,
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().tab_active_foreground,
+                bg: gpui::transparent_black(),
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                border_color: cx.theme().element_active,
+                ..Default::default()
+            },
+        }
+    }
+
+    fn disabled(&self, selected: bool, cx: &App) -> TabStyle {
+        match self {
+            TabVariant::Tab => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: gpui::transparent_black(),
+                border_color: if selected {
+                    cx.theme().border
+                } else {
+                    gpui::transparent_black()
+                },
+                borders: Edges {
+                    left: px(1.),
+                    right: px(1.),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+            TabVariant::Outline => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: gpui::transparent_black(),
+                borders: Edges::all(px(1.)),
+                border_color: if selected {
+                    cx.theme().element_active
+                } else {
+                    cx.theme().border
+                },
+                ..Default::default()
+            },
+            TabVariant::Pill => TabStyle {
+                fg: if selected {
+                    cx.theme().element_foreground.opacity(0.5)
+                } else {
+                    cx.theme().text_muted
+                },
+                bg: if selected {
+                    cx.theme().element_background.opacity(0.5)
+                } else {
+                    gpui::transparent_black()
+                },
+                ..Default::default()
+            },
+            TabVariant::Segmented => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: cx.theme().tab_background,
+                inner_bg: if selected {
+                    cx.theme().background
+                } else {
+                    gpui::transparent_black()
+                },
+                ..Default::default()
+            },
+            TabVariant::Underline => TabStyle {
+                fg: cx.theme().text_muted,
+                bg: gpui::transparent_black(),
+                border_color: if selected {
+                    cx.theme().border
+                } else {
+                    gpui::transparent_black()
+                },
+                borders: Edges {
+                    bottom: px(2.),
+                    ..Default::default()
+                },
+                ..Default::default()
+            },
+        }
+    }
+
+    pub(super) fn tab_bar_radius(&self, size: Size, cx: &App) -> Pixels {
+        if *self != TabVariant::Segmented {
+            return px(0.);
+        }
+
+        match size {
+            Size::XSmall | Size::Small => cx.theme().radius,
+            Size::Large => cx.theme().radius_lg,
+            _ => cx.theme().radius_lg,
+        }
+    }
+
+    fn radius(&self, size: Size, cx: &App) -> Pixels {
+        match self {
+            TabVariant::Outline | TabVariant::Pill => px(99.),
+            TabVariant::Segmented => match size {
+                Size::XSmall | Size::Small => cx.theme().radius,
+                Size::Large => cx.theme().radius_lg,
+                _ => cx.theme().radius_lg,
+            },
+            _ => px(0.),
+        }
+    }
+
+    fn inner_radius(&self, size: Size, cx: &App) -> Pixels {
+        match self {
+            TabVariant::Segmented => match size {
+                Size::Large => self.tab_bar_radius(size, cx) - px(3.),
+                _ => self.tab_bar_radius(size, cx) - px(2.),
+            },
+            _ => px(0.),
+        }
+    }
+}
+
+#[allow(dead_code)]
+struct TabStyle {
+    borders: Edges<Pixels>,
+    border_color: Hsla,
+    bg: Hsla,
+    fg: Hsla,
+    shadow: bool,
+    inner_bg: Hsla,
+}
+
+impl Default for TabStyle {
+    fn default() -> Self {
+        TabStyle {
+            borders: Edges::all(px(0.)),
+            border_color: gpui::transparent_white(),
+            bg: gpui::transparent_white(),
+            fg: gpui::transparent_white(),
+            shadow: false,
+            inner_bg: gpui::transparent_white(),
+        }
+    }
+}
+
+#[allow(clippy::type_complexity)]
+/// A Tab element for the [`super::TabBar`].
 #[derive(IntoElement)]
 pub struct Tab {
     ix: usize,
     base: Div,
-    label: Option<AnyElement>,
+    pub(super) label: Option<SharedString>,
+    icon: Option<Icon>,
     prefix: Option<AnyElement>,
+    pub(super) tab_bar_prefix: Option<bool>,
     suffix: Option<AnyElement>,
-    disabled: bool,
-    selected: bool,
+    children: Vec<AnyElement>,
+    variant: TabVariant,
     size: Size,
+    pub(super) disabled: bool,
+    pub(super) selected: bool,
+    on_click: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
 }
 
-impl Tab {
-    pub fn new() -> Self {
-        Self {
-            ix: 0,
-            base: div(),
-            label: None,
-            disabled: false,
-            selected: false,
-            prefix: None,
-            suffix: None,
-            size: Size::default(),
-        }
+impl From<&'static str> for Tab {
+    fn from(label: &'static str) -> Self {
+        Self::new().label(label)
     }
+}
 
-    /// Set label for the tab.
-    pub fn label(mut self, label: impl Into<AnyElement>) -> Self {
-        self.label = Some(label.into());
-        self
+impl From<String> for Tab {
+    fn from(label: String) -> Self {
+        Self::new().label(label)
     }
+}
 
-    /// Set the left side of the tab
-    pub fn prefix(mut self, prefix: impl Into<AnyElement>) -> Self {
-        self.prefix = Some(prefix.into());
-        self
+impl From<SharedString> for Tab {
+    fn from(label: SharedString) -> Self {
+        Self::new().label(label)
     }
+}
 
-    /// Set the right side of the tab
-    pub fn suffix(mut self, suffix: impl Into<AnyElement>) -> Self {
-        self.suffix = Some(suffix.into());
-        self
+impl From<Icon> for Tab {
+    fn from(icon: Icon) -> Self {
+        Self::default().icon(icon)
     }
+}
 
-    /// Set disabled state to the tab
-    pub fn disabled(mut self, disabled: bool) -> Self {
-        self.disabled = disabled;
-        self
-    }
-
-    /// Set index to the tab.
-    pub fn ix(mut self, ix: usize) -> Self {
-        self.ix = ix;
-        self
+impl From<IconName> for Tab {
+    fn from(icon_name: IconName) -> Self {
+        Self::default().icon(Icon::new(icon_name))
     }
 }
 
 impl Default for Tab {
     fn default() -> Self {
-        Self::new()
+        Self {
+            ix: 0,
+            base: div(),
+            label: None,
+            icon: None,
+            tab_bar_prefix: None,
+            children: Vec::new(),
+            disabled: false,
+            selected: false,
+            prefix: None,
+            suffix: None,
+            variant: TabVariant::default(),
+            size: Size::default(),
+            on_click: None,
+        }
+    }
+}
+
+impl Tab {
+    /// Create a new tab with a label.
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Set label for the tab.
+    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
+        self.label = Some(label.into());
+        self
+    }
+
+    /// Set icon for the tab.
+    pub fn icon(mut self, icon: impl Into<Icon>) -> Self {
+        self.icon = Some(icon.into());
+        self
+    }
+
+    /// Set Tab Variant.
+    pub fn with_variant(mut self, variant: TabVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    /// Use Pill variant.
+    pub fn pill(mut self) -> Self {
+        self.variant = TabVariant::Pill;
+        self
+    }
+
+    /// Use outline variant.
+    pub fn outline(mut self) -> Self {
+        self.variant = TabVariant::Outline;
+        self
+    }
+
+    /// Use Segmented variant.
+    pub fn segmented(mut self) -> Self {
+        self.variant = TabVariant::Segmented;
+        self
+    }
+
+    /// Use Underline variant.
+    pub fn underline(mut self) -> Self {
+        self.variant = TabVariant::Underline;
+        self
+    }
+
+    /// Set the left side of the tab
+    pub fn prefix(mut self, prefix: impl IntoElement) -> Self {
+        self.prefix = Some(prefix.into_any_element());
+        self
+    }
+
+    /// Set the right side of the tab
+    pub fn suffix(mut self, suffix: impl IntoElement) -> Self {
+        self.suffix = Some(suffix.into_any_element());
+        self
+    }
+
+    /// Set disabled state to the tab, default false.
+    pub fn disabled(mut self, disabled: bool) -> Self {
+        self.disabled = disabled;
+        self
+    }
+
+    /// Set the click handler for the tab.
+    pub fn on_click(
+        mut self,
+        on_click: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_click = Some(Rc::new(on_click));
+        self
+    }
+
+    /// Set index to the tab.
+    pub(crate) fn ix(mut self, ix: usize) -> Self {
+        self.ix = ix;
+        self
+    }
+
+    /// Set if the tab bar has a prefix.
+    pub(crate) fn tab_bar_prefix(mut self, tab_bar_prefix: bool) -> Self {
+        self.tab_bar_prefix = Some(tab_bar_prefix);
+        self
+    }
+}
+
+impl ParentElement for Tab {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements);
     }
 }
 
@@ -105,62 +588,115 @@ impl Sizable for Tab {
 }
 
 impl RenderOnce for Tab {
-    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
-        let (text_color, hover_text_color, bg_color, border_color) =
-            match (self.selected, self.disabled) {
-                (true, false) => (
-                    cx.theme().tab_active_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().tab_active_background,
-                    cx.theme().border,
-                ),
-                (false, false) => (
-                    cx.theme().tab_inactive_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().ghost_element_background,
-                    cx.theme().border_transparent,
-                ),
-                (true, true) => (
-                    cx.theme().tab_inactive_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().ghost_element_background,
-                    cx.theme().border_disabled,
-                ),
-                (false, true) => (
-                    cx.theme().tab_inactive_foreground,
-                    cx.theme().tab_hover_foreground,
-                    cx.theme().ghost_element_background,
-                    cx.theme().border_disabled,
-                ),
-            };
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let mut tab_style = if self.selected {
+            self.variant.selected(cx)
+        } else {
+            self.variant.normal(cx)
+        };
+
+        let mut hover_style = self.variant.hovered(self.selected, cx);
+
+        if self.disabled {
+            tab_style = self.variant.disabled(self.selected, cx);
+            hover_style = self.variant.disabled(self.selected, cx);
+        }
+
+        let tab_bar_prefix = self.tab_bar_prefix.unwrap_or_default();
+
+        if !tab_bar_prefix && self.ix == 0 && self.variant == TabVariant::Tab {
+            tab_style.borders.left = px(0.);
+            hover_style.borders.left = px(0.);
+        }
+
+        let radius = self.variant.radius(self.size, cx);
+        let inner_radius = self.variant.inner_radius(self.size, cx);
+        let inner_paddings = self.variant.inner_paddings(self.size);
+        let inner_margins = self.variant.inner_margins(self.size);
+        let inner_height = self.variant.inner_height(self.size);
+        let height = self.variant.height(self.size);
 
         self.base
             .id(self.ix)
-            .h(TABBAR_HEIGHT)
-            .px_4()
-            .relative()
             .flex()
+            .flex_wrap()
+            .gap_1()
             .items_center()
             .flex_shrink_0()
-            .cursor_pointer()
+            .h(height)
             .overflow_hidden()
-            .text_xs()
-            .text_ellipsis()
-            .text_color(text_color)
-            .bg(bg_color)
-            .border_l(px(1.))
-            .border_r(px(1.))
-            .border_color(border_color)
+            .text_color(tab_style.fg)
+            .map(|this| match self.size {
+                Size::XSmall => this.text_xs(),
+                Size::Large => this.text_base(),
+                _ => this.text_sm(),
+            })
+            .bg(tab_style.bg)
+            .border_l(tab_style.borders.left)
+            .border_r(tab_style.borders.right)
+            .border_t(tab_style.borders.top)
+            .border_b(tab_style.borders.bottom)
+            .border_color(tab_style.border_color)
+            .rounded(radius)
             .when(!self.selected && !self.disabled, |this| {
-                this.hover(|this| this.text_color(hover_text_color))
+                this.hover(|this| {
+                    this.text_color(hover_style.fg)
+                        .bg(hover_style.bg)
+                        .border_l(hover_style.borders.left)
+                        .border_r(hover_style.borders.right)
+                        .border_t(hover_style.borders.top)
+                        .border_b(hover_style.borders.bottom)
+                        .border_color(hover_style.border_color)
+                        .rounded(radius)
+                })
             })
-            .when_some(self.prefix, |this, prefix| {
-                this.child(prefix).text_color(text_color)
+            .when_some(self.prefix, |this, prefix| this.child(prefix))
+            .child(
+                h_flex()
+                    .flex_1()
+                    .h(inner_height)
+                    .line_height(relative(1.))
+                    .whitespace_nowrap()
+                    .items_center()
+                    .justify_center()
+                    .overflow_hidden()
+                    .margins(inner_margins)
+                    .flex_shrink_0()
+                    .map(|this| match self.icon {
+                        Some(icon) => {
+                            this.w(inner_height * 1.25)
+                                .child(icon.map(|this| match self.size {
+                                    Size::XSmall => this.size_2p5(),
+                                    Size::Small => this.size_3p5(),
+                                    Size::Large => this.size_4(),
+                                    _ => this.size_4(),
+                                }))
+                        }
+                        None => this
+                            .paddings(inner_paddings)
+                            .map(|this| match self.label {
+                                Some(label) => this.child(label),
+                                None => this,
+                            })
+                            .children(self.children),
+                    })
+                    .bg(tab_style.inner_bg)
+                    .rounded(inner_radius)
+                    .when(tab_style.shadow, |this| this.shadow_xs())
+                    .hover(|this| this.bg(hover_style.inner_bg).rounded(inner_radius)),
+            )
+            .when_some(self.suffix, |this, suffix| {
+                this.child(div().pr_2().child(suffix))
             })
-            .when_some(self.label, |this, label| this.child(label))
-            .when_some(self.suffix, |this, suffix| this.child(suffix))
-            .on_mouse_down(MouseButton::Left, |_ev, _window, cx| {
+            .on_mouse_down(MouseButton::Left, |_, _, cx| {
+                // Stop propagation behavior, for works on TitleBar.
+                // https://github.com/longbridge/gpui-component/issues/1836
                 cx.stop_propagation();
             })
+            .when(!self.disabled, |this| {
+                this.when_some(self.on_click.clone(), |this, on_click| {
+                    this.on_click(move |event, window, cx| on_click(event, window, cx))
+                })
+            })
     }
 }

crates/ui/src/tab/tab_bar.rs

@@ -1,41 +1,92 @@
+use std::rc::Rc;
+
 use gpui::prelude::FluentBuilder as _;
-#[cfg(not(target_os = "windows"))]
-use gpui::Pixels;
 use gpui::{
-    div, px, AnyElement, App, Div, InteractiveElement, IntoElement, ParentElement, RenderOnce,
-    ScrollHandle, StatefulInteractiveElement as _, StyleRefinement, Styled, Window,
+    AnyElement, App, Corner, Div, Edges, ElementId, InteractiveElement, IntoElement, ParentElement,
+    RenderOnce, ScrollHandle, Stateful, StatefulInteractiveElement as _, StyleRefinement, Styled,
+    Window, div, px,
 };
 use smallvec::SmallVec;
 use theme::ActiveTheme;
 
-use crate::{h_flex, Sizable, Size, StyledExt};
+use super::{Tab, TabVariant};
+use crate::button::{Button, ButtonVariants as _};
+use crate::menu::{DropdownMenu as _, PopupMenuItem};
+use crate::{IconName, Selectable, Sizable, Size, StyledExt, h_flex};
 
+#[allow(clippy::type_complexity)]
+/// A TabBar element that contains multiple [`Tab`] items.
 #[derive(IntoElement)]
 pub struct TabBar {
-    base: Div,
+    base: Stateful<Div>,
     style: StyleRefinement,
     scroll_handle: Option<ScrollHandle>,
     prefix: Option<AnyElement>,
     suffix: Option<AnyElement>,
+    children: SmallVec<[Tab; 2]>,
     last_empty_space: AnyElement,
-    children: SmallVec<[AnyElement; 2]>,
+    selected_index: Option<usize>,
+    variant: TabVariant,
     size: Size,
+    menu: bool,
+    on_click: Option<Rc<dyn Fn(&usize, &mut Window, &mut App) + 'static>>,
 }
 
 impl TabBar {
-    pub fn new() -> Self {
+    /// Create a new TabBar.
+    pub fn new(id: impl Into<ElementId>) -> Self {
         Self {
-            base: h_flex().px(px(-1.)),
+            base: div().id(id).px(px(-1.)),
             style: StyleRefinement::default(),
-            scroll_handle: None,
             children: SmallVec::new(),
+            scroll_handle: None,
             prefix: None,
             suffix: None,
+            variant: TabVariant::default(),
             size: Size::default(),
             last_empty_space: div().w_3().into_any_element(),
+            selected_index: None,
+            on_click: None,
+            menu: false,
         }
     }
 
+    /// Set the Tab variant, all children will inherit the variant.
+    pub fn with_variant(mut self, variant: TabVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    /// Set the Tab variant to Pill, all children will inherit the variant.
+    pub fn pill(mut self) -> Self {
+        self.variant = TabVariant::Pill;
+        self
+    }
+
+    /// Set the Tab variant to Outline, all children will inherit the variant.
+    pub fn outline(mut self) -> Self {
+        self.variant = TabVariant::Outline;
+        self
+    }
+
+    /// Set the Tab variant to Segmented, all children will inherit the variant.
+    pub fn segmented(mut self) -> Self {
+        self.variant = TabVariant::Segmented;
+        self
+    }
+
+    /// Set the Tab variant to Underline, all children will inherit the variant.
+    pub fn underline(mut self) -> Self {
+        self.variant = TabVariant::Underline;
+        self
+    }
+
+    /// Set whether to show the menu button when tabs overflow, default is false.
+    pub fn menu(mut self, menu: bool) -> Self {
+        self.menu = menu;
+        self
+    }
+
     /// Track the scroll of the TabBar.
     pub fn track_scroll(mut self, scroll_handle: &ScrollHandle) -> Self {
         self.scroll_handle = Some(scroll_handle.clone());
@@ -54,27 +105,39 @@ impl TabBar {
         self
     }
 
+    /// Add children of the TabBar, all children will inherit the variant.
+    pub fn children(mut self, children: impl IntoIterator<Item = impl Into<Tab>>) -> Self {
+        self.children.extend(children.into_iter().map(Into::into));
+        self
+    }
+
+    /// Add child of the TabBar, tab will inherit the variant.
+    pub fn child(mut self, child: impl Into<Tab>) -> Self {
+        self.children.push(child.into());
+        self
+    }
+
+    /// Set the selected index of the TabBar.
+    pub fn selected_index(mut self, index: usize) -> Self {
+        self.selected_index = Some(index);
+        self
+    }
+
     /// Set the last empty space element of the TabBar.
     pub fn last_empty_space(mut self, last_empty_space: impl IntoElement) -> Self {
         self.last_empty_space = last_empty_space.into_any_element();
         self
     }
 
-    #[cfg(not(target_os = "windows"))]
-    pub fn height(window: &mut Window) -> Pixels {
-        (1.75 * window.rem_size()).max(px(36.))
-    }
-}
-
-impl Default for TabBar {
-    fn default() -> Self {
-        Self::new()
-    }
-}
-
-impl ParentElement for TabBar {
-    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
-        self.children.extend(elements)
+    /// Set the on_click callback of the TabBar, the first parameter is the index of the clicked tab.
+    ///
+    /// When this is set, the children's on_click will be ignored.
+    pub fn on_click<F>(mut self, on_click: F) -> Self
+    where
+        F: Fn(&usize, &mut Window, &mut App) + 'static,
+    {
+        self.on_click = Some(Rc::new(on_click));
+        self
     }
 }
 
@@ -92,37 +155,136 @@ impl Sizable for TabBar {
 }
 
 impl RenderOnce for TabBar {
-    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let default_gap = match self.size {
+            Size::Small | Size::XSmall => px(8.),
+            Size::Large => px(16.),
+            _ => px(12.),
+        };
+        let (bg, paddings, gap) = match self.variant {
+            TabVariant::Tab => {
+                let padding = Edges::all(px(0.));
+                (cx.theme().tab_background, padding, px(0.))
+            }
+            TabVariant::Outline => {
+                let padding = Edges::all(px(0.));
+                (gpui::transparent_black(), padding, default_gap)
+            }
+            TabVariant::Pill => {
+                let padding = Edges::all(px(0.));
+                (gpui::transparent_black(), padding, px(4.))
+            }
+            TabVariant::Segmented => {
+                let padding_x = match self.size {
+                    Size::XSmall => px(2.),
+                    Size::Small => px(3.),
+                    _ => px(4.),
+                };
+                let padding = Edges {
+                    left: padding_x,
+                    right: padding_x,
+                    ..Default::default()
+                };
+
+                (cx.theme().tab_background, padding, px(2.))
+            }
+            TabVariant::Underline => {
+                // This gap is same as the tab inner_paddings
+                let gap = match self.size {
+                    Size::XSmall => px(10.),
+                    Size::Small => px(12.),
+                    Size::Large => px(20.),
+                    _ => px(16.),
+                };
+
+                (gpui::transparent_black(), Edges::all(px(0.)), gap)
+            }
+        };
+
+        let mut item_labels = Vec::new();
+        let selected_index = self.selected_index;
+        let on_click = self.on_click.clone();
+
         self.base
             .group("tab-bar")
             .relative()
-            .refine_style(&self.style)
-            .bg(cx.theme().surface_background)
-            .child(
-                div()
-                    .id("border-bottom")
-                    .absolute()
-                    .left_0()
-                    .bottom_0()
-                    .size_full()
-                    .border_b_1()
-                    .border_color(cx.theme().border),
+            .flex()
+            .items_center()
+            .bg(bg)
+            .text_color(cx.theme().tab_foreground)
+            .when(
+                self.variant == TabVariant::Underline || self.variant == TabVariant::Tab,
+                |this| {
+                    this.child(
+                        div()
+                            .id("border-b")
+                            .absolute()
+                            .left_0()
+                            .bottom_0()
+                            .size_full()
+                            .border_b_1()
+                            .border_color(cx.theme().border),
+                    )
+                },
             )
-            .text_color(cx.theme().text)
+            .rounded(self.variant.tab_bar_radius(self.size, cx))
+            .paddings(paddings)
+            .refine_style(&self.style)
             .when_some(self.prefix, |this, prefix| this.child(prefix))
             .child(
                 h_flex()
                     .id("tabs")
-                    .flex_grow()
+                    .flex_1()
                     .overflow_x_scroll()
                     .when_some(self.scroll_handle, |this, scroll_handle| {
                         this.track_scroll(&scroll_handle)
                     })
-                    .children(self.children)
-                    .when(self.suffix.is_some(), |this| {
+                    .gap(gap)
+                    .children(self.children.into_iter().enumerate().map(|(ix, child)| {
+                        item_labels.push((child.label.clone(), child.disabled));
+                        let tab_bar_prefix = child.tab_bar_prefix.unwrap_or(true);
+                        child
+                            .ix(ix)
+                            .tab_bar_prefix(tab_bar_prefix)
+                            .with_variant(self.variant)
+                            .with_size(self.size)
+                            .when_some(self.selected_index, |this, selected_ix| {
+                                this.selected(selected_ix == ix)
+                            })
+                            .when_some(self.on_click.clone(), move |this, on_click| {
+                                this.on_click(move |_, window, cx| on_click(&ix, window, cx))
+                            })
+                    }))
+                    .when(self.suffix.is_some() || self.menu, |this| {
                         this.child(self.last_empty_space)
                     }),
             )
+            .when(self.menu, |this| {
+                this.child(
+                    Button::new("more")
+                        .xsmall()
+                        .ghost()
+                        .icon(IconName::ChevronDown)
+                        .dropdown_menu(move |mut this, _, _| {
+                            this = this.scrollable(true);
+                            for (ix, (label, disabled)) in item_labels.iter().enumerate() {
+                                this = this.item(
+                                    PopupMenuItem::new(label.clone().unwrap_or_default())
+                                        .checked(selected_index == Some(ix))
+                                        .disabled(*disabled)
+                                        .when_some(on_click.clone(), |this, on_click| {
+                                            this.on_click(move |_, window, cx| {
+                                                on_click(&ix, window, cx)
+                                            })
+                                        }),
+                                )
+                            }
+
+                            this
+                        })
+                        .anchor(Corner::TopRight),
+                )
+            })
             .when_some(self.suffix, |this, suffix| this.child(suffix))
     }
 }