Added experimental edit page and revision history.

components/edit/actors.vue

@@ -0,0 +1,153 @@
+<template>
+	<ul
+		class="actors nolist"
+		:class="{ disabled: !editing.has(item.key) }"
+	>
+		<li
+			v-for="actor in [...item.value, ...newActors]"
+			:key="`actor-${actor.id}`"
+			class="actor"
+			:class="{ deleted: edits.actors && !edits.actors.some((actorId) => actorId === actor.id) }"
+		>
+			<span class="actor-name">{{ actor.name }}</span>
+
+			<Icon
+				v-if="edits.actors && !edits.actors.some((actorId) => actorId === actor.id)"
+				icon="checkmark"
+				class="add"
+				@click="emit('actors', edits.actors.concat(actor.id))"
+			/>
+
+			<Icon
+				v-else
+				icon="cross2"
+				class="remove"
+				@click="emit('actors', edits.actors.filter((actorId) => actorId !== actor.id))"
+			/>
+		</li>
+
+		<li class="new">
+			<ActorSearch
+				:disabled="!editing.has(item.key)"
+				@actor="addActor"
+			>
+				<Icon
+					icon="plus3"
+					class="add"
+				/>
+			</ActorSearch>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+import ActorSearch from '#/components/actors/search.vue';
+
+const newActors = ref([]);
+
+const props = defineProps({
+	item: {
+		type: Object,
+		default: null,
+	},
+	scene: {
+		type: Object,
+		default: null,
+	},
+	edits: {
+		type: Object,
+		default: () => {},
+	},
+	editing: {
+		type: Set,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['actors']);
+
+function addActor(actor) {
+	newActors.value = newActors.value.concat(actor);
+
+	emit('actors', props.edits.actors.concat(actor.id));
+}
+
+watch(() => props.scene, () => { newActors.value = []; });
+</script>
+
+<style scoped>
+.actors {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .25rem;
+
+	&.disabled {
+		.actor {
+			color: var(--shadow);
+
+			.remove,
+			.add {
+				background: var(--shadow-weak-40);
+			}
+		}
+
+		.new .icon {
+			background: var(--shadow-weak-40);
+		}
+	}
+
+	.new {
+		display: flex;
+		align-items: center;
+		margin-left: .25rem;
+
+		.icon {
+			height: 100%;
+			padding: 0 .5rem;
+			fill: var(--text-light);
+		}
+	}
+}
+
+.actor {
+	display: flex;
+	align-items: stretch;
+	background: var(--glass-weak-30);
+	border-radius: .25rem;
+
+	&.deleted  {
+		color: var(--glass);
+		text-decoration: line-through;
+	}
+}
+
+.actor,
+.new {
+	.remove,
+	.add {
+		height: auto;
+		padding: .25rem .3rem;
+		fill: var(--highlight-strong-10);
+		border-radius: .25rem;
+
+		&:hover {
+			fill: var(--text-light);
+			cursor: pointer;
+		}
+	}
+
+	.remove {
+		background: var(--error);
+	}
+
+	.add {
+		background: var(--success);
+	}
+}
+
+.actor-name {
+	padding: .25rem .5rem;
+}
+</style>