agenda: text now only updates when the fetch is successful

flake.nix

@@ -36,14 +36,13 @@
         killall gjs || true
         zellij delete-session --force ags || true
       '';
-      agsPkg = ags.packages.${system};
     in
     {
       packages.${system} = {
         default = ags.lib.bundle {
           inherit pkgs;
           src = ./.;
-          name = "ags-calendar";
+          name = "ags-agenda";
           entry = "app.ts";
 
           # additional libraries and executables to add to gjs' runtime

style.scss

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

widget/Agenda.tsx

@@ -55,21 +55,27 @@ function createAgenda(agendaItems: AgendaItem[]): string {
   return result.trim();
 }
 
+async function fetchAgenda() {
+  const output = await execAsync(["gcalcli", "agenda", "--tsv"]);
+  const items = output.trim().split("\n").map(transform);
+  return createAgenda(items);
+}
+
 export default function Agenda(gdkmonitor: Gdk.Monitor) {
-  const agenda = Variable([] as AgendaItem[]);
-  const watch = () => {
-    agenda.set([]);
-    agenda.stopWatch();
-    agenda.watch(["gcalcli", "agenda", "--tsv"], (stdout, prev) => [
-      ...prev,
-      transform(stdout),
-    ]);
-  };
-  agenda.onError((err) => {
-    console.error(`failed to fetch agenda: ${err}`);
-    timeout(5000, watch);
+  const text = Variable("");
+
+  const fetchAgendaData = () => {
+    fetchAgenda()
+      .then((agenda) => text.set(agenda))
+      .catch((err) => {
+        text.set(`failed to fetch agenda: ${err.message}`);
+        timeout(5000, fetchAgendaData);
       });
-  const intervalHandler = interval(1000 * 60 * 10 /* 10 minutes */, watch);
+  };
+  const intervalHandler = interval(
+    1000 * 60 * 10 /* 10 minutes */,
+    fetchAgendaData,
+  );
   return (
     <window
       className="Agenda"
@@ -88,10 +94,10 @@ export default function Agenda(gdkmonitor: Gdk.Monitor) {
         <box
           onDestroy={() => {
             intervalHandler.cancel();
-            agenda.drop();
+            text.drop();
           }}
         >
-          {bind(agenda).as(createAgenda)}
+          {bind(text)}
         </box>
       </button>
     </window>