Availability indicators

crates/ui2/src/components/avatar.rs

@@ -1,7 +1,7 @@
 use std::sync::Arc;
 
 use crate::prelude::*;
-use gpui::{img, ImageData, ImageSource, Img, IntoElement};
+use gpui::{img, rems, Div, ImageData, ImageSource, IntoElement, Styled};
 
 #[derive(Debug, Default, PartialEq, Clone)]
 pub enum Shape {
@@ -13,13 +13,14 @@ pub enum Shape {
 #[derive(IntoElement)]
 pub struct Avatar {
     src: ImageSource,
+    is_available: Option<bool>,
     shape: Shape,
 }
 
 impl RenderOnce for Avatar {
-    type Rendered = Img;
+    type Rendered = Div;
 
-    fn render(self, _: &mut WindowContext) -> Self::Rendered {
+    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
         let mut img = img();
 
         if self.shape == Shape::Circle {
@@ -28,10 +29,29 @@ impl RenderOnce for Avatar {
             img = img.rounded_md();
         }
 
-        img.source(self.src.clone())
-            .size_4()
-            // todo!(Pull the avatar fallback background from the theme.)
-            .bg(gpui::red())
+        let size = rems(1.0);
+
+        div()
+            .size(size)
+            .child(
+                img.source(self.src.clone())
+                    .size(size)
+                    // todo!(Pull the avatar fallback background from the theme.)
+                    .bg(gpui::red()),
+            )
+            .children(self.is_available.map(|is_free| {
+                // HACK: non-integer sizes result in oval indicators.
+                let indicator_size = (size.0 * cx.rem_size() * 0.4).round();
+
+                div()
+                    .absolute()
+                    .z_index(1)
+                    .bg(if is_free { gpui::green() } else { gpui::red() })
+                    .size(indicator_size)
+                    .rounded(indicator_size)
+                    .bottom_0()
+                    .right_0()
+            }))
     }
 }
 
@@ -40,12 +60,14 @@ impl Avatar {
         Self {
             src: src.into().into(),
             shape: Shape::Circle,
+            is_available: None,
         }
     }
     pub fn data(src: Arc<ImageData>) -> Self {
         Self {
             src: src.into(),
             shape: Shape::Circle,
+            is_available: None,
         }
     }
 
@@ -53,10 +75,15 @@ impl Avatar {
         Self {
             src,
             shape: Shape::Circle,
+            is_available: None,
         }
     }
     pub fn shape(mut self, shape: Shape) -> Self {
         self.shape = shape;
         self
     }
+    pub fn availability_indicator(mut self, is_available: impl Into<Option<bool>>) -> Self {
+        self.is_available = is_available.into();
+        self
+    }
 }

crates/ui2/src/components/list/list_item.rs

@@ -88,7 +88,7 @@ impl ListItem {
         self
     }
 
-    pub fn left_content(mut self, left_content: impl IntoElement) -> Self {
+    pub fn left_child(mut self, left_content: impl IntoElement) -> Self {
         self.left_slot = Some(left_content.into_any_element());
         self
     }

crates/ui2/src/components/stories/avatar.rs

@@ -19,5 +19,13 @@ impl Render for AvatarStory {
             .child(Avatar::uri(
                 "https://avatars.githubusercontent.com/u/326587?v=4",
             ))
+            .child(
+                Avatar::uri("https://avatars.githubusercontent.com/u/326587?v=4")
+                    .availability_indicator(true),
+            )
+            .child(
+                Avatar::uri("https://avatars.githubusercontent.com/u/326587?v=4")
+                    .availability_indicator(false),
+            )
     }
 }