bar: battery charging indicator

src/modules/bar.tsx

@@ -468,20 +468,35 @@ const NotifCount = () => (
     </button>
 );
 
-const Battery = () => (
+const Battery = () => {
-    <box
+    const className = Variable.derive(
-        className={bind(AstalBattery.get_default(), "percentage").as(p => `module battery ${p < 0.2 ? "low" : ""}`)}
+        [bind(AstalBattery.get_default(), "percentage"), bind(AstalBattery.get_default(), "charging")],
-        setup={self =>
+        (p, c) => `module battery ${p < 0.2 && !c ? "low" : ""}`
-            setupCustomTooltip(
+    );
-                self,
+
-                bind(AstalBattery.get_default(), "timeToEmpty").as(p => `${formatSeconds(p)} remaining`)
+    return (
-            )
+        <box
-        }
+            className={bind(className)}
-    >
+            setup={self =>
-        <label className="icon" label={bind(AstalBattery.get_default(), "percentage").as(getBatteryIcon)} />
+                setupCustomTooltip(
-        <label label={bind(AstalBattery.get_default(), "percentage").as(p => `${Math.round(p * 100)}%`)} />
+                    self,
-    </box>
+                    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>