feat(settings/pages/Developer): show assets types, mark non-previewable assets in AssetBrowser

src/core/ui/settings/pages/Developer/AssetBrowser.tsx

@@ -1,5 +1,6 @@
 import AssetDisplay from "@core/ui/settings/pages/Developer/AssetDisplay";
 import { assetsMap } from "@lib/api/assets";
+import { Text } from "@metro/common/components";
 import { ErrorBoundary, Search } from "@ui/components";
 import { FlatList, View } from "react-native";
 
@@ -14,6 +15,7 @@ export default function AssetBrowser() {
                     onChangeText={(v: string) => setSearch(v)}
                 />
                 <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>
                     <FlatList
                         data={Object.values(assetsMap).filter(a => a.name.includes(search) || a.id.toString() === search)}
                         renderItem={({ item }: any) => <AssetDisplay asset={item} />}

src/core/ui/settings/pages/Developer/AssetDisplay.tsx

@@ -1,35 +1,60 @@
-import { Asset } from "@lib/api/assets";
+import { Asset, findAssetId } from "@lib/api/assets";
 import { lazyDestructure } from "@lib/utils/lazy";
 import { findByProps } from "@metro";
 import { clipboard } from "@metro/common";
-import { Stack, TableRow } from "@metro/common/components";
+import { Stack, TableRow, Text } from "@metro/common/components";
 import { showToast } from "@ui/toasts";
 import { Image } from "react-native";
 
 const { openAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
 const { AlertModal, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
 
+const displayable = new Set(['png', 'jpg', 'svg']);
+
+const iconMap = {
+    jsona: 'ic_file_text',
+    lottie: 'ic_image',
+    webm: 'CirclePlayIcon-primary',
+    ttf: 'ic_add_text',
+    default: 'UnknownGameIcon'
+};
+
 interface AssetDisplayProps { asset: Asset; }
 
 export default function AssetDisplay({ asset }: AssetDisplayProps) {
+
     return (
         <TableRow
+            variant={displayable.has(asset.type) ? 'default' : 'danger'}
             label={asset.name}
-            subLabel={`Index: ${asset.index}`}
-            icon={<Image source={asset.index} style={{ width: 32, height: 32 }} />}
-            onPress={() => {
+            subLabel={`Index: ${asset.index} Type: ${asset.type}`}
+            icon={
+                displayable.has(asset.type)
+                    ? <Image source={asset.index} style={{ width: 32, height: 32 }} />
+                    : <TableRow.Icon
+                        variant='danger'
+                        source={findAssetId(asset.type in iconMap ? iconMap[asset.type as keyof typeof iconMap] : iconMap.default)}
+                      />
+            }
+            onPress={() =>
                 openAlert("revenge-asset-display-details", <AlertModal
                     title={asset.name}
-                    content={`Index: ${asset.index}\nModule ID: ${asset.moduleId}`}
-                    extraContent={<Image resizeMode="contain" source={asset.index} style={{ flex: 1, width: 'auto', height: 192 }} />}
+                    content={`Index: ${asset.index}\nModule ID: ${asset.moduleId}\nType: ${asset.type}`}
+                    extraContent={
+                        displayable.has(asset.type)
+                            ? <Image resizeMode="contain" source={asset.index} style={{ flex: 1, width: 'auto', height: 192 }} />
+                            : (<Text variant='text-sm/medium' color="text-danger" style={{ width: '100%', textAlign: 'center' }}>
+                                Asset type {asset.type.toUpperCase()} is not supported for preview.
+                              </Text>)
+                    }
                     actions={
                         <Stack>
                             <AlertActionButton text="Copy asset name" variant="primary" onPress={() => copyToClipboard(asset.name)} />
                             <AlertActionButton text="Copy asset index" variant="secondary" onPress={() => copyToClipboard(asset.index.toString())} />
                         </Stack>
                     }
-                />);
-            }}
+                />)
+            }
         />
     );
 }

src/core/ui/settings/pages/Fonts/FontEditor.tsx

@@ -3,8 +3,6 @@ import { createProxy, useProxy } from "@core/vendetta/storage";
 import { FontDefinition, fonts, removeFont, saveFont, updateFont, validateFont } from "@lib/addons/fonts";
 import { getCurrentTheme } from "@lib/addons/themes";
 import { findAssetId } from "@lib/api/assets";
-import { semanticColors } from "@lib/ui/color";
-import { createStyles, TextStyleSheet } from "@lib/ui/styles";
 import { safeFetch } from "@lib/utils";
 import { lazyDestructure } from "@lib/utils/lazy";
 import { NavigationNative } from "@metro/common";
@@ -14,13 +12,6 @@ import { ErrorBoundary } from "@ui/components";
 import { useMemo, useRef, useState } from "react";
 import { ScrollView, View } from "react-native";
 
-const useStyles = createStyles({
-    errorText: {
-        ...TextStyleSheet["text-xs/medium"],
-        color: semanticColors.TEXT_DANGER,
-    },
-});
-
 const actionSheet = findByPropsLazy("hideActionSheet");
 const { openAlert } = lazyDestructure(() => findByProps("openAlert", "dismissAlert"));
 const { AlertModal, AlertActionButton } = lazyDestructure(() => findByProps("AlertModal", "AlertActions"));
@@ -278,8 +269,6 @@ export default function FontEditor(props: {
     const [importing, setIsImporting] = useState<boolean>(false);
     const [errors, setErrors] = useState<Array<Error | undefined> | undefined>();
 
-    const styles = useStyles();
-
     const memoEntry = useMemo(() => {
         return createProxy(props.name ? { ...fonts[props.name].main } : {}).proxy;
     }, [props.name]);
@@ -343,7 +332,7 @@ export default function FontEditor(props: {
 
                     return <TableRow
                         label={name}
-                        subLabel={error ? <Text style={styles.errorText}>{error.message}</Text> : url}
+                        subLabel={error ? <Text variant='text-xs/medium' color='text-danger'>{error.message}</Text> : url}
                         trailing={<Stack spacing={8} direction="horizontal">
                             <IconButton
                                 size="sm"
@@ -374,7 +363,7 @@ export default function FontEditor(props: {
                 })}
                 <TableRow label={<NewEntryRow fontName={props.name} fontEntry={fontEntries} />} />
             </TableRowGroup>
-            {errors && <Text style={styles.errorText}>Some font entries cannot be imported. Please modify the entries and try again.</Text>}
+            {errors && <Text variant='text-sm/medium' color='text-danger'>Some font entries cannot be imported. Please modify the entries and try again.</Text>}
             <View style={{ flexDirection: "row", justifyContent: "flex-end", bottom: 0, left: 0 }}>
                 <Button
                     size="lg"

src/lib/api/assets.ts

@@ -45,6 +45,7 @@ export const assetsMap: Record<string, Asset> = new Proxy<any>({}, {
 export interface Asset {
     /** @deprecated */
     id: number;
+    type: 'jsona' | 'jpg' | 'png' | 'svg' | 'lottie' | 'ttf' | 'webm'
     index: number;
     name: string;
     moduleId: number;