fix: ensure Chat navbar tab button shows correct message count

The chat navbar tab button renders an indicator when there's unread messages
in any of the chats. It also renders a message count, which prior to this commit
equals to the number of total unread messages.

This however is not the desired behaviour. Instead, the count should be the total
number of unread one on one messages (DMs), plus the total number of mentions in any
chats the user is participating in.

This commiit ensures the correct message count is rendered. It also adds an "unread messages"
indicator to community buttons.

Closes #2869

src/app/chat/views/messages.nim

@@ -74,6 +74,7 @@ QtObject:
     pubKey*: string
     loadingMessages*: bool
     unreadMessageCnt: int
+    unreadDirectMessagesAndMentionsCount: int
     channelOpenTime*: Table[string, int64]
 
   proc setup(self: MessageView) = self.QAbstractListModel.setup
@@ -99,6 +100,7 @@ QtObject:
     result.loadingMessages = false
     result.unreadMessageCnt = 0
     result.observedMessageItem = newMessageItem(status)
+    result.unreadDirectMessagesAndMentionsCount = 0
     result.setup
 
   # proc getMessageListIndexById(self: MessageView, id: string): int
@@ -386,13 +388,30 @@ QtObject:
     read = unreadMessages
     notify = unreadMessagesCntChanged
 
+  proc getUnreadDirectMessagesAndMentionsCount*(self: MessageView): int {.slot.} =
+    result = self.unreadDirectMessagesAndMentionsCount
+
+  proc unreadDirectMessagesAndMentionsCountChanged*(self: MessageView) {.signal.}
+
+  QtProperty[int] unreadDirectMessagesAndMentionsCount:
+    read = getUnreadDirectMessagesAndMentionsCount
+    notify = unreadDirectMessagesAndMentionsCountChanged
+
   proc calculateUnreadMessages*(self: MessageView) =
     var unreadTotal = 0
+    var currentUnreadDirectMessagesAndMentionsCount = 0
     for chatItem in self.channelView.chats.chats:
-      unreadTotal = unreadTotal + chatItem.unviewedMessagesCount
+      if not chatItem.muted:
+        unreadTotal = unreadTotal + chatItem.unviewedMessagesCount
+        currentUnreadDirectMessagesAndMentionsCount = currentUnreadDirectMessagesAndMentionsCount + chatItem.mentionsCount
+        if chatItem.chatType == ChatType.OneToOne:
+          currentUnreadDirectMessagesAndMentionsCount = currentUnreadDirectMessagesAndMentionsCount + chatItem.unviewedMessagesCount
     if unreadTotal != self.unreadMessageCnt:
       self.unreadMessageCnt = unreadTotal
       self.unreadMessagesCntChanged()
+    if self.unreadDirectMessagesAndMentionsCount != currentUnreadDirectMessagesAndMentionsCount:
+      self.unreadDirectMessagesAndMentionsCount = currentUnreadDirectMessagesAndMentionsCount
+      self.unreadDirectMessagesAndMentionsCountChanged()
 
   proc deleteMessage*(self: MessageView, channelId: string, messageId: string) =
     self.messageList[channelId].deleteMessage(messageId)

ui/app/AppMain.qml

@@ -114,8 +114,12 @@ StatusAppLayout {
             icon.name: "chat"
             checked: !chatsModel.communities.activeCommunity.active  && appView.currentIndex === Utils.getAppSectionIndex(Constants.chat)
             tooltip.text: qsTr("Chat")
-            badge.value: chatsModel.messageView.unreadMessagesCount + profileModel.contacts.contactRequests.count
+            badge.value: chatsModel.messageView.unreadDirectMessagesAndMentionsCount + profileModel.contacts.contactRequests.count
-            badge.visible: badge.value > 0
+            badge.visible: badge.value > 0 || (chatsModel.messageView.unreadMessagesCount > 0 && !checked)
+            badge.anchors.rightMargin: badge.value > 0 ? 0 : 4
+            badge.anchors.topMargin: badge.value > 0 ? 4 : 5
+            badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
+            badge.border.width: 2
             onClicked: {
                 if (chatsModel.communities.activeCommunity.active) {
                     chatLayoutContainer.chatColumn.input.hideExtendedArea();
@@ -140,10 +144,11 @@ StatusAppLayout {
             icon.color: model.communityColor
             icon.source: model.thumbnailImage
 
-            badge.visible: model.unviewedMessagesCount > 0
+            badge.visible: !checked && model.unviewedMessagesCount > 0
-            badge.value: model.unviewedMessagesCount
             badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
             badge.border.width: 2
+            badge.anchors.rightMargin: 4
+            badge.anchors.topMargin: 5
 
             popupMenu: StatusPopupMenu {
                 id: communityContextMenu
@@ -220,7 +225,7 @@ StatusAppLayout {
                 checked: appView.currentIndex == Utils.getAppSectionIndex(Constants.profile)
                 onClicked: appMain.changeAppSection(Constants.profile)
 
-                badge.visible: !profileModel.mnemonic.isBackedUp && appView.children[appView.currentIndex] !== profileLayoutContainer
+                badge.visible: !profileModel.mnemonic.isBackedUp && !checked
                 badge.anchors.rightMargin: 4
                 badge.anchors.topMargin: 5
                 badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor