add scroll edge fade to some scrolled windows

.config/quickshell/ii/modules/background/CookieClock.qml

@@ -88,7 +88,7 @@ Item {
             delegate: StyledText {
                 required property string modelData
 
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.horizontalCenter: parent?.horizontalCenter
                 font {
                     pixelSize: modelData.match(/am|pm/i) ? 26 : 68
                     family: Appearance.font.family.expressive

.config/quickshell/ii/modules/common/widgets/NotificationItem.qml

@@ -4,6 +4,7 @@ import qs.services
 import qs.modules.common.functions
 import QtQuick
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import Quickshell
 import Quickshell.Hyprland
 import Quickshell.Services.Notifications
@@ -220,12 +221,30 @@ Item { // Notification item area
                     PointingHandLinkHover {}
                 }
 
+                Item {
+                    Layout.fillWidth: true
+                    implicitWidth: actionsFlickable.implicitWidth
+                    implicitHeight: actionsFlickable.implicitHeight
+
+                    layer.enabled: true
+                    layer.effect: OpacityMask {
+                        maskSource: Rectangle {
+                            width: actionsFlickable.width
+                            height: actionsFlickable.height
+                            radius: Appearance.rounding.small
+                        }
+                    }
+
+                    ScrollEdgeFade {
+                        target: actionsFlickable
+                        vertical: false
+                    }
+
                     StyledFlickable { // Notification actions
                         id: actionsFlickable
-                    Layout.fillWidth: true
+                        anchors.fill: parent
                         implicitHeight: actionRowLayout.implicitHeight
                         contentWidth: actionRowLayout.implicitWidth
-                    clip: !onlyNotification
 
                         Behavior on opacity {
                             animation: Appearance.animation.elementMoveFast.numberAnimation.createObject(this)
@@ -311,3 +330,4 @@ Item { // Notification item area
             }
         }
     }
+}

.config/quickshell/ii/modules/common/widgets/ScrollEdgeFade.qml

@@ -0,0 +1,59 @@
+import QtQuick
+import qs.modules.common
+import qs.modules.common.functions
+
+Item {
+    id: root
+    z: 99
+    required property Item target
+    property real fadeSize: Appearance.m3colors.darkmode ? 40 : 20
+    property color color: ColorUtils.transparentize(Appearance.colors.colShadow, Appearance.m3colors.darkmode ? 0 : 0.7)
+    property bool vertical: true
+
+    anchors.fill: target
+
+    EndGradient {
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: vertical ? parent.right : undefined
+            bottom: vertical ? undefined : parent.bottom
+        }
+        shown: !(root.vertical ? root.target.atYBeginning : root.target.atXBeginning)
+    }
+
+    EndGradient {
+        anchors {
+            bottom: parent.bottom
+            right: parent.right
+            left: vertical ? parent.left : undefined
+            top: vertical ? undefined : parent.top
+        }
+        shown: !(root.vertical ? root.target.atYEnd : root.target.atXEnd)
+        rotation: 180
+    }
+
+    component EndGradient: Rectangle {
+        required property bool shown
+        height: vertical ? root.fadeSize : parent.height
+        width: vertical ? parent.width : root.fadeSize
+
+        opacity: shown ? 1 : 0
+        visible: opacity > 0
+        Behavior on opacity {
+            animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+
+        gradient: Gradient {
+            orientation: root.vertical ? Gradient.Vertical : Gradient.Horizontal
+            GradientStop {
+                position: 0.0
+                color: root.color
+            }
+            GradientStop {
+                position: 1.0
+                color: ColorUtils.transparentize(root.color)
+            }
+        }
+    }
+}

.config/quickshell/ii/modules/common/widgets/StyledFlickable.qml

@@ -50,4 +50,5 @@ Flickable {
             root.scrollTargetY = root.contentY;
         }
     }
+
 }

.config/quickshell/ii/modules/sidebarLeft/AiChat.qml

@@ -308,6 +308,20 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
         Item { // Messages
             Layout.fillWidth: true
             Layout.fillHeight: true
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width: swipeView.width
+                    height: swipeView.height
+                    radius: Appearance.rounding.small
+                }
+            }
+
+            ScrollEdgeFade {
+                target: messageListView
+                vertical: true
+            }
+
             StyledListView { // Message list
                 id: messageListView
                 anchors.fill: parent
@@ -318,8 +332,8 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
                 mouseScrollFactor: Config.options.interactions.scrolling.mouseScrollFactor * 1.4
 
                 property int lastResponseLength: 0
-
                 property bool shouldAutoScroll: true
+
                 onContentYChanged: shouldAutoScroll = atYEnd
                 onContentHeightChanged: {
                     if (shouldAutoScroll) positionViewAtEnd();
@@ -328,16 +342,6 @@ Inline w/ backslash and round brackets \\(e^{i\\pi} + 1 = 0\\)
                     if (shouldAutoScroll) positionViewAtEnd();
                 }
 
-                clip: true
-                layer.enabled: true
-                layer.effect: OpacityMask {
-                    maskSource: Rectangle {
-                        width: swipeView.width
-                        height: swipeView.height
-                        radius: Appearance.rounding.small
-                    }
-                }
-
                 add: null // Prevent function calls from being janky
 
                 model: ScriptModel {

.config/quickshell/ii/modules/sidebarLeft/Anime.qml

@@ -141,6 +141,21 @@ Item {
         Item {
             Layout.fillWidth: true
             Layout.fillHeight: true
+
+            layer.enabled: true
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width: swipeView.width
+                    height: swipeView.height
+                    radius: Appearance.rounding.small
+                }
+            }
+
+            ScrollEdgeFade {
+                target: booruResponseListView
+                vertical: true
+            }
+
             StyledListView { // Booru responses
                 id: booruResponseListView
                 anchors.fill: parent
@@ -151,16 +166,6 @@ Item {
 
                 property int lastResponseLength: 0
 
-                clip: true
-                layer.enabled: true
-                layer.effect: OpacityMask {
-                    maskSource: Rectangle {
-                        width: swipeView.width
-                        height: swipeView.height
-                        radius: Appearance.rounding.small
-                    }
-                }
-
                 model: ScriptModel {
                     values: {
                         if(root.responses.length > booruResponseListView.lastResponseLength) {

.config/quickshell/ii/modules/sidebarLeft/Translator.qml

@@ -101,7 +101,7 @@ Item {
 
     ColumnLayout {
         anchors.fill: parent
-        Flickable {
+        StyledFlickable {
             Layout.fillWidth: true
             Layout.fillHeight: true
             contentHeight: contentColumn.implicitHeight

.config/quickshell/ii/modules/sidebarLeft/anime/BooruResponse.qml

@@ -105,7 +105,6 @@ Rectangle {
                 return true
             }
             implicitHeight: tagRowLayout.implicitHeight
-            // height: tagRowLayout.implicitHeight
             contentWidth: tagRowLayout.implicitWidth
 
             clip: true
@@ -118,9 +117,6 @@ Rectangle {
                 }
             }
 
-            Behavior on height {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-            }
             Behavior on implicitHeight {
                 animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
             }