Added selectable tag function for actors. Implemented experimental filtering by tag.

assets/components/header/filter-bar.vue

@@ -24,6 +24,7 @@
 			<Filters
 				class="filters-block"
 				:filter="filter"
+				:available-tags="availableTags"
 				@set-filter="setFilter"
 			/>
 
@@ -97,6 +98,10 @@ export default {
 			type: Number,
 			default: 10,
 		},
+		availableTags: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	computed: {
 		...mapState({

assets/components/header/filters.vue

@@ -17,12 +17,12 @@
 		<div slot="popover">
 			<ul class="tags nolist">
 				<li
-					v-for="tag in tags"
-					:key="`tag-${tag}`"
+					v-for="tag in availableTags"
+					:key="`tag-${tag.id}`"
 					class="tag"
-					:class="{ selected: selectedTags.includes(tag) }"
+					:class="{ selected: selectedTags.includes(tag.slug) }"
 				>
-					<router-link :to="{ query: { ...getNewRange(tag) } }">
+					<router-link :to="{ query: { ...getNewRange(tag.slug) } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -30,9 +30,9 @@
 					</router-link>
 
 					<router-link
-						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag) ? null : { tags: tag }) } }"
+						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }) } }"
 						class="name"
-					>{{ tag }}</router-link>
+					>{{ tag.name }}</router-link>
 				</li>
 			</ul>
 		</div>
@@ -40,19 +40,6 @@
 </template>
 
 <script>
-const tags = [
-	'airtight',
-	'anal',
-	'blowjob',
-	'double-penetration',
-	'facial',
-	'gangbang',
-	'lesbian',
-	'mff',
-	'mfm',
-	'orgy',
-];
-
 function getNewRange(tag) {
 	if (this.selectedTags.includes(tag)) {
 		if (this.selectedTags.length > 1) {
@@ -79,11 +66,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-	},
-	data() {
-		return {
-			tags,
-		};
+		availableTags: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	computed: {
 		selectedTags,
@@ -141,6 +127,7 @@ export default {
 	}
 
 	.name {
+		min-width: 8rem;
 		display: flex;
 		justify-content: space-between;
 		flex-grow: 1;