mirror of
https://github.com/modrinth/code.git
synced 2026-08-30 11:36:05 +00:00
Prospector
b68a199814
* add account switcher, migrate context menus to overflow menu system, update version filter controls, only pad instance icons * app account switcher, improve some context menus, theme stuff * prepr * handle reauthentication * fix a couple sign in issues, admin page cleanup, fix org status badges, fix official account badge, open in local keybind, publish plus icons * rename generic menus to ButtonMenu (& types) * fix hydration issue w/ dropdowns + middleware error
82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { SearchIcon } from '@modrinth/assets'
|
|
import { Button, Input, Toggle } from '@modrinth/ui'
|
|
import Fuse from 'fuse.js'
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import {
|
|
DEFAULT_FEATURE_FLAGS,
|
|
type FeatureFlag,
|
|
useAppSettings,
|
|
} from '@/composables/use-app-settings.ts'
|
|
import { get as getSettings, set as setSettings } from '@/helpers/settings.ts'
|
|
|
|
const appSettings = useAppSettings()
|
|
|
|
const settings = ref(await getSettings())
|
|
const searchQuery = ref('')
|
|
const allFlags = computed(() => Object.keys(DEFAULT_FEATURE_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)
|
|
})
|
|
|
|
function setFeatureFlag(key: FeatureFlag, value: boolean) {
|
|
appSettings.featureFlags[key] = value
|
|
settings.value.feature_flags[key] = value
|
|
}
|
|
|
|
watch(
|
|
settings,
|
|
async () => {
|
|
await setSettings(settings.value)
|
|
},
|
|
{ deep: true },
|
|
)
|
|
</script>
|
|
<template>
|
|
<div class="flex flex-col gap-2.5">
|
|
<Input
|
|
v-model="searchQuery"
|
|
type="search"
|
|
:icon="SearchIcon"
|
|
placeholder="Search flags..."
|
|
wrapper-class="w-full"
|
|
/>
|
|
<div v-for="option in filteredFlags" :key="option" class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="m-0 text-lg font-semibold text-contrast capitalize">
|
|
{{ option.replaceAll('_', ' ') }}
|
|
</h2>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Button
|
|
type="quiet"
|
|
:disabled="appSettings.getFeatureFlag(option) === DEFAULT_FEATURE_FLAGS[option]"
|
|
@click="setFeatureFlag(option, DEFAULT_FEATURE_FLAGS[option])"
|
|
>
|
|
Reset to default
|
|
</Button>
|
|
<Toggle
|
|
id="advanced-rendering"
|
|
:model-value="appSettings.getFeatureFlag(option)"
|
|
@update:model-value="() => setFeatureFlag(option, !appSettings.getFeatureFlag(option))"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<p v-if="filteredFlags.length === 0" class="text-center text-secondary">
|
|
No flags found matching "{{ searchQuery }}"
|
|
</p>
|
|
</div>
|
|
</template>
|