[Settings] Overhaul

src/def.d.ts

@@ -59,6 +59,11 @@ interface Plugin {
     js: string;
 }
 
+interface Settings {
+    debuggerUrl: string;
+    developerSettings: boolean;
+}
+
 type Indexable<Type> = { [index: string]: Type }
 
 interface VendettaObject {

src/lib/settings.ts

@@ -0,0 +1,5 @@
+import createStorage from "@lib/storage";
+import { Settings } from "@types";
+
+// TODO: Switch to using 'any' as type?
+export default createStorage<Settings>("VENDETTA_SETTINGS");

src/ui/settings/components/SettingsSection.tsx

@@ -1,5 +1,6 @@
 import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
+import settings from "@/lib/settings";
 
 const { FormRow, FormSection, FormDivider } = Forms;
 
@@ -23,13 +24,17 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaPlugins")}
             />
-            <FormDivider />
+            {settings.developerSettings && (
-            <FormRow
+                <>
-                label="Asset Browser"
+                    <FormDivider />
-                leading={() => <FormRow.Icon source={getAssetIDByName("grid")} />}
+                    <FormRow
-                trailing={FormRow.Arrow}
+                        label="Developer"
-                onPress={() => navigation.push("VendettaAssetBrowser")}
+                        leading={() => <FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
-            />
+                        trailing={FormRow.Arrow}
+                        onPress={() => navigation.push("VendettaDeveloper")}
+                    />
+                </>
+            )}
         </FormSection>
     )
 }

src/ui/settings/index.tsx

@@ -5,7 +5,7 @@ import findInReactTree from "@utils/findInReactTree";
 import SettingsSection from "@ui/settings/components/SettingsSection";
 import General from "@ui/settings/pages/General";
 import Plugins from "@ui/settings/pages/Plugins";
-import AssetBrowser from "@ui/settings/pages/AssetBrowser";
+import Developer from "@ui/settings/pages/Developer";
 
 const screensModule = findByDisplayName("getScreens", false);
 const settingsModule = findByDisplayName("UserSettingsOverviewWrapper", false);
@@ -23,10 +23,10 @@ export default function initSettings() {
                 title: "Plugins",
                 render: Plugins
             },
-            VendettaAssetBrowser: {
+            VendettaDeveloper: {
-                title: "Asset Browser",
+                title: "Developer",
-                render: AssetBrowser,
+                render: Developer
-            },
+            }
         }
     });
 

src/ui/settings/pages/AssetBrowser.tsx

@@ -1,30 +0,0 @@
-import { ReactNative as RN } from "@metro/common";
-import { Forms } from "@ui/components";
-import { all } from "@ui/assets";
-import AssetDisplay from "@ui/settings/components/AssetDisplay";
-
-const { FormInput, FormDivider } = 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.includes(searchName))}
-                renderItem={({ item }) => (
-                    <>
-                        <AssetDisplay asset={item} />
-                        <FormDivider />
-                    </>
-                )}
-                keyExtractor={item => item.name}
-            />
-        </>
-    )
-}

src/ui/settings/pages/Developer.tsx

@@ -0,0 +1,53 @@
+import { ReactNative as RN } from "@metro/common";
+import { Forms } from "@ui/components";
+import { getAssetIDByName } from "@ui/assets";
+import { connectToDebugger } from "@lib/debug";
+import { all } from "@ui/assets";
+import settings from "@lib/settings";
+import AssetDisplay from "@ui/settings/components/AssetDisplay";
+
+const { FormSection, FormRow, FormInput, FormDivider } = Forms;
+
+export default function Developer() {
+    const [debuggerUrl, setDebuggerUrl] = React.useState(settings.debuggerUrl || "");
+    const [searchName, setSearchName] = React.useState("");
+
+    return (
+        <>
+            <FormSection title="Debug">
+                <FormInput 
+                    value={debuggerUrl}
+                    onChange={(v: string) => {
+                        settings.debuggerUrl = v;
+                        setDebuggerUrl(v);
+                    }}
+                    title="DEBUGGER URL"
+                />
+                <FormDivider />
+                <FormRow
+                    label="Connect to debug websocket"
+                    leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
+                    trailing={FormRow.Arrow}
+                    onPress={() => connectToDebugger(debuggerUrl)}
+                />
+            </FormSection>
+            <FormSection title="Assets">
+                <FormInput 
+                    value={searchName}
+                    onChange={(v: string) => setSearchName(v)}
+                    title="SEARCH"
+                />
+                <RN.FlatList
+                    data={Object.values(all).filter(a => a.name.includes(searchName))}
+                    renderItem={({ item }) => (
+                        <>
+                            <AssetDisplay asset={item} />
+                            <FormDivider />
+                        </>
+                    )}
+                    keyExtractor={item => item.name}
+                />
+            </FormSection>
+        </>
+    )
+}

