Update astal widgets

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

hosts/common/configs/user/gui/astal/config/widget/components/Battery.tsx

@@ -0,0 +1,30 @@
+import { bind, Variable } from "astal";
+import AstalBattery from "gi://AstalBattery";
+
+const battery = AstalBattery.get_default();
+
+const formatTime = (seconds: number) => seconds > 0
+  ? `${String(Math.floor(seconds / 3600)).padStart(2, "0")}:${String(Math.floor((seconds % 3600) / 60)).padStart(2, "0")}`
+  : "--:--";
+
+export default () => {
+  const percentage = bind(battery, "percentage").as((p) => Math.round(p * 100) + "%");
+  const charging = bind(battery, "charging");
+  const timeToFull = bind(battery, "timeToFull");
+  const timeToEmpty = bind(battery, "timeToEmpty");
+
+  const time = Variable.derive([charging, timeToFull, timeToEmpty], (charging, full, empty) =>
+    formatTime(charging ? full : empty)
+  );
+
+  const label = Variable.derive([percentage, charging, time], (percentage, charging, time) => {
+    const arrow = charging ? "▲" : "▼";
+    return `${percentage} (${time}) ${arrow}`;
+  });
+
+  return (
+    <button className="battery">
+      <label className="label" label={bind(label)} />
+    </button>
+  );
+};

hosts/common/configs/user/gui/astal/config/widget/components/Date.tsx

@@ -1,13 +1,15 @@
-import { Variable } from "astal/variable";
+import { bind, Variable } from "astal";
 import { GLib } from "astal";
 
-const time = Variable<string>("").poll(
-  1000,
-  () => GLib.DateTime.new_now_local().format("%H:%M - %A, %d %B %Y")!,
-);
+export default () => {
+  const time = Variable(GLib.DateTime.new_now_local().format("%H:%M - %A, %d %B %Y")!).poll(
+    1000,
+    () => GLib.DateTime.new_now_local().format("%H:%M - %A, %d %B %Y")!,
+  );
 
-export default () => (
-  <button className="date">
-    <label className="label" onDestroy={() => time.drop()} label={time()} />
-  </button>
-);
+  return (
+    <button className="date">
+      <label className="label" onDestroy={() => time.drop()} label={bind(time)} />
+    </button>
+  );
+}

hosts/common/configs/user/gui/astal/config/widget/components/Hidden.tsx

@@ -0,0 +1,32 @@
+import { Gtk } from "astal/gtk3";
+import { Variable, bind, timeout } from "astal";
+
+export default function Hidden({
+  child,
+  children,
+  orientation = Gtk.Orientation.VERTICAL,
+  transitionType = Gtk.RevealerTransitionType.SLIDE_DOWN,
+}: {
+  child?: JSX.Element;
+  children?: JSX.Element | JSX.Element[];
+  orientation?: Gtk.Orientation;
+  transitionType?: Gtk.RevealerTransitionType;
+}) {
+  const show = Variable(true);
+  const contents = child ?? children;
+
+  return (
+    <eventbox
+      clickThrough
+      onHover={() => show.set(true)}
+      onHoverLost={() => show.set(false)}
+    >
+      <box orientation={orientation} >
+        <revealer setup={self => timeout(2000, () => self.revealChild = false)} revealChild={bind(show)} transitionType={transitionType}>
+          {Array.isArray(contents) ? (<>{contents}</>) : (contents)}
+        </revealer>
+        <box clickThrough className="trigger-guard" />
+      </box>
+    </eventbox>
+  );
+}