agenda: added agenda widget

app.ts

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

style.scss

@@ -2,19 +2,22 @@
 $theme_fg_color: "@theme_fg_color";
 $theme_bg_color: "@theme_bg_color";
 
-window.Bar {
+window.Agenda {
+  > button {
     background: transparent;
-    color: #{$theme_bg_color};
-    font-weight: bold;
-
-    >centerbox {
-        background: #{$theme_bg_color};
-        border-radius: 10px;
-        margin: 8px;
+    color: transparent;
+    margin: 24px;
+    padding: 0;
+    border: 0px solid transparent;
+    border-radius: 0px;
+    > box {
+      /* From https://css.glass */
+      font-size: 1.3em;
+      background: rgba(64, 47, 47, 0.32);
+      border-radius: 16px;
+      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+      border: 1px solid rgba(64, 47, 47, 0.6);
+      padding: 24px;
     }
-
-    button {
-        border-radius: 8px;
-        margin: 2px;
   }
 }

widget/Agenda.tsx

@@ -1,19 +1,84 @@
-import { App, Astal, Gtk, Gdk } from "astal/gtk3";
-import { exec, Variable } from "astal";
+import { App, Astal, Gdk } from "astal/gtk3";
+import { bind, execAsync, Variable } from "astal";
 
-const agenda = exec(["gcalcli", "agenda", "--tsv", "--details=end"]);
+type AgendaItem = {
+  startDate: string;
+  startHour: string;
+  endDate: string;
+  endHour: string;
+  activity: string;
+};
+
+function transform(stdout: string): AgendaItem {
+  const [startDate, startHour, endDate, endHour, activity] = stdout.split("\t");
+  return { startDate, startHour, endDate, endHour, activity };
+}
+
+// Helper function to get the day name from a date string
+function getDayName(dateString: string): string {
+  const date = new Date(dateString);
+  const dayNames = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ];
+  return dayNames[date.getDay()];
+}
+
+// Helper function to format the agenda
+function createAgenda(agendaItems: AgendaItem[]): string {
+  // Group items by date
+  const groupedByDate: { [date: string]: AgendaItem[] } = {};
+
+  agendaItems.forEach((item) => {
+    if (!groupedByDate[item.startDate]) {
+      groupedByDate[item.startDate] = [];
+    }
+    groupedByDate[item.startDate].push(item);
+  });
+
+  // Format each group with extra space between them
+  let result = "";
+  for (const date in groupedByDate) {
+    const dayName = getDayName(date);
+    result += `\n${date} - ${dayName}\n`; // Include the day name
+    groupedByDate[date].forEach((item) => {
+      result += `\t${item.startHour} - ${item.endHour} | ${item.activity}\n`;
+    });
+    result += "\n"; // Add extra space between date groups
+  }
+
+  return result.trim();
+}
 
 export default function Agenda(gdkmonitor: Gdk.Monitor) {
-  agenda.split("\n").map(console.log);
+  const agenda = Variable([] as AgendaItem[]).watch(
+    ["gcalcli", "agenda", "--tsv"],
+    (stdout, prev) => [...prev, transform(stdout)],
+  );
   return (
     <window
-      className="Calendar"
+      className="Agenda"
       gdkmonitor={gdkmonitor}
       exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      anchor={Astal.WindowAnchor.RIGHT}
+      anchor={Astal.WindowAnchor.RIGHT | Astal.WindowAnchor.TOP}
+      layer={Astal.Layer.BOTTOM}
       application={App}
     >
-      <box>{agenda}</box>
+      <button
+        borderWidth={0}
+        onClick={() => {
+          execAsync(["xdg-open", "https://www.google.com/calendar"]);
+        }}
+      >
+        <box onDestroy={() => agenda.drop()}>
+          {bind(agenda).as(createAgenda)}
+        </box>
+      </button>
     </window>
   );
 }

widget/Bar.tsx

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