Use interactive buttons to display and send (toggle) reactions

src/home/mod.rs

@@ -8,6 +8,7 @@ pub mod rooms_list;
 pub mod rooms_sidebar;
 pub mod spaces_dock;
 pub mod welcome_screen;
+pub mod room_reaction_list;
 
 pub fn live_design(cx: &mut Cx) {
     home_screen::live_design(cx);
@@ -18,4 +19,5 @@ pub fn live_design(cx: &mut Cx) {
     main_content::live_design(cx);
     spaces_dock::live_design(cx);
     welcome_screen::live_design(cx);
+    room_reaction_list::live_design(cx);
 }

src/home/room_reaction_list.rs

@@ -0,0 +1,160 @@
+use makepad_widgets::*;
+use matrix_sdk::ruma::{
+    events::relation::Annotation,
+    OwnedEventId, OwnedRoomId,
+};
+use crate::sliding_sync::{submit_async_request, MatrixRequest};
+
+live_design ! { 
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import makepad_draw::shader::std::*;
+    import crate::shared::styles::*;
+    COLOR_BUTTON_DARKER = #454343
+    ReactionList = {{ReactionList}} { 
+        item: <Button> {
+            width: Fit,
+            height: Fit,
+            spacing: 20,
+            padding: {top: 3, bottom: 3, left: 3, right: 3}
+            margin: {
+                top:3,
+                bottom:3,
+                left:3,
+                right:3
+
+            },
+            draw_bg: {
+                instance color: (COLOR_BUTTON_DARKER)
+                instance color_hover: #fef65b
+                instance border_width: 0.0
+                instance border_color: #D0D5DD
+                instance radius: 3.0
+
+                fn get_color(self) -> vec4 {
+                    return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
+                }
+
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size)
+                    sdf.box(
+                        self.border_width,
+                        self.border_width,
+                        self.rect_size.x - (self.border_width * 2.0),
+                        self.rect_size.y - (self.border_width * 2.0),
+                        max(1.0, self.radius)
+                    )
+                    sdf.fill_keep(self.get_color())
+                    if self.border_width > 0.0 {
+                        sdf.stroke(self.border_color, self.border_width)
+                    }
+                    return sdf.result;
+                }
+            }
+
+            draw_icon: {
+                instance color: #000
+                instance color_hover: #000
+                uniform rotation_angle: 0.0,
+
+                fn get_color(self) -> vec4 {
+                    return mix(self.color, mix(self.color, self.color_hover, 0.2), self.hover)
+                }
+
+
+            }
+            icon_walk: {width: 16, height: 16}
+
+            draw_text: {
+                text_style: <REGULAR_TEXT>{font_size: 8},
+                color: #ffffff
+                fn get_color(self) -> vec4 {
+                    return self.color;
+                }
+            }
+        }
+    }
+}
+
+#[derive(Live, Widget)] pub struct ReactionList { 
+    #[redraw] #[rust] 
+    area: Area, 
+    #[live] item: Option<LivePtr>, 
+    #[rust] children: ComponentMap<LiveId, ButtonRef>, 
+    #[layout] layout: Layout, 
+    #[walk] walk: Walk, 
+    #[rust] pub list: Vec<(String,usize)>, 
+    #[rust] pub room_id: Option<OwnedRoomId>,
+    #[rust] pub event_id: Option<OwnedEventId>,
+}
+impl Widget for ReactionList { 
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep { 
+        cx.begin_turtle(walk, self.layout);
+        let rect = cx.turtle().rect();
+        let width: f64 = rect.size.x - 50.0;
+        let mut acc_width: f64 = 0.0;
+        let mut acc_height = 0.0;
+        for(index, (emoji,count)) in self.list.iter().enumerate() { 
+            let target = self.children.get_or_insert(cx, LiveId(index as u64), |cx | { 
+                WidgetRef::new_from_ptr(cx, self.item).as_button() 
+            });
+            target.set_text(&format!("{} {}",emoji,count));
+            target.draw_all(cx, scope);
+            let used = cx.turtle().used();
+            acc_width = used.x;
+            if acc_width > width {
+                cx.turtle_new_line();
+                target.redraw(cx);
+                let used = cx.turtle().used();
+                acc_height = used.y;
+                cx.turtle_mut().set_used(0.0, used.y);
+            }
+            if acc_height == 0.0 {
+                acc_height = used.y;
+            }
+
+        }
+        cx.end_turtle();
+        self.children.retain_visible();
+        DrawStep::done() 
+    }
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) { 
+        let Some(room_id) = &self.room_id else { return };
+        let Some(event_id) = &self.event_id else { return };
+        self.children.iter().enumerate()
+        .for_each(|(_index,(_id, widget_ref)) | { 
+            widget_ref.handle_event(cx, event, scope);
+            match event {
+                Event::Actions(actions) => {
+                    if widget_ref.clicked(&actions) {
+                        let text = widget_ref.text().clone();
+                        let mut reaction_string_arr:Vec<&str> = text.split(" ").collect();
+                        reaction_string_arr.pop();                        
+                        let reaction_string = reaction_string_arr.join(" ");
+                        if let Some(key) = emojis::get_by_shortcode(&reaction_string) {
+                            submit_async_request(MatrixRequest::ToggleReaction{
+                                room_id: room_id.clone(),
+                                annotation: Annotation::new(event_id.clone(), key.as_str().to_string())
+                            });
+                        }              
+                    }
+                }
+                _ => { }
+            }
+        });
+    } 
+} 
+impl LiveHook for ReactionList { 
+    fn before_apply(&mut self, cx: &mut Cx, apply:&mut Apply, index: usize, nodes: &[LiveNode]) {        
+    } 
+}
+
+impl ReactionListRef { 
+    pub fn set_list(&mut self, looper: Vec<(String,usize)>, room_id: OwnedRoomId, event_id: OwnedEventId) { 
+        if let Some(mut instance) = self.borrow_mut() { 
+            instance.list = looper;
+            instance.event_id = Some(event_id);
+            instance.room_id = Some(room_id);
+        } 
+    }
+}

