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>

assets/components/actors/actors.vue

@@ -81,8 +81,8 @@
 								@input="(range) => updateValue('age', range, false)"
 								@change="(range) => updateValue('age', range, true)"
 							>
-								<template v-slot:start><Icon icon="flower" /></template>
-								<template v-slot:end><Icon icon="pipe" /></template>
+								<template v-slot:start><Icon icon="leaf" /></template>
+								<template v-slot:end><Icon icon="tree3" /></template>
 							</RangeFilter>
 
 							<div class="filter-section">

assets/components/header/search.vue

@@ -21,8 +21,10 @@
 
 <script>
 async function search() {
-	this.$router.push({ name: 'search', query: { q: this.query } });
-	this.$emit('search');
+	if (this.query) {
+		this.$router.push({ name: 'search', query: { q: this.query } });
+		this.$emit('search');
+	}
 }
 
 function searching(to) {

assets/components/users/user.vue

@@ -8,31 +8,32 @@
 		</div>
 
 		<section
-			v-if="stashes.length > 0"
+			v-if="user.stashes?.length > 0"
 			class="section"
 		>
 			<h3 class="heading">Stashes</h3>
 
 			<ul class="stashes nolist">
 				<li
-					v-for="stash in stashes"
+					v-for="stash in user.stashes"
 					:key="stash.id"
+					class="stash"
 				>
 					<h4 class="stash-name">{{ stash.name }}</h4>
 
-					<ul class="stash nolist actors">
-						<li
-							v-for="item in stash.actors"
-							:key="item.id"
-						><Actor :actor="item.actor" /></li>
-					</ul>
-
-					<ul class="stash nolist scenes">
+					<ul class="stash-section stash-scenes nolist">
 						<li
 							v-for="item in stash.scenes"
 							:key="item.id"
 						><Scene :release="item.scene" /></li>
 					</ul>
+
+					<ul class="stash-section stash-actors nolist">
+						<li
+							v-for="item in stash.actors"
+							:key="item.id"
+						><Actor :actor="item.actor" /></li>
+					</ul>
 				</li>
 			</ul>
 		</section>
@@ -44,8 +45,8 @@ import Actor from '../actors/tile.vue';
 import Scene from '../releases/scene-tile.vue';
 
 async function mounted() {
-	this.user = await this.$store.dispatch('fetchMe');
-	this.stashes = await this.$store.dispatch('fetchUserStashes', this.user.id);
+	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
+	this.pageTitle = this.user?.username;
 }
 
 export default {
@@ -58,7 +59,7 @@ export default {
 			user: this.$route.params.username === this.$store.state.auth.user?.username
 				? this.$store.state.auth.user
 				: null,
-			stashes: [],
+			pageTitle: null,
 		};
 	},
 	mounted,
@@ -67,7 +68,7 @@ export default {
 
 <style lang="scss" scoped>
 .header {
-	padding: 1rem;
+	padding: .5rem 1rem;
 	background: var(--profile);
 }
 
@@ -87,27 +88,38 @@ export default {
 }
 
 .stash {
+	background: var(--background);
 	margin: 0 0 1rem 0;
+	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
 .stash-name {
 	color: var(--shadow-strong);
-	margin: 0 0 1rem 0;
+	padding: 1rem .5rem 0 .5rem;
+	margin: 0;
 }
 
-.actors {
+.stash-section {
+	padding: 1rem .5rem;
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-hint);
+	}
+}
+
+.stash-actors,
+.stash-scenes {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    grid-gap: .5rem;
     flex-grow: 1;
-    flex-wrap: wrap;
-}
-
-.scenes {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
     grid-gap: .5rem;
 	box-sizing: border-box;
 }
+
+.stash-actors {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.stash-scenes {
+    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+}
 </style>