feat(agsV2): implement battery widget

nixosModules/ags/v2/app.ts

@@ -2,7 +2,7 @@ import { App } from 'astal';
 
 import style from 'inline:./style.scss';
 
-import Bar from './widgets/bar/main';
+import Bar from './widgets/bar/wim';
 
 
 App.start({

nixosModules/ags/v2/widgets/bar/fullscreen.tsx

@@ -112,7 +112,6 @@ export default ({
     const vertical = anchor >= (Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT);
     const isBottomOrLeft = (
         anchor === (Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.BOTTOM)
-
     ) || (
         anchor === (Astal.WindowAnchor.LEFT | Astal.WindowAnchor.TOP | Astal.WindowAnchor.BOTTOM)
     );
@@ -158,8 +157,8 @@ export default ({
             >
                 <box
                     css="min-height: 1px; padding: 1px;"
-                    hexpand={true}
+                    hexpand
-                    hpack="fill"
+                    halign={Gtk.Align.FILL}
                     vertical={vertical}
                 >
                     {isBottomOrLeft ?

nixosModules/ags/v2/widgets/bar/items/battery.tsx

@@ -0,0 +1,31 @@
+import { bind, Widget } from 'astal';
+
+import AstalBattery from 'gi://AstalBattery';
+const Battery = AstalBattery.get_default();
+
+import Separator from '../../misc/separator';
+
+
+const LOW_BATT = 20;
+const SPACING = 5;
+
+export default () => (
+    <box className="toggle-off battery">
+        <icon
+            class_name="battery-indicator"
+            icon={bind(Battery, 'batteryIconName')}
+
+            setup={(self: Widget.Icon) => {
+                Battery.connect('notify::percentage', () => {
+                    self.toggleClassName('charging', Battery.get_charging());
+                    self.toggleClassName('charged', Battery.get_percentage() === 100);
+                    self.toggleClassName('low', Battery.get_percentage() < LOW_BATT);
+                });
+            }}
+        />
+
+        <Separator size={SPACING} />
+
+        <label label={bind(Battery, 'percentage').as((v) => `${v}%`)} />
+    </box>
+);

nixosModules/ags/v2/widgets/bar/wim.tsx

@@ -1,5 +1,7 @@
 import { Astal } from 'astal';
 
+import Battery from './items/battery';
+
 import BarRevealer from './fullscreen';
 
 
@@ -16,7 +18,7 @@ export default () => {
             <box
                 className="Bar"
             >
-                <label label="hi" />
+                <Battery />
             </box>
         </BarRevealer>
     );

nixosModules/ags/v2/widgets/misc/separator.tsx

@@ -0,0 +1,14 @@
+import { Widget } from 'astal';
+
+
+export default ({
+    size,
+    vertical = false,
+    css = '',
+    ...rest
+}: { size: number } & Widget.BoxProps) => (
+    <box
+        css={`${vertical ? 'min-height' : 'min-width'}: ${size}px; ${css}`}
+        {...rest}
+    />
+);