[UI] Refactors all around

src/lib/debug.ts

@@ -47,11 +47,18 @@ export function patchLogHook() {
 export const versionHash = "__vendettaVersion";
 
 export function getDebugInfo() {
+    // Discord
     const InfoDictionaryManager = RN.NativeModules.InfoDictionaryManager;
+    const DCDDeviceManager = RN.NativeModules.DCDDeviceManager;
+
+    // Hermes
     const hermesProps = window.HermesInternal.getRuntimeProperties();
+    const hermesVer = hermesProps["OSS Release Version"];
+    const padding = "for RN ";
+
+    // RN
     const PlatformConstants = RN.Platform.constants as RNConstants;
     const rnVer = PlatformConstants.reactNativeVersion;
-    const DCDDeviceManager = RN.NativeModules.DCDDeviceManager;
 
     return {
         vendetta: {
@@ -63,10 +70,10 @@ export function getDebugInfo() {
         },
         react: {
             version: React.version,
-            nativeVersion: `${rnVer.major || 0}.${rnVer.minor || 0}.${rnVer.patch || 0}`,
+            nativeVersion: hermesVer.startsWith(padding) ? hermesVer.substring(padding.length) : `${rnVer.major}.${rnVer.minor}.${rnVer.patch}`,
         },
         hermes: {
-            version: hermesProps["OSS Release Version"],
+            version: hermesVer,
             buildType: hermesProps["Build"],
             bytecodeVersion: hermesProps["Bytecode Version"],
         },

src/ui/settings/pages/AssetBrowser.tsx

@@ -16,17 +16,17 @@ const styles = stylesheet.createThemedStyleSheet({
 });
 
 export default function AssetBrowser() {
-    const [searchName, setSearchName] = React.useState("");
+    const [search, setSearch] = React.useState("");
 
     return (
         <RN.View style={{ flex: 1 }}>
             <Search
                 style={styles.search}
-                onChangeText={(v: string) => setSearchName(v)}
+                onChangeText={(v: string) => setSearch(v)}
-                placeholder="Search..."
+                placeholder="Search"
             />
             <RN.FlatList
-                data={Object.values(all).filter(a => a.name.includes(searchName))}
+                data={Object.values(all).filter(a => a.name.includes(search) || a.id.toString() === search)}
                 renderItem={({ item }) => (
                     <>
                         <AssetDisplay asset={item} />

src/ui/settings/pages/Developer.tsx

@@ -15,13 +15,12 @@ export default function Developer() {
     useProxy(settings);
 
     return (
-        <RN.View style={{ flex: 1 }}>
+        <RN.ScrollView style={{ flex: 1 }}>
-            <FormSection title="Debug">
+            <FormSection title="Debug" titleStyleType="no_border">
                 <FormInput 
                     value={settings.debuggerUrl}
-                    onChange={(v: string) => {
+                    onChange={(v: string) => settings.debuggerUrl = v}
-                        settings.debuggerUrl = v;
+                    placeholder="127.0.0.1:9090"
-                    }}
                     title="DEBUGGER URL"
                 />
                 <FormDivider />
@@ -41,6 +40,7 @@ export default function Developer() {
                                 resolveRNStyle: RN.StyleSheet.flatten,
                             });
                         } catch(e) {
+                            // TODO: Check if this ever actually catches anything
                             logger.error("Failed to connect to React DevTools!", e);
                             showToast("Failed to connect to React DevTools!", getAssetIDByName("Small"));
                         }
@@ -58,6 +58,6 @@ export default function Developer() {
                     })}
                 />
             </FormSection>
-        </RN.View>
+        </RN.ScrollView>
     )
 }

src/ui/settings/pages/General.tsx

@@ -35,8 +35,8 @@ export default function General() {
             icon: "mobile",
         },
         {
-            label: "Hermes",
+            label: "Bytecode",
-            version: `${debugInfo.hermes.version} ${debugInfo.hermes.buildType} (Bytecode ${debugInfo.hermes.bytecodeVersion})`,
+            version: debugInfo.hermes.bytecodeVersion,
             icon: "ic_server_security_24px",
         },
     ];
@@ -55,7 +55,7 @@ export default function General() {
         {
             label: "Manufacturer",
             version: debugInfo.device.manufacturer,
-            icon: "ic_hammer_and_chisel_24px"
+            icon: "ic_badge_staff"
         },
         {
             label: "Brand",
@@ -75,8 +75,8 @@ export default function General() {
     ];
 
     return (
-        <RN.ScrollView>
+        <RN.ScrollView style={{ flex: 1 }}>
-            <FormSection title="Links">
+            <FormSection title="Links" titleStyleType="no_border">
                 <FormRow
                     label="Discord Server"
                     leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}

src/ui/settings/pages/Plugins.tsx

@@ -17,11 +17,12 @@ export default function Plugins() {
             <FormInput 
                 value={pluginUrl}
                 onChange={(v: string) => setPluginUrl(v)}
+                placeholder="https://example.com/"
                 title="PLUGIN URL"
             />
             <FormRow
                 label="Install plugin"
-                leading={<FormRow.Icon source={getAssetIDByName("ic_add_perk_24px")} />}
+                leading={<FormRow.Icon source={getAssetIDByName("ic_add_18px")} />}
                 onPress={() => {
                         fetchPlugin(pluginUrl).then(() => {
                             setPluginUrl("");