feat: update Asset Browser file sorting

src/core/i18n/default.json

@@ -7,6 +7,7 @@
   "AUTO_DEBUGGER": "Automatically connect to Debugger",
   "AUTO_DEVTOOLS": "Automatically connect to Devtools",
   "ASSET_BROWSER": "Asset Browser",
+  "ASSET_TYPES": "Asset Types",
   "BRAND": "Brand",
   "SHIGGYCORD": "ShiggyCord",
   "SHIGGYCORD_URL": "ShiggyCord URL",

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

@@ -1,21 +1,98 @@
 import AssetDisplay from "@core/ui/settings/pages/Developer/AssetDisplay";
 import { iterateAssets } from "@lib/api/assets";
-import { Text } from "@metro/common/components";
+import { findAssetId } from "@lib/api/assets";
+import { Strings } from "@core/i18n";
+import { IconButton, TableCheckboxRow, TableRowGroup, ActionSheet, BottomSheetTitleHeader } from "@metro/common/components";
 import { ErrorBoundary, Search } from "@ui/components";
-import { useMemo } from "react";
+import { showSheet } from "@lib/ui/sheets";
+import { useProxy, createProxy } from "@core/vendetta/storage";
+import { useState, useMemo, useCallback } from "react";
 import { FlatList, View } from "react-native";
 
+// Asset type categories
+const DISPLAYABLE_IMAGE_TYPES = new Set(["png", "jpg", "jpeg", "svg", "gif"]);
+const DISPLAYABLE_TEXT_TYPES = new Set(["jsona", "json", "lottie"]);
+
+// Define all available filters with their display names
+const FILTER_OPTIONS = [
+  { id: "images", label: "Images (PNG, JPG, SVG, GIF)", types: DISPLAYABLE_IMAGE_TYPES, defaultEnabled: true },
+  { id: "text", label: "Text Types (JSON, JSONA, Lottie)", types: DISPLAYABLE_TEXT_TYPES, defaultEnabled: false },
+];
+
+const { proxy: assetBrowserStorage } = createProxy({
+  enabledFilters: {
+    images: true,
+    text: false,
+  }
+});
+
 export default function AssetBrowser() {
-  const [search, setSearch] = React.useState("");
-  const all = useMemo(() => Array.from(iterateAssets()), []);
+  const [search, setSearch] = useState("");
+  const [updateTick, setUpdateTick] = useState(0);
+
+  // Use useProxy to make the state reactive
+  useProxy(assetBrowserStorage);
+
+  const getFilteredAssets = useCallback(() => {
+    return Array.from(iterateAssets()).filter((asset) => {
+      const type = String(asset.type ?? "").toLowerCase();
+
+      // Check if this asset type is enabled in any filter
+      for (const filter of FILTER_OPTIONS) {
+        if (assetBrowserStorage.enabledFilters[filter.id as keyof typeof assetBrowserStorage.enabledFilters] && filter.types.has(type)) {
+          return true;
+        }
+      }
+      return false;
+    });
+  }, [updateTick]);
+
+  const all = useMemo(() => getFilteredAssets(), [getFilteredAssets]);
+
+  const toggleFilter = (filterId: string) => {
+    assetBrowserStorage.enabledFilters[filterId as keyof typeof assetBrowserStorage.enabledFilters] = !assetBrowserStorage.enabledFilters[filterId as keyof typeof assetBrowserStorage.enabledFilters];
+    setUpdateTick(prev => prev + 1);
+  };
+
+  const handleFilterPress = () => {
+    showSheet("AssetBrowserFilter", () => {
+      useProxy(assetBrowserStorage);
+
+      return (
+        <ActionSheet>
+          <BottomSheetTitleHeader title={Strings.ASSET_TYPES} />
+          <View style={{ paddingVertical: 12, paddingHorizontal: 8 }}>
+            <TableRowGroup title="">
+              {FILTER_OPTIONS.map(filter => (
+                <TableCheckboxRow
+                  key={filter.id}
+                  label={filter.label}
+                  checked={assetBrowserStorage.enabledFilters[filter.id as keyof typeof assetBrowserStorage.enabledFilters]}
+                  onPress={() => toggleFilter(filter.id)}
+                />
+              ))}
+            </TableRowGroup>
+          </View>
+        </ActionSheet>
+      );
+    });
+  };
 
   return (
     <ErrorBoundary>
       <View style={{ flex: 1 }}>
-        <Search
-          style={{ margin: 10 }}
-          onChangeText={(v: string) => setSearch(v)}
-        />
+        <View style={{ flexDirection: "row", margin: 10, gap: 8, alignItems: "center" }}>
+          <Search
+            style={{ flex: 1 }}
+            isRound
+            onChangeText={(v: string) => setSearch(v)}
+          />
+          <IconButton
+            icon={findAssetId("FileIcon")}
+            variant="tertiary"
+            onPress={handleFilterPress}
+          />
+        </View>
         <View
           style={{
             flex: 1,
@@ -25,18 +102,9 @@ export default function AssetBrowser() {
             backgroundColor: "transparent",
           }}
         >
-          <Text
-            variant="text-sm/medium"
-            style={{
-              marginBottom: 16,
-              color: "var(--text-muted)",
-            }}
-          >
-            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,
+              (a) => (a.name.includes(search) || a.id.toString() === search),
             )}
             renderItem={({ item }: any) => <AssetDisplay asset={item} />}
             contentContainerStyle={{