NotificationHistory: fully converted to Layout

Modules/Notification/NotificationHistoryPanel.qml

@@ -25,6 +25,7 @@ NPanel {
       anchors.margins: Style.marginL * scaling
       spacing: Style.marginM * scaling
 
+      // Header section
       RowLayout {
         Layout.fillWidth: true
         spacing: Style.marginM * scaling
@@ -78,38 +79,36 @@ NPanel {
       }
 
       // Empty state when no notifications
-      Item {
+      ColumnLayout {
         Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.alignment: Qt.AlignCenter
         visible: NotificationService.historyModel.count === 0
+        spacing: Style.marginM * scaling
 
-        ColumnLayout {
-          anchors.centerIn: parent
-          spacing: Style.marginM * scaling
+        NIcon {
+          text: "notifications_off"
+          font.pointSize: Style.fontSizeXXXL * scaling
+          color: Color.mOnSurface
+          Layout.alignment: Qt.AlignHCenter
+        }
 
-          NIcon {
-            text: "notifications_off"
-            font.pointSize: Style.fontSizeXXXL * scaling
-            color: Color.mOnSurface
-            Layout.alignment: Qt.AlignHCenter
-          }
+        NText {
+          text: "No notifications"
+          font.pointSize: Style.fontSizeL * scaling
+          color: Color.mOnSurface
+          Layout.alignment: Qt.AlignHCenter
+        }
 
-          NText {
-            text: "No notifications"
-            font.pointSize: Style.fontSizeL * scaling
-            color: Color.mOnSurface
-            Layout.alignment: Qt.AlignHCenter
-          }
-
-          NText {
-            text: "Your notifications will show up here as they arrive."
-            font.pointSize: Style.fontSizeNormal * scaling
-            color: Color.mOnSurfaceVariant
-            Layout.alignment: Qt.AlignHCenter
-          }
+        NText {
+          text: "Your notifications will show up here as they arrive."
+          font.pointSize: Style.fontSizeNormal * scaling
+          color: Color.mOnSurfaceVariant
+          Layout.alignment: Qt.AlignHCenter
         }
       }
 
+      // Notification list
       ListView {
         id: notificationList
         Layout.fillWidth: true
@@ -121,21 +120,21 @@ NPanel {
         visible: NotificationService.historyModel.count > 0
 
         delegate: Rectangle {
-          width: notificationList ? notificationList.width : 380 * scaling
-          height: Math.max(80, notificationContent.height + 30)
+          width: notificationList.width
+          height: notificationLayout.implicitHeight + (Style.marginM * scaling * 2)
           radius: Style.radiusM * scaling
           color: notificationMouseArea.containsMouse ? Color.mSecondary : Color.mSurfaceVariant
+          border.color: Qt.alpha(Color.mOutline, Style.opacityMedium)
+          border.width: Math.max(1, Style.borderS * scaling)
 
           RowLayout {
-            anchors {
-              fill: parent
-              margins: Style.marginM * scaling
-            }
+            id: notificationLayout
+            anchors.fill: parent
+            anchors.margins: Style.marginM * scaling
             spacing: Style.marginM * scaling
 
-            // Notification content
-            Column {
-              id: notificationContent
+            // Notification content column
+            ColumnLayout {
               Layout.fillWidth: true
               Layout.alignment: Qt.AlignVCenter
               spacing: Style.marginXXS * scaling
@@ -146,7 +145,8 @@ NPanel {
                 font.weight: Font.Medium
                 color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mPrimary
                 wrapMode: Text.Wrap
-                width: parent.width - 60
+                Layout.fillWidth: true
+                Layout.maximumWidth: parent.width
                 maximumLineCount: 2
                 elide: Text.ElideRight
               }
@@ -156,23 +156,27 @@ NPanel {
                 font.pointSize: Style.fontSizeXS * scaling
                 color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
                 wrapMode: Text.Wrap
-                width: parent.width - 60
+                Layout.fillWidth: true
+                Layout.maximumWidth: parent.width
                 maximumLineCount: 3
                 elide: Text.ElideRight
+                visible: text.length > 0
               }
 
               NText {
                 text: NotificationService.formatTimestamp(timestamp)
                 font.pointSize: Style.fontSizeXS * scaling
                 color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
+                Layout.fillWidth: true
               }
             }
 
-            // Trash icon button
+            // Delete button
             NIconButton {
               icon: "delete"
               tooltipText: "Delete notification"
               sizeRatio: 0.7
+              Layout.alignment: Qt.AlignTop
 
               onClicked: {
                 Logger.log("NotificationHistory", "Removing notification:", summary)
@@ -185,7 +189,7 @@ NPanel {
           MouseArea {
             id: notificationMouseArea
             anchors.fill: parent
-            anchors.rightMargin: Style.marginL * 3 * scaling
+            anchors.rightMargin: Style.marginXL * scaling
             hoverEnabled: true
           }
         }