src/home/room_screen.rs

@@ -17,20 +17,14 @@ use matrix_sdk_ui::timeline::{
 };
 
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry},
-    event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item},
-    media_cache::{MediaCache, MediaCacheEntry},
-    profile::{
+    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
-    },
-    shared::{
+    }, shared::{
         avatar::{AvatarRef, AvatarWidgetRefExt},
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
-    },
-    sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest},
-    utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
+    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}, home::room_reaction_list::*
 };
 use rangemap::RangeSet;
 
@@ -46,6 +40,7 @@ live_design! {
     import crate::shared::text_or_image::TextOrImage;
     import crate::shared::html_or_plaintext::*;
     import crate::profile::user_profile::UserProfileSlidingPane;
+    import crate::home::room_reaction_list::*;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
@@ -289,6 +284,7 @@ live_design! {
             draw_fixed:       { color: (REACTION_TEXT_COLOR) },
             body: ""
         }
+
     }
 
     // An empty view that takes up no space in the portal list.
@@ -417,6 +413,11 @@ live_design! {
                 // }
 
                 message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> {
+                    width: Fill, 
+                    height: Fit, 
+                    margin: {top: (5.0)}
+                }
             }
 
             message_menu = <MessageMenu> {}
@@ -2007,7 +2008,8 @@ fn populate_message_view(
                     message,
                     event_tl_item.event_id(),
                 );
-                draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
+
+                draw_reactions(cx, &item, event_tl_item.reactions(),room_id, event_tl_item.event_id(), item_id);
                 // We're done drawing the message content, so mark it as fully drawn
                 // *if and only if* the reply preview was also fully drawn.
                 new_drawn_status.content_drawn = is_reply_fully_drawn;
@@ -2032,7 +2034,7 @@ fn populate_message_view(
                     message,
                     event_tl_item.event_id(),
                 );
-                draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
+                draw_reactions(cx, &item, event_tl_item.reactions(),room_id, event_tl_item.event_id(), item_id);
                 let is_image_fully_drawn = populate_image_message_content(
                     cx,
                     &item.text_or_image(id!(content.message)),
@@ -2060,7 +2062,7 @@ fn populate_message_view(
                     message,
                     event_tl_item.event_id(),
                 );
-                draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
+                draw_reactions(cx, &item, event_tl_item.reactions(), room_id, event_tl_item.event_id(),item_id);
                 new_drawn_status.content_drawn = is_reply_fully_drawn;
                 (item, false)
             }
