From 5c54512569fdb0247ae4e0a1f6a10d76dd7e5854 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 26 Sep 2024 19:32:25 +0800
Subject: [PATCH 01/30] read_receipt_display

---
 src/home/mod.rs               |   2 +
 src/home/room_read_receipt.rs | 132 ++++++++++++++++++++++++++++++++++
 src/home/room_screen.rs       |  32 +++++++--
 src/shared/avatar.rs          |   6 ++
 4 files changed, 167 insertions(+), 5 deletions(-)
 create mode 100644 src/home/room_read_receipt.rs

diff --git a/src/home/mod.rs b/src/home/mod.rs
index f4e0a250..4a2df7c0 100644
--- a/src/home/mod.rs
+++ b/src/home/mod.rs
@@ -4,6 +4,7 @@ pub mod home_screen;
 pub mod main_content;
 pub mod room_preview;
 pub mod room_screen;
+pub mod room_read_receipt;
 pub mod rooms_list;
 pub mod rooms_sidebar;
 pub mod spaces_dock;
@@ -14,6 +15,7 @@ pub fn live_design(cx: &mut Cx) {
     rooms_list::live_design(cx);
     room_preview::live_design(cx);
     room_screen::live_design(cx);
+    room_read_receipt::live_design(cx);
     rooms_sidebar::live_design(cx);
     main_content::live_design(cx);
     spaces_dock::live_design(cx);
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
new file mode 100644
index 00000000..4d2c15fe
--- /dev/null
+++ b/src/home/room_read_receipt.rs
@@ -0,0 +1,132 @@
+use makepad_widgets::*;
+use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
+use crate::shared::avatar::{Avatar};
+live_design!{
+    import makepad_draw::shader::std::*;
+    import crate::shared::avatar::*;
+    
+    Sequencer = {{Sequencer}} {
+        button: <Avatar> {
+            width: 15.0,
+            height: 15.0,
+            text_view = { text = { draw_text: {
+                text_style: { font_size: 6.0 }
+            }}}
+        }
+        margin: {top: 3, right: 10, bottom: 3, left: 10}
+        width: Fit,
+        height: Fit
+    }
+}
+
+#[derive(Clone, Debug, Default, Eq, Hash, Copy, PartialEq, FromLiveId)]
+pub struct AvatarId(pub LiveId);
+
+#[derive(Live, Widget)]
+pub struct Sequencer {
+    #[redraw] #[live] draw_text: DrawText,
+    #[rust] area: Area,
+    #[walk] walk: Walk,
+    #[live] button: Option<LivePtr>,
+    #[live(false)] hover_actions_enabled: bool,
+    #[rust] buttons: ComponentMap<AvatarId, Avatar>,
+    #[rust] read_receipts: Vec<String>
+}
+
+impl LiveHook for Sequencer {
+fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
+        for button in self.buttons.values_mut() {
+            if let Some(index) = nodes.child_by_name(index, live_id!(button).as_field()) {
+                button.apply(cx, apply, index, nodes);
+            }
+        }
+        self.area.redraw(cx);
+    }
+}
+
+#[derive(Clone, Debug, DefaultNone)]
+pub enum SequencerAction {
+    HoverIn(Rect),
+    HoverOut,
+    None
+}
+impl Widget for Sequencer {
+
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let uid = self.widget_uid();
+        for button in self.buttons.values_mut() {
+            match button.hit(cx, event, self.area){
+                Hit::FingerHoverIn(_) => {
+                    let rect = self.area.rect(cx);
+                    cx.widget_action(uid, &scope.path, SequencerAction::HoverIn(rect));
+                }
+                Hit::FingerHoverOut(_) => {
+                    cx.widget_action(uid, &scope.path, SequencerAction::HoverOut);
+                }
+                _=>{}
+            }
+        }
+        
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, Layout::default());        
+        let button = self.button;
+        for (i,name) in self.read_receipts.iter().enumerate(){
+            if i>4{
+                break
+            }
+            let btn_id = LiveId(i as u64).into();
+            let btn = self.buttons.get_or_insert(cx, btn_id, | cx | {
+                Avatar::new_from_ptr(cx, button)
+            });
+            btn.set_text(name);            
+            btn.draw(cx, scope);
+        }
+           
+        cx.end_turtle_with_area(&mut self.area);
+        self.buttons.retain_visible();
+        DrawStep::done()
+    }
+    
+    fn widget_to_data(&self, cx: &mut Cx, actions: &Actions, nodes: &mut LiveNodeVec, path: &[LiveId]) -> bool {
+        false
+    }
+
+    fn data_to_widget(&mut self, cx: &mut Cx, nodes:&[LiveNode], path: &[LiveId]){
+    }
+}
+
+impl SequencerRef {
+    pub fn get_read_receipts(&self)->Vec<String>{
+        if let Some(inner) = self.borrow() {
+            return inner.read_receipts.clone();
+        }
+        return vec![];
+    }
+    pub fn set_read_receipts(&mut self,cx:&mut Cx , room_id: OwnedRoomId, read_user_id:Vec<OwnedUserId>){
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.read_receipts = read_user_id.iter().map(|f|f.to_string().chars().nth(1).unwrap().to_string()).collect();
+        }
+    }
+    pub fn hover_in(&self, actions:&Actions)->Option<Rect>{
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            match item.cast(){
+                SequencerAction::HoverIn(rect) => Some(rect),
+                _=> None
+            }
+        } else {
+            None
+        }
+    }
+    pub fn hover_out(&self, actions:&Actions)->bool{
+        if let Some(item) = actions.find_widget_action(self.widget_uid()) {
+            match item.cast(){
+                SequencerAction::HoverOut => true,
+                _=> false
+            }
+        } else {
+            false
+        }
+    }
+}
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 43aee6cc..518382dc 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -31,6 +31,7 @@ use crate::{
     },
     sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest},
     utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
+    home::room_read_receipt::*
 };
 use rangemap::RangeSet;
 
@@ -45,6 +46,7 @@ live_design! {
     import crate::shared::avatar::Avatar;
     import crate::shared::text_or_image::TextOrImage;
     import crate::shared::html_or_plaintext::*;
+    import crate::home::room_read_receipt::*;
     import crate::profile::user_profile::UserProfileSlidingPane;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
@@ -78,7 +80,6 @@ live_design! {
     COLOR_OVERLAY_BG = #x000000d8
     COLOR_READ_MARKER = #xeb2733
     COLOR_PROFILE_CIRCLE = #xfff8ee
-
     FillerY = <View> {width: Fill}
 
     FillerX = <View> {height: Fill}
@@ -418,7 +419,7 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-
+            sequencer = <Sequencer> {width: 40, height: 30, margin: {top: (12.0)},hover_actions_enabled:true}
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.
@@ -671,7 +672,7 @@ live_design! {
                 }
             }
         }
-
+        tooltip = <Tooltip> {}
     }
 
     IMG_SMILEY_FACE_BW = dep("crate://self/resources/img/smiley_face_bw.png")
@@ -1077,6 +1078,20 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
+            let portal_list = self.portal_list(id!(list));
+            let mut tooltip = self.tooltip(id!(tooltip));
+            for (_,wr) in portal_list.items_with_actions(actions).iter(){
+                let seq = wr.sequencer(id!(sequencer));
+                let num_seen = seq.get_read_receipts().len();
+                if let Some(rect) = seq.hover_in(actions){
+                    tooltip.show_with_options(cx, rect.pos, &format!("{} seen",num_seen));
+                }
+                if seq.hover_out(&actions) {
+                    tooltip.hide(cx);
+                }
+            }
+           
+     
             for action in actions {
                 // Handle actions on a message, e.g., clicking the reply button or clicking the reply preview.
                 match action.as_widget_action().cast() {
@@ -1965,7 +1980,9 @@ fn populate_message_view(
     media_cache: &mut MediaCache,
     item_drawn_status: ItemDrawnStatus,
 ) -> (WidgetRef, ItemDrawnStatus) {
-
+    let receipts = event_tl_item.read_receipts();
+    //#123
+    
     let mut new_drawn_status = item_drawn_status;
 
     let ts_millis = event_tl_item.timestamp();
@@ -1993,6 +2010,12 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template).unwrap();
+            let mut read_receipts =vec![];
+            for (ower_user_id,_) in receipts.iter(){
+                read_receipts.push(ower_user_id.clone());
+            }
+            item.sequencer(id!(sequencer)).set_read_receipts(cx,room_id.to_owned(),read_receipts);
+            
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2458,7 +2481,6 @@ impl SmallStateEventContent for RoomMembershipChange {
                 ItemDrawnStatus::new(),
             );
         };
-
         item.label(id!(content)).set_text(&preview.format_with(username));
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index d4f5b5a9..7bb86140 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -209,6 +209,12 @@ impl Avatar {
             AvatarDisplayStatus::Text
         }
     }
