Use interactive buttons to display and send (toggle) reactions

src/home/event_reaction.rs

@@ -0,0 +1,186 @@
+use crate::sliding_sync::{submit_async_request, MatrixRequest};
+use makepad_widgets::*;
+use matrix_sdk::ruma::OwnedRoomId;
+use matrix_sdk_ui::timeline::ReactionsByKeyBySender;
+
+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 unique_id: Option<String>,
+}
+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(unique_id) = &self.unique_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(),
+                                    unique_id: unique_id.clone(),
+                                    reaction_key: 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: &ReactionsByKeyBySender,
+        room_id: OwnedRoomId,
+        unique_id: &str,
+    ) {
+        if let Some(mut instance) = self.borrow_mut() {
+            let mut text_to_display_vec = Vec::with_capacity(looper.len());
+            for (reaction_raw, reaction_senders) in looper.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());
+                let reaction_str = reaction_first_char.as_deref().unwrap_or(reaction_raw);
+                let text_to_display = emojis::get(reaction_str)
+                    .and_then(|e| e.shortcode())
+                    .unwrap_or(reaction_raw);
+                let count = reaction_senders.len();
+                text_to_display_vec.push((text_to_display.to_string(), count));
+            }
+            instance.list = text_to_display_vec;
+            instance.room_id = Some(room_id);
+            instance.unique_id = Some(unique_id.to_string());
+        }
+    }
+}

src/home/mod.rs

@@ -9,6 +9,7 @@ pub mod rooms_list;
 pub mod rooms_sidebar;
 pub mod spaces_dock;
 pub mod welcome_screen;
+pub mod event_reaction;
 pub mod light_themed_dock;  
 
 pub fn live_design(cx: &mut Cx) {
@@ -22,4 +23,5 @@ pub fn live_design(cx: &mut Cx) {
     spaces_dock::live_design(cx);
     welcome_screen::live_design(cx);
     light_themed_dock::live_design(cx);
+    event_reaction::live_design(cx);
 }

src/home/room_screen.rs

@@ -18,7 +18,7 @@ use matrix_sdk::{
     OwnedServerName,
 };
 use matrix_sdk_ui::timeline::{
-    self, EventTimelineItem, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo,
+    self, EventTimelineItem, MemberProfileChange, Profile, RepliedToInfo,
     RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind,
     VirtualTimelineItem,
 };
@@ -33,7 +33,8 @@ use crate::{
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
         typing_animation::TypingAnimationWidgetExt,
-    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest, PaginationDirection}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
+    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest, PaginationDirection}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
+    home::event_reaction::ReactionListWidgetRefExt
 };
 use rangemap::RangeSet;
 
@@ -51,6 +52,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::event_reaction::*;
     import crate::shared::typing_animation::TypingAnimation;
     import crate::shared::icon_button::RobrixIconButton;
 
@@ -270,27 +272,6 @@ live_design! {
         }
     }
 
-    // An optional view used to show reactions beneath a message.
-    MessageAnnotations = <View> {
-        visible: false,
-        width: Fill,
-        height: Fit,
-        padding: {top: 5.0}
-
-        html_content = <RobrixHtml> {
-            width: Fill,
-            height: Fit,
-            padding: { bottom: 5.0, top: 0.0 },
-            font_size: 10.5,
-            font_color: (REACTION_TEXT_COLOR),
-            draw_normal:      { color: (REACTION_TEXT_COLOR) },
-            draw_italic:      { color: (REACTION_TEXT_COLOR) },
-            draw_bold:        { color: (REACTION_TEXT_COLOR) },
-            draw_bold_italic: { color: (REACTION_TEXT_COLOR) },
-            draw_fixed:       { color: (REACTION_TEXT_COLOR) },
-            body: ""
-        }
-    }
 
     // An empty view that takes up no space in the portal list.
     Empty = <View> { }
@@ -416,7 +397,11 @@ live_design! {
                 //     margin: {top: 13.0, bottom: 5.0}
                 // }
 
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> {
+                    width: Fill, 
+                    height: Fit, 
+                    margin: {top: (5.0)}
+                }
             }
 
             message_menu = <MessageMenu> {}
@@ -456,7 +441,11 @@ live_design! {
                 padding: { left: 10.0 }
 
                 message = <HtmlOrPlaintext> { }
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> {
+                    width: Fill, 
+                    height: Fit, 
+                    margin: {top: (5.0)}
+                }
             }
         }
     }
@@ -471,7 +460,11 @@ live_design! {
                     width: Fill, height: 300,
                     image_view = { image = { fit: Horizontal } }
                 }
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> {
+                    width: Fill, 
+                    height: Fit, 
+                    margin: {top: (5.0)}
+                }
             }
         }
     }
@@ -486,7 +479,11 @@ live_design! {
                     width: Fill, height: 300,
                     image_view = { image = { fit: Horizontal } }
                 }
-                message_annotations = <MessageAnnotations> {}
+                reaction_list = <ReactionList> {
+                    width: Fill, 
+                    height: Fit, 
+                    margin: {top: (5.0)}
+                }
             }
         }
     }
@@ -1367,6 +1364,7 @@ impl Widget for RoomScreen {
                                     list,
                                     item_id,
                                     room_id,
+                                    timeline_item.unique_id(),
                                     event_tl_item,
                                     message,
                                     prev_event,
@@ -2216,6 +2214,7 @@ fn populate_message_view(
     list: &mut PortalList,
     item_id: usize,
     room_id: &RoomId,
+    unique_id: &str,
     event_tl_item: &EventTimelineItem,
     message: &timeline::Message,
     prev_event: Option<&Arc<TimelineItem>>,
@@ -2319,7 +2318,8 @@ fn populate_message_view(
 
     // If we didn't use a cached item, we need to draw all other message content: the reply preview and reactions.
     if !used_cached_item {
-        draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
+        item.reaction_list(id!(content.reaction_list))
+            .set_list(event_tl_item.reactions(), room_id.to_owned(), unique_id);
         let (is_reply_fully_drawn, replied_to_ev_id) = draw_replied_to_message(
             cx,
             &item.view(id!(replied_to_message)),
@@ -2616,46 +2616,6 @@ fn populate_preview_of_timeline_item(
     widget_out.show_html(html);
 }
 
-/// Draws the reactions beneath the given `message_item`.
-fn draw_reactions(
-    _cx: &mut Cx2d,
-    message_item: &WidgetRef,
-    reactions: &ReactionsByKeyBySender,
-    id: usize,
-) {
-    const DRAW_ITEM_ID_REACTION: bool = false;
-    if reactions.is_empty() && !DRAW_ITEM_ID_REACTION {
-        return;
-    }
-
-    // The message annotaions view is invisible by default, so we must set it to visible
-    // now that we know there are reactions to show.
-    message_item
-        .view(id!(content.message_annotations))
-        .set_visible(true);
-
-    let mut label_text = String::new();
-    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());
-        let reaction_str = reaction_first_char.as_deref().unwrap_or(reaction_raw);
-        let text_to_display = emojis::get(reaction_str)
-            .and_then(|e| e.shortcode())
-            .unwrap_or(reaction_raw);
-        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);
-    }
-
-    // Debugging: draw the item ID as a reaction
-    if DRAW_ITEM_ID_REACTION {
-        label_text = format!("{label_text}<i>ID: {}</i>", id);
-    }
-
-    let html_reaction_view = message_item.html(id!(message_annotations.html_content));
-    html_reaction_view.set_text(&label_text);
-}
-
 /// A trait for abstracting over the different types of timeline events
 /// that can be displayed in a `SmallStateEvent` widget.
 trait SmallStateEventContent {