Displaying actor-specific scene tags.

pages/scene/+Page.vue

@@ -140,20 +140,27 @@
 					</li>
 				</ul>
 
-				<ul
-					v-if="scene.tags.length > 0"
-					class="tags nolist"
+				<div
+					v-for="actorTags in tags"
+					:key="`tags-${actorTags.actor?.name || 'scene'}`"
 				>
-					<li
-						v-for="tag in scene.tags"
-						:key="`tag-${tag.id}`"
-					>
-						<Link
-							:href="`/tag/${tag.slug}`"
-							class="tag nolink"
-						>{{ tag.name }}</Link>
-					</li>
-				</ul>
+					<ul class="tags nolist">
+						<li
+							v-if="actorTags.actor"
+							class="tags-actor"
+						>{{ actorTags.actor.name }}:</li>
+
+						<li
+							v-for="tag in actorTags.tags"
+							:key="`tag-${tag.id}`"
+						>
+							<Link
+								:href="`/tag/${tag.slug}`"
+								class="tag nolink"
+							>{{ tag.name }}</Link>
+						</li>
+					</ul>
+				</div>
 
 				<div
 					v-if="scene.movies.length > 0 || scene.series.length > 0"
@@ -440,6 +447,17 @@ const {
 
 const { scene } = pageProps;
 
+const tags = [
+	...scene.actors.map((actor) => ({
+		actor,
+		tags: scene.tags.filter((tag) => tag.actorId === actor.id),
+	})),
+	{
+		tags: scene.tags.filter((tag) => tag.actorId === null),
+		actor: null,
+	},
+].filter((actorTags) => actorTags.tags.length > 0);
+
 const showSummaryDialog = ref(false);
 
 const qualities = {
@@ -640,6 +658,11 @@ function copySummary() {
 	margin-bottom: 1rem;
 }
 
+.tags-actor {
+	margin-right: .5rem;
+	font-weight: bold;
+}
+
 .actors {
 	display: flex;
 	flex-grow: 1;