Create a per-user admin page to inspect users

Add page to allow admins to inspect all of the details stored on the
server of a user account.  For now this is just the UserDetails, but
in the future this is planned to be expanded to also show sessions
and logs.

pages/admin/users/[id].vue

@@ -0,0 +1,94 @@
+<template>
+	<main v-if="userDetails.deleted">
+		<h1>Deleted user {{ id }}</h1>
+	</main>
+	<main v-else>
+		<h1>User {{ user.name }}</h1>
+		<dl>
+			<dt>
+				<label for="user-type">
+					Type
+				</label>
+			</dt>
+			<dd>
+				<select
+					v-if='user.type !== "anonymous"'
+					v-model="user.type"
+				>
+					<option value="regular">Regular</option>
+					<option value="crew">Crew</option>
+					<option value="admin">Admin</option>
+				</select>
+				<template v-else>
+					{{ user.type }}
+				</template>
+			</dd>
+			<dt>Interested Events:</dt>
+			<dd>{{ userDetails.interestedEventIds }}</dd>
+			<dt>Interested Slots:</dt>
+			<dd>{{ userDetails.interestedEventSlotIds }}</dd>
+			<dt>Timezone:</dt>
+			<dd>{{ userDetails.timezone }}</dd>
+			<dt>Locale:</dt>
+			<dd>{{ userDetails.locale }}</dd>
+		</dl>
+		<button
+			:disabled="!user.isModified()"
+			type="button"
+			@click="usersStore.saveUser(user);"
+		>Save</button>
+		<button
+			:disabled="!user.isModified()"
+			type="button"
+			@click="user.discard()"
+		>Discard</button>
+	</main>
+</template>
+
+<script lang="ts" setup>
+import type { ApiTombstone, ApiUserDetails } from '~/shared/types/api';
+
+useHead({
+	title: "Admin",
+});
+
+useEventSource();
+const route = useRoute();
+const usersStore = useUsersStore();
+await usersStore.fetch();
+
+const id = computed(() => {
+	const id = queryToNumber(route.params.id);
+	if (id === undefined) {
+		throw createError({
+			statusCode: 400,
+			statusMessage: "Bad Request",
+			message: "User id required",
+		});
+	}
+	return id;
+});
+const user = computed(() => {
+	const user =  usersStore.users.get(id.value);
+	if (user === undefined) {
+		throw createError({
+			statusCode: 404,
+			statusMessage: "Not Found",
+			message: "User not found",
+		});
+	}
+	return user;
+});
+
+const { pending, data, error } = await useFetch(() => `/api/users/${id.value}/details`);
+const userDetails = data as Ref<ApiUserDetails | ApiTombstone>;
+</script>
+
+<style>
+dl {
+	display: grid;
+	grid-template-columns: auto 1fr;
+	column-gap: 0.5rem;
+}
+
+</style>