desktop: tell muted apps from suggestions, explain the limits

Muted and suggested apps were the same chip in two unlabelled rows. Each
row now has a caption; muted chips are red, suggestions dimmed and cut to
the eight most recent, newest first. The suggestions were already bounded
by the live and history caps. Limits gains a line saying what the two
numbers do, like the one under Timeouts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 27 insertions, 4 deletions

diff --git a/desktop/modules/notifications/NotificationsPage.qml b/desktop/modules/notifications/NotificationsPage.qml
index 37fa2a1..28bdcf4 100644
--- a/desktop/modules/notifications/NotificationsPage.qml
+++ b/desktop/modules/notifications/NotificationsPage.qml
@@ -72,6 +72,12 @@ Column {
     }
 
     Heading { text: "Limits" }
+    Text {
+        width: pg.width; wrapMode: Text.Wrap
+        text: "How many notifications are kept live and in history, 1 to 100 each. Past the live limit the oldest moves to history; past the history limit it is dropped."
+        color: Theme.overlay
+        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+    }
     Repeater {
         model: [["liveCap", "On screen"], ["historyCap", "History"]]
         Row {
@@ -142,26 +148,43 @@ Column {
         color: Theme.overlay
         font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
     }
+    // Two rows told apart by a caption and by look: muted apps in red, a
+    // click unmutes; recent apps dimmed, a click mutes.
+    Text {
+        text: pg.d.muted.length ? "Muted, click to unmute" : "No muted apps"
+        color: Theme.subtext
+        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4; bold: true }
+    }
     Flow {
         width: pg.width; spacing: 6
         Repeater {
             model: pg.d.muted
             Button {
                 required property string modelData
-                text: modelData; icon: ""
+                text: modelData; icon: "\uf00d"; danger: true
                 onClicked: pg.mod.edit({ muted: pg.d.muted.filter(a => a !== modelData) })
             }
         }
     }
-    // Apps seen in the queue and history, not yet muted, one click to add.
+    // Apps seen in the queue and history, newest first (both lists are), not
+    // yet muted. Bounded by the two caps already; the slice keeps the row short.
+    Text {
+        visible: recent.count > 0
+        topPadding: 6
+        text: "Recently seen, click to mute"
+        color: Theme.subtext
+        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4; bold: true }
+    }
     Flow {
         width: pg.width; spacing: 6
         Repeater {
+            id: recent
             model: [...new Set(Notify.queue.concat(Notify.history).map(n => n.app))]
-                .filter(a => a && pg.d.muted.indexOf(a) < 0).sort()
+                .filter(a => a && pg.d.muted.indexOf(a) < 0).slice(0, 8)
             Button {
                 required property string modelData
-                text: modelData; icon: ""
+                text: modelData; icon: "\uf067"
+                opacity: 0.7
                 onClicked: pg.mod.edit({ muted: pg.d.muted.concat([modelData]) })
             }
         }