Updating stash page when stashing scene. Improved layout.

assets/components/stashes/stash.vue

@@ -14,15 +14,13 @@
 		</div>
 
 		<div class="content-inner">
-			<ul
+			<Releases
 				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>
+				:releases="stash.scenes.map(item => item.scene)"
+				class="stash-section stash-scenes"
+				@stash="fetchStash"
+				@unstash="fetchStash"
+			/>
 
 			<ul
 				v-if="stash.actors?.length > 0"
@@ -39,7 +37,7 @@
 
 <script>
 import Actor from '../actors/tile.vue';
-import Scene from '../releases/scene-tile.vue';
+import Releases from '../releases/releases.vue';
 
 async function fetchStash() {
 	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
@@ -52,7 +50,7 @@ async function mounted() {
 export default {
 	components: {
 		Actor,
-		Scene,
+		Releases,
 	},
 	data() {
 		return {
@@ -89,27 +87,23 @@ export default {
 	}
 }
 
-.stash-section {
-	padding: 1rem;
-
-	&:not(:last-child) {
+.stash-section: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 {
+    display: grid;
+    grid-gap: .5rem;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+	flex-grow: 1;
+	padding: 1rem;
 }
 
 .stash-scenes {
+	flex-grow: 0;
+
+	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+	}
 }
 </style>