quickshell/modules/bar/widgets/Battery.qml

import QtQuick
import Quickshell
import "../../../config"
import "../states/Battery"

MouseArea {
    id: batteryButton
    width: expanded ? Math.max(expandedRow.width + Config.bar_spacing_fun(height)*3, bar.height) : Math.max(batteryText.width + Config.bar_spacing_fun(height)*2, bar.height)
    height: bar.height
    hoverEnabled: true
    cursorShape: Qt.PointingHandCursor
    visible: BatteryState.available

    property bool expanded: false

    Rectangle {
        anchors.fill: parent
        color: batteryButton.containsMouse ? Colors.tertiary : Qt.alpha(Colors.tertiaryContainer, 0.25)
        radius: Config.radius_fun(batteryButton.height)
        border.width: Config.border_width
        border.color: batteryButton.containsMouse ? Colors.tertiaryContainer_fg
            : Colors.secondaryContainer_fg

        Text {
            id: batteryText
            visible : !batteryButton.expanded
            anchors.centerIn: parent
            text:(
                BatteryState.percentage >= 90 ? "" :
                BatteryState.percentage >= 60 ? "" :
                BatteryState.percentage >= 30 ? "" :
                BatteryState.percentage >= 10 ? "" :
                ""
            )
            font.pixelSize: Config.font_size(batteryButton.height)
            font.family: Config.font
            color: (
                BatteryState.charging ? (
                    BatteryState.full ? Colors.secondary :
                    Colors.tertiary
                ) :
                BatteryState.percentage <= 5 ? Colors.errorContainer :
                BatteryState.percentage < 10 ? "yellow" :
                batteryButton.containsMouse ? Colors.tertiary_fg :
                Colors.primary
            )
        }

        Text {
            id: chargeIcon
            visible : !batteryButton.expanded && BatteryState.charging
            anchors.centerIn: parent
            text: "󱐋"
            font.pixelSize: Config.iconSize(batteryButton.height)
            font.family: Config.font
            style: Text.Outline
            styleColor: Qt.alpha(Colors.tertiaryContainer, 0.5)
            color: Colors.tertiary
        }

        Row {
            id: expandedRow
            visible: batteryButton.expanded
            anchors.centerIn: parent
            spacing: Config.bar_spacing_fun(batteryButton.height)

            Text {
                id: batteryPercentageSymbol
                text: (
                    BatteryState.charging ? "󰂄" :
                    BatteryState.percentage >= 90 ? "󰁹":
                    BatteryState.percentage >= 80 ? "󰂂":
                    BatteryState.percentage >= 70 ? "󰂁":
                    BatteryState.percentage >= 60 ? "󰂀":
                    BatteryState.percentage >= 50 ? "󰁿":
                    BatteryState.percentage >= 40 ? "󰁾":
                    BatteryState.percentage >= 30 ? "󰁽":
                    BatteryState.percentage >= 20 ? "󰁼":
                    BatteryState.percentage >= 10 ? "󰁻":
                    BatteryState.percentage >= 5 ? "󰁺":
                    "󰂃"
                )

                font.pixelSize: Config.labelSize(batteryButton.height)
                font.family: Config.font
                font.bold: true

                color: (
                    BatteryState.percentage <= 5 ? Colors.errorContainer :
                    BatteryState.charging ? (
                        BatteryState.full ? Colors.secondary :
                        Colors.tertiary
                    ) :
                    BatteryState.percentage < 10 ? "yellow" :
                    batteryButton.containsMouse ? Colors.tertiary_fg :
                    Colors.primary
                )
            }

            Text {
                id: batteryPercentageText
                text: Math.round(BatteryState.percentage) + "%"

                font.pixelSize: Config.labelSize(batteryButton.height)
                font.family: Config.font
                font.bold: true

                color: batteryPercentageSymbol.color
            }
        }
    }

    onClicked: {
        expanded = !expanded
        console.log("[Battery] Expanded: " + expanded + ", percentage: " + BatteryState.percentage + "%, charging: " + BatteryState.charging)
    }


    BarPopup {
        id: batteryPopup
        anchorItem: batteryButton
        anchorHovered: batteryButton.containsMouse
        spacingValue: Config.bar_spacing_fun(batteryButton.height)
        radiusValue: Config.radius_fun(batteryButton.height)

        Column {
            spacing: batteryPopup.spacingValue
            Text {
                text: "State: " + BatteryState.chargeState
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
            Column {
                width: parent.width
                spacing: 2
                visible: BatteryState.percentageHistoryExists

                Text {
                    text: "percentage: " + Math.round(BatteryState.percentage) + "%"
                    color: Colors.primary
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: Config.font_size_tiny(bar.height)
                    font.family: Config.font
                }

                Sparkline {
                    values: BatteryState.percentageHistory
                    lineColor: Colors.primary
                    width: parent.width
                    windowMs: BatteryState._maxHistory * 1000
                }
            }
            Column {
                width: parent.width
                spacing: 2
                visible: BatteryState.energyHistoryExists

                Text {
                    text: "energy: " + BatteryState.energy_formated + " Wh"
                    color: Colors.primary
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: Config.font_size_tiny(bar.height)
                    font.family: Config.font
                }

                Sparkline {
                    values: BatteryState.energyHistory
                    lineColor: Colors.primary
                    width: parent.width
                    windowMs: BatteryState._maxHistory * 1000
                }
            }
            Column {
                width: parent.width
                spacing: 2
                visible: BatteryState.usageHistoryExists

                Text {
                    text: "Usage: " + BatteryState.energy_rate_formated + " W"
                    color: Colors.primary
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: Config.font_size_tiny(bar.height)
                    font.family: Config.font
                }

                Sparkline {
                    values: BatteryState.usageHistory
                    lineColor: Colors.primary
                    width: parent.width
                    windowMs: BatteryState._maxHistory * 1000
                }
            }
            Text {
                text: {
                    if (BatteryState.charging) {
                        if (BatteryState.hour_to_full > 0) return "Remaining: " + BatteryState.hour_to_full + "h " + BatteryState.min_to_full + "min (to full)"
                        if (BatteryState.min_to_full > 0) return "Remaining: " + BatteryState.min_to_full + "min (to full)"
                        return BatteryState.full ? "Fully charged" : "Calculating..."
                    } else {
                        if (BatteryState.hour_to_empty > 0) return "Remaining: " + BatteryState.hour_to_empty + "h " + BatteryState.min_to_empty + "min"
                        if (BatteryState.min_to_empty > 0) return "Remaining: " + BatteryState.min_to_empty + "min"
                        return "Calculating..."
                    }
                }
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
            Text {
                text: "Health: " + Math.round(BatteryState.health) + " %"
                visible: BatteryState.healthSupported
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
        }
    }
}