From 0d161519e402982dded19a7b1d78bd5dc0faf4b7 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 12 Sep 2023 11:34:27 -0400
Subject: [PATCH 01/22] Checkpoint

---
 crates/storybook/src/components.rs            |   6 +-
 crates/storybook/src/components/avatar.rs     |  39 +++++
 .../storybook/src/components/icon_button.rs   |  36 ++--
 .../storybook/src/components/tool_divider.rs  |  19 +++
 crates/storybook/src/modules.rs               |   4 +
 crates/storybook/src/modules/chat_panel.rs    |  74 +++++++++
 crates/storybook/src/modules/tab_bar.rs       |  29 +++-
 crates/storybook/src/modules/title_bar.rs     | 154 ++++++++++++++++++
 crates/storybook/src/prelude.rs               |  26 +++
 crates/storybook/src/storybook.rs             |   1 +
 crates/storybook/src/workspace.rs             |  10 +-
 11 files changed, 373 insertions(+), 25 deletions(-)
 create mode 100644 crates/storybook/src/components/avatar.rs
 create mode 100644 crates/storybook/src/components/tool_divider.rs
 create mode 100644 crates/storybook/src/modules/chat_panel.rs
 create mode 100644 crates/storybook/src/modules/title_bar.rs
 create mode 100644 crates/storybook/src/prelude.rs

diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs
index d07c2651a0..e0ba73b866 100644
--- a/crates/storybook/src/components.rs
+++ b/crates/storybook/src/components.rs
@@ -4,11 +4,15 @@ use gpui2::{
 };
 use std::{marker::PhantomData, rc::Rc};
 
+mod avatar;
 mod icon_button;
 mod tab;
+mod tool_divider;
 
-pub(crate) use icon_button::{icon_button, ButtonVariant};
+pub(crate) use avatar::avatar;
+pub(crate) use icon_button::icon_button;
 pub(crate) use tab::tab;
+pub(crate) use tool_divider::tool_divider;
 
 struct ButtonHandlers<V, D> {
     click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
diff --git a/crates/storybook/src/components/avatar.rs b/crates/storybook/src/components/avatar.rs
new file mode 100644
index 0000000000..8eff055d75
--- /dev/null
+++ b/crates/storybook/src/components/avatar.rs
@@ -0,0 +1,39 @@
+use crate::prelude::Shape;
+use crate::theme::theme;
+use gpui2::elements::img;
+use gpui2::style::StyleHelpers;
+use gpui2::{ArcCow, IntoElement};
+use gpui2::{Element, ViewContext};
+
+pub type UnknownString = ArcCow<'static, str>;
+
+#[derive(Element)]
+pub(crate) struct Avatar {
+    src: ArcCow<'static, str>,
+    shape: Shape,
+}
+
+pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>, shape: Shape) -> impl Element<V> {
+    Avatar {
+        src: src.into(),
+        shape,
+    }
+}
+
+impl Avatar {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        let mut img = img();
+
+        if self.shape == Shape::Circle {
+            img = img.rounded_full();
+        } else {
+            img = img.rounded_md();
+        }
+
+        img.uri(self.src.clone())
+            .size_4()
+            .fill(theme.middle.warning.default.foreground)
+    }
+}
diff --git a/crates/storybook/src/components/icon_button.rs b/crates/storybook/src/components/icon_button.rs
index 0a9b2ca285..cecb6ccfc3 100644
--- a/crates/storybook/src/components/icon_button.rs
+++ b/crates/storybook/src/components/icon_button.rs
@@ -1,3 +1,4 @@
+use crate::prelude::{ButtonVariant, UIState};
 use crate::theme::theme;
 use gpui2::elements::svg;
 use gpui2::style::{StyleHelpers, Styleable};
@@ -8,22 +9,33 @@ use gpui2::{Element, ParentElement, ViewContext};
 pub(crate) struct IconButton {
     path: &'static str,
     variant: ButtonVariant,
+    state: UIState,
 }
 
-#[derive(PartialEq)]
-pub enum ButtonVariant {
-    Ghost,
-    Filled,
-}
-
-pub fn icon_button<V: 'static>(path: &'static str, variant: ButtonVariant) -> impl Element<V> {
-    IconButton { path, variant }
+pub fn icon_button<V: 'static>(
+    path: &'static str,
+    variant: ButtonVariant,
+    state: UIState,
+) -> impl Element<V> {
+    IconButton {
+        path,
+        variant,
+        state,
+    }
 }
 
 impl IconButton {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
+        let icon_color;
+
+        if self.state == UIState::Disabled {
+            icon_color = theme.highest.base.disabled.foreground;
+        } else {
+            icon_color = theme.highest.base.default.foreground;
+        }
+
         let mut div = div();
         if self.variant == ButtonVariant::Filled {
             div = div.fill(theme.highest.on.default.background);
@@ -39,12 +51,6 @@ impl IconButton {
             .fill(theme.highest.base.hovered.background)
             .active()
             .fill(theme.highest.base.pressed.background)
-            .child(
-                svg()
-                    .path(self.path)
-                    .w_4()
-                    .h_4()
-                    .fill(theme.highest.variant.default.foreground),
-            )
+            .child(svg().path(self.path).w_4().h_4().fill(icon_color))
     }
 }
diff --git a/crates/storybook/src/components/tool_divider.rs b/crates/storybook/src/components/tool_divider.rs
new file mode 100644
index 0000000000..c07d11dfe2
--- /dev/null
+++ b/crates/storybook/src/components/tool_divider.rs
@@ -0,0 +1,19 @@
+use crate::theme::theme;
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ViewContext};
+
+#[derive(Element)]
+pub(crate) struct ToolDivider {}
+
+pub fn tool_divider<V: 'static>() -> impl Element<V> {
+    ToolDivider {}
+}
+
+impl ToolDivider {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div().w_px().h_3().fill(theme.lowest.base.default.border)
+    }
+}
diff --git a/crates/storybook/src/modules.rs b/crates/storybook/src/modules.rs
index bc8ba73b08..00b323fc5d 100644
--- a/crates/storybook/src/modules.rs
+++ b/crates/storybook/src/modules.rs
@@ -1,3 +1,7 @@
+mod chat_panel;
 mod tab_bar;
+mod title_bar;
 
+pub(crate) use chat_panel::chat_panel;
 pub(crate) use tab_bar::tab_bar;
