feat(chat): implement jump to mention

closes: #9069

src/app/modules/main/chat_section/chat_content/messages/view.nim

@@ -229,3 +229,6 @@ QtObject:
   QtProperty[bool] loading:
     read = isLoading
     notify = loadingChanged
+
+  proc firstUnseenMentionMessageId(self: View): string {.slot.} =
+    return self.model.getFirstUnseenMentionMessageId()

src/app/modules/shared_models/message_model.nim

@@ -728,6 +728,12 @@ QtObject:
       if messagesSet.len == 0:
         return
 
+  proc getFirstUnseenMentionMessageId*(self: Model): string =
+    result = ""
+    for i in countdown(self.items.len - 1, 0):
+      if not self.items[i].seen and self.items[i].mentioned:
+        return self.items[i].id
+
   proc updateAlbumIfExists*(self: Model, albumId: string, messageImage: string, messageId: string): bool =
     for i in 0 ..< self.items.len:
       let item = self.items[i]

ui/app/AppLayouts/Chat/panels/ChatAnchorButtonsPanel.qml

@@ -14,6 +14,8 @@ Item {
     property int mentionsCount
     property int recentMessagesCount
 
+    property alias recentMessagesButtonVisible: recentMessagesButton.visible
+
     signal mentionsButtonClicked
     signal recentMessagesButtonClicked
 
@@ -57,6 +59,8 @@ Item {
         }
 
         AnchorButton {
+            id: recentMessagesButton
+
             text: recentMessagesCount <= 0 ? "" : d.limitNumberTo99(recentMessagesCount)
             normalColor: Style.current.buttonSecondaryColor
             type: StatusRoundButton.Type.Tertiary

ui/app/AppLayouts/Chat/stores/MessageStore.qml

@@ -210,4 +210,16 @@ QtObject {
             return
         messageModule.resendMessage(messageId)
     }
+
+    function jumpToMessage(messageId) {
+        if(!messageModule)
+            return
+        messageModule.jumpToMessage(messageId)
+    }
+
+    function firstUnseenMentionMessageId() {
+        if(!messageModule)
+            return ""
+        return messageModule.firstUnseenMentionMessageId()
+    }
 }

ui/app/AppLayouts/Chat/views/ChatMessagesView.qml

@@ -18,6 +18,7 @@ import shared.controls 1.0
 import shared.views.chat 1.0
 
 import "../controls"
+import "../panels"
 
 Item {
     id: root
@@ -188,10 +189,7 @@ Item {
 
         model: messageStore.messagesModel
 
-        onContentYChanged: {
-            scrollDownButton.visible = contentHeight - (d.scrollY + height) > 400
-            d.loadMoreMessagesIfScrollBelowThreshold()
-        }
+        onContentYChanged: d.loadMoreMessagesIfScrollBelowThreshold()
 
         onCountChanged: {
             d.markAllMessagesReadIfMostRecentMessageIsInViewport()
@@ -215,41 +213,24 @@ Item {
             visible: chatLogView.visibleArea.heightRatio < 1
         }
 
-        Button {
-            id: scrollDownButton
-
+        ChatAnchorButtonsPanel {
             anchors.bottom: parent.bottom
             anchors.right: parent.right
             anchors.rightMargin: Style.current.padding
 
-            visible: false
-            height: 32
-            width: arrowImage.width + 2 * Style.current.halfPadding
-
-            background: Rectangle {
-                color: Style.current.buttonSecondaryColor
-                border.width: 0
-                radius: 16
+            mentionsCount: d.chatDetails ? d.chatDetails.notificationCount : 0
+            recentMessagesButtonVisible: {
+                chatLogView.contentY // trigger binding on contentY change
+                return chatLogView.contentHeight - (d.scrollY + chatLogView.height) > 400
             }
 
-            onClicked: {
-                scrollDownButton.visible = false
-                chatLogView.positionViewAtBeginning()
+            onRecentMessagesButtonClicked: chatLogView.positionViewAtBeginning()
+            onMentionsButtonClicked: {
+                let id = messageStore.firstUnseenMentionMessageId()
+                if (id !== "") {
+                    messageStore.jumpToMessage(id)
+                    chatContentModule.markMessageRead(id)
                 }
-
-            StatusIcon {
-                id: arrowImage
-                anchors.centerIn: parent
-                width: 24
-                height: 24
-                icon: "arrow-down"
-                color: Style.current.pillButtonTextColor
-            }
-
-            MouseArea {
-                cursorShape: Qt.PointingHandCursor
-                anchors.fill: parent
-                acceptedButtons: Qt.NoButton
             }
         }