refactor qs bar

8 files changed, 202 insertions, 176 deletions

diff --git a/.config/quickshell/Modules/Bar.qml b/.config/quickshell/Modules/Bar.qml
index 8ddd144..ad8b885 100644
--- a/.config/quickshell/Modules/Bar.qml
+++ b/.config/quickshell/Modules/Bar.qml
@@ -1,8 +1,5 @@
 import Quickshell
-import Quickshell.Hyprland
 import QtQuick
-import QtQuick.Layouts
-import qs.Services
 
 Variants {
 	model: Quickshell.screens;
@@ -37,129 +34,11 @@ Variants {
 				implicitHeight: 36
 				color: "transparent"
 
-				Rectangle {
-					anchors.verticalCenter: parent.verticalCenter
-					anchors.left: parent.left
-					implicitWidth: workspaces.implicitWidth + 12*2
-					height: parent.height
-					color: Flexoki.bg
-					radius: 18
+				BarWorkspaces {}
 
-					Row {
-						id: workspaces
-						anchors.centerIn: parent
-						height: 20
-						spacing: 6
+				BarMusic {}
 
-						Repeater {
-							model: 10
-
-							delegate: Rectangle {
-								property HyprlandWorkspace ws: {
-									Hyprland.workspaces.values.find(ws => ws.id === index + 1) || null
-								}
-								property bool focused: {
-									ws && ws.monitor.name === root.screen.name && ws.focused
-								}
-								property bool occupied: {
-									ws && ws.monitor.name === root.screen.name && ws.toplevels.values.length > 0
-								}
-
-								width: 20
-								height: 20
-								radius: 10
-
-								color: {
-									if (!focused) return "transparent"
-									return occupied ? Flexoki.re : Flexoki.ui3
-								}
-
-								border.width: 2
-								border.color: occupied ? Flexoki.re : Flexoki.ui3
-							}
-						}
-					}
-				}
-
-				Music {}
-
-				Rectangle {
-					anchors.verticalCenter: parent.verticalCenter
-					anchors.right: parent.right
-					implicitWidth: status.implicitWidth + 12*2
-					height: parent.height
-					color: Flexoki.bg
-					radius: 18
-
-					RowLayout {
-						id: status
-						anchors.centerIn: parent
-						implicitHeight: parent.implicitHeight
-						spacing: 24
-
-						Text {
-							text: {
-								//     
-								var icon
-								if (Volume.volume == 0) {
-									icon = " "
-								} else if (Volume.volume < 50) {
-									icon = " "
-								} else {
-									icon = "  "
-								}
-								return icon + Volume.volume + "%"
-							}
-							color: Flexoki.re
-							font { family: root.fontFamily; pixelSize: root.fontSize }
-						}
-
-						Text {
-							text: Wifi.ssid == "" ? "󰖪 " : "󰖩 " + Wifi.ssid
-							color: Flexoki.or
-							font { family: root.fontFamily; pixelSize: root.fontSize }
-						}
-
-						Text {
-							text: " " + Brightness.brightness + "%"
-							color: Flexoki.ye
-							font { family: root.fontFamily; pixelSize: root.fontSize }
-						}
-
-						Text {
-							text: {
-								var icon
-								var i = Math.floor((Battery.capacity - 1) / 10)
-								switch (Battery.status) {
-									case "Full":
-										icon = "󰂄"
-										break
-									case "Discharging":
-										icon = ["󰁺","󰁻","󰁼","󰁽","󰁾","󰁿","󰂀","󰂁","󰂂","󰁹"][i]
-										break
-									case "Charging":
-										icon = ["󰢜","󰂆","󰂇","󰂈","󰢝","󰂉","󰢞","󰂊","󰂋","󰂅"][i]
-										break
-								}
-							  return icon + " " + Battery.capacity + "%"
-							}
-							color: Flexoki.gr
-							font { family: root.fontFamily; pixelSize: root.fontSize }
-						}
-
-						Text {
-							text: " " + Qt.formatDateTime(Time.time, "MMM d hh:mm:ss")
-							color: Flexoki.bl
-							font { family: root.fontFamily; pixelSize: root.fontSize }
-						}
-
-						Text {
-							text: "󰐥"
-							color: Flexoki.pu
-							font { family: root.fontFamily; pixelSize: root.fontSize * 1.5 }
-						}
-					}
-				}
+				BarStatus {}
 			}
 		}
 	}
diff --git a/.config/quickshell/Modules/Music.qml b/.config/quickshell/Modules/BarMusic.qml
index 8c79092..676fcc9 100644
--- a/.config/quickshell/Modules/Music.qml
+++ b/.config/quickshell/Modules/BarMusic.qml
@@ -212,55 +212,7 @@ MouseArea {
 				onExited: root.state = "popup-closed"
 			}
 
