feat: improve compose modal
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
4
assets/brand/coop.svg
Normal file
4
assets/brand/coop.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" fill="none" viewBox="0 0 500 500">
|
||||
<path fill="currentColor" d="M200.239 68.318c.723-9.318 7.014-16.869 15.34-19.713-.488-2.16-1.002-4.333-.824-6.651.97-12.504 11.916-21.854 24.428-20.885 7.382.57 13.324 4.795 17.033 10.572 4.56-5.137 11.105-8.393 18.486-7.823 11.624.9 20.186 10.51 20.592 21.886 1.591-.228 3.132-.722 4.813-.59 12.518.97 21.866 11.884 20.895 24.389-.913 11.776-10.742 20.441-22.316 20.638-2.219 11.11-12.087 19.231-23.692 18.332-5.65-.437-10.489-3.098-14.193-6.835-4.559 4.858-10.926 7.905-18.099 7.348a22.045 22.045 0 0 1-8.916-2.642l-.013.007c-2.225-1.388-5.403-1.495-7.939-.488 0 0-8.428 7.215-.038 18.642 0 0-15.664-6.518-12.861-20.251 2.194-10.718-5.086-17.18-5.086-17.18l.025-.012c-5.155-4.555-8.206-11.364-7.635-18.744Z"/>
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M233.601 478.532c101.4 0 183.6-82.347 183.6-183.927 0-9.233-7.474-16.721-16.691-16.721H66.691c-9.223 0-16.691 7.488-16.691 16.721 0 101.58 82.201 183.927 183.601 183.927ZM82.799 260.298c0-101.581 82.2-183.928 183.6-183.928C367.793 76.37 450 158.717 450 260.298c0 9.232-7.474 16.72-16.691 16.72H99.489c-9.222 0-16.69-7.488-16.69-16.72Zm264.715-97.045a11.268 11.268 0 0 0-3.034-.426c-1.024 0-2.036.146-3.034.426a12.3 12.3 0 0 0-2.921 1.274 14.779 14.779 0 0 0-2.686 2.063 18.092 18.092 0 0 0-2.358 2.776 21.874 21.874 0 0 0-1.934 3.381 26.357 26.357 0 0 0-1.441 3.858 30.143 30.143 0 0 0-.885 4.19 32.082 32.082 0 0 0 0 8.703c.202 1.439.493 2.834.885 4.19a26.357 26.357 0 0 0 1.441 3.858 21.552 21.552 0 0 0 1.934 3.381 18.092 18.092 0 0 0 2.358 2.776 14.779 14.779 0 0 0 2.686 2.063c.942.56 1.916.987 2.921 1.274a11.036 11.036 0 0 0 6.068 0 12.4 12.4 0 0 0 2.914-1.274 14.584 14.584 0 0 0 2.693-2.063 18.37 18.37 0 0 0 2.357-2.776 22.637 22.637 0 0 0 1.935-3.381 26.341 26.341 0 0 0 1.435-3.858c.392-1.356.689-2.751.885-4.19.202-1.432.303-2.884.303-4.348 0-1.471-.101-2.923-.303-4.355a29.298 29.298 0 0 0-.885-4.19 26.341 26.341 0 0 0-1.435-3.858 22.994 22.994 0 0 0-1.935-3.381 18.37 18.37 0 0 0-2.357-2.776 14.584 14.584 0 0 0-2.693-2.063 12.359 12.359 0 0 0-2.914-1.274Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
@@ -31,7 +31,7 @@ impl Member {
|
||||
IMAGE_SERVICE, picture
|
||||
)
|
||||
} else {
|
||||
"brands/avatar.png".into()
|
||||
"brand/avatar.png".into()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
use chrono::{Duration, Local, TimeZone};
|
||||
use crate::{constants::NIP96_SERVER, get_client};
|
||||
use chrono::{Datelike, Local, TimeZone};
|
||||
use nostr_sdk::prelude::*;
|
||||
use std::{
|
||||
collections::HashSet,
|
||||
hash::{DefaultHasher, Hash, Hasher},
|
||||
};
|
||||
|
||||
use crate::{constants::NIP96_SERVER, get_client};
|
||||
|
||||
pub async fn nip96_upload(file: Vec<u8>) -> anyhow::Result<Url, anyhow::Error> {
|
||||
let client = get_client();
|
||||
let signer = client.signer().await?;
|
||||
@@ -42,50 +41,47 @@ pub fn shorted_public_key(public_key: PublicKey) -> String {
|
||||
format!("{}:{}", &pk[0..4], &pk[pk.len() - 4..])
|
||||
}
|
||||
|
||||
pub fn show_npub(public_key: PublicKey, len: usize) -> String {
|
||||
let bech32 = public_key.to_bech32().unwrap_or_default();
|
||||
let separator = " ... ";
|
||||
|
||||
let sep_len = separator.len();
|
||||
let chars_to_show = len - sep_len;
|
||||
let front_chars = (chars_to_show + 1) / 2; // ceil
|
||||
let back_chars = chars_to_show / 2; // floor
|
||||
|
||||
format!(
|
||||
"{}{}{}",
|
||||
&bech32[..front_chars],
|
||||
separator,
|
||||
&bech32[bech32.len() - back_chars..]
|
||||
)
|
||||
}
|
||||
|
||||
pub fn ago(time: Timestamp) -> String {
|
||||
pub fn message_ago(time: Timestamp) -> String {
|
||||
let now = Local::now();
|
||||
let input_time = Local.timestamp_opt(time.as_u64() as i64, 0).unwrap();
|
||||
let diff = (now - input_time).num_hours();
|
||||
|
||||
if diff < 24 {
|
||||
let duration = now.signed_duration_since(input_time);
|
||||
format_duration(duration)
|
||||
|
||||
if duration.num_seconds() < 60 {
|
||||
"now".to_string()
|
||||
} else if duration.num_minutes() == 1 {
|
||||
"1m".to_string()
|
||||
} else if duration.num_minutes() < 60 {
|
||||
format!("{}m", duration.num_minutes())
|
||||
} else if duration.num_hours() == 1 {
|
||||
"1h".to_string()
|
||||
} else if duration.num_hours() < 24 {
|
||||
format!("{}h", duration.num_hours())
|
||||
} else if duration.num_days() == 1 {
|
||||
"1d".to_string()
|
||||
} else {
|
||||
format!("{}d", duration.num_days())
|
||||
}
|
||||
} else {
|
||||
input_time.format("%b %d").to_string()
|
||||
}
|
||||
}
|
||||
|
||||
pub fn format_duration(duration: Duration) -> String {
|
||||
if duration.num_seconds() < 60 {
|
||||
"now".to_string()
|
||||
} else if duration.num_minutes() == 1 {
|
||||
"1m".to_string()
|
||||
} else if duration.num_minutes() < 60 {
|
||||
format!("{}m", duration.num_minutes())
|
||||
} else if duration.num_hours() == 1 {
|
||||
"1h".to_string()
|
||||
} else if duration.num_hours() < 24 {
|
||||
format!("{}h", duration.num_hours())
|
||||
} else if duration.num_days() == 1 {
|
||||
"1d".to_string()
|
||||
pub fn message_time(time: Timestamp) -> String {
|
||||
let now = Local::now();
|
||||
let input_time = Local.timestamp_opt(time.as_u64() as i64, 0).unwrap();
|
||||
|
||||
if input_time.day() == now.day() {
|
||||
format!("Today at {}", input_time.format("%H:%M %p"))
|
||||
} else if input_time.day() == now.day() - 1 {
|
||||
format!("Yesterday at {}", input_time.format("%H:%M %p"))
|
||||
} else {
|
||||
format!("{}d", duration.num_days())
|
||||
format!(
|
||||
"{}, {}",
|
||||
input_time.format("%d/%m/%y"),
|
||||
input_time.format("%H:%M %p")
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ use crate::{
|
||||
constants::IMAGE_SERVICE,
|
||||
get_client,
|
||||
states::chat::room::Room,
|
||||
utils::{ago, compare, nip96_upload},
|
||||
utils::{compare, message_time, nip96_upload},
|
||||
};
|
||||
use async_utility::task::spawn;
|
||||
use gpui::{
|
||||
@@ -197,7 +197,7 @@ impl ChatPanel {
|
||||
Some(Message::new(
|
||||
member,
|
||||
ev.content.into(),
|
||||
ago(ev.created_at).into(),
|
||||
message_time(ev.created_at).into(),
|
||||
))
|
||||
} else {
|
||||
None
|
||||
@@ -228,7 +228,7 @@ impl ChatPanel {
|
||||
Message::new(
|
||||
member,
|
||||
event.content.clone().into(),
|
||||
ago(event.created_at).into(),
|
||||
message_time(event.created_at).into(),
|
||||
)
|
||||
})
|
||||
})
|
||||
@@ -298,7 +298,7 @@ impl ChatPanel {
|
||||
let message = Message::new(
|
||||
owner,
|
||||
content.to_string().into(),
|
||||
ago(Timestamp::now()).into(),
|
||||
message_time(Timestamp::now()).into(),
|
||||
);
|
||||
|
||||
model.items.extend(vec![message]);
|
||||
|
||||
222
crates/app/src/views/sidebar/compose.rs
Normal file
222
crates/app/src/views/sidebar/compose.rs
Normal file
@@ -0,0 +1,222 @@
|
||||
use crate::{get_client, states::chat::room::Member};
|
||||
use gpui::{
|
||||
div, img, impl_internal_actions, px, uniform_list, Context, FocusHandle, InteractiveElement,
|
||||
IntoElement, Model, ParentElement, Render, StatefulInteractiveElement, Styled, View,
|
||||
ViewContext, VisualContext, WindowContext,
|
||||
};
|
||||
use nostr_sdk::prelude::*;
|
||||
use serde::Deserialize;
|
||||
use std::collections::HashSet;
|
||||
use ui::{
|
||||
indicator::Indicator,
|
||||
input::TextInput,
|
||||
prelude::FluentBuilder,
|
||||
theme::{scale::ColorScaleStep, ActiveTheme},
|
||||
Icon, IconName, Sizable, StyledExt,
|
||||
};
|
||||
|
||||
#[derive(Clone, PartialEq, Eq, Deserialize)]
|
||||
struct SelectContact(PublicKey);
|
||||
|
||||
impl_internal_actions!(contacts, [SelectContact]);
|
||||
|
||||
pub struct Compose {
|
||||
input: View<TextInput>,
|
||||
contacts: Model<Option<Vec<Member>>>,
|
||||
selected: Model<HashSet<PublicKey>>,
|
||||
focus_handle: FocusHandle,
|
||||
}
|
||||
|
||||
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| {
|
||||
TextInput::new(cx)
|
||||
.appearance(false)
|
||||
.text_size(ui::Size::Small)
|
||||
.placeholder("npub1...")
|
||||
.cleanable()
|
||||
});
|
||||
|
||||
cx.spawn(|this, mut async_cx| {
|
||||
let client = get_client();
|
||||
|
||||
async move {
|
||||
let query: anyhow::Result<Vec<Member>, anyhow::Error> = async_cx
|
||||
.background_executor()
|
||||
.spawn(async move {
|
||||
let signer = client.signer().await?;
|
||||
let public_key = signer.get_public_key().await?;
|
||||
let profiles = client.database().contacts(public_key).await?;
|
||||
let members: Vec<Member> = profiles
|
||||
.into_iter()
|
||||
.map(|profile| Member::new(profile.public_key(), profile.metadata()))
|
||||
.collect();
|
||||
|
||||
Ok(members)
|
||||
})
|
||||
.await;
|
||||
|
||||
if let Ok(contacts) = query {
|
||||
if let Some(view) = this.upgrade() {
|
||||
_ = async_cx.update_view(&view, |this, cx| {
|
||||
this.contacts.update(cx, |this, cx| {
|
||||
*this = Some(contacts);
|
||||
cx.notify();
|
||||
});
|
||||
|
||||
cx.notify();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
.detach();
|
||||
|
||||
Self {
|
||||
input,
|
||||
contacts,
|
||||
selected,
|
||||
focus_handle: cx.focus_handle(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn selected<'a>(&self, cx: &'a WindowContext) -> Vec<&'a PublicKey> {
|
||||
self.selected.read(cx).iter().collect()
|
||||
}
|
||||
|
||||
fn on_action_select(&mut self, action: &SelectContact, cx: &mut ViewContext<Self>) {
|
||||
self.selected.update(cx, |this, cx| {
|
||||
if this.contains(&action.0) {
|
||||
this.remove(&action.0);
|
||||
} else {
|
||||
this.insert(action.0);
|
||||
};
|
||||
cx.notify();
|
||||
});
|
||||
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for Compose {
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
let msg =
|
||||
"Start a conversation with someone using their npub or NIP-05 (like foo@bar.com).";
|
||||
|
||||
div()
|
||||
.track_focus(&self.focus_handle)
|
||||
.on_action(cx.listener(Self::on_action_select))
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_3()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_2()
|
||||
.child(
|
||||
div()
|
||||
.text_xs()
|
||||
.text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
|
||||
.child(msg),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.bg(cx.theme().base.step(cx, ColorScaleStep::FOUR))
|
||||
.rounded(px(cx.theme().radius))
|
||||
.px_2()
|
||||
.child(self.input.clone()),
|
||||
),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(div().text_xs().font_semibold().child("Contacts"))
|
||||
.child(div().map(|this| {
|
||||
if let Some(contacts) = self.contacts.read(cx).clone() {
|
||||
this.child(
|
||||
uniform_list(
|
||||
cx.view().clone(),
|
||||
"contacts",
|
||||
contacts.len(),
|
||||
move |this, range, cx| {
|
||||
let selected = this.selected.read(cx);
|
||||
let mut items = Vec::new();
|
||||
|
||||
for ix in range {
|
||||
let item = contacts.get(ix).unwrap().clone();
|
||||
let is_select = selected.contains(&item.public_key());
|
||||
|
||||
items.push(
|
||||
div()
|
||||
.id(ix)
|
||||
.w_full()
|
||||
.h_10()
|
||||
.px_1p5()
|
||||
.rounded(px(cx.theme().radius))
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.text_sm()
|
||||
.child(
|
||||
div().flex_shrink_0().child(
|
||||
img(item.avatar()).size_8(),
|
||||
),
|
||||
)
|
||||
.child(item.name()),
|
||||
)
|
||||
.when(is_select, |this| {
|
||||
this.child(
|
||||
Icon::new(IconName::CircleCheck)
|
||||
.size_4()
|
||||
.text_color(cx.theme().base.step(
|
||||
cx,
|
||||
ColorScaleStep::TWELVE,
|
||||
)),
|
||||
)
|
||||
})
|
||||
.hover(|this| {
|
||||
this.bg(cx
|
||||
.theme()
|
||||
.base
|
||||
.step(cx, ColorScaleStep::FOUR))
|
||||
.text_color(
|
||||
cx.theme().base.step(
|
||||
cx,
|
||||
ColorScaleStep::ELEVEN,
|
||||
),
|
||||
)
|
||||
})
|
||||
.on_click(move |_, cx| {
|
||||
cx.dispatch_action(Box::new(
|
||||
SelectContact(item.public_key()),
|
||||
));
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
items
|
||||
},
|
||||
)
|
||||
.h(px(320.)),
|
||||
)
|
||||
} else {
|
||||
this.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.h_16()
|
||||
.child(Indicator::new().small())
|
||||
}
|
||||
})),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,248 +0,0 @@
|
||||
use crate::{constants::IMAGE_SERVICE, get_client, utils::show_npub};
|
||||
use gpui::{
|
||||
div, img, impl_internal_actions, list, px, Context, ElementId, FocusHandle, InteractiveElement,
|
||||
IntoElement, ListAlignment, ListState, Model, ParentElement, Pixels, Render, RenderOnce,
|
||||
SharedString, StatefulInteractiveElement, Styled, ViewContext, WindowContext,
|
||||
};
|
||||
use nostr_sdk::prelude::*;
|
||||
use serde::Deserialize;
|
||||
use std::collections::{BTreeSet, HashSet};
|
||||
use ui::{
|
||||
prelude::FluentBuilder,
|
||||
theme::{scale::ColorScaleStep, ActiveTheme},
|
||||
Icon, IconName, Selectable, StyledExt,
|
||||
};
|
||||
|
||||
#[derive(Clone, PartialEq, Eq, Deserialize)]
|
||||
struct SelectContact(PublicKey);
|
||||
|
||||
impl_internal_actions!(contacts, [SelectContact]);
|
||||
|
||||
#[derive(Clone, IntoElement)]
|
||||
struct ContactListItem {
|
||||
id: ElementId,
|
||||
public_key: PublicKey,
|
||||
metadata: Metadata,
|
||||
selected: bool,
|
||||
}
|
||||
|
||||
impl ContactListItem {
|
||||
pub fn new(public_key: PublicKey, metadata: Metadata) -> Self {
|
||||
let id = SharedString::from(public_key.to_hex()).into();
|
||||
|
||||
Self {
|
||||
id,
|
||||
public_key,
|
||||
metadata,
|
||||
selected: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Selectable for ContactListItem {
|
||||
fn selected(mut self, selected: bool) -> Self {
|
||||
self.selected = selected;
|
||||
self
|
||||
}
|
||||
|
||||
fn element_id(&self) -> &gpui::ElementId {
|
||||
&self.id
|
||||
}
|
||||
}
|
||||
|
||||
impl RenderOnce for ContactListItem {
|
||||
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
|
||||
let fallback = show_npub(self.public_key, 16);
|
||||
|
||||
div()
|
||||
.id(self.id)
|
||||
.w_full()
|
||||
.h_8()
|
||||
.px_1()
|
||||
.rounded_md()
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_between()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_2()
|
||||
.text_sm()
|
||||
.map(|this| {
|
||||
if let Some(picture) = self.metadata.picture {
|
||||
this.flex_shrink_0().child(
|
||||
img(format!(
|
||||
"{}/?url={}&w=72&h=72&fit=cover&mask=circle&n=-1",
|
||||
IMAGE_SERVICE, picture
|
||||
))
|
||||
.size_6(),
|
||||
)
|
||||
} else {
|
||||
this.flex_shrink_0()
|
||||
.child(img("brand/avatar.png").size_6().rounded_full())
|
||||
}
|
||||
})
|
||||
.map(|this| {
|
||||
if let Some(display_name) = self.metadata.display_name {
|
||||
this.flex_1().child(display_name)
|
||||
} else {
|
||||
this.flex_1().child(fallback)
|
||||
}
|
||||
}),
|
||||
)
|
||||
.when(self.selected, |this| {
|
||||
this.child(
|
||||
Icon::new(IconName::CircleCheck)
|
||||
.size_4()
|
||||
.text_color(cx.theme().accent.step(cx, ColorScaleStep::NINE)),
|
||||
)
|
||||
})
|
||||
.hover(|this| {
|
||||
this.bg(cx.theme().base.step(cx, ColorScaleStep::FOUR))
|
||||
.text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
|
||||
})
|
||||
.on_click(move |_, cx| {
|
||||
cx.dispatch_action(Box::new(SelectContact(self.public_key)));
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Clone)]
|
||||
struct Contacts {
|
||||
#[allow(dead_code)]
|
||||
count: usize,
|
||||
items: Vec<ContactListItem>,
|
||||
}
|
||||
|
||||
pub struct ContactList {
|
||||
list: ListState,
|
||||
contacts: Model<BTreeSet<Profile>>,
|
||||
selected: HashSet<PublicKey>,
|
||||
focus_handle: FocusHandle,
|
||||
}
|
||||
|
||||
impl ContactList {
|
||||
pub fn new(cx: &mut ViewContext<'_, Self>) -> Self {
|
||||
let list = ListState::new(0, ListAlignment::Top, Pixels(50.), move |_, _| {
|
||||
div().into_any_element()
|
||||
});
|
||||
|
||||
let contacts = cx.new_model(|_| BTreeSet::new());
|
||||
let async_contacts = contacts.clone();
|
||||
|
||||
let mut async_cx = cx.to_async();
|
||||
|
||||
cx.foreground_executor()
|
||||
.spawn({
|
||||
let client = get_client();
|
||||
|
||||
async move {
|
||||
let query: anyhow::Result<BTreeSet<Profile>, anyhow::Error> = async_cx
|
||||
.background_executor()
|
||||
.spawn(async move {
|
||||
let signer = client.signer().await?;
|
||||
let public_key = signer.get_public_key().await?;
|
||||
let profiles = client.database().contacts(public_key).await?;
|
||||
|
||||
Ok(profiles)
|
||||
})
|
||||
.await;
|
||||
|
||||
if let Ok(profiles) = query {
|
||||
_ = async_cx.update_model(&async_contacts, |model, cx| {
|
||||
*model = profiles;
|
||||
cx.notify();
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.detach();
|
||||
|
||||
cx.observe(&contacts, |this, model, cx| {
|
||||
let profiles = model.read(cx).clone();
|
||||
let contacts = Contacts {
|
||||
count: profiles.len(),
|
||||
items: profiles
|
||||
.into_iter()
|
||||
.map(|contact| ContactListItem::new(contact.public_key(), contact.metadata()))
|
||||
.collect(),
|
||||
};
|
||||
|
||||
this.list = ListState::new(
|
||||
contacts.items.len(),
|
||||
ListAlignment::Top,
|
||||
Pixels(50.),
|
||||
move |idx, _cx| {
|
||||
let item = contacts.items.get(idx).unwrap().clone();
|
||||
div().child(item).into_any_element()
|
||||
},
|
||||
);
|
||||
|
||||
cx.notify();
|
||||
})
|
||||
.detach();
|
||||
|
||||
Self {
|
||||
list,
|
||||
contacts,
|
||||
selected: HashSet::new(),
|
||||
focus_handle: cx.focus_handle(),
|
||||
}
|
||||
}
|
||||
|
||||
pub fn selected(&self) -> Vec<PublicKey> {
|
||||
self.selected.clone().into_iter().collect()
|
||||
}
|
||||
|
||||
fn on_action_select(&mut self, action: &SelectContact, cx: &mut ViewContext<Self>) {
|
||||
self.selected.insert(action.0);
|
||||
|
||||
let profiles = self.contacts.read(cx).clone();
|
||||
let contacts = Contacts {
|
||||
count: profiles.len(),
|
||||
items: profiles
|
||||
.into_iter()
|
||||
.map(|contact| {
|
||||
let public_key = contact.public_key();
|
||||
let metadata = contact.metadata();
|
||||
|
||||
ContactListItem::new(contact.public_key(), metadata)
|
||||
.selected(self.selected.contains(&public_key))
|
||||
})
|
||||
.collect(),
|
||||
};
|
||||
|
||||
self.list = ListState::new(
|
||||
contacts.items.len(),
|
||||
ListAlignment::Top,
|
||||
Pixels(50.),
|
||||
move |idx, _cx| {
|
||||
let item = contacts.items.get(idx).unwrap().clone();
|
||||
div().child(item).into_any_element()
|
||||
},
|
||||
);
|
||||
|
||||
cx.notify();
|
||||
}
|
||||
}
|
||||
|
||||
impl Render for ContactList {
|
||||
fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
|
||||
div()
|
||||
.track_focus(&self.focus_handle)
|
||||
.on_action(cx.listener(Self::on_action_select))
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(div().font_semibold().text_sm().child("Contacts"))
|
||||
.child(
|
||||
div()
|
||||
.p_1()
|
||||
.bg(cx.theme().base.step(cx, ColorScaleStep::THREE))
|
||||
.text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
|
||||
.rounded_lg()
|
||||
.child(list(self.list.clone()).h(px(300.))),
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
use crate::{
|
||||
states::chat::ChatRegistry,
|
||||
utils::ago,
|
||||
utils::message_ago,
|
||||
views::app::{AddPanel, PanelKind},
|
||||
};
|
||||
use gpui::{
|
||||
@@ -22,7 +22,7 @@ pub struct Inbox {
|
||||
impl Inbox {
|
||||
pub fn new(_cx: &mut ViewContext<'_, Self>) -> Self {
|
||||
Self {
|
||||
label: "Inbox".into(),
|
||||
label: "Direct Messages".into(),
|
||||
is_collapsed: false,
|
||||
}
|
||||
}
|
||||
@@ -54,7 +54,7 @@ impl Inbox {
|
||||
let room = model.read(cx);
|
||||
let id = room.id;
|
||||
let room_id: SharedString = id.to_string().into();
|
||||
let ago: SharedString = ago(room.last_seen).into();
|
||||
let ago: SharedString = message_ago(room.last_seen).into();
|
||||
|
||||
div()
|
||||
.id(room_id)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
use crate::views::sidebar::inbox::Inbox;
|
||||
use contact_list::ContactList;
|
||||
use compose::Compose;
|
||||
use gpui::{
|
||||
div, AnyElement, AppContext, Entity, EntityId, EventEmitter, FocusHandle, FocusableView,
|
||||
AnyElement, AppContext, Entity, EntityId, EventEmitter, FocusHandle, FocusableView,
|
||||
IntoElement, ParentElement, Render, SharedString, Styled, View, ViewContext, VisualContext,
|
||||
WindowContext,
|
||||
};
|
||||
@@ -16,7 +16,7 @@ use ui::{
|
||||
v_flex, ContextModal, Icon, IconName, Sizable, StyledExt,
|
||||
};
|
||||
|
||||
mod contact_list;
|
||||
mod compose;
|
||||
mod inbox;
|
||||
|
||||
pub struct Sidebar {
|
||||
@@ -49,24 +49,27 @@ impl Sidebar {
|
||||
}
|
||||
|
||||
fn show_compose(&mut self, cx: &mut ViewContext<Self>) {
|
||||
let contact_list = cx.new_view(ContactList::new);
|
||||
let compose = cx.new_view(Compose::new);
|
||||
|
||||
cx.open_modal(move |modal, _cx| {
|
||||
modal.child(contact_list.clone()).footer(
|
||||
div().flex().gap_2().child(
|
||||
cx.open_modal(move |modal, cx| {
|
||||
let selected = compose.model.read(cx).selected(cx);
|
||||
let label = if selected.len() > 1 {
|
||||
"Create Group DM"
|
||||
} else {
|
||||
"Create DM"
|
||||
};
|
||||
|
||||
modal
|
||||
.title("Direct Messages")
|
||||
.child(compose.clone())
|
||||
.footer(
|
||||
Button::new("create")
|
||||
.label("Create DM")
|
||||
.label(label)
|
||||
.primary()
|
||||
.bold()
|
||||
.rounded(ButtonRounded::Large)
|
||||
.w_full()
|
||||
.on_click({
|
||||
let contact_list = contact_list.clone();
|
||||
move |_, cx| {
|
||||
let _selected = contact_list.model.read(cx).selected();
|
||||
}
|
||||
}),
|
||||
),
|
||||
)
|
||||
.w_full(),
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -116,26 +119,15 @@ impl Render for Sidebar {
|
||||
.py_3()
|
||||
.gap_3()
|
||||
.child(
|
||||
v_flex()
|
||||
.px_2()
|
||||
.gap_0p5()
|
||||
.child(
|
||||
Button::new("compose")
|
||||
.small()
|
||||
.ghost()
|
||||
.not_centered()
|
||||
.icon(Icon::new(IconName::ComposeFill))
|
||||
.label("New Message")
|
||||
.on_click(cx.listener(|this, _, cx| this.show_compose(cx))),
|
||||
)
|
||||
.child(
|
||||
Button::new("contacts")
|
||||
.small()
|
||||
.ghost()
|
||||
.not_centered()
|
||||
.icon(Icon::new(IconName::GroupFill))
|
||||
.label("Contacts"),
|
||||
),
|
||||
v_flex().px_2().gap_0p5().child(
|
||||
Button::new("compose")
|
||||
.small()
|
||||
.ghost()
|
||||
.not_centered()
|
||||
.icon(Icon::new(IconName::ComposeFill))
|
||||
.label("New Message")
|
||||
.on_click(cx.listener(|this, _, cx| this.show_compose(cx))),
|
||||
),
|
||||
)
|
||||
.child(self.inbox.clone())
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
use gpui::{
|
||||
div, AnyElement, AppContext, EventEmitter, FocusHandle, FocusableView, IntoElement,
|
||||
div, svg, AnyElement, AppContext, EventEmitter, FocusHandle, FocusableView, IntoElement,
|
||||
ParentElement, Render, SharedString, Styled, View, ViewContext, VisualContext, WindowContext,
|
||||
};
|
||||
use ui::{
|
||||
@@ -80,9 +80,25 @@ impl Render for WelcomePanel {
|
||||
.flex()
|
||||
.items_center()
|
||||
.justify_center()
|
||||
.child("coop on nostr.")
|
||||
.text_color(cx.theme().base.step(cx, ColorScaleStep::THREE))
|
||||
.font_black()
|
||||
.text_sm()
|
||||
.child(
|
||||
div()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.items_center()
|
||||
.gap_1()
|
||||
.child(
|
||||
svg()
|
||||
.path("brand/coop.svg")
|
||||
.size_12()
|
||||
.text_color(cx.theme().base.step(cx, ColorScaleStep::THREE)),
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.child("coop on nostr.")
|
||||
.text_color(cx.theme().base.step(cx, ColorScaleStep::FOUR))
|
||||
.font_black()
|
||||
.text_sm(),
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -353,7 +353,7 @@ impl RenderOnce for Button {
|
||||
Size::Size(size) => this.px(size * 0.2),
|
||||
Size::XSmall => this.h_6().px_0p5(),
|
||||
Size::Small => this.h_8().px_2(),
|
||||
_ => this.h_10().px_4(),
|
||||
_ => this.h_9().px_3(),
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -487,7 +487,7 @@ impl ButtonVariant {
|
||||
|
||||
fn text_color(&self, cx: &WindowContext) -> Hsla {
|
||||
match self {
|
||||
ButtonVariant::Primary => cx.theme().accent.step(cx, ColorScaleStep::ONE),
|
||||
ButtonVariant::Primary => cx.theme().base.step(cx, ColorScaleStep::TWELVE),
|
||||
ButtonVariant::Link => cx.theme().accent.step(cx, ColorScaleStep::NINE),
|
||||
ButtonVariant::Custom(colors) => colors.foreground,
|
||||
_ => cx.theme().base.step(cx, ColorScaleStep::TWELVE),
|
||||
|
||||
@@ -72,7 +72,7 @@ pub trait DropdownDelegate: Sized {
|
||||
Self::Item: DropdownItem<Value = V>,
|
||||
V: PartialEq,
|
||||
{
|
||||
(0..self.len()).find(|&i| self.get(i).map_or(false, |item| item.value() == value))
|
||||
(0..self.len()).find(|&i| self.get(i).is_some_and(|item| item.value() == value))
|
||||
}
|
||||
|
||||
fn can_search(&self) -> bool {
|
||||
@@ -125,9 +125,7 @@ where
|
||||
}
|
||||
|
||||
fn render_item(&self, ix: usize, cx: &mut gpui::ViewContext<List<Self>>) -> Option<Self::Item> {
|
||||
let selected = self
|
||||
.selected_index
|
||||
.map_or(false, |selected_index| selected_index == ix);
|
||||
let selected = self.selected_index == Some(ix);
|
||||
let size = self
|
||||
.dropdown
|
||||
.upgrade()
|
||||
|
||||
@@ -2,7 +2,7 @@ use crate::{
|
||||
animation::cubic_bezier,
|
||||
button::{Button, ButtonVariants as _},
|
||||
theme::{scale::ColorScaleStep, ActiveTheme as _},
|
||||
v_flex, ContextModal, IconName, Sizable as _,
|
||||
v_flex, ContextModal, IconName, Sizable as _, StyledExt,
|
||||
};
|
||||
use gpui::{
|
||||
actions, anchored, div, hsla, point, prelude::FluentBuilder, px, relative, Animation,
|
||||
@@ -219,7 +219,13 @@ impl RenderOnce for Modal {
|
||||
.w(self.width)
|
||||
.when_some(self.max_width, |this, w| this.max_w(w))
|
||||
.when_some(self.title, |this, title| {
|
||||
this.child(div().line_height(relative(1.)).child(title))
|
||||
this.child(
|
||||
div()
|
||||
.text_sm()
|
||||
.font_semibold()
|
||||
.line_height(relative(1.))
|
||||
.child(title),
|
||||
)
|
||||
})
|
||||
.when(self.show_close, |this| {
|
||||
this.child(
|
||||
|
||||
Reference in New Issue
Block a user