Add TrafficLights component (#3011)

This PR adds a `TrafficLights` component for GPUI2.

<img width="861" alt="Screenshot 2023-09-21 at 11 32 10 PM"
src="https://github.com/zed-industries/zed/assets/1486634/0fe0e847-49b3-44dc-bd4c-64f12f0051c1">

Release Notes:

- N/A

crates/storybook/src/stories/components.rs

@@ -1 +1,2 @@
 pub mod facepile;
+pub mod traffic_lights;

crates/storybook/src/stories/components/traffic_lights.rs

@@ -0,0 +1,29 @@
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{rgb, Element, Hsla, IntoElement, ParentElement, ViewContext};
+use ui::{theme, traffic_lights};
+
+#[derive(Element, Default)]
+pub struct TrafficLightsStory {}
+
+impl TrafficLightsStory {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .size_full()
+            .flex()
+            .flex_col()
+            .pt_2()
+            .px_4()
+            .font("Zed Mono Extended")
+            .fill(rgb::<Hsla>(0x282c34))
+            .child(
+                div()
+                    .text_2xl()
+                    .text_color(rgb::<Hsla>(0xffffff))
+                    .child(std::any::type_name::<ui::TrafficLights>()),
+            )
+            .child(traffic_lights())
+    }
+}

crates/storybook/src/storybook.rs

@@ -14,6 +14,7 @@ use log::LevelFilter;
 use settings::{default_settings, SettingsStore};
 use simplelog::SimpleLogger;
 use stories::components::facepile::FacepileStory;
+use stories::components::traffic_lights::TrafficLightsStory;
 use stories::elements::avatar::AvatarStory;
 use ui::{ElementExt, Theme};
 
@@ -35,6 +36,7 @@ impl FromStr for Story {
         match s.to_ascii_lowercase().as_str() {
             "elements/avatar" => Ok(Self::Element(ElementStory::Avatar)),
             "components/facepile" => Ok(Self::Component(ComponentStory::Facepile)),
+            "components/traffic_lights" => Ok(Self::Component(ComponentStory::TrafficLights)),
             _ => Err(anyhow!("story not found for '{s}'")),
         }
     }
@@ -48,6 +50,7 @@ enum ElementStory {
 #[derive(Debug, Clone, Copy)]
 enum ComponentStory {
     Facepile,
+    TrafficLights,
 }
 
 #[derive(Parser)]
@@ -82,6 +85,9 @@ fn main() {
                 Some(Story::Component(ComponentStory::Facepile)) => {
                     view(|cx| render_story(&mut ViewContext::new(cx), FacepileStory::default()))
                 }
+                Some(Story::Component(ComponentStory::TrafficLights)) => view(|cx| {
+                    render_story(&mut ViewContext::new(cx), TrafficLightsStory::default())
+                }),
                 None => {
                     view(|cx| render_story(&mut ViewContext::new(cx), WorkspaceElement::default()))
                 }

crates/ui/src/components.rs

@@ -2,11 +2,13 @@ mod facepile;
 mod follow_group;
 mod list_item;
 mod tab;
+mod traffic_lights;
 
 pub use facepile::*;
 pub use follow_group::*;
 pub use list_item::*;
 pub use tab::*;
+pub use traffic_lights::*;
 
 use std::marker::PhantomData;
 use std::rc::Rc;

crates/ui/src/components/traffic_lights.rs

@@ -0,0 +1,30 @@
+use gpui2::elements::div;
+use gpui2::style::StyleHelpers;
+use gpui2::{Element, Hsla, IntoElement, ParentElement, ViewContext};
+
+use crate::theme;
+
+#[derive(Element)]
+pub struct TrafficLights {}
+
+pub fn traffic_lights() -> TrafficLights {
+    TrafficLights {}
+}
+
+impl TrafficLights {
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+
+        div()
+            .flex()
+            .items_center()
+            .gap_2()
+            .child(traffic_light(theme.lowest.negative.default.foreground))
+            .child(traffic_light(theme.lowest.warning.default.foreground))
+            .child(traffic_light(theme.lowest.positive.default.foreground))
+    }
+}
+
+fn traffic_light<V: 'static, C: Into<Hsla>>(fill: C) -> div::Div<V> {
+    div().w_3().h_3().rounded_full().fill(fill.into())
+}

crates/ui/src/modules/title_bar.rs

@@ -5,7 +5,7 @@ use gpui2::style::StyleHelpers;
 use gpui2::{Element, IntoElement, ParentElement, ViewContext};
 
 use crate::prelude::Shape;
-use crate::{avatar, follow_group, icon_button, text_button, theme, tool_divider};
+use crate::{avatar, follow_group, icon_button, text_button, theme, tool_divider, traffic_lights};
 
 #[derive(Element)]
 pub struct TitleBar<V: 'static> {
@@ -40,34 +40,7 @@ impl<V: 'static> TitleBar<V> {
                     .h_full()
                     .gap_4()
                     .px_2()
-                    // === Traffic Lights === //
+                    .child(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()