From 95e898269671770bc05abdb84f8f91cfa0d9de74 Mon Sep 17 00:00:00 2001
From: DebaucheryLibrarian <DebaucheryLibrarian@unknown.name>
Date: Sat, 7 Feb 2026 05:10:02 +0100
Subject: [PATCH] Showing heading and dates on chapters.

---
 components/campaigns/campaign.vue |  7 ++++++-
 components/scenes/chapters.vue    | 14 +++++++++++---
 pages/scene/+Page.vue             | 18 ++++++++++++------
 src/scenes.js                     |  2 ++
 4 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/components/campaigns/campaign.vue b/components/campaigns/campaign.vue
index 28ee1bf..065b7e5 100644
--- a/components/campaigns/campaign.vue
+++ b/components/campaigns/campaign.vue
@@ -30,6 +30,7 @@
 		target="_blank"
 		class="campaign"
 		:style="{ 'background-image': backdrop && `url(${bannerSrc})` }"
+		:class="{ backdrop }"
 		data-umami-event="campaign-click"
 		:data-umami-event-campaign-id="`${campaign.entity.slug}-${campaign.id}`"
 	>
@@ -109,12 +110,16 @@ const bannerSrc = (() => {
 	backdrop-filter: blur(1rem) saturate(70%) brightness(75%);
 }
 
+.campaign.backdrop .campaign-overlay {
+	box-shadow: inset 0 0 5px var(--shadow-weak-20);
+}
+
 .campaign-banner {
 	height: auto;
 	max-height: 100%;
 	max-width: 100%;
 	object-fit: contain;
-	filter: drop-shadow(0 0 2px var(--shadow-weak-10));
+	filter: drop-shadow(0 0 2px var(--shadow-weak-20));
 }
 
 .restricted {
diff --git a/components/scenes/chapters.vue b/components/scenes/chapters.vue
index 184313a..883fbce 100755
--- a/components/scenes/chapters.vue
+++ b/components/scenes/chapters.vue
@@ -52,6 +52,13 @@
 					v-tooltip="'Duration'"
 					class="chapter-duration"
 				><Icon icon="stopwatch" />{{ formatDuration(chapter.duration) }}</span>
+
+				<time
+					v-if="chapter.date"
+					v-tooltip="'Date'"
+					:datetime="chapter.date"
+					class="chapter-date"
+				>{{ formatDate(chapter.date, 'MMM d') }}</time>
 			</span>
 
 			<div class="chapter-info">
@@ -87,7 +94,7 @@
 import { computed } from 'vue';
 
 import getPath from '#/src/get-path.js';
-import { formatDuration } from '#/utils/format.js';
+import { formatDuration, formatDate } from '#/utils/format.js';
 
 const props = defineProps({
 	chapters: {
@@ -138,7 +145,7 @@ const timeline = computed(() => {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 0 .5rem;
+	padding: 0 .75rem;
 	border-radius: 0 0 .25rem .25rem;
 	margin: 0 0 .5rem 0;
 	color: var(--text-light);
@@ -164,7 +171,7 @@ const timeline = computed(() => {
 }
 
 .chapter-info {
-	padding: 0 .5rem;
+	padding: 0 .75rem;
 	font-size: 1rem;
 }
 
@@ -181,6 +188,7 @@ const timeline = computed(() => {
 }
 
 .chapter-description {
+	text-align: justify;
 	line-height: 1.5;
 }
 
diff --git a/pages/scene/+Page.vue b/pages/scene/+Page.vue
index 631b6c9..69bfa85 100644
--- a/pages/scene/+Page.vue
+++ b/pages/scene/+Page.vue
@@ -249,12 +249,6 @@
 					</div>
 				</div>
 
-				<Chapters
-					v-if="scene.chapters.length > 0"
-					:chapters="scene.chapters"
-					class="section"
-				/>
-
 				<div
 					v-if="scene.description"
 					class="section"
@@ -264,6 +258,18 @@
 					<p class="description">{{ scene.description }}</p>
 				</div>
 
+				<section
+					v-if="scene.chapters.length > 0"
+					class="section"
+				>
+					<h3 class="heading">Chapters</h3>
+
+					<Chapters
+						:chapters="scene.chapters"
+						class="section"
+					/>
+				</section>
+
 				<div
 					v-if="campaigns?.scene"
 					class="section"
diff --git a/src/scenes.js b/src/scenes.js
index 6d9b604..a07f590 100644
--- a/src/scenes.js
+++ b/src/scenes.js
@@ -86,7 +86,9 @@ function curateScene(rawScene, assets, reqUser, context) {
 		chapters: assets.chapters.map((chapter) => ({
 			id: chapter.id,
 			title: chapter.title,
+			description: chapter.description,
 			time: chapter.time,
+			date: chapter.date,
 			duration: chapter.duration,
 			poster: context.restriction
 				? null