From d76ffeb3acf91477e186b3c067daf023f8517f7b Mon Sep 17 00:00:00 2001
From: Muhammad Aqdas <s.muhammadaqdasrizvi@gmail.com>
Date: Sun, 8 Sep 2024 21:05:11 +0500
Subject: [PATCH 1/6] Attempt to account for unread messages

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

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 46538a94..142f140e 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -620,8 +620,31 @@ live_design! {
                     }
                 }
             }
+        },
+
+            // Badge overlay for unread message count
+            unread_message_badge = <View> {
+            width: 20, height: 20,
+            align: {x: 1.0, y: -1.0}, // Position at the top-right of the button
+            margin: {top: -5.0, right: -5.0}, // Slightly overlap the button
+            draw_bg: {
+                instance background_color: #FF0000FF, // Red badge background
+                fn pixel(self) -> vec4 {
+                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                    let c = self.rect_size * 0.5;
+                    sdf.circle(c.x, c.x, c.x);
+                    sdf.fill_keep(self.background_color);
+                    return sdf.result;
+                }
+            },
+
+            // Text inside the badge for unread message count
+            label = <Label> {
+                text: "0", // Default text, will be updated dynamically
+                draw_text: {color: #FFFFFF}, // White text color
+                align: {x: 0.5, y: 0.5}, // Center the text within the badge
+            }
         }
-        
     }
 
     IMG_SMILEY_FACE_BW = dep("crate://self/resources/img/smiley_face_bw.png")
@@ -853,6 +876,8 @@ struct RoomScreen {
     room_name: String,
     #[rust(None)]
     replying_to: Option<RepliedToInfo>,
+    #[rust]
+    unread_message_count: usize,
 }
 
 impl Widget for RoomScreen {
@@ -1004,6 +1029,28 @@ impl Widget for RoomScreen {
                         }
                     }
                 }
+
+                if let Some(timeline_update) = action.downcast_ref::<TimelineUpdate>() {
+                    match timeline_update {
+                        TimelineUpdate::NewItems {items, ..} => {
+                            let portal_list = self.portal_list(id!(timeline.list));
+                            if !portal_list.is_at_end() {
+                                self.unread_message_count += items.len();
+                                self.view(id!(jump_to_bottom_view)).set_visible(true);
+                                let label_text  = if self.unread_message_count > 0 {
+                                    format!("{} new messagers", self.unread_message_count)
+                                } else {
+                                    "".to_string()
+                                };
+                                self.label(id!(unread_message_badge.label)).set_text_and_redraw(cx, &label_text);
+                            } else {
+                                self.unread_message_count = 0;
+                                self.view(id!(jump_to_bottom_view)).set_visible(false);
+                            }
+                        },
+                        _ => {},
+                    }
+                }
             }
 
             // Handle the cancel reply button being clicked.
@@ -1056,6 +1103,7 @@ impl Widget for RoomScreen {
                         SCROLL_TO_BOTTOM_SPEED,
                     );
                     jump_to_bottom_view.set_visible(false);
+                    self.unread_message_count = 0;
                     self.redraw(cx);
                 }
             }
