Extract TabBar component (#3613)

This PR extracts a new `TabBar` component from the tab bar
implementation in the workspace.

Release Notes:

- N/A

crates/ui2/src/components/stories.rs

@@ -11,6 +11,7 @@ mod list;
 mod list_header;
 mod list_item;
 mod tab;
+mod tab_bar;
 
 pub use avatar::*;
 pub use button::*;
@@ -25,3 +26,4 @@ pub use list::*;
 pub use list_header::*;
 pub use list_item::*;
 pub use tab::*;
+pub use tab_bar::*;

crates/ui2/src/components/stories/tab_bar.rs

@@ -0,0 +1,68 @@
+use gpui::{Div, FocusHandle, Render};
+use story::Story;
+
+use crate::{prelude::*, Tab, TabBar, TabPosition};
+
+pub struct TabBarStory {
+    tab_bar_focus_handle: FocusHandle,
+}
+
+impl TabBarStory {
+    pub fn new(cx: &mut ViewContext<Self>) -> Self {
+        Self {
+            tab_bar_focus_handle: cx.focus_handle(),
+        }
+    }
+}
+
+impl Render for TabBarStory {
+    type Element = Div;
+
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
+        let tab_count = 20;
+        let selected_tab_index = 3;
+
+        let tabs = (0..tab_count)
+            .map(|index| {
+                Tab::new(index)
+                    .selected(index == selected_tab_index)
+                    .position(if index == 0 {
+                        TabPosition::First
+                    } else if index == tab_count - 1 {
+                        TabPosition::Last
+                    } else {
+                        TabPosition::Middle(index.cmp(&selected_tab_index))
+                    })
+                    .child(Label::new(format!("Tab {}", index + 1)).color(
+                        if index == selected_tab_index {
+                            Color::Default
+                        } else {
+                            Color::Muted
+                        },
+                    ))
+            })
+            .collect::<Vec<_>>();
+
+        Story::container()
+            .child(Story::title_for::<TabBar>())
+            .child(Story::label("Default"))
+            .child(
+                h_stack().child(
+                    TabBar::new("tab_bar_1", self.tab_bar_focus_handle.clone())
+                        .start_child(
+                            IconButton::new("navigate_backward", Icon::ArrowLeft)
+                                .icon_size(IconSize::Small),
+                        )
+                        .start_child(
+                            IconButton::new("navigate_forward", Icon::ArrowRight)
+                                .icon_size(IconSize::Small),
+                        )
+                        .end_child(IconButton::new("new", Icon::Plus).icon_size(IconSize::Small))
+                        .end_child(
+                            IconButton::new("split_pane", Icon::Split).icon_size(IconSize::Small),
+                        )
+                        .children(tabs),
+                ),
+            )
+    }
+}

crates/ui2/src/components/tab_bar.rs

@@ -0,0 +1,141 @@
+use gpui::{AnyElement, FocusHandle, Focusable, Stateful};
+use smallvec::SmallVec;
+
+use crate::prelude::*;
+
+#[derive(IntoElement)]
+pub struct TabBar {
+    id: ElementId,
+    focus_handle: FocusHandle,
+    start_children: SmallVec<[AnyElement; 2]>,
+    children: SmallVec<[AnyElement; 2]>,
+    end_children: SmallVec<[AnyElement; 2]>,
+}
+
+impl TabBar {
+    pub fn new(id: impl Into<ElementId>, focus_handle: FocusHandle) -> Self {
+        Self {
+            id: id.into(),
+            focus_handle,
+            start_children: SmallVec::new(),
+            children: SmallVec::new(),
+            end_children: SmallVec::new(),
+        }
+    }
+
+    pub fn start_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.start_children
+    }
+
+    pub fn start_child(mut self, start_child: impl IntoElement) -> Self
+    where
+        Self: Sized,
+    {
+        self.start_children_mut()
+            .push(start_child.into_element().into_any());
+        self
+    }
+
+    pub fn start_children(
+        mut self,
+        start_children: impl IntoIterator<Item = impl IntoElement>,
+    ) -> Self
+    where
+        Self: Sized,
+    {
+        self.start_children_mut().extend(
+            start_children
+                .into_iter()
+                .map(|child| child.into_any_element()),
+        );
+        self
+    }
+
+    pub fn end_children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.end_children
+    }
+
+    pub fn end_child(mut self, end_child: impl IntoElement) -> Self
+    where
+        Self: Sized,
+    {
+        self.end_children_mut()
+            .push(end_child.into_element().into_any());
+        self
+    }
+
+    pub fn end_children(mut self, end_children: impl IntoIterator<Item = impl IntoElement>) -> Self
+    where
+        Self: Sized,
+    {
+        self.end_children_mut().extend(
+            end_children
+                .into_iter()
+                .map(|child| child.into_any_element()),
+        );
+        self
+    }
+}
+
+impl ParentElement for TabBar {
+    fn children_mut(&mut self) -> &mut SmallVec<[AnyElement; 2]> {
+        &mut self.children
+    }
+}
+
+impl RenderOnce for TabBar {
+    type Rendered = Focusable<Stateful<Div>>;
+
+    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
+        const HEIGHT_IN_REMS: f32 = 30. / 16.;
+
+        div()
+            .id(self.id)
+            .group("tab_bar")
+            .track_focus(&self.focus_handle)
+            .w_full()
+            .h(rems(HEIGHT_IN_REMS))
+            .overflow_hidden()
+            .flex()
+            .flex_none()
+            .bg(cx.theme().colors().tab_bar_background)
+            .child(
+                h_stack()
+                    .flex_none()
+                    .gap_1()
+                    .px_1()
+                    .border_b()
+                    .border_r()
+                    .border_color(cx.theme().colors().border)
+                    .children(self.start_children),
+            )
+            .child(
+                div()
+                    .relative()
+                    .flex_1()
+                    .h_full()
+                    .overflow_hidden_x()
+                    .child(
+                        div()
+                            .absolute()
+                            .top_0()
+                            .left_0()
+                            .z_index(1)
+                            .size_full()
+                            .border_b()
+                            .border_color(cx.theme().colors().border),
+                    )
+                    .child(h_stack().id("tabs").z_index(2).children(self.children)),
+            )
+            .child(
+                h_stack()
+                    .flex_none()
+                    .gap_1()
+                    .px_1()
+                    .border_b()
+                    .border_l()
+                    .border_color(cx.theme().colors().border)
+                    .children(self.end_children),
+            )
+    }
+}