From 205712b42253ae0baea26d62528c8470500d6af1 Mon Sep 17 00:00:00 2001
From: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>
Date: Wed, 2 Apr 2025 14:19:57 +1100
Subject: sidebar: show events for each day

---
 scss/sidebar.scss                        | 71 +++++++++++++++++++++++++++++--
 src/modules/sidebar/modules/calendar.tsx | 72 ++++++++++++++++++++++++++++++--
 src/modules/sidebar/modules/upcoming.tsx |  4 +-
 3 files changed, 139 insertions(+), 8 deletions(-)

diff --git a/scss/sidebar.scss b/scss/sidebar.scss
index d0f221a..1ca19b7 100644
--- a/scss/sidebar.scss
+++ b/scss/sidebar.scss
@@ -52,7 +52,7 @@
     @include lib.element-decel;
 
     &:disabled {
-        color: scheme.$overlay2;
+        color: color.change(scheme.$overlay2, $alpha: 1);
     }
 
     &:hover,
@@ -99,7 +99,7 @@
             padding: lib.s(3) lib.s(8);
 
             &:disabled {
-                color: scheme.$overlay0;
+                color: color.change(scheme.$overlay0, $alpha: 1);
             }
 
             &:hover,
@@ -108,7 +108,7 @@
             }
 
             &:active {
-                color: scheme.$overlay2;
+                color: color.change(scheme.$overlay2, $alpha: 1);
             }
 
             &.enabled {
@@ -952,5 +952,70 @@
                 }
             }
         }
