Display unread message count on chat list

qml/pages/OverviewPage.qml

@@ -44,6 +44,16 @@ Page {
         }
     }
 
+    Timer {
+        id: synchronizeChangesTimer
+        interval: 60000
+        running: false
+        repeat: true
+        onTriggered: {
+            chatListModel.enableDeltaUpdates();
+        }
+    }
+
     Timer {
         id: chatListCreatedTimer
         interval: 500
@@ -51,7 +61,9 @@ Page {
         repeat: false
         onTriggered: {
             overviewPage.chatListCreated = true;
-            chatListModel.uiCreated();
+            chatListModel.enableDeltaUpdates();
+            // Sometimes delta updates are not properly displayed, enforce list redraw every minute
+            synchronizeChangesTimer.start();
         }
     }
 
@@ -232,6 +244,11 @@ Page {
                                 height: chatListContentColumn.height - Theme.paddingSmall
                                 anchors.verticalCenter: parent.verticalCenter
 
+                                Item {
+                                    id: chatListPictureItem
+                                    width: parent.width
+                                    height: parent.width
+
                                     ProfileThumbnail {
                                         id: chatListPictureThumbnail
                                         photoData: (typeof display.photo !== "undefined") ? display.photo.small : ""
@@ -239,6 +256,28 @@ Page {
                                         width: parent.width
                                         height: parent.width
                                     }
+
+                                    Rectangle {
+                                        id: chatUnreadMessagesCountBackground
+                                        color: Theme.highlightBackgroundColor
+                                        width: Theme.fontSizeLarge
+                                        height: Theme.fontSizeLarge
+                                        anchors.right: parent.right
+                                        anchors.bottom: parent.bottom
+                                        radius: parent.width / 2
+                                        visible: display.unread_count > 0
+                                    }
+
+                                    Text {
+                                        id: chatUnreadMessagesCount
+                                        font.pixelSize: Theme.fontSizeExtraSmall
+                                        font.bold: true
+                                        color: Theme.primaryColor
+                                        anchors.centerIn: chatUnreadMessagesCountBackground
+                                        visible: chatUnreadMessagesCountBackground.visible
+                                        text: display.unread_count > 99 ? "99+" : display.unread_count
+                                    }
+                                }
                             }
 
                             Column {

src/chatlistmodel.cpp

@@ -38,9 +38,9 @@ bool ChatListModel::insertRows(int row, int count, const QModelIndex &parent)
     return true;
 }
 
-void ChatListModel::uiCreated()
+void ChatListModel::enableDeltaUpdates()
 {
-    qDebug() << "[ChatListModel] Chat list on UI created, enabling delta updates...";
+    qDebug() << "[ChatListModel] Enabling delta updates and enforcing UI redraw...";
     layoutChanged();
     this->deltaUpdates = true;
 }

src/chatlistmodel.h

@@ -17,7 +17,7 @@ public:
     virtual QVariant data(const QModelIndex &index, int role) const override;
     virtual bool insertRows(int row, int count, const QModelIndex &parent = QModelIndex()) override;
 
-    Q_INVOKABLE void uiCreated();
+    Q_INVOKABLE void enableDeltaUpdates();
 
 public slots:
     void handleChatDiscovered(const QString &chatId, const QVariantMap &chatInformation);