From 24be468fb95b5254994be9471c24eceb474f059a Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Thu, 10 Oct 2024 23:37:07 +0800
Subject: [PATCH 1/4] added unread_message_badge

---
 src/home/room_screen.rs | 64 +++++++++++++++++++++++++++++++++++++----
 1 file changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 37aaa5fd..73293a22 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -656,26 +656,56 @@ live_design! {
             flow: Down,
             align: {x: 1.0, y: 1.0},
             margin: {right: 15.0, bottom: 15.0},
-            visible: false,
+            visible: true,
 
             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,
+                margin: {top: -10.0, right: 15.0},
+                visible: true,
+                show_bg: true,
+                draw_bg: {
+                    instance background_color: (#5D5E5E)
+        
+                    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",
+                    margin: {top: 4.0, left: 5.0},
+                    draw_text:{
+                        color: #ffffff,
+                        wrap: Ellipsis,
+                        text_style: <USERNAME_TEXT_STYLE>{ font_size: 8. }
+                    }
+                }
+            }
+        }
     }
 
     IMG_SMILEY_FACE_BW = dep("crate://self/resources/img/smiley_face_bw.png")
@@ -948,6 +978,8 @@ impl RoomScreen{
         actions: &ActionsBuf,
     ) {
         let portal_list = self.portal_list(id!(list));
+        let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
+
         //stopped scrolling
         if portal_list.scrolled(actions) {
             return;
@@ -1001,6 +1033,13 @@ impl RoomScreen{
                     }
                     if let Some(event_id) = fully_read_receipt_event {
                         submit_async_request(MatrixRequest::FullyReadReceipt { room_id: room_id.clone(), event_id: event_id.clone()});
+                        // Clear the unread message badge number count when send fully read receipt
+                        // Temporary hack
+                        // -TODO integrate and calculate the leftover message after PR 172 is merged.
+                        let unread_message_badge = jump_to_bottom_view.view(id!(unread_message_badge));
+                        unread_message_badge.label(id!(label)).set_text("");
+                        unread_message_badge.set_visible(false);
+
                     }
                 }
                 *index = first_index;
@@ -1417,6 +1456,7 @@ impl RoomScreen {
     /// 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 jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
         let curr_first_id = portal_list.first_id();
         let Some(tl) = self.tl_state.as_mut() else { return };
 
@@ -1501,6 +1541,20 @@ impl RoomScreen {
                         // 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;
+                    // Set number of unread messages to unread_notification_badge
+                    if let Some(room_id) = &self.room_id {
+                        if let Some(num_unread) = get_client()
+                        .and_then(|c| c.get_room(room_id)).map(|room| room.num_unread_messages()) {
+                            let unread_message_badge = jump_to_bottom_view.view(id!(unread_message_badge));
+                            if num_unread > 0 {
+                                unread_message_badge.label(id!(label)).set_text(&format!("{}",num_unread));
+                                unread_message_badge.set_visible(true);
+                            } else {
+                                unread_message_badge.set_visible(false);
+                            }
+                        }
+                    }
+                    
                 }
                 TimelineUpdate::TimelineStartReached => {
                     log!("Timeline::handle_event(): timeline start reached for room {}", tl.room_id);

From c1d1ab6046f1b031f7067a5a31998ca09645f419 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 11 Oct 2024 09:53:59 +0800
Subject: [PATCH 2/4] remove unneccesary changes

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

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 73293a22..fedc38ea 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -656,18 +656,19 @@ live_design! {
             flow: Down,
             align: {x: 1.0, y: 1.0},
             margin: {right: 15.0, bottom: 15.0},
-            visible: true,
+            visible: false,
 
             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} },
+                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
+                // draw a circular background for the button
                 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
                     }

From 35c597739c2907bc099a4614c810dc252589bdd4 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 11 Oct 2024 17:16:49 +0800
Subject: [PATCH 3/4] add jump to top

---
 resources/icon_jump_to_top.svg | 38 ++++++++++++++++++++++++++++++++++
 src/home/room_screen.rs        |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 resources/icon_jump_to_top.svg

diff --git a/resources/icon_jump_to_top.svg b/resources/icon_jump_to_top.svg
new file mode 100644
index 00000000..c14e3a1a
--- /dev/null
+++ b/resources/icon_jump_to_top.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="icon_jump_to_bottom.svg"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="3.1679688"
+     inkscape:cx="127.84217"
+     inkscape:cy="128"
+     inkscape:window-width="1920"
+     inkscape:window-height="1046"
+     inkscape:window-x="-11"
+     inkscape:window-y="-11"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="m 129.4,105.7 c 1.7,0 3.4,0.7 4.7,2.1 l 72,72 c 2.8,2.8 2.8,7.3 0,10.1 -2.8,2.8 -7.3,2.8 -10.1,0 l -67.3,-67.3 -67.3,67.3 c -2.8,2.8 -7.3,2.8 -10.1,0 -2.8,-2.8 -2.8,-7.3 0,-10.1 l 72,-72 c 1.3,-1.4 3,-2.1 4.7,-2.1 z"
+     fill="#000000"
+     id="path1" />
+</svg>
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index fedc38ea..21dde177 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -61,6 +61,7 @@ live_design! {
     ICO_ADD = dep("crate://self/resources/icon_add.svg")
     ICO_CLOSE = dep("crate://self/resources/icons/close.svg")
     ICO_JUMP_TO_BOTTOM = dep("crate://self/resources/icon_jump_to_bottom.svg")
+    ICO_JUMP_TO_TOP = dep("crate://self/resources/icon_jump_to_top.svg")
 
     TEXT_SUB = {
         font_size: (10),

From bc2aa8c0f61f76286ae1adf0d17c86ff663368a5 Mon Sep 17 00:00:00 2001
From: alanpoon <brightshadowx@gmail.com>
Date: Fri, 11 Oct 2024 23:24:17 +0800
Subject: [PATCH 4/4] added unread_notification_badge

---
 src/home/room_screen.rs | 78 +++++++++++++++++++++++++++++++++--------
 1 file changed, 64 insertions(+), 14 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 21dde177..2b96276c 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -48,6 +48,7 @@ live_design! {
     import crate::shared::avatar::Avatar;
     import crate::shared::text_or_image::TextOrImage;
     import crate::shared::html_or_plaintext::*;
+    import crate::shared::icon_button::*;
     import crate::profile::user_profile::UserProfileSlidingPane;
     import crate::shared::typing_animation::TypingAnimation;
 
@@ -654,15 +655,16 @@ live_design! {
         jump_to_bottom_view = <View> {
             width: Fill,
             height: Fill,
-            flow: Down,
+            flow: Overlay,
             align: {x: 1.0, y: 1.0},
-            margin: {right: 15.0, bottom: 15.0},
+            margin: {right: 15.0, bottom: 0},
             visible: false,
-
-            jump_to_bottom_button = <IconButton> {
+            jump_button = <RobrixIconButton> {
                 width: 50, height: 50,
                 draw_icon: {svg_file: (ICO_JUMP_TO_BOTTOM)},
-                icon_walk: {width: 20, height: 20, margin: {top: 10, right: 4.5} }
+                padding: 15,
+                margin: {bottom : 20}
+                icon_walk: {width: 20, height: 10, margin: {top: 0, right: 100} }
                 // draw a circular background for the button
                 draw_bg: {
                     instance background_color: #edededee,
@@ -674,13 +676,53 @@ live_design! {
                         return sdf.result
                     }
                 }
+                draw_icon: {
+                    instance color: #000
+                    instance color_hover: #000
+                    // 180.0: point upwards
+                    uniform rotation_angle: 180.0,
+                }
+                animator: {
+                    jump_button = {
+                        default: down
+                        down = {
+                            redraw: true,
+                            from: { all: Forward {duration: 2.0} }
+                            ease: ExpDecay {d1: 0.80, d2: 0.97}
+                            apply: { draw_icon: {rotation_angle: 0.0} }
+                        }
+                        up = {
+                            redraw: true,
+                            from: { all: Forward {duration: 0.5} }
+                            ease: ExpDecay {d1: 0.80, d2: 0.97}
+                            apply: { draw_icon: {rotation_angle: 180.0} }
+                        }
+                    }
+                }
+            }
+            // Badge overlay for unread messages
+            unread_notification_badge = <View> {
+                width: 12, height: 12,
+                abs_pos: vec2(-20.0, 85.0)
+                visible: false,
+                show_bg: true,
+                draw_bg: {
+                    instance background_color: (#58DC6C)
+        
+                    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;
+                    }
+                }
             }
-
             // Badge overlay for unread messages
             unread_message_badge = <View> {
                 width: 20, height: 20,
-                margin: {top: -10.0, right: 15.0},
-                visible: true,
+                abs_pos: vec2(-15.0, 135.0)
+                visible: false,
                 show_bg: true,
                 draw_bg: {
                     instance background_color: (#5D5E5E)
@@ -1279,14 +1321,16 @@ impl Widget for RoomScreen {
 
                 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(
+  
+                if let Some(ref mut but) = self.button(id!(jump_button)).borrow_mut() {
+                    if but.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);
+                        );
+                        jump_to_bottom_view.set_visible(false);
+                    }
                 }
             }
 
@@ -1545,12 +1589,18 @@ impl RoomScreen {
                     tl.items = new_items;
                     // Set number of unread messages to unread_notification_badge
                     if let Some(room_id) = &self.room_id {
-                        if let Some(num_unread) = get_client()
+                        if let Some(num_unread)= get_client()
                         .and_then(|c| c.get_room(room_id)).map(|room| room.num_unread_messages()) {
+                            println!("num_unread {:?}", num_unread);
+                            let unread_notifications_badge = jump_to_bottom_view.view(id!(unread_notifications_badge));
                             let unread_message_badge = jump_to_bottom_view.view(id!(unread_message_badge));
                             if num_unread > 0 {
                                 unread_message_badge.label(id!(label)).set_text(&format!("{}",num_unread));
                                 unread_message_badge.set_visible(true);
+                                unread_notifications_badge.set_visible(false);
+                                if let Some(ref mut but) = jump_to_bottom_view.button(id!(jump_button)).borrow_mut() {
+                                    but.animator_play(cx, id!(jump_button.down));
+                                }
                             } else {
                                 unread_message_badge.set_visible(false);
                             }