Add space notifs to room list

resources/qml/RoomList.qml

@@ -3,6 +3,7 @@
 //
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import "./components"
 import "./dialogs"
 import "./ui"
 import Qt.labs.platform 1.1 as Platform
@@ -305,33 +306,17 @@ Page {
                     userid: isDirect ? directChatOtherUserId : ""
                     roomid: roomId
 
-                    Rectangle {
+                    NotificationBubble {
                         id: collapsedNotificationBubble
 
+                        notificationCount: roomItem.notificationCount
+                        hasLoudNotification: roomItem.hasLoudNotification
+                        bubbleBackgroundColor: roomItem.bubbleBackground
+                        bubbleTextColor: roomItem.bubbleText
                         anchors.right: parent.right
                         anchors.bottom: parent.bottom
                         anchors.margins: -Nheko.paddingSmall
-                        visible: collapsed && notificationCount > 0
-                        enabled: false
-                        Layout.alignment: Qt.AlignRight
-                        height: fontMetrics.averageCharacterWidth * 3
-                        width: Math.max(collapsedBubbleText.width, height)
-                        radius: height / 2
-                        color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground
-
-                        Label {
-                            id: collapsedBubbleText
-
-                            anchors.centerIn: parent
-                            horizontalAlignment: Text.AlignHCenter
-                            verticalAlignment: Text.AlignVCenter
-                            width: Math.max(implicitWidth + Nheko.paddingMedium, parent.height)
-                            font.bold: true
-                            font.pixelSize: fontMetrics.font.pixelSize * 0.8
-                            color: hasLoudNotification ? "white" : roomItem.bubbleText
-                            text: notificationCount > 9999 ? "9999+" : notificationCount
-                        }
-
+                        mayBeVisible: collapsed
                     }
 
                 }
@@ -348,40 +333,19 @@ Page {
                     height: avatar.height
                     spacing: Nheko.paddingSmall
 
-                    Component {
+                    NotificationBubble {
                         id: notificationBubble
 
-                        Rectangle {
-                            visible: notificationCount > 0
-                            Layout.alignment: Qt.AlignRight
-                            Layout.leftMargin: Nheko.paddingSmall
-                            height: notificationBubbleText.height + Nheko.paddingMedium
-                            width: Math.max(notificationBubbleText.width, height)
-                            radius: height / 2
-                            color: hasLoudNotification ? Nheko.theme.red : roomItem.bubbleBackground
-                            ToolTip.text: notificationCount
-                            ToolTip.delay: Nheko.tooltipDelay
-                            ToolTip.visible: notificationBubbleHover.hovered && (notificationCount > 9999)
-
-                            Label {
-                                id: notificationBubbleText
-
-                                anchors.centerIn: parent
-                                horizontalAlignment: Text.AlignHCenter
-                                verticalAlignment: Text.AlignVCenter
-                                width: Math.max(implicitWidth + Nheko.paddingMedium, parent.height)
-                                font.bold: true
-                                font.pixelSize: fontMetrics.font.pixelSize * 0.8
-                                color: hasLoudNotification ? "white" : roomItem.bubbleText
-                                text: notificationCount > 9999 ? "9999+" : notificationCount
-
-                                HoverHandler {
-                                    id: notificationBubbleHover
-                                }
-
-                            }
-
-                        }
+                        parent: isSpace ? titleRow : subtextRow
+                        notificationCount: roomItem.notificationCount
+                        hasLoudNotification: roomItem.hasLoudNotification
+                        bubbleBackgroundColor: roomItem.bubbleBackground
+                        bubbleTextColor: roomItem.bubbleText
+                        Layout.alignment: Qt.AlignRight
+                        Layout.leftMargin: Nheko.paddingSmall
+                        Layout.preferredWidth: implicitWidth
+                        Layout.preferredHeight: implicitHeight
+                        mayBeVisible: !collapsed
                     }
 
                     RowLayout {
@@ -412,11 +376,6 @@ Page {
                             text: time
                         }
 
-                        Loader {
-                            sourceComponent: notificationBubble
-                            active: isSpace
-                        }
-
                     }
 
                     RowLayout {
@@ -437,11 +396,6 @@ Page {
                             Layout.fillWidth: true
                         }
 
-
-                        Loader {
-                            sourceComponent: notificationBubble
-                            active: !isSpace
-                        }
                     }
 
                 }