wip: refactor

crates/app/src/main.rs

@@ -250,13 +250,8 @@ async fn main() {
                             let metadata = async_cx
                                 .background_executor()
                                 .spawn(async move {
-                                    if let Ok(metadata) =
+                                    (client.database().metadata(event.pubkey).await)
-                                        client.database().metadata(event.pubkey).await
+                                        .unwrap_or_default()
-                                    {
-                                        metadata
-                                    } else {
-                                        None
-                                    }
                                 })
                                 .await;
 

crates/app/src/views/dock/chat/room.rs

@@ -2,16 +2,18 @@ use coop_ui::{
     button::{Button, ButtonVariants},
     input::{InputEvent, TextInput},
     theme::ActiveTheme,
-    v_flex, Icon, IconName,
+    v_flex, Icon, IconName, StyledExt,
 };
 use gpui::*;
 use itertools::Itertools;
 use nostr_sdk::prelude::*;
+use prelude::FluentBuilder;
 use std::{collections::HashMap, sync::Arc};
 
 use crate::{
     get_client,
     states::chat::{ChatRegistry, Room},
+    utils::{ago, show_npub},
 };
 
 #[derive(Clone, Debug, IntoElement)]
@@ -39,8 +41,63 @@ impl MessageItem {
 }
 
 impl RenderOnce for MessageItem {
-    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
-        div().flex().flex_col().text_sm().child(self.content)
+        let ago = ago(self.created_at.as_u64());
+        let fallback_name = show_npub(self.author, 16);
+
+        div()
+            .flex()
+            .gap_3()
+            .w_full()
+            .p_2()
+            .child(div().flex_shrink_0().map(|this| {
+                if let Some(metadata) = self.metadata.clone() {
+                    if let Some(picture) = metadata.picture {
+                        this.child(
+                            img(picture)
+                                .size_8()
+                                .rounded_full()
+                                .object_fit(ObjectFit::Cover),
+                        )
+                    } else {
+                        this.child(img("brand/avatar.png").size_8().rounded_full())
+                    }
+                } else {
+                    this.child(img("brand/avatar.png").size_8().rounded_full())
+                }
+            }))
+            .child(
+                div()
+                    .flex()
+                    .flex_col()
+                    .flex_initial()
+                    .overflow_hidden()
+                    .child(
+                        div()
+                            .flex()
+                            .items_baseline()
+                            .gap_2()
+                            .text_xs()
+                            .child(div().font_semibold().map(|this| {
+                                if let Some(metadata) = self.metadata {
+                                    if let Some(display_name) = metadata.display_name {
+                                        this.child(display_name)
+                                    } else {
+                                        this.child(fallback_name)
+                                    }
+                                } else {
+                                    this.child(fallback_name)
+                                }
+                            }))
+                            .child(div().child(ago).text_color(cx.theme().muted_foreground)),
+                    )
+                    .child(
+                        div()
+                            .text_sm()
+                            .text_color(cx.theme().foreground)
+                            .child(self.content),
+                    ),
+            )
     }
 }
 
@@ -278,14 +335,12 @@ impl Render for ChatRoom {
     fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl IntoElement {
         v_flex()
             .size_full()
-            .child(list(self.list.clone()).size_full().flex_1())
+            .child(list(self.list.clone()).flex_1())
             .child(
                 div()
                     .flex_shrink_0()
                     .w_full()
                     .h_12()
-                    .border_t_1()
-                    .border_color(cx.theme().border.opacity(0.7))
                     .flex()
                     .items_center()
                     .gap_2()