feat: add contact list panel (#10)

Reviewed-on: #10

crates/chat/src/lib.rs

@@ -118,6 +118,7 @@ impl ChatRegistry {
                         this.reset(cx);
                     }
                     RelayState::Configured => {
+                        this.get_contact_list(cx);
                         this.ensure_messaging_relays(cx);
                     }
                     _ => {}
@@ -257,6 +258,43 @@ impl ChatRegistry {
         }));
     }
 
+    /// Get contact list from relays
+    pub fn get_contact_list(&mut self, cx: &mut Context<Self>) {
+        let nostr = NostrRegistry::global(cx);
+        let client = nostr.read(cx).client();
+
+        let signer = nostr.read(cx).signer();
+        let public_key = signer.public_key().unwrap();
+        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
+
+        let task: Task<Result<(), Error>> = cx.background_spawn(async move {
+            let id = SubscriptionId::new("contact-list");
+            let opts = SubscribeAutoCloseOptions::default()
+                .exit_policy(ReqExitPolicy::ExitOnEOSE)
+                .timeout(Some(Duration::from_secs(TIMEOUT)));
+
+            // Get user's write relays
+            let urls = write_relays.await;
+
+            // Construct filter for inbox relays
+            let filter = Filter::new()
+                .kind(Kind::ContactList)
+                .author(public_key)
+                .limit(1);
+
+            // Construct target for subscription
+            let target: HashMap<&RelayUrl, Filter> =
+                urls.iter().map(|relay| (relay, filter.clone())).collect();
+
+            // Subscribe
+            client.subscribe(target).close_on(opts).with_id(id).await?;
+
+            Ok(())
+        });
+
+        self.tasks.push(task);
+    }
+
     /// Ensure messaging relays are set up for the current user.
     pub fn ensure_messaging_relays(&mut self, cx: &mut Context<Self>) {
         let task = self.verify_relays(cx);

crates/chat_ui/src/lib.rs

@@ -8,7 +8,7 @@ use chat::{Message, RenderedMessage, Room, RoomEvent, SendReport};
 use common::RenderedTimestamp;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    deferred, div, img, list, px, red, relative, rems, svg, white, AnyElement, App, AppContext,
+    deferred, div, img, list, px, red, relative, svg, white, AnyElement, App, AppContext,
     ClipboardItem, Context, Entity, EventEmitter, FocusHandle, Focusable, InteractiveElement,
     IntoElement, ListAlignment, ListOffset, ListState, MouseButton, ObjectFit, ParentElement,
     PathPromptOptions, Render, SharedString, StatefulInteractiveElement, Styled, StyledImage,
@@ -758,7 +758,7 @@ impl ChatPanel {
                         this.child(
                             div()
                                 .id(SharedString::from(format!("{ix}-avatar")))
-                                .child(Avatar::new(author.avatar()).size(rems(2.)))
+                                .child(Avatar::new(author.avatar()))
                                 .context_menu(move |this, _window, _cx| {
                                     let view = Box::new(OpenPublicKey(public_key));
                                     let copy = Box::new(CopyPublicKey(public_key));
@@ -940,7 +940,7 @@ impl ChatPanel {
                         h_flex()
                             .gap_1()
                             .font_semibold()
-                            .child(Avatar::new(avatar).size(rems(1.25)))
+                            .child(Avatar::new(avatar).small())
                             .child(name.clone()),
                     ),
             )
@@ -1283,7 +1283,7 @@ impl Panel for ChatPanel {
 
                 h_flex()
                     .gap_1p5()
-                    .child(Avatar::new(url).size(rems(1.25)))
+                    .child(Avatar::new(url).small())
                     .child(label)
                     .into_any_element()
             })

crates/coop/src/dialogs/screening.rs

@@ -5,9 +5,8 @@ use anyhow::{Context as AnyhowContext, Error};
 use common::RenderedTimestamp;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, relative, rems, uniform_list, App, AppContext, Context, Div, Entity,
-    InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, Subscription,
-    Task, Window,
+    div, px, relative, uniform_list, App, AppContext, Context, Div, Entity, InteractiveElement,
+    IntoElement, ParentElement, Render, SharedString, Styled, Subscription, Task, Window,
 };
 use nostr_sdk::prelude::*;
 use person::{shorten_pubkey, Person, PersonRegistry};
@@ -275,7 +274,7 @@ impl Screening {
                                     .rounded(cx.theme().radius)
                                     .text_sm()
                                     .hover(|this| this.bg(cx.theme().elevated_surface_background))
-                                    .child(Avatar::new(profile.avatar()).size(rems(1.75)))
+                                    .child(Avatar::new(profile.avatar()).small())
                                     .child(profile.name()),
                             );
                         }
@@ -315,7 +314,7 @@ impl Render for Screening {
                     .items_center()
                     .justify_center()
                     .text_center()
-                    .child(Avatar::new(profile.avatar()).size(rems(4.)))
+                    .child(Avatar::new(profile.avatar()).large())
                     .child(
                         div()
                             .font_semibold()

crates/coop/src/panels/contact_list.rs

@@ -0,0 +1,369 @@
+use std::collections::HashSet;
+use std::time::Duration;
+
+use anyhow::{Context as AnyhowContext, Error};
+use gpui::prelude::FluentBuilder;
+use gpui::{
+    div, rems, AnyElement, App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable,
+    InteractiveElement, IntoElement, ParentElement, Render, SharedString, Styled, Subscription,
+    Task, TextAlign, Window,
+};
+use nostr_sdk::prelude::*;
+use person::PersonRegistry;
+use smallvec::{smallvec, SmallVec};
+use state::NostrRegistry;
+use theme::ActiveTheme;
+use ui::avatar::Avatar;
+use ui::button::{Button, ButtonVariants};
+use ui::dock_area::panel::{Panel, PanelEvent};
+use ui::input::{InputEvent, InputState, TextInput};
+use ui::{h_flex, v_flex, Disableable, IconName, Sizable, StyledExt, WindowExtension};
+
+pub fn init(window: &mut Window, cx: &mut App) -> Entity<ContactListPanel> {
+    cx.new(|cx| ContactListPanel::new(window, cx))
+}
+
+#[derive(Debug)]
+pub struct ContactListPanel {
+    name: SharedString,
+    focus_handle: FocusHandle,
+
+    /// Npub input
+    input: Entity<InputState>,
+
+    /// Whether the panel is updating
+    updating: bool,
+
+    /// Error message
+    error: Option<SharedString>,
+
+    /// All contacts
+    contacts: HashSet<PublicKey>,
+
+    /// Event subscriptions
+    _subscriptions: SmallVec<[Subscription; 1]>,
+
+    /// Background tasks
+    tasks: Vec<Task<Result<(), Error>>>,
+}
+
+impl ContactListPanel {
+    pub fn new(window: &mut Window, cx: &mut Context<Self>) -> Self {
+        let input = cx.new(|cx| InputState::new(window, cx).placeholder("npub1..."));
+        let mut subscriptions = smallvec![];
+
+        subscriptions.push(
+            // Subscribe to user's input events
+            cx.subscribe_in(&input, window, move |this, _input, event, window, cx| {
+                if let InputEvent::PressEnter { .. } = event {
+                    this.add(window, cx);
+                }
+            }),
+        );
+
+        // Run at the end of current cycle
+        cx.defer_in(window, |this, window, cx| {
+            this.load(window, cx);
+        });
+
+        Self {
+            name: "Contact List".into(),
+            focus_handle: cx.focus_handle(),
+            input,
+            updating: false,
+            contacts: HashSet::new(),
+            error: None,
+            _subscriptions: subscriptions,
+            tasks: vec![],
+        }
+    }
+
+    fn load(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let nostr = NostrRegistry::global(cx);
+        let client = nostr.read(cx).client();
+
+        let task: Task<Result<HashSet<PublicKey>, Error>> = cx.background_spawn(async move {
+            let signer = client.signer().context("Signer not found")?;
+            let public_key = signer.get_public_key().await?;
+            let contact_list = client.database().contacts_public_keys(public_key).await?;
+
+            Ok(contact_list)
+        });
+
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
+            let public_keys = task.await?;
+
+            // Update state
+            this.update(cx, |this, cx| {
+                this.contacts.extend(public_keys);
+                cx.notify();
+            })?;
+
+            Ok(())
+        }));
+    }
+
+    fn add(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        let value = self.input.read(cx).value().to_string();
+
+        if let Ok(public_key) = PublicKey::parse(&value) {
+            if self.contacts.insert(public_key) {
+                self.input.update(cx, |this, cx| {
+                    this.set_value("", window, cx);
+                });
+                cx.notify();
+            }
+        } else {
+            self.set_error("Public Key is invalid", window, cx);
+        }
+    }
+
+    fn remove(&mut self, public_key: &PublicKey, cx: &mut Context<Self>) {
+        self.contacts.remove(public_key);
+        cx.notify();
+    }
+
+    fn set_error<E>(&mut self, error: E, window: &mut Window, cx: &mut Context<Self>)
+    where
+        E: Into<SharedString>,
+    {
+        self.error = Some(error.into());
+        cx.notify();
+
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
+            cx.background_executor().timer(Duration::from_secs(2)).await;
+
+            // Clear the error message after a delay
+            this.update(cx, |this, cx| {
+                this.error = None;
+                cx.notify();
+            })?;
+
+            Ok(())
+        }));
+    }
+
+    fn set_updating(&mut self, updating: bool, cx: &mut Context<Self>) {
+        self.updating = updating;
+        cx.notify();
+    }
+
+    pub fn update(&mut self, window: &mut Window, cx: &mut Context<Self>) {
+        if self.contacts.is_empty() {
+            self.set_error("You need to add at least 1 contact", window, cx);
+            return;
+        };
+
+        let nostr = NostrRegistry::global(cx);
+        let client = nostr.read(cx).client();
+        let signer = nostr.read(cx).signer();
+
+        let Some(public_key) = signer.public_key() else {
+            window.push_notification("Public Key not found", cx);
+            return;
+        };
+
+        // Get user's write relays
+        let write_relays = nostr.read(cx).write_relays(&public_key, cx);
+
+        // Get contacts
+        let contacts: Vec<Contact> = self
+            .contacts
+            .iter()
+            .map(|public_key| Contact::new(*public_key))
+            .collect();
+
+        // Set updating state
+        self.set_updating(true, cx);
+
+        let task: Task<Result<(), Error>> = cx.background_spawn(async move {
+            let urls = write_relays.await;
+
+            // Construct contact list event builder
+            let builder = EventBuilder::contact_list(contacts);
+            let event = client.sign_event_builder(builder).await?;
+
+            // Set contact list
+            client.send_event(&event).to(urls).await?;
+
+            Ok(())
+        });
+
+        self.tasks.push(cx.spawn_in(window, async move |this, cx| {
+            match task.await {
+                Ok(_) => {
+                    this.update_in(cx, |this, window, cx| {
+                        this.set_updating(false, cx);
+                        this.load(window, cx);
+
+                        window.push_notification("Update successful", cx);
+                    })?;
+                }
+                Err(e) => {
+                    this.update_in(cx, |this, window, cx| {
+                        this.set_updating(false, cx);
+                        this.set_error(e.to_string(), window, cx);
+                    })?;
+                }
+            };
+
+            Ok(())
+        }));
+    }
+
+    fn render_list_items(&mut self, cx: &mut Context<Self>) -> Vec<impl IntoElement> {
+        let persons = PersonRegistry::global(cx);
+        let mut items = Vec::new();
+
+        for (ix, public_key) in self.contacts.iter().enumerate() {
+            let profile = persons.read(cx).get(public_key, cx);
+
+            items.push(
+                h_flex()
+                    .id(ix)
+                    .group("")
+                    .flex_1()
+                    .w_full()
+                    .h_8()
+                    .px_2()
+                    .justify_between()
+                    .rounded(cx.theme().radius)
+                    .bg(cx.theme().secondary_background)
+                    .text_color(cx.theme().secondary_foreground)
+                    .child(
+                        h_flex()
+                            .gap_2()
+                            .text_sm()
+                            .child(Avatar::new(profile.avatar()).small())
+                            .child(profile.name()),
+                    )
+                    .child(
+                        Button::new("remove_{ix}")
+                            .icon(IconName::Close)
+                            .xsmall()
+                            .ghost()
+                            .invisible()
+                            .group_hover("", |this| this.visible())
+                            .on_click({
+                                let public_key = public_key.to_owned();
+                                cx.listener(move |this, _ev, _window, cx| {
+                                    this.remove(&public_key, cx);
+                                })
+                            }),
+                    ),
+            )
+        }
+
+        items
+    }
+
+    fn render_empty(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        h_flex()
+            .h_20()
+            .justify_center()
+            .border_2()
+            .border_dashed()
+            .border_color(cx.theme().border)
+            .rounded(cx.theme().radius_lg)
+            .text_sm()
+            .text_align(TextAlign::Center)
+            .child(SharedString::from("Please add some relays."))
+    }
+}
+
+impl Panel for ContactListPanel {
+    fn panel_id(&self) -> SharedString {
+        self.name.clone()
+    }
+
+    fn title(&self, _cx: &App) -> AnyElement {
+        self.name.clone().into_any_element()
+    }
+}
+
+impl EventEmitter<PanelEvent> for ContactListPanel {}
+
+impl Focusable for ContactListPanel {
+    fn focus_handle(&self, _: &App) -> gpui::FocusHandle {
+        self.focus_handle.clone()
+    }
+}
+
+impl Render for ContactListPanel {
+    fn render(&mut self, window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
+        v_flex().p_3().gap_3().w_full().child(
+            v_flex()
+                .gap_2()
+                .flex_1()
+                .w_full()
+                .text_sm()
+                .child(
+                    div()
+                        .text_xs()
+                        .font_semibold()
+                        .text_color(cx.theme().text_muted)
+                        .child(SharedString::from("New contact:")),
+                )
+                .child(
+                    v_flex()
+                        .gap_1()
+                        .child(
+                            h_flex()
+                                .gap_1()
+                                .w_full()
+                                .child(
+                                    TextInput::new(&self.input)
+                                        .small()
+                                        .bordered(false)
+                                        .cleanable(),
+                                )
+                                .child(
+                                    Button::new("add")
+                                        .icon(IconName::Plus)
+                                        .tooltip("Add contact")
+                                        .ghost()
+                                        .size(rems(2.))
+                                        .on_click(cx.listener(move |this, _, window, cx| {
+                                            this.add(window, cx);
+                                        })),
+                                ),
+                        )
+                        .when_some(self.error.as_ref(), |this, error| {
+                            this.child(
+                                div()
+                                    .italic()
+                                    .text_xs()
+                                    .text_color(cx.theme().danger_active)
+                                    .child(error.clone()),
+                            )
+                        }),
+                )
+                .map(|this| {
+                    if self.contacts.is_empty() {
+                        this.child(self.render_empty(window, cx))
+                    } else {
+                        this.child(
+                            v_flex()
+                                .gap_1()
+                                .flex_1()
+                                .w_full()
+                                .children(self.render_list_items(cx)),
+                        )
+                    }
+                })
+                .child(
+                    Button::new("submit")
+                        .icon(IconName::CheckCircle)
+                        .label("Update")
+                        .primary()
+                        .small()
+                        .font_semibold()
+                        .loading(self.updating)
+                        .disabled(self.updating)
+                        .on_click(cx.listener(move |this, _ev, window, cx| {
+                            this.update(window, cx);
+                        })),
+                ),
+        )
+    }
+}

