Battery widget rework

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

Bar/Modules/Battery.qml

@@ -1,8 +1,9 @@
 import QtQuick
+import Quickshell
 import Quickshell.Services.UPower
 import QtQuick.Layouts
-import qs.Settings
 import qs.Components
+import qs.Settings
 
 Item {
     id: batteryWidget
@@ -15,61 +16,43 @@ 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) {
+            return "battery_android_bolt";
-            if (percent >= 95) return "battery_charging_full";
-            if (percent >= 80) return "battery_charging_80";
-            if (percent >= 60) return "battery_charging_60";
-            if (percent >= 50) return "battery_charging_50";
-            if (percent >= 30) return "battery_charging_30";
-            if (percent >= 20) return "battery_charging_20";
-            return "battery_charging_20"; // Use charging_20 for very low battery
-        }
 
-        // Regular battery icons when not charging
+        if (percent >= 95)
-        if (percent >= 95) return "battery_full";
+           return "battery_android_full";
-        if (percent >= 80) return "battery_80";
+
-        if (percent >= 60) return "battery_60";
+        var step = Math.round(percent / (100 / 6));        
-        if (percent >= 50) return "battery_50";
+        return "battery_android_" + step
-        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()
-                font.family: "Material Symbols Outlined"
-                font.pixelSize: 14
-                color: charging ? Theme.accentPrimary : Theme.textPrimary
-                verticalAlignment: Text.AlignVCenter
-                anchors.centerIn: parent
-            }
         MouseArea {
-                id: batteryMouseArea
             anchors.fill: parent
             hoverEnabled: true
-                onEntered: batteryWidget.containsMouse = true
+            onEntered: {
-                onExited: batteryWidget.containsMouse = false
+                pill.show();
-                cursorShape: Qt.PointingHandCursor
+                batteryTooltip.tooltipVisible = true;
+            }
+            onExited: {
+                pill.hide();
+                batteryTooltip.tooltipVisible = false;
             }
         }
-    }
-
-    property bool containsMouse: false
-
         StyledTooltip {
             id: batteryTooltip
             text: {
@@ -88,8 +71,24 @@ Item {
                 }
                 return lines.join("\n");
             }
-        tooltipVisible: batteryWidget.containsMouse
+            tooltipVisible: false
-        targetItem: batteryWidget
+            targetItem: pill
-        delay: 200
+            delay: 1500
+        }
+    }
+
+    Timer {
+        id: hideTimer
+        interval: 2000
+        running: true
+        onTriggered: {
+            pill.hide();
+        }
+    }
+
+    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();
         }
     }
 }