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>
 
+				<span>
+					<Tooltip class="stash-trigger">
 						<Icon
-					v-show="me && stashed"
+							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"
+						@click="() => unstashScene()"
 					/>
 
 					<Icon
-					v-show="me && !stashed"
+						v-show="me && !favorited"
+						:class="{ stashing }"
 						icon="heart8"
 						class="stash unstashed noselect"
-					@click="stashScene"
+						@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;
-
-	try {
-		this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
+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: this.$store.getters.favorites.id,
+		stashId: stash?.id || this.$store.getters.favorites.id,
 	});
-	} catch (error) {
-		this.stashed = false;
-	}
+
+	this.stashing = false;
 }
 
-async function unstashScene() {
-	this.stashed = false;
-
-	try {
-		this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
+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: this.$store.getters.favorites.id,
+		stashId: stash?.id || 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 {

assets/css/_theme.scss

@@ -26,12 +26,14 @@ $breakpoint4: 1500px;
     --darken-censor: rgba(0, 0, 0, .95);
     --darken-weak: rgba(0, 0, 0, .2);
     --darken-hint: rgba(0, 0, 0, .1);
+    --darken-touch: rgba(0, 0, 0, .05);
 
     --lighten: rgba(255, 255, 255, .5);
     --lighten-strong: rgba(255, 255, 255, .7);
     --lighten-extreme: rgba(255, 255, 255, .9);
     --lighten-weak: rgba(255, 255, 255, .2);
     --lighten-hint: rgba(255, 255, 255, .05);
+    --lighten-touch: rgba(255, 255, 255, .03);
 
     --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
     --logo-highlight: drop-shadow(0 0 1px $highlight);

assets/js/api.js

@@ -66,6 +66,12 @@ async function del(endpoint) {
 		credentials: 'same-origin',
 	});
 
+	const contentTypes = res.headers.get('content-type');
+
+	if (res.ok && contentTypes?.includes('application/json')) {
+		return res.json();
+	}
+
 	if (res.ok) {
 		return true;
 	}

assets/js/curate.js

@@ -56,6 +56,10 @@ function curateActor(actor, release) {
 		curatedActor.aliasFor = curateActor(curatedActor.aliasFor);
 	}
 
+	if (actor.stashes) {
+		curatedActor.stashes = actor.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
+	}
+
 	curatedActor.stashes = actor.stashes?.map(stash => stash.stash || stash) || [];
 
 	return curatedActor;
@@ -80,6 +84,7 @@ function curateRelease(release) {
 	if (release.directors) curatedRelease.directors = release.directors.filter(Boolean).map(director => curateActor(director.director || director, curatedRelease));
 	if (release.movieTags && release.movieTags.length > 0) curatedRelease.tags = release.movieTags.filter(Boolean).map(({ tag }) => tag);
 	if (release.movieActors && release.movieActors.length > 0) curatedRelease.actors = release.movieActors.filter(Boolean).map(({ actor }) => curateActor(actor, curatedRelease));
+	if (release.stashes) curatedRelease.stashes = release.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
 
 	if (release.productionLocation) {
 		curatedRelease.productionLocation = {
@@ -155,7 +160,7 @@ function curateUser(user) {
 	const curatedUser = user;
 
 	if (user.stashes) {
-		curatedUser.stashes = user.stashes.map(stash => curateStash(stash));
+		curatedUser.stashes = user.stashes.map(stash => curateStash(stash.stash || stash));
 	}
 
 	return curatedUser;

assets/js/fragments.js

@@ -228,7 +228,8 @@ const releaseFields = `
         url
     }
     isNew
-	isStashed
+	isFavorited
+	isStashed(includeFavorites: false)
 	stashes: stashesScenesBySceneId(
 		filter: {
 			stash: {
@@ -242,6 +243,7 @@ const releaseFields = `
 			id
 			name
 			slug
+			primary
 		}
 	}
 `;
@@ -368,7 +370,8 @@ const releaseFragment = `
 			}
 		}
 	}
-	isStashed
+	isFavorited
+	isStashed(includeFavorites: false)
 	stashes: stashesScenesBySceneId(
 		filter: {
 			stash: {
@@ -382,6 +385,7 @@ const releaseFragment = `
 			id
 			name
 			slug
+			primary
 		}
 	}
   }

assets/js/stashes/actions.js

@@ -21,7 +21,7 @@ function initStashesActions(store, _router) {
 					name
 					slug
 					public
-					deletable
+					primary
 					user {
 						id
 						username
@@ -69,15 +69,11 @@ function initStashesActions(store, _router) {
 	}
 
 	async function createStash(context, stash) {
-		const newStash = await post('/stashes', stash);
-
-		return newStash;
+		return post('/stashes', stash);
 	}
 
 	async function updateStash(context, { stashId, stash }) {
-		const newStash = await patch(`/stashes/${stashId}`, stash);
-
-		return newStash;
+		return patch(`/stashes/${stashId}`, stash);
 	}
 
 	async function removeStash(context, stashId) {
@@ -85,27 +81,27 @@ function initStashesActions(store, _router) {
 	}
 
 	async function stashActor(context, { actorId, stashId }) {
-		await post(`/stashes/${stashId}/actors`, { actorId });
+		return post(`/stashes/${stashId}/actors`, { actorId });
 	}
 
 	async function unstashActor(context, { actorId, stashId }) {
-		await del(`/stashes/${stashId}/actors/${actorId}`);
+		return del(`/stashes/${stashId}/actors/${actorId}`);
 	}
 
 	async function stashScene(context, { sceneId, stashId }) {
-		await post(`/stashes/${stashId}/scenes`, { sceneId });
+		return post(`/stashes/${stashId}/scenes`, { sceneId });
 	}
 
 	async function unstashScene(context, { sceneId, stashId }) {
-		await del(`/stashes/${stashId}/scenes/${sceneId}`);
+		return del(`/stashes/${stashId}/scenes/${sceneId}`);
 	}
 
 	async function stashMovie(context, { movieId, stashId }) {
-		await post(`/stashes/${stashId}/movies`, { movieId });
+		return post(`/stashes/${stashId}/movies`, { movieId });
 	}
 
 	async function unstashMovie(context, { movieId, stashId }) {
-		await del(`/stashes/${stashId}/movies/${movieId}`);
+		return del(`/stashes/${stashId}/movies/${movieId}`);
 	}
 
 	return {

assets/js/users/actions.js

@@ -19,7 +19,7 @@ function initUsersActions(store, _router) {
 						name
 						slug
 						public
-						deletable
+						primary
 						actors: stashesActors {
 							comment
 							actor {

migrations/20190325001339_releases.js

@@ -1067,9 +1067,9 @@ exports.up = knex => Promise.resolve()
 			.notNullable()
 			.defaultTo(false);
 
-		table.boolean('deletable')
+		table.boolean('primary')
 			.notNullable()
-			.defaultTo(true);
+			.defaultTo(false);
 
 		table.datetime('created_at')
 			.notNullable()

src/auth.js

@@ -80,7 +80,7 @@ async function signup(credentials) {
 		name: 'Favorites',
 		slug: 'favorites',
 		public: false,
-		deletable: false,
+		primary: true,
 	});
 
 	return fetchUser(userId);

src/stashes.js

@@ -13,6 +13,7 @@ function curateStash(stash) {
 		id: stash.id,
 		name: stash.name,
 		slug: stash.slug,
+		primary: stash.primary,
 	};
 
 	return curatedStash;
@@ -48,6 +49,18 @@ async function fetchStash(stashId, sessionUser) {
 	return curateStash(stash);
 }
 
+async function fetchStashes(domain, itemId, sessionUser) {
+	const stashes = await knex(`stashes_${domain}s`)
+		.select('stashes.*')
+		.where({
+			[`${domain}_id`]: itemId,
+			user_id: sessionUser.id,
+		})
+		.leftJoin('stashes', 'stashes.id', `stashes_${domain}s.stash_id`);
+
+	return stashes.map(stash => curateStash(stash));
+}
+
 async function createStash(newStash, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
@@ -89,7 +102,7 @@ async function removeStash(stashId, sessionUser) {
 		.where({
 			id: stashId,
 			user_id: sessionUser.id,
-			deletable: true,
+			primary: false,
 		})
 		.delete();
 
@@ -106,6 +119,8 @@ async function stashActor(actorId, stashId, sessionUser) {
 			stash_id: stash.id,
 			actor_id: actorId,
 		});
+
+	return fetchStashes('actor', actorId, sessionUser);
 }
 
 async function stashScene(sceneId, stashId, sessionUser) {
@@ -116,6 +131,8 @@ async function stashScene(sceneId, stashId, sessionUser) {
 			stash_id: stash.id,
 			scene_id: sceneId,
 		});
+
+	return fetchStashes('scene', sceneId, sessionUser);
 }
 
 async function stashMovie(movieId, stashId, sessionUser) {
@@ -126,6 +143,8 @@ async function stashMovie(movieId, stashId, sessionUser) {
 			stash_id: stash.id,
 			movie_id: movieId,
 		});
+
+	return fetchStashes('movie', movieId, sessionUser);
 }
 
 async function unstashActor(actorId, stashId, sessionUser) {
@@ -138,6 +157,8 @@ async function unstashActor(actorId, stashId, sessionUser) {
 			.where('stashes_actors.stash_id', knex.raw('deletable.stash_id'))
 			.where('stashes.user_id', sessionUser.id))
 		.delete();
+
+	return fetchStashes('actor', actorId, sessionUser);
 }
 
 async function unstashScene(sceneId, stashId, sessionUser) {
@@ -150,6 +171,8 @@ async function unstashScene(sceneId, stashId, sessionUser) {
 			.where('stashes_scenes.stash_id', knex.raw('deletable.stash_id'))
 			.where('stashes.user_id', sessionUser.id))
 		.delete();
+
+	return fetchStashes('scene', sceneId, sessionUser);
 }
 
 async function unstashMovie(movieId, stashId, sessionUser) {
@@ -162,6 +185,8 @@ async function unstashMovie(movieId, stashId, sessionUser) {
 			.where('stashes_movies.stash_id', knex.raw('deletable.stash_id'))
 			.where('stashes.user_id', sessionUser.id))
 		.delete();
+
+	return fetchStashes('movie', movieId, sessionUser);
 }
 
 module.exports = {

src/web/auth.js

@@ -22,7 +22,7 @@ async function logoutApi(req, res) {
 
 async function fetchMeApi(req, res) {
 	if (req.session.user) {
-		req.session.user = await fetchUser(req.session.user.id, req.session.user);
+		req.session.user = await fetchUser(req.session.user.id, false, req.session.user);
 
 		res.send(req.session.user);
 		return;

src/web/plugins/actors.js

@@ -12,7 +12,8 @@ const schemaExtender = makeExtendSchemaPlugin(_build => ({
         }
 
       extend type Actor {
-		isStashed: Boolean @requires(columns: ["stashesActors"])
+		isFavorited: Boolean @requires(columns: ["stashesActors"])
+		isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesActors"])
         ageFromBirth: Int @requires(columns: ["dateOfBirth"])
         ageAtDeath: Int @requires(columns: ["dateOfBirth", "dateOfDeath"])
         height(units: Units): String @requires(columns: ["height"])
@@ -23,12 +24,23 @@ const schemaExtender = makeExtendSchemaPlugin(_build => ({
     `,
 	resolvers: {
 		Actor: {
-			isStashed(parent) {
-				if (!parent['@stashes']) {
+			isFavorited(parent) {
+				if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
 					return null;
 				}
 
+				return parent['@stashes'].some(({ '@stash': stash }) => stash.primary);
+			},
+			isStashed(parent, args) {
+				if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
+					return null;
+				}
+
+				if (args.includeFavorites) {
 					return parent['@stashes'].length > 0;
+				}
+
+				return parent['@stashes'].some(({ '@stash': stash }) => !stash.primary);
 			},
 			ageFromBirth(parent, _args, _context, _info) {
 				if (!parent.dateOfBirth) return null;

src/web/plugins/releases.js

@@ -5,17 +5,29 @@ const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
 const schemaExtender = makeExtendSchemaPlugin(_build => ({
 	typeDefs: gql`
 	  extend type Release {
-		isStashed: Boolean @requires(columns: ["stashesScenesBySceneId"])
+		isFavorited: Boolean @requires(columns: ["stashesScenesBySceneId"])
+		isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesScenesBySceneId"])
 	  }
     `,
 	resolvers: {
 		Release: {
-			isStashed(parent) {
-				if (!parent['@stashes']) {
+			isFavorited(parent) {
+				if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
 					return null;
 				}
 
+				return parent['@stashes'].some(({ '@stash': stash }) => stash.primary);
+			},
+			isStashed(parent, args) {
+				if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
+					return null;
+				}
+
+				if (args.includeFavorites) {
 					return parent['@stashes'].length > 0;
+				}
+
+				return parent['@stashes'].some(({ '@stash': stash }) => !stash.primary);
 			},
 		},
 	},

src/web/stashes.js

@@ -31,39 +31,39 @@ async function removeStashApi(req, res) {
 }
 
 async function stashActorApi(req, res) {
-	await stashActor(req.body.actorId, req.params.stashId, req.session.user);
+	const stashes = await stashActor(req.body.actorId, req.params.stashId, req.session.user);
 
-	res.status(201).send();
+	res.send(stashes);
 }
 
 async function stashSceneApi(req, res) {
-	await stashScene(req.body.sceneId, req.params.stashId, req.session.user);
+	const stashes = await stashScene(req.body.sceneId, req.params.stashId, req.session.user);
 
-	res.status(201).send();
+	res.send(stashes);
 }
 
 async function stashMovieApi(req, res) {
-	await stashMovie(req.body.movieId, req.params.stashId, req.session.user);
+	const stashes = await stashMovie(req.body.movieId, req.params.stashId, req.session.user);
 
-	res.status(201).send();
+	res.send(stashes);
 }
 
 async function unstashActorApi(req, res) {
-	await unstashActor(req.params.actorId, req.params.stashId, req.session.user);
+	const stashes = await unstashActor(req.params.actorId, req.params.stashId, req.session.user);
 
-	res.status(204).send();
+	res.send(stashes);
 }
 
 async function unstashSceneApi(req, res) {
-	await unstashScene(req.params.sceneId, req.params.stashId, req.session.user);
+	const stashes = await unstashScene(req.params.sceneId, req.params.stashId, req.session.user);
 
-	res.status(204).send();
+	res.send(stashes);
 }
 
 async function unstashMovieApi(req, res) {
-	await unstashMovie(req.params.movieId, req.params.stashId, req.session.user);
+	const stashes = await unstashMovie(req.params.movieId, req.params.stashId, req.session.user);
 
-	res.status(204).send();
+	res.send(stashes);
 }
 
 module.exports = {