From 111720806cbb4eddd690e22436135b8411319531 Mon Sep 17 00:00:00 2001
From: Beef <beefers@riseup.net>
Date: Sun, 23 Oct 2022 00:38:04 +0100
Subject: [PATCH] [UI > AssetBrowser] Add

---
 src/ui/settings/components/AssetBrowser.tsx   | 27 +++++++++++++++++++
 src/ui/settings/components/AssetDisplay.tsx   | 25 +++++++++++++++++
 .../settings/components/SettingsSection.tsx   |  5 ++++
 src/ui/settings/index.tsx                     |  7 ++++-
 4 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/settings/components/AssetBrowser.tsx
 create mode 100644 src/ui/settings/components/AssetDisplay.tsx

diff --git a/src/ui/settings/components/AssetBrowser.tsx b/src/ui/settings/components/AssetBrowser.tsx
new file mode 100644
index 0000000..2487afb
--- /dev/null
+++ b/src/ui/settings/components/AssetBrowser.tsx
@@ -0,0 +1,27 @@
+import { React, ReactNative as RN } from "@metro/common";
+import { Forms } from "@ui/components";
+import { all } from "@ui/assets";
+import AssetDisplay from "./AssetDisplay";
+
+const { FormInput } = Forms
+
+export default function AssetBrowser() {
+    const [searchName, setSearchName] = React.useState("");
+
+    return (
+        <>
+            <FormInput 
+                value={searchName}
+                onChange={(v: string) => setSearchName(v)}
+                title="SEARCH"
+            />
+            <RN.FlatList
+                data={Object.values(all).filter(a => a.name.startsWith(searchName))}
+                renderItem={({ item }) => (
+                    <AssetDisplay asset={item} />
+                )}
+                keyExtractor={item => item.name}
+            />
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/ui/settings/components/AssetDisplay.tsx b/src/ui/settings/components/AssetDisplay.tsx
new file mode 100644
index 0000000..4a65b0e
--- /dev/null
+++ b/src/ui/settings/components/AssetDisplay.tsx
@@ -0,0 +1,25 @@
+import { Asset } from "@types";
+import { React, ReactNative as RN } from "@metro/common";
+import { Forms } from "@ui/components";
+
+interface AssetDisplayProps {
+    asset: Asset;
+}
+
+const { FormRow } = Forms;
+
+const styles = RN.StyleSheet.create({
+    asset: {
+        width: 32,
+        height: 32,
+    }
+});
+
+export default function AssetDisplay({ asset }: AssetDisplayProps) {
+    return (
+        <FormRow
+            label={`${asset.name} - ${asset.id}`}
+            trailing={() => <RN.Image source={asset.id} style={styles.asset} />}
+        />
+    )
+}
\ No newline at end of file
diff --git a/src/ui/settings/components/SettingsSection.tsx b/src/ui/settings/components/SettingsSection.tsx
index 2792f63..ba3cc65 100644
--- a/src/ui/settings/components/SettingsSection.tsx
+++ b/src/ui/settings/components/SettingsSection.tsx
@@ -15,6 +15,11 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaSettings")}
             />
+            <FormRow
+                label="Asset Browser"
+                trailing={FormRow.Arrow}
+                onPress={() => navigation.push("VendettaAssetBrowser")}
+            />
         </FormSection>
     )
 }
\ No newline at end of file
diff --git a/src/ui/settings/index.tsx b/src/ui/settings/index.tsx
index 994669c..4a296ef 100644
--- a/src/ui/settings/index.tsx
+++ b/src/ui/settings/index.tsx
@@ -4,6 +4,7 @@ import { after } from "@lib/patcher";
 import findInReactTree from "@utils/findInReactTree";
 import Settings from "./components/Settings";
 import SettingsSection from "./components/SettingsSection";
+import AssetBrowser from "./components/AssetBrowser";
 
 const screensModule = findByDisplayName("getScreens", false);
 const settingsModule = findByDisplayName("UserSettingsOverviewWrapper", false);
@@ -15,7 +16,11 @@ export default function initSettings() {
             VendettaSettings: {
                 title: "Vendetta Settings",
                 render: Settings
-            }   
+            },
+            VendettaAssetBrowser: {
+                title: "Asset Browser",
+                render: AssetBrowser
+            }
         }
     });