Added functional stash button on scene tiles.

pages/users/@username/+Page.vue

@@ -9,6 +9,34 @@
 
 			<h2 class="username">{{ profile.username }}</h2>
 		</div>
+
+		<ul class="stashes nolist">
+			<li
+				v-for="stash in profile.stashes"
+				:key="`stash-${stash.id}`"
+			>
+				<a
+					:href="`/stash/${profile.username}/${stash.slug}`"
+					class="stash nolink"
+				>
+					<div class="stash-name">
+						{{ stash.name }}
+
+						<Icon
+							v-if="stash.primary"
+							icon="heart7"
+							class="primary"
+						/>
+					</div>
+
+					<div class="stash-counts">
+						<div class="stash-count"><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</div>
+						<div class="stash-count"><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</div>
+						<div class="stash-count"><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</div>
+					</div>
+				</a>
+			</li>
+		</ul>
 	</div>
 </template>
 
@@ -17,6 +45,12 @@ import { inject } from 'vue';
 
 const pageContext = inject('pageContext');
 const profile = pageContext.pageProps.profile;
+
+function abbreviateNumber(number) {
+	return number.toLocaleString('en-US', { notation: 'compact' });
+}
+
+console.log(profile.stashes);
 </script>
 
 <style scoped>
@@ -38,4 +72,49 @@ const profile = pageContext.pageProps.profile;
 	border-radius: .25rem;
 	margin-right: 1rem;
 }
+
+.stashes {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	padding: 1rem;
+}
+
+.stash {
+	width: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+	}
+}
+
+.stash-name {
+	display: flex;
+	justify-content: space-between;
+	padding: .5rem;
+	border-bottom: solid 1px var(--shadow-weak-30);
+	font-weight: bold;
+
+	.icon.primary {
+		fill: var(--primary);
+	}
+}
+
+.stash-counts {
+	display: flex;
+	justify-content: space-between;
+}
+
+.stash-count {
+	display: inline-flex;
+	align-items: center;
+	padding: .5rem;
+	font-size: .9rem;
+
+	.icon {
+		margin-right: .5rem;
+		fill: var(--shadow);
+	}
+}
 </style>