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/TableScheduleEvents.vue

@@ -0,0 +1,185 @@
+<template>
+	<div>
+		<table>
+			<thead>
+				<tr>
+					<th>id</th>
+					<th>name</th>
+					<th>description</th>
+					<th>p</th>
+					<th>s</th>
+					<th v-if="edit"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-if="edit">
+					<tr
+						v-for="event in schedule.events.values()"
+						:key="event.id"
+						:class="{ removed: event.deleted }"
+					>
+						<td>{{ event.id }}</td>
+						<td>
+							<input
+								type="text"
+								:value="event.name"
+								:disabled="!canEdit(event)"
+								@input="editEvent(event, { name: ($event as any).target.value })"
+							>
+						</td>
+						<td>
+							<input
+								type="text"
+								:disabled="!canEdit(event)"
+								:value="event.description"
+								@input="editEvent(event, { description: ($event as any).target.value })"
+							>
+						</td>
+						<td>
+							<input
+								type="checkbox"
+								:disabled="!accountStore.canEditPublic"
+								:value="!event.crew"
+								:checked="!event.crew"
+								@change="editEvent(event, { crew: !($event as any).target.value })"
+							>
+						</td>
+						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
+						<td>
+							<button
+								type="button"
+								:disabled="!canEdit(event) || event.deleted"
+								@click="editEvent(event, { deleted: true })"
+							>Delete</button>
+							<button
+								v-if="schedule.isModifiedEvent(event.id)"
+								type="button"
+								@click="revertEvent(event.id)"
+							>Revert</button>
+						</td>
+					</tr>
+					<tr>
+						<td>{{ schedule.nextClientId }}</td>
+						<td>
+							<input
+								type="text"
+								v-model="newEventName"
+							>
+						</td>
+						<td>
+							<input
+								type="text"
+								v-model="newEventDescription"
+							>
+						</td>
+						<td>
+							<input
+								type="checkbox"
+								:disabled="!accountStore.canEditPublic"
+								v-model="newEventPublic"
+							>
+						</td>
+						<td></td>
+						<td>
+							<button
+								v-if="eventExists(newEventName)"
+								disabled
+							>Event already exists</button>
+							<button
+								v-else
+								type="button"
+								@click="newEvent"
+							>Add Event</button>
+						</td>
+					</tr>
+				</template>
+				<template v-else>
+					<tr
+						v-for="event in schedule.events.values()"
+						:key="event.id"
+					>
+						<td>{{ event.id }}</td>
+						<td>{{ event.name }}</td>
+						<td>{{ event.description }}</td>
+						<td>{{ event.crew ? "" : "Yes"}}</td>
+						<td>{{ event.slots.size ? event.slots.size : "" }}</td>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { Id } from '~/shared/types/common';
+import { DateTime } from '~/shared/utils/luxon';
+import { toId } from '~/shared/utils/functions';
+
+defineProps<{
+	edit?: boolean,
+}>();
+
+const schedule = await useSchedule();
+const accountStore = useAccountStore();
+
+function canEdit(event: ClientScheduleEvent) {
+	return event.crew || accountStore.canEditPublic;
+}
+
+const newEventName = ref("");
+const newEventDescription = ref("");
+const newEventPublic = ref(false);
+function editEvent(
+	event: ClientScheduleEvent,
+	edits: Parameters<ClientSchedule["editEvent"]>[1],
+) {
+	schedule.value.editEvent(event, edits);
+}
+function revertEvent(id: Id) {
+	schedule.value.restoreEvent(id);
+}
+function eventExists(name: string) {
+	name = toId(name);
+	return (
+		[...schedule.value.events.values()].some(e => !e.deleted && toId(e.name) === name)
+	);
+}
+function newEvent() {
+	if (eventExists(newEventName.value)) {
+		alert(`Event ${newEventName.value} already exists`);
+		return;
+	}
+	const event = new ClientScheduleEvent(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newEventName.value,
+		!newEventPublic.value,
+		"",
+		false,
+		newEventDescription.value,
+		0,
+		new Map(),
+	);
+	schedule.value.setEvent(event);
+	newEventName.value = "";
+	newEventDescription.value = "";
+	newEventPublic.value = false;
+}
+</script>
+
+<style scoped>
+table {
+	border-spacing: 0;
+}
+table th {
+	text-align: left;
+	border-bottom: 1px solid var(--foreground);
+}
+table :is(th, td) + :is(th, td) {
+	padding-inline-start: 0.4em;
+}
+.removed :is(td, input) {
+	text-decoration: line-through;
+}
+</style>