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

components/movies/tile.vue

@@ -26,18 +26,13 @@
 				>
 			</a>
 
-			<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="movies"
+				:item="movie"
+				:show-secondary="false"
+				class="light tiled"
+				@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
+				@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
 			/>
 		</div>
 
@@ -111,9 +106,7 @@
 import { ref, inject } from 'vue';
 import { format } from 'date-fns';
 
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
-import ellipsis from '#/utils/ellipsis.js';
+import Heart from '#/components/stashes/heart.vue';
 
 const props = defineProps({
 	movie: {
@@ -127,51 +120,8 @@ const user = pageContext.user;
 const pageStash = pageContext.pageProps.stash;
 
 const currentYear = new Date().getFullYear();
-const fbCutoff = 20;
 
 const favorited = ref(props.movie.stashes.some((sceneStash) => sceneStash.isPrimary));
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: props.movie.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `"${ellipsis(props.movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash "${ellipsis(props.movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-
-		await del(`/stashes/${user.primaryStash.id}/movies/${props.movie.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `"${ellipsis(props.movie.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.movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -186,7 +136,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);
 		}
 	}