From 161e6a5342da087504207caec1d57fd605ea6810 Mon Sep 17 00:00:00 2001 From: reya Date: Thu, 16 Jan 2025 08:02:25 +0700 Subject: [PATCH] feat: render attachment after upload --- crates/app/src/views/chat/message.rs | 2 +- crates/app/src/views/chat/mod.rs | 156 +++++++++++++++++---------- crates/ui/src/theme/mod.rs | 47 ++++---- 3 files changed, 127 insertions(+), 78 deletions(-) diff --git a/crates/app/src/views/chat/message.rs b/crates/app/src/views/chat/message.rs index 4569b4b..74e8941 100644 --- a/crates/app/src/views/chat/message.rs +++ b/crates/app/src/views/chat/message.rs @@ -35,7 +35,7 @@ impl RenderOnce for Message { .border_l_2() .border_color(cx.theme().background) .hover(|this| { - this.bg(cx.theme().base.step(cx, ColorScaleStep::TWO)) + this.bg(cx.theme().accent.step(cx, ColorScaleStep::TWO)) .border_color(cx.theme().accent.step(cx, ColorScaleStep::NINE)) }) .child( diff --git a/crates/app/src/views/chat/mod.rs b/crates/app/src/views/chat/mod.rs index cd756ae..e9070b7 100644 --- a/crates/app/src/views/chat/mod.rs +++ b/crates/app/src/views/chat/mod.rs @@ -1,11 +1,12 @@ use crate::{ + constants::IMAGE_SERVICE, get_client, states::chat::room::Room, utils::{ago, compare, nip96_upload}, }; use async_utility::task::spawn; use gpui::{ - div, img, list, px, AnyElement, AppContext, Context, EventEmitter, Flatten, FocusHandle, + div, img, list, px, white, AnyElement, AppContext, Context, EventEmitter, Flatten, FocusHandle, FocusableView, InteractiveElement, IntoElement, ListAlignment, ListState, Model, ObjectFit, ParentElement, PathPromptOptions, Pixels, Render, SharedString, StatefulInteractiveElement, Styled, StyledImage, View, ViewContext, VisualContext, WeakModel, WeakView, WindowContext, @@ -14,7 +15,6 @@ use itertools::Itertools; use message::Message; use nostr_sdk::prelude::*; use smol::fs; -use std::sync::Arc; use tokio::sync::oneshot; use ui::{ button::{Button, ButtonVariants}, @@ -244,11 +244,21 @@ impl ChatPanel { fn send_message(&mut self, view: WeakView, cx: &mut ViewContext) { let room = self.room.read(cx); - let content = Arc::new(self.input.read(cx).text().to_string()); let owner = room.owner.clone(); + let members = room.members.to_vec(); - let mut members = room.members.to_vec(); - members.push(owner.clone()); + // Get message + let mut content = self.input.read(cx).text().to_string(); + // Get all attaches and merge with message + if let Some(attaches) = self.attaches.read(cx).as_ref() { + let merged = attaches + .iter() + .map(|url| url.to_string()) + .collect::>() + .join("\n"); + + content = format!("{}\n{}", content, merged) + } // Async let async_state = self.state.clone(); @@ -261,7 +271,7 @@ impl ChatPanel { .background_executor() .spawn({ let client = get_client(); - let content = Arc::clone(&content).to_string(); + let content = content.clone().to_string(); let tags: Vec = members .iter() .filter_map(|m| { @@ -307,14 +317,18 @@ impl ChatPanel { fn upload(&mut self, cx: &mut ViewContext) { let attaches = self.attaches.clone(); - let paths = cx.prompt_for_paths(PathPromptOptions { files: true, directories: false, multiple: false, }); - cx.spawn(move |_, mut async_cx| async move { + // Show loading spinner + self.is_uploading = true; + cx.notify(); + + // TODO: support multiple upload + cx.spawn(move |this, mut async_cx| async move { match Flatten::flatten(paths.await.map_err(|e| e.into())) { Ok(Some(mut paths)) => { let path = paths.pop().unwrap(); @@ -329,6 +343,15 @@ impl ChatPanel { }); if let Ok(url) = rx.await { + // Stop loading spinner + if let Some(view) = this.upgrade() { + _ = async_cx.update_view(&view, |this, cx| { + this.is_uploading = false; + cx.notify(); + }); + } + + // Update attaches model _ = async_cx.update_model(&attaches, |model, cx| { if let Some(model) = model.as_mut() { model.push(url); @@ -347,8 +370,14 @@ impl ChatPanel { .detach(); } - fn remove(&mut self, cx: &mut ViewContext) { - // TODO + fn remove(&mut self, url: &Url, cx: &mut ViewContext) { + self.attaches.update(cx, |model, cx| { + if let Some(urls) = model.as_mut() { + let ix = urls.iter().position(|x| x == url).unwrap(); + urls.remove(ix); + cx.notify(); + } + }); } } @@ -400,59 +429,78 @@ impl Render for ChatPanel { .size_full() .child(list(self.list.clone()).flex_1()) .child( - div() - .flex_shrink_0() - .flex() - .flex_col() - .gap_1() - .when_some(self.attaches.read(cx).as_ref(), |this, attaches| { - this.flex() - .items_center() - .gap_1p5() - .px_2() - .children(attaches.iter().map(|url| { + div().flex_shrink_0().p_2().child( + div() + .flex() + .flex_col() + .when_some(self.attaches.read(cx).as_ref(), |this, attaches| { + this.gap_1p5().children(attaches.iter().map(|url| { + let url = url.clone(); let path: SharedString = url.to_string().into(); div() .id(path.clone()) + .relative() + .w_16() .child( - img(path) - .h_16() - .rounded(px(cx.theme().radius)) - .object_fit(ObjectFit::ScaleDown), + img(format!( + "{}/?url={}&w=128&h=128&fit=cover&n=-1", + IMAGE_SERVICE, path + )) + .size_16() + .shadow_lg() + .rounded(px(cx.theme().radius)) + .object_fit(ObjectFit::ScaleDown), + ) + .child( + div() + .absolute() + .top_neg_2() + .right_neg_2() + .size_4() + .flex() + .items_center() + .justify_center() + .rounded_full() + .bg(cx.theme().danger) + .child( + Icon::new(IconName::Close) + .size_2() + .text_color(white()), + ), ) .on_click(cx.listener(move |this, _, cx| { - this.remove(cx); + this.remove(&url, cx); })) })) - }) - .child( - div() - .w_full() - .h_12() - .flex() - .items_center() - .gap_2() - .px_2() - .child( - Button::new("upload") - .icon(Icon::new(IconName::Upload)) - .ghost() - .on_click(cx.listener(move |this, _, cx| { - this.upload(cx); - })) - .loading(self.is_uploading), - ) - .child( - div() - .flex_1() - .flex() - .bg(cx.theme().base.step(cx, ColorScaleStep::FOUR)) - .rounded(px(cx.theme().radius)) - .px_2() - .child(self.input.clone()), - ), - ), + }) + .child( + div() + .w_full() + .h_9() + .flex() + .items_center() + .gap_2() + .child( + Button::new("upload") + .icon(Icon::new(IconName::Upload)) + .ghost() + .on_click(cx.listener(move |this, _, cx| { + this.upload(cx); + })) + .loading(self.is_uploading), + ) + .child( + div() + .flex_1() + .flex() + .bg(cx.theme().base.step(cx, ColorScaleStep::FOUR)) + .rounded(px(cx.theme().radius)) + .px_2() + .child(self.input.clone()), + ), + ), + ), ) } } diff --git a/crates/ui/src/theme/mod.rs b/crates/ui/src/theme/mod.rs index 4f8dbe4..428a335 100644 --- a/crates/ui/src/theme/mod.rs +++ b/crates/ui/src/theme/mod.rs @@ -18,6 +18,7 @@ pub struct ThemeColors { pub scrollbar_thumb: Hsla, pub scrollbar_thumb_hover: Hsla, pub window_border: Hsla, + pub danger: Hsla, } impl ThemeColors { @@ -29,6 +30,7 @@ impl ThemeColors { scrollbar: hsl(0., 0., 97.).opacity(0.75), scrollbar_thumb: hsl(0., 0., 69.).opacity(0.9), scrollbar_thumb_hover: hsl(0., 0., 59.), + danger: hsl(0.0, 84.2, 60.2), } } @@ -40,6 +42,7 @@ impl ThemeColors { scrollbar: hsl(240., 1., 15.).opacity(0.75), scrollbar_thumb: hsl(0., 0., 48.).opacity(0.9), scrollbar_thumb_hover: hsl(0., 0., 68.), + danger: hsl(0.0, 62.8, 30.6), } } } @@ -76,6 +79,19 @@ pub fn init(cx: &mut AppContext) { Theme::sync_system_appearance(cx) } +#[derive(Debug, Clone, Copy, Default, PartialEq, PartialOrd, Eq)] +pub enum Appearance { + #[default] + Light, + Dark, +} + +impl Appearance { + pub fn is_dark(&self) -> bool { + matches!(self, Self::Dark) + } +} + pub struct Theme { colors: ThemeColors, /// Base colors. @@ -132,27 +148,24 @@ impl Theme { } pub fn change(mode: Appearance, cx: &mut AppContext) { - let colors = match mode { - Appearance::Light => ThemeColors::light(), - Appearance::Dark => ThemeColors::dark(), - }; - - let mut theme = Theme::from(colors); - theme.appearance = mode; + let theme = Theme::new(mode); cx.set_global(theme); cx.refresh(); } } -impl From for Theme { - fn from(colors: ThemeColors) -> Self { +impl Theme { + fn new(appearance: Appearance) -> Self { let color_scales = default_color_scales(); + let colors = match appearance { + Appearance::Light => ThemeColors::light(), + Appearance::Dark => ThemeColors::dark(), + }; Theme { base: color_scales.gray, accent: color_scales.yellow, - appearance: Appearance::default(), font_size: 16.0, font_family: if cfg!(target_os = "macos") { ".SystemUIFont".into() @@ -164,20 +177,8 @@ impl From for Theme { radius: 6.0, shadow: false, scrollbar_show: ScrollbarShow::default(), + appearance, colors, } } } - -#[derive(Debug, Clone, Copy, Default, PartialEq, PartialOrd, Eq)] -pub enum Appearance { - #[default] - Light, - Dark, -} - -impl Appearance { - pub fn is_dark(&self) -> bool { - matches!(self, Self::Dark) - } -}