Separated full heart button into component.

assets/components/releases/release.vue

@@ -3,6 +3,7 @@
 		v-if="release"
 		ref="content"
 		class="content"
+		@scroll="events.emit('scroll', $event)"
 	>
 		<Scroll
 			v-slot="slotProps"
@@ -51,52 +52,11 @@
 					/>
 				</h2>
 
-				<span>
-					<Tooltip class="stash-trigger">
-						<Icon
-							v-show="me"
-							icon="menu"
-							class="stash noselect"
-							:class="{ stashed, stashing }"
-						/>
-
-						<template v-slot:tooltip>
-							<StashMenu
-								v-if="$route.name === 'scene'"
-								:item="release"
-								:stashed-by="stashedBy"
-								:class="{ stashing }"
-								@stash="(stashId) => stashScene(stashId)"
-								@unstash="(stashId) => unstashScene(stashId)"
-							/>
-
-							<StashMenu
-								v-if="$route.name === 'movie'"
-								:item="release"
-								:stashed-by="stashedBy"
-								:class="{ stashing }"
-								@stash="(stashId) => stashScene(stashId)"
-								@unstash="(stashId) => unstashScene(stashId)"
-							/>
-						</template>
-					</Tooltip>
-
-					<Icon
-						v-show="me && favorited"
-						:class="{ stashing }"
-						icon="heart7"
-						class="stash stashed noselect"
-						@click="() => unstashScene()"
-					/>
-
-					<Icon
-						v-show="me && !favorited"
-						:class="{ stashing }"
-						icon="heart8"
-						class="stash unstashed noselect"
-						@click="() => stashScene()"
-					/>
-				</span>
+				<StashButton
+					:stashed-by="stashedBy"
+					@stash="(stash) => stashScene(stash)"
+					@unstash="(stash) => unstashScene(stash)"
+				/>
 			</div>
 
 			<div class="row associations">
@@ -263,7 +223,7 @@
 <script>
 import Details from './details.vue';
 import Banner from './banner.vue';
-import StashMenu from '../stashes/menu.vue';
+import StashButton from '../stashes/button.vue';
 import Album from '../album/album.vue';
 import Tags from './tags.vue';
 import Chapters from './chapters.vue';
@@ -285,43 +245,28 @@ async function fetchRelease(scroll = true) {
 	}
 
 	this.stashedBy = this.release.stashes;
-	this.stashing = false;
 }
 
-async function stashScene(stash) {
-	this.stashing = true;
+async function stashScene(stashId) {
 	this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
 		sceneId: this.release.id,
 		movieId: this.release.id,
-		stashId: stash?.id || this.$store.getters.favorites.id,
+		stashId,
 	});
-
-	this.stashing = false;
 }
 
-async function unstashScene(stash) {
-	this.stashing = true;
+async function unstashScene(stashId) {
 	this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
 		sceneId: this.release.id,
 		movieId: this.release.id,
-		stashId: stash?.id || this.$store.getters.favorites.id,
+		stashId,
 	});
-
-	this.stashing = false;
 }
 
 function me() {
 	return this.$store.state.auth.user;
 }
 
-function favorited() {
-	return this.stashedBy.some(stash => stash.primary);
-}
-
-function stashed() {
-	return this.stashedBy.some(stash => !stash.primary);
-}
-
 function bannerBackground() {
 	return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
 		|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
@@ -346,14 +291,13 @@ export default {
 		Details,
 		Releases,
 		Scroll,
-		StashMenu,
+		StashButton,
 		Tags,
 	},
 	data() {
 		return {
 			release: null,
 			stashedBy: [],
-			stashing: false,
 		};
 	},
 	computed: {
@@ -361,8 +305,6 @@ export default {
 		bannerBackground,
 		me,
 		showAlbum,
-		favorited,
-		stashed,
 	},
 	watch: {
 		$route: fetchRelease,
@@ -446,26 +388,6 @@ export default {
 	color: var(--shadow);
 }
 
-.stash.icon {
-	width: 1.5rem;
-	height: 1.5rem;
-	padding: 0 .75rem;
-	fill: var(--shadow);
-
-	&.stashed {
-		fill: var(--primary);
-	}
-
-	&:hover {
-		fill: var(--primary);
-		cursor: pointer;
-	}
-}
-
-.stash-trigger {
-	display: inline-block;
-}
-
 .album-toggle {
 	height: fit-content;
 	display: inline-flex;