@@ -1114,6 +1162,7 @@ pub enum TimelineAction {
 
 /// 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.
+#[derive(Debug)]
 pub enum TimelineUpdate {
     /// The content of a room's timeline was updated in the background.
     NewItems {

From a455cbd9970e6e7c5db8e618eacda8ac1784b7b0 Mon Sep 17 00:00:00 2001
From: Muhammad Aqdas <s.muhammadaqdasrizvi@gmail.com>
Date: Sun, 15 Sep 2024 22:00:21 +0500
Subject: [PATCH 2/6] Typo fix

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 142f140e..1b4925de 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1038,7 +1038,7 @@ impl Widget for RoomScreen {
                                 self.unread_message_count += items.len();
                                 self.view(id!(jump_to_bottom_view)).set_visible(true);
                                 let label_text  = if self.unread_message_count > 0 {
-                                    format!("{} new messagers", self.unread_message_count)
+                                    format!("{} new messages", self.unread_message_count)
                                 } else {
                                     "".to_string()
                                 };

From 98a85276f93af1598cf3f1fc79a5fef030e39562 Mon Sep 17 00:00:00 2001
From: Muhammad Aqdas <s.muhammadaqdasrizvi@gmail.com>
Date: Sun, 15 Sep 2024 22:54:19 +0500
Subject: [PATCH 3/6] Fix logic

---
 src/home/room_screen.rs | 54 ++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 30 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 1b4925de..72705734 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1,7 +1,7 @@
 //! 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::{BorrowMut, Cow}, collections::BTreeMap, ops::{DerefMut, Range}, sync::{Arc, Mutex}};
 
 use imbl::Vector;
 use makepad_widgets::*;
@@ -622,7 +622,7 @@ live_design! {
             }
         },
 
-            // Badge overlay for unread message count
+            // Badge overlay for unread messages
             unread_message_badge = <View> {
             width: 20, height: 20,
             align: {x: 1.0, y: -1.0}, // Position at the top-right of the button
@@ -637,13 +637,6 @@ live_design! {
                     return sdf.result;
                 }
             },
-
-            // Text inside the badge for unread message count
-            label = <Label> {
-                text: "0", // Default text, will be updated dynamically
-                draw_text: {color: #FFFFFF}, // White text color
-                align: {x: 0.5, y: 0.5}, // Center the text within the badge
-            }
         }
     }
 
@@ -876,8 +869,6 @@ struct RoomScreen {
     room_name: String,
     #[rust(None)]
     replying_to: Option<RepliedToInfo>,
-    #[rust]
-    unread_message_count: usize,
 }
 
 impl Widget for RoomScreen {
@@ -1031,26 +1022,26 @@ impl Widget for RoomScreen {
                 }
 
                 if let Some(timeline_update) = action.downcast_ref::<TimelineUpdate>() {
-                    match timeline_update {
-                        TimelineUpdate::NewItems {items, ..} => {
-                            let portal_list = self.portal_list(id!(timeline.list));
-                            if !portal_list.is_at_end() {
-                                self.unread_message_count += items.len();
-                                self.view(id!(jump_to_bottom_view)).set_visible(true);
-                                let label_text  = if self.unread_message_count > 0 {
-                                    format!("{} new messages", self.unread_message_count)
-                                } else {
-                                    "".to_string()
-                                };
-                                self.label(id!(unread_message_badge.label)).set_text_and_redraw(cx, &label_text);
-                            } else {
-                                self.unread_message_count = 0;
-                                self.view(id!(jump_to_bottom_view)).set_visible(false);
+                    if let Some(mut timeline) = self.timeline(id!(timeline)).borrow_mut() {
+                        if let Some(mut tl_state) = timeline.tl_state.borrow_mut() {
+                            match timeline_update {
+                                TimelineUpdate::NewItems { items, ..} => {
+                                    let portal_list = self.portal_list(id!(timeline.list));
+                                    if !portal_list.is_at_end() {
+                                        tl_state.unread_messages = true;
+                                        self.view(id!(jump_to_bottom_button)).set_visible(true);
+                                        self.view(id!(unread_message_badge)).set_visible(true);
+                                    } else {
+                                        tl_state.unread_messages = false;
+                                        self.view(id!(jump_to_bottom_button)).set_visible(false);
+                                        self.view(id!(unread_message_badge)).set_visible(false);
+                                    }
+                                },
+                                _ => {},
                             }
-                        },
-                        _ => {},
+                        }
                     }
-                }
+                }                        
             }
 
             // Handle the cancel reply button being clicked.
@@ -1103,7 +1094,6 @@ impl Widget for RoomScreen {
                         SCROLL_TO_BOTTOM_SPEED,
                     );
                     jump_to_bottom_view.set_visible(false);
-                    self.unread_message_count = 0;
                     self.redraw(cx);
                 }
             }
@@ -1275,6 +1265,9 @@ struct TimelineUiState {
     /// The states relevant to the UI display of this timeline that are saved upon
     /// a `Hide` action and restored upon a `Show` action.
     saved_state: SavedState,
+
+    /// The number of unread messages in this room's timeline.
+    unread_messages: bool,
 }
 
 /// The item index, scroll position, and optional unique IDs of the first `N` events
@@ -1348,6 +1341,7 @@ impl Timeline {
                 first_three_events: Default::default(),
                 media_cache: MediaCache::new(MediaFormatConst::File, Some(update_sender)),
                 saved_state: SavedState::default(),
+                unread_messages: false,
             };
             (new_tl_state, true)
         };