src/ui/settings/pages/General.tsx

@@ -1,17 +1,17 @@
 import { ReactNative as RN, url } from "@metro/common";
 import { DISCORD_SERVER, GITHUB } from "@lib/constants";
-import { connectToDebugger } from "@lib/debug";
 import { getAssetIDByName } from "@ui/assets";
 import { Forms } from "@ui/components";
 import Version from "@ui/settings/components/Version";
+import settings from "@lib/settings";
 
-const { FormRow, FormSection, FormInput, FormDivider } = Forms;
+const { FormRow, FormSection, FormDivider, FormSwitch } = Forms;
 const InfoDictionaryManager = RN.NativeModules.InfoDictionaryManager;
 const hermesProps = window.HermesInternal.getRuntimeProperties();
 const rnVer = RN.Platform.constants.reactNativeVersion;
 
 export default function General() {
-    const [debuggerUrl, setDebuggerUrl] = React.useState("");
+    const [devSettings, setDevSettings] = React.useState(settings.developerSettings || false);
 
     const versions = [
         {
@@ -41,39 +41,18 @@ export default function General() {
             <FormSection title="Links">
                 <FormRow
                     label="Discord Server"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("Discord")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("Discord")} />}
                     trailing={FormRow.Arrow}
                     onPress={() => url.openURL(DISCORD_SERVER)}
                 />
                 <FormDivider />
                 <FormRow
                     label="GitHub"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
+                    leading={<FormRow.Icon source={getAssetIDByName("img_account_sync_github_white")} />}
                     trailing={FormRow.Arrow}
                     onPress={() => url.openURL(GITHUB)}
                 />
             </FormSection>
-            <FormSection title="Debug">
-                <FormInput 
-                    value={debuggerUrl}
-                    onChange={(v: string) => setDebuggerUrl(v)}
-                    title="DEBUGGER URL"
-                />
-                <FormDivider />
-                <FormRow
-                    label="Connect to debug websocket"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
-                    trailing={FormRow.Arrow}
-                    onPress={() => connectToDebugger(debuggerUrl)}
-                />
-                <FormDivider />
-                <FormRow
-                    label="Reload Discord"
-                    leading={() => <FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
-                    trailing={FormRow.Arrow}
-                    onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
-                />
-            </FormSection>
             <FormSection title="Versions">
                 {versions.map((v) => (
                     <>
@@ -82,6 +61,26 @@ export default function General() {
                     </>
                 ))}
             </FormSection>
+            <FormSection title="Actions">
+                <FormRow
+                    label="Reload Discord"
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
+                    trailing={FormRow.Arrow}
+                    onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
+                />
+                <FormDivider />
+                <FormRow 
+                    label="Developer Settings"
+                    leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
+                    trailing={<FormSwitch 
+                        value={devSettings}
+                        onValueChange={(v: boolean) => {
+                            settings.developerSettings = v;
+                            setDevSettings(v);
+                        }}
+                    />}
+                />
+            </FormSection>
         </RN.ScrollView>
     )
 }

src/ui/settings/pages/Plugins.tsx

@@ -11,7 +11,6 @@ export default function Plugins() {
     const [pluginUrl, setPluginUrl] = React.useState("");
     const [pluginList, setPluginList] = React.useState(plugins);
 
-
     return (
         <>
             <FormInput