Battery widget rework

- Convert the icon to a PillIndicator
- Better looking horizontal battery icons
- PillIndicator now supports conditionnal autoHide

Bar/Modules/Battery.qml

@@ -1,12 +1,13 @@
 import QtQuick
+import Quickshell
 import Quickshell.Services.UPower
 import QtQuick.Layouts
-import qs.Settings
 import qs.Components
+import qs.Settings
 
 Item {
     id: batteryWidget
-    
+
     property var battery: UPower.displayDevice
     property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent
     property real percent: isReady ? (battery.percentage * 100) : 0
@@ -15,81 +16,79 @@ Item {
 
     // Choose icon based on charge and charging state
     function batteryIcon() {
-        if (!show) return "";
+        if (!show)
-        
+            return "";
-        // Show charging icons with lightning when charging
+
-        if (charging) {
+        if (charging)
-            if (percent >= 95) return "battery_charging_full";
+            return "battery_android_bolt";
-            if (percent >= 80) return "battery_charging_80";
+
-            if (percent >= 60) return "battery_charging_60";
+        if (percent >= 95)
-            if (percent >= 50) return "battery_charging_50";
+           return "battery_android_full";
-            if (percent >= 30) return "battery_charging_30";
+
-            if (percent >= 20) return "battery_charging_20";
+        var step = Math.round(percent / (100 / 6));        
-            return "battery_charging_20"; // Use charging_20 for very low battery
+        return "battery_android_" + step
-        }
-        
-        // Regular battery icons when not charging
-        if (percent >= 95) return "battery_full";
-        if (percent >= 80) return "battery_80";
-        if (percent >= 60) return "battery_60";
-        if (percent >= 50) return "battery_50";
-        if (percent >= 30) return "battery_30";
-        if (percent >= 20) return "battery_20";
-        return "battery_alert";
     }
 
     visible: isReady && battery.isLaptopBattery
-    width: 22
+    width: pill.width
-    height: 36
+    height: pill.height
 
-    RowLayout {
+    PillIndicator {
-        anchors.fill: parent
+        id: pill
-        spacing: 4
+        icon: batteryIcon()
-        visible: show
+        text: Math.round(batteryWidget.percent) + "%"
-        Item {
+        pillColor: Theme.surfaceVariant
-            height: 22
+        iconCircleColor: Theme.accentPrimary
-            width: 22
+        textColor: charging ? Theme.accentPrimary : Theme.textPrimary
-            Text {
+        autoHide: false
-                text: batteryIcon()
+        MouseArea {
-                font.family: "Material Symbols Outlined"
+            anchors.fill: parent
-                font.pixelSize: 14
+            hoverEnabled: true
-                color: charging ? Theme.accentPrimary : Theme.textPrimary
+            onEntered: {
-                verticalAlignment: Text.AlignVCenter
+                pill.show();
-                anchors.centerIn: parent
+                batteryTooltip.tooltipVisible = true;
             }
-            MouseArea {
+            onExited: {
-                id: batteryMouseArea
+                pill.hide();
-                anchors.fill: parent
+                batteryTooltip.tooltipVisible = false;
-                hoverEnabled: true
-                onEntered: batteryWidget.containsMouse = true
-                onExited: batteryWidget.containsMouse = false
-                cursorShape: Qt.PointingHandCursor
             }
         }
+        StyledTooltip {
+            id: batteryTooltip
+            text: {
+                let lines = [];
+                if (batteryWidget.isReady) {
+                    lines.push(batteryWidget.charging ? "Charging" : "Discharging");
+                    lines.push(Math.round(batteryWidget.percent) + "%");
+                    if (batteryWidget.battery.changeRate !== undefined)
+                        lines.push("Rate: " + batteryWidget.battery.changeRate.toFixed(2) + " W");
+                    if (batteryWidget.battery.timeToEmpty > 0)
+                        lines.push("Time left: " + Math.floor(batteryWidget.battery.timeToEmpty / 60) + " min");
+                    if (batteryWidget.battery.timeToFull > 0)
+                        lines.push("Time to full: " + Math.floor(batteryWidget.battery.timeToFull / 60) + " min");
+                    if (batteryWidget.battery.healthPercentage !== undefined)
+                        lines.push("Health: " + Math.round(batteryWidget.battery.healthPercentage) + "%");
+                }
+                return lines.join("\n");
+            }
+            tooltipVisible: false
+            targetItem: pill
+            delay: 1500
+        }
     }
 
-    property bool containsMouse: false
+    Timer {
-
+        id: hideTimer
-    StyledTooltip {
+        interval: 2000
-        id: batteryTooltip
+        running: true
-        text: {
+        onTriggered: {
-            let lines = [];
+            pill.hide();
-            if (batteryWidget.isReady) {
-                lines.push(batteryWidget.charging ? "Charging" : "Discharging");
-                lines.push(Math.round(batteryWidget.percent) + "%");
-                if (batteryWidget.battery.changeRate !== undefined)
-                    lines.push("Rate: " + batteryWidget.battery.changeRate.toFixed(2) + " W");
-                if (batteryWidget.battery.timeToEmpty > 0)
-                    lines.push("Time left: " + Math.floor(batteryWidget.battery.timeToEmpty / 60) + " min");
-                if (batteryWidget.battery.timeToFull > 0)
-                    lines.push("Time to full: " + Math.floor(batteryWidget.battery.timeToFull / 60) + " min");
-                if (batteryWidget.battery.healthPercentage !== undefined)
-                    lines.push("Health: " + Math.round(batteryWidget.battery.healthPercentage) + "%");
-            }
-            return lines.join("\n");
         }
-        tooltipVisible: batteryWidget.containsMouse
-        targetItem: batteryWidget
-        delay: 200
     }
-}
+
+    Component.onCompleted: {
+        if (isReady && battery.isLaptopBattery) {
+            pill.show();
+        }
+    }
+}

Components/PillIndicator.qml

@@ -15,6 +15,7 @@ Item {
     property int pillHeight: 22
     property int iconSize: 22
     property int pillPaddingHorizontal: 14
+    property bool autoHide: true
 
     // Internal state
     property bool showPill: false
@@ -24,8 +25,8 @@ Item {
     readonly property int pillOverlap: iconSize / 2
     readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
 
-    signal shown()
+    signal shown
-    signal hidden()
+    signal hidden
 
     width: iconSize + (showPill ? maxPillWidth - pillOverlap : 0)
     height: pillHeight
@@ -54,11 +55,17 @@ Item {
 
         Behavior on width {
             enabled: showAnim.running || hideAnim.running
-            NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
         }
         Behavior on opacity {
             enabled: showAnim.running || hideAnim.running
-            NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
         }
     }
 
@@ -73,7 +80,10 @@ Item {
         anchors.right: parent.right
 
         Behavior on color {
-            ColorAnimation { duration: 200; easing.type: Easing.InOutQuad }
+            ColorAnimation {
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
         }
 
         Text {
@@ -106,11 +116,11 @@ Item {
             easing.type: Easing.OutCubic
         }
         onStarted: {
-            showPill = true
+            showPill = true;
         }
         onStopped: {
-            delayedHideAnim.start()
+            delayedHideAnim.start();
-            shown()
+            shown();
         }
     }
 
@@ -118,8 +128,13 @@ Item {
     SequentialAnimation {
         id: delayedHideAnim
         running: false
-        PauseAnimation { duration: 2500 }
+        PauseAnimation {
-        ScriptAction { script: if (shouldAnimateHide) hideAnim.start() }
+            duration: 2500
+        }
+        ScriptAction {
+            script: if (shouldAnimateHide)
+                hideAnim.start()
+        }
     }
 
     // Hide animation
@@ -143,27 +158,27 @@ Item {
             easing.type: Easing.InCubic
         }
         onStopped: {
-            showPill = false
+            showPill = false;
-            shouldAnimateHide = false
+            shouldAnimateHide = false;
-            hidden()
+            hidden();
         }
     }
 
     // Exposed functions
     function show() {
         if (!showPill) {
-            shouldAnimateHide = true
+            shouldAnimateHide = autoHide;
-            showAnim.start()
+            showAnim.start();
         } else {
             // Reset hide timer if already shown
-            hideAnim.stop()
+            hideAnim.stop();
-            delayedHideAnim.restart()
+            delayedHideAnim.restart();
         }
     }
 
     function hide() {
         if (showPill) {
-            hideAnim.start()
+            hideAnim.start();
         }
     }
-}
+}