Reinitialized commit. Update and actors overview with some filters.

components/form/toggle.vue

@@ -0,0 +1,115 @@
+<template>
+	<label
+		class="toggle-container noselect"
+		:class="{ light: $store.state.ui.theme === 'dark' }"
+	>
+		<input
+			:id="`toggle-${id}`"
+			:checked="checked"
+			:true-value="trueValue"
+			:false-value="falseValue"
+			:disabled="disabled"
+			type="checkbox"
+			class="toggle-input"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`toggle-${id}`"
+			class="toggle"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		trueValue: {
+			type: null,
+			default: true,
+		},
+		falseValue: {
+			type: null,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['change'],
+	data() {
+		return {
+			id: Math.floor(new Date().getTime() * Math.random()),
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.toggle-container {
+	display: inline-block;
+	cursor: pointer;
+
+	&.light {
+		.toggle {
+			background: var(--lighten-weak);
+		}
+
+		.toggle-input:checked + .toggle {
+			background: var(--lighten);
+		}
+	}
+}
+
+.toggle {
+	width: 2rem;
+	height: .9rem;
+	display: flex;
+	align-items: center;
+	position: relative;
+	background: var(--shadow-hint);
+	border-radius: 1rem;
+	cursor: pointer;
+
+	&::after {
+		content: '';
+		background-color: var(--background-light);
+		width: 1rem;
+		height: 1rem;
+		display: inline-block;
+		position: absolute;
+		left: 0;
+		border-radius: 50%;
+		box-shadow: 0 0 2px var(--darken-strong);
+		transition: background-color .2s ease, left .2s ease;
+	}
+}
+
+.toggle-input {
+	display: none;
+
+	&:checked + .toggle {
+		background: var(--primary-faded);
+
+		&::after {
+			background: var(--primary);
+			left: calc(100% - 1rem);
+		}
+	}
+
+	&[disabled] + .toggle {
+		background: var(--shadow-weak);
+
+		&::after {
+			background: var(--shadow);
+		}
+	}
+}
+</style>