Added actor stash.

pages/scene/+Page.vue

@@ -26,6 +26,7 @@
 					<div
 						v-if="scene.photos.length > 0"
 						class="album"
+						:class="{ single: scene.photos.length === 1 }"
 					>
 						<div
 							v-for="photo in scene.photos"
@@ -92,7 +93,10 @@
 				>{{ scene.title }}</h2>
 
 				<div class="actions">
-					<div class="bookmarks">
+					<div
+						v-if="user"
+						class="bookmarks"
+					>
 						<Icon icon="folder-heart" />
 
 						<Icon
@@ -103,7 +107,7 @@
 						/>
 
 						<Icon
-							v-show="!favorited && user"
+							v-show="!favorited"
 							icon="heart8"
 							class="heart"
 							@click.native.stop="stash"
@@ -179,7 +183,11 @@
 				<div class="section details">
 					<div class="detail">
 						<h3 class="heading">Added</h3>
-						<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd hh:mm') }}</span> <span class="added-batch">batch #{{ scene.createdBatchId }}</span>
+						<span class="added-date">{{ formatDate(scene.createdAt, 'yyyy-MM-dd') }}</span>
+						<span
+							:title="`Batch ${scene.createdBatchId}`"
+							class="added-batch"
+						>#{{ scene.createdBatchId }}</span>
 					</div>
 
 					<div
@@ -246,28 +254,29 @@ async function unstash() {
 .banner-container {
 	background-position: center;
 	background-size: cover;
-	border-radius: .25rem .5rem 0 0;
+	border-radius: .5rem .5rem 0 0;
 	margin-top: .5rem;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
 }
 
 .banner {
 	max-height: 21rem;
-	border-radius: .5rem .5rem 0 0;
+	border-radius: .5rem 0 0 0;
 	display: flex;
 	font-size: 0;
-	backdrop-filter: blur(1rem);
+	backdrop-filter: brightness(150%) blur(1rem);
 	overflow: hidden;
 }
 
 .poster-container {
 	flex-shrink: 0;
-	padding: .5rem;
+	margin-right: .5rem;
 }
 
 .poster {
 	height: 100%;
 	width: 100%;
-	border-radius: .25rem;
+	border-radius: .25rem 0 0 0;
 }
 
 .poster,
@@ -282,19 +291,33 @@ async function unstash() {
 	height: auto;
 	flex-grow: 1;
 	display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-	gap: .5rem;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+	gap: .25rem;
+	box-sizing: border-box;
 	padding: .5rem .5rem .5rem 0;
 	overflow-y: auto;
+	scrollbar-width: 0;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+
+	&.single .photo {
+		max-height: calc(100% - 1.5rem);
+	}
 }
 
 .photo-container {
-	width: 100%;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 
+.photo-link {
+	width: 100%;
+	height: 100%;
+}
+
 .photo {
 	width: 100%;
 	height: 100%;
@@ -341,7 +364,7 @@ async function unstash() {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 1rem 1rem 1.5rem 1rem;
+	padding: 1rem 1rem 0.5rem 1rem;
 }
 
 .title {
@@ -447,7 +470,8 @@ async function unstash() {
 }
 
 .added-batch {
-	color: var(--shadow);
+	color: var(--shadow-weak-10);
+	margin-left: .25rem;
 }
 
 @media(--small-10) {
@@ -473,6 +497,14 @@ async function unstash() {
 	.album {
 		display: none;
 	}
+
+	.header {
+		padding: 1rem .5rem 1.5rem .5rem;
+	}
+
+	.info {
+		padding: 0 .5rem;
+	}
 }
 
 @media (--small) {

pages/scene/+onBeforeRender.js

@@ -1,7 +1,10 @@
 import { fetchScenesById } from '#/src/scenes.js';
 
 export async function onBeforeRender(pageContext) {
-	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], pageContext.user);
+	const [scene] = await fetchScenesById([Number(pageContext.routeParams.sceneId)], {
+		reqUser: pageContext.user,
+		actorStashes: true,
+	});
 
 	return {
 		pageContext: {