Moved filter sections to their own components.

components/filters/boobs.vue

@@ -0,0 +1,60 @@
+<template>
+	<div class="filter">
+		<RangeFilter
+			label="bra size"
+			:min="0"
+			:max="braSizes.length - 1"
+			:value="filters.braSize"
+			:values="braSizes"
+			:disabled="!filters.braSizeRequired"
+			@enable="(checked) => emit('update', 'braSizeRequired', checked, true)"
+			@input="(range) => emit('update', 'braSize', range, false)"
+			@change="(range) => emit('update', 'braSize', range, true)"
+		>
+			<template #start><Icon icon="boobs-small" /></template>
+			<template #end><Icon icon="boobs-big" /></template>
+		</RangeFilter>
+
+		<span class="filter-label">Enhanced Boobs</span>
+
+		<span
+			:class="{ [['off', 'default', 'on'][naturalBoobsValues.indexOf(filters.naturalBoobs)]]: true }"
+			class="toggle-container noclick"
+		>
+			<span
+				class="toggle-label off"
+				@click="emit('update', 'naturalBoobs', true, true)"
+			><Icon icon="leaf" /></span>
+
+			<input
+				:value="naturalBoobsValues.indexOf(filters.naturalBoobs)"
+				class="toggle"
+				type="range"
+				min="0"
+				max="2"
+				@change="emit('update', 'naturalBoobs', naturalBoobsValues[$event.target.value], true)"
+			>
+
+			<span
+				class="toggle-label on"
+				@click="emit('update', 'naturalBoobs', false, true)"
+			><Icon icon="magic-wand2" /></span>
+		</span>
+	</div>
+</template>
+
+<script setup>
+import RangeFilter from '#/components/filters/range.vue';
+
+defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+
+const braSizes = 'ABCDEFGHIJKZ'.split('');
+const naturalBoobsValues = [true, undefined, false];
+</script>