+pub(crate) use title_bar::title_bar;
diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/modules/chat_panel.rs
new file mode 100644
index 0000000000..772bb908e0
--- /dev/null
+++ b/crates/storybook/src/modules/chat_panel.rs
@@ -0,0 +1,74 @@
+use std::marker::PhantomData;
+
+use crate::components::icon_button;
+use crate::prelude::{ButtonVariant, UIState};
+use crate::theme::theme;
+use gpui2::elements::div::ScrollState;
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct ChatPanel<V: 'static> {
+    view_type: PhantomData<V>,
+    scroll_state: ScrollState,
+}
+
+pub fn chat_panel<V: 'static>(scroll_state: ScrollState) -> ChatPanel<V> {
+    ChatPanel {
+        view_type: PhantomData,
+        scroll_state,
+    }
+}
+
+impl<V: 'static> ChatPanel<V> {
+    fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .h_full()
+            .flex()
+            // Header
+            .child(
+                div()
+                    .px_2()
+                    .flex()
+                    .gap_2()
+                    // Nav Buttons
+                    .child("#gpui2"),
+            )
+            // Chat Body
+            .child(
+                div()
+                    .w_full()
+                    .flex()
+                    .flex_col()
+                    .overflow_y_scroll(self.scroll_state.clone())
+                    .child("body"),
+            )
+            // Composer
+            .child(
+                div()
+                    .px_2()
+                    .flex()
+                    .gap_2()
+                    // Nav Buttons
+                    .child(
+                        div()
+                            .flex()
+                            .items_center()
+                            .gap_px()
+                            .child(icon_button(
+                                "icons/plus.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            ))
+                            .child(icon_button(
+                                "icons/split.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            )),
+                    ),
+            )
+    }
+}
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/modules/tab_bar.rs
index 06029c5dc2..5a3358588e 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/modules/tab_bar.rs
@@ -1,6 +1,7 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tab, ButtonVariant};
+use crate::components::{icon_button, tab};
+use crate::prelude::{ButtonVariant, UIState};
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
@@ -40,15 +41,23 @@ impl<V: 'static> TabBar<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button("icons/arrow_left.svg", ButtonVariant::Filled))
-                            .child(icon_button("icons/arrow_right.svg", ButtonVariant::Ghost)),
+                            .child(icon_button(
+                                "icons/arrow_left.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            ))
+                            .child(icon_button(
+                                "icons/arrow_right.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Disabled,
+                            )),
                     ),
             )
             .child(
                 div().w_0().flex_1().h_full().child(
                     div()
                         .flex()
-                        .gap_px()
+                        .gap_8()
                         .overflow_x_scroll(self.scroll_state.clone())
                         .child(tab("Cargo.toml", false))
                         .child(tab("Channels Panel", true))
@@ -74,8 +83,16 @@ impl<V: 'static> TabBar<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button("icons/plus.svg", ButtonVariant::Ghost))
-                            .child(icon_button("icons/split.svg", ButtonVariant::Ghost)),
+                            .child(icon_button(
+                                "icons/plus.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            ))
+                            .child(icon_button(
+                                "icons/split.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            )),
                     ),
             )
     }
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
new file mode 100644
index 0000000000..dfd4e4490e
--- /dev/null
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -0,0 +1,154 @@
+use std::marker::PhantomData;
+
+use crate::components::{avatar, icon_button, tool_divider};
+use crate::prelude::{ButtonVariant, Shape, UIState};
+use crate::theme::theme;
+use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct TitleBar<V: 'static> {
+    view_type: PhantomData<V>,
+}
+
+pub fn title_bar<V: 'static>() -> TitleBar<V> {
+    TitleBar {
+        view_type: PhantomData,
+    }
+}
+
+impl<V: 'static> TitleBar<V> {
+    fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .flex()
+            .items_center()
+            .justify_between()
+            .w_full()
+            .h_8()
+            .fill(theme.lowest.base.default.background)
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .h_full()
+                    .gap_4()
+                    .px_2()
+                    // === Traffic Lights === //
+                    .child(
+                        div()
+                            .flex()
+                            .items_center()
+                            .gap_2()
+                            .child(
+                                div()
+                                    .w_3()
+                                    .h_3()
+                                    .rounded_full()
+                                    .fill(theme.lowest.positive.default.foreground),
+                            )
+                            .child(
+                                div()
+                                    .w_3()
+                                    .h_3()
+                                    .rounded_full()
+                                    .fill(theme.lowest.warning.default.foreground),
+                            )
+                            .child(
+                                div()
+                                    .w_3()
+                                    .h_3()
+                                    .rounded_full()
+                                    .fill(theme.lowest.negative.default.foreground),
+                            ),
+                    )
+                    // === Project Info === //
+                    .child(
+                        div()
+                            .flex()
+                            .items_center()
+                            .gap_1()
+                            .child(
+                                div()
+                                    .h_full()
+                                    .flex()
+                                    .items_center()
+                                    .justify_center()
+                                    .px_2()
+                                    .rounded_md()
+                                    .hover()
+                                    .fill(theme.lowest.base.hovered.background)
+                                    .active()
+                                    .fill(theme.lowest.base.pressed.background)
+                                    .child(div().text_sm().child("project")),
+                            )
+                            .child(
+                                div()
+                                    .h_full()
+                                    .flex()
+                                    .items_center()
+                                    .justify_center()
+                                    .px_2()
+                                    .rounded_md()
+                                    .text_color(theme.lowest.variant.default.foreground)
+                                    .hover()
+                                    .fill(theme.lowest.base.hovered.background)
+                                    .active()
+                                    .fill(theme.lowest.base.pressed.background)
+                                    .child(div().text_sm().child("branch")),
+                            ),
+                    ),
+            )
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .child(
+                        div()
+                            .px_2()
+                            .flex()
+                            .items_center()
+                            .gap_1()
+                            .child(icon_button(
+                                "icons/stop_sharing.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            ))
+                            .child(icon_button(
+                                "icons/exit.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            )),
+                    )
+                    .child(tool_divider())
+                    .child(
+                        div()
+                            .px_2()
+                            .flex()
+                            .items_center()
+                            .gap_1()
+                            .child(icon_button(
+                                "icons/radix/mic.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            ))
+                            .child(icon_button(
+                                "icons/radix/speaker-loud.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            ))
+                            .child(icon_button(
+                                "icons/radix/desktop.svg",
+                                ButtonVariant::Ghost,
+                                UIState::Default,
+                            )),
+                    )
+                    .child(div().px_2().flex().items_center().child(avatar(
+                        "https://avatars.githubusercontent.com/u/1714999?v=4",
+                        Shape::Squircle,
+                    ))),
+            )
+    }
+}
diff --git a/crates/storybook/src/prelude.rs b/crates/storybook/src/prelude.rs
new file mode 100644
index 0000000000..442567424a
--- /dev/null
+++ b/crates/storybook/src/prelude.rs
@@ -0,0 +1,26 @@
+#[derive(PartialEq)]
+pub enum ButtonVariant {
+    Ghost,
+    Filled,
+}
+
+#[derive(PartialEq)]
+pub enum Shape {
+    Circle,
+    Squircle,
+}
+
+#[derive(PartialEq)]
+pub enum UIState {
+    Default,
+    Hovered,
+    Active,
+    Focused,
+    Disabled,
+}
+
+#[derive(PartialEq)]
+pub enum UIToggleState {
+    Default,
+    Enabled,
+}
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index 1b40bc2dc4..fc7f861e80 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -13,6 +13,7 @@ mod collab_panel;
 mod components;
 mod element_ext;
 mod modules;
+mod prelude;
 mod theme;
 mod workspace;
 
diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs
index c37b3f16ea..4772552647 100644
--- a/crates/storybook/src/workspace.rs
+++ b/crates/storybook/src/workspace.rs
@@ -1,4 +1,8 @@
-use crate::{collab_panel::collab_panel, modules::tab_bar, theme::theme};
+use crate::{
+    collab_panel::collab_panel,
+    modules::{chat_panel, tab_bar, title_bar},
+    theme::theme,
+};
 use gpui2::{
     elements::{div, div::ScrollState, img, svg},
     style::{StyleHelpers, Styleable},
@@ -30,7 +34,7 @@ impl WorkspaceElement {
             .items_start()
             .text_color(theme.lowest.base.default.foreground)
             .fill(theme.middle.base.default.background)
-            .child(titlebar())
+            .child(title_bar())
             .child(
                 div()
                     .flex_1()
@@ -52,7 +56,7 @@ impl WorkspaceElement {
                                     .child(tab_bar(self.tab_bar_scroll_state.clone())),
                             ),
                     )
-                    .child(collab_panel(self.right_scroll_state.clone())),
+                    .child(chat_panel(self.right_scroll_state.clone())),
             )
             .child(statusbar())
     }

From bbc4673f178a2adc4759c077b328049aa38380ff Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 12 Sep 2023 15:18:13 -0400
Subject: [PATCH 02/22] Checkpoint

---
 crates/storybook/src/modules/title_bar.rs | 2 +-
 crates/storybook/src/prelude.rs           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
index dfd4e4490e..9e1e0b3533 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -147,7 +147,7 @@ impl<V: 'static> TitleBar<V> {
                     )
                     .child(div().px_2().flex().items_center().child(avatar(
                         "https://avatars.githubusercontent.com/u/1714999?v=4",
-                        Shape::Squircle,
+                        Shape::RoundedRectangle,
                     ))),
             )
     }
diff --git a/crates/storybook/src/prelude.rs b/crates/storybook/src/prelude.rs
index 442567424a..c925c64620 100644
--- a/crates/storybook/src/prelude.rs
+++ b/crates/storybook/src/prelude.rs
@@ -7,7 +7,7 @@ pub enum ButtonVariant {
 #[derive(PartialEq)]
 pub enum Shape {
     Circle,
-    Squircle,
+    RoundedRectangle,
 }
 
 #[derive(PartialEq)]

From f54f2c52e9c7a3a4e93f22019daac845c55fec55 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 13 Sep 2023 12:40:28 -0400
Subject: [PATCH 03/22] Checkpoint

---
 .../storybook/src/components/icon_button.rs   | 28 +++++++-----
 crates/storybook/src/modules/chat_panel.rs    | 14 ++----
 crates/storybook/src/modules/tab_bar.rs       | 37 +++++++---------
 crates/storybook/src/modules/title_bar.rs     | 33 +++-----------
 crates/storybook/src/prelude.rs               | 34 +++++++++++----
 docs/ui/states.md                             | 43 +++++++++++++++++++
 6 files changed, 110 insertions(+), 79 deletions(-)
 create mode 100644 docs/ui/states.md

diff --git a/crates/storybook/src/components/icon_button.rs b/crates/storybook/src/components/icon_button.rs
index cecb6ccfc3..32ef1d0ce2 100644
--- a/crates/storybook/src/components/icon_button.rs
+++ b/crates/storybook/src/components/icon_button.rs
@@ -1,4 +1,4 @@
-use crate::prelude::{ButtonVariant, UIState};
+use crate::prelude::{ButtonVariant, InteractionState};
 use crate::theme::theme;
 use gpui2::elements::svg;
 use gpui2::style::{StyleHelpers, Styleable};
@@ -6,31 +6,37 @@ use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
 
 #[derive(Element)]
-pub(crate) struct IconButton {
+pub struct IconButton {
     path: &'static str,
     variant: ButtonVariant,
-    state: UIState,
+    state: InteractionState,
 }
 
-pub fn icon_button<V: 'static>(
-    path: &'static str,
-    variant: ButtonVariant,
-    state: UIState,
-) -> impl Element<V> {
+pub fn icon_button<V: 'static>(path: &'static str) -> IconButton {
     IconButton {
         path,
-        variant,
-        state,
+        variant: ButtonVariant::default(),
+        state: InteractionState::default(),
     }
 }
 
 impl IconButton {
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    pub fn state(mut self, state: InteractionState) -> Self {
+        self.state = state;
+        self
+    }
+
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
         let icon_color;
 
-        if self.state == UIState::Disabled {
+        if self.state == InteractionState::Disabled {
             icon_color = theme.highest.base.disabled.foreground;
         } else {
             icon_color = theme.highest.base.default.foreground;
diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/modules/chat_panel.rs
index 772bb908e0..25bd9debe3 100644
--- a/crates/storybook/src/modules/chat_panel.rs
+++ b/crates/storybook/src/modules/chat_panel.rs
@@ -1,12 +1,12 @@
 use std::marker::PhantomData;
 
 use crate::components::icon_button;
-use crate::prelude::{ButtonVariant, UIState};
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
+use theme::IconButton;
 
 #[derive(Element)]
 pub struct ChatPanel<V: 'static> {
@@ -58,16 +58,8 @@ impl<V: 'static> ChatPanel<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button(
-                                "icons/plus.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            ))
-                            .child(icon_button(
-                                "icons/split.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            )),
+                            .child(icon_button::<IconButton>("icons/plus.svg"))
+                            .child(icon_button::<IconButton>("icons/split.svg")),
                     ),
             )
     }
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/modules/tab_bar.rs
index 5a3358588e..8cc7ab9433 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/modules/tab_bar.rs
@@ -1,12 +1,13 @@
 use std::marker::PhantomData;
 
 use crate::components::{icon_button, tab};
-use crate::prelude::{ButtonVariant, UIState};
+use crate::prelude::InteractionState;
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
+use theme::IconButton;
 
 #[derive(Element)]
 pub struct TabBar<V: 'static> {
@@ -24,7 +25,8 @@ pub fn tab_bar<V: 'static>(scroll_state: ScrollState) -> TabBar<V> {
 impl<V: 'static> TabBar<V> {
     fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
-
+        let can_navigate_back = true;
+        let can_navigate_forward = false;
         div()
             .w_full()
             .flex()
@@ -41,16 +43,15 @@ impl<V: 'static> TabBar<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button(
-                                "icons/arrow_left.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            ))
-                            .child(icon_button(
-                                "icons/arrow_right.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Disabled,
-                            )),
+                            .child(
+                                icon_button::<IconButton>("icons/arrow_left.svg")
+                                    .state(InteractionState::Enabled.if_enabled(can_navigate_back)),
+                            )
+                            .child(
+                                icon_button::<IconButton>("icons/arrow_right.svg").state(
+                                    InteractionState::Enabled.if_enabled(can_navigate_forward),
+                                ),
+                            ),
                     ),
             )
             .child(
@@ -83,16 +84,8 @@ impl<V: 'static> TabBar<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button(
-                                "icons/plus.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            ))
-                            .child(icon_button(
-                                "icons/split.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            )),
+                            .child(icon_button::<IconButton>("icons/plus.svg"))
+                            .child(icon_button::<IconButton>("icons/split.svg")),
                     ),
             )
     }
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
index 9e1e0b3533..ead95c2009 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -1,11 +1,12 @@
 use std::marker::PhantomData;
 
 use crate::components::{avatar, icon_button, tool_divider};
-use crate::prelude::{ButtonVariant, Shape, UIState};
+use crate::prelude::Shape;
 use crate::theme::theme;
 use gpui2::style::{StyleHelpers, Styleable};
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
+use theme::IconButton;
 
 #[derive(Element)]
 pub struct TitleBar<V: 'static> {
@@ -111,16 +112,8 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(icon_button(
-                                "icons/stop_sharing.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            ))
-                            .child(icon_button(
-                                "icons/exit.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            )),
+                            .child(icon_button::<IconButton>("icons/stop_sharing.svg"))
+                            .child(icon_button::<IconButton>("icons/exit.svg")),
                     )
                     .child(tool_divider())
                     .child(
@@ -129,21 +122,9 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(icon_button(
-                                "icons/radix/mic.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            ))
-                            .child(icon_button(
-                                "icons/radix/speaker-loud.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            ))
-                            .child(icon_button(
-                                "icons/radix/desktop.svg",
-                                ButtonVariant::Ghost,
-                                UIState::Default,
-                            )),
+                            .child(icon_button::<IconButton>("icons/radix/mic.svg"))
+                            .child(icon_button::<IconButton>("icons/radix/speaker-loud.svg"))
+                            .child(icon_button::<IconButton>("icons/radix/desktop.svg")),
                     )
                     .child(div().px_2().flex().items_center().child(avatar(
                         "https://avatars.githubusercontent.com/u/1714999?v=4",
diff --git a/crates/storybook/src/prelude.rs b/crates/storybook/src/prelude.rs
index c925c64620..50ab042cfe 100644
--- a/crates/storybook/src/prelude.rs
+++ b/crates/storybook/src/prelude.rs
@@ -1,26 +1,42 @@
-#[derive(PartialEq)]
+#[derive(Default, PartialEq)]
 pub enum ButtonVariant {
+    #[default]
     Ghost,
     Filled,
 }
 
-#[derive(PartialEq)]
+#[derive(Default, PartialEq)]
 pub enum Shape {
+    #[default]
     Circle,
     RoundedRectangle,
 }
 
-#[derive(PartialEq)]
-pub enum UIState {
-    Default,
+#[derive(Default, PartialEq, Clone, Copy)]
+pub enum InteractionState {
+    #[default]
+    Enabled,
     Hovered,
     Active,
     Focused,
+    Dragged,
     Disabled,
 }
 
-#[derive(PartialEq)]
-pub enum UIToggleState {
-    Default,
-    Enabled,
+impl InteractionState {
+    pub fn if_enabled(&self, enabled: bool) -> Self {
+        if enabled {
+            *self
+        } else {
+            InteractionState::Disabled
+        }
+    }
+}
+
+#[derive(Default, PartialEq)]
+pub enum SelectedState {
+    #[default]
+    Unselected,
+    PartiallySelected,
+    Selected,
 }
diff --git a/docs/ui/states.md b/docs/ui/states.md
new file mode 100644
index 0000000000..7dc3110ced
--- /dev/null
+++ b/docs/ui/states.md
@@ -0,0 +1,43 @@
+## Interaction State
+
+**Enabled**
+
+An enabled state communicates an interactive component or element.
+
+**Disabled**
+
+A disabled state communicates a inoperable component or element.
+
+**Hover**
+
+A hover state communicates when a user has placed a cursor above an interactive element.
+
+**Focused**
+
+A focused state communicates when a user has highlighted an element, using an input method such as a keyboard or voice.
+
+**Activated**
+
+An activated state communicates a highlighted destination, whether initiated by the user or by default.
+
+**Pressed**
+
+A pressed state communicates a user tap.
+
+**Dragged**
+
+A dragged state communicates when a user presses and moves an element.
+
+## Selected State
+
+**Unselected**
+
+dfa
+
+**Partially Selected**
+
+daf
+
+**Selected**
+
+dfa

From a316e2503435b19b6cc3b5ea3a12b383e5a45d2e Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 13 Sep 2023 12:50:01 -0400
Subject: [PATCH 04/22] Checkpoint

---
 crates/storybook/src/components.rs            |  12 +-
 crates/storybook/src/components/avatar.rs     |  11 +-
 crates/storybook/src/components/icon_button2  | 123 ++++++++++++++++++
 crates/storybook/src/components/tab.rs        |   2 +-
 .../storybook/src/components/tool_divider.rs  |   2 +-
 crates/storybook/src/modules/chat_panel.rs    |   3 +-
 crates/storybook/src/modules/tab_bar.rs       |   3 +-
 crates/storybook/src/modules/title_bar.rs     |  13 +-
 8 files changed, 150 insertions(+), 19 deletions(-)
 create mode 100644 crates/storybook/src/components/icon_button2

diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs
index e0ba73b866..36ac1575f5 100644
--- a/crates/storybook/src/components.rs
+++ b/crates/storybook/src/components.rs
@@ -9,10 +9,14 @@ mod icon_button;
 mod tab;
 mod tool_divider;
 
-pub(crate) use avatar::avatar;
-pub(crate) use icon_button::icon_button;
-pub(crate) use tab::tab;
-pub(crate) use tool_divider::tool_divider;
+pub use avatar::avatar;
+pub use avatar::Avatar;
+pub use icon_button::icon_button;
+pub use icon_button::IconButton;
+pub use tab::tab;
+pub use tab::Tab;
+pub use tool_divider::tool_divider;
+pub use tool_divider::ToolDivider;
 
 struct ButtonHandlers<V, D> {
     click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
diff --git a/crates/storybook/src/components/avatar.rs b/crates/storybook/src/components/avatar.rs
index 8eff055d75..6e136977c8 100644
--- a/crates/storybook/src/components/avatar.rs
+++ b/crates/storybook/src/components/avatar.rs
@@ -8,19 +8,24 @@ use gpui2::{Element, ViewContext};
 pub type UnknownString = ArcCow<'static, str>;
 
 #[derive(Element)]
-pub(crate) struct Avatar {
+pub struct Avatar {
     src: ArcCow<'static, str>,
     shape: Shape,
 }
 
-pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>, shape: Shape) -> impl Element<V> {
+pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>) -> Avatar {
     Avatar {
         src: src.into(),
-        shape,
+        shape: Shape::Circle,
     }
 }
 
 impl Avatar {
+    pub fn shape(mut self, shape: Shape) -> Self {
+        self.shape = shape;
+        self
+    }
+
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
diff --git a/crates/storybook/src/components/icon_button2 b/crates/storybook/src/components/icon_button2
new file mode 100644
index 0000000000..9fe738d5ac
--- /dev/null
+++ b/crates/storybook/src/components/icon_button2
@@ -0,0 +1,123 @@
+// use crate::prelude::{ButtonVariant, UIState};
+// use crate::theme::theme;
+// use gpui2::elements::svg;
+// use gpui2::style::{StyleHelpers, Styleable};
+// use gpui2::{elements::div, IntoElement};
+// use gpui2::{Element, ParentElement, ViewContext};
+
+// #[derive(Element)]
+// pub(crate) struct IconButton {
+//     path: &'static str,
+//     variant: ButtonVariant,
+//     state: UIState,
+// }
+
+// pub fn icon_button<V: 'static>(path: &'static str) -> IconButton {
+//     IconButton {
+//         path,
+//         variant: ButtonVariant::Filled,
+//         state: UIState::Default,
+//     }
+// }
+
+// impl IconButton {
+//     fn variant(mut self, variant: ButtonVariant) -> Self {
+//         self.variant = variant;
+
+//         // Example of more interesting setter behavior
+//         // FilledButtons must be disabled
+//         if self.variant == ButtonVariant::Filled {
+//             self.state = UIState::Disabled;
+//         }
+
+//         self
+//     }
+
+//     fn state(mut self, state: UIState) -> Self {
+//         // Example of more interesting setter behavior:
+//         // GhostButtons Cannot be disabled
+//         // Debug asserts are compiled out when we make a new release.
+//         // Useful for making sure developers develop correctly without breaking
+//         // everything
+//         debug_assert!(self.variant != ButtonVariant::Ghost && state != UIState::Disabled);
+
+//         self.state = state;
+//         self
+//     }
+
+//     // const state = {
+//     // foo: "foo",
+//     // bar: "bar"
+//     // } as const
+//     //
+//     // type State = typeof state[keyof typeof something]
+//     //
+//     // type Button {
+//     //      style: State
+//     // }
+//     //
+//     // <Button style="foo" /> State['foo']
+
+//     fn render_warning<V: 'static>(&mut self) -> impl IntoElement<V> {
+//         div()
+//     }
+
+//     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+//         let theme = theme(cx);
+
+//         let icon_color;
+
+//         enum Severity {
+//             Low,
+//             Medium,
+//             High,
+//         }
+
+//         // Enum declaration and match statement example
+//         enum Style {
+//             Error,
+//             Warning(Severity),
+//             Foo,
+//             Bar,
+//             Baz,
+//         }
+
+//         let style = Style::Warning(Severity::High);
+
+//         match style {
+//             Error => return self.render_warning(),
+//             Warning(severity) => match severity {
+//                 Low => {}
+//                 Medium => {}
+//                 High => {}
+//             },
+//             Foo => {}
+//             Bar => {}
+//             Baz => {}
+//         }
+
+//         if self.state == UIState::Disabled {
+//             icon_color = theme.highest.base.disabled.foreground;
+//         } else {
+//             icon_color = theme.highest.base.default.foreground;
+//         }
+
+//         let mut div = div();
+
+//         if self.variant == ButtonVariant::Filled {
+//             div = div.fill(theme.highest.on.default.background);
+//         }
+
+//         div.w_7()
+//             .h_6()
+//             .flex()
+//             .items_center()
+//             .justify_center()
+//             .rounded_md()
+//             .hover()
+//             .fill(theme.highest.base.hovered.background)
+//             .active()
+//             .fill(theme.highest.base.pressed.background)
+//             .child(svg().path(self.path).w_4().h_4().fill(icon_color))
+//     }
+// }
diff --git a/crates/storybook/src/components/tab.rs b/crates/storybook/src/components/tab.rs
index b945e113e5..8237aac004 100644
--- a/crates/storybook/src/components/tab.rs
+++ b/crates/storybook/src/components/tab.rs
@@ -4,7 +4,7 @@ use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
 
 #[derive(Element)]
-pub(crate) struct Tab {
+pub struct Tab {
     title: &'static str,
     enabled: bool,
 }
diff --git a/crates/storybook/src/components/tool_divider.rs b/crates/storybook/src/components/tool_divider.rs
index c07d11dfe2..a923628def 100644
--- a/crates/storybook/src/components/tool_divider.rs
+++ b/crates/storybook/src/components/tool_divider.rs
@@ -4,7 +4,7 @@ use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ViewContext};
 
 #[derive(Element)]
-pub(crate) struct ToolDivider {}
+pub struct ToolDivider {}
 
 pub fn tool_divider<V: 'static>() -> impl Element<V> {
     ToolDivider {}
diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/modules/chat_panel.rs
index 25bd9debe3..9dd4aa5910 100644
--- a/crates/storybook/src/modules/chat_panel.rs
+++ b/crates/storybook/src/modules/chat_panel.rs
@@ -1,12 +1,11 @@
 use std::marker::PhantomData;
 
-use crate::components::icon_button;
+use crate::components::{icon_button, IconButton};
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
-use theme::IconButton;
 
 #[derive(Element)]
 pub struct ChatPanel<V: 'static> {
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/modules/tab_bar.rs
index 8cc7ab9433..1e153bb3c3 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/modules/tab_bar.rs
@@ -1,13 +1,12 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tab};
+use crate::components::{icon_button, tab, IconButton};
 use crate::prelude::InteractionState;
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
-use theme::IconButton;
 
 #[derive(Element)]
 pub struct TabBar<V: 'static> {
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
index ead95c2009..4fb481a328 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -1,12 +1,11 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, tool_divider};
+use crate::components::{avatar, icon_button, tool_divider, Avatar, IconButton};
 use crate::prelude::Shape;
 use crate::theme::theme;
 use gpui2::style::{StyleHelpers, Styleable};
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
-use theme::IconButton;
 
 #[derive(Element)]
 pub struct TitleBar<V: 'static> {
@@ -126,10 +125,12 @@ impl<V: 'static> TitleBar<V> {
                             .child(icon_button::<IconButton>("icons/radix/speaker-loud.svg"))
                             .child(icon_button::<IconButton>("icons/radix/desktop.svg")),
                     )
-                    .child(div().px_2().flex().items_center().child(avatar(
-                        "https://avatars.githubusercontent.com/u/1714999?v=4",
-                        Shape::RoundedRectangle,
-                    ))),
+                    .child(
+                        div().px_2().flex().items_center().child(
+                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
+                                .shape(Shape::RoundedRectangle),
+                        ),
+                    ),
             )
     }
 }

From fd10b4974214cecb892c960a17d665fc350225bd Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 13 Sep 2023 13:56:13 -0400
Subject: [PATCH 05/22] Fix `.active()` interaction state

Co-Authored-By: Nathan Sobo <1789+nathansobo@users.noreply.github.com>
---
 crates/gpui2/src/elements/pressable.rs        |  13 +-
 crates/storybook/src/components.rs            |   1 -
 .../storybook/src/components/icon_button.rs   |   2 +-
 crates/storybook/src/components/icon_button2  | 123 ------------------
 crates/storybook/src/modules.rs               |   3 +
 crates/storybook/src/modules/chat_panel.rs    |   6 +-
 crates/storybook/src/modules/status_bar.rs    | 109 ++++++++++++++++
 crates/storybook/src/modules/tab_bar.rs       |  10 +-
 crates/storybook/src/modules/title_bar.rs     |  43 +++++-
 crates/storybook/src/storybook.rs             |   7 +-
 crates/storybook/src/workspace.rs             |   3 +-
 11 files changed, 175 insertions(+), 145 deletions(-)
 delete mode 100644 crates/storybook/src/components/icon_button2
 create mode 100644 crates/storybook/src/modules/status_bar.rs

diff --git a/crates/gpui2/src/elements/pressable.rs b/crates/gpui2/src/elements/pressable.rs
index 960342a5e6..7685167773 100644
--- a/crates/gpui2/src/elements/pressable.rs
+++ b/crates/gpui2/src/elements/pressable.rs
@@ -5,7 +5,7 @@ use crate::{
     ViewContext,
 };
 use anyhow::Result;
-use gpui::{geometry::vector::Vector2F, platform::MouseButtonEvent, LayoutId};
+use gpui::{color::Color, geometry::vector::Vector2F, platform::MouseButtonEvent, LayoutId};
 use refineable::{CascadeSlot, Refineable, RefinementCascade};
 use smallvec::SmallVec;
 use std::{cell::Cell, rc::Rc};
@@ -73,10 +73,15 @@ impl<V: 'static, E: Element<V> + Styleable> Element<V> for Pressable<E> {
                 if bounds.contains_point(event.position) {
                     pressed.set(true);
                     cx.repaint();
+                } else {
+                    cx.bubble_event();
                 }
-            } else if pressed.get() {
-                pressed.set(false);
-                cx.repaint();
+            } else {
+                if pressed.get() {
+                    pressed.set(false);
+                    cx.repaint();
+                }
+                cx.bubble_event();
             }
         });
 
diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs
index 36ac1575f5..4860ef28f4 100644
--- a/crates/storybook/src/components.rs
+++ b/crates/storybook/src/components.rs
@@ -12,7 +12,6 @@ mod tool_divider;
 pub use avatar::avatar;
 pub use avatar::Avatar;
 pub use icon_button::icon_button;
-pub use icon_button::IconButton;
 pub use tab::tab;
 pub use tab::Tab;
 pub use tool_divider::tool_divider;
diff --git a/crates/storybook/src/components/icon_button.rs b/crates/storybook/src/components/icon_button.rs
index 32ef1d0ce2..f82979ab7c 100644
--- a/crates/storybook/src/components/icon_button.rs
+++ b/crates/storybook/src/components/icon_button.rs
@@ -12,7 +12,7 @@ pub struct IconButton {
     state: InteractionState,
 }
 
-pub fn icon_button<V: 'static>(path: &'static str) -> IconButton {
+pub fn icon_button(path: &'static str) -> IconButton {
     IconButton {
         path,
         variant: ButtonVariant::default(),
diff --git a/crates/storybook/src/components/icon_button2 b/crates/storybook/src/components/icon_button2
deleted file mode 100644
index 9fe738d5ac..0000000000
--- a/crates/storybook/src/components/icon_button2
+++ /dev/null
@@ -1,123 +0,0 @@
-// use crate::prelude::{ButtonVariant, UIState};
-// use crate::theme::theme;
-// use gpui2::elements::svg;
-// use gpui2::style::{StyleHelpers, Styleable};
-// use gpui2::{elements::div, IntoElement};
-// use gpui2::{Element, ParentElement, ViewContext};
-
-// #[derive(Element)]
-// pub(crate) struct IconButton {
-//     path: &'static str,
-//     variant: ButtonVariant,
-//     state: UIState,
-// }
-
-// pub fn icon_button<V: 'static>(path: &'static str) -> IconButton {
-//     IconButton {
-//         path,
-//         variant: ButtonVariant::Filled,
-//         state: UIState::Default,
-//     }
-// }
-
-// impl IconButton {
-//     fn variant(mut self, variant: ButtonVariant) -> Self {
-//         self.variant = variant;
-
-//         // Example of more interesting setter behavior
-//         // FilledButtons must be disabled
-//         if self.variant == ButtonVariant::Filled {
-//             self.state = UIState::Disabled;
-//         }
-
-//         self
-//     }
-
-//     fn state(mut self, state: UIState) -> Self {
-//         // Example of more interesting setter behavior:
-//         // GhostButtons Cannot be disabled
-//         // Debug asserts are compiled out when we make a new release.
-//         // Useful for making sure developers develop correctly without breaking
-//         // everything
-//         debug_assert!(self.variant != ButtonVariant::Ghost && state != UIState::Disabled);
-
-//         self.state = state;
-//         self
-//     }
-
-//     // const state = {
-//     // foo: "foo",
-//     // bar: "bar"
-//     // } as const
-//     //
-//     // type State = typeof state[keyof typeof something]
-//     //
-//     // type Button {
-//     //      style: State
-//     // }
-//     //
-//     // <Button style="foo" /> State['foo']
-
-//     fn render_warning<V: 'static>(&mut self) -> impl IntoElement<V> {
-//         div()
-//     }
-
-//     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-//         let theme = theme(cx);
-
-//         let icon_color;
-
-//         enum Severity {
-//             Low,
-//             Medium,
-//             High,
-//         }
-
-//         // Enum declaration and match statement example
-//         enum Style {
-//             Error,
-//             Warning(Severity),
-//             Foo,
-//             Bar,
-//             Baz,
-//         }
-
-//         let style = Style::Warning(Severity::High);
-
-//         match style {
-//             Error => return self.render_warning(),
-//             Warning(severity) => match severity {
-//                 Low => {}
-//                 Medium => {}
-//                 High => {}
-//             },
-//             Foo => {}
-//             Bar => {}
-//             Baz => {}
-//         }
-
-//         if self.state == UIState::Disabled {
-//             icon_color = theme.highest.base.disabled.foreground;
-//         } else {
-//             icon_color = theme.highest.base.default.foreground;
-//         }
-
-//         let mut div = div();
-
-//         if self.variant == ButtonVariant::Filled {
-//             div = div.fill(theme.highest.on.default.background);
-//         }
-
-//         div.w_7()
-//             .h_6()
-//             .flex()
-//             .items_center()
-//             .justify_center()
-//             .rounded_md()
-//             .hover()
-//             .fill(theme.highest.base.hovered.background)
-//             .active()
-//             .fill(theme.highest.base.pressed.background)
-//             .child(svg().path(self.path).w_4().h_4().fill(icon_color))
-//     }
-// }
diff --git a/crates/storybook/src/modules.rs b/crates/storybook/src/modules.rs
index 00b323fc5d..a27ea1cc12 100644
--- a/crates/storybook/src/modules.rs
+++ b/crates/storybook/src/modules.rs
@@ -1,7 +1,10 @@
 mod chat_panel;
+mod status_bar;
 mod tab_bar;
 mod title_bar;
 
 pub(crate) use chat_panel::chat_panel;
+pub use status_bar::status_bar;
+pub use status_bar::StatusBar;
 pub(crate) use tab_bar::tab_bar;
 pub(crate) use title_bar::title_bar;
diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/modules/chat_panel.rs
index 9dd4aa5910..73131e5434 100644
--- a/crates/storybook/src/modules/chat_panel.rs
+++ b/crates/storybook/src/modules/chat_panel.rs
@@ -1,6 +1,6 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, IconButton};
+use crate::components::icon_button;
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
@@ -57,8 +57,8 @@ impl<V: 'static> ChatPanel<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button::<IconButton>("icons/plus.svg"))
-                            .child(icon_button::<IconButton>("icons/split.svg")),
+                            .child(icon_button("icons/plus.svg"))
+                            .child(icon_button("icons/split.svg")),
                     ),
             )
     }
diff --git a/crates/storybook/src/modules/status_bar.rs b/crates/storybook/src/modules/status_bar.rs
new file mode 100644
index 0000000000..3b69622337
--- /dev/null
+++ b/crates/storybook/src/modules/status_bar.rs
@@ -0,0 +1,109 @@
+use std::marker::PhantomData;
+
+use crate::components::icon_button;
+use crate::theme::{theme, Theme};
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Default, PartialEq)]
+pub enum Tool {
+    #[default]
+    ProjectPanel,
+    CollaborationPanel,
+    Terminal,
+    Assistant,
+    Feedback,
+    Diagnostics,
+}
+
+struct ToolGroup {
+    active_index: Option<usize>,
+    tools: Vec<Tool>,
+}
+
+impl Default for ToolGroup {
+    fn default() -> Self {
+        ToolGroup {
+            active_index: None,
+            tools: vec![],
+        }
+    }
+}
+
+#[derive(Element)]
+pub struct StatusBar<V: 'static> {
+    view_type: PhantomData<V>,
+    left_tools: Option<ToolGroup>,
+    right_tools: Option<ToolGroup>,
+    bottom_tools: Option<ToolGroup>,
+}
+
+pub fn status_bar<V: 'static>() -> StatusBar<V> {
+    StatusBar {
+        view_type: PhantomData,
+        left_tools: None,
+        right_tools: None,
+        bottom_tools: None,
+    }
+}
+
+impl<V: 'static> StatusBar<V> {
+    pub fn left_tool(mut self, tool: Tool, active_index: Option<usize>) -> Self {
+        self.left_tools = {
+            let mut tools = vec![tool];
+            tools.extend(self.left_tools.take().unwrap_or_default().tools);
+            Some(ToolGroup {
+                active_index,
+                tools,
+            })
+        };
+        self
+    }
+
+    pub fn right_tool(mut self, tool: Tool, active_index: Option<usize>) -> Self {
+        self.right_tools = {
+            let mut tools = vec![tool];
+            tools.extend(self.left_tools.take().unwrap_or_default().tools);
+            Some(ToolGroup {
+                active_index,
+                tools,
+            })
+        };
+        self
+    }
+
+    pub fn bottom_tool(mut self, tool: Tool, active_index: Option<usize>) -> Self {
+        self.bottom_tools = {
+            let mut tools = vec![tool];
+            tools.extend(self.left_tools.take().unwrap_or_default().tools);
+            Some(ToolGroup {
+                active_index,
+                tools,
+            })
+        };
+        self
+    }
+
+    fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .flex()
+            .items_center()
+            .justify_between()
+            .w_full()
+            .fill(theme.lowest.base.default.background)
+            .child(self.left_tools(theme))
+            .child(div())
+    }
+
+    fn left_tools(&self, theme: &Theme) -> impl Element<V> {
+        div()
+            .flex()
+            .items_center()
+            .gap_px()
+            .child(icon_button("icons/folder_tree_16.svg"))
+            .child(icon_button("icons/bolt_16.svg"))
+    }
+}
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/modules/tab_bar.rs
index 1e153bb3c3..bbe1975cdc 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/modules/tab_bar.rs
@@ -1,6 +1,6 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tab, IconButton};
+use crate::components::{icon_button, tab};
 use crate::prelude::InteractionState;
 use crate::theme::theme;
 use gpui2::elements::div::ScrollState;
