Moved filter sections to their own components.

components/filters/filters.vue

@@ -0,0 +1,99 @@
+<template>
+	<div
+		class="filters-container"
+		:class="{ 'compact-hide': !showFilters }"
+		@click="toggleFilters(false)"
+	>
+		<form
+			v-show="showFilters"
+			class="filters"
+			@submit.prevent
+			@click.stop
+		>
+			<slot />
+		</form>
+	</div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const showFilters = ref(true);
+
+function toggleFilters(state) {
+	showFilters.value = state ?? !showFilters.value;
+}
+</script>
+
+<style scoped>
+.filters-container {
+	position: relative;
+}
+
+.filters {
+	width: 17rem;
+	flex-shrink: 0;
+	padding: .5rem 0;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+.filters-toggle {
+	min-width: 1.5rem;
+	height: 2rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0 .25rem;
+	border-radius: 0 .25rem .25rem 0;
+	background: var(--background);
+	color: var(--shadow);
+	font-weight: bold;
+	box-shadow: inset 0 0 3px var(--shadow-weak-30);
+
+	&.show {
+		padding: 0 .5rem 0 1.25rem;
+
+		.icon {
+			margin-left: .5rem;
+		}
+	}
+
+	.icon {
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+@media (max-width: 1200px) {
+	.filters-container {
+		height: 100%;
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		background: var(--background-dim);
+	}
+
+	.filters {
+		height: 100%;
+		overflow-y: auto;
+	}
+
+	.compact-hide {
+		display: none;
+	}
+}
+</style>