quickshell/modules/bar/widgets/Battery.qml

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

MouseArea {
    id: batteryButton
    width: expanded ? Math.max(expandedRow.width + Config.spacing_fun(height)*3, bar.height) : Math.max(batteryText.width + Config.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 : !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 : !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: expanded
            anchors.centerIn: parent
            spacing: Config.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: 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.spacing_fun(batteryButton.height)
        radiusValue: Config.radius_fun(batteryButton.height)

        Column {
            spacing: parent.spacing
            Text {
                text: "percentage: " + BatteryState.percentage + "%"
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
            Text {
                text: "State: " + BatteryState.state
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
            Text {
                text: "energy: " + Math.round(BatteryState.energy*10)/10 + " W"
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
            Text {
                text: (
                    BatteryState.hour_to_empty > 0 ? "Remaining: " + BatteryState.hour_to_empty + "h " + BatteryState.min_to_empty + "min" :
                    BatteryState.min_to_empty > 0 ? "Remaining: " + BatteryState.min_to_empty + "min" :
                    "NaN")
                wrapMode: Text.WordWrap
                color: Colors.primary
                anchors.horizontalCenter: parent.horizontalCenter
                font.pixelSize: Config.font_size_tiny(bar.height)
                font.family: Config.font
            }
            Text {
                text: "Usage: " + BatteryState.energy_rate_formated + " W"
                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: " + 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
            }
        }
    }
}