added Batterymenu and refactor

widget/menus/BatteryMenu/BatteryMenu.scss

@@ -0,0 +1,38 @@
+.Batterymenu {
+    background-color: transparent;
+    padding: 10px;
+    box {
+        margin: 5px;
+    }
+
+    .BatteryMainBox {
+        background-color: black;
+        border-radius: 25px;
+        padding: 10px;
+    }
+
+    icon {
+        font-size: 25px;
+        padding: 0 2px;
+    }
+
+    .BatteryTopTitle {
+        font-weight: bold;
+        font-size: 15px;
+        padding: 0 2px;
+    }
+
+    .BatteryInfoTable {
+        padding: 10px;
+        background-color: rgb(55, 55, 55);
+        border-radius: 25px;
+        min-width: 300px;
+        label {
+            font-size: 15px;
+        }
+
+        label.BatteryInfoTableRowTitle {
+            color: rgb(170, 170, 170);
+        }
+    }
+}

widget/menus/BatteryMenu/BatteryMenu.tsx

@@ -0,0 +1,93 @@
+import { Astal, App, Gtk } from "astal/gtk3";
+import Battery from "gi://AstalBattery";
+import { bind } from "astal";
+
+const BatteryMenu = () => {
+  const { TOP, RIGHT } = Astal.WindowAnchor;
+  const { START, END } = Gtk.Align;
+  const bat = Battery.get_default();
+  console.log(
+    bat.charging,
+    bat.capacity,
+    bat.energyFull,
+    bat.energy_full_design,
+  );
+  return (
+    <window
+      anchor={TOP | RIGHT}
+      name="batterymenu"
+      className="Batterymenu"
+      application={App}
+      visible={false}
+    >
+      <box vertical className="BatteryMainBox">
+        <box className="Top">
+          <icon icon={bind(bat, "batteryIconName")} />
+          <box vertical>
+            <label
+              className="BatteryTopTitle"
+              label={bind(bat, "percentage").as(
+                (p) => `Battery ${Math.floor(p * 100)} %`,
+              )}
+            />
+          </box>
+        </box>
+        <box vertical className="BatteryInfoTable">
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Status:"
+            />
+            <label
+              hexpand
+              halign={END}
+              label={bind(bat, "charging").as((p) =>
+                p ? "CHARGING" : "PENDING_CHARGE",
+              )}
+            />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Health:"
+            />
+            <label hexpand halign={END} label="92.5 %" />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Charge cycles:"
+            />
+            <label hexpand halign={END} label="325" />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Power draw:"
+            />
+            <label hexpand halign={END} label="0.0 W" />
+          </box>
+          <box>
+            <label
+              className="BatteryInfoTableRowTitle"
+              hexpand
+              halign={START}
+              label="Voltage:"
+            />
+            <label hexpand halign={END} label="12.1 V" />
+          </box>
+        </box>
+      </box>
+    </window>
+  );
+};
+
+export default BatteryMenu;