make notif empty placeholder icon wrapped

dots/.config/quickshell/ii/modules/common/widgets/PagePlaceholder.qml

@@ -11,6 +11,7 @@ Item {
     property alias title: widgetNameText.text
     property alias description: widgetDescriptionText.text
     property alias shape: shapeWidget.shape
+    property alias descriptionHorizontalAlignment: widgetDescriptionText.horizontalAlignment
 
     opacity: shown ? 1 : 0
     visible: opacity > 0
@@ -31,11 +32,13 @@ Item {
         MaterialShapeWrappedMaterialSymbol {
             id: shapeWidget
             Layout.alignment: Qt.AlignHCenter
-            iconSize: 60
+            padding: 12
+            iconSize: 56
             rotation: -60 * (1 - root.opacity)
         }
         StyledText {
             id: widgetNameText
+            visible: title !== ""
             Layout.alignment: Qt.AlignHCenter
             font.pixelSize: Appearance.font.pixelSize.larger
             font.family: Appearance.font.family.title
@@ -44,6 +47,7 @@ Item {
         }
         StyledText {
             id: widgetDescriptionText
+            visible: description !== ""
             Layout.fillWidth: true
             font.pixelSize: Appearance.font.pixelSize.small
             color: Appearance.m3colors.m3outline

dots/.config/quickshell/ii/modules/sidebarRight/notifications/NotificationList.qml

@@ -31,37 +31,12 @@ Item {
     }
 
     // Placeholder when list is empty
-    Item {
+    PagePlaceholder {
-        anchors.fill: listview
+        shown: Notifications.list.length === 0
-
+        icon: "notifications_active"
-        visible: opacity > 0
+        description: Translation.tr("Nothing")
-        opacity: (Notifications.list.length === 0) ? 1 : 0
+        shape: MaterialShape.Shape.Ghostish
-
+        descriptionHorizontalAlignment: Text.AlignHCenter
-        Behavior on opacity {
-            NumberAnimation {
-                duration: Appearance.animation.menuDecel.duration
-                easing.type: Appearance.animation.menuDecel.type
-            }
-        }
-
-        ColumnLayout {
-            anchors.centerIn: parent
-            spacing: 5
-
-            MaterialSymbol {
-                Layout.alignment: Qt.AlignHCenter
-                iconSize: 55
-                color: Appearance.m3colors.m3outline
-                text: "notifications_active"
-            }
-            StyledText {
-                Layout.alignment: Qt.AlignHCenter
-                font.pixelSize: Appearance.font.pixelSize.normal
-                color: Appearance.m3colors.m3outline
-                horizontalAlignment: Text.AlignHCenter
-                text: Translation.tr("No notifications")
-            }
-        }
     }
 
     ButtonGroup {