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

components/header/header.vue

@@ -124,6 +124,15 @@
 								</a>
 							</li>
 
+							<li
+								v-close-popper
+								class="menu-item menu-button"
+								@click="showSettings = true"
+							>
+								<Icon icon="equalizer" />
+								Settings
+							</li>
+
 							<li
 								class="menu-button menu-item logout"
 								@click="logout"
@@ -147,6 +156,11 @@
 				</a>
 			</div>
 		</div>
+
+		<Settings
+			v-if="showSettings"
+			@close="showSettings = false"
+		/>
 	</header>
 </template>
 
@@ -160,6 +174,8 @@ import {
 import navigate from '#/src/navigate.js';
 import { del } from '#/src/api.js';
 
+import Settings from '#/components/settings/settings.vue';
+
 import logo from '../../assets/img/logo.svg?raw'; // eslint-disable-line import/no-unresolved
 
 const pageContext = inject('pageContext');
@@ -168,6 +184,7 @@ const user = pageContext.user;
 const query = ref(pageContext.urlParsed.search.q || '');
 const allowLogin = pageContext.env.allowLogin;
 const searchFocused = ref(false);
+const showSettings = ref(false);
 
 const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 const currentPath = `${pageContext.urlParsed.pathnameOriginal}${pageContext.urlParsed.searchOriginal || ''}`;

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>