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);