feat!: migrate to ags v3, redesign styles

widget/cpu-widget.tsx

@@ -1,19 +1,18 @@
-import { bind, GLib, Variable } from "astal";
+import { createPoll } from "ags/time";
 import { calc_cpu_usage, get_cpu_snapshot } from "./cpu";
 
-let s1 = get_cpu_snapshot();
-let cpu_usage_percent = Variable(0);
-GLib.timeout_add(GLib.PRIORITY_DEFAULT, 1000, () => {
-  const s2 = get_cpu_snapshot();
-  cpu_usage_percent.set(calc_cpu_usage(s1, s2));
-  s1 = s2;
-
-  return true;
-});
-
+let s1 = get_cpu_snapshot()
 export default function Cpu() {
-  return <box className="status-box">
-    <label label={bind(cpu_usage_percent).as((u) => `${u}% `)} />
-  </box>
+  const usage = createPoll(0, 1000, () => {
+    const s2 = get_cpu_snapshot()
+    let calc = calc_cpu_usage(s1, s2)
+    s1 = s2
+    return calc
+  })
+  return (
+    <box class="status-box cpu">
+      <label label={usage.as(u => `CPU: ${u}% `)} />
+    </box>
+  )
 }