reya/coop
1
0
Fork 0
Code Issues Pull Requests Releases Activity

feat: improve compose modal

Browse Source
This commit is contained in:
reya
2025-01-20 15:49:21 +07:00
parent 8f6bedf70a
commit 5f6ba4f0a6
20 changed files with 245 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
crates/app/src/states/chat/mod.rs
View File

@@ -126,7 +126,7 @@ impl ChatRegistry {
let id = room_hash(&ev.tags);
// Filter all seen events
if !hashes.iter().any(|h| h == &id) {
Some(cx.new_model(|_| Room::new(&ev)))
Some(cx.new_model(|_| Room::parse(&ev)))
} else {
None
}
@@ -170,7 +170,7 @@ impl ChatRegistry {
cx.notify();
})
} else {
let room = cx.new_model(|_| Room::new(&event));
let room = cx.new_model(|_| Room::parse(&event));
self.inbox.update(cx, |this, cx| {
this.rooms.insert(0, room);

34
crates/app/src/states/chat/room.rs
View File

@@ -68,7 +68,27 @@ pub struct Room {
}
impl Room {
pub fn new(event: &Event) -> Self {
pub fn new(
id: u64,
owner: Member,
members: Vec<Member>,
title: Option<SharedString>,
last_seen: Timestamp,
) -> Self {
let is_group = members.len() > 1;
Self {
id,
owner,
members,
title,
last_seen,
is_group,
new_messages: vec![],
}
}
pub fn parse(event: &Event) -> Room {
let id = room_hash(&event.tags);
let last_seen = event.created_at;
@@ -89,17 +109,7 @@ impl Room {
Some(name.into())
};
let is_group = members.len() > 1;
Self {
id,
owner,
members,
title,
last_seen,
is_group,
new_messages: vec![],
}
Self::new(id, owner, members, title, last_seen)
}
pub fn set_metadata(&mut self, public_key: PublicKey, metadata: Metadata) {

2
crates/app/src/views/chat/mod.rs
View File

@@ -501,7 +501,7 @@ impl Render for ChatPanel {
div()
.flex_1()
.flex()
.bg(cx.theme().base.step(cx, ColorScaleStep::FOUR))
.bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
.rounded(px(cx.theme().radius))
.px_2()
.child(self.input.clone()),

181
crates/app/src/views/sidebar/compose.rs
View File

@@ -6,13 +6,14 @@ use gpui::{
};
use nostr_sdk::prelude::*;
use serde::Deserialize;
use std::collections::HashSet;
use std::{collections::HashSet, time::Duration};
use ui::{
button::{Button, ButtonRounded},
indicator::Indicator,
input::TextInput,
input::{InputEvent, TextInput},
prelude::FluentBuilder,
theme::{scale::ColorScaleStep, ActiveTheme},
Icon, IconName, Sizable, StyledExt,
Icon, IconName, Sizable, Size, StyledExt,
};
#[derive(Clone, PartialEq, Eq, Deserialize)]
@@ -21,24 +22,48 @@ struct SelectContact(PublicKey);
impl_internal_actions!(contacts, [SelectContact]);
pub struct Compose {
input: View<TextInput>,
title_input: View<TextInput>,
message_input: View<TextInput>,
user_input: View<TextInput>,
contacts: Model<Option<Vec<Member>>>,
selected: Model<HashSet<PublicKey>>,
focus_handle: FocusHandle,
is_loading: bool,
}
impl Compose {
pub fn new(cx: &mut ViewContext<'_, Self>) -> Self {
let contacts = cx.new_model(|_| None);
let selected = cx.new_model(|_| HashSet::new());
let input = cx.new_view(|cx| {
let user_input = cx.new_view(|cx| {
TextInput::new(cx)
.text_size(ui::Size::Small)
.small()
.placeholder("npub1...")
});
let title_input = cx.new_view(|cx| {
TextInput::new(cx)
.appearance(false)
.text_size(ui::Size::Small)
.placeholder("npub1...")
.cleanable()
.text_size(Size::XSmall)
.placeholder("Family...")
});
let message_input = cx.new_view(|cx| {
TextInput::new(cx)
.appearance(false)
.text_size(Size::XSmall)
.placeholder("Hello...")
});
cx.subscribe(&user_input, move |this, _, input_event, cx| {
if let InputEvent::PressEnter = input_event {
this.add(cx);
}
})
.detach();
cx.spawn(|this, mut async_cx| {
let client = get_client();
@@ -75,9 +100,12 @@ impl Compose {
.detach();
Self {
input,
title_input,
message_input,
user_input,
contacts,
selected,
is_loading: false,
focus_handle: cx.focus_handle(),
}
}
@@ -86,6 +114,61 @@ impl Compose {
self.selected.read(cx).iter().collect()
}
fn add(&mut self, cx: &mut ViewContext<Self>) {
let content = self.user_input.read(cx).text().to_string();
let input = self.user_input.downgrade();
// Show loading spinner
self.is_loading = true;
cx.notify();
if let Ok(public_key) = PublicKey::parse(&content) {
cx.spawn(|this, mut async_cx| async move {
let query: anyhow::Result<Metadata, anyhow::Error> = async_cx
.background_executor()
.spawn(async move {
let client = get_client();
let metadata = client
.fetch_metadata(public_key, Duration::from_secs(3))
.await?;
Ok(metadata)
})
.await;
if let Ok(metadata) = query {
if let Some(view) = this.upgrade() {
_ = async_cx.update_view(&view, |this, cx| {
this.contacts.update(cx, |this, cx| {
if let Some(members) = this {
members.insert(0, Member::new(public_key, metadata));
}
cx.notify();
});
this.selected.update(cx, |this, cx| {
this.insert(public_key);
cx.notify();
});
this.is_loading = false;
cx.notify();
});
}
if let Some(input) = input.upgrade() {
_ = async_cx.update_view(&input, |input, cx| {
input.set_text("", cx);
});
}
}
})
.detach();
} else {
// Handle error
}
}
fn on_action_select(&mut self, action: &SelectContact, cx: &mut ViewContext<Self>) {
self.selected.update(cx, |this, cx| {
if this.contains(&action.0) {
@@ -95,8 +178,6 @@ impl Compose {
};
cx.notify();
});
// TODO
}
}
@@ -110,33 +191,66 @@ impl Render for Compose {
.on_action(cx.listener(Self::on_action_select))
.flex()
.flex_col()
.gap_3()
.gap_1()
.child(
div()
.px_2()
.text_xs()
.text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
.child(msg),
)
.child(
div()
.flex()
.flex_col()
.gap_2()
.child(
div()
.text_xs()
.text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
.child(msg),
.h_10()
.px_2()
.border_b_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.flex()
.items_center()
.gap_1()
.child(div().text_xs().font_semibold().child("Title:"))
.child(self.title_input.clone()),
)
.child(
div()
.bg(cx.theme().base.step(cx, ColorScaleStep::FOUR))
.rounded(px(cx.theme().radius))
.h_10()
.px_2()
.child(self.input.clone()),
.border_b_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.flex()
.items_center()
.gap_1()
.child(div().text_xs().font_semibold().child("Message:"))
.child(self.message_input.clone()),
),
)
.child(
div()
.flex()
.flex_col()
.gap_1()
.child(div().text_xs().font_semibold().child("Contacts"))
.child(div().map(|this| {
.gap_2()
.child(div().px_2().text_xs().font_semibold().child("To:"))
.child(
div()
.flex()
.items_center()
.gap_2()
.px_2()
.child(
Button::new("add")
.icon(IconName::Plus)
.small()
.rounded(ButtonRounded::Size(px(9999.)))
.loading(self.is_loading)
.on_click(cx.listener(|this, _, cx| this.add(cx))),
)
.child(self.user_input.clone()),
)
.map(|this| {
if let Some(contacts) = self.contacts.read(cx).clone() {
this.child(
uniform_list(
@@ -155,9 +269,8 @@ impl Render for Compose {
div()
.id(ix)
.w_full()
.h_10()
.px_1p5()
.rounded(px(cx.theme().radius))
.h_9()
.px_2()
.flex()
.items_center()
.justify_between()
@@ -166,10 +279,10 @@ impl Render for Compose {
.flex()
.items_center()
.gap_2()
.text_sm()
.text_xs()
.child(
div().flex_shrink_0().child(
img(item.avatar()).size_8(),
img(item.avatar()).size_6(),
),
)
.child(item.name()),
@@ -177,7 +290,7 @@ impl Render for Compose {
.when(is_select, |this| {
this.child(
Icon::new(IconName::CircleCheck)
.size_4()
.size_3()
.text_color(cx.theme().base.step(
cx,
ColorScaleStep::TWELVE,
@@ -188,13 +301,7 @@ impl Render for Compose {
this.bg(cx
.theme()
.base
.step(cx, ColorScaleStep::FOUR))
.text_color(
cx.theme().base.step(
cx,
ColorScaleStep::ELEVEN,
),
)
.step(cx, ColorScaleStep::THREE))
})
.on_click(move |_, cx| {
cx.dispatch_action(Box::new(
@@ -207,7 +314,7 @@ impl Render for Compose {
items
},
)
.h(px(320.)),
.h(px(300.)),
)
} else {
this.flex()
@@ -216,7 +323,7 @@ impl Render for Compose {
.h_16()
.child(Indicator::new().small())
}
})),
}),
)
}
}

24
crates/app/src/views/sidebar/mod.rs
View File

@@ -1,7 +1,7 @@
use crate::views::sidebar::inbox::Inbox;
use compose::Compose;
use gpui::{
AnyElement, AppContext, Entity, EntityId, EventEmitter, FocusHandle, FocusableView,
div, px, AnyElement, AppContext, Entity, EntityId, EventEmitter, FocusHandle, FocusableView,
IntoElement, ParentElement, Render, SharedString, Styled, View, ViewContext, VisualContext,
WindowContext,
};
@@ -13,6 +13,7 @@ use ui::{
},
popup_menu::PopupMenu,
scroll::ScrollbarAxis,
theme::{scale::ColorScaleStep, ActiveTheme},
v_flex, ContextModal, Icon, IconName, Sizable, StyledExt,
};
@@ -61,14 +62,21 @@ impl Sidebar {
modal
.title("Direct Messages")
.width(px(420.))
.child(compose.clone())
.footer(
Button::new("create")
.label(label)
.primary()
.bold()
.rounded(ButtonRounded::Large)
.w_full(),
div()
.p_2()
.border_t_1()
.border_color(cx.theme().base.step(cx, ColorScaleStep::FIVE))
.child(
Button::new("create")
.label(label)
.primary()
.bold()
.rounded(ButtonRounded::Large)
.w_full(),
),
)
})
}
@@ -125,7 +133,7 @@ impl Render for Sidebar {
.ghost()
.not_centered()
.icon(Icon::new(IconName::ComposeFill))
.label("New Message")
.label("Compose")
.on_click(cx.listener(|this, _, cx| this.show_compose(cx))),
),
)