notifications: handle images

.config/quickshell/modules/common/widgets/NotificationWidget.qml

@@ -1,5 +1,6 @@
 import "root:/modules/common"
 import "root:/services"
+import Qt5Compat.GraphicalEffects
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
@@ -109,12 +110,50 @@ Item {
                         verticalAlignment: Text.AlignVCenter
                     }
                     IconImage {
-                        visible: notificationObject.appIcon != ""
+                        visible: notificationObject.image == "" && notificationObject.appIcon != ""
                         anchors.centerIn: parent
                         implicitSize: 33
                         asynchronous: true
                         source: Quickshell.iconPath(notificationObject.appIcon)
                     }
+                    Item {
+                        anchors.fill: parent
+                        visible: notificationObject.image != ""
+                        Image {
+                            id: notifImage
+
+                            anchors.fill: parent
+                            readonly property int size: parent.width
+
+                            source: notificationObject?.image
+                            fillMode: Image.PreserveAspectCrop
+                            cache: false
+                            antialiasing: true
+                            asynchronous: true
+
+                            width: size
+                            height: size
+                            sourceSize.width: size
+                            sourceSize.height: size
+
+                            layer.enabled: true
+                            layer.effect: OpacityMask {
+                                maskSource: Rectangle {
+                                    width: notifImage.size
+                                    height: notifImage.size
+                                    radius: Appearance.rounding.full
+                                }
+                            }
+                        }
+                        IconImage {
+                            visible: notificationObject.appIcon != ""
+                            anchors.bottom: parent.bottom
+                            anchors.right: parent.right
+                            implicitSize: 23
+                            asynchronous: true
+                            source: Quickshell.iconPath(notificationObject.appIcon)
+                        }
+                    }
                 }
                 ColumnLayout { // Notification content
                     spacing: 0
@@ -212,7 +251,6 @@ Item {
                 }
             }
 
-
             // Actions
             Flickable {
                 id: actionsFlickable

.config/quickshell/services/Notifications.qml

@@ -24,8 +24,8 @@ Singleton {
         // bodyImagesSupported: true
         bodyMarkupSupported: true
         bodySupported: true
-        // imageSupported: true
+        imageSupported: true
-        keepOnReload: false // I can't figure out RetainableLock, using a custom solution with a json file instead
+        keepOnReload: false
         persistenceSupported: true
 
         onNotification: (notification) => {
@@ -41,6 +41,7 @@ Singleton {
                 "appIcon": notification.appIcon,
                 "appName": notification.appName,
                 "body": notification.body,
+                "image": notification.image,
                 "summary": notification.summary,
                 "time": Date.now(),
                 "urgency": notification.urgency.toString(),