make some ags config stuff

.config/ags/config.js

@@ -1,20 +1,52 @@
+const css = `${App.configDir}/style.css`;
+const hyprland = await Service.import("hyprland");
+// const systray = await Service.import("systemtray");
+
+function workspaces() {
+    const active = hyprland.active.workspace.bind("id");
+    const workspaces = hyprland.bind("workspaces")
+          .as(ws => ws.map(({ id }) => Widget.Button({
+              onClicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
+              child: Widget.Label(`${id}`),
+              class_name: active.as(i => `${i === id ? "focused" : ""}`),
+          })))
+    return Widget.Box({
+        class_name: "workspaces",
+        children: workspaces,
+    })
+}
+
+const date = Variable("", {
+    poll: [1000, 'date "+\%a \%b \%d, \%-I:\%M \%p"'],
+})
+
 function Bar(monitor = 0) {
     const myLabel = Widget.Label({
         label: 'some example content',
     })
 
+    const clock = Widget.Label({
+        label: date.bind(),
+    })
+
     return Widget.Window({
         monitor,
         name: `bar${monitor}`, // this name has to be unique
         anchor: ['top', 'left', 'right'],
-        child: myLabel,
+        child: Widget.CenterBox({
+            startWidget: workspaces(),
+            centerWidget: clock,
+            endWidget: myLabel,
+        }),
     })
 }
 
 App.config({
+    style: css,
     windows: [
         Bar(0), // can be instantiated for each monitor
         Bar(1),
-        Bar(2),
     ],
 })
+
+export { }

.config/ags/style.css

@@ -0,0 +1,21 @@
+window {
+    background-color: transparent;
+}
+
+.workspaces {
+    background-color: blue;
+    border-color: purple;
+}
+
+button:active {
+    background-color: @theme_selected_bg_color;
+}
+
+button:hover {
+    border-bottom: 3px solid @theme_fg_color;
+}
+
+.workspaces button.focused {
+    background-color: @theme_selected_bg_color;
+    color: @theme_selected_fg_color;
+}