Extract title_bar crate (#13597)

This PR extracts a singular title bar (`title_bar::TitleBar`) from
`ui::TitleBar` and
`collab_ui::collab_titlebar_item::CollabTitlebarItem`.

This is a first step towards organizing title bar things into one place,
and standardizing platform titlebar/window control implementations.

Release Notes:

- N/A

crates/title_bar/src/platforms/platform_linux.rs

@@ -0,0 +1,145 @@
+use gpui::{prelude::*, Action, Rgba, WindowAppearance};
+
+use ui::prelude::*;
+
+#[derive(IntoElement)]
+pub struct LinuxWindowControls {
+    button_height: Pixels,
+    close_window_action: Box<dyn Action>,
+}
+
+impl LinuxWindowControls {
+    pub fn new(button_height: Pixels, close_window_action: Box<dyn Action>) -> Self {
+        Self {
+            button_height,
+            close_window_action,
+        }
+    }
+}
+
+impl RenderOnce for LinuxWindowControls {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let close_button_hover_color = Rgba {
+            r: 232.0 / 255.0,
+            g: 17.0 / 255.0,
+            b: 32.0 / 255.0,
+            a: 1.0,
+        };
+
+        let button_hover_color = match cx.appearance() {
+            WindowAppearance::Light | WindowAppearance::VibrantLight => Rgba {
+                r: 0.1,
+                g: 0.1,
+                b: 0.1,
+                a: 0.2,
+            },
+            WindowAppearance::Dark | WindowAppearance::VibrantDark => Rgba {
+                r: 0.9,
+                g: 0.9,
+                b: 0.9,
+                a: 0.1,
+            },
+        };
+
+        div()
+            .id("linux-window-controls")
+            .flex()
+            .flex_row()
+            .justify_center()
+            .content_stretch()
+            .max_h(self.button_height)
+            .min_h(self.button_height)
+            .child(TitlebarButton::new(
+                "minimize",
+                TitlebarButtonType::Minimize,
+                button_hover_color,
+                self.close_window_action.boxed_clone(),
+            ))
+            .child(TitlebarButton::new(
+                "maximize-or-restore",
+                if cx.is_maximized() {
+                    TitlebarButtonType::Restore
+                } else {
+                    TitlebarButtonType::Maximize
+                },
+                button_hover_color,
+                self.close_window_action.boxed_clone(),
+            ))
+            .child(TitlebarButton::new(
+                "close",
+                TitlebarButtonType::Close,
+                close_button_hover_color,
+                self.close_window_action,
+            ))
+    }
+}
+
+#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy)]
+enum TitlebarButtonType {
+    Minimize,
+    Restore,
+    Maximize,
+    Close,
+}
+
+#[derive(IntoElement)]
+struct TitlebarButton {
+    id: ElementId,
+    icon: TitlebarButtonType,
+    hover_background_color: Rgba,
+    close_window_action: Box<dyn Action>,
+}
+
+impl TitlebarButton {
+    pub fn new(
+        id: impl Into<ElementId>,
+        icon: TitlebarButtonType,
+        hover_background_color: Rgba,
+        close_window_action: Box<dyn Action>,
+    ) -> Self {
+        Self {
+            id: id.into(),
+            icon,
+            hover_background_color,
+            close_window_action,
+        }
+    }
+}
+
+impl RenderOnce for TitlebarButton {
+    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+        let width = px(36.);
+
+        h_flex()
+            .id(self.id)
+            .justify_center()
+            .content_center()
+            .w(width)
+            .h_full()
+            .hover(|style| style.bg(self.hover_background_color))
+            .active(|style| {
+                let mut active_color = self.hover_background_color;
+                active_color.a *= 0.2;
+
+                style.bg(active_color)
+            })
+            .child(Icon::new(match self.icon {
+                TitlebarButtonType::Minimize => IconName::Dash,
+                TitlebarButtonType::Restore => IconName::Minimize,
+                TitlebarButtonType::Maximize => IconName::Maximize,
+                TitlebarButtonType::Close => IconName::Close,
+            }))
+            .on_mouse_move(|_, cx| cx.stop_propagation())
+            .on_click(move |_, cx| {
+                cx.stop_propagation();
+                match self.icon {
+                    TitlebarButtonType::Minimize => cx.minimize_window(),
+                    TitlebarButtonType::Restore => cx.zoom_window(),
+                    TitlebarButtonType::Maximize => cx.zoom_window(),
+                    TitlebarButtonType::Close => {
+                        cx.dispatch_action(self.close_window_action.boxed_clone())
+                    }
+                }
+            })
+    }
+}

crates/title_bar/src/platforms/platform_mac.rs

