Added filterable stash pages.

pages/stashes/@username/+Page.vue

@@ -0,0 +1,91 @@
+<template>
+	<div class="stash">
+		<div class="header">
+			<h2 class="title">
+				<Icon
+					v-if="stash.primary"
+					icon="heart7"
+				/>
+
+				<Icon
+					v-else
+					icon="box"
+				/>
+
+				{{ stash.name }}
+			</h2>
+
+			<a
+				:href="`/user/${stash.user.username}`"
+				class="user nolink"
+			>
+				<img
+					:src="stash.user.avatar"
+					class="avatar"
+				>{{ stash.user.username }}
+			</a>
+		</div>
+
+		<div class="scenes-container">
+			<Scenes />
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+
+import Scenes from '#/components/scenes/scenes.vue';
+
+const pageContext = inject('pageContext');
+const stash = pageContext.pageProps.stash;
+
+console.log(stash);
+</script>
+
+<style scoped>
+.stash {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.header {
+	display: flex;
+	justify-content: space-between;
+	padding: .5rem 1rem;
+	color: var(--text-light);
+	background: var(--grey-dark-40);
+}
+
+.title {
+	margin: 0;
+	text-transform: capitalize;
+	display: flex;
+	align-items: center;
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		margin-right: 1rem;
+		fill: var(--text-light);
+	}
+}
+
+.user {
+	display: flex;
+	align-items: center;
+	font-weight: bold;
+}
+
+.avatar {
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-right: 1rem;
+	border-radius: .25rem;
+}
+
+.scenes-container {
+	overflow-y: auto;
+}
+</style>

pages/stashes/@username/+onBeforeRender.js

@@ -0,0 +1,51 @@
+import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
+
+import { fetchStashByUsernameAndSlug } from '#/src/stashes.js';
+import { fetchScenes } from '#/src/scenes.js';
+import { curateScenesQuery } from '#/src/web/scenes.js';
+import { HttpError } from '#/src/errors.js';
+
+export async function onBeforeRender(pageContext) {
+	try {
+		const stash = await fetchStashByUsernameAndSlug(pageContext.routeParams.username, pageContext.routeParams.stashSlug, pageContext.user);
+
+		const stashScenes = await fetchScenes(await curateScenesQuery({
+			...pageContext.urlQuery,
+			scope: pageContext.routeParams.scope || 'latest',
+			stashId: stash.id,
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 30,
+		}, pageContext.user);
+
+		const {
+			scenes,
+			aggActors,
+			aggTags,
+			aggChannels,
+			total,
+			limit,
+		} = stashScenes;
+
+		return {
+			pageContext: {
+				title: `${stash.name} by ${stash.user.username}`,
+				pageProps: {
+					stash,
+					scenes,
+					aggActors,
+					aggTags,
+					aggChannels,
+					total,
+					limit,
+				},
+			},
+		};
+	} catch (error) {
+		if (error instanceof HttpError) {
+			throw render(error.httpCode, error.message);
+		}
+
+		throw error;
+	}
+}

pages/stashes/@username/+route.js

@@ -0,0 +1,23 @@
+import { match } from 'path-to-regexp';
+// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
+
+const path = '/stash/:username/:stashSlug/:scope?/:page?';
+const urlMatch = match(path, { decode: decodeURIComponent });
+
+export default (pageContext) => {
+	const matched = urlMatch(pageContext.urlPathname);
+
+	if (matched) {
+		return {
+			routeParams: {
+				username: matched.params.username,
+				stashSlug: matched.params.stashSlug,
+				scope: matched.params.scope || 'latest',
+				page: matched.params.page || '1',
+				path,
+			},
+		};
+	}
+
+	return false;
+};