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

pages/users/@username/+Page.vue

@@ -31,19 +31,19 @@
 
 				<StashDialog
 					v-if="showStashDialog"
-					@created="showStashDialog = false; reloadProfile();"
+					@created="showStashDialog = false; reloadStashes();"
 					@close="showStashDialog = false"
 				/>
 
 				<ul class="stashes nolist">
 					<li
-						v-for="stash in profile.stashes"
+						v-for="stash in stashes"
 						:key="`stash-${stash.id}`"
 					>
 						<StashTile
 							:stash="stash"
 							:profile="profile"
-							@reload="reloadProfile"
+							@reload="reloadStashes"
 						/>
 					</li>
 				</ul>
@@ -224,14 +224,16 @@ import AlertDialog from '#/components/alerts/create.vue';
 const pageContext = inject('pageContext');
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
+const stashes = ref(pageContext.pageProps.stashes);
 const alerts = ref(pageContext.pageProps.alerts);
 
 const done = ref(true);
 const showStashDialog = ref(false);
 const showAlertDialog = ref(false);
 
-async function reloadProfile() {
-	profile.value = await get(`/users/${profile.value.id}`);
+async function reloadStashes() {
+	// profile.value = await get(`/users/${profile.value.id}`);
+	stashes.value = await get(`/users/${profile.value.id}/stashes`);
 }
 
 async function reloadAlerts() {

pages/users/@username/+onBeforeRender.js

@@ -1,6 +1,7 @@
 import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
 
 import { fetchUser } from '#/src/users.js';
+import { fetchUserStashes } from '#/src/stashes.js';
 import { fetchAlerts } from '#/src/alerts.js';
 
 export async function onBeforeRender(pageContext) {
@@ -15,11 +16,14 @@ export async function onBeforeRender(pageContext) {
 		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);
 	}
 
+	const stashes = await fetchUserStashes(profile.id, pageContext.user);
+
 	return {
 		pageContext: {
 			title: profile.username,
 			pageProps: {
 				profile, // differentiate from authed 'user'
+				stashes,
 				alerts,
 			},
 		},