redesign activity rows

assets/icons/ban.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"> <path d="M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C9.44568 21.25 7.13318 20.2147 5.45926 18.5407C3.78534 16.8668 2.75 14.5543 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C14.5543 2.75 16.8668 3.78534 18.5407 5.45926C20.2147 7.13318 21.25 9.44568 21.25 12Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/><path d="M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/> </svg>

assets/icons/login.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"> <path d="M14.75 3.75L18.25 3.75C19.3546 3.75 20.25 4.64543 20.25 5.75V18.25C20.25 19.3546 19.3546 20.25 18.25 20.25H14.75M15 12H3.75M15 12L11.5 15.5M15 12L11.5 8.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>

crates/nip29_ui/src/message.rs

@@ -13,6 +13,7 @@ use theme::ActiveTheme;
 use ui::avatar::Avatar;
 use ui::menu::{ContextMenu, PopupMenu, PopupMenuItem};
 use ui::message::MessageRow;
+use ui::{Icon, IconName, Sizable, StyledExt, h_flex};
 
 use crate::GroupPanel;
 
@@ -134,20 +135,63 @@ pub(crate) fn render_activity(ix: usize, activity: &Activity, cx: &App) -> AnyEl
     let subject = persons.read(cx).get(&activity.subject(), cx);
     let hide_avatar = AppSettings::get_hide_avatar(cx);
 
-    MessageRow::new(ix)
+    h_flex()
-        .show_author(true)
+        .id(ix)
-        .hide_avatar(hide_avatar)
+        .w_full()
-        .avatar(
+        .gap_2()
-            Avatar::new(subject.avatar())
+        .py_1()
-                .seed(subject.avatar_seed())
+        .px_3()
-                .flex_shrink_0(),
+        .hover(|this| this.bg(cx.theme().surface_background))
+        .child(badge(activity, cx))
+        .when(!hide_avatar, |this| {
+            this.child(
+                Avatar::new(subject.avatar())
+                    .seed(subject.avatar_seed())
+                    .small()
+                    .flex_shrink_0(),
+            )
+        })
+        .child(
+            div()
+                .min_w_0()
+                .truncate()
+                .text_sm()
+                .font_semibold()
+                .child(subject.name()),
         )
-        .author(SharedString::from(format!(
+        .child(
-            "{} {}",
+            div()
-            subject.name(),
+                .min_w_0()
-            action(activity)
+                .truncate()
-        )))
+                .text_sm()
-        .timestamp(activity.created_at.to_human_time())
+                .text_color(cx.theme().text_placeholder)
+                .child(SharedString::from(action(activity))),
+        )
+        .child(
+            div()
+                .flex_shrink_0()
+                .ml_1()
+                .text_xs()
+                .text_color(cx.theme().text_placeholder)
+                .child(activity.created_at.to_ago()),
+        )
+        .into_any_element()
+}
+
+fn badge(activity: &Activity, cx: &App) -> AnyElement {
+    let (icon, color) = match activity.kind {
+        Kind::GroupJoinRequest => (IconName::Login, cx.theme().icon_accent),
+        Kind::GroupPutUser => (IconName::Login, cx.theme().icon_accent),
+        Kind::GroupLeaveRequest => (IconName::Logout, cx.theme().text_danger),
+        Kind::GroupRemoveUser => (IconName::Ban, cx.theme().text_danger),
+        _ => (IconName::Info, cx.theme().icon_muted),
+    };
+
+    h_flex()
+        .flex_shrink_0()
+        .justify_center()
+        .size_8()
+        .child(Icon::new(icon).small().text_color(color))
         .into_any_element()
 }
 

crates/ui/src/icon.rs

@@ -25,6 +25,7 @@ pub enum IconName {
     ArrowDownCircle,
     Boom,
     Book,
+    Ban,
     ChevronDown,
     CaretDown,
     CaretRight,
@@ -50,6 +51,7 @@ pub enum IconName {
     Link,
     Loader,
     Lock,
+    Login,
     Logout,
     Message,
     Moon,
@@ -106,6 +108,7 @@ impl IconNamed for IconName {
             Self::ArrowDownCircle => "icons/arrow-down-circle.svg",
             Self::Boom => "icons/boom.svg",
             Self::Book => "icons/book.svg",
+            Self::Ban => "icons/ban.svg",
             Self::ChevronDown => "icons/chevron-down.svg",
             Self::CaretDown => "icons/caret-down.svg",
             Self::CaretRight => "icons/caret-right.svg",
@@ -131,6 +134,7 @@ impl IconNamed for IconName {
             Self::Link => "icons/link.svg",
             Self::Loader => "icons/loader.svg",
             Self::Lock => "icons/lock.svg",
+            Self::Login => "icons/login.svg",
             Self::Logout => "icons/logout.svg",
             Self::Message => "icons/message.svg",
             Self::Moon => "icons/moon.svg",