feat: show reactions in the UI

Author: Bloeckchengrafik

Cargo.lock

@@ -1,13 +1,13 @@
 use tokio::sync::broadcast;
 
+use crate::reaction::ReactionEvent;
 use crate::{async_list::AsyncList, message::Message};
-use crate::reaction::ReactionOperation;
 
 pub trait Channel: AsyncList<Content = Self::Message> + Send + Sync + Clone {
   type Message: Message;
 
   fn get_message_receiver(&self) -> broadcast::Receiver<Self::Message>;
-  fn get_reaction_receiver(&self) -> broadcast::Receiver<(String, ReactionOperation)>;
+  fn get_reaction_receiver(&self) -> broadcast::Receiver<ReactionEvent>;
 
   fn send_message(&self, content: String, nonce: String) -> Self::Message;
 }

src/chat/src/channel.rs

@@ -1,5 +1,7 @@
 use std::fmt::Debug;
-use gpui::Rgba;
+use gpui::{IntoElement, Rgba};
+
+pub type ReactionEvent = (String, ReactionOperation);
 
 #[derive(Copy, Clone, Debug)]
 pub enum MessageReactionType {
@@ -13,7 +15,7 @@ pub enum ReactionEmoji {
   Custom { url: String, animated: bool, name: Option<String> },
 }
 
-pub trait MessageReaction: Debug {
+pub trait MessageReaction: IntoElement {
   fn get_count(&self, kind: Option<MessageReactionType>) -> u64;
   fn get_self_reaction(&self) -> Option<MessageReactionType>;
   fn get_emoji(&self) -> ReactionEmoji;
@@ -31,7 +33,7 @@ pub enum ReactionOperation {
   RemoveEmoji(ReactionEmoji),
 }
 
-pub trait ReactionList {
+pub trait ReactionList: IntoElement {
   fn get_reactions(&self) -> &Vec<impl MessageReaction>;
   fn get_reaction(&self, emoji: &ReactionEmoji) -> Option<&impl MessageReaction>;
   fn increment(&mut self, emoji: &ReactionEmoji, kind: MessageReactionType, user_is_self: bool, by: isize);

src/chat/src/reaction.rs

@@ -5,6 +5,7 @@ edition = "2021"
 
 [dependencies]
 gpui.workspace = true
+components.workspace = true
 scope-chat = { version = "0.1.0", path = "../chat" }
 serenity = { git = "https://github.com/scopeclient/serenity", version = "0.12" }
 tokio = "1.41.1"

src/discord/Cargo.toml

@@ -6,7 +6,7 @@ use crate::{
   snowflake::Snowflake,
 };
 use scope_backend_cache::async_list::{refcacheslice::Exists, AsyncListCache};
-use scope_chat::reaction::ReactionOperation;
+use scope_chat::reaction::ReactionEvent;
 use scope_chat::{
   async_list::{AsyncList, AsyncListIndex, AsyncListItem, AsyncListResult},
   channel::Channel,
@@ -17,7 +17,7 @@ use tokio::sync::{broadcast, Mutex, Semaphore};
 pub struct DiscordChannel {
   channel_id: Snowflake,
   message_receiver: broadcast::Receiver<DiscordMessage>,
-  reaction_receiver: broadcast::Receiver<(String, ReactionOperation)>,
+  reaction_receiver: broadcast::Receiver<ReactionEvent>,
   client: Arc<DiscordClient>,
   cache: Arc<Mutex<AsyncListCache<DiscordMessage>>>,
   blocker: Semaphore,
@@ -49,7 +49,7 @@ impl Channel for DiscordChannel {
     self.message_receiver.resubscribe()
   }
 
-  fn get_reaction_receiver(&self) -> broadcast::Receiver<(String, ReactionOperation)> {
+  fn get_reaction_receiver(&self) -> broadcast::Receiver<ReactionEvent> {
     self.reaction_receiver.resubscribe()
   }
 

src/discord/src/channel/mod.rs

@@ -11,7 +11,7 @@ use crate::{
   },
   snowflake::Snowflake,
 };
-use scope_chat::reaction::{MessageReactionType, ReactionOperation};
+use scope_chat::reaction::{MessageReactionType, ReactionEvent, ReactionOperation};
 use serenity::all::Reaction;
 use serenity::{
   all::{Cache, ChannelId, Context, CreateMessage, EventHandler, GatewayIntents, GetMessages, Http, Message, MessageId, Ready},
@@ -31,7 +31,7 @@ struct SerenityClient {
 #[derive(Default)]
 pub struct DiscordClient {
   channel_message_event_handlers: RwLock<HashMap<Snowflake, Vec<broadcast::Sender<DiscordMessage>>>>,
-  channel_reaction_event_handlers: RwLock<HashMap<Snowflake, Vec<broadcast::Sender<(String, ReactionOperation)>>>>,
+  channel_reaction_event_handlers: RwLock<HashMap<Snowflake, Vec<broadcast::Sender<ReactionEvent>>>>,
   client: OnceLock<SerenityClient>,
   user: OnceLock<DiscordMessageAuthor>,
   channels: RwLock<HashMap<Snowflake, Arc<DiscordChannel>>>,
@@ -70,7 +70,7 @@ impl DiscordClient {
     self.channel_message_event_handlers.write().await.entry(channel).or_default().push(sender);
   }
 
-  pub async fn add_channel_reaction_sender(&self, channel: Snowflake, sender: broadcast::Sender<(String, ReactionOperation)>) {
+  pub async fn add_channel_reaction_sender(&self, channel: Snowflake, sender: broadcast::Sender<ReactionEvent>) {
     self.channel_reaction_event_handlers.write().await.entry(channel).or_default().push(sender);
   }
 

src/discord/src/client.rs

@@ -3,7 +3,7 @@ use crate::snowflake::Snowflake;
 use author::{DiscordMessageAuthor, DisplayName};
 use chrono::{DateTime, Utc};
 use content::DiscordMessageContent;
-use gpui::{Element, IntoElement};
+use gpui::{div, Element, IntoElement, ParentElement};
 use scope_chat::message::MessageAuthor;
 use scope_chat::reaction::ReactionList;
 use scope_chat::{async_list::AsyncListItem, message::Message};
@@ -26,7 +26,7 @@ pub struct DiscordMessage {
 
 impl DiscordMessage {
   pub fn from_serenity(msg: &serenity::all::Message) -> Self {
-    let reactions = msg.reactions.iter().map(|r| reaction::DiscordMessageReaction::from_message(r)).collect::<Vec<_>>();
+    let reactions = msg.reactions.iter().map(reaction::DiscordMessageReaction::from_message).collect::<Vec<_>>();
     if !reactions.is_empty() {
       println!("Reactions: {:?}", reactions);
     }
@@ -57,7 +57,9 @@ impl Message for DiscordMessage {
   }
 
   fn get_content(&self) -> impl Element {
-    self.content.clone().into_element()
+    div()
+        .child(self.content.clone().into_element())
+        .child(self.reactions.clone())
   }
 
   fn get_identifier(&self) -> String {

src/discord/src/message/mod.rs

@@ -1,8 +1,10 @@
-use gpui::Rgba;
+use components::theme::ActiveTheme;
+use gpui::{div, img, px, AnyElement, IntoElement, ParentElement, RenderOnce, Rgba, Styled, WindowContext};
+use gpui::prelude::FluentBuilder;
+use scope_chat::reaction::MessageReactionType::Normal;
 use scope_chat::reaction::{MessageReaction, MessageReactionType, ReactionEmoji};
 use serenity::all::ReactionType;
 use MessageReactionType::Burst;
-use scope_chat::reaction::MessageReactionType::Normal;
 
 #[derive(Clone, Debug)]
 pub enum ReactionData {
@@ -32,7 +34,7 @@ impl ReactionData {
   }
 }
 
-#[derive(Clone, Debug)]
+#[derive(Clone, Debug, IntoElement)]
 pub struct DiscordMessageReaction {
   pub data: ReactionData,
 }
@@ -84,7 +86,7 @@ impl MessageReaction for DiscordMessageReaction {
           None
         }
       }
-      ReactionData::Local { me, .. } => me.clone(),
+      ReactionData::Local { me, .. } => *me,
     }
   }
 
@@ -138,6 +140,30 @@ impl MessageReaction for DiscordMessageReaction {
   }
 }
 
+impl DiscordMessageReaction {
+  fn render_emoji(emoji: &ReactionEmoji) -> AnyElement {
+    match emoji {
+      ReactionEmoji::Simple(character) => div().text_size(px(12f32)).child(character.clone()).into_any_element(),
+      ReactionEmoji::Custom { url, .. } => img(url.clone()).w(px(16f32)).h(px(16f32)).into_any_element(),
+    }
+  }
+}
+
+impl RenderOnce for DiscordMessageReaction {
+  fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+    let emoji = self.get_emoji();
+    let theme = cx.theme();
+    div()
+        .p_1()
+        .border_1()
+        .border_color(theme.border)
+        .when(self.get_self_reaction().is_some(), |s| s.border_color(theme.accent))
+        .bg(theme.panel)
+        .rounded_md()
+        .child(Self::render_emoji(&emoji))
+  }
+}
+
 pub fn discord_reaction_to_emoji(reaction: &serenity::all::ReactionType) -> ReactionEmoji {
   match reaction {
     ReactionType::Custom { animated, id, name } => ReactionEmoji::Custom {
@@ -151,4 +177,4 @@ pub fn discord_reaction_to_emoji(reaction: &serenity::all::ReactionType) -> Reac
       ReactionEmoji::Simple("❓".to_string())
     }
   }
-}
+}

src/discord/src/message/reaction.rs

@@ -1,8 +1,9 @@
 use crate::message::reaction::{DiscordMessageReaction, ReactionData};
+use gpui::{div, IntoElement, ParentElement, RenderOnce, Styled, WindowContext};
 use scope_chat::reaction::MessageReactionType::Normal;
 use scope_chat::reaction::{MessageReaction, MessageReactionType, ReactionEmoji, ReactionList, ReactionOperation};
 
-#[derive(Clone, Debug, Default)]
+#[derive(Clone, Debug, Default, IntoElement)]
 pub struct DiscordReactionList {
   reactions: Vec<DiscordMessageReaction>,
 }
@@ -67,3 +68,16 @@ impl ReactionList for DiscordReactionList {
     }
   }
 }
+
+impl RenderOnce for DiscordReactionList {
+  fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+    if self.reactions.is_empty() {
+      return div();
+    }
+
+    div()
+        .flex()
+        .gap_2()
+        .children(self.reactions)
+  }
+}

src/discord/src/message/reaction_list.rs

@@ -7,7 +7,7 @@ use scope_chat::{
   message::Message,
 };
 use tokio::sync::RwLock;
-use scope_chat::reaction::{ReactionList, ReactionOperation};
+use scope_chat::reaction::{ReactionEvent, ReactionList};
 use super::message::{message, MessageGroup};
 
 #[derive(Clone, Copy)]
@@ -115,7 +115,7 @@ where
     });
   }
 
-  pub fn update_reaction(&mut self, cx: &mut ViewContext<Self>, reaction: (String, ReactionOperation)) {
+  pub fn update_reaction(&mut self, cx: &mut ViewContext<Self>, reaction: ReactionEvent) {
     self.cache.update(cx, |borrow: &mut Vec<Element<Option<T::Content>>>, cx| {
       for item in borrow.iter_mut() {
         if let Element::Resolved(Some(haystack)) = item {