Modules/Notifications/Content.qml

@@ -10,6 +10,7 @@ Item {
 
 	readonly property int padding: 6
 	required property Item panels
+	required property Item sidebarPanel
 	required property PersistentProperties visibilities
 
 	anchors.bottom: parent.bottom
@@ -43,7 +44,7 @@ Item {
 
 		return Math.min((QsWindow.window?.screen?.height ?? 0) - 1 * 2, height + padding * 2);
 	}
-	implicitWidth: Config.notifs.sizes.width + padding * 2
+	implicitWidth: Math.max(sidebarPanel.width * (1 - sidebarPanel.offsetScale), Config.notifs.sizes.width + padding * 2)
 
 	Behavior on implicitHeight {
 		Anim {
@@ -72,8 +73,9 @@ Item {
 				required property NotifServer.Notif modelData
 				readonly property alias nonAnimHeight: notif.nonAnimHeight
 
+				anchors.left: parent.left
+				anchors.right: parent.right
 				implicitHeight: notif.implicitHeight + (idx === 0 ? 0 : 8)
-				implicitWidth: notif.implicitWidth
 
 				ListView.onRemove: removeAnim.start()
 				onIndexChanged: {
@@ -124,16 +126,20 @@ Item {
 				}
 
 				ClippingRectangle {
+					// implicitWidth: notif.implicitWidth
+					anchors.left: parent.left
+					anchors.right: parent.right
 					anchors.top: parent.top
 					anchors.topMargin: wrapper.idx === 0 ? 0 : 8
 					color: "transparent"
 					implicitHeight: notif.implicitHeight
-					implicitWidth: notif.implicitWidth
 					radius: Appearance.rounding.smallest / 2
 
 					Notification {
 						id: notif
 
+						anchors.left: parent.left
+						anchors.right: parent.right
 						modelData: wrapper.modelData
 					}
 				}

Modules/Notifications/Notification.qml

@@ -20,9 +20,9 @@ CustomRect {
 	required property NotifServer.Notif modelData
 	readonly property int nonAnimHeight: summary.implicitHeight + (root.expanded ? appName.height + body.height + actions.height + actions.anchors.topMargin : bodyPreview.height) + inner.anchors.margins * 2
 
+	// implicitWidth: Config.notifs.sizes.width
 	color: root.modelData.urgency === NotificationUrgency.Critical ? DynamicColors.palette.m3secondaryContainer : DynamicColors.tPalette.m3surfaceContainer
 	implicitHeight: inner.implicitHeight
-	implicitWidth: Config.notifs.sizes.width
 	radius: 6
 	x: Config.notifs.sizes.width
 

Modules/Notifications/Sidebar/Wrapper.qml

@@ -7,18 +7,17 @@ import QtQuick
 Item {
 	id: root
 
+	property real offsetScale: shouldBeActive ? 0 : 1
 	required property var panels
 	readonly property Props props: Props {
 	}
+	readonly property bool shouldBeActive: root.visibilities.sidebar && Config.sidebar.enabled
 	required property var visibilities
 
-	readonly property bool shouldBeActive: root.visibilities.sidebar && Config.sidebar.enabled
-	property real offsetScale: shouldBeActive ? 0 : 1
-
-	visible: offsetScale < 1
 	anchors.rightMargin: (-implicitWidth - 5) * offsetScale
 	implicitWidth: Config.sidebar.sizes.width
 	opacity: 1 - offsetScale
+	visible: offsetScale < 1
 
 	Behavior on offsetScale {
 		Anim {
@@ -30,16 +29,15 @@ Item {
 	Loader {
 		id: content
 
+		active: root.shouldBeActive || root.visible
 		anchors.bottom: parent.bottom
 		anchors.bottomMargin: 0
 		anchors.left: parent.left
 		anchors.margins: 8
 		anchors.top: parent.top
 
-		active: root.shouldBeActive || root.visible
-
 		sourceComponent: Content {
-			implicitWidth: Config.sidebar.sizes.width - 8 * 2
+			implicitWidth: Config.sidebar.sizes.width - Appearance.padding.smaller * 2
 			props: root.props
 			visibilities: root.visibilities
 		}

Modules/Notifications/Wrapper.qml

@@ -10,13 +10,14 @@ Item {
 	required property var visibilities
 
 	implicitHeight: content.implicitHeight
-	implicitWidth: Math.max(sidebarPanel.width, content.implicitWidth)
+	implicitWidth: Math.max(sidebarPanel.width * (1 - sidebarPanel.offsetScale), content.implicitWidth)
 	visible: height > 0
 
 	Content {
 		id: content
 
 		panels: root.panels
+		sidebarPanel: root.sidebarPanel
 		visibilities: root.visibilities
 	}
 }

Modules/Workspaces.qml

@@ -21,7 +21,7 @@ Item {
 	readonly property int workspacesShown: workspaces.length
 
 	height: implicitHeight
-	implicitHeight: Config.barConfig.height + Math.max(Appearance.padding.smaller, Config.barConfig.border) * 2
+	implicitHeight: Config.barConfig.height + Appearance.padding.smaller * 2
 	implicitWidth: (root.workspaceButtonWidth * root.workspacesShown) + root.activeWorkspaceMargin * 2
 
 	Behavior on implicitWidth {
@@ -39,36 +39,15 @@ Item {
 		implicitHeight: root.implicitHeight - ((Appearance.padding.small - 1) * 2)
 		radius: height / 2
 
-		CustomRect {
-			id: indicator
-
-			property real indicatorLength: (Math.abs(idxPair.idx1 - idxPair.idx2) + 1) * root.workspaceButtonWidth
-			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
-			property real indicatorThickness: root.workspaceButtonWidth
-
-			anchors.verticalCenter: parent.verticalCenter
-			color: DynamicColors.palette.m3primary
-			implicitHeight: indicatorThickness
-			implicitWidth: indicatorLength
-			radius: Appearance.rounding.full
-			x: indicatorPosition
-			z: 2
-
-			AnimatedTabIndexPair {
-				id: idxPair
-
-				index: root.workspaces.findIndex(w => w.active)
-			}
-		}
-
 		Grid {
+			id: grid
+
 			anchors.fill: parent
 			anchors.margins: root.activeWorkspaceMargin
 			columnSpacing: 0
 			columns: root.workspacesShown
 			rowSpacing: 0
 			rows: 1
-			z: 3
 
 			Repeater {
 				model: root.workspaces
@@ -91,12 +70,11 @@ Item {
 
 						CustomText {
 							anchors.centerIn: parent
-							color: button.modelData.active ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSecondaryContainer
+							color: DynamicColors.palette.m3onSecondaryContainer
 							elide: Text.ElideRight
 							horizontalAlignment: Text.AlignHCenter
 							text: button.modelData.name
 							verticalAlignment: Text.AlignVCenter
-							z: 3
 						}
 					}
 
@@ -107,72 +85,35 @@ Item {
 			}
 		}
 
-		Item {
-			id: activeTextSource
-
-			anchors.fill: parent
-			anchors.margins: root.activeWorkspaceMargin
-			layer.enabled: true
-			visible: false
-			z: 4
-
-			Grid {
-				anchors.fill: parent
-				columnSpacing: 0
-				columns: root.workspacesShown
-				rowSpacing: 0
-				rows: 1
-
-				Repeater {
-					model: root.workspaces
-
-					Item {
-						id: activeWorkspace
-
-						required property int index
-						required property HyprlandWorkspace modelData
-
-						implicitHeight: indicator.indicatorThickness
-						implicitWidth: indicator.indicatorThickness
-						width: root.workspaceButtonWidth
-
-						CustomText {
-							anchors.centerIn: parent
-							color: DynamicColors.palette.m3onPrimary
-							elide: Text.ElideRight
-							horizontalAlignment: Text.AlignHCenter
-							text: activeWorkspace.modelData.name
-							verticalAlignment: Text.AlignVCenter
-						}
-					}
-				}
-			}
-		}
-
-		Item {
-			id: indicatorMask
-
-			anchors.fill: bgRect
-			layer.enabled: true
-			visible: false
-
 		CustomRect {
-				color: "white"
+			id: indicator
-				height: indicator.height
+
-				radius: indicator.radius
+			property real indicatorLength: (Math.abs(idxPair.idx1 - idxPair.idx2) + 1) * root.workspaceButtonWidth
-				width: indicator.width
+			property real indicatorPosition: Math.min(idxPair.idx1, idxPair.idx2) * root.workspaceButtonWidth + root.activeWorkspaceMargin
-				x: indicator.x
+			property real indicatorThickness: root.workspaceButtonWidth
-				y: indicator.y
+
-			}
+			anchors.verticalCenter: parent.verticalCenter
+			clip: true
+			color: DynamicColors.palette.m3primary
+			implicitHeight: indicatorThickness
+			implicitWidth: indicatorLength
+			radius: Appearance.rounding.full
+			x: indicatorPosition
+
+			AnimatedTabIndexPair {
+				id: idxPair
+
+				index: root.workspaces.findIndex(w => w.active)
 			}
 
-		MultiEffect {
+			Coloriser {
-			anchors.fill: activeTextSource
+				colorizationColor: DynamicColors.palette.m3onPrimary
-			maskEnabled: true
+				implicitHeight: grid.height
-			maskInverted: false
+				implicitWidth: grid.width
-			maskSource: indicatorMask
+				source: grid
-			source: activeTextSource
+				sourceColor: DynamicColors.palette.m3onSurface
-			z: 5
+				x: -indicator.x + 3
+			}
 		}
 	}
 }