Added sections and pagination to stash page.

assets/components/actors/tile.vue

@@ -3,7 +3,7 @@
 		v-if="actor"
 		class="actor"
 	>
-		<router-link
+		<RouterLink
 			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
@@ -15,7 +15,7 @@
 					class="name"
 				>{{ actor.name }}</span>
 
-				<router-link
+				<RouterLink
 					v-if="actor.entity"
 					v-tooltip="actor.entity.name"
 					:to="{ name: actor.entity.type, params: { entitySlug: actor.entity.slug, range: 'new', pageNumber: 1 } }"
@@ -25,7 +25,7 @@
 						:src="`/img/logos/${actor.entity.slug}/favicon_dark.png`"
 						class="favicon-icon"
 					>
-				</router-link>
+				</RouterLink>
 
 				<Icon
 					v-if="alias"
@@ -122,7 +122,7 @@
 					/>
 				</span>
 			</div>
-		</router-link>
+		</RouterLink>
 	</div>
 </template>
 

assets/components/filters/filter-bar.vue

@@ -2,22 +2,12 @@
 	<div class="filter-bar noselect">
 		<div class="sort">
 			<router-link
-				:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'latest' || range === 'latest' }"
+				v-for="section in ranges"
+				:key="section"
+				:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
+				:class="{ active: $route.name === section || range === section }"
 				class="range range-button"
-			>Latest</router-link>
-
-			<router-link
-				:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
-				class="range-button"
-			>Upcoming</router-link>
-
-			<router-link
-				:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
-				:class="{ active: $route.name === 'new' || range === 'new' }"
-				class="range-button"
-			>New</router-link>
+			>{{ section }}</router-link>
 		</div>
 
 		<div class="filters">
@@ -96,6 +86,10 @@ export default {
 			type: Number,
 			default: 10,
 		},
