From 8bf9e22b39dfdfdbd71eb3e0cc9e7bb8fc51a0e4 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Tue, 10 Sep 2024 02:47:03 +0200
Subject: [PATCH] Added experimental edit page and revision history.

---
 assets/css/states.css             |   4 +
 components/actors/search.vue      | 115 +++++++++
 components/edit/actors.vue        | 153 ++++++++++++
 components/edit/tags.vue          | 153 ++++++++++++
 components/tags/search.vue        |  92 +++++++
 config/default.cjs                |   3 +
 pages/scene/+Page.vue             |  10 +
 pages/scene/+onBeforeRender.js    |  30 ++-
 pages/scene/edit/+Page.vue        | 395 ++++++++++++++++++++++++++++++
 pages/scene/edit/+route.js        |   1 +
 src/api.js                        |   1 +
 src/cache.js                      |   6 +-
 src/media.js                      |   1 +
 src/scenes.js                     | 181 ++++++++++++++
 src/tags.js                       |   6 +-
 src/web/main.js                   |   1 +
 src/web/scenes.js                 |  26 +-
 src/web/server.js                 |   9 +-
 static                            |   2 +-
 utils/process-summary-template.js |   2 +-
 20 files changed, 1177 insertions(+), 14 deletions(-)
 create mode 100644 components/actors/search.vue
 create mode 100644 components/edit/actors.vue
 create mode 100644 components/edit/tags.vue
 create mode 100644 components/tags/search.vue
 create mode 100644 pages/scene/edit/+Page.vue
 create mode 100644 pages/scene/edit/+route.js

diff --git a/assets/css/states.css b/assets/css/states.css
index 5928c02..cba281a 100755
--- a/assets/css/states.css
+++ b/assets/css/states.css
@@ -57,3 +57,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
 }
