Moved summary template editor to profile page.

pages/users/@username/+Page.vue

@@ -18,6 +18,7 @@
 			<nav
 				v-if="profile.id === user?.id"
 				class="domains"
+				@click="confirmUnsaved"
 			>
 				<a
 					:href="`/user/${profile.username}/stashes`"
@@ -30,10 +31,22 @@
 					class="domain nolink"
 					:class="{ active: domain === 'alerts' }"
 				>Alerts</a>
+
+				<a
+					:href="`/user/${profile.username}/summaries`"
+					class="domain nolink"
+					:class="{ active: domain === 'summaries' }"
+				>Summaries</a>
 			</nav>
 
 			<Stashes v-if="domain === 'stashes'" />
 			<Alerts v-if="domain === 'alerts' && profile.id === user?.id" />
+
+			<Summaries
+				v-if="domain === 'summaries' && profile.id === user?.id"
+				:release="mockupRelease"
+				@changed="(changed) => summaryChanged = changed"
+			/>
 		</div>
 	</div>
 </template>
@@ -44,11 +57,52 @@ import { formatDistanceStrict } from 'date-fns';
 
 import Stashes from '#/components/stashes/stashes.vue';
 import Alerts from '#/components/alerts/alerts.vue';
+import Summaries from '#/components/scenes/summaries.vue';
 
 const pageContext = inject('pageContext');
 const domain = pageContext.routeParams.domain;
 const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
+
+const summaryChanged = ref(false);
+
+const mockupRelease = {
+	id: 1,
+	title: 'Nut For Human Consumption',
+	effectiveDate: new Date(),
+	actors: [
+		{
+			name: 'Chanel Chakra',
+			gender: 'female',
+		},
+		{
+			name: 'Mo The Fucker',
+			gender: 'male',
+		},
+	],
+	tags: [
+		{ name: 'anal' },
+		{ name: 'facefucking' },
+		{ name: 'deepthroat' },
+		{ name: 'blowjob' },
+		{ name: 'facial' },
+	],
+	movies: [{
+		title: 'Best Of Traxxx 23',
+	}],
+	channel: {
+		name: 'Traxxxed',
+	},
+	network: {
+		name: 'Traxxx',
+	},
+};
+
+function confirmUnsaved(event) {
+	if (summaryChanged.value && !confirm('You have unchanged changes in your summary editor, are you sure you want to leave the page?')) { // eslint-disable-line no-restricted-globals, no-alert
+		event.preventDefault();
+	}
+}
 </script>
 
 <style>
@@ -87,8 +141,11 @@ const profile = ref(pageContext.pageProps.profile);
 }
 
 .profile {
+	display: flex;
+	flex-direction: column;
 	width: 1200px;
 	max-width: 100%;
+	margin: 0 1rem;
 }
 
 .profile-header {
@@ -96,7 +153,6 @@ const profile = ref(pageContext.pageProps.profile);
 	justify-content: space-between;
 	align-items: center;
 	padding: .5rem 1rem;
-	margin-bottom: .5rem;
     color: var(--highlight-strong-30);
     background: var(--shadow-strong-30);
 	border-radius: 0 0 .5rem .5rem;
@@ -136,7 +192,7 @@ const profile = ref(pageContext.pageProps.profile);
 	display: flex;
 	gap: .5rem;
 	padding: .5rem 0;
-	margin-top: .5rem;
+	margin-top: .25rem;
 }
 
 .domain {
@@ -154,6 +210,10 @@ const profile = ref(pageContext.pageProps.profile);
 }
 
 @media(--small-30) {
+	.profile {
+		margin: 0 .5rem;
+	}
+
 	.age .icon {
 		display: none;
 	}

pages/users/@username/+route.js

@@ -1,6 +1,5 @@
 import { redirect } from 'vike/abort'; /* eslint-disable-line import/extensions */
 import { match } from 'path-to-regexp';
-// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
 
 const path = '/user/:username/:domain?';
 const urlMatch = match(path, { decode: decodeURIComponent });