SheWhoReignsSupreme/GoonCord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(Dev): Add option to filter NonImage Assets

Browse source
This commit is contained in:
Bwlok 2025-11-07 06:57:46 +01:00
parent 0bdb90ef3d
commit f80888f8af
1 changed files with 46 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
src/core/ui/settings/pages/Developer/AssetBrowser.tsx
View file

@ -1,27 +1,64 @@
import AssetDisplay from "@core/ui/settings/pages/Developer/AssetDisplay";
import { iterateAssets } from "@lib/api/assets";
import { iterateAssets, findAssetId } from "@lib/api/assets";
import { Text } from "@metro/common/components";
import { ErrorBoundary, Search } from "@ui/components";
import { useMemo } from "react";
import { FlatList, View, ScrollView } from "react-native";
import { FlatList, View, ScrollView, TouchableOpacity, Image } from "react-native";
const displayable = new Set(['png', 'jpg', 'svg']);
export default function AssetBrowser() {
const [search, setSearch] = React.useState("");
const [showNonImages, setShowNonImages] = React.useState(false);
const all = useMemo(() => Array.from(iterateAssets()), []);
const filteredData = useMemo(() => {
let result = all.filter(a => a.name.includes(search) || a.id.toString() === search);
if (!showNonImages) {
result = result.filter(a => displayable.has(a.type));
}
return result;
}, [all, search, showNonImages]);
return (
<ErrorBoundary>
<View style={{ flex: 1 }}>
<Search
style={{ margin: 10 }}
onChangeText={(v: string) => setSearch(v)}
/>
<View style={{ flexDirection: 'row', alignItems: 'center', margin: 10 }}>
<View style={{ flex: 1, marginRight: 10 }}>
<Search
onChangeText={(v: string) => setSearch(v)}
/>
</View>
<TouchableOpacity
style={{
padding: 12,
backgroundColor: showNonImages ? '#0f1013' : '#303139',
borderRadius: 8,
justifyContent: 'center',
alignItems: 'center',
minWidth: 44,
minHeight: 44,
}}
onPress={() => setShowNonImages(!showNonImages)}
>
<Image
style={{ width: 20, height: 20 }}
source={findAssetId("ic_image")!}
/>
</TouchableOpacity>
</View>
<ScrollView>
<View style={{ flex: 1, borderRadius: 16, paddingHorizontal: 12, overflow: 'hidden', backgroundColor: 'transparent' }}>
<Text variant='text-sm/medium' color='text-danger' style={{ marginBottom: 16 }}>Some assets types cannot be displayed and will be marked in red.</Text>
{showNonImages && (
<Text variant='text-sm/medium' color='text-danger' style={{ marginBottom: 16 }}>Some assets types cannot be displayed and will be marked in red.</Text>
)}
<FlatList
data={all.filter(a => a.name.includes(search) || a.id.toString() === search)}
renderItem={({ item }: any) => <AssetDisplay asset={item} />}
data={filteredData}
renderItem={({ item }: any) => <AssetDisplay asset={item} showNonImages={showNonImages} />}
contentContainerStyle={{ overflow: 'hidden', backgroundColor: 'transparent', borderRadius: 16 }}
scrollEnabled={false}
keyExtractor={a => a.id.toString()}