+
+.noshrink {
+	flex-shrink: 0;
+}
diff --git a/components/actors/search.vue b/components/actors/search.vue
new file mode 100644
index 0000000..b2795d9
--- /dev/null
+++ b/components/actors/search.vue
@@ -0,0 +1,115 @@
+<template>
+	<VDropdown
+		:disabled="disabled"
+		class="trigger"
+		@show="focus"
+	>
+		<slot />
+
+		<template #popper>
+			<div>
+				<input
+					ref="queryInput"
+					v-model="query"
+					placeholder="Search actor"
+					class="input"
+					@input="search"
+				>
+
+				<ul class="actors nolist">
+					<li
+						v-for="actor in actors"
+						:key="`actor-${actor.slug}`"
+						v-close-popper
+						class="actor"
+						@click="emit('actor', actor)"
+					>{{ actor.name }} ({{ [actor.ageFromBirth, actor.origin?.country?.alpha2].join(', ') }})
+						<img
+							v-if="actor.avatar"
+							:src="getPath(actor.avatar, 'thumbnail')"
+							class="avatar"
+						>
+					</li>
+				</ul>
+			</div>
+		</template>
+	</VDropdown>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { get } from '#/src/api.js';
+import getPath from '#/src/get-path.js';
+
+const pageContext = inject('pageContext');
+
+const actorNames = {
+	dp: 'double penetration',
+};
+
+const defaultActors = pageContext.pageProps.actorIds
+	? Object.entries(pageContext.pageProps.actorIds).map(([slug, id]) => ({
+		id,
+		slug,
+		name: actorNames[slug] || slug,
+	}))
+	: [];
+
+const actors = ref(defaultActors);
+const query = ref(null);
+const queryInput = ref(null);
+
+defineProps({
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['actor']);
+
+async function search() {
+	const data = await get('/actors', { q: query.value });
+
+	actors.value = data.actors;
+}
+
+function focus() {
+	setTimeout(() => {
+		queryInput.value?.focus();
+	}, 100);
+}
+</script>
+
+<style scoped>
+.trigger {
+	height: 100%;
+	overflow: hidden;
+}
+
+.actor {
+	display: block;
+	padding: .25rem .5rem;
+
+	&:hover {
+		background: var(--glass-weak-50);
+		color: var(--primary);
+		cursor: pointer;
+
+		.avatar {
+			display: block;
+		}
+	}
+}
+
+.avatar {
+	position: fixed;
+	display: none;
+	left: 7rem;
+	width: 8rem;
+	border-radius: .25rem;
+	box-shadow: 0 0 3px var(--shadow-weak-10);
+	pointer-events: none;
+}
+</style>
diff --git a/components/edit/actors.vue b/components/edit/actors.vue
new file mode 100644
index 0000000..37c52ed
--- /dev/null
+++ b/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>
diff --git a/components/edit/tags.vue b/components/edit/tags.vue
new file mode 100644
index 0000000..43eb3eb
--- /dev/null
+++ b/components/edit/tags.vue
@@ -0,0 +1,153 @@
+<template>
+	<ul
+		class="tags nolist"
+		:class="{ disabled: !editing.has(item.key) }"
+	>
+		<li
+			v-for="tag in [...item.value, ...newTags]"
+			:key="`tag-${tag.id}`"
+			class="tag"
+			:class="{ deleted: edits.tags && !edits.tags.some((tagId) => tagId === tag.id) }"
+		>
+			<span class="tag-name">{{ tag.name }}</span>
+
+			<Icon
+				v-if="edits.tags && !edits.tags.some((tagId) => tagId === tag.id)"
+				icon="checkmark"
+				class="add"
+				@click="emit('tags', edits.tags.concat(tag.id))"
+			/>
+
+			<Icon
+				v-else
+				icon="cross2"
+				class="remove"
+				@click="emit('tags', edits.tags.filter((tagId) => tagId !== tag.id))"
+			/>
+		</li>
+
+		<li class="new">
+			<TagSearch
+				:disabled="!editing.has(item.key)"
+				@tag="addTag"
+			>
+				<Icon
+					icon="plus3"
+					class="add"
+				/>
+			</TagSearch>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+import TagSearch from '#/components/tags/search.vue';
+
+const newTags = 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(['tags']);
+
+function addTag(tag) {
+	newTags.value = newTags.value.concat(tag);
+
+	emit('tags', props.edits.tags.concat(tag.id));
+}
+
+watch(() => props.scene, () => { newTags.value = []; });
+</script>
+
+<style scoped>
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: .25rem;
+
+	&.disabled {
+		.tag {
+			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);
+		}
+	}
+}
+
+.tag {
+	display: flex;
+	align-items: stretch;
+	background: var(--glass-weak-30);
+	border-radius: .25rem;
+
+	&.deleted  {
+		color: var(--glass);
+		text-decoration: line-through;
+	}
+}
+
+.tag,
+.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);
+	}
+}
+
+.tag-name {
+	padding: .25rem .5rem;
+}
+</style>
diff --git a/components/tags/search.vue b/components/tags/search.vue
new file mode 100644
index 0000000..15cd6a5
--- /dev/null
+++ b/components/tags/search.vue
@@ -0,0 +1,92 @@
+<template>
+	<VDropdown
+		:disabled="disabled"
+		class="trigger"
+		@show="focus"
+	>
+		<slot />
+
+		<template #popper>
+			<div>
+				<input
+					ref="queryInput"
+					v-model="query"
+					placeholder="Search tag"
+					class="input"
+					@input="search"
+				>
+
+				<ul class="tags nolist">
+					<li
+						v-for="tag in tags"
+						:key="`tag-${tag.slug}`"
+						v-close-popper
+						class="tag"
+						@click="emit('tag', tag)"
+					>{{ tag.name }}</li>
+				</ul>
+			</div>
+		</template>
+	</VDropdown>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { get } from '#/src/api.js';
+
+const pageContext = inject('pageContext');
+
+const tagNames = {
+	dp: 'double penetration',
+};
+
+const defaultTags = pageContext.pageProps.tagIds
+	? Object.entries(pageContext.pageProps.tagIds).map(([slug, id]) => ({
+		id,
+		slug,
+		name: tagNames[slug] || slug,
+	}))
+	: [];
+
+const tags = ref(defaultTags);
+const query = ref(null);
+const queryInput = ref(null);
+
+defineProps({
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const emit = defineEmits(['tag']);
+
+async function search() {
+	tags.value = await get('/tags', { query: query.value });
+}
+
+function focus() {
+	setTimeout(() => {
+		queryInput.value?.focus();
+	}, 100);
+}
+</script>
+
+<style scoped>
+.trigger {
+	height: 100%;
+	overflow: hidden;
+}
+
+.tag {
+	display: block;
+	padding: .25rem .5rem;
+
+	&:hover {
+		background: var(--glass-weak-50);
+		color: var(--primary);
+		cursor: pointer;
+	}
+}
+</style>
diff --git a/config/default.cjs b/config/default.cjs
index 4045aa5..6e919fd 100755
--- a/config/default.cjs
+++ b/config/default.cjs
@@ -69,6 +69,9 @@ module.exports = {
 		keyLimit: 5, // max keys per user
 		keyCooldown: 1, // minutes between key generation
 	},
+	revisions: {
+		unapprovedLimit: 3,
+	},
 	psa: {
 		text: 'Welcome to traxxx!', // html enabled
 		type: 'notice', // notice, alert
diff --git a/pages/scene/+Page.vue b/pages/scene/+Page.vue
index 88e2def..b426735 100644
--- a/pages/scene/+Page.vue
+++ b/pages/scene/+Page.vue
@@ -196,6 +196,16 @@
 						{{ scene.shootId }}
 					</div>
 
+					<time
+						v-if="scene.productionDate"
+						:datetime="formatDate(scene.productionDate, 'yyyy-MM-dd')"
+						:title="formatDate(scene.productionDate, 'yyyy-MM-dd')"
+						class="detail"
+					>
+						<h3 class="heading">Shoot date</h3>
+						{{ formatDate(scene.productionDate, 'MMMM d, yyyy') }}
+					</time>
+
 					<div
 						v-if="scene.studio"
 						class="detail"
diff --git a/pages/scene/+onBeforeRender.js b/pages/scene/+onBeforeRender.js
index 3fa1479..b7d3df7 100644
--- a/pages/scene/+onBeforeRender.js
+++ b/pages/scene/+onBeforeRender.js
@@ -1,6 +1,7 @@
-import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
+import { render, redirect } from 'vike/abort'; /* eslint-disable-line import/extensions */
 import { fetchScenesById } from '#/src/scenes.js';
 import { getRandomCampaigns } from '#/src/campaigns.js';
+import { getIdsBySlug } from '#/src/cache.js';
 
 function getTitle(scene) {
 	if (scene.title) {
@@ -15,6 +16,10 @@ function getTitle(scene) {
 }
 
 export async function onBeforeRender(pageContext) {
+	if (pageContext._pageId === '/pages/scene/edit' && !pageContext.user) {
+		throw redirect(`/login?r=${encodeURIComponent(pageContext.urlOriginal)}`);
+	}
+
 	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], {
 		reqUser: pageContext.user,
 		includeAssets: true,
@@ -22,13 +27,21 @@ export async function onBeforeRender(pageContext) {
 		actorStashes: true,
 	});
 
-	const campaigns = await getRandomCampaigns([
-		{
-			minRatio: 1.5,
-			entityIds: [scene.channel.id, scene.network?.id].filter(Boolean),
-			allowRandomFallback: false,
-		},
-	], { tagFilter: pageContext.tagFilter });
+	const [campaigns, tagIds] = await Promise.all([
+		getRandomCampaigns([
+			{
+				minRatio: 1.5,
+				entityIds: [scene.channel.id, scene.network?.id].filter(Boolean),
+				allowRandomFallback: false,
+			},
+		], { tagFilter: pageContext.tagFilter }),
+		getIdsBySlug([
+			'anal',
+			'creampie',
+			'dp',
+			'facial',
+		], 'tags', true),
+	]);
 
 	if (!scene) {
 		throw render(404, `Cannot find scene '${pageContext.routeParams.sceneId}'.`);
@@ -39,6 +52,7 @@ export async function onBeforeRender(pageContext) {
 			title: getTitle(scene),
 			pageProps: {
 				scene,
+				tagIds,
 			},
 			campaigns: {
 				scene: campaigns[0],
diff --git a/pages/scene/edit/+Page.vue b/pages/scene/edit/+Page.vue
new file mode 100644
index 0000000..6baf09d
--- /dev/null
+++ b/pages/scene/edit/+Page.vue
@@ -0,0 +1,395 @@
+<template>
+	<div class="editor">
+		<form @submit.prevent>
+			<div class="editor-header">
+				<h2 class="heading ellipsis">Edit scene #{{ scene.id }}</h2>
+
+				<a
+					:href="`/scene/${scene.id}/${scene.slug}`"
+					target="_blank"
+					class="link noshrink"
+				>Go to scene</a>
+			</div>
+
+			<ul class="nolist">
+				<li
+					v-for="item in fields"
+					:key="`item-${item.key}`"
+					class="row"
+				>
+					<div class="item-header">
+						<div class="key">{{ item.label || item.key }}</div>
+
+						<div class="item-actions">
+							<Icon
+								v-if="!item.forced"
+								icon="pencil5"
+								:class="{ active: editing.has(item.key) }"
+								@click="toggleField(item)"
+							/>
+						</div>
+					</div>
+
+					<div
+						class="value"
+						:class="{ disabled: !editing.has(item.key) }"
+					>
+						<EditActors
+							v-if="item.type === 'actors'"
+							:scene="scene"
+							:item="item"
+							:edits="edits"
+							:editing="editing"
+							@actors="(actors) => { edits.actors = actors; }"
+						/>
+
+						<EditTags
+							v-if="item.type === 'tags'"
+							:scene="scene"
+							:item="item"
+							:edits="edits"
+							:editing="editing"
+							@tags="(tags) => { edits.tags = tags; }"
+						/>
+
+						<input
+							v-if="item.type === 'string'"
+							:value="edits[item.key] || item.value"
+							class="string input"
+							:disabled="!editing.has(item.key)"
+							@input="setValue(item, $event)"
+						>
+
+						<textarea
+							v-if="item.type === 'text'"
+							:value="edits[item.key] || item.value"
+							:placeholder="item.placeholder"
+							rows="3"
+							class="text input"
+							:disabled="!editing.has(item.key)"
+							@input="setValue(item, $event)"
+						/>
+
+						<input
+							v-if="item.type === 'date'"
+							type="datetime-local"
+							:value="edits[item.key] || item.value"
+							class="date input"
+							:disabled="!editing.has(item.key)"
+							@input="setValue(item, $event)"
+						>
+
+						<div
+							v-if="item.type === 'duration'"
+							class="duration"
+						>
+							<input
+								type="number"
+								class="input"
+								:value="item.value[0]"
+								min="0"
+								max="100"
+								:disabled="!editing.has(item.key)"
+								@input="setDuration('h', $event)"
+							>H
+
+							<input
+								type="number"
+								class="input"
+								:value="item.value[1]"
+								min="0"
+								max="59"
+								:disabled="!editing.has(item.key)"
+								@input="setDuration('m', $event)"
+							>M
+
+							<input
+								type="number"
+								class="input"
+								:value="item.value[2]"
+								min="0"
+								max="59"
+								:disabled="!editing.has(item.key)"
+								@input="setDuration('s', $event)"
+							>S
+						</div>
+					</div>
+				</li>
+			</ul>
+
+			<div class="editor-footer">
+				<div class="comment">
+					<textarea
+						v-model="comment"
+						rows="3"
+						placeholder="Please provide verifiable information supporting your edits."
+						class="text input"
+					/>
+				</div>
+
+				<div class="editor-actions">
+					<!-- we don't want the return key to submit the form -->
+					<button
+						class="button button-primary"
+						type="button"
+						:disabled="editing.size === 0"
+						@click="submit"
+					>Submit</button>
+				</div>
+			</div>
+		</form>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { format } from 'date-fns';
+
+import EditActors from '#/components/edit/actors.vue';
+import EditTags from '#/components/edit/tags.vue';
+
+import { get, patch } from '#/src/api.js';
+
+const pageContext = inject('pageContext');
+
+const user = pageContext.user;
+const scene = ref(pageContext.pageProps.scene);
+
+// console.log(scene);
+
+const fields = computed(() => [
+	{
+		key: 'actors',
+		type: 'actors',
+		value: scene.value.actors,
+	},
+	{
+		key: 'tags',
+		type: 'tags',
+		value: scene.value.tags,
+	},
+	{
+		key: 'title',
+		type: 'string',
+		value: scene.value.title,
+	},
+	{
+		key: 'description',
+		type: 'text',
+		value: scene.value.description,
+	},
+	{
+		key: 'date',
+		type: 'date',
+		value: scene.value.date
+			? format(scene.value.date, 'yyyy-MM-dd hh:mm')
+			: null,
+	},
+	{
+		key: 'duration',
+		type: 'duration',
+		value: [Math.floor(scene.value.duration / 3600), Math.floor((scene.value.duration % 3600) / 60), scene.value.duration % 60],
+	},
+	{
+		key: 'productionDate',
+		label: 'production date',
+		type: 'date',
+		value: scene.value.productionDate
+			? format(scene.value.productionDate, 'yyyy-MM-dd hh:mm')
+			: null,
+	},
+	...(user.role === 'user'
+		? []
+		: [{
+			key: 'comment',
+			type: 'text',
+			placeholder: 'Do NOT use this field to summarize and clarify your revision. This field is for permanent notes and comments regarding the scene or database entry itself.',
+			value: scene.value.comment,
+		}]),
+]);
+
+const editing = ref(new Set());
+const edits = ref({});
+const comment = ref(null);
+
+function toggleField(item) {
+	if (editing.value.has(item.key)) {
+		editing.value.delete(item.key);
+		delete edits.value[item.key];
+
+		return;
+	}
+	editing.value.add(item.key);
+
+	if (Array.isArray(item.value)) {
+		edits.value[item.key] = item.value.map((value) => value.hash || value.id);
+		return;
+	}
+
+	edits.value[item.key] = item.value;
+}
+
+function setValue(item, event) {
+	edits.value[item.key] = event.target.value;
+}
+
+const timeUnits = ['h', 'm', 's'];
+
+function setDuration(unit, event) {
+	edits.value.duration[timeUnits.indexOf(unit)] = Number(event.target.value);
+}
+
+async function submit() {
+	try {
+		await patch(`/scenes/${scene.value.id}`, {
+			edits: {
+				...edits.value,
+				duration: edits.value.duration
+					? (edits.value.duration[0] * 3600) + (edits.value.duration[1] * 60) + (edits.value.duration[2])
+					: undefined,
+			},
+			comment: comment.value,
+		}, {
+			successFeedback: 'Your revision has been submitted for approval.',
+			appendErrorMessage: true,
+		});
+
+		editing.value = new Set();
+		edits.value = {};
+		comment.value = null;
+
+		scene.value = await get(`/scenes/${scene.value.id}`);
+
+		console.log(scene.value);
+	} catch (error) {
+		// do nothing
+	}
+}
+</script>
+
+<style scoped>
+.editor {
+	flex-grow: 1;
+}
+
+.editor-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
+}
+
+.heading {
+	margin: 0;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	padding: .25rem 1rem;
+}
+
+.key {
+	width: 8rem;
+	text-transform: capitalize;
+	font-weight: bold;
+}
+
+.item-header {
+	display: flex;
+	align-items: center;
+}
+
+.value {
+	flex-grow: 1;
+
+	.input {
+		width: 100%;
+
+		&:disabled {
+			color: var(--glass-strong-10);
+			background: none;
+			border: solid 1px var(--glass-weak-30);
+		}
+	}
+
+	.duration {
+		.input {
+			width: 5rem;
+			margin-right: .25rem;
+
+			&:not(:first-child) {
+				margin-left: .75rem;
+			}
+		}
+	}
+
+	&.disabled {
+		pointer-events: none;
+	}
+}
+
+.item-actions {
+	.icon {
+		padding: .25rem 1rem;
+		fill:  var(--glass);
+		overflow: hidden;
+
+		&:hover {
+			cursor: pointer;
+			fill: var(--text);
+		}
+
+		&.active {
+			fill: var(--primary);
+		}
+	}
+}
+
+.editor-footer {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1rem;
+	padding: 1rem 1rem 0 1rem;
+	border-top: solid 1px var(--primary-light-30);
+	margin: 1rem 0;
+}
+
+.comment {
+	width: 100%;
+	flex-shrink: 0;
+
+	.input {
+		width: 100%;
+		resize: vertical;
+	}
+}
+
+.editor-actions {
+	display: flex;
+	align-items: center;
+	gap: 2rem;
+
+	.button {
+		padding: .5rem 1rem;
+		font-size: 1.1rem;
+	}
+}
+
+@media(--small) {
+	.row {
+		flex-direction: column;
+		align-items: stretch;
+		margin-bottom: .25rem;
+	}
+
+	.item-header {
+		margin-bottom: .25rem;
+	}
+
+	.key {
+		flex-grow: 1;
+	}
+}
+</style>
diff --git a/pages/scene/edit/+route.js b/pages/scene/edit/+route.js
new file mode 100644
index 0000000..576b454
--- /dev/null
+++ b/pages/scene/edit/+route.js
@@ -0,0 +1 @@
+export default '/scene/@sceneId/*/edit';
diff --git a/src/api.js b/src/api.js
index d8684d3..00bd4ec 100644
--- a/src/api.js
+++ b/src/api.js
@@ -112,6 +112,7 @@ export async function patch(path, data, options = {}) {
 		});
 
 		if (res.status === 204) {
+			showFeedback(true, options);
 			return null;
 		}
 
diff --git a/src/cache.js b/src/cache.js
index 9d16153..8779729 100644
--- a/src/cache.js
+++ b/src/cache.js
@@ -1,6 +1,6 @@
 import redis from './redis.js';
 
-export async function getIdsBySlug(slugs, domain) {
+export async function getIdsBySlug(slugs, domain, toMap) {
 	if (!slugs) {
 		return [];
 	}
@@ -21,5 +21,9 @@ export async function getIdsBySlug(slugs, domain) {
 		return Number(id);
 	}));
 
+	if (toMap) {
+		return Object.fromEntries(slugs.map((slug, index) => [slug, ids[index]]));
+	}
+
 	return ids.filter(Boolean);
 }
diff --git a/src/media.js b/src/media.js
index 4fee8aa..2adad9b 100644
--- a/src/media.js
+++ b/src/media.js
@@ -5,6 +5,7 @@ export function curateMedia(media, context = {}) {
 
 	return {
 		id: media.id,
+		hash: media.hash,
 		path: media.path,
 		thumbnail: media.thumbnail,
 		lazy: media.lazy,
diff --git a/src/scenes.js b/src/scenes.js
index dedffe4..9a2c765 100644
--- a/src/scenes.js
+++ b/src/scenes.js
@@ -11,6 +11,9 @@ import { curateStash } from './stashes.js';
 import { curateMedia } from './media.js';
 import escape from '../utils/escape-manticore.js';
 import promiseProps from '../utils/promise-props.js';
+import initLogger from './logger.js';
+
+const logger = initLogger();
 
 function getWatchUrl(scene) {
 	if (scene.url) {
@@ -64,6 +67,7 @@ function curateScene(rawScene, assets) {
 		description: rawScene.description,
 		duration: rawScene.duration,
 		shootId: rawScene.shoot_id,
+		productionDate: rawScene.production_date,
 		channel: {
 			id: assets.channel.id,
 			slug: assets.channel.slug,
@@ -595,3 +599,180 @@ export async function fetchScenes(filters, rawOptions, reqUser) {
 		limit: options.limit,
 	};
 }
+
+async function applySceneValueDelta(sceneId, delta, trx) {
+	console.log('value delta', delta);
+
+	return knexOwner('releases')
+		.where('id', sceneId)
+		.update(delta.key, delta.value)
+		.transacting(trx);
+}
+
+async function applySceneActorsDelta(sceneId, delta, trx) {
+	console.log('actors delta', delta);
+
+	await knexOwner('releases_actors')
+		.where('release_id', sceneId)
+		.delete()
+		.transacting(trx);
+
+	await knexOwner('releases_actors')
+		.insert(delta.value.map((actorId) => ({
+			release_id: sceneId,
+			actor_id: actorId,
+		})))
+		.transacting(trx);
+}
+
+async function applySceneTagsDelta(sceneId, delta, trx) {
+	console.log('tags delta', delta);
+
+	await knexOwner('releases_tags')
+		.where('release_id', sceneId)
+		.whereNotNull('tag_id')
+		.delete()
+		.transacting(trx);
+
+	await knexOwner('releases_tags')
+		.insert(delta.value.map((tagId) => ({
+			release_id: sceneId,
+			tag_id: tagId,
+			source: 'editor',
+		})))
+		.transacting(trx);
+}
+
+async function applySceneRevision(sceneIds) {
+	const revisions = await knexOwner('scenes_revisions')
+		.whereIn('scene_id', sceneIds)
+		.whereNull('applied_at');
+
+	await revisions.reduce(async (chain, revision) => {
+		await chain;
+
+		console.log('revision', revision);
+
+		await knexOwner.transaction(async (trx) => {
+			await revision.deltas.map(async (delta) => {
+				if ([
+					'title',
+					'description',
+					'date',
+					'duration',
+					'production_date',
+					'production_location',
+					'production_city',
+					'production_state',
+				].includes(delta.key)) {
+					return applySceneValueDelta(revision.scene_id, delta, trx);
+				}
+
+				if (delta.key === 'actors') {
+					return applySceneActorsDelta(revision.scene_id, delta, trx);
+				}
+
+				if (delta.key === 'tags') {
+					return applySceneTagsDelta(revision.scene_id, delta, trx);
+				}
+
+				return null;
+			});
+
+			await knexOwner('scenes_revisions')
+				.where('id', revision.id)
+				.update('applied_at', knex.fn.now());
+
+			// await trx.commit();
+		}).catch(async (error) => {
+			logger.error(`Failed to apply revision ${revision.id} on scene ${revision.scene_id}: ${error.message}`);
+		});
+	}, Promise.resolve());
+}
+
+const keyMap = {
+	productionDate: 'production_date',
+};
+
+export async function createSceneRevision(sceneId, { edits, comment }, reqUser) {
+	const [
+		[scene],
+		openRevisions,
+	] = await Promise.all([
+		fetchScenesById([sceneId], { reqUser, includeAssets: true }),
+		knexOwner('scenes_revisions')
+			.where('user_id', reqUser.id)
+			.whereNull('approved_by')
+			.whereNot('failed', true),
+	]);
+
+	if (!scene) {
+		throw new HttpError(`No scene with ID ${sceneId} found to update`, 404);
+	}
+
+	if (openRevisions.length >= config.revisions.unapprovedLimit) {
+		throw new HttpError(`You have ${config.revisions.unapprovedLimit} unapproved revisions, please wait for approval before submitting another revision.`, 429);
+	}
+
+	const baseScene = Object.fromEntries(Object.entries(scene).map(([key, values]) => {
+		if ([
+			'effectiveDate',
+			'isNew',
+			'network',
+			'stashes',
+			'watchUrl',
+		].includes(key)) {
+			return null;
+		}
+
+		if (values?.hash) {
+			return [key, values.hash];
+		}
+
+		if (values?.id) {
+			return [key, values.id];
+		}
+
+		if (Array.isArray(values)) {
+			return [key, values.map((value) => value?.hash || value?.id || value)];
+		}
+
+		return [key, values];
+	}).filter(Boolean));
+
+	const deltas = Object.entries(edits).map(([key, value]) => {
+		if (baseScene[key] === value) {
+			return null;
+		}
+
+		if (Array.isArray(value)) {
+			const valueSet = new Set(value);
+			const baseSet = new Set(baseScene[key]);
+
+			if (valueSet.size === baseSet.size && baseScene[key].every((id) => valueSet.has(id))) {
+				return null;
+			}
+		}
+
+		return {
+			key: keyMap[key] || key,
+			value,
+		};
+	}).filter(Boolean);
+
+	if (deltas.length === 0) {
+		throw new HttpError('No effective changes provided', 400);
+	}
+
+	await knexOwner('scenes_revisions').insert({
+		user_id: reqUser.id,
+		scene_id: scene.id,
+		base: JSON.stringify(baseScene),
+		deltas: JSON.stringify(deltas),
+		comment,
+	});
+
+	if (['admin', 'editor'].includes(reqUser.role)) {
+		await applySceneRevision([scene.id]);
+	}
+}
diff --git a/src/tags.js b/src/tags.js
index aed1445..7a29c63 100644
--- a/src/tags.js
+++ b/src/tags.js
@@ -47,13 +47,17 @@ export async function fetchTags(options = {}) {
 								column: knex.raw('similarity(aliases.slug, :query)', { query }),
 								order: 'desc',
 							},
+							{
+								column: 'aliases.priority',
+								order: 'desc',
+							},
 							{
 								column: 'aliases.slug',
 								order: 'asc',
 							},
 						]);
 				} else if (!options.includeAliases) {
-					builder.whereNull('alias_for');
+					builder.whereNull('tags.alias_for');
 				}
 			}),
 		knex('tags_posters')
diff --git a/src/web/main.js b/src/web/main.js
index 9462128..2823eef 100644
--- a/src/web/main.js
+++ b/src/web/main.js
@@ -22,6 +22,7 @@ export default async function mainHandler(req, res, next) {
 			id: req.user.id,
 			username: req.user.username,
 			email: req.user.email,
+			role: req.user.role,
 			avatar: req.user.avatar,
 		},
 		assets: req.user ? {
diff --git a/src/web/scenes.js b/src/web/scenes.js
index d60be46..d17268c 100644
--- a/src/web/scenes.js
+++ b/src/web/scenes.js
@@ -1,9 +1,15 @@
 import { stringify } from '@brillout/json-serializer/stringify'; /* eslint-disable-line import/extensions */
 
-import { fetchScenes, fetchScenesById } from '../scenes.js';
+import {
+	fetchScenes,
+	fetchScenesById,
+	createSceneRevision,
+} from '../scenes.js';
+
 import { parseActorIdentifier } from '../query.js';
 import { getIdsBySlug } from '../cache.js';
 import slugify from '../../utils/slugify.js';
+import { HttpError } from '../errors.js';
 import promiseProps from '../../utils/promise-props.js';
 
 export async function curateScenesQuery(query) {
@@ -197,6 +203,18 @@ export async function fetchScenesGraphql(query, req) {
 	};
 }
 
+export async function fetchSceneApi(req, res) {
+	const [scene] = await fetchScenesById([Number(req.params.sceneId)], { reqUser: req.user });
+
+	console.log(req.params.sceneId, scene);
+
+	if (!scene) {
+		throw new HttpError(`No scene with ID ${req.params.sceneId} found`, 404);
+	}
+
+	res.send(scene);
+}
+
 export async function fetchScenesByIdGraphql(query, req) {
 	const scenes = await fetchScenesById([].concat(query.id, query.ids).filter(Boolean), {
 		reqUser: req.user,
@@ -209,3 +227,9 @@ export async function fetchScenesByIdGraphql(query, req) {
 
 	return scenes[0];
 }
+
+export async function createSceneRevisionApi(req, res) {
+	await createSceneRevision(Number(req.params.sceneId), req.body, req.user);
+
+	res.status(204).send();
+}
diff --git a/src/web/server.js b/src/web/server.js
index 174141e..4150cbe 100644
--- a/src/web/server.js
+++ b/src/web/server.js
@@ -13,7 +13,12 @@ import redis from '../redis.js';
 import errorHandler from './error.js';
 import consentHandler from './consent.js';
 
-import { fetchScenesApi } from './scenes.js';
+import {
+	fetchScenesApi,
+	fetchSceneApi,
+	createSceneRevisionApi,
+} from './scenes.js';
+
 import { fetchActorsApi } from './actors.js';
 import { fetchMoviesApi } from './movies.js';
 import { fetchEntitiesApi } from './entities.js';
@@ -179,6 +184,8 @@ export default async function initServer() {
 
 	// SCENES
 	router.get('/api/scenes', fetchScenesApi);
+	router.get('/api/scenes/:sceneId', fetchSceneApi);
+	router.patch('/api/scenes/:sceneId', createSceneRevisionApi);
 
 	// ACTORS
 	router.get('/api/actors', fetchActorsApi);
diff --git a/static b/static
index 514a7ac..7ed5e95 160000
--- a/static
+++ b/static
@@ -1 +1 @@
-Subproject commit 514a7accf3835913a7c168d34b996bde23dcf2d8
+Subproject commit 7ed5e9579b65904738b1322c222f35d516cf52c5
diff --git a/utils/process-summary-template.js b/utils/process-summary-template.js
index b0a480b..a2f2960 100644
--- a/utils/process-summary-template.js
+++ b/utils/process-summary-template.js
@@ -23,7 +23,7 @@ const propProcessors = {
 			.map((actor) => actor.name);
 	},
 	tags: (sceneInfo, options) => sceneInfo.tags
-		.filter((tag) => {
+		?.filter((tag) => {
 			if (options.include && !options.include.includes(tag.slug)) {
 				return false;
 			}