Showing heading and dates on chapters.

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;
 }