feat: better notification storage and image caching + blobs

Modules/Sidebar/Notif.qml

@@ -1,200 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import ZShell.Config
-import ZShell.Components
-import ZShell.Services
-import qs.Components
-import qs.Services
-import qs.Daemons
-import ZShell.Components
-
-CustomRect {
-	id: root
-
-	readonly property CustomText body: (expandedContent.item as ExpandedBody)?.body ?? null
-	required property bool expanded
-	required property NotificationRow modelData
-	readonly property real nonAnimHeight: expanded ? summary.implicitHeight + expandedContent.implicitHeight + expandedContent.anchors.topMargin + Tokens.padding.medium * 2 : summaryHeightMetrics.height
-	required property ScreenState screenState
-
-	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: Tokens.rounding.large - Tokens.padding.small
-	state: expanded ? "expanded" : ""
-
-	Behavior on implicitHeight {
-		Anim {}
-	}
-	states: State {
-		name: "expanded"
-
-		PropertyChanges {
-			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 - Tokens.padding.medium * 2 - timeStr.implicitWidth - Tokens.spacing.small
-			timeStr.anchors.margins: Tokens.padding.medium
-		}
-	}
-	transitions: Transition {
-		Anim {
-			properties: "margins,width,maximumLineCount"
-		}
-	}
-
-	TextMetrics {
-		id: summaryHeightMetrics
-
-		font: summary.font
-		text: " " // Use this height to prevent weird characters from changing the line height
-	}
-
-	CustomText {
-		id: summary
-
-		anchors.left: parent.left
-		anchors.top: parent.top
-		color: root.modelData?.urgency === "critical" ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onSurface
-		elide: Text.ElideRight
-		maximumLineCount: 1
-		text: root.modelData?.summary ?? ""
-		width: parent.width
-		wrapMode: Text.WordWrap
-	}
-
-	CustomText {
-		id: dummySummary
-
-		anchors.left: parent.left
-		anchors.top: parent.top
-		text: root.modelData?.summary ?? ""
-		visible: false
-	}
-
-	WrappedLoader {
-		id: compactBody
-
-		anchors.left: dummySummary.right
-		anchors.leftMargin: Tokens.spacing.small
-		anchors.right: parent.right
-		anchors.top: parent.top
-		shouldBeActive: !root.expanded
-
-		sourceComponent: CustomText {
-			color: root.modelData?.urgency === "critical" ? Colors.palette.m3secondary : Colors.palette.m3outline
-			elide: Text.ElideRight
-			text: String(root.modelData?.body ?? "").replace(/\n/g, " ")
-		}
-	}
-
-	WrappedLoader {
-		id: timeStr
-
-		anchors.right: parent.right
-		anchors.top: parent.top
-		shouldBeActive: root.expanded
-
-		sourceComponent: CustomText {
-			animate: true
-			color: Colors.palette.m3outline
-			text: root.modelData?.timeStr ?? ""
-		}
-	}
-
-	WrappedLoader {
-		id: expandedContent
-
-		anchors.left: parent.left
-		anchors.right: parent.right
-		anchors.top: summary.bottom
-		anchors.topMargin: Tokens.spacing.extraSmall
-		shouldBeActive: root.expanded
-
-		sourceComponent: ExpandedBody {}
-	}
-
-	component ExpandedBody: SnapLayout {
-		readonly property alias body: bodyText
-
-		spacing: Tokens.spacing.medium
-		orientation: Qt.Vertical
-
-		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.screenState.sidebar = false;
-			}
-		}
-
-		NotifActionList {
-			notif: root.modelData
-		}
-	}
-	component WrappedLoader: Loader {
-		id: comp
-
-		required property bool shouldBeActive
-
-		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
-
-			PropertyChanges {
-				comp.active: true
-				comp.opacity: 1
-			}
-		}
-		transitions: [
-			Transition {
-				from: ""
-				to: "active"
-
-				SequentialAnimation {
-					PropertyAction {
-						property: "active"
-					}
-
-					Anim {
-						property: "opacity"
-						type: Anim.DefaultEffects
-					}
-				}
-			},
-			Transition {
-				from: "active"
-				to: ""
-
-				SequentialAnimation {
-					Anim {
-						property: "opacity"
-						type: Anim.DefaultEffects
-					}
-
-					PropertyAction {
-						property: "active"
-					}
-				}
-			}
-		]
-	}
-}

