Added favorites button to actor page.

assets/components/actors/actor.vue

@@ -33,6 +33,20 @@
 				:actor="actor"
 				class="header-social"
 			/>
+
+			<Icon
+				v-show="me && isStashed"
+				icon="heart7"
+				class="stash stashed noselect"
+				@click="unstashActor"
+			/>
+
+			<Icon
+				v-show="me && !isStashed"
+				icon="heart8"
+				class="stash unstashed noselect"
+				@click="stashActor"
+			/>
 		</div>
 
 		<div class="content-inner actor-inner">
@@ -54,13 +68,6 @@
 					>
 				</a>
 
-				<Expand
-					v-if="bioExpanded"
-					:expanded="bioExpanded"
-					class="expand expand-light"
-					@expand="(state) => bioExpanded = state"
-				/>
-
 				<ul class="bio nolist">
 					<li
 						v-if="actor.realName"
@@ -384,7 +391,7 @@ import Scroll from '../scroll/scroll.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
 
-async function fetchActor() {
+async function fetchActor(scroll = true) {
 	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
 		actorId: Number(this.$route.params.actorId),
 		limit: this.limit,
@@ -396,11 +403,37 @@ async function fetchActor() {
 	this.releases = releases;
 	this.totalCount = totalCount;
 
-	if (this.$refs.filter) {
+	if (this.$refs.filter && scroll) {
 		this.$refs.filter.$el.scrollIntoView();
 	}
 }
 
+async function stashActor() {
+	this.$store.dispatch('stashActor', {
+		actorId: this.actor.id,
+		stashId: this.$store.getters.favorites.id,
+	});
+
+	this.fetchActor(false);
+}
+
+async function unstashActor() {
+	this.$store.dispatch('unstashActor', {
+		actorId: this.actor.id,
+		stashId: this.$store.getters.favorites.id,
+	});
+
+	this.fetchActor(false);
+}
+
+function me() {
+	return this.$store.state.auth.user;
+}
+
+function isStashed() {
+	return this.actor.stashes?.length > 0;
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -447,6 +480,8 @@ export default {
 		};
 	},
 	computed: {
+		isStashed,
+		me,
 		sfw,
 		showAlbum,
 	},
@@ -457,6 +492,8 @@ export default {
 	mounted,
 	methods: {
 		fetchActor,
+		stashActor,
+		unstashActor,
 	},
 };
 </script>
@@ -477,11 +514,10 @@ export default {
     align-items: center;
     color: var(--lighten-extreme);
     background: var(--profile);
-    padding: .5rem 1rem;
 }
 
 .header-name {
-    padding: 0;
+    padding: .5rem 1rem;
     margin: 0;
     display: inline-flex;
     justify-content: space-between;
@@ -491,7 +527,7 @@ export default {
 .header-gender {
     display: inline-block;
     margin: 0 0 0 .5rem;
-    transform: translate(0, .1rem);
+    transform: translate(0, .125rem);
 }
 
 .header-social {
@@ -731,6 +767,22 @@ export default {
 	border-bottom: solid 1px var(--shadow-hint);
 }
 
+.stash.icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	padding: 0 1rem;
+	fill: var(--lighten);
+
+	&.stashed {
+		fill: var(--primary);
+	}
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+
 @media(max-width: $breakpoint4) {
     .descriptions-container {
         display: none;
@@ -795,8 +847,16 @@ export default {
     }
 
     .header-name {
-        flex-grow: 1;
+		flex-grow: 1;
 		font-size: 1.3rem;
+		padding: .5rem .5rem .5rem 1rem;
     }
+
+	.stash.icon {
+		width: 1.25rem;
+		height: 1.25rem;
+		padding: 0 1rem 0 .25rem;
+		transform: translate(0, -.1rem);
+	}
 }
 </style>