feat: add contact list panel (#10)

Reviewed-on: #10

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,