+    pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Hit {
+        event.hits_with_options(
+            cx,
+            self.area(),
+            HitOptions::new().with_sweep_area(sweep_area))
+    }
 }
 
 impl AvatarRef {

From 4ad555a3d3a4679d05109d056e6f1030d4a0bfc5 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 3 Oct 2024 16:04:08 +0800
Subject: [PATCH 02/30] merge main

---
 Cargo.lock                      | 181 +++----
 Cargo.toml                      |   6 +-
 src/home/room_preview.rs        |   6 +-
 src/home/room_screen.rs         | 882 ++++++++++++++++++--------------
 src/home/rooms_list.rs          | 119 +++--
 src/persistent_state.rs         |  11 +-
 src/profile/user_profile.rs     |   1 +
 src/shared/html_or_plaintext.rs |   2 +-
 src/shared/mod.rs               |   4 +-
 src/shared/styles.rs            |   1 +
 src/shared/typing_animation.rs  | 162 ++++++
 src/sliding_sync.rs             | 720 +++++++++++++++-----------
 src/utils.rs                    |   4 +-
 13 files changed, 1261 insertions(+), 838 deletions(-)
 create mode 100644 src/shared/typing_animation.rs

diff --git a/Cargo.lock b/Cargo.lock
index 02d3a429..7459b559 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -77,12 +77,6 @@ dependencies = [
  "memchr",
 ]
 
-[[package]]
-name = "allocator-api2"
-version = "0.2.16"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0942ffc6dcaadf03badf6e6a2d0228460359d5e34b57ccdc720b7382dfbd5ec5"
-
 [[package]]
 name = "android-tzdata"
 version = "0.1.1"
@@ -732,11 +726,10 @@ checksum = "0c03c416ed1a30fbb027ef484ba6ab6f80e1eada675e1a2b92fd673c045a1f1d"
 
 [[package]]
 name = "deadpool"
-version = "0.10.0"
+version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fb84100978c1c7b37f09ed3ce3e5f843af02c2a2c431bae5b19230dad2c1b490"
+checksum = "6541a3916932fe57768d4be0b1ffb5ec7cbf74ca8c903fdfd5c0fe8aa958f0ed"
 dependencies = [
- "async-trait",
  "deadpool-runtime",
  "num_cpus",
  "tokio",
@@ -753,9 +746,9 @@ dependencies = [
 
 [[package]]
 name = "deadpool-sqlite"
-version = "0.7.0"
+version = "0.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b8010e36e12f3be22543a5e478b4af20aeead9a700dd69581a5e050a070fc22c"
+checksum = "2f9cc6210316f8b7ced394e2a5d2833ce7097fb28afb5881299c61bc18e8e0e9"
 dependencies = [
  "deadpool",
  "deadpool-sync",
@@ -790,22 +783,9 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "fffa369a668c8af7dbf8b5e56c9f744fbd399949ed171606040001947de40b1c"
 dependencies = [
  "const-oid",
- "der_derive",
- "flagset",
  "zeroize",
 ]
 
-[[package]]
-name = "der_derive"
-version = "0.7.2"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5fe87ce4529967e0ba1dcf8450bab64d97dfd5010a6256187ffe2e43e6f0e049"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn 2.0.75",
-]
-
 [[package]]
 name = "deranged"
 version = "0.3.9"
@@ -999,12 +979,6 @@ version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a481586acf778f1b1455424c343f71124b048ffa5f4fc3f8f6ae9dc432dcb3c7"
 
-[[package]]
-name = "flagset"
-version = "0.4.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d52a7e408202050813e6f1d9addadcaafef3dca7530c7ddfb005d4081cce6779"
-
 [[package]]
 name = "flate2"
 version = "1.0.28"
@@ -1194,19 +1168,18 @@ dependencies = [
 
 [[package]]
 name = "hashbrown"
-version = "0.14.2"
+version = "0.14.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f93e7192158dbcda357bdec5fb5788eebf8bbac027f3f33e719d29135ae84156"
+checksum = "e5274423e17b7c9fc20b6e7e208532f9b19825d82dfd615708b70edd83df41f1"
 dependencies = [
  "ahash",
- "allocator-api2",
 ]
 
 [[package]]
 name = "hashlink"
-version = "0.8.4"
+version = "0.9.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e8094feaf31ff591f651a2664fb9cfd92bba7a60ce3197265e9482ebe753c8f7"
+checksum = "6ba4ff7128dee98c7dc9794b6a411377e1404dba1c97deb8d1a55297bd25d8af"
 dependencies = [
  "hashbrown",
 ]
@@ -1219,9 +1192,9 @@ checksum = "95505c38b4572b2d910cecb0281560f54b440a19336cbbcb27bf6ce6adc6f5a8"
 
 [[package]]
 name = "hermit-abi"
-version = "0.3.3"
+version = "0.3.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d77f7ec81a6d05a3abb01ab6eb7590f6083d08449fe5a1c8b1e620283546ccb7"
+checksum = "d231dfb89cfffdbc30e7fc41579ed6066ad03abda9e567ccafae602b97ec5024"
 
 [[package]]
 name = "hilog-sys"
@@ -1249,9 +1222,9 @@ dependencies = [
 
 [[package]]
 name = "html5ever"
-version = "0.27.0"
+version = "0.28.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c13771afe0e6e846f1e67d038d4cb29998a6779f93c809212e4e9c32efd244d4"
+checksum = "0ff6858c1f7e2a470c5403091866fa95b36fe0dbac5d771f932c15e5ff1ee501"
 dependencies = [
  "log",
  "mac",
@@ -1457,9 +1430,9 @@ dependencies = [
 
 [[package]]
 name = "indexed_db_futures"
-version = "0.4.1"
+version = "0.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6cc2083760572ee02385ab8b7c02c20925d2dd1f97a1a25a8737a238608f1152"
+checksum = "43315957678a70eb21fb0d2384fe86dde0d6c859a01e24ce127eb65a0143d28c"
 dependencies = [
  "accessory",
  "cfg-if",
@@ -1500,9 +1473,6 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "7a5bbe824c507c5da5956355e86a746d82e0e1464f65d862cc5e71da70e94b2c"
 dependencies = [
  "cfg-if",
- "js-sys",
- "wasm-bindgen",
- "web-sys",
 ]
 
 [[package]]
@@ -1648,9 +1618,9 @@ dependencies = [
 
 [[package]]
 name = "libsqlite3-sys"
-version = "0.27.0"
+version = "0.28.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cf4e226dcd58b4be396f7bd3c20da8fdee2911400705297ba7d2d7cc2c30f716"
+checksum = "0c10584274047cb335c23d3e61bcef8e323adae7c5c8c760540f73610177fc3f"
 dependencies = [
  "cc",
  "pkg-config",
@@ -2025,9 +1995,9 @@ checksum = "3e2e65a1a2e43cfcb47a895c4c8b10d1f4a61097f9f254f183aee60cad9c651d"
 
 [[package]]
 name = "markup5ever"
-version = "0.12.1"
+version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "16ce3abbeba692c8b8441d036ef91aea6df8da2c6b6e21c7e14d3c18e526be45"
+checksum = "d581ff8be69d08a2efa23a959d81aa22b739073f749f067348bd4f4ba4b69195"
 dependencies = [
  "log",
  "phf",
@@ -2063,7 +2033,7 @@ dependencies = [
 [[package]]
 name = "matrix-sdk"
 version = "0.7.1"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "anymap2",
  "aquamarine",
@@ -2110,7 +2080,7 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-base"
 version = "0.7.0"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "as_variant",
  "async-trait",
@@ -2134,13 +2104,12 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-common"
 version = "0.7.0"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "async-trait",
  "futures-core",
  "futures-util",
  "gloo-timers",
- "instant",
  "ruma",
  "serde",
  "serde_json",
@@ -2156,7 +2125,7 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-crypto"
 version = "0.7.2"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "aes",
  "as_variant",
@@ -2196,7 +2165,7 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-indexeddb"
 version = "0.7.0"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "anyhow",
  "async-trait",
@@ -2224,7 +2193,7 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-sqlite"
 version = "0.7.1"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "async-trait",
  "deadpool-sqlite",
@@ -2246,7 +2215,7 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-store-encryption"
 version = "0.7.0"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "base64",
  "blake3",
@@ -2265,13 +2234,12 @@ dependencies = [
 [[package]]
 name = "matrix-sdk-ui"
 version = "0.7.0"
-source = "git+https://github.com/project-robius/matrix-rust-sdk?branch=re-export-reactions-type#0788b7a5d075ad2521335b625f7fc50b8308c6db"
+source = "git+https://github.com/matrix-org/matrix-rust-sdk#dc055c632c106c6392eeea8efd24c3bb7d756fee"
 dependencies = [
  "as_variant",
  "async-once-cell",
  "async-rx",
  "async-stream",
- "async-trait",
  "async_cell",
  "chrono",
  "eyeball",
@@ -2294,6 +2262,7 @@ dependencies = [
  "serde_json",
  "thiserror",
  "tokio",
+ "tokio-stream",
  "tracing",
  "unicode-normalization",
 ]
@@ -2328,13 +2297,14 @@ dependencies = [
 
 [[package]]
 name = "mio"
-version = "0.8.9"
+version = "1.0.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3dce281c5e46beae905d4de1870d8b1509a9142b62eedf18b443b011ca8343d0"
+checksum = "80e04d1dcff3aae0704555fe5fee3bcfaf3d1fdf8a7e521d5b9d2b42acb52cec"
 dependencies = [
+ "hermit-abi",
  "libc",
  "wasi",
- "windows-sys 0.48.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
@@ -2648,17 +2618,6 @@ version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
 
-[[package]]
-name = "pkcs7"
-version = "0.4.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d79178be066405e0602bf3035946edef6b11b3f9dde46dfe5f8bfd7dea4b77e7"
-dependencies = [
- "der",
- "spki",
- "x509-cert",
-]
-
 [[package]]
 name = "pkcs8"
 version = "0.10.2"
@@ -2784,9 +2743,9 @@ dependencies = [
 
 [[package]]
 name = "pulldown-cmark"
-version = "0.11.2"
+version = "0.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cb4e75767fbc9d92b90e4d0c011f61358cde9513b31ef07ea3631b15ffc3b4fd"
+checksum = "666f0f59e259aea2d72e6012290c09877a780935cc3c18b1ceded41f3890d59c"
 dependencies = [
  "bitflags 2.4.1",
  "memchr",
@@ -3144,7 +3103,7 @@ checksum = "6c20b6793b5c2fa6553b250154b78d6d0db37e72700ae35fad9387a46f487c97"
 [[package]]
 name = "ruma"
 version = "0.10.1"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
  "assign",
  "js_int",
@@ -3160,7 +3119,7 @@ dependencies = [
 [[package]]
 name = "ruma-client-api"
 version = "0.18.0"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
  "as_variant",
  "assign",
@@ -3183,7 +3142,7 @@ dependencies = [
 [[package]]
 name = "ruma-common"
 version = "0.13.0"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
  "as_variant",
  "base64",
@@ -3215,7 +3174,7 @@ dependencies = [
 [[package]]
 name = "ruma-events"
 version = "0.28.1"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
  "as_variant",
  "indexmap",
@@ -3240,9 +3199,11 @@ dependencies = [
 [[package]]
 name = "ruma-federation-api"
 version = "0.9.0"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
+ "http",
  "js_int",
+ "mime",
  "ruma-common",
  "ruma-events",
  "serde",
@@ -3252,7 +3213,7 @@ dependencies = [
 [[package]]
 name = "ruma-html"
 version = "0.2.0"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
  "as_variant",
  "html5ever",
@@ -3264,7 +3225,7 @@ dependencies = [
 [[package]]
 name = "ruma-identifiers-validation"
 version = "0.9.5"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
  "js_int",
  "thiserror",
@@ -3273,8 +3234,9 @@ dependencies = [
 [[package]]
 name = "ruma-macros"
 version = "0.13.0"
-source = "git+https://github.com/matrix-org/ruma?rev=f25b3220d0c3ece7720020ed180af4955a855402#f25b3220d0c3ece7720020ed180af4955a855402"
+source = "git+https://github.com/ruma/ruma?rev=1ae98db9c44f46a590f4c76baf5cef70ebb6970d#1ae98db9c44f46a590f4c76baf5cef70ebb6970d"
 dependencies = [
+ "cfg-if",
  "once_cell",
  "proc-macro-crate",
  "proc-macro2",
@@ -3287,9 +3249,9 @@ dependencies = [
 
 [[package]]
 name = "rusqlite"
-version = "0.30.0"
+version = "0.31.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a78046161564f5e7cd9008aff3b2990b3850dc8e0349119b98e8f251e099f24d"
+checksum = "b838eba278d213a8beaf485bd313fd580ca4505a00d5871caeb1457c55322cae"
 dependencies = [
  "bitflags 2.4.1",
  "fallible-iterator",
@@ -3805,26 +3767,25 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.35.1"
+version = "1.40.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c89b4efa943be685f629b149f53829423f8f5531ea21249408e8e2f8671ec104"
+checksum = "e2b070231665d27ad9ec9b8df639893f46727666c6767db40317fbe920a5d998"
 dependencies = [
  "backtrace",
  "bytes",
  "libc",
  "mio",
- "num_cpus",
  "pin-project-lite",
  "socket2",
  "tokio-macros",
- "windows-sys 0.48.0",
+ "windows-sys 0.52.0",
 ]
 
 [[package]]
 name = "tokio-macros"
-version = "2.2.0"
+version = "2.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5b8a1e28f2deaa14e508979454cb3a223b10b938b45af148bc0986de36f1923b"
+checksum = "693d596312e88961bc67d7f1f97af8a70227d9f90c31bba5806eec004978d752"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4174,9 +4135,9 @@ checksum = "711b9620af191e0cdc7468a8d14e709c3dcdb115b36f838e601583af800a370a"
 
 [[package]]
 name = "uuid"
-version = "1.5.0"
+version = "1.10.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "88ad59a7560b41a70d191093a945f0b87bc1deeda46fb237479708a1d6b6cdfc"
+checksum = "81dfa00651efa65069b0b6b651f4aaa31ba9e3c3ce0137aaad053604ee7e0314"
 dependencies = [
  "getrandom",
  "wasm-bindgen",
@@ -4203,8 +4164,7 @@ checksum = "49874b5167b65d7193b8aba1567f5c7d93d001cafc34600cee003eda787e483f"
 [[package]]
 name = "vodozemac"
 version = "0.7.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "051d4af70b53b42adf2aac459a305851b8d754f210aaf11ab509e1065beff422"
+source = "git+https://github.com/matrix-org/vodozemac?rev=57cbf7e939d7b54d20207e8361b7135bd65c9cc2#57cbf7e939d7b54d20207e8361b7135bd65c9cc2"
 dependencies = [
  "aes",
  "arrayvec",
@@ -4218,7 +4178,6 @@ dependencies = [
  "hkdf",
  "hmac",
  "matrix-pickle",
- "pkcs7",
  "prost",
  "rand",
  "serde",
@@ -4258,19 +4217,20 @@ checksum = "9c8d87e72b64a3b4db28d11ce29237c246188f4f51057d65a7eab63b7987e423"
 
 [[package]]
 name = "wasm-bindgen"
-version = "0.2.87"
+version = "0.2.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7706a72ab36d8cb1f80ffbf0e071533974a60d0a308d01a5d0375bf60499a342"
+checksum = "a82edfc16a6c469f5f44dc7b571814045d60404b55a0ee849f9bcfa2e63dd9b5"
 dependencies = [
  "cfg-if",
+ "once_cell",
  "wasm-bindgen-macro",
 ]
 
 [[package]]
 name = "wasm-bindgen-backend"
-version = "0.2.87"
+version = "0.2.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5ef2b6d3c510e9625e5fe6f509ab07d66a760f0885d858736483c32ed7809abd"
+checksum = "9de396da306523044d3302746f1208fa71d7532227f15e347e2d93e4145dd77b"
 dependencies = [
  "bumpalo",
  "log",
@@ -4295,9 +4255,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.87"
+version = "0.2.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dee495e55982a3bd48105a7b947fd2a9b4a8ae3010041b9e0faab3f9cd028f1d"
+checksum = "585c4c91a46b072c92e908d99cb1dcdf95c5218eeb6f3bf1efa991ee7a68cccf"
 dependencies = [
  "quote",
  "wasm-bindgen-macro-support",
@@ -4305,9 +4265,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.87"
+version = "0.2.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "54681b18a46765f095758388f2d0cf16eb8d4169b639ab575a8f5693af210c7b"
+checksum = "afc340c74d9005395cf9dd098506f7f44e38f2b4a21c6aaacf9a105ea5e1e836"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -4318,9 +4278,9 @@ dependencies = [
 
 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.87"
+version = "0.2.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ca6ad05a4870b2bf5fe995117d3728437bd27d7cd5f06f13c17443ef369775a1"
+checksum = "c62a0a307cb4a311d3a07867860911ca130c3494e8c2719593806c08bc5d0484"
 
 [[package]]
 name = "wasm-streams"
@@ -4674,17 +4634,6 @@ dependencies = [
  "zeroize",
 ]
 
-[[package]]
-name = "x509-cert"
-version = "0.2.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "25eefca1d99701da3a57feb07e5079fc62abba059fc139e98c13bbb250f3ef29"
-dependencies = [
- "const-oid",
- "der",
- "spki",
-]
-
 [[package]]
 name = "xmlwriter"
 version = "0.1.0"
diff --git a/Cargo.toml b/Cargo.toml
index 563b53b7..48e47290 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -34,10 +34,8 @@ futures-util = "0.3"
 imbl = { version = "3.0.0", features = ["serde"] }  # same as matrix-sdk-ui
 imghdr = "0.7.0"
 linkify = "0.10.0"
-# matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk", default-features = false, features = [ "experimental-sliding-sync", "e2e-encryption", "automatic-room-key-forwarding", "markdown", "sqlite", "rustls-tls", "bundled-sqlite" ] }
-matrix-sdk = { git = "https://github.com/project-robius/matrix-rust-sdk", branch = "re-export-reactions-type", default-features = false, features = [ "experimental-sliding-sync", "e2e-encryption", "automatic-room-key-forwarding", "markdown", "sqlite", "rustls-tls", "bundled-sqlite" ] }
-# matrix-sdk-ui = { git = "https://github.com/matrix-org/matrix-rust-sdk", default-features = false, features = [ "e2e-encryption", "rustls-tls" ] }
-matrix-sdk-ui = { git = "https://github.com/project-robius/matrix-rust-sdk", branch = "re-export-reactions-type", default-features = false, features = [ "e2e-encryption", "rustls-tls" ] }
+matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk", default-features = false, features = [ "experimental-sliding-sync", "e2e-encryption", "automatic-room-key-forwarding", "markdown", "sqlite", "rustls-tls", "bundled-sqlite" ] }
+matrix-sdk-ui = { git = "https://github.com/matrix-org/matrix-rust-sdk", default-features = false, features = [ "rustls-tls" ] }
 rand = "0.8.5"
 rangemap = "1.5.0"
 serde = "1.0"
diff --git a/src/home/room_preview.rs b/src/home/room_preview.rs
index 730cfa43..b8212b41 100644
--- a/src/home/room_preview.rs
+++ b/src/home/room_preview.rs
@@ -40,7 +40,7 @@ live_design! {
                 font_size: 7.5
             },
         }
-        text: "[Timestamp unknown]"
+        text: "??"
     }
 
     MessagePreview = <View> {
@@ -48,6 +48,7 @@ live_design! {
         flow: Down, spacing: 5.
 
         latest_message = <HtmlOrPlaintext> {
+            padding: {top: 3.0}
             html_view = { html = {
                 font_size: 9.3, line_spacing: 1.,
                 draw_normal:      { text_style: { font_size: 9.3, line_spacing: 1. } },
@@ -60,7 +61,7 @@ live_design! {
                 draw_text: {
                     text_style: { font_size: 9.5, line_spacing: 1. },
                 }
-                text: "[Latest message unknown]"
+                text: "[Loading latest message]"
             } }
         }
     }
@@ -301,6 +302,7 @@ impl RoomPreviewContent {
             live!(
                     html_view = {
                         html = {
+                            font_color: (message_text_color),
                             draw_normal:      { color: (message_text_color) },
                             draw_italic:      { color: (message_text_color) },
                             draw_bold:        { color: (message_text_color) },
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 518382dc..a1f54fe7 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,36 +1,40 @@
 //! 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, HashMap}, ops::{DerefMut, Range}, sync::{Arc, Mutex}, time::Instant};
 
 use imbl::Vector;
 use makepad_widgets::*;
-use matrix_sdk::{ruma::{
-    events::room::{
-        message::{ImageMessageEventContent, MessageFormat, MessageType, RoomMessageEventContent, TextMessageEventContent}, MediaSource
+use matrix_sdk::{
+    ruma::{
+        events::room::{
+            message::{
+                ImageMessageEventContent, MessageFormat, MessageType, RoomMessageEventContent,
+                TextMessageEventContent,
+            },
+            MediaSource,
+        },
+        matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId, UserId
     },
-    matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId, UserId
-}, OwnedServerName};
+    OwnedServerName,
+};
 use matrix_sdk_ui::timeline::{
-    self, EventTimelineItem, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange,
-    TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem,
+    self, EventTimelineItem, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo,
+    RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind,
+    VirtualTimelineItem,
 };
 
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry},
-    event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item},
-    media_cache::{MediaCache, MediaCacheEntry},
-    profile::{
+    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
-    },
-    shared::{
+    }, shared::{
         avatar::{AvatarRef, AvatarWidgetRefExt},
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
+        typing_animation::TypingAnimationWidgetExt,
     },
-    sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest},
-    utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
+    sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
     home::room_read_receipt::*
 };
 use rangemap::RangeSet;
@@ -48,6 +52,7 @@ live_design! {
     import crate::shared::html_or_plaintext::*;
     import crate::home::room_read_receipt::*;
     import crate::profile::user_profile::UserProfileSlidingPane;
+    import crate::shared::typing_animation::TypingAnimation;
 
     IMG_DEFAULT_AVATAR = dep("crate://self/resources/img/default_avatar.png")
     ICO_FAV = dep("crate://self/resources/icon_favorite.svg")
@@ -210,6 +215,7 @@ live_design! {
 
         // A reply preview with a vertical bar drawn in the background.
         replied_to_message_content = <ReplyPreviewContent> {
+            cursor: Hand
             show_bg: true
             draw_bg: {
                 instance vertical_bar_color: (USERNAME_TEXT_COLOR)
@@ -277,12 +283,14 @@ live_design! {
         visible: false,
         width: Fill,
         height: Fit,
+        padding: {top: 5.0}
 
         html_content = <RobrixHtml> {
             width: Fill,
             height: Fit,
             padding: { bottom: 5.0, top: 0.0 },
             font_size: 10.5,
+            font_color: (REACTION_TEXT_COLOR),
             draw_normal:      { color: (REACTION_TEXT_COLOR) },
             draw_italic:      { color: (REACTION_TEXT_COLOR) },
             draw_bold:        { color: (REACTION_TEXT_COLOR) },
@@ -355,7 +363,6 @@ live_design! {
         // A preview of the earlier message that this message was in reply to.
         replied_to_message = <RepliedToMessage> {
             flow: Right
-            cursor: Hand
             margin: { bottom: 5.0, top: 10.0 }
             replied_to_message_content = {
                 margin: { left: 29 }
@@ -630,11 +637,12 @@ live_design! {
         flow: Overlay,
 
         list = <PortalList> {
-            auto_tail: true, // set to `true` to lock the view to the last item.
             height: Fill,
             width: Fill
             flow: Down
 
+            auto_tail: true, // set to `true` to lock the view to the last item.
+
             // Below, we must place all of the possible templates (views) that can be used in the portal list.
             Message = <Message> {}
             CondensedMessage = <CondensedMessage> {}
@@ -787,14 +795,16 @@ live_design! {
                     }
 
                     typing_label = <Label> {
+                        align: {x: 0.0, y: 0.5},
+                        padding: {left: 5.0}
                         draw_text: {
-                            color: #121570,
+                            color: (TYPING_NOTICE_TEXT_COLOR),
                             text_style: <REGULAR_TEXT>{font_size: 9}
                         }
                         text: "Someone is typing..."
                     }
 
-                    // TODO: add a bouncing/moving ellipsis animation after the list of typing users.
+                    typing_animation = <TypingAnimation> {}
                 }
 
                 // Below that, display a view that holds the message input bar and send button.
@@ -932,149 +942,90 @@ struct RoomScreen {
     #[rust] room_name: String,
     /// The UI-relevant states for the room that this widget is currently displaying.
     #[rust] tl_state: Option<TimelineUiState>,
+    /// 5 secs timer when scroll ends
+    #[rust] fully_read_timer: Timer,
 }
 
-impl Widget for RoomScreen {
-    // Handle events and actions for the RoomScreen widget and its inner Timeline view.
-    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
-        let widget_uid = self.widget_uid();
-        let pane = self.user_profile_sliding_pane(id!(user_profile_sliding_pane));
-
-        // Currently, a Signal event is only used to tell this widget
-        // that its timeline events have been updated in the background.
-        if let Event::Signal = event {
-            let portal_list = self.portal_list(id!(list));
-            let curr_first_id = portal_list.first_id();
-            let Some(tl) = self.tl_state.as_mut() else { return };
-
-            let mut done_loading = false;
-            while let Ok(update) = tl.update_receiver.try_recv() {
-                match update {
-                    TimelineUpdate::NewItems { items, changed_indices, clear_cache } => {
-                        if items.is_empty() {
-                            log!("Timeline::handle_event(): timeline was cleared for room {}", tl.room_id);
-
-                            // If the bottom of the timeline (the last event) is visible, then we should
-                            // set the timeline to live mode.
-                            // If the bottom of the timelien is *not* visible, then we should
-                            // set the timeline to Focused mode.
-
-                            // TODO: Save the event IDs of the top 3 items before we apply this update,
-                            //       which indicates this timeline is in the process of being restored,
-                            //       such that we can jump back to that position later after applying this update.
-
-                            // TODO: here we need to re-build the timeline via TimelineBuilder
-                            //       and set the TimelineFocus to one of the above-saved event IDs.
-
-                            // TODO: the docs for `TimelineBuilder::with_focus()` claim that the timeline's focus mode
-                            //       can be changed after creation, but I do not see any methods to actually do that.
-                            //       <https://matrix-org.github.io/matrix-rust-sdk/matrix_sdk_ui/timeline/struct.TimelineBuilder.html#method.with_focus>
-                            //
-                            //       As such, we probably need to create a new async request enum variant
-                            //       that tells the background async task to build a new timeline
-                            //       (either in live mode or focused mode around one or more events)
-                            //       and then replaces the existing timeline in ALL_ROOMS_INFO with the new one.
-                        }
-
-                        // Maybe todo?: we can often avoid the following loops that iterate over the `items` list
-                        //       by only doing that if `clear_cache` is true, or if `changed_indices` range includes
-                        //       any index that comes before (is less than) the above `curr_first_id`.
-
-                        if items.len() == tl.items.len() {
-                            // log!("Timeline::handle_event(): no jump necessary for updated timeline of same length: {}", items.len());
-                        }
-                        else if curr_first_id > items.len() {
-                            log!("Timeline::handle_event(): jumping to bottom: curr_first_id {} is out of bounds for {} new items", curr_first_id, items.len());
-                            portal_list.set_first_id_and_scroll(items.len().saturating_sub(1), 0.0);
-                            portal_list.set_tail_range(true);
-                        }
-                        else if let Some((curr_item_idx, new_item_idx, new_item_scroll, _event_id)) =
-                            find_new_item_matching_current_item(cx, &portal_list, curr_first_id, &tl.items, &items)
-                        {
-                            if curr_item_idx != new_item_idx {
-                                log!("Timeline::handle_event(): jumping view from event index {curr_item_idx} to new index {new_item_idx}, scroll {new_item_scroll}, event ID {_event_id}");
-                                portal_list.set_first_id_and_scroll(new_item_idx, new_item_scroll);
+impl RoomScreen{
+    fn send_user_read_receipts_based_on_scroll_pos(
+        &mut self,
+        cx: &mut Cx,
+        actions: &ActionsBuf,
+    ) {
+        let portal_list = self.portal_list(id!(list));
+        //stopped scrolling
+        if portal_list.scrolled(actions) {
+            return;
+        }
+        let first_index = portal_list.first_id();
+        
+        let Some(tl_state) = self.tl_state.as_mut() else { return };
+        let Some(room_id) = self.room_id.as_ref() else { return };
+        if let Some(ref mut index) = tl_state.prev_first_index {
+            // to detect change of scroll when scroll ends
+            if *index != first_index {  
+                // scroll changed         
+                self.fully_read_timer = cx.start_interval(5.0);
+                let time_now = std::time::Instant::now();
+                if first_index > *index {
+                    // Store visible event messages with current time into a hashmap
+                    let mut read_receipt_event = None;
+                    for r in first_index .. (first_index + portal_list.visible_items() + 1) {
+                        if let Some(v) = tl_state.items.get(r) {
+                            if let Some(e) = v.as_event().and_then(|f| f.event_id()) {
+                                read_receipt_event = Some(e.to_owned());
+                                if !tl_state.read_event_hashmap.contains_key(&e.to_string()) {
+                                    tl_state.read_event_hashmap.insert(
+                                        e.to_string(),
+                                        (room_id.clone(), e.to_owned(), time_now, false),
+                                    );
+                                }
                             }
                         }
-                        // TODO: after an (un)ignore user event, all timelines are cleared.
-                        //       To handle this, we must remember one or more currently-visible events across multiple updates
-                        //       such that we can jump back to the correct (current) position after enough updates have been received
-                        //       to restore the timeline to its previous position of at least one of the previously-existing events
-                        //       having also been found in the new items.
-                        //       --> Should we only do this if `clear_cache` is true? (e.g., after an (un)ignore event)
-                        //
-                        // else if tl.saved_state.first_event_id.as_deref() == Some(item_event_id) {
-                        //     log!("Timeline::handle_event(): jumping view from saved first event ID to index {idx}");
-                        //     portal_list.set_first_id_and_scroll(idx, scroll_from_first_id);
-                        //     break;
-                        // }
-                        else {
-                            warning!("!!! Couldn't find new event with matching ID for ANY event currently visible in the portal list");
-                        }
-
-                        if clear_cache {
-                            tl.content_drawn_since_last_update.clear();
-                            tl.profile_drawn_since_last_update.clear();
-                            tl.fully_paginated = false;
-                        } else {
-                            tl.content_drawn_since_last_update.remove(changed_indices.clone());
-                            tl.profile_drawn_since_last_update.remove(changed_indices.clone());
-                            // log!("Timeline::handle_event(): changed_indices: {changed_indices:?}, items len: {}\ncontent drawn: {:#?}\nprofile drawn: {:#?}", items.len(), tl.content_drawn_since_last_update, tl.profile_drawn_since_last_update);
-                        }
-                        tl.items = items;
-                    }
-                    TimelineUpdate::TimelineStartReached => {
-                        log!("Timeline::handle_event(): timeline start reached for room {}", tl.room_id);
-                        tl.fully_paginated = true;
-                        done_loading = true;
-                    }
-                    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,
-                        // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
                     }
-                    TimelineUpdate::MediaFetched => {
-                        log!("Timeline::handle_event(): media fetched for room {}", tl.room_id);
-                        // Here, to be most efficient, we could redraw only the media items in the timeline,
-                        // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
+                    if let Some(event_id) = read_receipt_event {
+                        submit_async_request(MatrixRequest::ReadReceipt { room_id: room_id.clone(), event_id });
                     }
-
-                    TimelineUpdate::TypingUsers { users } => {
-                        let typing_text = match users.as_slice() {
-                            [] => String::new(),
-                            [user] => format!("{user} is typing..."),
-                            [user1, user2] => format!("{user1} and {user2} are typing..."),
-                            [user1, user2, others @ ..] => {
-                                if others.len() > 1 {
-                                    format!("{user1}, {user2}, and {} are typing...", &others[0])
-                                } else {
-                                    format!("{user1}, {user2}, and {} others are typing...", others.len())
+                    let mut fully_read_receipt_event = None;
+                    // Implements sending fully read receipts when message is scrolled out of first row
+                    for r in *index..first_index {
+                        if let Some(v) = tl_state.items.get(r).clone() {
+                            if let Some(e) = v.as_event().and_then(|f| f.event_id()) {
+                                let mut to_remove = vec![];
+                                for (event_id_string, (_, event_id)) in &tl_state.marked_fully_read_queue {
+                                    if e == event_id {
+                                        fully_read_receipt_event = Some(event_id.clone());
+                                        to_remove.push(event_id_string.clone());
+                                    }
+                                }
+                                for r in to_remove {
+                                    tl_state.marked_fully_read_queue.remove(&r);
                                 }
                             }
-                        };
-                        self.view.view(id!(typing_notice)).set_visible(!users.is_empty());
-                        self.view.label(id!(typing_label)).set_text(&typing_text);
+                        }
+                    }
+                    if let Some(event_id) = fully_read_receipt_event {
+                        submit_async_request(MatrixRequest::FullyReadReceipt { room_id: room_id.clone(), event_id: event_id.clone()});
                     }
                 }
+                *index = first_index;
             }
+        } else {
+            tl_state.prev_first_index = Some(first_index);
+        }
+    }
+}
 
-            if done_loading {
-                log!("TODO: hide topspace loading animation for room {}", tl.room_id);
-
-                // TODO FIXME: hide TopSpace loading animation, set it to invisible.
-            }
+impl Widget for RoomScreen {
+    // Handle events and actions for the RoomScreen widget and its inner Timeline view.
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        let widget_uid = self.widget_uid();
+        let pane = self.user_profile_sliding_pane(id!(user_profile_sliding_pane));
 
-            self.redraw(cx);
+        // Currently, a Signal event is only used to tell this widget
+        // that its timeline events have been updated in the background.
+        if let Event::Signal = event {
+            self.process_timeline_updates(cx);
         }
 
         if let Event::Actions(actions) = event {
@@ -1099,72 +1050,60 @@ impl Widget for RoomScreen {
                         let Some(tl) = self.tl_state.as_mut() else {
                             continue;
                         };
-                        let tl_idx = item_id 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()),
-                                );
+
+                        if let Some(event_tl_item) = tl.items
+                            .get(item_id)
+                            .and_then(|tl_item| tl_item.as_event().cloned())
+                        {
+                            if let Ok(replied_to_info) = event_tl_item.replied_to_info() {
+                                self.show_replying_to(cx, (event_tl_item, replied_to_info));
                             }
                         }
                     }
-                    MessageAction::ReplyPreviewClicked(item_id) => {
+                    MessageAction::ReplyPreviewClicked { reply_message_item_id, replied_to_event } => {
                         let mut portal_list = self.portal_list(id!(list));
                         let Some(tl) = self.tl_state.as_mut() else {
                             continue;
                         };
-                        let tl_idx = item_id as usize;
-
-                        if let Some(details) = tl.items.get(tl_idx)
-                            .and_then(|item| item.as_event())
-                            .and_then(|event| event.content().as_message())
-                            .and_then(|message| message.in_reply_to())
-                        {
-                            // Attempt to find the index of replied-to message on the timeline.
-                            // Start from the current item's index (`tl_idx`)and search backwards,
-                            // since we know the replied-to message must come before the current item.
-                            let replied_to_msg_tl_index = tl.items
-                                .focus()
-                                .narrow(..tl_idx)
-                                .into_iter()
-                                .rposition(|i| i.as_event()
-                                    .and_then(|e| e.event_id())
-                                    .is_some_and(|ev_id| ev_id == details.event_id)
-                                );
-
-                            if let Some(index) = replied_to_msg_tl_index {
-                                let distance = (index as isize - portal_list.first_id() as isize).abs() as f64;
-                                let base_speed = 10.0;
-                                // apply a scaling based on the distance
-                                let scaled_speed = base_speed * (distance * distance);
-                                // Scroll to the message right before the replied-to message.
-                                // FIXME: `smooth_scroll_to` should accept a scroll offset parameter too,
-                                //       so that we can scroll to the replied-to message and have it
-                                //       appear beneath the top of the viewport.
-                                portal_list.smooth_scroll_to(cx, index - 1, scaled_speed);
-                                // start highlight animation.
-                                tl.message_highlight_animation_state = MessageHighlightAnimationState::Pending {
-                                    item_id: index
-                                };
-
-                                self.redraw(cx);
-                            } else {
-                                log!("TODO: the replied-to message was not yet available in the timeline.");
-                            }
+                        let tl_idx = reply_message_item_id as usize;
+
+                        // Attempt to find the index of replied-to message on the timeline.
+                        // Start from the current item's index (`tl_idx`)and search backwards,
+                        // since we know the replied-to message must come before the current item.
+                        let replied_to_msg_tl_index = tl.items
+                            .focus()
+                            .narrow(..tl_idx)
+                            .into_iter()
+                            .rposition(|i| i.as_event()
+                                .and_then(|e| e.event_id())
+                                .is_some_and(|ev_id| ev_id == &replied_to_event)
+                            );
+
+                        if let Some(index) = replied_to_msg_tl_index {
+                            let distance = (index as isize - portal_list.first_id() as isize).abs() as f64;
+                            let base_speed = 10.0;
+                            // apply a scaling based on the distance
+                            let scaled_speed = base_speed * (distance * distance);
+                            // Scroll to the message right before the replied-to message.
+                            // FIXME: `smooth_scroll_to` should accept a scroll offset parameter too,
+                            //       so that we can scroll to the replied-to message and have it
+                            //       appear beneath the top of the viewport.
+                            portal_list.smooth_scroll_to(cx, index - 1, scaled_speed);
+                            // start highlight animation.
+                            tl.message_highlight_animation_state = MessageHighlightAnimationState::Pending {
+                                item_id: index
+                            };
+                            self.redraw(cx);
+                        } else {
+                            log!("TODO: the replied-to message was not yet available in the timeline.");
                         }
                     }
                     _ => {}
                 }
 
-                // Handle the highlight animation. 
+                // Handle the highlight animation.
                 let portal_list = self.portal_list(id!(list));
-                let Some(tl) = self.tl_state.as_mut() else {
-                    return;
-                };
+                let Some(tl) = self.tl_state.as_mut() else { return };
                 if let MessageHighlightAnimationState::Pending { item_id } = tl.message_highlight_animation_state {
                     if portal_list.smooth_scroll_reached(actions) {
                         cx.widget_action(
@@ -1178,19 +1117,8 @@ impl Widget for RoomScreen {
                     }
                 }
 
-                // Handle message reply action
-                if let TimelineAction::MessageReply(message_to_reply_to) = action.as_widget_action().cast() {
-                    if let Ok(replied_to_info) = message_to_reply_to.replied_to_info() {
-                        self.show_replying_to(cx, (message_to_reply_to, replied_to_info));
-                    } else {
-                        error!("Failed to get replied-to info for message {:?}", message_to_reply_to);
-                    }
-                }
-
                 // Handle the action that requests to show the user profile sliding pane.
-                if let ShowUserProfileAction::ShowUserProfile(profile_and_room_id) =
-                    action.as_widget_action().cast()
-                {
+                if let ShowUserProfileAction::ShowUserProfile(profile_and_room_id) = action.as_widget_action().cast() {
                     self.show_user_profile(
                         cx,
                         &pane,
@@ -1216,7 +1144,6 @@ impl Widget for RoomScreen {
                                 } else {
                                     log!("TODO: fetch and display room preview for room {}", room_id);
                                 }
-
                                 true
                             }
                             MatrixId::RoomAlias(room_alias) => {
@@ -1282,6 +1209,9 @@ impl Widget for RoomScreen {
                 }
             }
 
+            // Handle sending any read receipts for the current logged-in user.
+            self.send_user_read_receipts_based_on_scroll_pos(cx, actions);
+
             // Handle the cancel reply button being clicked.
             if self.button(id!(cancel_reply_button)).clicked(&actions) {
                 self.clear_replying_to();
@@ -1347,6 +1277,19 @@ impl Widget for RoomScreen {
             }
         }
 
+        // Mark events as fully read after they have been displayed on screen for 5 seconds.
+        if self.fully_read_timer.is_event(event).is_some() {
+            if let (Some(ref mut tl_state), Some(ref _room_id)) = (&mut self.tl_state, &self.room_id) {
+                for (k, (room, event, start, ref mut moved_to_queue)) in &mut tl_state.read_event_hashmap {
+                    if start.elapsed() > std::time::Duration::new(5, 0) && !*moved_to_queue{
+                        tl_state.marked_fully_read_queue.insert(k.clone(), (room.clone(), event.clone()));
+                        *moved_to_queue = true;
+                    }
+                }
+            }
+            cx.stop_timer(self.fully_read_timer);
+        }
+
         // Only forward visibility-related events (touch/tap/scroll) to the inner timeline view
         // if the user profile sliding pane is not visible.
         if event.requires_visibility() && pane.is_currently_shown(cx) {
@@ -1357,7 +1300,6 @@ impl Widget for RoomScreen {
             // Forward the event to the inner timeline view.
             self.view.handle_event(cx, event, scope);
         }
-
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
@@ -1458,7 +1400,7 @@ impl Widget for RoomScreen {
                         }
                         TimelineItemKind::Virtual(VirtualTimelineItem::DayDivider(millis)) => {
                             let item = list.item(cx, item_id, live_id!(DayDivider)).unwrap();
-                            let text = unix_time_millis_to_datetime(millis)
+                            let text = unix_time_millis_to_datetime(&millis)
                                 // format the time as a shortened date (Sat, Sept 5, 2021)
                                 .map(|dt| format!("{}", dt.date_naive().format("%a %b %-d, %Y")))
                                 .unwrap_or_else(|| format!("{:?}", millis));
@@ -1473,10 +1415,10 @@ impl Widget for RoomScreen {
 
                     // Now that we've drawn the item, add its index to the set of drawn items.
                     if item_new_draw_status.content_drawn {
-                        tl_state.content_drawn_since_last_update.insert(tl_idx .. tl_idx+1);
+                        tl_state.content_drawn_since_last_update.insert(tl_idx .. tl_idx + 1);
                     }
                     if item_new_draw_status.profile_drawn {
-                        tl_state.profile_drawn_since_last_update.insert(tl_idx .. tl_idx+1);
+                        tl_state.profile_drawn_since_last_update.insert(tl_idx .. tl_idx + 1);
                     }
                     item
                 };
@@ -1488,8 +1430,162 @@ impl Widget for RoomScreen {
     }
 }
 
-
 impl RoomScreen {
+    /// Processes all pending background updates to the currently-shown timeline.
+    ///
+    /// Redraws this RoomScreen view if any updates were applied.
+    fn process_timeline_updates(&mut self, cx: &mut Cx) {
+        let portal_list = self.portal_list(id!(list));
+        let curr_first_id = portal_list.first_id();
+        let Some(tl) = self.tl_state.as_mut() else { return };
+
+        let mut done_loading = false;
+        let mut num_updates = 0;
+        while let Ok(update) = tl.update_receiver.try_recv() {
+            num_updates += 1;
+            match update {
+                TimelineUpdate::NewItems { new_items, changed_indices, clear_cache } => {
+                    if new_items.is_empty() {
+                        if !tl.items.is_empty() {
+                            log!("Timeline::handle_event(): timeline (had {} items) was cleared for room {}", tl.items.len(), tl.room_id);
+                        }
+
+                        // If the bottom of the timeline (the last event) is visible, then we should
+                        // set the timeline to live mode.
+                        // If the bottom of the timeline is *not* visible, then we should
+                        // set the timeline to Focused mode.
+
+                        // TODO: Save the event IDs of the top 3 items before we apply this update,
+                        //       which indicates this timeline is in the process of being restored,
+                        //       such that we can jump back to that position later after applying this update.
+
+                        // TODO: here we need to re-build the timeline via TimelineBuilder
+                        //       and set the TimelineFocus to one of the above-saved event IDs.
+
+                        // TODO: the docs for `TimelineBuilder::with_focus()` claim that the timeline's focus mode
+                        //       can be changed after creation, but I do not see any methods to actually do that.
+                        //       <https://matrix-org.github.io/matrix-rust-sdk/matrix_sdk_ui/timeline/struct.TimelineBuilder.html#method.with_focus>
+                        //
+                        //       As such, we probably need to create a new async request enum variant
+                        //       that tells the background async task to build a new timeline
+                        //       (either in live mode or focused mode around one or more events)
+                        //       and then replaces the existing timeline in ALL_ROOMS_INFO with the new one.
+                    }
+
+                    // Maybe todo?: we can often avoid the following loops that iterate over the `items` list
+                    //       by only doing that if `clear_cache` is true, or if `changed_indices` range includes
+                    //       any index that comes before (is less than) the above `curr_first_id`.
+
+                    if new_items.len() == tl.items.len() {
+                        // log!("Timeline::handle_event(): no jump necessary for updated timeline of same length: {}", items.len());
+                    }
+                    else if curr_first_id > new_items.len() {
+                        log!("Timeline::handle_event(): jumping to bottom: curr_first_id {} is out of bounds for {} new items", curr_first_id, new_items.len());
+                        portal_list.set_first_id_and_scroll(new_items.len().saturating_sub(1), 0.0);
+                        portal_list.set_tail_range(true);
+                    }
+                    else if let Some((curr_item_idx, new_item_idx, new_item_scroll, _event_id)) =
+                        find_new_item_matching_current_item(cx, &portal_list, curr_first_id, &tl.items, &new_items)
+                    {
+                        if curr_item_idx != new_item_idx {
+                            log!("Timeline::handle_event(): jumping view from event index {curr_item_idx} to new index {new_item_idx}, scroll {new_item_scroll}, event ID {_event_id}");
+                            portal_list.set_first_id_and_scroll(new_item_idx, new_item_scroll);
+                            tl.prev_first_index = Some(new_item_idx);
+                            cx.stop_timer(self.fully_read_timer);
+                        }
+                    }
+                    // TODO: after an (un)ignore user event, all timelines are cleared.
+                    //       To handle this, we must remember one or more currently-visible events across multiple updates
+                    //       such that we can jump back to the correct (current) position after enough updates have been received
+                    //       to restore the timeline to its previous position of at least one of the previously-existing events
+                    //       having also been found in the new items.
+                    //       --> Should we only do this if `clear_cache` is true? (e.g., after an (un)ignore event)
+                    //
+                    // else if tl.saved_state.first_event_id.as_deref() == Some(item_event_id) {
+                    //     log!("Timeline::handle_event(): jumping view from saved first event ID to index {idx}");
+                    //     portal_list.set_first_id_and_scroll(idx, scroll_from_first_id);
+                    //     break;
+                    // }
+                    else {
+                        warning!("!!! Couldn't find new event with matching ID for ANY event currently visible in the portal list");
+                    }
+
+                    if clear_cache {
+                        tl.content_drawn_since_last_update.clear();
+                        tl.profile_drawn_since_last_update.clear();
+                        tl.fully_paginated = false;
+                    } else {
+                        tl.content_drawn_since_last_update.remove(changed_indices.clone());
+                        tl.profile_drawn_since_last_update.remove(changed_indices.clone());
+                        // log!("Timeline::handle_event(): changed_indices: {changed_indices:?}, items len: {}\ncontent drawn: {:#?}\nprofile drawn: {:#?}", items.len(), tl.content_drawn_since_last_update, tl.profile_drawn_since_last_update);
+                    }
+                    tl.items = new_items;
+                }
+                TimelineUpdate::TimelineStartReached => {
+                    log!("Timeline::handle_event(): timeline start reached for room {}", tl.room_id);
+                    tl.fully_paginated = true;
+                    done_loading = true;
+                }
+                TimelineUpdate::PaginationIdle => {
+                    done_loading = true;
+                }
+                TimelineUpdate::EventDetailsFetched {event_id, 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,
+                    // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
+                }
+                TimelineUpdate::MediaFetched => {
+                    log!("Timeline::handle_event(): media fetched for room {}", tl.room_id);
+                    // Here, to be most efficient, we could redraw only the media items in the timeline,
+                    // but for now we just fall through and let the final `redraw()` call re-draw the whole timeline view.
+                }
+
+                TimelineUpdate::TypingUsers { users } => {
+                    let typing_text = match users.as_slice() {
+                        [] => String::new(),
+                        [user] => format!("{user} is typing "),
+                        [user1, user2] => format!("{user1} and {user2} are typing "),
+                        [user1, user2, others @ ..] => {
+                            if others.len() > 1 {
+                                format!("{user1}, {user2}, and {} are typing ", &others[0])
+                            } else {
+                                format!(
+                                    "{user1}, {user2}, and {} others are typing ",
+                                    others.len()
+                                )
+                            }
+                        }
+                    };
+                    let is_typing = !users.is_empty();
+                    self.view.view(id!(typing_notice)).set_visible(is_typing);
+                    self.view.label(id!(typing_label)).set_text(&typing_text);
+                    let typing_animation = self.view.typing_animation(id!(typing_animation));
+                    if is_typing {
+                        typing_animation.animate(cx);
+                    } else {
+                        typing_animation.stop_animation();
+                    }
+                }
+            }
+        }
+
+        if done_loading {
+            log!("TODO: hide topspace loading animation for room {}", tl.room_id);
+            // TODO FIXME: hide TopSpace loading animation, set it to invisible.
+        }
+        if num_updates > 0 {
+            // log!("Applied {} timeline updates for room {}, redrawing with {} items...", num_updates, tl.room_id, tl.items.len());
+            self.redraw(cx);
+        }
+    }
+
     /// Shows the user profile sliding pane with the given avatar info.
     fn show_user_profile(
         &mut self,
@@ -1544,7 +1640,6 @@ impl RoomScreen {
         self.redraw(cx);
     }
 
-
     /// Clears (and makes invisible) the preview of the message
     /// that the user is currently replying to.
     fn clear_replying_to(&mut self) {
@@ -1559,12 +1654,13 @@ impl RoomScreen {
     fn show_timeline(&mut self, cx: &mut Cx) {
         let room_id = self.room_id.clone()
             .expect("BUG: Timeline::show_timeline(): no room_id was set.");
-        assert!( // just an optional sanity check
-            self.tl_state.is_none(),
+        // just an optional sanity check
+        assert!(self.tl_state.is_none(),
             "BUG: tried to show_timeline() into a timeline with existing state. \
             Did you forget to save the timeline state back to the global map of states?",
         );
 
+
         let (mut tl_state, first_time_showing_room) = if let Some(existing) = TIMELINE_STATES.lock().unwrap().remove(&room_id) {
             (existing, false)
         } else {
@@ -1582,6 +1678,9 @@ impl RoomScreen {
                 replying_to: None,
                 saved_state: SavedState::default(),
                 message_highlight_animation_state: MessageHighlightAnimationState::default(),
+                prev_first_index: None,
+                read_event_hashmap: HashMap::new(),
+                marked_fully_read_queue: HashMap::new(),
             };
             (new_tl_state, true)
         };
@@ -1618,9 +1717,16 @@ impl RoomScreen {
         // Now, restore the visual state of this timeline from its previously-saved state.
         self.restore_state(cx, &mut tl_state);
 
-        // As the final step , store the tl_state for this room into the Timeline widget,
+        // As the final step, store the tl_state for this room into the Timeline widget,
         // such that it can be accessed in future event/draw handlers.
         self.tl_state = Some(tl_state);
+
+        // Now we can process any background updates and redraw the timeline.
+        if first_time_showing_room {
+            self.process_timeline_updates(cx);
+        }
+    
+        self.redraw(cx);
     }
 
     /// Invoke this when this timeline is being hidden or no longer being shown,
@@ -1628,12 +1734,10 @@ impl RoomScreen {
     fn hide_timeline(&mut self) {
         if let Some(room_id) = self.room_id.clone() {
             self.save_state();
-            submit_async_request(
-                MatrixRequest::SubscribeToTypingNotices {
-                    room_id,
-                    subscribe: false,
-                }
-            );
+            submit_async_request(MatrixRequest::SubscribeToTypingNotices {
+                room_id,
+                subscribe: false,
+            });
         }
     }
 
@@ -1651,10 +1755,7 @@ impl RoomScreen {
         let first_index = portal_list.first_id();
         let message_input_box = self.text_input(id!(message_input));
         let state = SavedState {
-            first_index_and_scroll: Some((
-                first_index,
-                portal_list.scroll_position(),
-            )),
+            first_index_and_scroll: Some((first_index, portal_list.scroll_position())),
             first_event_id: tl.items
                 .get(first_index)
                 .and_then(|item| item
@@ -1690,7 +1791,8 @@ impl RoomScreen {
         }
 
         let saved_message_input_state = std::mem::take(message_input_state);
-        self.text_input(id!(message_input)).restore_state(saved_message_input_state);
+        self.text_input(id!(message_input))
+            .restore_state(saved_message_input_state);
         if let Some(replying_to_event) = replying_to.take() {
             self.show_replying_to(cx, replying_to_event);
         } else {
@@ -1718,16 +1820,11 @@ impl RoomScreen {
 impl RoomScreenRef {
     /// See [`RoomScreen::set_displayed_room()`].
     pub fn set_displayed_room(&self, cx: &mut Cx, room_name: String, room_id: OwnedRoomId) {
-        let Some(mut room_screen) = self.borrow_mut() else { return };
-        room_screen.set_displayed_room(cx, room_name, room_id);
+        let Some(mut inner) = self.borrow_mut() else { return };
+        inner.set_displayed_room(cx, room_name, room_id);
     }
 }
 
-#[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.
@@ -1735,7 +1832,7 @@ pub enum TimelineUpdate {
     /// The content of a room's timeline was updated in the background.
     NewItems {
         /// The entire list of timeline items (events) for a room.
-        items: Vector<Arc<TimelineItem>>,
+        new_items: Vector<Arc<TimelineItem>>,
         /// The range of indices in the `items` list that have been changed in this update
         /// and thus must be removed from any caches of drawn items in the timeline.
         /// Any items outside of this range are assumed to be unchanged and need not be redrawn.
@@ -1834,6 +1931,10 @@ struct TimelineUiState {
     /// Once the scrolling is started, the state becomes Pending.
     /// If the animation was trigged, the state goes back to Off.
     message_highlight_animation_state: MessageHighlightAnimationState,
+
+    prev_first_index: Option<usize>,
+    read_event_hashmap: HashMap<String, (OwnedRoomId, OwnedEventId, Instant, bool)>,
+    marked_fully_read_queue: HashMap<String, (OwnedRoomId, OwnedEventId)>,
 }
 
 /// The item index, scroll position, and optional unique IDs of the first `N` events
@@ -1859,10 +1960,9 @@ struct ItemIndexScroll {
     scroll: f64,
 }
 
-
 #[derive(Default, Debug)]
 enum MessageHighlightAnimationState {
-    Pending { item_id: usize, },
+    Pending { item_id: usize },
     #[default]
     Off,
 }
@@ -1887,7 +1987,6 @@ struct SavedState {
     replying_to: Option<(EventTimelineItem, RepliedToInfo)>,
 }
 
-
 /// Returns info about the item in the list of `new_items` that matches the event ID
 /// of a visible item in the given `curr_items` list.
 ///
@@ -1928,7 +2027,8 @@ fn find_new_item_matching_current_item(
         let Some(event_id) = new_item.as_event().and_then(|ev| ev.event_id()) else {
             continue;
         };
-        if let Some((idx_curr, _)) = curr_items_with_ids.iter()
+        if let Some((idx_curr, _)) = curr_items_with_ids
+            .iter()
             .find(|(_, ev_id)| ev_id == &event_id)
         {
             // Not all items in the portal list are guaranteed to have a position offset,
@@ -1944,7 +2044,6 @@ fn find_new_item_matching_current_item(
     None
 }
 
-
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 struct ItemDrawnStatus {
     /// Whether the profile info (avatar and displayable username) were drawn for this item.
@@ -1955,15 +2054,20 @@ struct ItemDrawnStatus {
 impl ItemDrawnStatus {
     /// Returns a new `ItemDrawnStatus` with both `profile_drawn` and `content_drawn` set to `false`.
     const fn new() -> Self {
-        Self { profile_drawn: false, content_drawn: false }
+        Self {
+            profile_drawn: false,
+            content_drawn: false,
+        }
     }
     /// Returns a new `ItemDrawnStatus` with both `profile_drawn` and `content_drawn` set to `true`.
     const fn both_drawn() -> Self {
-        Self { profile_drawn: true, content_drawn: true }
+        Self {
+            profile_drawn: true,
+            content_drawn: true,
+        }
     }
 }
 
-
 /// Creates, populates, and adds a Message liveview widget to the given `PortalList`
 /// with the given `item_id`.
 ///
@@ -1993,8 +2097,9 @@ fn populate_message_view(
         Some(TimelineItemKind::Event(prev_event_tl_item)) => match prev_event_tl_item.content() {
             TimelineItemContent::Message(_prev_msg) => {
                 let prev_msg_sender = prev_event_tl_item.sender();
-                prev_msg_sender == event_tl_item.sender() &&
-                    ts_millis.0.checked_sub(prev_event_tl_item.timestamp().0)
+                prev_msg_sender == event_tl_item.sender()
+                    && ts_millis.0
+                        .checked_sub(prev_event_tl_item.timestamp().0)
                         .map_or(false, |d| d < uint!(600000)) // 10 mins in millis
             }
             _ => false,
@@ -2023,17 +2128,7 @@ fn populate_message_view(
                     &item.html_or_plaintext(id!(content.message)),
                     text,
                 );
-                let is_reply_fully_drawn = draw_replied_to_message(
-                    cx,
-                    &item.view(id!(replied_to_message)),
-                    room_id,
-                    message,
-                    event_tl_item.event_id(),
-                );
-                draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
-                // We're done drawing the message content, so mark it as fully drawn
-                // *if and only if* the reply preview was also fully drawn.
-                new_drawn_status.content_drawn = is_reply_fully_drawn;
+                new_drawn_status.content_drawn = true;
                 (item, false)
             }
         }
@@ -2047,24 +2142,13 @@ fn populate_message_view(
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
-                  // Draw the ReplyPreview and reactions, if any are present.
-                  let is_reply_fully_drawn = draw_replied_to_message(
-                    cx,
-                    &item.view(id!(replied_to_message)),
-                    room_id,
-                    message,
-                    event_tl_item.event_id(),
-                );
-                draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
                 let is_image_fully_drawn = populate_image_message_content(
                     cx,
                     &item.text_or_image(id!(content.message)),
                     image,
                     media_cache,
                 );
-                // Mark the content as fully drawn if *both* the image content
-                // *and* the reply preview were fully drawn.
-                new_drawn_status.content_drawn = is_image_fully_drawn && is_reply_fully_drawn;
+                new_drawn_status.content_drawn = is_image_fully_drawn;
                 (item, false)
             }
         }
@@ -2074,24 +2158,35 @@ fn populate_message_view(
                 (item, true)
             } else {
                 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.view(id!(replied_to_message)),
-                    room_id,
-                    message,
-                    event_tl_item.event_id(),
-                );
-                draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
-                new_drawn_status.content_drawn = is_reply_fully_drawn;
+                item.label(id!(content.message))
+                    .set_text(&format!("[TODO {kind:?}] {}", other.body()));
+                new_drawn_status.content_drawn = true;
                 (item, false)
             }
         }
     };
 
+    let mut replied_to_event_id = None;
+
+    // If we didn't use a cached item, we need to draw all other message content: the reply preview and reactions.
+    if !used_cached_item {
+        draw_reactions(cx, &item, event_tl_item.reactions(), item_id);
+        let (is_reply_fully_drawn, replied_to_ev_id) = draw_replied_to_message(
+            cx,
+            &item.view(id!(replied_to_message)),
+            room_id,
+            message,
+            event_tl_item.event_id(),
+        );
+        replied_to_event_id = replied_to_ev_id;
+        // The content is only considered to be fully drawn if the logic above marked it as such
+        // *and* if the reply preview was also fully drawn.
+        new_drawn_status.content_drawn &= is_reply_fully_drawn;
+    }
+
     // If `used_cached_item` is false, we should always redraw the profile, even if profile_drawn is true.
-    let skip_draw_profile = use_compact_view || (used_cached_item && item_drawn_status.profile_drawn);
+    let skip_draw_profile =
+        use_compact_view || (used_cached_item && item_drawn_status.profile_drawn);
     if skip_draw_profile {
         // log!("\t --> populate_message_view(): SKIPPING profile draw for item_id: {item_id}");
         new_drawn_status.profile_drawn = true;
@@ -2109,16 +2204,18 @@ 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 we've previously drawn the item content, skip all other steps.
     if used_cached_item && item_drawn_status.content_drawn && item_drawn_status.profile_drawn {
         return (item, new_drawn_status);
     }
 
+    // Set the Message widget's metatdata for reply-handling purposes.
+    item.as_message().set_data(
+        event_tl_item.can_be_replied_to(),
+        item_id,
+        replied_to_event_id,
+    );
+
     // Set the timestamp.
     if let Some(dt) = unix_time_millis_to_datetime(&ts_millis) {
         // format as AM/PM 12-hour time
@@ -2134,20 +2231,21 @@ fn populate_message_view(
     (item, new_drawn_status)
 }
 
-
 /// Draws the Html or plaintext body of the given message `text` into the `message_content_widget`.
 fn populate_text_message_content(
     message_content_widget: &HtmlOrPlaintextRef,
     text_content: &TextMessageEventContent,
 ) {
-    if let Some(formatted_body) = text_content.formatted.as_ref()
+    if let Some(formatted_body) = text_content
+        .formatted
+        .as_ref()
         .and_then(|fb| (fb.format == MessageFormat::Html).then(|| fb.body.clone()))
     {
         message_content_widget.show_html(utils::linkify(formatted_body.as_ref()));
     } else {
         match utils::linkify(&text_content.body) {
             Cow::Owned(linkified_html) => message_content_widget.show_html(&linkified_html),
-            Cow::Borrowed(plaintext)   => message_content_widget.show_plaintext(plaintext),
+            Cow::Borrowed(plaintext) => message_content_widget.show_plaintext(plaintext),
         }
     }
 }
@@ -2165,7 +2263,9 @@ fn populate_image_message_content(
     // We also don't trust the provided mimetype, as it can be incorrect.
     let (_mimetype, _width, _height) = if let Some(info) = image.info.as_ref() {
         (
-            info.mimetype.as_deref().and_then(utils::ImageFormat::from_mimetype),
+            info.mimetype
+                .as_deref()
+                .and_then(utils::ImageFormat::from_mimetype),
             info.width,
             info.height,
         )
@@ -2178,10 +2278,10 @@ fn populate_image_message_content(
             // now that we've obtained the image URI and its metadata, try to fetch the image.
             match media_cache.try_get_media_or_fetch(mxc_uri.clone(), None) {
                 MediaCacheEntry::Loaded(data) => {
-                    let show_image_result = text_or_image_ref.show_image(|img|
+                    let show_image_result = text_or_image_ref.show_image(|img| {
                         utils::load_png_or_jpg(&img, cx, &data)
                             .map(|()| img.size_in_pixels(cx).unwrap())
-                    );
+                    });
                     if let Err(e) = show_image_result {
                         let err_str = format!("Failed to display image: {e:?}");
                         error!("{err_str}");
@@ -2197,7 +2297,8 @@ fn populate_image_message_content(
                     false
                 }
                 MediaCacheEntry::Failed => {
-                    text_or_image_ref.set_text(&format!("Failed to fetch image from {:?}", mxc_uri));
+                    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.
                     true
@@ -2205,7 +2306,10 @@ fn populate_image_message_content(
             }
         }
         MediaSource::Encrypted(encrypted) => {
-            text_or_image_ref.set_text(&format!("[TODO] fetch encrypted image at {:?}", encrypted.url));
+            text_or_image_ref.set_text(&format!(
+                "[TODO] fetch encrypted image at {:?}",
+                encrypted.url
+            ));
             // We consider this as "fully drawn" since we don't yet support encryption,
             // but *only if* the reply preview was also fully drawn.
             true
@@ -2213,7 +2317,6 @@ fn populate_image_message_content(
     }
 }
 
-
 /// 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,
@@ -2227,17 +2330,21 @@ fn draw_replied_to_message(
     room_id: &RoomId,
     message: &timeline::Message,
     message_event_id: Option<&EventId>,
-) -> bool {
+) -> (bool, Option<OwnedEventId>) {
     let fully_drawn: bool;
     let show_reply: bool;
+    let mut replied_to_event_id = None;
 
     if let Some(in_reply_to_details) = message.in_reply_to() {
+        replied_to_event_id = Some(in_reply_to_details.event_id.to_owned());
         show_reply = true;
+
         match &in_reply_to_details.event {
             TimelineDetails::Ready(replied_to_event) => {
                 let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
                     cx,
-                    replied_to_message_view.avatar(id!(replied_to_message_content.reply_preview_avatar)),
+                    replied_to_message_view
+                        .avatar(id!(replied_to_message_content.reply_preview_avatar)),
                     room_id,
                     replied_to_event.sender(),
                     replied_to_event.sender_profile(),
@@ -2300,10 +2407,9 @@ fn draw_replied_to_message(
     }
 
     replied_to_message_view.set_visible(show_reply);
-    fully_drawn
+    (fully_drawn, replied_to_event_id)
 }
 
-
 fn populate_preview_of_timeline_item(
     widget_out: &HtmlOrPlaintextRef,
     timeline_item_content: &TimelineItemContent,
@@ -2359,7 +2465,6 @@ 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 {
@@ -2390,7 +2495,6 @@ trait SmallStateEventContent {
     ) -> (WidgetRef, ItemDrawnStatus);
 }
 
-
 /// An empty marker struct used for populating redacted messages.
 struct RedactedMessageEventMarker;
 
@@ -2408,7 +2512,7 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
     ) -> (WidgetRef, ItemDrawnStatus) {
         item.label(id!(content)).set_text(
             &text_preview_of_redacted_message(event_tl_item, original_sender)
-                .format_with(original_sender)
+                .format_with(original_sender),
         );
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
@@ -2428,7 +2532,8 @@ impl SmallStateEventContent for timeline::OtherState {
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
         let item = if let Some(text_preview) = text_preview_of_other_state(self) {
-            item.label(id!(content)).set_text(&text_preview.format_with(username));
+            item.label(id!(content))
+                .set_text(&text_preview.format_with(username));
             new_drawn_status.content_drawn = true;
             item
         } else {
@@ -2452,16 +2557,13 @@ impl SmallStateEventContent for MemberProfileChange {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        item.label(id!(content)).set_text(
-            &text_preview_of_member_profile_change(self, username)
-                .format_with(username)
-        );
+        item.label(id!(content))
+            .set_text(&text_preview_of_member_profile_change(self, username).format_with(username));
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
 }
 
-
 impl SmallStateEventContent for RoomMembershipChange {
     fn populate_item_content(
         &self,
@@ -2481,13 +2583,14 @@ impl SmallStateEventContent for RoomMembershipChange {
                 ItemDrawnStatus::new(),
             );
         };
-        item.label(id!(content)).set_text(&preview.format_with(username));
+
+        item.label(id!(content))
+            .set_text(&preview.format_with(username));
         new_drawn_status.content_drawn = true;
         (item, new_drawn_status)
     }
 }
 
-
 /// Creates, populates, and adds a SmallStateEvent liveview widget to the given `PortalList`
 /// with the given `item_id`.
 ///
@@ -2503,7 +2606,9 @@ fn populate_small_state_event(
     item_drawn_status: ItemDrawnStatus,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent)).unwrap();
+    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.
@@ -2553,27 +2658,19 @@ fn populate_small_state_event(
     )
 }
 
-
 /// Sets the text of the `Label` at the given `item`'s live ID path
 /// to a typical 12-hour AM/PM timestamp format.
-fn set_timestamp(
-    item: &WidgetRef,
-    live_id_path: &[LiveId],
-    timestamp: MilliSecondsSinceUnixEpoch,
-) {
+fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSecondsSinceUnixEpoch) {
     if let Some(dt) = unix_time_millis_to_datetime(&timestamp) {
         // format as AM/PM 12-hour time
-        item.label(live_id_path).set_text(
-            &format!("{}", dt.time().format("%l:%M %P"))
-        );
+        item.label(live_id_path)
+            .set_text(&format!("{}", dt.time().format("%l:%M %P")));
     } else {
-        item.label(live_id_path).set_text(
-            &format!("{}", timestamp.get())
-        );
+        item.label(live_id_path)
+            .set_text(&format!("{}", timestamp.get()));
     }
 }
 
-
 /// 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.
 ///
@@ -2610,9 +2707,10 @@ fn set_avatar_and_get_username(
     // 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.
     let (username_opt, avatar_state) = match sender_profile {
-        TimelineDetails::Ready(profile) => {
-            (profile.display_name.clone(), AvatarState::Known(profile.avatar_url.clone()))
-        }
+        TimelineDetails::Ready(profile) => (
+            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 {
@@ -2624,17 +2722,17 @@ fn set_avatar_and_get_username(
             }
             // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
             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()),
-                        AvatarState::Known(rm.avatar_url().map(|u| u.to_owned()))
-                    ))
-                    .unwrap_or_else(|| (
-                        profile.username.clone(),
-                        profile.avatar_state.clone(),
-                    ))
-                })
-                .unwrap_or((None, AvatarState::Unknown))
+                room_members
+                    .get(room_id)
+                    .map(|rm| {
+                        (
+                            rm.display_name().map(|n| n.to_owned()),
+                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                        )
+                    })
+                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+            })
+            .unwrap_or((None, AvatarState::Unknown))
         }
     };
 
@@ -2644,24 +2742,28 @@ fn set_avatar_and_get_username(
             AvatarCacheEntry::Loaded(data) => (Some(data), true),
             AvatarCacheEntry::Failed => (None, true),
             AvatarCacheEntry::Requested => (None, false),
-        }
+        },
         AvatarState::Known(None) | AvatarState::Failed => (None, true),
         AvatarState::Unknown => (None, false),
     };
 
     // Set sender to the display name if available, otherwise the user id.
-    let username = username_opt.clone().unwrap_or_else(|| sender_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((sender_user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone())),
-        |img| utils::load_png_or_jpg(&img, cx, &data)
-    ).ok())
+    avatar_img_data_opt.and_then(|data|
+        avatar.show_image(
+            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((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
         &username,
     ));
-
     (username, profile_drawn)
 }
 
@@ -2674,26 +2776,36 @@ fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String>
     }
 }
 
+/// Actions that can be performed on a message.
 #[derive(Clone, DefaultNone, Debug)]
 pub enum MessageAction {
+    /// The user clicked the reply button on the message,
+    /// indicating that they want to reply to this message.
     MessageReply(usize),
-    ReplyPreviewClicked(usize),
+    /// The user clicked the inline reply preview above a message
+    /// indicating that they want to jump upwards to the replied-to message shown in the preview.
+    ReplyPreviewClicked {
+        /// The item ID (in the timeline PortalList) of the reply message
+        /// that the user clicked the reply preview above.
+        reply_message_item_id: usize,
+        /// The event ID of the replied-to message (the target of the reply).
+        replied_to_event: OwnedEventId,
+    },
+    /// The message with the given item ID should be highlighted.
     MessageHighlight(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,
-    #[animator]
-    animator: Animator,
+    #[deref] view: View,
+    #[animator] animator: Animator,
+    #[rust(false)] hovered: bool,
+
+    #[rust] can_be_replied_to: bool,
+    #[rust] item_id: usize,
+    /// The event ID of the message that this message is replying to, if any.
+    #[rust] replied_to_event_id: Option<OwnedEventId>,
 }
 
 impl Widget for Message {
@@ -2722,11 +2834,18 @@ impl Widget for Message {
 
         if let Hit::FingerUp(fe) = event.hits(cx, self.view(id!(replied_to_message)).area()) {
             if fe.was_tap() {
-                cx.widget_action(
-                    widget_uid,
-                    &scope.path,
-                    MessageAction::ReplyPreviewClicked(self.item_id),
-                );
+                if let Some(ref replied_to_event) = self.replied_to_event_id {
+                    cx.widget_action(
+                        widget_uid,
+                        &scope.path,
+                        MessageAction::ReplyPreviewClicked {
+                            reply_message_item_id: self.item_id,
+                            replied_to_event: replied_to_event.to_owned(),
+                        },
+                    );
+                } else {
+                    error!("BUG: reply preview clicked for message {} with no replied-to event!", self.item_id);
+                }
             }
         }
 
@@ -2744,7 +2863,8 @@ impl Widget for Message {
 
         if let Event::MouseMove(e) = event {
             let hovered = self.view.area().rect(cx).contains(e.abs);
-            if (self.hovered != hovered) || (!hovered && self.animator_in_state(cx, id!(hover.on))){
+            if (self.hovered != hovered) || (!hovered && self.animator_in_state(cx, id!(hover.on)))
+            {
                 self.hovered = hovered;
 
                 // TODO: Once we have a context menu, the messageMenu can be displayed on hover or push only
@@ -2771,17 +2891,27 @@ impl Widget for Message {
 }
 
 impl Message {
-    fn set_data(&mut self, can_be_replied_to: bool, item_id: usize) {
+    fn set_data(
+        &mut self,
+        can_be_replied_to: bool,
+        item_id: usize,
+        replied_to_event_id: Option<OwnedEventId>,
+    ) {
         self.can_be_replied_to = can_be_replied_to;
         self.item_id = item_id;
+        self.replied_to_event_id = replied_to_event_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;
+    fn set_data(
+        &self,
+        can_be_replied_to: bool,
+        item_id: usize,
+        replied_to_event_id: Option<OwnedEventId>,
+    ) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_data(can_be_replied_to, item_id, replied_to_event_id);
         };
-        inner.set_data(can_be_replied_to, item_id);
     }
 }
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index 3990d631..90669931 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -1,7 +1,9 @@
 use std::collections::HashMap;
 use crossbeam_queue::SegQueue;
 use makepad_widgets::*;
-use matrix_sdk::ruma::{OwnedRoomId, MilliSecondsSinceUnixEpoch};
+use matrix_sdk::ruma::{MilliSecondsSinceUnixEpoch, OwnedRoomId};
+
+use crate::sliding_sync::{submit_async_request, MatrixRequest};
 
 use super::room_preview::RoomPreviewAction;
 
@@ -35,7 +37,7 @@ live_design! {
                 color: (MESSAGE_TEXT_COLOR),
                 text_style: <REGULAR_TEXT>{}
             }
-            text: "Loading joined rooms..."
+            text: "Loading rooms..."
         }
     }
 
@@ -66,8 +68,15 @@ live_design! {
 /// (which is called from background async tasks that receive updates from the matrix server),
 /// and then dequeued by the `RoomsList` widget's `handle_event` function.
 pub enum RoomsListUpdate {
+    /// No rooms have been loaded yet.
+    NotLoaded,
+    /// Some rooms were loaded, and the server optionally told us
+    /// the max number of rooms that will ever be loaded.
+    LoadedRooms{ max_rooms: Option<u32> },
     /// Add a new room to the list of all rooms.
     AddRoom(RoomPreviewEntry),
+    /// Clear all rooms in the list of all rooms.
+    ClearRooms,
     /// Update the latest event content and timestamp for the given room.
     UpdateLatestEvent {
         room_id: OwnedRoomId,
@@ -86,7 +95,6 @@ pub enum RoomsListUpdate {
         avatar: RoomPreviewAvatar,
     },
     /// Remove the given room from the list of all rooms.
-    #[allow(unused)]
     RemoveRoom(OwnedRoomId),
     /// Update the status label at the bottom of the list of all rooms.
     Status {
@@ -117,10 +125,10 @@ pub enum RoomListAction {
     None,
 }
 
-#[derive(Debug, Default)]
+#[derive(Debug)]
 pub struct RoomPreviewEntry {
     /// The matrix ID of this room.
-    pub room_id: Option<OwnedRoomId>,
+    pub room_id: OwnedRoomId,
     /// The displayable name of this room, if known.
     pub room_name: Option<String>,
     /// The timestamp and Html text content of the latest message in this room.
@@ -128,6 +136,11 @@ pub struct RoomPreviewEntry {
     /// The avatar for this room: either an array of bytes holding the avatar image
     /// or a string holding the first Unicode character of the room name.
     pub avatar: RoomPreviewAvatar,
+    /// Whether this room has been paginated at least once.
+    /// We pre-paginate visible rooms at least once in order to
+    /// be able to display the latest message in the room preview,
+    /// and to have something to immediately show when a user first opens a room.
+    pub has_been_paginated: bool,
     /// Whether this room is currently selected in the UI.
     pub is_selected: bool,
 }
@@ -149,6 +162,8 @@ pub struct RoomsList {
     #[deref] view: View,
 
     /// The list of all known rooms and their cached preview info.
+    //
+    // TODO: change this into a hashmap keyed by room ID.
     #[rust] all_rooms: Vec<RoomPreviewEntry>,
     /// Maps the WidgetUid of a `RoomPreview` to that room's index in the `all_rooms` vector.
     #[rust] rooms_list_map: HashMap<u64, usize>,
@@ -156,6 +171,18 @@ pub struct RoomsList {
     #[rust] status: String,
     /// The index of the currently selected room
     #[rust] current_active_room_index: Option<usize>,
+    /// The maximum number of rooms that will ever be loaded.
+    #[rust] max_known_rooms: Option<u32>,
+}
+
+impl RoomsList {
+    fn update_status_rooms_count(&mut self) {
+        self.status = if let Some(max_rooms) = self.max_known_rooms {
+            format!("Loaded {} of {} total rooms.", self.all_rooms.len(), max_rooms)
+        } else {
+            format!("Loaded {} rooms.", self.all_rooms.len())
+        };
+    }
 }
 
 impl Widget for RoomsList {
@@ -170,33 +197,43 @@ impl Widget for RoomsList {
                         self.all_rooms.push(room);
                     }
                     RoomsListUpdate::UpdateRoomAvatar { room_id, avatar } => {
-                        if let Some(room) = self.all_rooms.iter_mut().find(|r| r.room_id.as_ref() == Some(&room_id)) {
+                        if let Some(room) = self.all_rooms.iter_mut().find(|r| &r.room_id == &room_id) {
                             room.avatar = avatar;
                         } else {
                             error!("Error: couldn't find room {room_id} to update avatar");
                         }
                     }
                     RoomsListUpdate::UpdateLatestEvent { room_id, timestamp, latest_message_text } => {
-                        if let Some(room) = self.all_rooms.iter_mut().find(|r| r.room_id.as_ref() == Some(&room_id)) {
+                        if let Some(room) = self.all_rooms.iter_mut().find(|r| &r.room_id == &room_id) {
                             room.latest = Some((timestamp, latest_message_text));
                         } else {
                             error!("Error: couldn't find room {room_id} to update latest event");
                         }
                     }
                     RoomsListUpdate::UpdateRoomName { room_id, new_room_name } => {
-                        if let Some(room) = self.all_rooms.iter_mut().find(|r| r.room_id.as_ref() == Some(&room_id)) {
+                        if let Some(room) = self.all_rooms.iter_mut().find(|r| &r.room_id == &room_id) {
                             room.room_name = Some(new_room_name);
                         } else {
                             error!("Error: couldn't find room {room_id} to update room name");
                         }
                     }
                     RoomsListUpdate::RemoveRoom(room_id) => {
-                        if let Some(idx) = self.all_rooms.iter().position(|r| r.room_id.as_ref() == Some(&room_id)) {
+                        if let Some(idx) = self.all_rooms.iter().position(|r| &r.room_id == &room_id) {
                             self.all_rooms.remove(idx);
                         } else {
                             error!("Error: couldn't find room {room_id} to remove room");
                         }
                     }
+                    RoomsListUpdate::ClearRooms => {
+                        self.all_rooms.clear();
+                    }
+                    RoomsListUpdate::NotLoaded => {
+                        self.status = "Loading rooms (waiting for homeserver)...".to_string();
+                    }
+                    RoomsListUpdate::LoadedRooms { max_rooms } => {
+                        self.max_known_rooms = max_rooms;
+                        self.update_status_rooms_count();
+                    }
                     RoomsListUpdate::Status { status } => {
                         self.status = status;
                     }
@@ -226,7 +263,7 @@ impl Widget for RoomsList {
                         &scope.path,
                         RoomListAction::Selected {
                             room_index,
-                            room_id: room_details.room_id.clone().unwrap(),
+                            room_id: room_details.room_id.to_owned(),
                             room_name: room_details.room_name.clone(),
                         }
                     );
@@ -242,7 +279,7 @@ impl Widget for RoomsList {
         // TODO: sort list of `all_rooms` by alphabetic, most recent message, grouped by spaces, etc
 
         let count = self.all_rooms.len();
-        let last_item_id = count;
+        let status_label_id = count;
 
         // Start the actual drawing procedure.
         while let Some(list_item) = self.view.draw_walk(cx, scope, walk).step() {
@@ -250,45 +287,45 @@ impl Widget for RoomsList {
             let portal_list_ref = list_item.as_portal_list();
             let Some(mut list) = portal_list_ref.borrow_mut() else { continue };
 
-            // Add 1 again for the status label at the bottom.
-            list.set_item_range(cx, 0, last_item_id + 1);
+            // Add 1 for the status label at the bottom.
+            list.set_item_range(cx, 0, count + 1);
 
             while let Some(item_id) = list.next_visible_item(cx) {
                 let mut scope = Scope::empty();
-                // Draw the status label as the bottom entry.
-                let item = if item_id == last_item_id {
-                    let item = list.item(cx, item_id, live_id!(status_label)).unwrap();
-                    if count > 0 {
-                        let text = format!("Found {count} joined rooms.");
-                        item.as_view().apply_over(cx, live!{
-                            height: 80.0,
-                            label = { text: (text) }
-                        });
-                    } else {
-                        item.as_view().apply_over(cx, live!{
-                            height: Fit,
-                            label = { text: (&self.status) }
+
+                // Draw the room preview for each room.
+                let item = if let Some(room_info) = self.all_rooms.get_mut(item_id) {
+                    let item = list.item(cx, item_id, live_id!(room_preview)).unwrap();
+                    self.rooms_list_map.insert(item.widget_uid().0, item_id);
+                    room_info.is_selected = self.current_active_room_index == Some(item_id);
+
+                    // Paginate the room if it hasn't been paginated yet.
+                    if !room_info.has_been_paginated {
+                        room_info.has_been_paginated = true;
+                        submit_async_request(MatrixRequest::PaginateRoomTimeline {
+                            room_id: room_info.room_id.clone(),
+                            num_events: 50,
+                            forwards: false,
                         });
                     }
-                    item
-                }
-                // Draw a filler entry to take up space at the bottom of the portal list.
-                else if item_id > last_item_id {
-                    list.item(cx, item_id, live_id!(bottom_filler)).unwrap()
-                }
-                else {
-                    let item_template = live_id!(room_preview);
 
-                    let item = list.item(cx, item_id, item_template).unwrap();
-                    let index_of_room = item_id as usize;
-                    self.rooms_list_map.insert(item.widget_uid().0, index_of_room);
-                    
-                    let room_info = &mut self.all_rooms[index_of_room];
-                    room_info.is_selected = self.current_active_room_index == Some(item_id);
-                    // Pass down the room info to the RoomPreview widget.
+                    // Pass the room info through Scope down to the RoomPreview widget.
                     scope = Scope::with_props(&*room_info);
 
                     item
+                }
+                // Draw the status label as the bottom entry.
+                else if item_id == status_label_id {
+                    let item = list.item(cx, item_id, live_id!(status_label)).unwrap();
+                    item.as_view().apply_over(cx, live!{
+                        height: Fit,
+                        label = { text: (&self.status) }
+                    });
+                    item
+                }
+                // Draw a filler entry to take up space at the bottom of the portal list.
+                else {
+                    list.item(cx, item_id, live_id!(bottom_filler)).unwrap()
                 };
 
                 item.draw_all(cx, &mut scope);
diff --git a/src/persistent_state.rs b/src/persistent_state.rs
index 71edd5ed..b38b13e6 100644
--- a/src/persistent_state.rs
+++ b/src/persistent_state.rs
@@ -1,14 +1,10 @@
 //! Handles app persistence by saving and restoring client session data to/from the filesystem.
 
-use std::{
-    path::PathBuf,
-};
+use std::path::PathBuf;
 use anyhow::{anyhow, bail};
 use makepad_widgets::log;
 use matrix_sdk::{
-    matrix_auth::MatrixSession,
-    ruma::{OwnedUserId, UserId},
-    Client,
+    matrix_auth::MatrixSession, ruma::{OwnedUserId, UserId}, sliding_sync::VersionBuilder, Client
 };
 use serde::{Deserialize, Serialize};
 use tokio::fs;
@@ -112,7 +108,8 @@ pub async fn restore_session(
     let client = Client::builder()
         .server_name_or_homeserver_url(client_session.homeserver)
         .sqlite_store(client_session.db_path, Some(&client_session.passphrase))
-        .simplified_sliding_sync(false)
+        .sliding_sync_version_builder(VersionBuilder::DiscoverNative)
+        .handle_refresh_tokens()
         .build()
         .await?;
 
diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index b4f40cf9..35f68e5b 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -31,6 +31,7 @@ impl AvatarState {
     }
 
     /// Returns the avatar URI, if in the `Known` state and it exists.
+    #[allow(unused)]
     pub fn uri(&self) -> Option<&OwnedMxcUri> {
         if let AvatarState::Known(Some(uri)) = self {
             Some(uri)
diff --git a/src/shared/html_or_plaintext.rs b/src/shared/html_or_plaintext.rs
index dc2bcc86..03b44e17 100644
--- a/src/shared/html_or_plaintext.rs
+++ b/src/shared/html_or_plaintext.rs
@@ -94,7 +94,7 @@ live_design! {
                 draw_text: {
                     wrap: Word,
                     color: (MESSAGE_TEXT_COLOR),
-                    text_style: <MESSAGE_TEXT_STYLE> { },
+                    text_style: <MESSAGE_TEXT_STYLE> { font_size: (MESSAGE_FONT_SIZE) },
                 }
                 text: "[plaintext message placeholder]",
             }
diff --git a/src/shared/mod.rs b/src/shared/mod.rs
index 53f00dea..daa1e993 100644
--- a/src/shared/mod.rs
+++ b/src/shared/mod.rs
@@ -2,13 +2,14 @@ use makepad_widgets::Cx;
 
 pub mod adaptive_view;
 pub mod avatar;
+pub mod cached_widget;
 pub mod clickable_view;
 pub mod helpers;
 pub mod html_or_plaintext;
 pub mod search_bar;
 pub mod styles;
 pub mod text_or_image;
-pub mod cached_widget;
+pub mod typing_animation;
 
 pub fn live_design(cx: &mut Cx) {
     // Order matters here, as some widget definitions depend on others.
@@ -21,4 +22,5 @@ pub fn live_design(cx: &mut Cx) {
     html_or_plaintext::live_design(cx);
     adaptive_view::live_design(cx);
     cached_widget::live_design(cx);
+    typing_animation::live_design(cx)
 }
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index c6d6acc1..8d1ced89 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -25,6 +25,7 @@ live_design! {
         // height_factor: 1.5,
     }
 
+    TYPING_NOTICE_TEXT_COLOR = #121570
 
     MESSAGE_FONT_SIZE = 11
     MESSAGE_TEXT_COLOR = #x444
diff --git a/src/shared/typing_animation.rs b/src/shared/typing_animation.rs
new file mode 100644
index 00000000..df23bc4a
--- /dev/null
+++ b/src/shared/typing_animation.rs
@@ -0,0 +1,162 @@
+use makepad_widgets::*;
+
+live_design! {
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
+    import crate::shared::styles::*;
+
+    ANIMATION_DURATION = 0.65
+
+    // 1. Set the width and height to the same value.
+    // 2. Set the radius to half of the width/height.
+    EllipsisDot = <CircleView> {
+        width: 3
+        height: 3
+        draw_bg: {
+            radius: 1.5
+            color: (TYPING_NOTICE_TEXT_COLOR)
+        }
+    }
+
+    TypingAnimation = {{TypingAnimation}} {
+        width: Fit,
+        height: Fit,
+
+        flow: Down,
+        align: {x: 0.0, y: 0.5},
+        
+        content = <View> {
+            width: Fit,
+            height: Fit,
+            spacing: 2,
+            circle1 = <EllipsisDot> {}
+            circle2 = <EllipsisDot> {}
+            circle3 = <EllipsisDot> {}
+        }
+
+        animator: {
+            circle1 = {
+                default: down,
+                down = {
+                    redraw: true,
+                    from: {all: Forward {duration: (ANIMATION_DURATION * 0.5)}}
+                    apply: {content = { circle1 = { margin: {top: 10.0} }}}
+                }
+                up = {
+                    redraw: true,
+                    from: {all: Forward {duration: (ANIMATION_DURATION * 0.5)}}
+                    apply: {content = { circle1 = { margin: {top: 3.0} }}}
+                }
+            }
+
+            circle2 = {
+                default: down,
+                down = {
+                    redraw: true,
+                    from: {all: Forward {duration: (ANIMATION_DURATION * 0.5)}}
+                    apply: {content = { circle2 = { margin: {top: 10.0} }}}
+                }
+                up = {
+                    redraw: true,
+                    from: {all: Forward {duration: (ANIMATION_DURATION * 0.5)}}
+                    apply: {content = { circle2 = { margin: {top: 3.0} }}}
+                }
+            }
+
+            circle3 = {
+                default: down,
+                down = {
+                    redraw: true,
+                    from: {all: Forward {duration: (ANIMATION_DURATION * 0.5)}}
+                    apply: {content = { circle3 = { margin: {top: 10.0} }}}
+                }
+                up = {
+                    redraw: true,
+                    from: {all: Forward {duration: (ANIMATION_DURATION * 0.5)}}
+                    apply: {content = { circle3 = { margin: {top: 3.0} }}}
+                }
+            }
+        }
+    }
+}
+
+#[derive(Live, LiveHook, Widget)]
+pub struct TypingAnimation {
+    #[deref] view: View,
+    #[animator] animator: Animator,
+
+    #[live(0.65)] animation_duration: f64,
+    #[rust] timer: Timer,
+    #[rust] current_animated_dot: CurrentAnimatedDot,
+}
+
+#[derive(Copy, Clone, Default)]
+enum CurrentAnimatedDot {
+    #[default]
+    Dot1,
+    Dot2,
+    Dot3,
+}
+impl CurrentAnimatedDot {
+    fn next(&self) -> Self {
+        match self {
+            Self::Dot1 => Self::Dot2,
+            Self::Dot2 => Self::Dot3,
+            Self::Dot3 => Self::Dot1,
+        }
+    }
+}
+
+impl Widget for TypingAnimation {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        if self.timer.is_event(event).is_some() {
+            self.update_animation(cx);
+        }
+        if self.animator_handle_event(cx, event).must_redraw() {
+            self.redraw(cx);
+        }
+
+        self.view.handle_event(cx, event, scope);
+    }
+
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.view.draw_walk(cx, scope, walk)
+    }
+}
+
+impl TypingAnimation {
+    pub fn update_animation(&mut self, cx: &mut Cx) {
+        self.current_animated_dot = self.current_animated_dot.next();
+
+        match self.current_animated_dot {
+            CurrentAnimatedDot::Dot1 => {
+                self.animator_play(cx, id!(circle1.up));
+                self.animator_play(cx, id!(circle3.down));
+            }
+            CurrentAnimatedDot::Dot2 => {
+                self.animator_play(cx, id!(circle1.down));
+                self.animator_play(cx, id!(circle2.up));
+            }
+            CurrentAnimatedDot::Dot3 => {
+                self.animator_play(cx, id!(circle2.down));
+                self.animator_play(cx, id!(circle3.up));
+            }
+        };
+
+        self.timer = cx.start_timeout(self.animation_duration * 0.5);
+    }
+}
+
+impl TypingAnimationRef {
+    pub fn animate(&self, cx: &mut Cx) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.update_animation(cx);
+        }
+    }
+
+    pub fn stop_animation(&self) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.timer = Timer::default();
+        }
+    }
+}
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index cd57a412..0720090c 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -1,21 +1,41 @@
 use anyhow::{Result, bail};
 use clap::Parser;
+use eyeball::Subscriber;
 use eyeball_im::VectorDiff;
-use futures_util::{pin_mut, StreamExt};
-use imbl::Vector;
+use futures_util::StreamExt;
 use makepad_widgets::{error, log, warning, SignalToUI};
 use matrix_sdk::{
-    config::RequestConfig, event_handler::EventHandlerDropGuard, media::MediaRequest, room::RoomMember, ruma::{
-        api::client::session::get_login_types::v3::LoginType, events::{room::{message::{ForwardThread, RoomMessageEventContent}, MediaSource}, FullStateEventContent, StateEventType}, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, UInt, UserId
-    }, sliding_sync::http::request::ListFilters, Client, Room, SlidingSyncList, SlidingSyncMode
+    config::RequestConfig,
+    event_handler::EventHandlerDropGuard,
+    media::MediaRequest,
+    room::{Receipts, RoomMember},
+    ruma::{
+        api::client::{receipt::create_receipt::v3::ReceiptType, session::get_login_types::v3::LoginType},
+        events::{
+            receipt::ReceiptThread, room::{
+                message::{ForwardThread, RoomMessageEventContent},
+                MediaSource,
+            }, FullStateEventContent
+        },
+        OwnedEventId, OwnedMxcUri, OwnedRoomAliasId, OwnedRoomId, OwnedUserId, RoomId, UserId
+    },
+    sliding_sync::VersionBuilder,
+    Client,
+    Room,
+};
+use matrix_sdk_ui::{
+    room_list_service::{self, RoomListLoadingState},
+    sync_service::{self, SyncService},
+    timeline::{AnyOtherFullStateEventContent, EventTimelineItem, LiveBackPaginationStatus, RepliedToInfo, TimelineDetails, TimelineItemContent},
+    Timeline,
 };
-use matrix_sdk_ui::{timeline::{AnyOtherFullStateEventContent, LiveBackPaginationStatus, RepliedToInfo, TimelineDetails, TimelineItem, TimelineItemContent}, Timeline};
 use tokio::{
     runtime::Handle,
-    sync::mpsc::{UnboundedSender, UnboundedReceiver}, task::JoinHandle,
+    sync::mpsc::{UnboundedSender, UnboundedReceiver},
+    task::JoinHandle,
 };
 use unicode_segmentation::UnicodeSegmentation;
-use std::{cmp::{max, min}, collections::{BTreeMap, BTreeSet}, ops::Range, path:: Path, sync::{Arc, Mutex, OnceLock}};
+use std::{cmp::{max, min}, collections::{BTreeMap, BTreeSet}, path:: Path, sync::{Arc, Mutex, OnceLock}};
 
 use crate::{
     app_data_dir, avatar_cache::AvatarUpdate, event_preview::text_preview_of_timeline_item, home::{
@@ -75,13 +95,14 @@ async fn build_client(
     let homeserver_url = cli.homeserver.as_deref()
         .unwrap_or("https://matrix-client.matrix.org/");
         // .unwrap_or("https://matrix.org/");
-
+    
     let mut builder = Client::builder()
         .server_name_or_homeserver_url(homeserver_url)
         // Use a sqlite database to persist the client's encryption setup.
         .sqlite_store(&db_path, Some(&passphrase))
-        // The matrix homeserver's sliding sync proxy doesn't support Simplified MSC3575.
-        .simplified_sliding_sync(false);
+        // The sliding sync proxy has now been deprecated in favor of native sliding sync.
+        .sliding_sync_version_builder(VersionBuilder::DiscoverNative)
+        .handle_refresh_tokens();
 
     if let Some(proxy) = cli.proxy.as_ref() {
         builder = builder.proxy(proxy.clone());
@@ -94,7 +115,6 @@ async fn build_client(
             .timeout(std::time::Duration::from_secs(60))
     );
 
-    builder = builder.handle_refresh_tokens();
     let client = builder.build().await?;
     Ok((
         client,
@@ -235,6 +255,16 @@ pub enum MatrixRequest {
         /// Whether to subscribe or unsubscribe from typing notices for this room.
         subscribe: bool,
     },
+    /// Sends a read receipt for the given event in the given room.
+    ReadReceipt{
+        room_id: OwnedRoomId,
+        event_id: OwnedEventId,
+    },
+    /// Sends a fully-read receipt for the given event in the given room.
+    FullyReadReceipt{
+        room_id: OwnedRoomId,
+        event_id: OwnedEventId,
+    }
 }
 
 /// Submits a request to the worker thread to be executed asynchronously.
@@ -608,6 +638,40 @@ async fn async_worker(mut receiver: UnboundedReceiver<MatrixRequest>) -> Result<
                 });
             }
 
+            MatrixRequest::ReadReceipt { room_id, event_id }=>{
+                let timeline = {
+                    let all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                    let Some(room_info) = all_room_info.get(&room_id) else {
+                        log!("BUG: room info not found when sending read receipt, room {room_id}, {event_id}");
+                        continue;
+                    };
+                    room_info.timeline.clone()
+                };
+                let _send_rr_task = Handle::current().spawn(async move {
+                    match timeline.send_single_receipt(ReceiptType::Read, ReceiptThread::Unthreaded, event_id.clone()).await {
+                        Ok(sent) => log!("{} read receipt to room {room_id} for event {event_id}", if sent { "Sent" } else { "Already sent" }),
+                        Err(_e) => error!("Failed to send read receipt to room {room_id} for event {event_id}; error: {_e:?}"),
+                    }
+                });
+            },
+
+            MatrixRequest::FullyReadReceipt { room_id, event_id }=>{
+                let timeline = {
+                    let all_room_info = ALL_ROOM_INFO.lock().unwrap();
+                    let Some(room_info) = all_room_info.get(&room_id) else {
+                        log!("BUG: room info not found when sending fully read receipt, room {room_id}, {event_id}");
+                        continue;
+                    };
+                    room_info.timeline.clone()
+                };
+                let _send_frr_task = Handle::current().spawn(async move {
+                    let receipt = Receipts::new().fully_read_marker(event_id.clone());
+                    match timeline.send_multiple_receipts(receipt).await {
+                        Ok(()) => log!("Sent fully read receipt to room {room_id}, event {event_id}"),
+                        Err(_e) => error!("Failed to send fully read receipt to room {room_id}, event {event_id}; error: {_e:?}"),
+                    }
+                });
+            }    
         }
     }
 
@@ -688,8 +752,6 @@ pub fn start_matrix_tokio() -> Result<()> {
 struct RoomInfo {
     #[allow(unused)]
     room_id: OwnedRoomId,
-    /// The timestamp of the latest event that we've seen for this room.
-    latest_event_timestamp: MilliSecondsSinceUnixEpoch,
     /// A reference to this room's timeline of events.
     timeline: Arc<Timeline>,
     /// An instance of the clone-able sender that can be used to send updates to this room's timeline.
@@ -719,6 +781,14 @@ pub fn get_client() -> Option<Client> {
     CLIENT.get().cloned()
 }
 
+/// The singleton sync service.
+static SYNC_SERVICE: OnceLock<SyncService> = OnceLock::new();
+
+pub fn get_sync_service() -> Option<&'static SyncService> {
+    SYNC_SERVICE.get()
+}
+
+
 /// The list of users that the current user has chosen to ignore.
 /// Ideally we shouldn't have to maintain this list ourselves,
 /// but the Matrix SDK doesn't currently properly maintain the list of ignored users.
@@ -757,8 +827,6 @@ pub fn take_timeline_update_receiver(
 async fn async_main_loop() -> Result<()> {
     tracing_subscriber::fmt::init();
 
-    let start = std::time::Instant::now();
-
     let cli = Cli::try_parse().ok().or_else(|| {
         // Quickly try to parse the username, password, and homeserver fields from "login.toml".
         let login_file = std::include_str!("../login.toml");
@@ -832,7 +900,7 @@ async fn async_main_loop() -> Result<()> {
             };
             user_id_str.as_str().try_into().ok()
         });
-    let (client, sync_token) = if let Ok(restored) = persistent_state::restore_session(specified_username).await {
+    let (client, _sync_token) = if let Ok(restored) = persistent_state::restore_session(specified_username).await {
         restored
     } else {
         match login(cli).await {
@@ -846,265 +914,206 @@ async fn async_main_loop() -> Result<()> {
     // Listen for updates to the ignored user list.
     handle_ignore_user_list_subscriber(client.clone());
 
-    let mut filters = ListFilters::default();
-    filters.not_room_types = vec!["m.space".into()]; // Ignore spaces for now.
-
-    let visible_room_list_name = "VisibleRooms".to_owned();
-    let visible_room_list = SlidingSyncList::builder(&visible_room_list_name)
-        .sync_mode(SlidingSyncMode::new_paging(5).maximum_number_of_rooms_to_fetch(50))
-        // .sync_mode(SlidingSyncMode::new_growing(1))
-        // only load a few timeline events per room to start with. We'll load more later on demand when a room is first viewed.
-        .timeline_limit(20)
-        .filters(Some(filters))
-        .required_state(vec![ // we want to know immediately:
-            (StateEventType::RoomEncryption, "".to_owned()),  // is it encrypted
-            (StateEventType::RoomMember, "$LAZY".to_owned()), // lazily fetch room member profiles for users that have sent events
-            (StateEventType::RoomMember, "$ME".to_owned()),   // fetch profile for "me", the currently logged-in user (optional)
-            (StateEventType::RoomCreate, "".to_owned()),      // room creation type
-            (StateEventType::RoomName,   "".to_owned()),      // the room's displayable name
-            (StateEventType::RoomAvatar, "".to_owned()),      // avatar if set
-            // (StateEventType::RoomTopic,  "".to_owned()),      // any topic if known (optional, can be fetched later)
-        ]);
-
-    // Now that we're logged in, try to connect to the sliding sync proxy.
-    log!("Sliding sync proxy URL: {:?}", client.sliding_sync_proxy());
-    let sliding_sync = client
-        .sliding_sync("main-sync")?
-        .sliding_sync_proxy("https://slidingsync.lab.matrix.org".try_into()?)
-        .with_all_extensions()
-        // .add_cached_list(visible_room_list).await?
-        .add_list(visible_room_list)
+    let sync_service = SyncService::builder(client.clone())
         .build()
         .await?;
+    handle_sync_service_state_subscriber(sync_service.state());
+    sync_service.start().await;
+    let room_list_service = sync_service.room_list_service();
+    SYNC_SERVICE.set(sync_service).unwrap_or_else(|_| panic!("BUG: SYNC_SERVICE already set!"));
+
+    let all_rooms_list = room_list_service.all_rooms().await?;
+    handle_room_list_service_loading_state(all_rooms_list.loading_state());
+    let (mut all_known_rooms, mut room_diff_stream) = all_rooms_list.entries();
+    log!("Populating initial set of {} known rooms.", all_known_rooms.len());
+    for room in all_known_rooms.iter() {
+        add_new_room(room).await?;
+    }
 
+    const LOG_ROOM_LIST_DIFFS: bool = true;
 
-    // let active_room_list_name = "ActiveRoom".to_owned();
-    // let active_room_list = SlidingSyncList::builder(&active_room_list_name)
-    //     .sync_mode(SlidingSyncMode::new_paging(10))
-    //     .timeline_limit(u32::MAX)
-    //     .required_state(vec![ // we want to know immediately:
-    //         (StateEventType::RoomEncryption, "".to_owned()), // is it encrypted
-    //         (StateEventType::RoomTopic, "".to_owned()),      // any topic if known
-    //         (StateEventType::RoomAvatar, "".to_owned()),     // avatar if set
-    //     ]);
-    // sliding_sync.add_cached_list(active_room_list).await?;
-
-
-    let stream = sliding_sync.sync();
-    pin_mut!(stream);
-
-    let mut stream_error = None;
-    loop {
-        let update = match stream.next().await {
-            Some(Ok(u)) => {
-                let curr = start.elapsed().as_secs_f64();
-                log!("{curr:>8.2} Received an update. Summary: {u:?}");
-                // log!("    --> Current room list: {:?}", sliding_sync.get_all_rooms().await.into_iter().map(|r| r.room_id().to_owned()).collect::<Vec<_>>());
-                u
-            }
-            Some(Err(e)) => {
-                error!("sync loop was stopped by client error processing: {e}");
-                stream_error = Some(e);
-                break;
-            }
-            None => {
-                error!("sync loop ended unexpectedly");
-                break;
-            }
-        };
-
-        for room_id in update.rooms {
-            let Some(room) = client.get_room(&room_id) else {
-                error!("Error: couldn't get Room {room_id:?} that had an update");
-                continue
-            };
-            let room_name = room.compute_display_name().await;
-
-            log!("\n{room_id:?} --> {:?} has an update
-                display_name: {:?},
-                topic: {:?},
-                is_synced: {:?}, is_state_fully_synced: {:?},
-                is_space: {:?},
-                create: {:?},
-                canonical-alias: {:?},
-                alt_aliases: {:?},
-                guest_access: {:?},
-                history_visibility: {:?},
-                is_public: {:?},
-                join_rule: {:?},
-                latest_event: {:?}
-                ",
-                room.name(),
-                room_name,
-                room.topic(),
-                room.is_synced(), room.is_state_fully_synced(),
-                room.is_space(),
-                room.create_content(),
-                room.canonical_alias(),
-                room.alt_aliases(),
-                room.guest_access(),
-                room.history_visibility(),
-                room.is_public(),
-                room.join_rule(),
-                room.latest_event(),
-            );
-
-            // sliding_sync.subscribe_to_room(room_id.to_owned(), None);
-            // log!("    --> Subscribing to above room {:?}", room_id);
-
-            let timeline = Timeline::builder(&room)
-                .track_read_marker_and_receipts()
-                .build()
-                .await?;
-
-            let latest_tl = timeline.latest_event().await;
-
-            let mut room_exists = false;
-            let mut room_name_changed = None;
-            let mut latest_event_changed = None;
-            let mut room_avatar_changed = false;
-
-            if let Some(existing) = ALL_ROOM_INFO.lock().unwrap().get_mut(&room_id) {
-                room_exists = true;
-
-                // Obtain the details of any changes to this room based on this its latest timeline event.
-                if let Some(event_tl_item) = &latest_tl {
-                    let timestamp = event_tl_item.timestamp();
-                    if timestamp > existing.latest_event_timestamp {
-                        existing.latest_event_timestamp = timestamp;
-                        let latest_event_sender_username = match event_tl_item.sender_profile() {
-                            TimelineDetails::Ready(profile) => profile.display_name.as_deref(),
-                            TimelineDetails::Unavailable => {
-                                if let Some(event_id) = event_tl_item.event_id() {
-                                    submit_async_request(MatrixRequest::FetchDetailsForEvent {
-                                        room_id: room_id.to_owned(),
-                                        event_id: event_id.to_owned(),
-                                    });
-                                }
-                                None
-                            }
-                            _ => None,
-                        }
-                        .unwrap_or_else(|| event_tl_item.sender().as_str());
-
-                        latest_event_changed = Some((
-                            timestamp,
-                            text_preview_of_timeline_item(
-                                event_tl_item.content(),
-                                latest_event_sender_username,
-                            ).format_with(latest_event_sender_username),
-                        ));
-
-                        match event_tl_item.content() {
-                            TimelineItemContent::OtherState(other) => match other.content() {
-                                AnyOtherFullStateEventContent::RoomName(FullStateEventContent::Original { content, .. }) => {
-                                    room_name_changed = Some(content.name.clone());
-                                }
-                                AnyOtherFullStateEventContent::RoomAvatar(_avatar_event) => {
-                                    room_avatar_changed = true; // we'll fetch the avatar later.
-                                }
-                                _ => { }
-                            }
-                            _ => { }
+    while let Some(batch) = room_diff_stream.next().await {
+        for diff in batch {
+            match diff {
+                VectorDiff::Append { values: new_rooms } => {
+                    let _num_new_rooms = new_rooms.len();
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Append {_num_new_rooms}"); }
+                    for new_room in &new_rooms {
+                        add_new_room(&new_room).await?;
+                    }
+                    all_known_rooms.append(new_rooms);
+                }
+                VectorDiff::Clear => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Clear"); }
+                    all_known_rooms.clear();
+                    ALL_ROOM_INFO.lock().unwrap().clear();
+                    // TODO: we probably need to remove each room individually to kill off
+                    //       all of the async tasks associated with them (i.e., the timeline subscriber).
+                    //       Or, better yet, implement the drop handler for RoomInfo to do so.
+                    enqueue_rooms_list_update(RoomsListUpdate::ClearRooms);
+                }
+                VectorDiff::PushFront { value: new_room } => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff PushFront"); }
+                    add_new_room(&new_room).await?;
+                    all_known_rooms.push_front(new_room);
+                }
+                VectorDiff::PushBack { value: new_room } => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff PushBack"); }
+                    add_new_room(&new_room).await?;
+                    all_known_rooms.push_back(new_room);
+                }
+                VectorDiff::PopFront => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff PopFront"); }
+                    if let Some(room) = all_known_rooms.pop_front() {
+                        remove_room(room);
+                    }
+                }
+                VectorDiff::PopBack => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff PopBack"); }
+                    if let Some(room) = all_known_rooms.pop_back() {
+                        remove_room(room);
+                    }
+                }
+                VectorDiff::Insert { index, value: new_room } => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Insert at {index}"); }
+                    add_new_room(&new_room).await?;
+                    all_known_rooms.insert(index, new_room);
+                }
+                VectorDiff::Set { index, value: changed_room } => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Set at {index} !!!!!!!!"); }
+                    update_room(&changed_room).await?;
+                    all_known_rooms.set(index, changed_room);
+                }
+                VectorDiff::Remove { index } => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Remove at {index}"); }
+                    if index < all_known_rooms.len() {
+                        let room = all_known_rooms.remove(index);
+                        remove_room(room);
+                    } else {
+                        error!("BUG: room_list: diff Remove index {index} out of bounds, len {}", all_known_rooms.len());
+                    }
+                }
+                VectorDiff::Truncate { length } => {
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Truncate to {length}"); }
+                    while all_known_rooms.len() > length {
+                        if let Some(room) = all_known_rooms.pop_back() {
+                            remove_room(room);
                         }
                     }
+                    all_known_rooms.truncate(length); // sanity check
+                }
+                VectorDiff::Reset { values } => {
+                    // We implement this by clearing all rooms and then adding back the new values.
+                    if LOG_ROOM_LIST_DIFFS { log!("room_list: diff Reset, new length {}", values.len()); }
+                    all_known_rooms = values;
+                    ALL_ROOM_INFO.lock().unwrap().clear();
+                    // TODO: we probably need to remove each room individually to kill off
+                    //       all of the async tasks associated with them (i.e., the timeline subscriber).
+                    //       Or, better yet, implement the drop handler for RoomInfo to do so.
+                    enqueue_rooms_list_update(RoomsListUpdate::ClearRooms);
+                    for room in &all_known_rooms {
+                        add_new_room(&room).await?;
+                    }
                 }
             }
+        }
+    }
 
-            // Send an update to the rooms_list if the latest event for this room has changed.
-            if let Some((timestamp, latest_message_text)) = latest_event_changed {
-                rooms_list::enqueue_rooms_list_update(RoomsListUpdate::UpdateLatestEvent {
-                    room_id: room_id.clone(),
-                    timestamp,
-                    latest_message_text,
-                });
-            }
+    bail!("room list service sync loop ended unexpectedly")
+}
 
-            // Send an update to the rooms_list if the room name has changed.
-            if let Some(new_room_name) = room_name_changed {
-                rooms_list::enqueue_rooms_list_update(RoomsListUpdate::UpdateRoomName {
-                    room_id: room_id.clone(),
-                    new_room_name,
-                });
-            }
 
-            let room_name_str = room_name.ok().map(|n| n.to_string());
+/// Invoked when the room list service has received an update that changes an existing room.
+async fn update_room(_room: &room_list_service::Room) -> matrix_sdk::Result<()> {
+    todo!("update_room")
+}
 
-            // Handle an entirely new room that we haven't seen before.
-            if !room_exists {
-                // Indicate that we'll fetch the avatar for this new room later.
-                room_avatar_changed = true;
 
-                let (timeline_update_sender, timeline_update_receiver) = crossbeam_channel::unbounded();
-                let tl_arc = Arc::new(timeline);
-
-                Handle::current().spawn(timeline_subscriber_handler(
-                    room_id.clone(),
-                    tl_arc.clone(),
-                    timeline_update_sender.clone(),
-                ));
-                rooms_list::enqueue_rooms_list_update(RoomsListUpdate::AddRoom(RoomPreviewEntry {
-                    room_id: Some(room_id.clone()),
-                    latest: latest_tl.as_ref().map(|ev| {
-                        let sender_username = match ev.sender_profile() {
-                            TimelineDetails::Ready(profile) => profile.display_name.as_deref(),
-                            _ => None,
-                        }.unwrap_or_else(|| ev.sender().as_str());
-                        (
-                            ev.timestamp(),
-                            text_preview_of_timeline_item(ev.content(), sender_username)
-                                .format_with(sender_username),
-                        )
-                    }),
-                    avatar: avatar_from_room_name(room_name_str.as_deref().unwrap_or_default()),
-                    room_name: room_name_str.clone(),
-                    ..RoomPreviewEntry::default()
-                }));
-
-                ALL_ROOM_INFO.lock().unwrap().insert(
-                    room_id.clone(),
-                    RoomInfo {
-                        room_id: room_id.clone(),
-                        latest_event_timestamp: latest_tl.as_ref()
-                            .map(|ev| ev.timestamp())
-                            .unwrap_or(MilliSecondsSinceUnixEpoch(UInt::MIN)),
-                        timeline: tl_arc,
-                        timeline_update_receiver: Some(timeline_update_receiver),
-                        timeline_update_sender,
-                        pagination_status_task: None,
-                        typing_notice_subscriber: None,
-                    },
-                );
-            }
+/// Invoked when the room list service has received an update to remove an existing room.
+fn remove_room(room: room_list_service::Room) {
+    ALL_ROOM_INFO.lock().unwrap().remove(room.room_id());
+    enqueue_rooms_list_update(
+        RoomsListUpdate::RemoveRoom(room.room_id().to_owned())
+    );
+    // TODO: we probably need to kill all of the async tasks associated
+    //       with this room (i.e., the timeline subscriber. etc).
+    //       Or, better yet, implement `RoomInfo::drop()` to do so.
+}
 
-            // Send an update to the rooms_list if the room avatar has changed,
-            // which is done within an async task because we need to fetch the avatar from the server.
-            // This must be done here because we can't hold the lock on ALL_ROOM_INFO across an `.await` call,
-            // and we can't send an `UpdateRoomAvatar` update until after the `AddRoom` update has been sent.
-            if room_avatar_changed {
-                Handle::current().spawn(async move {
-                    let avatar = room_avatar(&room, &room_name_str).await;
-                    rooms_list::enqueue_rooms_list_update(RoomsListUpdate::UpdateRoomAvatar {
-                        room_id,
-                        avatar,
+
+/// Invoked when the room list service has received an update with a brand new room.
+async fn add_new_room(room: &room_list_service::Room) -> Result<()> {
+    let room_id = room.room_id().to_owned();
+
+    log!("Adding new room: {:?}, room_id: {room_id}", room.compute_display_name().await.map(|n| n.to_string()).unwrap_or_default());
+
+    let timeline = {
+        let builder = room.default_room_timeline_builder().await?
+            .track_read_marker_and_receipts();
+        room.init_timeline_with_builder(builder).await?;
+        room.timeline().ok_or_else(|| anyhow::anyhow!("BUG: room timeline not found for room {room_id}"))?
+    };
+    let latest_event = timeline.latest_event().await;
+    let (timeline_update_sender, timeline_update_receiver) = crossbeam_channel::unbounded();
+
+    let room_name = room.compute_display_name().await
+        .map(|n| n.to_string())
+        .ok();
+
+    Handle::current().spawn(timeline_subscriber_handler(
+        room.inner_room().clone(),
+        timeline.clone(),
+        timeline_update_sender.clone(),
+    ));
+
+    let latest = latest_event.as_ref().map(|ev| {
+        let sender_username = match ev.sender_profile() {
+            TimelineDetails::Ready(profile) => profile.display_name.as_deref(),
+            TimelineDetails::Unavailable => {
+                if let Some(event_id) = ev.event_id() {
+                    submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                        room_id: room_id.clone(),
+                        event_id: event_id.to_owned(),
                     });
-                });
+                }
+                None
             }
-        }
+            _ => None,
+        }.unwrap_or_else(|| ev.sender().as_str());
+        (
+            ev.timestamp(),
+            text_preview_of_timeline_item(ev.content(), sender_username)
+                .format_with(sender_username),
+        )
+    });
 
-        if !update.lists.is_empty() {
-            log!("Lists have an update: {:?}", update.lists);
-        }
-    }
+    rooms_list::enqueue_rooms_list_update(RoomsListUpdate::AddRoom(RoomPreviewEntry {
+        room_id: room_id.clone(),
+        latest,
+        // start with a basic text avatar; the avatar image will be fetched asynchronously below.
+        avatar: avatar_from_room_name(room_name.as_deref().unwrap_or_default()),
+        room_name,
+        has_been_paginated: false,
+        is_selected: false,
+    }));
+
+    spawn_fetch_room_avatar(room.inner_room().clone());
+
+    ALL_ROOM_INFO.lock().unwrap().insert(
+        room_id.clone(),
+        RoomInfo {
+            room_id,
+            timeline,
+            timeline_update_receiver: Some(timeline_update_receiver),
+            timeline_update_sender,
+            pagination_status_task: None,
+            typing_notice_subscriber: None,
+        },
+    );
 
-    if let Some(e) = stream_error {
-        bail!(e)
-    } else {
-        bail!("sync loop ended unexpectedly")
-    }
+    Ok(())
 }
 
-
 #[allow(unused)]
 async fn current_ignore_user_list(client: &Client) -> Option<BTreeSet<OwnedUserId>> {
     use matrix_sdk::ruma::events::ignored_user_list::IgnoredUserListEventContent;
@@ -1121,10 +1130,10 @@ async fn current_ignore_user_list(client: &Client) -> Option<BTreeSet<OwnedUserI
     Some(ignored_users)
 }
 
-
 fn handle_ignore_user_list_subscriber(client: Client) {
     let mut subscriber = client.subscribe_to_ignore_user_list_changes();
     Handle::current().spawn(async move {
+        let mut first_update = true;
         while let Some(ignore_list) = subscriber.next().await {
             log!("Received an updated ignored-user list: {ignore_list:?}");
             let ignored_users_new = ignore_list
@@ -1137,7 +1146,7 @@ fn handle_ignore_user_list_subscriber(client: Client) {
             let has_changed = *ignored_users_old != ignored_users_new;
             *ignored_users_old = ignored_users_new;
 
-            if has_changed {
+            if has_changed && !first_update {
                 // After successfully (un)ignoring a user, all timelines are fully cleared by the Matrix SDK.
                 // Therefore, we need to re-fetch all timelines for all rooms,
                 // and currently the only way to actually accomplish this is via pagination.
@@ -1150,44 +1159,68 @@ fn handle_ignore_user_list_subscriber(client: Client) {
                     });
                 }
             }
+
+            first_update = false;
         }
     });
 }
 
 
+fn handle_sync_service_state_subscriber(mut subscriber: Subscriber<sync_service::State>) {
+    Handle::current().spawn(async move {
+        while let Some(state) = subscriber.next().await {
+            log!("Received a sync service state update: {state:?}");
+            if state == sync_service::State::Error {
+                log!("Restarting sync service due to error.");
+                if let Some(ss) = SYNC_SERVICE.get() {
+                    ss.start().await;
+                }
+            }
+        }
+    });
+}
+
+
+fn handle_room_list_service_loading_state(mut loading_state: Subscriber<RoomListLoadingState>) {
+    Handle::current().spawn(async move {
+        while let Some(state) = loading_state.next().await {
+            log!("Received a room list loading state update: {state:?}");
+            match state {
+                RoomListLoadingState::NotLoaded => {
+                    enqueue_rooms_list_update(RoomsListUpdate::NotLoaded);
+                }
+                RoomListLoadingState::Loaded { maximum_number_of_rooms } => {
+                    enqueue_rooms_list_update(RoomsListUpdate::LoadedRooms { max_rooms: maximum_number_of_rooms });
+                }
+            }
+        }
+    });
+}
+
+const LOG_TIMELINE_DIFFS: bool = false;
+
 async fn timeline_subscriber_handler(
-    room_id: OwnedRoomId,
+    room: Room,
     timeline: Arc<Timeline>,
     sender: crossbeam_channel::Sender<TimelineUpdate>,
 ) {
+    let room_id = room.room_id().to_owned();
     log!("Starting timeline subscriber for room {room_id}...");
     let (mut timeline_items, mut subscriber) = timeline.subscribe_batched().await;
-    log!("Received initial timeline update for room {room_id}.");
+    log!("Received initial timeline update of {} items for room {room_id}.", timeline_items.len());
 
     sender.send(TimelineUpdate::NewItems {
-        items: timeline_items.clone(),
+        new_items: timeline_items.clone(),
         changed_indices: usize::MIN..usize::MAX,
         clear_cache: true,
     }).expect("Error: timeline update sender couldn't send update with initial items!");
 
-    let send_update = |timeline_items: Vector<Arc<TimelineItem>>, changed_indices: Range<usize>, clear_cache: bool, num_updates: usize| {
-        if num_updates > 0 {
-            // log!("timeline_subscriber: applied {num_updates} updates for room {room_id}, timeline now has {} items. Clear cache? {clear_cache}. Changes: {changed_indices:?}.", timeline_items.len());
-            sender.send(TimelineUpdate::NewItems {
-                items: timeline_items,
-                changed_indices,
-                clear_cache,
-            }).expect("Error: timeline update sender couldn't send update with new items!");
-
-            // Send a Makepad-level signal to update this room's timeline UI view.
-            SignalToUI::set_ui_signal();
-        }
-    };
-
-    const LOG_DIFFS: bool = false;
+    let mut latest_event = timeline.latest_event().await;
 
     while let Some(batch) = subscriber.next().await {
         let mut num_updates = 0;
+        // For now we always requery the latest event, but this can be better optimized.
+        let mut reobtain_latest_event = true;
         let mut index_of_first_change = usize::MAX;
         let mut index_of_last_change = usize::MIN;
         let mut clear_cache = false; // whether to clear the entire cache of items
@@ -1198,39 +1231,45 @@ async fn timeline_subscriber_handler(
                     index_of_first_change = min(index_of_first_change, timeline_items.len());
                     timeline_items.extend(values);
                     index_of_last_change = max(index_of_last_change, timeline_items.len());
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Append {_values_len}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Append {_values_len}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::Clear => {
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Clear"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Clear"); }
                     clear_cache = true;
                     timeline_items.clear();
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::PushFront { value } => {
-                    if LOG_DIFFS { log!("timeline_subscriber: diff PushFront"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff PushFront"); }
                     clear_cache = true;
                     timeline_items.push_front(value);
+                    reobtain_latest_event |= latest_event.is_none();
                     num_updates += 1;
                 }
                 VectorDiff::PushBack { value } => {
                     index_of_first_change = min(index_of_first_change, timeline_items.len());
                     timeline_items.push_back(value);
                     index_of_last_change = max(index_of_last_change, timeline_items.len());
-                    if LOG_DIFFS { log!("timeline_subscriber: diff PushBack. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff PushBack. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::PopFront => {
-                    if LOG_DIFFS { log!("timeline_subscriber: diff PopFront"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff PopFront"); }
                     clear_cache = true;
                     timeline_items.pop_front();
+                    // This doesn't affect whether we should reobtain the latest event.
                     num_updates += 1;
                 }
                 VectorDiff::PopBack => {
                     timeline_items.pop_back();
                     index_of_first_change = min(index_of_first_change, timeline_items.len());
                     index_of_last_change = usize::MAX;
-                    if LOG_DIFFS { log!("timeline_subscriber: diff PopBack. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff PopBack. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::Insert { index, value } => {
@@ -1241,14 +1280,16 @@ async fn timeline_subscriber_handler(
                         index_of_last_change = usize::MAX;
                     }
                     timeline_items.insert(index, value);
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Insert at {index}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Insert at {index}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::Set { index, value } => {
                     index_of_first_change = min(index_of_first_change, index);
                     index_of_last_change  = max(index_of_last_change, index.saturating_add(1));
                     timeline_items.set(index, value);
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Set at {index}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Set at {index}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::Remove { index } => {
@@ -1259,7 +1300,8 @@ async fn timeline_subscriber_handler(
                         index_of_last_change = usize::MAX;
                     }
                     timeline_items.remove(index);
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Remove at {index}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Remove at {index}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::Truncate { length } => {
@@ -1270,24 +1312,126 @@ async fn timeline_subscriber_handler(
                         index_of_last_change = usize::MAX;
                     }
                     timeline_items.truncate(length);
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Truncate to length {length}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Truncate to length {length}. Changes: {index_of_first_change}..{index_of_last_change}"); }
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
                 VectorDiff::Reset { values } => {
-                    if LOG_DIFFS { log!("timeline_subscriber: diff Reset, new length {}", values.len()); }
+                    if LOG_TIMELINE_DIFFS { log!("timeline_subscriber: room {room_id} diff Reset, new length {}", values.len()); }
                     clear_cache = true; // we must assume all items have changed.
                     timeline_items = values;
+                    reobtain_latest_event = true;
                     num_updates += 1;
                 }
             }
         }
-        send_update(timeline_items.clone(), index_of_first_change..index_of_last_change, clear_cache, num_updates);
+
+        if num_updates > 0 {
+            let new_latest_event = if reobtain_latest_event {
+                timeline.latest_event().await
+            } else {
+                None
+            };
+
+            let changed_indices = index_of_first_change..index_of_last_change;
+
+            if LOG_TIMELINE_DIFFS {
+                log!("timeline_subscriber: applied {num_updates} updates for room {room_id}, timeline now has {} items. Clear cache? {clear_cache}. Changes: {changed_indices:?}.", timeline_items.len());
+            }
+            sender.send(TimelineUpdate::NewItems {
+                new_items: timeline_items.clone(),
+                changed_indices,
+                clear_cache,
+            }).expect("Error: timeline update sender couldn't send update with new items!");
+        
+            // Send a Makepad-level signal to update this room's timeline UI view.
+            SignalToUI::set_ui_signal();
+        
+            // Update the latest event for this room.
+            if let Some(new_latest) = new_latest_event {
+                if latest_event.as_ref().map_or(true, |ev| ev.timestamp() < new_latest.timestamp()) {
+                    let room_avatar_changed = update_latest_event(&room_id, &new_latest);
+                    latest_event = Some(new_latest);
+                    if room_avatar_changed {
+                        spawn_fetch_room_avatar(room.clone());
+                    }
+                }
+            }
+        }
     }
 
     error!("Error: unexpectedly ended timeline subscriber for room {room_id}.");
 }
 
 
+/// Updates the latest event for the given room.
+///
+/// Returns `true` if this latest event indicates that the room's avatar has changed
+/// and should also be updated.
+fn update_latest_event(
+    room_id: &RoomId,
+    event_tl_item: &EventTimelineItem,
+) -> bool {
+    let mut room_avatar_changed = false;
+
+    let latest_event_sender_username = match event_tl_item.sender_profile() {
+        TimelineDetails::Ready(profile) => profile.display_name.as_deref(),
+        TimelineDetails::Unavailable => {
+            if let Some(event_id) = event_tl_item.event_id() {
+                submit_async_request(MatrixRequest::FetchDetailsForEvent {
+                    room_id: room_id.to_owned(),
+                    event_id: event_id.to_owned(),
+                });
+            }
+            None
+        }
+        _ => None,
+    }
+    .unwrap_or_else(|| event_tl_item.sender().as_str());
+
+    let latest_message_text = text_preview_of_timeline_item(
+        event_tl_item.content(),
+        latest_event_sender_username,
+    ).format_with(latest_event_sender_username);
+
+    // Check for relevant state events: a changed room name or avatar.
+    match event_tl_item.content() {
+        TimelineItemContent::OtherState(other) => match other.content() {
+            AnyOtherFullStateEventContent::RoomName(FullStateEventContent::Original { content, .. }) => {
+                rooms_list::enqueue_rooms_list_update(RoomsListUpdate::UpdateRoomName {
+                    room_id: room_id.to_owned(),
+                    new_room_name: content.name.clone(),
+                });
+            }
+            AnyOtherFullStateEventContent::RoomAvatar(_avatar_event) => {
+                room_avatar_changed = true;
+            }
+            _ => { }
+        }
+        _ => { }
+    }
+    enqueue_rooms_list_update(RoomsListUpdate::UpdateLatestEvent {
+        room_id: room_id.to_owned(),
+        timestamp: event_tl_item.timestamp(),
+        latest_message_text,
+    });
+    room_avatar_changed
+}
+
+
+/// Spawn a new async task to fetch the room's new avatar.
+fn spawn_fetch_room_avatar(room: Room) {
+    let room_id = room.room_id().to_owned();
+    let room_name_str = room.cached_display_name().map(|dn| dn.to_string());
+    Handle::current().spawn(async move {
+        let avatar = room_avatar(&room, &room_name_str).await;
+        rooms_list::enqueue_rooms_list_update(RoomsListUpdate::UpdateRoomAvatar {
+            room_id,
+            avatar,
+        });
+    });
+}
+
 /// Fetches and returns the avatar image for the given room (if one exists),
 /// otherwise returns a text avatar string of the first character of the room name.
 async fn room_avatar(room: &Room, room_name: &Option<String>) -> RoomPreviewAvatar {
diff --git a/src/utils.rs b/src/utils.rs
index d5530d3f..fdebe1e3 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -93,9 +93,9 @@ pub fn relative_format(millis: &MilliSecondsSinceUnixEpoch) -> Option<String> {
 
     // Handle different time ranges and format accordingly
     if duration < Duration::seconds(60) {
-        Some("Just now".to_string())
+        Some("Now".to_string())
     } else if duration < Duration::minutes(60) {
-        let minutes_text = if duration.num_minutes() == 1 { "minute" } else { "minutes" };
+        let minutes_text = if duration.num_minutes() == 1 { "min" } else { "mins" };
         Some(format!("{} {} ago", duration.num_minutes(), minutes_text))
     } else if duration < Duration::hours(24) && now.date_naive() == datetime.date_naive() {
         Some(format!("{}", datetime.format("%H:%M"))) // "HH:MM" format for today

From 22638d97769e0e8a86e8c073669b056505783746 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 4 Oct 2024 14:01:51 +0800
Subject: [PATCH 03/30] touchup whitespace

---
 src/home/room_read_receipt.rs |  6 +++---
 src/home/room_screen.rs       | 16 +++++++---------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 4d2c15fe..bf73a253 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,6 +1,6 @@
 use makepad_widgets::*;
 use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
-use crate::shared::avatar::{Avatar};
+use crate::shared::avatar::Avatar;
 live_design!{
     import makepad_draw::shader::std::*;
     import crate::shared::avatar::*;
@@ -72,7 +72,7 @@ impl Widget for Sequencer {
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         cx.begin_turtle(walk, Layout::default());        
         let button = self.button;
-        for (i,name) in self.read_receipts.iter().enumerate(){
+        for (i, name) in self.read_receipts.iter().enumerate(){
             if i>4{
                 break
             }
@@ -106,7 +106,7 @@ impl SequencerRef {
     }
     pub fn set_read_receipts(&mut self,cx:&mut Cx , room_id: OwnedRoomId, read_user_id:Vec<OwnedUserId>){
         if let Some(mut inner) = self.borrow_mut() {
-            inner.read_receipts = read_user_id.iter().map(|f|f.to_string().chars().nth(1).unwrap().to_string()).collect();
+            inner.read_receipts = read_user_id.iter().map(| f | f.to_string().chars().nth(1).unwrap().to_string()).collect();
         }
     }
     pub fn hover_in(&self, actions:&Actions)->Option<Rect>{
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index a1f54fe7..fe69a494 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -426,7 +426,7 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-            sequencer = <Sequencer> {width: 40, height: 30, margin: {top: (12.0)},hover_actions_enabled:true}
+            sequencer = <Sequencer> {width: 40, height: 30, margin: { top: (12.0)}, hover_actions_enabled:true}
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.
@@ -1031,18 +1031,16 @@ impl Widget for RoomScreen {
         if let Event::Actions(actions) = event {
             let portal_list = self.portal_list(id!(list));
             let mut tooltip = self.tooltip(id!(tooltip));
-            for (_,wr) in portal_list.items_with_actions(actions).iter(){
+            portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
                 let seq = wr.sequencer(id!(sequencer));
                 let num_seen = seq.get_read_receipts().len();
                 if let Some(rect) = seq.hover_in(actions){
-                    tooltip.show_with_options(cx, rect.pos, &format!("{} seen",num_seen));
+                    tooltip.show_with_options(cx, rect.pos, &format!("{} seen", num_seen));
                 }
                 if seq.hover_out(&actions) {
                     tooltip.hide(cx);
                 }
-            }
-           
-     
+            });     
             for action in actions {
                 // Handle actions on a message, e.g., clicking the reply button or clicking the reply preview.
                 match action.as_widget_action().cast() {
@@ -2115,11 +2113,11 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template).unwrap();
-            let mut read_receipts =vec![];
-            for (ower_user_id,_) in receipts.iter(){
+            let mut read_receipts = vec![];
+            for (ower_user_id, _) in receipts.iter() {
                 read_receipts.push(ower_user_id.clone());
             }
-            item.sequencer(id!(sequencer)).set_read_receipts(cx,room_id.to_owned(),read_receipts);
+            item.sequencer(id!(sequencer)).set_read_receipts(cx, room_id.to_owned(), read_receipts);
             
             if existed && item_drawn_status.content_drawn {
                 (item, true)

From f4de4450dccb80f97dd81c113a10943b9e87ba78 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 10 Oct 2024 13:56:01 +0800
Subject: [PATCH 04/30] added avatar img in read_receipts

---
 src/home/room_read_receipt.rs     |  82 ++++++++++---------
 src/home/room_screen.rs           | 132 ++++++++++++++++++++----------
 src/profile/user_profile.rs       |   2 +-
 src/profile/user_profile_cache.rs |  15 ++++
 4 files changed, 148 insertions(+), 83 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index bf73a253..07296f88 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,6 +1,6 @@
 use makepad_widgets::*;
-use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
-use crate::shared::avatar::Avatar;
+use std::cmp;
+use crate::shared::avatar::{Avatar, AvatarRef, AvatarWidgetExt, AvatarWidgetRefExt};
 live_design!{
     import makepad_draw::shader::std::*;
     import crate::shared::avatar::*;
@@ -24,18 +24,26 @@ pub struct AvatarId(pub LiveId);
 
 #[derive(Live, Widget)]
 pub struct Sequencer {
+    #[redraw] #[rust] area: Area,
     #[redraw] #[live] draw_text: DrawText,
-    #[rust] area: Area,
+    # [deref] pub deref : View,
     #[walk] walk: Walk,
     #[live] button: Option<LivePtr>,
     #[live(false)] hover_actions_enabled: bool,
-    #[rust] buttons: ComponentMap<AvatarId, Avatar>,
-    #[rust] read_receipts: Vec<String>
+    #[rust] buttons: Vec<Avatar>,
+    #[rust] count: usize
 }
 
+#[derive(Clone, Debug, DefaultNone)]
+pub enum SequencerAction {
+    HoverIn(Rect),
+    HoverOut,
+    None
+    
+}
 impl LiveHook for Sequencer {
-fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
-        for button in self.buttons.values_mut() {
+    fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
+        for button in self.buttons.iter_mut() {
             if let Some(index) = nodes.child_by_name(index, live_id!(button).as_field()) {
                 button.apply(cx, apply, index, nodes);
             }
@@ -43,18 +51,11 @@ fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &
         self.area.redraw(cx);
     }
 }
-
-#[derive(Clone, Debug, DefaultNone)]
-pub enum SequencerAction {
-    HoverIn(Rect),
-    HoverOut,
-    None
-}
 impl Widget for Sequencer {
 
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
-        for button in self.buttons.values_mut() {
+        for button in self.buttons.iter_mut() {
             match button.hit(cx, event, self.area){
                 Hit::FingerHoverIn(_) => {
                     let rect = self.area.rect(cx);
@@ -70,22 +71,9 @@ impl Widget for Sequencer {
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        cx.begin_turtle(walk, Layout::default());        
-        let button = self.button;
-        for (i, name) in self.read_receipts.iter().enumerate(){
-            if i>4{
-                break
-            }
-            let btn_id = LiveId(i as u64).into();
-            let btn = self.buttons.get_or_insert(cx, btn_id, | cx | {
-                Avatar::new_from_ptr(cx, button)
-            });
-            btn.set_text(name);            
-            btn.draw(cx, scope);
+        for v in self.buttons.iter_mut(){
+            let _ = v.draw(cx, scope);
         }
-           
-        cx.end_turtle_with_area(&mut self.area);
-        self.buttons.retain_visible();
         DrawStep::done()
     }
     
@@ -96,20 +84,38 @@ impl Widget for Sequencer {
     fn data_to_widget(&mut self, cx: &mut Cx, nodes:&[LiveNode], path: &[LiveId]){
     }
 }
+impl Sequencer {
 
+    pub fn set_range(&mut self, cx: &mut Cx, count: usize) {
+        if count != self.buttons.len() {
+            self.buttons.clear();
+            for _ in 0..cmp::min(5, count) {
+                self.buttons.push(Avatar::new_from_ptr(cx, self.button));
+            }
+        }
+        self.count = count;
+    }
+  
+    pub fn iter_mut(&mut self ) -> std::slice::IterMut<'_,Avatar> {
+        self.buttons.iter_mut()
+    }
+    
+}
 impl SequencerRef {
-    pub fn get_read_receipts(&self)->Vec<String>{
-        if let Some(inner) = self.borrow() {
-            return inner.read_receipts.clone();
+    pub fn set_range(&self,cx:&mut Cx, count: usize) {
+        if let Some(ref mut inner) = self.borrow_mut() {
+            inner.set_range(cx, count);
         }
-        return vec![];
     }
-    pub fn set_read_receipts(&mut self,cx:&mut Cx , room_id: OwnedRoomId, read_user_id:Vec<OwnedUserId>){
-        if let Some(mut inner) = self.borrow_mut() {
-            inner.read_receipts = read_user_id.iter().map(| f | f.to_string().chars().nth(1).unwrap().to_string()).collect();
+    pub fn len(&self) -> usize{
+        if let Some(ref mut inner) = self.borrow_mut() {
+            inner.buttons.len()
+        } else {
+            0
         }
     }
     pub fn hover_in(&self, actions:&Actions)->Option<Rect>{
+
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
             match item.cast(){
                 SequencerAction::HoverIn(rect) => Some(rect),
@@ -129,4 +135,4 @@ impl SequencerRef {
             false
         }
     }
-}
+}
\ No newline at end of file
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index c9b3ce01..49b06c6f 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -25,17 +25,15 @@ use matrix_sdk_ui::timeline::{
 };
 
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::room_read_receipt::*, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
-        user_profile_cache,
+        user_profile_cache::{self, set_user_profile},
     }, shared::{
-        avatar::{AvatarRef, AvatarWidgetRefExt},
+        avatar::{Avatar, AvatarRef, AvatarWidgetRefExt},
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
         typing_animation::TypingAnimationWidgetExt,
-    },
-    sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst},
-    home::room_read_receipt::*
+    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
 };
 use rangemap::RangeSet;
 
@@ -1033,8 +1031,9 @@ impl Widget for RoomScreen {
             let mut tooltip = self.tooltip(id!(tooltip));
             portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
                 let seq = wr.sequencer(id!(sequencer));
-                let num_seen = seq.get_read_receipts().len();
-                if let Some(rect) = seq.hover_in(actions){
+                // let num_seen = seq.get_read_receipts().len();
+                let num_seen = seq.len();
+                if let Some(rect) = seq.hover_in(actions) {
                     tooltip.show_with_options(cx, rect.pos, &format!("{} seen", num_seen));
                 }
                 if seq.hover_out(&actions) {
@@ -1605,12 +1604,14 @@ impl RoomScreen {
         replying_to: (EventTimelineItem, RepliedToInfo),
     ) {
         let replying_preview_view = self.view(id!(replying_preview));
+        let avatar_ref = replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar));
+        let Some(ref mut avatar)  = avatar_ref.borrow_mut() else { return };
         let (replying_preview_username, _) = set_avatar_and_get_username(
             cx,
-            replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar)),
+            avatar,
             self.room_id.as_ref().unwrap(),
             replying_to.0.sender(),
-            replying_to.0.sender_profile(),
+            Some(replying_to.0.sender_profile()),
             replying_to.0.event_id(),
         );
 
@@ -2083,7 +2084,6 @@ fn populate_message_view(
     item_drawn_status: ItemDrawnStatus,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let receipts = event_tl_item.read_receipts();
-    
     let mut new_drawn_status = item_drawn_status;
 
     let ts_millis = event_tl_item.timestamp();
@@ -2112,12 +2112,17 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template).unwrap();
-            let mut read_receipts = vec![];
-            for (ower_user_id, _) in receipts.iter() {
-                read_receipts.push(ower_user_id.clone());
+            item.sequencer(id!(sequencer)).set_range(cx, receipts.len());
+            let seq = item.sequencer(id!(sequencer));
+            let mut receipt_iter = receipts.iter();
+            if let Some(ref mut v)= seq.borrow_mut() {
+                for avatar in v.iter_mut() {
+                    if let Some((user, r)) = receipt_iter.next() {
+                        set_avatar_and_get_username(cx, avatar, room_id, user, None, event_tl_item.event_id());
+                    }
+                }
             }
-            item.sequencer(id!(sequencer)).set_read_receipts(cx, room_id.to_owned(), read_receipts);
-            
+
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2189,14 +2194,19 @@ fn populate_message_view(
         new_drawn_status.profile_drawn = true;
     } else {
         // log!("\t --> populate_message_view(): DRAWING  profile draw for item_id: {item_id}");
-        let (username, profile_drawn) = set_avatar_and_get_username(
-            cx,
-            item.avatar(id!(profile.avatar)),
-            room_id,
-            event_tl_item.sender(),
-            event_tl_item.sender_profile(),
-            event_tl_item.event_id(),
-        );
+        let avatar_ref = item.avatar(id!(profile.avatar));
+        let (username, profile_drawn) = if let Some(ref mut avatar)  = avatar_ref.borrow_mut() {
+            set_avatar_and_get_username(
+                cx,
+                avatar,
+                room_id,
+                event_tl_item.sender(),
+                Some(event_tl_item.sender_profile()),
+                event_tl_item.event_id(),
+            )
+        } else {
+            (String::from(""), false )
+        };
         item.label(id!(content.username)).set_text(&username);
         new_drawn_status.profile_drawn = profile_drawn;
     }
@@ -2338,13 +2348,15 @@ fn draw_replied_to_message(
 
         match &in_reply_to_details.event {
             TimelineDetails::Ready(replied_to_event) => {
+                let avatar_ref = replied_to_message_view
+                .avatar(id!(replied_to_message_content.reply_preview_avatar));
+                let Some(ref mut avatar)  = avatar_ref.borrow_mut() else { return (show_reply, replied_to_event_id) };
                 let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
                     cx,
-                    replied_to_message_view
-                        .avatar(id!(replied_to_message_content.reply_preview_avatar)),
+                    avatar,
                     room_id,
                     replied_to_event.sender(),
-                    replied_to_event.sender_profile(),
+                    Some(replied_to_event.sender_profile()),
                     Some(in_reply_to_details.event_id.as_ref()),
                 );
 
@@ -2624,14 +2636,20 @@ fn populate_small_state_event(
 
     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.sender(),
-            event_tl_item.sender_profile(),
-            event_tl_item.event_id(),
-        );
+        let avatar_ref = item.avatar(id!(avatar));
+        let (username, profile_drawn) = if let Some(ref mut avatar ) = avatar_ref.borrow_mut() {
+             set_avatar_and_get_username(
+                cx,
+                avatar,
+                room_id,
+                event_tl_item.sender(),
+                Some(event_tl_item.sender_profile()),
+                event_tl_item.event_id(),
+            )
+        } else {
+            (event_tl_item.sender().to_string(),false)
+        };
+        
         // Draw the timestamp as part of the profile.
         set_timestamp(
             &item,
@@ -2695,20 +2713,36 @@ fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSeco
 ///    (for purposes of caching it to avoid future redraws).
 fn set_avatar_and_get_username(
     cx: &mut Cx,
-    avatar: AvatarRef,
+    avatar: &mut Avatar,
     room_id: &RoomId,
     sender_user_id: &UserId,
-    sender_profile: &TimelineDetails<Profile>,
+    sender_profile_opt: Option<&TimelineDetails<Profile>>,
     event_id: Option<&EventId>,
 ) -> (String, bool) {
+    // let sender_profile_opt = if sender_profile_opt.is_none() {
+    //     user_profile_cache::get_user_profile(cx, sender_user_id).and_then(|f| 
+    //         Some(TimelineDetails::Ready(Profile{
+    //             display_name: Some(f.displayable_name().to_string()),
+    //             display_name_ambiguous: false,
+    //             avatar_url: if let AvatarState::Known(uri) = f.avatar_state {
+    //                 uri
+    //             } else {None}
+    //         }))
+    //     )
+    // } else { sender_profile_opt.map(|f|f.clone()) };
+    // let Some(sender_profile) = sender_profile_opt else { 
+    //     return (String::from(""), false) 
+    // };
     // 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.
-    let (username_opt, avatar_state) = match sender_profile {
-        TimelineDetails::Ready(profile) => (
+    let (username_opt, avatar_state) = match sender_profile_opt {
+        Some(TimelineDetails::Ready(profile)) => {
+            
+            (
             profile.display_name.clone(),
             AvatarState::Known(profile.avatar_url.clone()),
-        ),
-        not_ready => {
+        )},
+        Some(not_ready) => {
             if matches!(not_ready, TimelineDetails::Unavailable) {
                 if let Some(event_id) = event_id {
                     submit_async_request(MatrixRequest::FetchDetailsForEvent {
@@ -2730,10 +2764,18 @@ fn set_avatar_and_get_username(
                     .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
             })
             .unwrap_or((None, AvatarState::Unknown))
+        },
+        None => {
+            if let Some(user_profile) = user_profile_cache::get_user_profile(cx, sender_user_id) {
+                (user_profile.username,user_profile.avatar_state)
+            } else {
+                (None, AvatarState::Unknown)
+            }
         }
     };
 
-    let (avatar_img_data_opt, profile_drawn) = match avatar_state {
+
+    let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
         AvatarState::Loaded(data) => (Some(data), true),
         AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
             AvatarCacheEntry::Loaded(data) => (Some(data), true),
@@ -2748,15 +2790,17 @@ fn set_avatar_and_get_username(
     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_img_data_opt.and_then(|data| {
+        set_user_profile(cx, sender_user_id, username.clone(), AvatarState::Loaded(data.clone()));
         avatar.show_image(
             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((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
         &username,
diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index 35f68e5b..6eb3fb5a 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -2,7 +2,7 @@ use std::{borrow::Cow, ops::{Deref, DerefMut}, sync::Arc};
 use makepad_widgets::*;
 use matrix_sdk::{room::{RoomMember, RoomMemberRole}, ruma::{events::room::member::MembershipState, OwnedMxcUri, OwnedRoomId, OwnedUserId}};
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils
+    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils,
 };
 
 use super::user_profile_cache::{self, get_user_profile_and_room_member, get_user_room_member_info};
diff --git a/src/profile/user_profile_cache.rs b/src/profile/user_profile_cache.rs
index 6852db84..ff8d8225 100644
--- a/src/profile/user_profile_cache.rs
+++ b/src/profile/user_profile_cache.rs
@@ -1,6 +1,7 @@
 use crossbeam_queue::SegQueue;
 use makepad_widgets::{log, warning, Cx, SignalToUI};
 use matrix_sdk::{room::RoomMember, ruma::{OwnedRoomId, OwnedUserId, RoomId, UserId}};
+use matrix_sdk_ui::timeline::Profile;
 use std::{cell::RefCell, collections::{btree_map::Entry, BTreeMap}};
 
 use crate::profile::user_profile::AvatarState;
@@ -197,6 +198,20 @@ pub fn get_user_profile(_cx: &mut Cx, user_id: &UserId) -> Option<UserProfile> {
     })
 }
 
+#[allow(unused)]
+pub fn set_user_profile(_cx: &mut Cx, user_id: &UserId, username: String, avatar_state: AvatarState) {
+    USER_PROFILE_CACHE.with_borrow_mut(|cache| {
+        cache.entry(user_id.to_owned()).or_insert(UserProfileCacheEntry{
+            user_profile: UserProfile{
+                user_id: user_id.to_owned(),
+                username: Some(username),
+                avatar_state: avatar_state
+            },
+            room_members: BTreeMap::new()
+        });
+    });
+}
+
 /// Returns a clone of the cached user profile for the given user ID
 /// and a clone of that user's room member info for the given room ID.
 ///

From e4e9b1db1dea8b8a7d5f1ddd3e29b1dd3e65d9a0 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 10 Oct 2024 14:05:07 +0800
Subject: [PATCH 05/30] fixed tooltip position

---
 src/home/room_read_receipt.rs | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 07296f88..f73bf393 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -57,8 +57,11 @@ impl Widget for Sequencer {
         let uid = self.widget_uid();
         for button in self.buttons.iter_mut() {
             match button.hit(cx, event, self.area){
-                Hit::FingerHoverIn(_) => {
-                    let rect = self.area.rect(cx);
+                Hit::FingerHoverIn(finger_event) => {
+                    let rect = Rect{
+                        pos: finger_event.abs,
+                        size:DVec2::new()
+                    };
                     cx.widget_action(uid, &scope.path, SequencerAction::HoverIn(rect));
                 }
                 Hit::FingerHoverOut(_) => {

From 961a00f536841113cbecc67ce93daa8c28fbfc6b Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 10 Oct 2024 14:28:07 +0800
Subject: [PATCH 06/30] code formating

---
 src/home/room_read_receipt.rs     | 112 ++++++++++++++++--------------
 src/home/room_screen.rs           | 112 ++++++++++++++++--------------
 src/profile/user_profile_cache.rs |  31 ++++++---
 3 files changed, 139 insertions(+), 116 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index f73bf393..6d42a161 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,11 +1,11 @@
+use crate::shared::avatar::Avatar;
 use makepad_widgets::*;
 use std::cmp;
-use crate::shared::avatar::{Avatar, AvatarRef, AvatarWidgetExt, AvatarWidgetRefExt};
-live_design!{
+live_design! {
     import makepad_draw::shader::std::*;
     import crate::shared::avatar::*;
-    
-    Sequencer = {{Sequencer}} {
+
+    AvatarRow = {{AvatarRow}} {
         button: <Avatar> {
             width: 15.0,
             height: 15.0,
@@ -19,29 +19,35 @@ live_design!{
     }
 }
 
-#[derive(Clone, Debug, Default, Eq, Hash, Copy, PartialEq, FromLiveId)]
-pub struct AvatarId(pub LiveId);
-
 #[derive(Live, Widget)]
-pub struct Sequencer {
-    #[redraw] #[rust] area: Area,
-    #[redraw] #[live] draw_text: DrawText,
-    # [deref] pub deref : View,
-    #[walk] walk: Walk,
-    #[live] button: Option<LivePtr>,
-    #[live(false)] hover_actions_enabled: bool,
-    #[rust] buttons: Vec<Avatar>,
-    #[rust] count: usize
+pub struct AvatarRow {
+    #[redraw]
+    #[rust]
+    area: Area,
+    #[redraw]
+    #[live]
+    draw_text: DrawText,
+    #[deref]
+    pub deref: View,
+    #[walk]
+    walk: Walk,
+    #[live]
+    button: Option<LivePtr>,
+    #[live(false)]
+    hover_actions_enabled: bool,
+    #[rust]
+    buttons: Vec<Avatar>,
+    #[rust]
+    count: usize,
 }
 
 #[derive(Clone, Debug, DefaultNone)]
-pub enum SequencerAction {
+pub enum AvatarRowAction {
     HoverIn(Rect),
     HoverOut,
-    None
-    
+    None,
 }
-impl LiveHook for Sequencer {
+impl LiveHook for AvatarRow {
     fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
         for button in self.buttons.iter_mut() {
             if let Some(index) = nodes.child_by_name(index, live_id!(button).as_field()) {
@@ -51,44 +57,46 @@ impl LiveHook for Sequencer {
         self.area.redraw(cx);
     }
 }
-impl Widget for Sequencer {
-
+impl Widget for AvatarRow {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
         for button in self.buttons.iter_mut() {
-            match button.hit(cx, event, self.area){
+            match button.hit(cx, event, self.area) {
                 Hit::FingerHoverIn(finger_event) => {
-                    let rect = Rect{
+                    let rect = Rect {
                         pos: finger_event.abs,
-                        size:DVec2::new()
+                        size: DVec2::new(),
                     };
-                    cx.widget_action(uid, &scope.path, SequencerAction::HoverIn(rect));
+                    cx.widget_action(uid, &scope.path, AvatarRowAction::HoverIn(rect));
                 }
                 Hit::FingerHoverOut(_) => {
-                    cx.widget_action(uid, &scope.path, SequencerAction::HoverOut);
+                    cx.widget_action(uid, &scope.path, AvatarRowAction::HoverOut);
                 }
-                _=>{}
+                _ => {}
             }
         }
-        
     }
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
-        for v in self.buttons.iter_mut(){
+        for v in self.buttons.iter_mut() {
             let _ = v.draw(cx, scope);
         }
         DrawStep::done()
     }
-    
-    fn widget_to_data(&self, cx: &mut Cx, actions: &Actions, nodes: &mut LiveNodeVec, path: &[LiveId]) -> bool {
+
+    fn widget_to_data(
+        &self,
+        cx: &mut Cx,
+        actions: &Actions,
+        nodes: &mut LiveNodeVec,
+        path: &[LiveId],
+    ) -> bool {
         false
     }
 
-    fn data_to_widget(&mut self, cx: &mut Cx, nodes:&[LiveNode], path: &[LiveId]){
-    }
+    fn data_to_widget(&mut self, cx: &mut Cx, nodes: &[LiveNode], path: &[LiveId]) {}
 }
-impl Sequencer {
-
+impl AvatarRow {
     pub fn set_range(&mut self, cx: &mut Cx, count: usize) {
         if count != self.buttons.len() {
             self.buttons.clear();
@@ -98,44 +106,42 @@ impl Sequencer {
         }
         self.count = count;
     }
-  
-    pub fn iter_mut(&mut self ) -> std::slice::IterMut<'_,Avatar> {
+
+    pub fn iter_mut(&mut self) -> std::slice::IterMut<'_, Avatar> {
         self.buttons.iter_mut()
     }
-    
 }
-impl SequencerRef {
-    pub fn set_range(&self,cx:&mut Cx, count: usize) {
+impl AvatarRowRef {
+    pub fn set_range(&self, cx: &mut Cx, count: usize) {
         if let Some(ref mut inner) = self.borrow_mut() {
             inner.set_range(cx, count);
         }
     }
-    pub fn len(&self) -> usize{
+    pub fn len(&self) -> usize {
         if let Some(ref mut inner) = self.borrow_mut() {
-            inner.buttons.len()
+            inner.count
         } else {
             0
         }
     }
-    pub fn hover_in(&self, actions:&Actions)->Option<Rect>{
-
+    pub fn hover_in(&self, actions: &Actions) -> Option<Rect> {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
-            match item.cast(){
-                SequencerAction::HoverIn(rect) => Some(rect),
-                _=> None
+            match item.cast() {
+                AvatarRowAction::HoverIn(rect) => Some(rect),
+                _ => None,
             }
         } else {
             None
         }
     }
-    pub fn hover_out(&self, actions:&Actions)->bool{
+    pub fn hover_out(&self, actions: &Actions) -> bool {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
-            match item.cast(){
-                SequencerAction::HoverOut => true,
-                _=> false
+            match item.cast() {
+                AvatarRowAction::HoverOut => true,
+                _ => false,
             }
         } else {
             false
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 49b06c6f..cceefb41 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -27,9 +27,9 @@ use matrix_sdk_ui::timeline::{
 use crate::{
     avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::room_read_receipt::*, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
-        user_profile_cache::{self, set_user_profile},
+        user_profile_cache,
     }, shared::{
-        avatar::{Avatar, AvatarRef, AvatarWidgetRefExt},
+        avatar::{Avatar, AvatarWidgetRefExt},
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
         typing_animation::TypingAnimationWidgetExt,
@@ -424,7 +424,7 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-            sequencer = <Sequencer> {width: 40, height: 30, margin: { top: (12.0)}, hover_actions_enabled:true}
+            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (12.0)}, hover_actions_enabled:true}
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.
@@ -1030,8 +1030,7 @@ impl Widget for RoomScreen {
             let portal_list = self.portal_list(id!(list));
             let mut tooltip = self.tooltip(id!(tooltip));
             portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
-                let seq = wr.sequencer(id!(sequencer));
-                // let num_seen = seq.get_read_receipts().len();
+                let seq = wr.avatar_row(id!(avatar_row));
                 let num_seen = seq.len();
                 if let Some(rect) = seq.hover_in(actions) {
                     tooltip.show_with_options(cx, rect.pos, &format!("{} seen", num_seen));
@@ -2112,8 +2111,8 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template).unwrap();
-            item.sequencer(id!(sequencer)).set_range(cx, receipts.len());
-            let seq = item.sequencer(id!(sequencer));
+            item.avatar_row(id!(avatar_row)).set_range(cx, receipts.len());
+            let seq = item.avatar_row(id!(avatar_row));
             let mut receipt_iter = receipts.iter();
             if let Some(ref mut v)= seq.borrow_mut() {
                 for avatar in v.iter_mut() {
@@ -2719,29 +2718,14 @@ fn set_avatar_and_get_username(
     sender_profile_opt: Option<&TimelineDetails<Profile>>,
     event_id: Option<&EventId>,
 ) -> (String, bool) {
-    // let sender_profile_opt = if sender_profile_opt.is_none() {
-    //     user_profile_cache::get_user_profile(cx, sender_user_id).and_then(|f| 
-    //         Some(TimelineDetails::Ready(Profile{
-    //             display_name: Some(f.displayable_name().to_string()),
-    //             display_name_ambiguous: false,
-    //             avatar_url: if let AvatarState::Known(uri) = f.avatar_state {
-    //                 uri
-    //             } else {None}
-    //         }))
-    //     )
-    // } else { sender_profile_opt.map(|f|f.clone()) };
-    // let Some(sender_profile) = sender_profile_opt else { 
-    //     return (String::from(""), false) 
-    // };
     // 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.
+    let mut taken_from_cache = false;
     let (username_opt, avatar_state) = match sender_profile_opt {
-        Some(TimelineDetails::Ready(profile)) => {
-            
-            (
+        Some(TimelineDetails::Ready(profile)) => (
             profile.display_name.clone(),
             AvatarState::Known(profile.avatar_url.clone()),
-        )},
+        ),
         Some(not_ready) => {
             if matches!(not_ready, TimelineDetails::Unavailable) {
                 if let Some(event_id) = event_id {
@@ -2752,29 +2736,36 @@ fn set_avatar_and_get_username(
                 }
             }
             // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
-            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()),
-                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                        )
-                    })
-                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-            })
+            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()),
+                                AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                            )
+                        })
+                        .unwrap_or_else(|| {
+                            (profile.username.clone(), profile.avatar_state.clone())
+                        })
+                },
+            )
             .unwrap_or((None, AvatarState::Unknown))
-        },
+        }
         None => {
-            if let Some(user_profile) = user_profile_cache::get_user_profile(cx, sender_user_id) {
-                (user_profile.username,user_profile.avatar_state)
+            if let Some(user_profile) = user_profile_cache::get_user_profile(cx, sender_user_id)
+            {
+                taken_from_cache = true;
+                (user_profile.username, user_profile.avatar_state)
             } else {
                 (None, AvatarState::Unknown)
             }
         }
     };
 
-
     let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
         AvatarState::Loaded(data) => (Some(data), true),
         AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
@@ -2790,21 +2781,36 @@ fn set_avatar_and_get_username(
     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| {
-        set_user_profile(cx, sender_user_id, username.clone(), AvatarState::Loaded(data.clone()));
-        avatar.show_image(
-            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((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
-        &username,
-    ));
+    avatar_img_data_opt
+        .and_then(|data| {
+            if !taken_from_cache {
+                user_profile_cache::set_user_profile(
+                    cx,
+                    sender_user_id,
+                    username.clone(),
+                    AvatarState::Loaded(data.clone()),
+                );
+            }
+            avatar
+                .show_image(
+                    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((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
+                &username,
+            )
+        });
     (username, profile_drawn)
 }
 
diff --git a/src/profile/user_profile_cache.rs b/src/profile/user_profile_cache.rs
index ff8d8225..66d83b3e 100644
--- a/src/profile/user_profile_cache.rs
+++ b/src/profile/user_profile_cache.rs
@@ -197,18 +197,29 @@ pub fn get_user_profile(_cx: &mut Cx, user_id: &UserId) -> Option<UserProfile> {
         cache.get(user_id).map(|entry| entry.user_profile.clone())
     })
 }
-
+/// Set user profile into cache only if cache does not have user profile
+///
+/// This function requires passing in a reference to `Cx`,
+/// which isn't used, but acts as a guarantee that this function
+/// must only be called by the main UI thread.
 #[allow(unused)]
-pub fn set_user_profile(_cx: &mut Cx, user_id: &UserId, username: String, avatar_state: AvatarState) {
+pub fn set_user_profile(
+    _cx: &mut Cx,
+    user_id: &UserId,
+    username: String,
+    avatar_state: AvatarState,
+) {
     USER_PROFILE_CACHE.with_borrow_mut(|cache| {
-        cache.entry(user_id.to_owned()).or_insert(UserProfileCacheEntry{
-            user_profile: UserProfile{
-                user_id: user_id.to_owned(),
-                username: Some(username),
-                avatar_state: avatar_state
-            },
-            room_members: BTreeMap::new()
-        });
+        cache
+            .entry(user_id.to_owned())
+            .or_insert(UserProfileCacheEntry {
+                user_profile: UserProfile {
+                    user_id: user_id.to_owned(),
+                    username: Some(username),
+                    avatar_state,
+                },
+                room_members: BTreeMap::new(),
+            });
     });
 }
 

From c15e8da7ba97643e5f0fb4ea9e81df4b4ae00f7a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 10 Oct 2024 14:41:48 +0800
Subject: [PATCH 07/30] fix merge issue

---
 src/home/room_screen.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 8df92e55..577ce54b 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -2107,7 +2107,7 @@ fn populate_message_view(
             } else {
                 live_id!(Message)
             };
-            let (item, existed) = list.item_with_existed(cx, item_id, template).unwrap();
+            let (item, existed) = list.item_with_existed(cx, item_id, template);
             item.avatar_row(id!(avatar_row)).set_range(cx, receipts.len());
             let seq = item.avatar_row(id!(avatar_row));
             let mut receipt_iter = receipts.iter();

From 3571b1ecd0292b93006ec4262ae1cb82db89b38a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 10 Oct 2024 14:50:21 +0800
Subject: [PATCH 08/30] change sender_id to generic avatar_id

---
 src/home/room_screen.rs | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 577ce54b..a9b5097a 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -2687,8 +2687,9 @@ fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSeco
 /// 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`.
+/// If the user profile is not ready, this function will submit an async request
+/// to fetch the user profile from the server, but only if the event ID is `Some`.
+/// For Read Receipt cases, there is no user's profile. The Avatar cache is taken from the sender's profile 
 ///
 /// This function will always choose a nice, displayable username and avatar.
 ///
@@ -2713,14 +2714,14 @@ fn set_avatar_and_get_username(
     cx: &mut Cx,
     avatar: &mut Avatar,
     room_id: &RoomId,
-    sender_user_id: &UserId,
-    sender_profile_opt: Option<&TimelineDetails<Profile>>,
+    avatar_user_id: &UserId,
+    avatar_profile_opt: Option<&TimelineDetails<Profile>>,
     event_id: Option<&EventId>,
 ) -> (String, bool) {
-    // Get the display name and avatar URL from the sender's profile, if available,
+    // Get the display name and avatar URL from the user's profile, if available,
     // or if the profile isn't ready, fall back to qeurying our user profile cache.
     let mut taken_from_cache = false;
-    let (username_opt, avatar_state) = match sender_profile_opt {
+    let (username_opt, avatar_state) = match avatar_profile_opt {
         Some(TimelineDetails::Ready(profile)) => (
             profile.display_name.clone(),
             AvatarState::Known(profile.avatar_url.clone()),
@@ -2737,7 +2738,7 @@ fn set_avatar_and_get_username(
             // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
             user_profile_cache::with_user_profile(
                 cx,
-                sender_user_id,
+                avatar_user_id,
                 |profile, room_members| {
                     room_members
                         .get(room_id)
@@ -2755,7 +2756,7 @@ fn set_avatar_and_get_username(
             .unwrap_or((None, AvatarState::Unknown))
         }
         None => {
-            if let Some(user_profile) = user_profile_cache::get_user_profile(cx, sender_user_id)
+            if let Some(user_profile) = user_profile_cache::get_user_profile(cx, avatar_user_id)
             {
                 taken_from_cache = true;
                 (user_profile.username, user_profile.avatar_state)
@@ -2779,7 +2780,7 @@ 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(|| sender_user_id.to_string());
+        .unwrap_or_else(|| avatar_user_id.to_string());
 
     // Set the sender's avatar image, or use the username if no image is available.
     avatar_img_data_opt
@@ -2787,7 +2788,7 @@ fn set_avatar_and_get_username(
             if !taken_from_cache {
                 user_profile_cache::set_user_profile(
                     cx,
-                    sender_user_id,
+                    avatar_user_id,
                     username.clone(),
                     AvatarState::Loaded(data.clone()),
                 );
@@ -2795,7 +2796,7 @@ fn set_avatar_and_get_username(
             avatar
                 .show_image(
                     Some((
-                        sender_user_id.to_owned(),
+                        avatar_user_id.to_owned(),
                         username_opt.clone(),
                         room_id.to_owned(),
                         data.clone(),
@@ -2806,7 +2807,7 @@ fn set_avatar_and_get_username(
         })
         .unwrap_or_else(|| {
             avatar.show_text(
-                Some((sender_user_id.to_owned(), username_opt, room_id.to_owned())),
+                Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned())),
                 &username,
             )
         });

From 24daf6ea77d7b63d26e51afeb5a525c8a11c0d1d Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Sat, 12 Oct 2024 14:32:37 +0800
Subject: [PATCH 09/30] fix conflicts

---
 src/home/room_screen.rs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 2fb37a73..eb6c8fb2 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -33,7 +33,9 @@ use crate::{
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
         typing_animation::TypingAnimationWidgetExt,
-    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest, PaginationDirection}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
+    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest, PaginationDirection}, 
+    home::room_read_receipt::AvatarRowWidgetRefExt,
+    utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
 };
 use rangemap::RangeSet;
 

From 687bb704f5f82e2ec3261f39663ec3920e2cddf1 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 4 Nov 2024 23:17:12 +0800
Subject: [PATCH 10/30] Update src/profile/user_profile.rs

Co-authored-by: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
---
 src/profile/user_profile.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/profile/user_profile.rs b/src/profile/user_profile.rs
index 98b897b9..6818fd20 100644
--- a/src/profile/user_profile.rs
+++ b/src/profile/user_profile.rs
@@ -2,7 +2,7 @@ use std::{borrow::Cow, ops::{Deref, DerefMut}, sync::Arc};
 use makepad_widgets::*;
 use matrix_sdk::{room::{RoomMember, RoomMemberRole}, ruma::{events::room::member::MembershipState, OwnedMxcUri, OwnedRoomId, OwnedUserId}};
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils,
+    avatar_cache::{self, AvatarCacheEntry}, shared::avatar::AvatarWidgetExt, sliding_sync::{get_client, is_user_ignored, submit_async_request, MatrixRequest}, utils
 };
 
 use super::user_profile_cache::{self, get_user_profile_and_room_member, get_user_room_member_info};

From 17d1bec57dcbe91c1c894f2351d9561dac4ef8b1 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 4 Nov 2024 23:18:33 +0800
Subject: [PATCH 11/30] remove unneccessary portal_list

Co-authored-by: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
---
 src/home/room_screen.rs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index d46b52b8..b69134f0 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1045,7 +1045,6 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
-            let portal_list = self.portal_list(id!(list));
             let mut tooltip = self.tooltip(id!(tooltip));
             portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
                 let seq = wr.avatar_row(id!(avatar_row));

From fa5f166f40dbcb118e48f78e5f05c8d6713399fc Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 4 Nov 2024 23:19:02 +0800
Subject: [PATCH 12/30] Change tooltip

Co-authored-by: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
---
 src/home/room_screen.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index b69134f0..c77c863d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1050,7 +1050,7 @@ impl Widget for RoomScreen {
                 let seq = wr.avatar_row(id!(avatar_row));
                 let num_seen = seq.len();
                 if let Some(rect) = seq.hover_in(actions) {
-                    tooltip.show_with_options(cx, rect.pos, &format!("{} seen", num_seen));
+                    tooltip.show_with_options(cx, rect.pos, &format!("Seen by {num_seen}"));
                 }
                 if seq.hover_out(&actions) {
                     tooltip.hide(cx);

From a36049f56fdf853e5fc92580bee4eaa01663249a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 6 Nov 2024 23:06:20 +0800
Subject: [PATCH 13/30] changed to avatarref

---
 src/avatar_cache.rs           |  1 -
 src/home/room_read_receipt.rs | 15 +++---
 src/home/room_screen.rs       | 96 ++++++++++++++++-------------------
 src/shared/avatar.rs          | 14 ++++-
 4 files changed, 65 insertions(+), 61 deletions(-)

diff --git a/src/avatar_cache.rs b/src/avatar_cache.rs
index 98772688..95ecee8b 100644
--- a/src/avatar_cache.rs
+++ b/src/avatar_cache.rs
@@ -75,7 +75,6 @@ pub fn get_or_fetch_avatar(
             },
             Entry::Occupied(occupied) => return occupied.get().clone(),
         }
-        
         submit_async_request(MatrixRequest::FetchAvatar {
             mxc_uri,
             on_fetched: enqueue_avatar_update,
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 6d42a161..ffd5cbf8 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,4 +1,4 @@
-use crate::shared::avatar::Avatar;
+use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
 use makepad_widgets::*;
 use std::cmp;
 live_design! {
@@ -36,7 +36,7 @@ pub struct AvatarRow {
     #[live(false)]
     hover_actions_enabled: bool,
     #[rust]
-    buttons: Vec<Avatar>,
+    buttons: Vec<AvatarRef>,
     #[rust]
     count: usize,
 }
@@ -62,14 +62,14 @@ impl Widget for AvatarRow {
         let uid = self.widget_uid();
         for button in self.buttons.iter_mut() {
             match button.hit(cx, event, self.area) {
-                Hit::FingerHoverIn(finger_event) => {
+                Some(Hit::FingerHoverIn(finger_event)) => {
                     let rect = Rect {
                         pos: finger_event.abs,
                         size: DVec2::new(),
                     };
                     cx.widget_action(uid, &scope.path, AvatarRowAction::HoverIn(rect));
                 }
-                Hit::FingerHoverOut(_) => {
+                Some(Hit::FingerHoverOut(_)) => {
                     cx.widget_action(uid, &scope.path, AvatarRowAction::HoverOut);
                 }
                 _ => {}
@@ -101,14 +101,15 @@ impl AvatarRow {
         if count != self.buttons.len() {
             self.buttons.clear();
             for _ in 0..cmp::min(5, count) {
-                self.buttons.push(Avatar::new_from_ptr(cx, self.button));
+                //self.buttons.push(Avatar::new_from_ptr(cx, self.button));
+                self.buttons.push(WidgetRef::new_from_ptr(cx, self.button).as_avatar());
             }
         }
         self.count = count;
     }
 
-    pub fn iter_mut(&mut self) -> std::slice::IterMut<'_, Avatar> {
-        self.buttons.iter_mut()
+    pub fn iter_mut(&self) -> std::slice::Iter<'_, AvatarRef> {
+        self.buttons.iter()
     }
 }
 impl AvatarRowRef {
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index d46b52b8..6d6ffefc 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -25,17 +25,15 @@ use matrix_sdk_ui::timeline::{
 use robius_location::Coordinates;
 
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
+    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::room_read_receipt::AvatarRowWidgetRefExt, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, shared::{
-        avatar::{Avatar, AvatarWidgetRefExt},
+        avatar::{Avatar, AvatarRef, AvatarWidgetRefExt},
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
         typing_animation::TypingAnimationWidgetExt,
-    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest, PaginationDirection}, 
-    home::room_read_receipt::AvatarRowWidgetRefExt,
-    utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
+    }, sliding_sync::{get_client, submit_async_request, take_timeline_update_receiver, MatrixRequest, PaginationDirection}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
 };
 use rangemap::RangeSet;
 
@@ -1689,10 +1687,9 @@ impl RoomScreen {
     ) {
         let replying_preview_view = self.view(id!(replying_preview));
         let avatar_ref = replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar));
-        let Some(ref mut avatar)  = avatar_ref.borrow_mut() else { return };
         let (replying_preview_username, _) = set_avatar_and_get_username(
             cx,
-            avatar,
+            avatar_ref,
             self.room_id.as_ref().unwrap(),
             replying_to.0.sender(),
             Some(replying_to.0.sender_profile()),
@@ -2318,7 +2315,7 @@ fn populate_message_view(
             if let Some(ref mut v)= seq.borrow_mut() {
                 for avatar in v.iter_mut() {
                     if let Some((user, r)) = receipt_iter.next() {
-                        set_avatar_and_get_username(cx, avatar, room_id, user, None, event_tl_item.event_id());
+                        set_avatar_and_get_username(cx, avatar.clone(), room_id, user, None, event_tl_item.event_id());
                     }
                 }
             }
@@ -2414,18 +2411,14 @@ fn populate_message_view(
     } else {
         // log!("\t --> populate_message_view(): DRAWING  profile draw for item_id: {item_id}");
         let avatar_ref = item.avatar(id!(profile.avatar));
-        let (username, profile_drawn) = if let Some(ref mut avatar)  = avatar_ref.borrow_mut() {
-            set_avatar_and_get_username(
-                cx,
-                avatar,
-                room_id,
-                event_tl_item.sender(),
-                Some(event_tl_item.sender_profile()),
-                event_tl_item.event_id(),
-            )
-        } else {
-            (String::from(""), false )
-        };
+        let (username, profile_drawn) = set_avatar_and_get_username(
+            cx,
+            avatar_ref,
+            room_id,
+            event_tl_item.sender(),
+            Some(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;
     }
@@ -2610,10 +2603,9 @@ fn draw_replied_to_message(
             TimelineDetails::Ready(replied_to_event) => {
                 let avatar_ref = replied_to_message_view
                 .avatar(id!(replied_to_message_content.reply_preview_avatar));
-                let Some(ref mut avatar)  = avatar_ref.borrow_mut() else { return (show_reply, replied_to_event_id) };
                 let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
                     cx,
-                    avatar,
+                    avatar_ref,
                     room_id,
                     replied_to_event.sender(),
                     Some(replied_to_event.sender_profile()),
@@ -2899,18 +2891,14 @@ fn populate_small_state_event(
     let username = username_opt.unwrap_or_else(|| {
         // As a fallback, call `set_avatar_and_get_username` to get the user's display name.
         let avatar_ref = item.avatar(id!(avatar));
-        let (username, profile_drawn) = if let Some(ref mut avatar ) = avatar_ref.borrow_mut() {
-             set_avatar_and_get_username(
-                cx,
-                avatar,
-                room_id,
-                event_tl_item.sender(),
-                Some(event_tl_item.sender_profile()),
-                event_tl_item.event_id(),
-            )
-        } else {
-            (event_tl_item.sender().to_string(),false)
-        };
+        let (username, profile_drawn) = set_avatar_and_get_username(
+            cx,
+            avatar_ref,
+            room_id,
+            event_tl_item.sender(),
+            Some(event_tl_item.sender_profile()),
+            event_tl_item.event_id(),
+        );
         
         // Draw the timestamp as part of the profile.
         set_timestamp(
@@ -2976,7 +2964,7 @@ fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSeco
 ///    (for purposes of caching it to avoid future redraws).
 fn set_avatar_and_get_username(
     cx: &mut Cx,
-    avatar: &mut Avatar,
+    avatar: AvatarRef,
     room_id: &RoomId,
     avatar_user_id: &UserId,
     avatar_profile_opt: Option<&TimelineDetails<Profile>>,
@@ -2984,7 +2972,6 @@ fn set_avatar_and_get_username(
 ) -> (String, bool) {
     // Get the display name and avatar URL from the user's profile, if available,
     // or if the profile isn't ready, fall back to qeurying our user profile cache.
-    let mut taken_from_cache = false;
     let (username_opt, avatar_state) = match avatar_profile_opt {
         Some(TimelineDetails::Ready(profile)) => (
             profile.display_name.clone(),
@@ -3020,13 +3007,28 @@ fn set_avatar_and_get_username(
             .unwrap_or((None, AvatarState::Unknown))
         }
         None => {
-            if let Some(user_profile) = user_profile_cache::get_user_profile(cx, avatar_user_id)
-            {
-                taken_from_cache = true;
-                (user_profile.username, user_profile.avatar_state)
-            } else {
-                (None, AvatarState::Unknown)
-            }
+                submit_async_request(MatrixRequest::GetUserProfile { 
+                    user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
+                });
+                user_profile_cache::with_user_profile(
+                    cx,
+                    avatar_user_id,
+                    |profile, room_members| {
+                        room_members
+                            .get(room_id)
+                            .map(|rm| {
+                                (
+                                    rm.display_name().map(|n| n.to_owned()),
+                                    AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                                )
+                            })
+                            .unwrap_or_else(|| {
+                                (profile.username.clone(), profile.avatar_state.clone())
+                            })
+                    },
+                )
+                .unwrap_or((None, AvatarState::Unknown))
+            //}
         }
     };
 
@@ -3049,14 +3051,6 @@ fn set_avatar_and_get_username(
     // Set the sender's avatar image, or use the username if no image is available.
     avatar_img_data_opt
         .and_then(|data| {
-            if !taken_from_cache {
-                user_profile_cache::set_user_profile(
-                    cx,
-                    avatar_user_id,
-                    username.clone(),
-                    AvatarState::Loaded(data.clone()),
-                );
-            }
             avatar
                 .show_image(
                     Some((
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index aff8624c..59f6b3f6 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -209,7 +209,8 @@ impl Avatar {
             AvatarDisplayStatus::Text
         }
     }
-    pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Hit {
+    /// Returns Hit event when mouse in
+    fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Hit {
         event.hits_with_options(
             cx,
             self.area(),
@@ -251,7 +252,16 @@ impl AvatarRef {
         } else {
             AvatarDisplayStatus::Text
         }
-    }    
+    }
+    /// Returns an option of Hit event when mouse in
+    pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Option<Hit> {
+        if let Some(mut inner) = self.borrow_mut() {
+            Some(inner.hit(cx, event, sweep_area))
+        } else {
+            None
+        }
+        
+    }
 }
 
 /// What an Avatar instance is currently displaying.

From b3d75b93a965228b57207e22f066cdbf69c91026 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 6 Nov 2024 23:16:23 +0800
Subject: [PATCH 14/30] format fix

---
 src/home/room_screen.rs           | 52 ++++++++++++-------------------
 src/profile/user_profile_cache.rs | 25 ---------------
 2 files changed, 20 insertions(+), 57 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 6d6ffefc..12cc2b97 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -2987,10 +2987,24 @@ fn set_avatar_and_get_username(
                 }
             }
             // log!("populate_message_view(): sender profile not ready yet for event {not_ready:?}");
-            user_profile_cache::with_user_profile(
-                cx,
-                avatar_user_id,
-                |profile, room_members| {
+            user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
+                room_members
+                    .get(room_id)
+                    .map(|rm| {
+                        (
+                            rm.display_name().map(|n| n.to_owned()),
+                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                        )
+                    })
+                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+            })
+            .unwrap_or((None, AvatarState::Unknown))
+        }
+        None => {
+                submit_async_request(MatrixRequest::GetUserProfile { 
+                    user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
+                });
+                user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
                     room_members
                         .get(room_id)
                         .map(|rm| {
@@ -2999,34 +3013,8 @@ fn set_avatar_and_get_username(
                                 AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
                             )
                         })
-                        .unwrap_or_else(|| {
-                            (profile.username.clone(), profile.avatar_state.clone())
-                        })
-                },
-            )
-            .unwrap_or((None, AvatarState::Unknown))
-        }
-        None => {
-                submit_async_request(MatrixRequest::GetUserProfile { 
-                    user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
-                });
-                user_profile_cache::with_user_profile(
-                    cx,
-                    avatar_user_id,
-                    |profile, room_members| {
-                        room_members
-                            .get(room_id)
-                            .map(|rm| {
-                                (
-                                    rm.display_name().map(|n| n.to_owned()),
-                                    AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                                )
-                            })
-                            .unwrap_or_else(|| {
-                                (profile.username.clone(), profile.avatar_state.clone())
-                            })
-                    },
-                )
+                        .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+                })
                 .unwrap_or((None, AvatarState::Unknown))
             //}
         }
diff --git a/src/profile/user_profile_cache.rs b/src/profile/user_profile_cache.rs
index 66d83b3e..5f7d2461 100644
--- a/src/profile/user_profile_cache.rs
+++ b/src/profile/user_profile_cache.rs
@@ -197,31 +197,6 @@ pub fn get_user_profile(_cx: &mut Cx, user_id: &UserId) -> Option<UserProfile> {
         cache.get(user_id).map(|entry| entry.user_profile.clone())
     })
 }
-/// Set user profile into cache only if cache does not have user profile
-///
-/// This function requires passing in a reference to `Cx`,
-/// which isn't used, but acts as a guarantee that this function
-/// must only be called by the main UI thread.
-#[allow(unused)]
-pub fn set_user_profile(
-    _cx: &mut Cx,
-    user_id: &UserId,
-    username: String,
-    avatar_state: AvatarState,
-) {
-    USER_PROFILE_CACHE.with_borrow_mut(|cache| {
-        cache
-            .entry(user_id.to_owned())
-            .or_insert(UserProfileCacheEntry {
-                user_profile: UserProfile {
-                    user_id: user_id.to_owned(),
-                    username: Some(username),
-                    avatar_state,
-                },
-                room_members: BTreeMap::new(),
-            });
-    });
-}
 
 /// Returns a clone of the cached user profile for the given user ID
 /// and a clone of that user's room member info for the given room ID.

From 9a7af7ae1b489f4c5f65fd4ae1f8bc247cc17fef Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 7 Nov 2024 10:53:10 +0800
Subject: [PATCH 15/30] moved set_avatar_and_get_username into avatar file

---
 src/home/room_read_receipt.rs |  47 +++++++-----
 src/home/room_screen.rs       | 140 +---------------------------------
 src/shared/avatar.rs          | 134 +++++++++++++++++++++++++++++++-
 3 files changed, 163 insertions(+), 158 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index ffd5cbf8..9c0b2bcd 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,6 +1,8 @@
 use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
 use makepad_widgets::*;
+use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
 use std::cmp;
+use crate::shared::avatar::{set_avatar_and_get_username};
 live_design! {
     import makepad_draw::shader::std::*;
     import crate::shared::avatar::*;
@@ -38,7 +40,7 @@ pub struct AvatarRow {
     #[rust]
     buttons: Vec<AvatarRef>,
     #[rust]
-    count: usize,
+    total_num_seen: usize,
 }
 
 #[derive(Clone, Debug, DefaultNone)]
@@ -97,34 +99,22 @@ impl Widget for AvatarRow {
     fn data_to_widget(&mut self, cx: &mut Cx, nodes: &[LiveNode], path: &[LiveId]) {}
 }
 impl AvatarRow {
-    pub fn set_range(&mut self, cx: &mut Cx, count: usize) {
-        if count != self.buttons.len() {
+    fn set_range(&mut self, cx: &mut Cx, total_num_seen: usize) {
+        if total_num_seen != self.buttons.len() {
             self.buttons.clear();
-            for _ in 0..cmp::min(5, count) {
-                //self.buttons.push(Avatar::new_from_ptr(cx, self.button));
+            for _ in 0..cmp::min(5, total_num_seen) {
                 self.buttons.push(WidgetRef::new_from_ptr(cx, self.button).as_avatar());
             }
         }
-        self.count = count;
+        self.total_num_seen = total_num_seen;
     }
 
-    pub fn iter_mut(&self) -> std::slice::Iter<'_, AvatarRef> {
+    fn iter(&self) -> std::slice::Iter<'_, AvatarRef> {
         self.buttons.iter()
     }
 }
 impl AvatarRowRef {
-    pub fn set_range(&self, cx: &mut Cx, count: usize) {
-        if let Some(ref mut inner) = self.borrow_mut() {
-            inner.set_range(cx, count);
-        }
-    }
-    pub fn len(&self) -> usize {
-        if let Some(ref mut inner) = self.borrow_mut() {
-            inner.count
-        } else {
-            0
-        }
-    }
+    /// Handles hover in action
     pub fn hover_in(&self, actions: &Actions) -> Option<Rect> {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
             match item.cast() {
@@ -135,6 +125,7 @@ impl AvatarRowRef {
             None
         }
     }
+    /// Handles hover out action
     pub fn hover_out(&self, actions: &Actions) -> bool {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
             match item.cast() {
@@ -145,4 +136,22 @@ impl AvatarRowRef {
             false
         }
     }
+    /// Get the total number of people seen 
+    pub fn total_num_seen(&self) -> usize {
+        if let Some(ref mut inner) = self.borrow() {
+            inner.total_num_seen
+        } else {
+            0
+        }
+    }
+    /// Set a row of Avatars based on receipt iterator
+    pub fn set_avatar_row<'a, T>(&mut self, cx: &mut Cx, room_id: &RoomId, event_id: Option<&EventId>, receipts_len: usize, receipts_iter: T) 
+        where T:Iterator<Item = (&'a OwnedUserId, &'a Receipt)> {
+        if let Some(ref mut inner) = self.borrow_mut() {
+            inner.set_range(cx, receipts_len);
+            for (avatar_ref, (user_id, _)) in inner.iter().zip(receipts_iter) {
+                set_avatar_and_get_username(cx, avatar_ref.clone(), room_id, &user_id, None, event_id);
+            }
+        }
+    }
 }
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 047ad5b7..b3ff779d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -29,7 +29,7 @@ use crate::{
         user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
         user_profile_cache,
     }, shared::{
-        avatar::{Avatar, AvatarRef, AvatarWidgetRefExt},
+        avatar::{AvatarWidgetRefExt, set_avatar_and_get_username},
         html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt},
         text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt},
         typing_animation::TypingAnimationWidgetExt,
@@ -1046,7 +1046,7 @@ impl Widget for RoomScreen {
             let mut tooltip = self.tooltip(id!(tooltip));
             portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
                 let seq = wr.avatar_row(id!(avatar_row));
-                let num_seen = seq.len();
+                let num_seen = seq.total_num_seen();
                 if let Some(rect) = seq.hover_in(actions) {
                     tooltip.show_with_options(cx, rect.pos, &format!("Seen by {num_seen}"));
                 }
@@ -2308,16 +2308,8 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
-            item.avatar_row(id!(avatar_row)).set_range(cx, receipts.len());
-            let seq = item.avatar_row(id!(avatar_row));
-            let mut receipt_iter = receipts.iter();
-            if let Some(ref mut v)= seq.borrow_mut() {
-                for avatar in v.iter_mut() {
-                    if let Some((user, r)) = receipt_iter.next() {
-                        set_avatar_and_get_username(cx, avatar.clone(), room_id, user, None, event_tl_item.event_id());
-                    }
-                }
-            }
+            let receipts_len = receipts.len();
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), receipts_len, receipts.iter());
 
             if existed && item_drawn_status.content_drawn {
                 (item, true)
@@ -2935,130 +2927,6 @@ fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSeco
     }
 }
 
-/// 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 user profile is not ready, this function will submit an async request
-/// to fetch the user profile from the server, but only if the event ID is `Some`.
-/// For Read Receipt cases, there is no user's profile. The Avatar cache is taken from the sender's profile 
-///
-/// This function will always choose a nice, displayable username and avatar.
-///
-/// The specific behavior is as follows:
-/// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
-///   will be the user's display name and avatar image, if available.
-///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
-/// * If no avatar image is available, then the `avatar` will be set to the first character
-///   of the user's display name, if available.
-/// * If the user's display name is not available or has not been set, the user ID
-///   will be used for the `username`, and the first character of the user ID for the `avatar`.
-/// * If the timeline event's sender profile isn't ready and the user ID isn't found in
-///   our user profile cache , then the `username` and `avatar`  will be the user ID
-///   and the first character of that user ID, respectively.
-///
-/// ## Return
-/// Returns a tuple of:
-/// 1. The displayable username that should be used to populate the username field.
-/// 2. A boolean indicating whether the user's profile info has been completely drawn
-///    (for purposes of caching it to avoid future redraws).
-fn set_avatar_and_get_username(
-    cx: &mut Cx,
-    avatar: AvatarRef,
-    room_id: &RoomId,
-    avatar_user_id: &UserId,
-    avatar_profile_opt: Option<&TimelineDetails<Profile>>,
-    event_id: Option<&EventId>,
-) -> (String, bool) {
-    // Get the display name and avatar URL from the user's profile, if available,
-    // or if the profile isn't ready, fall back to qeurying our user profile cache.
-    let (username_opt, avatar_state) = match avatar_profile_opt {
-        Some(TimelineDetails::Ready(profile)) => (
-            profile.display_name.clone(),
-            AvatarState::Known(profile.avatar_url.clone()),
-        ),
-        Some(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, avatar_user_id, |profile, room_members| {
-                room_members
-                    .get(room_id)
-                    .map(|rm| {
-                        (
-                            rm.display_name().map(|n| n.to_owned()),
-                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                        )
-                    })
-                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-            })
-            .unwrap_or((None, AvatarState::Unknown))
-        }
-        None => {
-                submit_async_request(MatrixRequest::GetUserProfile { 
-                    user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
-                });
-                user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
-                    room_members
-                        .get(room_id)
-                        .map(|rm| {
-                            (
-                                rm.display_name().map(|n| n.to_owned()),
-                                AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                            )
-                        })
-                        .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-                })
-                .unwrap_or((None, AvatarState::Unknown))
-            //}
-        }
-    };
-
-    let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
-        AvatarState::Loaded(data) => (Some(data), true),
-        AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
-            AvatarCacheEntry::Loaded(data) => (Some(data), true),
-            AvatarCacheEntry::Failed => (None, true),
-            AvatarCacheEntry::Requested => (None, false),
-        },
-        AvatarState::Known(None) | AvatarState::Failed => (None, true),
-        AvatarState::Unknown => (None, false),
-    };
-
-    // Set sender to the display name if available, otherwise the user id.
-    let username = username_opt
-        .clone()
-        .unwrap_or_else(|| avatar_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((
-                        avatar_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((avatar_user_id.to_owned(), username_opt, room_id.to_owned())),
-                &username,
-            )
-        });
-    (username, profile_drawn)
-}
-
 /// Returns the display name of the sender of the given `event_tl_item`, if available.
 fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String> {
     if let TimelineDetails::Ready(profile) = event_tl_item.sender_profile() {
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 59f6b3f6..058e8edd 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -9,11 +9,11 @@
 use std::sync::Arc;
 
 use makepad_widgets::*;
-use matrix_sdk::ruma::{OwnedRoomId, OwnedUserId};
+use matrix_sdk::ruma::{EventId, OwnedRoomId, OwnedUserId, RoomId, UserId};
+use matrix_sdk_ui::timeline::{Profile, TimelineDetails};
 
 use crate::{
-    profile::user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId},
-    utils,
+    avatar_cache::{self, AvatarCacheEntry}, profile::{user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId}, user_profile_cache}, sliding_sync::{submit_async_request, MatrixRequest}, utils
 };
 
 live_design! {
@@ -271,3 +271,131 @@ pub enum AvatarDisplayStatus {
     /// The avatar is displaying an image.
     Image,
 }
+/// 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 user profile is not ready, this function will submit an async request
+/// to fetch the user profile from the server, but only if the event ID is `Some`.
+/// For Read Receipt cases, there is no user's profile. The Avatar cache is taken from the sender's profile 
+///
+/// This function will always choose a nice, displayable username and avatar.
+///
+/// The specific behavior is as follows:
+/// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
+///   will be the user's display name and avatar image, if available.
+///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
+/// * If no avatar image is available, then the `avatar` will be set to the first character
+///   of the user's display name, if available.
+/// * If the user's display name is not available or has not been set, the user ID
+///   will be used for the `username`, and the first character of the user ID for the `avatar`.
+/// * If the timeline event's sender profile isn't ready and the user ID isn't found in
+///   our user profile cache , then the `username` and `avatar`  will be the user ID
+///   and the first character of that user ID, respectively.
+///
+/// ## Return
+/// Returns a tuple of:
+/// 1. The displayable username that should be used to populate the username field.
+/// 2. A boolean indicating whether the user's profile info has been completely drawn
+///    (for purposes of caching it to avoid future redraws).
+pub fn set_avatar_and_get_username(
+    cx: &mut Cx,
+    avatar: AvatarRef,
+    room_id: &RoomId,
+    avatar_user_id: &UserId,
+    avatar_profile_opt: Option<&TimelineDetails<Profile>>,
+    event_id: Option<&EventId>,
+) -> (String, bool) {
+    // Get the display name and avatar URL from the user's profile, if available,
+    // or if the profile isn't ready, fall back to qeurying our user profile cache.
+    let (username_opt, avatar_state) = match avatar_profile_opt {
+        Some(TimelineDetails::Ready(profile)) => (
+            profile.display_name.clone(),
+            AvatarState::Known(profile.avatar_url.clone()),
+        ),
+        Some(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, avatar_user_id, |profile, room_members| {
+                room_members
+                    .get(room_id)
+                    .map(|rm| {
+                        (
+                            rm.display_name().map(|n| n.to_owned()),
+                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                        )
+                    })
+                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+            })
+            .unwrap_or((None, AvatarState::Unknown))
+        }
+        None => {
+            match user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
+                room_members
+                    .get(room_id)
+                    .map(|rm| {
+                        (
+                            rm.display_name().map(|n| n.to_owned()),
+                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                        )
+                    })
+                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+            }) {
+                Some((profile_name, avatar_state)) => {
+                    (profile_name, avatar_state)
+                }
+                None => {
+                    submit_async_request(MatrixRequest::GetUserProfile { 
+                        user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
+                    });
+                    (None, AvatarState::Unknown)
+                }
+            }
+        }
+    };
+
+    let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
+        AvatarState::Loaded(data) => (Some(data), true),
+        AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
+            AvatarCacheEntry::Loaded(data) => (Some(data), true),
+            AvatarCacheEntry::Failed => (None, true),
+            AvatarCacheEntry::Requested => (None, false),
+        },
+        AvatarState::Known(None) | AvatarState::Failed => (None, true),
+        AvatarState::Unknown => (None, false),
+    };
+
+    // Set sender to the display name if available, otherwise the user id.
+    let username = username_opt
+        .clone()
+        .unwrap_or_else(|| avatar_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((
+                        avatar_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((avatar_user_id.to_owned(), username_opt, room_id.to_owned())),
+                &username,
+            )
+        });
+    (username, profile_drawn)
+}
\ No newline at end of file

From 7fa6f39d4a17e247f956a0d8f2c5ad645f3c7f47 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 7 Nov 2024 13:41:17 +0800
Subject: [PATCH 16/30] added plus label at the end of avatarrow

---
 src/home/room_read_receipt.rs | 39 +++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 9c0b2bcd..ae3eeaea 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -2,10 +2,13 @@ use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
 use makepad_widgets::*;
 use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
 use std::cmp;
-use crate::shared::avatar::{set_avatar_and_get_username};
+use crate::shared::avatar::set_avatar_and_get_username;
 live_design! {
     import makepad_draw::shader::std::*;
+    import makepad_widgets::base::*;
+    import makepad_widgets::theme_desktop_dark::*;
     import crate::shared::avatar::*;
+    import crate::shared::styles::*;
 
     AvatarRow = {{AvatarRow}} {
         button: <Avatar> {
@@ -17,11 +20,18 @@ live_design! {
         }
         margin: {top: 3, right: 10, bottom: 3, left: 10}
         width: Fit,
-        height: Fit
+        height: Fit,
+        plus: <Label> {
+            draw_text: {
+                color: #x0,
+                text_style: <TITLE_TEXT>{ font_size: 11}
+            }
+            text: ""
+        }
     }
 }
 
-#[derive(Live, Widget)]
+#[derive(Live, Widget, LiveHook)]
 pub struct AvatarRow {
     #[redraw]
     #[rust]
@@ -37,10 +47,15 @@ pub struct AvatarRow {
     button: Option<LivePtr>,
     #[live(false)]
     hover_actions_enabled: bool,
+    #[live]
+    plus: Option<LivePtr>,
     #[rust]
     buttons: Vec<AvatarRef>,
     #[rust]
+    label: Option<LabelRef>,
+    #[rust]
     total_num_seen: usize,
+
 }
 
 #[derive(Clone, Debug, DefaultNone)]
@@ -49,16 +64,7 @@ pub enum AvatarRowAction {
     HoverOut,
     None,
 }
-impl LiveHook for AvatarRow {
-    fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, index: usize, nodes: &[LiveNode]) {
-        for button in self.buttons.iter_mut() {
-            if let Some(index) = nodes.child_by_name(index, live_id!(button).as_field()) {
-                button.apply(cx, apply, index, nodes);
-            }
-        }
-        self.area.redraw(cx);
-    }
-}
+
 impl Widget for AvatarRow {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
@@ -83,6 +89,12 @@ impl Widget for AvatarRow {
         for v in self.buttons.iter_mut() {
             let _ = v.draw(cx, scope);
         }
+        if self.total_num_seen > 5 {
+            if let Some(label) = &mut self.label {
+                label.set_text(&format!(" + {:?}", self.total_num_seen - 5));
+                let _ = label.draw(cx, scope);
+            }
+        }
         DrawStep::done()
     }
 
@@ -107,6 +119,7 @@ impl AvatarRow {
             }
         }
         self.total_num_seen = total_num_seen;
+        self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
     }
 
     fn iter(&self) -> std::slice::Iter<'_, AvatarRef> {

From b81e51a60d64272dc87a8aeb6d0af8dbe5b1c509 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 7 Nov 2024 14:09:56 +0800
Subject: [PATCH 17/30] clean up

---
 src/avatar_cache.rs               |  1 +
 src/home/room_screen.rs           | 14 +++++---------
 src/profile/user_profile_cache.rs |  1 -
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/avatar_cache.rs b/src/avatar_cache.rs
index 95ecee8b..bc5591d0 100644
--- a/src/avatar_cache.rs
+++ b/src/avatar_cache.rs
@@ -75,6 +75,7 @@ pub fn get_or_fetch_avatar(
             },
             Entry::Occupied(occupied) => return occupied.get().clone(),
         }
+
         submit_async_request(MatrixRequest::FetchAvatar {
             mxc_uri,
             on_fetched: enqueue_avatar_update,
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index b3ff779d..6e1117f5 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -420,7 +420,7 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (12.0)}, hover_actions_enabled:true}
+            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (12.0) }, hover_actions_enabled:true }
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.
@@ -1685,10 +1685,9 @@ impl RoomScreen {
         replying_to: (EventTimelineItem, RepliedToInfo),
     ) {
         let replying_preview_view = self.view(id!(replying_preview));
-        let avatar_ref = replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar));
         let (replying_preview_username, _) = set_avatar_and_get_username(
             cx,
-            avatar_ref,
+            replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar)),
             self.room_id.as_ref().unwrap(),
             replying_to.0.sender(),
             Some(replying_to.0.sender_profile()),
@@ -2401,10 +2400,9 @@ fn populate_message_view(
         new_drawn_status.profile_drawn = true;
     } else {
         // log!("\t --> populate_message_view(): DRAWING  profile draw for item_id: {item_id}");
-        let avatar_ref = item.avatar(id!(profile.avatar));
         let (username, profile_drawn) = set_avatar_and_get_username(
             cx,
-            avatar_ref,
+            item.avatar(id!(profile.avatar)),
             room_id,
             event_tl_item.sender(),
             Some(event_tl_item.sender_profile()),
@@ -2592,11 +2590,10 @@ fn draw_replied_to_message(
 
         match &in_reply_to_details.event {
             TimelineDetails::Ready(replied_to_event) => {
-                let avatar_ref = replied_to_message_view
-                .avatar(id!(replied_to_message_content.reply_preview_avatar));
                 let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
                     cx,
-                    avatar_ref,
+                    replied_to_message_view
+                    .avatar(id!(replied_to_message_content.reply_preview_avatar)),
                     room_id,
                     replied_to_event.sender(),
                     Some(replied_to_event.sender_profile()),
@@ -2890,7 +2887,6 @@ fn populate_small_state_event(
             Some(event_tl_item.sender_profile()),
             event_tl_item.event_id(),
         );
-        
         // Draw the timestamp as part of the profile.
         set_timestamp(
             &item,
diff --git a/src/profile/user_profile_cache.rs b/src/profile/user_profile_cache.rs
index 5f7d2461..6852db84 100644
--- a/src/profile/user_profile_cache.rs
+++ b/src/profile/user_profile_cache.rs
@@ -1,7 +1,6 @@
 use crossbeam_queue::SegQueue;
 use makepad_widgets::{log, warning, Cx, SignalToUI};
 use matrix_sdk::{room::RoomMember, ruma::{OwnedRoomId, OwnedUserId, RoomId, UserId}};
-use matrix_sdk_ui::timeline::Profile;
 use std::{cell::RefCell, collections::{btree_map::Entry, BTreeMap}};
 
 use crate::profile::user_profile::AvatarState;

From 29c010b00dcb931fd4d1202e38d9e628c5d3be3d Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Tue, 3 Dec 2024 15:11:32 +0800
Subject: [PATCH 18/30] added import

---
 src/home/room_screen.rs | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 7a8cf75a..c49e97ef 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -32,6 +32,8 @@ use crate::{
         avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::JumpToBottomButtonWidgetExt, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineRequestSender}, utils::{self, unix_time_millis_to_datetime, MediaFormatConst}
 };
+use crate::shared::avatar::set_avatar_and_get_username;
+use crate::home::room_read_receipt::AvatarRowWidgetRefExt;
 use rangemap::RangeSet;
 
 use super::loading_modal::{LoadingModalAction, LoadingModalState};
@@ -2488,7 +2490,7 @@ fn populate_message_view(
                     item.avatar(id!(profile.avatar)),
                     room_id,
                     event_tl_item.sender(),
-                    event_tl_item.sender_profile(),
+                    Some(event_tl_item.sender_profile()),
                     event_tl_item.event_id(),
                 );
 
@@ -2678,7 +2680,7 @@ fn populate_message_view(
                 item.avatar(id!(profile.avatar)),
                 room_id,
                 event_tl_item.sender(),
-                event_tl_item.sender_profile(),
+                Some(event_tl_item.sender_profile()),
                 event_tl_item.event_id(),
             )
         );

From 3005aea1c5eae7dc04311fe4e39ed9f8a4bdc5ba Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Tue, 3 Dec 2024 16:26:31 +0800
Subject: [PATCH 19/30] code cleanup and resolve conflict

---
 src/home/room_read_receipt.rs | 14 +----
 src/home/room_screen.rs       | 96 -----------------------------------
 src/shared/avatar.rs          |  6 +--
 3 files changed, 4 insertions(+), 112 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index ae3eeaea..98fbea10 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -85,7 +85,7 @@ impl Widget for AvatarRow {
         }
     }
 
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, _walk: Walk) -> DrawStep {
         for v in self.buttons.iter_mut() {
             let _ = v.draw(cx, scope);
         }
@@ -97,18 +97,6 @@ impl Widget for AvatarRow {
         }
         DrawStep::done()
     }
-
-    fn widget_to_data(
-        &self,
-        cx: &mut Cx,
-        actions: &Actions,
-        nodes: &mut LiveNodeVec,
-        path: &[LiveId],
-    ) -> bool {
-        false
-    }
-
-    fn data_to_widget(&mut self, cx: &mut Cx, nodes: &[LiveNode], path: &[LiveId]) {}
 }
 impl AvatarRow {
     fn set_range(&mut self, cx: &mut Cx, total_num_seen: usize) {
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 4a05a2dd..57886200 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -3537,102 +3537,6 @@ fn set_timestamp(item: &WidgetRef, live_id_path: &[LiveId], timestamp: MilliSeco
     }
 }
 
-/// 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:
-/// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
-///   will be the user's display name and avatar image, if available.
-///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
-/// * If no avatar image is available, then the `avatar` will be set to the first character
-///   of the user's display name, if available.
-/// * If the user's display name is not available or has not been set, the user ID
-///   will be used for the `username`, and the first character of the user ID for the `avatar`.
-/// * If the timeline event's sender profile isn't ready and the user ID isn't found in
-///   our user profile cache , then the `username` and `avatar`  will be the user ID
-///   and the first character of that user ID, respectively.
-///
-/// ## Return
-/// Returns a tuple of:
-/// 1. The displayable username that should be used to populate the username field.
-/// 2. A boolean indicating whether the user's profile info has been completely drawn
-///    (for purposes of caching it to avoid future redraws).
-fn set_avatar_and_get_username(
-    cx: &mut Cx,
-    avatar: AvatarRef,
-    room_id: &OwnedRoomId,
-    sender_user_id: &UserId,
-    sender_profile: &TimelineDetails<Profile>,
-    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.
-    let (username_opt, avatar_state) = match sender_profile {
-        TimelineDetails::Ready(profile) => (
-            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, sender_user_id, |profile, room_members| {
-                room_members
-                    .get(room_id)
-                    .map(|rm| {
-                        (
-                            rm.display_name().map(|n| n.to_owned()),
-                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                        )
-                    })
-                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-            })
-            .unwrap_or((None, AvatarState::Unknown))
-        }
-    };
-
-    let (avatar_img_data_opt, profile_drawn) = match avatar_state {
-        AvatarState::Loaded(data) => (Some(data), true),
-        AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
-            AvatarCacheEntry::Loaded(data) => (Some(data), true),
-            AvatarCacheEntry::Failed => (None, true),
-            AvatarCacheEntry::Requested => (None, false),
-        },
-        AvatarState::Known(None) | AvatarState::Failed => (None, true),
-        AvatarState::Unknown => (None, false),
-    };
-
-    // Set sender to the display name if available, otherwise the user id.
-    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((sender_user_id.to_owned(), username_opt.clone(), room_id.to_owned(), data.clone()).into()),
-            |img| utils::load_png_or_jpg(&img, cx, &data)
-        )
-        .ok()
-    )
-    .unwrap_or_else(|| avatar.show_text(
-        Some((sender_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
-        &username,
-    ));
-    (username, profile_drawn)
-}
-
 /// Returns the display name of the sender of the given `event_tl_item`, if available.
 fn get_profile_display_name(event_tl_item: &EventTimelineItem) -> Option<String> {
     if let TimelineDetails::Ready(profile) = event_tl_item.sender_profile() {
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 013db32d..18de52a1 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -410,15 +410,15 @@ pub fn set_avatar_and_get_username(
                         avatar_user_id.to_owned(),
                         username_opt.clone(),
                         room_id.to_owned(),
-                        data.clone(),
-                    )),
+                        data.clone()).into(),
+                    ),
                     |img| utils::load_png_or_jpg(&img, cx, &data),
                 )
                 .ok()
         })
         .unwrap_or_else(|| {
             avatar.show_text(
-                Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned())),
+                Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
                 &username,
             )
         });

From 38ae816f477e8d34ce97c51b603413d6c6a30c54 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Wed, 4 Dec 2024 14:36:49 +0800
Subject: [PATCH 20/30] shorten tooltip's width

---
 src/home/room_screen.rs | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 57886200..0ef7c030 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -713,7 +713,7 @@ live_design! {
             color: (COLOR_SECONDARY)
         }
         flow: Down, spacing: 0.0
-
+        
         room_screen_wrapper = <View> {
             width: Fill, height: Fill,
             flow: Overlay,
@@ -941,7 +941,37 @@ live_design! {
                 }
             }
         }
-
+        
+        tooltip = <Tooltip> {
+            content: <View> {
+                flow: Overlay
+                width: Fit
+                height: Fit
+    
+                <RoundedView> {
+                    width: Fit,
+                    height: Fit,
+    
+                    padding: {left:10, top: 19, right: 10, bottom: 10},
+    
+                    draw_bg: {
+                        color: #fff,
+                        border_width: 1.0,
+                        border_color: #D0D5DD,
+                        radius: 2.
+                    }
+    
+                    tooltip_label = <Label> {
+                        width: 30,
+                        draw_text: {
+                            text_style: <THEME_FONT_REGULAR>{font_size: 9},
+                            text_wrap: Word,
+                            color: #000
+                        }
+                    }
+                }
+            }
+        }
         animator: {
             typing_notice_animator = {
                 default: show,

From e7ca500f941fb7ee0b08d24041183baffa1f9649 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 9 Dec 2024 18:36:54 +0800
Subject: [PATCH 21/30] fix formating

Co-authored-by: Kevin Boos <1139460+kevinaboos@users.noreply.github.com>
---
 src/home/room_screen.rs | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 0ef7c030..bd0c1eae 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -392,7 +392,12 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (12.0) }, hover_actions_enabled:true }
+            avatar_row = <AvatarRow> {
+                width: 40,
+                height: 30,
+                margin: { top: (12.0) },
+                hover_actions_enabled: true,
+            }
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.

From b1e6d1418d0aaabaaf1ef68d2723595a2fe0226e Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 9 Dec 2024 18:37:44 +0800
Subject: [PATCH 22/30] removed generic in set_avatar_row

---
 Cargo.lock                    |   1 +
 Cargo.toml                    |   2 +-
 src/home/room_read_receipt.rs |  84 +++++-----
 src/home/room_screen.rs       |  47 +++---
 src/shared/avatar.rs          | 281 ++++++++++++++++++----------------
 5 files changed, 224 insertions(+), 191 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index efe076aa..cdd52214 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3399,6 +3399,7 @@ dependencies = [
  "htmlize",
  "imbl",
  "imghdr",
+ "indexmap",
  "linkify",
  "makepad-widgets",
  "matrix-sdk",
diff --git a/Cargo.toml b/Cargo.toml
index de46ba31..c2cdabb2 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -49,7 +49,7 @@ unicode-segmentation = "1.11.0"
 url = "2.5.0"
 emojis = "0.6.1"
 bytesize = "1.3.0"
-
+indexmap = "2.6.0"
 
 ###################################################################################################
 #### Note: we now enable the usage of `rustls-tls` and the `bundled-sqlite` features in the 2  ####
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 98fbea10..9a72b17f 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,8 +1,9 @@
 use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
+use indexmap::IndexMap;
 use makepad_widgets::*;
 use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
 use std::cmp;
-use crate::shared::avatar::set_avatar_and_get_username;
+const MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW : usize = 5;
 live_design! {
     import makepad_draw::shader::std::*;
     import makepad_widgets::base::*;
@@ -11,6 +12,7 @@ live_design! {
     import crate::shared::styles::*;
 
     AvatarRow = {{AvatarRow}} {
+        debug: true,
         button: <Avatar> {
             width: 15.0,
             height: 15.0,
@@ -19,8 +21,10 @@ live_design! {
             }}}
         }
         margin: {top: 3, right: 10, bottom: 3, left: 10}
-        width: Fit,
-        height: Fit,
+        // width: Fit,
+        // height: Fit,
+        width: 100,
+        height: 50,
         plus: <Label> {
             draw_text: {
                 color: #x0,
@@ -33,9 +37,6 @@ live_design! {
 
 #[derive(Live, Widget, LiveHook)]
 pub struct AvatarRow {
-    #[redraw]
-    #[rust]
-    area: Area,
     #[redraw]
     #[live]
     draw_text: DrawText,
@@ -45,6 +46,8 @@ pub struct AvatarRow {
     walk: Walk,
     #[live]
     button: Option<LivePtr>,
+    #[layout]
+    layout: Layout,
     #[live(false)]
     hover_actions_enabled: bool,
     #[live]
@@ -54,7 +57,8 @@ pub struct AvatarRow {
     #[rust]
     label: Option<LabelRef>,
     #[rust]
-    total_num_seen: usize,
+    total_num_seen: u32,
+    #[redraw] #[rust] area: Area,
 
 }
 
@@ -68,24 +72,24 @@ pub enum AvatarRowAction {
 impl Widget for AvatarRow {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
-        for button in self.buttons.iter_mut() {
-            match button.hit(cx, event, self.area) {
-                Some(Hit::FingerHoverIn(finger_event)) => {
-                    let rect = Rect {
-                        pos: finger_event.abs,
-                        size: DVec2::new(),
-                    };
-                    cx.widget_action(uid, &scope.path, AvatarRowAction::HoverIn(rect));
-                }
-                Some(Hit::FingerHoverOut(_)) => {
-                    cx.widget_action(uid, &scope.path, AvatarRowAction::HoverOut);
-                }
-                _ => {}
+
+        match event.hits(cx, self.area) {
+            Hit::FingerHoverIn(finger_event) => {
+                let rect = Rect {
+                    pos: finger_event.abs,
+                    size: DVec2::new(),
+                };
+                cx.widget_action(uid, &scope.path, AvatarRowAction::HoverIn(rect));
             }
+            Hit::FingerHoverOut(_) => {
+                cx.widget_action(uid, &scope.path, AvatarRowAction::HoverOut);
+            }
+            _ => {}
         }
     }
 
-    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, _walk: Walk) -> DrawStep {
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        cx.begin_turtle(walk, Layout::default());
         for v in self.buttons.iter_mut() {
             let _ = v.draw(cx, scope);
         }
@@ -95,23 +99,37 @@ impl Widget for AvatarRow {
                 let _ = label.draw(cx, scope);
             }
         }
+        cx.end_turtle_with_area(&mut self.area);
         DrawStep::done()
     }
 }
 impl AvatarRow {
-    fn set_range(&mut self, cx: &mut Cx, total_num_seen: usize) {
-        if total_num_seen != self.buttons.len() {
+    
+    /// Set a row of Avatars based on receipt iterator
+    ///
+    /// Given a sequence of receipts, this will set each of the first MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW
+    /// Avatars in this row to the corresponding user's avatar, and
+    /// display the given number of total receipts as a label. The
+    /// iterator is expected to yield tuples of (user_id, receipt),
+    /// where the receipt is ignored.
+    fn set_avatar_row(
+        &mut self,
+        cx: &mut Cx,
+        room_id: &RoomId,
+        event_id: Option<&EventId>,
+        receipts_map: IndexMap<OwnedUserId, Receipt>) {
+        if receipts_map.len() != self.buttons.len() {
             self.buttons.clear();
-            for _ in 0..cmp::min(5, total_num_seen) {
+            for _ in 0..cmp::min(MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW, receipts_map.len()) {
                 self.buttons.push(WidgetRef::new_from_ptr(cx, self.button).as_avatar());
             }
         }
-        self.total_num_seen = total_num_seen;
+        self.total_num_seen = receipts_map.len();
         self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
-    }
-
-    fn iter(&self) -> std::slice::Iter<'_, AvatarRef> {
-        self.buttons.iter()
+    
+        for (avatar_ref, (user_id, _)) in self.iter().zip(receipts_map) {
+            avatar_ref.set_avatar_and_get_username(cx, room_id, &user_id, None, event_id);
+        }
     }
 }
 impl AvatarRowRef {
@@ -146,13 +164,9 @@ impl AvatarRowRef {
         }
     }
     /// Set a row of Avatars based on receipt iterator
-    pub fn set_avatar_row<'a, T>(&mut self, cx: &mut Cx, room_id: &RoomId, event_id: Option<&EventId>, receipts_len: usize, receipts_iter: T) 
-        where T:Iterator<Item = (&'a OwnedUserId, &'a Receipt)> {
+    pub fn set_avatar_row(&mut self, cx: &mut Cx, room_id: &RoomId, event_id: Option<&EventId>, receipts_map: &IndexMap<OwnedUserId, Receipt>) {
         if let Some(ref mut inner) = self.borrow_mut() {
-            inner.set_range(cx, receipts_len);
-            for (avatar_ref, (user_id, _)) in inner.iter().zip(receipts_iter) {
-                set_avatar_and_get_username(cx, avatar_ref.clone(), room_id, &user_id, None, event_id);
-            }
+            inner.set_avatar_row(cx, room_id, event_id, receipts_map);
         }
     }
 }
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 0ef7c030..b7733095 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -29,7 +29,6 @@ use crate::{
         avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::JumpToBottomButtonWidgetExt, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineRequestSender}, utils::{self, unix_time_millis_to_datetime, ImageFormat, MediaFormatConst}
 };
-use crate::shared::avatar::set_avatar_and_get_username;
 use crate::home::room_read_receipt::AvatarRowWidgetRefExt;
 use rangemap::RangeSet;
 
@@ -392,7 +391,7 @@ live_design! {
 
                 message_annotations = <MessageAnnotations> {}
             }
-            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (12.0) }, hover_actions_enabled:true }
+            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (4.0), right: 70.0 }, hover_actions_enabled:true }
             message_menu = <MessageMenu> {}
             // leave space for reply button (simulate a min width).
             // once the message menu is done with overlays this wont be necessary.
@@ -512,6 +511,8 @@ live_design! {
                 }
                 text: ""
             }
+            avatar_row = <AvatarRow> {width: 40, height: 30, margin: { top: (4.0) , right: 70.0}, hover_actions_enabled:true }
+
         }
     }
 
@@ -1418,7 +1419,6 @@ impl Widget for RoomScreen {
                         content_drawn: tl_state.content_drawn_since_last_update.contains(&tl_idx),
                         profile_drawn: tl_state.profile_drawn_since_last_update.contains(&tl_idx),
                     };
-
                     let (item, item_new_draw_status) = match timeline_item.kind() {
                         TimelineItemKind::Event(event_tl_item) => match event_tl_item.content() {
                             TimelineItemContent::Message(message) => {
@@ -1828,9 +1828,8 @@ impl RoomScreen {
         replying_to: (EventTimelineItem, RepliedToInfo),
     ) {
         let replying_preview_view = self.view(id!(replying_preview));
-        let (replying_preview_username, _) = set_avatar_and_get_username(
+        let (replying_preview_username, _) = replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar)).set_avatar_and_get_username(
             cx,
-            replying_preview_view.avatar(id!(reply_preview_content.reply_preview_avatar)),
             self.room_id.as_ref().unwrap(),
             replying_to.0.sender(),
             Some(replying_to.0.sender_profile()),
@@ -2540,7 +2539,6 @@ fn populate_message_view(
     item_drawn_status: ItemDrawnStatus,
     room_screen_widget_uid: WidgetUid
 ) -> (WidgetRef, ItemDrawnStatus) {
-    let receipts = event_tl_item.read_receipts();
     let mut new_drawn_status = item_drawn_status;
 
     let ts_millis = event_tl_item.timestamp();
@@ -2567,7 +2565,6 @@ fn populate_message_view(
     // Sometimes we need to call this up-front, so we save the result in this variable
     // to avoid having to call it twice.
     let mut set_username_and_get_avatar_retval = None;
-
     let (item, used_cached_item) = match message.get_type() {
         MessageOrStickerType::Text(TextMessageEventContent { body, formatted, .. }) => {
             let template = if use_compact_view {
@@ -2576,8 +2573,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
-            let receipts_len = receipts.len();
-            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), receipts_len, receipts.iter());
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
 
             if existed && item_drawn_status.content_drawn {
                 (item, true)
@@ -2601,6 +2597,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2628,6 +2625,8 @@ fn populate_message_view(
         MessageOrStickerType::ServerNotice(sn) => {
             is_server_notice = true;
             let (item, existed) = list.item_with_existed(cx, item_id, live_id!(Message));
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
+
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2679,9 +2678,8 @@ fn populate_message_view(
                 (item, true)
             } else {
                 // Draw the profile up front here because we need the username for the emote body.
-                let (username, profile_drawn) = set_avatar_and_get_username(
+                let (username, profile_drawn) = item.avatar(id!(profile.avatar)).set_avatar_and_get_username(
                     cx,
-                    item.avatar(id!(profile.avatar)),
                     room_id,
                     event_tl_item.sender(),
                     Some(event_tl_item.sender_profile()),
@@ -2875,9 +2873,8 @@ fn populate_message_view(
 
         if !is_server_notice { // the normal case
             let (username, profile_drawn) = set_username_and_get_avatar_retval.unwrap_or_else(||
-                set_avatar_and_get_username(
+                item.avatar(id!(profile.avatar)).set_avatar_and_get_username(
                     cx,
-                    item.avatar(id!(profile.avatar)),
                     room_id,
                     event_tl_item.sender(),
                     Some(event_tl_item.sender_profile()),
@@ -3234,15 +3231,16 @@ fn draw_replied_to_message(
 
         match &in_reply_to_details.event {
             TimelineDetails::Ready(replied_to_event) => {
-                let (in_reply_to_username, is_avatar_fully_drawn) = set_avatar_and_get_username(
-                    cx,
+                let (in_reply_to_username, is_avatar_fully_drawn) = 
                     replied_to_message_view
-                    .avatar(id!(replied_to_message_content.reply_preview_avatar)),
-                    room_id,
-                    replied_to_event.sender(),
-                    Some(replied_to_event.sender_profile()),
-                    Some(in_reply_to_details.event_id.as_ref()),
-                );
+                        .avatar(id!(replied_to_message_content.reply_preview_avatar))
+                        .set_avatar_and_get_username(
+                            cx,
+                            room_id,
+                            replied_to_event.sender(),
+                            Some(replied_to_event.sender_profile()),
+                            Some(in_reply_to_details.event_id.as_ref()),
+                        );
 
                 fully_drawn = is_avatar_fully_drawn;
 
@@ -3503,8 +3501,8 @@ fn populate_small_state_event(
     item_drawn_status: ItemDrawnStatus,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
-
+    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));    
+    item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
     // 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;
@@ -3523,9 +3521,8 @@ fn populate_small_state_event(
     let username = username_opt.unwrap_or_else(|| {
         // As a fallback, call `set_avatar_and_get_username` to get the user's display name.
         let avatar_ref = item.avatar(id!(avatar));
-        let (username, profile_drawn) = set_avatar_and_get_username(
+        let (username, profile_drawn) = avatar_ref.set_avatar_and_get_username(
             cx,
-            avatar_ref,
             room_id,
             event_tl_item.sender(),
             Some(event_tl_item.sender_profile()),
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 18de52a1..75deb5da 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -209,13 +209,120 @@ impl Avatar {
             AvatarDisplayStatus::Text
         }
     }
-    /// Returns Hit event when mouse in
+    /// Returns a discrete event, Hit, that is based on the user-input interaction with the avatar
+    /// 
+    /// Hit events could be Hit::FingerUp, Hit::FingerDown, Hit::FingerHoverIn, Hit::FingerHoverOut, etc..
     fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Hit {
         event.hits_with_options(
             cx,
             self.area(),
             HitOptions::new().with_sweep_area(sweep_area))
     }
+    /// 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.
+    fn set_avatar_and_get_username(
+        &mut self,
+        cx: &mut Cx,
+        room_id: &RoomId,
+        avatar_user_id: &UserId,
+        avatar_profile_opt: Option<&TimelineDetails<Profile>>,
+        event_id: Option<&EventId>,
+    ) -> (String, bool) {
+        let avatar = self;
+        // Get the display name and avatar URL from the user's profile, if available,
+        // or if the profile isn't ready, fall back to qeurying our user profile cache.
+        let (username_opt, avatar_state) = match avatar_profile_opt {
+            Some(TimelineDetails::Ready(profile)) => (
+                profile.display_name.clone(),
+                AvatarState::Known(profile.avatar_url.clone()),
+            ),
+            Some(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, avatar_user_id, |profile, room_members| {
+                    room_members
+                        .get(room_id)
+                        .map(|rm| {
+                            (
+                                rm.display_name().map(|n| n.to_owned()),
+                                AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                            )
+                        })
+                        .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+                })
+                .unwrap_or((None, AvatarState::Unknown))
+            }
+            None => {
+                match user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
+                    room_members
+                        .get(room_id)
+                        .map(|rm| {
+                            (
+                                rm.display_name().map(|n| n.to_owned()),
+                                AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
+                            )
+                        })
+                        .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
+                }) {
+                    Some((profile_name, avatar_state)) => {
+                        (profile_name, avatar_state)
+                    }
+                    None => {
+                        submit_async_request(MatrixRequest::GetUserProfile { 
+                            user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
+                        });
+                        (None, AvatarState::Unknown)
+                    }
+                }
+            }
+        };
+
+        let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
+            AvatarState::Loaded(data) => (Some(data), true),
+            AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
+                AvatarCacheEntry::Loaded(data) => (Some(data), true),
+                AvatarCacheEntry::Failed => (None, true),
+                AvatarCacheEntry::Requested => (None, false),
+            },
+            AvatarState::Known(None) | AvatarState::Failed => (None, true),
+            AvatarState::Unknown => (None, false),
+        };
+
+        // Set sender to the display name if available, otherwise the user id.
+        let username = username_opt
+            .clone()
+            .unwrap_or_else(|| avatar_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((
+                            avatar_user_id.to_owned(),
+                            username_opt.clone(),
+                            room_id.to_owned(),
+                            data.clone()).into(),
+                        ),
+                        |img| utils::load_png_or_jpg(&img, cx, &data),
+                    )
+                    .ok()
+            })
+            .unwrap_or_else(|| {
+                avatar.show_text(
+                    Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
+                    &username,
+                )
+            });
+        (username, profile_drawn)
+    }
 }
 
 impl AvatarRef {
@@ -253,7 +360,9 @@ impl AvatarRef {
             AvatarDisplayStatus::Text
         }
     }
-    /// Returns an option of Hit event when mouse in
+    /// Returns a option for discrete event, Hit, that is based on the user-input interaction with the avatar
+    /// 
+    /// Hit events could be Hit::FingerUp, Hit::FingerDown, Hit::FingerHoverIn, Hit::FingerHoverOut, etc..
     pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Option<Hit> {
         if let Some(mut inner) = self.borrow_mut() {
             Some(inner.hit(cx, event, sweep_area))
@@ -262,6 +371,46 @@ impl AvatarRef {
         }
         
     }
+    /// 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 user profile is not ready, this function will submit an async request
+    /// to fetch the user profile from the server, but only if the event ID is `Some`.
+    /// For Read Receipt cases, there is no user's profile. The Avatar cache is taken from the sender's profile 
+    ///
+    /// This function will always choose a nice, displayable username and avatar.
+    ///
+    /// The specific behavior is as follows:
+    /// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
+    ///   will be the user's display name and avatar image, if available.
+    ///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
+    /// * If no avatar image is available, then the `avatar` will be set to the first character
+    ///   of the user's display name, if available.
+    /// * If the user's display name is not available or has not been set, the user ID
+    ///   will be used for the `username`, and the first character of the user ID for the `avatar`.
+    /// * If the timeline event's sender profile isn't ready and the user ID isn't found in
+    ///   our user profile cache , then the `username` and `avatar`  will be the user ID
+    ///   and the first character of that user ID, respectively.
+    ///
+    /// ## Return
+    /// Returns a tuple of:
+    /// 1. The displayable username that should be used to populate the username field.
+    /// 2. A boolean indicating whether the user's profile info has been completely drawn
+    ///    (for purposes of caching it to avoid future redraws).
+    pub fn set_avatar_and_get_username(
+        &self,
+        cx: &mut Cx,
+        room_id: &RoomId,
+        avatar_user_id: &UserId,
+        avatar_profile_opt: Option<&TimelineDetails<Profile>>,
+        event_id: Option<&EventId>,
+    ) -> (String, bool) {
+        if let Some(mut inner) = self.borrow_mut() {
+            inner.set_avatar_and_get_username(cx, room_id, avatar_user_id, avatar_profile_opt, event_id)
+        } else {
+            (avatar_user_id.to_string(), false)
+        }
+    }
 }
 
 /// What an Avatar instance is currently displaying.
@@ -296,131 +445,3 @@ impl From<(OwnedUserId, Option<String>, OwnedRoomId, Arc<[u8]>)> for AvatarImage
         Self { user_id, username, room_id, img_data }
     }
 }
-/// 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 user profile is not ready, this function will submit an async request
-/// to fetch the user profile from the server, but only if the event ID is `Some`.
-/// For Read Receipt cases, there is no user's profile. The Avatar cache is taken from the sender's profile 
-///
-/// This function will always choose a nice, displayable username and avatar.
-///
-/// The specific behavior is as follows:
-/// * If the timeline event's sender profile *is* ready, then the `username` and `avatar`
-///   will be the user's display name and avatar image, if available.
-///   * If it's not ready, we attempt to fetch the user info from the user profile cache.
-/// * If no avatar image is available, then the `avatar` will be set to the first character
-///   of the user's display name, if available.
-/// * If the user's display name is not available or has not been set, the user ID
-///   will be used for the `username`, and the first character of the user ID for the `avatar`.
-/// * If the timeline event's sender profile isn't ready and the user ID isn't found in
-///   our user profile cache , then the `username` and `avatar`  will be the user ID
-///   and the first character of that user ID, respectively.
-///
-/// ## Return
-/// Returns a tuple of:
-/// 1. The displayable username that should be used to populate the username field.
-/// 2. A boolean indicating whether the user's profile info has been completely drawn
-///    (for purposes of caching it to avoid future redraws).
-pub fn set_avatar_and_get_username(
-    cx: &mut Cx,
-    avatar: AvatarRef,
-    room_id: &RoomId,
-    avatar_user_id: &UserId,
-    avatar_profile_opt: Option<&TimelineDetails<Profile>>,
-    event_id: Option<&EventId>,
-) -> (String, bool) {
-    // Get the display name and avatar URL from the user's profile, if available,
-    // or if the profile isn't ready, fall back to qeurying our user profile cache.
-    let (username_opt, avatar_state) = match avatar_profile_opt {
-        Some(TimelineDetails::Ready(profile)) => (
-            profile.display_name.clone(),
-            AvatarState::Known(profile.avatar_url.clone()),
-        ),
-        Some(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, avatar_user_id, |profile, room_members| {
-                room_members
-                    .get(room_id)
-                    .map(|rm| {
-                        (
-                            rm.display_name().map(|n| n.to_owned()),
-                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                        )
-                    })
-                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-            })
-            .unwrap_or((None, AvatarState::Unknown))
-        }
-        None => {
-            match user_profile_cache::with_user_profile(cx, avatar_user_id, |profile, room_members| {
-                room_members
-                    .get(room_id)
-                    .map(|rm| {
-                        (
-                            rm.display_name().map(|n| n.to_owned()),
-                            AvatarState::Known(rm.avatar_url().map(|u| u.to_owned())),
-                        )
-                    })
-                    .unwrap_or_else(|| (profile.username.clone(), profile.avatar_state.clone()))
-            }) {
-                Some((profile_name, avatar_state)) => {
-                    (profile_name, avatar_state)
-                }
-                None => {
-                    submit_async_request(MatrixRequest::GetUserProfile { 
-                        user_id: avatar_user_id.to_owned(), room_id: Some(room_id.to_owned()), local_only: false 
-                    });
-                    (None, AvatarState::Unknown)
-                }
-            }
-        }
-    };
-
-    let (avatar_img_data_opt, profile_drawn) = match avatar_state.clone() {
-        AvatarState::Loaded(data) => (Some(data), true),
-        AvatarState::Known(Some(uri)) => match avatar_cache::get_or_fetch_avatar(cx, uri) {
-            AvatarCacheEntry::Loaded(data) => (Some(data), true),
-            AvatarCacheEntry::Failed => (None, true),
-            AvatarCacheEntry::Requested => (None, false),
-        },
-        AvatarState::Known(None) | AvatarState::Failed => (None, true),
-        AvatarState::Unknown => (None, false),
-    };
-
-    // Set sender to the display name if available, otherwise the user id.
-    let username = username_opt
-        .clone()
-        .unwrap_or_else(|| avatar_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((
-                        avatar_user_id.to_owned(),
-                        username_opt.clone(),
-                        room_id.to_owned(),
-                        data.clone()).into(),
-                    ),
-                    |img| utils::load_png_or_jpg(&img, cx, &data),
-                )
-                .ok()
-        })
-        .unwrap_or_else(|| {
-            avatar.show_text(
-                Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
-                &username,
-            )
-        });
-    (username, profile_drawn)
-}
\ No newline at end of file

From 567d2f7191a4ac9dab970f15db3781241b98bfad Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 9 Dec 2024 19:00:54 +0800
Subject: [PATCH 23/30] fixed clippy

---
 src/home/room_read_receipt.rs | 19 ++++++++-----------
 src/home/room_screen.rs       | 15 +++++++--------
 src/shared/avatar.rs          |  7 +------
 3 files changed, 16 insertions(+), 25 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 9fc20ae0..67774a1d 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -55,7 +55,7 @@ pub struct AvatarRow {
     #[rust]
     label: Option<LabelRef>,
     #[rust]
-    total_num_seen: u32,
+    total_num_seen: usize,
     #[redraw] #[rust] area: Area,
 
 }
@@ -70,7 +70,7 @@ pub enum AvatarRowAction {
 impl Widget for AvatarRow {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
-
+        if self.total_num_seen == 0 { return; }
         match event.hits(cx, self.area) {
             Hit::FingerHoverIn(finger_event) => {
                 let rect = Rect {
@@ -91,9 +91,9 @@ impl Widget for AvatarRow {
         for v in self.buttons.iter_mut() {
             let _ = v.draw(cx, scope);
         }
-        if self.total_num_seen > 5 {
+        if self.total_num_seen > MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW {
             if let Some(label) = &mut self.label {
-                label.set_text(&format!(" + {:?}", self.total_num_seen - 5));
+                label.set_text(&format!(" + {:?}", self.total_num_seen - MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW));
                 let _ = label.draw(cx, scope);
             }
         }
@@ -115,7 +115,7 @@ impl AvatarRow {
         cx: &mut Cx,
         room_id: &RoomId,
         event_id: Option<&EventId>,
-        receipts_map: IndexMap<OwnedUserId, Receipt>) {
+        receipts_map: &IndexMap<OwnedUserId, Receipt>) {
         if receipts_map.len() != self.buttons.len() {
             self.buttons.clear();
             for _ in 0..cmp::min(MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW, receipts_map.len()) {
@@ -125,8 +125,8 @@ impl AvatarRow {
         self.total_num_seen = receipts_map.len();
         self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
     
-        for (avatar_ref, (user_id, _)) in self.iter().zip(receipts_map) {
-            avatar_ref.set_avatar_and_get_username(cx, room_id, &user_id, None, event_id);
+        for (avatar_ref, (user_id, _)) in self.buttons.iter().zip(receipts_map) {
+            avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id);
         }
     }
 }
@@ -145,10 +145,7 @@ impl AvatarRowRef {
     /// Handles hover out action
     pub fn hover_out(&self, actions: &Actions) -> bool {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
-            match item.cast() {
-                AvatarRowAction::HoverOut => true,
-                _ => false,
-            }
+            matches!(item.cast(), AvatarRowAction::HoverOut)
         } else {
             false
         }
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 2ac67afe..ea36f9be 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -12,21 +12,20 @@ use matrix_sdk::{
             message::{
                 AudioMessageEventContent, CustomEventContent, EmoteMessageEventContent, FileMessageEventContent, FormattedBody, ImageMessageEventContent, KeyVerificationRequestEventContent, LocationMessageEventContent, MessageFormat, MessageType, NoticeMessageEventContent, RoomMessageEventContent, ServerNoticeMessageEventContent, TextMessageEventContent, VideoMessageEventContent
             }, ImageInfo, MediaSource
-        }, sticker::StickerEventContent}, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, UserId
+        }, sticker::StickerEventContent}, matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId
     },
     OwnedServerName,
 };
 use matrix_sdk_ui::timeline::{
-    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
+    self, EventTimelineItem, InReplyToDetails, MemberProfileChange, ReactionsByKeyBySender, RepliedToInfo, RoomMembershipChange, TimelineDetails, TimelineItem, TimelineItemContent, TimelineItemKind, VirtualTimelineItem
 };
 use robius_location::Coordinates;
 
 use crate::{
-    avatar_cache::{self, AvatarCacheEntry}, event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::loading_modal::LoadingModalWidgetExt, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::{
-        user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt},
-        user_profile_cache,
-    }, shared::{
-        avatar::{AvatarRef, AvatarWidgetRefExt}, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::JumpToBottomButtonWidgetExt, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
+    event_preview::{text_preview_of_member_profile_change, text_preview_of_other_state, text_preview_of_redacted_message, text_preview_of_room_membership_change, text_preview_of_timeline_item}, home::loading_modal::LoadingModalWidgetExt, location::{get_latest_location, init_location_subscriber, request_location_update, LocationAction, LocationRequest, LocationUpdate}, media_cache::{MediaCache, MediaCacheEntry}, profile::
+        user_profile::{AvatarState, ShowUserProfileAction, UserProfile, UserProfileAndRoomId, UserProfilePaneInfo, UserProfileSlidingPaneRef, UserProfileSlidingPaneWidgetExt}
+    , shared::{
+        avatar::AvatarWidgetRefExt, html_or_plaintext::{HtmlOrPlaintextRef, HtmlOrPlaintextWidgetRefExt}, jump_to_bottom_button::JumpToBottomButtonWidgetExt, text_or_image::{TextOrImageRef, TextOrImageWidgetRefExt}, typing_animation::TypingAnimationWidgetExt
     }, sliding_sync::{get_client, submit_async_request, take_timeline_endpoints, BackwardsPaginateUntilEventRequest, MatrixRequest, PaginationDirection, TimelineRequestSender}, utils::{self, unix_time_millis_to_datetime, ImageFormat, MediaFormatConst}
 };
 use crate::home::room_read_receipt::AvatarRowWidgetRefExt;
@@ -1045,7 +1044,7 @@ impl Widget for RoomScreen {
                 if let Some(rect) = seq.hover_in(actions) {
                     tooltip.show_with_options(cx, rect.pos, &format!("Seen by {num_seen}"));
                 }
-                if seq.hover_out(&actions) {
+                if seq.hover_out(actions) {
                     tooltip.hide(cx);
                 }
             });     
diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index 75deb5da..c9399105 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -364,12 +364,7 @@ impl AvatarRef {
     /// 
     /// Hit events could be Hit::FingerUp, Hit::FingerDown, Hit::FingerHoverIn, Hit::FingerHoverOut, etc..
     pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Option<Hit> {
-        if let Some(mut inner) = self.borrow_mut() {
-            Some(inner.hit(cx, event, sweep_area))
-        } else {
-            None
-        }
-        
+        self.borrow_mut().map(|mut inner| inner.hit(cx, event, sweep_area))
     }
     /// 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.

From d0a3cfb76fea2c6980f912d8d164e62c00fe8a1a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Mon, 9 Dec 2024 19:42:50 +0800
Subject: [PATCH 24/30] fix doc

---
 src/shared/avatar.rs | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/shared/avatar.rs b/src/shared/avatar.rs
index c9399105..163fad8f 100644
--- a/src/shared/avatar.rs
+++ b/src/shared/avatar.rs
@@ -209,9 +209,15 @@ impl Avatar {
             AvatarDisplayStatus::Text
         }
     }
-    /// Returns a discrete event, Hit, that is based on the user-input interaction with the avatar
+    /// Returns a hit event based on user interaction with the avatar
     /// 
-    /// Hit events could be Hit::FingerUp, Hit::FingerDown, Hit::FingerHoverIn, Hit::FingerHoverOut, etc..
+    /// # Parameters
+    /// - `cx`: The draw context
+    /// - `event`: The input event
+    /// - `sweep_area`: The area to check for hits
+    /// 
+    /// # Returns
+    /// A `Hit` representing the type of interaction (hover, click, etc.)
     fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Hit {
         event.hits_with_options(
             cx,
@@ -228,7 +234,6 @@ impl Avatar {
         avatar_profile_opt: Option<&TimelineDetails<Profile>>,
         event_id: Option<&EventId>,
     ) -> (String, bool) {
-        let avatar = self;
         // Get the display name and avatar URL from the user's profile, if available,
         // or if the profile isn't ready, fall back to qeurying our user profile cache.
         let (username_opt, avatar_state) = match avatar_profile_opt {
@@ -303,7 +308,7 @@ impl Avatar {
         // Set the sender's avatar image, or use the username if no image is available.
         avatar_img_data_opt
             .and_then(|data| {
-                avatar
+                self
                     .show_image(
                         Some((
                             avatar_user_id.to_owned(),
@@ -316,7 +321,7 @@ impl Avatar {
                     .ok()
             })
             .unwrap_or_else(|| {
-                avatar.show_text(
+                self.show_text(
                     Some((avatar_user_id.to_owned(), username_opt, room_id.to_owned()).into()),
                     &username,
                 )
@@ -360,9 +365,15 @@ impl AvatarRef {
             AvatarDisplayStatus::Text
         }
     }
-    /// Returns a option for discrete event, Hit, that is based on the user-input interaction with the avatar
+    /// Returns a hit event based on user interaction with the avatar
+    /// 
+    /// # Parameters
+    /// - `cx`: The draw context
+    /// - `event`: The input event
+    /// - `sweep_area`: The area to check for hits
     /// 
-    /// Hit events could be Hit::FingerUp, Hit::FingerDown, Hit::FingerHoverIn, Hit::FingerHoverOut, etc..
+    /// # Returns
+    /// A `Hit` representing the type of interaction (hover, click, etc.)
     pub fn hit(&mut self, cx: &mut Cx, event: &Event, sweep_area: Area) -> Option<Hit> {
         self.borrow_mut().map(|mut inner| inner.hit(cx, event, sweep_area))
     }

From 07b5fc78bbaf824742cfedd72e47168b2cc2d2ef Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Tue, 10 Dec 2024 16:30:49 +0800
Subject: [PATCH 25/30] Create a generic RoomScreenTooltipActions

---
 src/avatar_cache.rs           |  1 -
 src/home/room_read_receipt.rs | 44 +++++++++++++++++++++--------------
 src/home/room_screen.rs       | 30 ++++++++++++++++--------
 3 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/src/avatar_cache.rs b/src/avatar_cache.rs
index 22d2e88a..d5272542 100644
--- a/src/avatar_cache.rs
+++ b/src/avatar_cache.rs
@@ -75,7 +75,6 @@ pub fn get_or_fetch_avatar(
             },
             Entry::Occupied(occupied) => return occupied.get().clone(),
         }
-
         submit_async_request(MatrixRequest::FetchAvatar {
             mxc_uri,
             on_fetched: enqueue_avatar_update,
diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 67774a1d..3feb28ed 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,4 +1,5 @@
 use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
+use crate::home::room_screen::RoomScreenTooltipActions;
 use indexmap::IndexMap;
 use makepad_widgets::*;
 use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
@@ -60,27 +61,33 @@ pub struct AvatarRow {
 
 }
 
-#[derive(Clone, Debug, DefaultNone)]
-pub enum AvatarRowAction {
-    HoverIn(Rect),
-    HoverOut,
-    None,
-}
-
 impl Widget for AvatarRow {
     fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
         let uid = self.widget_uid();
         if self.total_num_seen == 0 { return; }
         match event.hits(cx, self.area) {
             Hit::FingerHoverIn(finger_event) => {
-                let rect = Rect {
-                    pos: finger_event.abs,
-                    size: DVec2::new(),
+                // Temporary hack to improve the issue that the tooltip is cut off by the right side of the screen
+                // As the width of the tooltip not currently calculated, it is difficult to prevent the tooltip from being cut off
+                // If the mouse position is too close to right side of the screen, the tooltip will be left-aligned to the reaction button 
+                let tooltip_pos = if finger_event.abs.x > cx.default_window_size().x - 80.0 {
+                    Rect {
+                        pos: DVec2 {
+                            x: self.area.rect(cx).pos.x,
+                            y: finger_event.abs.y
+                        },
+                        size: DVec2::new(),
+                    }
+                } else {
+                    Rect {
+                        pos: finger_event.abs,
+                        size: DVec2::new(),
+                    }
                 };
-                cx.widget_action(uid, &scope.path, AvatarRowAction::HoverIn(rect));
+                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverIn(tooltip_pos, format!("Seen by {0}", self.total_num_seen)));
             }
             Hit::FingerHoverOut(_) => {
-                cx.widget_action(uid, &scope.path, AvatarRowAction::HoverOut);
+                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
             }
             _ => {}
         }
@@ -103,12 +110,12 @@ impl Widget for AvatarRow {
 }
 impl AvatarRow {
     
-    /// Set a row of Avatars based on receipt iterator
+    /// Set a row of Avatars based on receipt index map
     ///
     /// Given a sequence of receipts, this will set each of the first MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW
     /// Avatars in this row to the corresponding user's avatar, and
     /// display the given number of total receipts as a label. The
-    /// iterator is expected to yield tuples of (user_id, receipt),
+    /// index map is expected to yield tuples of (user_id, receipt),
     /// where the receipt is ignored.
     fn set_avatar_row(
         &mut self,
@@ -126,16 +133,17 @@ impl AvatarRow {
         self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
     
         for (avatar_ref, (user_id, _)) in self.buttons.iter().zip(receipts_map) {
+            // Set avatar_profile_opt to be None so that the function may fetch the user profile from profile cache
             avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id);
         }
     }
 }
 impl AvatarRowRef {
     /// Handles hover in action
-    pub fn hover_in(&self, actions: &Actions) -> Option<Rect> {
+    pub fn hover_in(&self, actions: &Actions) -> Option<(Rect, String)> {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
             match item.cast() {
-                AvatarRowAction::HoverIn(rect) => Some(rect),
+                RoomScreenTooltipActions::HoverIn(tooltip_pos, tooltip_text) => Some((tooltip_pos, tooltip_text)),
                 _ => None,
             }
         } else {
@@ -145,7 +153,7 @@ impl AvatarRowRef {
     /// Handles hover out action
     pub fn hover_out(&self, actions: &Actions) -> bool {
         if let Some(item) = actions.find_widget_action(self.widget_uid()) {
-            matches!(item.cast(), AvatarRowAction::HoverOut)
+            matches!(item.cast(), RoomScreenTooltipActions::HoverOut)
         } else {
             false
         }
@@ -158,7 +166,7 @@ impl AvatarRowRef {
             0
         }
     }
-    /// Set a row of Avatars based on receipt iterator
+    /// Set a row of Avatars based on receipt's index map
     pub fn set_avatar_row(&mut self, cx: &mut Cx, room_id: &RoomId, event_id: Option<&EventId>, receipts_map: &IndexMap<OwnedUserId, Receipt>) {
         if let Some(ref mut inner) = self.borrow_mut() {
             inner.set_avatar_row(cx, room_id, event_id, receipts_map);
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index ea36f9be..5473e474 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -391,7 +391,7 @@ live_design! {
                 message_annotations = <MessageAnnotations> {}
             }
             avatar_row = <AvatarRow> {
-                width: 40,
+                width: Fit,
                 height: 30,
                 margin: { top: (12.0), right: 50.0 },
             }
@@ -515,7 +515,7 @@ live_design! {
                 text: ""
             }
             avatar_row = <AvatarRow> {
-                width: 40,
+                width: Fit,
                 height: 30,
                 margin: { top: (12.0), right: 50.0 },
             }
@@ -720,7 +720,6 @@ live_design! {
             color: (COLOR_SECONDARY)
         }
         flow: Down, spacing: 0.0
-        
         room_screen_wrapper = <View> {
             width: Fill, height: Fill,
             flow: Overlay,
@@ -949,7 +948,7 @@ live_design! {
             }
         }
         
-        tooltip = <Tooltip> {
+        room_screen_tooltip = <Tooltip> {
             content: <View> {
                 flow: Overlay
                 width: Fit
@@ -969,7 +968,7 @@ live_design! {
                     }
     
                     tooltip_label = <Label> {
-                        width: 30,
+                        width: Fit,
                         draw_text: {
                             text_style: <THEME_FONT_REGULAR>{font_size: 9},
                             text_wrap: Word,
@@ -1037,12 +1036,11 @@ impl Widget for RoomScreen {
         }
 
         if let Event::Actions(actions) = event {
-            let mut tooltip = self.tooltip(id!(tooltip));
+            let mut tooltip = self.tooltip(id!(room_screen_tooltip));
             portal_list.items_with_actions(actions).iter().for_each(| (_, wr) | {
                 let seq = wr.avatar_row(id!(avatar_row));
-                let num_seen = seq.total_num_seen();
-                if let Some(rect) = seq.hover_in(actions) {
-                    tooltip.show_with_options(cx, rect.pos, &format!("Seen by {num_seen}"));
+                if let Some((rect, tooltip_text)) = seq.hover_in(actions) {
+                    tooltip.show_with_options(cx, rect.pos, &tooltip_text);
                 }
                 if seq.hover_out(actions) {
                     tooltip.hide(cx);
@@ -2162,6 +2160,18 @@ impl RoomScreenRef {
     }
 }
 
+/// Actions for the room screen's tooltip 
+#[derive(Clone, Debug, DefaultNone)]
+pub enum RoomScreenTooltipActions {
+    // Mouse over event when the mouse is over the reaction button
+    // First parameter is rect containing tooltip position and its size
+    // Todo! implement tooltip resizing
+    // The second parameter is tooltip text
+    HoverIn(Rect, String),
+    HoverOut,
+    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.
 pub enum TimelineUpdate {
@@ -3507,7 +3517,7 @@ fn populate_small_state_event(
     item_drawn_status: ItemDrawnStatus,
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));    
+    let (item, existed) = list.item_with_existed(cx, item_id, live_id!(SmallStateEvent));
     item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
     // 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.

From 08d23916982b94690f5a0095f2bb2e716b38229c Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Tue, 10 Dec 2024 18:34:30 +0800
Subject: [PATCH 26/30] avatarrow cleanup

---
 src/home/room_read_receipt.rs | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 3feb28ed..8e7b6049 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -13,7 +13,6 @@ live_design! {
     import crate::shared::styles::*;
 
     AvatarRow = {{AvatarRow}} {
-        debug: true,
         button: <Avatar> {
             width: 15.0,
             height: 15.0,
@@ -22,8 +21,6 @@ live_design! {
             }}}
         }
         margin: {top: 3, right: 10, bottom: 3, left: 10}
-        // width: Fit,
-        // height: Fit,
         width: 100,
         height: 50,
         plus: <Label> {

From efa3eed09a37553da142821c26ee3a041f7dcf79 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 12 Dec 2024 09:04:18 +0800
Subject: [PATCH 27/30] z

---
 src/home/room_screen.rs | 35 +++++++++++++++++++++++++++++++++--
 src/sliding_sync.rs     |  3 ++-
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 5473e474..64cc7a1a 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -434,6 +434,11 @@ live_design! {
                 message = <HtmlOrPlaintext> { }
                 message_annotations = <MessageAnnotations> {}
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -446,6 +451,11 @@ live_design! {
                 message = <TextOrImage> { }
                 message_annotations = <MessageAnnotations> {}
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -458,6 +468,11 @@ live_design! {
                 message = <TextOrImage> { }
                 message_annotations = <MessageAnnotations> {}
             }
+            avatar_row = <AvatarRow> {
+                width: Fit,
+                height: 30,
+                margin: { top: (12.0), right: 50.0 },
+            }
         }
     }
 
@@ -2556,7 +2571,7 @@ fn populate_message_view(
     room_screen_widget_uid: WidgetUid
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-
+    println!("event_tl_time read_receipts() {:?} body {:?}", event_tl_item.read_receipts(), message.body());	
     let ts_millis = event_tl_item.timestamp();
 
     let mut is_notice = false; // whether this message is a Notice
@@ -2690,6 +2705,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2732,6 +2748,8 @@ fn populate_message_view(
                 live_id!(ImageMessage)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
+
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2754,6 +2772,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2772,6 +2791,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2789,6 +2809,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2806,6 +2827,7 @@ fn populate_message_view(
                 live_id!(Message)
             };
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2819,6 +2841,7 @@ fn populate_message_view(
         MessageOrStickerType::VerificationRequest(verification) => {
             let template = live_id!(Message);
             let (item, existed) = list.item_with_existed(cx, item_id, template);
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -2847,6 +2870,7 @@ fn populate_message_view(
         }
         other => {
             let (item, existed) = list.item_with_existed(cx, item_id, live_id!(Message));
+            item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
             if existed && item_drawn_status.content_drawn {
                 (item, true)
             } else {
@@ -3421,6 +3445,9 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
+        let v = &text_preview_of_redacted_message(event_tl_item, original_sender)
+        .format_with(original_sender);
+        println!("v {:?}", v);
         item.label(id!(content)).set_text(
             &text_preview_of_redacted_message(event_tl_item, original_sender)
                 .format_with(original_sender),
@@ -3468,6 +3495,8 @@ impl SmallStateEventContent for MemberProfileChange {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
+        let mpc = &text_preview_of_member_profile_change(self, username).format_with(username);
+        println!("mpc {}", mpc);
         item.label(id!(content))
             .set_text(&text_preview_of_member_profile_change(self, username).format_with(username));
         new_drawn_status.content_drawn = true;
@@ -3518,7 +3547,6 @@ 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));
-    item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
     // 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;
@@ -3553,7 +3581,10 @@ fn populate_small_state_event(
         new_drawn_status.profile_drawn = profile_drawn;
         username
     });
+    println!("event_tl_time read_receipts small_state_event {:?} body {:?} len {:?}", event_tl_item.read_receipts(), event_tl_item.event_id(), event_tl_item.read_receipts().len());	
 
+    item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
+    //(item, new_drawn_status)
     // Proceed to draw the actual event content.
     event_content.populate_item_content(
         cx,
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index 428bd9ac..b38cf952 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -460,13 +460,14 @@ async fn async_worker(
                         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(_) => {

From ad8d0537ee989498ac4d4f618c55efdecd89d3d8 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 12 Dec 2024 17:05:32 +0800
Subject: [PATCH 28/30] minor cleanup

---
 src/home/room_screen.rs | 3 ---
 src/sliding_sync.rs     | 3 +--
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 64cc7a1a..992bb03a 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -3447,7 +3447,6 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
     ) -> (WidgetRef, ItemDrawnStatus) {
         let v = &text_preview_of_redacted_message(event_tl_item, original_sender)
         .format_with(original_sender);
-        println!("v {:?}", v);
         item.label(id!(content)).set_text(
             &text_preview_of_redacted_message(event_tl_item, original_sender)
                 .format_with(original_sender),
@@ -3496,7 +3495,6 @@ impl SmallStateEventContent for MemberProfileChange {
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
         let mpc = &text_preview_of_member_profile_change(self, username).format_with(username);
-        println!("mpc {}", mpc);
         item.label(id!(content))
             .set_text(&text_preview_of_member_profile_change(self, username).format_with(username));
         new_drawn_status.content_drawn = true;
@@ -3581,7 +3579,6 @@ fn populate_small_state_event(
         new_drawn_status.profile_drawn = profile_drawn;
         username
     });
-    println!("event_tl_time read_receipts small_state_event {:?} body {:?} len {:?}", event_tl_item.read_receipts(), event_tl_item.event_id(), event_tl_item.read_receipts().len());	
 
     item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
     //(item, new_drawn_status)
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index b38cf952..428bd9ac 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -460,14 +460,13 @@ async fn async_worker(
                         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(_) => {

From 22aa2940d16c0f8ec3dbe1c2914ab36f7aa4d249 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 13 Dec 2024 11:33:45 +0800
Subject: [PATCH 29/30] Added human_readable name in read_receipt tooltip

---
 src/home/room_read_receipt.rs | 12 ++++++++----
 src/home/room_screen.rs       |  5 -----
 src/utils.rs                  | 29 +++++++++++++++++++++++++++++
 3 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 8e7b6049..373490c2 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -1,5 +1,6 @@
 use crate::shared::avatar::{AvatarRef, AvatarWidgetRefExt};
 use crate::home::room_screen::RoomScreenTooltipActions;
+use crate::utils::human_readable_list;
 use indexmap::IndexMap;
 use makepad_widgets::*;
 use matrix_sdk::ruma::{events::receipt::Receipt, EventId, OwnedUserId, RoomId};
@@ -55,7 +56,8 @@ pub struct AvatarRow {
     #[rust]
     total_num_seen: usize,
     #[redraw] #[rust] area: Area,
-
+    #[rust]
+    human_readable_usernames: String, 
 }
 
 impl Widget for AvatarRow {
@@ -81,7 +83,7 @@ impl Widget for AvatarRow {
                         size: DVec2::new(),
                     }
                 };
-                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverIn(tooltip_pos, format!("Seen by {0}", self.total_num_seen)));
+                cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverIn(tooltip_pos, format!("Seen by {:?}\n{}", self.total_num_seen, self.human_readable_usernames)));
             }
             Hit::FingerHoverOut(_) => {
                 cx.widget_action(uid, &scope.path, RoomScreenTooltipActions::HoverOut);
@@ -128,11 +130,13 @@ impl AvatarRow {
         }
         self.total_num_seen = receipts_map.len();
         self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
-    
+        let mut usernames_arr = vec![];
         for (avatar_ref, (user_id, _)) in self.buttons.iter().zip(receipts_map) {
             // Set avatar_profile_opt to be None so that the function may fetch the user profile from profile cache
-            avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id);
+            let (username, _) = avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id); 
+            usernames_arr.push(username);
         }
+        self.human_readable_usernames = human_readable_list(usernames_arr);
     }
 }
 impl AvatarRowRef {
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 992bb03a..9dbe0af9 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -2571,7 +2571,6 @@ fn populate_message_view(
     room_screen_widget_uid: WidgetUid
 ) -> (WidgetRef, ItemDrawnStatus) {
     let mut new_drawn_status = item_drawn_status;
-    println!("event_tl_time read_receipts() {:?} body {:?}", event_tl_item.read_receipts(), message.body());	
     let ts_millis = event_tl_item.timestamp();
 
     let mut is_notice = false; // whether this message is a Notice
@@ -3445,8 +3444,6 @@ impl SmallStateEventContent for RedactedMessageEventMarker {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        let v = &text_preview_of_redacted_message(event_tl_item, original_sender)
-        .format_with(original_sender);
         item.label(id!(content)).set_text(
             &text_preview_of_redacted_message(event_tl_item, original_sender)
                 .format_with(original_sender),
@@ -3494,7 +3491,6 @@ impl SmallStateEventContent for MemberProfileChange {
         _item_drawn_status: ItemDrawnStatus,
         mut new_drawn_status: ItemDrawnStatus,
     ) -> (WidgetRef, ItemDrawnStatus) {
-        let mpc = &text_preview_of_member_profile_change(self, username).format_with(username);
         item.label(id!(content))
             .set_text(&text_preview_of_member_profile_change(self, username).format_with(username));
         new_drawn_status.content_drawn = true;
@@ -3581,7 +3577,6 @@ fn populate_small_state_event(
     });
 
     item.avatar_row(id!(avatar_row)).set_avatar_row(cx, room_id, event_tl_item.event_id(), event_tl_item.read_receipts());
-    //(item, new_drawn_status)
     // Proceed to draw the actual event content.
     event_content.populate_item_content(
         cx,
diff --git a/src/utils.rs b/src/utils.rs
index a893d574..e782b2e0 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -278,7 +278,36 @@ pub fn ends_with_href(text: &str) -> bool {
     substr.trim_end().ends_with("href")
 }
 
+/// Converts a list of names into a human-readable string with a chunk of 2 names in a line
+///
+/// # Examples
+/// ```
+/// assert_eq!(human_readable_list(vec!["Alice"]), "Alice");
+/// assert_eq!(human_readable_list(vec!["Alice", "Bob"]), "Alice and Bob");
+/// assert_eq!(human_readable_list(vec!["Alice", "Bob", "Charlie"]), "Alice, Bob\n and Charlie");
+/// ```
+pub fn human_readable_list(names: Vec<String>) -> String {
+    match names.len() {
+        0 => String::new(),
+        1 => names[0].clone(),
+        2 => format!("{} and {}", names[0], names[1]),
+        _ => {
+            let mut result = String::new();
+            let chunked_names = names.chunks(2);
+
+            for chunk in chunked_names {
+                if result.is_empty() {
+                    result.push_str(&chunk.join(", "));
+                } else {
+                    result.push_str(&format!("\n{}", chunk.join(", ")));
+                }
+            }
 
+            let last = result.split("\n").last().unwrap();
+            format!("{}, and {}", result.trim_end(), last)
+        }
+    }
+}
 
 #[cfg(test)]
 mod tests_linkify {

From 6fe7749685d7e72deb45e9eac02da254480a07cd Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 13 Dec 2024 17:18:25 +0800
Subject: [PATCH 30/30] Adding avatarRef and its drawn status

---
 src/home/room_read_receipt.rs | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/home/room_read_receipt.rs b/src/home/room_read_receipt.rs
index 373490c2..5d3e4117 100644
--- a/src/home/room_read_receipt.rs
+++ b/src/home/room_read_receipt.rs
@@ -49,8 +49,10 @@ pub struct AvatarRow {
     layout: Layout,
     #[live]
     plus: Option<LivePtr>,
+    // A vector containing its avatarRef and its drawn status
+    // Storing the drawn status helps prevent unnessary user profile request in the draw_walk function
     #[rust]
-    buttons: Vec<AvatarRef>,
+    buttons: Vec<(AvatarRef, bool)>,
     #[rust]
     label: Option<LabelRef>,
     #[rust]
@@ -94,8 +96,8 @@ impl Widget for AvatarRow {
 
     fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
         cx.begin_turtle(walk, Layout::default());
-        for v in self.buttons.iter_mut() {
-            let _ = v.draw(cx, scope);
+        for (avatar_ref, _) in self.buttons.iter_mut() {
+            let _ = avatar_ref.draw(cx, scope);
         }
         if self.total_num_seen > MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW {
             if let Some(label) = &mut self.label {
@@ -125,16 +127,19 @@ impl AvatarRow {
         if receipts_map.len() != self.buttons.len() {
             self.buttons.clear();
             for _ in 0..cmp::min(MAX_VISIBLE_AVATARS_IN_READ_RECEIPT_ROW, receipts_map.len()) {
-                self.buttons.push(WidgetRef::new_from_ptr(cx, self.button).as_avatar());
+                self.buttons.push((WidgetRef::new_from_ptr(cx, self.button).as_avatar(), false));
             }
         }
         self.total_num_seen = receipts_map.len();
         self.label = Some(WidgetRef::new_from_ptr(cx, self.plus).as_label());
         let mut usernames_arr = vec![];
-        for (avatar_ref, (user_id, _)) in self.buttons.iter().zip(receipts_map) {
+        for ((avatar_ref, drawn), (user_id, _)) in self.buttons.iter_mut().zip(receipts_map) {
             // Set avatar_profile_opt to be None so that the function may fetch the user profile from profile cache
-            let (username, _) = avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id); 
-            usernames_arr.push(username);
+            if !*drawn {
+                let (username, drawn_status) = avatar_ref.set_avatar_and_get_username(cx, room_id, user_id, None, event_id); 
+                *drawn = drawn_status;
+                usernames_arr.push(username);
+            }
         }
         self.human_readable_usernames = human_readable_list(usernames_arr);
     }