Merge branch 'main' into module/wifi

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/BatteryIcon.qml

@@ -0,0 +1,85 @@
+import QtQuick
+import ZShell.Config
+import qs.Services
+import qs.Components
+import qs.Helpers
+
+Row {
+	id: root
+
+	property real batHeight: Tokens.padding.smaller * 2
+	property real batWidth: Tokens.padding.larger * 2
+	required property string devState
+	property real nubHeight: Tokens.padding.small
+	property real nubWidth: 2
+	required property real percentage
+	property real radius: Tokens.rounding.smallest / 2
+
+	spacing: 1
+
+	CustomRect {
+		id: track
+
+		anchors.verticalCenter: parent.verticalCenter
+		color: Battery.getColors(root.percentage, root.devState).bg
+		height: root.batHeight
+		radius: root.radius
+		width: root.batWidth
+
+		CustomText {
+			color: Battery.getColors(root.percentage, root.devState).fg
+			font.pointSize: Tokens.font.size.larger / 1.5
+			font.weight: 800
+			height: track.height
+			horizontalAlignment: Text.AlignHCenter
+			text: Math.round(root.percentage * 100)
+			verticalAlignment: Text.AlignVCenter
+			width: track.width
+		}
+
+		Item {
+			clip: true
+			width: parent.width * root.percentage
+
+			anchors {
+				bottom: parent.bottom
+				left: parent.left
+				top: parent.top
+			}
+
+			CustomRect {
+				id: fill
+
+				color: Battery.getColors(root.percentage, root.devState).fg
+				height: track.height
+				radius: track.radius
+				width: track.width
+
+				CustomText {
+					id: batteryLabel
+
+					clip: true
+					color: Battery.getColors(root.percentage, root.devState).bg
+					font.pointSize: Tokens.font.size.larger / 1.5
+					font.weight: 800
+					height: track.height
+					horizontalAlignment: Text.AlignHCenter
+					text: Math.round(root.percentage * 100)
+					verticalAlignment: Text.AlignVCenter
+					width: track.width
+				}
+			}
+		}
+	}
+
+	CustomRect {
+		id: nub
+
+		anchors.verticalCenter: parent.verticalCenter
+		bottomRightRadius: 20
+		color: root.percentage < 0.99 ? track.color : fill.color
+		height: root.nubHeight
+		topRightRadius: 20
+		width: root.nubWidth
+	}
+}

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,174 @@
+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: "bluetooth"
+
+					delegate: EntryWrapper {
+						name: "bluetooth"
+
+						BluetoothWidget {
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "network"
+
+					delegate: EntryWrapper {
+						name: "network"
+
+						NetworkWidget {
+						}
+					}
+				}
+
+				DelegateChoice {
+					roleValue: "power"
+
+					delegate: EntryWrapper {
+						name: "upower"
+
+						UPowerWidget {
+						}
+					}
+				}
+			}
+		}
+	}
+
+	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/BluetoothWidget.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Services
+import qs.Components
+
+MaterialIcon {
+	Layout.alignment: Qt.AlignVCenter
+	animate: true
+	color: Colors.palette.m3onSurface // Network.connected ? root.textColor : Colors.palette.m3error
+	fill: 1
+	font.pointSize: Tokens.font.size.larger
+	text: "bluetooth"
+}

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/NetworkWidget.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Services
+import qs.Components
+
+MaterialIcon {
+	Layout.alignment: Qt.AlignVCenter
+	animate: true
+	color: Colors.palette.m3onSurface // Network.connected ? root.textColor : Colors.palette.m3error
+	fill: 1
+	font.pointSize: Tokens.font.size.larger
+	text: "android_wifi_4_bar"
+}

Modules/Bar/Components/StatusIcons/UPowerWidget.qml

@@ -0,0 +1,80 @@
+import Quickshell.Services.UPower
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Modules.Bar.Components.Common
+import qs.Components
+import qs.Helpers
+
+Item {
+	id: root
+
+	readonly property Item currentItem: batteryIconLoader?.item ?? peripheralIconLoader?.item ?? upowerIconLoader.item
+
+	implicitHeight: currentItem?.implicitHeight ?? 0
+	implicitWidth: currentItem?.implicitWidth ?? 0
+
+	Behavior on Layout.preferredHeight {
+		Anim {
+		}
+	}
+	Behavior on Layout.preferredWidth {
+		Anim {
+		}
+	}
+	Behavior on opacity {
+		Anim {
+		}
+	}
+	Behavior on scale {
+		Anim {
+		}
+	}
+
+	Component.onCompleted: Battery.startDaemon()
+
+	Loader {
+		id: batteryIconLoader
+
+		active: Battery.isLaptop
+		anchors.centerIn: parent
+
+		sourceComponent: BatteryIcon {
+			devState: Battery.deviceStateString
+			percentage: Battery.currentPerc
+		}
+	}
+
+	Loader {
+		id: peripheralIconLoader
+
+		active: (Battery.lowestPeripheral?.isPresent ?? false) && !batteryIconLoader.active
+		anchors.centerIn: parent
+
+		sourceComponent: BatteryIcon {
+			devState: Battery.lowestPeripheral?.state ?? ""
+			percentage: Battery.lowestPeripheral?.percentage ?? 0
+		}
+	}
+
+	Loader {
+		id: upowerIconLoader
+
+		active: !batteryIconLoader.active && !peripheralIconLoader.active
+		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
+		}
+	}
+}