From 607f20343e3aabadc49e8baf04715eabedada171 Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Mon, 17 Feb 2025 17:31:45 +1100
Subject: bar: battery charging indicator

---
 src/modules/bar.tsx | 45 ++++++++++++++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 15 deletions(-)

(limited to 'src/modules')

diff --git a/src/modules/bar.tsx b/src/modules/bar.tsx
index 2645fde..ad11f43 100644
--- a/src/modules/bar.tsx
+++ b/src/modules/bar.tsx
@@ -468,20 +468,35 @@ const NotifCount = () => (
     </button>
 );
 
-const Battery = () => (
-    <box
-        className={bind(AstalBattery.get_default(), "percentage").as(p => `module battery ${p < 0.2 ? "low" : ""}`)}
-        setup={self =>
-            setupCustomTooltip(
-                self,
-                bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`)
-            )
-        }
-    >
-        <label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} />
-        <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} />
-    </box>
-);
+const Battery = () => {
+    const className = Variable.derive(
+        [bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")],
+        (p, c) => `module battery ${p < 0.2 && !c ? "low" : ""}`
+    );
+
+    return (
+        <box
+            className={bind(className)}
+            setup={self =>
+                setupCustomTooltip(
+                    self,
+                    bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`)
+                )
+            }
+            onDestroy={() => className.drop()}
+        >
+            <revealer
+                transitionType={Gtk.RevealerTransitionType.SLIDE_RIGHT}
+                transitionDuration={150}
+                revealChild={bind(AstalBattery.get_default(), "charging")}
+            >
+                <label className="icon" label="" />
+            </revealer>
+            <label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} />
+            <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} />
+        </box>
+    );
+};
 
 const DateTime = () => (
     <button
@@ -537,7 +552,7 @@ export default ({ monitor }: { monitor: Monitor }) => (
                 <StatusIcons />
                 <PkgUpdates />
                 <NotifCount />
-                {bind(AstalBattery.get_default(), "isBattery").as(b => b && <Battery />)}
+                {AstalBattery.get_default().isBattery && <Battery />}
                 <DateTime />
                 <Power />
             </box>
-- 
cgit v1.2.3-freya