crates/coop/src/panels/encryption_key.rs

@@ -269,26 +269,24 @@ impl Render for EncryptionPanel {
                         )),
                 )
             })
-            .when(state.set(), |this| {
-                this.child(
-                    v_flex()
-                        .gap_1()
-                        .child(
-                            Button::new("reset")
-                                .icon(IconName::Reset)
-                                .label("Reset")
-                                .warning()
-                                .small()
-                                .font_semibold(),
-                        )
-                        .child(
-                            div()
-                                .italic()
-                                .text_size(px(10.))
-                                .text_color(cx.theme().text_muted)
-                                .child(SharedString::from(NOTICE)),
-                        ),
-                )
-            })
+            .child(
+                v_flex()
+                    .gap_1()
+                    .child(
+                        Button::new("reset")
+                            .icon(IconName::Reset)
+                            .label("Reset")
+                            .warning()
+                            .small()
+                            .font_semibold(),
+                    )
+                    .child(
+                        div()
+                            .italic()
+                            .text_size(px(10.))
+                            .text_color(cx.theme().text_muted)
+                            .child(SharedString::from(NOTICE)),
+                    ),
+            )
     }
 }

crates/coop/src/panels/messaging_relays.rs

@@ -349,7 +349,7 @@ impl Render for MessagingRelayPanel {
                                     div()
                                         .italic()
                                         .text_xs()
-                                        .text_color(cx.theme().danger_foreground)
+                                        .text_color(cx.theme().danger_active)
                                         .child(error.clone()),
                                 )
                             }),

