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="(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>
		</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',
	'anal-prolapse': 'anal prolapse',
	pissing: 'pissing',
	gay: 'gay',
	transsexual: 'transsexual',
	bisexual: 'bisexual',
	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>

<style scoped>
.dialog-body {
	padding: 1rem;
	width: 30rem;
	max-width: 100%;
	overflow-y: auto;
}

.tags-item {
	display: block;
}

.tag {
	display: flex;
	padding: .5rem 0;
	text-transform: capitalize;

	.check-container {
		margin-right: 1rem;
	}
}
</style>