NotificationHistoryPanel: add expand option for long notification text (fixes #408)

Assets/Translations/de.json

@@ -1056,7 +1056,8 @@
     "panel": {
       "title": "Benachrichtigungen",
       "no-notifications": "Keine Benachrichtigungen",
-      "description": "Ihre Benachrichtigungen werden hier angezeigt, sobald sie eintreffen."
+      "description": "Ihre Benachrichtigungen werden hier angezeigt, sobald sie eintreffen.",
+      "click-to-expand": "Zum Erweitern klicken"
     }
   },
   "wallpaper": {

Assets/Translations/en.json

@@ -1037,7 +1037,8 @@
     "panel": {
       "title": "Notifications",
       "no-notifications": "No notifications",
-      "description": "Your notifications will show up here as they arrive."
+      "description": "Your notifications will show up here as they arrive.",
+      "click-to-expand": "Click to expand"
     }
   },
   "wallpaper": {

Assets/Translations/es.json

@@ -1035,7 +1035,8 @@
     "panel": {
       "title": "Notificaciones",
       "no-notifications": "No hay notificaciones",
-      "description": "Tus notificaciones aparecerán aquí a medida que lleguen."
+      "description": "Tus notificaciones aparecerán aquí a medida que lleguen.",
+      "click-to-expand": "Haz clic para expandir"
     }
   },
   "wallpaper": {

Assets/Translations/fr.json

@@ -1035,7 +1035,8 @@
     "panel": {
       "title": "Notifications",
       "no-notifications": "Aucune notification",
-      "description": "Vos notifications apparaîtront ici à mesure qu'elles arriveront."
+      "description": "Vos notifications apparaîtront ici à mesure qu'elles arriveront.",
+      "click-to-expand": "Cliquez pour développer"
     }
   },
   "wallpaper": {

Assets/Translations/pt.json

@@ -1035,7 +1035,8 @@
     "panel": {
       "title": "Notificações",
       "no-notifications": "Nenhuma notificação",
-      "description": "Suas notificações aparecerão aqui assim que chegarem."
+      "description": "Suas notificações aparecerão aqui assim que chegarem.",
+      "click-to-expand": "Clique para expandir"
     }
   },
   "wallpaper": {

Assets/Translations/zh-CN.json

@@ -1035,7 +1035,8 @@
     "panel": {
       "title": "通知",
       "no-notifications": "无通知",
-      "description": "您的通知将在到达时显示在此处。"
+      "description": "您的通知将在到达时显示在此处。",
+      "click-to-expand": "点击展开"
     }
   },
   "wallpaper": {

Modules/Notification/NotificationHistoryPanel.qml

@@ -129,8 +129,12 @@ NPanel {
         boundsBehavior: Flickable.StopAtBounds
         visible: NotificationService.historyList.count > 0
 
+        // Track which notification is expanded
+        property string expandedId: ""
+
         delegate: Rectangle {
           property string notificationId: model.id
+          property bool isExpanded: notificationList.expandedId === notificationId
 
           width: notificationList.width
           height: notificationLayout.implicitHeight + (Style.marginM * scaling * 2)
@@ -139,6 +143,13 @@ NPanel {
           border.color: Qt.alpha(Color.mOutline, Style.opacityMedium)
           border.width: Math.max(1, Style.borderS * scaling)
 
+          Behavior on height {
+            NumberAnimation {
+              duration: Style.animationNormal
+              easing.type: Easing.InOutQuad
+            }
+          }
+
           // Smooth color transition on hover
           Behavior on color {
             ColorAnimation {
@@ -146,6 +157,21 @@ NPanel {
             }
           }
 
+          // Click to expand/collapse
+          MouseArea {
+            anchors.fill: parent
+            // Don't capture clicks on the delete button
+            anchors.rightMargin: 48 * scaling
+            onClicked: {
+              if (notificationList.expandedId === notificationId) {
+                notificationList.expandedId = ""
+              } else {
+                notificationList.expandedId = notificationId
+              }
+            }
+            cursorShape: Qt.PointingHandCursor
+          }
+
           RowLayout {
             id: notificationLayout
             anchors.fill: parent
@@ -174,6 +200,7 @@ NPanel {
               Layout.fillWidth: true
               Layout.alignment: Qt.AlignTop
               spacing: Style.marginXS * scaling
+              Layout.rightMargin: -(Style.marginM + Style.baseWidgetSize * 0.6) * scaling
 
               // Header row with app name and timestamp
               RowLayout {
@@ -216,6 +243,7 @@ NPanel {
 
               // Summary
               NText {
+                id: summaryText
                 text: model.summary || I18n.tr("general.no-summary")
                 pointSize: Style.fontSizeM * scaling
                 font.weight: Font.Medium
@@ -223,22 +251,53 @@ NPanel {
                 textFormat: Text.PlainText
                 wrapMode: Text.Wrap
                 Layout.fillWidth: true
-                maximumLineCount: 2
+                maximumLineCount: isExpanded ? 999 : 2
                 elide: Text.ElideRight
               }
 
               // Body
               NText {
+                id: bodyText
                 text: model.body || ""
                 pointSize: Style.fontSizeS * scaling
                 color: Color.mOnSurfaceVariant
                 textFormat: Text.PlainText
                 wrapMode: Text.Wrap
                 Layout.fillWidth: true
-                maximumLineCount: 3
+                maximumLineCount: isExpanded ? 999 : 3
                 elide: Text.ElideRight
                 visible: text.length > 0
               }
+
+              // Spacer for expand indicator
+              Item {
+                Layout.fillWidth: true
+                Layout.preferredHeight: (!isExpanded && (summaryText.truncated || bodyText.truncated)) ? (Style.marginS * scaling) : 0
+              }
+
+              // Expand indicator
+              RowLayout {
+                Layout.fillWidth: true
+                visible: !isExpanded && (summaryText.truncated || bodyText.truncated)
+                spacing: Style.marginXS * scaling
+
+                Item {
+                  Layout.fillWidth: true
+                }
+
+                NText {
+                  text: I18n.tr("notifications.panel.click-to-expand") || "Click to expand"
+                  pointSize: Style.fontSizeXS * scaling
+                  color: Color.mPrimary
+                  font.weight: Font.Medium
+                }
+
+                NIcon {
+                  icon: "chevron-down"
+                  pointSize: Style.fontSizeS * scaling
+                  color: Color.mPrimary
+                }
+              }
             }
 
             // Delete button

Services/MatugenTemplates.qml

@@ -14,7 +14,7 @@ Singleton {
   // Build the base TOML using current settings
   function buildConfigToml() {
     var lines = []
-    var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light";
+    var mode = Settings.data.colorSchemes.darkMode ? "dark" : "light"
     lines.push("[config]")
 
     if (Settings.data.colorSchemes.useWallpaperColors) {
@@ -52,12 +52,12 @@ Singleton {
       lines.push("\n[templates.gtk3]")
       lines.push('input_path = "' + Quickshell.shellDir + '/Assets/MatugenTemplates/gtk.css"')
       lines.push('output_path = "~/.config/gtk-3.0/gtk.css"')
-      lines.push("post_hook = 'gsettings set org.gnome.desktop.interface color-scheme prefer-" + mode + "'");
+      lines.push("post_hook = 'gsettings set org.gnome.desktop.interface color-scheme prefer-" + mode + "'")
 
       lines.push("\n[templates.gtk4]")
       lines.push('input_path = "' + Quickshell.shellDir + '/Assets/MatugenTemplates/gtk.css"')
       lines.push('output_path = "~/.config/gtk-4.0/gtk.css"')
-      lines.push("post_hook = 'gsettings set org.gnome.desktop.interface color-scheme prefer-" + mode + "'");
+      lines.push("post_hook = 'gsettings set org.gnome.desktop.interface color-scheme prefer-" + mode + "'")
     }
 
     if (Settings.data.templates.qt) {