T12b Data Display: DescriptionList, PropertyGrid, Timeline, ActivityFeed, Changelog (review pending: codex 401)

src/data_display/badge.rs

@@ -37,7 +37,7 @@ impl From<Severity> for Tone {
 
 impl Tone {
     /// The fill, then the text on it.
-    fn colors(self, colors: &Palette) -> (Hsla, Hsla) {
+    pub(super) fn colors(self, colors: &Palette) -> (Hsla, Hsla) {
         let severity = |severity: Severity| (severity.subtle(colors), severity.color(colors));
         match self {
             Self::Neutral => (colors.hover, colors.fg_muted),
@@ -50,7 +50,7 @@ impl Tone {
     }
 
     /// The color a dot of this tone takes.
-    fn dot(self, colors: &Palette) -> Hsla {
+    pub(super) fn dot(self, colors: &Palette) -> Hsla {
         match self {
             Self::Neutral => colors.fg_subtle,
             Self::Accent => colors.accent,

src/data_display/changelog.rs

@@ -0,0 +1,180 @@
+use gpui::{
+    App, FontWeight, IntoElement, ParentElement, RenderOnce, SharedString, Styled, Window, div,
+    prelude::*,
+};
+
+use super::{Badge, Timeline, TimelineItem, Tone};
+use crate::theme::ActiveTheme;
+
+/// A kind of change, as Keep a Changelog names them.
+#[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord)]
+pub enum Change {
+    Added,
+    Changed,
+    Deprecated,
+    Removed,
+    Fixed,
+    Security,
+}
+
+impl Change {
+    fn label(self) -> &'static str {
+        match self {
+            Self::Added => "Added",
+            Self::Changed => "Changed",
+            Self::Deprecated => "Deprecated",
+            Self::Removed => "Removed",
+            Self::Fixed => "Fixed",
+            Self::Security => "Security",
+        }
+    }
+
+    fn tone(self) -> Tone {
+        match self {
+            Self::Added => Tone::Success,
+            Self::Changed => Tone::Info,
+            Self::Deprecated => Tone::Warning,
+            Self::Removed | Self::Security => Tone::Danger,
+            Self::Fixed => Tone::Neutral,
+        }
+    }
+}
+
+/// One version: its date, a line about it, and its changes.
+pub struct Release {
+    version: SharedString,
+    date: SharedString,
+    summary: Option<SharedString>,
+    changes: Vec<(Change, SharedString)>,
+}
+
+impl Release {
+    pub fn new(version: impl Into<SharedString>, date: impl Into<SharedString>) -> Self {
+        Self {
+            version: version.into(),
+            date: date.into(),
+            summary: None,
+            changes: Vec::new(),
+        }
+    }
+
+    pub fn summary(mut self, summary: impl Into<SharedString>) -> Self {
+        self.summary = Some(summary.into());
+        self
+    }
+
+    pub fn change(mut self, kind: Change, text: impl Into<SharedString>) -> Self {
+        self.changes.push((kind, text.into()));
+        self
+    }
+}
+
+/// Changes grouped by kind, kinds in Keep a Changelog order, each kind's changes as given.
+fn grouped(changes: Vec<(Change, SharedString)>) -> Vec<(Change, Vec<SharedString>)> {
+    let mut groups: Vec<(Change, Vec<SharedString>)> = Vec::new();
+    for (kind, text) in changes {
+        match groups.iter_mut().find(|(seen, _)| *seen == kind) {
+            Some((_, texts)) => texts.push(text),
+            None => groups.push((kind, vec![text])),
+        }
+    }
+    groups.sort_by_key(|(kind, _)| *kind);
+    groups
+}
+
+/// Releases down a rail in the order given; the first reads Latest.
+#[derive(IntoElement, Default)]
+pub struct Changelog {
+    releases: Vec<Release>,
+}
+
+impl Changelog {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn release(mut self, release: Release) -> Self {
+        self.releases.push(release);
+        self
+    }
+}
+
+impl RenderOnce for Changelog {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let colors = &cx.theme().colors;
+        let (fg, subtle) = (colors.fg, colors.fg_subtle);
+        self.releases
+            .into_iter()
+            .enumerate()
+            .fold(Timeline::new(), |timeline, (ix, release)| {
+                let head = div()
+                    .flex()
+                    .items_center()
+                    .gap_2()
+                    .font_weight(FontWeight::SEMIBOLD)
+                    .child(release.version)
+                    .when(ix == 0, |head| {
+                        head.child(Badge::new("Latest").tone(Tone::Accent))
+                    });
+                let groups = grouped(release.changes).into_iter().map(|(kind, texts)| {
+                    div()
+                        .flex()
+                        .flex_col()
+                        .items_start()
+                        .gap_1()
+                        .mt_3()
+                        .child(Badge::new(kind.label()).tone(kind.tone()))
+                        .children(texts.into_iter().map(|text| {
+                            div()
+                                .flex()
+                                .gap_2()
+                                .text_color(fg)
+                                .child(div().text_color(subtle).child("•"))
+                                .child(div().flex_1().min_w_0().child(text))
+                        }))
+                });
+                timeline.item(
+                    TimelineItem::new(head)
+                        .tone(if ix == 0 { Tone::Accent } else { Tone::Neutral })
+                        .time(release.date)
+                        .children(release.summary)
+                        .children(groups),
+                )
+            })
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::{Change, grouped};
+
+    #[test]
+    fn changes_group_by_kind_in_changelog_order() {
+        let changes = vec![
+            (Change::Fixed, "a crash".into()),
+            (Change::Added, "a timeline".into()),
+            (Change::Fixed, "a typo".into()),
+            (Change::Removed, "the old feed".into()),
+        ];
+        let groups: Vec<_> = grouped(changes)
+            .into_iter()
+            .map(|(kind, texts)| {
+                (
+                    kind,
+                    texts.iter().map(|t| t.to_string()).collect::<Vec<_>>(),
+                )
+            })
+            .collect();
+        assert_eq!(
+            groups,
+            vec![
+                (Change::Added, vec!["a timeline".to_string()]),
+                (Change::Removed, vec!["the old feed".to_string()]),
+                (
+                    Change::Fixed,
+                    vec!["a crash".to_string(), "a typo".to_string()]
+                ),
+            ]
+        );
+    }
+}

src/data_display/feed.rs

@@ -0,0 +1,175 @@
+use std::{iter, ops::Range};
+
+use gpui::{
+    AnyElement, App, ElementId, FontWeight, HighlightStyle, IntoElement, ParentElement, RenderOnce,
+    SharedString, Styled, StyledText, Window, div,
+};
+use jiff::Timestamp;
+
+use super::{Avatar, TimelineItem};
+use crate::{
+    motion::AnimatePresence,
+    primitives::IconName,
+    theme::{ActiveTheme, AvatarSize},
+    typography::RelativeTime,
+};
+
+/// Who did what, to what, and when: "Grace Hopper commented on Design review".
+pub struct Activity {
+    key: SharedString,
+    actor: SharedString,
+    verb: SharedString,
+    object: Option<SharedString>,
+    at: Timestamp,
+    avatar: Option<Avatar>,
+    icon: Option<IconName>,
+    body: Option<AnyElement>,
+}
+
+impl Activity {
+    /// `key` follows the entry as the feed changes; a key not seen before arrives with motion.
+    pub fn new(
+        key: impl Into<SharedString>,
+        actor: impl Into<SharedString>,
+        verb: impl Into<SharedString>,
+        at: Timestamp,
+    ) -> Self {
+        Self {
+            key: key.into(),
+            actor: actor.into(),
+            verb: verb.into(),
+            object: None,
+            at,
+            avatar: None,
+            icon: None,
+            body: None,
+        }
+    }
+
+    /// What it was done to, set in the actor's weight.
+    pub fn object(mut self, object: impl Into<SharedString>) -> Self {
+        self.object = Some(object.into());
+        self
+    }
+
+    /// The actor's avatar, such as one with a picture; by default, their initials.
+    pub fn avatar(mut self, avatar: Avatar) -> Self {
+        self.avatar = Some(avatar);
+        self
+    }
+
+    /// An icon in place of an avatar, for what a system did.
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.icon = Some(icon);
+        self
+    }
+
+    /// Detail below, such as the comment itself.
+    pub fn body(mut self, body: impl IntoElement) -> Self {
+        self.body = Some(body.into_any_element());
+        self
+    }
+}
+
+/// The sentence, where the actor sits in it, and where the object does.
+fn sentence(
+    actor: &str,
+    verb: &str,
+    object: Option<&str>,
+) -> (String, Range<usize>, Option<Range<usize>>) {
+    let text = format!("{actor} {verb}");
+    let Some(object) = object else {
+        return (text, 0..actor.len(), None);
+    };
+    let start = text.len() + 1;
+    let text = format!("{text} {object}");
+    let end = text.len();
+    (text, 0..actor.len(), Some(start..end))
+}
+
+/// A stream of what people did, in the order given. An entry with a new key folds in; the times stay fresh.
+#[derive(IntoElement)]
+pub struct ActivityFeed {
+    id: ElementId,
+    entries: Vec<Activity>,
+}
+
+impl ActivityFeed {
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            entries: Vec::new(),
+        }
+    }
+
+    pub fn entry(mut self, activity: Activity) -> Self {
+        self.entries.push(activity);
+        self
+    }
+}
+
+impl RenderOnce for ActivityFeed {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let colors = &cx.theme().colors;
+        let strong = HighlightStyle {
+            color: Some(colors.fg),
+            font_weight: Some(FontWeight::MEDIUM),
+            ..Default::default()
+        };
+        let (id, last) = (self.id.clone(), self.entries.len().saturating_sub(1));
+        let muted = colors.fg_muted;
+        self.entries.into_iter().enumerate().fold(
+            AnimatePresence::new(self.id),
+            |feed, (ix, activity)| {
+                let (text, actor, object) = sentence(
+                    &activity.actor,
+                    &activity.verb,
+                    activity.object.as_ref().map(|object| object.as_ref()),
+                );
+                let title =
+                    div()
+                        .text_color(muted)
+                        .child(StyledText::new(text).with_highlights(
+                            iter::once(actor).chain(object).map(|range| (range, strong)),
+                        ));
+                let item = TimelineItem::new(title)
+                    .time(RelativeTime::new(
+                        (id.clone(), format!("time-{}", activity.key)),
+                        activity.at,
+                    ))
+                    .tail(ix < last)
+                    .children(activity.body);
+                let item = match (activity.icon, activity.avatar) {
+                    (Some(icon), _) => item.icon(icon),
+                    (None, Some(avatar)) => item.marker(avatar.size(AvatarSize::Sm)),
+                    (None, None) => item.marker(
+                        Avatar::new(
+                            (id.clone(), format!("face-{}", activity.key)),
+                            activity.actor.clone(),
+                        )
+                        .size(AvatarSize::Sm),
+                    ),
+                };
+                feed.row(activity.key, true, item)
+            },
+        )
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::sentence;
+
+    #[test]
+    fn an_activity_sets_its_actor_and_object_apart() {
+        let (text, actor, object) = sentence("Lucía Romero", "commented on", Some("Design review"));
+        assert_eq!(text, "Lucía Romero commented on Design review");
+        assert_eq!(&text[actor], "Lucía Romero");
+        assert_eq!(&text[object.expect("an object")], "Design review");
+        let (text, actor, object) = sentence("Build bot", "deployed", None);
+        assert_eq!(
+            (text.as_str(), actor, object),
+            ("Build bot deployed", 0..9, None)
+        );
+    }
+}

src/data_display/mod.rs

@@ -1,7 +1,17 @@
 mod avatar;
 mod badge;
+mod changelog;
+mod feed;
+mod records;
 mod stat;
+#[cfg(test)]
+mod tests;
+mod timeline;
 
 pub use avatar::{Avatar, AvatarGroup, Presence, UserChip};
 pub use badge::{Badge, CountBadge, DotBadge, Tag, Tone};
+pub use changelog::{Change, Changelog, Release};
+pub use feed::{Activity, ActivityFeed};
+pub use records::{DescriptionList, PropertyGrid, PropertyGroup};
 pub use stat::{KpiCard, Statistic, TrendIndicator};
+pub use timeline::{Timeline, TimelineItem};

src/data_display/records.rs

@@ -0,0 +1,245 @@
+use gpui::{
+    Animation, AnimationExt, AnyElement, App, ElementId, FontWeight, InteractiveElement,
+    IntoElement, ParentElement, RenderOnce, SharedString, StatefulInteractiveElement, Styled,
+    Window, div, prelude::*, radians,
+};
+
+use crate::{
+    layout::{Collapsible, seeded::use_seeded},
+    motion,
+    primitives::{Icon, IconName},
+    theme::{ActiveTheme, ControlSize, IconSize, TextSize},
+};
+
+/// Labels and their values, one pair a row with the labels in a quiet column, or stacked with each label above its value.
+#[derive(IntoElement, Default)]
+pub struct DescriptionList {
+    items: Vec<(SharedString, AnyElement)>,
+    stacked: bool,
+    lined: bool,
+}
+
+impl DescriptionList {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// A label, and its value: text, or any element such as a badge.
+    pub fn item(mut self, label: impl Into<SharedString>, value: impl IntoElement) -> Self {
+        self.items.push((label.into(), value.into_any_element()));
+        self
+    }
+
+    /// Each label above its value, for narrow places.
+    pub fn stacked(mut self) -> Self {
+        self.stacked = true;
+        self
+    }
+
+    /// A hairline between rows.
+    pub fn lined(mut self) -> Self {
+        self.lined = true;
+        self
+    }
+}
+
+impl RenderOnce for DescriptionList {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let (stacked, lined, last) = (self.stacked, self.lined, self.items.len().saturating_sub(1));
+        div()
+            .flex()
+            .flex_col()
+            .text_size(theme.text_size(TextSize::Base))
+            .children(
+                self.items
+                    .into_iter()
+                    .enumerate()
+                    .map(|(ix, (label, value))| {
+                        let label = div().text_color(colors.fg_muted).child(label);
+                        div()
+                            .flex()
+                            .when(stacked, |row| row.flex_col().gap_0p5())
+                            .when(!stacked, |row| row.items_baseline().gap_4())
+                            .py_2()
+                            .when(lined && ix < last, |row| {
+                                row.border_b_1().border_color(colors.border)
+                            })
+                            .child(if stacked {
+                                label.text_size(theme.text_size(TextSize::Sm))
+                            } else {
+                                label.flex_none().w(theme.label_width())
+                            })
+                            .child(
+                                div()
+                                    .flex()
+                                    .flex_1()
+                                    .min_w_0()
+                                    .text_color(colors.fg)
+                                    .child(value),
+                            )
+                    }),
+            )
+    }
+}
+
+/// A titled group of a `PropertyGrid`, open unless `folded`.
+pub struct PropertyGroup {
+    title: SharedString,
+    open: bool,
+    rows: Vec<(SharedString, AnyElement)>,
+}
+
+impl PropertyGroup {
+    pub fn new(title: impl Into<SharedString>) -> Self {
+        Self {
+            title: title.into(),
+            open: true,
+            rows: Vec::new(),
+        }
+    }
+
+    /// Starts folded.
+    pub fn folded(mut self) -> Self {
+        self.open = false;
+        self
+    }
+
+    /// A property's name and the editor that changes it.
+    pub fn row(mut self, name: impl Into<SharedString>, editor: impl IntoElement) -> Self {
+        self.rows.push((name.into(), editor.into_any_element()));
+        self
+    }
+}
+
+/// An inspector's table: groups that fold, each row a name and its editor. The owner supplies the editors and keeps the values.
+#[derive(IntoElement)]
+pub struct PropertyGrid {
+    id: ElementId,
+    groups: Vec<PropertyGroup>,
+}
+
+impl PropertyGrid {
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            groups: Vec::new(),
+        }
+    }
+
+    pub fn group(mut self, group: PropertyGroup) -> Self {
+        self.groups.push(group);
+        self
+    }
+}
+
+impl RenderOnce for PropertyGrid {
+    fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let folds: Vec<_> = self
+            .groups
+            .iter()
+            .enumerate()
+            .map(|(ix, group)| {
+                use_seeded(
+                    (self.id.clone(), format!("fold-{ix}")),
+                    group.open,
+                    window,
+                    cx,
+                )
+            })
+            .collect();
+        let turns: Vec<_> = folds
+            .iter()
+            .enumerate()
+            .map(|(ix, fold)| {
+                let shown = fold.read(cx).value;
+                motion::changes((self.id.clone(), format!("turns-{ix}")), shown, window, cx)
+            })
+            .collect();
+        let length = motion::duration(motion::FAST, cx);
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let row_height = theme.control_height(ControlSize::Md);
+        let id = self.id.clone();
+        div()
+            .id(self.id)
+            .flex()
+            .flex_col()
+            .text_size(theme.text_size(TextSize::Sm))
+            .children(self.groups.into_iter().enumerate().map(
+                |(ix, PropertyGroup { title, rows, .. })| {
+                    let shown = folds[ix].read(cx).value;
+                    let (toggle, key) = (folds[ix].clone(), title.clone());
+                    let turn = |share: f32| radians(share * std::f32::consts::FRAC_PI_2);
+                    let chevron = Icon::new(IconName::ChevronRight)
+                        .size(IconSize::Xs)
+                        .color(colors.fg_subtle);
+                    let chevron = match turns[ix] {
+                        0 => chevron
+                            .rotate(turn(if shown { 1.0 } else { 0.0 }))
+                            .into_any_element(),
+                        changes => chevron
+                            .with_animation(
+                                (id.clone(), format!("chevron-{ix}-{changes}")),
+                                Animation::new(length).with_easing(motion::ease_out_cubic),
+                                move |icon, t| icon.rotate(turn(if shown { t } else { 1.0 - t })),
+                            )
+                            .into_any_element(),
+                    };
+                    div()
+                        .when(ix > 0, |group| {
+                            group.border_t_1().border_color(colors.border)
+                        })
+                        .child(
+                            div()
+                                .id((id.clone(), format!("group-{ix}")))
+                                .flex()
+                                .items_center()
+                                .gap_1()
+                                .h(row_height)
+                                .px_2()
+                                .cursor_pointer()
+                                .font_weight(FontWeight::SEMIBOLD)
+                                .text_color(colors.fg)
+                                .hover(|style| style.bg(colors.hover))
+                                .on_click(move |_, _, cx| {
+                                    log::info!(
+                                        "property grid: {key} {}",
+                                        if shown { "folded" } else { "opened" }
+                                    );
+                                    toggle.update(cx, |fold, cx| {
+                                        fold.value = !shown;
+                                        cx.notify();
+                                    })
+                                })
+                                .child(chevron)
+                                .child(title),
+                        )
+                        .child(
+                            Collapsible::new((id.clone(), format!("rows-{ix}")), shown).child(
+                                div()
+                                    .pb_1()
+                                    .children(rows.into_iter().map(|(name, editor)| {
+                                        div()
+                                            .flex()
+                                            .items_center()
+                                            .gap_3()
+                                            .min_h(row_height)
+                                            .pl_6()
+                                            .pr_2()
+                                            .child(
+                                                div()
+                                                    .flex_none()
+                                                    .w(theme.label_width() * 0.75)
+                                                    .text_color(colors.fg_muted)
+                                                    .child(name),
+                                            )
+                                            .child(div().flex_1().min_w_0().child(editor))
+                                    })),
+                            ),
+                        )
+                },
+            ))
+    }
+}

