move and add menu

modules/bar/Bar.qml

@@ -5,6 +5,7 @@ import Quickshell
 import "components"
 import "components/bluetooth"
 import "components/hyprland"
+import "components/notifications"
 import "components/tray"
 
 Scope {

modules/bar/components/notifications/NotificationMenu.qml

@@ -0,0 +1,95 @@
+pragma ComponentBehavior: Bound
+
+import qs.config
+import qs.services
+import qs.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+
+StyledPopupWindow {
+    id: root
+
+    backgroundColor: Theme.palette.base300
+    margins: 16
+    radius: 8
+
+    content: ColumnLayout {
+        spacing: 16
+
+        RowLayout {
+            Layout.fillWidth: true
+            StyledText {
+                text: "Enabled"
+            }
+
+            Switch {
+                checked: Notifications.enabled
+                onClicked: Notifications.enabled = checked
+            }
+
+            StyledButton {
+                id: clearButton
+                Layout.alignment: Qt.AlignRight
+                onClicked: Notifications.clear()
+                content: StyledText {
+                    text: "Clear"
+                    color: clearButton.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+                }
+            }
+        }
+
+        StyledLabel {
+            color: Theme.palette.base200
+            StyledListView {
+                id: notifications
+
+                spacing: 8
+                implicitHeight: 300
+                implicitWidth: 300
+                clip: true
+
+                header: WrapperRectangle {
+                    margin: 8
+                    color: 'transparent'
+                    StyledText {
+                        text: "Notifications"
+                        font.bold: true
+                        font.pixelSize: 16
+                    }
+                }
+                model: Notifications.list
+                delegate: StyledLabel {
+                    required property var modelData
+                    margin: 16
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    RowLayout {
+                        ClippingRectangle {
+                            implicitWidth: icon.implicitSize
+                            implicitHeight: icon.implicitSize
+                            IconImage {
+                                id: icon
+                                implicitSize: 20
+                                source: modelData.image == "" ? Quickshell.iconPath(modelData.appIcon, "device-support-unknown-symbolic") : modelData.image
+                            }
+                        }
+                        ColumnLayout {
+
+                            StyledText {
+                                font.bold: true
+                                font.pixelSize: 12
+                                text: modelData.summary ?? modelData.appName
+                            }
+                            StyledText {
+                                text: modelData.body
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

modules/bar/components/notifications/Notifications.qml

@@ -5,10 +5,10 @@ import qs.widgets
 import QtQuick
 
 StyledButton {
-    id: clickable
+    id: root
 
     onClicked: {
-        Notifications.clear();
+        menu.toggle();
     }
 
     content: StyledText {
@@ -19,16 +19,24 @@ StyledButton {
         font.bold: true
         text: Icons.bell
 
-        color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
+        color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
 
         states: State {
             when: Notifications.hasNotifications
             PropertyChanges {
                 text {
                     text: Icons.bellRing
-                    color: clickable.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
+                    color: root.containsMouse ? Theme.palette.base300 : Theme.palette.secondary
                 }
             }
         }
     }
+
+    NotificationMenu {
+        id: menu
+
+        anchor.item: root
+        anchor.rect.x: root.width / 2 - width / 2
+        anchor.rect.y: root.height + 8
+    }
 }

services/Notifications.qml

@@ -6,20 +6,34 @@ import Quickshell.Services.Notifications
 Singleton {
     id: root
 
-    property bool hasNotifications: notifications.length > 0
-    property list<Notification> notifications: []
+    property bool enabled: true
+    property bool hasNotifications: list.length > 0
+    property list<Notification> list: []
 
     function clear() {
-        notifications.forEach(notification => {
-            notification.dismiss();
+        list.forEach(notification => {
+            notification?.dismiss();
         });
-        notifications = [];
+        list = [];
     }
 
     NotificationServer {
+        id: server
+
+        keepOnReload: false
+        actionsSupported: true
+        bodyHyperlinksSupported: true
+        bodyImagesSupported: true
+        bodyMarkupSupported: true
+        imageSupported: true
+
         onNotification: event => {
+            if (!root.enabled) {
+                return;
+            }
             event.tracked = true;
-            root.notifications.push(event);
+            root.list = root.list.filter(item => item.id != event.id);
+            root.list.push(event);
         }
     }
 }