-			RowLayout {	
-				id: popupContent
-
-				anchors.fill: parent
-				anchors.topMargin: 32
-				anchors.bottomMargin: 32
-				anchors.leftMargin: 100
-				anchors.rightMargin: 100
-				spacing: 60
-
-				Image {
-					id: cover
-					asynchronous: true
-					source: "file://" + Song.coverPath
-					sourceSize.width: 300
-					sourceSize.height: 300
-					width: 300
-					height: 300
-
-					Connections {
-						target: Song
-
-						function onCoverLoaded() {
-							cover.source = "file://" + Song.coverPath
-						}
-					}
-				}
-
-				ColumnLayout {
-					Text {
-						Layout.alignment: Qt.AlignHCenter
-						color: Flexoki.re
-						text: Song.artist
-						font.pixelSize: root.fontSize
-					}
-					Text {
-						Layout.alignment: Qt.AlignHCenter
-						color: Flexoki.tx
-						text: Song.album
-						font.pixelSize: root.fontSize
-					}
-					Text {
-						Layout.alignment: Qt.AlignHCenter
-						color: Flexoki.tx
-						text: Song.title
-						font.pixelSize: root.fontSize
-					}
-				}
-			}
+			MusicPopup {}
 		}
 	}
 
diff --git a/.config/quickshell/Modules/BarStatus.qml b/.config/quickshell/Modules/BarStatus.qml
new file mode 100644
index 0000000..436392a
--- /dev/null
+++ b/.config/quickshell/Modules/BarStatus.qml
@@ -0,0 +1,82 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Services
+
+Rectangle {
+	anchors.verticalCenter: parent.verticalCenter
+	anchors.right: parent.right
+	implicitWidth: status.implicitWidth + 12*2
+	height: parent.height
+	color: Flexoki.bg
+	radius: 18
+
+	RowLayout {
+		id: status
+		anchors.centerIn: parent
+		implicitHeight: parent.implicitHeight
+		spacing: 24
+
+		Text {
+			text: {
+				//     
+				var icon
+				if (Volume.volume == 0) {
+					icon = " "
+				} else if (Volume.volume < 50) {
+					icon = " "
+				} else {
+					icon = "  "
+				}
+				return icon + Volume.volume + "%"
+			}
+			color: Flexoki.re
+			font { family: root.fontFamily; pixelSize: root.fontSize }
+		}
+
+		Text {
+			text: Wifi.ssid == "" ? "󰖪 " : "󰖩 " + Wifi.ssid
+			color: Flexoki.or
+			font { family: root.fontFamily; pixelSize: root.fontSize }
+		}
+
+		Text {
+			text: " " + Brightness.brightness + "%"
+			color: Flexoki.ye
+			font { family: root.fontFamily; pixelSize: root.fontSize }
+		}
+
+		Text {
+			text: {
+				var icon
+				var i = Math.floor((Battery.capacity - 1) / 10)
+				switch (Battery.status) {
+					case "Full":
+						icon = "󰂄"
+						break
+					case "Discharging":
+						icon = ["󰁺","󰁻","󰁼","󰁽","󰁾","󰁿","󰂀","󰂁","󰂂","󰁹"][i]
+						break
+					case "Charging":
+						icon = ["󰢜","󰂆","󰂇","󰂈","󰢝","󰂉","󰢞","󰂊","󰂋","󰂅"][i]
+						break
+				}
+			  return icon + " " + Battery.capacity + "%"
+			}
+			color: Flexoki.gr
+			font { family: root.fontFamily; pixelSize: root.fontSize }
+		}
+
+		Text {
+			text: " " + Qt.formatDateTime(Time.time, "MMM d hh:mm:ss")
+			color: Flexoki.bl
+			font { family: root.fontFamily; pixelSize: root.fontSize }
+		}
+
+		Text {
+			text: "󰐥"
+			color: Flexoki.pu
+			font { family: root.fontFamily; pixelSize: root.fontSize * 1.5 }
+		}
+	}
+}
diff --git a/.config/quickshell/Modules/BarWorkspaces.qml b/.config/quickshell/Modules/BarWorkspaces.qml
new file mode 100644
index 0000000..fa95262
--- /dev/null
+++ b/.config/quickshell/Modules/BarWorkspaces.qml
@@ -0,0 +1,48 @@
+import Quickshell
+import Quickshell.Hyprland
+import QtQuick
+import qs.Services
+
+Rectangle {
+	anchors.verticalCenter: parent.verticalCenter
+	anchors.left: parent.left
+	implicitWidth: workspaces.implicitWidth + 12*2
+	height: parent.height
+	color: Flexoki.bg
+	radius: 18
+
+	Row {
+		id: workspaces
+		anchors.centerIn: parent
+		height: 20
+		spacing: 6
+
+		Repeater {
+			model: 10
+
+			delegate: Rectangle {
+				property HyprlandWorkspace ws: {
+					Hyprland.workspaces.values.find(ws => ws.id === index + 1) || null
+				}
+				property bool focused: {
+					ws && ws.monitor && ws.monitor.name === root.screen.name && ws.focused
+				}
+				property bool occupied: {
+					ws && ws.monitor && ws.monitor.name === root.screen.name && ws.toplevels.values.length > 0
+				}
+
+				width: 20
+				height: 20
+				radius: 10
+
+				color: {
+					if (!focused) return "transparent"
+					return occupied ? Flexoki.re : Flexoki.ui3
+				}
+
+				border.width: 2
+				border.color: occupied ? Flexoki.re : Flexoki.ui3
+			}
+		}
+	}
+}
diff --git a/.config/quickshell/Modules/MusicPopup.qml b/.config/quickshell/Modules/MusicPopup.qml
new file mode 100644
index 0000000..35a3094
--- /dev/null
+++ b/.config/quickshell/Modules/MusicPopup.qml
@@ -0,0 +1,52 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import qs.Services
+
+RowLayout {	
+	anchors.fill: parent
+	anchors.topMargin: 32
+	anchors.bottomMargin: 32
+	anchors.leftMargin: 100
+	anchors.rightMargin: 100
+	spacing: 60
+
+	Image {
+		id: cover
+		asynchronous: true
+		source: "file://" + Song.coverPath
+		sourceSize.width: 300
+		sourceSize.height: 300
+		width: 300
+		height: 300
+
+		Connections {
+			target: Song
+
+			function onCoverLoaded() {
+				cover.source = "file://" + Song.coverPath
+			}
+		}
+	}
+
+	ColumnLayout {
+		Text {
+			Layout.alignment: Qt.AlignHCenter
+			color: Flexoki.re
+			text: Song.artist
+			font.pixelSize: root.fontSize
+		}
+		Text {
+			Layout.alignment: Qt.AlignHCenter
+			color: Flexoki.tx
+			text: Song.album
+			font.pixelSize: root.fontSize
+		}
+		Text {
+			Layout.alignment: Qt.AlignHCenter
+			color: Flexoki.tx
+			text: Song.title
+			font.pixelSize: root.fontSize
+		}
+	}
+}
diff --git a/.config/quickshell/Modules/Wall.qml b/.config/quickshell/Modules/Wall.qml
index b585c2e..213632a 100644
--- a/.config/quickshell/Modules/Wall.qml
+++ b/.config/quickshell/Modules/Wall.qml
@@ -29,6 +29,7 @@ Variants {
 			ColumnLayout {
 				x: 32
 				y: 80
+				spacing: 8
 
 				Text {
 					text: Qt.formatDateTime(Time.time, "hh:mm")
@@ -37,6 +38,12 @@ Variants {
 				}
 
 				Text {
+					text: Qt.formatDateTime(Time.time, "dddd")
+					color: Flexoki.bg
+					font { family: root.fontFamily; weight: 300; pixelSize: root.fontSize * 3 }
+				}
+
+				Text {
 					text: Qt.formatDateTime(Time.time, "MMMM d, yyyy")
 					color: Flexoki.bg
 					font { family: root.fontFamily; weight: 300; pixelSize: root.fontSize * 2.25 }
diff --git a/.config/quickshell/Services/Uptime.qml b/.config/quickshell/Services/Uptime.qml
index 155be44..b406921 100644
--- a/.config/quickshell/Services/Uptime.qml
+++ b/.config/quickshell/Services/Uptime.qml
@@ -44,10 +44,12 @@ Singleton {
 				if (hours > 0) {
 					uptime += hours + " hour"
 					if (hours != 1) uptime += "s"
-					uptime += ", "
+					if (days == 0) uptime += ", "
+				}
+				if (days == 0) {
+					uptime += minutes + " minute"
+					if (minutes != 1) uptime += "s"
 				}
-				uptime += minutes + " minute"
-				if (minutes != 1) uptime += "s"
 
 				root.uptime = uptime
 			}
diff --git a/.config/quickshell/Services/Wifi.qml b/.config/quickshell/Services/Wifi.qml
index c8fd54b..b116879 100644
--- a/.config/quickshell/Services/Wifi.qml
+++ b/.config/quickshell/Services/Wifi.qml
@@ -15,6 +15,10 @@ Singleton {
 		stdout: StdioCollector {
 			onStreamFinished: {
 				var line = this.text.split("\n").find(line => line.includes(">"))
+				if (!line) {
+					root.ssid = ""
+					return
+				}
 				// remove ANSI escape sequences
 				line = line.replace(/\x1b\[.*?[@A-Z\[\\\]^_`a-z\{\|\}~]/g, '')
 				root.ssid = line.split(" ").filter(x => x != "")[1]