Added actor merge dialog UI.

components/actors/merge.vue

@@ -0,0 +1,166 @@
+<template>
+	<Dialog
+		:title="`Merge '${actor.name}'`"
+		@close="emit('close')"
+	>
+		<div class="dialog-body">
+			<div
+				v-if="targetActor"
+				class="target"
+			>
+				<span class="target-name">
+					<span class="target-id">#{{ targetActor.id }}</span>
+					{{ targetActor.name }}
+				</span>
+
+				<Icon
+					icon="cross2"
+					@click="targetActor = null"
+				/>
+			</div>
+
+			<template v-else>
+				<VDropdown
+					:triggers="[]"
+					:shown="actorResults.length > 0"
+					:auto-hide="false"
+				>
+					<input
+						ref="actorInput"
+						v-model="actorQuery"
+						class="input"
+						@input="searchActors"
+					>
+
+					<template #popper>
+						<ul
+							class="results nolist"
+						>
+							<li
+								v-for="actorResult in actorResults"
+								:key="`actor-result-${actorResult.id}`"
+								v-close-popper
+								class="result-item"
+								@click="selectActor(actorResult)"
+							>
+								<div class="result-label">
+									<span class="result-id">#{{ actorResult.id }}</span> {{ actorResult.name }}
+								</div>
+							</li>
+						</ul>
+					</template>
+				</VDropdown>
+			</template>
+
+			<div class="dialog-actions">
+				<button
+					type="submit"
+					class="button button-primary"
+					:disabled="!targetActor"
+					@click="merge"
+				>Merge</button>
+			</div>
+		</div>
+	</Dialog>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+import Dialog from '#/components/dialog/dialog.vue';
+
+import { get, post } from '#/src/api.js';
+
+const props = defineProps({
+	actor: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['close']);
+
+const targetActor = ref(null);
+const actorInput = ref(null);
+const actorQuery = ref('');
+const actorResults = ref([]);
+
+async function searchActors() {
+	const res = await get('/actors', {
+		q: `${actorQuery.value}*`, // return partial matches
+		limit: 10,
+	});
+
+	actorResults.value = res.actors;
+}
+
+async function merge() {
+	console.log('MERGE', props.actor.id, targetActor.value.id);
+}
+
+function selectActor(actor) {
+	targetActor.value = actor;
+	actorQuery.value = '';
+	actorResults.value = [];
+}
+
+onMounted(() => {
+	actorInput.value.focus();
+});
+</script>
+
+<style scoped>
+.dialog-body {
+	width: 15rem;
+	max-width: 100%;
+	padding: 1rem;
+}
+
+.dialog-actions {
+	margin-top: 1rem;
+
+	.button {
+		width: 100%;
+	}
+}
+
+.target {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.icon {
+		padding: .25rem .75rem;
+		fill: var(--glass);
+
+		&:hover {
+			fill: var(--error);
+			cursor: pointer;
+		}
+	}
+}
+
+.target-id {
+	font-family: monospace;
+	font-size: 1rem;
+}
+
+.results {
+	padding: .25rem 0;
+}
+
+.result-item {
+	display: flex;
+	padding: .25rem .5rem;
+
+	&:hover {
+		cursor: pointer;
+		color: var(--primary);
+	}
+}
+
+.result-id {
+	font-family: monospace;
+	font-size: 1rem;
+}
+</style>