feat(ags): add battery bar

modules/user/packages/drvs/ags/widget/elements/Battery.tsx

@@ -1,14 +1,30 @@
-import { bind } from "astal"
-import Battery from "gi://AstalBattery"
+import { bind } from "astal";
+import Battery from "gi://AstalBattery";
+import accent from "../../accent.css";
 
 export default function BatteryLevel() {
-    const bat = Battery.get_default()
+    const bat = Battery.get_default();
+    const percent = bind(bat, "percentage").as(p => Math.floor(p * 100));
 
-    return <box className="Battery"
-        visible={bind(bat, "isPresent")}>
-        <icon icon={bind(bat, "batteryIconName")} />
-        <label label={bind(bat, "percentage").as(p =>
-            `${Math.floor(p * 100)} %`
-        )} />
-    </box>
+    return (
+        <box 
+            className="Battery" 
+            visible={bind(bat, "isPresent")}
+            css={percent.as(p => `
+                background-image: linear-gradient(
+                    to right,
+                    ${accent} 0%,
+                    ${accent} ${p}%,
+                    transparent ${p}%,
+                    transparent 100%
+                );
+                background-size: 100% 3px;
+                background-repeat: no-repeat;
+                background-position: bottom;
+            `)}
+        >
+            <icon icon={bind(bat, "batteryIconName")} />
+            <label label={percent.as(p => `${p}%`)} />
+        </box>
+    );
 }