feat: add NotificationButton widget to bar to display notifications and work NotificationButton to a usable state

modules/bar/Bar.qml

@@ -73,6 +73,7 @@ PanelWindow {
 
             // TODO: Add bluetooth, network, audio, power, maybe HW monitor
             Tray{}
+            NotificationButton {}
             // AudioSource{}
             AudioSink{}
             Battery{}

modules/bar/widgets/NotificationButton.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import Quickshell
+import Quickshell.Widgets
+import Quickshell.Io
+import "../../notification/notificationServer/"
+import "../../../config"
+
+MouseArea {
+    id: notificationButton
+    width: Math.max(bar.height, notificationText.width + Config.spacing)
+    height: bar.height
+    hoverEnabled: true
+    cursorShape: Qt.PointingHandCursor
+
+    onClicked: {
+        menuProc.running = true
+    }
+    
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+        radius: Config.radius_fun(notificationButton.height)
+
+        Text {
+            id: notificationText
+            anchors.centerIn: parent
+            text: Quickshell.iconPath("discord") 
+            // text: "󰂚"
+            font.pixelSize: Config.bigIconSize(notificationButton.height)
+            font.family: Config.font
+            color: Colors.secondaryContainer_fg
+        }
+
+        Image{
+            id: iconImage
+            source: Quickshell.iconPath("discord")
+            width: Config.bigIconSize(notificationButton.height)
+            height: Config.bigIconSize(notificationButton.height)
+        }
+    }
+}

modules/notification/Notification.qml

