update

app.ts

@@ -1,10 +1,11 @@
-import { App } from "astal/gtk3"
+import { App } from "astal/gtk3";
-import style from "./style.scss"
+import style from "./style.scss";
-import Bar from "./widget/Bar"
+import Bar from "./widget/Bar";
+import Agenda from "./widget/Agenda";
 
 App.start({
-    css: style,
+  css: style,
-    main() {
+  main() {
-        App.get_monitors().map(Bar)
+    App.get_monitors().map(Agenda);
-    },
+  },
-})
+});

flake.nix

@@ -24,7 +24,7 @@
                     pane name="command"
                     pane command="bash" {
                         name "ags"
-                        args "-c" "ags run ./app.ts"
+                        args "-c" "wgo -file=.ts -file=.tsx -xfile=.d.ts -file=.scss ags run ./app.ts"
                     }
                 }
             }
@@ -33,8 +33,10 @@
         zellij --layout ${layout} attach --create ags
       '';
       devStopScript = pkgs.writeShellScriptBin "dev-stop" ''
+        killall gjs || true
         zellij delete-session --force ags || true
       '';
+      agsPkg = ags.packages.${system};
     in
     {
       packages.${system} = {
@@ -46,6 +48,7 @@
 
           # additional libraries and executables to add to gjs' runtime
           extraPackages = [
+            agsPkg.hyprland
             # ags.packages.${system}.battery
             # pkgs.fzf
           ];
@@ -58,12 +61,15 @@
             devRunScript
             devStopScript
             pkgs.zellij
+            pkgs.typescript
+            pkgs.wgo
             # includes all Astal libraries
             # ags.packages.${system}.agsFull
 
             # includes astal3 astal4 astal-io by default
             (ags.packages.${system}.default.override {
               extraPackages = [
+                agsPkg.hyprland
                 # cherry pick packages
               ];
             })

widget/Agenda.tsx

@@ -0,0 +1,19 @@
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
+import { exec, Variable } from "astal";
+
+const agenda = exec(["gcalcli", "agenda", "--tsv", "--details=end"]);
+
+export default function Agenda(gdkmonitor: Gdk.Monitor) {
+  agenda.split("\n").map(console.log);
+  return (
+    <window
+      className="Calendar"
+      gdkmonitor={gdkmonitor}
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      anchor={Astal.WindowAnchor.RIGHT}
+      application={App}
+    >
+      <box>{agenda}</box>
+    </window>
+  );
+}

widget/Bar.tsx

@@ -1,29 +1,30 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk3"
+import { App, Astal, Gtk, Gdk } from "astal/gtk3";
-import { Variable } from "astal"
+import { Variable } from "astal";
 
-const time = Variable("").poll(1000, "date")
+const time = Variable("").poll(1000, "date");
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-    return <window
+  return (
-        className="Bar"
+    <window
-        gdkmonitor={gdkmonitor}
+      className="Bar"
-        exclusivity={Astal.Exclusivity.EXCLUSIVE}
+      gdkmonitor={gdkmonitor}
-        anchor={Astal.WindowAnchor.TOP
+      exclusivity={Astal.Exclusivity.EXCLUSIVE}
-            | Astal.WindowAnchor.LEFT
+      anchor={
-            | Astal.WindowAnchor.RIGHT}
+        Astal.WindowAnchor.TOP |
-        application={App}>
+        Astal.WindowAnchor.LEFT |
-        <centerbox>
+        Astal.WindowAnchor.RIGHT
-            <button
+      }
-                onClicked="echo hello"
+      application={App}
-                halign={Gtk.Align.CENTER} >
+    >
-                Welcome to AGS!
+      <centerbox>
-            </button>
+        <button onClicked="notify-send hello" halign={Gtk.Align.CENTER}>
-            <box />
+          Welcome to AGS!
-            <button
+        </button>
-                onClick={() => print("hello")}
+        <box />
-                halign={Gtk.Align.CENTER} >
+        <button onClick={() => print("hello")} halign={Gtk.Align.CENTER}>
-                <label label={time()} />
+          <label label={time()} />
-            </button>
+        </button>
-        </centerbox>
+      </centerbox>
     </window>
+  );
 }