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

@@ -0,0 +1,159 @@
+<template>
+	<div>
+		<table>
+			<thead>
+				<tr>
+					<th>id</th>
+					<th>name</th>
+					<th>description</th>
+					<th v-if="edit"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-if="edit">
+					<tr
+						v-for="role in schedule.roles.values()"
+						:key="role.id"
+						:class="{ removed: role.deleted }"
+					>
+						<td>{{ role.id }}</td>
+						<td>
+							<input
+								type="text"
+								:value="role.name"
+								@input="editRole(role, { name: ($event as any).target.value })"
+							>
+						</td>
+						<td>
+							<input
+								type="text"
+								:value="role.description"
+								@input="editRole(role, { description: ($event as any).target.value })"
+							>
+						</td>
+						<td>
+							<button
+								type="button"
+								:disabled="role.deleted"
+								@click="editRole(role, { deleted: true })"
+							>Delete</button>
+							<button
+								v-if="schedule.isModifiedRole(role.id)"
+								type="button"
+								@click="revertRole(role.id)"
+							>Revert</button>
+						</td>
+					</tr>
+					<tr>
+						<td>{{ schedule.nextClientId }}</td>
+						<td>
+							<input
+								type="text"
+								v-model="newRoleName"
+							>
+						</td>
+						<td>
+							<input
+								type="text"
+								v-model="newRoleDescription"
+							>
+						</td>
+						<td>
+							<button
+								v-if="roleExists(newRoleName)"
+								disabled
+							>Role already exists</button>
+							<button
+								v-else
+								type="button"
+								@click="newRole"
+							>Add Role</button>
+						</td>
+					</tr>
+				</template>
+				<template v-else>
+					<tr
+						v-for="role in schedule.roles.values()"
+						:key="role.id"
+					>
+						<td>{{ role.id }}</td>
+						<td>{{ role.name }}</td>
+						<td>{{ role.description }}</td>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { DateTime } from '~/shared/utils/luxon';
+import { toId } from '~/shared/utils/functions';
+import type { Id } from '~/shared/types/common';
+
+defineProps<{
+	edit?: boolean,
+}>();
+
+const schedule = await useSchedule();
+
+const newRoleName = ref("");
+const newRoleDescription = ref("");
+
+function editRole(
+	role: ClientScheduleRole,
+	edits: { deleted?: boolean, name?: string, description?: string }
+) {
+	const copy = role.clone();
+	if (edits.deleted !== undefined) copy.deleted = edits.deleted;
+	if (edits.name !== undefined) copy.name = edits.name;
+	if (edits.description !== undefined) copy.description = edits.description;
+	try {
+		schedule.value.setRole(copy);
+	} catch (err: any) {
+		alert(err.message);
+	}
+}
+function revertRole(id: Id) {
+	schedule.value.restoreRole(id);
+}
+function roleExists(name: string) {
+	name = toId(name);
+	return (
+		[...schedule.value.roles.values()].some(r => !r.deleted && toId(r.name) === name)
+	);
+}
+function newRole() {
+	if (roleExists(newRoleName.value)) {
+		alert(`Role ${newRoleName.value} already exists`);
+		return;
+	}
+	const role = new ClientScheduleRole(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		newRoleName.value,
+		newRoleDescription.value,
+	);
+	schedule.value.setRole(role);
+	newRoleName.value = "";
+	newRoleDescription.value = "";
+}
+
+</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>