Applying tag filters to URL.

assets/components/header/filter-bar.vue

@@ -2,19 +2,19 @@
 	<div class="filter-bar noselect">
 		<span class="sort">
 			<router-link
-				:to="{ name: isHome ? 'latest' : $route.name, params: { ...$route.params, range: 'latest', pageNumber: 1 } }"
+				:to="{ params: { range: 'latest', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'latest' || range === 'latest' }"
 				class="range range-button"
 			>Latest</router-link>
 
 			<router-link
-				:to="{ name: isHome ? 'upcoming' : $route.name, params: { ...$route.params, range: 'upcoming', pageNumber: 1 } }"
+				:to="{ params: { range: 'upcoming', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
 				class="range-button"
 			>Upcoming</router-link>
 
 			<router-link
-				:to="{ name: isHome ? 'new' : $route.name, params: { ...$route.params, range: 'new', pageNumber: 1 } }"
+				:to="{ params: { range: 'new', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'new' || range === 'new' }"
 				class="range-button"
 			>New</router-link>

assets/components/header/filters.vue

@@ -8,19 +8,17 @@
 					v-for="tag in tags"
 					:key="`tag-${tag}`"
 					class="tag"
+					:class="{ selected: selectedTags.has(tag) }"
 				>
-					<Icon
-						icon="checkmark"
-						class="include"
-					/>
-
-					<Icon
-						icon="cross"
-						class="exclude"
-					/>
+					<router-link :to="{ params: { range: getNewRange(tag) } }">
+						<Icon
+							icon="checkmark"
+							class="include"
+						/>
+					</router-link>
 
 					<router-link
-						:to="{ name: 'tag', params: { tagSlug: tag } }"
+						:to="{ params: { range: tag } }"
 						class="name"
 					>{{ tag }}</router-link>
 				</li>
@@ -31,11 +29,32 @@
 
 <script>
 const tags = [
+	'airtight',
 	'anal',
+	'blowjob',
 	'double-penetration',
+	'facial',
 	'gangbang',
+	'lesbian',
+	'mff',
+	'mfm',
+	'orgy',
 ];
 
+function getNewRange(tag) {
+	const selected = new Set(this.selectedTags).add(tag);
+
+	if (this.selectedTags.has(tag)) {
+		selected.delete(tag);
+	}
+
+	return Array.from(selected).join('+');
+}
+
+function selectedTags() {
+	return new Set(this.$route.params.range.split('+'));
+}
+
 export default {
 	props: {
 		filter: {
@@ -49,10 +68,15 @@ export default {
 	},
 	data() {
 		return {
-			localFilter: this.filter,
 			tags,
 		};
 	},
+	computed: {
+		selectedTags,
+	},
+	methods: {
+		getNewRange,
+	},
 };
 </script>
 
@@ -82,7 +106,7 @@ export default {
 		width: 1rem;
 		height: 1rem;
 		padding: .5rem;
-		fill: var(--darken-weak);
+		fill: var(--darken-hint);
 
 		&:hover {
 			cursor: pointer;
@@ -90,15 +114,10 @@ export default {
 	}
 
 	.include:hover,
-	.include.active {
+	&.selected .include {
 		fill: var(--success);
 	}
 
-	.exclude:hover,
-	.exclude.active {
-		fill: var(--alert);
-	}
-
 	.name {
 		flex-grow: 1;
 		padding: .5rem;