Show notification counts on the room Avatars when collapsed.

Show notification counts on the room Avatars when collapsed.

BUG: 468520

src/CMakeLists.txt

@@ -288,6 +288,7 @@ ecm_add_qml_module(neochat URI org.kde.neochat GENERATE_PLUGIN_SOURCE
         qml/ConsentDialog.qml
         qml/AskDirectChatConfirmation.qml
         qml/HoverLinkIndicator.qml
+        qml/AvatarNotification.qml
     DEPENDENCIES
         QtCore
         QtQuick

src/qml/AvatarNotification.qml

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: 2024 James Graham <james.h.graham@protonmail.com>
+// SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
+
+import QtQuick
+import QtQuick.Controls as QQC2
+
+import org.kde.kirigami as Kirigami
+import org.kde.kirigamiaddons.labs.components as KirigamiComponents
+
+KirigamiComponents.Avatar {
+    id: root
+
+    property int notificationCount
+
+    property bool notificationHighlight
+
+    property bool showNotificationLabel
+
+    QQC2.Label {
+        id: notificationCountLabel
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.topMargin: -Kirigami.Units.smallSpacing
+        anchors.rightMargin: -Kirigami.Units.smallSpacing
+        z: 1
+        width: Math.max(notificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
+        height: Kirigami.Units.iconSizes.smallMedium
+
+        text: root.notificationCount > 0 ? root.notificationCount : ""
+        visible: root.showNotificationLabel
+        color: Kirigami.Theme.textColor
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        background: Rectangle {
+            visible: true
+            Kirigami.Theme.colorSet: Kirigami.Theme.Button
+            Kirigami.Theme.inherit: false
+            color: root.notificationHighlight ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor
+            radius: height / 2
+        }
+
+        TextMetrics {
+            id: notificationCountTextMetrics
+            text: notificationCountLabel.text
+        }
+    }
+}

src/qml/AvatarTabButton.qml

@@ -15,6 +15,12 @@ Delegates.RoundedItemDelegate {
 
     property url source
 
+    property alias notificationCount: avatarNotification.notificationCount
+
+    property alias notificationHighlight: avatarNotification.notificationHighlight
+
+    property alias showNotificationLabel: avatarNotification.showNotificationLabel
+
     signal contextMenuRequested
     signal selected
 
@@ -41,7 +47,8 @@ Delegates.RoundedItemDelegate {
         }
     }
 
-    contentItem: KirigamiComponents.Avatar {
+    contentItem: AvatarNotification {
+        id: avatarNotification
         source: root.source
         name: root.text
     }

src/qml/RoomDelegate.qml

@@ -54,13 +54,17 @@ Delegates.RoundedItemDelegate {
     contentItem: RowLayout {
         spacing: Kirigami.Units.largeSpacing
 
-        Components.Avatar {
+        AvatarNotification {
             source: root.avatar ? root.connection.makeMediaUrl("mxc://" + root.avatar) : ""
             name: root.displayName
             visible: NeoChatConfig.showAvatarInRoomDrawer
             implicitHeight: Kirigami.Units.gridUnit + (NeoChatConfig.compactRoomList ? 0 : Kirigami.Units.largeSpacing * 2)
             implicitWidth: visible ? implicitHeight : 0
 
+            notificationCount: root.contextNotificationCount
+            notificationHighlight: root.hasHighlightNotifications
+            showNotificationLabel: root.hasNotifications && root.collapsed
+
             Layout.fillHeight: true
             Layout.preferredWidth: height
         }

src/qml/SpaceDrawer.qml

@@ -86,6 +86,34 @@ QQC2.Control {
                     text: i18n("Home")
                     contentItem: Kirigami.Icon {
                         source: "user-home-symbolic"
+
+                        QQC2.Label {
+                            id: homeNotificationCountLabel
+                            anchors.top: parent.top
+                            anchors.right: parent.right
+                            anchors.topMargin: -Kirigami.Units.smallSpacing
+                            anchors.rightMargin: -Kirigami.Units.smallSpacing
+                            z: 1
+                            width: Math.max(homeNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
+                            height: Kirigami.Units.iconSizes.smallMedium
+
+                            text: root.connection.homeNotifications > 0 ? root.connection.homeNotifications : ""
+                            visible: root.connection.homeNotifications > 0 && (RoomManager.currentSpace.length > 0 || root.showDirectChats === true)
+                            color: Kirigami.Theme.textColor
+                            horizontalAlignment: Text.AlignHCenter
+                            background: Rectangle {
+                                visible: true
+                                Kirigami.Theme.colorSet: Kirigami.Theme.Button
+                                Kirigami.Theme.inherit: false
+                                color: root.connection.homeHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor
+                                radius: height / 2
+                            }
+
+                            TextMetrics {
+                                id: homeNotificationCountTextMetrics
+                                text: homeNotificationCountLabel.text
+                            }
+                        }
                     }
 
                     activeFocusOnTab: true
@@ -95,33 +123,6 @@ QQC2.Control {
                         RoomManager.currentSpace = "";
                         root.selectionChanged();
                     }
-
-                    QQC2.Label {
-                        id: homeNotificationCountLabel
-                        anchors.top: parent.top
-                        anchors.right: parent.right
-                        anchors.rightMargin: Kirigami.Units.smallSpacing / 2
-                        z: 1
-                        width: Math.max(homeNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
-                        height: Kirigami.Units.iconSizes.smallMedium
-
-                        text: root.connection.homeNotifications > 0 ? root.connection.homeNotifications : ""
-                        visible: root.connection.homeNotifications > 0 && (RoomManager.currentSpace.length > 0 || root.showDirectChats === true)
-                        color: Kirigami.Theme.textColor
-                        horizontalAlignment: Text.AlignHCenter
-                        background: Rectangle {
-                            visible: true
-                            Kirigami.Theme.colorSet: Kirigami.Theme.Button
-                            Kirigami.Theme.inherit: false
-                            color: root.connection.homeHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor
-                            radius: height / 2
-                        }
-
-                        TextMetrics {
-                            id: homeNotificationCountTextMetrics
-                            text: homeNotificationCountLabel.text
-                        }
-                    }
                 }
                 AvatarTabButton {
                     id: directChatButton
@@ -134,6 +135,34 @@ QQC2.Control {
                     text: i18nc("@button View all one-on-one chats with your friends.", "Friends")
                     contentItem: Kirigami.Icon {
                         source: "system-users"
+
+                        QQC2.Label {
+                            id: directChatNotificationCountLabel
+                            anchors.top: parent.top
+                            anchors.right: parent.right
+                            anchors.topMargin: -Kirigami.Units.smallSpacing
+                            anchors.rightMargin: -Kirigami.Units.smallSpacing
+                            z: 1
+                            width: Math.max(directChatNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
+                            height: Kirigami.Units.iconSizes.smallMedium
+
+                            text: root.connection.directChatNotifications > 0 ? root.connection.directChatNotifications : ""
+                            visible: (root.connection.directChatNotifications > 0 || root.connection.directChatInvites) && RoomManager.currentSpace !== "DM"
+                            color: Kirigami.Theme.textColor
+                            horizontalAlignment: Text.AlignHCenter
+                            background: Rectangle {
+                                visible: true
+                                Kirigami.Theme.colorSet: Kirigami.Theme.Button
+                                Kirigami.Theme.inherit: false
+                                color: root.connection.directChatsHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor
+                                radius: height / 2
+                            }
+
+                            TextMetrics {
+                                id: directChatNotificationCountTextMetrics
+                                text: directChatNotificationCountLabel.text
+                            }
+                        }
                     }
 
                     activeFocusOnTab: true
@@ -143,33 +172,6 @@ QQC2.Control {
                         RoomManager.currentSpace = "DM";
                         root.selectionChanged();
                     }
-
-                    QQC2.Label {
-                        id: directChatNotificationCountLabel
-                        anchors.top: parent.top
-                        anchors.right: parent.right
-                        anchors.rightMargin: Kirigami.Units.smallSpacing / 2
-                        z: 1
-                        width: Math.max(directChatNotificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
-                        height: Kirigami.Units.iconSizes.smallMedium
-
-                        text: root.connection.directChatNotifications > 0 ? root.connection.directChatNotifications : ""
-                        visible: (root.connection.directChatNotifications > 0 || root.connection.directChatInvites) && RoomManager.currentSpace !== "DM"
-                        color: Kirigami.Theme.textColor
-                        horizontalAlignment: Text.AlignHCenter
-                        background: Rectangle {
-                            visible: true
-                            Kirigami.Theme.colorSet: Kirigami.Theme.Button
-                            Kirigami.Theme.inherit: false
-                            color: root.connection.directChatsHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor
-                            radius: height / 2
-                        }
-
-                        TextMetrics {
-                            id: directChatNotificationCountTextMetrics
-                            text: directChatNotificationCountLabel.text
-                        }
-                    }
                 }
 
                 Repeater {
@@ -190,6 +192,10 @@ QQC2.Control {
                         text: displayName
                         source: avatar ? root.connection.makeMediaUrl("mxc://" + avatar) : ""
 
+                        notificationCount: spaceDelegate.currentRoom.childrenNotificationCount
+                        notificationHighlight: spaceDelegate.currentRoom.childrenHaveHighlightNotifications
+                        showNotificationLabel: spaceDelegate.currentRoom.childrenNotificationCount > 0 && RoomManager.currentSpace != spaceDelegate.roomId
+
                         activeFocusOnTab: true
 
                         onSelected: {
@@ -198,34 +204,6 @@ QQC2.Control {
                         }
                         checked: RoomManager.currentSpace === roomId
                         onContextMenuRequested: root.createContextMenu(currentRoom)
-
-                        QQC2.Label {
-                            id: notificationCountLabel
-                            anchors.top: parent.top
-                            anchors.right: parent.right
-                            anchors.rightMargin: Kirigami.Units.smallSpacing / 2
-                            z: 1
-                            width: Math.max(notificationCountTextMetrics.advanceWidth + Kirigami.Units.smallSpacing * 2, height)
-                            height: Kirigami.Units.iconSizes.smallMedium
-
-                            text: spaceDelegate.currentRoom.childrenNotificationCount > 0 ? spaceDelegate.currentRoom.childrenNotificationCount : ""
-                            visible: spaceDelegate.currentRoom.childrenNotificationCount > 0 && RoomManager.currentSpace != spaceDelegate.roomId
-                            color: Kirigami.Theme.textColor
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            background: Rectangle {
-                                visible: true
-                                Kirigami.Theme.colorSet: Kirigami.Theme.Button
-                                Kirigami.Theme.inherit: false
-                                color: spaceDelegate.currentRoom.childrenHaveHighlightNotifications ? Kirigami.Theme.positiveTextColor : Kirigami.Theme.backgroundColor
-                                radius: height / 2
-                            }
-
-                            TextMetrics {
-                                id: notificationCountTextMetrics
-                                text: notificationCountLabel.text
-                            }
-                        }
                     }
                 }