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

@@ -0,0 +1,193 @@
+<template>
+	<div>
+		<table>
+			<thead>
+				<tr>
+					<th>id</th>
+					<th>name</th>
+					<th>role</th>
+					<th>s</th>
+					<th>description</th>
+					<th v-if="edit"></th>
+				</tr>
+			</thead>
+			<tbody>
+				<template v-if="edit">
+					<tr
+						v-for="shift in schedule.shifts.values()"
+						:key="shift.id"
+						:class="{ removed: shift.deleted }"
+					>
+						<td>{{ shift.id }}</td>
+						<td>
+							<input
+								type="text"
+								:value="shift.name"
+								@input="editShift(shift, { name: ($event as any).target.value })"
+							>
+						</td>
+						<td>
+							<select
+								:value="shift.role.id"
+								@change="editShift(shift, { role: schedule.roles.get(parseInt(($event as any).target.value, 10)) })"
+							>
+								<option
+									v-for="role in schedule.roles.values()"
+									:key="role.id"
+									:value="role.id"
+									:disabled="shift.deleted"
+									:selected="shift.role.id === role.id"
+								>{{ role.name }}</option>
+							</select>
+						</td>
+						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
+						<td>
+							<input
+								type="text"
+								:value="shift.description"
+								@input="editShift(shift, { description: ($event as any).target.value })"
+							>
+						</td>
+						<td>
+							<button
+								type="button"
+								:disabled="shift.deleted"
+								@click="editShift(shift, { deleted: true })"
+							>Delete</button>
+							<button
+								v-if="schedule.isModifiedShift(shift.id)"
+								type="button"
+								@click="revertShift(shift.id)"
+							>Revert</button>
+						</td>
+					</tr>
+					<tr>
+						<td>{{ schedule.nextClientId }}</td>
+						<td>
+							<input
+								type="text"
+								v-model="newShiftName"
+							>
+						</td>
+						<td>
+							<select v-model="newShiftRoleId">
+								<option
+									v-for="role in schedule.roles.values()"
+									:key="role.id"
+									:value="role.id"
+									:disabled="role.deleted"
+									:selected="role.id === newShiftRoleId"
+								>{{ role.name }}</option>
+							</select>
+						</td>
+						<td></td>
+						<td>
+							<input
+								type="text"
+								v-model="newShiftDescription"
+							>
+						</td>
+						<td>
+							<button
+								v-if="shiftExists(newShiftName)"
+								disabled
+							>Shift already exists</button>
+							<button
+								v-else
+								type="button"
+								@click="newShift"
+							>Add Shift</button>
+						</td>
+					</tr>
+				</template>
+				<template v-else>
+					<tr
+						v-for="shift in schedule.shifts.values()"
+						:key="shift.id"
+					>
+						<td>{{ shift.id }}</td>
+						<td>{{ shift.name }}</td>
+						<td>{{ shift.role.id }}</td>
+						<td>{{ shift.slots.size ? shift.slots.size : "" }}</td>
+						<td>{{ shift.description }}</td>
+					</tr>
+				</template>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { DateTime } from 'luxon';
+import type { ApiSchedule, ApiScheduleShift } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import { toId } from '~/shared/utils/functions';
+
+const props = defineProps<{
+	edit?: boolean,
+	roleId?: number,
+}>();
+
+const schedule = await useSchedule();
+
+const newShiftName = ref("");
+const newShiftRoleId = ref(props.roleId);
+watch(() => props.roleId, () => {
+	newShiftRoleId.value = props.roleId;
+});
+const newShiftDescription = ref("");
+function editShift(
+	shift: ClientScheduleShift,
+	edits: Parameters<ClientSchedule["editShift"]>[1],
+) {
+	schedule.value.editShift(shift, edits);
+}
+function revertShift(id: Id) {
+	schedule.value.restoreShift(id);
+}
+function shiftExists(name: string) {
+	name = toId(name);
+	return (
+		[...schedule.value.shifts.values()].some(s => !s.deleted && toId(s.name) === name)
+	);
+}
+function newShift() {
+	if (shiftExists(newShiftName.value)) {
+		alert(`Shift ${newShiftName.value} already exists`);
+		return;
+	}
+	const role = schedule.value.roles.get(newShiftRoleId.value!);
+	if (!role) {
+		alert(`Invalid role`);
+		return;
+	}
+	const shift = new ClientScheduleShift(
+		schedule.value.nextClientId--,
+		DateTime.now(),
+		false,
+		role,
+		newShiftName.value,
+		newShiftDescription.value,
+		new Map(),
+	);
+	schedule.value.setShift(shift);
+	newShiftName.value = "";
+	newShiftDescription.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>