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

pages/actors/@actorId/+Page.vue

@@ -25,18 +25,10 @@
 				</span>
 			</li>
 
-			<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="actors"
+				:item="actor"
+				class="light"
 			/>
 		</div>
 
@@ -49,61 +41,16 @@
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
-
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
+import { inject } from 'vue';
 
 import Bio from '#/components/actors/bio.vue';
 import Gender from '#/components/actors/gender.vue';
 import Scenes from '#/components/scenes/scenes.vue';
+import Heart from '#/components/stashes/heart.vue';
 
 const pageContext = inject('pageContext');
-const { pageProps, user } = pageContext;
+const { pageProps } = pageContext;
 const { actor } = pageProps;
-
-const favorited = ref(actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
-
-async function stash() {
-	try {
-		favorited.value = true;
-
-		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: actor.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `${actor.name} stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash ${actor.name} to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-		await del(`/stashes/${user.primaryStash.id}/actors/${actor.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `${actor.name} unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash ${actor.name} from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -150,23 +97,7 @@ async function unstash() {
 	overflow-y: auto;
 }
 
-.icon.heart {
-	width: 2rem;
-	height: 1.5rem;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .5rem 1rem 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);
-	}
+.bookmarks {
+	margin-right: .5rem;
 }
 </style>