feat!: migrate to ags v3, redesign styles

widget/battery.tsx

@@ -1,21 +1,24 @@
-import { bind, Variable } from "astal"
+import { Gtk } from "ags/gtk4"
 import AstalBattery from "gi://AstalBattery?version=0.1"
+import { createBinding, createComputed } from "gnim"
 
 export default function Battery() {
   const battery = AstalBattery.get_default()
-  const battery_info = Variable.derive([bind(battery, "percentage"), bind(battery, "charging")], (percentage, charging) => {
-    const full_percentage = Math.floor(percentage * 100)
-    if (charging) {
-      return { label: `${full_percentage == 100 ? "FULL" : "CHR"}: ${full_percentage}%` }
-    }
-    return { label: `${full_percentage == 100 ? "FULL" : "BAT"}: ${full_percentage}%` }
-  })
+  const percentage = createBinding(battery, "percentage")
+  const full_percentage = Math.floor(percentage.peek() * 100)
+  const battery_info = createComputed(() => (`${full_percentage === 100 ? "FULL" : "CHR"}: ${full_percentage}%`))
 
   if (!battery.is_battery) {
     return <></>
   }
-  return <box className="status-box">
-    <label label={battery_info((i) => i.label)} />
-  </box>
+
+  return (
+    <>
+      <box class="status-box">
+        <label label={battery_info} />
+      </box>
+      <Gtk.Separator />
+    </>
+  )
 }