refactor: move flags into settings, change icon (#5678)

* refactor: move flags into settings, change icon

* fix: use ButtonStyled for app

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

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { ButtonStyled, StyledInput, Toggle } from '@modrinth/ui'
+import Fuse from 'fuse.js'
+import { computed, ref, shallowReactive } from 'vue'
+
+import {
+	DEFAULT_FEATURE_FLAGS,
+	type FeatureFlag,
+	saveFeatureFlags,
+	useFeatureFlags,
+} from '~/composables/featureFlags.ts'
+
+const flags = shallowReactive(useFeatureFlags().value)
+const searchQuery = ref('')
+
+const allFlags = computed(() => Object.keys(flags) as FeatureFlag[])
+
+function resetFlag(flag: FeatureFlag) {
+	flags[flag] = DEFAULT_FEATURE_FLAGS[flag]
+	saveFeatureFlags()
+}
+
+const fuse = computed(
+	() =>
+		new Fuse(allFlags.value, {
+			threshold: 0.4,
+		}),
+)
+
+const filteredFlags = computed(() => {
+	if (!searchQuery.value.trim()) {
+		return allFlags.value
+	}
+	return fuse.value.search(searchQuery.value).map((result) => result.item)
+})
+
+useSeoMeta({
+	robots: 'noindex',
+})
+</script>
+
+<template>
+	<div class="mb-2">
+		<StyledInput
+			v-model="searchQuery"
+			type="search"
+			:icon="SearchIcon"
+			placeholder="Search flags..."
+			wrapper-class="w-full rounded-xl bg-bg-raised"
+		/>
+	</div>
+	<div class="flex flex-col gap-2">
+		<div
+			v-for="flag in filteredFlags"
+			:key="`flag-${flag}`"
+			class="flex flex-row flex-wrap items-center gap-2 rounded-2xl bg-bg-raised p-4"
+		>
+			<label :for="`toggle-${flag}`" class="flex-1">
+				<span class="block font-semibold capitalize">
+					{{ flag.replaceAll('_', ' ') }}
+				</span>
+				<p class="m-0 text-secondary">
+					Default:
+					<span :class="DEFAULT_FEATURE_FLAGS[flag] === false ? 'text-red' : 'text-green'">
+						{{ DEFAULT_FEATURE_FLAGS[flag] }}
+					</span>
+				</p>
+			</label>
+			<div class="flex items-center gap-2">
+				<ButtonStyled type="transparent">
+					<button :disabled="flags[flag] === DEFAULT_FEATURE_FLAGS[flag]" @click="resetFlag(flag)">
+						Reset to default
+					</button>
+				</ButtonStyled>
+				<Toggle
+					:id="`toggle-${flag}`"
+					v-model="flags[flag]"
+					@update:model-value="() => saveFeatureFlags()"
+				/>
+			</div>
+		</div>
+		<p v-if="filteredFlags.length === 0" class="text-center text-secondary">
+			No flags found matching "{{ searchQuery }}"
+		</p>
+	</div>
+</template>