quickshell/sidebar: add notification center

Author: fufexan

home/services/quickshell/bar/Clock.qml

@@ -5,7 +5,10 @@ import "../components"
 import "../utils/."
 
 WrapperMouseArea {
-    onClicked: () => Config.showSidebar = !Config.showSidebar
+    onClicked: () => {
+        NotificationState.notifOverlayOpen = false;
+        Config.showSidebar = !Config.showSidebar;
+    }
 
     Text {
         SystemClock {

home/services/quickshell/notifications/NotificationBox.qml

@@ -19,23 +19,26 @@ WrapperMouseArea {
     property int elapsed: 0
     property string image: (n.image == "" && n.appIcon != "") ? n.appIcon : n.image
     property bool hasAppIcon: !(n.image == "" && n.appIcon != "")
-    property int indexPopup: -1
-    property int indexAll: -1
     property real iconSize: 48
 
     property bool showTime: false
     property bool expanded: false
 
+    property bool dismissOnClose: true
+
     onClicked: mouse => {
-        if (mouse.button == Qt.LeftButton && root.n.actions != []) {
-            root.n.actions[0].invoke();
+        if (mouse.button == Qt.LeftButton && root.n?.actions != []) {
+            root.n?.actions[0].invoke();
         } else if (mouse.button == Qt.RightButton) {
-            if (indexAll != -1)
-                NotificationState.notifDismissByAll(indexAll);
-            else if (indexPopup != -1)
-                NotificationState.notifDismissByPopup(indexPopup);
-        } else if (mouse.button == Qt.MiddleButton) {
+            if (dismissOnClose) {
+                NotificationState.notifDismissByNotif(n);
+            } else {
+                NotificationState.notifCloseByNotif(n);
+            }
+        } else if (mouse.button == Qt.MiddleButton && dismissOnClose) {
             NotificationState.dismissAll();
+        } else if (mouse.button == Qt.MiddleButton) {
+            NotificationState.closeAll();
         }
     }
 
@@ -104,7 +107,7 @@ WrapperMouseArea {
 
                     IconImage {
                         implicitSize: 16
-                        source: Utils.getImage(root.n.appIcon)
+                        source: Utils.getImage(root.n?.appIcon)
                     }
                 }
             }
@@ -122,18 +125,18 @@ WrapperMouseArea {
                     Layout.fillWidth: false
 
                     Text {
-                        text: root.n.summary
+                        text: root.n?.summary
                         elide: Text.ElideRight
                         font.weight: Font.Bold
                     }
 
                     Text {
-                        visible: root.showTime
+                        visible: root?.showTime
                         text: "·"
                     }
 
                     Text {
-                        visible: root.showTime
+                        visible: root?.showTime
                         text: Utils.humanTime(root.elapsed)
                     }
                 }
@@ -144,19 +147,19 @@ WrapperMouseArea {
                     elide: Text.ElideRight
                     wrapMode: Text.Wrap
                     font.weight: Font.Medium
-                    maximumLineCount: root.expanded ? 5 : (root.n.actions.length > 1 ? 1 : 2)
-                    text: root.n.body
+                    maximumLineCount: root.expanded ? 5 : (root.n?.actions.length > 1 ? 1 : 2)
+                    text: root.n?.body
                 }
 
                 RowLayout {
-                    visible: root.n.actions.length > 1
+                    visible: root.n?.actions.length > 1
 
                     Layout.fillWidth: true
                     implicitHeight: actionRepeater.implicitHeight
 
                     Repeater {
                         id: actionRepeater
-                        model: root.n.actions.slice(1)
+                        model: root.n?.actions.slice(1)
 
                         WrapperMouseArea {
                             id: actionButtonMA
@@ -206,7 +209,7 @@ WrapperMouseArea {
             WrapperMouseArea {
                 id: expandButton
 
-                visible: bodyText.text.length > (root.n.actions.length > 1 ? 50 : 100)
+                visible: bodyText.text.length > (root.n?.actions.length > 1 ? 50 : 100)
 
                 property string sourceIcon: root.expanded ? "go-up-symbolic" : "go-down-symbolic"
 
@@ -241,10 +244,7 @@ WrapperMouseArea {
                 implicitWidth: 16
 
                 onPressed: () => {
-                    if (root.indexAll != -1)
-                        NotificationState.notifCloseByAll(root.indexAll);
-                    else if (root.indexPopup != -1)
-                        NotificationState.notifCloseByPopup(root.indexPopup);
+                    NotificationState.notifCloseByNotif(root.n);
                 }
 
                 Rectangle {

home/services/quickshell/notifications/NotificationOverlay.qml

@@ -2,13 +2,14 @@ import "../utils/."
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
+import Quickshell.Services.Notifications
 import Quickshell.Wayland
 
 PanelWindow {
     id: root
 
     screen: Config.preferredMonitor
-    visible: NotificationState.notifOverlayOpen
+    visible: NotificationState.notifOverlayOpen && !Config.showSidebar
 
     WlrLayershell.namespace: "quickshell:notifications:overlay"
     WlrLayershell.layer: WlrLayer.Top
@@ -35,9 +36,8 @@ PanelWindow {
 
             NotificationBox {
                 id: notifBox
-                required property int index
-                n: NotificationState.popupNotifs[index]
-                indexPopup: index
+                required property Notification modelData
+                n: modelData
 
                 Timer {
                     running: true

home/services/quickshell/sidebar/NotificationCenter.qml

@@ -0,0 +1,78 @@
+import "../utils/."
+import "../notifications"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Services.Notifications
+import org.kde.kirigami
+import "../components"
+
+ColumnLayout {
+    id: root
+    Layout.fillWidth: true
+
+    WrapperRectangle {
+        id: wrapper
+        Layout.fillWidth: true
+        margin: 4
+        radius: 16
+        color: Colors.bgBlur
+
+        RowLayout {
+            WrapperRectangle {
+                margin: 4
+                color: "transparent"
+                Text {
+                    text: "No notifications"
+                }
+            }
+
+            WrapperMouseArea {
+                id: closeButton
+                Layout.alignment: Qt.AlignRight
+
+                hoverEnabled: true
+                Layout.fillHeight: true
+                implicitWidth: height
+
+                onPressed: () => {
+                    NotificationState.closeAll();
+                }
+
+                Rectangle {
+                    radius: closeButton.implicitWidth
+                    color: closeButton.containsMouse ? Colors.buttonDisabledHover : Colors.buttonDisabled
+                    implicitWidth: radius
+                    implicitHeight: radius
+
+                    Icon {
+                        source: Quickshell.iconPath("process-stop-symbolic")
+                        anchors.centerIn: parent
+                        implicitHeight: parent.implicitHeight - 4
+                        implicitWidth: parent.implicitHeight - 4
+                        isMask: true
+                        color: Colors.foreground
+                    }
+                }
+            }
+        }
+    }
+
+    ColumnLayout {
+        id: notifs
+
+        Repeater {
+            id: notifRepeater
+            model: NotificationState.allNotifs
+
+            NotificationBox {
+                id: notifBox
+                required property Notification modelData
+                n: modelData
+                showTime: true
+                dismissOnClose: false
+            }
+        }
+    }
+}

home/services/quickshell/sidebar/Sidebar.qml

@@ -34,6 +34,7 @@ LazyLoader {
             anchors.fill: parent
 
             Calendar {}
+            NotificationCenter {}
         }
     }
 }

home/services/quickshell/utils/NotificationState.qml

@@ -9,14 +9,6 @@ Singleton {
     property var allNotifs: []
     property var defaultNotifTimeout: 5000
     property bool notifOverlayOpen: false
-    property bool notifPanelOpen: false
-
-    function togglePanel() {
-        if (notifOverlayOpen && !notifPanelOpen)
-            notifOverlayOpen = false;
-
-        notifPanelOpen = !notifPanelOpen;
-    }
 
     function onNewNotif(notif) {
         allNotifs = [notif, ...allNotifs];
@@ -26,7 +18,7 @@ Singleton {
 
         popupNotifs = [notif, ...popupNotifs];
 
-        if (!notifPanelOpen)
+        if (!Config.showSidebar)
             notifOverlayOpen = true;
     }