@@ -43,11 +43,11 @@ impl<V: 'static> TabBar<V> {
                             .items_center()
                             .gap_px()
                             .child(
-                                icon_button::<IconButton>("icons/arrow_left.svg")
+                                icon_button("icons/arrow_left.svg")
                                     .state(InteractionState::Enabled.if_enabled(can_navigate_back)),
                             )
                             .child(
-                                icon_button::<IconButton>("icons/arrow_right.svg").state(
+                                icon_button("icons/arrow_right.svg").state(
                                     InteractionState::Enabled.if_enabled(can_navigate_forward),
                                 ),
                             ),
@@ -83,8 +83,8 @@ impl<V: 'static> TabBar<V> {
                             .flex()
                             .items_center()
                             .gap_px()
-                            .child(icon_button::<IconButton>("icons/plus.svg"))
-                            .child(icon_button::<IconButton>("icons/split.svg")),
+                            .child(icon_button("icons/plus.svg"))
+                            .child(icon_button("icons/split.svg")),
                     ),
             )
     }
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
index 4fb481a328..f5cc293669 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -1,6 +1,6 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, tool_divider, Avatar, IconButton};
+use crate::components::{avatar, icon_button, tool_divider, Avatar};
 use crate::prelude::Shape;
 use crate::theme::theme;
 use gpui2::style::{StyleHelpers, Styleable};
@@ -29,6 +29,37 @@ impl<V: 'static> TitleBar<V> {
             .w_full()
             .h_8()
             .fill(theme.lowest.base.default.background)
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .child(
+                        div()
+                            .px_2()
+                            .flex()
+                            .items_center()
+                            .gap_1()
+                            .child(icon_button("icons/stop_sharing.svg"))
+                            .child(icon_button("icons/exit.svg")),
+                    )
+                    .child(tool_divider())
+                    .child(
+                        div()
+                            .px_2()
+                            .flex()
+                            .items_center()
+                            .gap_1()
+                            .child(icon_button("icons/radix/mic.svg"))
+                            .child(icon_button("icons/radix/speaker-loud.svg"))
+                            .child(icon_button("icons/radix/desktop.svg")),
+                    )
+                    .child(
+                        div().px_2().flex().items_center().child(
+                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
+                                .shape(Shape::RoundedRectangle),
+                        ),
+                    ),
+            )
             .child(
                 div()
                     .flex()
@@ -111,8 +142,8 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(icon_button::<IconButton>("icons/stop_sharing.svg"))
-                            .child(icon_button::<IconButton>("icons/exit.svg")),
+                            .child(icon_button("icons/stop_sharing.svg"))
+                            .child(icon_button("icons/exit.svg")),
                     )
                     .child(tool_divider())
                     .child(
@@ -121,9 +152,9 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(icon_button::<IconButton>("icons/radix/mic.svg"))
-                            .child(icon_button::<IconButton>("icons/radix/speaker-loud.svg"))
-                            .child(icon_button::<IconButton>("icons/radix/desktop.svg")),
+                            .child(icon_button("icons/radix/mic.svg"))
+                            .child(icon_button("icons/radix/speaker-loud.svg"))
+                            .child(icon_button("icons/radix/desktop.svg")),
                     )
                     .child(
                         div().px_2().flex().items_center().child(
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index fc7f861e80..7550256afb 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -2,10 +2,15 @@
 
 use crate::theme::Theme;
 use ::theme as legacy_theme;
+use components::icon_button;
 use element_ext::ElementExt;
-use gpui2::{serde_json, vec2f, view, Element, RectF, ViewContext, WindowBounds};
+use gpui2::{
+    elements::div, serde_json, style::StyleHelpers, vec2f, view, Element, ParentElement, RectF,
+    ViewContext, WindowBounds,
+};
 use legacy_theme::ThemeSettings;
 use log::LevelFilter;
+use modules::title_bar;
 use settings::{default_settings, SettingsStore};
 use simplelog::SimpleLogger;
 
diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs
index 4772552647..3e7d467f80 100644
--- a/crates/storybook/src/workspace.rs
+++ b/crates/storybook/src/workspace.rs
@@ -1,6 +1,6 @@
 use crate::{
     collab_panel::collab_panel,
-    modules::{chat_panel, tab_bar, title_bar},
+    modules::{chat_panel, status_bar, tab_bar, title_bar},
     theme::theme,
 };
 use gpui2::{
@@ -59,6 +59,7 @@ impl WorkspaceElement {
                     .child(chat_panel(self.right_scroll_state.clone())),
             )
             .child(statusbar())
+            .child(status_bar())
     }
 }
 

From 70a91c5426007d0bf6501d97b0e2dcb73221f300 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Fri, 15 Sep 2023 11:41:21 -0400
Subject: [PATCH 06/22] Checkpoint

---
 crates/gpui2/src/elements/pressable.rs        |  2 +-
 crates/storybook/src/components.rs            |  3 +
 .../storybook/src/components/text_button.rs   | 81 +++++++++++++++++++
 crates/storybook/src/modules/tab_bar.rs       |  2 +-
 crates/storybook/src/modules/title_bar.rs     | 68 ++--------------
 crates/storybook/src/storybook.rs             |  7 +-
 6 files changed, 92 insertions(+), 71 deletions(-)
 create mode 100644 crates/storybook/src/components/text_button.rs

diff --git a/crates/gpui2/src/elements/pressable.rs b/crates/gpui2/src/elements/pressable.rs
index 7685167773..30e853bf39 100644
--- a/crates/gpui2/src/elements/pressable.rs
+++ b/crates/gpui2/src/elements/pressable.rs
@@ -5,7 +5,7 @@ use crate::{
     ViewContext,
 };
 use anyhow::Result;
-use gpui::{color::Color, geometry::vector::Vector2F, platform::MouseButtonEvent, LayoutId};
+use gpui::{geometry::vector::Vector2F, platform::MouseButtonEvent, LayoutId};
 use refineable::{CascadeSlot, Refineable, RefinementCascade};
 use smallvec::SmallVec;
 use std::{cell::Cell, rc::Rc};
diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs
index 4860ef28f4..e407bd43f8 100644
--- a/crates/storybook/src/components.rs
+++ b/crates/storybook/src/components.rs
@@ -7,6 +7,7 @@ use std::{marker::PhantomData, rc::Rc};
 mod avatar;
 mod icon_button;
 mod tab;
+mod text_button;
 mod tool_divider;
 
 pub use avatar::avatar;
@@ -14,6 +15,8 @@ pub use avatar::Avatar;
 pub use icon_button::icon_button;
 pub use tab::tab;
 pub use tab::Tab;
+pub use text_button::text_button;
+pub use text_button::TextButton;
 pub use tool_divider::tool_divider;
 pub use tool_divider::ToolDivider;
 
diff --git a/crates/storybook/src/components/text_button.rs b/crates/storybook/src/components/text_button.rs
new file mode 100644
index 0000000000..24fd1eb5d3
--- /dev/null
+++ b/crates/storybook/src/components/text_button.rs
@@ -0,0 +1,81 @@
+use crate::prelude::{ButtonVariant, InteractionState};
+use crate::theme::theme;
+use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct TextButton {
+    label: &'static str,
+    variant: ButtonVariant,
+    state: InteractionState,
+}
+
+pub fn text_button(label: &'static str) -> TextButton {
+    TextButton {
+        label,
+        variant: ButtonVariant::default(),
+        state: InteractionState::default(),
+    }
+}
+
+impl TextButton {
+    pub fn variant(mut self, variant: ButtonVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    pub fn state(mut self, state: InteractionState) -> Self {
+        self.state = state;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        let text_color_default;
+        let text_color_hover;
+        let text_color_active;
+
+        let background_color_default;
+        let background_color_hover;
+        let background_color_active;
+
+        let div = div();
+
+        match self.variant {
+            ButtonVariant::Ghost => {
+                text_color_default = theme.lowest.base.default.foreground;
+                text_color_hover = theme.lowest.base.hovered.foreground;
+                text_color_active = theme.lowest.base.pressed.foreground;
+                background_color_default = theme.lowest.base.default.background;
+                background_color_hover = theme.lowest.base.hovered.background;
+                background_color_active = theme.lowest.base.pressed.background;
+            }
+            ButtonVariant::Filled => {
+                text_color_default = theme.lowest.base.default.foreground;
+                text_color_hover = theme.lowest.base.hovered.foreground;
+                text_color_active = theme.lowest.base.pressed.foreground;
+                background_color_default = theme.lowest.on.default.background;
+                background_color_hover = theme.lowest.on.hovered.background;
+                background_color_active = theme.lowest.on.pressed.background;
+            }
+        };
+        div.h_6()
+            .px_1()
+            .flex()
+            .items_center()
+            .justify_center()
+            .rounded_md()
+            .text_xs()
+            .text_color(text_color_default)
+            .fill(background_color_default)
+            .hover()
+            .text_color(text_color_hover)
+            .fill(background_color_hover)
+            .active()
+            .text_color(text_color_active)
+            .fill(background_color_active)
+            .child(self.label.clone())
+    }
+}
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/modules/tab_bar.rs
index bbe1975cdc..c2536ad06c 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/modules/tab_bar.rs
@@ -57,7 +57,7 @@ impl<V: 'static> TabBar<V> {
                 div().w_0().flex_1().h_full().child(
                     div()
                         .flex()
-                        .gap_8()
+                        .gap_1()
                         .overflow_x_scroll(self.scroll_state.clone())
                         .child(tab("Cargo.toml", false))
                         .child(tab("Channels Panel", true))
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
index f5cc293669..675a3d0dd2 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -1,9 +1,9 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, tool_divider, Avatar};
-use crate::prelude::Shape;
+use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
+use crate::prelude::{ButtonVariant, Shape};
 use crate::theme::theme;
-use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
 
@@ -29,37 +29,6 @@ impl<V: 'static> TitleBar<V> {
             .w_full()
             .h_8()
             .fill(theme.lowest.base.default.background)
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .child(
-                        div()
-                            .px_2()
-                            .flex()
-                            .items_center()
-                            .gap_1()
-                            .child(icon_button("icons/stop_sharing.svg"))
-                            .child(icon_button("icons/exit.svg")),
-                    )
-                    .child(tool_divider())
-                    .child(
-                        div()
-                            .px_2()
-                            .flex()
-                            .items_center()
-                            .gap_1()
-                            .child(icon_button("icons/radix/mic.svg"))
-                            .child(icon_button("icons/radix/speaker-loud.svg"))
-                            .child(icon_button("icons/radix/desktop.svg")),
-                    )
-                    .child(
-                        div().px_2().flex().items_center().child(
-                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
-                                .shape(Shape::RoundedRectangle),
-                        ),
-                    ),
-            )
             .child(
                 div()
                     .flex()
@@ -101,35 +70,8 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(
-                                div()
-                                    .h_full()
-                                    .flex()
-                                    .items_center()
-                                    .justify_center()
-                                    .px_2()
-                                    .rounded_md()
-                                    .hover()
-                                    .fill(theme.lowest.base.hovered.background)
-                                    .active()
-                                    .fill(theme.lowest.base.pressed.background)
-                                    .child(div().text_sm().child("project")),
-                            )
-                            .child(
-                                div()
-                                    .h_full()
-                                    .flex()
-                                    .items_center()
-                                    .justify_center()
-                                    .px_2()
-                                    .rounded_md()
-                                    .text_color(theme.lowest.variant.default.foreground)
-                                    .hover()
-                                    .fill(theme.lowest.base.hovered.background)
-                                    .active()
-                                    .fill(theme.lowest.base.pressed.background)
-                                    .child(div().text_sm().child("branch")),
-                            ),
+                            .child(text_button("zed"))
+                            .child(text_button("nate/gpui2-ui-components")),
                     ),
             )
             .child(
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index 7550256afb..fc7f861e80 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -2,15 +2,10 @@
 
 use crate::theme::Theme;
 use ::theme as legacy_theme;
-use components::icon_button;
 use element_ext::ElementExt;
-use gpui2::{
-    elements::div, serde_json, style::StyleHelpers, vec2f, view, Element, ParentElement, RectF,
-    ViewContext, WindowBounds,
-};
+use gpui2::{serde_json, vec2f, view, Element, RectF, ViewContext, WindowBounds};
 use legacy_theme::ThemeSettings;
 use log::LevelFilter;
-use modules::title_bar;
 use settings::{default_settings, SettingsStore};
 use simplelog::SimpleLogger;
 

From d6f24feb4a15f17952ca5af29b8f5f732e1053ab Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Fri, 15 Sep 2023 14:14:28 -0400
Subject: [PATCH 07/22] WIP

---
 assets/icons/stop_sharing.svg              |  5 +++
 crates/storybook/src/modules/status_bar.rs | 47 +++++++++++++++++++---
 crates/storybook/src/modules/title_bar.rs  |  8 ++--
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 assets/icons/stop_sharing.svg

diff --git a/assets/icons/stop_sharing.svg b/assets/icons/stop_sharing.svg
new file mode 100644
index 0000000000..b0f06f68eb
--- /dev/null
+++ b/assets/icons/stop_sharing.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.70312 4L7.26046 2.97339C7.10239 2.60679 6.74141 2.36933 6.34219 2.36933H2.5C2.22386 2.36933 2 2.59319 2 2.86933V4.375V8" stroke="#11181C" stroke-width="1.25" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.07812 4C7.07812 3.65482 7.35795 3.375 7.70312 3.375H7.71945H7.73568H7.75182H7.76787H7.78382H7.79968H7.81546H7.83114H7.84673H7.86223H7.87763H7.89295H7.90818H7.92333H7.93838H7.95334H7.96822H7.98301H7.99771H8.01232H8.02685H8.04129H8.05565H8.06992H8.08411H8.09821H8.11222H8.12615H8.14H8.15377H8.16745H8.18105H8.19456H8.208H8.22135H8.23462H8.24781H8.26092H8.27394H8.28689H8.29976H8.31255H8.32526H8.33789H8.35044H8.36292H8.37532H8.38764H8.39988H8.41204H8.42413H8.43615H8.44809H8.45995H8.47174H8.48345H8.49509H8.50666H8.51815H8.52957H8.54091H8.55219H8.56339H8.57452H8.58557H8.59656H8.60748H8.61832H8.6291H8.6398H8.65044H8.661H8.6715H8.68193H8.69229H8.70258H8.71281H8.72297H8.73306H8.74309H8.75305H8.76294H8.77277H8.78254H8.79223H8.80187H8.81144H8.82095H8.83039H8.83977H8.84909H8.85835H8.86754H8.87667H8.88575H8.89476H8.90371H8.9126H8.92143H8.9302H8.93891H8.94756H8.95615H8.96469H8.97317H8.98159H8.98995H8.99826H9.00651H9.0147H9.02284H9.03092H9.03895H9.04692H9.05484H9.06271H9.07052H9.07827H9.08598H9.09363H9.10123H9.10878H9.11627H9.12372H9.13111H9.13845H9.14575H9.15299H9.16018H9.16733H9.17442H9.18147H9.18846H9.19541H9.20232H9.20917H9.21598H9.22274H9.22946H9.23613H9.24275H9.24933H9.25587H9.26236H9.2688H9.27521H9.28157H9.28788H9.29415H9.30038H9.30657H9.31272H9.31883H9.32489H9.33091H9.3369H9.34284H9.34874H9.35461H9.36043H9.36622H9.37197H9.37768H9.38335H9.38899H9.39459H9.40015H9.40567H9.41116H9.41662H9.42204H9.42742H9.43277H9.43809H9.44337H9.44862H9.45383H9.45901H9.46416H9.46928H9.47437H9.47942H9.48445H9.48944H9.4944H9.49933H9.50424H9.50911H9.51395H9.51877H9.52355H9.52831H9.53304H9.53775H9.54243H9.54708H9.5517H9.5563H9.56087H9.56542H9.56994H9.57444H9.57891H9.58336H9.58778H9.59219H9.59657H9.60092H9.60526H9.60957H9.61386H9.61813H9.62238H9.62661H9.63082H9.63501H9.63918H9.64333H9.64746H9.65157H9.65567H9.65975H9.66381H9.66785H9.67188H9.67588H9.67988H9.68386H9.68782H9.69177H9.6957H9.69962H9.70352H9.70741H9.71129H9.71516H9.71901H9.72285H9.72668H9.73049H9.7343H9.73809H9.74188H9.74565H9.74941H9.75317H9.75691H9.76065H9.76438H9.7681H9.77181H9.77551H9.77921H9.7829H9.78658H9.79026H9.79393H9.7976H9.80126H9.80492H9.80857H9.81222H9.81586H9.8195H9.82314H9.82678H9.83041H9.83404H9.83767H9.8413H9.84493H9.84855H9.85218H9.85581H9.85943H9.86306H9.86669H9.87032H9.87395H9.87758H9.88122H9.88486H9.8885H9.89215H9.8958H9.89945H9.90311H9.90677H9.91044H9.91411H9.91779H9.92148H9.92517H9.92887H9.93258H9.93629H9.94001H9.94375H9.94748H9.95123H9.95499H9.95876H9.96253H9.96632H9.97012H9.97393H9.97775H9.98158H9.98542H9.98928H9.99315H9.99703H10.0009H10.0048H10.0088H10.0127H10.0167H10.0206H10.0246H10.0286H10.0326H10.0366H10.0407H10.0448H10.0488H10.0529H10.0571H10.0612H10.0654H10.0695H10.0737H10.078H10.0822H10.0864H10.0907H10.095H10.0993H10.1037H10.108H10.1124H10.1168H10.1213H10.1257H10.1302H10.1347H10.1393H10.1438H10.1484H10.153H10.1576H10.1623H10.167H10.1717H10.1764H10.1812H10.186H10.1908H10.1957H10.2006H10.2055H10.2104H10.2154H10.2204H10.2254H10.2305H10.2356H10.2407H10.2459H10.2511H10.2563H10.2615H10.2668H10.2722H10.2775H10.2829H10.2884H10.2938H10.2993H10.3049H10.3104H10.3161H10.3217H10.3274H10.3331H10.3389H10.3447H10.3505H10.3564H10.3623H10.3683H10.3743H10.3803H10.3864H10.3925H10.3987H10.4049H10.4111H10.4174H10.4237H10.4301H10.4365H10.443H10.4495H10.456H10.4626H10.4693H10.4759H10.4827H10.4895H10.4963H10.5032H10.5101H10.517H10.5241H10.5311H10.5382H10.5454H10.5526H10.5599H10.5672H10.5745H10.5819H10.5894H10.5969H10.6045H10.6121H10.6198H10.6275H10.6353H10.6431H10.651H10.6589H10.6669H10.6749H10.683H10.6912H10.6994H10.7077H10.716H10.7244H10.7328H10.7413H10.7499H10.7585H10.7672H10.7759H10.7847H10.7935H10.8025H10.8114H10.8205H10.8296H10.8387H10.8479H10.8572H10.8665H10.8759H10.8854H10.8949H10.9045H10.9142H10.9239H10.9337H10.9435H10.9535H10.9634H10.9735H10.9836H10.9938H11.004H11.0144H11.0247H11.0352H11.0457H11.0563H11.067H11.0777H11.0885H11.0994H11.1103H11.1213H11.1324H11.1435H11.1548H11.1661H11.1774H11.1889H11.2004H11.212H11.2237H11.2354H11.2472H11.2591H11.2711H11.2831H11.2952H11.3074H11.3197H11.332H11.3444H11.3569H11.3695H11.3822H11.3949H11.4077H11.4206H11.4336H11.4467H11.4598H11.473H11.4863H11.4997C12.1205 3.375 12.625 3.87818 12.625 4.5V4.92724L12.6065 4.9457L11.375 6.17606V4.625H11.3695H11.3569H11.3444H11.332H11.3197H11.3074H11.2952H11.2831H11.2711H11.2591H11.2472H11.2354H11.2237H11.212H11.2004H11.1889H11.1774H11.1661H11.1548H11.1435H11.1324H11.1213H11.1103H11.0994H11.0885H11.0777H11.067H11.0563H11.0457H11.0352H11.0247H11.0144H11.004H10.9938H10.9836H10.9735H10.9634H10.9535H10.9435H10.9337H10.9239H10.9142H10.9045H10.8949H10.8854H10.8759H10.8665H10.8572H10.8479H10.8387H10.8296H10.8205H10.8114H10.8025H10.7935H10.7847H10.7759H10.7672H10.7585H10.7499H10.7413H10.7328H10.7244H10.716H10.7077H10.6994H10.6912H10.683H10.6749H10.6669H10.6589H10.651H10.6431H10.6353H10.6275H10.6198H10.6121H10.6045H10.5969H10.5894H10.5819H10.5745H10.5672H10.5599H10.5526H10.5454H10.5382H10.5311H10.5241H10.517H10.5101H10.5032H10.4963H10.4895H10.4827H10.4759H10.4693H10.4626H10.456H10.4495H10.443H10.4365H10.4301H10.4237H10.4174H10.4111H10.4049H10.3987H10.3925H10.3864H10.3803H10.3743H10.3683H10.3623H10.3564H10.3505H10.3447H10.3389H10.3331H10.3274H10.3217H10.3161H10.3104H10.3049H10.2993H10.2938H10.2884H10.2829H10.2775H10.2722H10.2668H10.2615H10.2563H10.2511H10.2459H10.2407H10.2356H10.2305H10.2254H10.2204H10.2154H10.2104H10.2055H10.2006H10.1957H10.1908H10.186H10.1812H10.1764H10.1717H10.167H10.1623H10.1576H10.153H10.1484H10.1438H10.1393H10.1347H10.1302H10.1257H10.1213H10.1168H10.1124H10.108H10.1037H10.0993H10.095H10.0907H10.0864H10.0822H10.078H10.0737H10.0695H10.0654H10.0612H10.0571H10.0529H10.0488H10.0448H10.0407H10.0366H10.0326H10.0286H10.0246H10.0206H10.0167H10.0127H10.0088H10.0048H10.0009H9.99703H9.99315H9.98928H9.98542H9.98158H9.97775H9.97393H9.97012H9.96632H9.96253H9.95876H9.95499H9.95123H9.94748H9.94375H9.94001H9.93629H9.93258H9.92887H9.92517H9.92148H9.91779H9.91411H9.91044H9.90677H9.90311H9.89945H9.8958H9.89215H9.8885H9.88486H9.88122H9.87758H9.87395H9.87032H9.86669H9.86306H9.85943H9.85581H9.85218H9.84855H9.84493H9.8413H9.83767H9.83404H9.83041H9.82678H9.82314H9.8195H9.81586H9.81222H9.80857H9.80492H9.80126H9.7976H9.79393H9.79026H9.78658H9.7829H9.77921H9.77551H9.77181H9.7681H9.76438H9.76065H9.75691H9.75317H9.74941H9.74565H9.74188H9.73809H9.7343H9.73049H9.72668H9.72285H9.71901H9.71516H9.71129H9.70741H9.70352H9.69962H9.6957H9.69177H9.68782H9.68386H9.67988H9.67588H9.67188H9.66785H9.66381H9.65975H9.65567H9.65157H9.64746H9.64333H9.63918H9.63501H9.63082H9.62661H9.62238H9.61813H9.61386H9.60957H9.60526H9.60092H9.59657H9.59219H9.58778H9.58336H9.57891H9.57444H9.56994H9.56542H9.56087H9.5563H9.5517H9.54708H9.54243H9.53775H9.53304H9.52831H9.52355H9.51877H9.51395H9.50911H9.50424H9.49933H9.4944H9.48944H9.48445H9.47942H9.47437H9.46928H9.46416H9.45901H9.45383H9.44862H9.44337H9.43809H9.43277H9.42742H9.42204H9.41662H9.41116H9.40567H9.40015H9.39459H9.38899H9.38335H9.37768H9.37197H9.36622H9.36043H9.35461H9.34874H9.34284H9.3369H9.33091H9.32489H9.31883H9.31272H9.30657H9.30038H9.29415H9.28788H9.28157H9.27521H9.2688H9.26236H9.25587H9.24933H9.24275H9.23613H9.22946H9.22274H9.21598H9.20917H9.20232H9.19541H9.18846H9.18147H9.17442H9.16733H9.16018H9.15299H9.14575H9.13845H9.13111H9.12372H9.11627H9.10878H9.10123H9.09363H9.08598H9.07827H9.07052H9.06271H9.05484H9.04692H9.03895H9.03092H9.02284H9.0147H9.00651H8.99826H8.98995H8.98159H8.97317H8.96469H8.95615H8.94756H8.93891H8.9302H8.92143H8.9126H8.90371H8.89476H8.88575H8.87667H8.86754H8.85835H8.84909H8.83977H8.83039H8.82095H8.81144H8.80187H8.79223H8.78254H8.77277H8.76294H8.75305H8.74309H8.73306H8.72297H8.71281H8.70258H8.69229H8.68193H8.6715H8.661H8.65044H8.6398H8.6291H8.61832H8.60748H8.59656H8.58557H8.57452H8.56339H8.55219H8.54091H8.52957H8.51815H8.50666H8.49509H8.48345H8.47174H8.45995H8.44809H8.43615H8.42413H8.41204H8.39988H8.38764H8.37532H8.36292H8.35044H8.33789H8.32526H8.31255H8.29976H8.28689H8.27394H8.26092H8.24781H8.23462H8.22135H8.208H8.19456H8.18105H8.16745H8.15377H8.14H8.12615H8.11222H8.09821H8.08411H8.06992H8.05565H8.04129H8.02685H8.01232H7.99771H7.98301H7.96822H7.95334H7.93838H7.92333H7.90818H7.89295H7.87763H7.86223H7.84673H7.83114H7.81546H7.79968H7.78382H7.76787H7.75182H7.73568H7.71945H7.70312C7.35795 4.625 7.07812 4.34518 7.07812 4ZM6.5465 11H2.625V5H1.375V11.125C1.375 11.7463 1.87868 12.25 2.5 12.25H5.29532L5.94495 11.601L6.5465 11Z" fill="#11181C"/>
+<path d="M12 7.31372L7.31372 12M12 12L7.31372 7.31372" stroke="#11181C" stroke-width="1.25" stroke-linecap="round"/>
+</svg>
diff --git a/crates/storybook/src/modules/status_bar.rs b/crates/storybook/src/modules/status_bar.rs
index 3b69622337..feb883a33a 100644
--- a/crates/storybook/src/modules/status_bar.rs
+++ b/crates/storybook/src/modules/status_bar.rs
@@ -1,6 +1,6 @@
 use std::marker::PhantomData;
 
-use crate::components::icon_button;
+use crate::components::{icon_button, tool_divider};
 use crate::theme::{theme, Theme};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
@@ -89,21 +89,58 @@ impl<V: 'static> StatusBar<V> {
         let theme = theme(cx);
 
         div()
+            .py_0p5()
+            .px_1()
             .flex()
             .items_center()
             .justify_between()
             .w_full()
             .fill(theme.lowest.base.default.background)
             .child(self.left_tools(theme))
-            .child(div())
+            .child(self.right_tools(theme))
     }
 
     fn left_tools(&self, theme: &Theme) -> impl Element<V> {
         div()
             .flex()
             .items_center()
-            .gap_px()
-            .child(icon_button("icons/folder_tree_16.svg"))
-            .child(icon_button("icons/bolt_16.svg"))
+            .gap_1()
+            .child(icon_button("icons/project.svg"))
+            .child(icon_button("icons/hash.svg"))
+            .child(tool_divider())
+            .child(icon_button("icons/error.svg"))
+    }
+    fn right_tools(&self, theme: &Theme) -> impl Element<V> {
+        div()
+            .flex()
+            .items_center()
+            .gap_2()
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_1()
+                    .child(div().px_1().text_xs().child("116:25"))
+                    .child(div().px_1().text_xs().child("Rust")),
+            )
+            .child(tool_divider())
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_1()
+                    .child(icon_button("icons/copilot.svg"))
+                    .child(icon_button("icons/feedback.svg")),
+            )
+            .child(tool_divider())
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_1()
+                    .child(icon_button("icons/terminal.svg"))
+                    .child(icon_button("icons/conversations.svg"))
+                    .child(icon_button("icons/ai.svg")),
+            )
     }
 }
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/modules/title_bar.rs
index 675a3d0dd2..59ec1227f4 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/modules/title_bar.rs
@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
 use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