+		ranges: {
+			type: Array,
+			default: () => ['latest', 'upcoming', 'new'],
+		},
 		availableTags: {
 			type: Array,
 			default: () => [],
@@ -324,6 +318,7 @@ export default {
     text-decoration: none;
 	border: solid 1px transparent;
 	border-bottom: none;
+	text-transform: capitalize;
 
     &:hover:not(.active) {
         color: var(--shadow-strong);

assets/components/releases/movie-tile.vue

@@ -3,7 +3,7 @@
 		<Details :release="movie" />
 
 		<div class="movie">
-			<router-link
+			<RouterLink
 				:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 				class="cover"
 			>
@@ -13,15 +13,29 @@
 					:style="{ 'background-image': getBgPath(movie.covers[0], 'lazy') }"
 					loading="lazy"
 				>
-			</router-link>
+
+				<Icon
+					v-show="favorited"
+					icon="heart7"
+					class="stash stashed"
+					@click.prevent.native="unstashMovie"
+				/>
+
+				<Icon
+					v-show="favorited === false"
+					icon="heart8"
+					class="stash unstashed"
+					@click.prevent.native="stashMovie"
+				/>
+			</RouterLink>
 
 			<div class="info">
-				<router-link
+				<RouterLink
 					:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
 					class="title-link"
 				>
 					<h3 class="title">{{ movie.title }}</h3>
-				</router-link>
+				</RouterLink>
 
 				<ul
 					class="actors nolist"
@@ -31,10 +45,10 @@
 						v-for="actor in movie.actors"
 						:key="`tag-${movie.id}-${actor.id}`"
 						class="actor"
-					><router-link
+					><RouterLink
 						:to="`/actor/${actor.id}/${actor.slug}`"
 						class="actor-link"
-					>{{ actor.name }}</router-link></li>
+					>{{ actor.name }}</RouterLink></li>
 				</ul>
 
 				<ul
@@ -45,10 +59,10 @@
 						v-for="tag in movie.tags"
 						:key="`tag-${movie.id}-${tag.id}`"
 						class="tag"
-					><router-link
+					><RouterLink
 						:to="`/tag/${tag.slug}`"
 						class="tag-link"
-					>{{ tag.name }}</router-link></li>
+					>{{ tag.name }}</RouterLink></li>
 				</ul>
 			</div>
 		</div>
@@ -58,6 +72,36 @@
 <script>
 import Details from './tile-details.vue';
 
+async function stashMovie() {
+	this.favorited = true;
+
+	try {
+		await this.$store.dispatch('stashMovie', {
+			movieId: this.movie.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', true);
+	} catch (error) {
+		this.favorited = false;
+	}
+}
+
+async function unstashMovie() {
+	this.favorited = false;
+
+	try {
+		await this.$store.dispatch('unstashMovie', {
+			movieId: this.movie.id,
+			stashId: this.$store.getters.favorites.id,
+		});
+
+		this.$emit('stash', false);
+	} catch (error) {
+		this.favorited = true;
+	}
+}
+
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
@@ -72,9 +116,18 @@ export default {
 			default: null,
 		},
 	},
+	data() {
+		return {
+			favorited: this.movie.isFavorited,
+		};
+	},
 	computed: {
 		sfw,
 	},
+	methods: {
+		stashMovie,
+		unstashMovie,
+	},
 };
 </script>
 
@@ -87,6 +140,10 @@ export default {
 	background: var(--background);
 	box-shadow: 0 0 3px var(--darken-weak);
 	font-size: 0;
+
+	&:hover .unstashed {
+		fill: var(--lighten);
+	}
 }
 
 .movie {
@@ -101,6 +158,7 @@ export default {
 
 .cover {
 	height: 100%;
+	position: relative;
 	box-shadow: 0 0 3px var(--darken-weak);
 
 	img {
@@ -179,6 +237,22 @@ export default {
 	}
 }
 
+.stash {
+	width: 1.25rem;
+	height: 1.25rem;
+	padding: .25rem .5rem .5rem .25rem;
+	position: absolute;
+	top: 0;
+	right: 0;
+	fill: var(--lighten-weak);
+	filter: drop-shadow(0 0 2px var(--darken));
+
+	&:hover,
+	&.stashed {
+		fill: var(--primary);
+	}
+}
+
 @media(max-width: $breakpoint-kilo) {
 	.movie {
 		height: 12rem;

assets/components/stashes/stash.vue

@@ -10,11 +10,11 @@
 			>{{ stash.name }}</h2>
 
 			<span class="header-section">
-				<router-link
+				<RouterLink
 					v-if="stash.user"
 					:to="{ name: 'user', params: { username: stash.user.username } }"
 					class="header-item stash-username nolink"
-				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></router-link>
+				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></RouterLink>
 
 				<label
 					v-if="isMine"
@@ -55,15 +55,17 @@
 		</div>
 
 		<div class="content-inner">
+			<FilterBar :ranges="['scenes', 'actors', 'movies']" />
+
 			<Releases
-				v-if="stash.scenes?.length > 0"
+				v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
 				:releases="stash.scenes.map(item => item.scene)"
 				class="stash-section stash-scenes"
 				@stash="fetchStash"
 			/>
 
 			<ul
-				v-if="stash.actors?.length > 0"
+				v-if="$route.params.range === 'actors'"
 				class="stash-section stash-actors nolist"
 			>
 				<li
@@ -71,6 +73,26 @@
 					:key="item.id"
 				><Actor :actor="item.actor" /></li>
 			</ul>
+
+			<div
+				v-if="$route.params.range === 'movies'"
+				class="stash-movies"
+			>
+				<Movie
+					v-for="item in stash.movies"
+					:key="`movie-${item.id}`"
+					:movie="item.movie"
+					@stash="fetchStash"
+				/>
+			</div>
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
+
+			<Footer />
 		</div>
 	</div>
 </template>
@@ -78,12 +100,37 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import Movie from '../releases/movie-tile.vue';
 import RemoveStash from './remove.vue';
 import Toggle from '../form/toggle.vue';
+import FilterBar from '../filters/filter-bar.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchStash() {
-	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+	this.stash = await this.$store.dispatch('fetchStash', {
+		stashId: this.$route.params.stashId,
+		section: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber || 1,
+		limit: this.limit,
+	});
+
+	console.log(this.stash.movies);
+
 	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
+
+	if (this.$route.params.range === 'scenes') {
+		this.totalCount = this.stash.sceneTotal;
+	}
+
+	if (this.$route.params.range === 'actors') {
+		this.totalCount = this.stash.actorTotal;
+	}
+
+	if (this.$route.params.range === 'movies') {
+		this.totalCount = this.stash.movieTotal;
+	}
+
+	this.pageTitle = this.stash.name;
 }
 
 async function publishStash(isPublic) {
@@ -109,23 +156,32 @@ async function removeStash(removed) {
 }
 
 async function mounted() {
-	this.fetchStash();
+	await this.fetchStash();
 }
 
 export default {
 	components: {
 		Actor,
+		Movie,
 		Releases,
 		RemoveStash,
+		Pagination,
+		FilterBar,
 		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			limit: Number(this.$route.query.limit) || 20,
+			pageTitle: null,
 			showRemoveStash: false,
 			isMine: false,
+			totalCount: 0,
 		};
 	},
+	watch: {
+		$route: fetchStash,
+	},
 	mounted,
 	methods: {
 		fetchStash,
@@ -199,21 +255,26 @@ export default {
 	}
 }
 
-.stash-section:not(:last-child) {
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
 .stash-actors {
     display: grid;
     grid-gap: .5rem;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	flex-grow: 1;
 	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
+}
+
+.stash-movies {
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+	grid-template-rows: min-content;
+	grid-gap: 1rem;
+	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
 }
 
 .stash-scenes {
-	flex-grow: 0;
-
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
 	}

assets/components/users/stash.vue

@@ -2,7 +2,7 @@
 	<div class="stash">
 		<div class="stash-section stash-header">
 			<router-link
-				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug, range: 'scenes', pageNumber: 1 } }"
 				class="stash-link nolink"
 			>
 				<h4 class="stash-name">{{ stash.name }}</h4>