Use prefix notation for component names

Start component names with the kind of element it creates on the page
(button, input, table, card, etc), then follow it with an hierarchy like
set of parts describing what part of the system it operates on.

This makes related components stick together in the directory listing of
components and auto-complete work better.

components/CardEvent.vue

@@ -0,0 +1,82 @@
+<template>
+	<section class="event">
+		<h3>{{ event.name }}</h3>
+		<p>{{ event.description ?? "No description provided" }}</p>
+		<p v-if="event.interested">
+			{{ event.interested }} interested
+		</p>
+		<p v-if="accountStore.valid">
+			<button
+				class="interested"
+				:class="{ active: accountStore.interestedEventIds.has(event.id) }"
+				@click="toggle('event', event.id, [...event.slots.keys()])"
+			>
+				{{ accountStore.interestedEventIds.has(event.id) ? "✔ interested" : "🔔 interested?" }}
+			</button>
+		</p>
+
+		<h4>Timeslots</h4>
+		<ul>
+			<li v-for="slot in event.slots.values()" :key="slot.id">
+				{{ formatTime(slot.start) }} - {{ formatTime(slot.end) }}
+				<button
+					v-if="accountStore.valid && event.slots.size > 1"
+					class="interested"
+					:disabled="accountStore.interestedEventIds.has(event.id)"
+					:class="{ active: accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) }"
+					@click="toggle('slot', slot.id)"
+				>
+					{{ accountStore.interestedEventIds.has(event.id) || accountStore.interestedEventSlotIds.has(slot.id) ? "✔ interested" : "🔔 interested?" }}
+				</button>
+				<template v-if="slot.interested">
+					({{ slot.interested }} interested)
+				</template>
+				<p v-if="slot.assigned">
+					Crew:
+					{{ [...slot.assigned].map(id => idToAccount.get(id)?.name).join(", ") }}
+				</p>
+			</li>
+		</ul>
+	</section>
+</template>
+
+<script lang="ts" setup>
+import { DateTime } from 'luxon';
+
+defineProps<{
+	event: ClientScheduleEvent
+}>()
+
+const accountStore = useAccountStore();
+const { data: accounts } = await useAccounts();
+const idToAccount = computed(() => new Map(accounts.value?.map(a => [a.id, a])));
+
+function formatTime(time: DateTime) {
+	return time.toFormat("yyyy-LL-dd HH:mm");
+}
+
+async function toggle(type: "event" | "slot", id: number, slotIds?: number[]) {
+	await accountStore.toggleInterestedId(type, id, slotIds);
+}
+</script>
+
+<style scoped>
+.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;
+}
+
+button {
+	padding-inline: 0.2em;
+}
+button.active {
+	color: color-mix(in oklab, var(--foreground), green 50%);
+}
+</style>