Added extended heart button to actor component, fixed movie stash query.

assets/components/actors/actor.vue

@@ -34,18 +34,11 @@
 				class="header-social"
 			/>
 
-			<Icon
+			<StashButton
-				v-show="me && stashed"
+				:stashed-by="stashedBy"
-				icon="heart7"
+				class="actor-stash light"
-				class="stash stashed noselect"
+				@stash="(stash) => stashActor(stash)"
-				@click="unstashActor"
+				@unstash="(stash) => unstashActor(stash)"
-			/>
-
-			<Icon
-				v-show="me && !stashed"
-				icon="heart8"
-				class="stash unstashed noselect"
-				@click="stashActor"
 			/>
 		</div>
 
@@ -390,6 +383,7 @@ import Expand from '../expand/expand.vue';
 import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
+import StashButton from '../stashes/button.vue';
 
 async function fetchActor(scroll = true) {
 	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
@@ -402,37 +396,25 @@ async function fetchActor(scroll = true) {
 	this.actor = actor;
 	this.releases = releases;
 	this.totalCount = totalCount;
-	this.stashed = this.actor.isStashed;
+	this.stashedBy = actor.stashes;
 
 	if (this.$refs.filter && scroll) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
 }
 
-async function stashActor() {
+async function stashActor(stashId) {
-	this.stashed = true;
+	this.stashedBy = await this.$store.dispatch('stashActor', {
-
+		actorId: this.actor.id,
-	try {
+		stashId,
-		this.$store.dispatch('stashActor', {
+	});
-			actorId: this.actor.id,
-			stashId: this.$store.getters.favorites.id,
-		});
-	} catch (error) {
-		this.stashed = false;
-	}
 }
 
-async function unstashActor() {
+async function unstashActor(stashId) {
-	this.stashed = false;
+	this.stashedBy = await this.$store.dispatch('unstashActor', {
-
+		actorId: this.actor.id,
-	try {
+		stashId,
-		this.$store.dispatch('unstashActor', {
+	});
-			actorId: this.actor.id,
-			stashId: this.$store.getters.favorites.id,
-		});
-	} catch (error) {
-		this.stashed = true;
-	}
 }
 
 function me() {
@@ -472,6 +454,7 @@ export default {
 		Releases,
 		Gender,
 		Social,
+		StashButton,
 	},
 	data() {
 		return {
@@ -483,6 +466,7 @@ export default {
 			bioExpanded: false,
 			photosExpanded: false,
 			stashed: false,
+			stashedBy: [],
 		};
 	},
 	computed: {
@@ -521,6 +505,10 @@ export default {
     background: var(--profile);
 }
 
+.actor-stash {
+	margin: 0 1rem 0 0;
+}
+
 .header-name {
     padding: .5rem 1rem;
     margin: 0;

assets/components/stashes/button.vue

@@ -1,5 +1,5 @@
 <template>
-	<span>
+	<span class="stash-container">
 		<Tooltip class="stash-trigger">
 			<Icon
 				v-show="me"
@@ -73,10 +73,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.stash-container.light .icon {
+	fill: var(--lighten);
+}
+
 .stash.icon {
 	width: 1.5rem;
 	height: 1.5rem;
-	padding: 0 .75rem;
+	padding: 0 .5rem;
 	fill: var(--shadow);
 
 	&.stashed {

assets/js/actors/actions.js

@@ -260,6 +260,7 @@ function initActorActions(store, router) {
 							id
 							name
 							slug
+							primary
 						}
 					}
                 }

assets/js/releases/actions.js

@@ -273,6 +273,7 @@ function initReleasesActions(store, router) {
 							id
 							name
 							slug
+							primary
 						}
 					}
 				}