Modules/Sidebar/NotifActionList.qml

@@ -1,125 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import QtQuick.Layouts
-import Quickshell
-import Quickshell.Widgets
-import ZShell.Config
-import ZShell.Components
-import qs.Components
-import qs.Effects
-import qs.Services
-
-Item {
-	id: root
-
-	required property NotificationRow notif
-
-	Layout.fillWidth: true
-	implicitHeight: actionList.implicitHeight
-
-	SnapLayout {
-		id: actionList
-
-		anchors.fill: parent
-		spacing: Tokens.spacing.extraSmall
-
-		Repeater {
-			model: [
-				{
-					isClose: true
-				},
-				...Array.from(root.notif?.actions ?? []),
-				{
-					isCopy: true
-				}
-			]
-
-			CustomRect {
-				id: action
-
-				required property var modelData
-
-				Layout.fillHeight: true
-				Layout.fillWidth: true
-				Layout.preferredWidth: implicitWidth + (actionStateLayer.pressed ? Tokens.padding.large : 0)
-				color: Colors.layer(Colors.palette.m3surfaceContainerHighest, 4)
-				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: 3000
-
-					onTriggered: actionInner.item.text = "content_copy"
-				}
-
-				StateLayer {
-					id: actionStateLayer
-
-					onClicked: {
-						if (action.modelData.isClose) {
-							root.notif.close();
-						} else if (action.modelData.isCopy) {
-							Quickshell.clipboardText = root.notif.body;
-							actionInner.item.text = "inventory";
-							copyTimer.start();
-						} else if (action.modelData.invoke) {
-							action.modelData.invoke();
-						} else if (!root.notif.resident) {
-							root.notif.close();
-						}
-					}
-				}
-
-				Loader {
-					id: actionInner
-
-					anchors.centerIn: parent
-					sourceComponent: action.modelData.isClose || action.modelData.isCopy ? iconBtn : root.notif?.hasActionIcons ? iconComp : textComp
-				}
-
-				Component {
-					id: iconBtn
-
-					MaterialIcon {
-						animate: action.modelData.isCopy ?? false
-						color: Colors.palette.m3onSurfaceVariant
-						text: action.modelData.isCopy ? "content_copy" : "close"
-					}
-				}
-
-				Component {
-					id: iconComp
-
-					IconImage {
-						asynchronous: true
-						source: Quickshell.iconPath(action.modelData.identifier)
-					}
-				}
-
-				Component {
-					id: textComp
-
-					CustomText {
-						color: Colors.palette.m3onSurfaceVariant
-						text: action.modelData.text
-					}
-				}
-			}
-		}
-	}
-}

Modules/Sidebar/NotifDock.qml

@@ -7,88 +7,101 @@ import QtQuick.Layouts
 import ZShell.Components
 import ZShell.Config
 import qs.Components
-import qs.Modules
 import qs.Daemons
