Added 'match all' tag filter for actors and toggle to 'match any'.

assets/components/header/filters.vue

@@ -15,6 +15,21 @@
 		</div>
 
 		<div slot="popover">
+			<select
+				v-model="mode"
+				class="mode"
+				@change="$router.push({ query: { ...$route.query, mode } })"
+			>
+				<option
+					value="all"
+					class="option"
+				>match all selected</option>
+				<option
+					value="any"
+					class="option"
+				>match any selected</option>
+			</select>
+
 			<ul class="tags nolist">
 				<li
 					v-for="tag in availableTags"
@@ -22,7 +37,7 @@
 					class="tag"
 					:class="{ selected: selectedTags.includes(tag.slug) }"
 				>
-					<router-link :to="{ query: { ...getNewRange(tag.slug) } }">
+					<router-link :to="{ query: { ...getNewRange(tag.slug), mode } }">
 						<Icon
 							icon="checkmark"
 							class="include"
@@ -30,7 +45,7 @@
 					</router-link>
 
 					<router-link
-						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }) } }"
+						:to="{ query: { ...(selectedTags.length === 1 && selectedTags.includes(tag.slug) ? null : { tags: tag.slug }), mode }, params: { pageNumber: 1 } }"
 						class="name"
 					>{{ tag.name }}</router-link>
 				</li>
@@ -71,6 +86,11 @@ export default {
 			default: () => [],
 		},
 	},
+	data() {
+		return {
+			mode: 'all',
+		};
+	},
 	computed: {
 		selectedTags,
 	},
@@ -119,6 +139,15 @@ export default {
 	}
 }
 
+.mode {
+	width: 100%;
+	background: none;
+	padding: .75rem;
+	font-size: 1rem;
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
 .tags {
 	padding: .5rem 0;
 }