Merge branch 'main' into feat/fullscreen-reveal-bar

Modules/Bar/Bar.qml

@@ -3,16 +3,15 @@ pragma ComponentBehavior: Bound
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
-import qs.Modules
 import ZShell.Config
-import qs.Modules.SysTray
-import qs.Modules.Network
-import qs.Modules.Updates
+import qs.Modules.Bar.Components
+import qs.Modules.Bar.Popouts
 
-RowLayout {
+GridLayout {
 	id: root
 
 	required property bool fullscreen
+	required property bool horizontal
 	required property bool isHovered
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
@@ -20,8 +19,13 @@ RowLayout {
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
-	function checkPopout(x: real): void {
-		const ch = childAt(x, height / 2) as EntryWrapper;
+	function axisCenterOf(item: Item): real {
+		const c = item.mapToItem(root, item.implicitWidth / 2, item.implicitHeight / 2);
+		return horizontal ? c.x : c.y;
+	}
+
+	function checkPopout(pos: real): void {
+		const ch = (horizontal ? childAt(pos, height / 2) : childAt(width / 2, pos)) as EntryWrapper;
 		const id = ch?.entryId;
 
 		if (!ch || id === undefined) {
@@ -35,26 +39,21 @@ RowLayout {
 
 		if (id === "statusIcons" && Config.bar.popouts.statusIcons) {
 			const items = (ch.item as StatusIcons).items;
-			const localX = mapToItem(items, x, 0).x;
-			const icon = items.childAt(localX, items.height / 2);
+			const icon = horizontal ? items.childAt(mapToItem(items, pos, 0).x, items.height / 2) : items.childAt(items.width / 2, mapToItem(items, 0, pos).y);
 			if (icon) {
 				popouts.currentName = icon.name;
-				popouts.currentCenter = Qt.binding(() => icon.mapToItem(root, icon.implicitWidth / 2, 0).x);
+				popouts.currentCenter = Qt.binding(() => axisCenterOf(icon));
 				popouts.hasCurrent = true;
 			}
 		} else if (id === "tray" && Config.bar.popouts.tray && Config.bar.tray.showOnHover) {
 			const tray = ch.item as TrayIcons;
 			const layout = tray.layout;
-			const localX = mapToItem(layout, x, 0).x;
-			const trayItem = layout.childAt(localX, layout.height / 2);
+			const trayItem = horizontal ? layout.childAt(mapToItem(layout, pos, 0).x, layout.height / 2) : layout.childAt(tray.width / 2, mapToItem(layout, 0, pos).y);
 
 			if (trayItem) {
 				const idx = trayItem.index;
 				popouts.currentName = `traymenu${idx}`;
-				popouts.currentCenter = Qt.binding(() => {
-					const it = tray.items.itemAt(idx);
-					return it ? it.mapToItem(root, it.implicitWidth / 2, 0).x : popouts.currentCenter;
-				});
+				popouts.currentCenter = Qt.binding(() => axisCenterOf(trayItem));
 				popouts.hasCurrent = true;
 			}
 
@@ -64,12 +63,19 @@ RowLayout {
 
 		if (id === "updates") {
 			popouts.currentName = "updates";
-			popouts.currentCenter = Qt.binding(() => ch.item.mapToItem(root, (ch.item as Item).implicitWidth / 2, 0).x);
+			popouts.currentCenter = Qt.binding(() => axisCenterOf(ch.item as Item));
 			popouts.hasCurrent = true;
 		}
 	}
 
-	spacing: Tokens.spacing.small
+	function entryAt(pos: real): string {
+		const ch = (horizontal ? childAt(pos, height / 2) : childAt(width / 2, pos)) as EntryWrapper;
+		return ch?.entryId ?? "";
+	}
+
+	columnSpacing: Tokens.spacing.small
+	columns: horizontal ? -1 : 1
+	rowSpacing: Tokens.spacing.small
 
 	Repeater {
 		id: repeater
@@ -86,6 +92,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					HyprsunsetWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen || root.isHovered
 					}
 				}
@@ -95,7 +102,8 @@ RowLayout {
 				roleValue: "spacer"
 
 				delegate: EntryWrapper {
-					Layout.fillWidth: true
+					Layout.fillHeight: !root.horizontal
+					Layout.fillWidth: root.horizontal
 				}
 			}
 
@@ -104,6 +112,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					Workspaces {
+						horizontal: root.horizontal
 						screen: root.screen
 						visible: !root.fullscreen || root.isHovered
 					}
@@ -115,6 +124,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					TrayIcons {
+						horizontal: root.horizontal
 						loader: root
 						popouts: root.popouts
 						visible: !root.fullscreen || root.isHovered
@@ -127,6 +137,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					StatusIcons {
+						horizontal: root.horizontal
 					}
 				}
 			}
@@ -136,6 +147,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					Resources {
+						horizontal: root.horizontal
 						visibilities: root.visibilities
 						visible: !root.fullscreen || root.isHovered
 					}
@@ -147,6 +159,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					UpdatesWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen || root.isHovered
 					}
 				}
@@ -157,6 +170,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					NotifBell {
+						horizontal: root.horizontal
 						popouts: root.popouts
 						visibilities: root.visibilities
 						visible: !root.fullscreen || root.isHovered
@@ -169,6 +183,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					Clock {
+						horizontal: root.horizontal
 						loader: root
 						popouts: root.popouts
 						visibilities: root.visibilities
@@ -183,6 +198,7 @@ RowLayout {
 				delegate: EntryWrapper {
 					WindowTitle {
 						bar: root
+						horizontal: root.horizontal
 						visible: !root.fullscreen || root.isHovered
 					}
 				}
@@ -202,6 +218,7 @@ RowLayout {
 
 				delegate: EntryWrapper {
 					MediaWidget {
+						horizontal: root.horizontal
 						visible: !root.fullscreen || root.isHovered
 					}
 				}
@@ -215,9 +232,11 @@ RowLayout {
 		default property Item item
 		required property var modelData
 
-		Layout.alignment: Qt.AlignVCenter
-		Layout.leftMargin: index === 0 ? root.vPadding : (entryId === "statusIcons") ? -root.spacing + Tokens.spacing.extraSmall : 0
-		Layout.rightMargin: index === repeater.count - 1 ? root.vPadding : 0
+		Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+		Layout.bottomMargin: !root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
+		Layout.leftMargin: root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && root.horizontal) ? -root.rowSpacing + Tokens.spacing.extraSmall : 0
+		Layout.rightMargin: root.horizontal && index === repeater.count - 1 ? root.vPadding : 0
+		Layout.topMargin: !root.horizontal && index === 0 ? root.vPadding : (entryId === "statusIcons" && !root.horizontal) ? -root.columnSpacing + Tokens.spacing.extraSmall : 0
 		children: item
 		implicitHeight: item?.implicitHeight ?? 0
 		implicitWidth: item?.implicitWidth ?? 0

Modules/Bar/BarLoader.qml

@@ -1,45 +1,48 @@
 pragma ComponentBehavior: Bound
 
 import Quickshell
-import Quickshell.Hyprland
 import QtQuick
-import QtQuick.Layouts
-import qs.Components
-import qs.Modules
 import ZShell.Config
-import qs.Helpers
-import qs.Modules.SysTray
-import qs.Modules.SysTray.Widgets
-import qs.Modules.Network
+import qs.Modules.Bar.Popouts
+import qs.Components
 
 Item {
 	id: root
 
-	readonly property int contentHeight: Config.bar.height + padding * 2
-	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentHeight
+	readonly property int clampedExtent: Math.max(Config.bar.border, extent)
+	readonly property int contentThickness: Math.floor(Math.max(Config.bar.height, Tokens.bar.innerSize * (horizontal ? 1 : 1.5))) + padding * 2
+	readonly property int exclusiveZone: Config.bar.autoHide ? Config.bar.border : contentThickness
+	property real extent: fullscreen ? 0 : Config.bar.border
 	required property bool fullscreen
+	readonly property bool horizontal: position !== "left"
 	property bool isHovered
 	readonly property int padding: Math.max(Tokens.padding.smaller, Config.bar.border)
 	required property Wrapper popouts
 	required property ClipWrapper popoutsWrapper
+	required property string position
 	required property ShellScreen screen
 	readonly property bool shouldBeVisible: (!fullscreen && (!Config.bar.autoHide || visibilities.bar)) || isHovered
 	readonly property int vPadding: 6
 	required property PersistentProperties visibilities
 
-	function checkPopout(x: real): void {
-		content.item?.checkPopout(x);
+	function checkPopout(pos: real): void {
+		(content.item as Bar)?.checkPopout(pos);
 	}
 
-	implicitHeight: fullscreen ? 0 : Config.bar.border
-	visible: height > Config.bar.border
+	function entryAt(pos: real): string {
+		return (content.item as Bar)?.entryAt(pos) ?? "";
+	}
+
+	implicitHeight: extent
+	implicitWidth: extent
+	visible: extent > Config.bar.border
 
 	states: State {
 		name: "visible"
 		when: root.shouldBeVisible
 
 		PropertyChanges {
-			root.implicitHeight: root.contentHeight
+			root.extent: root.contentThickness
 		}
 	}
 	transitions: [
@@ -48,7 +51,7 @@ Item {
 			to: "visible"
 
 			Anim {
-				property: "implicitHeight"
+				property: "extent"
 				target: root
 			}
 		},
@@ -57,7 +60,7 @@ Item {
 			to: ""
 
 			Anim {
-				property: "implicitHeight"
+				property: "extent"
 				target: root
 			}
 		}
@@ -67,13 +70,17 @@ Item {
 		id: content
 
 		active: root.shouldBeVisible || root.visible
-		anchors.bottom: parent.bottom
-		anchors.left: parent.left
+		anchors.bottom: root.position !== "bottom" ? parent.bottom : undefined
+		anchors.left: root.horizontal ? parent.left : undefined
 		anchors.right: parent.right
+		anchors.top: root.position !== "top" ? parent.top : undefined
+		height: root.contentThickness
+		width: root.contentThickness
 
 		sourceComponent: Bar {
 			fullscreen: root.fullscreen
 			height: root.contentHeight
+			horizontal: root.horizontal
 			isHovered: root.isHovered
 			popouts: root.popouts
 			popoutsWrapper: root.popoutsWrapper

Modules/Bar/Components/Clock.qml

@@ -0,0 +1,157 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Modules.Bar.Popouts
+import qs.Modules.Bar.Components.Common
+import qs.Helpers
+import qs.Components
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	readonly property color contentColor: visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+	readonly property string effectiveFormat: {
+		let fmt = Config.general.dateFormat;
+		if (!root.horizontal)
+			fmt = fmt.replace("dddd", "ddd");
+		return fmt;
+	}
+	readonly property var formatParts: {
+		const segments = root.effectiveFormat.split(" - ");
+		let datePart = "";
+		let timePart = "";
+
+		if (segments.length > 1) {
+			datePart = segments[0];
+			timePart = segments[1];
+		} else if (/[hms]/.test(segments[0])) {
+			timePart = segments[0];
+		} else {
+			datePart = segments[0];
+		}
+
+		const dateTokens = datePart.trim().length ? datePart.trim().split(/\s+/) : [];
+		const timeTokens = timePart.trim().length ? timePart.trim().split(":") : [];
+
+		return {
+			dateTokens: dateTokens,
+			timeTokens: timeTokens
+		};
+	}
+	required property GridLayout loader
+	required property Wrapper popouts
+	readonly property real size: horizontal ? timeText.contentWidth + Tokens.padding.normal * 2 : verticalColumn.implicitHeight + Tokens.padding.larger * 2
+	required property PersistentProperties visibilities
+
+	color: visibilities.dashboard ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? baseSize : size
+	implicitWidth: horizontal ? size : baseSize
+	radius: Tokens.rounding.full
+
+	CustomText {
+		id: timeText
+
+		anchors.centerIn: parent
+		color: root.contentColor
+		font: Config.appearance.font.family.mono // qmllint disable incompatible-type
+		height: implicitHeight
+		text: Time.dateStr
+		visible: root.horizontal
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+	}
+
+	ColumnLayout {
+		id: verticalColumn
+
+		anchors.centerIn: parent
+		spacing: Tokens.padding.small ?? 2
+		visible: !root.horizontal
+		width: root.baseSize
+
+		Repeater {
+			model: root.formatParts.dateTokens
+
+			CustomText {
+				required property string modelData
+
+				Layout.alignment: Qt.AlignHCenter
+				color: root.contentColor
+				font: Config.appearance.font.family.mono // qmllint disable incompatible-type
+				text: Qt.formatDateTime(Time.date, modelData)
+
+				Behavior on color {
+					CAnim {
+					}
+				}
+			}
+		}
+
+		Rectangle {
+			Layout.alignment: Qt.AlignHCenter
+			Layout.bottomMargin: Tokens.padding.small ?? 2
+			Layout.topMargin: Tokens.padding.small ?? 2
+			color: root.contentColor
+			height: 1
+			implicitWidth: root.baseSize * 0.5
+			opacity: 0.4
+			radius: 1
+			visible: root.formatParts.dateTokens.length > 0 && root.formatParts.timeTokens.length > 0
+		}
+
+		Repeater {
+			model: root.formatParts.timeTokens
+
+			CustomText {
+				required property string modelData
+
+				Layout.alignment: Qt.AlignHCenter
+				color: root.contentColor
+				font: Config.appearance.font.family.mono // qmllint disable incompatible-type
+				text: {
+					if (modelData.includes("h"))
+						return Time.hourStr;
+					if (modelData.includes("m"))
+						return Time.minuteStr;
+					if (modelData.includes("s"))
+						return Time.secondStr;
+					return "";
+				}
+
+				Behavior on color {
+					CAnim {
+					}
+				}
+			}
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignHCenter
+			color: root.contentColor
+			font: Config.appearance.font.family.mono // qmllint disable incompatible-type
+			text: Qt.formatDateTime(Time.date, "AP")
+			visible: Config.services.useTwelveHourClock && root.formatParts.timeTokens.length > 0
+
+			Behavior on color {
+				CAnim {
+				}
+			}
+		}
+	}
+
+	StateLayer {
+		acceptedButtons: Qt.LeftButton
+		color: root.contentColor
+
+		onClicked: {
+			root.visibilities.dashboard = !root.visibilities.dashboard;
+		}
+	}
+}

Modules/Bar/Components/Common/WidgetBase.qml

@@ -0,0 +1,16 @@
+import QtQuick
+import ZShell.Config
+import qs.Components
+import qs.Services
+
+CustomRect {
+	id: root
+
+	readonly property int baseSize: horizontal ? Math.max(Config.bar.height, Tokens.bar.innerSize) : Math.max(Config.bar.height, Math.floor(Tokens.bar.innerSize * 1.5))
+	required property bool horizontal
+
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? baseSize : width
+	implicitWidth: horizontal ? height : baseSize
+	radius: Tokens.rounding.full
+}

Modules/Bar/Components/HyprsunsetWidget.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import ZShell.Config
+import qs.Components
+import qs.Modules.Bar.Components.Common
+import qs.Helpers
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	property bool tempEnabled: Hyprsunset.enabled
+
+	color: root.tempEnabled ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	radius: Tokens.rounding.full
+
+	StateLayer {
+		onClicked: {
+			Hyprsunset.toggleNightLight();
+			Hyprsunset.manualToggle = true;
+		}
+	}
+
+	MaterialIcon {
+		anchors.centerIn: parent
+		animate: true
+		color: root.tempEnabled ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		fill: root.tempEnabled ? 1 : 0
+		font.pointSize: Tokens.font.size.larger
+		text: root.tempEnabled ? "lightbulb" : "light_off"
+
+		Behavior on fill {
+			Anim {
+			}
+		}
+	}
+}

Modules/Bar/Components/MediaWidget.qml

@@ -0,0 +1,92 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Components
+import qs.Modules.Bar.Components.Common
+import qs.Helpers
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+	readonly property int textWidth: Math.min(metrics.width, 200)
+
+	implicitHeight: horizontal ? baseSize : layout.implicitHeight + Tokens.padding.normal * 2
+	implicitWidth: horizontal ? layout.implicitWidth + Tokens.padding.normal * 2 : baseSize
+	radius: Tokens.rounding.full
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	TextMetrics {
+		id: metrics
+
+		font: mediatext.font
+		text: mediatext.text
+	}
+
+	GridLayout {
+		id: layout
+
+		anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.normal
+		anchors.fill: parent
+		anchors.leftMargin: root.horizontal ? Tokens.padding.normal : 0
+		anchors.rightMargin: root.horizontal ? Tokens.padding.normal : 0
+		anchors.topMargin: root.horizontal ? 0 : Tokens.padding.normal
+		columns: root.horizontal ? -1 : 1
+
+		Behavior on implicitWidth {
+			Anim {
+			}
+		}
+
+		MaterialIcon {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			animate: true
+			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
+			font.pointSize: Tokens.font.size.larger
+			text: Players.active?.isPlaying ? "music_note" : "music_off"
+		}
+
+		MarqueeText {
+			id: mediatext
+
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			animate: true
+			color: Players.active?.isPlaying ? Colors.palette.m3primary : Colors.palette.m3onSurface
+			font.pointSize: Tokens.font.size.normal
+			horizontalAlignment: Text.AlignHCenter
+			implicitHeight: root.horizontal ? root.implicitHeight : root.textWidth
+			implicitWidth: root.horizontal ? root.textWidth : root.implicitWidth
+			marqueeEnabled: false
+			pauseMs: 4000
+			text: root.currentMedia
+			vertical: !root.horizontal
+		}
+	}
+
+	CustomMouseArea {
+		anchors.fill: parent
+		hoverEnabled: true
+
+		onContainsMouseChanged: {
+			if (!containsMouse) {
+				mediatext.marqueeEnabled = false;
+			} else {
+				mediatext.marqueeEnabled = true;
+				mediatext.anim.start();
+			}
+		}
+	}
+}

Modules/Bar/Components/NetworkWidget.qml

@@ -0,0 +1,25 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import qs.Modules
+
+Item {
+	id: root
+
+	anchors.bottom: parent.bottom
+	anchors.top: parent.top
+	implicitWidth: layout.implicitWidth
+
+	RowLayout {
+		id: layout
+
+		anchors.bottom: parent.bottom
+		anchors.top: parent.top
+
+		MaterialIcon {
+			Layout.alignment: Qt.AlignVCenter
+			text: "android_wifi_4_bar"
+		}
+	}
+}

Modules/Bar/Components/NotifBell.qml

@@ -0,0 +1,45 @@
+import Quickshell
+import QtQuick
+import ZShell.Config
+import qs.Modules.Bar.Components.Common
+import qs.Modules.Bar.Popouts
+import qs.Daemons
+import qs.Components
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	required property Wrapper popouts
+	required property PersistentProperties visibilities
+
+	color: visibilities.sidebar ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	radius: Tokens.rounding.full
+
+	MaterialIcon {
+		id: notificationCenterIcon
+
+		anchors.centerIn: parent
+		color: root.visibilities.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		fill: root.visibilities.sidebar ? 1 : 0
+		font.pointSize: Tokens.font.size.larger
+		text: NotifServer.list.length ? "\uf4fe" : "\ue7f4"
+
+		Behavior on color {
+			CAnim {
+			}
+		}
+		Behavior on fill {
+			Anim {
+			}
+		}
+	}
+
+	StateLayer {
+		color: root.visibilities.sidebar ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+
+		onClicked: {
+			root.visibilities.sidebar = !root.visibilities.sidebar;
+		}
+	}
+}

Modules/Bar/Components/Resource.qml

@@ -0,0 +1,74 @@
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Shapes
+import qs.Components
+import ZShell.Config
+import qs.Services
+
+GridLayout {
+	id: root
+
+	property color accentColor: warning ? Colors.palette.m3error : mainColor
+	property real animatedPercentage: 0
+	readonly property real arcStartAngle: 0.75 * Math.PI
+	readonly property real arcSweep: 1.5 * Math.PI
+	required property bool horizontal
+	property string icon
+	required property color iconColor
+	required property color mainColor
+	required property double percentage
+	property bool shown: true
+	property color usageColor: warning ? Colors.palette.m3error : mainColor
+	property bool warning: percentage * 100 >= warningThreshold
+	property int warningThreshold: 80
+
+	columnSpacing: Tokens.spacing.smaller
+	columns: horizontal ? -1 : 1
+	percentage: 0
+
+	Behavior on animatedPercentage {
+		Anim {
+		}
+	}
+
+	Component.onCompleted: animatedPercentage = percentage
+	onPercentageChanged: {
+		const next = percentage;
+
+		if (Math.abs(next - animatedPercentage) >= 0.05)
+			animatedPercentage = next;
+	}
+
+	MaterialIcon {
+		id: icon
+
+		Layout.preferredWidth: 16
+		color: root.iconColor
+		font.pointSize: Tokens.font.size.larger
+		text: root.icon
+	}
+
+	CustomClippingRect {
+		Layout.preferredHeight: root.horizontal ? icon.implicitHeight - Tokens.padding.small : 4
+		Layout.preferredWidth: root.horizontal ? 4 : icon.implicitWidth
+		color: Colors.layer(Colors.palette.m3surfaceContainerHigh, 2)
+		radius: Tokens.rounding.full
+
+		CustomRect {
+			id: fill
+
+			anchors.bottom: parent.bottom
+			anchors.left: parent.left
+			anchors.right: root.horizontal ? parent.right : undefined
+			anchors.top: root.horizontal ? undefined : parent.top
+			color: root.mainColor
+			implicitHeight: root.horizontal ? Math.ceil(root.percentage * parent.height) : 0
+			implicitWidth: root.horizontal ? 0 : Math.ceil(root.percentage * parent.width)
+
+			// Behavior on implicitHeight {
+			// 	Anim {
+			// 	}
+			// }
+		}
+	}
+}

Modules/Bar/Components/Resources.qml

@@ -0,0 +1,93 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import QtQuick.Layouts
+import ZShell.Config
+import ZShell.Services
+import qs.Services
+import qs.Modules.Bar.Components.Common
+import qs.Components
+
+WidgetBase {
+	id: root
+
+	required property PersistentProperties visibilities
+
+	clip: true
+	color: visibilities.resources ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? baseSize : gridLayout.implicitHeight + Tokens.padding.normal * 2
+	implicitWidth: horizontal ? gridLayout.implicitWidth + Tokens.padding.larger * 2 : baseSize
+	radius: Tokens.rounding.full
+
+	StateLayer {
+		color: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+
+		onClicked: root.visibilities.resources = !root.visibilities.resources
+	}
+
+	GridLayout {
+		id: gridLayout
+
+		anchors.centerIn: parent
+		anchors.horizontalCenterOffset: root.horizontal ? 0 : 1
+		anchors.verticalCenterOffset: root.horizontal ? 0 : -3
+		columnSpacing: Tokens.spacing.smaller
+		columns: root.horizontal ? -1 : 1
+
+		ServiceRef {
+			service: Gpu
+		}
+
+		ServiceRef {
+			service: Cpu
+		}
+
+		ServiceRef {
+			service: Memory
+		}
+
+		Resource {
+			Layout.alignment: Qt.AlignVCenter
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "memory"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3primary
+			percentage: Cpu.percentage
+			warningThreshold: 95
+		}
+
+		Resource {
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "memory_alt"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3secondary
+			percentage: Memory.percentage
+			warningThreshold: 80
+		}
+
+		Resource {
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "gamepad"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3tertiary
+			percentage: Gpu.percentage
+		}
+
+		Resource {
+			Layout.fillHeight: root.horizontal
+			Layout.fillWidth: !root.horizontal
+			horizontal: root.horizontal
+			icon: "developer_board"
+			iconColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			mainColor: root.visibilities.resources ? Colors.palette.m3onPrimary : Colors.palette.m3primary
+			percentage: Gpu.memoryUsed / Gpu.memoryTotal
+		}
+	}
+}

Modules/Bar/Components/StatusIcons.qml

@@ -0,0 +1,153 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Helpers
+import qs.Modules.Bar.Components.StatusIcons
+import qs.Modules.Bar.Components.Common
+import qs.Components
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	readonly property int firstPresent: {
+		const values = model.values;
+		for (let i = 0; i < values.length; i++)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+
+	// Index of the first/last entry that isn't collapsed, for edge margin gating
+	readonly property alias items: grid
+	readonly property int lastPresent: {
+		const values = model.values;
+		for (let i = values.length - 1; i >= 0; i--)
+			if (!collapsed(values[i]))
+				return i;
+		return -1;
+	}
+	readonly property real size: horizontal ? grid.implicitWidth + Tokens.padding.small * 2 : grid.implicitHeight + Tokens.padding.small * 2
+	readonly property int spacing: Tokens.spacing.normal / 2
+
+	// Entries that can shrink to nothing, spacing included
+	function collapsed(entry: var): bool {
+		if (entry.id === "lockStatus")
+			return !Hypr.capsLock && !Hypr.numLock;
+		return false;
+	}
+
+	bottomLeftRadius: horizontal ? Tokens.rounding.smallest / 2 : Tokens.rounding.full
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? baseSize : size
+	implicitWidth: horizontal ? size : baseSize
+	radius: Tokens.rounding.full
+	topLeftRadius: Tokens.rounding.smallest / 2
+	topRightRadius: horizontal ? Tokens.rounding.full : Tokens.rounding.smallest / 2
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	GridLayout {
+		id: grid
+
+		anchors.bottomMargin: root.horizontal ? 0 : Tokens.padding.small
+		anchors.fill: parent
+		anchors.leftMargin: root.horizontal ? Tokens.padding.small : 0
+		anchors.rightMargin: root.horizontal ? Tokens.padding.small : 0
+		anchors.topMargin: root.horizontal ? 0 : Tokens.padding.small
+		columns: root.horizontal ? -1 : 1
+
+		Repeater {
+			model: ScriptModel {
+				id: model
+
+				values: Config.bar.tray.statusIcons.values.filter(e => e.enabled)
+			}
+
+			DelegateChooser {
+				role: "id"
+
+				DelegateChoice {
+					roleValue: "audio"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						AudioWidget {
+							horizontal: root.horizontal
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "microphone"
+
+					delegate: EntryWrapper {
+						name: "audio"
+
+						MicWidget {
+							horizontal: root.horizontal
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "power"
+
+					delegate: EntryWrapper {
+						name: "upower"
+
+						UPowerWidget {
+							horizontal: root.horizontal
+						}
+					}
+				}
+			}
+		}
+	}
+
+	component EntryWrapper: Item {
+		required property int index
+		default property Item item
+		property real leftGap: present && index !== root.lastPresent ? margin : 0
+		property int margin: root.spacing / 2
+		required property var modelData
+		property string name: modelData.id.toLowerCase()
+		readonly property bool present: !root.collapsed(modelData)
+		property real rightGap: present && index !== root.firstPresent ? margin : 0
+
+		Layout.alignment: Qt.AlignHCenter
+		Layout.bottomMargin: root.horizontal ? 0 : Math.round(rightGap)
+		Layout.leftMargin: root.horizontal ? Math.round(leftGap) : 0
+		Layout.rightMargin: root.horizontal ? Math.round(rightGap) : 0
+		Layout.topMargin: root.horizontal ? 0 : Math.round(leftGap)
+		children: item
+		implicitHeight: item?.implicitHeight ?? 0
+		implicitWidth: item?.implicitWidth ?? 0
+
+		Behavior on leftGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+		Behavior on rightGap {
+			Anim {
+				type: Anim.SlowEffects
+			}
+		}
+	}
+}

Modules/Bar/Components/StatusIcons/AudioWidget.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Daemons
+import qs.Components
+import qs.Services
+
+MaterialIcon {
+	id: speaker
+
+	required property bool horizontal
+
+	animate: true
+	color: Audio.muted ? Colors.palette.m3error : Colors.palette.m3onSurface
+	fill: 1
+	font.pointSize: Tokens.font.size.larger
+	text: Audio.muted ? "volume_off" : "volume_up"
+
+	Behavior on Layout.maximumWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+}

Modules/Bar/Components/StatusIcons/MicWidget.qml

@@ -0,0 +1,31 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Daemons
+import qs.Components
+import qs.Services
+
+MaterialIcon {
+	id: mic
+
+	required property bool horizontal
+
+	animate: true
+	color: (Audio.sourceMuted ?? false) ? Colors.palette.m3error : Colors.palette.m3onSurface
+	fill: 1
+	font.pointSize: Tokens.font.size.larger
+	text: Audio.sourceMuted ? "mic_off" : "mic"
+
+	Behavior on Layout.maximumWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+}

Modules/Bar/Components/StatusIcons/UPowerWidget.qml

@@ -0,0 +1,138 @@
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Components
+import qs.Helpers
+
+Item {
+	id: root
+
+	required property bool horizontal
+
+	implicitHeight: Battery.isLaptop ? batteryIconLoader.item.implicitHeight : upowerIconLoader.item.implicitHeight
+	implicitWidth: Battery.isLaptop ? batteryIconLoader.item.implicitWidth : upowerIconLoader.item.implicitWidth
+
+	Behavior on Layout.preferredHeight {
+		Anim {
+		}
+	}
+	Behavior on Layout.preferredWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+
+	Loader {
+		id: batteryIconLoader
+
+		active: Battery.isLaptop
+		anchors.centerIn: parent
+
+		sourceComponent: Row {
+			id: batteryIcon
+
+			property real batHeight: 16
+			property real batWidth: 30
+			property real nubHeight: 6
+			property real nubWidth: 2
+			property real radius: Tokens.rounding.smallest / 2
+
+			spacing: 1
+
+			CustomRect {
+				id: track
+
+				anchors.verticalCenter: parent.verticalCenter
+				color: Battery.colors.bg
+				height: batteryIcon.batHeight
+				radius: batteryIcon.radius
+				width: batteryIcon.batWidth
+
+				CustomText {
+					color: Battery.colors.fg
+					font.pointSize: Tokens.font.size.larger / 1.5
+					font.weight: 800
+					height: track.height
+					horizontalAlignment: Text.AlignHCenter
+					text: Math.round(Battery.currentPerc * 100)
+					verticalAlignment: Text.AlignVCenter
+					width: track.width
+				}
+
+				Item {
+					clip: true
+					width: parent.width * Battery.currentPerc
+
+					anchors {
+						bottom: parent.bottom
+						left: parent.left
+						top: parent.top
+					}
+
+					CustomRect {
+						id: fill
+
+						color: Battery.colors.fg
+						height: track.height
+						radius: track.radius
+						width: track.width
+
+						CustomText {
+							id: batteryLabel
+
+							clip: true
+							color: Battery.colors.bg
+							font.pointSize: 7.5
+							font.weight: 800
+							height: track.height
+							horizontalAlignment: Text.AlignHCenter
+							text: Math.round(Battery.currentPerc * 100)
+							verticalAlignment: Text.AlignVCenter
+							width: track.width
+						}
+					}
+				}
+			}
+
+			CustomRect {
+				id: nub
+
+				anchors.verticalCenter: parent.verticalCenter
+				bottomRightRadius: 20
+				color: Battery.currentPerc < 0.99 ? track.color : fill.color
+				height: batteryIcon.nubHeight
+				topRightRadius: 20
+				width: batteryIcon.nubWidth
+			}
+		}
+	}
+
+	Loader {
+		id: upowerIconLoader
+
+		active: !Battery.isLaptop
+		anchors.centerIn: parent
+
+		sourceComponent: MaterialIcon {
+			Layout.alignment: Qt.AlignVCenter
+			animate: true
+			fill: 1
+			font.pointSize: Tokens.font.size.larger
+			text: {
+				if (PowerProfiles.profile === PowerProfile.PowerSaver)
+					return "energy_savings_leaf";
+				if (PowerProfiles.profile === PowerProfile.Performance)
+					return "bolt";
+				return "balance";
+			}
+		}
+	}
+}

Modules/Bar/Components/Tray/TrayItem.qml

@@ -0,0 +1,86 @@
+import QtQuick.Layouts
+import QtQuick
+import Quickshell
+import Quickshell.Services.SystemTray
+import qs.Helpers
+import qs.Modules.Bar.Popouts
+import qs.Components
+import ZShell.Config
+import qs.Services
+
+Item {
+	id: root
+
+	property bool current: popouts.currentName.startsWith(`traymenu${ind}`) && popouts.hasCurrent
+	readonly property real dpr: Hypr.monitorFor(loader?.screen).scale
+	required property int ind
+	required property SystemTrayItem item
+	required property GridLayout loader
+	required property Wrapper popouts
+
+	function resolveIcon(app: string, icon: string): string {
+		if (app === "chrome_status_icon_1") {
+			return Quickshell.iconPath("discord-tray");
+		} else if (app === "AyuGramDesktop") {
+			if (icon === Quickshell.iconPath("com.ayugram.desktop-attention-symbolic"))
+				return Quickshell.iconPath("telegram-attention-panel");
+			else if (icon === Quickshell.iconPath("com.ayugram.desktop-mute-symbolic"))
+				return Quickshell.iconPath("telegram-mute-panel");
+			else if (icon === Quickshell.iconPath("com.ayugram.desktop-symbolic"))
+				return Quickshell.iconPath("telegram-panel");
+		} else if (app === "TelegramDesktop") {
+			if (icon === Quickshell.iconPath("org.telegram.desktop-symbolic"))
+				return Quickshell.iconPath("telegram-panel");
+			else if (icon === Quickshell.iconPath("org.telegram.desktop-attention-symbolic"))
+				return Quickshell.iconPath("telegram-attention-panel");
+			else if (icon === Quickshell.iconPath("org.telegram.desktop-mute-symbolic"))
+				return Quickshell.iconPath("telegram-mute-panel");
+		} else if (app === "steam") {
+			return Quickshell.iconPath("steam_tray_mono");
+		}
+
+		return root.item.icon;
+	}
+
+	CustomRect {
+		anchors.fill: parent
+		anchors.margins: 3
+		color: icon.layer.enabled && enabled && root.current ? Colors.palette.m3primary : "transparent"
+		enabled: !Config.bar.tray.showOnHover
+		radius: Tokens.rounding.full
+
+		StateLayer {
+			acceptedButtons: Qt.LeftButton | Qt.RightButton
+			anchors.fill: parent
+			color: icon.layer.enabled && root.current ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+
+			onClicked: mouse => {
+				if (mouse.button === Qt.LeftButton) {
+					root.item.activate();
+					console.log(icon.source + "\n" + root.item.id);
+				} else if (mouse.button === Qt.RightButton && Config.bar.popouts.tray && !Config.bar.tray.showOnHover) {
+					root.popouts.currentName = `traymenu${root.ind}`;
+					root.popouts.currentCenter = Qt.binding(() => root.mapToItem(root.loader, root.implicitWidth / 2, 0).x);
+					root.popouts.hasCurrent = true;
+					if (visibilities.sidebar || visibilities.dashboard || visibilities.settings) {
+						visibilities.sidebar = false;
+						visibilities.dashboard = false;
+						visibilities.settings = false;
+					}
+				}
+			}
+		}
+	}
+
+	ColoredIcon {
+		id: icon
+
+		anchors.centerIn: parent
+		antialiasing: true
+		color: root.current && !Config.bar.tray.showOnHover ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		implicitSize: Config.bar.tray.trayIconSize * root.dpr
+		layer.enabled: Config.bar.tray.recolorIcons
+		scale: 1 / root.dpr
+		source: root.resolveIcon(root.item.id, root.item.icon)
+	}
+}

Modules/Bar/Components/TrayIcons.qml

@@ -0,0 +1,58 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Services.SystemTray
+import ZShell.Config
+import qs.Components
+import qs.Modules.Bar.Components.Common
+import qs.Modules.Bar.Components.Tray
+import qs.Modules.Bar.Popouts
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	readonly property alias items: repeater
+	readonly property alias layout: sysGrid
+	required property GridLayout loader
+	readonly property int padding: Tokens.padding.small
+	required property Wrapper popouts
+	readonly property real size: horizontal ? sysGrid.implicitWidth + Tokens.padding.small : sysGrid.implicitHeight + Tokens.padding.small
+
+	bottomLeftRadius: horizontal ? Tokens.rounding.full : Tokens.rounding.smallest / 2
+	bottomRightRadius: Tokens.rounding.smallest / 2
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? baseSize : size
+	implicitWidth: horizontal ? size : baseSize
+	radius: Tokens.rounding.full
+	topRightRadius: horizontal ? Tokens.rounding.smallest / 2 : Tokens.rounding.full
+
+	GridLayout {
+		id: sysGrid
+
+		anchors.centerIn: parent
+		columns: root.horizontal ? -1 : 1
+		rowSpacing: -2
+
+		Repeater {
+			id: repeater
+
+			model: SystemTray.items
+
+			TrayItem {
+				id: trayItem
+
+				required property int index
+				required property SystemTrayItem modelData
+
+				implicitHeight: 34
+				implicitWidth: 34
+				ind: index
+				item: modelData
+				loader: root.loader
+				popouts: root.popouts
+			}
+		}
+	}
+}

Modules/Bar/Components/UpdatesWidget.qml

@@ -0,0 +1,41 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Components
+import qs.Modules.Bar.Components.Common
+import qs.Helpers
+import qs.Services
+
+WidgetBase {
+	id: root
+
+	property int countUpdates: Updates.availableUpdates
+	property color textColor: Colors.palette.m3onSurface
+
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? baseSize : content.implicitHeight + Tokens.spacing.small
+	implicitWidth: horizontal ? content.implicitWidth + Tokens.spacing.small * 2 : baseSize
+	radius: Tokens.rounding.full
+
+	GridLayout {
+		id: content
+
+		anchors.centerIn: parent
+		columnSpacing: Tokens.spacing.small
+		columns: root.horizontal ? -1 : 1
+		rowSpacing: -Tokens.spacing.extraSmall / 2
+
+		MaterialIcon {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			font.pointSize: root.horizontal ? Tokens.font.size.larger : Tokens.font.size.large
+			text: "package_2"
+		}
+
+		CustomText {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			color: root.textColor
+			font.pointSize: Tokens.font.size.normal
+			text: root.countUpdates
+		}
+	}
+}

Modules/Bar/Components/WindowTitle.qml

@@ -0,0 +1,98 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import ZShell.Config
+import qs.Components
+import qs.Helpers
+import qs.Services
+
+Item {
+	id: root
+
+	required property var bar
+	property color color: Colors.palette.m3primary
+	property Title current: text1
+	required property bool horizontal
+	// readonly property int maxWidth: 300
+	readonly property int maxSize: {
+		const otherModules = bar.children.filter(c => c.enabled && c.entryId && c.item !== this && c.entryId !== "spacer");
+		const otherSize = otherModules.reduce((acc, curr) => acc + (horizontal ? (curr.item?.nonAnimWidth ?? curr.width ?? 0) : (curr.item.nonAnimHeight ?? curr.height ?? 0)), 0);
+		return horizontal ? (bar.width - otherSize - bar.columnSpacing * (bar.children.length - 1) - bar.vPadding * 2) : (bar.height - otherSize - bar.rowSpacing * (bar.children.length - 1) - bar.vPadding * 4);
+	}
+
+	clip: true
+	implicitHeight: horizontal ? current.implicitHeight : current.implicitWidth + current.anchors.topMargin
+	implicitWidth: horizontal ? current.implicitWidth + current.anchors.leftMargin : current.implicitHeight + current.anchors.topMargin
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+			type: Anim.DefaultEffects
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+			type: Anim.DefaultEffects
+		}
+	}
+
+	Title {
+		id: text1
+	}
+
+	Title {
+		id: text2
+	}
+
+	TextMetrics {
+		id: metrics
+
+		elide: Qt.ElideRight
+		elideWidth: root.maxSize - (root.horizontal ? root.current.anchors.leftMargin : 0)
+		font.family: "Rubik"
+		font.pointSize: Tokens.font.size.normal
+		text: Hypr.activeToplevel?.title ?? qsTr("Desktop")
+
+		onElideWidthChanged: root.current.text = elidedText
+		onTextChanged: {
+			const next = root.current === text1 ? text2 : text1;
+			next.text = elidedText;
+			root.current = next;
+		}
+	}
+
+	component Title: CustomText {
+		id: text
+
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
+		anchors.leftMargin: root.horizontal ? Tokens.spacing.small : 0
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.topMargin: root.horizontal ? 0 : Tokens.spacing.small
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+		color: root.color
+		font.family: metrics.font.family
+		font.pointSize: metrics.font.pointSize
+		height: root.horizontal ? implicitHeight : implicitWidth
+		opacity: root.current === this ? 1 : 0
+		width: root.horizontal ? implicitWidth : implicitHeight
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		transform: [
+			Translate {
+				x: !root.horizontal ? -text.implicitWidth + text.implicitHeight : 0
+			},
+			Rotation {
+				angle: root.horizontal ? 0 : 270
+				origin.x: text.implicitHeight / 2
+				origin.y: text.implicitHeight / 2
+			}
+		]
+	}
+}

Modules/Bar/Components/Workspaces.qml

@@ -0,0 +1,140 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Controls
+import Quickshell
+import Quickshell.Hyprland
+import ZShell.Config
+import qs.Modules.Bar.Components.Workspaces
+import qs.Components
+import qs.Services
+
+Item {
+	id: root
+
+	property real activeWorkspaceMargin: Math.ceil(Tokens.padding.small / 2)
+	readonly property int effectiveActiveWorkspaceId: monitor?.activeWorkspace?.id ?? 1
+	required property bool horizontal
+	readonly property HyprlandMonitor monitor: Hyprland.monitorFor(root.screen)
+	required property ShellScreen screen
+	readonly property real shortSize: Math.max(Config.bar.height, Tokens.bar.innerSize)
+	readonly property real size: (workspaceButtonWidth * workspacesShown) + activeWorkspaceMargin * 2
+	property int workspaceButtonWidth: (horizontal ? bgRect.implicitHeight : bgRect.implicitWidth) - root.activeWorkspaceMargin * 2
+	property int workspaceIndexInGroup: (effectiveActiveWorkspaceId - 1) % root.workspacesShown
+	readonly property list<var> workspaces: Hyprland.workspaces.values.filter(w => w.monitor === root.monitor)
+	readonly property int workspacesShown: workspaces.length
+
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
+
+	Behavior on implicitHeight {
+		enabled: !root.horizontal
+
+		Anim {
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.horizontal
+
+		Anim {
+		}
+	}
+
+	CustomRect {
+		// qmllint disable Quick.anchor-combinations
+		id: bgRect
+
+		anchors.bottom: root.horizontal ? undefined : parent.bottom
+		anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		anchors.left: root.horizontal ? parent.left : undefined
+		anchors.right: root.horizontal ? parent.right : undefined
+		anchors.top: root.horizontal ? undefined : parent.top
+		anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+		color: Colors.tPalette.m3surfaceContainer
+		implicitHeight: root.horizontal ? root.implicitHeight : 0
+		implicitWidth: root.horizontal ? 0 : root.implicitWidth
+		radius: height / 2
+
+		// qmllint enable Quick.anchor-combinations
+		Grid {
+			id: grid
+
+			anchors.fill: parent
+			anchors.margins: root.activeWorkspaceMargin
+			columnSpacing: 0
+			columns: root.horizontal ? root.workspacesShown : 1
+			rowSpacing: 0
+			rows: root.horizontal ? 1 : root.workspacesShown
+
+			Repeater {
+				model: root.workspaces
+
+				Button {
+					id: button
+
+					required property int index
+					required property HyprlandWorkspace modelData
+
+					implicitHeight: indicator.indicatorThickness
+					implicitWidth: indicator.indicatorThickness
+					width: root.workspaceButtonWidth
+
+					background: Item {
+						id: workspaceButtonBackground
+
+						implicitHeight: root.workspaceButtonWidth
+						implicitWidth: root.workspaceButtonWidth
+
+						CustomText {
+							anchors.centerIn: parent
+							color: Colors.palette.m3onSecondaryContainer
+							elide: Text.ElideRight
+							horizontalAlignment: Text.AlignHCenter
+							text: button.modelData?.name ?? ""
+							verticalAlignment: Text.AlignVCenter
+						}
+					}
+
+					onPressed: {
+						const ws = button.modelData.name;
+						Hyprland.dispatch(Hyprland.usingLua ? `hl.dsp.focus({ workspace= "${ws}"})` : `workspace ${ws}`);
+					}
+				}
+			}
+		}
+
+		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.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+			clip: true
+			color: Colors.palette.m3primary
+			implicitHeight: root.horizontal ? indicatorThickness : indicatorLength
+			implicitWidth: root.horizontal ? indicatorLength : indicatorThickness
+			radius: Tokens.rounding.full
+			x: root.horizontal ? indicatorPosition : 0
+			y: root.horizontal ? 0 : indicatorPosition
+
+			AnimatedTabIndexPair {
+				id: idxPair
+
+				index: root.workspaces.findIndex(w => w.active)
+			}
+
+			Coloriser {
+				colorizationColor: Colors.palette.m3onPrimary
+				implicitHeight: grid.height
+				implicitWidth: grid.width
+				source: grid
+				sourceColor: Colors.palette.m3onSurface
+				x: root.horizontal ? -indicator.x + 3 : 0
+				y: root.horizontal ? 0 : -indicator.y + 3
+			}
+		}
+	}
+}

Modules/Bar/Components/Workspaces/AnimatedTabIndexPair.qml

@@ -0,0 +1,24 @@
+import QtQuick
+
+QtObject {
+	id: root
+
+	property real idx1: index
+	property int idx1Duration: 100
+	property real idx2: index
+	property int idx2Duration: 300
+	required property int index
+
+	Behavior on idx1 {
+		NumberAnimation {
+			duration: root.idx1Duration
+			easing.type: Easing.OutSine
+		}
+	}
+	Behavior on idx2 {
+		NumberAnimation {
+			duration: root.idx2Duration
+			easing.type: Easing.OutSine
+		}
+	}
+}

Modules/Bar/Popouts/AudioPopout.qml

@@ -0,0 +1,339 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Services.Pipewire
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import ZShell.Config
+import qs.Components
+import qs.Daemons
+import qs.Helpers
+import qs.Services
+
+Item {
+	id: root
+
+	readonly property int rounding: Tokens.rounding.small - Tokens.padding.small
+	readonly property int topMargin: 0
+	required property var wrapper
+
+	implicitHeight: vol.implicitHeight + Tokens.padding.small * 2
+	implicitWidth: 500 + Tokens.padding.small * 2
+
+	CustomRect {
+		anchors.left: parent.left
+		anchors.right: parent.right
+		anchors.top: parent.top
+		color: Colors.tPalette.m3surfaceContainer
+		implicitHeight: parent.implicitHeight
+		radius: Tokens.rounding.small
+		y: parent.y
+
+		Behavior on implicitHeight {
+			Anim {
+			}
+		}
+	}
+
+	VolumesTab {
+		id: vol
+
+		anchors.left: parent.left
+		anchors.margins: Tokens.padding.small
+		anchors.right: parent.right
+		anchors.verticalCenter: parent.verticalCenter
+	}
+
+	component VolumesTab: ColumnLayout {
+		spacing: 12
+
+		CustomRect {
+			Layout.fillWidth: true
+			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
+			Layout.topMargin: root.topMargin
+			color: Colors.tPalette.m3surfaceContainer
+			radius: root.rounding
+
+			ColumnLayout {
+				anchors.bottomMargin: Tokens.padding.smaller
+				anchors.fill: parent
+				anchors.leftMargin: Tokens.padding.larger
+				anchors.rightMargin: Tokens.padding.larger
+				anchors.topMargin: Tokens.padding.smaller
+
+				RowLayout {
+					Layout.fillHeight: true
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+						Layout.fillWidth: true
+						text: "Output volume"
+					}
+
+					CustomText {
+						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+						color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
+						font.bold: true
+						text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`)
+					}
+				}
+
+				RowLayout {
+					spacing: Tokens.spacing.large
+
+					CustomMouseArea {
+						Layout.bottomMargin: Tokens.padding.normal
+						Layout.fillWidth: true
+						Layout.preferredHeight: Tokens.padding.larger * 3
+
+						CustomSlider {
+							anchors.left: parent.left
+							anchors.right: parent.right
+							bgColor: Audio.muted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+							fgColor: Audio.muted ? Colors.palette.m3error : Colors.palette.m3primary
+							implicitHeight: parent.height
+							insetColor: Audio.muted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
+							insetIcon: Audio.muted || Audio.volume < 0.001 ? "volume_off" : "volume_up"
+							value: Audio.volume
+
+							Behavior on value {
+								Anim {
+								}
+							}
+
+							onInteraction: value => Audio.setVolume(value)
+						}
+					}
+
+					CustomSwitch {
+						Layout.bottomMargin: Tokens.padding.normal
+						checked: !Audio.muted
+
+						onToggled: {
+							const audio = Audio.sink?.audio;
+							if (audio)
+								audio.muted = !audio.muted;
+						}
+					}
+				}
+			}
+		}
+
+		CustomClippingRect {
+			Layout.fillWidth: true
+			Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
+			Layout.topMargin: root.topMargin
+			color: Colors.tPalette.m3surfaceContainer
+			radius: root.rounding
+
+			PwNodePeakMonitor {
+				id: sourcePeak
+
+				node: Audio.source
+			}
+
+			CustomRect {
+				id: sourcePeakFill
+
+				anchors.bottom: parent.bottom
+				anchors.left: parent.left
+				anchors.top: parent.top
+				color: Qt.alpha(Colors.palette.m3primary, 0.15)
+				implicitWidth: parent.width * sourcePeak.peak
+
+				Behavior on implicitWidth {
+					Anim {
+					}
+				}
+			}
+
+			ColumnLayout {
+				anchors.bottomMargin: Tokens.padding.smaller
+				anchors.fill: parent
+				anchors.leftMargin: Tokens.padding.larger
+				anchors.rightMargin: Tokens.padding.larger
+				anchors.topMargin: Tokens.padding.smaller
+
+				RowLayout {
+					Layout.fillHeight: true
+					Layout.fillWidth: true
+
+					CustomText {
+						Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+						Layout.fillWidth: true
+						text: "Input volume"
+					}
+
+					CustomText {
+						Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+						color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
+						font.bold: true
+						text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`)
+					}
+				}
+
+				RowLayout {
+					spacing: Tokens.spacing.large
+
+					CustomMouseArea {
+						Layout.bottomMargin: Tokens.padding.normal
+						Layout.fillWidth: true
+						Layout.preferredHeight: Tokens.padding.larger * 3
+
+						CustomSlider {
+							anchors.left: parent.left
+							anchors.right: parent.right
+							bgColor: Audio.sourceMuted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+							fgColor: Audio.sourceMuted ? Colors.palette.m3error : Colors.palette.m3primary
+							implicitHeight: parent.height
+							insetColor: Audio.sourceMuted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
+							insetIcon: Audio.sourceMuted || Audio.sourceVolume < 0.001 ? "mic_off" : "mic"
+							value: Audio.sourceVolume
+
+							Behavior on value {
+								Anim {
+								}
+							}
+
+							onInteraction: value => Audio.setSourceVolume(value)
+						}
+					}
+
+					CustomSwitch {
+						Layout.bottomMargin: Tokens.padding.normal
+						checked: !Audio.sourceMuted
+
+						onToggled: {
+							const audio = Audio.source?.audio;
+							if (audio)
+								audio.muted = !audio.muted;
+						}
+					}
+				}
+			}
+		}
+
+		Rectangle {
+			Layout.fillWidth: true
+			Layout.preferredHeight: 1
+			Layout.topMargin: root.topMargin
+			color: Colors.tPalette.m3outline
+			visible: appTracks.model.length > 0
+		}
+
+		Repeater {
+			id: appTracks
+
+			model: Audio.streams.filter(s => s.isSink)
+
+			CustomClippingRect {
+				id: appBox
+
+				required property int index
+				required property var modelData
+
+				Layout.fillWidth: true
+				Layout.preferredHeight: 65 + Tokens.spacing.smaller * 2
+				Layout.topMargin: root.topMargin
+				color: Colors.tPalette.m3surfaceContainer
+				radius: root.rounding
+
+				PwNodePeakMonitor {
+					id: peak
+
+					node: appBox.modelData
+				}
+
+				CustomRect {
+					id: peakFill
+
+					anchors.bottom: parent.bottom
+					anchors.left: parent.left
+					anchors.top: parent.top
+					color: Qt.alpha(Colors.palette.m3primary, 0.15)
+					implicitWidth: parent.width * peak.peak
+
+					Behavior on implicitWidth {
+						Anim {
+						}
+					}
+				}
+
+				TextMetrics {
+					id: metrics
+
+					elide: Text.ElideRight
+					elideWidth: root.width - 50
+					text: Audio.getStreamName(appBox.modelData)
+				}
+
+				ColumnLayout {
+					anchors.bottomMargin: Tokens.padding.smaller
+					anchors.fill: parent
+					anchors.leftMargin: Tokens.padding.larger
+					anchors.rightMargin: Tokens.padding.larger
+					anchors.topMargin: Tokens.padding.smaller
+
+					RowLayout {
+						Layout.fillHeight: true
+						Layout.fillWidth: true
+
+						CustomText {
+							Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+							Layout.fillWidth: true
+							elide: Text.ElideRight
+							text: metrics.elidedText
+						}
+
+						CustomText {
+							Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+							color: Qt.alpha(Colors.palette.m3onSurface, 0.7)
+							font.bold: true
+							text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`)
+						}
+					}
+
+					RowLayout {
+						spacing: Tokens.spacing.large
+
+						CustomMouseArea {
+							Layout.bottomMargin: Tokens.padding.normal
+							Layout.fillWidth: true
+							Layout.preferredHeight: Tokens.padding.larger * 3
+
+							CustomSlider {
+								anchors.left: parent.left
+								anchors.right: parent.right
+								bgColor: appBox.modelData.audio.muted ? Qt.alpha(Colors.palette.m3errorContainer, 0.5) : Colors.palette.m3secondaryContainer
+								fgColor: appBox.modelData.audio.muted ? Colors.palette.m3error : Colors.palette.m3primary
+								implicitHeight: parent.height
+								insetColor: appBox.modelData.audio.muted ? (inset.attached ? Colors.palette.m3onErrorContainer : Colors.palette.m3onError) : (inset.attached ? Colors.palette.m3onSecondaryContainer : Colors.palette.m3onPrimary)
+								insetIcon: appBox.modelData.audio.muted || appBox.modelData.audio.volume < 0.001 ? "volume_off" : "volume_up"
+								value: appBox.modelData.audio.volume
+
+								Behavior on value {
+									Anim {
+									}
+								}
+
+								onInteraction: value => Audio.setStreamVolume(appBox.modelData, value)
+							}
+						}
+
+						CustomSwitch {
+							Layout.bottomMargin: Tokens.padding.normal
+							checked: !appBox.modelData.audio.muted
+
+							onToggled: {
+								appBox.modelData.audio.muted = !appBox.modelData.audio.muted;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

Modules/Bar/Popouts/ClipWrapper.qml

@@ -0,0 +1,87 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell
+import qs.Components
+import ZShell.Config
+
+Item {
+	id: root
+
+	required property real borderThickness
+	readonly property alias content: content
+	readonly property bool horizontal: position !== "left"
+	// property real offsetScale: y > 0 || content.hasCurrent ? 0 : 1
+	property real offsetScale: {
+		if (content.hasCurrent)
+			return 0;
+		if (position === "top")
+			return y > 0 ? 0 : 1;
+		if (position === "bottom")
+			return 1;
+		return x > 0 ? 0 : 1;
+	}
+	required property string position
+	required property ShellScreen screen
+
+	anchors.bottom: position === "bottom" ? parent.bottom : undefined
+	clip: true
+	implicitHeight: horizontal ? content.implicitHeight * (1 - offsetScale) : content.implicitHeight
+	implicitWidth: horizontal ? content.implicitWidth : content.implicitWidth * (1 - offsetScale)
+	visible: width > 0 && height > 0
+	x: {
+		if (!horizontal)
+			return 0;
+		const off = content.currentCenter - borderThickness - content.nonAnimWidth / 2;
+		const diff = parent.width - Math.floor(off + content.nonAnimWidth);
+		if (diff < 0)
+			return off + diff;
+		return Math.floor(Math.max(off, 0));
+	}
+	y: {
+		if (horizontal)
+			return 0;
+
+		const off = content.currentCenter - borderThickness - content.nonAnimHeight / 2;
+		const diff = parent.height - Math.floor(off + content.nonAnimHeight);
+		if (diff < 0)
+			return off + diff;
+		return Math.max(off, 0);
+	}
+
+	Behavior on offsetScale {
+		Anim {
+		}
+	}
+	Behavior on x {
+		enabled: !root.horizontal || root.offsetScale < 1
+
+		Anim {
+			duration: content.animLength
+			easing.bezierCurve: content.animCurve
+		}
+	}
+	Behavior on y {
+		enabled: root.horizontal || root.offsetScale < 1
+
+		Anim {
+			duration: content.animLength
+			easing.bezierCurve: content.animCurve
+		}
+	}
+
+	Wrapper {
+		id: content
+
+		anchors.bottom: root.position === "bottom" ? parent.bottom : undefined
+		anchors.bottomMargin: (-implicitHeight - 5) * root.offsetScale
+		anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+		anchors.left: root.horizontal ? undefined : parent.left
+		anchors.leftMargin: (-implicitWidth - 5) * root.offsetScale
+		anchors.top: root.position === "top" ? parent.top : undefined
+		anchors.topMargin: (-implicitHeight - 5) * root.offsetScale
+		anchors.verticalCenter: root.horizontal ? undefined : parent.verticalCenter
+		offsetScale: root.offsetScale
+		screen: root.screen
+	}
+}

Modules/Bar/Popouts/Content.qml

@@ -0,0 +1,149 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Services.SystemTray
+import QtQuick
+import ZShell.Config
+import qs.Components
+
+Item {
+	id: root
+
+	readonly property Item current: currentPopout?.item ?? null
+	readonly property Popout currentPopout: content.children.find(c => c.shouldBeActive) ?? null
+	required property PopoutState popouts
+
+	implicitHeight: (currentPopout?.implicitHeight ?? 0) + Tokens.padding.small * 2
+	implicitWidth: (currentPopout?.implicitWidth ?? 0) + Tokens.padding.small * 2
+
+	Item {
+		id: content
+
+		anchors.fill: parent
+
+		Popout {
+			name: "audio"
+
+			sourceComponent: AudioPopout {
+				wrapper: root.wrapper
+			}
+		}
+
+		Repeater {
+			model: ScriptModel {
+				values: [...SystemTray.items.values]
+			}
+
+			Popout {
+				id: trayMenu
+
+				required property int index
+				required property SystemTrayItem modelData
+
+				name: `traymenu${index}`
+				sourceComponent: trayMenuComponent
+
+				Connections {
+					function onHasCurrentChanged(): void {
+						if (root.popouts.hasCurrent && trayMenu.shouldBeActive) {
+							trayMenu.sourceComponent = null;
+							trayMenu.sourceComponent = trayMenuComponent;
+						}
+					}
+
+					target: root.popouts
+				}
+
+				Component {
+					id: trayMenuComponent
+
+					TrayMenuPopout {
+						popouts: root.popouts
+						trayItem: trayMenu.modelData.menu
+					}
+				}
+			}
+		}
+
+		Popout {
+			name: "upower"
+
+			sourceComponent: UPowerPopout {
+			}
+		}
+
+		Popout {
+			name: "network"
+
+			sourceComponent: NetworkPopout {
+				wrapper: root.popouts
+			}
+		}
+
+		Popout {
+			name: "updates"
+
+			sourceComponent: UpdatesPopout {
+				wrapper: root.popouts
+			}
+		}
+	}
+
+	component Popout: Loader {
+		id: popout
+
+		required property string name
+		readonly property bool shouldBeActive: root.popouts.currentName === name
+
+		active: false
+		// anchors.horizontalCenter: parent.horizontalCenter
+		// anchors.top: parent.top
+		// anchors.topMargin: 5
+		anchors.centerIn: parent
+		opacity: 0
+		scale: 0.8
+
+		states: State {
+			name: "active"
+			when: popout.shouldBeActive
+
+			PropertyChanges {
+				popout.active: true
+				popout.opacity: 1
+				popout.scale: 1
+			}
+		}
+		transitions: [
+			Transition {
+				from: "active"
+				to: ""
+
+				SequentialAnimation {
+					Anim {
+						properties: "opacity,scale"
+					}
+
+					PropertyAction {
+						property: "active"
+						target: popout
+					}
+				}
+			},
+			Transition {
+				from: ""
+				to: "active"
+
+				SequentialAnimation {
+					PropertyAction {
+						property: "active"
+						target: popout
+					}
+
+					Anim {
+						properties: "opacity,scale"
+					}
+				}
+			}
+		]
+	}
+}

Modules/Bar/Popouts/NetworkPopout.qml

@@ -0,0 +1,36 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Networking
+import QtQuick
+import QtQuick.Layouts
+import qs.Components
+import ZShell.Config
+import qs.Modules
+import qs.Helpers as Helpers
+
+Item {
+	id: root
+
+	required property var wrapper
+
+	ColumnLayout {
+		id: layout
+
+		spacing: 8
+
+		Repeater {
+			model: Helpers.Network.devices
+
+			CustomRadioButton {
+				id: network
+
+				required property NetworkDevice modelData
+
+				checked: Helpers.Network.activeDevice?.name === modelData.name
+				text: modelData.description
+				visible: modelData.name !== "lo"
+			}
+		}
+	}
+}

Modules/Bar/Popouts/PopoutState.qml

@@ -0,0 +1,8 @@
+import QtQuick
+
+QtObject {
+	property string currentName
+	property bool hasCurrent
+
+	signal detachRequested(mode: string)
+}

Modules/Bar/Popouts/TrayMenuPopout.qml

@@ -0,0 +1,239 @@
+pragma ComponentBehavior: Bound
+
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+import QtQuick.Controls
+import QtQuick.Effects
+import qs.Components
+import qs.Modules
+import ZShell.Config
+import qs.Services
+
+StackView {
+	id: root
+
+	readonly property int itemHeight: 30
+	readonly property int panelRadius: ((itemHeight / 2) + Tokens.padding.small) * Tokens.rounding.scale
+	required property PopoutState popouts
+	property int rootWidth: 0
+	required property QsMenuHandle trayItem
+
+	implicitHeight: currentItem.isSubMenu ? currentItem.implicitHeight : currentItem.implicitHeight - currentItem.spacing
+	implicitWidth: currentItem.implicitWidth
+
+	initialItem: SubMenu {
+		handle: root.trayItem
+	}
+	popEnter: NoAnim {
+	}
+	popExit: NoAnim {
+	}
+	pushEnter: NoAnim {
+	}
+	pushExit: NoAnim {
+	}
+
+	Component {
+		id: subMenuComp
+
+		SubMenu {
+		}
+	}
+
+	component NoAnim: Transition {
+		NumberAnimation {
+			duration: 0
+		}
+	}
+	component SubMenu: ColumnLayout {
+		id: menu
+
+		required property QsMenuHandle handle
+		property bool isSubMenu
+		property bool shown
+
+		opacity: shown ? 1 : 0
+		scale: shown ? 1 : 0.8
+		spacing: Tokens.spacing.extraSmall
+
+		Behavior on opacity {
+			Anim {
+			}
+		}
+		Behavior on scale {
+			Anim {
+			}
+		}
+
+		Component.onCompleted: shown = true
+		StackView.onActivating: shown = true
+		StackView.onDeactivating: shown = false
+		StackView.onRemoved: destroy()
+
+		QsMenuOpener {
+			id: menuOpener
+
+			menu: menu.handle
+		}
+
+		Repeater {
+			model: menuOpener.children
+
+			CustomRect {
+				id: item
+
+				required property int index
+				required property QsMenuEntry modelData
+
+				Layout.fillWidth: true
+				Layout.leftMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				Layout.rightMargin: modelData.isSeparator ? Tokens.padding.normal : 0
+				color: modelData.isSeparator ? Colors.palette.m3outlineVariant : "transparent"
+				implicitHeight: modelData.isSeparator ? (visible ? 1 : 0) : childrenLoader.item.implicitHeight
+				implicitWidth: childrenLoader.item?.implicitWidth ?? 0
+				radius: Tokens.rounding.full
+				visible: index !== (menuOpener.children.values.length - 1) ? true : (modelData.isSeparator ? false : true)
+
+				Loader {
+					id: childrenLoader
+
+					active: !item.modelData.isSeparator
+					anchors.fill: parent
+					asynchronous: true
+
+					sourceComponent: Item {
+						property int iconWidth: icon.active ? icon.width + Tokens.spacing.normal + icon.anchors.rightMargin : 0
+
+						implicitHeight: root.itemHeight
+						implicitWidth: label.width + label.anchors.leftMargin * 2 + iconWidth + (expand.item?.width ?? 0)
+
+						StateLayer {
+							enabled: item.modelData.enabled
+							radius: item.radius
+
+							onClicked: {
+								const entry = item.modelData;
+								if (entry.hasChildren) {
+									root.push(subMenuComp.createObject(null, {
+										handle: entry,
+										isSubMenu: true
+									}));
+								} else {
+									item.modelData.triggered();
+									root.popouts.hasCurrent = false;
+								}
+							}
+						}
+
+						Loader {
+							id: icon
+
+							active: item.modelData.icon !== ""
+							anchors.right: parent.right
+							anchors.rightMargin: 10
+							anchors.verticalCenter: parent.verticalCenter
+							asynchronous: true
+
+							sourceComponent: Item {
+								implicitHeight: label.implicitHeight
+								implicitWidth: label.implicitHeight
+
+								IconImage {
+									id: iconImage
+
+									implicitSize: parent.implicitHeight
+									source: item.modelData.icon
+									visible: false
+								}
+
+								MultiEffect {
+									anchors.fill: iconImage
+									colorization: 1.0
+									colorizationColor: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+									source: iconImage
+								}
+							}
+						}
+
+						CustomText {
+							id: label
+
+							anchors.left: parent.left
+							anchors.leftMargin: 10
+							anchors.verticalCenter: parent.verticalCenter
+							color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+							text: item.modelData.text
+						}
+
+						Loader {
+							id: expand
+
+							active: item.modelData.hasChildren
+							anchors.right: parent.right
+							anchors.verticalCenter: parent.verticalCenter
+							asynchronous: true
+
+							sourceComponent: MaterialIcon {
+								color: item.modelData.enabled ? Colors.palette.m3onSurface : Colors.palette.m3outline
+								text: "chevron_right"
+							}
+						}
+					}
+				}
+			}
+		}
+
+		Loader {
+			id: loader
+
+			Layout.fillWidth: true
+			Layout.maximumHeight: active ? implicitHeight : 0
+			active: menu.isSubMenu
+			asynchronous: true
+
+			sourceComponent: Item {
+				implicitHeight: 30
+
+				Item {
+					anchors.fill: parent
+					implicitHeight: 30
+
+					CustomRect {
+						anchors.fill: parent
+						color: Colors.palette.m3secondaryContainer
+						radius: Tokens.rounding.full
+
+						StateLayer {
+							color: Colors.palette.m3onSecondaryContainer
+							radius: parent.radius
+
+							onClicked: {
+								root.pop();
+							}
+						}
+					}
+
+					Row {
+						id: back
+
+						anchors.verticalCenter: parent.verticalCenter
+
+						MaterialIcon {
+							anchors.verticalCenter: parent.verticalCenter
+							color: Colors.palette.m3onSecondaryContainer
+							text: "chevron_left"
+						}
+
+						CustomText {
+							anchors.verticalCenter: parent.verticalCenter
+							color: Colors.palette.m3onSecondaryContainer
+							text: qsTr("Back")
+						}
+					}
+				}
+			}
+		}
+	}
+}

Modules/Bar/Popouts/UPowerPopout.qml

@@ -0,0 +1,224 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import Quickshell.Services.UPower
+import ZShell.Config
+import qs.Helpers
+import qs.Components
+import qs.Services
+
+Column {
+	id: root
+
+	readonly property int panelRadius: ((profiles.height / 2) + Tokens.padding.small) * Tokens.rounding.scale
+
+	spacing: Tokens.spacing.normal
+
+	Loader {
+		active: Battery.isLaptop
+
+		CustomText {
+			text: qsTr("Remaining: %1%").arg(Math.round(UPower.displayDevice.percentage * 100))
+		}
+	}
+
+	CustomText {
+		function formatSeconds(s: int, fallback: string): string {
+			const day = Math.floor(s / 86400);
+			const hr = Math.floor(s / 3600) % 60;
+			const min = Math.floor(s / 60) % 60;
+
+			let comps = [];
+			if (day > 0)
+				comps.push(`${day} days`);
+			if (hr > 0)
+				comps.push(`${hr} hours`);
+			if (min > 0)
+				comps.push(`${min} mins`);
+
+			return comps.join(", ") || fallback;
+		}
+
+		anchors.left: parent.left
+		anchors.leftMargin: Tokens.padding.normal
+		text: Battery.isLaptop ? qsTr("Time %1: %2").arg(Battery.onBattery ? "remaining" : "until charged").arg(Battery.onBattery ? formatSeconds(Battery.timeToEmpty, "Calculating...") : formatSeconds(Battery.timeToFull, "Fully charged!")) : qsTr("Power profile: %1").arg(PowerProfile.toString(PowerProfiles.profile))
+	}
+
+	Loader {
+		active: PowerProfiles.degradationReason !== PerformanceDegradationReason.None
+		anchors.horizontalCenter: parent.horizontalCenter
+		asynchronous: true
+		height: active ? ((item as Item)?.implicitHeight ?? 0) : 0
+
+		sourceComponent: CustomRect {
+			color: Colors.palette.m3error
+			implicitHeight: child.implicitHeight + Tokens.padding.large
+			implicitWidth: child.implicitWidth + Tokens.padding.larger * 2
+			radius: Tokens.rounding.large
+
+			Column {
+				id: child
+
+				anchors.centerIn: parent
+
+				Row {
+					anchors.horizontalCenter: parent.horizontalCenter
+					spacing: Tokens.spacing.small
+
+					MaterialIcon {
+						anchors.verticalCenter: parent.verticalCenter
+						anchors.verticalCenterOffset: -font.pointSize / 10
+						color: Colors.palette.m3onError
+						text: "warning"
+					}
+
+					CustomText {
+						anchors.verticalCenter: parent.verticalCenter
+						color: Colors.palette.m3onError
+						font.family: Appearance.font.family.mono
+						text: qsTr("Performance Degraded")
+					}
+
+					MaterialIcon {
+						anchors.verticalCenter: parent.verticalCenter
+						anchors.verticalCenterOffset: -font.pointSize / 10
+						color: Colors.palette.m3onError
+						text: "warning"
+					}
+				}
+
+				CustomText {
+					anchors.horizontalCenter: parent.horizontalCenter
+					color: Colors.palette.m3onError
+					text: qsTr("Reason: %1").arg(PerformanceDegradationReason.toString(PowerProfiles.degradationReason))
+				}
+			}
+		}
+	}
+
+	CustomRect {
+		id: profiles
+
+		property string current: {
+			const p = PowerProfiles.profile;
+			if (p === PowerProfile.PowerSaver)
+				return saver.icon;
+			if (p === PowerProfile.Performance)
+				return perf.icon;
+			return balance.icon;
+		}
+
+		anchors.horizontalCenter: parent.horizontalCenter
+		color: Colors.tPalette.m3surfaceContainer
+		implicitHeight: indicator.height + Tokens.padding.extraSmall * 2
+		implicitWidth: saver.implicitHeight + balance.implicitHeight + perf.implicitHeight + Tokens.padding.larger * 2 + Tokens.spacing.small * 8
+		radius: Tokens.rounding.full
+
+		CustomRect {
+			id: indicator
+
+			color: Colors.palette.m3primary
+			radius: Tokens.rounding.full
+			state: profiles.current
+
+			states: [
+				State {
+					name: saver.icon
+
+					Fill {
+						item: saver
+					}
+				},
+				State {
+					name: balance.icon
+
+					Fill {
+						item: balance
+					}
+				},
+				State {
+					name: perf.icon
+
+					Fill {
+						item: perf
+					}
+				}
+			]
+			transitions: Transition {
+				AnchorAnim {
+				}
+			}
+		}
+
+		Profile {
+			id: saver
+
+			anchors.left: parent.left
+			anchors.leftMargin: Tokens.padding.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			icon: "energy_savings_leaf"
+			profile: PowerProfile.PowerSaver
+		}
+
+		Profile {
+			id: balance
+
+			anchors.centerIn: parent
+			icon: "balance"
+			profile: PowerProfile.Balanced
+		}
+
+		Profile {
+			id: perf
+
+			anchors.right: parent.right
+			anchors.rightMargin: Tokens.padding.extraSmall
+			anchors.verticalCenter: parent.verticalCenter
+			icon: "bolt"
+			profile: PowerProfile.Performance
+		}
+	}
+
+	component Fill: AnchorChanges {
+		required property Item item
+
+		anchors.bottom: item.bottom
+		anchors.left: item.left
+		anchors.right: item.right
+		anchors.top: item.top
+		target: indicator
+	}
+	component Profile: Item {
+		required property string icon
+		required property int profile
+
+		implicitHeight: icon.implicitHeight + Tokens.padding.small
+		implicitWidth: icon.implicitHeight + Tokens.padding.small
+
+		StateLayer {
+			color: profiles.current === parent.icon ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			radius: Tokens.rounding.full
+
+			onClicked: {
+				PowerProfiles.profile = parent.profile;
+			}
+		}
+
+		MaterialIcon {
+			id: icon
+
+			anchors.centerIn: parent
+			color: profiles.current === text ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+			fill: profiles.current === text ? 1 : 0
+			font.pointSize: Tokens.font.size.large * 2
+			grade: Colors.light ? 0 : (text === "balance" ? -25 : 0)
+			text: parent.icon
+
+			Behavior on fill {
+				Anim {
+					type: Anim.DefaultEffects
+				}
+			}
+		}
+	}
+}

Modules/Bar/Popouts/UpdatesPopout.qml

@@ -0,0 +1,172 @@
+pragma ComponentBehavior: Bound
+
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import ZShell.Config
+import qs.Components
+import qs.Modules
+import qs.Helpers
+import qs.Services
+
+CustomClippingRect {
+	id: root
+
+	readonly property bool hasUpdates: Object.keys(Updates.updates)?.length > 0
+	readonly property int itemHeight: 50 + Tokens.padding.smaller * 2
+	required property var wrapper
+
+	color: Colors.tPalette.m3surfaceContainer
+	implicitHeight: hasUpdates ? updatesListLoader.item?.implicitHeight + Tokens.padding.small * 2 : noUpdatesLoader.item.height
+	implicitWidth: hasUpdates ? updatesListLoader.item?.contentWidth + Tokens.padding.small * 2 : noUpdatesLoader.item.width
+	radius: Tokens.rounding.small
+
+	Loader {
+		id: noUpdatesLoader
+
+		active: !root.hasUpdates
+		anchors.centerIn: parent
+
+		sourceComponent: Item {
+			id: noUpdates
+
+			height: 200
+			width: 300
+
+			MaterialIcon {
+				id: noUpdatesIcon
+
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: parent.top
+				color: Colors.tPalette.m3onSurfaceVariant
+				font.pointSize: Tokens.font.size.extraLarge * 3
+				horizontalAlignment: Text.AlignHCenter
+				text: "check"
+			}
+
+			CustomText {
+				anchors.horizontalCenter: parent.horizontalCenter
+				anchors.top: noUpdatesIcon.bottom
+				color: Colors.tPalette.m3onSurfaceVariant
+				horizontalAlignment: Text.AlignHCenter
+				text: qsTr("No updates available")
+				verticalAlignment: Text.AlignVCenter
+			}
+		}
+	}
+
+	Loader {
+		id: updatesListLoader
+
+		active: root.hasUpdates
+		anchors.centerIn: parent
+
+		sourceComponent: CustomListView {
+			id: updatesList
+
+			contentHeight: childrenRect.height
+			contentWidth: 600
+			displayMarginBeginning: root.itemHeight
+			displayMarginEnd: root.itemHeight
+			implicitHeight: Math.min(contentHeight, (root.itemHeight + spacing) * 5 - spacing)
+			implicitWidth: contentWidth
+			spacing: Tokens.spacing.normal
+
+			delegate: CustomRect {
+				id: update
+
+				required property var modelData
+				readonly property list<string> sections: modelData.update.split(" ")
+
+				// anchors.left: parent.left
+				// anchors.right: parent.right
+				color: Colors.tPalette.m3surfaceContainer
+				implicitHeight: root.itemHeight
+				implicitWidth: 600
+				radius: Tokens.rounding.small - Tokens.padding.small
+
+				RowLayout {
+					anchors.fill: parent
+					anchors.leftMargin: Tokens.padding.smaller
+					anchors.rightMargin: Tokens.padding.smaller
+
+					MaterialIcon {
+						font.pointSize: Tokens.font.size.large * 2
+						text: "package_2"
+					}
+
+					ColumnLayout {
+						Layout.fillWidth: true
+
+						CustomText {
+							Layout.fillWidth: true
+							Layout.preferredHeight: 25
+							elide: Text.ElideRight
+							font.pointSize: Tokens.font.size.large
+							text: update.sections[0]
+						}
+
+						CustomText {
+							Layout.fillWidth: true
+							color: Colors.palette.m3onSurfaceVariant
+							text: Updates.formatUpdateTime(update.modelData.timestamp)
+						}
+					}
+
+					RowLayout {
+						Layout.fillHeight: true
+						Layout.preferredWidth: 300
+
+						MarqueeText {
+							id: versionFrom
+
+							Layout.fillHeight: true
+							Layout.preferredWidth: 125
+							animate: true
+							color: Colors.palette.m3tertiary
+							font.pointSize: Tokens.font.size.large
+							horizontalAlignment: Text.AlignHCenter
+							marqueeEnabled: true
+							pauseMs: 4000
+							text: update.sections[1]
+							width: 125
+						}
+
+						MaterialIcon {
+							Layout.fillHeight: true
+							color: Colors.palette.m3secondary
+							font.pointSize: Tokens.font.size.extraLarge
+							horizontalAlignment: Text.AlignHCenter
+							text: "arrow_right_alt"
+							verticalAlignment: Text.AlignVCenter
+						}
+
+						MarqueeText {
+							id: versionTo
+
+							Layout.fillHeight: true
+							Layout.preferredWidth: 120
+							animate: true
+							color: Colors.palette.m3primary
+							font.pointSize: Tokens.font.size.large
+							horizontalAlignment: Text.AlignHCenter
+							marqueeEnabled: true
+							pauseMs: 4000
+							text: update.sections[3]
+							width: 125
+						}
+					}
+				}
+			}
+			model: ScriptModel {
+				id: script
+
+				objectProp: "update"
+				values: Object.entries(Updates.updates).sort((a, b) => b[1] - a[1]).map(([update, timestamp]) => ({
+							update,
+							timestamp
+						}))
+			}
+		}
+	}
+}

Modules/Bar/Popouts/Wrapper.qml

@@ -0,0 +1,114 @@
+import Quickshell
+import Quickshell.Wayland
+import Quickshell.Hyprland
+import QtQuick
+import qs.Components
+import ZShell.Config
+
+Item {
+	id: root
+
+	property list<real> animCurve: Tokens.anim.curves.expressiveDefaultSpatial
+	property int animLength: Tokens.anim.durations.expressiveDefaultSpatial
+	readonly property alias content: content
+	readonly property Item current: (content.item as Content)?.current ?? null
+	property real currentCenter
+	property alias currentName: popoutState.currentName
+	property string detachedMode
+	property alias hasCurrent: popoutState.hasCurrent
+	readonly property real nonAnimHeight: content.implicitHeight || 150
+	readonly property real nonAnimWidth: children.find(c => c.shouldBeActive)?.implicitWidth ?? content.implicitWidth
+	required property real offsetScale
+	property string queuedMode
+	required property ShellScreen screen
+
+	function close(): void {
+		hasCurrent = false;
+		detachedMode = "";
+	}
+
+	implicitHeight: nonAnimHeight
+	implicitWidth: nonAnimWidth
+
+	Behavior on implicitHeight {
+		enabled: root.offsetScale < 1
+
+		Anim {
+			duration: root.animLength
+			easing.bezierCurve: root.animCurve
+		}
+	}
+	Behavior on implicitWidth {
+		enabled: root.offsetScale < 1
+
+		Anim {
+			duration: root.animLength
+			easing.bezierCurve: root.animCurve
+		}
+	}
+
+	PopoutState {
+		id: popoutState
+	}
+
+	Comp {
+		id: content
+
+		anchors.centerIn: parent
+		shouldBeActive: root.hasCurrent
+
+		sourceComponent: Content {
+			popouts: popoutState
+		}
+	}
+
+	component Comp: Loader {
+		id: comp
+
+		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"
+					}
+				}
+			},
+			Transition {
+				from: "active"
+				to: ""
+
+				SequentialAnimation {
+					Anim {
+						property: "opacity"
+					}
+
+					PropertyAction {
+						property: "active"
+					}
+				}
+			}
+		]
+	}
+}