Added search to tags.

assets/components/tags/tags.vue

@@ -1,22 +1,26 @@
 <template>
 	<div class="tags">
-		<div
-			v-for="(tags, category) in categories"
-			:key="category"
-			class="category"
-		>
-			<h3 class="heading">{{ category }}</h3>
+		<div class="content-inner">
+			<SearchBar :placeholder="'Search tags'" />
 
 			<div
-				:key="sfw"
-				class="tiles"
+				v-for="(tags, category) in categories"
+				:key="category"
+				class="category"
 			>
-				<Tag
-					v-for="tag in tags"
-					:key="`tag-${tag.id}`"
-					:tag="tag"
-					:lazy="true"
-				/>
+				<h3 class="heading">{{ category }}</h3>
+
+				<div
+					:key="sfw"
+					class="tiles"
+				>
+					<Tag
+						v-for="tag in tags"
+						:key="`tag-${tag.id}`"
+						:tag="tag"
+						:lazy="true"
+					/>
+				</div>
 			</div>
 		</div>
 
@@ -26,122 +30,128 @@
 
 <script>
 import Tag from './tile.vue';
+import SearchBar from '../search/bar.vue';
+
+const tagSlugsByCategory = {
+	popular: [
+		'anal',
+		'lesbian',
+		'interracial',
+		'mff',
+		'mfm',
+		'teen',
+		'milf',
+		'blowjob',
+		'dp',
+		'gangbang',
+		'facial',
+		'creampie',
+		'squirting',
+	],
+	appearance: [
+		'asian',
+		'black',
+		'latina',
+		'white',
+		'natural-boobs',
+		'enhanced-boobs',
+		'blonde',
+		'brunette',
+		'redhead',
+		'tattoos',
+		'piercings',
+	],
+	oral: [
+		'blowjob',
+		'pussy-eating',
+		'ass-eating',
+		'69',
+		'double-blowjob',
+		'deepthroat',
+		'facefucking',
+		'atm',
+	],
+	manual: [
+		'handjob',
+		'fingering',
+		'anal-fingering',
+		'titty-fucking',
+		'fisting',
+		'anal-fisting',
+		'fisting-dp',
+	],
+	group: [
+		'mfm',
+		'mff',
+		'orgy',
+		'gangbang',
+		'blowbang',
+	],
+	cumshot: [
+		'facial',
+		'bukkake',
+		'creampie',
+		'cum-in-mouth',
+		'cum-on-boobs',
+		'cum-on-butt',
+		'cum-on-pussy',
+		'anal-creampie',
+		'oral-creampie',
+		'fake-cum',
+	],
+	toys: [
+		'toys',
+		'toy-anal',
+		'toy-dp',
+		'double-dildo',
+		'double-dildo-blowjob',
+		'double-dildo-kiss',
+		'double-dildo-anal',
+		'double-dildo-dp',
+	],
+	roleplay: [
+		'family',
+		'parody',
+		'schoolgirl',
+		'nurse',
+		'maid',
+		'nun',
+	],
+	fetish: [
+		'bdsm',
+		'femdom',
+		'bondage',
+		'latex',
+		'blindfold',
+	],
+	extreme: [
+		'dp',
+		'airtight',
+		'dap',
+		'dvp',
+		'da-tp',
+		'dv-tp',
+		'tap',
+		'tvp',
+	],
+	misc: [
+		'gaping',
+		'squirting',
+		'oil',
+		'vr',
+		'bts',
+	],
+};
 
 function sfw() {
 	return this.$store.state.ui.sfw;
 }
 
-async function mounted() {
-	const tagSlugsByCategory = {
-		popular: [
-			'anal',
-			'lesbian',
-			'interracial',
-			'mff',
-			'mfm',
-			'teen',
-			'milf',
-			'blowjob',
-			'dp',
-			'gangbang',
-			'facial',
-			'creampie',
-			'squirting',
-		],
-		appearance: [
-			'asian',
-			'black',
-			'latina',
-			'white',
-			'natural-boobs',
-			'enhanced-boobs',
-			'blonde',
-			'brunette',
-			'redhead',
-			'tattoos',
-			'piercings',
-		],
-		oral: [
-			'blowjob',
-			'pussy-eating',
-			'ass-eating',
-			'69',
-			'double-blowjob',
-			'deepthroat',
-			'facefucking',
-			'atm',
-		],
-		manual: [
-			'handjob',
-			'fingering',
-			'anal-fingering',
-			'titty-fucking',
-			'fisting',
-			'anal-fisting',
-			'fisting-dp',
-		],
-		group: [
-			'mfm',
-			'mff',
-			'orgy',
-			'gangbang',
-			'blowbang',
-		],
-		cumshot: [
-			'facial',
-			'bukkake',
-			'creampie',
-			'cum-in-mouth',
-			'cum-on-boobs',
-			'cum-on-butt',
-			'cum-on-pussy',
-			'anal-creampie',
-			'oral-creampie',
-			'fake-cum',
-		],
-		toys: [
-			'toys',
-			'toy-anal',
-			'toy-dp',
-			'double-dildo',
-			'double-dildo-blowjob',
-			'double-dildo-kiss',
-			'double-dildo-anal',
-			'double-dildo-dp',
-		],
-		roleplay: [
-			'family',
-			'parody',
-			'schoolgirl',
-			'nurse',
-			'maid',
-			'nun',
-		],
-		fetish: [
-			'bdsm',
-			'femdom',
-			'bondage',
-			'latex',
-			'blindfold',
-		],
-		extreme: [
-			'dp',
-			'airtight',
-			'dap',
-			'dvp',
-			'da-tp',
-			'dv-tp',
-			'tap',
-			'tvp',
-		],
-		misc: [
-			'gaping',
-			'squirting',
-			'oil',
-			'vr',
-			'bts',
-		],
-	};
+async function fetchTags() {
+	if (this.$route.query.query) {
+		await this.searchTags();
+		return;
+	}
 
 	const tags = await this.$store.dispatch('fetchTags', {
 		slugs: Object.values(tagSlugsByCategory).flat(),
@@ -153,13 +163,30 @@ async function mounted() {
 		...acc,
 		[category]: tagSlugs.map(tagSlug => tagsBySlug[tagSlug]),
 	}), {});
+}
 
+async function searchTags() {
+	const tags = await this.$store.dispatch('searchTags', {
+		minLength: 1,
+		query: this.$route.query.query,
+		limit: 20,
+	});
+
+	this.categories = {
+		results: tags,
+	};
+}
+
+async function mounted() {
 	this.pageTitle = 'Tags';
+
+	await this.fetchTags();
 }
 
 export default {
 	components: {
 		Tag,
+		SearchBar,
 	},
 	data() {
 		return {
@@ -170,7 +197,14 @@ export default {
 	computed: {
 		sfw,
 	},
+	watch: {
+		$route: fetchTags,
+	},
 	mounted,
+	methods: {
+		fetchTags,
+		searchTags,
+	},
 };
 </script>
 
@@ -178,6 +212,12 @@ export default {
 @import 'theme';
 
 .tags {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.content-inner {
     padding: 1rem 1rem 0 1rem;
 }
 
@@ -191,7 +231,7 @@ export default {
 .heading {
     text-transform: capitalize;
 	padding: 0 0 0 .5rem;
-	margin: 2rem 0 1rem 0;
+	margin: 1.75rem 0 1rem 0;
 }
 
 .category:first-child .heading {