Added new tag filter stub.

assets/components/actors/actor.vue

@@ -303,8 +303,8 @@ import Gender from './gender.vue';
 import Social from './social.vue';
 
 async function fetchActor() {
-	this.actor = await this.$store.dispatch('fetchActorBySlug', {
-		actorSlug: this.$route.params.actorSlug,
+	this.actor = await this.$store.dispatch('fetchActorById', {
+		actorId: Number(this.$route.params.actorId),
 		range: this.$route.params.range,
 	});
 }

assets/components/header/filters.vue

@@ -1,72 +1,41 @@
 <template>
-	<div :class="{ compact }">
-		<ul class="filters">
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('lesbian') }"
-				>
-					<input
-						v-model="localFilter"
-						value="lesbian"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>lesbian
-				</label>
-			</li>
+	<v-popover class="filters">
+		<div class="applied">Anal</div>
 
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('gay') }"
+		<div slot="popover">
+			<ul class="tags nolist">
+				<li
+					v-for="tag in tags"
+					:key="`tag-${tag}`"
+					class="tag"
 				>
-					<input
-						v-model="localFilter"
-						value="gay"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>gay
-				</label>
-			</li>
+					<Icon
+						icon="checkmark"
+						class="include"
+					/>
 
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('transsexual') }"
-				>
-					<input
-						v-model="localFilter"
-						value="transsexual"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>trans
-				</label>
-			</li>
-		</ul>
+					<Icon
+						icon="cross"
+						class="exclude"
+					/>
 
-		<ul class="filters">
-			<li class="filter">
-				<label
-					class="toggle"
-					:class="{ active: !localFilter.includes('anal') }"
-				>
-					<input
-						v-model="localFilter"
-						value="anal"
-						type="checkbox"
-						class="check"
-						@change="$emit('set-filter', localFilter)"
-					>anal
-				</label>
-			</li>
-		</ul>
-	</div>
+					<router-link
+						:to="{ name: 'tag', params: { tagSlug: tag } }"
+						class="name"
+					>{{ tag }}</router-link>
+				</li>
+			</ul>
+		</div>
+	</v-popover>
 </template>
 
 <script>
+const tags = [
+	'anal',
+	'double-penetration',
+	'gangbang',
+];
+
 export default {
 	props: {
 		filter: {
@@ -81,6 +50,7 @@ export default {
 	data() {
 		return {
 			localFilter: this.filter,
+			tags,
 		};
 	},
 };
@@ -89,54 +59,55 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.filters {
-    display: inline-block;
-    list-style: none;
-    padding: .5rem;
-    margin: 0;
-
-    &:not(:last-child) {
-        border-right: solid 1px var(--shadow-hint);
-    }
+.applied {
+	padding: .5rem 1rem;
+	font-size: 1rem;
 }
 
-.filter {
-    display: inline-block;
+.tags {
+	padding: .5rem 0;
 }
 
-.compact {
-    .filters {
-        padding: 0;
-        border: none;
-    }
+.tag {
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
 
-    .filter {
-        margin: 0 0 1.5rem 0;
-    }
-}
+	.icon:hover,
+	.name:hover {
+		background: var(--darken-hint);
+	}
 
-.toggle {
-    color: var(--shadow);
-    box-sizing: border-box;
-    padding: .5rem;
-    margin: 0 .25rem;
-    border: solid 1px transparent;
-    font-size: .9rem;
-    font-weight: bold;
-    cursor: pointer;
+	.icon {
+		width: 1rem;
+		height: 1rem;
+		padding: .5rem;
+		fill: var(--darken-weak);
 
-    .check {
-        display: none;
-    }
+		&:hover {
+			cursor: pointer;
+		}
+	}
 
-    &:hover {
-        color: var(--shadow);
-    }
+	.include:hover,
+	.include.active {
+		fill: var(--success);
+	}
 
-    &.active {
-		background: var(--background);
-        color: var(--primary);
-        box-shadow: 0 0 2px var(--shadow-weak);
-    }
+	.exclude:hover,
+	.exclude.active {
+		fill: var(--alert);
+	}
+
+	.name {
+		padding: .5rem;
+		color: var(--text);
+		text-decoration: none;
+	}
+
+	&:hover {
+		background: var(--darken-hint);
+		cursor: pointer;
+	}
 }
 </style>

assets/components/tags/tag.vue

@@ -3,8 +3,6 @@
 		v-if="tag"
 		class="content"
 	>
-		<FilterBar :fetch-releases="fetchReleases" />
-
 		<div
 			class="tag"
 			:class="{ nomedia: !hasMedia }"
@@ -42,6 +40,7 @@
 				</div>
 			</div>
 
+
 			<div class="content-inner">
 				<Photos
 					v-if="hasMedia"
@@ -49,6 +48,7 @@
 					class="compact"
 				/>
 
+				<FilterBar :fetch-releases="fetchReleases" />
 				<Releases :releases="tag.releases" />
 			</div>
 		</div>
@@ -153,6 +153,7 @@ export default {
 
 .content-inner {
     padding: 0;
+	overflow-y: auto;
 }
 
 .header {

assets/components/tile/actor.vue

@@ -4,7 +4,7 @@
 		class="actor"
 	>
 		<router-link
-			:to="{ name: 'actor', params: { actorSlug: actor.slug } }"
+			:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 			class="link"
 		>
 			<span

assets/components/tile/release.vue

@@ -123,10 +123,10 @@
 						:key="actor.id"
 						class="actor"
 					>
-						<a
-							:href="`/actor/${actor.slug}`"
+						<router-link
+							:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
 							class="actor-link"
-						>{{ actor.name }}</a>
+						>{{ actor.name }}</router-link>
 					</li>
 				</ul>
 			</span>