@@ -0,0 +1,6 @@
+/// Use pixels here instead of a rem-based size because the macOS traffic
+/// lights are a static size, and don't scale with the rest of the UI.
+///
+/// Magic number: There is one extra pixel of padding on the left side due to
+/// the 1px border around the window on macOS apps.
+pub const TRAFFIC_LIGHT_PADDING: f32 = 71.;

crates/title_bar/src/platforms/platform_windows.rs

@@ -0,0 +1,148 @@
+use gpui::{prelude::*, Rgba, WindowAppearance};
+
+use ui::prelude::*;
+
+#[derive(IntoElement)]
+pub struct WindowsWindowControls {
+    button_height: Pixels,
+}
+
+impl WindowsWindowControls {
+    pub fn new(button_height: Pixels) -> Self {
+        Self { button_height }
+    }
+
+    #[cfg(not(target_os = "windows"))]
+    fn get_font() -> &'static str {
+        "Segoe Fluent Icons"
+    }
+
+    #[cfg(target_os = "windows")]
+    fn get_font() -> &'static str {
+        use windows::Wdk::System::SystemServices::RtlGetVersion;
+
+        let mut version = unsafe { std::mem::zeroed() };
+        let status = unsafe { RtlGetVersion(&mut version) };
+
+        if status.is_ok() && version.dwBuildNumber >= 22000 {
+            "Segoe Fluent Icons"
+        } else {
+            "Segoe MDL2 Assets"
+        }
+    }
+}
+
+impl RenderOnce for WindowsWindowControls {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        let close_button_hover_color = Rgba {
+            r: 232.0 / 255.0,
+            g: 17.0 / 255.0,
+            b: 32.0 / 255.0,
+            a: 1.0,
+        };
+
+        let button_hover_color = match cx.appearance() {
+            WindowAppearance::Light | WindowAppearance::VibrantLight => Rgba {
+                r: 0.1,
+                g: 0.1,
+                b: 0.1,
+                a: 0.2,
+            },
+            WindowAppearance::Dark | WindowAppearance::VibrantDark => Rgba {
+                r: 0.9,
+                g: 0.9,
+                b: 0.9,
+                a: 0.1,
+            },
+        };
+
+        div()
+            .id("windows-window-controls")
+            .font_family(Self::get_font())
+            .flex()
+            .flex_row()
+            .justify_center()
+            .content_stretch()
+            .max_h(self.button_height)
+            .min_h(self.button_height)
+            .child(WindowsCaptionButton::new(
+                "minimize",
+                WindowsCaptionButtonIcon::Minimize,
+                button_hover_color,
+            ))
+            .child(WindowsCaptionButton::new(
+                "maximize-or-restore",
+                if cx.is_maximized() {
+                    WindowsCaptionButtonIcon::Restore
+                } else {
+                    WindowsCaptionButtonIcon::Maximize
+                },
+                button_hover_color,
+            ))
+            .child(WindowsCaptionButton::new(
+                "close",
+                WindowsCaptionButtonIcon::Close,
+                close_button_hover_color,
+            ))
+    }
+}
+
+#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy)]
+enum WindowsCaptionButtonIcon {
+    Minimize,
+    Restore,
+    Maximize,
+    Close,
+}
+
+#[derive(IntoElement)]
+struct WindowsCaptionButton {
+    id: ElementId,
+    icon: WindowsCaptionButtonIcon,
+    hover_background_color: Rgba,
+}
+
+impl WindowsCaptionButton {
+    pub fn new(
+        id: impl Into<ElementId>,
+        icon: WindowsCaptionButtonIcon,
+        hover_background_color: Rgba,
+    ) -> Self {
+        Self {
+            id: id.into(),
+            icon,
+            hover_background_color,
+        }
+    }
+}
+
+impl RenderOnce for WindowsCaptionButton {
+    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+        // todo(windows) report this width to the Windows platform API
+        // NOTE: this is intentionally hard coded. An option to use the 'native' size
+        //       could be added when the width is reported to the Windows platform API
+        //       as this could change between future Windows versions.
+        let width = px(36.);
+
+        h_flex()
+            .id(self.id)
+            .justify_center()
+            .content_center()
+            .w(width)
+            .h_full()
+            .text_size(px(10.0))
+            .hover(|style| style.bg(self.hover_background_color))
+            .active(|style| {
+                let mut active_color = self.hover_background_color;
+                active_color.a *= 0.2;
+
+                style.bg(active_color)
+            })
+            .child(match self.icon {
+                WindowsCaptionButtonIcon::Minimize => "\u{e921}",
+                WindowsCaptionButtonIcon::Restore => "\u{e923}",
+                WindowsCaptionButtonIcon::Maximize => "\u{e922}",
+                WindowsCaptionButtonIcon::Close => "\u{e8bb}",
+            })
+    }
+}