Added scene tags filter.

components/filters/actors.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class="actors-container">
-		<div class="actors-filters">
+	<div class="filter actors-container">
+		<div class="filters-sort">
 			<input
 				v-model="search"
 				type="search"
 				placeholder="Filter actors"
-				class="input input-inline actors-search"
+				class="input input-inline filters-search"
 			>
 
 			<div
@@ -72,20 +72,22 @@
 					/>
 				</div>
 
-				<span class="filter-name actor-name">{{ actor.name }}</span>
+				<span class="filter-name actor-name">
+					{{ actor.name }}
 
-				<span class="actor-details">
-					<div class="actor-gender">
-						<Gender
-							:gender="actor.gender"
-							class="gender"
-						/>
-					</div>
+					<span class="actor-details">
+						<div class="actor-gender">
+							<Gender
+								:gender="actor.gender"
+								class="gender"
+							/>
+						</div>
 
-					<span
-						v-if="actor.count"
-						class="actor-count"
-					>{{ actor.count }}</span>
+						<span
+							v-if="actor.count"
+							class="filter-count"
+						>{{ actor.count }}</span>
+					</span>
 				</span>
 			</li>
 		</ul>
@@ -104,7 +106,7 @@ const props = defineProps({
 	},
 	actors: {
 		type: Array,
-		default: null,
+		default: () => [],
 	},
 });
 