crates/coop/src/panels/mod.rs

@@ -1,5 +1,6 @@
 pub mod backup;
 pub mod connect;
+pub mod contact_list;
 pub mod encryption_key;
 pub mod greeter;
 pub mod import;

crates/coop/src/panels/profile.rs

@@ -3,9 +3,9 @@ use std::time::Duration;
 
 use anyhow::{Context as AnyhowContext, Error};
 use gpui::{
-    div, rems, AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter,
-    FocusHandle, Focusable, IntoElement, ParentElement, PathPromptOptions, Render, SharedString,
-    Styled, Task, Window,
+    div, AnyElement, App, AppContext, ClipboardItem, Context, Entity, EventEmitter, FocusHandle,
+    Focusable, IntoElement, ParentElement, PathPromptOptions, Render, SharedString, Styled, Task,
+    Window,
 };
 use nostr_sdk::prelude::*;
 use person::{shorten_pubkey, Person, PersonRegistry};
@@ -322,7 +322,7 @@ impl Render for ProfilePanel {
                     .items_center()
                     .justify_center()
                     .gap_4()
-                    .child(Avatar::new(avatar).size(rems(4.25)))
+                    .child(Avatar::new(avatar).large())
                     .child(
                         Button::new("upload")
                             .icon(IconName::PlusCircle)

crates/coop/src/panels/relay_list.rs

@@ -408,7 +408,7 @@ impl Render for RelayListPanel {
                                     div()
                                         .italic()
                                         .text_xs()
-                                        .text_color(cx.theme().danger_foreground)
+                                        .text_color(cx.theme().danger_active)
                                         .child(error.clone()),
                                 )
                             }),

