initial commit for media widget update + anim tokens restructure

Modules/Notifications/Content.qml

@@ -11,7 +11,7 @@ import qs.Helpers
 Item {
 	id: root
 
-	readonly property int padding: Tokens.padding.smaller
+	readonly property int padding: Tokens.padding.small
 	required property Item panels
 	required property PersistentProperties visibilities
 
@@ -55,7 +55,7 @@ Item {
 		anchors.fill: parent
 		anchors.margins: root.padding
 		color: "transparent"
-		radius: Tokens.rounding.normal - root.padding
+		radius: Tokens.rounding.medium - root.padding
 
 		CustomListView {
 			id: list
@@ -93,7 +93,7 @@ Item {
 
 	component Anim: NumberAnimation {
 		duration: Tokens.anim.durations.expressiveDefaultSpatial
-		easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+		easing: Tokens.anim.expressiveDefaultSpatial
 	}
 	component NotifWrapper: Item {
 		id: wrapper

Modules/Notifications/Notification.qml

@@ -27,7 +27,7 @@ CustomRect {
 
 	Behavior on x {
 		Anim {
-			easing.bezierCurve: Tokens.anim.curves.emphasizedDecel
+			easing: Tokens.anim.emphasizedDecel
 		}
 	}
 
@@ -88,7 +88,7 @@ CustomRect {
 			id: inner
 
 			anchors.left: parent.left
-			anchors.margins: Tokens.padding.normal
+			anchors.margins: Tokens.padding.small
 			anchors.right: parent.right
 			anchors.top: parent.top
 			implicitHeight: root.nonAnimHeight
@@ -204,7 +204,7 @@ CustomRect {
 
 						Behavior on sweepAngle {
 							Anim {
-								easing.bezierCurve: Tokens.anim.curves.emphasizedDecel
+								easing: Tokens.anim.emphasizedDecel
 							}
 						}
 					}
@@ -471,7 +471,7 @@ CustomRect {
 						isRound: true
 						label.anchors.centerIn: undefined
 						label.anchors.left: left
-						label.anchors.margins: Tokens.padding.normal
+						label.anchors.margins: Tokens.padding.small
 						label.anchors.right: right
 						label.anchors.verticalCenter: verticalCenter
 						label.elide: Text.ElideRight

Modules/Notifications/Sidebar/Content.qml

@@ -20,7 +20,7 @@ Item {
 			Layout.fillHeight: true
 			Layout.fillWidth: true
 			color: Colors.tPalette.m3surfaceContainerLow
-			radius: Tokens.rounding.smallest
+			radius: Tokens.rounding.small
 
 			NotifDock {
 				props: root.props
@@ -30,7 +30,7 @@ Item {
 
 		CustomRect {
 			Layout.fillWidth: true
-			Layout.topMargin: Tokens.padding.normal - layout.spacing
+			Layout.topMargin: Tokens.padding.small - layout.spacing
 			color: Colors.tPalette.m3outlineVariant
 			implicitHeight: 1
 		}

Modules/Notifications/Sidebar/Notif.qml

@@ -1,30 +1,29 @@
 pragma ComponentBehavior: Bound
 
-import qs.Components
-import ZShell.Config
-import qs.Daemons
-import qs.Modules
-import Quickshell
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
+import ZShell.Config
+import qs.Components
 import qs.Services
+import qs.Daemons
 
 CustomRect {
 	id: root
 
-	readonly property CustomText body: expandedContent.item?.body ?? null
+	readonly property CustomText body: (expandedContent.item as ExpandedBody)?.body ?? null
 	required property bool expanded
 	required property NotifServer.Notif modelData
-	readonly property real nonAnimHeight: expanded ? summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + 10 * 2 : summaryHeightMetrics.height
+	readonly property real nonAnimHeight: expanded ? summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + Tokens.padding.medium * 2 : summaryHeightMetrics.height
 	required property Props props
-	required property var visibilities
+	required property PersistentProperties visibilities
 
 	color: {
 		const c = root.modelData?.urgency === "critical" ? Colors.palette.m3secondaryContainer : Colors.layer(Colors.palette.m3surfaceContainerHigh, 2);
 		return expanded ? c : Qt.alpha(c, 0);
 	}
 	implicitHeight: nonAnimHeight
-	radius: 6
+	radius: Tokens.rounding.large - Tokens.padding.small
 	state: expanded ? "expanded" : ""
 
 	Behavior on implicitHeight {
@@ -35,13 +34,13 @@ CustomRect {
 		name: "expanded"
 
 		PropertyChanges {
-			compactBody.anchors.margins: 10
-			dummySummary.anchors.margins: 10
-			expandedContent.anchors.margins: 10
-			summary.anchors.margins: 10
+			compactBody.anchors.margins: Tokens.padding.medium
+			dummySummary.anchors.margins: Tokens.padding.medium
+			expandedContent.anchors.margins: Tokens.padding.medium
+			summary.anchors.margins: Tokens.padding.medium
 			summary.maximumLineCount: Number.MAX_SAFE_INTEGER
-			summary.width: root.width - 10 * 2 - timeStr.implicitWidth - 7
-			timeStr.anchors.margins: 10
+			summary.width: root.width - Tokens.padding.medium * 2 - timeStr.implicitWidth - Tokens.spacing.small
+			timeStr.anchors.margins: Tokens.padding.medium
 		}
 	}
 	transitions: Transition {
@@ -83,7 +82,7 @@ CustomRect {
 		id: compactBody
 
 		anchors.left: dummySummary.right
-		anchors.leftMargin: 7
+		anchors.leftMargin: Tokens.spacing.small
 		anchors.right: parent.right
 		anchors.top: parent.top
 		shouldBeActive: !root.expanded
@@ -92,7 +91,6 @@ CustomRect {
 			color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3outline
 			elide: Text.ElideRight
 			text: String(root.modelData?.body ?? "").replace(/\n/g, " ")
-			textFormat: Text.StyledText
 		}
 	}
 
@@ -106,7 +104,6 @@ CustomRect {
 		sourceComponent: CustomText {
 			animate: true
 			color: Colors.palette.m3outline
-			font.pointSize: 11
 			text: root.modelData?.timeStr ?? ""
 		}
 	}
@@ -117,38 +114,37 @@ CustomRect {
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: summary.bottom
-		anchors.topMargin: 7 / 2
+		anchors.topMargin: Tokens.spacing.extraSmall
 		shouldBeActive: root.expanded
 
-		sourceComponent: ColumnLayout {
-			readonly property alias body: body
-
-			spacing: 10
-
-			CustomText {
-				id: body
-
-				Layout.fillWidth: true
-				color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3onSurface
-				text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given")
-				textFormat: Text.MarkdownText
-				wrapMode: Text.WordWrap
-
-				onLinkActivated: link => {
-					if (Config.launcher.uwsm)
-						Quickshell.execDetached(["app2unit", "-O", "--", link]);
-					else
-						Quickshell.execDetached(["xdg-open", link]);
-					root.visibilities.sidebar = false;
-				}
-			}
-
-			NotifActionList {
-				notif: root.modelData
-			}
+		sourceComponent: ExpandedBody {
 		}
 	}
 
+	component ExpandedBody: ColumnLayout {
+		readonly property alias body: bodyText
+
+		spacing: Tokens.spacing.medium
+
+		CustomText {
+			id: bodyText
+
+			Layout.fillWidth: true
+			color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3onSurface
+			text: String(root.modelData?.body ?? "").replace(/(.)\n(?!\n)/g, "$1\n\n") || qsTr("No body given")
+			textFormat: Text.MarkdownText
+			wrapMode: Text.WordWrap
+
+			onLinkActivated: link => {
+				Qt.openUrlExternally(link);
+				root.visibilities.sidebar = false;
+			}
+		}
+
+		NotifActionList {
+			notif: root.modelData
+		}
+	}
 	component WrappedLoader: Loader {
 		id: comp
 
@@ -157,6 +153,7 @@ CustomRect {
 		active: false
 		opacity: 0
 
+		// Makes the loader load on the same frame shouldBeActive becomes true, which ensures size is set
 		states: State {
 			name: "active"
 			when: comp.shouldBeActive
@@ -178,6 +175,7 @@ CustomRect {
 
 					Anim {
 						property: "opacity"
+						type: Anim.DefaultEffects
 					}
 				}
 			},
@@ -188,6 +186,7 @@ CustomRect {
 				SequentialAnimation {
 					Anim {
 						property: "opacity"
+						type: Anim.DefaultEffects
 					}
 
 					PropertyAction {

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)
 						}
 					}

Modules/Notifications/Sidebar/NotifDock.qml

@@ -18,7 +18,7 @@ Item {
 	required property var visibilities
 
 	anchors.fill: parent
-	anchors.margins: Tokens.padding.normal
+	anchors.margins: Tokens.padding.small
 
 	Component.onCompleted: NotifServer.list.forEach(n => n.popup = false)
 
@@ -156,7 +156,7 @@ Item {
 	Loader {
 		active: opacity > 0
 		anchors.bottom: parent.bottom
-		anchors.margins: Tokens.padding.normal
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		opacity: root.notifCount > 0 ? 1 : 0
 		scale: root.notifCount > 0 ? 1 : 0.5

Modules/Notifications/Sidebar/NotifDockList.qml

@@ -1,12 +1,12 @@
 pragma ComponentBehavior: Bound
 
-import Quickshell
 import QtQuick
+import Quickshell
 import ZShell.Components
-import qs.Components
 import ZShell.Config
-import qs.Modules
 import qs.Daemons
+import qs.Components
+import qs.Services
 
 LazyListView {
 	id: root
@@ -55,33 +55,24 @@ LazyListView {
 
 			Behavior on opacity {
 				Anim {
+					type: Anim.DefaultEffects
 				}
 			}
 			Behavior on scale {
 				Anim {
-					duration: Tokens.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				}
 			}
 			Behavior on x {
 				Anim {
-					duration: Tokens.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				}
 			}
 			Behavior on y {
 				enabled: notif.LazyListView.ready
 
 				Anim {
-					duration: Tokens.anim.durations.expressiveDefaultSpatial
-					easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 				}
 			}
 
-			onDoubleClicked: event => {
-				if (event.button === Qt.LeftButton)
-					notifInner.toggleExpand(!notifInner.expanded);
-			}
 			onPositionChanged: event => {
 				if (pressed) {
 					const diffY = event.y - startY;
@@ -153,8 +144,6 @@ LazyListView {
 	Anim {
 		id: contentYAnim
 
-		duration: Tokens.anim.durations.expressiveDefaultSpatial
-		easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
 		property: "contentY"
 		target: root.container
 	}

Modules/Notifications/Sidebar/NotifGroup.qml

@@ -1,34 +1,40 @@
 pragma ComponentBehavior: Bound
 
-import qs.Components
-import ZShell.Config
-import qs.Modules
-import qs.Daemons
-import qs.Helpers
-import Quickshell
-import Quickshell.Services.Notifications
 import QtQuick
 import QtQuick.Layouts
+import Quickshell
+import Quickshell.Services.Notifications
+import ZShell.Config
+import qs.Components
 import qs.Services
+import qs.Helpers
+import qs.Daemons
 
 CustomRect {
 	id: root
 
-	readonly property string appIcon: notifs.find(n => !n.closed && n.appIcon.length > 0)?.appIcon ?? ""
+	readonly property list<var> activeNotifs: notifs.filter(n => !n.closed)
+	readonly property string appIcon: activeNotifs.find(n => n.appIcon.length > 0)?.appIcon ?? ""
 	required property Flickable container
 	readonly property bool expanded: props.expandedNotifs.includes(modelData)
-	readonly property string image: notifs.find(n => !n.closed && n.image.length > 0)?.image ?? ""
+	readonly property string image: activeNotifs.find(n => n.image.length > 0)?.image ?? ""
 	required property string modelData
 	readonly property int nonAnimHeight: {
-		const headerHeight = header.implicitHeight + (root.expanded ? Math.round(7 / 2) : 0);
-		const columnHeight = headerHeight + notifList.layoutHeight + column.Layout.topMargin + column.Layout.bottomMargin;
-		return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + 10 * 2);
+		const headerHeight = header.implicitHeight + (root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0);
+		const columnHeight = headerHeight + notifList.layoutHeight;
+		return Math.round(Math.max(Config.notifs.sizes.image, columnHeight) + Tokens.padding.small * 2);
 	}
-	readonly property int notifCount: notifs.reduce((acc, n) => n.closed ? acc : acc + 1, 0)
+	readonly property int notifCount: activeNotifs.length
 	readonly property list<var> notifs: NotifServer.list.filter(n => n.appName === modelData)
 	required property Props props
-	readonly property int urgency: notifs.some(n => !n.closed && n.urgency === NotificationUrgency.Critical) ? NotificationUrgency.Critical : notifs.some(n => n.urgency === NotificationUrgency.Normal) ? NotificationUrgency.Normal : NotificationUrgency.Low
-	required property var visibilities
+	readonly property int urgency: {
+		if (activeNotifs.find(n => n.urgency === NotificationUrgency.Critical))
+			return NotificationUrgency.Critical;
+		if (activeNotifs.find(n => n.urgency === NotificationUrgency.Normal))
+			return NotificationUrgency.Normal;
+		return NotificationUrgency.Low;
+	}
+	required property PersistentProperties visibilities
 
 	function toggleExpand(expand: bool): void {
 		if (expand) {
@@ -43,8 +49,13 @@ CustomRect {
 	anchors.right: parent?.right
 	clip: true
 	color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
-	implicitHeight: content.implicitHeight + 10 * 2
-	radius: Tokens.rounding.smallest
+	implicitHeight: nonAnimHeight
+	radius: Tokens.rounding.large
+
+	Behavior on implicitHeight {
+		Anim {
+		}
+	}
 
 	Component.onDestruction: {
 		if (notifCount === 0 && expanded)
@@ -55,10 +66,10 @@ CustomRect {
 		id: content
 
 		anchors.left: parent.left
-		anchors.margins: 10
+		anchors.margins: Tokens.padding.small
 		anchors.right: parent.right
 		anchors.top: parent.top
-		spacing: 10
+		spacing: Tokens.spacing.medium
 
 		Item {
 			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
@@ -74,6 +85,10 @@ CustomRect {
 					fillMode: Image.PreserveAspectCrop
 					height: Config.notifs.sizes.image
 					source: Qt.resolvedUrl(root.image)
+					sourceSize: {
+						const size = Config.notifs.sizes.image * ((QsWindow.window as QsWindow)?.devicePixelRatio ?? 1);
+						return Qt.size(size, size);
+					}
 					width: Config.notifs.sizes.image
 				}
 			}
@@ -81,7 +96,8 @@ CustomRect {
 			Component {
 				id: appIconComp
 
-				CustomIcon {
+				ColoredIcon {
+					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 					implicitSize: Math.round(Config.notifs.sizes.image * 0.6)
 					layer.enabled: root.appIcon.endsWith("symbolic")
 					source: Quickshell.iconPath(root.appIcon)
@@ -93,8 +109,7 @@ CustomRect {
 
 				MaterialIcon {
 					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-					font.pointSize: 18
-					text: Icons.getNotifIcon(root.notifs[0]?.summary, root.urgency)
+					text: Icons.getNotifIcon(root.activeNotifs[0]?.summary, root.urgency)
 				}
 			}
 
@@ -105,6 +120,8 @@ CustomRect {
 
 				Loader {
 					anchors.centerIn: parent
+					anchors.verticalCenterOffset: sourceComponent === materialIconComp ? 1 : 0
+					asynchronous: true
 					sourceComponent: root.image ? imageComp : root.appIcon ? appIconComp : materialIconComp
 				}
 			}
@@ -113,6 +130,7 @@ CustomRect {
 				active: root.appIcon && root.image
 				anchors.bottom: parent.bottom
 				anchors.right: parent.right
+				asynchronous: true
 
 				sourceComponent: CustomRect {
 					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.palette.m3surfaceContainerHigh : Colors.palette.m3secondaryContainer
@@ -120,8 +138,9 @@ CustomRect {
 					implicitWidth: Config.notifs.sizes.badge
 					radius: Tokens.rounding.full
 
-					CustomIcon {
+					ColoredIcon {
 						anchors.centerIn: parent
+						color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
 						implicitSize: Math.round(Config.notifs.sizes.badge * 0.6)
 						layer.enabled: root.appIcon.endsWith("symbolic")
 						source: Quickshell.iconPath(root.appIcon)
@@ -130,75 +149,68 @@ CustomRect {
 			}
 		}
 
-		ColumnLayout {
+		Column {
 			id: column
 
-			Layout.bottomMargin: -10 / 2
 			Layout.fillWidth: true
-			Layout.topMargin: -10
-			spacing: 0
+			spacing: root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0
+
+			Behavior on spacing {
+				Anim {
+				}
+			}
 
 			RowLayout {
 				id: header
 
-				Layout.bottomMargin: root.expanded ? Math.round(7 / 2) : 0
-				Layout.fillWidth: true
-				spacing: 5
-
-				Behavior on Layout.bottomMargin {
-					Anim {
-					}
-				}
+				anchors.left: parent.left
+				anchors.right: parent.right
+				spacing: Tokens.spacing.small
 
 				CustomText {
 					Layout.fillWidth: true
 					color: Colors.palette.m3onSurfaceVariant
 					elide: Text.ElideRight
-					font.pointSize: 11
 					text: root.modelData
 				}
 
 				CustomText {
 					animate: true
 					color: Colors.palette.m3outline
-					font.pointSize: 11
-					text: root.notifs.find(n => !n.closed)?.timeStr ?? ""
+					text: root.activeNotifs[0]?.timeStr ?? ""
 				}
 
 				CustomRect {
 					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : Colors.layer(Colors.palette.m3surfaceContainerHigh, 3)
-					implicitHeight: groupCount.implicitHeight + Tokens.padding.small
-					implicitWidth: expandBtn.implicitWidth + 7 * 2
+					implicitHeight: groupCount.implicitHeight + Tokens.padding.extraSmall
+					implicitWidth: expandBtn.implicitWidth + Tokens.padding.large
 					radius: Tokens.rounding.full
 
 					StateLayer {
 						color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
 
-						onClicked: {
-							root.toggleExpand(!root.expanded);
-						}
+						onClicked: root.toggleExpand(!root.expanded)
 					}
 
 					RowLayout {
 						id: expandBtn
 
 						anchors.centerIn: parent
-						spacing: 7 / 2
+						spacing: Tokens.spacing.extraSmall
 
 						CustomText {
 							id: groupCount
 
-							Layout.leftMargin: 10 / 2
+							Layout.leftMargin: Tokens.padding.extraSmall / 2
 							animate: true
-							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
-							font.pointSize: 11
+							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant
 							text: root.notifCount
 						}
 
 						MaterialIcon {
-							Layout.rightMargin: -10 / 2
-							// Layout.topMargin: root.expanded ? -Math.floor(7 / 2) : 0
-							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurface
+							Layout.rightMargin: -Tokens.padding.extraSmall / 2
+							Layout.topMargin: root.expanded ? -Math.floor(Tokens.padding.extraSmall) : 0
+							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant
 							rotation: root.expanded ? 180 : 0
 							text: "expand_more"
 

Modules/Notifications/Sidebar/NotifGroupList.qml

@@ -1,13 +1,12 @@
 pragma ComponentBehavior: Bound
 
-import Quickshell
 import QtQuick
-import QtQuick.Layouts
+import Quickshell
 import ZShell.Components
-import qs.Components
 import ZShell.Config
-import qs.Modules
 import qs.Daemons
+import qs.Components
+import qs.Services
 
 LazyListView {
 	id: root
@@ -20,13 +19,14 @@ LazyListView {
 
 	signal requestToggleExpand(expand: bool)
 
-	Layout.fillWidth: true
+	anchors.left: parent.left
+	anchors.right: parent.right
 	asynchronous: true
 	cacheBuffer: 400
 	implicitHeight: contentHeight
 	readyDelay: 1
 	removeDuration: Tokens.anim.durations.normal
-	spacing: Math.round(Tokens.spacing.small / 2)
+	spacing: Math.round(Tokens.spacing.extraSmall)
 	useCustomViewport: true
 	viewport: {
 		tWatcher.transform; // mapToItem is not reactive so use this to trigger updates
@@ -56,6 +56,7 @@ LazyListView {
 
 			Behavior on opacity {
 				Anim {
+					type: Anim.DefaultEffects
 				}
 			}
 			Behavior on scale {
@@ -75,10 +76,6 @@ LazyListView {
 
 			Component.onCompleted: modelData?.lock(this)
 			Component.onDestruction: modelData?.unlock(this)
-			onDoubleClicked: event => {
-				if (event.button === Qt.LeftButton)
-					root.requestToggleExpand(!root.expanded);
-			}
 			onPositionChanged: event => {
 				if (pressed && !root.expanded) {
 					const diffY = event.y - startY;
@@ -109,6 +106,7 @@ LazyListView {
 					property: "opacity"
 					target: notif
 					to: 0
+					type: Anim.DefaultEffects
 				}
 
 				Anim {
@@ -132,7 +130,7 @@ LazyListView {
 	model: ScriptModel {
 		values: {
 			if (root.expanded)
-				return root.notifs;
+				return root.notifs as Array;
 
 			let count = 0;
 			let i = 0;
@@ -143,7 +141,7 @@ LazyListView {
 				i++;
 			}
 
-			return root.notifs.slice(0, i);
+			return root.notifs.slice(0, i) as Array;
 		}
 	}
 

Modules/Notifications/Sidebar/Utils/Cards/Record.qml

@@ -17,23 +17,23 @@ CustomRect {
 	Layout.fillWidth: true
 	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
-	radius: Tokens.rounding.smallest
+	radius: Tokens.rounding.small
 
 	ColumnLayout {
 		id: layout
 
 		anchors.fill: parent
 		anchors.margins: Tokens.padding.large
-		spacing: Tokens.spacing.normal
+		spacing: Tokens.spacing.medium
 
 		RowLayout {
-			spacing: Tokens.spacing.normal
+			spacing: Tokens.spacing.medium
 			z: 1
 
 			CustomRect {
 				color: Recorder.running ? Colors.palette.m3secondary : Colors.palette.m3secondaryContainer
 				implicitHeight: {
-					const h = icon.implicitHeight + Tokens.padding.smaller * 2;
+					const h = icon.implicitHeight + Tokens.padding.small * 2;
 					return h - (h % 2);
 				}
 				implicitWidth: implicitHeight
@@ -71,7 +71,7 @@ CustomRect {
 				}
 			}
 
-			CustomSplitButton {
+			SplitButton {
 				active: menuItems.find(m => root.props.recordingMode === m.icon + m.text) ?? menuItems[0]
 				enabled: !Recorder.running
 				menuOnTop: true
@@ -134,7 +134,7 @@ CustomRect {
 					ParallelAnimation {
 						Anim {
 							duration: Tokens.anim.durations.small
-							easing.bezierCurve: Tokens.anim.curves.standardAccel
+							easing: Tokens.anim.standardAccel
 							property: "scale"
 							target: listOrControls
 							to: 0.7
@@ -142,7 +142,7 @@ CustomRect {
 
 						Anim {
 							duration: Tokens.anim.durations.small
-							easing.bezierCurve: Tokens.anim.curves.standardAccel
+							easing: Tokens.anim.standardAccel
 							property: "opacity"
 							target: listOrControls
 							to: 0
@@ -167,7 +167,7 @@ CustomRect {
 					ParallelAnimation {
 						Anim {
 							duration: Tokens.anim.durations.small
-							easing.bezierCurve: Tokens.anim.curves.standardDecel
+							easing: Tokens.anim.standardDecel
 							property: "scale"
 							target: listOrControls
 							to: 1
@@ -175,7 +175,7 @@ CustomRect {
 
 						Anim {
 							duration: Tokens.anim.durations.small
-							easing.bezierCurve: Tokens.anim.curves.standardDecel
+							easing: Tokens.anim.standardDecel
 							property: "opacity"
 							target: listOrControls
 							to: 1
@@ -199,12 +199,12 @@ CustomRect {
 		id: recordingControls
 
 		RowLayout {
-			spacing: Tokens.spacing.normal
+			spacing: Tokens.spacing.medium
 
 			CustomRect {
 				color: Recorder.paused ? Colors.palette.m3tertiary : Colors.palette.m3error
-				implicitHeight: recText.implicitHeight + Tokens.padding.smaller * 2
-				implicitWidth: recText.implicitWidth + Tokens.padding.normal * 2
+				implicitHeight: recText.implicitHeight + Tokens.padding.small * 2
+				implicitWidth: recText.implicitWidth + Tokens.padding.small * 2
 				radius: Tokens.rounding.full
 
 				Behavior on implicitWidth {
@@ -218,14 +218,14 @@ CustomRect {
 
 					Anim {
 						duration: Tokens.anim.durations.large
-						easing.bezierCurve: Tokens.anim.curves.emphasizedAccel
+						easing: Tokens.anim.emphasizedAccel
 						from: 1
 						to: 0
 					}
 
 					Anim {
 						duration: Tokens.anim.durations.extraLarge
-						easing.bezierCurve: Tokens.anim.curves.emphasizedDecel
+						easing: Tokens.anim.emphasizedDecel
 						from: 0
 						to: 1
 					}
@@ -237,7 +237,7 @@ CustomRect {
 					anchors.centerIn: parent
 					animate: true
 					color: Recorder.paused ? Colors.palette.m3onTertiary : Colors.palette.m3onError
-					font.family: Appearance.font.family.mono
+					font.family: Config.appearance.font.family.mono
 					text: Recorder.paused ? "PAUSED" : "REC"
 				}
 			}

Modules/Notifications/Sidebar/Utils/Cards/RecordingList.qml

@@ -26,7 +26,7 @@ ColumnLayout {
 		onClicked: root.props.recordingListExpanded = !root.props.recordingListExpanded
 
 		RowLayout {
-			spacing: Tokens.spacing.smaller
+			spacing: Tokens.spacing.small
 
 			MaterialIcon {
 				Layout.alignment: Qt.AlignVCenter
@@ -57,7 +57,7 @@ ColumnLayout {
 		Layout.fillWidth: true
 		Layout.rightMargin: -Tokens.spacing.small
 		clip: true
-		implicitHeight: (Tokens.font.size.larger + Tokens.padding.small) * (root.props.recordingListExpanded ? 10 : 3)
+		implicitHeight: (Tokens.font.size.larger + Tokens.padding.extraSmall) * (root.props.recordingListExpanded ? 10 : 3)
 
 		CustomScrollBar.vertical: CustomScrollBar {
 			flickable: list
@@ -192,7 +192,7 @@ ColumnLayout {
 				}
 
 				RowLayout {
-					spacing: Tokens.spacing.smaller
+					spacing: Tokens.spacing.small
 
 					MaterialIcon {
 						Layout.alignment: Qt.AlignHCenter

Modules/Notifications/Sidebar/Utils/Cards/Toggles.qml

@@ -18,7 +18,7 @@ CustomRect {
 	Layout.fillWidth: true
 	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + 18 * 2
-	radius: Tokens.rounding.smallest
+	radius: Tokens.rounding.small
 
 	ButtonRow {
 		id: layout

Modules/Notifications/Sidebar/Utils/IdleInhibit.qml

@@ -12,7 +12,7 @@ CustomRect {
 	clip: true
 	color: Colors.tPalette.m3surfaceContainer
 	implicitHeight: layout.implicitHeight + (IdleInhibitor.enabled ? activeChip.implicitHeight + activeChip.anchors.topMargin : 0) + 18 * 2
-	radius: Tokens.rounding.smallest
+	radius: Tokens.rounding.small
 
 	Behavior on implicitHeight {
 		Anim {

Modules/Notifications/Sidebar/Utils/Wrapper.qml

@@ -8,6 +8,7 @@ import QtQuick
 Item {
 	id: root
 
+	property real offsetScale: shouldBeActive ? 0 : 1
 	required property Item popouts
 	readonly property PersistentProperties props: PersistentProperties {
 		property string recordingConfirmDelete
@@ -20,30 +21,27 @@ Item {
 	required property Item sidebar
 	required property var visibilities
 
-	property real offsetScale: shouldBeActive ? 0 : 1
-
-	visible: offsetScale < 1
 	anchors.bottomMargin: (-implicitHeight - 5) * offsetScale
 	implicitHeight: content.implicitHeight + 8 * 2
 	implicitWidth: sidebar.width * (1 - sidebar.offsetScale)
 	opacity: 1 - offsetScale
+	visible: offsetScale < 1
 
 	Behavior on offsetScale {
 		Anim {
 			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+			easing: Tokens.anim.expressiveDefaultSpatial
 		}
 	}
 
 	Loader {
 		id: content
 
+		active: root.shouldBeActive || root.visible
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
 
-		active: root.shouldBeActive || root.visible
-
 		sourceComponent: Content {
 			implicitWidth: root.implicitWidth - 8 * 2
 			popouts: root.popouts

Modules/Notifications/Sidebar/Wrapper.qml

@@ -22,7 +22,7 @@ Item {
 	Behavior on offsetScale {
 		Anim {
 			duration: Tokens.anim.durations.expressiveDefaultSpatial
-			easing.bezierCurve: Tokens.anim.curves.expressiveDefaultSpatial
+			easing: Tokens.anim.expressiveDefaultSpatial
 		}
 	}
 
@@ -37,7 +37,7 @@ Item {
 		anchors.top: parent.top
 
 		sourceComponent: Content {
-			implicitWidth: Config.sidebar.sizes.width - Tokens.padding.smaller * 2
+			implicitWidth: Config.sidebar.sizes.width - Tokens.padding.small * 2
 			props: root.props
 			visibilities: root.visibilities
 		}