WidgetBase for bar widget + fixed resources and dashboard popouts in left- and bottom-edge bar

Modules/Bar/Components/Clock.qml

@@ -1,58 +1,154 @@
+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
 
-CustomRect {
+WidgetBase {
 	id: root
 
-	required property bool horizontal
+	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 shortSize: Math.max(Config.bar.height, Tokens.bar.innerSize)
-	readonly property real size: timeText.contentWidth + (horizontal ? Tokens.padding.normal : Tokens.padding.larger) * 2
+	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 ? shortSize : size
-	implicitWidth: horizontal ? size : shortSize
+	implicitHeight: horizontal ? baseSize : size
+	implicitWidth: horizontal ? size : baseSize
 	radius: Tokens.rounding.full
 
 	CustomText {
 		id: timeText
 
 		anchors.centerIn: parent
-		// anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
-		// anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
-		color: root.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		color: root.contentColor
 		font: Config.appearance.font.family.mono // qmllint disable incompatible-type
-		height: root.horizontal ? implicitHeight : implicitWidth
+		height: implicitHeight
 		text: Time.dateStr
-		width: root.horizontal ? implicitWidth : implicitHeight
+		visible: root.horizontal
 
 		Behavior on color {
 			CAnim {
 			}
 		}
-		transform: [
-			Translate {
-				x: !root.horizontal ? -timeText.implicitWidth + timeText.implicitHeight : 0
-			},
-			Rotation {
-				angle: root.horizontal ? 0 : 270
-				origin.x: timeText.implicitHeight / 2
-				origin.y: timeText.implicitHeight / 2
+	}
+
+	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.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+		color: root.contentColor
 
 		onClicked: {
 			root.visibilities.dashboard = !root.visibilities.dashboard;