crates/coop/src/sidebar/entry.rs

@@ -3,7 +3,7 @@ use std::rc::Rc;
 use chat::RoomKind;
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, rems, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce,
+    div, App, ClickEvent, InteractiveElement, IntoElement, ParentElement as _, RenderOnce,
     SharedString, StatefulInteractiveElement, Styled, Window,
 };
 use nostr_sdk::prelude::*;
@@ -106,14 +106,7 @@ impl RenderOnce for RoomEntry {
             .rounded(cx.theme().radius)
             .when(!hide_avatar, |this| {
                 this.when_some(self.avatar, |this, avatar| {
-                    this.child(
-                        div()
-                            .flex_shrink_0()
-                            .size_6()
-                            .rounded_full()
-                            .overflow_hidden()
-                            .child(Avatar::new(avatar).size(rems(1.5))),
-                    )
+                    this.child(Avatar::new(avatar).small().flex_shrink_0())
                 })
             })
             .child(

crates/coop/src/workspace.rs

@@ -4,7 +4,7 @@ use ::settings::AppSettings;
 use chat::{ChatEvent, ChatRegistry, InboxState};
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, px, rems, Action, App, AppContext, Axis, Context, Entity, InteractiveElement, IntoElement,
+    div, px, Action, App, AppContext, Axis, Context, Entity, InteractiveElement, IntoElement,
     ParentElement, Render, SharedString, Styled, Subscription, Window,
 };
 use person::PersonRegistry;
@@ -22,7 +22,9 @@ use ui::menu::DropdownMenu;
 use ui::{h_flex, v_flex, IconName, Root, Sizable, WindowExtension};
 
 use crate::dialogs::settings;
-use crate::panels::{backup, encryption_key, greeter, messaging_relays, profile, relay_list};
+use crate::panels::{
+    backup, contact_list, encryption_key, greeter, messaging_relays, profile, relay_list,
+};
 use crate::sidebar;
 
 pub fn init(window: &mut Window, cx: &mut App) -> Entity<Workspace> {
@@ -43,6 +45,7 @@ enum Command {
     ShowProfile,
     ShowSettings,
     ShowBackup,
+    ShowContactList,
 }
 
 pub struct Workspace {
@@ -215,6 +218,16 @@ impl Workspace {
                     });
                 }
             }
