internal: use layer.effect

Also use clipping rect for wallpaper item

modules/areapicker/Picker.qml

@@ -184,11 +184,18 @@ MouseArea {
     }
 
     StyledRect {
-        id: background
-
         anchors.fill: parent
         color: Colours.palette.m3secondaryContainer
-        visible: false
+        opacity: 0.3
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskSource: selectionWrapper
+            maskEnabled: true
+            maskInverted: true
+            maskSpreadAtMin: 1
+            maskThresholdMin: 0.5
+        }
     }
 
     Item {
@@ -209,17 +216,6 @@ MouseArea {
         }
     }
 
-    MultiEffect {
-        anchors.fill: parent
-        source: background
-        maskSource: selectionWrapper
-        maskEnabled: true
-        maskInverted: true
-        maskSpreadAtMin: 1
-        maskThresholdMin: 0.5
-        opacity: 0.3
-    }
-
     Rectangle {
         color: "transparent"
         radius: root.realRounding > 0 ? root.realRounding + root.realBorderWidth : 0

modules/drawers/Border.qml

@@ -1,7 +1,8 @@
+pragma ComponentBehavior: Bound
+
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
-import Quickshell
 import QtQuick
 import QtQuick.Effects
 
@@ -13,11 +14,17 @@ Item {
     anchors.fill: parent
 
     StyledRect {
-        id: rect
-
         anchors.fill: parent
         color: Colours.alpha(Colours.palette.m3surface, false)
-        visible: false
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskSource: mask
+            maskEnabled: true
+            maskInverted: true
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
     }
 
     Item {
@@ -34,14 +41,4 @@ Item {
             radius: Config.border.rounding
         }
     }
-
-    MultiEffect {
-        anchors.fill: parent
-        maskEnabled: true
-        maskInverted: true
-        maskSource: mask
-        source: rect
-        maskThresholdMin: 0.5
-        maskSpreadAtMin: 1
-    }
 }

modules/drawers/Drawers.qml

@@ -86,10 +86,13 @@ Variants {
             }
 
             Item {
-                id: background
-
                 anchors.fill: parent
-                visible: false
+                layer.enabled: true
+                layer.effect: MultiEffect {
+                    shadowEnabled: true
+                    blurMax: 15
+                    shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7)
+                }
 
                 Border {
                     bar: bar
@@ -101,14 +104,6 @@ Variants {
                 }
             }
 
-            MultiEffect {
-                anchors.fill: source
-                source: background
-                shadowEnabled: true
-                blurMax: 15
-                shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7)
-            }
-
             PersistentProperties {
                 id: visibilities
 

modules/launcher/WallpaperItem.qml

@@ -2,6 +2,7 @@ import "root:/widgets"
 import "root:/services"
 import "root:/config"
 import Quickshell
+import Quickshell.Widgets
 import QtQuick
 import QtQuick.Effects
 
@@ -32,34 +33,10 @@ StyledRect {
         }
     }
 
-    CachingImage {
-        id: image
-
-        anchors.horizontalCenter: parent.horizontalCenter
-        y: Appearance.padding.large
-
-        visible: false
-        path: root.modelData.path
-        smooth: !root.PathView.view.moving
-
-        width: Config.launcher.sizes.wallpaperWidth
-        height: width / 16 * 9
-    }
-
-    Rectangle {
-        id: mask
-
-        layer.enabled: true
-        layer.smooth: true
-        visible: false
-        anchors.fill: image
-        radius: Appearance.rounding.normal
-    }
-
     RectangularShadow {
         opacity: root.PathView.isCurrentItem ? 0.7 : 0
-        anchors.fill: mask
+        anchors.fill: image
-        radius: mask.radius
+        radius: image.radius
         color: Colours.palette.m3shadow
         blur: 10
         spread: 3
@@ -69,13 +46,23 @@ StyledRect {
         }
     }
 
