feat: update notification layout and add avatar load functionality

modules/notification/NotificationBody.qml

@@ -62,7 +62,7 @@ Rectangle {
         id: contentColumn
         anchors.fill: parent
         spacing: 0
-        // spacing: Config.spacing
+
         Rectangle{
             id: contentRowRectangle
             height: Math.max(iconRectangle.height, contentRectangle.height)+contentRow.anchors.margins*2
@@ -108,8 +108,8 @@ Rectangle {
             Row {
                 id: contentRow
                 anchors.fill: parent
-                anchors.margins: 10
+                anchors.margins: Config.spacing
-                spacing: Config.spacing*4
+                spacing: Config.spacing
                 width: parent.width
 
                 // Left side: icon + icon information
@@ -131,12 +131,16 @@ Rectangle {
                             height: iconImage.width
                             anchors.horizontalCenter: parent.horizontalCenter
 
-                            source: (
+                            source: {
-                                notification.appIcon ? Quickshell.iconPath(notification.appIcon) :
+                                if (notification.image) return notification.image
-                                notification.image ? notification.image :
+                                if (notification.appIcon) return Quickshell.iconPath(notification.appIcon)
-                                Quickshell.iconPath(DesktopEntries.byId(notification.desktopEntry).icon) ? Quickshell.iconPath(DesktopEntries.byId(notification.desktopEntry).icon) :
+                                const entry = notification.desktopEntry ? DesktopEntries.byId(notification.desktopEntry) : null
-                                Quickshell.iconPath("notifications")
+                                if (entry && entry.icon) {
-                            )
+                                    const p = Quickshell.iconPath(entry.icon)
+                                    if (p && p !== "") return p
+                                }
+                                return Quickshell.iconPath("notifications")
+                            }
 
                             fillMode: Image.PreserveAspectFit
                             asynchronous: true
@@ -162,15 +166,28 @@ Rectangle {
                 // Right side: notification information
                 Rectangle{
                     id: contentRectangle
-                    width: childrenRect.width
+                    width: root.width - iconColumn.width - contentRow.spacing - contentRow.anchors.margins*2
-                    height: childrenRect.height
+                    height: iconRectangle.height
                     color: "transparent"
 
                     Column {
                         id: contentBodyColumn
-                        width: root.width - iconColumn.width
+                        width: parent.width
+                        height: Math.max(childrenRect.height, iconRectangle.height)
                         spacing: Config.spacing
 
+                        Text {
+                            id: bodyTitleText
+                            text: {
+                                if (notification.image) return notification.appName.charAt(0).toUpperCase() + notification.appName.slice(1)
+                                return "Message:"
+                            }
+                            font.family: Config.font
+                            font.bold: true
+                            font.pixelSize: closingMouseArea.height //Config.screen_height_to_font_small(screen.height)
+                            color: textColor
+                        }
+
                         Text {
                             id: bodyText
                             text: root.notification.body