+            Command::ShowContactList => {
+                self.dock.update(cx, |this, cx| {
+                    this.add_panel(
+                        Arc::new(contact_list::init(window, cx)),
+                        DockPlacement::Right,
+                        window,
+                        cx,
+                    );
+                });
+            }
             Command::ShowBackup => {
                 self.dock.update(cx, |this, cx| {
                     this.add_panel(
@@ -372,7 +385,7 @@ impl Workspace {
 
                 this.child(
                     Button::new("current-user")
-                        .child(Avatar::new(profile.avatar()).size(rems(1.25)))
+                        .child(Avatar::new(profile.avatar()).xsmall())
                         .small()
                         .caret()
                         .compact()
@@ -386,6 +399,11 @@ impl Workspace {
                                     IconName::Profile,
                                     Box::new(Command::ShowProfile),
                                 )
+                                .menu_with_icon(
+                                    "Contact List",
+                                    IconName::Book,
+                                    Box::new(Command::ShowContactList),
+                                )
                                 .menu_with_icon(
                                     "Backup",
                                     IconName::UserKey,
@@ -396,6 +414,7 @@ impl Workspace {
                                     IconName::Sun,
                                     Box::new(Command::ToggleTheme),
                                 )
+                                .separator()
                                 .menu_with_icon(
                                     "Settings",
                                     IconName::Settings,

crates/state/src/lib.rs

@@ -183,20 +183,16 @@ impl NostrRegistry {
                     ..
                 } = notification
                 {
-                    // Skip if the event has already been processed
-                    if processed_events.insert(event.id) {
-                        match event.kind {
-                            Kind::RelayList => {
-                                if subscription_id.as_str().contains("room-") {
-                                    get_events_for_room(&client, &event).await.ok();
-                                }
-                                tx.send_async(event.into_owned()).await?;
-                            }
-                            Kind::InboxRelays => {
-                                tx.send_async(event.into_owned()).await?;
-                            }
-                            _ => {}
+                    if !processed_events.insert(event.id) {
+                        // Skip if the event has already been processed
+                        continue;
+                    }
+
+                    if let Kind::RelayList = event.kind {
+                        if subscription_id.as_str().contains("room-") {
+                            get_events_for_room(&client, &event).await.ok();
                         }
+                        tx.send_async(event.into_owned()).await?;
                     }
                 }
             }

crates/ui/src/avatar.rs

@@ -1,10 +1,24 @@
 use gpui::prelude::FluentBuilder;
 use gpui::{
-    div, img, px, rems, AbsoluteLength, App, Hsla, ImageSource, Img, IntoElement, ParentElement,
-    RenderOnce, Styled, StyledImage, Window,
+    div, img, px, AbsoluteLength, App, Div, Hsla, ImageSource, Img, InteractiveElement,
+    Interactivity, IntoElement, ParentElement, RenderOnce, StyleRefinement, Styled, StyledImage,
+    Window,
 };
 use theme::ActiveTheme;
 
+use crate::{Sizable, Size};
+
+/// Returns the size of the avatar based on the given [`Size`].
+pub(super) fn avatar_size(size: Size) -> AbsoluteLength {
+    match size {
+        Size::Large => px(64.).into(),
+        Size::Medium => px(32.).into(),
+        Size::Small => px(24.).into(),
+        Size::XSmall => px(20.).into(),
+        Size::Size(size) => size.into(),
+    }
+}
+
 /// An element that renders a user avatar with customizable appearance options.
 ///
 /// # Examples
@@ -18,8 +32,10 @@ use theme::ActiveTheme;
 /// ```
 #[derive(IntoElement)]
 pub struct Avatar {
+    base: Div,
     image: Img,
-    size: Option<AbsoluteLength>,
+    style: StyleRefinement,
+    size: Size,
     border_color: Option<Hsla>,
 }
 
@@ -27,8 +43,10 @@ impl Avatar {
     /// Creates a new avatar element with the specified image source.
     pub fn new(src: impl Into<ImageSource>) -> Self {
         Avatar {
+            base: div(),
             image: img(src),
-            size: None,
+            style: StyleRefinement::default(),
+            size: Size::Medium,
             border_color: None,
         }
     }
@@ -56,14 +74,27 @@ impl Avatar {
         self.border_color = Some(color.into());
         self
     }
+}
 
-    /// Size overrides the avatar size. By default they are 1rem.
-    pub fn size<L: Into<AbsoluteLength>>(mut self, size: impl Into<Option<L>>) -> Self {
-        self.size = size.into().map(Into::into);
+impl Sizable for Avatar {
+    fn with_size(mut self, size: impl Into<Size>) -> Self {
+        self.size = size.into();
         self
     }
 }
 
+impl Styled for Avatar {
+    fn style(&mut self) -> &mut StyleRefinement {
+        &mut self.style
+    }
+}
+
+impl InteractiveElement for Avatar {
+    fn interactivity(&mut self) -> &mut Interactivity {
+        self.base.interactivity()
+    }
+}
+
 impl RenderOnce for Avatar {
     fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement {
         let border_width = if self.border_color.is_some() {
@@ -71,8 +102,7 @@ impl RenderOnce for Avatar {
         } else {
             px(0.)
         };
-
-        let image_size = self.size.unwrap_or_else(|| rems(1.).into());
+        let image_size = avatar_size(self.size);
         let container_size = image_size.to_pixels(window.rem_size()) + border_width * 2.;
 
         div()

crates/ui/src/icon.rs

@@ -23,6 +23,7 @@ pub enum IconName {
     ArrowLeft,
     ArrowRight,
     Boom,
+    Book,
     ChevronDown,
     CaretDown,
     CaretRight,
@@ -90,6 +91,7 @@ impl IconNamed for IconName {
             Self::ArrowLeft => "icons/arrow-left.svg",
             Self::ArrowRight => "icons/arrow-right.svg",
             Self::Boom => "icons/boom.svg",
+            Self::Book => "icons/book.svg",
             Self::ChevronDown => "icons/chevron-down.svg",
             Self::CaretDown => "icons/caret-down.svg",
             Self::CaretRight => "icons/caret-right.svg",