different icon when tracked notifs > 0

Bar.qml

@@ -4,6 +4,7 @@ import Quickshell
 import Quickshell.Io
 import qs.Modules
 import qs.Config
+import qs.Helpers
 
 Scope {
     Variants {
@@ -16,10 +17,6 @@ Scope {
             screen: modelData
             property var root: Quickshell.shellDir
 
-            Component.onCompleted: {
-                console.log(modelData.x);
-            }
-
             Process {
                 id: ncProcess
                 command: ["sh", "-c", `qs -p ${bar.root}/shell.qml ipc call root showCenter`]
@@ -102,10 +99,11 @@ Scope {
                         }
 
                         Text {
+                            id: notificationCenterIcon
                             Layout.alignment: Qt.AlignVCenter
-                            text: "\ue7f4"
+                            text: HasNotifications.hasNotifications ? "\uf4fe" : "\ue7f4"
                             font.family: "Material Symbols Rounded"
-                            font.pixelSize: 20
+                            font.pixelSize: 22
                             color: "white"
                             MouseArea {
                                 anchors.fill: parent

Helpers/HasNotifications.qml

@@ -0,0 +1,15 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Io
+
+Singleton {
+    id: root
+
+    property alias hasNotifications: adapter.hasNotifications
+
+    JsonObject {
+        id: adapter
+        property bool hasNotifications: false
+    }
+}

Modules/NotificationCenter.qml

@@ -8,6 +8,7 @@ import QtQuick.Effects
 import QtQuick
 import Quickshell.Services.Notifications
 import qs.Config
+import qs.Helpers
 
 PanelWindow {
     id: root
@@ -26,6 +27,14 @@ PanelWindow {
 
     mask: Region { item: backgroundRect }
 
+    onNotificationsChanged: {
+        if ( root.notifications.length > 0 ) {
+            HasNotifications.hasNotifications = true;
+        } else {
+            HasNotifications.hasNotifications = false;
+        }
+    }
+
     IpcHandler {
         id: ipcHandler
         target: "root"

Modules/TrayItem.qml

@@ -14,7 +14,7 @@ MouseArea {
     property point globalPos
 
     implicitWidth: 22
-    implicitHeight: 22
+    implicitHeight: parent.height
 
     hoverEnabled: true
     acceptedButtons: Qt.LeftButton | Qt.RightButton

Modules/TrayWidget.qml

@@ -9,11 +9,11 @@ Rectangle {
     id: root
     required property PanelWindow bar
     implicitHeight: parent.height
-    implicitWidth: rowL.implicitWidth + 20
+    implicitWidth: rowL.implicitWidth + 10
     color: "transparent"
 
     RowLayout {
-        spacing: 10
+        spacing: 5
         id: rowL
         anchors.centerIn: parent
         Repeater {