refactor avatar

This commit is contained in:
2026-09-18 17:03:17 +07:00
parent 88005fbc41
commit 1320a2c361
18 changed files with 919 additions and 263 deletions
+10 -2
View File
@@ -295,7 +295,11 @@ impl Screening {
.rounded(cx.theme().radius)
.text_sm()
.hover(|this| this.bg(cx.theme().elevated_surface_background))
.child(Avatar::new(profile.avatar()).small())
.child(
Avatar::new(profile.avatar())
.seed(profile.avatar_seed())
.small(),
)
.child(profile.name()),
);
}
@@ -335,7 +339,11 @@ impl Render for Screening {
.items_center()
.justify_center()
.text_center()
.child(Avatar::new(profile.avatar()).large())
.child(
Avatar::new(profile.avatar())
.seed(profile.avatar_seed())
.large(),
)
.child(
div()
.font_semibold()
+5 -1
View File
@@ -239,7 +239,11 @@ impl ContactListPanel {
h_flex()
.gap_2()
.text_sm()
.child(Avatar::new(profile.avatar()).small())
.child(
Avatar::new(profile.avatar())
.seed(profile.avatar_seed())
.small(),
)
.child(profile.name()),
)
.child(
+2 -7
View File
@@ -309,12 +309,7 @@ impl Render for ProfilePanel {
fn render(&mut self, _window: &mut gpui::Window, cx: &mut Context<Self>) -> impl IntoElement {
let avatar_input = self.avatar_input.read(cx).value();
// Get the avatar
let avatar = if avatar_input.is_empty() {
"brand/avatar.png"
} else {
avatar_input.as_str()
};
let picture = (!avatar_input.is_empty()).then_some(avatar_input);
// Get the public key as short string
let shorten_pkey = SharedString::from(shorten_pubkey(self.public_key, 8));
@@ -331,7 +326,7 @@ impl Render for ProfilePanel {
.items_center()
.justify_center()
.gap_4()
.child(Avatar::new(avatar).large())
.child(Avatar::new(picture).seed(self.public_key.to_hex()).large())
.child(
Button::new("upload")
.icon(IconName::PlusCircle)
+2
View File
@@ -344,6 +344,7 @@ impl SearchPanel {
RoomEntry::new(range.start + ix)
.name(profile.name())
.avatar(profile.avatar())
.seed(profile.avatar_seed())
.on_click(handler)
.selected(selected)
.into_any_element()
@@ -381,6 +382,7 @@ impl SearchPanel {
RoomEntry::new(range.start + ix)
.name(profile.name().trim())
.avatar(profile.avatar())
.seed(profile.avatar_seed())
.on_click(handler)
.selected(selected)
.into_any_element()
+22 -22
View File
@@ -3,8 +3,8 @@ use std::rc::Rc;
use chat::RoomKind;
use gpui::prelude::FluentBuilder;
use gpui::{
AnyElement, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce,
SharedString, StatefulInteractiveElement, Styled, Window, div, px,
App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce, SharedString,
StatefulInteractiveElement, Styled, Window, div, px,
};
use nostr_sdk::prelude::*;
use settings::AppSettings;
@@ -16,22 +16,19 @@ use ui::{Icon, IconName, Selectable, Sizable, StyledExt, WindowExtension, h_flex
use crate::dialogs::screening;
/// Group name callers can target from a `trailing` element to react to row hover.
pub const ROOM_ENTRY_GROUP: &str = "room-entry";
#[derive(IntoElement)]
pub struct RoomEntry {
ix: usize,
public_key: Option<PublicKey>,
name: Option<SharedString>,
avatar: Option<SharedString>,
seed: Option<SharedString>,
created_at: Option<SharedString>,
kind: Option<RoomKind>,
depth: u8,
selected: bool,
#[allow(clippy::type_complexity)]
handler: Option<Rc<dyn Fn(&ClickEvent, &mut Window, &mut App)>>,
trailing: Option<AnyElement>,
}
impl RoomEntry {
@@ -41,12 +38,12 @@ impl RoomEntry {
public_key: None,
name: None,
avatar: None,
seed: None,
created_at: None,
kind: None,
depth: 0,
handler: None,
selected: false,
trailing: None,
}
}
@@ -60,8 +57,13 @@ impl RoomEntry {
self
}
pub fn avatar(mut self, avatar: impl Into<SharedString>) -> Self {
self.avatar = Some(avatar.into());
pub fn avatar(mut self, picture: Option<SharedString>) -> Self {
self.avatar = picture;
self
}
pub fn seed(mut self, seed: impl Into<SharedString>) -> Self {
self.seed = Some(seed.into());
self
}
@@ -80,11 +82,6 @@ impl RoomEntry {
self
}
pub fn trailing(mut self, trailing: impl IntoElement) -> Self {
self.trailing = Some(trailing.into_any_element());
self
}
pub fn on_click(
mut self,
handler: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static,
@@ -112,22 +109,26 @@ impl RenderOnce for RoomEntry {
let public_key = self.public_key;
let is_selected = self.is_selected();
let avatar = match (self.avatar, self.seed) {
(None, None) => None,
(picture, seed) => Some(
Avatar::new(picture)
.when_some(seed, |avatar, seed| avatar.seed(seed))
.xsmall()
.flex_shrink_0(),
),
};
h_flex()
.id(self.ix)
.group(ROOM_ENTRY_GROUP)
.h_8()
.w_full()
.pl(px(6. + self.depth as f32 * 14.))
.pl(px(6. + self.depth as f32 * 10.))
.pr_1p5()
.gap_2()
.text_sm()
.rounded(cx.theme().radius)
.when(!hide_avatar, |this| {
this.when_some(self.avatar, |this, avatar| {
this.child(Avatar::new(avatar).small().flex_shrink_0())
})
})
.when(!hide_avatar, |this| this.children(avatar))
.child(
div()
.flex_1()
@@ -162,7 +163,6 @@ impl RenderOnce for RoomEntry {
.when_some(self.created_at, |this, created_at| this.child(created_at)),
),
)
.when_some(self.trailing, |this, trailing| this.child(trailing))
.hover(|this| this.bg(cx.theme().elevated_surface_background))
.when_some(self.handler, |this, handler| {
this.on_click(move |event, window, cx| {
+72 -81
View File
@@ -20,10 +20,12 @@ use ui::avatar::Avatar;
use ui::button::{Button, ButtonVariants};
use ui::dock::{Panel, PanelEvent};
use ui::indicator::Indicator;
use ui::menu::{DropdownMenu, PopupMenuItem};
use ui::menu::{ContextMenu, DropdownMenu, PopupMenuItem};
use ui::nav_item::NavItem;
use ui::scroll::Scrollbar;
use ui::{
IconName, Sizable, StyledExt, TRAFFIC_LIGHT_PADDING, h_flex, title_bar_drag_handlers, v_flex,
Icon, IconName, Sizable, StyledExt, TRAFFIC_LIGHT_PADDING, h_flex, title_bar_drag_handlers,
v_flex,
};
use crate::Command;
@@ -31,7 +33,6 @@ use crate::Command;
mod entry;
mod tree;
use entry::ROOM_ENTRY_GROUP;
pub(crate) use entry::RoomEntry;
use tree::{SidebarRow, TreeRow, TreeRowKind, TreeSection, dummy_communities};
@@ -291,7 +292,8 @@ impl Sidebar {
let room_id = room.read(cx).id;
let public_key = room.read(cx).display_member(cx).public_key();
let name = room.read(cx).display_name(cx);
let avatar = room.read(cx).display_image(cx);
let picture = room.read(cx).display_image(cx);
let seed = room.read(cx).display_image_seed(cx);
let kind = room.read(cx).kind;
let created_at = room.read(cx).created_at.to_ago();
let room_clone = room.clone();
@@ -301,55 +303,47 @@ impl Sidebar {
});
});
let sidebar = cx.entity().downgrade();
let trailing =
Button::new(ElementId::NamedInteger("room-menu".into(), index as u64))
.icon(IconName::Ellipsis)
.ghost_alt()
.xsmall()
.compact()
.invisible()
.group_hover(ROOM_ENTRY_GROUP, |style| style.visible())
.dropdown_menu(move |this, _window, _cx| {
let sidebar = sidebar.clone();
if pinned {
this.item(PopupMenuItem::new("Unpin").on_click(
move |_event, _window, cx| {
if let Err(error) =
sidebar.update(cx, |sidebar, cx| {
sidebar.unpin_room(room_id, cx);
})
{
log::error!("Failed to unpin room: {error}");
}
},
))
} else {
this.item(PopupMenuItem::new("Pin").on_click(
move |_event, _window, cx| {
if let Err(error) =
sidebar.update(cx, |sidebar, cx| {
sidebar.pin_room(room_id, cx);
})
{
log::error!("Failed to pin room: {error}");
}
},
))
}
});
RoomEntry::new(index)
let entry = RoomEntry::new(index)
.name(name)
.avatar(avatar)
.avatar(picture)
.seed(seed)
.public_key(public_key)
.kind(kind)
.created_at(created_at)
.depth(*depth)
.trailing(trailing)
.on_click(handler)
.into_any_element()
.on_click(handler);
let sidebar = cx.entity().downgrade();
ContextMenu::new(
ElementId::NamedInteger("room-context-menu".into(), index as u64),
entry,
move |this, _window, _cx| {
let sidebar = sidebar.clone();
if pinned {
this.item(PopupMenuItem::new("Unpin").on_click(
move |_event, _window, cx| {
if let Err(error) = sidebar.update(cx, |sidebar, cx| {
sidebar.unpin_room(room_id, cx);
}) {
log::error!("Failed to unpin room: {error}");
}
},
))
} else {
this.item(PopupMenuItem::new("Pin").on_click(
move |_event, _window, cx| {
if let Err(error) = sidebar.update(cx, |sidebar, cx| {
sidebar.pin_room(room_id, cx);
}) {
log::error!("Failed to pin room: {error}");
}
},
))
}
},
)
.into_any_element()
}
SidebarRow::Community { entry, depth } => TreeRow::new(
ElementId::NamedInteger("tree-row".into(), index as u64),
@@ -399,17 +393,23 @@ impl Sidebar {
let persons = PersonRegistry::global(cx);
let profile = persons.read(cx).get(public_key, cx);
let avatar = profile.avatar();
let avatar_seed = profile.avatar_seed();
let name = profile.name();
this.child(
Button::new("current-user")
.child(Avatar::new(avatar.clone()).xsmall())
.child(
Avatar::new(avatar.clone())
.seed(avatar_seed.clone())
.xsmall(),
)
.small()
.caret()
.compact()
.transparent()
.dropdown_menu(move |this, _window, cx| {
let avatar = avatar.clone();
let avatar_seed = avatar_seed.clone();
let name = name.clone();
this.min_w(px(256.))
@@ -418,7 +418,11 @@ impl Sidebar {
.gap_1p5()
.text_xs()
.text_color(cx.theme().text_muted)
.child(Avatar::new(avatar.clone()).xsmall())
.child(
Avatar::new(avatar.clone())
.seed(avatar_seed.clone())
.xsmall(),
)
.child(name.clone())
}))
.separator()
@@ -463,19 +467,6 @@ impl Sidebar {
}
}
fn nav_item(id: &'static str, icon: IconName, label: &'static str, command: Command) -> Button {
Button::new(id)
.icon(icon)
.label(label)
.ghost_alt()
.small()
.w_full()
.justify_start()
.on_click(move |_event, _window, cx| {
cx.dispatch_action(&command);
})
}
fn load_expanded(cx: &App) -> BTreeSet<TreeSection> {
let Some(keys) = AppSettings::get_expanded_sections(cx) else {
return BTreeSet::from([TreeSection::Community, TreeSection::Messages]);
@@ -520,24 +511,24 @@ impl Render for Sidebar {
.px_2()
.py_1()
.gap_1()
.child(nav_item(
"nav-inbox",
IconName::Inbox,
"Inbox",
Command::ShowInbox,
))
.child(nav_item(
"nav-browse",
IconName::Compass,
"Browse",
Command::ShowBrowse,
))
.child(nav_item(
"nav-search",
IconName::Search,
"Search",
Command::ShowSearch,
)),
.child(
NavItem::new("nav-inbox", "Inbox", Icon::new(IconName::Inbox).small())
.on_click(|_event, _window, cx| {
cx.dispatch_action(&Command::ShowInbox)
}),
)
.child(
NavItem::new("nav-browse", "Browse", Icon::new(IconName::Compass).small())
.on_click(|_event, _window, cx| {
cx.dispatch_action(&Command::ShowBrowse)
}),
)
.child(
NavItem::new("nav-search", "Search", Icon::new(IconName::Search).small())
.on_click(|_event, _window, cx| {
cx.dispatch_action(&Command::ShowSearch)
}),
),
)
.child(
v_flex()
+26 -36
View File
@@ -7,6 +7,7 @@ use gpui::{
SharedString, StatefulInteractiveElement, Styled, Window, div, px,
};
use theme::ActiveTheme;
use ui::avatar::PixelAvatar;
use ui::{Icon, IconName, Sizable, StyledExt, h_flex};
#[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord, Hash)]
@@ -147,8 +148,9 @@ impl TreeRow {
self
}
pub fn avatar(mut self, name: impl Into<SharedString>) -> Self {
self.avatar = Some(name.into());
/// Sets the seed for the row's generated avatar.
pub fn avatar(mut self, seed: impl Into<SharedString>) -> Self {
self.avatar = Some(seed.into());
self
}
@@ -174,11 +176,7 @@ impl TreeRow {
impl RenderOnce for TreeRow {
fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
let indent = px(6. + self.depth as f32 * 14.);
let avatar_initial = self
.avatar
.as_ref()
.and_then(|name| name.chars().next())
.map(|letter| SharedString::from(letter.to_uppercase().to_string()));
let avatar_seed = self.avatar;
let is_section = self.kind == TreeRowKind::Section;
let is_community = self.kind == TreeRowKind::Community;
let is_hint = self.kind == TreeRowKind::Hint;
@@ -192,9 +190,7 @@ impl RenderOnce for TreeRow {
.gap_2()
.rounded(cx.theme().radius)
.when(is_section, |this| {
this.text_xs()
.font_semibold()
.text_color(cx.theme().text_muted)
this.text_xs().text_color(cx.theme().text_muted)
})
.when(is_community, |this| this.text_sm())
.when(is_hint, |this| {
@@ -202,36 +198,30 @@ impl RenderOnce for TreeRow {
.font_normal()
.text_color(cx.theme().text_placeholder)
})
.when_some(self.caret, |this, caret| {
this.child(Icon::new(caret).xsmall().text_color(cx.theme().icon_muted))
})
.when_some(self.icon, |this, icon| {
this.child(Icon::new(icon).small().text_color(cx.theme().icon_muted))
})
.when_some(avatar_initial, |this, initial| {
this.child(
div()
.flex_shrink_0()
.size_5()
.rounded_full()
.bg(cx.theme().element_background)
.flex()
.items_center()
.justify_center()
.text_xs()
.text_color(cx.theme().text)
.child(initial),
)
.when_some(avatar_seed, |this, seed| {
this.child(PixelAvatar::new(seed).xsmall())
})
.child(div().flex_1().truncate().child(self.label))
.when_some(self.count, |this, count| {
this.child(
div()
.flex_shrink_0()
.text_xs()
.text_color(cx.theme().text_placeholder)
.child(count.to_string()),
)
.child(
h_flex()
.gap_1()
.flex_1()
.child(div().truncate().min_w_0().child(self.label))
.when_some(self.count, |this, count| {
this.child(
div()
.flex_shrink_0()
.text_xs()
.text_color(cx.theme().text_placeholder)
.font_semibold()
.child(count.to_string()),
)
}),
)
.when_some(self.caret, |this, caret| {
this.child(Icon::new(caret).xsmall().text_color(cx.theme().icon_muted))
})
.when(self.dot, |this| {
this.child(