Add custom select component

The selection of locations, events, roles, shifts and users using the
native <select> element makes for awkward and difficult interactions.
Add an alternative select control that fixes the issues with the poor
handling and navigation of the control when having many options.

The custom select component can handle the selection of either one or
many entity from a ClientMap of entiteis with a name. Typing into the
text box searches the entities by name, arrow keys can navigate and
enter confirms the chosen entity by toggling it's presence in the
selection.

components/SelectSingleEntity.vue

@@ -0,0 +1,55 @@
+<template>
+	<div
+		class="select"
+		@focusin="dropdownComponent?.focusin()"
+		@focusout="dropdownComponent?.focusout()"
+		@keyup.esc="dropdownComponent?.esc()"
+	>
+		<div
+			v-if="selectedId !== undefined"
+			:title="entities.get(selectedId)?.name ?? String(selectedId)"
+			class="item"
+		>
+			{{ entities.get(selectedId)?.name ?? selectedId }}
+		</div>
+		<SelectDropdown
+			ref="dropdown"
+			:modelValue="new Set(selectedId !== undefined ? [selectedId] : [])"
+			@update:modelValue="selectedId = $event.size ? [...$event][0] : undefined"
+			:multi="false"
+			:entities
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ApiEntity } from '~/shared/types/api';
+import type { Id } from '~/shared/types/common';
+import type { ClientEntity } from '~/utils/client-entity';
+
+const selectedId = defineModel<Id | undefined>();
+defineProps<{
+	entities: ClientMap<ClientEntity<ApiEntity> & { name?: string }>,
+}>();
+
+const dropdownComponent = useTemplateRef("dropdown");
+</script>
+
+<style scoped>
+.select {
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+}
+.item {
+	background-color: color-mix(in srgb, Canvas, CanvasText 10%);
+	border-radius: 0.3rem;
+	padding-inline: 0.2rem;
+	padding-block: 0.1rem;
+	margin-inline-end: 0.2rem;
+	white-space: pre-wrap;
+}
+.item button {
+	line-height: 0.7;
+}
+</style>