T12a Data Display: badges, tags, avatars, statistics (review pending: codex 401)

src/data_display/avatar.rs

@@ -0,0 +1,304 @@
+use gpui::{
+    AnyElement, App, ElementId, FontWeight, Hsla, ImageSource, IntoElement, ObjectFit,
+    ParentElement, RenderOnce, SharedString, Styled, Window, div, prelude::*,
+};
+
+use crate::{
+    primitives::{Icon, IconName, Image},
+    theme::{ActiveTheme, AvatarSize, IconSize, Palette, Radius, TextSize},
+};
+
+/// Whether someone is around.
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum Presence {
+    Online,
+    Away,
+    Busy,
+    Offline,
+}
+
+impl Presence {
+    fn color(self, colors: &Palette) -> Hsla {
+        match self {
+            Self::Online => colors.success,
+            Self::Away => colors.warning,
+            Self::Busy => colors.danger,
+            Self::Offline => colors.fg_subtle,
+        }
+    }
+}
+
+/// Up to two capitals from a name's first and last words.
+pub(crate) fn initials(name: &str) -> String {
+    let words: Vec<&str> = name.split_whitespace().collect();
+    let first = |word: &str| word.chars().next().into_iter().flat_map(char::to_uppercase);
+    match words.as_slice() {
+        [] => String::new(),
+        [only] => first(only).collect(),
+        [head, .., tail] => first(head).chain(first(tail)).collect(),
+    }
+}
+
+/// The chart color a name keeps, so the same person reads the same way everywhere.
+fn tint(name: &str, colors: &Palette) -> Hsla {
+    let hash = name.bytes().fold(0u32, |hash, byte| {
+        hash.wrapping_mul(31).wrapping_add(u32::from(byte))
+    });
+    colors.chart[hash as usize % colors.chart.len()]
+}
+
+/// A person or a team at a glance: their picture, or their initials on a tone kept by the name, or an icon. A presence dot can sit on the corner; squares suit teams.
+#[derive(IntoElement)]
+pub struct Avatar {
+    id: ElementId,
+    name: SharedString,
+    image: Option<ImageSource>,
+    icon: Option<IconName>,
+    size: AvatarSize,
+    square: bool,
+    ring: bool,
+    presence: Option<Presence>,
+}
+
+impl Avatar {
+    /// The name gives the initials and the tone when there is no picture.
+    pub fn new(id: impl Into<ElementId>, name: impl Into<SharedString>) -> Self {
+        Self {
+            id: id.into(),
+            name: name.into(),
+            image: None,
+            icon: None,
+            size: AvatarSize::default(),
+            square: false,
+            ring: false,
+            presence: None,
+        }
+    }
+
+    /// A square picture: gpui clips pictures to rectangles, so a cropped one keeps square corners.
+    pub fn image(mut self, source: impl Into<ImageSource>) -> Self {
+        self.image = Some(source.into());
+        self
+    }
+
+    /// Shown instead of initials, for a bot or a place.
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    pub fn size(mut self, size: AvatarSize) -> Self {
+        self.size = size;
+        self
+    }
+
+    /// A rounded square, as teams and apps take.
+    pub fn square(mut self) -> Self {
+        self.square = true;
+        self
+    }
+
+    /// A ring in the page color, so avatars that overlap stay apart.
+    pub fn ring(mut self) -> Self {
+        self.ring = true;
+        self
+    }
+
+    pub fn presence(mut self, presence: Presence) -> Self {
+        self.presence = Some(presence);
+        self
+    }
+}
+
+impl RenderOnce for Avatar {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let side = theme.avatar_size(self.size);
+        let rounded = |element: gpui::Div| {
+            if self.square {
+                element.rounded(theme.radius(Radius::Md))
+            } else {
+                element.rounded_full()
+            }
+        };
+        let tone = tint(&self.name, colors);
+        let text = match self.size {
+            AvatarSize::Xs | AvatarSize::Sm => TextSize::Xs,
+            AvatarSize::Md => TextSize::Sm,
+            AvatarSize::Lg => TextSize::Md,
+            AvatarSize::Xl => TextSize::Lg,
+        };
+        let face: AnyElement = match (self.image, self.icon) {
+            (Some(source), _) => {
+                let mut picture = Image::new((self.id.clone(), "picture"), source)
+                    .fit(ObjectFit::Cover)
+                    .size_full();
+                picture = if self.square {
+                    picture.rounded(theme.radius(Radius::Md))
+                } else {
+                    picture.rounded_full()
+                };
+                picture.into_any_element()
+            }
+            (None, Some(icon)) => Icon::new(icon)
+                .size(IconSize::Md)
+                .color(colors.fg_muted)
+                .into_any_element(),
+            (None, None) => initials(&self.name).into_any_element(),
+        };
+        let dot = self.presence.map(|presence| {
+            div()
+                .absolute()
+                .right_0()
+                .bottom_0()
+                .size(side * 0.28)
+                .rounded_full()
+                .border_2()
+                .border_color(colors.bg)
+                .bg(presence.color(colors))
+        });
+        div()
+            .relative()
+            .flex_none()
+            .size(side)
+            .child(
+                rounded(div())
+                    .size_full()
+                    .flex()
+                    .items_center()
+                    .justify_center()
+                    .bg(tone.opacity(0.16))
+                    .text_color(tone)
+                    .text_size(theme.text_size(text))
+                    .font_weight(FontWeight::SEMIBOLD)
+                    .when(self.ring, |face| face.border_2().border_color(colors.bg))
+                    .child(face),
+            )
+            .children(dot)
+    }
+}
+
+/// People side by side, each tucked under the next, and a count of the rest.
+#[derive(IntoElement)]
+pub struct AvatarGroup {
+    people: Vec<Avatar>,
+    max: usize,
+    size: AvatarSize,
+}
+
+impl AvatarGroup {
+    pub fn new(people: impl IntoIterator<Item = Avatar>) -> Self {
+        Self {
+            people: people.into_iter().collect(),
+            max: 4,
+            size: AvatarSize::default(),
+        }
+    }
+
+    /// How many show before the rest become +N.
+    pub fn max(mut self, max: usize) -> Self {
+        assert!(max > 0, "a group shows at least one avatar");
+        self.max = max;
+        self
+    }
+
+    pub fn size(mut self, size: AvatarSize) -> Self {
+        self.size = size;
+        self
+    }
+}
+
+impl RenderOnce for AvatarGroup {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let rest = self.people.len().saturating_sub(self.max);
+        let size = self.size;
+        let tuck = |element: gpui::Div, first: bool| match (first, size) {
+            (true, _) => element,
+            (false, AvatarSize::Xs | AvatarSize::Sm) => element.ml_neg_1(),
+            (false, AvatarSize::Md) => element.ml_neg_2(),
+            (false, AvatarSize::Lg | AvatarSize::Xl) => element.ml_neg_3(),
+        };
+        let shown = self
+            .people
+            .into_iter()
+            .take(self.max)
+            .enumerate()
+            .map(|(ix, person)| tuck(div(), ix == 0).child(person.size(size).ring()));
+        let more = (rest > 0).then(|| {
+            tuck(div(), false).child(
+                div()
+                    .flex()
+                    .items_center()
+                    .justify_center()
+                    .size(theme.avatar_size(size))
+                    .rounded_full()
+                    .border_2()
+                    .border_color(theme.colors.bg)
+                    .bg(theme.colors.hover)
+                    .text_size(theme.text_size(TextSize::Xs))
+                    .font_weight(FontWeight::MEDIUM)
+                    .text_color(theme.colors.fg_muted)
+                    .child(format!("+{rest}")),
+            )
+        });
+        div().flex().items_center().children(shown).children(more)
+    }
+}
+
+/// Someone named in a line or a field: a small avatar and the name, in a pill.
+#[derive(IntoElement)]
+pub struct UserChip {
+    avatar: Avatar,
+    name: SharedString,
+}
+
+impl UserChip {
+    pub fn new(id: impl Into<ElementId>, name: impl Into<SharedString>) -> Self {
+        let name = name.into();
+        Self {
+            avatar: Avatar::new(id, name.clone()).size(AvatarSize::Xs),
+            name,
+        }
+    }
+
+    pub fn image(mut self, source: impl Into<ImageSource>) -> Self {
+        self.avatar = self.avatar.image(source);
+        self
+    }
+}
+
+impl RenderOnce for UserChip {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        div()
+            .flex()
+            .flex_none()
+            .items_center()
+            .gap_1p5()
+            .pl_0p5()
+            .pr_2()
+            .py_0p5()
+            .rounded_full()
+            .bg(theme.colors.hover)
+            .text_size(theme.text_size(TextSize::Sm))
+            .text_color(theme.colors.fg)
+            .child(self.avatar)
+            .child(self.name)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::initials;
+
+    #[test]
+    fn initials_take_the_first_and_last_words() {
+        assert_eq!(initials("Ada Lovelace"), "AL");
+        assert_eq!(initials("Grace Brewster Murray Hopper"), "GH");
+        assert_eq!(initials("mia"), "M");
+        assert_eq!(initials("  "), "");
+        assert_eq!(initials("élodie durand"), "ÉD");
+    }
+}