Added actor merge dialog UI.

components/actors/bio.vue

@@ -80,10 +80,17 @@
 					<span
 						v-if="actor.origin.city"
 						class="city"
-					>{{ actor.origin.city }}</span><span
+					>{{ actor.origin.city }}</span>
+
+					<span
 						v-if="actor.origin.state && (!actor.origin.city || (actor.origin.country && actor.origin.country.alpha2 === 'US'))"
 						class="state"
-					>{{ actor.origin.city ? `, ${actor.origin.state}` : actor.origin.state }}</span>
+					>
+						{{ actor.origin.city
+							? [',', actor.origin.state].join(' ')
+							: actor.origin.state
+						}}
+					</span>
 
 					<span
 						v-if="actor.origin.country"
@@ -365,10 +372,22 @@
 						target="_blank"
 						class="link"
 					>Revisions</a>
+
+					<span
+						v-if="user && user.role !== 'user'"
+						class="link"
+						@click="showMergeDialog = true"
+					>Merge</span>
 				</div>
 			</li>
 		</ul>
 
+		<Merge
+			v-if="showMergeDialog"
+			:actor="actor"
+			@close="showMergeDialog = false"
+		/>
+
 		<div class="descriptions-container">
 			<div
 				v-if="descriptions.length > 0"
@@ -429,6 +448,8 @@ import formatTemplate from 'template-format';
 import getPath from '#/src/get-path.js';
 import { formatDate } from '#/utils/format.js';
 
+import Merge from '#/components/actors/merge.vue';
+
 const expanded = ref(false);
 
 const pageContext = inject('pageContext');
@@ -506,6 +527,8 @@ const socials = props.actor.socials.slice(0, 10).map((social) => ({
 		? new URL(social.url).hostname
 		: social.handle,
 }));
+
+const showMergeDialog = ref(false);
 </script>
 
 <style>
@@ -785,6 +808,7 @@ const socials = props.actor.socials.slice(0, 10).map((social) => ({
 	.link {
 		color: inherit;
 		flex-shrink: 0;
+		cursor: pointer;
 	}
 }
 

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>