Create Styled things and finish notifications module

NotificationsWidget.qml

@@ -3,57 +3,96 @@ import Quickshell
 import Quickshell.Widgets
 import qs.Services
 import qs.Common
+import qs.Common.Styled
 import qs.Widgets
-import Quickshell.Services.Notifications
 
 Item {
     id: root
 
     property var monitor: ""
     property bool createWindow: false
+    property string notificationIcon: ""
 
     MarginWrapperManager {
         rightMargin: Theme.gaps
         leftMargin: Theme.gaps
     }
 
+    states: [
+        State {
+            name: "MuteActive"
+            when: NotificationService.notificationsMuted && NotificationService.notificationsNumber
+            PropertyChanges {
+                root.notificationIcon : "\udb80\udc9b   " +  NotificationService.notificationsNumber
+            }
+        },
+        State {
+            name: "Active"
+            when: !NotificationService.notificationsMuted && NotificationService.notificationsNumber
+            PropertyChanges {
+                root.notificationIcon : "\udb80\udc9a   " +  NotificationService.notificationsNumber
+            }
+        },
+        State {
+            name: "MuteEmpty"
+            when: NotificationService.notificationsMuted
+            PropertyChanges {
+                root.notificationIcon : "\uec08"
+            }
+        },
+        State {
+            name: "Empty"
+            when: !NotificationService.notificationsMuted && !NotificationService.notificationsNumber
+            PropertyChanges {
+                root.notificationIcon : "\ueaa2"
+            }
+        }
+    ]
+
     Binding {
         target: root
         property: "createWindow"
         value: NotificationService.notificationsNumber > 0 && root.createWindow
     }
 
-    Rectangle {
+    BackgroundRectangle {
         color: Theme.backgroudColor
-        implicitWidth: clockText.implicitWidth * 1.6
+        implicitWidth: 60
         implicitHeight: Theme.heightGaps
         radius: 25
 
-        Text {
-            id: clockText
+        StyledText {
+            id: notifText
 
-            anchors.centerIn: parent
-            text: {
-                NotificationService.notificationsNumber > 0 ? "\udb80\udc9a   " + NotificationService.notificationsNumber : "\ueaa2";
-            }
-            font.bold: true
-            font.pixelSize: Theme.pixelSize
-            font.family: Theme.fontFamily
-            color: Theme.textColor
+            anchors.fill: parent
+            text: root.notificationIcon + "   " 
+            // text: {
+            //     NotificationService.notificationsNumber > 0 ? "\udb80\udc9a   " + NotificationService.notificationsNumber : "\ueaa2";
+            // }
         }
 
         MouseArea {
             anchors.fill: parent
-            onClicked: {
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+
+            onClicked: mouse => {
+                if (mouse.button === Qt.RightButton) {
+                    NotificationService.notificationsMuted = !NotificationService.notificationsMuted
+                    return;
+                } 
                 root.createWindow = !root.createWindow;
             }
         }
     }
+
     LazyLoader {
         id: windowLoader
 
-        active: NotificationService.notificationsNumber ? createWindow : false
+        activeAsync: NotificationService.notificationsNumber ? createWindow : false
 
-        component: NotificationWindow {}
+        component: NotificationWindow {
+        onClear: root.createWindow = false
+        }
+        
     }
 }