Added ags

TODO copy ags config

roles/ags/files/widget/bar/buttons/BatteryBar.ts

@@ -0,0 +1,94 @@
+import icons from "lib/icons"
+import options from "options"
+import PanelButton from "../PanelButton"
+
+const battery = await Service.import("battery")
+const { bar, percentage, blocks, width, low } = options.bar.battery
+
+const Indicator = () => Widget.Icon({
+    setup: self => self.hook(battery, () => {
+        self.icon = battery.charging || battery.charged
+            ? icons.battery.charging
+            : battery.icon_name
+    }),
+})
+
+const PercentLabel = () => Widget.Revealer({
+    transition: "slide_right",
+    click_through: true,
+    reveal_child: percentage.bind(),
+    child: Widget.Label({
+        label: battery.bind("percent").as(p => `${p}%`),
+    }),
+})
+
+const LevelBar = () => {
+    const level = Widget.LevelBar({
+        bar_mode: "discrete",
+        max_value: blocks.bind(),
+        visible: bar.bind().as(b => b !== "hidden"),
+        value: battery.bind("percent").as(p => (p / 100) * blocks.value),
+    })
+    const update = () => {
+        level.value = (battery.percent / 100) * blocks.value
+        level.css = `block { min-width: ${width.value / blocks.value}pt; }`
+    }
+    return level
+        .hook(width, update)
+        .hook(blocks, update)
+        .hook(bar, () => {
+            level.vpack = bar.value === "whole" ? "fill" : "center"
+            level.hpack = bar.value === "whole" ? "fill" : "center"
+        })
+}
+
+const WholeButton = () => Widget.Overlay({
+    vexpand: true,
+    child: LevelBar(),
+    class_name: "whole",
+    pass_through: true,
+    overlay: Widget.Box({
+        hpack: "center",
+        children: [
+            Widget.Icon({
+                icon: icons.battery.charging,
+                visible: Utils.merge([
+                    battery.bind("charging"),
+                    battery.bind("charged"),
+                ], (ing, ed) => ing || ed),
+            }),
+            Widget.Box({
+                hpack: "center",
+                vpack: "center",
+                child: PercentLabel(),
+            }),
+        ],
+    }),
+})
+
+const Regular = () => Widget.Box({
+    class_name: "regular",
+    children: [
+        Indicator(),
+        PercentLabel(),
+        LevelBar(),
+    ],
+})
+
+export default () => PanelButton({
+    class_name: "battery-bar",
+    hexpand: false,
+    on_clicked: () => { percentage.value = !percentage.value },
+    visible: battery.bind("available"),
+    child: Widget.Box({
+        expand: true,
+        visible: battery.bind("available"),
+        child: bar.bind().as(b => b === "whole" ? WholeButton() : Regular()),
+    }),
+    setup: self => self
+        .hook(bar, w => w.toggleClassName("bar-hidden", bar.value === "hidden"))
+        .hook(battery, w => {
+            w.toggleClassName("charging", battery.charging || battery.charged)
+            w.toggleClassName("low", battery.percent < low.value)
+        }),
+})