@@ -119,7 +121,7 @@ const { pageProps } = inject('pageContext');
 const { actor: pageActor } = pageProps;
 
 const groupedActors = computed(() => ({
-	selected: props.actors.filter((actor) => props.filters.actors.includes(actor.id)),
+	selected: props.filters.actors.map((actorId) => props.actors.find((actor) => actor.id === actorId)).filter(Boolean),
 	available: props.actors
 		.filter((actor) => !props.filters.actors.includes(actor.id)
 			&& actor.id !== pageActor?.id
@@ -146,7 +148,6 @@ function toggleActor(actor) {
 }
 
 function selectGender() {
-	console.log(genders.value);
 	const genderIndex = genders.value.indexOf(selectedGender.value);
 
 	if (genderIndex >= genders.value.length - 1) {
@@ -159,58 +160,14 @@ function selectGender() {
 </script>
 
 <style scoped>
-.actors-container {
-	box-shadow: inset 0 -1px 3px var(--shadow-weak-30);
-}
-
-.actors-filters {
-	display: flex;
-	border-bottom: solid 1px var(--shadow-weak-30);
-}
-
-.actors-search {
-	flex-grow: 1;
-	border-bottom: none;
-	width: 0;
-}
-
-.filter-sort {
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	align-self: stretch;
-	justify-content: center;
-	padding: 0 .5rem;
-	cursor: pointer;
-	font-weight: bold;
-	color: var(--shadow);
-
-	&.order {
-		padding: 0 1rem 0 .25rem;
-	}
-
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		color: var(--primary);
-
-		.icon {
-			fill: var(--primary);
-		}
-	}
-}
-
 .gender-unselected {
 	.icon {
 		fill: var(--shadow);
 	}
 }
 
-.filter-items {
-	max-height: 15rem;
-	overflow-y: auto;
+.filter {
+	padding: 0;
 }
 
 .filter-item.first {
@@ -220,7 +177,7 @@ function selectGender() {
 .filter-name {
 	height: 1rem;
 	align-items: stretch;
-	padding: .25rem .75rem .25rem .25rem;
+	padding: .25rem 0 .25rem .25rem;
 }
 
 .actor-name {
@@ -243,15 +200,4 @@ function selectGender() {
 		display: flex;
 	}
 }
-
-.actor-count {
-	width: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 0 .25rem;
-	overflow: hidden;
-	color: var(--shadow-weak-10);
-	font-size: .9rem;
-}
 </style>

components/filters/filters.vue

@@ -68,6 +68,18 @@ function toggleFilters(state) {
 </script>
 
 <style>
+.filter {
+	padding: .5rem;
+
+	.input {
+		width: 100%;
+	}
+
+	&:not(:last-child) {
+		border-bottom: solid 1px var(--shadow-weak-30);
+	}
+}
+
 .filter-mode {
 	width: 100%;
 	color: var(--shadow);
@@ -83,6 +95,17 @@ function toggleFilters(state) {
 	}
 }
 
+.filters-sort {
+	display: flex;
+	border-bottom: solid 1px var(--shadow-weak-30);
+}
+
+.filters-search {
+	flex-grow: 1;
+	border-bottom: none;
+	width: 0;
+}
+
 .filter-clear {
 	display: flex;
 	align-items: center;
@@ -116,6 +139,19 @@ function toggleFilters(state) {
 	}
 }
 
+.filter-items {
+	max-height: 15rem;
+	overflow-y: auto;
+
+	&.selected {
+		box-shadow: 0 -1px 3px var(--shadow-weak-30);
+	}
+
+	&.available {
+		box-shadow: inset 0 -1px 3px var(--shadow-weak-30);
+	}
+}
+
 .filter-items .filter-item {
 	display: flex;
 	align-items: stretch;
@@ -179,6 +215,45 @@ function toggleFilters(state) {
 .filter-name:hover {
 	background: var(--shadow-weak-30);
 }
+
+.filter-sort {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	align-self: stretch;
+	justify-content: center;
+	padding: 0 .5rem;
+	cursor: pointer;
+	font-weight: bold;
+	color: var(--shadow);
+
+	&.order {
+		padding: 0 1rem 0 .25rem;
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.filter-count {
+	width: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0 .25rem;
+	overflow: hidden;
+	color: var(--shadow-weak-10);
+	font-size: .9rem;
+}
 </style>
 
 <style scoped>

components/filters/tags.vue

@@ -0,0 +1,180 @@
+<template>
+	<div class="filter tags-container">
+		<div class="filters-sort">
+			<input
+				v-model="search"
+				type="search"
+				placeholder="Filter tags"
+				class="input input-inline filters-search"
+			>
+
+			<div
+				v-show="order === 'priority'"
+				class="filter-sort order noselect"
+				@click="order = 'name'"
+			>
+				<Icon
+					icon="star"
+				/>
+			</div>
+
+			<div
+				v-show="order === 'name'"
+				class="filter-sort order noselect"
+				@click="order = 'count'"
+			>
+				<Icon
+					icon="sort-alpha-asc"
+				/>
+			</div>
+
+			<div
+				v-show="order === 'count'"
+				class="filter-sort order noselect"
+				@click="order = 'priority'"
+			>
+				<Icon
+					icon="sort-numeric-desc"
+				/>
+			</div>
+		</div>
+
+		<ul
+			v-for="(group, groupKey) in groupedtags"
+			:key="groupKey"
+			class="filter-items nolist"
+			:class="groupKey"
+		>
+			<li
+				v-for="(tag, index) in group"
+				:key="`filter-tag-${tag.id}`"
+				class="filter-item"
+				:class="{ selected: filters.tags.includes(tag.slug), first: groupKey === 'available' && index === 0 && filters.tags.length > 0 }"
+				@click="emit('update', 'tags', [tag.slug])"
+			>
+				<div
+					class="filter-include"
+					@click.stop="toggleTag(tag)"
+				>
+					<Icon
+						icon="checkmark"
+						class="filter-add"
+					/>
+
+					<Icon
+						icon="cross2"
+						class="filter-remove"
+					/>
+				</div>
+
+				<span class="filter-name tag-name">{{ tag.name }}</span>
+
+				<span class="tag-details">
+					<span
+						v-if="tag.count"
+						class="filter-count"
+					>{{ tag.count }}</span>
+				</span>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	tags: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const search = ref('');
+const searchRegexp = computed(() => new RegExp(search.value, 'i'));
+const order = ref('priority');
+
+const { pageProps } = inject('pageContext');
+const { tag: pageTag } = pageProps;
+
+const priorityTags = [
+	'anal',
+	'gangbang',
+	'blowbang',
+	'transsexual',
+	'airtight',
+	'dp',
+	'dap',
+	'dvp',
+	'triple-penetration',
+	'tap',
+	'tvp',
+	'mfm',
+	'fmf',
+	'threesome',
+	'bdsm',
+	'deepthroat',
+	'blowjob',
+	'lesbian',
+];
+
+const groupedtags = computed(() => {
+	const selected = props.tags.filter((tag) => props.filters.tags.includes(tag.slug));
+	const filtered = props.tags.filter((tag) => !props.filters.tags.includes(tag.slug)
+		&& tag.id !== pageTag?.id
+		&& searchRegexp.value.test(tag.name));
+
+	if (order.value === 'count') {
+		const available = filtered.sort((tagA, tagB) => {
+			if (order.value === 'count') {
+				return tagB.count - tagA.count;
+			}
+
+			return 0;
+		});
+
+		return { selected, available };
+	}
+
+	if (order.value === 'priority') {
+		return {
+			selected,
+			available: [
+				...priorityTags.map((priorityTag) => filtered.find((tag) => tag.slug === priorityTag)).filter(Boolean),
+				...filtered.filter((tag) => !priorityTags.includes(tag.slug)),
+			],
+		};
+	}
+
+	return {
+		selected,
+		available: filtered,
+	};
+});
+
+function toggleTag(tag) {
+	if (props.filters.tags.includes(tag.slug)) {
+		emit('update', 'tags', props.filters.tags.filter((tagId) => tagId !== tag.slug));
+		return;
+	}
+
+	emit('update', 'tags', props.filters.tags.concat(tag.slug));
+}
+</script>
+
+<style scoped>
+.filter-items {
+	max-height: 15rem;
+	overflow-y: auto;
+}
+
+.filter {
+	padding: 0;
+}
+</style>