restructure bar components layout

Modules/Bar/Components/Clock.qml

@@ -0,0 +1,61 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Config
+import qs.Modules.Bar.Popouts
+import qs.Helpers
+import qs.Components
+import qs.Services
+
+CustomRect {
+	id: root
+
+	required property bool horizontal
+	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
+	required property PersistentProperties visibilities
+
+	color: visibilities.dashboard ? Colors.palette.m3primary : Colors.tPalette.m3surfaceContainer
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
+	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
+		font: Config.appearance.font.family.mono // qmllint disable incompatible-type
+		height: root.horizontal ? implicitHeight : implicitWidth
+		text: Time.dateStr
+		width: root.horizontal ? implicitWidth : implicitHeight
+
+		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
+			}
+		]
+	}
+
+	StateLayer {
+		acceptedButtons: Qt.LeftButton
+		color: root.visibilities.dashboard ? Colors.palette.m3onPrimary : Colors.palette.m3onSurface
+
+		onClicked: {
+			root.visibilities.dashboard = !root.visibilities.dashboard;
+		}
+	}
+}