From 49e69fb63fe18cf85597655ca3b6b37abddab0cf Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Tue, 15 Sep 2026 17:14:02 +0200
Subject: feat(desktop): make the drawer notifications readable

Each row shows when the notification appeared ("Sep 15 14:32", from created), sits on its own rounded card with space between rows instead of reading as one list, and uses the balloon's 16/18/16 sizing rather than 13/11. The close target grows to a 32px hit area in the row and the balloon, since a 20px box was hard to hit.
---
 desktop/NotificationHistory.qml |  2 +-
 desktop/NotificationList.qml    |  2 +-
 desktop/NotificationRow.qml     | 52 +++++++++++++++++++++++++++++++++--------
 3 files changed, 44 insertions(+), 12 deletions(-)

(limited to 'desktop')

diff --git a/desktop/NotificationHistory.qml b/desktop/NotificationHistory.qml
index 3fdb85d..8499192 100644
--- a/desktop/NotificationHistory.qml
+++ b/desktop/NotificationHistory.qml
@@ -17,7 +17,7 @@ import QtQuick
 Column {
     id: page
 
-    spacing: 4
+    spacing: 8
 
     Item {
         width: parent.width
diff --git a/desktop/NotificationList.qml b/desktop/NotificationList.qml
index 9c8ae26..9fe4328 100644
--- a/desktop/NotificationList.qml
+++ b/desktop/NotificationList.qml
@@ -65,7 +65,7 @@ Item {
             Column {
                 id: col
                 width: flick.width
-                spacing: 2
+                spacing: 8
 
                 Repeater {
                     model: Notify.queue
diff --git a/desktop/NotificationRow.qml b/desktop/NotificationRow.qml
index 7aff362..04b0c0d 100644
--- a/desktop/NotificationRow.qml
+++ b/desktop/NotificationRow.qml
@@ -13,16 +13,32 @@ import QtQuick
 
 // One notification in the drawer: app, summary and body. Live rows close with
 // the X and click through to their actions; a history row is inert.
-Item {
+Rectangle {
     id: row
 
+    radius: 8
+    color: Qt.alpha(Theme.surface, 0.6)
+    border.width: 1
+    border.color: Qt.alpha(Theme.text, 0.08)
+
     required property var notification
     // A history row has no live client: no X, and a click does nothing.
     property bool live: true
 
     readonly property bool inert: row.notification.expires !== 0 && Date.now() >= row.notification.expires
 
-    implicitHeight: texts.implicitHeight + 16
+    implicitHeight: texts.implicitHeight + 24
+
+    // "Sep 15 14:32" from the notification's created epoch-ms, local time. No
+    // year: the history ring is only 20 entries, so everything here is recent.
+    function stamp(ms) {
+        const d = new Date(ms);
+        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+        function pad(n) { return (n < 10 ? "0" : "") + n; }
+        return months[d.getMonth()] + " " + d.getDate() + " "
+            + pad(d.getHours()) + ":" + pad(d.getMinutes());
+    }
 
     MouseArea {
         anchors.fill: parent
@@ -44,18 +60,33 @@ Item {
         id: texts
         anchors {
             left: parent.left
+            leftMargin: 12
             right: closeBtn.visible ? closeBtn.left : parent.right
             rightMargin: 10
             verticalCenter: parent.verticalCenter
         }
         spacing: 2
 
-        Text {
+        Row {
+            id: head
             width: parent.width
-            text: (row.notification.app || "") + (row.notification.summary ? "  " + row.notification.summary : "")
-            elide: Text.ElideRight
-            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 3 }
-            color: Theme.text
+            spacing: 8
+
+            Text {
+                width: head.width - (stamp.visible ? stamp.implicitWidth + head.spacing : 0)
+                text: (row.notification.app || "") + (row.notification.summary ? "  " + row.notification.summary : "")
+                elide: Text.ElideRight
+                font { family: Theme.fontFamily; pixelSize: Theme.fontSize + 2 }
+                color: Theme.text
+            }
+
+            Text {
+                id: stamp
+                visible: row.notification.created > 0
+                text: visible ? row.stamp(row.notification.created) : ""
+                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                color: Theme.overlay
+            }
         }
 
         Text {
@@ -66,7 +97,7 @@ Item {
             wrapMode: Text.WordWrap
             maximumLineCount: 2
             elide: Text.ElideRight
-            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 5 }
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize }
             color: Theme.subtext
         }
     }
@@ -74,18 +105,19 @@ Item {
     Text {
         id: closeBtn
         visible: row.live
-        anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+        anchors { right: parent.right; rightMargin: 8; verticalCenter: parent.verticalCenter }
         width: 20
         height: 20
         text: "\uf00d"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-        font { family: Theme.iconFamily; pixelSize: 11 }
+        font { family: Theme.iconFamily; pixelSize: 13 }
         color: closeArea.containsMouse ? Theme.red : Theme.subtext
 
         MouseArea {
             id: closeArea
             anchors.fill: parent
+            anchors.margins: -6
             hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: Notify.close(row.notification.id)
-- 
cgit v1.2.3