notifs: add indicators for offscreen notifs

modules/lock/Status.qml

@@ -220,41 +220,9 @@ WrapperItem {
                 }
             }
 
-            StyledRect {
+            ExtraIndicator {
                 anchors.bottom: parent.bottom
-                anchors.right: parent.right
+                extra: Notifs.list.length - Config.lock.maxNotifs
-                anchors.margins: Appearance.padding.normal
-
-                color: Colours.palette.m3tertiaryContainer
-                radius: Appearance.rounding.small
-
-                implicitWidth: count.implicitWidth + Appearance.padding.normal * 2
-                implicitHeight: count.implicitHeight + Appearance.padding.small * 2
-
-                opacity: Notifs.list.length > Config.lock.maxNotifs ? 1 : 0
-                scale: Notifs.list.length > Config.lock.maxNotifs ? 1 : 0.8
-
-                StyledText {
-                    id: count
-
-                    anchors.centerIn: parent
-                    text: qsTr("+%1").arg(Notifs.list.length - Config.lock.maxNotifs)
-                    color: Colours.palette.m3onTertiaryContainer
-                }
-
-                Behavior on opacity {
-                    Anim {
-                        duration: Appearance.anim.durations.expressiveFastSpatial
-                        easing.bezierCurve: Appearance.anim.curves.standard
-                    }
-                }
-
-                Behavior on scale {
-                    Anim {
-                        duration: Appearance.anim.durations.expressiveFastSpatial
-                        easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
-                    }
-                }
             }
         }
     }

modules/notifications/Content.qml

@@ -147,6 +147,48 @@ Item {
                     property: "y"
                 }
             }
+
+            ExtraIndicator {
+                anchors.top: parent.top
+                extra: {
+                    const count = list.count;
+                    if (count === 0)
+                        return 0;
+
+                    const scrollY = list.contentY;
+
+                    let height = 0;
+                    for (let i = 0; i < count; i++) {
+                        height += (list.itemAtIndex(i)?.nonAnimHeight ?? 0) + Appearance.spacing.smaller;
+
+                        if (height - Appearance.spacing.smaller >= scrollY)
+                            return i;
+                    }
+
+                    return count;
+                }
+            }
+
+            ExtraIndicator {
+                anchors.bottom: parent.bottom
+                extra: {
+                    const count = list.count;
+                    if (count === 0)
+                        return 0;
+
+                    const scrollY = list.contentHeight - (list.contentY + list.height);
+
+                    let height = 0;
+                    for (let i = count - 1; i >= 0; i--) {
+                        height += (list.itemAtIndex(i)?.nonAnimHeight ?? 0) + Appearance.spacing.smaller;
+
+                        if (height - Appearance.spacing.smaller >= scrollY)
+                            return count - i - 1;
+                    }
+
+                    return 0;
+                }
+            }
         }
     }
 

widgets/ExtraIndicator.qml

@@ -0,0 +1,52 @@
+import "root:/services"
+import "root:/config"
+import QtQuick
+import QtQuick.Effects
+
+StyledRect {
+    required property int extra
+
+    anchors.right: parent.right
+    anchors.margins: Appearance.padding.normal
+
+    color: Colours.palette.m3tertiary
+    radius: Appearance.rounding.small
+
+    implicitWidth: count.implicitWidth + Appearance.padding.normal * 2
+    implicitHeight: count.implicitHeight + Appearance.padding.small * 2
+
+    layer.enabled: opacity > 0
+    layer.effect: MultiEffect {
+        shadowEnabled: true
+        blurMax: 10
+        shadowColor: Colours.palette.m3shadow
+    }
+
+    opacity: extra > 0 ? 1 : 0
+    scale: extra > 0 ? 1 : 0.5
+
+    StyledText {
+        id: count
+
+        anchors.centerIn: parent
+        animate: parent.opacity > 0
+        text: qsTr("+%1").arg(parent.extra)
+        color: Colours.palette.m3onTertiary
+    }
+
+    Behavior on opacity {
+        NumberAnimation {
+            duration: Appearance.anim.durations.expressiveFastSpatial
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.standard
+        }
+    }
+
+    Behavior on scale {
+        NumberAnimation {
+            duration: Appearance.anim.durations.expressiveFastSpatial
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Appearance.anim.curves.expressiveFastSpatial
+        }
+    }
+}