@@ -58,9 +58,11 @@ PanelWindow {
 
                     notification: notificationData
 
-                    onDismissed: function(notification) {
+                    onDismissed: function(notification, dismiss) {
                         notificationListModel.remove(index)
-                        notification.dismiss()
+                        if (dismiss) {
+                            notification.dismiss()
+                        }
                         console.log("[Notification]: Dismissed Notification:", notification.appName, notification.id, notification.summary, notification.body)
                     }
                 }

modules/notification/NotificationBody.qml

@@ -1,17 +1,20 @@
 import QtQuick
 import Quickshell
 import "../../config"
+import QtQuick.Layouts
 
 Rectangle {
     id: root
 
+    //TODO: urgency, expireTimeoutText, ...
+
     required property var notification
     property real duration: 5000 // Expected in milliseconds (e.g., 5000 for 5s)
 
-    signal dismissed(var notification)
+    signal dismissed(var notification, bool dismiss)
 
-    implicitWidth: content.implicitWidth + 2*18
+    implicitWidth: iconColumn.width+contentColumn.width+2*Config.spacing
-    implicitHeight: content.implicitHeight + 18 + progressBar.height
+    implicitHeight: Math.max(iconColumn.height, contentColumn.height)+Config.spacing+Config.spacing
 
     color: Qt.alpha(Colors.primaryContainer, 0.75)
     border.width: Config.border_width
@@ -23,40 +26,179 @@ Rectangle {
         hoverEnabled: true
 
         onClicked: {
-            dismissed(root.notification)
+            dismissed(root.notification, true)
         }
 
-        Column {
+        Row {
-            id: content
+            id: contentRow
             anchors.fill: parent
             anchors.margins: 10
-            spacing: 5
+            spacing: Config.spacing
 
-            Text {
+            // Left side: icon + icon information
-                id: appNameText
+            Column {
-                text: root.notification?.id + ": " + (root.notification?.appName ?? "")
+                id: iconColumn
-                font.family: Config.font
+                height: Math.max(iconImage.height+summaryText.height+3*Config.spacing, contentColumn.height)+Config.spacing
-                font.pixelSize: 18
+                width: Math.max(128, summaryText.implicitWidth) + Config.spacing
-                color: Colors.primary
+                spacing: Config.spacing
-                elide: Text.ElideRight
+
+                Image {
+                    id: iconImage
+
+                    width: 128
+                    height: 128
+
+                    source: Quickshell.iconPath(root.notification?.appIcon ?? "")
+                    fillMode: Image.PreserveAspectFit
+                    asynchronous: true
+                }
+
+                Text {
+                    id: summaryText
+
+                    Layout.fillWidth: true
+
+                    text: root.notification?.summary ?? ""
+                    font.family: Config.font
+                    font.pixelSize: 22
+                    color: Colors.primary
+
+                    wrapMode: Text.Wrap
+                    horizontalAlignment: Text.AlignHCenter
+                }
             }
 
-            Text {
+            // Right side: notification information
-                id: summaryText
+            Column {
-                text: root.notification?.summary ?? ""
+                id: contentColumn
-                font.family: Config.font
+                width: bodyText.width + Config.spacing
-                font.pixelSize: 22
+                spacing: Config.spacing
-                color: Colors.primary
-                wrapMode: Text.Wrap
-            }
 
-            Text {
+                Text {
-                id: bodyText
+                    id: bodyText
-                text: root.notification?.body ?? ""
+                    text: root.notification?.body ?? ""
-                font.family: Config.font
+
-                font.pixelSize: 16
+                    width: Math.min(implicitWidth, iconColumn.width*2)
-                color: Colors.primary
+                    font.family: Config.font
-                wrapMode: Text.Wrap
+                    font.pixelSize: 22
+                    color: Colors.primary
+                    wrapMode: Text.Wrap
+                }
+
+                // Text {
+                //     id: appNameText
+                //     width: parent.width
+                //     text: root.notification?.id + ": " +
+                //         (root.notification?.appName ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 18
+                //     color: Colors.primary
+                //     elide: Text.ElideRight
+                // }
+
+                // Text {
+                //     id: inlineReplyPlaceholderText
+                //     width: parent.width
+                //     text: "inlineReplyPlaceholder: " + (root.notification?.inlineReplyPlaceholder ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: iconPathText
+                //     width: parent.width
+                //     text: "iconPath: " + (root.notification?.iconPath ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: expireTimeoutText
+                //     width: parent.width
+                //     text: "expireTimeout: " +
+                //         (root.notification?.expireTimeout ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: residentText
+                //     width: parent.width
+                //     text: "resident: " + (root.notification?.resident ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: urgencyText
+                //     width: parent.width
+                //     text: "urgency: " + (root.notification?.urgency ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: desktopEntryText
+                //     width: parent.width
+                //     text: "desktopEntry: " +
+                //         (root.notification?.desktopEntry ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: hintsText
+                //     width: parent.width
+                //     text: "hints: " + (root.notification?.hints ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: transientText
+                //     width: parent.width
+                //     text: "transient: " + (root.notification?.transient ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: hasInlineReplyText
+                //     width: parent.width
+                //     text: "hasInlineReply: " +
+                //         (root.notification?.hasInlineReply ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
+
+                // Text {
+                //     id: hasActionIconsText
+                //     width: parent.width
+                //     text: "hasActionIcons: " +
+                //         (root.notification?.hasActionIcons ?? "")
+                //     font.family: Config.font
+                //     font.pixelSize: 16
+                //     color: Colors.primary
+                //     wrapMode: Text.Wrap
+                // }
             }
         }
     }
@@ -66,7 +208,7 @@ Rectangle {
         id: progressBar
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        height: 10
+        height: Math.min(10, 0.1 * root.height)
         color: Colors.primary
 
         property real progress: 1.0
@@ -81,7 +223,7 @@ Rectangle {
             duration: root.duration 
             paused: mouseArea.containsMouse
 
-            onFinished: root.dismissed(root.notification)
+            onFinished: root.dismissed(root.notification, false)
         }
     }
 

modules/notification/notificationServer/NotificationServer.qml

@@ -34,6 +34,16 @@ Item {
 
     NotificationServer {
         id: notificationServer
+
+        actionsSupported: true
+        bodyHyperlinksSupported: true
+        bodyImagesSupported: true
+        actionIconsSupported: true
+        imageSupported: true
+        persistenceSupported: true
+        bodyMarkupSupported: true
+        inlineReplySupported: true
+
         onNotification: function(notification) {
             // if(notification.lastGeneration){
             //     console.log(

modules/wlogout/WLogout.qml

@@ -62,7 +62,7 @@ Variants {
 			MouseArea {
 				anchors.fill: parent
 				onClicked: {
-					console.log("clicked ???, closing Wallpaper Picker")
+					console.log("clicked Background, closing Wallpaper Picker")
 					wlogoutLoader.active = false
 				}
 				GridLayout {