lock/notifs: add empty placeholder

modules/lock/Content.qml

@@ -91,7 +91,9 @@ RowLayout {
             bottomRightRadius: Appearance.rounding.large
             radius: Appearance.rounding.small
             color: Colours.tPalette.m3surfaceContainer
-            NotifDock {}
+            NotifDock {
+                lock: root.lock
+            }
         }
     }
 

modules/lock/LockSurface.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.components.effects
 import qs.services
 import qs.config
 import Quickshell.Wayland
@@ -14,6 +13,7 @@ WlSessionLockSurface {
     required property WlSessionLock lock
     required property Pam pam
 
+    readonly property bool animating: initAnim.running || unlockAnim.running
     property bool locked
 
     Component.onCompleted: locked = true
@@ -89,6 +89,8 @@ WlSessionLockSurface {
     }
 
     ParallelAnimation {
+        id: initAnim
+
         running: true
 
         Anim {

modules/lock/NotifDock.qml

@@ -1,5 +1,8 @@
+pragma ComponentBehavior: Bound
+
 import qs.components
 import qs.components.containers
+import qs.components.effects
 import qs.services
 import qs.config
 import Quickshell
@@ -10,6 +13,8 @@ import QtQuick.Layouts
 ColumnLayout {
     id: root
 
+    required property var lock
+
     anchors.fill: parent
     anchors.margins: Appearance.padding.large
 
@@ -17,18 +22,61 @@ ColumnLayout {
 
     StyledText {
         Layout.fillWidth: true
-        text: qsTr("%1 notification%2").arg(Notifs.list.length || "No").arg(Notifs.list.length === 1 ? "" : "s")
+        text: Notifs.list.length > 0 ? qsTr("%1 notification%2").arg(Notifs.list.length).arg(Notifs.list.length === 1 ? "" : "s") : qsTr("Notifications")
         color: Colours.palette.m3outline
+        font.family: Appearance.font.family.mono
+        font.weight: 500
         elide: Text.ElideRight
     }
 
     ClippingRectangle {
+        id: clipRect
+
         Layout.fillWidth: true
         Layout.fillHeight: true
 
         radius: Appearance.rounding.small
         color: "transparent"
 
+        Loader {
+            anchors.centerIn: parent
+            asynchronous: true
+            active: opacity > 0
+            opacity: root.lock.animating || Notifs.list.length > 0 ? 0 : 1
+
+            sourceComponent: ColumnLayout {
+                spacing: Appearance.spacing.large
+
+                Image {
+                    asynchronous: true
+                    source: `file://${Quickshell.shellDir}/assets/dino.png`
+                    fillMode: Image.PreserveAspectFit
+                    sourceSize.width: root.lock.animating ? 0 : clipRect.width * 0.8
+
+                    layer.enabled: true
+                    layer.effect: Colouriser {
+                        colorizationColor: Colours.palette.m3outlineVariant
+                        brightness: 1
+                    }
+                }
+
+                StyledText {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: qsTr("No Notifications")
+                    color: Colours.palette.m3outlineVariant
+                    font.pointSize: Appearance.font.size.large
+                    font.family: Appearance.font.family.mono
+                    font.weight: 500
+                }
+            }
+
+            Behavior on opacity {
+                Anim {
+                    duration: Appearance.anim.durations.extraLarge
+                }
+            }
+        }
+
         StyledListView {
             anchors.fill: parent
 

modules/lock/NotifGroup.qml

@@ -54,6 +54,8 @@ StyledRect {
                     fillMode: Image.PreserveAspectCrop
                     cache: false
                     asynchronous: true
+                    width: Config.notifs.sizes.image
+                    height: Config.notifs.sizes.image
                 }
             }
 
@@ -123,10 +125,13 @@ StyledRect {
         }
 
         ColumnLayout {
+            Layout.topMargin: -Appearance.padding.small
+            Layout.bottomMargin: -Appearance.padding.small / 2 - (root.expanded ? 0 : spacing)
             Layout.fillWidth: true
             spacing: Math.round(Appearance.spacing.small / 2)
 
             RowLayout {
+                Layout.bottomMargin: -parent.spacing
                 Layout.fillWidth: true
                 spacing: Appearance.spacing.smaller
 
@@ -139,6 +144,7 @@ StyledRect {
                 }
 
                 StyledText {
+                    animate: true
                     text: root.notifs[0].timeStr
                     color: Colours.palette.m3outline
                     font.pointSize: Appearance.font.size.small