+import qs.Modules
 import qs.Services
 
 Item {
 	id: root
 
-	readonly property int notifCount: NotifServer.list.reduce((acc, n) => n.closed ? acc : acc + 1, 0)
 	required property ScreenState screenState
+	readonly property int notifCount: NotifServer.notClosed.length
 
 	anchors.fill: parent
 	anchors.margins: Tokens.padding.small
 
-	Component.onCompleted: NotifServer.list.forEach(n => n.popup = false)
+	Component.onCompleted: NotifServer.list.forEach(n => n.dismissPopup())
 
 	Item {
 		id: title
 
-		anchors.left: parent.left
-		anchors.margins: 4
-		anchors.right: parent.right
 		anchors.top: parent.top
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.margins: Tokens.padding.extraSmall
+
 		implicitHeight: Math.max(count.implicitHeight, titleText.implicitHeight)
 
 		CustomText {
 			id: count
 
+			anchors.verticalCenter: parent.verticalCenter
 			anchors.left: parent.left
 			anchors.leftMargin: root.notifCount > 0 ? 0 : -width - titleText.anchors.leftMargin
-			anchors.verticalCenter: parent.verticalCenter
+			opacity: root.notifCount > 0 ? 1 : 0
+
+			text: root.notifCount
 			color: Colors.palette.m3outline
 			font: Tokens.font.label.large
-			opacity: root.notifCount > 0 ? 1 : 0
-			text: root.notifCount
 
 			Behavior on anchors.leftMargin {
 				Anim {}
 			}
+
 			Behavior on opacity {
-				Anim {}
+				Anim {
+					type: Anim.DefaultEffects
+				}
 			}
 		}
 
 		CustomText {
 			id: titleText
 
-			anchors.left: count.right
-			anchors.leftMargin: 7
-			anchors.right: parent.right
 			anchors.verticalCenter: parent.verticalCenter
-			color: Colors.palette.m3outline
-			elide: Text.ElideRight
-			font: Tokens.font.label.large
+			anchors.left: count.right
+			anchors.right: parent.right
+			anchors.leftMargin: Tokens.spacing.extraSmall
+
 			text: root.notifCount > 0 ? qsTr("notification%1").arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications")
+			color: Colors.palette.m3outline
+			font: Tokens.font.label.large
+			elide: Text.ElideRight
 		}
 	}
 
 	Item {
 		id: clipRect
 
-		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.top: title.bottom
-		anchors.topMargin: 10
+		anchors.bottom: parent.bottom
+		anchors.topMargin: Tokens.spacing.medium
+
+		clip: true
 
 		Loader {
-			active: opacity > 0
+			asynchronous: true
 			anchors.centerIn: parent
+			active: opacity > 0
 			opacity: root.notifCount > 0 ? 0 : 1
 
-			Behavior on opacity {
-				Anim {}
-			}
-			sourceComponent: ColumnLayout {
-				spacing: 20
+			sourceComponent: SnapLayout {
+				orientation: Qt.Vertical
+				spacing: Tokens.spacing.extraLarge
 
 				CustomText {
 					Layout.alignment: Qt.AlignHCenter
+					text: qsTr("No notifications")
 					color: Colors.palette.m3outlineVariant
 					font: Tokens.font.headline.builders.small.width(90).build()
-					text: qsTr("No Notifications")
+				}
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.StandardExtraLarge
 				}
 			}
 		}
@@ -97,10 +110,10 @@ Item {
 			id: view
 
 			anchors.fill: parent
-			contentHeight: notifList.implicitHeight
-			contentWidth: width
+
 			flickableDirection: Flickable.VerticalFlick
-			clip: true
+			contentWidth: width
+			contentHeight: notifList.implicitHeight
 
 			CustomScrollBar.vertical: CustomScrollBar {
 				flickable: view
@@ -109,8 +122,8 @@ Item {
 			NotifDockList {
 				id: notifList
 
-				container: view
 				screenState: root.screenState
+				container: view
 			}
 		}
 	}
@@ -118,21 +131,19 @@ Item {
 	Timer {
 		id: clearTimer
 
-		interval: Math.max(15, Math.min(80, 69.8 - 12.3 * Math.log(NotifServer.notClosed.length)))
 		repeat: true
 		triggeredOnStart: true
-
+		interval: Math.max(15, Math.min(80, 69.8 - 12.3 * Math.log(NotifServer.notClosed.length)))
 		onTriggered: {
-			const first = NotifServer.notClosed[0];
-			if (!first) {
+			const group = NotifServer.groups[0];
+			if (!group) {
 				stop();
 				return;
 			}
 
-			const appName = first.appName;
 			let cleared = 0;
-			for (const n of NotifServer.notClosed.filter(n => n.appName === appName)) {
-				n.close();
+			for (const n of [...group.activeNotifs]) {
+				n.dismiss();
 				cleared++;
 				if (cleared > 30) {
 					interval = 5;
@@ -143,33 +154,40 @@ Item {
 	}
 
 	Loader {
-		active: opacity > 0
-		anchors.bottom: parent.bottom
-		anchors.margins: Tokens.padding.small
+		asynchronous: true
 		anchors.right: parent.right
-		opacity: root.notifCount > 0 ? 1 : 0
-		scale: root.notifCount > 0 ? 1 : 0.5
+		anchors.bottom: parent.bottom
+		anchors.margins: Tokens.padding.medium
+
+		scale: root.notifCount > 0 ? 1 : 0.5
+		opacity: root.notifCount > 0 ? 1 : 0
+		active: opacity > 0
 
-		Behavior on opacity {
-			Anim {}
-		}
-		Behavior on scale {
-			Anim {}
-		}
 		sourceComponent: IconButton {
 			id: clearBtn
 
-			font: Tokens.font.icon.large
 			icon: "clear_all"
+			font: Tokens.font.icon.large
 			isRound: true
-
 			onClicked: clearTimer.start()
 
 			Elevation {
 				anchors.fill: parent
-				level: clearBtn.stateLayer.containsMouse ? 4 : 3
 				radius: parent.radius
 				z: -1
+				level: clearBtn.stateLayer.containsMouse ? 4 : 3
+			}
+		}
+
+		Behavior on scale {
+			Anim {
+				type: Anim.FastSpatial
+			}
+		}
+
+		Behavior on opacity {
+			Anim {
+				type: Anim.DefaultEffects
 			}
 		}
 	}

Modules/Sidebar/NotifDockList.qml

@@ -4,8 +4,10 @@ import QtQuick
 import Quickshell
 import ZShell.Components
 import ZShell.Config
-import qs.Daemons
+import ZShell.Services
 import qs.Components
+import qs.Components.Notifs
+import qs.Daemons
 import qs.Services
 
 LazyListView {
@@ -16,121 +18,12 @@ LazyListView {
 
 	anchors.left: parent?.left
 	anchors.right: parent?.right
-	asynchronous: true
-	cacheBuffer: 400
 	implicitHeight: contentHeight
-	readyDelay: 1
-	removeDuration: Tokens.anim.durations.normal
+
 	spacing: Tokens.spacing.small
-	useCustomViewport: true
-	viewport: Qt.rect(0, container.contentY, width, container.height)
-
-	delegate: Component {
-		MouseArea {
-			id: notif
-
-			readonly property bool closed: notifInner.notifCount === 0
-			required property int index
-			required property string modelData
-			property int startY
-
-			function closeAll(): void {
-				clearTimer.start();
-			}
-
-			LazyListView.preferredHeight: closed ? 0 : notifInner.nonAnimHeight
-			LazyListView.trackViewport: !notifInner.expanded && notifInner.nonAnimHeight < notifInner.implicitHeight
-			LazyListView.visibleHeight: notifInner.implicitHeight
-			acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-			cursorShape: pressed ? Qt.ClosedHandCursor : undefined
-			drag.axis: Drag.XAxis
-			drag.target: this
-			enabled: !closed
-			hoverEnabled: true
-			implicitHeight: notifInner.implicitHeight
-			opacity: LazyListView.removing || closed || LazyListView.adding ? 0 : 1
-			preventStealing: true
-			scale: LazyListView.removing || closed ? 0.6 : LazyListView.adding ? 0 : 1
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-			Behavior on scale {
-				Anim {
-				}
-			}
-			Behavior on x {
-				Anim {
-				}
-			}
-			Behavior on y {
-				enabled: notif.LazyListView.ready
-
-				Anim {
-				}
-			}
-
-			onPositionChanged: event => {
-				if (pressed) {
-					const diffY = event.y - startY;
-					if (Math.abs(diffY) > Config.notifs.expandThreshold)
-						notifInner.toggleExpand(diffY > 0);
-				}
-			}
-			onPressed: event => {
-				startY = event.y;
-				if (event.button === Qt.RightButton)
-					notifInner.toggleExpand(!notifInner.expanded);
-				else if (event.button === Qt.MiddleButton)
-					closeAll();
-			}
-			onReleased: event => {
-				if (Math.abs(x) < width * Config.notifs.clearThreshold)
-					x = 0;
-				else
-					closeAll();
-			}
-
-			Timer {
-				id: clearTimer
-
-				interval: 15
-				repeat: true
-				triggeredOnStart: true
-
-				onTriggered: {
-					const notifs = NotifServer.notClosed.filter(n => n.appName === notif.modelData);
-					if (notifs.length === 0) {
-						stop();
-						return;
-					}
-
-					for (const n of notifs.slice(0, 30))
-						n.close();
-				}
-			}
-
-			NotifGroup {
-				id: notifInner
-
-				container: root.container
-				modelData: notif.modelData
-				screenState: root.screenState
-			}
-		}
-	}
-	model: ScriptModel {
-		values: {
-			const map = new Map();
-			for (const n of NotifServer.notClosed)
-				map.set(n.appName, null);
-			for (const n of NotifServer.list)
-				map.set(n.appName, null);
-			return [...map.keys()];
-		}
-	}
+	readyDelay: 1
+	cacheBuffer: 400
+	asynchronous: true
 
 	onViewportAdjustNeeded: d => {
 		if (contentYAnim.running)
@@ -139,10 +32,121 @@ LazyListView {
 		contentYAnim.start();
 	}
 
+	useCustomViewport: true
+	viewport: Qt.rect(0, container.contentY, width, container.height)
+
+	removeDuration: Tokens.anim.durations.normal
+
+	model: ScriptModel {
+		values: [...NotifServer.groups]
+	}
+
+	delegate: Component {
+		NotifSwipeArea {
+			id: notif
+
+			required property int index
+			required property NotificationGroup modelData
+
+			readonly property bool closed: card.notifs.length === 0
+
+			function toggleExpand(expand: bool): void {
+				if (expand) {
+					if (!expanded)
+						root.screenState.expandedNotifs.push(modelData.appName);
+				} else if (expanded) {
+					root.screenState.expandedNotifs.splice(root.screenState.expandedNotifs.indexOf(modelData.appName), 1);
+				}
+			}
+
+			function closeAll(): void {
+				clearTimer.start();
+			}
+
+			Component.onDestruction: {
+				if (closed && expanded)
+					toggleExpand(false);
+			}
+
+			LazyListView.trackViewport: !expanded && card.nonAnimHeight < card.implicitHeight
+			LazyListView.preferredHeight: closed ? 0 : card.nonAnimHeight
+			LazyListView.visibleHeight: card.implicitHeight
+			implicitHeight: card.implicitHeight
+
+			opacity: LazyListView.removing || closed || LazyListView.adding ? 0 : 1
+			scale: LazyListView.adding ? 0 : 1
+
+			expanded: root.screenState.expandedNotifs.includes(modelData.appName)
+			enabled: !closed
+
+			onClosedChanged: {
+				if (closed)
+					slideOut.start();
+			}
+			onRequestExpand: expand => toggleExpand(expand)
+			onSwiped: closeAll()
+			onDismissed: closeAll()
+
+			Anim {
+				id: slideOut
+
+				target: notif
+				property: "x"
+				to: notif.x >= 0 ? notif.width : -notif.width
+			}
+
+			Timer {
+				id: clearTimer
+
+				interval: 15
+				repeat: true
+				triggeredOnStart: true
+				onTriggered: {
+					const notifs = [...notif.modelData.activeNotifs];
+					if (notifs.length === 0) {
+						stop();
+						return;
+					}
+
+					for (const n of notifs.slice(0, 30))
+						n.dismiss();
+				}
+			}
+
+			NotifGroupCard {
+				id: card
+
+				group: notif.modelData
+				container: root.container
+				expanded: notif.expanded
+				baseLayer: 1
+				onRequestExpand: expand => notif.toggleExpand(expand)
+				onSwiped: notif => notif.dismiss()
+				onLinkActivated: root.screenState.sidebar = false
+			}
+
+			Behavior on y {
+				enabled: notif.LazyListView.ready
+
+				Anim {}
+			}
+
+			Behavior on opacity {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+
+			Behavior on scale {
+				Anim {}
+			}
+		}
+	}
+
 	Anim {
 		id: contentYAnim
 
-		property: "contentY"
 		target: root.container
+		property: "contentY"
 	}
 }

Modules/Sidebar/NotifGroup.qml

@@ -1,251 +0,0 @@
-pragma ComponentBehavior: Bound
-
-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
-import ZShell.Components
-
-CustomRect {
-	id: root
-
-	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: screenState.expandedNotifs.includes(modelData)
-	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(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: activeNotifs.length
-	readonly property list<var> notifs: NotifServer.list.filter(n => n.appName === modelData)
-	required property ScreenState screenState
-	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;
-	}
-
-	function toggleExpand(expand: bool): void {
-		if (expand) {
-			if (!expanded)
-				screenState.expandedNotifs.push(modelData);
-		} else if (expanded) {
-			screenState.expandedNotifs.splice(screenState.expandedNotifs.indexOf(modelData), 1);
-		}
-	}
-
-	anchors.left: parent?.left
-	anchors.right: parent?.right
-	clip: true
-	color: Colors.layer(Colors.palette.m3surfaceContainer, 2)
-	implicitHeight: nonAnimHeight
-	radius: Tokens.rounding.large
-
-	Behavior on implicitHeight {
-		Anim {}
-	}
-
-	Component.onDestruction: {
-		if (notifCount === 0 && expanded)
-			screenState.expandedNotifs.splice(screenState.expandedNotifs.indexOf(modelData), 1);
-	}
-
-	SnapLayout {
-		id: content
-
-		anchors.left: parent.left
-		anchors.margins: Tokens.padding.small
-		anchors.right: parent.right
-		anchors.top: parent.top
-
-		objectName: "notif-content"
-
-		spacing: Tokens.spacing.medium
-
-		Item {
-			Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-			implicitHeight: Config.notifs.sizes.image
-			implicitWidth: Config.notifs.sizes.image
-
-			Component {
-				id: imageComp
-
-				Image {
-					asynchronous: true
-					cache: false
-					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
-				}
-			}
-
-			Component {
-				id: appIconComp
-
-				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)
-				}
-			}
-
-			Component {
-				id: materialIconComp
-
-				MaterialIcon {
-					color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : root.urgency === NotificationUrgency.Low ? Colors.palette.m3onSurface : Colors.palette.m3onSecondaryContainer
-					text: Icons.getNotifIcon(root.activeNotifs[0]?.summary, root.urgency)
-				}
-			}
-
-			ClipRect {
-				anchors.fill: parent
-				color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3error : root.urgency === NotificationUrgency.Low ? Colors.layer(Colors.palette.m3surfaceContainerHigh, 3) : Colors.palette.m3secondaryContainer
-				radius: Tokens.rounding.full
-
-				Loader {
-					anchors.centerIn: parent
-					anchors.verticalCenterOffset: sourceComponent === materialIconComp ? 1 : 0
-					asynchronous: true
-					sourceComponent: root.image ? imageComp : root.appIcon ? appIconComp : materialIconComp
-				}
-			}
-
-			Loader {
-				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
-					implicitHeight: Config.notifs.sizes.badge
-					implicitWidth: Config.notifs.sizes.badge
-					radius: Tokens.rounding.full
-
-					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)
-					}
-				}
-			}
-		}
-
-		SnapLayout {
-			id: column
-
-			Layout.fillWidth: true
-
-			spacing: root.expanded ? Math.round(Tokens.spacing.extraSmall) : 0
-			orientation: Qt.Vertical
-
-			objectName: "notif-column"
-
-			Behavior on spacing {
-				Anim {}
-			}
-
-			SnapLayout {
-				id: header
-
-				Layout.fillWidth: true
-
-				spacing: Tokens.spacing.small
-
-				objectName: "notif-header"
-
-				CustomText {
-					Layout.fillWidth: true
-					color: Colors.palette.m3onSurfaceVariant
-					elide: Text.ElideRight
-					text: root.modelData
-				}
-
-				CustomText {
-					animate: true
-					color: Colors.palette.m3outline
-					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.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)
-					}
-
-					SnapLayout {
-						id: expandBtn
-
-						anchors.centerIn: parent
-						spacing: Tokens.spacing.extraSmall
-
-						objectName: "notif-expand"
-
-						CustomText {
-							id: groupCount
-
-							Layout.leftMargin: Tokens.padding.extraSmall / 2
-							animate: true
-							color: root.urgency === NotificationUrgency.Critical ? Colors.palette.m3onError : Colors.palette.m3onSurfaceVariant
-							text: root.notifCount
-						}
-
-						MaterialIcon {
-							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"
-
-							Behavior on Layout.topMargin {
-								Anim {}
-							}
-							Behavior on rotation {
-								Anim {}
-							}
-						}
-					}
-				}
-			}
-
-			NotifGroupList {
-				id: notifList
-
-				Layout.fillWidth: true
-
-				container: root.container
-				expanded: root.expanded
-				notifs: root.notifs
-				screenState: root.screenState
-
-				onRequestToggleExpand: expand => root.toggleExpand(expand)
-			}
-		}
-	}
-}

Modules/Sidebar/NotifGroupList.qml

@@ -1,147 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import Quickshell
-import ZShell.Components
-import ZShell.Services
-import ZShell.Config
-import qs.Components
-import qs.Services
-
-LazyListView {
-	id: root
-
-	required property Flickable container
-	required property bool expanded
-	required property list<var> notifs
-	required property ScreenState screenState
-
-	signal requestToggleExpand(expand: bool)
-
-	asynchronous: true
-	cacheBuffer: 400
-	implicitHeight: contentHeight
-	readyDelay: 1
-	removeDuration: Tokens.anim.durations.normal
-	spacing: Math.round(Tokens.spacing.extraSmall)
-	useCustomViewport: true
-	viewport: {
-		tWatcher.transform; // mapToItem is not reactive so use this to trigger updates
-		return Qt.rect(0, container.contentY - mapToItem(container.contentItem, 0, 0).y, width, container.height);
-	}
-
-	delegate: Component {
-		MouseArea {
-			id: notif
-
-			required property int index
-			required property NotificationRow modelData
-			property int startY
-
-			LazyListView.preferredHeight: modelData?.closed || LazyListView.removing ? 0 : notifInner.nonAnimHeight
-			LazyListView.visibleHeight: modelData?.closed || LazyListView.removing ? 0 : notifInner.implicitHeight
-			acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
-			cursorShape: notifInner.body?.hoveredLink ? Qt.PointingHandCursor : pressed ? Qt.ClosedHandCursor : undefined
-			drag.axis: Drag.XAxis
-			drag.target: this
-			enabled: !(modelData?.closed ?? true)
-			hoverEnabled: true
-			implicitHeight: notifInner.implicitHeight
-			opacity: LazyListView.removing || LazyListView.adding ? 0 : 1
-			preventStealing: !root.expanded
-			scale: LazyListView.removing || LazyListView.adding ? 0.7 : 1
-
-			Behavior on opacity {
-				Anim {
-					type: Anim.DefaultEffects
-				}
-			}
-			Behavior on scale {
-				Anim {}
-			}
-			Behavior on x {
-				Anim {}
-			}
-			Behavior on y {
-				enabled: notif.LazyListView.ready
-
-				Anim {}
-			}
-
-			Component.onCompleted: modelData?.lock(this)
-			Component.onDestruction: modelData?.unlock(this)
-			onPositionChanged: event => {
-				if (pressed && !root.expanded) {
-					const diffY = event.y - startY;
-					if (Math.abs(diffY) > Config.notifs.expandThreshold)
-						root.requestToggleExpand(diffY > 0);
-				}
-			}
-			onPressed: event => {
-				startY = event.y;
-				if (event.button === Qt.RightButton)
-					root.requestToggleExpand(!root.expanded);
-				else if (event.button === Qt.MiddleButton)
-					modelData?.close();
-			}
-			onReleased: event => {
-				if (Math.abs(x) < width * Config.notifs.clearThreshold)
-					x = 0;
-				else
-					modelData?.close();
-			}
-
-			ParallelAnimation {
-				running: notif.modelData?.closed ?? false
-
-				onFinished: notif.modelData?.unlock(notif)
-
-				Anim {
-					property: "opacity"
-					target: notif
-					to: 0
-					type: Anim.DefaultEffects
-				}
-
-				Anim {
-					property: "x"
-					target: notif
-					to: notif.x >= 0 ? notif.width : -notif.width
-				}
-			}
-
-			Notif {
-				id: notifInner
-
-				anchors.fill: parent
-				expanded: root.expanded
-				modelData: notif.modelData
-				screenState: root.screenState
-			}
-		}
-	}
-	model: ScriptModel {
-		values: {
-			if (root.expanded)
-				return root.notifs as Array;
-
-			let count = 0;
-			let i = 0;
-			const previewNum = Config.notifs.groupPreviewNum;
-			while (i < root.notifs.length && count < previewNum) {
-				if (!(root.notifs[i]?.closed ?? true))
-					count++;
-				i++;
-			}
-
-			return root.notifs.slice(0, i) as Array;
-		}
-	}
-
-	TransformWatcher {
-		id: tWatcher
-
-		a: root.container.contentItem
-		b: root
-	}
-}