initial commit for media widget update + anim tokens restructure

Modules/Notifications/Sidebar/NotifActionList.qml

@@ -1,14 +1,14 @@
 pragma ComponentBehavior: Bound
 
-import qs.Components
-import ZShell.Config
-import qs.Modules
-import qs.Daemons
-import Quickshell
-import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import ZShell.Config
+import qs.Components
+import qs.Effects
 import qs.Services
+import qs.Daemons
 
 Item {
 	id: root
@@ -17,6 +17,76 @@ Item {
 
 	Layout.fillWidth: true
 	implicitHeight: flickable.contentHeight
+	layer.enabled: true
+	layer.smooth: true
+
+	layer.effect: Mask {
+		maskSource: gradientMask
+	}
+
+	Item {
+		id: gradientMask
+
+		anchors.fill: parent
+		layer.enabled: true
+		visible: false
+
+		Rectangle {
+			anchors.fill: parent
+
+			gradient: Gradient {
+				orientation: Gradient.Horizontal
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 0)
+					position: 0
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 1)
+					position: 0.1
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 1)
+					position: 0.9
+				}
+
+				GradientStop {
+					color: Qt.rgba(0, 0, 0, 0)
+					position: 1
+				}
+			}
+		}
+
+		Rectangle {
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.top: parent.top
+			implicitWidth: parent.width / 2
+			opacity: flickable.contentX > 0 ? 0 : 1
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+		}
+
+		Rectangle {
+			anchors.bottom: parent.bottom
+			anchors.right: parent.right
+			anchors.top: parent.top
+			implicitWidth: parent.width / 2
+			opacity: flickable.contentX < flickable.contentWidth - parent.width ? 0 : 1
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+		}
+	}
 
 	CustomFlickable {
 		id: flickable
@@ -29,14 +99,14 @@ Item {
 			id: actionList
 
 			anchors.fill: parent
-			spacing: 7
+			spacing: Tokens.spacing.extraSmall
 
 			Repeater {
 				model: [
 					{
 						isClose: true
 					},
-					...(root.notif?.actions ?? ""),
+					...(root.notif?.actions ?? []),
 					{
 						isCopy: true
 					}
@@ -49,25 +119,27 @@ Item {
 
 					Layout.fillHeight: true
 					Layout.fillWidth: true
-					Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? 18 : 0)
+					Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? Tokens.padding.large : 0)
 					color: Colors.layer(Colors.palette.m3surfaceContainerHighest, 4)
-					implicitHeight: actionInner.implicitHeight + 5 * 2
-					implicitWidth: actionInner.implicitWidth + 5 * 2
-					radius: actionStateLayer.pressed ? 6 / 2 : 6
+					implicitHeight: actionInner.implicitHeight + Tokens.padding.small
+					implicitWidth: actionInner.implicitWidth + Tokens.padding.medium * 2
+					radius: actionStateLayer.pressed ? Tokens.rounding.medium / 2 : Tokens.rounding.large
 
 					Behavior on Layout.preferredWidth {
 						Anim {
+							type: Anim.FastSpatial
 						}
 					}
 					Behavior on radius {
 						Anim {
+							type: Anim.FastSpatial
 						}
 					}
 
 					Timer {
 						id: copyTimer
 
-						interval: 1000
+						interval: 3000
 
 						onTriggered: actionInner.item.text = "content_copy"
 					}
@@ -111,6 +183,7 @@ Item {
 						id: iconComp
 
 						IconImage {
+							asynchronous: true
 							source: Quickshell.iconPath(action.modelData.identifier)
 						}
 					}