From ff36eccbb3146e724839f03858016ba96f83bb3e Mon Sep 17 00:00:00 2001
From: Muhammad Aqdas <s.muhammadaqdasrizvi@gmail.com>
Date: Mon, 16 Sep 2024 00:42:18 +0500
Subject: [PATCH 4/6] jtb press updates unread message bool

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

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 72705734..4ab4fcae 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1094,6 +1094,12 @@ impl Widget for RoomScreen {
                         SCROLL_TO_BOTTOM_SPEED,
                     );
                     jump_to_bottom_view.set_visible(false);
+                    if let Some(mut timeline) = self.timeline(id!(timeline)).borrow_mut() {
+                        if let Some(mut tl_state) = timeline.tl_state.borrow_mut() {
+                            tl_state.unread_messages = false;
+                        }
+                    }
+                    self.view(id!(unread_message_badge)).set_visible(false);
                     self.redraw(cx);
                 }
             }

From bd66e57d78f07ea84d1380164643729ac2791eb9 Mon Sep 17 00:00:00 2001
From: Muhammad Aqdas <s.muhammadaqdasrizvi@gmail.com>
Date: Mon, 16 Sep 2024 00:49:00 +0500
Subject: [PATCH 5/6] Manual scroll to end updates unread messages bool

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

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 4ab4fcae..3be1ef43 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1083,6 +1083,12 @@ impl Widget for RoomScreen {
                 if portal_list.scrolled(&actions) {
                     // TODO: is_at_end() isn't perfect, see: <https://github.com/makepad/makepad/issues/517>
                     jump_to_bottom_view.set_visible(!portal_list.is_at_end());
+                    if let Some(mut timeline) = self.timeline(id!(timeline)).borrow_mut() {
+                        if let Some(mut tl_state) = timeline.tl_state.borrow_mut() {
+                            tl_state.unread_messages = !portal_list.is_at_end();
+                        }
+                    }
+                    self.view(id!(unread_message_badge)).set_visible(!portal_list.is_at_end());
                 }
 
                 const SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS: usize = 30;

From b8824c6cebe80c3c8e37f9de9c9c0638edcb02da Mon Sep 17 00:00:00 2001
From: Muhammad Aqdas <s.muhammadaqdasrizvi@gmail.com>
Date: Tue, 8 Oct 2024 00:48:17 +0500
Subject: [PATCH 6/6] Attempt to add unread message badge and jtb logic through
 Matrix SDK

---
 src/home/room_screen.rs | 210 +++++++++++++++++++++++++---------------
 1 file changed, 134 insertions(+), 76 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 9d4735b3..ed90c992 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -17,6 +17,9 @@ use matrix_sdk::{
         matrix_uri::MatrixId, uint, EventId, MatrixToUri, MatrixUri, MilliSecondsSinceUnixEpoch, OwnedEventId, OwnedRoomId, RoomId, UserId
     },
     OwnedServerName,
+    sync::UnreadNotificationsCount,
+    Room,
+    Client,
 };
 use matrix_sdk_ui::timeline::{
     self, EventTimelineItem, MemberProfileChange, Profile, ReactionsByKeyBySender, RepliedToInfo,
@@ -38,6 +41,8 @@ use crate::{
 };
 use rangemap::RangeSet;
 
+use crate::persistent_state::restore_session;
+
 live_design! {
     import makepad_draw::shader::std::*;
     import makepad_widgets::base::*;
@@ -662,36 +667,49 @@ live_design! {
             jump_to_bottom_button = <IconButton> {
                 width: 50, height: 50,
                 draw_icon: {svg_file: (ICO_JUMP_TO_BOTTOM)},
-                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
-                // draw a circular background for the button
+                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} },
                 draw_bg: {
                     instance background_color: #edededee,
                     fn pixel(self) -> vec4 {
                         let sdf = Sdf2d::viewport(self.pos * self.rect_size);
                         let c = self.rect_size * 0.5;
-                        sdf.circle(c.x, c.x, c.x)
+                        sdf.circle(c.x, c.x, c.x);
                         sdf.fill_keep(self.background_color);
                         return sdf.result
                     }
                 }
             }
-        },
 
             // Badge overlay for unread messages
             unread_message_badge = <View> {
-            width: 20, height: 20,
-            align: {x: 1.0, y: -1.0}, // Position at the top-right of the button
-            margin: {top: -5.0, right: -5.0}, // Slightly overlap the button
-            draw_bg: {
-                instance background_color: #FF0000FF, // Red badge background
-                fn pixel(self) -> vec4 {
-                    let sdf = Sdf2d::viewport(self.pos * self.rect_size);
-                    let c = self.rect_size * 0.5;
-                    sdf.circle(c.x, c.x, c.x);
-                    sdf.fill_keep(self.background_color);
-                    return sdf.result;
+                width: 20, height: 20,
+                align: {x: 1.0, y: -1.0},
+                margin: {top: -5.0, right: -5.0},
+                visible: false,
+
+                draw_bg: {
+                    instance background_color: #FF0000FF,
+                    fn pixel(self) -> vec4 {
+                        let sdf = Sdf2d::viewport(self.pos * self.rect_size);
+                        let c = self.rect_size * 0.5;
+                        sdf.circle(c.x, c.x, c.x);
+                        sdf.fill_keep(self.background_color);
+                        return sdf.result;
+                    }
                 }
-            },
+
+                // Text to display the unread message count
+                label = <Label> {
+                    width: Fill,
+                    height: Fill,
+                    text: "0",
+                    align: {x: 0.5, y: 0.5},
+                    draw_text: {
+                        instance color: #ffffff,
+                        text_style: {font_size: 12.0},
+                    }
+                }
+            }
         }
     }
 
