ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 5.5 committed 2026-09-26 23:35:04 -04:00
1 parent 6f599803ce
commit b6b1224c27
17 files changed
+1244 -153
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/messaging/channels.rs
+30 -54
View File
@@ -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
+66 -88
View File
@@ -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),
)
})
}
}