Added actor stash.

components/actors/tile.vue

@@ -1,19 +1,40 @@
 <template>
-	<div class="actor">
+	<div
+		class="tile"
+		:class="{
+			unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id
+		}"
+	>
 		<span class="name">{{ actor.name }}</span>
 
-		<Link
-			:href="`/actor/${actor.id}/${actor.slug}`"
-			class="avatar-link no-link"
-		>
-			<img
-				v-if="actor.avatar"
-				:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-				:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
-				loading="lazy"
-				class="avatar"
+		<div class="avatar-container">
+			<Link
+				:href="`/actor/${actor.id}/${actor.slug}`"
+				class="avatar-link no-link"
 			>
-		</Link>
+				<img
+					v-if="actor.avatar"
+					:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
+					:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
+					loading="lazy"
+					class="avatar"
+				>
+			</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"
+			/>
+		</div>
 
 		<div class="details">
 			<span class="birth">
@@ -48,20 +69,72 @@
 </template>
 
 <script setup>
+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 Gender from './gender.vue';
 
-defineProps({
+const props = defineProps({
 	actor: {
 		type: Object,
 		default: null,
 	},
 });
+
+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.primary) || 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>
-.actor {
+.tile {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
@@ -79,6 +152,10 @@ defineProps({
 			color: var(--primary);
 		}
 	}
+
+	&.unstashed {
+		opacity: .5;
+	}
 }
 
 .name {
@@ -92,9 +169,14 @@ defineProps({
 	user-select: all;
 }
 
-.avatar-link {
-	display: block;
+.avatar-container {
+	position: relative;
 	flex-grow: 1;
+}
+
+.avatar-link {
+	height: 100%;
+	display: block;
 	overflow: hidden;
 }
 
@@ -107,6 +189,26 @@ defineProps({
 	background-position: center 0;
 }
 
+.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;