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>
+				<StashButton
-					<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="(stash) => stashScene(stash)"
-								@stash="(stashId) => stashScene(stashId)"
+					@unstash="(stash) => unstashScene(stash)"
-								@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">
@@ -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) {
+async function stashScene(stashId) {
-	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,
+		stashId,
 	});
-
-	this.stashing = false;
 }
 
-async function unstashScene(stash) {
+async function unstashScene(stashId) {
-	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,
+		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;

assets/components/stashes/button.vue

@@ -0,0 +1,95 @@
+<template>
+	<span>
+		<Tooltip class="stash-trigger">
+			<Icon
+				v-show="me"
+				icon="menu"
+				class="stash noselect"
+				:class="{ stashed }"
+			/>
+
+			<template v-slot:tooltip>
+				<StashMenu
+					:stashed-by="stashedBy"
+					@stash="(stashId) => $emit('stash', stashId)"
+					@unstash="(stashId) => $emit('unstash', stashId)"
+				/>
+			</template>
+		</Tooltip>
+
+		<Icon
+			v-show="me && favorited"
+			icon="heart7"
+			class="stash stashed noselect"
+			@click.native="() => $emit('unstash', favorites.id)"
+		/>
+
+		<Icon
+			v-show="me && !favorited"
+			icon="heart8"
+			class="stash unstashed noselect"
+			@click.native="() => $emit('stash', favorites.id)"
+		/>
+	</span>
+</template>
+
+<script>
+import StashMenu from './menu.vue';
+
+function favorited() {
+	return this.stashedBy.some(stash => stash.primary);
+}
+
+function stashed() {
+	return this.stashedBy.some(stash => !stash.primary);
+}
+
+function favorites() {
+	return this.$store.getters.favorites;
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
+export default {
+	components: {
+		StashMenu,
+	},
+	props: {
+		stashedBy: {
+			type: Array,
+			default: () => [],
+		},
+	},
+	emits: ['stash', 'unstash'],
+	computed: {
+		me,
+		favorites,
+		favorited,
+		stashed,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.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;
+}
+</style>

assets/components/stashes/menu.vue

@@ -9,7 +9,7 @@
 				<Checkbox
 					:checked="stashedByIds.has(stash.id)"
 					class="menu-check"
-					@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)"
+					@change="(checked) => checked ? $emit('stash', stash.id) : $emit('unstash', stash.id)"
 				/>{{ stash.name }}
 			</label>
 		</li>
@@ -28,10 +28,6 @@ export default {
 		Checkbox,
 	},
 	props: {
-		item: {
-			type: Object,
-			default: null,
-		},
 		stashedBy: {
 			type: Array,
 			default: () => [],

src/users.js

@@ -26,7 +26,7 @@ function curateUser(user) {
 
 async function fetchUser(userId, raw) {
 	const user = await knex('users')
-		.select(knex.raw('users.*, users_roles.abilities as role_abilities, COALESCE(json_agg(stashes) FILTER (WHERE stashes.id IS NOT NULL), \'[]\') as stashes'))
+		.select(knex.raw('users.*, users_roles.abilities as role_abilities, COALESCE(json_agg(stashes ORDER BY stashes.created_at) FILTER (WHERE stashes.id IS NOT NULL), \'[]\') as stashes'))
 		.modify((builder) => {
 			if (typeof userId === 'number') {
 				builder.where('users.id', userId);