notification button

config/Dimensions.qml

@@ -18,6 +18,7 @@ Singleton {
     property Cpu cpu: Cpu {}
     property Gpu gpu: Gpu {}
     property Caffeine caffeine: Caffeine {}
+    property Notifications notifications: Notifications {}
     property Workspace workspace: Workspace {}
     property Tray tray: Tray {}
     property TrayMenu trayMenu: TrayMenu {}
@@ -100,6 +101,13 @@ Singleton {
         property int verticalPadding: 6
     }
 
+    component Notifications: QtObject {
+        property int fontSize: 16
+        property int height: 30
+        property int horizontalPadding: 8
+        property int verticalPadding: 6
+    }
+
     component Workspace: QtObject {
         property int spacing: 5
         property int iconSize: 16

constants/Icons.qml

@@ -3,6 +3,8 @@ pragma Singleton
 import Quickshell
 
 Singleton {
+    property string bell: "\u{E05d}"
+    property string bellRing: "\u{E224}"
     property string brickWall: "\u{E586}"
     property string coffee: "\u{E09a}"
     property string cpu: "\u{E0ad}"

modules/bar/Bar.qml

@@ -59,9 +59,9 @@ Scope {
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                Tray {
-                    anchors.verticalCenter: parent.verticalCenter
-                }
+                // Tray {
+                //     anchors.verticalCenter: parent.verticalCenter
+                // }
             }
 
             Row {
@@ -127,6 +127,10 @@ Scope {
                 Clock {
                     anchors.verticalCenter: parent.verticalCenter
                 }
+
+                Notifications {
+                    anchors.verticalCenter: parent.verticalCenter
+                }
             }
         }
     }

modules/bar/components/Notifications.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import Quickshell.Io
+import "../../../config/"
+import "../../../constants/"
+import "../../../services/"
+import "../../../styled/"
+
+Clickable {
+    id: clickable
+
+    implicitWidth: text.width
+    implicitHeight: Dimensions.notifications.height
+
+    onClicked: {
+        Notifications.clear();
+    }
+
+    StyledText {
+        id: text
+
+        font.family: Theme.lucide.font.family
+        font.pixelSize: Dimensions.notifications.fontSize
+        font.bold: true
+        text: Icons.bell
+
+        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+
+        anchors.verticalCenter: parent.verticalCenter
+        topPadding: Dimensions.notifications.verticalPadding
+        bottomPadding: Dimensions.notifications.verticalPadding
+        leftPadding: Dimensions.notifications.horizontalPadding
+        rightPadding: Dimensions.notifications.horizontalPadding
+
+        states: State {
+            when: Notifications.hasNotifications
+            PropertyChanges {
+                text {
+                  text: Icons.bellRing
+                  color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
+                }
+            }
+        }
+    }
+}

modules/bar/components/Pipewire.qml

@@ -17,11 +17,14 @@ Clickable {
     }
 
     onClicked: mouse => {
-        if (mouse.button == Qt.LeftButton) {
-            sink.audio.muted = !sink.audio.muted;
-        } else if (mouse.button == Qt.RightButton) {
-            // show menu
+        if (!sink) {
+          return
         }
+        if (mouse.button == Qt.LeftButton) {
+            sink.audio.muted = !sink?.audio.muted;
+        } else if (mouse.button == Qt.RightButton)
+        // show menu
+        {}
     }
 
     onWheel: event => {
@@ -35,7 +38,7 @@ Clickable {
     states: [
         State {
             name: "muted"
-            when: clickable.sink.audio.muted
+            when: clickable.sink?.audio.muted ?? false
             PropertyChanges {
                 text {
                     icon: " "
@@ -44,7 +47,7 @@ Clickable {
         },
         State {
             name: "off"
-            when: clickable.sink.audio.volume <= 0
+            when: clickable.sink?.audio.volume <= 0
             PropertyChanges {
                 text {
                     icon: " "
@@ -58,7 +61,7 @@ Clickable {
 
         property string icon: " "
 
-        text: `${icon} ${(Pipewire.defaultAudioSink.audio.volume * 100).toFixed()}%`
+        text: `${icon} ${(clickable.sink?.audio.volume * 100).toFixed()}%`
         font.pixelSize: Dimensions.pipewire.fontSize
 
         color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent

services/Notifications.qml

@@ -0,0 +1,25 @@
+pragma Singleton
+
+import Quickshell
+import Quickshell.Services.Notifications
+
+Singleton {
+    id: root
+
+    property bool hasNotifications: notifications.length > 0
+    property list<Notification> notifications: []
+
+    function clear() {
+        notifications.forEach(notification => {
+            notification.dismiss();
+        });
+        notifications = [];
+    }
+
+    NotificationServer {
+        onNotification: event => {
+            event.tracked = true;
+            root.notifications.push(event);
+        }
+    }
+}