src/data_display/tests.rs

@@ -0,0 +1,65 @@
+use std::{cell::Cell, rc::Rc};
+
+use gpui::{
+    Context, IntoElement, Modifiers, ParentElement, Pixels, Render, Styled, TestAppContext,
+    VisualTestContext, Window, div, point, px,
+};
+
+use super::{PropertyGrid, PropertyGroup};
+use crate::{primitives::Measure, theme::Theme};
+
+/// A property grid whose drawn height the test reads.
+struct Inspector(Rc<Cell<Pixels>>);
+
+impl Render for Inspector {
+    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
+        let height = self.0.clone();
+        let editor = || div().h(px(20.0));
+        div().w(px(320.0)).child(
+            Measure::new("measure", move |bounds, _, _| {
+                height.set(bounds.size.height)
+            })
+            .child(
+                PropertyGrid::new("grid")
+                    .group(
+                        PropertyGroup::new("Layout")
+                            .row("Width", editor())
+                            .row("Height", editor()),
+                    )
+                    .group(PropertyGroup::new("Export").folded().row("Scale", editor())),
+            ),
+        )
+    }
+}
+
+/// Frames 2ms apart, past reduced motion's 1ms folds.
+fn settle(cx: &mut VisualTestContext) {
+    for _ in 0..3 {
+        std::thread::sleep(std::time::Duration::from_millis(2));
+        cx.update(|window, _| window.refresh());
+        cx.run_until_parked();
+    }
+}
+
+#[gpui::test]
+fn a_property_group_folds_from_its_header_and_stays_folded(cx: &mut TestAppContext) {
+    cx.update(|cx| {
+        Theme::init(cx);
+        Theme::update(cx, |theme| theme.reduced_motion = true);
+    });
+    let height = Rc::new(Cell::new(Pixels::ZERO));
+    let seen = height.clone();
+    let (_, cx) = cx.add_window_view(|_, _| Inspector(seen));
+    settle(cx);
+    let open = height.get();
+    let header = point(px(4.0), px(12.0));
+    cx.simulate_click(header, Modifiers::none());
+    settle(cx);
+    let folded = height.get();
+    assert!(folded < open, "the rows fold away: {open:?} to {folded:?}");
+    settle(cx);
+    assert_eq!(height.get(), folded, "a new frame keeps the fold");
+    cx.simulate_click(header, Modifiers::none());
+    settle(cx);
+    assert_eq!(height.get(), open, "a second press opens it");
+}

