Added dedicated stash page. Using preview tiles for stashes on user page.

assets/components/stashes/stash.vue

@@ -0,0 +1,115 @@
+<template>
+	<div
+		v-if="stash"
+		class="stash content"
+	>
+		<div class="stash-header">
+			<h2 class="stash-name">{{ stash.name }}</h2>
+
+			<router-link
+				v-if="stash.user"
+				:to="{ name: 'user', params: { username: stash.user.username } }"
+				class="stash-username nolink"
+			><Icon icon="user3" />{{ stash.user.username }}</router-link>
+		</div>
+
+		<div class="content-inner">
+			<ul
+				v-if="stash.scenes?.length > 0"
+				class="stash-section stash-scenes nolist"
+			>
+				<li
+					v-for="item in stash.scenes"
+					:key="item.id"
+				><Scene :release="item.scene" /></li>
+			</ul>
+
+			<ul
+				v-if="stash.actors?.length > 0"
+				class="stash-section stash-actors nolist"
+			>
+				<li
+					v-for="item in stash.actors"
+					:key="item.id"
+				><Actor :actor="item.actor" /></li>
+			</ul>
+		</div>
+	</div>
+</template>
+
+<script>
+import Actor from '../actors/tile.vue';
+import Scene from '../releases/scene-tile.vue';
+
+async function fetchStash() {
+	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+}
+
+async function mounted() {
+	this.fetchStash();
+}
+
+export default {
+	components: {
+		Actor,
+		Scene,
+	},
+	data() {
+		return {
+			stash: null,
+		};
+	},
+	mounted,
+	methods: {
+		fetchStash,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.stash-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: var(--profile);
+	color: var(--text-light);
+}
+
+.stash-name,
+.stash-username {
+	display: inline-flex;
+	align-items: center;
+	padding: .5rem 1rem;
+	margin: 0;
+	font-weight: bold;
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.stash-section {
+	padding: 1rem;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-actors,
+.stash-scenes {
+    display: grid;
+    flex-grow: 1;
+    grid-gap: .5rem;
+	box-sizing: border-box;
+}
+
+.stash-actors {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.stash-scenes {
+    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+}
+</style>