z-bar-qt/Modules/Resources/Cards/BatteryTank.qml

import QtQuick
import QtQuick.Layouts
import Quickshell.Services.UPower
import ZShell.Config
import qs.Components
import qs.Services

CustomClippingRect {
	id: root

	property real animPerc: UPower.displayDevice.percentage

	color: Colors.palette.m3secondaryContainer
	implicitWidth: 120
	radius: Tokens.rounding.largeIncreased

	Behavior on animPerc {
		Anim {
		}
	}

	Contents {
		id: layout

		accentColor: Colors.palette.m3primary
		anchors.fill: parent
		anchors.margins: Tokens.padding.small
		subTextColor: Colors.palette.m3onSurfaceVariant
		textColor: Colors.palette.m3onSurface
	}

	CustomRect {
		anchors.bottom: parent.bottom
		anchors.left: parent.left
		anchors.right: parent.right
		clip: true
		color: Colors.palette.m3secondary
		implicitHeight: parent.height * root.animPerc
		radius: Tokens.rounding.extraSmall

		Contents {
			accentColor: Colors.palette.m3primaryContainer
			anchors.bottom: parent.bottom
			anchors.left: parent.left
			anchors.margins: layout.anchors.margins
			anchors.right: parent.right
			height: layout.height
			subTextColor: Colors.palette.m3secondaryContainer
			textColor: Colors.palette.m3onSecondary
		}
	}

	component Contents: ColumnLayout {
		id: contents

		required property color accentColor
		readonly property bool charging: [UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state)
		required property color subTextColor
		required property color textColor

		spacing: 0

		MaterialIcon {
			Layout.leftMargin: -Tokens.padding.extraSmall
			color: contents.accentColor
			text: "battery_full"
		}

		CustomText {
			Layout.fillWidth: true
			color: contents.textColor
			text: qsTr("Battery")
		}

		Item {
			Layout.fillHeight: true
		}

		CustomText {
			Layout.alignment: Qt.AlignRight
			animate: true
			color: contents.subTextColor
			text: {
				if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
					return qsTr("Full");

				if (contents.charging)
					return qsTr("Charging");

				const s = UPower.displayDevice.timeToEmpty;
				if (s === 0)
					return qsTr("...");

				const hr = Math.floor(s / 3600);
				const min = Math.floor((s % 3600) / 60);
				if (hr > 0)
					return `${hr}h ${min}m`;

				return `${min}m`;
			}
		}

		RowLayout {
			Layout.alignment: Qt.AlignRight
			Layout.bottomMargin: -Tokens.padding.extraSmall
			Layout.rightMargin: -Tokens.padding.extraSmall
			Layout.topMargin: -Tokens.padding.extraSmall
			spacing: Tokens.spacing.extraSmall

			MaterialIcon {
				color: contents.accentColor
				fill: 1
				opacity: contents.charging ? 1 : 0
				scale: contents.charging ? 1 : 0
				text: "bolt"

				Behavior on opacity {
					Anim {
						type: Anim.FastEffects
					}
				}
				Behavior on scale {
					Anim {
						type: Anim.FastSpatial
					}
				}
			}

			CustomText {
				color: contents.accentColor
				text: `${Math.round(UPower.displayDevice.percentage * 100)}%`
			}
		}
	}
}