-use crate::prelude::{ButtonVariant, Shape};
+use crate::prelude::Shape;
 use crate::theme::theme;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
@@ -94,9 +94,9 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
-                            .child(icon_button("icons/radix/mic.svg"))
-                            .child(icon_button("icons/radix/speaker-loud.svg"))
-                            .child(icon_button("icons/radix/desktop.svg")),
+                            .child(icon_button("icons/mic.svg"))
+                            .child(icon_button("icons/speaker-loud.svg"))
+                            .child(icon_button("icons/desktop.svg")),
                     )
                     .child(
                         div().px_2().flex().items_center().child(

From 9f2a9d43b1c23365dd88e08ed5c717619843e631 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Fri, 15 Sep 2023 16:34:56 -0400
Subject: [PATCH 08/22] Organize design system under `ui`

---
 crates/storybook/src/components.rs            |  16 -
 crates/storybook/src/modules.rs               |  10 -
 crates/storybook/src/storybook.rs             |   2 +-
 crates/storybook/src/ui.rs                    |  21 +
 crates/storybook/src/ui/component.rs          |   1 +
 .../src/{components => ui/component}/tab.rs   |   0
 crates/storybook/src/ui/element.rs            |   4 +
 .../src/{components => ui/element}/avatar.rs  |   2 +-
 .../{components => ui/element}/icon_button.rs |   0
 .../{components => ui/element}/text_button.rs |   0
 .../element}/tool_divider.rs                  |   0
 crates/storybook/src/ui/module.rs             |   4 +
 .../src/{modules => ui/module}/chat_panel.rs  |   2 +-
 .../src/{modules => ui/module}/status_bar.rs  |   6 +-
 .../src/{modules => ui/module}/tab_bar.rs     |   2 +-
 .../src/{modules => ui/module}/title_bar.rs   |   4 +-
 crates/storybook/src/workspace.rs             | 398 +-----------------
 17 files changed, 43 insertions(+), 429 deletions(-)
 delete mode 100644 crates/storybook/src/modules.rs
 create mode 100644 crates/storybook/src/ui.rs
 create mode 100644 crates/storybook/src/ui/component.rs
 rename crates/storybook/src/{components => ui/component}/tab.rs (100%)
 create mode 100644 crates/storybook/src/ui/element.rs
 rename crates/storybook/src/{components => ui/element}/avatar.rs (92%)
 rename crates/storybook/src/{components => ui/element}/icon_button.rs (100%)
 rename crates/storybook/src/{components => ui/element}/text_button.rs (100%)
 rename crates/storybook/src/{components => ui/element}/tool_divider.rs (100%)
 create mode 100644 crates/storybook/src/ui/module.rs
 rename crates/storybook/src/{modules => ui/module}/chat_panel.rs (97%)
 rename crates/storybook/src/{modules => ui/module}/status_bar.rs (95%)
 rename crates/storybook/src/{modules => ui/module}/tab_bar.rs (98%)
 rename crates/storybook/src/{modules => ui/module}/title_bar.rs (95%)

diff --git a/crates/storybook/src/components.rs b/crates/storybook/src/components.rs
index e407bd43f8..1aafefc1a6 100644
--- a/crates/storybook/src/components.rs
+++ b/crates/storybook/src/components.rs
@@ -4,22 +4,6 @@ use gpui2::{
 };
 use std::{marker::PhantomData, rc::Rc};
 
-mod avatar;
-mod icon_button;
-mod tab;
-mod text_button;
-mod tool_divider;
-
-pub use avatar::avatar;
-pub use avatar::Avatar;
-pub use icon_button::icon_button;
-pub use tab::tab;
-pub use tab::Tab;
-pub use text_button::text_button;
-pub use text_button::TextButton;
-pub use tool_divider::tool_divider;
-pub use tool_divider::ToolDivider;
-
 struct ButtonHandlers<V, D> {
     click: Option<Rc<dyn Fn(&mut V, &D, &mut EventContext<V>)>>,
 }
diff --git a/crates/storybook/src/modules.rs b/crates/storybook/src/modules.rs
deleted file mode 100644
index a27ea1cc12..0000000000
--- a/crates/storybook/src/modules.rs
+++ /dev/null
@@ -1,10 +0,0 @@
-mod chat_panel;
-mod status_bar;
-mod tab_bar;
-mod title_bar;
-
-pub(crate) use chat_panel::chat_panel;
-pub use status_bar::status_bar;
-pub use status_bar::StatusBar;
-pub(crate) use tab_bar::tab_bar;
-pub(crate) use title_bar::title_bar;
diff --git a/crates/storybook/src/storybook.rs b/crates/storybook/src/storybook.rs
index fc7f861e80..df1db7b8c2 100644
--- a/crates/storybook/src/storybook.rs
+++ b/crates/storybook/src/storybook.rs
@@ -12,9 +12,9 @@ use simplelog::SimpleLogger;
 mod collab_panel;
 mod components;
 mod element_ext;
-mod modules;
 mod prelude;
 mod theme;
+mod ui;
 mod workspace;
 
 gpui2::actions! {
diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
new file mode 100644
index 0000000000..fecb36412e
--- /dev/null
+++ b/crates/storybook/src/ui.rs
@@ -0,0 +1,21 @@
+mod component;
+mod element;
+mod module;
+
+pub use component::tab::tab;
+pub use component::tab::Tab;
+
+pub use module::chat_panel::chat_panel;
+pub use module::status_bar::status_bar;
+pub use module::status_bar::StatusBar;
+pub use module::tab_bar::tab_bar;
+pub use module::title_bar::title_bar;
+
+pub use element::avatar::avatar;
+pub use element::avatar::Avatar;
+pub use element::icon_button::icon_button;
+pub use element::icon_button::IconButton;
+pub use element::text_button::text_button;
+pub use element::text_button::TextButton;
+pub use element::tool_divider::tool_divider;
+pub use element::tool_divider::ToolDivider;
diff --git a/crates/storybook/src/ui/component.rs b/crates/storybook/src/ui/component.rs
new file mode 100644
index 0000000000..c87bc82d9b
--- /dev/null
+++ b/crates/storybook/src/ui/component.rs
@@ -0,0 +1 @@
+pub(crate) mod tab;
diff --git a/crates/storybook/src/components/tab.rs b/crates/storybook/src/ui/component/tab.rs
similarity index 100%
rename from crates/storybook/src/components/tab.rs
rename to crates/storybook/src/ui/component/tab.rs
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
new file mode 100644
index 0000000000..382da0f731
--- /dev/null
+++ b/crates/storybook/src/ui/element.rs
@@ -0,0 +1,4 @@
+pub(crate) mod avatar;
+pub(crate) mod icon_button;
+pub(crate) mod text_button;
+pub(crate) mod tool_divider;
diff --git a/crates/storybook/src/components/avatar.rs b/crates/storybook/src/ui/element/avatar.rs
similarity index 92%
rename from crates/storybook/src/components/avatar.rs
rename to crates/storybook/src/ui/element/avatar.rs
index 6e136977c8..bfa4ed0175 100644
--- a/crates/storybook/src/components/avatar.rs
+++ b/crates/storybook/src/ui/element/avatar.rs
@@ -13,7 +13,7 @@ pub struct Avatar {
     shape: Shape,
 }
 
-pub fn avatar<V: 'static>(src: impl Into<ArcCow<'static, str>>) -> Avatar {
+pub fn avatar(src: impl Into<ArcCow<'static, str>>) -> Avatar {
     Avatar {
         src: src.into(),
         shape: Shape::Circle,
diff --git a/crates/storybook/src/components/icon_button.rs b/crates/storybook/src/ui/element/icon_button.rs
similarity index 100%
rename from crates/storybook/src/components/icon_button.rs
rename to crates/storybook/src/ui/element/icon_button.rs
diff --git a/crates/storybook/src/components/text_button.rs b/crates/storybook/src/ui/element/text_button.rs
similarity index 100%
rename from crates/storybook/src/components/text_button.rs
rename to crates/storybook/src/ui/element/text_button.rs
diff --git a/crates/storybook/src/components/tool_divider.rs b/crates/storybook/src/ui/element/tool_divider.rs
similarity index 100%
rename from crates/storybook/src/components/tool_divider.rs
rename to crates/storybook/src/ui/element/tool_divider.rs
diff --git a/crates/storybook/src/ui/module.rs b/crates/storybook/src/ui/module.rs
new file mode 100644
index 0000000000..a84bd67165
--- /dev/null
+++ b/crates/storybook/src/ui/module.rs
@@ -0,0 +1,4 @@
+pub(crate) mod chat_panel;
+pub(crate) mod status_bar;
+pub(crate) mod tab_bar;
+pub(crate) mod title_bar;
diff --git a/crates/storybook/src/modules/chat_panel.rs b/crates/storybook/src/ui/module/chat_panel.rs
similarity index 97%
rename from crates/storybook/src/modules/chat_panel.rs
rename to crates/storybook/src/ui/module/chat_panel.rs
index 73131e5434..de4428826b 100644
--- a/crates/storybook/src/modules/chat_panel.rs
+++ b/crates/storybook/src/ui/module/chat_panel.rs
@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
-use crate::components::icon_button;
 use crate::theme::theme;
+use crate::ui::icon_button;
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
diff --git a/crates/storybook/src/modules/status_bar.rs b/crates/storybook/src/ui/module/status_bar.rs
similarity index 95%
rename from crates/storybook/src/modules/status_bar.rs
rename to crates/storybook/src/ui/module/status_bar.rs
index feb883a33a..f34cfa88ef 100644
--- a/crates/storybook/src/modules/status_bar.rs
+++ b/crates/storybook/src/ui/module/status_bar.rs
@@ -1,7 +1,7 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tool_divider};
 use crate::theme::{theme, Theme};
+use crate::ui::{icon_button, text_button, tool_divider};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -120,8 +120,8 @@ impl<V: 'static> StatusBar<V> {
                     .flex()
                     .items_center()
                     .gap_1()
-                    .child(div().px_1().text_xs().child("116:25"))
-                    .child(div().px_1().text_xs().child("Rust")),
+                    .child(text_button("116:25"))
+                    .child(text_button("Rust")),
             )
             .child(tool_divider())
             .child(
diff --git a/crates/storybook/src/modules/tab_bar.rs b/crates/storybook/src/ui/module/tab_bar.rs
similarity index 98%
rename from crates/storybook/src/modules/tab_bar.rs
rename to crates/storybook/src/ui/module/tab_bar.rs
index c2536ad06c..9b96171f2f 100644
--- a/crates/storybook/src/modules/tab_bar.rs
+++ b/crates/storybook/src/ui/module/tab_bar.rs
@@ -1,8 +1,8 @@
 use std::marker::PhantomData;
 
-use crate::components::{icon_button, tab};
 use crate::prelude::InteractionState;
 use crate::theme::theme;
+use crate::ui::{icon_button, tab};
 use gpui2::elements::div::ScrollState;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
diff --git a/crates/storybook/src/modules/title_bar.rs b/crates/storybook/src/ui/module/title_bar.rs
similarity index 95%
rename from crates/storybook/src/modules/title_bar.rs
rename to crates/storybook/src/ui/module/title_bar.rs
index 59ec1227f4..9aab5a2d5e 100644
--- a/crates/storybook/src/modules/title_bar.rs
+++ b/crates/storybook/src/ui/module/title_bar.rs
@@ -1,8 +1,8 @@
 use std::marker::PhantomData;
 
-use crate::components::{avatar, icon_button, text_button, tool_divider, Avatar, TextButton};
 use crate::prelude::Shape;
 use crate::theme::theme;
+use crate::ui::{avatar, icon_button, text_button, tool_divider};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -100,7 +100,7 @@ impl<V: 'static> TitleBar<V> {
                     )
                     .child(
                         div().px_2().flex().items_center().child(
-                            avatar::<Avatar>("https://avatars.githubusercontent.com/u/1714999?v=4")
+                            avatar("https://avatars.githubusercontent.com/u/1714999?v=4")
                                 .shape(Shape::RoundedRectangle),
                         ),
                     ),
diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs
index 1bcbc79b32..5aae506832 100644
--- a/crates/storybook/src/workspace.rs
+++ b/crates/storybook/src/workspace.rs
@@ -1,11 +1,11 @@
 use crate::{
     collab_panel::collab_panel,
-    modules::{chat_panel, status_bar, tab_bar, title_bar},
     theme::theme,
+    ui::{chat_panel, status_bar, tab_bar, title_bar},
 };
 use gpui2::{
-    elements::{div, div::ScrollState, img, svg},
-    style::{StyleHelpers, Styleable},
+    elements::{div, div::ScrollState},
+    style::StyleHelpers,
     Element, IntoElement, ParentElement, ViewContext,
 };
 
@@ -33,7 +33,7 @@ impl WorkspaceElement {
             .justify_start()
             .items_start()
             .text_color(theme.lowest.base.default.foreground)
-            .fill(theme.middle.base.default.background)
+            .fill(theme.lowest.base.default.background)
             .child(title_bar())
             .child(
                 div()
@@ -58,396 +58,6 @@ impl WorkspaceElement {
                     )
                     .child(chat_panel(self.right_scroll_state.clone())),
             )
-            .child(statusbar())
             .child(status_bar())
     }
 }
-
-#[derive(Element)]
-struct TitleBar;
-
-pub fn titlebar<V: 'static>() -> impl Element<V> {
-    TitleBar
-}
-
-impl TitleBar {
-    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .justify_between()
-            .w_full()
-            .h_8()
-            .fill(theme.lowest.base.default.background)
-            .child(self.left_group(cx))
-            .child(self.right_group(cx))
-    }
-
-    fn left_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_4()
-            .px_2()
-            // === Traffic Lights === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_2()
-                    .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.positive.default.foreground),
-                    )
-                    .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.warning.default.foreground),
-                    )
-                    .child(
-                        div()
-                            .w_3()
-                            .h_3()
-                            .rounded_full()
-                            .fill(theme.lowest.negative.default.foreground),
-                    ),
-            )
-            // === Project Info === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .child(
-                        div()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .px_2()
-                            .rounded_md()
-                            .hover()
-                            .fill(theme.lowest.base.hovered.background)
-                            .active()
-                            .fill(theme.lowest.base.pressed.background)
-                            .child(div().text_sm().child("project")),
-                    )
-                    .child(
-                        div()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .px_2()
-                            .rounded_md()
-                            .text_color(theme.lowest.variant.default.foreground)
-                            .hover()
-                            .fill(theme.lowest.base.hovered.background)
-                            .active()
-                            .fill(theme.lowest.base.pressed.background)
-                            .child(div().text_sm().child("branch")),
-                    ),
-            )
-    }
-
-    fn right_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_3()
-            .px_2()
-            // === Actions === //
-            .child(
-                div().child(
-                    div().flex().items_center().gap_1().child(
-                        div().size_4().flex().items_center().justify_center().child(
-                            svg()
-                                .path("icons/exit.svg")
-                                .size_4()
-                                .fill(theme.lowest.base.default.foreground),
-                        ),
-                    ),
-                ),
-            )
-            .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
-            // === Comms === //
-            .child(
-                div().child(
-                    div()
-                        .flex()
-                        .items_center()
-                        .gap_px()
-                        .child(
-                            div()
-                                .px_2()
-                                .py_1()
-                                .rounded_md()
-                                .h_full()
-                                .flex()
-                                .items_center()
-                                .justify_center()
-                                .hover()
-                                .fill(theme.lowest.base.hovered.background)
-                                .active()
-                                .fill(theme.lowest.base.pressed.background)
-                                .child(
-                                    svg()
-                                        .path("icons/microphone.svg")
-                                        .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
-                                ),
-                        )
-                        .child(
-                            div()
-                                .px_2()
-                                .py_1()
-                                .rounded_md()
-                                .h_full()
-                                .flex()
-                                .items_center()
-                                .justify_center()
-                                .hover()
-                                .fill(theme.lowest.base.hovered.background)
-                                .active()
-                                .fill(theme.lowest.base.pressed.background)
-                                .child(
-                                    svg()
-                                        .path("icons/speaker-loud.svg")
-                                        .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
-                                ),
-                        )
-                        .child(
-                            div()
-                                .px_2()
-                                .py_1()
-                                .rounded_md()
-                                .h_full()
-                                .flex()
-                                .items_center()
-                                .justify_center()
-                                .hover()
-                                .fill(theme.lowest.base.hovered.background)
-                                .active()
-                                .fill(theme.lowest.base.pressed.background)
-                                .child(
-                                    svg()
-                                        .path("icons/desktop.svg")
-                                        .size_3p5()
-                                        .fill(theme.lowest.base.default.foreground),
-                                ),
-                        ),
-                ),
-            )
-            .child(div().w_px().h_3().fill(theme.lowest.base.default.border))
-            // User Group
-            .child(
-                div().child(
-                    div()
-                        .px_1()
-                        .py_1()
-                        .flex()
-                        .items_center()
-                        .justify_center()
-                        .rounded_md()
-                        .gap_0p5()
-                        .hover()
-                        .fill(theme.lowest.base.hovered.background)
-                        .active()
-                        .fill(theme.lowest.base.pressed.background)
-                        .child(
-                            img()
-                                .uri("https://avatars.githubusercontent.com/u/1714999?v=4")
-                                .size_4()
-                                .rounded_md()
-                                .fill(theme.middle.on.default.foreground),
-                        )
-                        .child(
-                            svg()
-                                .path("icons/caret_down.svg")
-                                .w_2()
-                                .h_2()
-                                .fill(theme.lowest.variant.default.foreground),
-                        ),
-                ),
-            )
-    }
-}
-
-// ================================================================================ //
-
-#[derive(Element)]
-struct StatusBar;
-
-pub fn statusbar<V: 'static>() -> impl Element<V> {
-    StatusBar
-}
-
-impl StatusBar {
-    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .justify_between()
-            .w_full()
-            .h_8()
-            .fill(theme.lowest.base.default.background)
-            .child(self.left_group(cx))
-            .child(self.right_group(cx))
-    }
-
-    fn left_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_4()
-            .px_2()
-            // === Tools === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/project.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
-                            ),
-                    )
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/conversations.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
-                            ),
-                    )
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/file_icons/notebook.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.accent.default.foreground),
-                            ),
-                    ),
-            )
-            // === Diagnostics === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_2()
-                    .child(
-                        div()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .gap_0p5()
-                            .px_1()
-                            .text_color(theme.lowest.variant.default.foreground)
-                            .hover()
-                            .fill(theme.lowest.base.hovered.background)
-                            .active()
-                            .fill(theme.lowest.base.pressed.background)
-                            .child(
-                                svg()
-                                    .path("icons/error.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.negative.default.foreground),
-                            )
-                            .child(div().text_sm().child("2")),
-                    )
-                    .child(
-                        div()
-                            .text_sm()
-                            .text_color(theme.lowest.variant.default.foreground)
-                            .child("Something is wrong"),
-                    ),
-            )
-    }
-
-    fn right_group<V: 'static>(&mut self, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
-        let theme = theme(cx);
-        div()
-            .flex()
-            .items_center()
-            .h_full()
-            .gap_4()
-            .px_2()
-            // === Tools === //
-            .child(
-                div()
-                    .flex()
-                    .items_center()
-                    .gap_1()
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/check_circle.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.base.default.foreground),
-                            ),
-                    )
-                    .child(
-                        div()
-                            .w_6()
-                            .h_full()
-                            .flex()
-                            .items_center()
-                            .justify_center()
-                            .child(
-                                svg()
-                                    .path("icons/copilot.svg")
-                                    .w_4()
-                                    .h_4()
-                                    .fill(theme.lowest.accent.default.foreground),
-                            ),
-                    ),
-            )
-    }
-}

