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

components/actors/tile.vue

@@ -28,18 +28,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="actors"
+				:item="actor"
+				:show-secondary="false"
+				class="light tiled"
+				@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
+				@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
 			/>
 		</div>
 
@@ -79,9 +74,8 @@
 import { ref, inject } from 'vue';
 
 import { formatDate } from '#/utils/format.js';
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
 
+import Heart from '#/components/stashes/heart.vue';
 import Gender from './gender.vue';
 
 const props = defineProps({
@@ -95,49 +89,7 @@ const pageContext = inject('pageContext');
 const { user } = pageContext;
 const pageStash = pageContext.pageProps.stash;
 
-// console.log(props.actor);
-
 const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.isPrimary) || false);
-
-async function stash() {
-	try {
-		favorited.value = true;
-		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: props.actor.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `${props.actor.name} stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash ${props.actor.name} to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-		await del(`/stashes/${user.primaryStash.id}/actors/${props.actor.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `${props.actor.name} unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash ${props.actor.name} from ${user.primaryStash.name}`,
-		});
-	}
-}
 </script>
 
 <style scoped>
@@ -157,6 +109,10 @@ async function unstash() {
 		.name {
 			color: var(--primary);
 		}
+
+		:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
+			fill: var(--text-light);
+		}
 	}
 
 	&.unstashed {
@@ -205,26 +161,6 @@ async function unstash() {
 	opacity: .1;
 }
 
-.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);
-	}
-}
-
 .details {
 	width: 100%;
 	height: 1.5rem;