Added years filter. Changed default DMCA to generic content e-mail.

components/filters/years.vue

@@ -0,0 +1,107 @@
+<template>
+	<div class="years-container">
+		<select
+			v-model="selected"
+			class="years nobar"
+			multiple
+			@change="updateYears"
+		>
+			<option
+				v-for="year in years"
+				:key="`year-${year.year}`"
+				class="year"
+				:value="year.year"
+			>{{ year.year }}</option>
+		</select>
+
+		<Icon
+			v-show="selected.length > 0"
+			icon="cross2"
+			class="clear"
+			@click="clearYears"
+		/>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+	years: {
+		type: Array,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+const selected = ref(props.filters.years);
+
+function updateYears() {
+	emit('update', 'years', selected.value);
+}
+
+function clearYears() {
+	selected.value = [];
+	emit('update', 'years', selected.value);
+}
+</script>
+
+<style scoped>
+.years-container {
+	display: flex;
+	align-items: stretch;
+	border-bottom: solid 1px var(--shadow-weak-30);
+}
+
+.years {
+	height: 2.5rem;
+	padding: .5rem;
+	flex-grow: 1;
+	border: none;
+	overflow-x: auto;
+	overflow-y: hidden;
+	background: none;
+
+	&:focus .year:checked {
+		background: var(--primary) linear-gradient(0deg, var(--primary) 0%, var(--primary) 100%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+}
+
+.year {
+	display: inline-block;
+	padding: .25rem;
+	font-size: .8rem;
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+	}
+
+	&:checked {
+		color: var(--primary);
+		background: none;
+		font-weight: bold;
+	}
+}
+
+.clear {
+	height: auto;
+	display: flex;
+	align-items: center;
+	padding: 0 .5rem;
+	fill: var(--shadow);
+
+	&:hover {
+		fill: var(--primary);
+		cursor: pointer;
+	}
+}
+</style>