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

components/scenes/tile.vue

@@ -27,18 +27,13 @@
 				/>
 			</Link>
 
-			<Icon
-				v-show="favorited"
-				icon="heart7"
-				class="heart favorited"
-				@click.native.stop="unstash"
-			/>
-
-			<Icon
-				v-show="!favorited && user"
-				icon="heart8"
-				class="heart"
-				@click.native.stop="stash"
+			<Heart
+				domain="scenes"
+				:item="scene"
+				:show-secondary="false"
+				class="light tiled"
+				@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
+				@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
 			/>
 
 			<span
@@ -117,12 +112,9 @@
 import { ref, inject } from 'vue';
 import { format } from 'date-fns';
 
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
 import getPath from '#/src/get-path.js';
-import ellipsis from '#/utils/ellipsis.js';
 
-import Icon from '../icon/icon.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const props = defineProps({
 	scene: {
@@ -136,49 +128,6 @@ const user = pageContext.user;
 const pageStash = pageContext.pageProps.stash;
 
 const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.isPrimary));
-const fbCutoff = 20;
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: props.scene.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(props.scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(props.scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/scenes/${props.scene.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(props.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(props.scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -192,7 +141,7 @@ async function unstash() {
 	&:hover {
 		box-shadow: 0 0 3px var(--shadow-weak-20);
 
-		.heart {
+		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
 			fill: var(--text-light);
 		}
 	}
@@ -233,26 +182,6 @@ async function unstash() {
 	background-position: center;
 }
 
-.icon.heart {
-	width: 2rem;
-	height: 1.5rem;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .5rem .5rem 1rem 1rem;
-	fill: var(--highlight-strong-10);
-	filter: drop-shadow(0 0 3px var(--shadow));
-
-	&:hover {
-		cursor: pointer;
-		fill: var(--primary);
-	}
-
-	&.favorited {
-		fill: var(--primary);
-	}
-}
-
 .new {
 	display: flex;
 	flex-direction: row-reverse;