Added elaborate template switching.

pages/scene/+Page.vue

@@ -315,6 +315,7 @@
 						>
 
 						<Icon
+							v-if="user"
 							v-tooltip="'Edit template'"
 							icon="pencil5"
 							class="edit"
@@ -328,6 +329,21 @@
 							@click="copySummary"
 						/>
 					</div>
+
+					<ul
+						v-if="user && assets.templates.length > 0"
+						class="nolist templates"
+					>
+						<Icon icon="markup" />
+
+						<li
+							v-for="userTemplate in templates"
+							:key="`template-${userTemplate.id}`"
+							class="template"
+							:class="{ selected: userTemplate.id === selectedTemplate }"
+							@click="selectTemplate(userTemplate.id)"
+						>{{ userTemplate.name }}</li>
+					</ul>
 				</div>
 			</div>
 		</div>
@@ -335,13 +351,16 @@
 		<EditSummary
 			v-if="showSummaryDialog"
 			:release="scene"
+			:selected="selectedTemplate"
 			@close="showSummaryDialog = false"
+			@event="({ type, data }) => type === 'select' && selectTemplate(data, false)"
 		/>
 	</div>
 </template>
 
 <script setup>
 import { ref, computed, inject } from 'vue';
+import Cookies from 'js-cookie';
 
 import { formatDate, formatDuration } from '#/utils/format.js';
 import events from '#/src/events.js';
@@ -356,7 +375,20 @@ import Heart from '#/components/stashes/heart.vue';
 import Campaign from '#/components/campaigns/campaign.vue';
 import EditSummary from '#/components/scenes/edit-summary.vue';
 
-const { pageProps, campaigns } = inject('pageContext');
+import defaultTemplate from '#/assets/summary.yaml?raw'; // eslint-disable-line import/no-unresolved
+
+const cookies = Cookies.withConverter({
+	write: (value) => value,
+});
+
+const {
+	pageProps,
+	campaigns,
+	user,
+	assets,
+	env,
+} = inject('pageContext');
+
 const { scene } = pageProps;
 
 const playing = ref(false);
@@ -391,16 +423,39 @@ const poster = computed(() => {
 	return null;
 });
 
-const summary = (() => {
-	try {
-		const result = processSummaryTemplate(scene);
+const summary = ref(null);
+const selectedTemplate = ref(null);
 
-		return result;
+const templates = [
+	{
+		id: 0,
+		name: 'traxxx',
+		template: defaultTemplate,
+	},
+	...(assets?.templates || []),
+];
+
+function selectTemplate(templateId, allowFallback = true) {
+	try {
+		const targetTemplate = templates.find((userTemplate) => userTemplate.id === templateId);
+
+		if (!targetTemplate && !allowFallback) {
+			return;
+		}
+
+		const template = targetTemplate || templates[0];
+
+		summary.value = processSummaryTemplate(template.template, scene);
+		selectedTemplate.value = template.id;
+
+		cookies.set('selectedTemplate', String(templateId));
 	} catch (error) {
 		console.error(`Failed to process summary template: ${error.message}`);
-		return null;
+		summary.value = null;
 	}
-})();
+}
+
+selectTemplate(env.selectedTemplate);
 
 function copySummary() {
 	navigator.clipboard.writeText(summary);
@@ -728,7 +783,7 @@ function copySummary() {
 		flex-grow: 1;
 	}
 
-	.icon {
+	.detail .icon {
 		height: auto;
 		padding: 0 .5rem 0 .75rem;
 		fill: var(--glass);
@@ -740,6 +795,34 @@ function copySummary() {
 	}
 }
 
+.templates {
+	display: flex;
+	align-items: center;
+	margin-top: .5rem;
+
+	.icon {
+		width: 1.2rem;
+		height: 1.2rem;
+		margin-right: .5rem;
+		fill: var(--glass-weak-10);
+	}
+}
+
+.template {
+	padding: .25rem .5rem;
+	border-radius: .25rem;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--primary);
+	}
+
+	&.selected {
+		background: var(--primary);
+		color: var(--text-light);
+	}
+}
+
 .compact-show {
 	display: none;
 }