Replaced profile pill bar with portal page.

components/settings/filters.vue

@@ -0,0 +1,76 @@
+<script setup>
+import Cookies from 'js-cookie';
+import { ref } from 'vue';
+
+import Checkbox from '#/components/form/checkbox.vue';
+
+const cookies = Cookies.withConverter({
+	write: (value) => value,
+});
+
+const tags = {
+	'anal': 'anal',
+	'anal-prolapse': 'anal prolapse',
+	'extreme-insertion': 'extreme insertion (oversized dildos)',
+	'pissing': 'pissing',
+	'gay': 'gay',
+	'transsexual': 'transsexual',
+	'bisexual': 'bisexual',
+	'compilation': 'compilation',
+	'bts': 'behind the scenes',
+	'vr': 'virtual reality',
+};
+
+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>
+
+<template>
+	<div class="dialog-section">
+		<p class="dialog-description">Check the tags that you prefer to be <strong>excluded</strong> from the results. The filter is a courtesy, and provides no guarantees.</p>
+
+		<ul class="tags nolist">
+			<li
+				v-for="(label, slug) in tags"
+				:key="`tag-${slug}`"
+				class="tags-item"
+			>
+				<label class="tag noselect">
+					<Checkbox
+						:value="slug"
+						:checked="checkedTags.has(slug)"
+						class="minus"
+						@change="(checked) => toggleTag(slug, checked)"
+					/>{{ label }}
+				</label>
+			</li>
+		</ul>
+	</div>
+</template>
+
+<style scoped>
+.tags-item {
+	display: block;
+}
+
+.tag {
+	display: flex;
+	padding: .5rem 0;
+	text-transform: capitalize;
+
+	.check-container {
+		margin-right: 1rem;
+	}
+}
+</style>