battery

.config/quickshell/modules/bar/Bar.qml

@@ -25,7 +25,7 @@ Scope {
             RowLayout {
                 anchors.centerIn: parent
                 implicitWidth: 500
-                spacing: 8 // TODO: Why is this halved when rendered??
+                spacing: 8
 
                 RowLayout {
                     spacing: 4
@@ -57,6 +57,10 @@ Scope {
                         Layout.alignment: Qt.AlignVCenter
                     }
 
+                    Battery {
+                        Layout.alignment: Qt.AlignVCenter
+                    }
+
                 }
 
             }

.config/quickshell/modules/bar/Battery.qml

@@ -0,0 +1,98 @@
+import "../common"
+import "../common/widgets"
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Io
+import Quickshell.Services.UPower
+
+Rectangle {
+    readonly property var chargeState: UPower.displayDevice.state
+    readonly property bool isCharging: chargeState == UPowerDeviceState.Charging
+    readonly property bool isPluggedIn: isCharging || chargeState == UPowerDeviceState.PendingCharge
+    readonly property real percentage: UPower.displayDevice.percentage
+    readonly property bool isLow: percentage <= ConfigOptions.bar.batteryLowThreshold / 100
+    readonly property int batterySlideDistance: 10
+    readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
+    readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
+
+    implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
+    implicitHeight: 32
+    color: Appearance.colors.colLayer1
+    radius: Appearance.rounding.small
+
+    Process {
+        id: screenSnip
+
+        command: ["grimblast", "copy", "area"]
+    }
+
+    RowLayout {
+        id: rowLayout
+
+        spacing: 4
+        anchors.centerIn: parent
+
+        Rectangle {
+            implicitWidth: (isCharging ? boltIcon.width : 0) - rowLayout.spacing
+
+            Behavior on implicitWidth {
+                NumberAnimation {
+                    duration: Appearance.animation.elementDecel.duration
+                    easing.type: Appearance.animation.elementDecel.type
+                    easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
+                }
+
+            }
+
+        }
+
+        StyledText {
+            Layout.alignment: Qt.AlignVCenter
+            color: Appearance.colors.colOnLayer1
+            text: `${percentage * 100}%`
+        }
+
+        CircularProgress {
+            Layout.alignment: Qt.AlignVCenter
+            lineWidth: 2
+            value: percentage
+            size: 26
+            secondaryColor: (isLow && !isCharging) ? batteryLowBackground : Appearance.m3colors.m3secondaryContainer
+            primaryColor: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
+            fill: (isLow && !isCharging)
+
+            MaterialSymbol {
+                anchors.centerIn: parent
+                text: "battery_full"
+                font.pointSize: Appearance.font.pointSize.normal
+                color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
+            }
+
+        }
+
+    }
+
+    MaterialSymbol {
+        id: boltIcon
+
+        anchors.left: rowLayout.left
+        anchors.verticalCenter: rowLayout.verticalCenter
+        text: "bolt"
+        font.pointSize: Appearance.font.pointSize.large
+        color: Appearance.m3colors.m3onSecondaryContainer
+        visible: opacity !== 0 // Only show when charging
+        opacity: isCharging ? 1 : 0 // Keep opacity for visibility
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: Appearance.animation.elementDecel.duration
+                easing.type: Appearance.animation.elementDecel.type
+                easing.bezierCurve: Appearance.animation.elementDecel.bezierCurve
+            }
+
+        }
+
+    }
+
+}

.config/quickshell/modules/bar/Workspaces.qml

@@ -97,7 +97,6 @@ Rectangle {
                 
                 color: Appearance.colors.colLayer2
                 opacity: workspaceOccupied[index] ? 1 : 0
-                // color: workspaceOccupied[index] ? Appearance.colors.colLayer2 : "transparent"
 
                 Behavior on opacity {
                     NumberAnimation {
@@ -154,9 +153,7 @@ Rectangle {
             Button {
                 id: button
                 Layout.fillHeight: true
-                topInset: 7
-                bottomInset: 7
-                onPressed: Hyprland.dispath(`workspace ${index+1}`)
+                onPressed: Hyprland.dispatch(`workspace ${index+1}`)
                 width: workspaceButtonWidth
 
                 contentItem: StyledText {