Added favorite stash heart to scene tiles.

assets/components/releases/release.vue

@@ -52,14 +52,14 @@
 				</h2>
 
 				<Icon
-					v-show="me && isStashed"
+					v-show="me && release.isStashed"
 					icon="heart7"
 					class="stash stashed noselect"
 					@click="unstashScene"
 				/>
 
 				<Icon
-					v-show="me && !isStashed"
+					v-show="me && !release.isStashed"
 					icon="heart8"
 					class="stash unstashed noselect"
 					@click="stashScene"
@@ -275,10 +275,6 @@ function me() {
 	return this.$store.state.auth.user;
 }
 
-function isStashed() {
-	return this.release.stashes?.length > 0;
-}
-
 function bannerBackground() {
 	return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
 		|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
@@ -313,7 +309,6 @@ export default {
 	computed: {
 		pageTitle,
 		bannerBackground,
-		isStashed,
 		me,
 		showAlbum,
 	},

assets/components/releases/releases.vue

@@ -18,6 +18,8 @@
 					:release="release"
 					:referer="referer"
 					:index="index"
+					@stash="$emit('stash')"
+					@unstash="$emit('unstash')"
 				/>
 			</li>
 		</ul>
@@ -63,6 +65,7 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['stash', 'unstash'],
 	computed: {
 		range,
 		sfw,

assets/components/releases/scene-tile.vue

@@ -40,6 +40,20 @@
 						:title="release.title"
 						class="thumbnail unavailable"
 					><Icon icon="blocked" />No thumbnail available</div>
+
+					<Icon
+						v-show="release.isStashed"
+						icon="heart7"
+						class="stash stashed"
+						@click.prevent.native="unstashScene"
+					/>
+
+					<Icon
+						v-show="release.isStashed === false"
+						icon="heart8"
+						class="stash unstashed"
+						@click.prevent.native="stashScene"
+					/>
 				</a>
 			</span>
 
@@ -133,6 +147,24 @@
 <script>
 import Details from './tile-details.vue';
 
+async function stashScene() {
+	this.$store.dispatch('stashScene', {
+		sceneId: this.release.id,
+		stashId: this.$store.getters.favorites.id,
+	});
+
+	this.$emit('stash');
+}
+
+async function unstashScene() {
+	this.$store.dispatch('unstashScene', {
+		sceneId: this.release.id,
+		stashId: this.$store.getters.favorites.id,
+	});
+
+	this.$emit('unstash');
+}
+
 export default {
 	components: {
 		Details,
@@ -143,6 +175,11 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['stash', 'unstash'],
+	methods: {
+		stashScene,
+		unstashScene,
+	},
 };
 </script>
 
@@ -167,13 +204,17 @@ export default {
 		width: 1rem;
 		height: 1rem;
 		box-sizing: border-box;
-		padding: .1rem;
+		padding: .375rem .25rem;
 		border-radius: 0 0 .5rem 0;
-		color: var(--text-light);
-		background: var(--primary);
-		font-size: .8rem;
+		color: var(--primary);
+		font-size: 1rem;
 		font-weight: bold;
 		line-height: 1;
+		text-shadow: 0 0 2px var(--darken-weak);
+	}
+
+	&:hover .unstashed {
+		fill: var(--lighten);
 	}
 }
 
@@ -216,6 +257,22 @@ export default {
 	}
 }
 
+.stash {
+	width: 1.25rem;
+	height: 1.25rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: .25rem .25rem .5rem .5rem;
+	filter: drop-shadow(0 0 2px var(--darken-weak));
+	fill: var(--lighten-weak);
+
+	&:hover.unstashed,
+	&.stashed {
+		fill: var(--primary);
+	}
+}
+
 .row {
     display: flex;
     justify-content: space-between;