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;
 	}
 }