Implemented negative filters in back-end, added basic fixed filters settings dialog.

components/settings/settings.vue

@@ -0,0 +1,78 @@
+<template>
+	<Dialog title="Settings">
+		<div class="dialog-body">
+			<div class="dialog-section">
+				<ul class="tags nolist">
+					<li
+						v-for="tag in tags"
+						:key="`tag-${tag}`"
+						class="tags-item"
+					>
+						<label class="tag noselect">
+							<Checkbox
+								:checked="checkedTags.has(tag)"
+								@change="(checked) => toggleTag(tag, checked)"
+							/>{{ tag }}
+						</label>
+					</li>
+				</ul>
+			</div>
+		</div>
+	</Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Cookies from 'js-cookie';
+
+import Dialog from '#/components/dialog/dialog.vue';
+import Checkbox from '#/components/form/checkbox.vue';
+
+const cookies = Cookies.withConverter({
+	write: (value) => value,
+});
+
+const tags = [
+	'anal',
+	'anal prolapse',
+	'bisexual',
+	'gay',
+	'pissing',
+	'transsexual',
+];
+
+const storedTags = cookies.get('tags');
+const checkedTags = ref(new Set(storedTags ? JSON.parse(storedTags) : []));
+
+function toggleTag(tag, isChecked) {
+	if (isChecked) {
+		checkedTags.value.add(tag);
+	} else {
+		checkedTags.value.delete(tag);
+	}
+
+	cookies.set('tags', JSON.stringify(Array.from(checkedTags.value)), { expires: 400 }); // 100 years from now
+}
+</script>
+
+<style scoped>
+.dialog-body {
+	padding: 1rem;
+	width: 30rem;
+	max-width: 100%;
+}
+
+.tags-item {
+	display: block;
+}
+
+.tag {
+	display: flex;
+	padding: .5rem 0;
+	text-transform: capitalize;
+
+	.check-container {
+		margin-right: 1rem;
+	}
+}
+</style>