wip: refactor

assets/icons/chevron-down-small.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m8 10 3.293 3.293a1 1 0 0 0 1.414 0L16 10"/>
+</svg>

assets/icons/close.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
+  <path fill="#100" fill-rule="evenodd" d="M4.116 4.116a1.25 1.25 0 0 1 1.768 0L12 10.232l6.116-6.116a1.25 1.25 0 0 1 1.768 1.768L13.768 12l6.116 6.116a1.25 1.25 0 0 1-1.768 1.768L12 13.768l-6.116 6.116a1.25 1.25 0 0 1-1.768-1.768L10.232 12 4.116 5.884a1.25 1.25 0 0 1 0-1.768Z" clip-rule="evenodd"/>
+</svg>

crates/app/src/views/account.rs

@@ -0,0 +1,87 @@
+use coop_ui::{
+    button::{Button, ButtonVariants},
+    Icon, IconName, Sizable,
+};
+use gpui::*;
+use nostr_sdk::prelude::*;
+use prelude::FluentBuilder;
+
+use crate::{
+    constants::IMAGE_SERVICE,
+    get_client,
+    states::{metadata::MetadataRegistry, signal::SignalRegistry},
+};
+
+pub struct Account {
+    public_key: PublicKey,
+    metadata: Model<Option<Metadata>>,
+}
+
+impl Account {
+    pub fn new(public_key: PublicKey, cx: &mut ViewContext<'_, Self>) -> Self {
+        let metadata = cx.new_model(|_| None);
+
+        // Request metadata
+        _ = cx.global::<SignalRegistry>().tx.send(public_key);
+
+        // Reload when received metadata
+        cx.observe_global::<MetadataRegistry>(|chat, cx| {
+            chat.load_metadata(cx);
+        })
+        .detach();
+
+        Self {
+            public_key,
+            metadata,
+        }
+    }
+
+    pub fn load_metadata(&mut self, cx: &mut ViewContext<Self>) {
+        let public_key = self.public_key;
+        let async_metadata = self.metadata.clone();
+        let mut async_cx = cx.to_async();
+
+        cx.foreground_executor()
+            .spawn(async move {
+                let client = get_client();
+                let query = async_cx
+                    .background_executor()
+                    .spawn(async move { client.database().metadata(public_key).await })
+                    .await;
+
+                if let Ok(metadata) = query {
+                    _ = async_cx.update_model(&async_metadata, |a, b| {
+                        *a = metadata;
+                        b.notify();
+                    });
+                };
+            })
+            .detach();
+    }
+}
+
+impl Render for Account {
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Button::new("account")
+            .small()
+            .compact()
+            .reverse()
+            .ghost()
+            .icon(Icon::new(IconName::ChevronDownSmall))
+            .when_some(self.metadata.read(cx).as_ref(), |this, metadata| {
+                this.map(|this| {
+                    if let Some(picture) = metadata.picture.clone() {
+                        this.flex_shrink_0().child(
+                            img(format!("{}/?url={}&w=72&h=72&n=-1", IMAGE_SERVICE, picture))
+                                .size_5()
+                                .rounded_full()
+                                .object_fit(ObjectFit::Cover),
+                        )
+                    } else {
+                        this.flex_shrink_0()
+                            .child(img("brand/avatar.png").size_6().rounded_full())
+                    }
+                })
+            })
+    }
+}

crates/app/src/views/app.rs

@@ -1,8 +1,8 @@
 use coop_ui::{
-    button::{Button, ButtonVariants},
+    button::{Button, ButtonCustomVariant, ButtonRounded, ButtonVariants},
     dock::{DockArea, DockItem, DockPlacement},
     theme::{ActiveTheme, Theme, ThemeMode},
-    IconName, Root, Sizable, TitleBar,
+    ContextModal, IconName, Root, Sizable, TitleBar,
 };
 use gpui::*;
 use prelude::FluentBuilder;
