Add following UI in collab titlebar (#3544)

* [x] restructure titlebar to show facepiles for each collaborator and
their followers
* [x] allow following collaborators by clicking their avatars in the
titlebar
* [x] show grayscale avatar for collaborators not focused on this
project
* [x] show collaborators' microphone activity and muted status in the
titlebar
* [x] in facepile, show leader in front of followers

crates/ui2/src/components/avatar.rs

@@ -1,7 +1,6 @@
-use std::sync::Arc;
-
 use crate::prelude::*;
-use gpui::{img, rems, Div, ImageData, ImageSource, IntoElement, Styled};
+use gpui::{img, Div, Hsla, ImageData, ImageSource, Img, IntoElement, Styled};
+use std::sync::Arc;
 
 #[derive(Debug, Default, PartialEq, Clone)]
 pub enum Shape {
@@ -12,35 +11,39 @@ pub enum Shape {
 
 #[derive(IntoElement)]
 pub struct Avatar {
-    src: ImageSource,
+    image: Img,
+    border_color: Option<Hsla>,
     is_available: Option<bool>,
-    shape: Shape,
 }
 
 impl RenderOnce for Avatar {
     type Rendered = Div;
 
-    fn render(self, cx: &mut WindowContext) -> Self::Rendered {
-        let mut img = img(self.src);
-
-        if self.shape == Shape::Circle {
-            img = img.rounded_full();
-        } else {
-            img = img.rounded_md();
+    fn render(mut self, cx: &mut WindowContext) -> Self::Rendered {
+        if self.image.style().corner_radii.top_left.is_none() {
+            self = self.shape(Shape::Circle);
         }
 
-        let size = rems(1.0);
+        let size = cx.rem_size();
 
         div()
-            .size(size)
+            .size(size + px(2.))
+            .map(|mut div| {
+                div.style().corner_radii = self.image.style().corner_radii.clone();
+                div
+            })
+            .when_some(self.border_color, |this, color| {
+                this.border().border_color(color)
+            })
             .child(
-                img.size(size)
+                self.image
+                    .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();
+                let indicator_size = (size * 0.4).round();
 
                 div()
                     .absolute()
@@ -56,31 +59,39 @@ impl RenderOnce for Avatar {
 
 impl Avatar {
     pub fn uri(src: impl Into<SharedString>) -> Self {
-        Self {
-            src: src.into().into(),
-            shape: Shape::Circle,
-            is_available: None,
-        }
+        Self::source(src.into().into())
     }
+
     pub fn data(src: Arc<ImageData>) -> Self {
-        Self {
-            src: src.into(),
-            shape: Shape::Circle,
-            is_available: None,
-        }
+        Self::source(src.into())
     }
 
     pub fn source(src: ImageSource) -> Self {
         Self {
-            src,
-            shape: Shape::Circle,
+            image: img(src),
             is_available: None,
+            border_color: None,
         }
     }
+
     pub fn shape(mut self, shape: Shape) -> Self {
-        self.shape = shape;
+        self.image = match shape {
+            Shape::Circle => self.image.rounded_full(),
+            Shape::RoundedRectangle => self.image.rounded_md(),
+        };
         self
     }
+
+    pub fn grayscale(mut self, grayscale: bool) -> Self {
+        self.image = self.image.grayscale(grayscale);
+        self
+    }
+
+    pub fn border_color(mut self, color: impl Into<Hsla>) -> Self {
+        self.border_color = Some(color.into());
+        self
+    }
+
     pub fn availability_indicator(mut self, is_available: impl Into<Option<bool>>) -> Self {
         self.is_available = is_available.into();
         self