T04 window and shell: chrome, bars, rail, tabs, windows, dialogs, tray, badge, zoom

src/primitives/ghost.rs

@@ -0,0 +1,46 @@
+use gpui::{
+    App, AppContext, Context, Entity, IntoElement, ParentElement, Render, SharedString, Styled,
+    Window, div, prelude::*,
+};
+
+use super::{Icon, IconName};
+use crate::theme::{ActiveTheme, Elevation, IconSize, Radius, TextSize};
+
+/// What follows the pointer while a tab or panel drags.
+pub struct DragGhost {
+    title: SharedString,
+    icon: Option<IconName>,
+}
+
+impl DragGhost {
+    pub fn new(title: SharedString, icon: Option<IconName>, cx: &mut App) -> Entity<Self> {
+        cx.new(|_| Self { title, icon })
+    }
+}
+
+impl Render for DragGhost {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        let theme = cx.theme();
+        div()
+            .flex()
+            .items_center()
+            .gap_1p5()
+            .px_2()
+            .py_1()
+            .rounded(theme.radius(Radius::Md))
+            .bg(theme.colors.overlay)
+            .border_1()
+            .border_color(theme.colors.border)
+            .shadow(theme.elevation(Elevation::Floating))
+            .text_size(theme.text_size(TextSize::Sm))
+            .text_color(theme.colors.fg)
+            .when_some(self.icon, |ghost, icon| {
+                ghost.child(
+                    Icon::new(icon)
+                        .size(IconSize::Sm)
+                        .color(theme.colors.fg_muted),
+                )
+            })
+            .child(self.title.clone())
+    }
+}

src/primitives/icon.rs

@@ -1,4 +1,7 @@
-use gpui::{App, Hsla, IntoElement, Radians, RenderOnce, Transformation, Window, prelude::*, svg};
+use gpui::{
+    App, Hsla, IntoElement, Radians, RenderOnce, SharedString, Transformation, Window, prelude::*,
+    svg,
+};
 
 use crate::theme::{ActiveTheme, IconSize};
 
@@ -36,6 +39,7 @@ icons! {
     AlignCenter => "align-center",
     AlignLeft => "align-left",
     AlignRight => "align-right",
+    AppWindow => "app-window",
     Archive => "archive",
     ArrowDownLeft => "arrow-down-left",
     ArrowDownWideNarrow => "arrow-down-wide-narrow",
@@ -182,6 +186,7 @@ icons! {
     Pencil => "pencil",
     PhoneOff => "phone-off",
     Phone => "phone",
+    PictureInPicture2 => "picture-in-picture-2",
     PinOff => "pin-off",
     Pin => "pin",
     Play => "play",
@@ -254,6 +259,7 @@ pub struct Icon {
     name: IconName,
     size: IconSize,
     color: Option<Hsla>,
+    hover: Option<(SharedString, Hsla)>,
     rotation: Option<Radians>,
 }
 
@@ -263,6 +269,7 @@ impl Icon {
             name,
             size: IconSize::Md,
             color: None,
+            hover: None,
             rotation: None,
         }
     }
@@ -278,6 +285,16 @@ impl Icon {
         self
     }
 
+    /// Color while the pointer is over `group`.
+    pub fn group_hover_color(
+        mut self,
+        group: impl Into<SharedString>,
+        color: impl Into<Hsla>,
+    ) -> Self {
+        self.hover = Some((group.into(), color.into()));
+        self
+    }
+
     pub fn rotate(mut self, angle: impl Into<Radians>) -> Self {
         self.rotation = Some(angle.into());
         self
@@ -299,6 +316,9 @@ impl RenderOnce for Icon {
             .size(theme.icon_size(self.size))
             .flex_none()
             .text_color(color)
+            .when_some(self.hover, |svg, (group, hover)| {
+                svg.group_hover(group, |style| style.text_color(hover))
+            })
             .when_some(self.rotation, |svg, angle| {
                 svg.with_transformation(Transformation::rotate(angle))
             })

src/primitives/mod.rs

@@ -1,6 +1,7 @@
 mod backdrop;
 mod divider;
 mod focus;
+mod ghost;
 mod icon;
 mod image;
 mod measure;
@@ -10,6 +11,7 @@ mod tooltip;
 pub use backdrop::{Backdrop, Place};
 pub use divider::Divider;
 pub use focus::{FocusNext, FocusPrev, FocusRing, FocusScope};
+pub use ghost::DragGhost;
 pub use icon::{Icon, IconName};
 pub use image::Image;
 pub use measure::{IntersectionObserver, Measure};