[AGS] Bar: Done (WiFi still missing, will be added at some later point)

config/astal/components/QuickActions/modules/Battery.tsx

@@ -0,0 +1,52 @@
+import { bind } from "astal";
+import Battery from "gi://AstalBattery";
+import { Gtk } from "astal/gtk4";
+
+export const BatteryBox = () => {
+    const battery = Battery.get_default();
+    const batteryEnergy = (energyRate: number) => {
+        return energyRate > 0.1 ? `${Math.round(energyRate * 10) / 10} W ` : "";
+    };
+    return (
+        <box
+            cssClasses={["battery-info"]}
+            visible={bind(battery, "isBattery")}
+        >
+            <box cssClasses={["battery-box"]}>
+                <image
+                    iconName={bind(battery, "batteryIconName")}
+                    tooltipText={bind(battery, "energyRate").as(er =>
+                        batteryEnergy(er),
+                    )}
+                />
+                <label
+                    label={bind(battery, "percentage").as(
+                        p => ` ${Math.round(p * 100)}%`,
+                    )}
+                />
+                <label
+                    cssClasses={["time"]}
+                    hexpand={true}
+                    halign={Gtk.Align.END}
+                    visible={bind(battery, "charging").as(c => !c)}
+                    label={bind(battery, "timeToEmpty").as(t => toTime(t))}
+                />
+            </box>
+        </box>
+    );
+};
+
+const toTime = (time: number) => {
+    const MINUTE = 60;
+    const HOUR = MINUTE * 60;
+
+    if (time > 24 * HOUR) return "";
+
+    const hours = Math.round(time / HOUR);
+    const minutes = Math.round((time - hours * HOUR) / MINUTE);
+
+    const hoursDisplay = hours > 0 ? `${hours}h ` : "";
+    const minutesDisplay = minutes > 0 ? `${minutes}m ` : "";
+
+    return `${hoursDisplay}${minutesDisplay}`;
+};