diff --git a/assets/icons/chevron-down-small.svg b/assets/icons/chevron-down-small.svg new file mode 100644 index 0000000..ca53e93 --- /dev/null +++ b/assets/icons/chevron-down-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/close.svg b/assets/icons/close.svg new file mode 100644 index 0000000..49607a2 --- /dev/null +++ b/assets/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/crates/app/src/views/account.rs b/crates/app/src/views/account.rs new file mode 100644 index 0000000..5253ca5 --- /dev/null +++ b/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>, +} + +impl Account { + pub fn new(public_key: PublicKey, cx: &mut ViewContext<'_, Self>) -> Self { + let metadata = cx.new_model(|_| None); + + // Request metadata + _ = cx.global::().tx.send(public_key); + + // Reload when received metadata + cx.observe_global::(|chat, cx| { + chat.load_metadata(cx); + }) + .detach(); + + Self { + public_key, + metadata, + } + } + + pub fn load_metadata(&mut self, cx: &mut ViewContext) { + 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) -> 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()) + } + }) + }) + } +} diff --git a/crates/app/src/views/app.rs b/crates/app/src/views/app.rs index 4227ec7..ae973fd 100644 --- a/crates/app/src/views/app.rs +++ b/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>>, onboarding: View, dock: View, } @@ -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::(|view, cx| { - if cx.global::().is_user_logged_in() { - // TODO: save dock state and load previous state on startup + cx.observe_global::(move |view, cx| { + if let Some(public_key) = cx.global::().get() { 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) { @@ -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::().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() diff --git a/crates/app/src/views/dock/inbox/item.rs b/crates/app/src/views/dock/inbox/item.rs index 33539d4..90b285a 100644 --- a/crates/app/src/views/dock/inbox/item.rs +++ b/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!( - "{}/?url={}&w=100&h=100&n=-1", - IMAGE_SERVICE, picture - )) - .size_6() - .rounded_full() - .object_fit(ObjectFit::Cover), + img(format!("{}/?url={}&w=72&h=72&n=-1", IMAGE_SERVICE, picture)) + .size_6() + .rounded_full() + .object_fit(ObjectFit::Cover), ) } else { this.flex_shrink_0() diff --git a/crates/app/src/views/mod.rs b/crates/app/src/views/mod.rs index 84250c5..939fae7 100644 --- a/crates/app/src/views/mod.rs +++ b/crates/app/src/views/mod.rs @@ -1,3 +1,4 @@ +pub mod account; pub mod app; pub mod dock; pub mod onboarding; diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs index d6e5bd1..680b069 100644 --- a/crates/ui/src/button.rs +++ b/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, size: Size, compact: bool, + reverse: bool, tooltip: Option, 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::Small => this.h_6().px_3().when(self.compact, |this| this.px_1p5()), - _ => this.h_8().px_4().when(self.compact, |this| this.px_2()), + 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_0p5()), + _ => 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| { diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs index 3b5dac7..9de9607 100644 --- a/crates/ui/src/icon.rs +++ b/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",