Implement EventStream for live schedule updates

ui/events.module.css

@@ -0,0 +1,11 @@
+.event {
+	background: color-mix(in oklab, var(--background), grey 20%);
+	padding: 0.5rem;
+	border-radius: 0.5rem;
+}
+.event h3 {
+	margin: 0;
+}
+.event + .event {
+	margin-block-start: 0.5rem;
+}

ui/events.tsx

@@ -0,0 +1,24 @@
+"use client";
+import styles from "./events.module.css"
+import { useSchedule } from "@/app/schedule/context";
+import { ScheduleEvent } from "@/app/schedule/types";
+
+function EventInfo(props: { event: ScheduleEvent }) {
+	return <section className={styles.event}>
+		<h3>{props.event.name}</h3>
+		<p>{props.event.description ?? "No description provided"}</p>
+		<h4>Timeslots</h4>
+		<ul>
+			{props.event.slots.map(slot => <li key={slot.id}>
+				{slot.start} - {slot.end}
+			</li>)}
+		</ul>
+	</section>
+}
+
+export function Events() {
+	const schedule = useSchedule();
+	return <>
+		{schedule!.events.map(event => <EventInfo event={event} key={event.id}/>)}
+	</>;
+}

ui/locations.tsx

@@ -0,0 +1,12 @@
+"use client";
+import { useSchedule } from "@/app/schedule/context";
+
+export function Locations() {
+	const schedule = useSchedule();
+	return <ul>
+		{schedule!.locations.map(location => <li key={location.id}>
+			<h3>{location.name}</h3>
+			{location.description ?? "No description provided"}
+		</li>)}
+	</ul>;
+}

ui/timetable.tsx

@@ -1,5 +1,7 @@
-import { Schedule, ScheduleEvent, ScheduleLocation, TimeSlot } from "@/app/schedule/types";
+"use client";
+import { ScheduleEvent, ScheduleLocation, TimeSlot } from "@/app/schedule/types";
 import styles from "./timetable.module.css";
+import { useSchedule } from "@/app/schedule/context";
 
 const oneDayMs = 24 * 60 * 60 * 1000;
 const oneHourMs = 60 * 60 * 1000;
@@ -318,8 +320,8 @@ function tableElementsFromStretches(
 	};
 }
 
-export default function Timetable(props: { schedule: Schedule }) {
-	const { locations, events } = props.schedule;
+export default function Timetable() {
+	const { locations, events } = useSchedule()!;
 	const junctions = junctionsFromEdges(edgesFromEvents(events));
 	const stretches = [...stretchesFromSpans(spansFromJunctions(junctions, locations), oneHourMs * 5)];
 	const {