notification button

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