From 49c4d32cb298cfe1abbafd08e039134b3b0409a1 Mon Sep 17 00:00:00 2001
From: Facundo Mendizabal <facu@fmzbl.com>
Date: Mon, 19 Aug 2024 15:48:19 -0300
Subject: [PATCH 1/5] Implement replying to messages and reply previews

---
 src/home/room_screen.rs | 822 ++++++++++++++++++++++++++++++++--------
 src/shared/styles.rs    |   2 +
 src/sliding_sync.rs     |  25 +-
 3 files changed, 676 insertions(+), 173 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 085cdae4..63a12008 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,32 +1,59 @@
 //! A room screen is the UI page that displays a single Room's timeline of events/messages
 //! along with a message input bar at the bottom.
 
-use std::{borrow::Cow, collections::BTreeMap, ops::{DerefMut, Range}, sync::{Arc, Mutex}};
+use std::{
+    borrow::Cow,
+    collections::BTreeMap,
+    ops::{DerefMut, Range},
+    sync::{Arc, Mutex},
+};
 
 use imbl::Vector;
 use makepad_widgets::*;
-use matrix_sdk::{ruma::{
-    events::{
-        room::{
-            guest_access::GuestAccess,
-            history_visibility::HistoryVisibility,
-            join_rules::JoinRule, message::{MessageFormat, MessageType, RoomMessageEventContent}, MediaSource,
+use matrix_sdk::{
+    ruma::{
+        events::{
+            room::{
+                guest_access::GuestAccess,
+                history_visibility::HistoryVisibility,
+                join_rules::JoinRule,
+                message::{
+                    sanitize::remove_plain_reply_fallback, MessageFormat, MessageType,
+                    RoomMessageEventContent,
+                },
+                MediaSource,
+            },
+            AnySyncMessageLikeEvent, AnySyncTimelineEvent, FullStateEventContent,
+            SyncMessageLikeEvent,
         },
-        AnySyncMessageLikeEvent, AnySyncTimelineEvent, FullStateEventContent, SyncMessageLikeEvent,
-    }, matrix_uri::MatrixId, uint, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedRoomId, RoomId,
-}, OwnedServerName};
+        matrix_uri::MatrixId,
+        uint, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedRoomId, RoomId, UserId,
+    },
+    OwnedServerName,
+};
 use matrix_sdk_ui::timeline::{
-    self, AnyOtherFullStateEventContent, EventTimelineItem, MemberProfileChange, MembershipChange, ReactionsByKeyBySender, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
+    self, AnyOtherFullStateEventContent, EventTimelineItem, MemberProfileChange, MembershipChange,
+    Profile, ReactionsByKeyBySender, RepliedToInfo, ReplyContent, RoomMembershipChange,
+    TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem,
 };
 
-use rangemap::RangeSet;
 use crate::{
     media_cache::{MediaCache, MediaCacheEntry, AVATAR_CACHE},
-    profile::user_profile::{AvatarInfo, ShowUserProfileAction, UserProfile, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
-    shared::{avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::HtmlOrPlaintextWidgetRefExt, text_or_image::TextOrImageWidgetRefExt},
-    sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest},
+    profile::user_profile::{
+        AvatarInfo, ShowUserProfileAction, UserProfile, UserProfilePaneInfo,
+        UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt,
+    },
+    shared::{
+        avatar::{AvatarRef, AvatarWidgetRefExt},
+        html_or_plaintext::HtmlOrPlaintextWidgetRefExt,
+        text_or_image::TextOrImageWidgetRefExt,
+    },
+    sliding_sync::{
+        get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest,
+    },
     utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
 };
+use rangemap::RangeSet;
 
 live_design! {
     import makepad_draw::shader::std::*;
@@ -49,18 +76,21 @@ live_design! {
     ICO_LIKES = dep("crate://self/resources/icon_likes.svg")
     ICO_USER = dep("crate://self/resources/icon_user.svg")
     ICO_ADD = dep("crate://self/resources/icon_add.svg")
+    ICO_CLOSE = dep("crate://self/resources/icons/close.svg")
+    // TODO: Maybe replace with a specific reply icon.
+    ICO_REPLY = dep("crate://self/resources/icons/go_back.svg")
 
     TEXT_SUB = {
         font_size: (10),
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
-    
+
     TEXT_P = {
         font_size: (12),
         height_factor: 1.65,
         font: {path: dep("crate://makepad-widgets/resources/GoNotoKurrent-Regular.ttf")}
     }
-    
+
     COLOR_BG = #xfff8ee
     COLOR_BRAND = #xf88
     COLOR_BRAND_HOVER = #xf66
@@ -70,12 +100,12 @@ live_design! {
     COLOR_OVERLAY_BG = #x000000d8
     COLOR_READ_MARKER = #xeb2733
     COLOR_PROFILE_CIRCLE = #xfff8ee
-    
+
     FillerY = <View> {width: Fill}
-    
+
     FillerX = <View> {height: Fill}
-    
-    
+
+
     IconButton = <Button> {
         draw_text: {
             instance hover: 0.0
@@ -128,16 +158,153 @@ live_design! {
         }
         text: " "
     }
-    
+
     REACTION_TEXT_COLOR = #4c00b0
 
-    MessageMenu = <View> {
+    ReplyingPreview = <View> {
+        visible: false
+        width: Fill
+        height: Fit
+        flow: Down
+        padding: {top: 0.0, right: 12.0, bottom: 0.0, left: 12.0}
+
+        header_wrapper = <View> {
+            width: Fill
+            height: Fit
+            flow: Right
+            align: {y: 0.5}
+
+            header = <Label> {
+                draw_text: {
+                    text_style: <TEXT_SUB> {},
+                    color: (COLOR_META)
+                }
+                text: "Replying"
+            }
+
+            filler = <View> {width: Fill, height: Fill}
+
+            // TODO: Fix style
+            cancel_reply_button = <IconButton> {
+                width: Fit,
+                height: Fit,
+
+                draw_icon: {
+                    svg_file: (ICO_CLOSE),
+                    fn get_color(self) -> vec4 {
+                       return (COLOR_META)
+                    }
+                }
+                icon_walk: {width: 12, height: 12}
+            }
+
+        }
+
+        content = <View> {
+            width: Fill
+            height: Fit
+            flow: Down
+            padding: {left: 5.0, bottom: 5.0, top: 5.0}
+
+            show_bg: true
+            draw_bg: {
+                instance vertical_bar_color: (USERNAME_TEXT_COLOR)
+                instance vertical_bar_width: 2.0
+                instance radius: 0.0
+
+                fn get_color(self) -> vec4 {
+                    return self.color;
+                }
+
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+
+                    sdf.box(
+                        0.0,
+                        0.0,
+                        self.rect_size.x,
+                        self.rect_size.y,
+                        max(1.0, self.radius)
+                    );
+                    sdf.fill(self.get_color());
+
+                    sdf.rect(
+                        0.0,
+                        0.0,
+                        self.vertical_bar_width,
+                        self.rect_size.y
+                    );
+                    sdf.fill(self.vertical_bar_color);
+
+                    return sdf.result;
+                }
+            }
+
+            <View> {
+                width: Fill
+                height: Fit
+                flow: Right
+                margin: { bottom: 10.0, top: 0.0, right: 5.0 }
+                align: {y: 0.5}
+
+                avatar = <Avatar> {
+                    width: 20.,
+                    height: 20.
+                }
+
+                username = <Label> {
+                    width: Fill,
+                    margin: { left: 5.0 }
+                    draw_text: {
+                        text_style: <USERNAME_TEXT_STYLE> { font_size: 10 },
+                        color: (USERNAME_TEXT_COLOR)
+                        wrap: Ellipsis,
+                    }
+                    text: "<Username not available>"
+                }
+            }
+
+            body = <HtmlOrPlaintext> {
+                html_view = {
+                    html = {
+                        font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE)
+                    }
+                }
+            }
+        }
+    }
+
+    MessageMenu = <RoundedView> {
+        visible: true,
+        width: Fit,
+        height: Fit,
+        align: {x: 1, y: 1}
+
+        draw_bg: {
+            border_width: 0.0,
+            border_color: #000,
+            radius: 2
+        }
+
+        // TODO: Fix styles
+        reply_button = <IconButton> {
+            visible: false
+            width: Fit,
+            height: Fit,
+
+            draw_icon: {
+                svg_file: (ICO_REPLY),
+            }
+            icon_walk: {width: 12, height: 12}
+        }
+    }
+
+    MessageAnnotations = <View> {
         visible: false,
         width: Fill,
         height: Fit,
 
-        // TODO: use a set of Buttons later, so a user can click to add their own reaction.
-        annotations = <RobrixHtml> {
+        html_content = <RobrixHtml> {
             width: Fill,
             height: Fit,
             padding: {top: 7.5, bottom: 5.0 },
@@ -150,31 +317,43 @@ live_design! {
             body: ""
         }
     }
-    
+
     // An empty view that takes up no space in the portal list.
     Empty = <View> { }
 
     // The view used for each text-based message event in a room's timeline.
-    Message = <View> {
+    Message = {{Message}} {
         width: Fill,
         height: Fit,
         margin: 0.0
         flow: Down,
         padding: 0.0,
         spacing: 0.0
-        
+
+        // Only shown when the message is replying to another one
+        reply_preview = <ReplyingPreview> {
+            flow: Right
+            cursor: Hand
+            margin: { bottom: 10 }
+            header_wrapper = <View> {
+                width: 0
+            }
+            content = {
+                margin: { left: 10 }
+            }
+        }
+
         body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
             padding: 10.0,
-            spacing: 10.0
-            
+
             profile = <View> {
                 align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 65.0,
                 height: Fit,
-                margin: {top: 7.5}
+                margin: {top: 7.5, right: 10}
                 flow: Down,
                 avatar = <Avatar> {
                     width: 50.,
@@ -200,7 +379,7 @@ live_design! {
                 height: Fit
                 flow: Down,
                 padding: 0.0
-                
+
                 username = <Label> {
                     width: Fill,
                     margin: {bottom: 10.0, top: 10.0, right: 10.0,}
@@ -212,12 +391,20 @@ live_design! {
                     text: "<Username not available>"
                 }
                 message = <HtmlOrPlaintext> { }
-                
+
                 // <LineH> {
                 //     margin: {top: 13.0, bottom: 5.0}
                 // }
-                
-                message_menu = <MessageMenu> {}
+
+                message_annotations = <MessageAnnotations> {}
+            }
+
+            message_menu = <MessageMenu> {}
+            // leave space for reply button (simulate a min width).
+            // once the message menu is done with overlays this wont be necessary.
+            <View> {
+                width: 1,
+                height: 30
             }
         }
     }
@@ -239,9 +426,9 @@ live_design! {
                 width: Fill,
                 height: Fit,
                 flow: Down,
-                
+
                 message = <HtmlOrPlaintext> { }
-                message_menu = <MessageMenu> {}
+                message_annotations = <MessageAnnotations> {}
             }
         }
     }
@@ -255,7 +442,7 @@ live_design! {
                     width: Fill, height: 300,
                     image_view = { image = { fit: Horizontal } }
                 }
-                message_menu = <MessageMenu> {}
+                message_annotations = <MessageAnnotations> {}
             }
         }
     }
@@ -270,7 +457,7 @@ live_design! {
                     width: Fill, height: 300,
                     image_view = { image = { fit: Horizontal } }
                 }
-                message_menu = <MessageMenu> {}
+                message_annotations = <MessageAnnotations> {}
             }
         }
     }
@@ -285,14 +472,14 @@ live_design! {
         flow: Right,
         padding: { top: 1.0, bottom: 1.0 }
         spacing: 0.0
-        
+
         body = <View> {
             width: Fill,
             height: Fit
             flow: Right,
             padding: { top: 2.0, bottom: 2.0 }
             spacing: 5.0
-            
+
             left_container = <View> {
                 align: {x: 0.5, y: 0.0} // centered horizontally, top aligned
                 width: 70.0,
@@ -403,7 +590,7 @@ live_design! {
             height: Fill,
             width: Fill
             flow: Down
-    
+
             // Below, we must place all of the possible templates (views) that can be used in the portal list.
             TopSpace = <TopSpace> {}
             Message = <Message> {}
@@ -432,15 +619,24 @@ live_design! {
         <View> {
             width: Fill, height: Fill,
             flow: Overlay,
-            
+
             <KeyboardView> {
                 width: Fill, height: Fill,
                 flow: Down,
 
                 // First, display the timeline of all messages/events.
                 timeline = <Timeline> {}
-                
+
                 // Below that, display a view that holds the message input bar.
+                replying_preview = <ReplyingPreview> {
+                    flow: Down
+                    content = {
+                        draw_bg: {
+                            vertical_bar_width: 0.0
+                        }
+                    }
+                }
+
                 <View> {
                     width: Fill, height: Fit
                     flow: Right, align: {y: 1.0}, padding: 10.
@@ -449,6 +645,7 @@ live_design! {
                         color: #fff
                     }
 
+
                     message_input = <TextInput> {
                         width: Fill, height: Fit, margin: 0
                         align: {y: 0.5}
@@ -547,55 +744,81 @@ live_design! {
 /// A simple deref wrapper around the `RoomScreen` widget that enables us to handle its events.
 #[derive(Live, LiveHook, Widget)]
 struct RoomScreen {
-    #[deref] view: View,
-    #[rust] room_id: Option<OwnedRoomId>,
-    #[rust] room_name: String,
+    #[deref]
+    view: View,
+    #[rust]
+    room_id: Option<OwnedRoomId>,
+    #[rust]
+    room_name: String,
+    #[rust(None)]
+    replying_to: Option<RepliedToInfo>,
 }
+
 impl Widget for RoomScreen {
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         self.view.draw_walk(cx, scope, walk)
     }
 
     // Handle events and actions at the RoomScreen level.
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope){
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let pane = self.user_profile_sliding_pane(id!(user_profile_sliding_pane));
         let timeline = self.timeline(id!(timeline));
 
         if let Event::Actions(actions) = event {
-            // Handle the send message button being clicked.
-            if self.button(id!(send_message_button)).clicked(&actions) {
-                let msg_input_widget = self.text_input(id!(message_input));
-                let entered_text = msg_input_widget.text();
-                msg_input_widget.set_text_and_redraw(cx, "");
-                if !entered_text.is_empty() {
-                    let room_id = self.room_id.clone().unwrap();
-                    log!("Sending message to room {}: {:?}", room_id, entered_text);
-                    let message = if let Some(html_text) = entered_text.strip_prefix("/html") {
-                        RoomMessageEventContent::text_html(html_text, html_text)
-                    } else if let Some(plain_text) = entered_text.strip_prefix("/plain") {
-                        RoomMessageEventContent::text_plain(plain_text)
-                    } else {
-                        RoomMessageEventContent::text_markdown(entered_text)
-                    };
-                    submit_async_request(MatrixRequest::SendMessage {
-                        room_id,
-                        message,
-                        // TODO: support replies to specific messages, attaching mentions, rich text (html), etc.
-                    });
-                }
-            }
+            for action in actions {
+                // Handle message reply action
+                if let TimelineAction::MessageReply(message_to_reply) =
+                    action.as_widget_action().cast()
+                {
+                    let replying_preview_view = self.view(id!(replying_preview));
 
-            // Handle a typing action on the message input box.
-            if let Some(new_text) = self.text_input(id!(message_input)).changed(actions) {
-                submit_async_request(MatrixRequest::SendTypingNotice {
-                    room_id: self.room_id.clone().unwrap(),
-                    typing: !new_text.is_empty(),
-                });
-            }
+                    if let Some(message) = message_to_reply.content().as_message() {
+                        if let Some(room_id) = &self.room_id {
+                            let (replying_preview_username, _) = set_avatar_and_get_username(
+                                cx,
+                                replying_preview_view.avatar(id!(avatar)),
+                                room_id.as_ref(),
+                                message_to_reply.sender_profile(),
+                                message_to_reply.sender(),
+                            );
+
+                            replying_preview_view
+                                .label(id!(username))
+                                .set_text(replying_preview_username.as_str());
+                        }
+
+                        const MAX_REPLYING_PREVIEW_BODY_LENGTH: usize = 100;
+                        let replying_preview_body =
+                            if message.body().chars().count() > MAX_REPLYING_PREVIEW_BODY_LENGTH {
+                                let truncated: String = message
+                                    .body()
+                                    .chars()
+                                    .take(MAX_REPLYING_PREVIEW_BODY_LENGTH - 1)
+                                    .collect();
+                                &(truncated + "…")
+                            } else {
+                                message.body()
+                            };
+
+                        replying_preview_view
+                            .html_or_plaintext(id!(body))
+                            .show_html(replying_preview_body);
+                    }
+
+                    match message_to_reply.replied_to_info() {
+                        Ok(replied_to_info) => {
+                            self.set_replying_to(Some(replied_to_info));
+                        }
+                        Err(e) => error!("{e}"),
+                    }
+
+                    self.redraw(cx);
+                }
 
-            for action in actions {
                 // Handle the action that requests to show the user profile sliding pane.
-                if let ShowUserProfileAction::ShowUserProfile(avatar_info) = action.as_widget_action().cast() {
+                if let ShowUserProfileAction::ShowUserProfile(avatar_info) =
+                    action.as_widget_action().cast()
+                {
                     timeline.show_user_profile(
                         cx,
                         &pane,
@@ -686,6 +909,46 @@ impl Widget for RoomScreen {
                     }
                 }
             }
+
+            // Handle the reply cancelation button being clicked.
+            if self.button(id!(cancel_reply_button)).clicked(&actions) {
+                self.set_replying_to(None);
+                self.redraw(cx);
+            }
+
+            // Handle the send message button being clicked.
+            if self.button(id!(send_message_button)).clicked(&actions) {
+                let msg_input_widget = self.text_input(id!(message_input));
+                let entered_text = msg_input_widget.text();
+                msg_input_widget.set_text_and_redraw(cx, "");
+                if !entered_text.is_empty() {
+                    let room_id = self.room_id.clone().unwrap();
+                    log!("Sending message to room {}: {:?}", room_id, entered_text);
+                    let message = if let Some(html_text) = entered_text.strip_prefix("/html") {
+                        RoomMessageEventContent::text_html(html_text, html_text)
+                    } else if let Some(plain_text) = entered_text.strip_prefix("/plain") {
+                        RoomMessageEventContent::text_plain(plain_text)
+                    } else {
+                        RoomMessageEventContent::text_markdown(entered_text)
+                    };
+                    submit_async_request(MatrixRequest::SendMessage {
+                        room_id,
+                        message,
+                        replied_to: self.replying_to.clone(),
+                        // TODO: support attaching mentions, rich text (html), etc.
+                    });
+
+                    self.set_replying_to(None)
+                }
+            }
+
+            // Handle a typing action on the message input box.
+            if let Some(new_text) = self.text_input(id!(message_input)).changed(actions) {
+                submit_async_request(MatrixRequest::SendTypingNotice {
+                    room_id: self.room_id.clone().unwrap(),
+                    typing: !new_text.is_empty(),
+                });
+            }
         }
 
         // Only forward visibility-related events (touch/tap/scroll) to the inner timeline view
@@ -701,6 +964,17 @@ impl Widget for RoomScreen {
     }
 }
 
+impl RoomScreen {
+    fn set_replying_to(&mut self, replying_to: Option<RepliedToInfo>) {
+        self.view(id!(replying_preview))
+            .set_visible(replying_to.is_some());
+        self.replying_to = replying_to;
+    }
+    pub fn reset_state(&mut self) {
+        self.set_replying_to(None);
+    }
+}
+
 impl RoomScreenRef {
     /// Sets this `RoomScreen` widget to display the timeline for the given room.
     pub fn set_displayed_room(&self, room_name: String, room_id: OwnedRoomId) {
@@ -708,9 +982,15 @@ impl RoomScreenRef {
         room_screen.room_name = room_name;
         room_screen.room_id = Some(room_id.clone());
         room_screen.timeline(id!(timeline)).set_room(room_id);
+        room_screen.reset_state();
     }
 }
 
+#[derive(Clone, DefaultNone, Debug)]
+pub enum TimelineAction {
+    MessageReply(EventTimelineItem),
+    None,
+}
 
 /// A message that is sent from a background async task to a room's timeline view
 /// for the purpose of update the Timeline UI contents or metadata.
@@ -743,12 +1023,11 @@ pub enum TimelineUpdate {
     MediaFetched,
 }
 
-
 /// A Timeline widget displays the list of events (timeline "items") for a room.
 #[derive(Live, LiveHook, Widget)]
 pub struct Timeline {
     #[deref] view: View,
-    
+
     /// The room ID that this timeline is currently displaying.
     #[rust] room_id: Option<OwnedRoomId>,
     /// The UI-relevant states for the room that this widget is currently displaying.
@@ -783,7 +1062,7 @@ struct TimelineUiState {
     /// meaning that the range of already-drawn items doesn't need to be cleared.
     ///
     /// Upon a background update, only item indices greater than or equal to the
-    /// `index_of_first_change` are removed from this set. 
+    /// `index_of_first_change` are removed from this set.
     content_drawn_since_last_update: RangeSet<usize>,
 
     /// Same as `content_drawn_since_last_update`, but for the event **profiles** (avatar, username).
@@ -800,7 +1079,7 @@ struct TimelineUiState {
     ///
     /// Currently this excludes avatars, as those are shared across multiple rooms.
     media_cache: MediaCache,
-    
+
     /// The states relevant to the UI display of this timeline that are saved upon
     /// a `Hide` action and restored upon a `Show` action.
     saved_state: SavedState,
@@ -831,23 +1110,23 @@ impl Timeline {
         );
 
         let (tl_state, first_time_showing_room) = if let Some(existing) = TIMELINE_STATES.lock().unwrap().remove(&room_id) {
-            (existing, false)
-        } else {
-            let (update_sender, update_receiver) = take_timeline_update_receiver(&room_id)
-                .expect("BUG: couldn't get timeline state for first-viewed room.");
-            let new_tl_state = TimelineUiState {
-                room_id: room_id.clone(),
-                // We assume timelines being viewed for the first time haven't been fully paginated.
-                fully_paginated: false,
-                items: Vector::new(),
-                content_drawn_since_last_update: RangeSet::new(),
-                profile_drawn_since_last_update: RangeSet::new(),
-                update_receiver,
-                media_cache: MediaCache::new(MediaFormatConst::File, Some(update_sender)),
-                saved_state: SavedState::default(),
+                (existing, false)
+            } else {
+                let (update_sender, update_receiver) = take_timeline_update_receiver(&room_id)
+                    .expect("BUG: couldn't get timeline state for first-viewed room.");
+                let new_tl_state = TimelineUiState {
+                    room_id: room_id.clone(),
+                    // We assume timelines being viewed for the first time haven't been fully paginated.
+                    fully_paginated: false,
+                    items: Vector::new(),
+                    content_drawn_since_last_update: RangeSet::new(),
+                    profile_drawn_since_last_update: RangeSet::new(),
+                    update_receiver,
+                    media_cache: MediaCache::new(MediaFormatConst::File, Some(update_sender)),
+                    saved_state: SavedState::default(),
+                };
+                (new_tl_state, true)
             };
-            (new_tl_state, true)
-        };
 
         // log!("Timeline::set_room(): opening room {room_id}
         //     content_drawn_since_last_update: {:#?}
@@ -884,7 +1163,6 @@ impl Timeline {
         self.tl_state = Some(tl_state);
     }
 
-
     /// Invoke this when this timeline is being hidden or no longer being shown,
     /// e.g., when the user navigates away from this timeline.
     fn hide_timeline(&mut self) {
@@ -940,6 +1218,8 @@ impl TimelineRef {
 
 impl Widget for Timeline {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+
         if let Event::Actions(actions) = event {
             for action in actions {
                 // Handle the timeline being hidden or shown.
@@ -955,9 +1235,58 @@ impl Widget for Timeline {
                     }
                     StackNavigationTransitionAction::HideEnd
                     | StackNavigationTransitionAction::ShowDone
-                    | StackNavigationTransitionAction::None => { }
+                    | StackNavigationTransitionAction::None => {}
                 }
 
+                match action.as_widget_action().cast() {
+                    MessageAction::MessageReply(item_id) => {
+                        let Some(tl) = self.tl_state.as_mut() else {
+                            return;
+                        };
+                        let tl_idx = (item_id - 1) as usize;
+                        if let Some(tl_item) = tl.items.get(tl_idx) {
+                            if let Some(tl_event_item) = tl_item.as_event() {
+                                // TODO: this is ugly, but i couldnt find a clean way of making the Message
+                                // dispatch the action itself, it would need access to the timeline state or data
+                                cx.widget_action(
+                                    widget_uid,
+                                    &scope.path,
+                                    TimelineAction::MessageReply(tl_event_item.clone()),
+                                );
+                            }
+                        }
+                    }
+                    MessageAction::ReplyPreviewClicked(item_id) => {
+                        let portal_list = self.portal_list(id!(list));
+                        let Some(tl) = self.tl_state.as_mut() else {
+                            return;
+                        };
+                        let tl_idx = (item_id - 1) as usize;
+
+                        if let Some(tl_item) = tl.items.get(tl_idx) {
+                            if let Some(tl_event_item) = tl_item.as_event() {
+                                if let Some(message) = tl_event_item.content().as_message() {
+                                    if let Some(details) = message.in_reply_to() {
+                                        // Find the replyed message on timeline so we use the id for scrolling portal list
+                                        let message_replied_to_tl_index =
+                                            tl.items.iter().position(|i| {
+                                                i.as_event()
+                                                    .and_then(|e| e.event_id())
+                                                    .map_or(false, |event_id| {
+                                                        details.event_id == event_id
+                                                    })
+                                            });
+                                        if let Some(index) = message_replied_to_tl_index {
+                                            portal_list.set_first_id(index);
+					    self.redraw(cx);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    MessageAction::None => {}
+                }
                 // Handle other actions here
                 // TODO: handle actions upon an item being clicked.
                 // for (item_id, item) in self.list.items_with_actions(&actions) {
@@ -973,7 +1302,9 @@ impl Widget for Timeline {
         if let Event::Signal = event {
             let portal_list = self.portal_list(id!(list));
             let orig_first_id = portal_list.first_id();
-            let Some(tl) = self.tl_state.as_mut() else { return };
+            let Some(tl) = self.tl_state.as_mut() else {
+                return;
+            };
 
             let mut done_loading = false;
             while let Ok(update) = tl.update_receiver.try_recv() {
@@ -1028,7 +1359,7 @@ impl Widget for Timeline {
                 log!("TODO: hide topspace loading animation for room {}", tl.room_id);
                 // TODO FIXME: hide TopSpace loading animation, set it to invisible.
             }
-            
+
             self.redraw(cx);
         }
 
@@ -1036,10 +1367,9 @@ impl Widget for Timeline {
         self.view.handle_event(cx, event, scope);
     }
 
-
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         let Some(tl_state) = self.tl_state.as_mut() else {
-            return DrawStep::done()
+            return DrawStep::done();
         };
         let room_id = &tl_state.room_id;
         let tl_items = &tl_state.items;
@@ -1054,7 +1384,7 @@ impl Widget for Timeline {
             let portal_list_ref = list_item.as_portal_list();
             let Some(mut list_ref) = portal_list_ref.borrow_mut() else { continue };
             let list = list_ref.deref_mut();
-        
+
             list.set_item_range(cx, 0, last_item_id);
 
             while let Some(item_id) = list.next_visible_item(cx) {
@@ -1104,22 +1434,22 @@ impl Widget for Timeline {
                                 item_drawn_status,
                             ),
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
-                                cx,
-                                list,
-                                item_id,
-                                room_id,
-                                event_tl_item,
-                                membership_change,
-                                item_drawn_status,
+                                    cx,
+                                    list,
+                                    item_id,
+                                    room_id,
+                                    event_tl_item,
+                                    membership_change,
+                                    item_drawn_status,
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
-                                cx,
-                                list,
-                                item_id,
-                                room_id,
-                                event_tl_item,
-                                profile_change,
-                                item_drawn_status,
+                                    cx,
+                                    list,
+                                    item_id,
+                                    room_id,
+                                    event_tl_item,
+                                    profile_change,
+                                    item_drawn_status,
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1219,7 +1549,7 @@ fn populate_message_view(
                         .map_or(false, |d| d < uint!(600000)) // 10 mins in millis
             }
             _ => false,
-        }
+        },
         _ => false,
     };
 
@@ -1337,7 +1667,8 @@ fn populate_message_view(
             cx,
             item.avatar(id!(profile.avatar)),
             room_id,
-            event_tl_item,
+            event_tl_item.sender_profile(),
+            event_tl_item.sender(),
         );
         item.label(id!(content.username)).set_text(&username);
         new_drawn_status.profile_drawn = profile_drawn;
@@ -1351,39 +1682,80 @@ fn populate_message_view(
     // Set the timestamp.
     if let Some(dt) = unix_time_millis_to_datetime(&ts_millis) {
         // format as AM/PM 12-hour time
-        item.label(id!(profile.timestamp)).set_text(
-            &format!("{}", dt.time().format("%l:%M %P"))
-        );
-        item.label(id!(profile.datestamp)).set_text(
-            &format!("{}", dt.date_naive())
-        );
+        item.label(id!(profile.timestamp))
+            .set_text(&format!("{}", dt.time().format("%l:%M %P")));
+        item.label(id!(profile.datestamp))
+            .set_text(&format!("{}", dt.date_naive()));
     } else {
-        item.label(id!(profile.timestamp)).set_text(
-            &format!("{}", ts_millis.get())
-        );
+        item.label(id!(profile.timestamp))
+            .set_text(&format!("{}", ts_millis.get()));
     }
 
-    (item, new_drawn_status)
-} 
+    // Check if the message is a reply and show reply preview
+    if let Some(in_reply_to_details) = message.in_reply_to() {
+        let reply_preview_view = item.view(id!(reply_preview));
+        reply_preview_view.set_visible(true);
+
+        match &in_reply_to_details.event {
+            TimelineDetails::Ready(details) => {
+                let in_reply_to_body = match details.as_ref().content() {
+                    TimelineItemContent::Message(m) => m.body(),
+                    // TODO: Handle rest of the types of content
+                    _ => "",
+                };
+
+                let (in_reply_to_username, _) = set_avatar_and_get_username(
+                    cx,
+                    reply_preview_view.avatar(id!(avatar)),
+                    room_id,
+                    details.sender_profile(),
+                    details.sender(),
+                );
+
+                reply_preview_view
+                    .label(id!(username))
+                    .set_text(in_reply_to_username.as_str());
+                reply_preview_view
+                    .html_or_plaintext(id!(body))
+                    .show_html(in_reply_to_body);
+            }
+            _ => {}
+        }
+    }
 
+    // TODO: This feels weird to do here, but the message widget needs to keep the
+    // id for sending events. and whether it can be replyed or not. Maybe handle this better.
+    item.as_message()
+        .set_data(event_tl_item.can_be_replied_to(), item_id);
 
+    (item, new_drawn_status)
+}
 
-fn draw_reactions(_cx: &mut Cx2d, message_item: &WidgetRef, reactions: &ReactionsByKeyBySender, id: usize) {
+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 menu is invisible by default, so we must set it to visible
+
+    // 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_menu)).set_visible(true);
+    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)
+        let text_to_display = emojis::get(reaction_str)
             .and_then(|e| e.shortcode())
-            .unwrap_or(&reaction_raw);
+            .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);
@@ -1394,12 +1766,10 @@ fn draw_reactions(_cx: &mut Cx2d, message_item: &WidgetRef, reactions: &Reaction
         label_text = format!("{label_text}<i>ID: {}</i>", id);
     }
 
-    let html_reaction_view = message_item.html(id!(annotations));
+    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 {
@@ -1519,7 +1889,7 @@ impl SmallStateEventContent for timeline::OtherState {
             }
             AnyOtherFullStateEventContent::RoomCanonicalAlias(FullStateEventContent::Original { content, .. }) => {
                 Some(format!("set the main address of this room to {}.",
-                    content.alias.as_ref().map(|a| a.as_str()).unwrap_or("none")
+                content.alias.as_ref().map(|a| a.as_str()).unwrap_or("none")
                 ))
             }
             AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { content, .. }) => {
@@ -1527,10 +1897,10 @@ impl SmallStateEventContent for timeline::OtherState {
             }
             AnyOtherFullStateEventContent::RoomGuestAccess(FullStateEventContent::Original { content, .. }) => {
                 Some(match content.guest_access {
-                    GuestAccess::CanJoin => format!("has allowed guests to join this room."),
+                GuestAccess::CanJoin => format!("has allowed guests to join this room."),
                     GuestAccess::Forbidden | _ => format!("has forbidden guests from joining this room."),
                 })
-            }
+                }
             AnyOtherFullStateEventContent::RoomHistoryVisibility(FullStateEventContent::Original { content, .. }) => {
                 let visibility = match content.history_visibility {
                     HistoryVisibility::Invited => "invited users, since they were invited.",
@@ -1542,12 +1912,12 @@ impl SmallStateEventContent for timeline::OtherState {
             }
             AnyOtherFullStateEventContent::RoomJoinRules(FullStateEventContent::Original { content, .. }) => {
                 Some(match content.join_rule {
-                    JoinRule::Public => format!("set this room to be joinable by anyone."),
+                JoinRule::Public => format!("set this room to be joinable by anyone."),
                     JoinRule::Knock => format!("set this room to be joinable by invite only or by request."),
-                    JoinRule::Private => format!("set this room to be private."),
+                JoinRule::Private => format!("set this room to be private."),
                     JoinRule::Restricted(_) => format!("set this room to be joinable by invite only or with restrictions."),
                     JoinRule::KnockRestricted(_) => format!("set this room to be joinable by invite only or requestable with restrictions."),
-                    JoinRule::Invite | _ => format!("set this room to be joinable by invite only."),
+                JoinRule::Invite | _ => format!("set this room to be joinable by invite only."),
                 })
             }
             AnyOtherFullStateEventContent::RoomName(FullStateEventContent::Original { content, .. }) => {
@@ -1697,7 +2067,7 @@ fn populate_small_state_event(
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
     let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent)).unwrap();
-    
+
     // The content of a small state event view may depend on the profile info,
     // so we can only mark the content as drawn after the profile has been fully drawn and cached.
     let skip_redrawing_profile = existed && item_drawn_status.profile_drawn;
@@ -1712,17 +2082,22 @@ fn populate_small_state_event(
     let username_opt = skip_redrawing_profile
         .then(|| get_profile_display_name(event_tl_item))
         .flatten();
-    
+
     let username = username_opt.unwrap_or_else(|| {
         // As a fallback, call `set_avatar_and_get_username` to get the user's display name.
         let (username, profile_drawn) = set_avatar_and_get_username(
             cx,
             item.avatar(id!(avatar)),
             room_id,
-            event_tl_item,
+            event_tl_item.sender_profile(),
+            event_tl_item.sender(),
         );
         // Draw the timestamp as part of the profile.
-        set_timestamp(&item, id!(left_container.timestamp), event_tl_item.timestamp());
+        set_timestamp(
+            &item,
+            id!(left_container.timestamp),
+            event_tl_item.timestamp(),
+        );
         new_drawn_status.profile_drawn = profile_drawn;
         username
     });
@@ -1784,19 +2159,22 @@ fn set_avatar_and_get_username(
     cx: &mut Cx,
     avatar: AvatarRef,
     room_id: &RoomId,
-    event_tl_item: &EventTimelineItem,
+    sender_profile: &TimelineDetails<Profile>,
+    user_id: &UserId,
 ) -> (String, bool) {
     let username: String;
     let mut profile_drawn = false;
 
-    let user_id = event_tl_item.sender();
-
     // Set sender to the display name if available, otherwise the user id.
-    match event_tl_item.sender_profile() {
+    match sender_profile {
         TimelineDetails::Ready(profile) => {
             // Set the sender's avatar image, or use a text character if no image is available.
             let avatar_img = match profile.avatar_url.as_ref() {
-                Some(uri) => match AVATAR_CACHE.lock().unwrap().try_get_media_or_fetch(uri.clone(), None) {
+                Some(uri) => match AVATAR_CACHE
+                    .lock()
+                    .unwrap()
+                    .try_get_media_or_fetch(uri.clone(), None)
+                {
                     MediaCacheEntry::Loaded(data) => {
                         profile_drawn = true;
                         Some(data)
@@ -1806,25 +2184,34 @@ fn set_avatar_and_get_username(
                         None
                     }
                     MediaCacheEntry::Requested => None,
-                }
+                },
                 None => {
                     profile_drawn = true;
                     None
                 }
             };
-            
+
             // Set the username to the display name if available, otherwise the user ID after the '@'.
             let username_opt = profile.display_name.clone();
             username = username_opt.clone().unwrap_or_else(|| user_id.to_string());
 
             // Draw the avatar image if available, otherwise set the avatar to text.
-            let drew_avatar_img = avatar_img.map(|data|
-                avatar.show_image(
-                    Some((user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone())),
-                    |img| utils::load_png_or_jpg(&img, cx, &data)
-                ).is_ok()
-            ).unwrap_or(false);
-            
+            let drew_avatar_img = avatar_img
+                .map(|data| {
+                    avatar
+                        .show_image(
+                            Some((
+                                user_id.to_owned(),
+                                username_opt.clone(),
+                                room_id.to_owned(),
+                                data.clone(),
+                            )),
+                            |img| utils::load_png_or_jpg(&img, cx, &data),
+                        )
+                        .is_ok()
+                })
+                .unwrap_or(false);
+
             if !drew_avatar_img {
                 avatar.show_text(
                     Some((user_id.to_owned(), username_opt, room_id.to_owned())),
@@ -1838,7 +2225,7 @@ fn set_avatar_and_get_username(
             // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
             username = user_id.to_string();
             avatar.show_text(
-                    Some((user_id.to_owned(), None, room_id.to_owned())),
+                Some((user_id.to_owned(), None, room_id.to_owned())),
                 &username,
             );
             // If there was an error fetching the profile, treat that condition as fully drawn,
@@ -1858,3 +2245,106 @@ fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String>
         None
     }
 }
+
+#[derive(Clone, DefaultNone, Debug)]
+pub enum MessageAction {
+    MessageReply(usize),
+    ReplyPreviewClicked(usize),
+    None,
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct Message {
+    #[deref]
+    view: View,
+    #[rust(false)]
+    hovered: bool,
+    #[rust]
+    can_be_replied_to: bool,
+    #[rust]
+    item_id: usize,
+}
+
+impl Widget for Message {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+
+        if let Event::Actions(actions) = event {
+            if self.view.button(id!(reply_button)).clicked(actions) {
+                cx.widget_action(
+                    widget_uid,
+                    &scope.path,
+                    MessageAction::MessageReply(self.item_id),
+                );
+            }
+        }
+
+        if let Hit::FingerUp(fe) = event.hits(cx, self.view(id!(reply_preview)).area()) {
+            if fe.was_tap() {
+                cx.widget_action(
+                    widget_uid,
+                    &scope.path,
+                    MessageAction::ReplyPreviewClicked(self.item_id),
+                );
+            }
+        }
+
+        if let Event::MouseMove(e) = event {
+            let hovered = self.view.area().rect(cx).contains(e.abs);
+            if self.hovered != hovered {
+                self.hovered = hovered;
+
+                // TODO: Once we have a context menu, the messageMenu can be displayed on hover or push only
+                // self.view.view(id!(message_menu)).set_visible(hovered);
+
+                self.redraw(cx);
+            }
+        }
+
+        self.view.handle_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        // TODO: need vecs for apply_over(), maybe use an animator so we just set the state here
+        // and the animator handles the color changes from inside the dsl.
+        let default_color = vec3(1.0, 1.0, 1.0); // #ffffff
+        let hover_color = vec3(0.929, 0.929, 0.929); // #ededed
+
+        let bg_color = if self.hovered {
+            hover_color
+        } else {
+            default_color
+        };
+
+        self.view.apply_over(
+            cx,
+            live! {
+                show_bg: true,
+                draw_bg: {color: (bg_color)}
+
+            },
+        );
+
+        self.view
+            .button(id!(reply_button))
+            .set_visible(self.can_be_replied_to);
+
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl Message {
+    fn set_data(&mut self, can_be_replied_to: bool, item_id: usize) {
+        self.can_be_replied_to = can_be_replied_to;
+        self.item_id = item_id;
+    }
+}
+
+impl MessageRef {
+    fn set_data(&mut self, can_be_replied_to: bool, item_id: usize) {
+        let Some(mut inner) = self.borrow_mut() else {
+            return;
+        };
+        inner.set_data(can_be_replied_to, item_id);
+    }
+}
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 2a69c928..ed50a005 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -39,6 +39,8 @@ live_design! {
         line_spacing: (MESSAGE_TEXT_LINE_SPACING),
     }
 
+    MESSAGE_REPLY_PREVIEW_FONT_SIZE = 9.5
+
     SMALL_STATE_FONT_SIZE = 9.5
     SMALL_STATE_TEXT_COLOR = #x999
     SMALL_STATE_TEXT_STYLE = {
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 34d87a05..7c103f40 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -6,10 +6,10 @@ use imbl::Vector;
 use makepad_widgets::{error, log, SignalToUI};
 use matrix_sdk::{
     config::RequestConfig, media::MediaRequest, room::RoomMember, ruma::{
-        api::client::session::get_login_types::v3::LoginType, assign, events::{room::message::RoomMessageEventContent, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
+        api::client::session::get_login_types::v3::LoginType, assign, events::{room::message::{ForwardThread, RoomMessageEventContent}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
     }, sliding_sync::http::request::{AccountData, ListFilters, ToDevice, E2EE}, Client, Room, SlidingSyncList, SlidingSyncMode
 };
-use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, TimelineItem, TimelineItemContent}, Timeline};
+use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, RepliedToInfo, TimelineItem, TimelineItemContent}, Timeline};
 use tokio::{
     runtime::Handle,
     sync::mpsc::{UnboundedSender, UnboundedReceiver}, task::JoinHandle,
@@ -165,6 +165,7 @@ pub enum MatrixRequest {
     SendMessage {
         room_id: OwnedRoomId,
         message: RoomMessageEventContent,
+	replied_to: Option<RepliedToInfo>
     },
     /// Sends a notice to the given room that the current user is or is not typing.
     ///
@@ -439,7 +440,7 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 });
             }
 
-            MatrixRequest::SendMessage { room_id, message } => {
+            MatrixRequest::SendMessage { room_id, message, replied_to } => {
                 let timeline = {
                     let all_room_info = ALL_ROOM_INFO.lock().unwrap();
                     let Some(room_info) = all_room_info.get(&room_id) else {
@@ -453,10 +454,20 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 // Spawn a new async task that will send the actual message.
                 let _send_message_task = Handle::current().spawn(async move {
                     log!("Sending message to room {room_id}: {message:?}...");
-                    match timeline.send(message.into()).await {
-                        Ok(_send_handle) => log!("Sent message to room {room_id}."),
-                        Err(_e) => error!("Failed to send message to room {room_id}: {_e:?}"),
-                    }
+		    match replied_to {
+			Some(replied_to_info) => {
+			    match timeline.send_reply(message.into(), replied_to_info, ForwardThread::Yes).await {
+				Ok(_send_handle) => log!("Sent reply message to room {room_id}."),
+				Err(_e) => error!("Failed to send reply message to room {room_id}: {_e:?}"),
+			    };
+			}
+			None => {
+			    match timeline.send(message.into()).await {
+				Ok(_send_handle) => log!("Sent message to room {room_id}."),
+				Err(_e) => error!("Failed to send message to room {room_id}: {_e:?}"),
+			    }
+			}
+		    }
                     SignalToUI::set_ui_signal();
                 });
             }

From 06f6228150a8d1449c6db672206fedbbb17bcade Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Thu, 22 Aug 2024 13:19:12 -0700
Subject: [PATCH 2/5] Cleanup formatting issues, fix reply button styling, plus
 new icon

---
 resources/icon_reply.svg  |   7 --
 resources/icons/reply.svg |   7 ++
 src/home/room_screen.rs   | 132 ++++++++++++++++++--------------------
 src/sliding_sync.rs       |  28 ++++----
 4 files changed, 83 insertions(+), 91 deletions(-)
 delete mode 100644 resources/icon_reply.svg
 create mode 100644 resources/icons/reply.svg

diff --git a/resources/icon_reply.svg b/resources/icon_reply.svg
deleted file mode 100644
index d1f3c121..00000000
--- a/resources/icon_reply.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 19 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g transform="matrix(-1,0,0,1,18.9721,0)">
-        <path d="M18.666,6.426C19.074,6.797 19.074,7.428 18.666,7.799L12.135,13.44C11.578,13.922 10.688,13.514 10.688,12.734L10.688,9.506C4.898,9.58 2.449,10.99 4.119,16.371C4.305,16.965 3.563,17.447 3.08,17.076C1.447,15.889 0,13.625 0,11.361C0,5.721 4.713,4.496 10.688,4.459L10.688,1.49C10.688,0.711 11.578,0.303 12.135,0.785L18.666,6.426Z" style="fill-rule:nonzero;"/>
-    </g>
-</svg>
diff --git a/resources/icons/reply.svg b/resources/icons/reply.svg
new file mode 100644
index 00000000..382b73af
--- /dev/null
+++ b/resources/icons/reply.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path d="M185.2,128.6V19.7L0,204.9l185.2,185.2V281.1c152.5,0,250.5,0,326.8,217.9C512,390.1,522.9,128.6,185.2,128.6z"/>
+</svg>
\ No newline at end of file
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 63a12008..4b93f353 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -18,7 +18,7 @@ use matrix_sdk::{
                 history_visibility::HistoryVisibility,
                 join_rules::JoinRule,
                 message::{
-                    sanitize::remove_plain_reply_fallback, MessageFormat, MessageType,
+                    MessageFormat, MessageType,
                     RoomMessageEventContent,
                 },
                 MediaSource,
@@ -33,7 +33,7 @@ use matrix_sdk::{
 };
 use matrix_sdk_ui::timeline::{
     self, AnyOtherFullStateEventContent, EventTimelineItem, MemberProfileChange, MembershipChange,
-    Profile, ReactionsByKeyBySender, RepliedToInfo, ReplyContent, RoomMembershipChange,
+    Profile, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange,
     TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem,
 };
 
@@ -71,14 +71,12 @@ live_design! {
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
     ICO_COMMENT = dep("crate://self/resources/icon_comment.svg")
-    ICO_REPLY = dep("crate://self/resources/icon_reply.svg")
+    ICO_REPLY = dep("crate://self/resources/icons/reply.svg")
     ICO_SEND = dep("crate://self/resources/icon_send.svg")
     ICO_LIKES = dep("crate://self/resources/icon_likes.svg")
     ICO_USER = dep("crate://self/resources/icon_user.svg")
     ICO_ADD = dep("crate://self/resources/icon_add.svg")
     ICO_CLOSE = dep("crate://self/resources/icons/close.svg")
-    // TODO: Maybe replace with a specific reply icon.
-    ICO_REPLY = dep("crate://self/resources/icons/go_back.svg")
 
     TEXT_SUB = {
         font_size: (10),
@@ -161,6 +159,7 @@ live_design! {
 
     REACTION_TEXT_COLOR = #4c00b0
 
+    // The optional view that shows which message is being replied to.
     ReplyingPreview = <View> {
         visible: false
         width: Fill
@@ -179,7 +178,7 @@ live_design! {
                     text_style: <TEXT_SUB> {},
                     color: (COLOR_META)
                 }
-                text: "Replying"
+                text: "Replying to:"
             }
 
             filler = <View> {width: Fill, height: Fill}
@@ -278,7 +277,7 @@ live_design! {
         visible: true,
         width: Fit,
         height: Fit,
-        align: {x: 1, y: 1}
+        align: {x: 1, y: 0}
 
         draw_bg: {
             border_width: 0.0,
@@ -286,7 +285,6 @@ live_design! {
             radius: 2
         }
 
-        // TODO: Fix styles
         reply_button = <IconButton> {
             visible: false
             width: Fit,
@@ -295,10 +293,11 @@ live_design! {
             draw_icon: {
                 svg_file: (ICO_REPLY),
             }
-            icon_walk: {width: 12, height: 12}
+            icon_walk: {width: 15, height: 15, margin: {top: 4.0}}
         }
     }
 
+    // An optional view used to show reactions beneath a message.
     MessageAnnotations = <View> {
         visible: false,
         width: Fill,
@@ -330,7 +329,7 @@ live_design! {
         padding: 0.0,
         spacing: 0.0
 
-        // Only shown when the message is replying to another one
+        // Only shown when the user is drafting a reply to another message.
         reply_preview = <ReplyingPreview> {
             flow: Right
             cursor: Hand
@@ -627,7 +626,7 @@ live_design! {
                 // First, display the timeline of all messages/events.
                 timeline = <Timeline> {}
 
-                // Below that, display a view that holds the message input bar.
+                // Below that, display the optional view that shows which message is being replied to.
                 replying_preview = <ReplyingPreview> {
                     flow: Down
                     content = {
@@ -637,6 +636,7 @@ live_design! {
                     }
                 }
 
+                // Below that, display a view that holds the message input bar.
                 <View> {
                     width: Fill, height: Fit
                     flow: Right, align: {y: 1.0}, padding: 10.
@@ -645,7 +645,6 @@ live_design! {
                         color: #fff
                     }
 
-
                     message_input = <TextInput> {
                         width: Fill, height: Fit, margin: 0
                         align: {y: 0.5}
@@ -795,7 +794,7 @@ impl Widget for RoomScreen {
                                     .chars()
                                     .take(MAX_REPLYING_PREVIEW_BODY_LENGTH - 1)
                                     .collect();
-                                &(truncated + "…")
+                                &(truncated + "...")
                             } else {
                                 message.body()
                             };
@@ -1110,23 +1109,23 @@ impl Timeline {
         );
 
         let (tl_state, first_time_showing_room) = if let Some(existing) = TIMELINE_STATES.lock().unwrap().remove(&room_id) {
-                (existing, false)
-            } else {
-                let (update_sender, update_receiver) = take_timeline_update_receiver(&room_id)
-                    .expect("BUG: couldn't get timeline state for first-viewed room.");
-                let new_tl_state = TimelineUiState {
-                    room_id: room_id.clone(),
-                    // We assume timelines being viewed for the first time haven't been fully paginated.
-                    fully_paginated: false,
-                    items: Vector::new(),
-                    content_drawn_since_last_update: RangeSet::new(),
-                    profile_drawn_since_last_update: RangeSet::new(),
-                    update_receiver,
-                    media_cache: MediaCache::new(MediaFormatConst::File, Some(update_sender)),
-                    saved_state: SavedState::default(),
-                };
-                (new_tl_state, true)
+            (existing, false)
+        } else {
+            let (update_sender, update_receiver) = take_timeline_update_receiver(&room_id)
+                .expect("BUG: couldn't get timeline state for first-viewed room.");
+            let new_tl_state = TimelineUiState {
+                room_id: room_id.clone(),
+                // We assume timelines being viewed for the first time haven't been fully paginated.
+                fully_paginated: false,
+                items: Vector::new(),
+                content_drawn_since_last_update: RangeSet::new(),
+                profile_drawn_since_last_update: RangeSet::new(),
+                update_receiver,
+                media_cache: MediaCache::new(MediaFormatConst::File, Some(update_sender)),
+                saved_state: SavedState::default(),
             };
+            (new_tl_state, true)
+        };
 
         // log!("Timeline::set_room(): opening room {room_id}
         //     content_drawn_since_last_update: {:#?}
@@ -1278,7 +1277,7 @@ impl Widget for Timeline {
                                             });
                                         if let Some(index) = message_replied_to_tl_index {
                                             portal_list.set_first_id(index);
-					    self.redraw(cx);
+                                            self.redraw(cx);
                                         }
                                     }
                                 }
@@ -1434,22 +1433,22 @@ impl Widget for Timeline {
                                 item_drawn_status,
                             ),
                             TimelineItemContent::MembershipChange(membership_change) => populate_small_state_event(
-                                    cx,
-                                    list,
-                                    item_id,
-                                    room_id,
-                                    event_tl_item,
-                                    membership_change,
-                                    item_drawn_status,
+                                cx,
+                                list,
+                                item_id,
+                                room_id,
+                                event_tl_item,
+                                membership_change,
+                                item_drawn_status,
                             ),
                             TimelineItemContent::ProfileChange(profile_change) => populate_small_state_event(
-                                    cx,
-                                    list,
-                                    item_id,
-                                    room_id,
-                                    event_tl_item,
-                                    profile_change,
-                                    item_drawn_status,
+                                cx,
+                                list,
+                                item_id,
+                                room_id,
+                                event_tl_item,
+                                profile_change,
+                                item_drawn_status,
                             ),
                             TimelineItemContent::OtherState(other) => populate_small_state_event(
                                 cx,
@@ -1691,7 +1690,7 @@ fn populate_message_view(
             .set_text(&format!("{}", ts_millis.get()));
     }
 
-    // Check if the message is a reply and show reply preview
+    // If this message was "in reply to" another message, show a preview of the replied-to message
     if let Some(in_reply_to_details) = message.in_reply_to() {
         let reply_preview_view = item.view(id!(reply_preview));
         reply_preview_view.set_visible(true);
@@ -1699,6 +1698,7 @@ fn populate_message_view(
         match &in_reply_to_details.event {
             TimelineDetails::Ready(details) => {
                 let in_reply_to_body = match details.as_ref().content() {
+                    // TODO: use existing message display logic for this reply preview
                     TimelineItemContent::Message(m) => m.body(),
                     // TODO: Handle rest of the types of content
                     _ => "",
@@ -1724,7 +1724,7 @@ fn populate_message_view(
     }
 
     // TODO: This feels weird to do here, but the message widget needs to keep the
-    // id for sending events. and whether it can be replyed or not. Maybe handle this better.
+    // id for sending events. and whether it can be replied to or not. Maybe handle this better.
     item.as_message()
         .set_data(event_tl_item.can_be_replied_to(), item_id);
 
@@ -1889,7 +1889,7 @@ impl SmallStateEventContent for timeline::OtherState {
             }
             AnyOtherFullStateEventContent::RoomCanonicalAlias(FullStateEventContent::Original { content, .. }) => {
                 Some(format!("set the main address of this room to {}.",
-                content.alias.as_ref().map(|a| a.as_str()).unwrap_or("none")
+                    content.alias.as_ref().map(|a| a.as_str()).unwrap_or("none")
                 ))
             }
             AnyOtherFullStateEventContent::RoomCreate(FullStateEventContent::Original { content, .. }) => {
@@ -1897,10 +1897,10 @@ impl SmallStateEventContent for timeline::OtherState {
             }
             AnyOtherFullStateEventContent::RoomGuestAccess(FullStateEventContent::Original { content, .. }) => {
                 Some(match content.guest_access {
-                GuestAccess::CanJoin => format!("has allowed guests to join this room."),
+                    GuestAccess::CanJoin => format!("has allowed guests to join this room."),
                     GuestAccess::Forbidden | _ => format!("has forbidden guests from joining this room."),
                 })
-                }
+            }
             AnyOtherFullStateEventContent::RoomHistoryVisibility(FullStateEventContent::Original { content, .. }) => {
                 let visibility = match content.history_visibility {
                     HistoryVisibility::Invited => "invited users, since they were invited.",
@@ -1912,12 +1912,12 @@ impl SmallStateEventContent for timeline::OtherState {
             }
             AnyOtherFullStateEventContent::RoomJoinRules(FullStateEventContent::Original { content, .. }) => {
                 Some(match content.join_rule {
-                JoinRule::Public => format!("set this room to be joinable by anyone."),
+                    JoinRule::Public => format!("set this room to be joinable by anyone."),
                     JoinRule::Knock => format!("set this room to be joinable by invite only or by request."),
-                JoinRule::Private => format!("set this room to be private."),
+                    JoinRule::Private => format!("set this room to be private."),
                     JoinRule::Restricted(_) => format!("set this room to be joinable by invite only or with restrictions."),
                     JoinRule::KnockRestricted(_) => format!("set this room to be joinable by invite only or requestable with restrictions."),
-                JoinRule::Invite | _ => format!("set this room to be joinable by invite only."),
+                    JoinRule::Invite | _ => format!("set this room to be joinable by invite only."),
                 })
             }
             AnyOtherFullStateEventContent::RoomName(FullStateEventContent::Original { content, .. }) => {
@@ -2196,21 +2196,18 @@ fn set_avatar_and_get_username(
             username = username_opt.clone().unwrap_or_else(|| user_id.to_string());
 
             // Draw the avatar image if available, otherwise set the avatar to text.
-            let drew_avatar_img = avatar_img
-                .map(|data| {
-                    avatar
-                        .show_image(
-                            Some((
-                                user_id.to_owned(),
-                                username_opt.clone(),
-                                room_id.to_owned(),
-                                data.clone(),
-                            )),
-                            |img| utils::load_png_or_jpg(&img, cx, &data),
-                        )
-                        .is_ok()
-                })
-                .unwrap_or(false);
+            let drew_avatar_img = avatar_img.map(|data| {
+                avatar.show_image(
+                    Some((
+                        user_id.to_owned(),
+                        username_opt.clone(),
+                        room_id.to_owned(),
+                        data.clone(),
+                    )),
+                    |img| utils::load_png_or_jpg(&img, cx, &data),
+                ).is_ok()
+            })
+            .unwrap_or(false);
 
             if !drew_avatar_img {
                 avatar.show_text(
@@ -2321,7 +2318,6 @@ impl Widget for Message {
             live! {
                 show_bg: true,
                 draw_bg: {color: (bg_color)}
-
             },
         );
 
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 7c103f40..40e90bf5 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -165,7 +165,7 @@ pub enum MatrixRequest {
     SendMessage {
         room_id: OwnedRoomId,
         message: RoomMessageEventContent,
-	replied_to: Option<RepliedToInfo>
+        replied_to: Option<RepliedToInfo>,
     },
     /// Sends a notice to the given room that the current user is or is not typing.
     ///
@@ -447,27 +447,23 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                         log!("BUG: room info not found for send message request {room_id}");
                         continue;
                     };
-
                     room_info.timeline.clone()
                 };
 
                 // Spawn a new async task that will send the actual message.
                 let _send_message_task = Handle::current().spawn(async move {
                     log!("Sending message to room {room_id}: {message:?}...");
-		    match replied_to {
-			Some(replied_to_info) => {
-			    match timeline.send_reply(message.into(), replied_to_info, ForwardThread::Yes).await {
-				Ok(_send_handle) => log!("Sent reply message to room {room_id}."),
-				Err(_e) => error!("Failed to send reply message to room {room_id}: {_e:?}"),
-			    };
-			}
-			None => {
-			    match timeline.send(message.into()).await {
-				Ok(_send_handle) => log!("Sent message to room {room_id}."),
-				Err(_e) => error!("Failed to send message to room {room_id}: {_e:?}"),
-			    }
-			}
-		    }
+                    if let Some(replied_to_info) = replied_to {
+                        match timeline.send_reply(message.into(), replied_to_info, ForwardThread::Yes).await {
+                            Ok(_send_handle) => log!("Sent reply message to room {room_id}."),
+                            Err(_e) => error!("Failed to send reply message to room {room_id}: {_e:?}"),
+                        }
+                    } else {
+                        match timeline.send(message.into()).await {
+                            Ok(_send_handle) => log!("Sent message to room {room_id}."),
+                            Err(_e) => error!("Failed to send message to room {room_id}: {_e:?}"),
+                        }
+                    }
                     SignalToUI::set_ui_signal();
                 });
             }

From 96758a3396178c1b3d3473ff9dc6c58f947d61e2 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Thu, 22 Aug 2024 17:08:46 -0700
Subject: [PATCH 3/5] rename `ReplyingPreview` --> `ReplyPreview`, add docs.
 Fix avatar font size in `ReplyPreview`

---
 src/home/room_screen.rs | 28 +++++++++++++++++-----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index ba085870..1dfb2c2d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -129,21 +129,24 @@ live_design! {
 
     REACTION_TEXT_COLOR = #4c00b0
 
-    // The optional view that shows which message is being replied to.
-    ReplyingPreview = <View> {
+    // A preview of a message that is being replied to.
+    ReplyPreview = <View> {
         visible: false
         width: Fill
         height: Fit
         flow: Down
         padding: {top: 0.0, right: 12.0, bottom: 0.0, left: 12.0}
 
+        // A subview that is only shown when a `ReplyPreview` is re-used
+        // at the bottom of the RoomScreen (above the message input box)
+        // to show which message a user is currently drafting a reply to.
         header_wrapper = <View> {
             width: Fill
             height: Fit
             flow: Right
             align: {y: 0.5}
 
-            header = <Label> {
+            <Label> {
                 draw_text: {
                     text_style: <TEXT_SUB> {},
                     color: (COLOR_META)
@@ -166,7 +169,6 @@ live_design! {
                 }
                 icon_walk: {width: 12, height: 12}
             }
-
         }
 
         content = <View> {
@@ -217,8 +219,11 @@ live_design! {
                 align: {y: 0.5}
 
                 avatar = <Avatar> {
-                    width: 20.,
-                    height: 20.
+                    width: 19.,
+                    height: 19.,
+                    text_view = { text = { draw_text: {
+                        text_style: { font_size: 7.0 }
+                    }}}
                 }
 
                 username = <Label> {
@@ -299,12 +304,13 @@ live_design! {
         padding: 0.0,
         spacing: 0.0
 
-        // Only shown when the user is drafting a reply to another message.
-        reply_preview = <ReplyingPreview> {
+        // Only shown when this Message was in reply to another message.
+        reply_preview = <ReplyPreview> {
             flow: Right
             cursor: Hand
             margin: { bottom: 10 }
-            header_wrapper = <View> {
+            header_wrapper = {
+                // TODO: use `visible: false,` instead of `width: 0`
                 width: 0
             }
             content = {
@@ -469,7 +475,7 @@ live_design! {
                 height: 19.,
 
                 text_view = { text = { draw_text: {
-                    text_style: <TITLE_TEXT>{ font_size: 7. }
+                    text_style: <TITLE_TEXT>{ font_size: 7.0 }
                 }}}
             }
 
@@ -625,7 +631,7 @@ live_design! {
                 timeline = <Timeline> {}
 
                 // Below that, display the optional view that shows which message is being replied to.
-                replying_preview = <ReplyingPreview> {
+                replying_preview = <ReplyPreview> {
                     flow: Down
                     content = {
                         draw_bg: {

From 923eb39757232e204fa18b5a5df405caac994d6a Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 23 Aug 2024 13:37:34 -0700
Subject: [PATCH 4/5] fix the issue of message profiles/avatars not being
 properly written

There is a "bug" (maybe a bug) in Makepad where if you give multiple
DSL elements the same identifier name, then the widget reference you get
when querying it with `id!(...)` may be for a different widget
than the one you expect.

This commit renames the subwidgets of `ReplyPreview` in the DSL
in order to ensure they do not overlay with the same elements
that are part of a `Message` itself.

It also completely restructures the drawing logic for ReplyPreviews
to be done in a separate function and then to be called in the correct
place, i.e., when the item has not been cached.

The "fully-drawn" status of a Message's ReplyPreview is now factored in
to the conditional that determines whether a given message is
considered to be fully drawn (for the purpose of caching).
---
 src/home/room_screen.rs | 159 +++++++++++++++++++++++++++++-----------
 1 file changed, 115 insertions(+), 44 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 1dfb2c2d..e453789e 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -140,7 +140,7 @@ live_design! {
         // A subview that is only shown when a `ReplyPreview` is re-used
         // at the bottom of the RoomScreen (above the message input box)
         // to show which message a user is currently drafting a reply to.
-        header_wrapper = <View> {
+        reply_preview_header = <View> {
             width: Fill
             height: Fit
             flow: Right
@@ -171,7 +171,7 @@ live_design! {
             }
         }
 
-        content = <View> {
+        reply_preview_content = <View> {
             width: Fill
             height: Fit
             flow: Down
@@ -218,7 +218,7 @@ live_design! {
                 margin: { bottom: 10.0, top: 0.0, right: 5.0 }
                 align: {y: 0.5}
 
-                avatar = <Avatar> {
+                reply_preview_avatar = <Avatar> {
                     width: 19.,
                     height: 19.,
                     text_view = { text = { draw_text: {
@@ -226,7 +226,7 @@ live_design! {
                     }}}
                 }
 
-                username = <Label> {
+                reply_preview_username = <Label> {
                     width: Fill,
                     margin: { left: 5.0 }
                     draw_text: {
@@ -238,7 +238,7 @@ live_design! {
                 }
             }
 
-            body = <HtmlOrPlaintext> {
+            reply_preview_body = <HtmlOrPlaintext> {
                 html_view = {
                     html = {
                         font_size: (MESSAGE_REPLY_PREVIEW_FONT_SIZE)
@@ -248,6 +248,8 @@ live_design! {
         }
     }
 
+    // A view that shows action buttons for a message,
+    // with buttons for sending a reply (and in the future, reactions).
     MessageMenu = <RoundedView> {
         visible: true,
         width: Fit,
@@ -309,11 +311,11 @@ live_design! {
             flow: Right
             cursor: Hand
             margin: { bottom: 10 }
-            header_wrapper = {
+            reply_preview_header = {
                 // TODO: use `visible: false,` instead of `width: 0`
                 width: 0
             }
-            content = {
+            reply_preview_content = {
                 margin: { left: 10 }
             }
         }
@@ -633,7 +635,7 @@ live_design! {
                 // Below that, display the optional view that shows which message is being replied to.
                 replying_preview = <ReplyPreview> {
                     flow: Down
-                    content = {
+                    reply_preview_content = {
                         draw_bg: {
                             vertical_bar_width: 0.0
                         }
@@ -779,19 +781,19 @@ impl Widget for RoomScreen {
                         if let Some(room_id) = &self.room_id {
                             let (replying_preview_username, _) = set_avatar_and_get_username(
                                 cx,
-                                replying_preview_view.avatar(id!(avatar)),
+                                replying_preview_view.avatar(id!(reply_preview_avatar)),
                                 room_id.as_ref(),
                                 message_to_reply.sender_profile(),
                                 message_to_reply.sender(),
                             );
 
                             replying_preview_view
-                                .label(id!(username))
+                                .label(id!(reply_preview_username))
                                 .set_text(replying_preview_username.as_str());
                         }
 
                         const MAX_REPLYING_PREVIEW_BODY_LENGTH: usize = 100;
-                        let replying_preview_body =
+                        let body_of_reply_preview =
                             if message.body().chars().count() > MAX_REPLYING_PREVIEW_BODY_LENGTH {
                                 let truncated: String = message
                                     .body()
@@ -804,8 +806,8 @@ impl Widget for RoomScreen {
                             };
 
                         replying_preview_view
-                            .html_or_plaintext(id!(body))
-                            .show_html(replying_preview_body);
+                            .html_or_plaintext(id!(reply_preview_body))
+                            .show_html(body_of_reply_preview);
                     }
 
                     match message_to_reply.replied_to_info() {
@@ -1732,10 +1734,11 @@ fn populate_message_view(
                         Cow::Borrowed(plaintext)   => msg_body_field.show_plaintext(plaintext),
                     }
                 }
-                // Draw any reactions to the message.
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message);
                 draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
-                // We're done drawing the message content, so mark it as fully drawn.
-                new_drawn_status.content_drawn = true;
+                // 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;
                 (item, false)
             }
         }
@@ -1761,6 +1764,11 @@ fn populate_message_view(
                     (None, None, None)
                 };
                 let text_or_image_ref = item.text_or_image(id!(content.message));
+
+                // Draw the ReplyPreview and reactions, if any are present.
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message);
+                draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
+
                 match &image.source {
                     MediaSource::Plain(mxc_uri) => {
                         // now that we've obtained the image URI and its metadata, try to fetch the image.
@@ -1775,25 +1783,28 @@ fn populate_message_view(
                                     error!("{err_str}");
                                     text_or_image_ref.set_text(&err_str);
                                 }
-                                // Draw any reactions to the message.
-                                draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
-                                // The image content is completely drawn here, ready to be marked as cached/drawn.
-                                new_drawn_status.content_drawn = true;
+
+                                // We're done drawing the image 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;
                             }
                             MediaCacheEntry::Requested => {
                                 text_or_image_ref.set_text(&format!("Fetching image from {:?}", mxc_uri));
+                                // Do not consider this image as being fully drawn, as we're still fetching it.
                             }
                             MediaCacheEntry::Failed => {
                                 text_or_image_ref.set_text(&format!("Failed to fetch image from {:?}", mxc_uri));
                                 // For now, we consider this as being "complete". In the future, we could support
                                 // retrying to fetch the image on a user click/tap.
-                                new_drawn_status.content_drawn = true;
+                                new_drawn_status.content_drawn = is_reply_fully_drawn;
                             }
                         }
                     }
                     MediaSource::Encrypted(encrypted) => {
                         text_or_image_ref.set_text(&format!("[TODO] fetch encrypted image at {:?}", encrypted.url));
-                        new_drawn_status.content_drawn = true; // considered complete, since we don't yet support this.
+                        // We consider this as "fully drawn" since we don't yet support encryption,
+                        // but *only if* the reply preview was also fully drawn.
+                        new_drawn_status.content_drawn = is_reply_fully_drawn;
                     }
                 };
                 (item, false)
@@ -1806,7 +1817,10 @@ fn populate_message_view(
             } else {
                 let kind = other.msgtype();
                 item.label(id!(content.message)).set_text(&format!("[TODO {kind:?}] {}", other.body()));
-                new_drawn_status.content_drawn = true;
+                // Draw the ReplyPreview and reactions, if any are present.
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message);
+                draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
+                new_drawn_status.content_drawn = is_reply_fully_drawn;
                 (item, false)
             }
         }
@@ -1830,6 +1844,11 @@ fn populate_message_view(
         new_drawn_status.profile_drawn = profile_drawn;
     }
 
+    // TODO: This feels weird to do here, but the message widget needs to keep the
+    // id for sending events. and whether it can be replied to or not. Maybe handle this better.
+    item.as_message()
+        .set_data(event_tl_item.can_be_replied_to(), item_id);
+
     // If we've previously drawn the item content, skip redrawing the timestamp and annotations.
     if used_cached_item && item_drawn_status.content_drawn && item_drawn_status.profile_drawn {
         return (item, new_drawn_status);
@@ -1847,47 +1866,98 @@ fn populate_message_view(
             .set_text(&format!("{}", ts_millis.get()));
     }
 
-    // If this message was "in reply to" another message, show a preview of the replied-to message
-    if let Some(in_reply_to_details) = message.in_reply_to() {
-        let reply_preview_view = item.view(id!(reply_preview));
-        reply_preview_view.set_visible(true);
+    (item, new_drawn_status)
+}
+
+
+/// Draws a ReplyPreview above the given `message` if it was in-reply to another message.
+///
+/// If the given `message` was *not* in-reply to another message,
+/// this function will mark the ReplyPreview as non-visible and consider it fully drawn.
+///
+/// Returns whether the in-reply-to information was available and fully drawn,
+/// i.e., whether it can be considered as cached and not needing to be redrawn later.
+fn draw_replied_to_message(
+    cx: &mut Cx2d,
+    item: &WidgetRef,
+    room_id: &RoomId,
+    message: &timeline::Message,
+) -> bool {
+    let fully_drawn: bool;
+    let show_reply_preview: bool;
+    let reply_preview_view = item.view(id!(reply_preview));
 
+    if let Some(in_reply_to_details) = message.in_reply_to() {
+        show_reply_preview = true;
+        log!("Found replied-to message: {:?}", in_reply_to_details);
         match &in_reply_to_details.event {
             TimelineDetails::Ready(details) => {
-                let in_reply_to_body = match details.as_ref().content() {
+                log!("Found ready replied-to message: {:?}", details);
+                let in_reply_to_body: Cow<str> = match details.as_ref().content() {
                     // TODO: use existing message display logic for this reply preview
-                    TimelineItemContent::Message(m) => m.body(),
-                    // TODO: Handle rest of the types of content
-                    _ => "",
+                    TimelineItemContent::Message(m) => m.body().into(),
+                    TimelineItemContent::RedactedMessage => "[Message Redacted]".into(),
+                    TimelineItemContent::Sticker(sticker) => sticker.content().body.clone().into(),
+                    _other => format!("TODO: support reply previews for {:?}", _other).into(),
                 };
 
-                let (in_reply_to_username, _) = set_avatar_and_get_username(
+                let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
                     cx,
-                    reply_preview_view.avatar(id!(avatar)),
+                    reply_preview_view.avatar(id!(reply_preview_avatar)),
                     room_id,
                     details.sender_profile(),
                     details.sender(),
                 );
 
+                fully_drawn = is_avatar_fully_drawn;
+
                 reply_preview_view
-                    .label(id!(username))
+                    .label(id!(reply_preview_username))
                     .set_text(in_reply_to_username.as_str());
                 reply_preview_view
-                    .html_or_plaintext(id!(body))
-                    .show_html(in_reply_to_body);
+                    .html_or_plaintext(id!(reply_preview_body))
+                    .show_plaintext(in_reply_to_body);
+            }
+            TimelineDetails::Error(_e) => {
+                fully_drawn = true;
+                reply_preview_view
+                    .label(id!(reply_preview_username))
+                    .set_text("[Error fetching username]");
+                reply_preview_view
+                    .avatar(id!(reply_preview_avatar))
+                    .show_text(None, "?");
+                reply_preview_view
+                    .html_or_plaintext(id!(reply_preview_body))
+                    .show_plaintext("[Error fetching replied-to event]");
+            }
+            TimelineDetails::Pending | TimelineDetails::Unavailable => {
+                // We don't have the replied-to message yet, so we can't fully draw the preview.
+                fully_drawn = false;
+                reply_preview_view
+                    .label(id!(reply_preview_username))
+                    .set_text("[Loading username...]");
+                reply_preview_view
+                    .avatar(id!(reply_preview_avatar))
+                    .show_text(None, "?");
+                reply_preview_view
+                    .html_or_plaintext(id!(reply_preview_body))
+                    .show_plaintext("[Loading replied-to message...]");
+
+                // TODO here: if Unavailable, submit an async request for `Timeline::fetch_details_for_event`
             }
-            _ => {}
         }
+    } else {
+        // This message was not in reply to another message, so we don't need to show a reply preview.
+        show_reply_preview = false;
+        fully_drawn = true;
     }
 
-    // TODO: This feels weird to do here, but the message widget needs to keep the
-    // id for sending events. and whether it can be replied to or not. Maybe handle this better.
-    item.as_message()
-        .set_data(event_tl_item.can_be_replied_to(), item_id);
-
-    (item, new_drawn_status)
+    reply_preview_view.set_visible(show_reply_preview);
+    fully_drawn
 }
 
+
+/// Draws the reactions beneath the given `message_item`.
 fn draw_reactions(
     _cx: &mut Cx2d,
     message_item: &WidgetRef,
@@ -1927,6 +1997,7 @@ fn draw_reactions(
     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 {
@@ -2442,7 +2513,7 @@ impl Widget for Message {
         // TODO: need vecs for apply_over(), maybe use an animator so we just set the state here
         // and the animator handles the color changes from inside the dsl.
         let default_color = vec3(1.0, 1.0, 1.0); // #ffffff
-        let hover_color = vec3(0.929, 0.929, 0.929); // #ededed
+        let hover_color = vec3(0.939, 0.939, 0.939); // #efefef
 
         let bg_color = if self.hovered {
             hover_color

From 2879df39009a101acbd3b377c6be78685a67c896 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 23 Aug 2024 16:27:13 -0700
Subject: [PATCH 5/5] Fetch event details on a missing InReplyToDetails as well
 as for missing user profile info

---
 src/home/room_screen.rs | 81 ++++++++++++++++++++++++++++++-----------
 src/sliding_sync.rs     | 40 ++++++++++++++++++--
 2 files changed, 96 insertions(+), 25 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index e453789e..d52cf79d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -11,7 +11,7 @@ use matrix_sdk::{ruma::{
             guest_access::GuestAccess, history_visibility::HistoryVisibility, join_rules::JoinRule, message::{MessageFormat, MessageType, RoomMessageEventContent}, MediaSource
         },
         AnySyncMessageLikeEvent, AnySyncTimelineEvent, FullStateEventContent, SyncMessageLikeEvent,
-    }, matrix_uri::MatrixId, uint, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId, UserId
+    }, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId, UserId
 }, OwnedServerName};
 use matrix_sdk_ui::timeline::{
     self, AnyOtherFullStateEventContent, EventTimelineItem, MemberProfileChange, MembershipChange,
@@ -783,8 +783,9 @@ impl Widget for RoomScreen {
                                 cx,
                                 replying_preview_view.avatar(id!(reply_preview_avatar)),
                                 room_id.as_ref(),
-                                message_to_reply.sender_profile(),
                                 message_to_reply.sender(),
+                                message_to_reply.sender_profile(),
+                                message_to_reply.event_id(),
                             );
 
                             replying_preview_view
@@ -1020,6 +1021,12 @@ pub enum TimelineUpdate {
     /// meaning that it has completed its recent pagination request(s) and is now waiting
     /// for more requests, but that the start of the timeline has not yet been reached.
     PaginationIdle,
+    /// A notice that event details have been fetched from the server,
+    /// including a `result` that indicates whether the request was successful.
+    EventDetailsFetched {
+        event_id: OwnedEventId,
+        result: Result<(), matrix_sdk_ui::timeline::Error>,
+    },
     /// A notice that the room's members have been fetched from the server,
     /// though the success or failure of the request is not yet known until the client
     /// requests the member info via a timeline event's `sender_profile()` method.
@@ -1468,6 +1475,13 @@ impl Widget for Timeline {
                     TimelineUpdate::PaginationIdle => {
                         done_loading = true;
                     }
+                    TimelineUpdate::EventDetailsFetched { event_id: _event_id, result: _result } => {
+                        if let Err(_e) = _result {
+                            error!("Failed to fetch details fetched for event {_event_id} in room {}. Error: {_e:?}", tl.room_id);
+                        }
+                        // Here, to be most efficient, we could redraw only the updated event,
+                        // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
+                    }
                     TimelineUpdate::RoomMembersFetched => {
                         log!("Timeline::handle_event(): room members fetched for room {}", tl.room_id);
                         // Here, to be most efficient, we could redraw only the user avatars and names in the timeline,
@@ -1734,7 +1748,7 @@ fn populate_message_view(
                         Cow::Borrowed(plaintext)   => msg_body_field.show_plaintext(plaintext),
                     }
                 }
-                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message);
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message, event_tl_item.event_id());
                 draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
                 // We're done drawing the message content, so mark it as fully drawn
                 // *if and only if* the reply preview was also fully drawn.
@@ -1766,7 +1780,7 @@ fn populate_message_view(
                 let text_or_image_ref = item.text_or_image(id!(content.message));
 
                 // Draw the ReplyPreview and reactions, if any are present.
-                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message);
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message, event_tl_item.event_id());
                 draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
 
                 match &image.source {
@@ -1818,7 +1832,7 @@ fn populate_message_view(
                 let kind = other.msgtype();
                 item.label(id!(content.message)).set_text(&format!("[TODO {kind:?}] {}", other.body()));
                 // Draw the ReplyPreview and reactions, if any are present.
-                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message);
+                let is_reply_fully_drawn = draw_replied_to_message(cx, &item, room_id, message, event_tl_item.event_id());
                 draw_reactions(cx, &item, event_tl_item.reactions(), item_id - 1);
                 new_drawn_status.content_drawn = is_reply_fully_drawn;
                 (item, false)
@@ -1837,8 +1851,9 @@ fn populate_message_view(
             cx,
             item.avatar(id!(profile.avatar)),
             room_id,
-            event_tl_item.sender_profile(),
             event_tl_item.sender(),
+            event_tl_item.sender_profile(),
+            event_tl_item.event_id(),
         );
         item.label(id!(content.username)).set_text(&username);
         new_drawn_status.profile_drawn = profile_drawn;
@@ -1882,6 +1897,7 @@ fn draw_replied_to_message(
     item: &WidgetRef,
     room_id: &RoomId,
     message: &timeline::Message,
+    message_event_id: Option<&EventId>,
 ) -> bool {
     let fully_drawn: bool;
     let show_reply_preview: bool;
@@ -1889,11 +1905,9 @@ fn draw_replied_to_message(
 
     if let Some(in_reply_to_details) = message.in_reply_to() {
         show_reply_preview = true;
-        log!("Found replied-to message: {:?}", in_reply_to_details);
         match &in_reply_to_details.event {
-            TimelineDetails::Ready(details) => {
-                log!("Found ready replied-to message: {:?}", details);
-                let in_reply_to_body: Cow<str> = match details.as_ref().content() {
+            TimelineDetails::Ready(replied_to_event) => {
+                let in_reply_to_body: Cow<str> = match replied_to_event.as_ref().content() {
                     // TODO: use existing message display logic for this reply preview
                     TimelineItemContent::Message(m) => m.body().into(),
                     TimelineItemContent::RedactedMessage => "[Message Redacted]".into(),
@@ -1905,8 +1919,9 @@ fn draw_replied_to_message(
                     cx,
                     reply_preview_view.avatar(id!(reply_preview_avatar)),
                     room_id,
-                    details.sender_profile(),
-                    details.sender(),
+                    replied_to_event.sender(),
+                    replied_to_event.sender_profile(),
+                    Some(in_reply_to_details.event_id.as_ref()),
                 );
 
                 fully_drawn = is_avatar_fully_drawn;
@@ -1930,7 +1945,7 @@ fn draw_replied_to_message(
                     .html_or_plaintext(id!(reply_preview_body))
                     .show_plaintext("[Error fetching replied-to event]");
             }
-            TimelineDetails::Pending | TimelineDetails::Unavailable => {
+            status @ TimelineDetails::Pending | status @ TimelineDetails::Unavailable => {
                 // We don't have the replied-to message yet, so we can't fully draw the preview.
                 fully_drawn = false;
                 reply_preview_view
@@ -1943,7 +1958,16 @@ fn draw_replied_to_message(
                     .html_or_plaintext(id!(reply_preview_body))
                     .show_plaintext("[Loading replied-to message...]");
 
-                // TODO here: if Unavailable, submit an async request for `Timeline::fetch_details_for_event`
+                // Confusingly, we need to fetch the details of the `message` (the event that is the reply),
+                // not the details of the original event that this `message` is replying to.
+                if matches!(status, TimelineDetails::Unavailable) {
+                    if let Some(event_id) = message_event_id {
+                        submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                            room_id: room_id.to_owned(),
+                            event_id: event_id.to_owned(),
+                        });
+                    }
+                }
             }
         }
     } else {
@@ -2317,8 +2341,9 @@ fn populate_small_state_event(
             cx,
             item.avatar(id!(avatar)),
             room_id,
-            event_tl_item.sender_profile(),
             event_tl_item.sender(),
+            event_tl_item.sender_profile(),
+            event_tl_item.event_id(),
         );
         // Draw the timestamp as part of the profile.
         set_timestamp(
@@ -2364,8 +2389,11 @@ fn set_timestamp(
 }
 
 
-/// Sets the given avatar and returns a displayable username based on the given timeline event.
+/// Sets the given avatar and returns a displayable username based on the
+/// given profile and user ID of the sender of the event with the given event ID.
 ///
+/// If the sender profile is not ready, this function will submit an async request
+/// to fetch the sender profile from the server, but only if the event ID is `Some`.
 /// This function will always choose a nice, displayable username and avatar.
 ///
 /// The specific behavior is as follows:
@@ -2389,8 +2417,9 @@ fn set_avatar_and_get_username(
     cx: &mut Cx,
     avatar: AvatarRef,
     room_id: &RoomId,
+    sender_user_id: &UserId, 
     sender_profile: &TimelineDetails<Profile>,
-    user_id: &UserId,
+    event_id: Option<&EventId>,
 ) -> (String, bool) {
     // Get the display name and avatar URL from the sender's profile, if available,
     // or if the profile isn't ready, fall back to qeurying our user profile cache.
@@ -2399,8 +2428,16 @@ fn set_avatar_and_get_username(
             (profile.display_name.clone(), AvatarState::Known(profile.avatar_url.clone()))
         }
         _not_ready => {
+            if matches!(_not_ready, TimelineDetails::Unavailable) {
+                if let Some(event_id) = event_id {
+                    submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                        room_id: room_id.to_owned(),
+                        event_id: event_id.to_owned(),
+                    });
+                }
+            }
             // log!("populate_message_view(): sender profile not ready yet for event {_not_ready:?}");
-            user_profile_cache::with_user_profile(cx, user_id, |profile, room_members| {
+            user_profile_cache::with_user_profile(cx, sender_user_id, |profile, room_members| {
                 room_members.get(room_id)
                     .map(|rm| (
                         rm.display_name().map(|n| n.to_owned()),
@@ -2427,15 +2464,15 @@ fn set_avatar_and_get_username(
     };
 
     // Set sender to the display name if available, otherwise the user id.
-    let username = username_opt.clone().unwrap_or_else(|| user_id.to_string());
+    let username = username_opt.clone().unwrap_or_else(|| sender_user_id.to_string());
 
     // Set the sender's avatar image, or use the username if no image is available.
     avatar_img_data_opt.and_then(|data| avatar.show_image(
-        Some((user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone())),
+        Some((sender_user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone())),
         |img| utils::load_png_or_jpg(&img, cx, &data)
     ).ok())
     .unwrap_or_else(|| avatar.show_text(
-        Some((user_id.to_owned(), username_opt, room_id.to_owned())),
+        Some((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
         &username,
     ));
 
@@ -2513,7 +2550,7 @@ impl Widget for Message {
         // TODO: need vecs for apply_over(), maybe use an animator so we just set the state here
         // and the animator handles the color changes from inside the dsl.
         let default_color = vec3(1.0, 1.0, 1.0); // #ffffff
-        let hover_color = vec3(0.939, 0.939, 0.939); // #efefef
+        let hover_color = vec3(0.95, 0.95, 0.95); // #f3f3f3  (very light gray)
 
         let bg_color = if self.hovered {
             hover_color
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 4c43a2f9..8c0f7712 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -6,7 +6,7 @@ use imbl::Vector;
 use makepad_widgets::{error, log, SignalToUI};
 use matrix_sdk::{
     config::RequestConfig, media::MediaRequest, room::RoomMember, ruma::{
-        api::client::session::get_login_types::v3::LoginType, assign, events::{room::{message::{ForwardThread, RoomMessageEventContent}, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
+        api::client::session::get_login_types::v3::LoginType, assign, events::{room::{message::{ForwardThread, RoomMessageEventContent}, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
     }, sliding_sync::http::request::{AccountData, ListFilters, ToDevice, E2EE}, Client, Room, SlidingSyncList, SlidingSyncMode
 };
 use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, RepliedToInfo, TimelineItem, TimelineItemContent}, Timeline};
@@ -122,6 +122,11 @@ pub enum MatrixRequest {
         ///    which works if the timeline is in either live mode and focused mode.
         forwards: bool,
     },
+    /// Request to fetch the full details of the given event in the given room's timeline.
+    FetchDetailsForEvent {
+        room_id: OwnedRoomId,
+        event_id: OwnedEventId,
+    },
     /// Request to fetch profile information for all members of a room.
     /// This can be *very* slow depending on the number of members in the room.
     FetchRoomMembers {
@@ -270,6 +275,35 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 });
             }
 
+            MatrixRequest::FetchDetailsForEvent { room_id, event_id } => {
+                let (timeline, sender) = {
+                    let mut all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                    let Some(room_info) = all_room_info.get_mut(&room_id) else {
+                        log!("BUG: room info not found for fetch details for event request {room_id}");
+                        continue;
+                    };
+
+                    (room_info.timeline.clone(), room_info.timeline_update_sender.clone())
+                };
+
+                // Spawn a new async task that will make the actual fetch request.
+                let _fetch_task = Handle::current().spawn(async move {
+                    // log!("Sending request to fetch details for event {event_id} in room {room_id}...");
+                    let result = timeline.fetch_details_for_event(&event_id).await;
+                    match result {
+                        Ok(_) => {
+                            // log!("Successfully fetched details for event {event_id} in room {room_id}.");
+                        }
+                        Err(ref e) => error!("Error fetching details for event {event_id} in room {room_id}: {e:?}"),
+                    }
+                    sender.send(TimelineUpdate::EventDetailsFetched {
+                        event_id,
+                        result,
+                    }).unwrap();
+                    SignalToUI::set_ui_signal();
+                });
+            }
+
             MatrixRequest::FetchRoomMembers { room_id } => {
                 let (timeline, sender) = {
                     let mut all_room_info = ALL_ROOM_INFO.lock().unwrap();
@@ -426,13 +460,13 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
             MatrixRequest::FetchAvatar { mxc_uri, on_fetched } => {
                 let Some(client) = CLIENT.get() else { continue };
                 let _fetch_task = Handle::current().spawn(async move {
-                    log!("Sending fetch avatar request for {mxc_uri:?}...");
+                    // log!("Sending fetch avatar request for {mxc_uri:?}...");
                     let media_request = MediaRequest {
                         source: MediaSource::Plain(mxc_uri.clone()),
                         format: MEDIA_THUMBNAIL_FORMAT.into(),
                     };
                     let res = client.media().get_media_content(&media_request, true).await;
-                    log!("Fetched avatar for {mxc_uri:?}, succeeded? {}", res.is_ok());
+                    // log!("Fetched avatar for {mxc_uri:?}, succeeded? {}", res.is_ok());
                     on_fetched(AvatarUpdate { mxc_uri, avatar_data: res.map(|v| v.into()) });
                 });
             }