Added secondary stash button, centralized bookmark (heart) component.

pages/scene/+Page.vue

@@ -123,26 +123,10 @@
 				>No title</h2>
 
 				<div class="actions">
-					<div
-						v-if="user"
-						class="bookmarks"
-					>
-						<Icon icon="folder-heart" />
-
-						<Icon
-							v-show="favorited"
-							icon="heart7"
-							class="heart favorited"
-							@click.native.stop="unstash"
-						/>
-
-						<Icon
-							v-show="!favorited"
-							icon="heart8"
-							class="heart"
-							@click.native.stop="stash"
-						/>
-					</div>
+					<Heart
+						domain="scenes"
+						:item="scene"
+					/>
 
 					<div class="view">
 						<button
@@ -244,26 +228,19 @@
 <script setup>
 import { ref, computed, inject } from 'vue';
 
-import { post, del } from '#/src/api.js';
 import { formatDate, formatDuration } from '#/utils/format.js';
-import events from '#/src/events.js';
 import getPath from '#/src/get-path.js';
-import ellipsis from '#/utils/ellipsis.js';
 
-import Icon from '#/components/icon/icon.vue';
 import ActorTile from '#/components/actors/tile.vue';
 import Player from '#/components/video/player.vue';
+import Heart from '#/components/stashes/heart.vue';
 
-const { pageProps, user } = inject('pageContext');
+const { pageProps } = inject('pageContext');
 const { scene } = pageProps;
 
-const favorited = ref(scene.stashes.some((sceneStash) => sceneStash.primary));
-
 const playing = ref(false);
 const paused = ref(false);
 
-const fbCutoff = 20;
-
 const poster = computed(() => {
 	if (scene.poster) {
 		return getPath(scene.poster, 'thumbnail');
@@ -279,48 +256,6 @@ const poster = computed(() => {
 
 	return null;
 });
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: scene.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/scenes/${scene.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash "${ellipsis(scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -506,12 +441,6 @@ async function unstash() {
 	justify-content: space-between;
 	flex-shrink: 0;
 
-	.icon {
-		width: 1.5rem;
-		height: 1.5rem;
-		fill: var(--shadow);
-	}
-
 	.button {
 		flex-shrink: 0;
 		padding: .75rem;
@@ -523,18 +452,7 @@ async function unstash() {
 }
 
 .bookmarks {
-	display: flex;
 	margin-right: .75rem;
-
-	.icon {
-		padding: .5rem .5rem;
-	}
-
-	.icon.heart:hover,
-	.icon.heart.favorited {
-		cursor: pointer;
-		fill: var(--primary);
-	}
 }
 
 .view {