initial commit for media widget update + anim tokens restructure

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 {