Added delete stash icons and dialog.

assets/components/filters/filters.vue

@@ -0,0 +1,84 @@
+<template>
+	<Dialog
+		title="Filters"
+		@close="$emit('close')"
+	>
+		<div class="filters">
+			<h3 class="form-heading">Show me</h3>
+
+			<ul class="tags nolist">
+				<li
+					v-for="tag in tags"
+					:key="tag"
+					class="tags-item"
+				>
+					<Checkbox
+						:checked="!tagFilter.includes(tag)"
+						:label="tag"
+						class="tag"
+						@change="(state) => filterTag(tag, state)"
+					/>
+				</li>
+			</ul>
+
+			<p class="disclaimer">You may still incidentally see filtered out content</p>
+		</div>
+	</Dialog>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+
+function tagFilter() {
+	return this.$store.state.ui.tagFilter;
+}
+
+function filterTag(tag, isChecked) {
+	if (isChecked) {
+		this.$store.dispatch('setTagFilter', this.tagFilter.filter(filteredTag => filteredTag !== tag));
+	} else {
+		this.$store.dispatch('setTagFilter', this.tagFilter.concat(tag));
+	}
+}
+
+export default {
+	components: {
+		Checkbox,
+	},
+	data() {
+		return {
+			tags: ['anal', 'gay', 'transsexual', 'bisexual', 'pissing'],
+		};
+	},
+	computed: {
+		tagFilter,
+	},
+	emits: ['close'],
+	methods: {
+		filterTag,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.filters {
+	width: 20rem;
+	max-width: 100%;
+}
+
+.tags-item {
+	display: block;
+}
+
+.tag {
+	padding: .5rem 0;
+}
+
+.disclaimer {
+	margin: 1rem 0 0 0;
+	line-height: 1.5;
+	text-align: center;
+	font-size: .9rem;
+	color: var(--shadow);
+}
+</style>