traxxx-web/components/settings/settings.vue

<template>
	<Dialog title="Settings">
		<div class="dialog-body">
			<div class="dialog-section">
				<h3 class="dialog-heading">Filter</h3>

				<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="tag in tags"
						:key="`tag-${tag}`"
						class="tags-item"
					>
						<label class="tag noselect">
							<Checkbox
								:checked="checkedTags.has(tag)"
								class="minus"
								@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>