AstralRinth/apps/frontend/src/pages/flags.vue

<script setup lang="ts">
import {
	DEFAULT_FEATURE_FLAGS,
	type FeatureFlag,
	saveFeatureFlags,
} from '~/composables/featureFlags.ts'

const flags = shallowReactive(useFeatureFlags().value)
</script>

<template>
	<div class="page">
		<h1>Feature flags</h1>
		<div class="flags">
			<div
				v-for="flag in Object.keys(flags) as FeatureFlag[]"
				:key="`flag-${flag}`"
				class="adjacent-input small card"
			>
				<label :for="`toggle-${flag}`">
					<span class="label__title">
						{{ flag.replaceAll('_', ' ') }}
					</span>
					<span class="label__description">
						<p>
							Default:
							<span
								:style="`color:var(--color-${
									DEFAULT_FEATURE_FLAGS[flag] === false ? 'red' : 'green'
								})`"
								>{{ DEFAULT_FEATURE_FLAGS[flag] }}</span
							>
						</p>
					</span>
				</label>
				<input
					:id="`toggle-${flag}`"
					v-model="flags[flag]"
					class="switch stylized-toggle"
					type="checkbox"
					@change="() => saveFeatureFlags()"
				/>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.page {
	width: calc(100% - 2 * var(--spacing-card-md));
	max-width: 800px;
	margin-inline: auto;
	box-sizing: border-box;
	margin-block: var(--spacing-card-md);
}

.flags {
}

.label__title {
	text-transform: capitalize;
}

.label__description p {
	margin: 0;
}
</style>