Added favorite stash heart to scene tiles.

assets/components/actors/actor.vue

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

assets/components/entities/entity.vue

@@ -99,7 +99,11 @@
 			/>
 
 			<div class="releases">
-				<Releases :releases="entity.releases" />
+				<Releases
+					:releases="entity.releases"
+					@stash="fetchEntity(false)"
+					@unstash="fetchEntity(false)"
+				/>
 
 				<Pagination
 					:items-total="totalCount"
@@ -120,7 +124,7 @@ import Releases from '../releases/releases.vue';
 import Children from './children.vue';
 import Scroll from '../scroll/scroll.vue';
 
-async function fetchEntity() {
+async function fetchEntity(scroll = true) {
 	const { entity, totalCount } = await this.$store.dispatch('fetchEntityBySlugAndType', {
 		entitySlug: this.$route.params.entitySlug,
 		entityType: this.$route.name,
@@ -134,7 +138,9 @@ async function fetchEntity() {
 
 	this.pageTitle = entity.name;
 
-	this.$refs.filter.$el.scrollIntoView();
+	if (scroll) {
+		this.$refs.filter.$el.scrollIntoView();
+	}
 }
 
 async function mounted() {

assets/components/home/home.vue

@@ -10,7 +10,11 @@
 				:content="$refs.content"
 			/>
 
-			<Releases :releases="releases" />
+			<Releases
+				:releases="releases"
+				@stash="fetchReleases(false)"
+				@unstash="fetchReleases(false)"
+			/>
 
 			<Pagination
 				v-if="totalCount > 0"
@@ -29,7 +33,7 @@ import FilterBar from '../filters/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Pagination from '../pagination/pagination.vue';
 
-async function fetchReleases() {
+async function fetchReleases(scroll = true) {
 	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
 		limit: this.limit,
 		range: this.$route.params.range,
@@ -39,7 +43,9 @@ async function fetchReleases() {
 	this.totalCount = totalCount;
 	this.releases = releases;
 
-	this.$refs.filter?.$el.scrollIntoView();
+	if (scroll) {
+		this.$refs.filter?.$el.scrollIntoView();
+	}
 }
 
 async function mounted() {

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;

assets/components/tags/tag.vue

@@ -49,7 +49,11 @@
 				:fetch-releases="fetchReleases"
 			/>
 
-			<Releases :releases="releases" />
+			<Releases
+				:releases="releases"
+				@stash="fetchReleases(false)"
+				@unstash="fetchReleases(false)"
+			/>
 
 			<Pagination
 				:items-total="totalCount"
@@ -76,7 +80,7 @@ import Scroll from '../scroll/scroll.vue';
 
 const converter = new Converter();
 
-async function fetchReleases() {
+async function fetchReleases(scroll = true) {
 	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
 		tagSlug: this.$route.params.tagSlug,
 		pageNumber: Number(this.$route.params.pageNumber),
@@ -91,7 +95,7 @@ async function fetchReleases() {
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 
-	if (this.$refs.filter) {
+	if (scroll && this.$refs.filter) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
 }