Separated some actor edit types into dedicated components.

components/edit/place.vue

@@ -0,0 +1,77 @@
+<template>
+	<div
+		class="place"
+	>
+		<div class="value-section">
+			<span class="value-label">Country</span>
+
+			<select
+				v-model="place.country"
+				class="select input"
+				placeholder="Country"
+				:disabled="!editing.has(item.key)"
+			>
+				<option
+					:key="`${item.key}-country-unknown`"
+					:value="null"
+				/>
+
+				<option
+					v-for="country in sortedCountries"
+					:key="`${item.key}-country-${country.alpha2}`"
+					:value="country.alpha2"
+				>{{ country.alias || country.name }}</option>
+			</select>
+		</div>
+
+		<div class="value-section">
+			<span class="value-label">Place</span>
+
+			<input
+				v-model="place.place"
+				class="string input"
+				:disabled="!editing.has(item.key)"
+			>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { reactive, watch, inject } from 'vue';
+
+const props = defineProps({
+	item: {
+		type: Object,
+		default: null,
+	},
+	edits: {
+		type: Object,
+		default: null,
+	},
+	editing: {
+		type: Set,
+		default: null,
+	},
+});
+
+const pageContext = inject('pageContext');
+const countries = pageContext.pageProps.countries;
+
+const emit = defineEmits(['place']);
+const place = reactive(props.edits[props.item.key]);
+
+watch(place, () => emit('place', place));
+
+const topCountries = [
+	'AU',
+	'BR',
+	'CZ',
+	'DE',
+	'JP',
+	'RU',
+	'GB',
+	'US',
+];
+
+const sortedCountries = countries.toSorted((countryA, countryB) => topCountries.indexOf(countryB.alpha2) - topCountries.indexOf(countryA.alpha2));
+</script>