No longer reloading when stashing scene, immediately toggling heart locally and resetting on dispatch error.

assets/components/actors/actor.vue

@@ -365,11 +365,7 @@
 					:available-actors="actor.actors"
 				/>
 
-				<Releases
-					:releases="releases"
-					@stash="fetchActor(false)"
-					@unstash="fetchActor(false)"
-				/>
+				<Releases :releases="releases" />
 
 				<Pagination
 					:items-total="totalCount"

assets/components/entities/entity.vue

@@ -99,11 +99,7 @@
 			/>
 
 			<div class="releases">
-				<Releases
-					:releases="entity.releases"
-					@stash="fetchEntity(false)"
-					@unstash="fetchEntity(false)"
-				/>
+				<Releases :releases="entity.releases" />
 
 				<Pagination
 					:items-total="totalCount"

assets/components/home/home.vue

@@ -10,11 +10,7 @@
 				:content="$refs.content"
 			/>
 
-			<Releases
-				:releases="releases"
-				@stash="fetchReleases(false)"
-				@unstash="fetchReleases(false)"
-			/>
+			<Releases :releases="releases" />
 
 			<Pagination
 				v-if="totalCount > 0"

assets/components/releases/releases.vue

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

assets/components/releases/scene-tile.vue

@@ -42,14 +42,14 @@
 					><Icon icon="blocked" />No thumbnail available</div>
 
 					<Icon
-						v-show="release.isStashed"
+						v-show="stashed"
 						icon="heart7"
 						class="stash stashed"
 						@click.prevent.native="unstashScene"
 					/>
 
 					<Icon
-						v-show="release.isStashed === false"
+						v-show="stashed === false"
 						icon="heart8"
 						class="stash unstashed"
 						@click.prevent.native="stashScene"
@@ -148,21 +148,29 @@
 import Details from './tile-details.vue';
 
 async function stashScene() {
-	this.$store.dispatch('stashScene', {
+	this.stashed = true;
+
+	try {
+		await this.$store.dispatch('stashScene', {
 			sceneId: this.release.id,
 			stashId: this.$store.getters.favorites.id,
 		});
-
-	this.$emit('stash');
+	} catch (error) {
+		this.stashed = false;
+	}
 }
 
 async function unstashScene() {
+	this.stashed = false;
+
+	try {
 		this.$store.dispatch('unstashScene', {
 			sceneId: this.release.id,
 			stashId: this.$store.getters.favorites.id,
 		});
-
-	this.$emit('unstash');
+	} catch (error) {
+		this.stashed = true;
+	}
 }
 
 export default {
@@ -175,7 +183,11 @@ export default {
 			default: null,
 		},
 	},
-	emits: ['stash', 'unstash'],
+	data() {
+		return {
+			stashed: this.release.isStashed,
+		};
+	},
 	methods: {
 		stashScene,
 		unstashScene,

assets/components/tags/tag.vue

@@ -49,11 +49,7 @@
 				:fetch-releases="fetchReleases"
 			/>
 
-			<Releases
-				:releases="releases"
-				@stash="fetchReleases(false)"
-				@unstash="fetchReleases(false)"
-			/>
+			<Releases :releases="releases" />
 
 			<Pagination
 				:items-total="totalCount"

assets/components/users/user.vue

@@ -99,6 +99,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import 'breakpoints';
+
 .header {
 	padding: .5rem 1rem;
 	background: var(--profile);
@@ -174,4 +176,10 @@ export default {
 .stash-scene {
 	flex-shrink: 0;
 }
+
+@media(max-width: $breakpoint-kilo) {
+	.stashes {
+		grid-template-columns: 1fr;
+	}
+}
 </style>