Moved filter sections to their own components.

components/filters/gender.vue

@@ -0,0 +1,113 @@
+<template>
+	<ul class="filter genders nolist">
+		<li>
+			<button
+				:class="{ selected: filters.gender === undefined }"
+				type="button"
+				class="gender-button all"
+				@click="emit('update', 'gender', undefined, true)"
+			>all</button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'female' }"
+				type="button"
+				class="gender-button female"
+				@click="emit('update', 'gender', 'female', true)"
+			><Gender gender="female" /></button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'male' }"
+				type="button"
+				class="gender-button male"
+				@click="emit('update', 'gender', 'male', true)"
+			><Gender gender="male" /></button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'transsexual' }"
+				type="button"
+				class="gender-button transsexual"
+				@click="emit('update', 'gender', 'transsexual', true)"
+			><Gender gender="transsexual" /></button>
+		</li>
+
+		<li>
+			<button
+				:class="{ selected: filters.gender === 'other' }"
+				type="button"
+				class="gender-button other"
+				@click="emit('update', 'gender', 'other', true)"
+			><Icon icon="question5" /></button>
+		</li>
+	</ul>
+</template>
+
+<script setup>
+import Gender from '#/components/actors/gender.vue';
+
+defineProps({
+	filters: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['update']);
+</script>
+
+<style scoped>
+.genders {
+	display: flex;
+	justify-content: center;
+	gap: .5rem;
+}
+
+.gender-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+	border: none;
+    color: var(--shadow);
+    background: var(--background);
+    font-weight: bold;
+    text-decoration: none;
+	font-size: .9rem;
+    box-shadow: 0 0 3px var(--shadow-weak-20);
+
+    .male,
+    .female,
+    .transsexual {
+        padding: .2rem 0 0 0;
+    }
+
+    .icon {
+        fill: var(--shadow);
+    }
+
+    &:hover {
+        color: var(--text);
+        cursor: pointer;
+
+        .icon {
+            fill: var(--text);
+        }
+    }
+
+    &.selected {
+        background: var(--primary);
+        color: var(--text-light);
+
+        &.other .icon {
+            fill: var(--text-light);
+        }
+    }
+}
+</style>