agenda now refreshes every 10 minutes

flake.nix

@@ -43,12 +43,11 @@
         default = ags.lib.bundle {
           inherit pkgs;
           src = ./.;
-          name = "my-shell";
+          name = "ags-calendar";
           entry = "app.ts";
 
           # additional libraries and executables to add to gjs' runtime
           extraPackages = [
-            agsPkg.hyprland
             # ags.packages.${system}.battery
             # pkgs.fzf
           ];
@@ -69,7 +68,6 @@
             # includes astal3 astal4 astal-io by default
             (ags.packages.${system}.default.override {
               extraPackages = [
-                agsPkg.hyprland
                 # cherry pick packages
               ];
             })

style.scss

@@ -11,12 +11,12 @@ window.Agenda {
     margin: 24px;
     > box {
       /* From https://css.glass */
-      font-size: 1.3em;
+      font-size: 1.8em;
-      text-shadow: 2px 2px 2px #000000;
+      text-shadow: 0px 0px 4px #000000;
-      background: rgba(64, 47, 47, 0.32);
+      background: rgba(0, 0, 0, 0.2);
       border-radius: 16px;
       box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-      border: 1px solid rgba(64, 47, 47, 0.6);
+      border: 1px solid rgba(0, 0, 0, 0.3);
       padding: 24px;
     }
   }

widget/Agenda.tsx

@@ -1,5 +1,5 @@
 import { App, Astal, Gdk } from "astal/gtk3";
-import { bind, execAsync, Variable } from "astal";
+import { bind, execAsync, interval, Variable } from "astal";
 
 type AgendaItem = {
   startDate: string;
@@ -56,10 +56,16 @@ function createAgenda(agendaItems: AgendaItem[]): string {
 }
 
 export default function Agenda(gdkmonitor: Gdk.Monitor) {
-  const agenda = Variable([] as AgendaItem[]).watch(
+  const agenda = Variable([] as AgendaItem[]);
-    ["gcalcli", "agenda", "--tsv"],
+  const watch = () => {
-    (stdout, prev) => [...prev, transform(stdout)],
+    agenda.set([]);
-  );
+    agenda.stopWatch();
+    agenda.watch(["gcalcli", "agenda", "--tsv"], (stdout, prev) => [
+      ...prev,
+      transform(stdout),
+    ]);
+  };
+  const intervalHandler = interval(1000 * 60 * 10 /* 10 minutes */, watch);
   return (
     <window
       className="Agenda"
@@ -75,7 +81,12 @@ export default function Agenda(gdkmonitor: Gdk.Monitor) {
           execAsync(["xdg-open", "https://www.google.com/calendar"]);
         }}
       >
-        <box onDestroy={() => agenda.drop()}>
+        <box
+          onDestroy={() => {
+            intervalHandler.cancel();
+            agenda.drop();
+          }}
+        >
           {bind(agenda).as(createAgenda)}
         </box>
       </button>