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
+                }
+            }
+        }
+    }
+}

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);
+        }
+    }
+}