Separate event dipslay from event slot display

Pull out the list of events into its own page sorted by name and show
the event slots in chronological order on the schedule page, with past
slots hidden by default.  This makes the content underneath the schedule
the most immediately useful to have in the moment, while the full list
is kept separately and in a predictable order.

pages/events.vue

@@ -0,0 +1,89 @@
+<!--
+	SPDX-FileCopyrightText: © 2025 Hornwitser <code@hornwitser.no>
+	SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<main>
+		<h1>Events</h1>
+		<label v-if="accountStore.valid">
+			Filter:
+			<select
+				v-model="filter"
+			>
+				<option
+					:value="undefined"
+					:selected="filter === undefined"
+				>&lt;All events&gt;</option>
+				<option
+					value="my-schedule"
+					:selected='filter === "my-schedule"'
+				>My Schedule</option>
+				<option
+					v-if="accountStore.isCrew"
+					value="assigned"
+					:selected='filter === "assigned"'
+				>Assigned to Me</option>
+			</select>
+		</label>
+		<CardEvent
+			v-for="event in events"
+			:key="`my-${event.id}`"
+			:id="String(event.name)"
+			:event
+		></CardEvent>
+	</main>
+</template>
+
+<script setup lang="ts">
+useHead({
+	title: "Schedule",
+});
+
+const stringSort = useStringSort();
+const events = computed(() => {
+	return [...schedule.value.events.values()].filter(e => !e.deleted && [...e.slots.values()].some(eventSlotFilter.value)).sort((a, b) => stringSort(a.name, b.name));
+});
+
+const accountStore = useAccountStore();
+const usersStore = useUsersStore();
+await usersStore.fetch();
+const schedule = await useSchedule();
+
+const route = useRoute();
+const filter = computed({
+	get: () => queryToString(route.query.filter),
+	set: (value: string | undefined) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			filter: value,
+		},
+	}),
+});
+
+const eventSlotFilter = computed(() => {
+	if (filter.value === undefined || !accountStore.valid || schedule.value.deleted) {
+		return () => true;
+	}
+	const aid = accountStore.id;
+	if (filter.value === "my-schedule") {
+		const slotIds = new Set(accountStore.interestedEventSlotIds);
+		for (const event of schedule.value.events.values()) {
+			if (!event.deleted && accountStore.interestedEventIds.has(event.id)) {
+				for (const slot of event.slots.values()) {
+					slotIds.add(slot.id);
+				}
+			}
+		}
+		return (slot: ClientScheduleEventSlot) => slotIds.has(slot.id) || slot.assigned.has(aid!) || false;
+	}
+	if (filter.value === "assigned") {
+		return (slot: ClientScheduleEventSlot) => slot.assigned.has(aid!) || false;
+	}
+	if (filter.value.startsWith("crew-")) {
+		const cid = parseInt(filter.value.slice(5));
+		return (slot: ClientScheduleEventSlot) => slot.assigned.has(cid) || false;
+	}
+	return () => false;
+});
+</script>

pages/schedule.vue

@@ -4,7 +4,7 @@
 -->
 <template>
 	<main>
-		<h1>Schedule & Events</h1>
+		<h1>Schedule</h1>
 		<p>
 			Study carefully, we only hold these events once a year.
 		</p>
@@ -46,10 +46,15 @@
 		</label>
 		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
 		<h2>Events</h2>
-		<CardEvent
-			v-for="event in [...schedule.events.values()].filter(e => !e.deleted && [...e.slots.values()].some(eventSlotFilter))"
-			:key="event.id"
-			:event
+		<label>
+			Hide past events
+			<input type="checkbox" v-model="hidePastEvents">
+		</label>
+		<CardEventSlot
+			v-for="eventSlot in eventSlots"
+			:key="eventSlot.slot.id"
+			:event="eventSlot.event"
+			:slot="eventSlot.slot"
 		/>
 		<template v-if="accountStore.isCrew">
 			<h2>Shifts</h2>
@@ -91,6 +96,17 @@ const filter = computed({
 	}),
 });
 
+const hidePastEvents = computed({
+	get: () => !queryToBoolean(route.query.showPast),
+	set: (value: boolean) => navigateTo({
+		path: route.path,
+		query: {
+			...route.query,
+			showPast: value ? undefined : null,
+		},
+	}),
+});
+
 const eventSlotFilter = computed(() => {
 	if (filter.value === undefined || !accountStore.valid || schedule.value.deleted) {
 		return () => true;
@@ -130,4 +146,15 @@ const shiftSlotFilter = computed(() => {
 	}
 	return () => false;
 });
+
+const eventSlots = computed(() => {
+	let slots = [...schedule.value.eventSlots.values()].filter(slot => !slot.deleted && eventSlotFilter.value(slot));
+	if (hidePastEvents.value) {
+		const nowMs = Date.now();
+		slots = slots.filter(slot => slot.end.toMillis() >= nowMs);
+	}
+	slots.sort((a, b) => a.start.toMillis() - b.start.toMillis() || a.end.toMillis() - b.end.toMillis());
+	return slots.map(slot => ({ slot, event: schedule.value.events.get(slot.eventId!) }));
+});
+
 </script>