-    MultiEffect {
+    ClippingRectangle {
-        anchors.fill: image
+        id: image
-        source: image
+
-        maskEnabled: true
+        anchors.horizontalCenter: parent.horizontalCenter
-        maskSource: mask
+        y: Appearance.padding.large
-        maskSpreadAtMin: 1
+        color: "transparent"
-        maskThresholdMin: 0.5
+        radius: Appearance.rounding.normal
+
+        implicitWidth: Config.launcher.sizes.wallpaperWidth
+        implicitHeight: implicitWidth / 16 * 9
+
+        CachingImage {
+            path: root.modelData.path
+            smooth: !root.PathView.view.moving
+
+            anchors.fill: parent
+        }
     }
 
     StyledText {

modules/lock/Backgrounds.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import "root:/widgets"
 import "root:/services"
 import "root:/config"
@@ -36,7 +38,15 @@ Item {
 
         anchors.fill: parent
         color: Colours.alpha(Colours.palette.m3surface, false)
-        visible: false
+
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            maskEnabled: true
+            maskInverted: true
+            maskSource: mask
+            maskThresholdMin: 0.5
+            maskSpreadAtMin: 1
+        }
     }
 
     Item {
@@ -59,16 +69,6 @@ Item {
         }
     }
 
-    MultiEffect {
-        anchors.fill: parent
-        source: base
-        maskEnabled: true
-        maskInverted: true
-        maskSource: mask
-        maskThresholdMin: 0.5
-        maskSpreadAtMin: 1
-    }
-
     Shape {
         anchors.fill: parent
         anchors.margins: Math.floor(innerMask.anchors.margins)

modules/lock/LockSurface.qml

@@ -40,30 +40,25 @@ WlSessionLockSurface {
     }
 
     ScreencopyView {
-        id: screencopy
-
-        anchors.fill: parent
-        captureSource: root.screen
-        visible: false
-    }
-
-    MultiEffect {
         id: background
 
         anchors.fill: parent
+        captureSource: root.screen
 
-        source: screencopy
+        layer.enabled: true
-        autoPaddingEnabled: false
+        layer.effect: MultiEffect {
-        blurEnabled: true
+            autoPaddingEnabled: false
-        blur: root.locked ? 1 : 0
+            blurEnabled: true
-        blurMax: 64
+            blur: root.locked ? 1 : 0
-        blurMultiplier: 1
+            blurMax: 64
+            blurMultiplier: 1
 
-        Behavior on opacity {
+            Behavior on blur {
-            Anim {}
+                Anim {}
+            }
         }
 
-        Behavior on blur {
+        Behavior on opacity {
             Anim {}
         }
     }
@@ -79,15 +74,13 @@ WlSessionLockSurface {
         statusHeight: status.item?.nonAnimHeight ?? 0
         isNormal: root.screen.width > Config.lock.sizes.smallScreenWidth
         isLarge: root.screen.width > Config.lock.sizes.largeScreenWidth
-        visible: false
-    }
 
-    MultiEffect {
+        layer.enabled: true
-        anchors.fill: source
+        layer.effect: MultiEffect {
-        source: backgrounds
+            shadowEnabled: true
-        shadowEnabled: true
+            blurMax: 15
-        blurMax: 15
+            shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7)
-        shadowColor: Qt.alpha(Colours.palette.m3shadow, 0.7)
+        }
     }
 
     Clock {

modules/lock/Notification.qml

@@ -123,26 +123,19 @@ StyledRect {
                 asynchronous: true
 
                 anchors.centerIn: parent
-                visible: !root.modelData.appIcon.endsWith("symbolic")
 
                 width: Math.round(parent.width * 0.6)
                 height: Math.round(parent.width * 0.6)
 
                 sourceComponent: IconImage {
-                    implicitSize: Math.round(parent.width * 0.6)
+                    anchors.fill: parent
                     source: Quickshell.iconPath(root.modelData.appIcon)
                     asynchronous: true
-                }
-            }
 
-            Loader {
+                    layer.enabled: root.modelData.appIcon.endsWith("symbolic")
-                active: root.modelData.appIcon.endsWith("symbolic")
+                    layer.effect: Colouriser {
-                asynchronous: true
+                        colorizationColor: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
-                anchors.fill: icon
+                    }
-
-                sourceComponent: Colouriser {
-                    source: icon
-                    colorizationColor: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
                 }
             }
 

modules/notifications/Notification.qml

@@ -151,26 +151,19 @@ StyledRect {
                     asynchronous: true
 
                     anchors.centerIn: parent
-                    visible: !root.modelData.appIcon.endsWith("symbolic")
 
                     width: Math.round(parent.width * 0.6)
                     height: Math.round(parent.width * 0.6)
 
                     sourceComponent: IconImage {
-                        implicitSize: Math.round(parent.width * 0.6)
+                        anchors.fill: parent
                         source: Quickshell.iconPath(root.modelData.appIcon)
                         asynchronous: true
-                    }
-                }
 
-                Loader {
+                        layer.enabled: root.modelData.appIcon.endsWith("symbolic")
-                    active: root.modelData.appIcon.endsWith("symbolic")
+                        layer.effect: Colouriser {
-                    asynchronous: true
+                            colorizationColor: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
-                    anchors.fill: icon
+                        }
-
-                    sourceComponent: Colouriser {
-                        source: icon
-                        colorizationColor: root.modelData.urgency === NotificationUrgency.Critical ? Colours.palette.m3onError : root.modelData.urgency === NotificationUrgency.Low ? Colours.palette.m3onSurface : Colours.palette.m3onTertiaryContainer
                     }
                 }