Add animation when switching between events.

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -140,6 +140,7 @@ ColumnLayout {
                     Avatar {
                         Layout.preferredWidth: 28
                         Layout.preferredHeight: 28
+                        Layout.alignment: Qt.AlignTop
 
                         source: replyVisible ? replyAuthor.avatarMediaId : ""
                         hint: replyVisible ? replyAuthor.displayName : "H"
@@ -156,7 +157,7 @@ ColumnLayout {
                     Control {
                         Layout.fillWidth: true
 
-                        padding: 4
+                        padding: 0
 
                         background: RippleEffect {
                             onClicked: goToEvent(replyEventId)

imports/Spectral/Panel/RoomPanel.qml

@@ -303,6 +303,28 @@ Item {
 
                     onClicked: messageListView.positionViewAtBeginning()
                 }
+
+                NumberAnimation {
+                    id: timelineAnimation
+                    target: messageListView
+                    property: "contentY"
+                    easing.type: Easing.InOutQuad
+                    duration: 500
+                }
+
+                function gotoIndex(idx) {
+                    timelineAnimation.stop()
+
+                    var pos = contentY
+                    var destPos
+
+                    positionViewAtIndex(idx, ListView.Contain)
+                    destPos = contentY
+
+                    timelineAnimation.from = pos
+                    timelineAnimation.to = destPos
+                    timelineAnimation.start()
+                }
             }
 
             Control {
@@ -350,7 +372,8 @@ Item {
         var index = messageEventModel.eventIDToIndex(eventID)
         if (index === -1) return
         //        messageListView.currentIndex = sortedMessageEventModel.mapFromSource(index)
-        messageListView.positionViewAtIndex(sortedMessageEventModel.mapFromSource(index), ListView.Contain)
+        //        messageListView.positionViewAtIndex(sortedMessageEventModel.mapFromSource(index), ListView.Contain)
+        messageListView.gotoIndex(sortedMessageEventModel.mapFromSource(index))
     }
 
     function saveReadMarker(room) {

imports/Spectral/Panel/RoomPanelInput.qml

@@ -51,6 +51,7 @@ Control {
             Avatar {
                 Layout.preferredWidth: 32
                 Layout.preferredHeight: 32
+                Layout.alignment: Qt.AlignTop
 
                 source: replyUser ? replyUser.avatarMediaId : ""
                 hint: replyUser ? replyUser.displayName : "No name"