From 7086884ee47462add4fd21a36d16267d1afd6479 Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Fri, 8 Nov 2024 18:18:56 -0800
Subject: [PATCH] Show JTB button with unread message badge upon new
 out-of-view messages

When new messages are received in the currently-displayed room timeline,
it can be hard for the user to tell/know when a new message has arrived.
This commit provides a subtle visual cue that shows a small dot on the
jump to bottom button, indicating that new unread messages have arrived
beneath the current viewport range.

In the future, we'll also add a label with the exact count of unread messages
below the current viewport.
---
 Cargo.lock              | 29 ------------------
 Cargo.toml              |  3 +-
 src/home/room_screen.rs | 65 ++++++++++++++++++++++++++++++++++++-----
 src/home/rooms_list.rs  |  1 +
 src/shared/styles.rs    |  2 ++
 src/sliding_sync.rs     | 14 +++++++--
 6 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index 202981ac..6ffca98f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1919,7 +1919,6 @@ dependencies = [
 [[package]]
 name = "makepad-derive-live"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1928,7 +1927,6 @@ dependencies = [
 [[package]]
 name = "makepad-derive-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1936,7 +1934,6 @@ dependencies = [
 [[package]]
 name = "makepad-derive-widget"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1945,7 +1942,6 @@ dependencies = [
 [[package]]
 name = "makepad-draw"
 version = "0.6.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "ab_glyph_rasterizer",
  "fxhash",
@@ -1962,17 +1958,14 @@ dependencies = [
 [[package]]
 name = "makepad-futures"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "makepad-futures-legacy"
 version = "0.7.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "makepad-html"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id",
 ]
@@ -1980,7 +1973,6 @@ dependencies = [
 [[package]]
 name = "makepad-http"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "makepad-jni-sys"
@@ -1991,7 +1983,6 @@ checksum = "9775cbec5fa0647500c3e5de7c850280a88335d1d2d770e5aa2332b801ba7064"
 [[package]]
 name = "makepad-live-compiler"
 version = "0.5.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-derive-live",
  "makepad-live-tokenizer",
@@ -2001,7 +1992,6 @@ dependencies = [
 [[package]]
 name = "makepad-live-id"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id-macros",
 ]
@@ -2009,7 +1999,6 @@ dependencies = [
 [[package]]
 name = "makepad-live-id-macros"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -2017,7 +2006,6 @@ dependencies = [
 [[package]]
 name = "makepad-live-tokenizer"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id",
  "makepad-math",
@@ -2027,7 +2015,6 @@ dependencies = [
 [[package]]
 name = "makepad-markdown"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id",
 ]
@@ -2035,17 +2022,14 @@ dependencies = [
 [[package]]
 name = "makepad-math"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "makepad-micro-proc-macro"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "makepad-micro-serde"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-serde-derive",
@@ -2054,7 +2038,6 @@ dependencies = [
 [[package]]
 name = "makepad-micro-serde-derive"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -2062,12 +2045,10 @@ dependencies = [
 [[package]]
 name = "makepad-objc-sys"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "makepad-platform"
 version = "0.6.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "hilog-sys",
  "makepad-android-state",
@@ -2090,7 +2071,6 @@ dependencies = [
 [[package]]
 name = "makepad-rustybuzz"
 version = "0.8.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "bitflags 1.3.2",
  "bytemuck",
@@ -2105,7 +2085,6 @@ dependencies = [
 [[package]]
 name = "makepad-shader-compiler"
 version = "0.5.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-live-compiler",
 ]
@@ -2113,7 +2092,6 @@ dependencies = [
 [[package]]
 name = "makepad-vector"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "resvg",
  "ttf-parser",
@@ -2122,7 +2100,6 @@ dependencies = [
 [[package]]
 name = "makepad-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-derive-wasm-bridge",
  "makepad-live-id",
@@ -2131,7 +2108,6 @@ dependencies = [
 [[package]]
 name = "makepad-widgets"
 version = "0.6.0"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-derive-widget",
  "makepad-draw",
@@ -2145,7 +2121,6 @@ dependencies = [
 [[package]]
 name = "makepad-zune-core"
 version = "0.2.14"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "bitflags 2.6.0",
 ]
@@ -2153,7 +2128,6 @@ dependencies = [
 [[package]]
 name = "makepad-zune-inflate"
 version = "0.2.54"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "simd-adler32",
 ]
@@ -2161,7 +2135,6 @@ dependencies = [
 [[package]]
 name = "makepad-zune-jpeg"
 version = "0.3.17"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-zune-core",
 ]
@@ -2169,7 +2142,6 @@ dependencies = [
 [[package]]
 name = "makepad-zune-png"
 version = "0.2.1"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 dependencies = [
  "makepad-zune-core",
  "makepad-zune-inflate",
@@ -4195,7 +4167,6 @@ checksum = "e421abadd41a4225275504ea4d6566923418b7f05506fbc9c0fe86ba7396114b"
 [[package]]
 name = "ttf-parser"
 version = "0.21.1"
-source = "git+https://github.com/kevinaboos/makepad?branch=widget_uid_hashable#92a3af42107b070b7a52f3cb85112ab14bb57c19"
 
 [[package]]
 name = "typenum"
diff --git a/Cargo.toml b/Cargo.toml
index 5c1cb07b..611883e3 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -16,7 +16,8 @@ version = "0.0.1-pre-alpha"
 metadata.makepad-auto-version = "zqpv-Yj-K7WNVK2I8h5Okhho46Q="
 
 [dependencies]
-makepad-widgets = { git = "https://github.com/kevinaboos/makepad", branch = "widget_uid_hashable" }
+# makepad-widgets = { git = "https://github.com/kevinaboos/makepad", branch = "widget_uid_hashable" }
+makepad-widgets = { path = "../makepad/widgets" }
 
 ## Including this crate automatically configures all `robius-*` crates to work with Makepad.
 robius-use-makepad = "0.1.1"
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 784513d1..cb5d4776 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -668,29 +668,59 @@ 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},
             visible: false,
 
             jump_to_bottom_button = <IconButton> {
+                margin: {right: 15.0, bottom: 15.0},
                 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
                 draw_bg: {
-                    instance background_color: #edededee,
+                    instance background_color: #edededce,
                     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
                     }
                 }
             }
-        }
 
+            // A badge overlay on the jump to bottom button showing unread messages
+            unread_message_badge = <View> {
+                width: 12, height: 12,
+                margin: {right: 33.0, bottom: 11.0},
+                visible: false,
+
+                show_bg: true,
+                draw_bg: {
+                    color: (COLOR_UNREAD_MESSAGE_BADGE)
+                    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.color);
+                        return sdf.result;
+                    }
+                }
+
+                // // Label that displays the unread message count
+                // unread_messages_count = <Label> {
+                //     width: Fill,
+                //     height: Fill,
+                //     text: "",
+                //     align: {x: 0.5, y: 0.5},
+                //     draw_text: {
+                //         color: #ffffff,
+                //         text_style: {font_size: 8.0},
+                //     }
+                // }
+            }
+        }
     }
 
     LocationPreview = {{LocationPreview}} {
@@ -1304,9 +1334,14 @@ impl Widget for RoomScreen {
             // Handle the jump to bottom button: update its visibility, and handle clicks.
             {
                 let jump_to_bottom_view = self.view(id!(jump_to_bottom_view));
+                let unread_message_badge = self.view(id!(unread_message_badge));
                 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 portal_list.is_at_end() {
+                        jump_to_bottom_view.set_visible(false);
+                        unread_message_badge.set_visible(false);
+                    } else {
+                        jump_to_bottom_view.set_visible(true);
+                    }
                 }
 
                 const SCROLL_TO_BOTTOM_NUM_ANIMATION_ITEMS: usize = 30;
@@ -1318,6 +1353,7 @@ impl Widget for RoomScreen {
                         SCROLL_TO_BOTTOM_SPEED,
                     );
                     jump_to_bottom_view.set_visible(false);
+                    unread_message_badge.set_visible(false);
                     self.redraw(cx);
                 }
             }
@@ -1496,6 +1532,7 @@ impl RoomScreen {
     /// Redraws this RoomScreen view if any updates were applied.
     fn process_timeline_updates(&mut self, cx: &mut Cx, portal_list: &PortalListRef) {
         let top_space = self.view(id!(top_space));
+        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 };
 
@@ -1506,7 +1543,7 @@ impl RoomScreen {
         while let Ok(update) = tl.update_receiver.try_recv() {
             num_updates += 1;
             match update {
-                TimelineUpdate::NewItems { new_items, changed_indices, clear_cache } => {
+                TimelineUpdate::NewItems { new_items, changed_indices, is_append, 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);
@@ -1545,6 +1582,8 @@ impl RoomScreen {
                         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);
+                        jump_to_bottom_view.set_visible(false);
+                        jump_to_bottom_view.view(id!(unread_message_badge)).set_visible(false);
                     }
                     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)
@@ -1572,6 +1611,13 @@ impl RoomScreen {
                         warning!("!!! Couldn't find new event with matching ID for ANY event currently visible in the portal list");
                     }
 
+                    // If new items were appended to the end of the timeline, show an unread messages badge on the jump to bottom button.
+                    if is_append && !portal_list.is_at_end() {
+                        log!("is_append was true, showing unread message badge on the jump to bottom button visible");
+                        jump_to_bottom_view.set_visible(true);
+                        jump_to_bottom_view.view(id!(unread_message_badge)).set_visible(true);
+                    }
+
                     if clear_cache {
                         tl.content_drawn_since_last_update.clear();
                         tl.profile_drawn_since_last_update.clear();
@@ -2021,6 +2067,9 @@ pub enum TimelineUpdate {
         /// 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.
         changed_indices: Range<usize>,
+        /// An optimization that informs the UI whether the changes to the timeline
+        /// resulted in new items being *appended to the end* of the timeline.
+        is_append: bool,
         /// Whether to clear the entire cache of drawn items in the timeline.
         /// This supercedes `index_of_first_change` and is used when the entire timeline is being redrawn.
         clear_cache: bool,
diff --git a/src/home/rooms_list.rs b/src/home/rooms_list.rs
index 12a88f97..567b6daa 100644
--- a/src/home/rooms_list.rs
+++ b/src/home/rooms_list.rs
@@ -52,6 +52,7 @@ live_design! {
 
         list = <PortalList> {
             keep_invisible: false
+            auto_tail: false
             width: Fill, height: Fill
             flow: Down, spacing: 0.0
 
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 32dd470f..840c4a3e 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -74,6 +74,8 @@ live_design! {
     COLOR_AVATAR_BG = #52b2ac
     COLOR_AVATAR_BG_IDLE = #d8d8d8
 
+    COLOR_UNREAD_MESSAGE_BADGE = (COLOR_AVATAR_BG)
+
     COLOR_TEXT_IDLE = #d8d8d8
     COLOR_TEXT = #1C274C
 
diff --git a/src/sliding_sync.rs b/src/sliding_sync.rs
index fd0a77f2..f3b7f889 100644
--- a/src/sliding_sync.rs
+++ b/src/sliding_sync.rs
@@ -1410,6 +1410,7 @@ async fn timeline_subscriber_handler(
     sender.send(TimelineUpdate::NewItems {
         new_items: timeline_items.clone(),
         changed_indices: usize::MIN..usize::MAX,
+        is_append: false,
         clear_cache: true,
     }).unwrap_or_else(
         |_e| panic!("Error: timeline update sender couldn't send update to room {room_id} with initial items!")
@@ -1423,7 +1424,10 @@ async fn timeline_subscriber_handler(
         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
+        // whether to clear the entire cache of drawn items
+        let mut clear_cache = false;
+        // whether the changes include items being appended to the end of the timeline
+        let mut is_append = false;
         for diff in batch {
             match diff {
                 VectorDiff::Append { values } => {
@@ -1433,6 +1437,7 @@ async fn timeline_subscriber_handler(
                     index_of_last_change = max(index_of_last_change, timeline_items.len());
                     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;
+                    is_append = true;
                     num_updates += 1;
                 }
                 VectorDiff::Clear => {
@@ -1455,6 +1460,7 @@ async fn timeline_subscriber_handler(
                     index_of_last_change = max(index_of_last_change, timeline_items.len());
                     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;
+                    is_append = true;
                     num_updates += 1;
                 }
                 VectorDiff::PopFront => {
@@ -1479,6 +1485,9 @@ async fn timeline_subscriber_handler(
                         index_of_first_change = min(index_of_first_change, index);
                         index_of_last_change = usize::MAX;
                     }
+                    if index >= timeline_items.len() {
+                        is_append = true;
+                    }
                     timeline_items.insert(index, value);
                     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;
@@ -1536,12 +1545,13 @@ async fn timeline_subscriber_handler(
             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());
+                log!("timeline_subscriber: applied {num_updates} updates for room {room_id}, timeline now has {} items. is_append? {is_append}, clear_cache? {clear_cache}. Changes: {changed_indices:?}.", timeline_items.len());
             }
             sender.send(TimelineUpdate::NewItems {
                 new_items: timeline_items.clone(),
                 changed_indices,
                 clear_cache,
+                is_append,
             }).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.