From db1dacde5da0f923f230ac157b9ea22ca9e96dfd Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Fri, 15 Sep 2023 22:10:51 -0400
Subject: [PATCH 09/22] Add facepile, indicator, follow_group

---
 crates/storybook/src/prelude.rs               |  2 +-
 crates/storybook/src/ui.rs                    | 27 +++++-----
 crates/storybook/src/ui/component.rs          |  2 +
 crates/storybook/src/ui/component/facepile.rs | 31 +++++++++++
 .../src/ui/component/follow_group.rs          | 52 +++++++++++++++++++
 crates/storybook/src/ui/element.rs            |  1 +
 crates/storybook/src/ui/element/avatar.rs     |  2 +-
 crates/storybook/src/ui/element/indicator.rs  | 32 ++++++++++++
 crates/storybook/src/ui/module/title_bar.rs   | 12 ++++-
 9 files changed, 142 insertions(+), 19 deletions(-)
 create mode 100644 crates/storybook/src/ui/component/facepile.rs
 create mode 100644 crates/storybook/src/ui/component/follow_group.rs
 create mode 100644 crates/storybook/src/ui/element/indicator.rs

diff --git a/crates/storybook/src/prelude.rs b/crates/storybook/src/prelude.rs
index 50ab042cfe..e53514a5a8 100644
--- a/crates/storybook/src/prelude.rs
+++ b/crates/storybook/src/prelude.rs
@@ -5,7 +5,7 @@ pub enum ButtonVariant {
     Filled,
 }
 
-#[derive(Default, PartialEq)]
+#[derive(Default, PartialEq, Clone, Copy)]
 pub enum Shape {
     #[default]
     Circle,
diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
index fecb36412e..9597db2cde 100644
--- a/crates/storybook/src/ui.rs
+++ b/crates/storybook/src/ui.rs
@@ -2,20 +2,17 @@ mod component;
 mod element;
 mod module;
 
-pub use component::tab::tab;
-pub use component::tab::Tab;
+pub use component::facepile::*;
+pub use component::follow_group::*;
+pub use component::tab::*;
 
-pub use module::chat_panel::chat_panel;
-pub use module::status_bar::status_bar;
-pub use module::status_bar::StatusBar;
-pub use module::tab_bar::tab_bar;
-pub use module::title_bar::title_bar;
+pub use module::chat_panel::*;
+pub use module::status_bar::*;
+pub use module::tab_bar::*;
+pub use module::title_bar::*;
 
-pub use element::avatar::avatar;
-pub use element::avatar::Avatar;
-pub use element::icon_button::icon_button;
-pub use element::icon_button::IconButton;
-pub use element::text_button::text_button;
-pub use element::text_button::TextButton;
-pub use element::tool_divider::tool_divider;
-pub use element::tool_divider::ToolDivider;
+pub use element::avatar::*;
+pub use element::icon_button::*;
+pub use element::indicator::*;
+pub use element::text_button::*;
+pub use element::tool_divider::*;
diff --git a/crates/storybook/src/ui/component.rs b/crates/storybook/src/ui/component.rs
index c87bc82d9b..8e99b60483 100644
--- a/crates/storybook/src/ui/component.rs
+++ b/crates/storybook/src/ui/component.rs
@@ -1 +1,3 @@
+pub(crate) mod facepile;
+pub(crate) mod follow_group;
 pub(crate) mod tab;
diff --git a/crates/storybook/src/ui/component/facepile.rs b/crates/storybook/src/ui/component/facepile.rs
new file mode 100644
index 0000000000..1a2b2a98f6
--- /dev/null
+++ b/crates/storybook/src/ui/component/facepile.rs
@@ -0,0 +1,31 @@
+use crate::theme::theme;
+use crate::ui::Avatar;
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct Facepile {
+    players: Vec<Avatar>,
+}
+
+pub fn facepile(players: Vec<Avatar>) -> Facepile {
+    Facepile { players }
+}
+
+impl Facepile {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+        let player_list = self
+            .players
+            .iter()
+            .map(|player| div().right_1().child(player.clone()));
+
+        div()
+            .relative()
+            .p_1()
+            .flex()
+            .items_center()
+            .children(player_list)
+    }
+}
diff --git a/crates/storybook/src/ui/component/follow_group.rs b/crates/storybook/src/ui/component/follow_group.rs
new file mode 100644
index 0000000000..5d79b8fc06
--- /dev/null
+++ b/crates/storybook/src/ui/component/follow_group.rs
@@ -0,0 +1,52 @@
+use crate::theme::theme;
+use crate::ui::{facepile, indicator, Avatar};
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct FollowGroup {
+    player: usize,
+    players: Vec<Avatar>,
+}
+
+pub fn follow_group(players: Vec<Avatar>) -> FollowGroup {
+    FollowGroup { player: 0, players }
+}
+
+impl FollowGroup {
+    pub fn player(mut self, player: usize) -> Self {
+        self.player = player;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+        let player_bg = theme.players[self.player].selection;
+
+        div()
+            .h_full()
+            .flex()
+            .flex_col()
+            .gap_px()
+            .justify_center()
+            .child(
+                div()
+                    .flex()
+                    .justify_center()
+                    .w_full()
+                    .child(indicator().player(self.player)),
+            )
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .justify_center()
+                    .h_6()
+                    .px_1()
+                    .rounded_lg()
+                    .fill(player_bg)
+                    .child(facepile(self.players.clone())),
+            )
+    }
+}
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
index 382da0f731..dde718c40b 100644
--- a/crates/storybook/src/ui/element.rs
+++ b/crates/storybook/src/ui/element.rs
@@ -1,4 +1,5 @@
 pub(crate) mod avatar;
 pub(crate) mod icon_button;
+pub(crate) mod indicator;
 pub(crate) mod text_button;
 pub(crate) mod tool_divider;
diff --git a/crates/storybook/src/ui/element/avatar.rs b/crates/storybook/src/ui/element/avatar.rs
index bfa4ed0175..cc25587c8d 100644
--- a/crates/storybook/src/ui/element/avatar.rs
+++ b/crates/storybook/src/ui/element/avatar.rs
@@ -7,7 +7,7 @@ use gpui2::{Element, ViewContext};
 
 pub type UnknownString = ArcCow<'static, str>;
 
-#[derive(Element)]
+#[derive(Element, Clone)]
 pub struct Avatar {
     src: ArcCow<'static, str>,
     shape: Shape,
diff --git a/crates/storybook/src/ui/element/indicator.rs b/crates/storybook/src/ui/element/indicator.rs
new file mode 100644
index 0000000000..b905892f1a
--- /dev/null
+++ b/crates/storybook/src/ui/element/indicator.rs
@@ -0,0 +1,32 @@
+use crate::theme::theme;
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ViewContext};
+
+#[derive(Element)]
+pub struct Indicator {
+    player: usize,
+}
+
+pub fn indicator() -> Indicator {
+    Indicator { player: 0 }
+}
+
+impl Indicator {
+    pub fn player(mut self, player: usize) -> Self {
+        self.player = player;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+        let player_color = theme.players[self.player].cursor;
+
+        div()
+            .w_4()
+            .h_1()
+            .rounded_bl_sm()
+            .rounded_br_sm()
+            .fill(player_color)
+    }
+}
diff --git a/crates/storybook/src/ui/module/title_bar.rs b/crates/storybook/src/ui/module/title_bar.rs
index 9aab5a2d5e..a41d56476f 100644
--- a/crates/storybook/src/ui/module/title_bar.rs
+++ b/crates/storybook/src/ui/module/title_bar.rs
@@ -2,7 +2,7 @@ use std::marker::PhantomData;
 
 use crate::prelude::Shape;
 use crate::theme::theme;
-use crate::ui::{avatar, icon_button, text_button, tool_divider};
+use crate::ui::{avatar, follow_group, icon_button, text_button, tool_divider};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -21,6 +21,10 @@ pub fn title_bar<V: 'static>() -> TitleBar<V> {
 impl<V: 'static> TitleBar<V> {
     fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
+        let player_list = vec![
+            avatar("https://avatars.githubusercontent.com/u/1714999?v=4"),
+            avatar("https://avatars.githubusercontent.com/u/1714999?v=4"),
+        ];
 
         div()
             .flex()
@@ -70,9 +74,13 @@ impl<V: 'static> TitleBar<V> {
                             .flex()
                             .items_center()
                             .gap_1()
+                            .child(text_button("maxbrunsfeld"))
                             .child(text_button("zed"))
                             .child(text_button("nate/gpui2-ui-components")),
