Mainline GPUI2 UI work (#3062)

This PR mainlines the current state of new GPUI2-based UI from the
`gpui2-ui` branch.

Release Notes:

- N/A

---------

Co-authored-by: Nate Butler <iamnbutler@gmail.com>
Co-authored-by: Max Brunsfeld <maxbrunsfeld@gmail.com>
Co-authored-by: Marshall Bowers <1486634+maxdeviant@users.noreply.github.com>
Co-authored-by: Piotr Osiewicz <24362066+osiewicz@users.noreply.github.com>
Co-authored-by: Nate <nate@zed.dev>
Co-authored-by: Mikayla <mikayla@zed.dev>

crates/ui/src/components/traffic_lights.rs

@@ -1,30 +1,78 @@
-use gpui2::elements::div;
-use gpui2::style::StyleHelpers;
-use gpui2::{Element, Hsla, IntoElement, ParentElement, ViewContext};
+use crate::prelude::*;
+use crate::{theme, token, SystemColor};
 
-use crate::theme;
+#[derive(Clone, Copy)]
+enum TrafficLightColor {
+    Red,
+    Yellow,
+    Green,
+}
 
 #[derive(Element)]
-pub struct TrafficLights {}
+struct TrafficLight {
+    color: TrafficLightColor,
+    window_has_focus: bool,
+}
 
-pub fn traffic_lights() -> TrafficLights {
-    TrafficLights {}
+impl TrafficLight {
+    fn new(color: TrafficLightColor, window_has_focus: bool) -> Self {
+        Self {
+            color,
+            window_has_focus,
+        }
+    }
+
+    fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
+        let theme = theme(cx);
+        let system_color = SystemColor::new();
+
+        let fill = match (self.window_has_focus, self.color) {
+            (true, TrafficLightColor::Red) => system_color.mac_os_traffic_light_red,
+            (true, TrafficLightColor::Yellow) => system_color.mac_os_traffic_light_yellow,
+            (true, TrafficLightColor::Green) => system_color.mac_os_traffic_light_green,
+            (false, _) => theme.lowest.base.active.background,
+        };
+
+        div().w_3().h_3().rounded_full().fill(fill)
+    }
+}
+
+#[derive(Element)]
+pub struct TrafficLights {
+    window_has_focus: bool,
 }
 
 impl TrafficLights {
+    pub fn new() -> Self {
+        Self {
+            window_has_focus: true,
+        }
+    }
+
+    pub fn window_has_focus(mut self, window_has_focus: bool) -> Self {
+        self.window_has_focus = window_has_focus;
+        self
+    }
+
     fn render<V: 'static>(&mut self, _: &mut V, cx: &mut ViewContext<V>) -> impl IntoElement<V> {
         let theme = theme(cx);
+        let token = token();
 
         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))
+            .child(TrafficLight::new(
+                TrafficLightColor::Red,
+                self.window_has_focus,
+            ))
+            .child(TrafficLight::new(
+                TrafficLightColor::Yellow,
+                self.window_has_focus,
+            ))
+            .child(TrafficLight::new(
+                TrafficLightColor::Green,
+                self.window_has_focus,
+            ))
     }
 }
-
-fn traffic_light<V: 'static, C: Into<Hsla>>(fill: C) -> div::Div<V> {
-    div().w_3().h_3().rounded_full().fill(fill.into())
-}