feat(ags): add battery bar

modules/user/packages/drvs/ags.nix

@@ -10,6 +10,8 @@
       echo \$surface0: \#${colors.base02}\; >> colors.scss
       echo \$fg:       \#${colors.base05}\; >> colors.scss
       echo \$accent:   \#${colors.base0B}\; >> colors.scss
+
+      echo \#${colors.base0B} > accent.css
     '';
 
     installPhase = ''
@@ -17,5 +19,6 @@
       mkdir $out
       cp $src/* $out -r
       mv colors.scss $out
+      mv accent.css  $out
     '';
   }

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")}>
+    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={bind(bat, "percentage").as(p =>
-            `${Math.floor(p * 100)} %`
-        )} />
+            <label label={percent.as(p => `${p}%`)} />
         </box>
+    );
 }