feat: show unread messages badge

src/app/chat/event_handling.nim

@@ -24,6 +24,7 @@ proc handleChatEvents(self: ChatController) =
     self.status.chat.chatMessages(channel.chat.id)
 
   self.status.events.on("chatsLoaded") do(e:Args):
+    self.view.calculateUnreadMessages()
     self.view.setActiveChannelByIndex(0)
     self.view.appReady()
 

src/app/chat/view.nim

@@ -32,6 +32,7 @@ QtObject:
       replyTo: string
       channelOpenTime*: Table[string, int64]
       connected: bool
+      unreadMessageCnt: int
 
   proc setup(self: ChatsView) = self.QAbstractListModel.setup
 
@@ -55,6 +56,7 @@ QtObject:
     result.messageList = initTable[string, ChatMessageList]()
     result.stickerPacks = newStickerPackList()
     result.recentStickers = newStickerList()
+    result.unreadMessageCnt = 0
     result.setup()
 
   proc addStickerPackToList*(self: ChatsView, stickerPack: StickerPack, isInstalled, isBought: bool) =
@@ -268,6 +270,23 @@ QtObject:
   proc clearChatHistory*(self: ChatsView, id: string) {.slot.} =
     self.status.chat.clearHistory(id)
 
+  proc unreadMessages*(self: ChatsView): int {.slot.} =
+    result = self.unreadMessageCnt
+
+  proc unreadMessagesCntChanged*(self: ChatsView) {.signal.}
+
+  QtProperty[int] unreadMessagesCount:
+    read = unreadMessages
+    notify = unreadMessagesCntChanged
+
+  proc calculateUnreadMessages*(self: ChatsView) =
+    var unreadTotal = 0
+    for chatItem in self.chats.chats:
+      unreadTotal = unreadTotal + chatItem.unviewedMessagesCount
+    if unreadTotal != self.unreadMessageCnt:
+      self.unreadMessageCnt = unreadTotal
+      self.unreadMessagesCntChanged()
+
   proc updateChats*(self: ChatsView, chats: seq[Chat]) =
     for chat in chats:
       self.upsertChannel(chat.id)
@@ -276,6 +295,7 @@ QtObject:
         self.activeChannel.setChatItem(chat)
         self.currentSuggestions.setNewData(self.status.contacts.getContacts())
         self.activeChannelChanged()
+    self.calculateUnreadMessages()
 
   proc renameGroup*(self: ChatsView, newName: string) {.slot.} =
     self.status.chat.renameGroup(self.activeChannel.id, newName)

src/status/chat.nim

@@ -255,6 +255,10 @@ proc chatMessages*(self: ChatModel, chatId: string, initialLoad:bool = true) =
 proc markAllChannelMessagesRead*(self: ChatModel, chatId: string): JsonNode =
   var response = status_chat.markAllRead(chatId)
   result = parseJson(response)
+  if self.channels.hasKey(chatId):
+    self.channels[chatId].unviewedMessagesCount = 0
+    self.events.emit("chatUpdate", ChatUpdateArgs(messages: @[], chats: @[self.channels[chatId]], contacts: @[]))
+
 
 proc confirmJoiningGroup*(self: ChatModel, chatId: string) =
     var response = status_chat.confirmJoiningGroup(chatId)

ui/app/AppMain.qml

@@ -55,6 +55,25 @@ RowLayout {
                 fillMode: Image.PreserveAspectFit
                 source: parent.checked ? "img/messageActive.svg" : "img/message.svg"
             }
+
+            Rectangle {
+                visible: !parent.checked && chatsModel.unreadMessagesCount > 0
+                anchors.top: image.top
+                anchors.left: image.right
+                anchors.leftMargin: -10
+                anchors.topMargin: -5
+                radius: 9
+                color: Style.current.blue
+                width: childrenRect.width + 10
+                height: childrenRect.height + 5
+                Text {
+                    font.pixelSize: 12
+                    color: Style.current.white
+                    anchors.centerIn: parent
+                    text: chatsModel.unreadMessagesCount
+                }
+            }
+            
         }
 
         TabButton {