Mail · Boxes and lists: mailboxes, folders and labels, the mail list, inbox zero

MailboxList sets mailboxes, folders and labels in sections: a press, an
arrow or Enter opens one, the open one lit; a box with mail unread
stands out with its count, and a label wears one of the theme's chart
hues. MailList holds messages in a multiple-select list: the sender
strong beside a dot while unread, the subject and first words under
it, the time today, the weekday this week, the date this year or with
its year, a paperclip for files, and a star whose press stays off the
row. InboxZeroState points to feedback::EmptyState.

Sections of selectable lists now have one home, lists::Sections, which
ChannelList and MemberList use too; ListItem gains a third line.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/lib.rs

@@ -17,6 +17,7 @@ pub mod generative;
 pub mod git;
 pub mod layout;
 pub mod lists;
+pub mod mail;
 pub mod media;
 pub mod menus;
 pub mod messaging;

src/lists/item.rs

@@ -20,6 +20,7 @@ pub struct ListItem {
     id: ElementId,
     title: SharedString,
     description: Option<SharedString>,
+    detail: Option<SharedString>,
     leading: Option<AnyElement>,
     trailing: Option<AnyElement>,
     selected: bool,
@@ -36,6 +37,7 @@ impl ListItem {
             id: id.into(),
             title: title.into(),
             description: None,
+            detail: None,
             leading: None,
             trailing: None,
             selected: false,
@@ -65,6 +67,12 @@ impl ListItem {
         self
     }
 
+    /// A third line, quieter still, such as a message's first words.
+    pub fn detail(mut self, text: impl Into<SharedString>) -> Self {
+        self.detail = Some(text.into());
+        self
+    }
+
     /// An icon or an avatar before the text.
     pub fn leading(mut self, element: impl IntoElement) -> Self {
         self.leading = Some(element.into_any_element());
@@ -164,6 +172,11 @@ impl RenderOnce for ListItem {
                         line(text)
                             .text_size(theme.text_size(TextSize::Sm))
                             .text_color(colors.fg_muted)
+                    }))
+                    .children(self.detail.map(|text| {
+                        line(text)
+                            .text_size(theme.text_size(TextSize::Sm))
+                            .text_color(colors.fg_subtle)
                     })),
             )
             .children(self.trailing.map(|trailing| {

src/lists/mod.rs

@@ -4,6 +4,7 @@ mod grouped;
 mod item;
 mod long;
 mod outline;
+mod sections;
 mod select;
 mod sortable;
 mod swipe;
@@ -19,6 +20,7 @@ pub use grouped::GroupedList;
 pub use item::{List, ListItem};
 pub use long::{InfiniteList, VirtualList};
 pub use outline::Outline;
+pub(crate) use sections::Sections;
 pub use select::SelectableList;
 pub(crate) use select::{Pick, picked};
 pub use sortable::SortableList;

src/lists/sections.rs

@@ -0,0 +1,120 @@
+use gpui::{
+    App, ElementId, FontWeight, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
+    Window, div,
+};
+
+use super::{ListItem, SelectableList};
+use crate::{
+    forms::OnValue,
+    theme::{ActiveTheme, TextSize},
+};
+
+/// Lists under titles down a column, each a `SelectableList` keyed by its title under the id: Tab moves between them, and the chosen key is lit wherever it sits. A press or an arrow selects, Enter or a double press activates. Owners check their titles and keys.
+#[derive(IntoElement)]
+pub(crate) struct Sections {
+    id: ElementId,
+    sections: Vec<(SharedString, Vec<(SharedString, ListItem)>)>,
+    counted: bool,
+    selected: Option<SharedString>,
+    on_select: Option<OnValue>,
+    on_activate: Option<OnValue>,
+}
+
+impl Sections {
+    pub(crate) fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            sections: Vec::new(),
+            counted: false,
+            selected: None,
+            on_select: None,
+            on_activate: None,
+        }
+    }
+
+    pub(crate) fn section(
+        mut self,
+        title: SharedString,
+        rows: Vec<(SharedString, ListItem)>,
+    ) -> Self {
+        self.sections.push((title, rows));
+        self
+    }
+
+    /// Shows how many rows each section holds beside its title.
+    pub(crate) fn counted(mut self) -> Self {
+        self.counted = true;
+        self
+    }
+
+    pub(crate) fn selected(mut self, key: Option<SharedString>) -> Self {
+        self.selected = key;
+        self
+    }
+
+    pub(crate) fn on_select(mut self, handler: OnValue) -> Self {
+        self.on_select = Some(handler);
+        self
+    }
+
+    pub(crate) fn on_activate(mut self, handler: OnValue) -> Self {
+        self.on_activate = Some(handler);
+        self
+    }
+}
+
+impl RenderOnce for Sections {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let sections =
+            self.sections.into_iter().map(|(title, rows)| {
+                let count = rows.len();
+                let lit = self
+                    .selected
+                    .clone()
+                    .filter(|key| rows.iter().any(|(each, _)| each == key));
+                let list = rows.into_iter().fold(
+                    SelectableList::new((self.id.clone(), format!("section-{title}"))),
+                    |list, (key, row)| list.row(key, row),
+                );
+                let (select, activate) = (self.on_select.clone(), self.on_activate.clone());
+                div()
+                    .flex()
+                    .flex_col()
+                    .gap_1()
+                    .child(
+                        div()
+                            .px_3()
+                            .flex()
+                            .items_baseline()
+                            .gap_2()
+                            .text_size(theme.text_size(TextSize::Xs))
+                            .child(
+                                div()
+                                    .font_weight(FontWeight::SEMIBOLD)
+                                    .text_color(colors.fg_muted)
+                                    .child(title),
+                            )
+                            .children(self.counted.then(|| {
+                                div().text_color(colors.fg_subtle).child(count.to_string())
+                            })),
+                    )
+                    .child(
+                        list.selected(lit)
+                            .on_change(move |keys, window, cx| {
+                                let key = keys.first().expect("a pick names a row");
+                                if let Some(select) = &select {
+                                    select(key, window, cx);
+                                }
+                            })
+                            .on_activate(move |key, window, cx| {
+                                if let Some(activate) = &activate {
+                                    activate(key, window, cx);
+                                }
+                            }),
+                    )
+            });
+        div().w_full().flex().flex_col().gap_4().children(sections)
+    }
+}

src/mail/boxes.rs

@@ -0,0 +1,197 @@
+use std::rc::Rc;
+
+use gpui::{
+    App, ElementId, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString,
+    Styled, Window, div,
+};
+
+use crate::{
+    data_display::CountBadge,
+    forms::OnValue,
+    lists::{ListItem, Sections},
+    primitives::{Icon, IconName},
+    theme::{ActiveTheme, IconSize},
+};
+
+/// What marks a mailbox: an icon, or a label's hue among the theme's chart colors.
+#[derive(Clone, Copy, Debug, PartialEq)]
+enum Mark {
+    Icon(IconName),
+    Hue(usize),
+}
+
+/// A mailbox, folder or label: its key, its name, its mark, and how many messages wait unread.
+#[derive(Clone, Debug, PartialEq)]
+pub struct Mailbox {
+    pub key: SharedString,
+    pub name: SharedString,
+    mark: Mark,
+    pub unread: u32,
+}
+
+impl Mailbox {
+    pub fn new(
+        key: impl Into<SharedString>,
+        name: impl Into<SharedString>,
+        icon: IconName,
+    ) -> Self {
+        Self {
+            key: key.into(),
+            name: name.into(),
+            mark: Mark::Icon(icon),
+            unread: 0,
+        }
+    }
+
+    /// A label, marked by a dot in the theme's chart color at `hue`.
+    pub fn label(key: impl Into<SharedString>, name: impl Into<SharedString>, hue: usize) -> Self {
+        Self {
+            key: key.into(),
+            name: name.into(),
+            mark: Mark::Hue(hue),
+            unread: 0,
+        }
+    }
+
+    pub fn unread(mut self, count: u32) -> Self {
+        self.unread = count;
+        self
+    }
+
+    fn item(&self, id: &ElementId, cx: &App) -> ListItem {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let mark = match self.mark {
+            Mark::Icon(icon) => Icon::new(icon)
+                .size(IconSize::Sm)
+                .color(colors.fg_muted)
+                .into_any_element(),
+            Mark::Hue(hue) => {
+                let tint = *colors
+                    .chart
+                    .get(hue)
+                    .unwrap_or_else(|| panic!("label {}: no chart hue {hue}", self.name));
+                div()
+                    .size(theme.icon_size(IconSize::Sm))
+                    .flex()
+                    .items_center()
+                    .justify_center()
+                    .child(div().size(theme.status_dot()).rounded_full().bg(tint))
+                    .into_any_element()
+            }
+        };
+        let row = ListItem::new((id.clone(), format!("box-{}", self.key)), self.name.clone())
+            .leading(mark)
+            .strong(self.unread > 0);
+        match self.unread {
+            0 => row,
+            unread => row.trailing(
+                CountBadge::new(
+                    (id.clone(), format!("unread-{}", self.key)),
+                    unread as usize,
+                )
+                .max(999),
+            ),
+        }
+    }
+}
+
+/// Mailboxes, folders and labels in sections down a column: a press, an arrow or Enter opens one, and the one open is lit. A box with mail unread stands out with its count.
+#[derive(IntoElement)]
+pub struct MailboxList {
+    id: ElementId,
+    sections: Vec<(SharedString, Vec<Mailbox>)>,
+    open: Option<SharedString>,
+    on_open: Option<OnValue>,
+}
+
+impl MailboxList {
+    pub fn new(id: impl Into<ElementId>) -> Self {
+        Self {
+            id: id.into(),
+            sections: Vec::new(),
+            open: None,
+            on_open: None,
+        }
+    }
+
+    /// A section under `title`; a title names one section, and a section holds a box.
+    pub fn section(
+        mut self,
+        title: impl Into<SharedString>,
+        boxes: impl IntoIterator<Item = Mailbox>,
+    ) -> Self {
+        let title = title.into();
+        let boxes: Vec<Mailbox> = boxes.into_iter().collect();
+        assert!(!boxes.is_empty(), "section {title} holds no mailbox");
+        let named = self.sections.iter().any(|(other, _)| *other == title);
+        assert!(!named, "section {title} twice");
+        for (ix, mailbox) in boxes.iter().enumerate() {
+            let seen = self
+                .sections
+                .iter()
+                .flat_map(|(_, boxes)| boxes)
+                .chain(&boxes[..ix])
+                .any(|other| other.key == mailbox.key);
+            assert!(!seen, "mailbox {} twice", mailbox.key);
+        }
+        self.sections.push((title, boxes));
+        self
+    }
+
+    /// The box open now, by key.
+    pub fn open(mut self, key: impl Into<SharedString>) -> Self {
+        self.open = Some(key.into());
+        self
+    }
+
+    /// Gets the key of the box to open.
+    pub fn on_open(
+        mut self,
+        handler: impl Fn(&SharedString, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_open = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for MailboxList {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        if let Some(open) = &self.open {
+            let listed = self
+                .sections
+                .iter()
+                .flat_map(|(_, boxes)| boxes)
+                .any(|mailbox| mailbox.key == *open);
+            assert!(listed, "no mailbox {open}");
+        }
+        let open: OnValue = {
+            let (id, on_open) = (self.id.clone(), self.on_open.clone());
+            Rc::new(move |key, window, cx| {
+                log::info!("mailbox list {id}: open {key}");
+                if let Some(on_open) = &on_open {
+                    on_open(key, window, cx);
+                }
+            })
+        };
+        let sections = self.sections.iter().fold(
+            Sections::new(self.id.clone()),
+            |sections, (title, boxes)| {
+                let rows = boxes
+                    .iter()
+                    .map(|mailbox| (mailbox.key.clone(), mailbox.item(&self.id, cx)))
+                    .collect();
+                sections.section(title.clone(), rows)
+            },
+        );
+        div()
+            .debug_selector(|| "mailbox-list".into())
+            .w_full()
+            .child(
+                sections
+                    .selected(self.open)
+                    .on_select(open.clone())
+                    .on_activate(open),
+            )
+    }
+}

src/mail/list.rs

@@ -0,0 +1,352 @@
+use std::rc::Rc;
+
+use gpui::{
+    AnyElement, App, ElementId, InteractiveElement, IntoElement, MouseButton, ParentElement,
+    RenderOnce, SharedString, StatefulInteractiveElement, Styled, Window, div, prelude::*,
+};
+use jiff::{Timestamp, tz::TimeZone};
+
+use crate::{
+    forms::{OnFlag, OnValues},
+    lists::{ListItem, SelectableList},
+    primitives::{FocusRing, Icon, IconName, Tooltip},
+    theme::{ActiveTheme, IconSize, Radius, TextSize},
+    typography::format,
+};
+
+type OnStar = Rc<dyn Fn(&SharedString, bool, &mut Window, &mut App)>;
+
+/// A message as a list shows it: who sent it, its subject and first words, when it came, and its flags.
+#[derive(Clone, Debug, PartialEq)]
+pub struct Mail {
+    pub key: SharedString,
+    pub from: SharedString,
+    pub subject: SharedString,
+    pub snippet: Option<SharedString>,
+    pub at: Timestamp,
+    pub unread: bool,
+    pub starred: bool,
+    pub attachments: usize,
+}
+
+impl Mail {
+    pub fn new(
+        key: impl Into<SharedString>,
+        from: impl Into<SharedString>,
+        subject: impl Into<SharedString>,
+        at: Timestamp,
+    ) -> Self {
+        Self {
+            key: key.into(),
+            from: from.into(),
+            subject: subject.into(),
+            snippet: None,
+            at,
+            unread: false,
+            starred: false,
+            attachments: 0,
+        }
+    }
+
+    /// Its first words.
+    pub fn snippet(mut self, text: impl Into<SharedString>) -> Self {
+        self.snippet = Some(text.into());
+        self
+    }
+
+    pub fn unread(mut self, unread: bool) -> Self {
+        self.unread = unread;
+        self
+    }
+
+    pub fn starred(mut self, starred: bool) -> Self {
+        self.starred = starred;
+        self
+    }
+
+    /// How many files it carries.
+    pub fn attachments(mut self, count: usize) -> Self {
+        self.attachments = count;
+        self
+    }
+}
+
+/// When a message came, as a list says it: the time today, the weekday within the week, the date within the year, and the year past that.
+fn when(at: Timestamp, now: Timestamp, zone: &TimeZone) -> String {
+    let (at, now) = (at.to_zoned(zone.clone()), now.to_zoned(zone.clone()));
+    let days = at
+        .date()
+        .until(now.date())
+        .expect("two dates have a span")
+        .get_days();
+    let pattern = match days {
+        0 => "%H:%M",
+        1..=6 => "%a",
+        _ if at.year() == now.year() => "%b %-d",
+        _ => "%b %-d, %Y",
+    };
+    at.strftime(pattern).to_string()
+}
+
+/// A message as a row: its sender, strong beside a dot while unread, the subject and first words under it, when it came, a paperclip when it carries files, and its star. With a handler the star toggles, its press kept off the row.
+#[derive(IntoElement)]
+pub struct MailItem {
+    id: ElementId,
+    mail: Mail,
+    zone: Option<TimeZone>,
+    on_star: Option<OnFlag>,
+}
+
+impl MailItem {
+    pub fn new(id: impl Into<ElementId>, mail: Mail) -> Self {
+        Self {
+            id: id.into(),
+            mail,
+            zone: None,
+            on_star: None,
+        }
+    }
+
+    /// The zone its date reads in; the system's otherwise.
+    pub fn zone(mut self, zone: TimeZone) -> Self {
+        self.zone = Some(zone);
+        self
+    }
+
+    /// Gets the star's new state.
+    pub fn on_star(mut self, handler: impl Fn(bool, &mut Window, &mut App) + 'static) -> Self {
+        self.on_star = Some(Rc::new(handler));
+        self
+    }
+
+    fn item(self, cx: &App) -> ListItem {
+        let theme = cx.theme();
+        let colors = &theme.colors;
+        let mail = self.mail;
+        let zone = self
+            .zone
+            .unwrap_or_else(|| format::system_zone("mail item"));
+        let date = when(mail.at, Timestamp::now(), &zone);
+        let dot = div()
+            .size(theme.icon_size(IconSize::Xs))
+            .flex()
+            .items_center()
+            .justify_center()
+            .child(
+                div()
+                    .size(theme.status_dot())
+                    .rounded_full()
+                    .when(mail.unread, |dot| dot.bg(colors.accent)),
+            );
+        let starred = mail.starred;
+        let tint = if starred {
+            colors.warning
+        } else {
+            colors.fg_subtle
+        };
+        let mark = |icon| Icon::new(icon).size(IconSize::Sm).color(tint);
+        let star: Option<AnyElement> = match self.on_star {
+            Some(set) => {
+                let key = mail.key.clone();
+                let named = key.clone();
+                Some(
+                    div()
+                        .id((self.id.clone(), "star"))
+                        .debug_selector(move || format!("star {named}"))
+                        .p_0p5()
+                        .rounded(theme.radius(Radius::Sm))
+                        .border_1()
+                        .border_color(gpui::transparent_black())
+                        .tab_index(0)
+                        .focus_ring(cx)
+                        .cursor_pointer()
+                        .hover(|style| style.bg(colors.hover))
+                        .tooltip(Tooltip::text(if starred { "Unstar" } else { "Star" }))
+                        .on_mouse_down(MouseButton::Left, |_, window, cx| {
+                            window.prevent_default();
+                            cx.stop_propagation();
+                        })
+                        .on_click(move |_, window, cx| {
+                            log::info!("mail {key}: star {}", !starred);
+                            set(!starred, window, cx)
+                        })
+                        .child(mark(IconName::Star))
+                        .into_any_element(),
+                )
+            }
+            None => starred.then(|| mark(IconName::Star).into_any_element()),
+        };
+        let clip = (mail.attachments > 0).then(|| {
+            Icon::new(IconName::Paperclip)
+                .size(IconSize::Sm)
+                .color(colors.fg_subtle)
+        });
+        let trail = div()
+            .flex()
+            .flex_col()
+            .items_end()
+            .gap_1()
+            .child(div().text_size(theme.text_size(TextSize::Xs)).child(date))
+            .child(
+                div()
+                    .flex()
+                    .items_center()
+                    .gap_1()
+                    .children(clip)
+                    .children(star),
+            );
+        let row = ListItem::new(self.id, mail.from)
+            .leading(dot)
+            .strong(mail.unread)
+            .description(mail.subject)
+            .trailing(trail);
+        match mail.snippet {
+            Some(snippet) => row.detail(snippet),
+            None => row,
+        }
+    }
+}
+
+impl RenderOnce for MailItem {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        self.item(cx)
+    }
+}
+
+/// Messages in a list, in the order given: a press or an arrow selects one, and Command or Shift with a press takes several; Space toggles. Unread ones stand out.
+#[derive(IntoElement)]
+pub struct MailList {
+    id: ElementId,
+    mails: Vec<Mail>,
+    selected: Vec<SharedString>,
+    zone: Option<TimeZone>,
+    on_select: Option<OnValues>,
+    on_star: Option<OnStar>,
+}
+
+impl MailList {
+    pub fn new(id: impl Into<ElementId>, mails: impl IntoIterator<Item = Mail>) -> Self {
+        let mails: Vec<Mail> = mails.into_iter().collect();
+        for (ix, mail) in mails.iter().enumerate() {
+            let twice = mails[..ix].iter().any(|other| other.key == mail.key);
+            assert!(!twice, "mail {} twice", mail.key);
+        }
+        Self {
+            id: id.into(),
+            mails,
+            selected: Vec::new(),
+            zone: None,
+            on_select: None,
+            on_star: None,
+        }
+    }
+
+    /// The messages selected now, by key.
+    pub fn selected(mut self, keys: impl IntoIterator<Item = impl Into<SharedString>>) -> Self {
+        self.selected = keys.into_iter().map(Into::into).collect();
+        self
+    }
+
+    /// The zone dates read in; the system's otherwise.
+    pub fn zone(mut self, zone: TimeZone) -> Self {
+        self.zone = Some(zone);
+        self
+    }
+
+    /// Gets the keys selected, in list order.
+    pub fn on_select(
+        mut self,
+        handler: impl Fn(&[SharedString], &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_select = Some(Rc::new(handler));
+        self
+    }
+
+    /// Gets a message's key and its star's new state.
+    pub fn on_star(
+        mut self,
+        handler: impl Fn(&SharedString, bool, &mut Window, &mut App) + 'static,
+    ) -> Self {
+        self.on_star = Some(Rc::new(handler));
+        self
+    }
+}
+
+impl RenderOnce for MailList {
+    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
+        for key in &self.selected {
+            let listed = self.mails.iter().any(|mail| mail.key == *key);
+            assert!(listed, "no mail {key}");
+        }
+        let theme = cx.theme();
+        if self.mails.is_empty() {
+            return div()
+                .debug_selector(|| "mail-none".into())
+                .w_full()
+                .px_3()
+                .py_4()
+                .text_size(theme.text_size(TextSize::Sm))
+                .text_color(theme.colors.fg_muted)
+                .child("No mail here.")
+                .into_any_element();
+        }
+        let zone = self
+            .zone
+            .unwrap_or_else(|| format::system_zone("mail list"));
+        let list = self.mails.into_iter().fold(
+            SelectableList::new((self.id.clone(), "mails")).multiple(),
+            |list, mail| {
+                let key = mail.key.clone();
+                let item = MailItem::new((self.id.clone(), format!("mail-{key}")), mail)
+                    .zone(zone.clone());
+                let item = match self.on_star.clone() {
+                    Some(star) => {
+                        let starred = key.clone();
+                        item.on_star(move |on, window, cx| star(&starred, on, window, cx))
+                    }
+                    None => item,
+                };
+                list.row(key, item.item(cx))
+            },
+        );
+        let (id, on_select) = (self.id.clone(), self.on_select);
+        div()
+            .debug_selector(|| "mail-list".into())
+            .w_full()
+            .child(
+                list.selected(self.selected)
+                    .on_change(move |keys, window, cx| {
+                        log::info!("mail list {id}: select {keys:?}");
+                        if let Some(on_select) = &on_select {
+                            on_select(keys, window, cx);
+                        }
+                    }),
+            )
+            .into_any_element()
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use jiff::civil::date;
+
+    use super::*;
+
+    #[test]
+    fn a_date_reads_as_the_time_the_weekday_the_date_or_the_year() {
+        let zone = TimeZone::UTC;
+        let at = |y, m, d, h| {
+            date(y, m, d)
+                .at(h, 5, 0, 0)
+                .to_zoned(zone.clone())
+                .expect("a UTC time")
+                .timestamp()
+        };
+        let now = at(2026, 9, 26, 12);
+        assert_eq!(when(at(2026, 9, 26, 9), now, &zone), "09:05");
+        assert_eq!(when(at(2026, 9, 25, 23), now, &zone), "Fri");
+        assert_eq!(when(at(2026, 9, 20, 9), now, &zone), "Sun");
+        assert_eq!(when(at(2026, 9, 19, 9), now, &zone), "Sep 19");
+        assert_eq!(when(at(2025, 12, 31, 9), now, &zone), "Dec 31, 2025");
+    }
+}

src/mail/mod.rs

@@ -0,0 +1,8 @@
+mod boxes;
+mod list;
+
+#[cfg(all(test, feature = "test-support"))]
+mod tests;
+
+pub use boxes::{Mailbox, MailboxList};
+pub use list::{Mail, MailItem, MailList};

src/mail/tests/mod.rs

@@ -0,0 +1,206 @@
+use gpui::{
+    Context, Entity, IntoElement, KeyBinding, KeyUpEvent, Keystroke, Modifiers, ParentElement,
+    Render, Styled, TestAppContext, VisualTestContext, Window, div, px,
+};
+use jiff::{Timestamp, civil::date, tz::TimeZone};
+
+use super::{Mail, MailList, Mailbox, MailboxList};
+use crate::{
+    primitives::{FocusNext, IconName},
+    theme::Theme,
+};
+
+fn setup(cx: &mut TestAppContext) {
+    cx.update(|cx| {
+        Theme::init(cx);
+        Theme::update(cx, |theme| theme.reduced_motion = true);
+        cx.bind_keys([KeyBinding::new("tab", FocusNext, None)]);
+    });
+}
+
+fn settle(cx: &mut VisualTestContext) {
+    for _ in 0..3 {
+        cx.run_until_parked();
+        cx.update(|window, _| window.refresh());
+    }
+    cx.run_until_parked();
+}
+
+fn press(key: &str, cx: &mut VisualTestContext) {
+    cx.simulate_keystrokes(key);
+    settle(cx);
+    cx.simulate_event(KeyUpEvent {
+        keystroke: Keystroke::parse(key).expect("a key"),
+    });
+    settle(cx);
+}
+
+/// Moves focus to the `nth` Tab stop from none.
+fn tab_to(nth: usize, cx: &mut VisualTestContext) {
+    cx.update(|window, _| {
+        window.blur();
+        for _ in 0..nth {
+            window.focus_next();
+        }
+    });
+    settle(cx);
+}
+
+/// A view that shows one mail part and keeps what it heard.
+struct Mailing {
+    part: fn(Entity<Mailing>) -> gpui::AnyElement,
+    heard: Vec<String>,
+}
+
+impl Render for Mailing {
+    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        div().w(px(360.0)).child((self.part)(cx.entity()))
+    }
+}
+
+fn mailing(
+    part: fn(Entity<Mailing>) -> gpui::AnyElement,
+    cx: &mut TestAppContext,
+) -> (Entity<Mailing>, &mut VisualTestContext) {
+    setup(cx);
+    let (host, cx) = cx.add_window_view(|_, _| Mailing {
+        part,
+        heard: Vec::new(),
+    });
+    cx.update(|window, _| window.activate_window());
+    settle(cx);
+    (host, cx)
+}
+
+fn note(owner: &Entity<Mailing>, what: String, cx: &mut gpui::App) {
+    owner.update(cx, |host, cx| {
+        host.heard.push(what);
+        cx.notify();
+    });
+}
+
+fn heard(host: &Entity<Mailing>, cx: &mut VisualTestContext) -> Vec<String> {
+    host.read_with(cx, |host, _| host.heard.clone())
+}
+
+fn boxes(owner: Entity<Mailing>) -> gpui::AnyElement {
+    MailboxList::new("boxes")
+        .section(
+            "Mailboxes",
+            [
+                Mailbox::new("inbox", "Inbox", IconName::Inbox).unread(3),
+                Mailbox::new("starred", "Starred", IconName::Star),
+                Mailbox::new("sent", "Sent", IconName::Send),
+            ],
+        )
+        .section(
+            "Labels",
+            [
+                Mailbox::label("atrium", "Atrium", 0),
+                Mailbox::label("clients", "Clients", 3),
+            ],
+        )
+        .open("inbox")
+        .on_open(move |key, _, cx| note(&owner, format!("open {key}"), cx))
+        .into_any_element()
+}
+
+#[gpui::test]
+fn an_arrow_or_enter_opens_a_box(cx: &mut TestAppContext) {
+    let (host, cx) = mailing(boxes, cx);
+    tab_to(1, cx);
+    press("down", cx);
+    tab_to(2, cx);
+    press("enter", cx);
+    assert_eq!(heard(&host, cx), ["open starred", "open atrium"]);
+}
+
+#[test]
+#[should_panic(expected = "mailbox inbox twice")]
+fn a_box_is_listed_once() {
+    let _ = MailboxList::new("boxes")
+        .section("A", [Mailbox::new("inbox", "Inbox", IconName::Inbox)])
+        .section("B", [Mailbox::label("inbox", "Inbox again", 1)]);
+}
+
+#[test]
+#[should_panic(expected = "section Labels holds no mailbox")]
+fn a_section_holds_a_box() {
+    let _ = MailboxList::new("boxes").section("Labels", Vec::new());
+}
+
+#[gpui::test]
+#[should_panic(expected = "no chart hue 9")]
+fn a_label_takes_one_of_the_chart_hues(cx: &mut TestAppContext) {
+    let _ = mailing(
+        |_| {
+            MailboxList::new("boxes")
+                .section("Labels", [Mailbox::label("odd", "Odd", 9)])
+                .into_any_element()
+        },
+        cx,
+    );
+}
+
+fn at(minute: i8) -> Timestamp {
+    date(2026, 9, 26)
+        .at(9, minute, 0, 0)
+        .to_zoned(TimeZone::UTC)
+        .expect("a UTC time")
+        .timestamp()
+}
+
+fn mails(owner: Entity<Mailing>) -> gpui::AnyElement {
+    let (select, star) = (owner.clone(), owner);
+    MailList::new(
+        "mails",
+        [
+            Mail::new("m1", "Ana Lima", "Friday's review", at(40)).unread(true),
+            Mail::new("m2", "Ben Ito", "Samples", at(20)).attachments(2),
+            Mail::new("m3", "Chloé Martin", "The brief", at(5)).starred(true),
+        ],
+    )
+    .selected(["m1"])
+    .zone(TimeZone::UTC)
+    .on_select(move |keys, _, cx| {
+        let keys: Vec<&str> = keys.iter().map(|key| key.as_ref()).collect();
+        note(&select, format!("select {}", keys.join(" ")), cx)
+    })
+    .on_star(move |key, on, _, cx| note(&star, format!("star {key} {on}"), cx))
+    .into_any_element()
+}
+
+#[gpui::test]
+fn an_arrow_moves_the_selection_down_the_list(cx: &mut TestAppContext) {
+    let (host, cx) = mailing(mails, cx);
+    tab_to(1, cx);
+    press("down", cx);
+    assert_eq!(heard(&host, cx), ["select m2"]);
+}
+
+#[gpui::test]
+fn a_star_toggles_and_leaves_the_selection(cx: &mut TestAppContext) {
+    let (host, cx) = mailing(mails, cx);
+    let star = cx.debug_bounds("star m3").expect("the third star draws");
+    cx.simulate_click(star.center(), Modifiers::none());
+    settle(cx);
+    assert_eq!(heard(&host, cx), ["star m3 false"]);
+}
+
+#[gpui::test]
+fn no_mail_says_so_and_takes_no_tab_stop(cx: &mut TestAppContext) {
+    let (_, cx) = mailing(
+        |_| MailList::new("mails", Vec::new()).into_any_element(),
+        cx,
+    );
+    assert!(cx.debug_bounds("mail-none").is_some());
+    tab_to(1, cx);
+    assert!(cx.update(|window, cx| window.focused(cx).is_none()));
+}
+
+#[test]
+#[should_panic(expected = "mail m1 twice")]
+fn a_mail_is_listed_once() {
+    let mail = Mail::new("m1", "Ana", "Hi", Timestamp::UNIX_EPOCH);
+    let _ = MailList::new("mails", [mail.clone(), mail]);
+}

src/messaging/channels.rs

@@ -1,16 +1,16 @@
 use std::rc::Rc;
 
 use gpui::{
-    App, ElementId, FontWeight, ImageSource, IntoElement, ParentElement, RenderOnce, SharedString,
-    Styled, Window, div, prelude::*,
+    App, ElementId, ImageSource, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
+    Window, div, prelude::*,
 };
 
 use crate::{
     data_display::{Avatar, CountBadge, Presence},
     forms::OnValue,
-    lists::{ListItem, SelectableList},
+    lists::{ListItem, Sections},
     primitives::{Icon, IconName},
-    theme::{ActiveTheme, AvatarSize, IconSize, TextSize},
+    theme::{ActiveTheme, AvatarSize, IconSize},
 };
 
 /// What unread messages add at a row's end: a count, and a pin before it when pinned.
@@ -247,63 +247,39 @@ impl RenderOnce for ChannelList {
                 .any(|(key, _)| key == open);
             assert!(listed, "no chat {open}");
         }
-        let theme = cx.theme();
-        let colors = &theme.colors;
-        let sections: Vec<_> = self
-            .sections
-            .into_iter()
-            .map(|(title, rows)| {
-                let lit = self
-                    .open
-                    .clone()
-                    .filter(|open| rows.iter().any(|(key, _)| key == open));
-                let list = rows.into_iter().fold(
-                    SelectableList::new((self.id.clone(), format!("section-{title}"))),
-                    |list, (key, row)| {
+        let open: OnValue = {
+            let (id, on_open) = (self.id.clone(), self.on_open.clone());
+            Rc::new(move |key, window, cx| {
+                log::info!("channel list {id:?}: open {key}");
+                if let Some(on_open) = &on_open {
+                    on_open(key, window, cx);
+                }
+            })
+        };
+        let sections = self.sections.into_iter().fold(
+            Sections::new(self.id.clone()),
+            |sections, (title, rows)| {
+                let rows = rows
+                    .into_iter()
+                    .map(|(key, row)| {
                         let item = match row {
                             ChatRow::Channel(item) => item.item(cx),
                             ChatRow::Direct(item) => item.item(cx),
                         };
-                        list.row(key, item)
-                    },
-                );
-                let open: OnValue = {
-                    let (id, on_open) = (self.id.clone(), self.on_open.clone());
-                    Rc::new(move |key, window, cx| {
-                        log::info!("channel list {id:?}: open {key}");
-                        if let Some(on_open) = &on_open {
-                            on_open(key, window, cx);
-                        }
+                        (key, item)
                     })
-                };
-                let picked = open.clone();
-                div()
-                    .flex()
-                    .flex_col()
-                    .gap_1()
-                    .child(
-                        div()
-                            .px_3()
-                            .text_size(theme.text_size(TextSize::Xs))
-                            .font_weight(FontWeight::SEMIBOLD)
-                            .text_color(colors.fg_muted)
-                            .child(title),
-                    )
-                    .child(
-                        list.selected(lit)
-                            .on_change(move |keys, window, cx| {
-                                picked(keys.first().expect("a pick names a chat"), window, cx)
-                            })
-                            .on_activate(move |key, window, cx| open(key, window, cx)),
-                    )
-            })
-            .collect();
+                    .collect();
+                sections.section(title, rows)
+            },
+        );
         div()
             .debug_selector(|| "channel-list".into())
             .w_full()
-            .flex()
-            .flex_col()
-            .gap_4()
-            .children(sections)
+            .child(
+                sections
+                    .selected(self.open)
+                    .on_select(open.clone())
+                    .on_activate(open),
+            )
     }
 }

src/messaging/members.rs

@@ -1,14 +1,14 @@
 use std::rc::Rc;
 
 use gpui::{
-    App, ElementId, FontWeight, ImageSource, IntoElement, ParentElement, RenderOnce, SharedString,
-    Styled, Window, div, prelude::*,
+    App, ElementId, ImageSource, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
+    Window, div, prelude::*,
 };
 
 use crate::{
     data_display::{Avatar, Badge, Presence},
     forms::OnValue,
-    lists::{ListItem, SelectableList},
+    lists::{ListItem, Sections},
     theme::{ActiveTheme, AvatarSize, TextSize},
 };
 
@@ -128,87 +128,61 @@ impl RenderOnce for MemberList {
         }
         let theme = cx.theme();
         let colors = &theme.colors;
-        let groups: Vec<_> = grouped(&self.members)
-            .into_iter()
-            .map(|(title, group)| {
-                let count = group.len();
-                let lit = self
-                    .selected
-                    .clone()
-                    .filter(|key| group.iter().any(|member| member.key == *key));
-                let list = group.into_iter().fold(
-                    SelectableList::new((self.id.clone(), format!("group-{title}"))),
-                    |list, member| {
-                        let avatar = Avatar::new(
-                            (self.id.clone(), format!("avatar-{}", member.key)),
-                            member.name.clone(),
-                        )
-                        .size(AvatarSize::Sm)
-                        .presence(member.presence);
-                        let avatar = match member.picture.clone() {
-                            Some(picture) => avatar.image(picture),
-                            None => avatar,
-                        };
-                        let row = ListItem::new(
-                            (self.id.clone(), format!("member-{}", member.key)),
-                            member.name.clone(),
-                        )
-                        .leading(avatar)
-                        .quiet(member.presence == Presence::Offline);
-                        let row = match member.status.clone() {
-                            Some(status) => row.description(status),
-                            None => row,
-                        };
-                        let row = match member.role.clone() {
-                            Some(role) => row.trailing(Badge::new(role)),
-                            None => row,
-                        };
-                        list.row(member.key.clone(), row)
-                    },
-                );
-                let (id, select, activate) = (
-                    self.id.clone(),
-                    self.on_select.clone(),
-                    self.on_activate.clone(),
-                );
-                let acted = id.clone();
-                div()
-                    .flex()
-                    .flex_col()
-                    .gap_1()
-                    .child(
-                        div()
-                            .px_3()
-                            .flex()
-                            .items_baseline()
-                            .gap_2()
-                            .text_size(theme.text_size(TextSize::Xs))
-                            .child(
-                                div()
-                                    .font_weight(FontWeight::SEMIBOLD)
-                                    .text_color(colors.fg_muted)
-                                    .child(title),
-                            )
-                            .child(div().text_color(colors.fg_subtle).child(count.to_string())),
-                    )
-                    .child(
-                        list.selected(lit)
-                            .on_change(move |keys, window, cx| {
-                                let key = keys.first().expect("a pick names a member");
-                                log::info!("member list {id}: select {key}");
-                                if let Some(select) = &select {
-                                    select(key, window, cx);
-                                }
-                            })
-                            .on_activate(move |key, window, cx| {
-                                log::info!("member list {acted}: activate {key}");
-                                if let Some(activate) = &activate {
-                                    activate(key, window, cx);
-                                }
-                            }),
-                    )
-            })
-            .collect();
+        let row = |member: &Member| {
+            let avatar = Avatar::new(
+                (self.id.clone(), format!("avatar-{}", member.key)),
+                member.name.clone(),
+            )
+            .size(AvatarSize::Sm)
+            .presence(member.presence);
+            let avatar = match member.picture.clone() {
+                Some(picture) => avatar.image(picture),
+                None => avatar,
+            };
+            let row = ListItem::new(
+                (self.id.clone(), format!("member-{}", member.key)),
+                member.name.clone(),
+            )
+            .leading(avatar)
+            .quiet(member.presence == Presence::Offline);
+            let row = match member.status.clone() {
+                Some(status) => row.description(status),
+                None => row,
+            };
+            let row = match member.role.clone() {
+                Some(role) => row.trailing(Badge::new(role)),
+                None => row,
+            };
+            (member.key.clone(), row)
+        };
+        let groups = grouped(&self.members).into_iter().fold(
+            Sections::new(self.id.clone()).counted(),
+            |groups, (title, group)| {
+                groups.section(title.into(), group.into_iter().map(row).collect())
+            },
+        );
+        let (select, activate): (OnValue, OnValue) = {
+            let (id, acted, on_select, on_activate) = (
+                self.id.clone(),
+                self.id.clone(),
+                self.on_select.clone(),
+                self.on_activate.clone(),
+            );
+            (
+                Rc::new(move |key, window, cx| {
+                    log::info!("member list {id}: select {key}");
+                    if let Some(on_select) = &on_select {
+                        on_select(key, window, cx);
+                    }
+                }),
+                Rc::new(move |key, window, cx| {
+                    log::info!("member list {acted}: activate {key}");
+                    if let Some(on_activate) = &on_activate {
+                        on_activate(key, window, cx);
+                    }
+                }),
+            )
+        };
         let empty = self.members.is_empty().then(|| {
             div()
                 .px_3()
@@ -220,11 +194,15 @@ impl RenderOnce for MemberList {
         div()
             .debug_selector(|| "member-list".into())
             .w_full()
-            .flex()
-            .flex_col()
-            .gap_4()
             .children(empty)
-            .children(groups)
+            .when(!self.members.is_empty(), |list| {
+                list.child(
+                    groups
+                        .selected(self.selected)
+                        .on_select(select)
+                        .on_activate(activate),
+                )
+            })
     }
 }
 

src/primitives/icon.rs

@@ -218,6 +218,7 @@ icons! {
     Music => "music",
     Network => "network",
     NotebookPen => "notebook-pen",
+    OctagonAlert => "octagon-alert",
     Package => "package",
     Palette => "palette",
     PanelBottom => "panel-bottom",