Added heart button to actor tiles.

assets/components/actors/tile.vue

@@ -59,6 +59,20 @@
 					class="avatar-fallback"
 				></span>
 
+				<Icon
+					v-show="favorited"
+					icon="heart7"
+					class="stash stashed"
+					@click.prevent.native="unstashActor"
+				/>
+
+				<Icon
+					v-show="favorited === false"
+					icon="heart8"
+					class="stash unstashed"
+					@click.prevent.native="stashActor"
+				/>
+
 				<span
 					class="details"
 				>
@@ -115,6 +129,36 @@
 <script>
 import Gender from './gender.vue';
 
+async function stashActor() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashActor', {
+			actorId: this.actor.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashActor() {
+	this.favorited = false;
+
+	try {
+		await this.$store.dispatch('unstashActor', {
+			actorId: this.actor.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -133,9 +177,19 @@ export default {
 			default: null,
 		},
 	},
+	emits: ['stash'],
+	data() {
+		return {
+			favorited: this.actor.isFavorited,
+		};
+	},
 	computed: {
 		sfw,
 	},
+	methods: {
+		stashActor,
+		unstashActor,
+	},
 };
 </script>
 
@@ -243,6 +297,22 @@ export default {
     opacity: .1;
 }
 
+.stash {
+	width: 1.25rem;
+	height: 1.25rem;
+	padding: .25rem .25rem .5rem .5rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	fill: var(--lighten-weak);
+	filter: drop-shadow(0 0 2px var(--darken));
+
+	&:hover,
+	&.stashed {
+		fill: var(--primary);
+	}
+}
+
 .details {
     background: var(--darken);
     color: var(--text-light);

assets/js/actors/actions.js

@@ -2,10 +2,16 @@ import config from 'config';
 import dayjs from 'dayjs';
 
 import { graphql, get } from '../api';
-import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments';
 import { curateActor, curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
+import {
+	releaseFields,
+	actorStashesFields,
+	getIncludedEntities,
+	getIncludedActors,
+} from '../fragments';
+
 function initActorActions(store, router) {
 	async function fetchActorById({ _commit }, {
 		actorId,
@@ -246,23 +252,7 @@ function initActorActions(store, router) {
 						}
 						totalCount
                     }
-					isStashed
+					${actorStashesFields}
-					stashes: stashesActors(
-						filter: {
-							stash: {
-								userId: {
-									equalTo: $userId
-								}
-							}
-						}
-					) @include(if: $hasAuth) {
-						stash {
-							id
-							name
-							slug
-							primary
-						}
-					}
                 }
             }
         `, {
@@ -346,6 +336,8 @@ function initActorActions(store, router) {
                 $offset: Int = 0,
                 $letter: String! = "",
 				$naturalBoobs: Boolean,
+				$userId: Int,
+				$hasAuth: Boolean!,
             ) {
 				connection: actorsConnection(
                     first: $limit,
@@ -413,6 +405,7 @@ function initActorActions(store, router) {
 						  name
 						  alias
 						}
+						${actorStashesFields}
 					}
                 }
             }
@@ -421,6 +414,8 @@ function initActorActions(store, router) {
 			limit,
 			letter,
 			naturalBoobs,
+			hasAuth: !!store.state.auth.user,
+			userId: store.state.auth.user?.id,
 		});
 
 		return {

assets/js/fragments.js

@@ -40,6 +40,27 @@ const sitesFragment = `
     }
 `;
 
+const actorStashesFields = `
+	isStashed
+	isFavorited
+	stashes: stashesActors(
+		filter: {
+			stash: {
+				userId: {
+					equalTo: $userId
+				}
+			}
+		}
+	) @include(if: $hasAuth) {
+		stash {
+			id
+			name
+			slug
+			primary
+		}
+	}
+`;
+
 const actorFields = `
         id
         name
@@ -72,6 +93,7 @@ const actorFields = `
           name
           alias
         }
+		${actorStashesFields}
 `;
 
 const releaseActorsFragment = `
@@ -455,6 +477,7 @@ function getIncludedActors(router) {
 }
 
 export {
+	actorStashesFields,
 	releaseActorsFragment,
 	releaseFields,
 	releaseTagsFragment,

assets/js/ui/actions.js

@@ -1,5 +1,5 @@
 import { graphql } from '../api';
-import { releaseFields } from '../fragments';
+import { releaseFields, actorStashesFields } from '../fragments';
 import { curateRelease, curateActor } from '../curate';
 
 function initUiActions(store, _router) {
@@ -116,6 +116,7 @@ function initUiActions(store, _router) {
                       name
                       alias
                     }
+					${actorStashesFields}
                 }
             }
         `, {