src/data_display/timeline.rs

@@ -0,0 +1,202 @@
+use gpui::{
+    AnyElement, App, IntoElement, ParentElement, Rems, RenderOnce, Styled, Window, div, prelude::*,
+};
+use smallvec::SmallVec;
+
+use super::Tone;
+use crate::{
+    primitives::{Icon, IconName},
+    theme::{ActiveTheme, ControlSize, IconSize, TextSize},
+};
+
+/// What marks an event on the rail.
+enum Marker {
+    Dot,
+    Icon(IconName),
+    Element(AnyElement),
+}
+
+/// One event on a `Timeline`: its title, when it happened, and any detail below.
+#[derive(IntoElement)]
+pub struct TimelineItem {
+    title: AnyElement,
+    time: Option<AnyElement>,
+    tone: Tone,
+    marker: Marker,
+    tail: bool,
+    body: SmallVec<[AnyElement; 2]>,
+}
+
+impl TimelineItem {
+    pub fn new(title: impl IntoElement) -> Self {
+        Self {
+            title: title.into_any_element(),
+            time: None,
+            tone: Tone::Neutral,
+            marker: Marker::Dot,
+            tail: false,
+            body: SmallVec::new(),
+        }
+    }
+
+    /// When it happened: a date, or a `RelativeTime`.
+    pub fn time(mut self, time: impl IntoElement) -> Self {
+        self.time = Some(time.into_any_element());
+        self
+    }
+
+    /// Tints the dot or the icon's ring.
+    pub fn tone(mut self, tone: impl Into<Tone>) -> Self {
+        self.tone = tone.into();
+        self
+    }
+
+    /// An icon in a ring in place of the dot.
+    pub fn icon(mut self, icon: IconName) -> Self {
+        self.marker = Marker::Icon(icon);
+        self
+    }
+
+    /// An element the size of a small avatar in place of the dot.
+    pub fn marker(mut self, marker: impl IntoElement) -> Self {
+        self.marker = Marker::Element(marker.into_any_element());
+        self
+    }
+
+    /// The rail runs on below this event, to the next.
+    pub(super) fn tail(mut self, tail: bool) -> Self {
+        self.tail = tail;
+        self
+    }
+}
+
+impl ParentElement for TimelineItem {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.body.extend(elements);
+    }
+}
+
+impl RenderOnce for TimelineItem {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let slot = theme.control_height(ControlSize::Sm);
+        let dot = theme.status_dot() * 1.34;
+        let (marker, inset) = match self.marker {
+            Marker::Dot => (
+                div()
+                    .size(dot)
+                    .rounded_full()
+                    .bg(self.tone.dot(colors))
+                    .into_any_element(),
+                (slot - dot) / 2.0,
+            ),
+            Marker::Icon(icon) => {
+                let (fill, ink) = self.tone.colors(colors);
+                let ring = div()
+                    .flex()
+                    .items_center()
+                    .justify_center()
+                    .size(slot)
+                    .rounded_full()
+                    .bg(fill)
+                    .child(Icon::new(icon).size(IconSize::Xs).color(ink));
+                (ring.into_any_element(), Rems::default())
+            }
+            Marker::Element(element) => (element, Rems::default()),
+        };
+        let reach = dot / 2.0 - inset;
+        div()
+            .flex()
+            .gap_3()
+            .child(
+                div()
+                    .flex()
+                    .flex_col()
+                    .items_center()
+                    .flex_none()
+                    .w(slot)
+                    .child(
+                        div()
+                            .flex()
+                            .items_center()
+                            .justify_center()
+                            .size(slot)
+                            .child(marker),
+                    )
+                    .when(self.tail, |rail| {
+                        rail.child(
+                            div()
+                                .flex_1()
+                                .mt(reach)
+                                .mb(reach)
+                                .border_l_1()
+                                .border_color(colors.border),
+                        )
+                    }),
+            )
+            .child(
+                div()
+                    .flex_1()
+                    .min_w_0()
+                    .when(self.tail, |content| content.pb_6())
+                    .child(
+                        div()
+                            .flex()
+                            .items_center()
+                            .gap_3()
+                            .min_h(slot)
+                            .text_size(theme.text_size(TextSize::Base))
+                            .text_color(colors.fg)
+                            .child(div().flex_1().min_w_0().child(self.title))
+                            .when_some(self.time, |head, time| {
+                                head.child(
+                                    div()
+                                        .flex_none()
+                                        .text_size(theme.text_size(TextSize::Sm))
+                                        .text_color(colors.fg_subtle)
+                                        .child(time),
+                                )
+                            }),
+                    )
+                    .when(!self.body.is_empty(), |content| {
+                        content.child(
+                            div()
+                                .mt_1()
+                                .text_size(theme.text_size(TextSize::Sm))
+                                .text_color(colors.fg_muted)
+                                .children(self.body),
+                        )
+                    }),
+            )
+    }
+}
+
+/// Events down a rail in the order given, each marked by a dot, an icon or an avatar.
+#[derive(IntoElement, Default)]
+pub struct Timeline {
+    items: Vec<TimelineItem>,
+}
+
+impl Timeline {
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    pub fn item(mut self, item: TimelineItem) -> Self {
+        self.items.push(item);
+        self
+    }
+}
+
+impl RenderOnce for Timeline {
+    fn render(self, _: &mut Window, _: &mut App) -> impl IntoElement {
+        let last = self.items.len().saturating_sub(1);
+        div().flex().flex_col().children(
+            self.items
+                .into_iter()
+                .enumerate()
+                .map(|(ix, item)| item.tail(ix < last)),
+        )
+    }
+}