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

assets/components/users/user.vue

@@ -19,16 +19,28 @@
 					:key="stash.id"
 					class="stash"
 				>
-					<h4 class="stash-name">{{ stash.name }}</h4>
+					<router-link
+						:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+						class="stash-link stash-section"
+					>
+						<h4 class="stash-name">{{ stash.name }}</h4>
+					</router-link>
 
 					<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>
+							v-for="{ scene } in stash.scenes"
+							:key="scene.id"
+							class="stash-scene"
+						>
+							<ScenePreview
+								:scene="scene"
+								:stash="stash"
+								@unstash="fetchUser"
+							/>
+						</li>
 					</ul>
 
 					<ul
@@ -36,9 +48,16 @@
 						class="stash-section stash-actors nolist"
 					>
 						<li
-							v-for="item in stash.actors"
-							:key="item.id"
-						><Actor :actor="item.actor" /></li>
+							v-for="{ actor } in stash.actors"
+							:key="actor.id"
+							class="stash-actor"
+						>
+							<ActorPreview
+								:actor="actor"
+								:stash="stash"
+								@unstash="fetchUser"
+							/>
+						</li>
 					</ul>
 				</li>
 			</ul>
@@ -47,18 +66,22 @@
 </template>
 
 <script>
-import Actor from '../actors/tile.vue';
-import Scene from '../releases/scene-tile.vue';
+import ActorPreview from './actor-preview.vue';
+import ScenePreview from './scene-preview.vue';
 
-async function mounted() {
+async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
 	this.pageTitle = this.user?.username;
 }
 
+async function mounted() {
+	await this.fetchUser();
+}
+
 export default {
 	components: {
-		Actor,
-		Scene,
+		ActorPreview,
+		ScenePreview,
 	},
 	data() {
 		return {
@@ -69,6 +92,9 @@ export default {
 		};
 	},
 	mounted,
+	methods: {
+		fetchUser,
+	},
 };
 </script>
 
@@ -89,25 +115,34 @@ export default {
 	margin: 0 0 1rem 0;
 }
 
+.stashes {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+}
+
 .heading {
 	color: var(--primary);
 }
 
 .stash {
-	width: 100%;
+	min-width: 0;
 	background: var(--background);
 	margin: 0 0 1rem 0;
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
+.stash-link.stash-section {
+	display: block;
+	text-decoration: none;
+}
+
 .stash-name {
 	color: var(--shadow-strong);
-	padding: 1rem .5rem 0 .5rem;
 	margin: 0;
 }
 
 .stash-section {
-	padding: 1rem .5rem;
+	padding: .5rem;
 
 	&:not(:last-child) {
 		border-bottom: solid 1px var(--shadow-hint);
@@ -116,17 +151,27 @@ export default {
 
 .stash-actors,
 .stash-scenes {
-    display: grid;
-    flex-grow: 1;
-    grid-gap: .5rem;
-	box-sizing: border-box;
-}
+	display: flex;
+	overflow-x: auto;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
 
-.stash-actors {
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    &::-webkit-scrollbar {
+        display: none;
+	}
 }
 
 .stash-scenes {
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	height: 8rem;
+    grid-gap: .5rem;
+}
+
+.stash-actors {
+	grid-gap: 1rem;
+}
+
+.stash-actor,
+.stash-scene {
+	flex-shrink: 0;
 }
 </style>