1 files changed, 72 insertions, 20 deletions

diff --git a/ags/widget/Bar.tsx b/ags/widget/Bar.tsx
index d994797..0e4f8bb 100644
--- a/ags/widget/Bar.tsx
+++ b/ags/widget/Bar.tsx
@@ -1,16 +1,18 @@
-import { App, Astal, Gtk, Gdk, Widget } from "astal/gtk3"
-import { Variable } from "astal"
+import { App, Astal, Gtk, Gdk } from "astal/gtk3"
+import { bind, Variable } from "astal"
 import { BoxProps, CenterBoxProps } from "astal/gtk3/widget"
+import AstalBattery from "gi://AstalBattery"
+import AstalNetwork from "gi://AstalNetwork"
+import AstalBluetooth from "gi://AstalBluetooth"
 
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor
 const { START, CENTER, END } = Gtk.Align
 
-const time = Variable("").poll(1000, "date")
-
 function VerticalCenterBox(props: CenterBoxProps) {
   return <centerbox
     {...props}
     vertical
+    halign={CENTER}
   />
 }
 
@@ -18,36 +20,86 @@ function VerticalBox(props: BoxProps) {
   return <box
     {...props}
     vertical
+    halign={CENTER}
+  />
+}
+
+function Clock() {
+  const hours = Variable("").poll(360000, "date +%_H")
+  const minutes = Variable("").poll(60000, "date +%_M")
+
+  return <VerticalBox
+    className="Clock"
+    onDestroy={() => {
+      hours.drop()
+      minutes.drop()
+    }}
+  >
+    {hours()}
+    {minutes()}
+  </VerticalBox>
+}
+
+function Battery() {
+  const bat = AstalBattery.get_default()
+
+  return <icon
+    className="Battery"
+    tooltipText={bind(bat, "percentage").as((v) => `${v * 100}%`)}
+    icon={bind(bat, "iconName")}
+  />
+}
+
+function Wifi() {
+  const wifi = AstalNetwork.get_default().get_wifi()!
+
+  return <icon
+    className="Wifi"
+    tooltipText={bind(wifi, "ssid").as(String)}
+    icon={bind(wifi, "iconName")}
+  />
+}
+
+function Bluetooth() {
+  const bluetooth = AstalBluetooth.get_default()
+
+  const isPowered = bind(bluetooth, "isPowered")
+
+  return <label
+    className="Bluetooth"
+    label={isPowered.as(String)}
   />
 }
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   return <window
     name="Bar"
-    className="Bar"
     gdkmonitor={gdkmonitor}
     exclusivity={Astal.Exclusivity.EXCLUSIVE}
     anchor={TOP | LEFT | BOTTOM}
     application={App}>
-    <VerticalCenterBox>
-      <button
-        onClicked="echo hello"
-        halign={CENTER}
+    <VerticalCenterBox
+      className="Bar"
+    >
+      <VerticalBox
+        className="ModulesTop"
         valign={START}
       >
-        Welcome to AGS!
-      </button>
-      <VerticalBox>
-        <label>CIAO</label>
-        <label>CIAO</label>
       </VerticalBox>
-      <button
-        onClicked={() => print("hello")}
-        halign={CENTER}
+      <VerticalBox
+        className="ModulesMiddle"
+        valign={CENTER}
+      >
+        <Clock />
+      </VerticalBox>
+      <VerticalBox
+        className="ModulesBottom"
         valign={END}
       >
-        <label label={time()} />
-      </button>
+        <Bluetooth />
+        <Wifi />
+        <Battery />
+      </VerticalBox>
     </VerticalCenterBox>
-  </window>
+  </window >
 }