@@ -956,9 +974,11 @@ struct RoomScreen {
     #[rust] tl_state: Option<TimelineUiState>,
     /// 5 secs timer when scroll ends
     #[rust] fully_read_timer: Timer,
+    /// The Matrix SDK client (optional until initialized).
+    #[rust] client: Option<Client>,
 }
 
-impl RoomScreen{
+impl RoomScreen {
     fn send_user_read_receipts_based_on_scroll_pos(
         &mut self,
         cx: &mut Cx,
@@ -1026,6 +1046,92 @@ impl RoomScreen{
             tl_state.prev_first_index = Some(first_index);
         }
     }
+
+    async fn ensure_client_initialized(&mut self) -> anyhow::Result<()> {
+        if self.client.is_none() {
+            match restore_session(None).await {
+                Ok((client, _sync_token)) => {
+                    self.client = Some(client);
+                    log!("Client restored successfully");
+                    Ok(())
+                }
+                Err(e) => {
+                    log!("Failed to restore client session: {:?}", e);
+                    Err(e)
+                }
+            }
+        } else {
+            Ok(())
+        }
+    }
+
+    async fn update_unread_notifications(&mut self) {
+        // Ensure the client is initialized
+        if let Err(e) = self.ensure_client_initialized().await {
+            log!("Error initializing client: {:?}", e);
+            return;
+        }
+
+        if let Some(client) = &self.client {
+            if let Some(room_id) = &self.room_id {
+                if let Some(room) = client.get_room(room_id) {
+                    if let Ok(unread_notifications) = room.unread_notifications().await {
+                        let unread_count = unread_notifications.notification_count;
+
+                        if unread_count > 0 {
+                            self.view(id!(unread_message_badge))
+                                .set_text(&format!("{}", unread_count))
+                                .set_visible(true);
+                        
+                            let portal_list = self.portal_list(id!(timeline.list));
+                            if !portal_list.is_at_end() {
+                                self.view(id!(jump_to_bottom_button)).set_visible(true);
+                            }
+                        } else {
+                            self.view(id!(unread_message_badge)).set_visible(false);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    fn handle_jump_to_bottom_visibility(&mut self, cx: &mut Cx, actions: &ActionsBuf) {
+        let portal_list = self.portal_list(id!(timeline.list));
+        let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
+
+        if portal_list.scrolled(actions) {
+            // TODO: is_at_end() isn't perfect, see: <https://github.com/makepad/makepad/issues/517>
+            if portal_list.is_at_end() {
+                jump_to_bottom_view.set_visible(false);
+                self.view(id!(unread_message_badge)).set_visible(false);
+            } else {
+                jump_to_bottom_view.set_visible(true);
+            }
+        }
+
+        const SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS: usize = 30;
+        const SCROLL_TO_BOTTOM_SPEED: f64 = 90.0;
+        if self.button(id!(jump_to_bottom_button)).clicked(actions) {
+            portal_list.smooth_scroll_to_end(
+                cx,
+                SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS,
+                SCROLL_TO_BOTTOM_SPEED,
+            );
+            jump_to_bottom_view.set_visible(false);
+            self.redraw(cx);
+            self.view(id!(unread_message_badge)).set_visible(false);
+        }
+    }
+
+    fn clone_for_async(&self) -> RoomScreen {
+        RoomScreen {
+            client: self.client.clone(),
+            room_id: self.room_id.clone(),
+            view: self.view.clone(),
+            ..self.clone()
+        }
+    }
 }
 
 impl Widget for RoomScreen {
@@ -1034,12 +1140,20 @@ impl Widget for RoomScreen {
         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 {
             self.process_timeline_updates(cx);
+            // Update unread notifications in the background
+            let mut room_screen = self.clone_for_async();
+            tokio::spawn(async move {
+                if let Err(e) = room_screen.update_unread_notifications().await {
+                    log!("Failed to update unread notifications: {:?}", e);
+                }
+            });
         }
 
+        self.handle_jump_to_bottom_visibility(cx, actions);
+        self.send_user_read_receipts_based_on_scroll_pos(cx, actions);
+
         if let Event::Actions(actions) = event {
             for action in actions {
                 // Handle actions on a message, e.g., clicking the reply button or clicking the reply preview.
@@ -1204,29 +1318,7 @@ impl Widget for RoomScreen {
                             error!("Failed to open URL {:?}. Error: {:?}", url, e);
                         }
                     }
-                }
-                
-                if let Some(timeline_update) = action.downcast_ref::<TimelineUpdate>() {
-                    if let Some(mut timeline) = self.timeline(id!(timeline)).borrow_mut() {
-                        if let Some(mut tl_state) = timeline.tl_state.borrow_mut() {
-                            match timeline_update {
-                                TimelineUpdate::NewItems { items, ..} => {
-                                    let portal_list = self.portal_list(id!(timeline.list));
-                                    if !portal_list.is_at_end() {
-                                        tl_state.unread_messages = true;
-                                        self.view(id!(jump_to_bottom_button)).set_visible(true);
-                                        self.view(id!(unread_message_badge)).set_visible(true);
-                                    } else {
-                                        tl_state.unread_messages = false;
-                                        self.view(id!(jump_to_bottom_button)).set_visible(false);
-                                        self.view(id!(unread_message_badge)).set_visible(false);
-                                    }
-                                },
-                                _ => {},
-                            }
-                        }
-                    }
-                }
+                }  
             }
 
             // Handle sending any read receipts for the current logged-in user.
@@ -1266,40 +1358,6 @@ impl Widget for RoomScreen {
                 }
             }
 
-            // Handle the jump to bottom button: update its visibility, and handle clicks.
-            {
-                let mut portal_list = self.portal_list(id!(timeline.list));
-                let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
-                if portal_list.scrolled(&actions) {
-                    // TODO: is_at_end() isn't perfect, see: <https://github.com/makepad/makepad/issues/517>
-                    jump_to_bottom_view.set_visible(!portal_list.is_at_end());
-                    if let Some(mut timeline) = self.timeline(id!(timeline)).borrow_mut() {
-                        if let Some(mut tl_state) = timeline.tl_state.borrow_mut() {
-                            tl_state.unread_messages = !portal_list.is_at_end();
-                        }
-                    }
-                    self.view(id!(unread_message_badge)).set_visible(!portal_list.is_at_end());
-                }
-
-                const SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS: usize = 30;
-                const SCROLL_TO_BOTTOM_SPEED: f64 = 90.0;
-                if self.button(id!(jump_to_bottom_button)).clicked(&actions) {
-                    portal_list.smooth_scroll_to_end(
-                        cx,
-                        SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS,
-                        SCROLL_TO_BOTTOM_SPEED,
-                    );
-                    jump_to_bottom_view.set_visible(false);
-                    if let Some(mut timeline) = self.timeline(id!(timeline)).borrow_mut() {
-                        if let Some(mut tl_state) = timeline.tl_state.borrow_mut() {
-                            tl_state.unread_messages = false;
-                        }
-                    }
-                    self.view(id!(unread_message_badge)).set_visible(false);
-                    self.redraw(cx);
-                }
-            }
-
             // Handle a typing action on the message input box.
             if let Some(new_text) = self.text_input(id!(message_input)).changed(actions) {
                 submit_async_request(MatrixRequest::SendTypingNotice {