+
+        .events {
+            @include lib.spacing(10, true);
+
+            .header {
+                font-weight: bold;
+
+                @include lib.spacing(10);
+
+                & > button {
+                    @include lib.rounded(1000);
+                    @include lib.element-decel;
+
+                    min-width: lib.s(24);
+                    min-height: lib.s(24);
+
+                    &:hover,
+                    &:focus {
+                        color: scheme.$subtext0;
+                    }
+
+                    &:active {
+                        color: color.change(scheme.$overlay2, $alpha: 1);
+                    }
+                }
+            }
+
+            scrollable {
+                min-height: lib.s(315);
+            }
+
+            .date {
+                margin-left: lib.s(10);
+            }
+
+            .sublabel {
+                font-size: lib.s(14);
+                color: scheme.$subtext0;
+            }
+
+            .list {
+                padding: lib.s(5);
+
+                @include lib.spacing(10, true);
+            }
+
+            .event {
+                @include lib.spacing(8);
+            }
+
+            .calendar-indicator {
+                @include lib.rounded(5);
+
+                min-width: lib.s(1);
+
+                $-colours: scheme.$red, scheme.$sapphire, scheme.$flamingo, scheme.$maroon, scheme.$pink, scheme.$sky,
+                    scheme.$peach, scheme.$yellow, scheme.$green, scheme.$rosewater, scheme.$mauve, scheme.$teal,
+                    scheme.$blue;
+                @for $i from 1 through list.length($-colours) {
+                    &.calendar-#{$i} {
+                        background-color: list.nth($-colours, $i);
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/modules/sidebar/modules/calendar.tsx b/src/modules/sidebar/modules/calendar.tsx
index 5cf56dd..bb36909 100644
--- a/src/modules/sidebar/modules/calendar.tsx
+++ b/src/modules/sidebar/modules/calendar.tsx
@@ -1,4 +1,4 @@
-import Calendar from "@/services/calendar";
+import Calendar, { type IEvent } from "@/services/calendar";
 import { setupCustomTooltip } from "@/utils/widgets";
 import { bind, GLib, Variable } from "astal";
 import { Gtk } from "astal/gtk3";
@@ -110,6 +110,32 @@ const getDayTooltip = (day: ical.Time) => {
     return `${events.length} event${events.length === 1 ? "" : "s"}\n${eventsStr}`;
 };
 
+const getEventsHeader = (current: ical.Time) => {
+    const events = Calendar.get_default().getEventsForDay(current);
+    const isToday = current.toJSDate().toDateString() === new Date().toDateString();
+    return (
+        (isToday ? "Today • " : "") +
+        GLib.DateTime.new_from_unix_local(current.toUnixTime()).format("%B %-d • %A") +
+        ` • ${events.length} event${events.length === 1 ? "" : "s"}`
+    );
+};
+
+const getEventHeader = (e: IEvent) => {
+    const start = GLib.DateTime.new_from_unix_local(e.startDate.toUnixTime());
+    const time = `${start.format("%-I")}${start.get_minute() > 0 ? `:${start.get_minute()}` : ""}${start.format("%P")}`;
+    return `${time} <b>${e.event.summary.replaceAll("&", "&amp;")}</b>`;
+};
+
+const getEventTooltip = (e: IEvent) => {
+    const start = GLib.DateTime.new_from_unix_local(e.startDate.toUnixTime());
+    const end = GLib.DateTime.new_from_unix_local(e.event.endDate.toUnixTime());
+    const sameAmPm = start.format("%P") === end.format("%P");
+    const time = `${start.format(`%A, %-d %B • %-I:%M${sameAmPm ? "" : "%P"}`)} — ${end.format("%-I:%M%P")}`;
+    const locIfExists = e.event.location ? ` ${e.event.location}\n` : "";
+    const descIfExists = e.event.description ? `󰒿 ${e.event.description}\n` : "";
+    return `<b>${e.event.summary}</b>\n${time}\n${locIfExists}${descIfExists}󰃭 ${e.calendar}`.replaceAll("&", "&amp;");
+};
+
 const Day = ({ day, shown, current }: { day: ical.Time; shown: Variable<string>; current: Variable<ical.Time> }) => (
     <button
         className={bind(Calendar.get_default(), "calendars").as(() => getDayClassName(day, current))}
@@ -163,12 +189,52 @@ const CalendarView = ({ shown, current }: { shown: Variable<string>; current: Va
         </box>
     </box>
 );
+
+const Event = (event: IEvent) => (
+    <box className="event" setup={self => setupCustomTooltip(self, getEventTooltip(event), { useMarkup: true })}>
+        <box className={`calendar-indicator calendar-${Calendar.get_default().getCalendarIndex(event.calendar)}`} />
+        <box vertical>
+            <label truncate useMarkup xalign={0} label={getEventHeader(event)} />
+            {event.event.location && <label truncate xalign={0} label={event.event.location} className="sublabel" />}
+            {event.event.description && (
+                <label truncate useMarkup xalign={0} label={event.event.description} className="sublabel" />
+            )}
+        </box>
+    </box>
+);
+
+const List = ({ current }: { current: Variable<ical.Time> }) => (
+    <box vertical valign={Gtk.Align.START} className="list">
+        {bind(current).as(c => Calendar.get_default().getEventsForDay(c).map(Event))}
+    </box>
+);
+
+const NoEvents = () => (
+    <box homogeneous name="empty">
+        <box vertical halign={Gtk.Align.CENTER} valign={Gtk.Align.CENTER} className="empty">
+            <label className="icon" label="calendar_month" />
+            <label label="Day all clear!" />
+        </box>
+    </box>
+);
+
 const Events = ({ shown, current }: { shown: Variable<string>; current: Variable<ical.Time> }) => (
-    <box className="events" name="events"></box>
+    <box vertical className="events" name="events">
+        <box className="header">
+            <button cursor="pointer" onClicked={() => shown.set("calendar")} label="" />
+            <label hexpand truncate xalign={0} label={bind(current).as(getEventsHeader)} />
+        </box>
+        <stack shown={bind(current).as(c => (Calendar.get_default().getEventsForDay(c).length > 0 ? "list" : "empty"))}>
+            <NoEvents />
+            <scrollable hscroll={Gtk.PolicyType.NEVER} name="list">
+                <List current={current} />
+            </scrollable>
+        </stack>
+    </box>
 );
 
 export default () => {
-    const shown = Variable("calendar");
+    const shown = Variable<"calendar" | "events">("calendar");
     const current = Variable(ical.Time.now());
 
     return (
diff --git a/src/modules/sidebar/modules/upcoming.tsx b/src/modules/sidebar/modules/upcoming.tsx
index 0023e31..a64e051 100644
--- a/src/modules/sidebar/modules/upcoming.tsx
+++ b/src/modules/sidebar/modules/upcoming.tsx
@@ -16,7 +16,7 @@ const getDateHeader = (events: IEvent[]) => {
 const getEventHeader = (e: IEvent) => {
     const start = GLib.DateTime.new_from_unix_local(e.startDate.toUnixTime());
     const time = `${start.format("%-I")}${start.get_minute() > 0 ? `:${start.get_minute()}` : ""}${start.format("%P")}`;
-    return `${time} <b>${e.event.summary}</b>`;
+    return `${time} <b>${e.event.summary.replaceAll("&", "&amp;")}</b>`;
 };
 
 const getEventTooltip = (e: IEvent) => {
@@ -26,7 +26,7 @@ const getEventTooltip = (e: IEvent) => {
     const time = `${start.format(`%A, %-d %B • %-I:%M${sameAmPm ? "" : "%P"}`)} — ${end.format("%-I:%M%P")}`;
     const locIfExists = e.event.location ? ` ${e.event.location}\n` : "";
     const descIfExists = e.event.description ? `󰒿 ${e.event.description}\n` : "";
-    return `<b>${e.event.summary}</b>\n${time}\n${locIfExists}${descIfExists}󰃭 ${e.calendar}`;
+    return `<b>${e.event.summary}</b>\n${time}\n${locIfExists}${descIfExists}󰃭 ${e.calendar}`.replaceAll("&", "&amp;");
 };
 
 const Event = (event: IEvent) => (
-- 
cgit v1.2.3-freya