[UI > Settings] Completely overhaul

src/lib/constants.ts

@@ -0,0 +1,2 @@
+export const DISCORD_SERVER = "https://discord.gg/n9QQ4XhhJP";
+export const GITHUB = "https://github.com/vendetta-mod";

src/lib/metro/common.ts

@@ -4,6 +4,7 @@ import { find, findByProps } from "@metro/filters";
 export const constants = findByProps("API_HOST");
 export const channels = findByProps("getVoiceChannelId");
 export const i18n = findByProps("Messages");
+export const url = findByProps("openURL");
 export const toasts = find(m => m.open && m.close && !m.startDrag && !m.init && !m.openReplay && !m.setAlwaysOnTop);
 
 // React

src/ui/settings/components/General.tsx

@@ -1,5 +1,7 @@
+import { React, ReactNative as RN, url } from "@metro/common";
+import { DISCORD_SERVER, GITHUB } from "@lib/constants";
 import { connectToDebugWS } from "@lib/debug";
-import { React, ReactNative as RN } from "@metro/common";
+import { getAssetIDByName } from "@ui/assets";
 import { Forms } from "@ui/components";
 import Version from "./Version";
 
@@ -7,57 +9,71 @@ const { FormRow, FormSection, FormInput } = Forms;
 const hermesProps = window.HermesInternal.getRuntimeProperties();
 const rnVer = RN.Platform.constants.reactNativeVersion;
 
-export default function Settings() {
+export default function General() {
     const [debuggerUrl, setDebuggerUrl] = React.useState("");
 
     const versions = [
         {
             label: "Discord",
             version: RN.NativeModules.InfoDictionaryManager.Version,
+            icon: "Discord",
         },
         {
             label: "React",
             version: React.version,
+            icon: "ic_category_16px",
         },
         {
             label: "React Native",
             version: `${rnVer.major || 0}.${rnVer.minor || 0}.${rnVer.patch || 0}`,
+            icon: "mobile",
         },
         {
             label: "Hermes",
-            version: `${hermesProps["OSS Release Version"]} ${hermesProps["Build"]}`,
-        },
-        {
-            label: "Bytecode",
-            version: hermesProps["Bytecode Version"],
+            version: `${hermesProps["OSS Release Version"]} ${hermesProps["Build"]} | Bytecode ${hermesProps["Bytecode Version"]}`,
+            icon: "ic_hammer_and_chisel_24px",
         },
     ];
 
     return ( 
-        <>
+        <RN.ScrollView>
             {/* Why is there still a divider? */}
-            <FormSection title="Debug" android_noDivider>
+            <FormSection title="Links" android_noDivider>
+                <FormRow
+                    label="Discord Server"
+                    leading={() => <FormRow.Icon source={getAssetIDByName("Discord")} />}
+                    trailing={FormRow.Arrow}
+                    onPress={() => url.openURL(DISCORD_SERVER)}
+                />
+                <FormRow
+                    label="GitHub"
+                    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"
                 />
-            </FormSection>
-            <FormSection title="Actions">
-                <FormRow
-                    label="Reload Discord"
-                    trailing={FormRow.Arrow}
-                    onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
-                />
                 <FormRow
                     label="Connect to debug websocket"
+                    leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
                     trailing={FormRow.Arrow}
                     onPress={() => connectToDebugWS(debuggerUrl)}
                 />
+                <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) => <Version label={v.label} version={v.version} /> )}
+                {versions.map((v) => <Version label={v.label} version={v.version} icon={v.icon} /> )}
             </FormSection>
-        </>
+        </RN.ScrollView>
     )
 }

src/ui/settings/components/SettingsSection.tsx

@@ -1,5 +1,6 @@
 import { React } from "@metro/common";
 import { Forms } from "@ui/components";
+import { getAssetIDByName } from "@ui/assets";
 
 const { FormRow, FormSection } = Forms;
 
@@ -11,12 +12,14 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
     return ( 
         <FormSection key="Vendetta" title="Vendetta">
             <FormRow
-                label="Settings"
+                label="General"
+                leading={() => <FormRow.Icon source={getAssetIDByName("settings")} />}
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaSettings")}
             />
             <FormRow
                 label="Asset Browser"
+                leading={() => <FormRow.Icon source={getAssetIDByName("grid")} />}
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaAssetBrowser")}
             />

src/ui/settings/components/Version.tsx

@@ -1,18 +1,27 @@
 import { React } from "@metro/common";
+import { getAssetIDByName } from "@ui/assets";
+import { showToast } from "@ui/toasts";
 import { Forms } from "@ui/components";
+import copyText from "@utils/copyText";
 
 interface VersionProps {
     label: string;
-    version: string
+    version: string;
+    icon: string;
 }
 
 const { FormRow, FormText } = Forms;
 
-export default function Version({ label, version }: VersionProps) {
+export default function Version({ label, version, icon }: VersionProps) {
     return ( 
         <FormRow
             label={label}
+            leading={() => <FormRow.Icon source={getAssetIDByName(icon)} />}
             trailing={() => <FormText>{version}</FormText>}
+            onPress={() => {
+                copyText(`${label} - ${version}`);
+                showToast("Copied version to clipboard.", getAssetIDByName("toast_copy_link"))
+            }}
         />
     )
 }

src/ui/settings/index.tsx

@@ -2,8 +2,8 @@ import { React, i18n } from "@metro/common";
 import { findByDisplayName } from "@metro/filters";
 import { after } from "@lib/patcher";
 import findInReactTree from "@utils/findInReactTree";
-import Settings from "./components/Settings";
 import SettingsSection from "./components/SettingsSection";
+import General from "./components/General";
 import AssetBrowser from "./components/AssetBrowser";
 
 const screensModule = findByDisplayName("getScreens", false);
@@ -14,8 +14,8 @@ export default function initSettings() {
         return {
             ...ret,
             VendettaSettings: {
-                title: "Vendetta Settings",
-                render: Settings
+                title: "Vendetta",
+                render: General
             },
             VendettaAssetBrowser: {
                 title: "Asset Browser",