feat: shared components for worlds + p2p instances (#5135)

* feat: base content card component

* fix: tooltips + colors

* feat: fix orgs

* feat: add ContentModpackCard

* fix: extract types

* feat: selection v-model

* add show icon in selected for combobox with stories

* feat: add project combobox

* clean up project combobox

* feat: start install to play modal

* fix: events

* feat: figma alignments

* feat: migrate toggle to tailwind

* fix: row borders

* feat: disabled state

* feat: virtual list impl for card table based on window scroll

* fix: lint

* feat: virtualization + smaller contentcard items

* feat: fix gap + border issues on last elm

* fix: use TeleportOverflowMenu

* fix: hasUpdate type

* fix: fallback to svg if src is invalid on avatar component

* fix: storybook

* feat: start on updater modal

* feat: finish content updater modal

* feat: i18n pass

* remove install to play modal from ui package

* pnpm prepr

* feat: reusable table component

* feat: add column width prop for table and fix stories

* feat: add table overflow menu story example

* feat: add surface-1.5 and use in table

* chore: export table in index

* fix: allow more loose typing on columns

* feat: update table component to derive key from column instead of data

* feat: surface 1.5 for oled + refactor story for contentcardtable + yeet sorting funcs

* fix: lint

* feat: add no padding story for new modal

---------

Signed-off-by: Calum H. <contact@cal.engineer>
Co-authored-by: tdgao <mr.trumgao@gmail.com>

apps/frontend/src/pages/flags.vue

@@ -1,67 +1,76 @@
 <script setup lang="ts">
+import { SearchIcon } from '@modrinth/assets'
+import { 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[])
+
+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)
+})
 </script>
 
 <template>
-	<div class="page">
-		<h1>Feature flags</h1>
-		<div class="flags">
+	<div class="mx-auto my-4 box-border w-[calc(100%-2rem)] max-w-[800px]">
+		<h1 class="mb-4 text-2xl font-bold text-contrast">Feature flags</h1>
+		<div class="relative mb-2">
+			<SearchIcon
+				class="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-secondary"
+			/>
+			<input
+				v-model="searchQuery"
+				type="search"
+				placeholder="Search flags..."
+				class="w-full rounded-xl bg-bg-raised py-2 pl-10 pr-4"
+			/>
+		</div>
+		<div class="flex flex-col gap-2">
 			<div
-				v-for="flag in Object.keys(flags) as FeatureFlag[]"
+				v-for="flag in filteredFlags"
 				:key="`flag-${flag}`"
-				class="adjacent-input small card"
+				class="flex flex-row flex-wrap items-center gap-2 rounded-2xl bg-bg-raised p-4"
 			>
-				<label :for="`toggle-${flag}`">
-					<span class="label__title">
+				<label :for="`toggle-${flag}`" class="flex-1">
+					<span class="block font-semibold capitalize">
 						{{ 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>
+					<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>
-				<input
+				<Toggle
 					:id="`toggle-${flag}`"
 					v-model="flags[flag]"
-					class="switch stylized-toggle"
-					type="checkbox"
-					@change="() => saveFeatureFlags()"
+					@update:model-value="() => saveFeatureFlags()"
 				/>
 			</div>
+			<p v-if="filteredFlags.length === 0" class="text-center text-secondary">
+				No flags found matching "{{ searchQuery }}"
+			</p>
 		</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>