From c3ff5a58d6bcdcb43572564c14c2b30289884c89 Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Thu, 8 May 2025 12:53:53 +0200
Subject: [PATCH] [AGS] Improve Battery display

---
 config/astal/components/QuickActions/modules/Battery.tsx | 4 +++-
 config/astal/components/bar/modules/QuickView.tsx        | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/config/astal/components/QuickActions/modules/Battery.tsx b/config/astal/components/QuickActions/modules/Battery.tsx
index b1c4468..f7c3fd7 100644
--- a/config/astal/components/QuickActions/modules/Battery.tsx
+++ b/config/astal/components/QuickActions/modules/Battery.tsx
@@ -29,11 +29,13 @@ export const BatteryBox = () => {
                 cssClasses={["battery-time"]}
                 visible={bind(battery, "charging").as(c => !c)}
                 label={bind(battery, "timeToEmpty").as(t => `(${toTime(t)})`)}
+                tooltipText={bind(battery, 'energyRate').as(er => `Time to empty. Power usage: ${batteryEnergy(er)}`)}
             />
             <label
                 cssClasses={["battery-time"]}
                 visible={bind(battery, "charging")}
                 label={bind(battery, "timeToFull").as(t => `(${toTime(t)})`)}
+                tooltipText={bind(battery, 'energyRate').as(er => `Time to full. Charge rate: ${batteryEnergy(er)}`)}
             />
         </box>
     );
@@ -43,7 +45,7 @@ const toTime = (time: number) => {
     const MINUTE = 60;
     const HOUR = MINUTE * 60;
 
-    if (time > 24 * HOUR) return "";
+    if (time > 24 * HOUR) return "24h+";
 
     const hours = Math.round(time / HOUR);
     const minutes = Math.round((time - hours * HOUR) / MINUTE);
diff --git a/config/astal/components/bar/modules/QuickView.tsx b/config/astal/components/bar/modules/QuickView.tsx
index 198d5cb..9aacd28 100644
--- a/config/astal/components/bar/modules/QuickView.tsx
+++ b/config/astal/components/bar/modules/QuickView.tsx
@@ -127,7 +127,7 @@ const BatteryWidget = () => {
             <image
                 iconName={bind(battery, "batteryIconName").as(icon => icon)}
                 cssClasses={["quick-view-symbol"]}
-                tooltipText={bind(battery, 'percentage').as(p => `${Math.round(p * 100)}%`)}
+                tooltipText={bind(battery, 'percentage').as(p => `Battery Level: ${Math.round(p * 100)}%`)}
             ></image>
         );
     } else {