Fix highlight animation

src/home/room_screen.rs

@@ -305,7 +305,7 @@ live_design! {
                 default: off
                 off = {
                     redraw: true,
-                    from: { all: Forward {duration: 2.0} }
+                    from: { all: Forward {duration: 3.0} }
                     ease: ExpDecay {d1: 0.80, d2: 0.97}
                     apply: { draw_bg: {highlight: 0.0} }
                 }
@@ -1169,6 +1169,16 @@ 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 state of the message highlight animation.
+    ///
+    /// We need to run the animation once the scrolling, triggered by the click of of a
+    /// a reply preview, ends. so we keep a small state for it.
+    /// By default, it starts in Off.
+    /// 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,
 }
 
 /// The item index, scroll position, and optional unique IDs of the first `N` events
@@ -1214,6 +1224,13 @@ struct SavedState {
     cursor: (usize, usize),
 }
 
+#[derive(Default, Debug)]
+enum MessageHighlightAnimationState {
+    Pending { item_id: usize, },
+    #[default]
+    Off,
+}
+
 impl Timeline {
     /// Invoke this when this timeline is being shown,
     /// e.g., when the user navigates to this timeline.
@@ -1242,6 +1259,7 @@ impl Timeline {
                 first_three_events: Default::default(),
                 media_cache: MediaCache::new(MediaFormatConst::File, Some(update_sender)),
                 saved_state: SavedState::default(),
+                message_highlight_animation_state: MessageHighlightAnimationState::default(),
             };
             (new_tl_state, true)
         };
@@ -1395,7 +1413,7 @@ impl Widget for Timeline {
                         }
                     }
                     MessageAction::ReplyPreviewClicked(item_id) => {
-                        let portal_list = self.portal_list(id!(list));
+                        let mut portal_list = self.portal_list(id!(list));
                         let Some(tl) = self.tl_state.as_mut() else {
                             return;
                         };
@@ -1415,15 +1433,17 @@ impl Widget for Timeline {
                                                     })
                                             });
                                         if let Some(index) = message_replied_to_tl_index {
-                                            // we substract so we leave more space for the message.
-                                            portal_list.set_first_id(index - 1);
+                                            let distance = (index as isize - portal_list.first_id() as isize).abs() as f64;
+					    let base_speed = 5.0;
+                                            // apply a scaling based on the distance
+                                            let scaled_speed = base_speed * (distance * distance);
+
+                                            portal_list.smooth_scroll_to(cx, index , scaled_speed);
 					    // start highlight animation.
-                                            let item_id = index + 1;
-                                            cx.widget_action(
-                                                widget_uid,
-                                                &scope.path,
-                                                MessageAction::MessageHighlight(item_id),
-                                            );
+                                            tl.message_highlight_animation_state = MessageHighlightAnimationState::Pending {
+                                                item_id: index + 1
+                                            };
+
                                             self.redraw(cx);
                                         }
                                     }
@@ -1440,6 +1460,22 @@ impl Widget for Timeline {
                 //         log!("hello {}", item_id);
                 //     }
                 // }
+
+                let portal_list = self.portal_list(id!(list));
+                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(
+                            widget_uid,
+                            &scope.path,
+                            MessageAction::MessageHighlight(item_id),
+                        );
+                        tl.message_highlight_animation_state = MessageHighlightAnimationState::Off;
+                    }
+                }
             }
         }
 
@@ -2584,6 +2620,7 @@ impl Widget for Message {
             && self.animator_in_state(cx, id!(highlight.on))
         {
             self.animator_play(cx, id!(highlight.off));
+            self.redraw(cx);
         }
 
         let widget_uid = self.widget_uid();
@@ -2622,7 +2659,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