@@ -2301,6 +2303,8 @@ fn draw_reactions(
     _cx: &mut Cx2d,
     message_item: &WidgetRef,
     reactions: &ReactionsByKeyBySender,
+    room_id: &RoomId,
+    event_id: Option<&EventId>,
     id: usize,
 ) {
     const DRAW_ITEM_ID_REACTION: bool = false;
@@ -2315,6 +2319,7 @@ fn draw_reactions(
         .set_visible(true);
 
     let mut label_text = String::new();
+    let mut text_to_display_vec = vec![];
     for (reaction_raw, reaction_senders) in reactions.iter() {
         // Just take the first char of the emoji, which ignores any variant selectors.
         let reaction_first_char = reaction_raw.chars().next().map(|c| c.to_string());
@@ -2325,15 +2330,21 @@ fn draw_reactions(
         let count = reaction_senders.len();
         // log!("Found reaction {:?} with count {}", text_to_display, count);
         label_text = format!("{label_text}<i>:{}:</i> <b>{}</b> ", text_to_display, count);
+        text_to_display_vec.push((text_to_display.to_string(),count));
+    }
+    if let Some(event_id) = event_id{
+        message_item.reaction_list(id!(content.reaction_list))
+            .set_list(text_to_display_vec, room_id.to_owned(), event_id.to_owned());
     }
 
     // Debugging: draw the item ID as a reaction
     if DRAW_ITEM_ID_REACTION {
         label_text = format!("{label_text}<i>ID: {}</i>", id);
     }
+    // commented to use reaction list instead
+    // let html_reaction_view = message_item.html(id!(message_annotations.html_content));
+    // html_reaction_view.set_text(&label_text);
 
-    let html_reaction_view = message_item.html(id!(message_annotations.html_content));
-    html_reaction_view.set_text(&label_text);
 }
 
 

src/sliding_sync.rs

@@ -6,7 +6,7 @@ use imbl::Vector;
 use makepad_widgets::{error, log, warning, SignalToUI};
 use matrix_sdk::{
     config::RequestConfig, event_handler::EventHandlerDropGuard, media::MediaRequest, room::RoomMember, ruma::{
-        api::client::session::get_login_types::v3::LoginType, events::{room::{message::{ForwardThread, RoomMessageEventContent}, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
+        api::client::session::get_login_types::v3::LoginType, events::{relation::Annotation, room::{message::{ForwardThread, RoomMessageEventContent}, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
     }, sliding_sync::http::request::ListFilters, Client, Room, SlidingSyncList, SlidingSyncMode
 };
 use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, RepliedToInfo, TimelineDetails, TimelineItem, TimelineItemContent}, Timeline};
@@ -235,6 +235,10 @@ pub enum MatrixRequest {
         /// Whether to subscribe or unsubscribe from typing notices for this room.
         subscribe: bool,
     },
+    ToggleReaction{
+        room_id: OwnedRoomId,
+        annotation: Annotation
+    }
 }
 
 /// Submits a request to the worker thread to be executed asynchronously.
@@ -606,6 +610,23 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                     }
                     SignalToUI::set_ui_signal();
                 });
+            },
+            MatrixRequest::ToggleReaction { room_id,annotation }=>{
+                let timeline = {
+                    let all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                    let Some(room_info) = all_room_info.get(&room_id) else {
+                        log!("BUG: room info not found for send message request {room_id}");
+                        continue;
+                    };
+                    room_info.timeline.clone()
+                };
+                let _send_message_task = Handle::current().spawn(async move {
+                    log!("Toggle Reaction to room {room_id}: ...");
+                    match timeline.toggle_reaction(&annotation).await {
+                        Ok(_send_handle) => log!("Sent toggle reaction to room {room_id}."),
+                        Err(_e) => error!("Failed to send toggle reaction to room {room_id}"),
+                    }
+                });
             }
 
         }