Added actor stash.

pages/actors/@actorId/+Page.vue

@@ -25,20 +25,19 @@
 				</span>
 			</li>
 
-			<!--
-			<Social
-				v-if="actor.social && actor.social.length > 0"
-				:actor="actor"
-				class="header-social"
+			<Icon
+				v-show="favorited"
+				icon="heart7"
+				class="heart favorited"
+				@click.native.stop="unstash"
 			/>
 
-			<StashButton
-				:stashed-by="stashedBy"
-				class="actor-stash light"
-				@stash="(stash) => stashActor(stash)"
-				@unstash="(stash) => unstashActor(stash)"
+			<Icon
+				v-show="!favorited && user"
+				icon="heart8"
+				class="heart"
+				@click.native.stop="stash"
 			/>
-			-->
 		</div>
 
 		<div class="content">
@@ -50,15 +49,61 @@
 </template>
 
 <script setup>
-import { inject } from 'vue';
+import { ref, inject } from 'vue';
+
+import { post, del } from '#/src/api.js';
+import events from '#/src/events.js';
 
 import Bio from '#/components/actors/bio.vue';
 import Gender from '#/components/actors/gender.vue';
 import Scenes from '#/components/scenes/scenes.vue';
 
 const pageContext = inject('pageContext');
-const { pageProps } = pageContext;
+const { pageProps, user } = 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>
@@ -73,6 +118,7 @@ const { actor } = pageProps;
     display: flex;
     justify-content: space-between;
     align-items: center;
+	position: relative;
     color: var(--highlight-strong-30);
     background: var(--grey-dark-40);
 }
@@ -103,4 +149,24 @@ const { actor } = pageProps;
 	flex-grow: 1;
 	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);
+	}
+}
 </style>

pages/actors/@actorId/+onBeforeRender.js

@@ -4,7 +4,7 @@ import { curateScenesQuery } from '#/src/web/scenes.js';
 
 export async function onBeforeRender(pageContext) {
 	const [[actor], actorScenes] = await Promise.all([
-		fetchActorsById([Number(pageContext.routeParams.actorId)]),
+		fetchActorsById([Number(pageContext.routeParams.actorId)], {}, pageContext.user),
 		fetchScenes(await curateScenesQuery({
 			...pageContext.urlQuery,
 			scope: pageContext.routeParams.scope || 'latest',
@@ -13,7 +13,7 @@ export async function onBeforeRender(pageContext) {
 			page: Number(pageContext.routeParams.page) || 1,
 			limit: Number(pageContext.urlParsed.search.limit) || 30,
 			aggregate: true,
-		}),
+		}, pageContext.user),
 	]);
 
 	const {