Merged filters into new settings dialog, added experimental summary field.

assets/components/settings/settings.vue

@@ -0,0 +1,81 @@
+<template>
+	<Dialog
+		title="Settings"
+		@close="$emit('close')"
+	>
+		<nav class="tabs">
+			<button
+				class="tab"
+				:class="{ selected: section === 'filters' }"
+				@click="section = 'filters'"
+			>Filters</button>
+
+			<button
+				class="tab"
+				:class="{ selected: section === 'summary' }"
+				@click="section = 'summary'"
+			>Summary</button>
+		</nav>
+
+		<div class="dialog-body">
+			<component :is="sections[section]" />
+		</div>
+	</Dialog>
+</template>
+
+<script>
+import { shallowRef } from 'vue';
+
+import Filters from './filters.vue';
+import Summary from './summary.vue';
+
+export default {
+	emits: ['close'],
+	data() {
+		return {
+			sections: {
+				filters: shallowRef(Filters),
+				summary: shallowRef(Summary),
+			},
+			section: 'filters',
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.dialog-body {
+	width: 40rem;
+	max-width: 100%;
+}
+
+.tabs {
+	display: flex;
+}
+
+.tab {
+	flex-grow: 1;
+	padding: .75rem 1rem;
+	background: var(--shadow-touch);
+	border: none;
+	border-bottom: solid 1px var(--shadow-hint);
+	color: var(--shadow);
+	font-size: 1rem;
+	font-weight: bold;
+
+	&:not(:first-child) {
+		border-left: solid 1px var(--shadow-hint);
+	}
+
+	&.selected {
+		background: none;
+		color: var(--primary);
+		border-bottom: none;
+	}
+
+	&:hover {
+		color: var(--shadow-strong);
+		cursor: pointer;
+	}
+}
+</style>