Added stash menu to release page, returning stashes from stash API to avoid reloading or local interpolation.

assets/components/releases/release.vue

@@ -51,19 +51,52 @@
 					/>
 				</h2>
 
-				<Icon
-					v-show="me && stashed"
-					icon="heart7"
-					class="stash stashed noselect"
-					@click="unstashScene"
-				/>
+				<span>
+					<Tooltip class="stash-trigger">
+						<Icon
+							v-show="me"
+							icon="menu"
+							class="stash noselect"
+							:class="{ stashed, stashing }"
+						/>
 
-				<Icon
-					v-show="me && !stashed"
-					icon="heart8"
-					class="stash unstashed noselect"
-					@click="stashScene"
-				/>
+						<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>
 			</div>
 
 			<div class="row associations">
@@ -230,6 +263,7 @@
 <script>
 import Details from './details.vue';
 import Banner from './banner.vue';
+import StashMenu from '../stashes/menu.vue';
 import Album from '../album/album.vue';
 import Tags from './tags.vue';
 import Chapters from './chapters.vue';
@@ -250,41 +284,44 @@ async function fetchRelease(scroll = true) {
 		this.$refs.content.scrollTop = 0;
 	}
 
-	this.stashed = this.release.isStashed;
+	this.stashedBy = this.release.stashes;
+	this.stashing = false;
 }
 
-async function stashScene() {
-	this.stashed = true;
+async function stashScene(stash) {
+	this.stashing = true;
+	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,
+	});
 
-	try {
-		this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
-			sceneId: this.release.id,
-			movieId: this.release.id,
-			stashId: this.$store.getters.favorites.id,
-		});
-	} catch (error) {
-		this.stashed = false;
-	}
+	this.stashing = false;
 }
 
-async function unstashScene() {
-	this.stashed = false;
+async function unstashScene(stash) {
+	this.stashing = true;
+	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,
+	});
 
-	try {
-		this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
-			sceneId: this.release.id,
-			movieId: this.release.id,
-			stashId: this.$store.getters.favorites.id,
-		});
-	} catch (error) {
-		this.stashed = true;
-	}
+	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'));
@@ -304,17 +341,19 @@ export default {
 	components: {
 		Actor,
 		Album,
-		Details,
 		Banner,
-		Scroll,
-		Releases,
 		Chapters,
+		Details,
+		Releases,
+		Scroll,
+		StashMenu,
 		Tags,
 	},
 	data() {
 		return {
 			release: null,
-			stashed: false,
+			stashedBy: [],
+			stashing: false,
 		};
 	},
 	computed: {
@@ -322,6 +361,8 @@ export default {
 		bannerBackground,
 		me,
 		showAlbum,
+		favorited,
+		stashed,
 	},
 	watch: {
 		$route: fetchRelease,
@@ -408,7 +449,7 @@ export default {
 .stash.icon {
 	width: 1.5rem;
 	height: 1.5rem;
-	padding: 0 1rem;
+	padding: 0 .75rem;
 	fill: var(--shadow);
 
 	&.stashed {
@@ -421,6 +462,10 @@ export default {
 	}
 }
 
+.stash-trigger {
+	display: inline-block;
+}
+
 .album-toggle {
 	height: fit-content;
 	display: inline-flex;

assets/components/stashes/menu.vue

@@ -0,0 +1,74 @@
+<template>
+	<ul class="menu nolist">
+		<li
+			v-for="stash in stashes"
+			:key="`stash-${stash.id}`"
+			class="menu-item"
+		>
+			<label class="menu-stash noselect">
+				<Checkbox
+					:checked="stashedByIds.has(stash.id)"
+					class="menu-check"
+					@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)"
+				/>{{ stash.name }}
+			</label>
+		</li>
+	</ul>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function stashes() {
+	return this.$store.state.auth.user?.stashes || [];
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	props: {
+		item: {
+			type: Object,
+			default: null,
+		},
+		stashedBy: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['stash', 'unstash'],
+	data() {
+		const stashedByIds = new Set(this.stashedBy.map(stash => stash.id));
+
+		return {
+			stashedByIds,
+		};
+	},
+	computed: {
+		stashes,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.menu-item {
+	display: block;
+}
+
+.menu-stash {
+	display: flex;
+	align-items: center;
+	padding: .5rem 1rem .5rem .5rem;
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+	}
+}
+
+.menu-check {
+	display: inline-block;
+	margin: 0 .75rem 0 0;
+}
+</style>

assets/components/stashes/stash.vue

@@ -40,7 +40,7 @@
 				</label>
 
 				<Icon
-					v-if="isMine && stash.deletable"
+					v-if="isMine && !stash.primary"
 					icon="bin"
 					class="stash-remove"
 					@click.native="showRemoveStash = true"

assets/components/users/stash.vue

@@ -33,7 +33,7 @@
 				</label>
 
 				<Icon
-					v-if="isMe && stash.deletable"
+					v-if="isMe && !stash.primary"
 					icon="bin"
 					class="stash-remove"
 					@click.native="showRemoveStash = true"

assets/components/users/user.vue

@@ -11,9 +11,17 @@
 			v-if="user.stashes?.length > 0"
 			class="section"
 		>
-			<h3 class="heading">Stashes</h3>
+			<div class="section-header">
+				<h3 class="section-heading">Stashes</h3>
 
-			<ul class="stashes nolist">
+				<Icon
+					icon="plus3"
+					class="header-add"
+					@click="showAddStash = true"
+				/>
+			</div>
+
+			<ul class="section-body stashes nolist">
 				<li
 					v-for="stash in user.stashes"
 					:key="stash.id"
@@ -94,11 +102,13 @@ export default {
 @import 'breakpoints';
 
 .header {
-	padding: .5rem 1rem;
+	display: flex;
+	justify-content: space-between;
 	background: var(--profile);
 }
 
 .username {
+	padding: .5rem 1rem;
 	margin: 0;
 	font-size: 1.5rem;
 	color: var(--text-light);
@@ -108,7 +118,7 @@ export default {
 }
 
 .section {
-	padding: 1rem;
+	padding: 1rem 0;
 	margin: 0 0 1rem 0;
 }
 
@@ -119,8 +129,33 @@ export default {
 	grid-gap: 1rem;
 }
 
-.heading {
+.section-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin: 0 0 1rem 0;
+}
+
+.section-body {
+	padding: 0 1rem;
+}
+
+.section-heading {
 	color: var(--primary);
+	padding: 0 1rem;
+	margin: 0;
+	font-size: 1.25rem;
+}
+
+.header-add {
+	height: auto;
+	padding: .5rem 1rem;
+	fill: var(--shadow);
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
 }
 
 .stashes-stash {