feat(notifications): draw the content image in the balloon

The daemon now publishes an image path; the balloon shows it below the
text, scaled to the balloon width with a 240px cap. A daemon without the
field leaves it hidden, so the renderer and the daemon can ship in
either order.

1 files changed, 25 insertions, 1 deletions

diff --git a/notifications/NotificationBalloon.qml b/notifications/NotificationBalloon.qml
index c6705e1..b77ca2a 100644
--- a/notifications/NotificationBalloon.qml
+++ b/notifications/NotificationBalloon.qml
@@ -37,7 +37,7 @@ Rectangle {
     }
 
     width: parent ? parent.width : 340
-    implicitHeight: texts.implicitHeight + 20
+    implicitHeight: texts.implicitHeight + 20 + (preview.visible ? preview.height + 8 : 0)
     radius: 10
     color: Qt.alpha(Theme.base, 0.82)
     border.width: 1
@@ -132,4 +132,28 @@ Rectangle {
             color: Theme.subtext
         }
     }
+
+    // The content image (a screenshot or an app-provided image), below the
+    // text. The daemon writes the path; an older daemon without the field
+    // leaves this hidden. The height matches the scaled width so
+    // PreserveAspectFit does not letterbox, and a tall screenshot is capped at
+    // 240px. Asynchronous so a large screenshot does not stall the shell.
+    Image {
+        id: preview
+        visible: b.notification.image !== "" && b.notification.image !== undefined
+        anchors {
+            left: parent.left
+            right: parent.right
+            top: texts.bottom
+            leftMargin: 10
+            rightMargin: 10
+            topMargin: 8
+        }
+        height: visible && implicitWidth > 0
+            ? Math.min(width * implicitHeight / implicitWidth, 240)
+            : 0
+        source: visible ? "file://" + b.notification.image : ""
+        fillMode: Image.PreserveAspectFit
+        asynchronous: true
+    }
 }