@@ -10,6 +10,7 @@ use serde::Deserialize;
 use std::sync::Arc;
 
 use super::{
+    account::Account,
     dock::{chat::ChatPanel, left_dock::LeftDock, welcome::WelcomePanel},
     onboarding::Onboarding,
 };
@@ -34,6 +35,7 @@ pub const DOCK_AREA: DockAreaTab = DockAreaTab {
 };
 
 pub struct AppView {
+    account: Model<Option<View<Account>>>,
     onboarding: View<Onboarding>,
     dock: View<DockArea>,
 }
@@ -46,21 +48,36 @@ impl AppView {
         })
         .detach();
 
+        // Account
+        let account = cx.new_model(|_| None);
+        let async_account = account.clone();
+
         // Onboarding
         let onboarding = cx.new_view(Onboarding::new);
 
         // Dock
         let dock = cx.new_view(|cx| DockArea::new(DOCK_AREA.id, Some(DOCK_AREA.version), cx));
 
-        cx.observe_global::<AccountRegistry>(|view, cx| {
+        cx.observe_global::<AccountRegistry>(move |view, cx| {
-            if cx.global::<AccountRegistry>().is_user_logged_in() {
+            if let Some(public_key) = cx.global::<AccountRegistry>().get() {
-                // TODO: save dock state and load previous state on startup
                 Self::init_layout(view.dock.downgrade(), cx);
+                // TODO: save dock state and load previous state on startup
+
+                let view = cx.new_view(|cx| Account::new(public_key, cx));
+
+                cx.update_model(&async_account, |model, cx| {
+                    *model = Some(view);
+                    cx.notify();
+                });
             }
         })
         .detach();
 
-        AppView { onboarding, dock }
+        AppView {
+            account,
+            onboarding,
+            dock,
+        }
     }
 
     fn change_theme_mode(&mut self, _: &ClickEvent, cx: &mut ViewContext<Self>) {
@@ -125,18 +142,45 @@ impl Render for AppView {
         let modal_layer = Root::render_modal_layer(cx);
         let notification_layer = Root::render_notification_layer(cx);
 
-        let mut content = div();
+        let mut content = div().size_full().flex().flex_col();
 
         if cx.global::<AccountRegistry>().is_user_logged_in() {
             content = content
-                .on_action(cx.listener(Self::on_action_add_panel))
-                .size_full()
-                .flex()
-                .flex_col()
                 .child(
                     TitleBar::new()
                         // Left side
-                        .child(div())
+                        .child(
+                            div()
+                                .flex()
+                                .items_center()
+                                .gap_2()
+                                .child(
+                                    div().when_some(
+                                        self.account.read(cx).as_ref(),
+                                        |this, account| this.child(account.clone()),
+                                    ),
+                                )
+                                .child(
+                                    Button::new("new")
+                                        .custom(
+                                            ButtonCustomVariant::new(cx)
+                                                .shadow(false)
+                                                .color(cx.theme().primary)
+                                                .border(cx.theme().primary)
+                                                .foreground(cx.theme().primary_foreground)
+                                                .active(cx.theme().primary_active)
+                                                .hover(cx.theme().primary_hover),
+                                        )
+                                        .xsmall()
+                                        .rounded(ButtonRounded::Size(px(24.)))
+                                        .label("Compose")
+                                        .on_click(move |_, cx| {
+                                            cx.open_modal(move |modal, _| {
+                                                modal.title("Compose").child("TODO").min_h(px(300.))
+                                            });
+                                        }),
+                                ),
+                        )
                         // Right side
                         .child(
                             div()
@@ -161,8 +205,11 @@ impl Render for AppView {
                         ),
                 )
                 .child(self.dock.clone())
+                .on_action(cx.listener(Self::on_action_add_panel))
         } else {
-            content = content.size_full().child(self.onboarding.clone())
+            content = content
+                .child(TitleBar::new())
+                .child(self.onboarding.clone())
         }
 
         div()

crates/app/src/views/dock/inbox/item.rs

@@ -96,13 +96,10 @@ impl Render for InboxItem {
                 .map(|this| {
                     if let Some(picture) = metadata.picture.clone() {
                         this.flex_shrink_0().child(
-                            img(format!(
+                            img(format!("{}/?url={}&w=72&h=72&n=-1", IMAGE_SERVICE, picture))
-                                "{}/?url={}&w=100&h=100&n=-1",
+                                .size_6()
-                                IMAGE_SERVICE, picture
+                                .rounded_full()
-                            ))
+                                .object_fit(ObjectFit::Cover),
-                            .size_6()
-                            .rounded_full()
-                            .object_fit(ObjectFit::Cover),
                         )
                     } else {
                         this.flex_shrink_0()

crates/app/src/views/mod.rs

@@ -1,3 +1,4 @@
+pub mod account;
 pub mod app;
 pub mod dock;
 pub mod onboarding;

crates/ui/src/button.rs

@@ -5,7 +5,6 @@ use gpui::{
 };
 
 use crate::{
-    h_flex,
     indicator::Indicator,
     theme::{ActiveTheme, Colorize as _},
     tooltip::Tooltip,
@@ -169,6 +168,7 @@ pub struct Button {
     border_edges: Edges<bool>,
     size: Size,
     compact: bool,
+    reverse: bool,
     tooltip: Option<SharedString>,
     on_click: OnClick,
     pub(crate) stop_propagation: bool,
@@ -200,6 +200,7 @@ impl Button {
             on_click: None,
             stop_propagation: true,
             loading: false,
+            reverse: false,
             compact: false,
             children: Vec::new(),
             loading_icon: None,
@@ -254,6 +255,12 @@ impl Button {
         self
     }
 
+    /// Set reverse the position between icon and label.
+    pub fn reverse(mut self) -> Self {
+        self.reverse = true;
+        self
+    }
+
     pub fn on_click(mut self, handler: impl Fn(&ClickEvent, &mut WindowContext) + 'static) -> Self {
         self.on_click = Some(Box::new(handler));
         self
@@ -352,9 +359,9 @@ impl RenderOnce for Button {
                     // Normal Button
                     match self.size {
                         Size::Size(size) => this.px(size * 0.2),
-                        Size::XSmall => this.h_5().px_1(),
+                        Size::XSmall => this.h_5().px_2().when(self.compact, |this| this.px_0()),
-                        Size::Small => this.h_6().px_3().when(self.compact, |this| this.px_1p5()),
+                        Size::Small => this.h_6().px_3().when(self.compact, |this| this.px_0p5()),
-                        _ => this.h_8().px_4().when(self.compact, |this| this.px_2()),
+                        _ => this.h_8().px_4().when(self.compact, |this| this.px_1()),
                     }
                 }
             })
@@ -430,13 +437,15 @@ impl RenderOnce for Button {
                     .shadow_none()
             })
             .child({
-                h_flex()
+                div()
+                    .flex()
+                    .when(self.reverse, |this| this.flex_row_reverse())
                     .id("label")
                     .items_center()
                     .justify_center()
                     .map(|this| match self.size {
                         Size::XSmall => this.gap_1().text_xs(),
-                        Size::Small => this.gap_1().text_sm(),
+                        Size::Small => this.gap_1().text_xs(),
                         _ => this.gap_2().text_base(),
                     })
                     .when(!self.loading, |this| {

crates/ui/src/icon.rs

@@ -20,6 +20,7 @@ pub enum IconName {
     ChartPie,
     Check,
     ChevronDown,
+    ChevronDownSmall,
     ChevronLeft,
     ChevronRight,
     ChevronUp,
@@ -99,6 +100,7 @@ impl IconName {
             Self::ChartPie => "icons/chart-pie.svg",
             Self::Check => "icons/check.svg",
             Self::ChevronDown => "icons/chevron-down.svg",
+            Self::ChevronDownSmall => "icons/chevron-down-small.svg",
             Self::ChevronLeft => "icons/chevron-left.svg",
             Self::ChevronRight => "icons/chevron-right.svg",
             Self::ChevronUp => "icons/chevron-up.svg",