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,21 +86,13 @@ QQC2.Control {
                     text: i18n("Home")
                     contentItem: Kirigami.Icon {
                         source: "user-home-symbolic"
-                    }
-
-                    activeFocusOnTab: true
-
-                    checked: RoomManager.currentSpace.length === 0
-                    onSelected: {
-                        RoomManager.currentSpace = "";
-                        root.selectionChanged();
-                    }
 
                         QQC2.Label {
                             id: homeNotificationCountLabel
                             anchors.top: parent.top
                             anchors.right: parent.right
-                        anchors.rightMargin: Kirigami.Units.smallSpacing / 2
+                            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
@@ -123,6 +115,15 @@ QQC2.Control {
                             }
                         }
                     }
+
+                    activeFocusOnTab: true
+
+                    checked: RoomManager.currentSpace.length === 0
+                    onSelected: {
+                        RoomManager.currentSpace = "";
+                        root.selectionChanged();
+                    }
+                }
                 AvatarTabButton {
                     id: directChatButton
 
@@ -134,21 +135,13 @@ QQC2.Control {
                     text: i18nc("@button View all one-on-one chats with your friends.", "Friends")
                     contentItem: Kirigami.Icon {
                         source: "system-users"
-                    }
-
-                    activeFocusOnTab: true
-
-                    checked: RoomManager.currentSpace === "DM"
-                    onSelected: {
-                        RoomManager.currentSpace = "DM";
-                        root.selectionChanged();
-                    }
 
                         QQC2.Label {
                             id: directChatNotificationCountLabel
                             anchors.top: parent.top
                             anchors.right: parent.right
-                        anchors.rightMargin: Kirigami.Units.smallSpacing / 2
+                            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
@@ -172,6 +165,15 @@ QQC2.Control {
                         }
                     }
 
+                    activeFocusOnTab: true
+
+                    checked: RoomManager.currentSpace === "DM"
+                    onSelected: {
+                        RoomManager.currentSpace = "DM";
+                        root.selectionChanged();
+                    }
+                }
+
                 Repeater {
                     model: RoomManager.sortFilterSpaceListModel
 
@@ -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
-                            }
-                        }
                     }
                 }