-                    ),
+                    )
+                    .child(follow_group(player_list.clone()).player(0))
+                    .child(follow_group(player_list.clone()).player(1))
+                    .child(follow_group(player_list.clone()).player(2)),
             )
             .child(
                 div()

From b725cadf48a0268c3b7f5fa82c3c50180f2416ab Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 18 Sep 2023 19:59:01 -0400
Subject: [PATCH 10/22] Checkpoint

---
 crates/storybook/src/prelude.rs               |  7 ++
 crates/storybook/src/ui.rs                    |  3 +
 crates/storybook/src/ui/element.rs            |  2 +
 crates/storybook/src/ui/element/input.rs      | 99 +++++++++++++++++++
 crates/storybook/src/ui/element/label.rs      | 49 +++++++++
 crates/storybook/src/ui/module.rs             |  1 +
 .../storybook/src/ui/module/project_panel.rs  | 65 ++++++++++++
 crates/storybook/src/workspace.rs             |  5 +-
 8 files changed, 228 insertions(+), 3 deletions(-)
 create mode 100644 crates/storybook/src/ui/element/input.rs
 create mode 100644 crates/storybook/src/ui/element/label.rs
 create mode 100644 crates/storybook/src/ui/module/project_panel.rs

diff --git a/crates/storybook/src/prelude.rs b/crates/storybook/src/prelude.rs
index e53514a5a8..8f01357406 100644
--- a/crates/storybook/src/prelude.rs
+++ b/crates/storybook/src/prelude.rs
@@ -5,6 +5,13 @@ pub enum ButtonVariant {
     Filled,
 }
 
+#[derive(Default, PartialEq)]
+pub enum InputVariant {
+    #[default]
+    Ghost,
+    Filled,
+}
+
 #[derive(Default, PartialEq, Clone, Copy)]
 pub enum Shape {
     #[default]
diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
index 9597db2cde..f2b020882d 100644
--- a/crates/storybook/src/ui.rs
+++ b/crates/storybook/src/ui.rs
@@ -7,6 +7,7 @@ pub use component::follow_group::*;
 pub use component::tab::*;
 
 pub use module::chat_panel::*;
+pub use module::project_panel::*;
 pub use module::status_bar::*;
 pub use module::tab_bar::*;
 pub use module::title_bar::*;
@@ -14,5 +15,7 @@ pub use module::title_bar::*;
 pub use element::avatar::*;
 pub use element::icon_button::*;
 pub use element::indicator::*;
+pub use element::input::*;
+pub use element::label::*;
 pub use element::text_button::*;
 pub use element::tool_divider::*;
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
index dde718c40b..145c4d1ecb 100644
--- a/crates/storybook/src/ui/element.rs
+++ b/crates/storybook/src/ui/element.rs
@@ -1,5 +1,7 @@
 pub(crate) mod avatar;
 pub(crate) mod icon_button;
 pub(crate) mod indicator;
+pub(crate) mod input;
+pub(crate) mod label;
 pub(crate) mod text_button;
 pub(crate) mod tool_divider;
diff --git a/crates/storybook/src/ui/element/input.rs b/crates/storybook/src/ui/element/input.rs
new file mode 100644
index 0000000000..310287797c
--- /dev/null
+++ b/crates/storybook/src/ui/element/input.rs
@@ -0,0 +1,99 @@
+use crate::prelude::{InputVariant, InteractionState};
+use crate::theme::theme;
+use gpui2::style::{StyleHelpers, Styleable};
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct Input {
+    placeholder: &'static str,
+    value: String,
+    state: InteractionState,
+    variant: InputVariant,
+}
+
+pub fn input(placeholder: &'static str) -> Input {
+    Input {
+        placeholder,
+        value: "".to_string(),
+        state: InteractionState::default(),
+        variant: InputVariant::default(),
+    }
+}
+
+impl Input {
+    pub fn value(mut self, value: String) -> Self {
+        self.value = value;
+        self
+    }
+    pub fn state(mut self, state: InteractionState) -> Self {
+        self.state = state;
+        self
+    }
+    pub fn variant(mut self, variant: InputVariant) -> Self {
+        self.variant = variant;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        let text_el;
+        let text_color;
+        let background_color_default;
+        let background_color_active;
+
+        let mut border_color_default = theme.middle.base.default.border;
+        let mut border_color_hover = theme.middle.base.hovered.border;
+        let mut border_color_active = theme.middle.base.pressed.border;
+        let border_color_focus = theme.middle.base.pressed.background;
+
+        match self.variant {
+            InputVariant::Ghost => {
+                background_color_default = theme.middle.base.default.background;
+                background_color_active = theme.middle.base.active.background;
+            }
+            InputVariant::Filled => {
+                background_color_default = theme.middle.on.default.background;
+                background_color_active = theme.middle.on.active.background;
+            }
+        };
+
+        if self.state == InteractionState::Focused {
+            border_color_default = theme.players[0].cursor;
+            border_color_hover = theme.players[0].cursor;
+            border_color_active = theme.players[0].cursor;
+        }
+
+        if self.state == InteractionState::Focused || self.state == InteractionState::Active {
+            text_el = self.value.clone();
+            text_color = theme.lowest.base.default.foreground;
+        } else {
+            text_el = self.placeholder.to_string().clone();
+            text_color = theme.lowest.base.disabled.foreground;
+        }
+
+        div()
+            .h_7()
+            .px_2()
+            .border()
+            .border_color(border_color_default)
+            .fill(background_color_default)
+            .hover()
+            .border_color(border_color_hover)
+            .active()
+            .border_color(border_color_active)
+            .fill(background_color_active)
+            .flex()
+            .items_center()
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .text_sm()
+                    .text_color(text_color)
+                    .child(text_el)
+                    .child(div().text_color(theme.players[0].cursor).child("|")),
+            )
+    }
+}
diff --git a/crates/storybook/src/ui/element/label.rs b/crates/storybook/src/ui/element/label.rs
new file mode 100644
index 0000000000..6ebe38b90b
--- /dev/null
+++ b/crates/storybook/src/ui/element/label.rs
@@ -0,0 +1,49 @@
+use crate::theme::theme;
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{Element, ViewContext};
+use gpui2::{IntoElement, ParentElement};
+
+#[derive(Default, PartialEq, Copy, Clone)]
+pub enum LabelColor {
+    #[default]
+    Default,
+    Created,
+    Modified,
+    Deleted,
+    Hidden,
+}
+
+#[derive(Element, Clone)]
+pub struct Label {
+    label: &'static str,
+    color: LabelColor,
+}
+
+pub fn label(label: &'static str) -> Label {
+    Label {
+        label: "Label",
+        color: LabelColor::Default,
+    }
+}
+
+impl Label {
+    pub fn color(mut self, color: LabelColor) -> Self {
+        self.color = color;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        let color = match self.color {
+            LabelColor::Default => theme.lowest.base.default.foreground,
+            LabelColor::Created => theme.lowest.positive.default.foreground,
+            LabelColor::Modified => theme.lowest.warning.default.foreground,
+            LabelColor::Deleted => theme.lowest.negative.default.foreground,
+            LabelColor::Hidden => theme.lowest.variant.default.foreground,
+        };
+
+        div().text_sm().text_color(color).child(self.label.clone())
+    }
+}
diff --git a/crates/storybook/src/ui/module.rs b/crates/storybook/src/ui/module.rs
index a84bd67165..a261fffcd6 100644
--- a/crates/storybook/src/ui/module.rs
+++ b/crates/storybook/src/ui/module.rs
@@ -1,4 +1,5 @@
 pub(crate) mod chat_panel;
+pub(crate) mod project_panel;
 pub(crate) mod status_bar;
 pub(crate) mod tab_bar;
 pub(crate) mod title_bar;
diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs
new file mode 100644
index 0000000000..d954b9e6ce
--- /dev/null
+++ b/crates/storybook/src/ui/module/project_panel.rs
@@ -0,0 +1,65 @@
+use crate::{
+    prelude::InteractionState,
+    theme::theme,
+    ui::{input, label, LabelColor},
+};
+use gpui2::{
+    elements::{div, div::ScrollState},
+    style::StyleHelpers,
+    ParentElement, ViewContext,
+};
+use gpui2::{Element, IntoElement};
+use std::marker::PhantomData;
+
+#[derive(Element)]
+pub struct ProjectPanel<V: 'static> {
+    view_type: PhantomData<V>,
+    scroll_state: ScrollState,
+}
+
+pub fn project_panel<V: 'static>(scroll_state: ScrollState) -> ProjectPanel<V> {
+    ProjectPanel {
+        view_type: PhantomData,
+        scroll_state,
+    }
+}
+
+impl<V: 'static> ProjectPanel<V> {
+    fn render(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .w_64()
+            .h_full()
+            .flex()
+            .flex_col()
+            .fill(theme.middle.base.default.background)
+            .child(
+                div()
+                    .w_full()
+                    .flex()
+                    .flex_col()
+                    .overflow_y_scroll(self.scroll_state.clone())
+                    .child(
+                        div().py_2().flex().flex_col().children(
+                            std::iter::repeat_with(|| {
+                                vec![
+                                    label("File"),
+                                    label("Modified File").color(LabelColor::Modified),
+                                    label("Created File").color(LabelColor::Created),
+                                    label("Deleted File").color(LabelColor::Deleted),
+                                    label("Hidden File").color(LabelColor::Hidden),
+                                ]
+                            })
+                            .take(60)
+                            .flatten(),
+                        ),
+                    ),
+            )
+            .child(
+                input("Find something...")
+                    .value("buffe".to_string())
+                    .state(InteractionState::Focused),
+            )
+    }
+}
diff --git a/crates/storybook/src/workspace.rs b/crates/storybook/src/workspace.rs
index 5aae506832..3127bcf837 100644
--- a/crates/storybook/src/workspace.rs
+++ b/crates/storybook/src/workspace.rs
@@ -1,7 +1,6 @@
 use crate::{
-    collab_panel::collab_panel,
     theme::theme,
-    ui::{chat_panel, status_bar, tab_bar, title_bar},
+    ui::{chat_panel, project_panel, status_bar, tab_bar, title_bar},
 };
 use gpui2::{
     elements::{div, div::ScrollState},
@@ -42,7 +41,7 @@ impl WorkspaceElement {
                     .flex()
                     .flex_row()
                     .overflow_hidden()
-                    .child(collab_panel(self.left_scroll_state.clone()))
+                    .child(project_panel(self.left_scroll_state.clone()))
                     .child(
                         div()
                             .h_full()

From a5e4ceb735361481c9933f6879f8eca049976b52 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@zed.dev>
Date: Mon, 18 Sep 2023 19:48:22 -0600
Subject: [PATCH 11/22] Checkpoint: Add methods for setting arbitrary lengths

---
 crates/gpui/src/geometry.rs                   | 21 +++--
 crates/gpui2/src/style.rs                     | 23 +----
 crates/gpui2_macros/src/styleable_helpers.rs  | 83 ++++++++++++++++---
 crates/storybook/src/ui/component/facepile.rs |  2 +
 4 files changed, 90 insertions(+), 39 deletions(-)

diff --git a/crates/gpui/src/geometry.rs b/crates/gpui/src/geometry.rs
index c83ad73b5d..d1b8302ad4 100644
--- a/crates/gpui/src/geometry.rs
+++ b/crates/gpui/src/geometry.rs
@@ -1,12 +1,12 @@
-use std::fmt::Debug;
-
 use super::scene::{Path, PathVertex};
 use crate::{color::Color, json::ToJson};
+use derive_more::Neg;
 pub use pathfinder_geometry::*;
 use rect::RectF;
 use refineable::Refineable;
 use serde::{Deserialize, Deserializer};
 use serde_json::json;
+use std::fmt::Debug;
 use vector::{vec2f, Vector2F};
 
 pub struct PathBuilder {
@@ -235,6 +235,17 @@ pub struct Edges<T: Clone + Default + Debug> {
     pub left: T,
 }
 
+impl<T: Clone + Default + Debug> Edges<T> {
+    pub fn uniform(value: T) -> Self {
+        Self {
+            top: value.clone(),
+            right: value.clone(),
+            bottom: value.clone(),
+            left: value.clone(),
+        }
+    }
+}
+
 impl Edges<Length> {
     pub fn auto() -> Self {
         Self {
@@ -322,7 +333,7 @@ impl Edges<f32> {
     }
 }
 
-#[derive(Clone, Copy)]
+#[derive(Clone, Copy, Neg)]
 pub enum AbsoluteLength {
     Pixels(f32),
     Rems(f32),
@@ -360,7 +371,7 @@ impl Default for AbsoluteLength {
 }
 
 /// A non-auto length that can be defined in pixels, rems, or percent of parent.
-#[derive(Clone, Copy)]
+#[derive(Clone, Copy, Neg)]
 pub enum DefiniteLength {
     Absolute(AbsoluteLength),
     Relative(f32), // 0. to 1.
@@ -404,7 +415,7 @@ impl Default for DefiniteLength {
 }
 
 /// A length that can be defined in pixels, rems, percent of parent, or auto.
-#[derive(Clone, Copy)]
+#[derive(Clone, Copy, Neg)]
 pub enum Length {
     Definite(DefiniteLength),
     Auto,
diff --git a/crates/gpui2/src/style.rs b/crates/gpui2/src/style.rs
index e3e0f5b0c4..688883416f 100644
--- a/crates/gpui2/src/style.rs
+++ b/crates/gpui2/src/style.rs
@@ -314,6 +314,8 @@ pub trait Styleable {
     }
 }
 
+use crate as gpui2;
+
 // Helpers methods that take and return mut self. This includes tailwind style methods for standard sizes etc.
 //
 // Example:
@@ -322,27 +324,6 @@ pub trait Styleable {
 pub trait StyleHelpers: Styleable<Style = Style> {
     styleable_helpers!();
 
-    fn h(mut self, height: Length) -> Self
-    where
-        Self: Sized,
-    {
-        self.declared_style().size.height = Some(height);
-        self
-    }
-
-    /// size_{n}: Sets width & height to {n}
-    ///
-    /// Example:
-    /// size_1: Sets width & height to 1
-    fn size(mut self, size: Length) -> Self
-    where
-        Self: Sized,
-    {
-        self.declared_style().size.height = Some(size);
-        self.declared_style().size.width = Some(size);
-        self
-    }
-
     fn full(mut self) -> Self
     where
         Self: Sized,
diff --git a/crates/gpui2_macros/src/styleable_helpers.rs b/crates/gpui2_macros/src/styleable_helpers.rs
index d5d76ff33b..bd93e2fea0 100644
--- a/crates/gpui2_macros/src/styleable_helpers.rs
+++ b/crates/gpui2_macros/src/styleable_helpers.rs
@@ -28,28 +28,58 @@ fn generate_methods() -> Vec<TokenStream2> {
     let mut methods = Vec::new();
 
     for (prefix, auto_allowed, fields) in box_prefixes() {
+        methods.push(generate_method_with_parameter(
+            prefix,
+            if auto_allowed {
+                quote! { Length }
+            } else {
+                quote! { DefiniteLength }
+            },
+            &fields,
+        ));
+
         for (suffix, length_tokens, doc_string) in box_suffixes() {
-            if auto_allowed || suffix != "auto" {
-                let method = generate_method(prefix, suffix, &fields, length_tokens, doc_string);
-                methods.push(method);
+            if suffix != "auto" || auto_allowed {
+                methods.push(generate_method(
+                    prefix,
+                    suffix,
+                    &fields,
+                    length_tokens,
+                    doc_string,
+                ));
             }
         }
     }
 
     for (prefix, fields) in corner_prefixes() {
+        methods.push(generate_method_with_parameter(
+            prefix,
+            quote! { AbsoluteLength },
+            &fields,
+        ));
+
         for (suffix, radius_tokens, doc_string) in corner_suffixes() {
-            let method = generate_method(prefix, suffix, &fields, radius_tokens, doc_string);
-            methods.push(method);
+            methods.push(generate_method(
+                prefix,
+                suffix,
+                &fields,
+                radius_tokens,
+                doc_string,
+            ));
         }
     }
 
     for (prefix, fields) in border_prefixes() {
         for (suffix, width_tokens, doc_string) in border_suffixes() {
-            let method = generate_method(prefix, suffix, &fields, width_tokens, doc_string);
-            methods.push(method);
+            methods.push(generate_method(
+                prefix,
+                suffix,
+                &fields,
+                width_tokens,
+                doc_string,
+            ));
         }
     }
-
     methods
 }
 
@@ -70,7 +100,7 @@ fn generate_method(
         .iter()
         .map(|field_tokens| {
             quote! {
-                style.#field_tokens = Some(gpui::geometry::#length_tokens);
+                style.#field_tokens = Some(gpui2::geometry::#length_tokens);
             }
         })
         .collect::<Vec<_>>();
@@ -87,6 +117,33 @@ fn generate_method(
     method
 }
 
+fn generate_method_with_parameter(
+    prefix: &'static str,
+    length_type: TokenStream2,
+    fields: &Vec<TokenStream2>,
+) -> TokenStream2 {
+    let method_name = format_ident!("{}", prefix);
+
+    let field_assignments = fields
+        .iter()
+        .map(|field_tokens| {
+            quote! {
+                style.#field_tokens = Some(length);
+            }
+        })
+        .collect::<Vec<_>>();
+
+    let method = quote! {
+        fn #method_name(mut self, length: gpui2::geometry::#length_type) -> Self where Self: std::marker::Sized {
+            let mut style = self.declared_style();
+            #(#field_assignments)*
+            self
+        }
+    };
+
+    method
+}
+
 fn box_prefixes() -> Vec<(&'static str, bool, Vec<TokenStream2>)> {
     vec![
         ("w", true, vec![quote! { size.width }]),
@@ -96,10 +153,10 @@ fn box_prefixes() -> Vec<(&'static str, bool, Vec<TokenStream2>)> {
             true,
             vec![quote! {size.width}, quote! {size.height}],
         ),
-        ("min_w", false, vec![quote! { min_size.width }]),
-        ("min_h", false, vec![quote! { min_size.height }]),
-        ("max_w", false, vec![quote! { max_size.width }]),
-        ("max_h", false, vec![quote! { max_size.height }]),
+        ("min_w", true, vec![quote! { min_size.width }]),
+        ("min_h", true, vec![quote! { min_size.height }]),
+        ("max_w", true, vec![quote! { max_size.width }]),
+        ("max_h", true, vec![quote! { max_size.height }]),
         (
             "m",
             true,
diff --git a/crates/storybook/src/ui/component/facepile.rs b/crates/storybook/src/ui/component/facepile.rs
index 1a2b2a98f6..8637949d45 100644
--- a/crates/storybook/src/ui/component/facepile.rs
+++ b/crates/storybook/src/ui/component/facepile.rs
@@ -1,5 +1,6 @@
 use crate::theme::theme;
 use crate::ui::Avatar;
+use gpui2::geometry::rems;
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -24,6 +25,7 @@ impl Facepile {
         div()
             .relative()
             .p_1()
+            .mx(rems(-0.125))
             .flex()
             .items_center()
             .children(player_list)

From c7a3186d085bdd10fc723db8bb964b6317e45968 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@zed.dev>
Date: Mon, 18 Sep 2023 20:17:27 -0600
Subject: [PATCH 12/22] Checkpoint

---
 crates/gpui/src/geometry.rs                   | 32 +++++++++----------
 crates/gpui2/src/style.rs                     |  6 ++--
 crates/gpui2_macros/src/styleable_helpers.rs  | 28 +++++++++-------
 crates/storybook/src/ui/component/facepile.rs | 22 ++++++-------
 4 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/crates/gpui/src/geometry.rs b/crates/gpui/src/geometry.rs
index d1b8302ad4..40b0682787 100644
--- a/crates/gpui/src/geometry.rs
+++ b/crates/gpui/src/geometry.rs
@@ -194,8 +194,8 @@ where
 impl Size<DefiniteLength> {
     pub fn zero() -> Self {
         Self {
-            width: pixels(0.),
-            height: pixels(0.),
+            width: pixels(0.).into(),
+            height: pixels(0.).into(),
         }
     }
 
@@ -258,10 +258,10 @@ impl Edges<Length> {
 
     pub fn zero() -> Self {
         Self {
-            top: pixels(0.),
-            right: pixels(0.),
-            bottom: pixels(0.),
-            left: pixels(0.),
+            top: pixels(0.).into(),
+            right: pixels(0.).into(),
+            bottom: pixels(0.).into(),
+            left: pixels(0.).into(),
         }
     }
 
@@ -281,10 +281,10 @@ impl Edges<Length> {
 impl Edges<DefiniteLength> {
     pub fn zero() -> Self {
         Self {
-            top: pixels(0.),
-            right: pixels(0.),
-            bottom: pixels(0.),
-            left: pixels(0.),
+            top: pixels(0.).into(),
+            right: pixels(0.).into(),
+            bottom: pixels(0.).into(),
+            left: pixels(0.).into(),
         }
     }
 
@@ -430,16 +430,16 @@ impl std::fmt::Debug for Length {
     }
 }
 
-pub fn relative<T: From<DefiniteLength>>(fraction: f32) -> T {
-    DefiniteLength::Relative(fraction).into()
+pub fn relative(fraction: f32) -> DefiniteLength {
+    DefiniteLength::Relative(fraction)
 }
 
-pub fn rems<T: From<AbsoluteLength>>(rems: f32) -> T {
-    AbsoluteLength::Rems(rems).into()
+pub fn rems(rems: f32) -> AbsoluteLength {
+    AbsoluteLength::Rems(rems)
 }
 
-pub fn pixels<T: From<AbsoluteLength>>(pixels: f32) -> T {
-    AbsoluteLength::Pixels(pixels).into()
+pub fn pixels(pixels: f32) -> AbsoluteLength {
+    AbsoluteLength::Pixels(pixels)
 }
 
 pub fn auto() -> Length {
diff --git a/crates/gpui2/src/style.rs b/crates/gpui2/src/style.rs
index 688883416f..3e4acd57e7 100644
--- a/crates/gpui2/src/style.rs
+++ b/crates/gpui2/src/style.rs
@@ -328,8 +328,8 @@ pub trait StyleHelpers: Styleable<Style = Style> {
     where
         Self: Sized,
     {
-        self.declared_style().size.width = Some(relative(1.));
-        self.declared_style().size.height = Some(relative(1.));
+        self.declared_style().size.width = Some(relative(1.).into());
+        self.declared_style().size.height = Some(relative(1.).into());
         self
     }
 
@@ -387,7 +387,7 @@ pub trait StyleHelpers: Styleable<Style = Style> {
     {
         self.declared_style().flex_grow = Some(1.);
         self.declared_style().flex_shrink = Some(1.);
-        self.declared_style().flex_basis = Some(relative(0.));
+        self.declared_style().flex_basis = Some(relative(0.).into());
         self
     }
 
diff --git a/crates/gpui2_macros/src/styleable_helpers.rs b/crates/gpui2_macros/src/styleable_helpers.rs
index bd93e2fea0..2bc9c738e9 100644
--- a/crates/gpui2_macros/src/styleable_helpers.rs
+++ b/crates/gpui2_macros/src/styleable_helpers.rs
@@ -28,7 +28,7 @@ fn generate_methods() -> Vec<TokenStream2> {
     let mut methods = Vec::new();
 
     for (prefix, auto_allowed, fields) in box_prefixes() {
-        methods.push(generate_method_with_parameter(
+        methods.push(generate_custom_value_setter(
             prefix,
             if auto_allowed {
                 quote! { Length }
@@ -40,7 +40,7 @@ fn generate_methods() -> Vec<TokenStream2> {
 
         for (suffix, length_tokens, doc_string) in box_suffixes() {
             if suffix != "auto" || auto_allowed {
-                methods.push(generate_method(
+                methods.push(generate_predefined_setter(
                     prefix,
                     suffix,
                     &fields,
@@ -52,14 +52,14 @@ fn generate_methods() -> Vec<TokenStream2> {
     }
 
     for (prefix, fields) in corner_prefixes() {
-        methods.push(generate_method_with_parameter(
+        methods.push(generate_custom_value_setter(
             prefix,
             quote! { AbsoluteLength },
             &fields,
         ));
 
         for (suffix, radius_tokens, doc_string) in corner_suffixes() {
-            methods.push(generate_method(
+            methods.push(generate_predefined_setter(
                 prefix,
                 suffix,
                 &fields,
@@ -71,7 +71,7 @@ fn generate_methods() -> Vec<TokenStream2> {
 
     for (prefix, fields) in border_prefixes() {
         for (suffix, width_tokens, doc_string) in border_suffixes() {
-            methods.push(generate_method(
+            methods.push(generate_predefined_setter(
                 prefix,
                 suffix,
                 &fields,
@@ -83,7 +83,7 @@ fn generate_methods() -> Vec<TokenStream2> {
     methods
 }
 
-fn generate_method(
+fn generate_predefined_setter(
     prefix: &'static str,
     suffix: &'static str,
     fields: &Vec<TokenStream2>,
@@ -100,7 +100,7 @@ fn generate_method(
         .iter()
         .map(|field_tokens| {
             quote! {
-                style.#field_tokens = Some(gpui2::geometry::#length_tokens);
+                style.#field_tokens = Some(gpui2::geometry::#length_tokens.into());
             }
         })
         .collect::<Vec<_>>();
@@ -117,24 +117,28 @@ fn generate_method(
     method
 }
 
-fn generate_method_with_parameter(
+fn generate_custom_value_setter(
     prefix: &'static str,
     length_type: TokenStream2,
     fields: &Vec<TokenStream2>,
 ) -> TokenStream2 {
     let method_name = format_ident!("{}", prefix);
 
-    let field_assignments = fields
-        .iter()
+    let mut iter = fields.into_iter();
+    let last = iter.next_back().unwrap();
+    let field_assignments = iter
         .map(|field_tokens| {
             quote! {
-                style.#field_tokens = Some(length);
+                style.#field_tokens = Some(length.clone().into());
             }
         })
+        .chain(std::iter::once(quote! {
+            style.#last = Some(length.into());
+        }))
         .collect::<Vec<_>>();
 
     let method = quote! {
-        fn #method_name(mut self, length: gpui2::geometry::#length_type) -> Self where Self: std::marker::Sized {
+        fn #method_name(mut self, length: impl std::clone::Clone + Into<gpui2::geometry::#length_type>) -> Self where Self: std::marker::Sized {
             let mut style = self.declared_style();
             #(#field_assignments)*
             self
diff --git a/crates/storybook/src/ui/component/facepile.rs b/crates/storybook/src/ui/component/facepile.rs
index 8637949d45..f0c065fa0e 100644
--- a/crates/storybook/src/ui/component/facepile.rs
+++ b/crates/storybook/src/ui/component/facepile.rs
@@ -17,17 +17,15 @@ pub fn facepile(players: Vec<Avatar>) -> Facepile {
 impl Facepile {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
-        let player_list = self
-            .players
-            .iter()
-            .map(|player| div().right_1().child(player.clone()));
-
-        div()
-            .relative()
-            .p_1()
-            .mx(rems(-0.125))
-            .flex()
-            .items_center()
-            .children(player_list)
+        let player_count = self.players.len();
+        let player_list = self.players.iter().enumerate().map(|(i, player)| {
+            let element = div().child(player.clone());
+            if i < player_count - 1 {
+                element.mr(-rems(0.5))
+            } else {
+                element
+            }
+        });
+        div().p_1().flex().items_center().children(player_list)
     }
 }

From f2e87a34295005846a559fac9ea53e70125c7c9b Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@zed.dev>
Date: Mon, 18 Sep 2023 20:25:12 -0600
Subject: [PATCH 13/22] Add Element::when method

---
 crates/gpui2/src/element.rs                   | 21 +++++++++++++++++++
 crates/storybook/src/ui/component/facepile.rs | 12 +++++------
 2 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/crates/gpui2/src/element.rs b/crates/gpui2/src/element.rs
index ba90a7d7df..aadceddc05 100644
--- a/crates/gpui2/src/element.rs
+++ b/crates/gpui2/src/element.rs
@@ -34,6 +34,27 @@ pub trait Element<V: 'static>: 'static + IntoElement<V> {
             phase: ElementPhase::Init,
         }))
     }
+
+    /// Applies a given function `then` to the current element if `condition` is true.
+    /// This function is used to conditionally modify the element based on a given condition.
+    /// If `condition` is false, it just returns the current element as it is.
+    ///
+    /// # Parameters
+    /// - `self`: The current element
+    /// - `condition`: The boolean condition based on which `then` is applied to the element.
+    /// - `then`: A function that takes in the current element and returns a possibly modified element.
+    ///
+    /// # Return
+    /// It returns the potentially modified element.
+    fn when(mut self, condition: bool, then: impl FnOnce(Self) -> Self) -> Self
+    where
+        Self: Sized,
+    {
+        if condition {
+            self = then(self);
+        }
+        self
+    }
 }
 
 /// Used to make ElementState<V, E> into a trait object, so we can wrap it in AnyElement<V>.
diff --git a/crates/storybook/src/ui/component/facepile.rs b/crates/storybook/src/ui/component/facepile.rs
index f0c065fa0e..38dbc55fb0 100644
--- a/crates/storybook/src/ui/component/facepile.rs
+++ b/crates/storybook/src/ui/component/facepile.rs
@@ -18,13 +18,11 @@ impl Facepile {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
         let player_count = self.players.len();
-        let player_list = self.players.iter().enumerate().map(|(i, player)| {
-            let element = div().child(player.clone());
-            if i < player_count - 1 {
-                element.mr(-rems(0.5))
-            } else {
-                element
-            }
+        let player_list = self.players.iter().enumerate().map(|(ix, player)| {
+            let before_last = ix < player_count - 1;
+            div()
+                .when(before_last, |div| div.mr(-rems(0.5)))
+                .child(player.clone())
         });
         div().p_1().flex().items_center().children(player_list)
     }

From 2701be91e33cb6fd4a3e5c9a6c710482db0b0d6c Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@zed.dev>
Date: Mon, 18 Sep 2023 20:47:40 -0600
Subject: [PATCH 14/22] Add negative style helpers

---
 crates/gpui2_macros/src/styleable_helpers.rs  | 45 ++++++++++++++-----
 crates/storybook/src/ui/component/facepile.rs |  8 ++--
 2 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/crates/gpui2_macros/src/styleable_helpers.rs b/crates/gpui2_macros/src/styleable_helpers.rs
index 2bc9c738e9..238e64ed14 100644
--- a/crates/gpui2_macros/src/styleable_helpers.rs
+++ b/crates/gpui2_macros/src/styleable_helpers.rs
@@ -44,7 +44,19 @@ fn generate_methods() -> Vec<TokenStream2> {
                     prefix,
                     suffix,
                     &fields,
-                    length_tokens,
+                    &length_tokens,
+                    false,
+                    doc_string,
+                ));
+            }
+
+            if suffix != "auto" {
+                methods.push(generate_predefined_setter(
+                    prefix,
+                    suffix,
+                    &fields,
+                    &length_tokens,
+                    true,
                     doc_string,
                 ));
             }
@@ -63,7 +75,8 @@ fn generate_methods() -> Vec<TokenStream2> {
                 prefix,
                 suffix,
                 &fields,
-                radius_tokens,
+                &radius_tokens,
+                false,
                 doc_string,
             ));
         }
@@ -75,7 +88,8 @@ fn generate_methods() -> Vec<TokenStream2> {
                 prefix,
                 suffix,
                 &fields,
-                width_tokens,
+                &width_tokens,
+                false,
                 doc_string,
             ));
         }
@@ -84,23 +98,30 @@ fn generate_methods() -> Vec<TokenStream2> {
 }
 
 fn generate_predefined_setter(
-    prefix: &'static str,
-    suffix: &'static str,
+    name: &'static str,
+    length: &'static str,
     fields: &Vec<TokenStream2>,
-    length_tokens: TokenStream2,
+    length_tokens: &TokenStream2,
+    negate: bool,
     doc_string: &'static str,
 ) -> TokenStream2 {
-    let method_name = if suffix.is_empty() {
-        format_ident!("{}", prefix)
+    let (negation_prefix, negation_token) = if negate {
+        ("neg_", quote! { - })
     } else {
-        format_ident!("{}_{}", prefix, suffix)
+        ("", quote! {})
+    };
+
+    let method_name = if length.is_empty() {
+        format_ident!("{}{}", negation_prefix, name)
+    } else {
+        format_ident!("{}{}_{}", negation_prefix, name, length)
     };
 
     let field_assignments = fields
         .iter()
         .map(|field_tokens| {
             quote! {
-                style.#field_tokens = Some(gpui2::geometry::#length_tokens.into());
+                style.#field_tokens = Some((#negation_token gpui2::geometry::#length_tokens).into());
             }
         })
         .collect::<Vec<_>>();
@@ -114,6 +135,10 @@ fn generate_predefined_setter(
         }
     };
 
+    if negate {
+        dbg!(method.to_string());
+    }
+
     method
 }
 
diff --git a/crates/storybook/src/ui/component/facepile.rs b/crates/storybook/src/ui/component/facepile.rs
index 38dbc55fb0..73ab231c07 100644
--- a/crates/storybook/src/ui/component/facepile.rs
+++ b/crates/storybook/src/ui/component/facepile.rs
@@ -1,6 +1,4 @@
-use crate::theme::theme;
-use crate::ui::Avatar;
-use gpui2::geometry::rems;
+use crate::{theme::theme, ui::Avatar};
 use gpui2::style::StyleHelpers;
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
@@ -19,9 +17,9 @@ impl Facepile {
         let theme = theme(cx);
         let player_count = self.players.len();
         let player_list = self.players.iter().enumerate().map(|(ix, player)| {
-            let before_last = ix < player_count - 1;
+            let isnt_last = ix < player_count - 1;
             div()
-                .when(before_last, |div| div.mr(-rems(0.5)))
+                .when(isnt_last, |div| div.neg_mr_1())
                 .child(player.clone())
         });
         div().p_1().flex().items_center().children(player_list)

From 8aa4fbea833328bb154bd7e8ebcf09baaa5dc84d Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 00:25:46 -0400
Subject: [PATCH 15/22] Add icon, list_item, work on project panel

---
 crates/storybook/src/ui.rs                    | 27 ++++-----
 crates/storybook/src/ui/component.rs          |  1 +
 .../storybook/src/ui/component/list_item.rs   | 57 +++++++++++++++++++
 crates/storybook/src/ui/element.rs            |  1 +
 crates/storybook/src/ui/element/avatar.rs     |  2 -
 crates/storybook/src/ui/element/icon.rs       | 55 ++++++++++++++++++
 crates/storybook/src/ui/element/label.rs      |  2 +-
 .../storybook/src/ui/module/project_panel.rs  | 40 ++++++++++---
 8 files changed, 160 insertions(+), 25 deletions(-)
 create mode 100644 crates/storybook/src/ui/component/list_item.rs
 create mode 100644 crates/storybook/src/ui/element/icon.rs

diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
index f2b020882d..3e431ca448 100644
--- a/crates/storybook/src/ui.rs
+++ b/crates/storybook/src/ui.rs
@@ -1,21 +1,22 @@
-mod component;
 mod element;
-mod module;
-
-pub use component::facepile::*;
-pub use component::follow_group::*;
-pub use component::tab::*;
-
-pub use module::chat_panel::*;
-pub use module::project_panel::*;
-pub use module::status_bar::*;
-pub use module::tab_bar::*;
-pub use module::title_bar::*;
-
 pub use element::avatar::*;
+pub use element::icon::*;
 pub use element::icon_button::*;
 pub use element::indicator::*;
 pub use element::input::*;
 pub use element::label::*;
 pub use element::text_button::*;
 pub use element::tool_divider::*;
+
+mod component;
+pub use component::facepile::*;
+pub use component::follow_group::*;
+pub use component::list_item::*;
+pub use component::tab::*;
+
+mod module;
+pub use module::chat_panel::*;
+pub use module::project_panel::*;
+pub use module::status_bar::*;
+pub use module::tab_bar::*;
+pub use module::title_bar::*;
diff --git a/crates/storybook/src/ui/component.rs b/crates/storybook/src/ui/component.rs
index 8e99b60483..49a1268863 100644
--- a/crates/storybook/src/ui/component.rs
+++ b/crates/storybook/src/ui/component.rs
@@ -1,3 +1,4 @@
 pub(crate) mod facepile;
 pub(crate) mod follow_group;
+pub(crate) mod list_item;
 pub(crate) mod tab;
diff --git a/crates/storybook/src/ui/component/list_item.rs b/crates/storybook/src/ui/component/list_item.rs
new file mode 100644
index 0000000000..099125b69c
--- /dev/null
+++ b/crates/storybook/src/ui/component/list_item.rs
@@ -0,0 +1,57 @@
+use crate::prelude::InteractionState;
+use crate::theme::theme;
+use crate::ui::{icon, IconAsset, Label};
+use gpui2::geometry::rems;
+use gpui2::style::StyleHelpers;
+use gpui2::{elements::div, IntoElement};
+use gpui2::{Element, ParentElement, ViewContext};
+
+#[derive(Element)]
+pub struct ListItem {
+    label: Label,
+    left_icon: Option<IconAsset>,
+    indent_level: f32,
+    state: InteractionState,
+}
+
+pub fn list_item(label: Label) -> ListItem {
+    ListItem {
+        label,
+        indent_level: 0.0,
+        left_icon: None,
+        state: InteractionState::default(),
+    }
+}
+
+impl ListItem {
+    pub fn indent_level(mut self, indent_level: f32) -> Self {
+        self.indent_level = indent_level;
+        self
+    }
+    pub fn left_icon(mut self, left_icon: Option<IconAsset>) -> Self {
+        self.left_icon = left_icon;
+        self
+    }
+    pub fn state(mut self, state: InteractionState) -> Self {
+        self.state = state;
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        let mut el = div()
+            .h_7()
+            .px_2()
+            .ml(rems(0.75 * self.indent_level.clone()))
+            .flex()
+            .gap_2()
+            .items_center();
+
+        if self.left_icon.is_some() {
+            el = el.child(icon(self.left_icon.clone().unwrap()))
+        }
+
+        el.child(self.label.clone())
+    }
+}
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
index 145c4d1ecb..c5265e0ab4 100644
--- a/crates/storybook/src/ui/element.rs
+++ b/crates/storybook/src/ui/element.rs
@@ -1,4 +1,5 @@
 pub(crate) mod avatar;
+pub(crate) mod icon;
 pub(crate) mod icon_button;
 pub(crate) mod indicator;
 pub(crate) mod input;
diff --git a/crates/storybook/src/ui/element/avatar.rs b/crates/storybook/src/ui/element/avatar.rs
index cc25587c8d..83edc73deb 100644
--- a/crates/storybook/src/ui/element/avatar.rs
+++ b/crates/storybook/src/ui/element/avatar.rs
@@ -5,8 +5,6 @@ use gpui2::style::StyleHelpers;
 use gpui2::{ArcCow, IntoElement};
 use gpui2::{Element, ViewContext};
 
-pub type UnknownString = ArcCow<'static, str>;
-
 #[derive(Element, Clone)]
 pub struct Avatar {
     src: ArcCow<'static, str>,
diff --git a/crates/storybook/src/ui/element/icon.rs b/crates/storybook/src/ui/element/icon.rs
new file mode 100644
index 0000000000..f0248ade64
--- /dev/null
+++ b/crates/storybook/src/ui/element/icon.rs
@@ -0,0 +1,55 @@
+use std::borrow::Cow;
+
+use crate::theme::theme;
+use gpui2::elements::svg;
+use gpui2::style::StyleHelpers;
+use gpui2::IntoElement;
+use gpui2::{Element, ViewContext};
+
+#[derive(Default, PartialEq, Copy, Clone)]
+pub enum IconAsset {
+    Ai,
+    ArrowLeft,
+    ArrowRight,
+    #[default]
+    ArrowUpRight,
+    Bolt,
+    Hash,
+    File,
+    Folder,
+    FolderOpen,
+}
+
+pub fn icon_asset(asset: IconAsset) -> impl Into<Cow<'static, str>> {
+    match asset {
+        IconAsset::Ai => "icons/ai.svg",
+        IconAsset::ArrowLeft => "icons/arrow_left.svg",
+        IconAsset::ArrowRight => "icons/arrow_right.svg",
+        IconAsset::ArrowUpRight => "icons/arrow_up_right.svg",
+        IconAsset::Bolt => "icons/bolt.svg",
+        IconAsset::Hash => "icons/hash.svg",
+        IconAsset::File => "icons/file_icons/file.svg",
+        IconAsset::Folder => "icons/file_icons/folder.svg",
+        IconAsset::FolderOpen => "icons/file_icons/folder_open.svg",
+    }
+}
+
+#[derive(Element, Clone)]
+pub struct Icon {
+    asset: IconAsset,
+}
+
+pub fn icon(asset: IconAsset) -> Icon {
+    Icon { asset }
+}
+
+impl Icon {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        svg()
+            .path(icon_asset(self.asset))
+            .size_4()
+            .fill(theme.lowest.base.default.foreground)
+    }
+}
diff --git a/crates/storybook/src/ui/element/label.rs b/crates/storybook/src/ui/element/label.rs
index 6ebe38b90b..bbbedd0b10 100644
--- a/crates/storybook/src/ui/element/label.rs
+++ b/crates/storybook/src/ui/element/label.rs
@@ -22,7 +22,7 @@ pub struct Label {
 
 pub fn label(label: &'static str) -> Label {
     Label {
-        label: "Label",
+        label,
         color: LabelColor::Default,
     }
 }
diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs
index d954b9e6ce..7cbaded2ed 100644
--- a/crates/storybook/src/ui/module/project_panel.rs
+++ b/crates/storybook/src/ui/module/project_panel.rs
@@ -1,7 +1,7 @@
 use crate::{
     prelude::InteractionState,
     theme::theme,
-    ui::{input, label, LabelColor},
+    ui::{input, label, list_item, IconAsset, LabelColor},
 };
 use gpui2::{
     elements::{div, div::ScrollState},
@@ -29,7 +29,7 @@ impl<V: 'static> ProjectPanel<V> {
         let theme = theme(cx);
 
         div()
-            .w_64()
+            .w_56()
             .h_full()
             .flex()
             .flex_col()
@@ -41,17 +41,39 @@ impl<V: 'static> ProjectPanel<V> {
                     .flex_col()
                     .overflow_y_scroll(self.scroll_state.clone())
                     .child(
-                        div().py_2().flex().flex_col().children(
+                        div().flex().flex_col().children(
                             std::iter::repeat_with(|| {
                                 vec![
-                                    label("File"),
-                                    label("Modified File").color(LabelColor::Modified),
-                                    label("Created File").color(LabelColor::Created),
-                                    label("Deleted File").color(LabelColor::Deleted),
-                                    label("Hidden File").color(LabelColor::Hidden),
+                                    list_item(label("storybook").color(LabelColor::Modified))
+                                        .left_icon(IconAsset::FolderOpen.into())
+                                        .indent_level(0.0),
+                                    list_item(label("docs").color(LabelColor::Default))
+                                        .left_icon(IconAsset::Folder.into())
+                                        .indent_level(1.0),
+                                    list_item(label("src").color(LabelColor::Modified))
+                                        .left_icon(IconAsset::FolderOpen.into())
+                                        .indent_level(2.0),
+                                    list_item(label("ui").color(LabelColor::Modified))
+                                        .left_icon(IconAsset::FolderOpen.into())
+                                        .indent_level(3.0),
+                                    list_item(label("component").color(LabelColor::Created))
+                                        .left_icon(IconAsset::FolderOpen.into())
+                                        .indent_level(4.0),
+                                    list_item(label("facepile.rs").color(LabelColor::Default))
+                                        .left_icon(IconAsset::File.into())
+                                        .indent_level(5.0),
+                                    list_item(label("follow_group.rs").color(LabelColor::Default))
+                                        .left_icon(IconAsset::File.into())
+                                        .indent_level(5.0),
+                                    list_item(label("list_item.rs").color(LabelColor::Created))
+                                        .left_icon(IconAsset::File.into())
+                                        .indent_level(5.0),
+                                    list_item(label("tab.rs").color(LabelColor::Default))
+                                        .left_icon(IconAsset::File.into())
+                                        .indent_level(5.0),
                                 ]
                             })
-                            .take(60)
+                            .take(10)
                             .flatten(),
                         ),
                     ),

From 7e300079ce133818901a2b4f8c3dbc8543e92773 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 08:31:22 -0400
Subject: [PATCH 16/22] WIP

---
 .../storybook/src/ui/component/list_item.rs   | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/crates/storybook/src/ui/component/list_item.rs b/crates/storybook/src/ui/component/list_item.rs
index 099125b69c..9e6a2463df 100644
--- a/crates/storybook/src/ui/component/list_item.rs
+++ b/crates/storybook/src/ui/component/list_item.rs
@@ -2,7 +2,7 @@ use crate::prelude::InteractionState;
 use crate::theme::theme;
 use crate::ui::{icon, IconAsset, Label};
 use gpui2::geometry::rems;
-use gpui2::style::StyleHelpers;
+use gpui2::style::{StyleHelpers, Styleable};
 use gpui2::{elements::div, IntoElement};
 use gpui2::{Element, ParentElement, ViewContext};
 
@@ -41,12 +41,20 @@ impl ListItem {
         let theme = theme(cx);
 
         let mut el = div()
-            .h_7()
-            .px_2()
-            .ml(rems(0.75 * self.indent_level.clone()))
-            .flex()
-            .gap_2()
-            .items_center();
+            .fill(theme.middle.base.default.background)
+            .hover()
+            .fill(theme.middle.base.hovered.background)
+            .active()
+            .fill(theme.middle.base.pressed.background)
+            .child(
+                div()
+                    .h_7()
+                    .px_2()
+                    .ml(rems(0.75 * self.indent_level.clone()))
+                    .flex()
+                    .gap_2()
+                    .items_center(),
+            );
 
         if self.left_icon.is_some() {
             el = el.child(icon(self.left_icon.clone().unwrap()))

From 748ad5f05a6d8e02c6bdeea22f07f83a2e629ae8 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 11:52:35 -0400
Subject: [PATCH 17/22] Make list_item `toggleable`, improve optional
 `left_icon` on list item

Co-Authored-By: Julia <30666851+ForLoveOfCats@users.noreply.github.com>
---
 crates/storybook/src/prelude.rs               |  6 +++
 .../storybook/src/ui/component/list_item.rs   | 30 ++++++++----
 crates/storybook/src/ui/element/icon.rs       | 46 +++++++++++++------
 .../storybook/src/ui/module/project_panel.rs  | 21 ++++++---
 4 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/crates/storybook/src/prelude.rs b/crates/storybook/src/prelude.rs
index 8f01357406..61dbb676e2 100644
--- a/crates/storybook/src/prelude.rs
+++ b/crates/storybook/src/prelude.rs
@@ -47,3 +47,9 @@ pub enum SelectedState {
     PartiallySelected,
     Selected,
 }
+
+#[derive(Debug, Copy, Clone, PartialEq, Eq)]
+pub enum ToggleState {
+    Toggled,
+    NotToggled,
+}
diff --git a/crates/storybook/src/ui/component/list_item.rs b/crates/storybook/src/ui/component/list_item.rs
index 9e6a2463df..79631b943d 100644
--- a/crates/storybook/src/ui/component/list_item.rs
+++ b/crates/storybook/src/ui/component/list_item.rs
@@ -1,4 +1,4 @@
-use crate::prelude::InteractionState;
+use crate::prelude::{InteractionState, ToggleState};
 use crate::theme::theme;
 use crate::ui::{icon, IconAsset, Label};
 use gpui2::geometry::rems;
@@ -12,6 +12,7 @@ pub struct ListItem {
     left_icon: Option<IconAsset>,
     indent_level: f32,
     state: InteractionState,
+    toggle: Option<ToggleState>,
 }
 
 pub fn list_item(label: Label) -> ListItem {
@@ -20,6 +21,7 @@ pub fn list_item(label: Label) -> ListItem {
         indent_level: 0.0,
         left_icon: None,
         state: InteractionState::default(),
+        toggle: None,
     }
 }
 
@@ -28,10 +30,17 @@ impl ListItem {
         self.indent_level = indent_level;
         self
     }
+
+    pub fn set_toggle(mut self, toggle: ToggleState) -> Self {
+        self.toggle = Some(toggle);
+        self
+    }
+
     pub fn left_icon(mut self, left_icon: Option<IconAsset>) -> Self {
         self.left_icon = left_icon;
         self
     }
+
     pub fn state(mut self, state: InteractionState) -> Self {
         self.state = state;
         self
@@ -40,7 +49,7 @@ impl ListItem {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
-        let mut el = div()
+        div()
             .fill(theme.middle.base.default.background)
             .hover()
             .fill(theme.middle.base.hovered.background)
@@ -53,13 +62,14 @@ impl ListItem {
                     .ml(rems(0.75 * self.indent_level.clone()))
                     .flex()
                     .gap_2()
-                    .items_center(),
-            );
-
-        if self.left_icon.is_some() {
-            el = el.child(icon(self.left_icon.clone().unwrap()))
-        }
-
-        el.child(self.label.clone())
+                    .items_center()
+                    .children(match self.toggle {
+                        Some(ToggleState::NotToggled) => Some(icon(IconAsset::ChevronRight)),
+                        Some(ToggleState::Toggled) => Some(icon(IconAsset::ChevronDown)),
+                        None => None,
+                    })
+                    .children(self.left_icon.map(|i| icon(i)))
+                    .child(self.label.clone()),
+            )
     }
 }
diff --git a/crates/storybook/src/ui/element/icon.rs b/crates/storybook/src/ui/element/icon.rs
index f0248ade64..5a9e8fb6cb 100644
--- a/crates/storybook/src/ui/element/icon.rs
+++ b/crates/storybook/src/ui/element/icon.rs
@@ -1,11 +1,13 @@
-use std::borrow::Cow;
-
 use crate::theme::theme;
 use gpui2::elements::svg;
 use gpui2::style::StyleHelpers;
 use gpui2::IntoElement;
 use gpui2::{Element, ViewContext};
 
+// Icon::Hash
+// icon(IconAsset::Hash).color(IconColor::Warning)
+// Icon::new(IconAsset::Hash).color(IconColor::Warning)
+
 #[derive(Default, PartialEq, Copy, Clone)]
 pub enum IconAsset {
     Ai,
@@ -18,19 +20,29 @@ pub enum IconAsset {
     File,
     Folder,
     FolderOpen,
+    ChevronDown,
+    ChevronUp,
+    ChevronLeft,
+    ChevronRight,
 }
 
-pub fn icon_asset(asset: IconAsset) -> impl Into<Cow<'static, str>> {
-    match asset {
-        IconAsset::Ai => "icons/ai.svg",
-        IconAsset::ArrowLeft => "icons/arrow_left.svg",
-        IconAsset::ArrowRight => "icons/arrow_right.svg",
-        IconAsset::ArrowUpRight => "icons/arrow_up_right.svg",
-        IconAsset::Bolt => "icons/bolt.svg",
-        IconAsset::Hash => "icons/hash.svg",
-        IconAsset::File => "icons/file_icons/file.svg",
-        IconAsset::Folder => "icons/file_icons/folder.svg",
-        IconAsset::FolderOpen => "icons/file_icons/folder_open.svg",
+impl IconAsset {
+    pub fn path(self) -> &'static str {
+        match self {
+            IconAsset::Ai => "icons/ai.svg",
+            IconAsset::ArrowLeft => "icons/arrow_left.svg",
+            IconAsset::ArrowRight => "icons/arrow_right.svg",
+            IconAsset::ArrowUpRight => "icons/arrow_up_right.svg",
+            IconAsset::Bolt => "icons/bolt.svg",
+            IconAsset::Hash => "icons/hash.svg",
+            IconAsset::ChevronDown => "icons/chevron_down.svg",
+            IconAsset::ChevronUp => "icons/chevron_up.svg",
+            IconAsset::ChevronLeft => "icons/chevron_left.svg",
+            IconAsset::ChevronRight => "icons/chevron_right.svg",
+            IconAsset::File => "icons/file_icons/file.svg",
+            IconAsset::Folder => "icons/file_icons/folder.svg",
+            IconAsset::FolderOpen => "icons/file_icons/folder_open.svg",
+        }
     }
 }
 
@@ -43,12 +55,18 @@ pub fn icon(asset: IconAsset) -> Icon {
     Icon { asset }
 }
 
+// impl Icon {
+//     pub fn new(asset: IconAsset) -> Icon {
+//         Icon { asset }
+//     }
+// }
+
 impl Icon {
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
 
         svg()
-            .path(icon_asset(self.asset))
+            .path(self.asset.path())
             .size_4()
             .fill(theme.lowest.base.default.foreground)
     }
diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs
index 7cbaded2ed..347b453b18 100644
--- a/crates/storybook/src/ui/module/project_panel.rs
+++ b/crates/storybook/src/ui/module/project_panel.rs
@@ -1,5 +1,5 @@
 use crate::{
-    prelude::InteractionState,
+    prelude::{InteractionState, ToggleState},
     theme::theme,
     ui::{input, label, list_item, IconAsset, LabelColor},
 };
@@ -44,21 +44,30 @@ impl<V: 'static> ProjectPanel<V> {
                         div().flex().flex_col().children(
                             std::iter::repeat_with(|| {
                                 vec![
+                                    list_item(label("sqlez").color(LabelColor::Modified))
+                                        .left_icon(IconAsset::FolderOpen.into())
+                                        .indent_level(0.0)
+                                        .set_toggle(ToggleState::NotToggled),
                                     list_item(label("storybook").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(0.0),
+                                        .indent_level(0.0)
+                                        .set_toggle(ToggleState::Toggled),
                                     list_item(label("docs").color(LabelColor::Default))
                                         .left_icon(IconAsset::Folder.into())
-                                        .indent_level(1.0),
+                                        .indent_level(1.0)
+                                        .set_toggle(ToggleState::Toggled),
                                     list_item(label("src").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(2.0),
+                                        .indent_level(2.0)
+                                        .set_toggle(ToggleState::Toggled),
                                     list_item(label("ui").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(3.0),
+                                        .indent_level(3.0)
+                                        .set_toggle(ToggleState::Toggled),
                                     list_item(label("component").color(LabelColor::Created))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(4.0),
+                                        .indent_level(4.0)
+                                        .set_toggle(ToggleState::Toggled),
                                     list_item(label("facepile.rs").color(LabelColor::Default))
                                         .left_icon(IconAsset::File.into())
                                         .indent_level(5.0),

From 3a9f5d6ddca530cc026ccc10ecdd1f16a8f37707 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 11:59:55 -0400
Subject: [PATCH 18/22] use u32 as `indent_level`

Co-Authored-By: Julia <30666851+ForLoveOfCats@users.noreply.github.com>
---
 .../storybook/src/ui/component/list_item.rs   |  8 ++++----
 .../storybook/src/ui/module/project_panel.rs  | 20 +++++++++----------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/crates/storybook/src/ui/component/list_item.rs b/crates/storybook/src/ui/component/list_item.rs
index 79631b943d..5f79ff1568 100644
--- a/crates/storybook/src/ui/component/list_item.rs
+++ b/crates/storybook/src/ui/component/list_item.rs
@@ -10,7 +10,7 @@ use gpui2::{Element, ParentElement, ViewContext};
 pub struct ListItem {
     label: Label,
     left_icon: Option<IconAsset>,
-    indent_level: f32,
+    indent_level: u32,
     state: InteractionState,
     toggle: Option<ToggleState>,
 }
@@ -18,7 +18,7 @@ pub struct ListItem {
 pub fn list_item(label: Label) -> ListItem {
     ListItem {
         label,
-        indent_level: 0.0,
+        indent_level: 0,
         left_icon: None,
         state: InteractionState::default(),
         toggle: None,
@@ -26,7 +26,7 @@ pub fn list_item(label: Label) -> ListItem {
 }
 
 impl ListItem {
-    pub fn indent_level(mut self, indent_level: f32) -> Self {
+    pub fn indent_level(mut self, indent_level: u32) -> Self {
         self.indent_level = indent_level;
         self
     }
@@ -59,7 +59,7 @@ impl ListItem {
                 div()
                     .h_7()
                     .px_2()
-                    .ml(rems(0.75 * self.indent_level.clone()))
+                    .ml(rems(0.75 * self.indent_level as f32))
                     .flex()
                     .gap_2()
                     .items_center()
diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs
index 347b453b18..516817cae2 100644
--- a/crates/storybook/src/ui/module/project_panel.rs
+++ b/crates/storybook/src/ui/module/project_panel.rs
@@ -46,40 +46,40 @@ impl<V: 'static> ProjectPanel<V> {
                                 vec![
                                     list_item(label("sqlez").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(0.0)
+                                        .indent_level(0)
                                         .set_toggle(ToggleState::NotToggled),
                                     list_item(label("storybook").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(0.0)
+                                        .indent_level(0)
                                         .set_toggle(ToggleState::Toggled),
                                     list_item(label("docs").color(LabelColor::Default))
                                         .left_icon(IconAsset::Folder.into())
-                                        .indent_level(1.0)
+                                        .indent_level(1)
                                         .set_toggle(ToggleState::Toggled),
                                     list_item(label("src").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(2.0)
+                                        .indent_level(2)
                                         .set_toggle(ToggleState::Toggled),
                                     list_item(label("ui").color(LabelColor::Modified))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(3.0)
+                                        .indent_level(3)
                                         .set_toggle(ToggleState::Toggled),
                                     list_item(label("component").color(LabelColor::Created))
                                         .left_icon(IconAsset::FolderOpen.into())
-                                        .indent_level(4.0)
+                                        .indent_level(4)
                                         .set_toggle(ToggleState::Toggled),
                                     list_item(label("facepile.rs").color(LabelColor::Default))
                                         .left_icon(IconAsset::File.into())
-                                        .indent_level(5.0),
+                                        .indent_level(5),
                                     list_item(label("follow_group.rs").color(LabelColor::Default))
                                         .left_icon(IconAsset::File.into())
-                                        .indent_level(5.0),
+                                        .indent_level(5),
                                     list_item(label("list_item.rs").color(LabelColor::Created))
                                         .left_icon(IconAsset::File.into())
-                                        .indent_level(5.0),
+                                        .indent_level(5),
                                     list_item(label("tab.rs").color(LabelColor::Default))
                                         .left_icon(IconAsset::File.into())
-                                        .indent_level(5.0),
+                                        .indent_level(5),
                                 ]
                             })
                             .take(10)

From 65aa4d5642c49992e355f197c02511fbf41b5eaa Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 12:38:46 -0400
Subject: [PATCH 19/22] Draw indent guides using `indent_level`

Co-Authored-By: Julia <30666851+ForLoveOfCats@users.noreply.github.com>
---
 crates/storybook/src/ui/component/list_item.rs | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/crates/storybook/src/ui/component/list_item.rs b/crates/storybook/src/ui/component/list_item.rs
index 5f79ff1568..46df86bfa1 100644
--- a/crates/storybook/src/ui/component/list_item.rs
+++ b/crates/storybook/src/ui/component/list_item.rs
@@ -55,11 +55,24 @@ impl ListItem {
             .fill(theme.middle.base.hovered.background)
             .active()
             .fill(theme.middle.base.pressed.background)
+            .relative()
             .child(
                 div()
                     .h_7()
                     .px_2()
-                    .ml(rems(0.75 * self.indent_level as f32))
+                    // .ml(rems(0.75 * self.indent_level as f32))
+                    .children((0..self.indent_level).map(|_| {
+                        div().w(rems(0.75)).h_full().flex().justify_center().child(
+                            div()
+                                .w_px()
+                                .h_full()
+                                .fill(theme.middle.base.default.border)
+                                .hover()
+                                .fill(theme.middle.warning.default.border)
+                                .active()
+                                .fill(theme.middle.negative.default.border),
+                        )
+                    }))
                     .flex()
                     .gap_2()
                     .items_center()

From 2699f170ca96ce973229ca4759e886efacefebf2 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 19 Sep 2023 19:18:23 -0400
Subject: [PATCH 20/22] Checkpoint - Details

---
 crates/storybook/src/ui.rs                    |  1 +
 crates/storybook/src/ui/element.rs            |  1 +
 crates/storybook/src/ui/element/details.rs    | 36 +++++++++++++++++++
 .../storybook/src/ui/module/project_panel.rs  |  5 +--
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 crates/storybook/src/ui/element/details.rs

diff --git a/crates/storybook/src/ui.rs b/crates/storybook/src/ui.rs
index 3e431ca448..056ad56a2b 100644
--- a/crates/storybook/src/ui.rs
+++ b/crates/storybook/src/ui.rs
@@ -1,5 +1,6 @@
 mod element;
 pub use element::avatar::*;
+pub use element::details::*;
 pub use element::icon::*;
 pub use element::icon_button::*;
 pub use element::indicator::*;
diff --git a/crates/storybook/src/ui/element.rs b/crates/storybook/src/ui/element.rs
index c5265e0ab4..e79a9c5986 100644
--- a/crates/storybook/src/ui/element.rs
+++ b/crates/storybook/src/ui/element.rs
@@ -1,4 +1,5 @@
 pub(crate) mod avatar;
+pub(crate) mod details;
 pub(crate) mod icon;
 pub(crate) mod icon_button;
 pub(crate) mod indicator;
diff --git a/crates/storybook/src/ui/element/details.rs b/crates/storybook/src/ui/element/details.rs
new file mode 100644
index 0000000000..5d06862439
--- /dev/null
+++ b/crates/storybook/src/ui/element/details.rs
@@ -0,0 +1,36 @@
+use crate::theme::theme;
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{Element, ViewContext};
+use gpui2::{IntoElement, ParentElement};
+
+#[derive(Element, Clone)]
+pub struct Details {
+    text: &'static str,
+    meta: Option<&'static str>,
+}
+
+pub fn details(text: &'static str) -> Details {
+    Details { text, meta: None }
+}
+
+impl Details {
+    pub fn meta_text(mut self, meta: &'static str) -> Self {
+        self.meta = Some(meta);
+        self
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            // .flex()
+            // .w_full()
+            .p_1()
+            .gap_0p5()
+            .text_xs()
+            .text_color(theme.lowest.base.default.foreground)
+            .child(self.text.clone())
+            .children(self.meta.map(|m| m))
+    }
+}
diff --git a/crates/storybook/src/ui/module/project_panel.rs b/crates/storybook/src/ui/module/project_panel.rs
index 516817cae2..5a9608d3e3 100644
--- a/crates/storybook/src/ui/module/project_panel.rs
+++ b/crates/storybook/src/ui/module/project_panel.rs
@@ -1,7 +1,7 @@
 use crate::{
     prelude::{InteractionState, ToggleState},
     theme::theme,
-    ui::{input, label, list_item, IconAsset, LabelColor},
+    ui::{details, input, label, list_item, IconAsset, LabelColor},
 };
 use gpui2::{
     elements::{div, div::ScrollState},
@@ -36,10 +36,11 @@ impl<V: 'static> ProjectPanel<V> {
             .fill(theme.middle.base.default.background)
             .child(
                 div()
-                    .w_full()
+                    .w_56()
                     .flex()
                     .flex_col()
                     .overflow_y_scroll(self.scroll_state.clone())
+                    .child(details("This is a long string that should wrap when it keeps going for a long time.").meta_text("6 h ago)"))
                     .child(
                         div().flex().flex_col().children(
                             std::iter::repeat_with(|| {

From 6dcb0bafb0b5ef1e2bb4868d7624c745eca265ec Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 20 Sep 2023 12:53:08 -0400
Subject: [PATCH 21/22] WIP Project Tracker

---
 crates/storybook/src/ui/tracker.md | 108 +++++++++++++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 crates/storybook/src/ui/tracker.md

diff --git a/crates/storybook/src/ui/tracker.md b/crates/storybook/src/ui/tracker.md
new file mode 100644
index 0000000000..6d804677b1
--- /dev/null
+++ b/crates/storybook/src/ui/tracker.md
@@ -0,0 +1,108 @@
+* = Not in the app today
+
+## Template
+- [ ] Workspace
+- [ ] Title Bar
+- [ ] Project Panel
+- [ ] Collab Panel
+- [ ] Project Diagnosics
+- [ ] Project Search
+- [ ] Feedback Editor
+- [ ] Terminal
+- [ ] Assistant
+- [ ] Chat*
+- [ ] Notifications*
+- [ ] Status Bar
+- [ ] Panes
+- [ ] Pane
+- [ ] Editor
+- [ ] Tab Bar
+- [ ] Tool Bar
+- [ ] Buffer
+- [ ] Zoomed Editor (Modal)
+
+### Palettes
+- [ ] Project Files Palette (⌘-P)
+- [ ] Command Palette (⌘-SHIFT-P)
+- [ ] Recent Projects Palette (⌘-OPT-O)
+- [ ] Project Symbols (⌘-T)
+- [ ] Theme Palette (⌘-K, ⌘-T)
+- [ ] Outline View (⌘-SHIFT-O)
+
+### Debug Views
+- [ ] LSP Tool
+- [ ] Syntax Tree
+
+## Modules
+
+### Title Bar
+- [ ] Traffic Lights
+- [ ] Host Menu
+- [ ] Project Menu
+- [ ] Branch Menu
+- [ ] Collaborators
+- [ ] Add Collaborator*
+- [ ] Project Controls
+- [ ] Call Controls
+- [ ] User Menu
+
+### Project Panel
+- [ ] Open Editors*
+- [ ] Open Files (Non-project files)
+- [ ] Project Files
+- [ ] Project Filter*
+
+### Collab Panel
+- [ ] Current Call
+- [ ] Channels
+- [ ] Contacts
+- [ ] Collab Filter
+
+### Project Diagnosics
+WIP
+
+### Feedback Editor
+- [ ] Feedback Header
+- [ ] Editor
+- [ ] Feedback Actions
+
+### Terminal
+- [ ] Terminal Toolbar*
+- [ ] Terminal Line
+- [ ] Terminal Input
+
+### Assistant
+- [ ] Toolbar
+- [ ] History / Past Conversations
+- [ ] Model Controls / Token Counter
+- [ ] Chat Editor
+
+### Chat
+WIP
+
+### Notifications
+WIP
+
+### Status Bar
+- [ ] Status Bar Tool (Icon)
+- [ ] Status Bar Tool (Text)
+- [ ] Diagnostic Message
+- [ ] LSP Message
+- [ ] Update message (New version available, downloading, etc)
+
+### Panes/Pane
+
+- [ ] Editor
+- [ ] Split Divider/Control
+
+### Editor
+
+### Tab Bar
+- [ ] Navigation History / Control
+- [ ] Tabs
+- [ ] Editor Controls (New, Split, Zoom)
+
+### Tool Bar
+- [ ] Breadcrumb
+- [ ] Editor Tool (Togglable)
+- [ ] Buffer Search

From be6690bf0bae10a88f071e722e30195c9e29a4e1 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 20 Sep 2023 13:08:20 -0400
Subject: [PATCH 22/22] Update tracker.md

---
 crates/storybook/src/ui/tracker.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/crates/storybook/src/ui/tracker.md b/crates/storybook/src/ui/tracker.md
index 6d804677b1..11b5804db2 100644
--- a/crates/storybook/src/ui/tracker.md
+++ b/crates/storybook/src/ui/tracker.md
@@ -25,6 +25,7 @@
 - [ ] Project Files Palette (⌘-P)
 - [ ] Command Palette (⌘-SHIFT-P)
 - [ ] Recent Projects Palette (⌘-OPT-O)
+- [ ] Recent Branches Palette (⌘-OPT-B)
 - [ ] Project Symbols (⌘-T)
 - [ ] Theme Palette (⌘-K, ⌘-T)
 - [ ] Outline View (⌘-SHIFT-O)
@@ -50,11 +51,15 @@
 - [ ] Open Editors*
 - [ ] Open Files (Non-project files)
 - [ ] Project Files
+- [ ] Root Folder - Context Menu
+- [ ] Folder - Context Menu
+- [ ] File - Context Menu
 - [ ] Project Filter*
 
 ### Collab Panel
 - [ ] Current Call
 - [ ] Channels
+- [ ] Channel - Context Menu
 - [ ] Contacts
 - [ ] Collab Filter
 
@@ -86,6 +91,9 @@ WIP
 ### Status Bar
 - [ ] Status Bar Tool (Icon)
 - [ ] Status Bar Tool (Text)
+- [ ] Status Bar Tool - Context Menu
+- [ ] Status Bar Tool - Popover Palette
+- [ ] Status Bar Tool - Popover Menu
 - [ ] Diagnostic Message
 - [ ] LSP Message
 - [ ] Update message (New version available, downloading, etc)
@@ -96,6 +104,9 @@ WIP
 - [ ] Split Divider/Control
 
 ### Editor
+- [ ] Editor
+- [ ] Read-only Editor
+- [ ] Rendered Markdown View*
 
 ### Tab Bar
 - [ ] Navigation History / Control
@@ -106,3 +117,17 @@ WIP
 - [ ] Breadcrumb
 - [ ] Editor Tool (Togglable)
 - [ ] Buffer Search
+
+### Buffer
+
+### Zoomed Editor (Modal)
+- [ ] Modal View
+
+### Palette
+- [ ] Input
+- [ ] Section Title
+- [ ] List
+
+## Components
+
+- [ ] Context Menu