z-bar-qt/Modules/Bar/Components/Clock.qml

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 font font: Tokens.font.clock.family(Config.appearance.font.family.clock).build()
	readonly property color contentColor: 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.medium * 2 : verticalColumn.implicitHeight + Tokens.padding.medium * 2
	required property ScreenState screenState

	implicitHeight: horizontal ? baseSize : size
	implicitWidth: horizontal ? size : baseSize
	radius: Tokens.rounding.full

	CustomText {
		id: timeText

		anchors.centerIn: parent
		color: root.contentColor
		font: root.font
		height: implicitHeight
		text: Time.dateStr
		visible: root.horizontal

		Behavior on color {
			CAnim {}
		}
	}

	ColumnLayout {
		id: verticalColumn

		anchors.centerIn: parent
		spacing: Tokens.padding.extraSmall ?? 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: root.font
				text: Qt.formatDateTime(Time.date, modelData)

				Behavior on color {
					CAnim {}
				}
			}
		}

		Rectangle {
			Layout.alignment: Qt.AlignHCenter
			Layout.bottomMargin: Tokens.padding.extraSmall ?? 2
			Layout.topMargin: Tokens.padding.extraSmall ?? 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: root.font
				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: root.font
			text: Qt.formatDateTime(Time.date, "AP")
			visible: Config.services.useTwelveHourClock && root.formatParts.timeTokens.length > 0

			Behavior on color {
				CAnim {}
			}
		}
	}
}