From dee5ed0172f00ad5fddc1a9e53f164057ad4bda4 Mon Sep 17 00:00:00 2001
From: Beef <beefers@riseup.net>
Date: Sat, 14 Jan 2023 02:41:28 +0000
Subject: [PATCH] [UI] Overall cleanup and fixes

---
 src/ui/fixTheme.ts                            | 26 +++++-----
 src/ui/settings/components/AssetDisplay.tsx   |  2 +-
 src/ui/settings/components/PluginCard.tsx     | 12 ++++-
 .../settings/components/SettingsSection.tsx   |  6 +--
 .../{PluginSettings.tsx => Subpage.tsx}       | 11 ++---
 src/ui/settings/components/Version.tsx        |  4 +-
 src/ui/settings/pages/AssetBrowser.tsx        | 40 ++++++++++++++++
 src/ui/settings/pages/Developer.tsx           | 48 ++++++-------------
 src/ui/settings/pages/General.tsx             |  1 -
 src/ui/settings/pages/Plugins.tsx             |  8 ++--
 10 files changed, 91 insertions(+), 67 deletions(-)
 rename src/ui/settings/components/{PluginSettings.tsx => Subpage.tsx} (89%)
 create mode 100644 src/ui/settings/pages/AssetBrowser.tsx

diff --git a/src/ui/fixTheme.ts b/src/ui/fixTheme.ts
index cde4a7d..058db09 100644
--- a/src/ui/fixTheme.ts
+++ b/src/ui/fixTheme.ts
@@ -1,30 +1,26 @@
-// Loosely based on https://github.com/Aliucord/AliucordRN/blob/main/src/ui/patchTheme.ts
+// Based on https://github.com/Aliucord/AliucordRN/blob/main/src/ui/patchTheme.ts
 // Literally could not figure this out, many thanks
 
 import { findByProps, findByStoreName } from "@metro/filters";
 import { FluxDispatcher } from "@metro/common";
-import logger from "@/lib/logger";
+import logger from "@lib/logger";
 
 const ThemeManager = findByProps("updateTheme", "overrideTheme");
 const AMOLEDThemeManager = findByProps("setAMOLEDThemeEnabled");
 const ThemeStore = findByStoreName("ThemeStore");
 const UnsyncedUserSettingsStore = findByStoreName("UnsyncedUserSettingsStore");
 
+function override() {
+    const theme = ThemeStore.theme || "dark";
+    ThemeManager.overrideTheme(theme);
+    
+    if (AMOLEDThemeManager && UnsyncedUserSettingsStore.useAMOLEDTheme === 2) AMOLEDThemeManager.setAMOLEDThemeEnabled(true);
+    FluxDispatcher.unsubscribe("I18N_LOAD_START", override);
+}
+
 export function fixTheme() {
     try {
-        if (ThemeStore) {
-            function override() {
-                const theme = ThemeStore.theme || "dark";
-                ThemeManager.overrideTheme(theme);
-
-                if (AMOLEDThemeManager && UnsyncedUserSettingsStore.useAMOLEDTheme === 2) {
-                    AMOLEDThemeManager.setAMOLEDThemeEnabled(true);
-                }
-                FluxDispatcher.unsubscribe("I18N_LOAD_START", override);
-            }
-
-            FluxDispatcher.subscribe("I18N_LOAD_START", override);
-        }
+        if (ThemeStore) FluxDispatcher.subscribe("I18N_LOAD_START", override);
     } catch(e) {
         logger.error("Failed to fix theme...", e)
     }
diff --git a/src/ui/settings/components/AssetDisplay.tsx b/src/ui/settings/components/AssetDisplay.tsx
index 2a945d4..d2c0291 100644
--- a/src/ui/settings/components/AssetDisplay.tsx
+++ b/src/ui/settings/components/AssetDisplay.tsx
@@ -22,7 +22,7 @@ export default function AssetDisplay({ asset }: AssetDisplayProps) {
     return (
         <FormRow
             label={`${asset.name} - ${asset.id}`}
-            trailing={() => <RN.Image source={asset.id} style={styles.asset} />}
+            trailing={<RN.Image source={asset.id} style={styles.asset} />}
             onPress={() => {
                 copyText(asset.name);
                 showToast("Copied asset name to clipboard.", getAssetIDByName("toast_copy_link"));
diff --git a/src/ui/settings/components/PluginCard.tsx b/src/ui/settings/components/PluginCard.tsx
index 07f0e55..ff7e706 100644
--- a/src/ui/settings/components/PluginCard.tsx
+++ b/src/ui/settings/components/PluginCard.tsx
@@ -4,6 +4,7 @@ import { Plugin } from "@types";
 import { getAssetIDByName } from "@ui/assets";
 import { removePlugin, startPlugin, stopPlugin, showSettings, getSettings } from "@lib/plugins";
 import { showToast } from "@ui/toasts";
+import copyText from "@lib/utils/copyText";
 
 const { FormRow, FormSwitch } = Forms;
 const { TouchableOpacity, Image } = General;
@@ -13,6 +14,7 @@ const styles = stylesheet.createThemedStyleSheet({
         backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_SECONDARY,
         borderRadius: 5,
         margin: 10,
+        marginTop: 0,
     },
     header: {
         backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_TERTIARY,
@@ -21,7 +23,7 @@ const styles = stylesheet.createThemedStyleSheet({
     },
     actions: {
         justifyContent: "flex-end",
-        flexDirection: "row",
+        flexDirection: "row-reverse",
         alignItems: "center",
     },
     icon: {
@@ -73,6 +75,14 @@ export default function PluginCard({ plugin }: PluginCardProps) {
                         >
                             <Image style={styles.icon} source={getAssetIDByName("ic_message_delete")} />
                         </TouchableOpacity>
+                        <TouchableOpacity
+                            onPress={() => {
+                                copyText(plugin.id);
+                                showToast("Copied plugin URL to clipboard.", getAssetIDByName("toast_copy_link"));
+                            }}
+                        >
+                            <Image style={styles.icon} source={getAssetIDByName("copy")} />
+                        </TouchableOpacity>
                         <TouchableOpacity
                             onPress={() => {
                                 plugin.update = !plugin.update;
diff --git a/src/ui/settings/components/SettingsSection.tsx b/src/ui/settings/components/SettingsSection.tsx
index 5494310..c26cfc0 100644
--- a/src/ui/settings/components/SettingsSection.tsx
+++ b/src/ui/settings/components/SettingsSection.tsx
@@ -13,14 +13,14 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
         <FormSection key="Vendetta" title="Vendetta">
             <FormRow
                 label="General"
-                leading={() => <FormRow.Icon source={getAssetIDByName("settings")} />}
+                leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaSettings")}
             />
             <FormDivider />
             <FormRow
                 label="Plugins"
-                leading={() => <FormRow.Icon source={getAssetIDByName("debug")} />}
+                leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
                 trailing={FormRow.Arrow}
                 onPress={() => navigation.push("VendettaPlugins")}
             />
@@ -29,7 +29,7 @@ export default function SettingsSection({ navigation }: SettingsSectionProps) {
                     <FormDivider />
                     <FormRow
                         label="Developer"
-                        leading={() => <FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
+                        leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
                         trailing={FormRow.Arrow}
                         onPress={() => navigation.push("VendettaDeveloper")}
                     />
diff --git a/src/ui/settings/components/PluginSettings.tsx b/src/ui/settings/components/Subpage.tsx
similarity index 89%
rename from src/ui/settings/components/PluginSettings.tsx
rename to src/ui/settings/components/Subpage.tsx
index 97e0d3c..b0f3596 100644
--- a/src/ui/settings/components/PluginSettings.tsx
+++ b/src/ui/settings/components/Subpage.tsx
@@ -1,10 +1,9 @@
-import { Plugin } from "@types";
 import { navigation, navigationStack, NavigationNative, stylesheet, constants } from "@metro/common";
 import { General } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 
-interface PluginSettingsProps {
-    plugin: Plugin;
+interface SubpageProps {
+    name: string;
     children: JSX.Element;
 }
 
@@ -39,11 +38,11 @@ const styles = stylesheet.createThemedStyleSheet({
 export const Settings = navigationStack.createStackNavigator();
 const { TouchableOpacity, Image } = General;
 
-export default function PluginSettings({ plugin, children }: PluginSettingsProps) {
+export default function Subpage({ name, children }: SubpageProps) {
     return (
         <NavigationNative.NavigationContainer>
             <Settings.Navigator
-                initialRouteName={plugin.manifest.name}
+                initialRouteName={name}
                 style={styles.container}
                 screenOptions={{
                     cardOverlayEnabled: false,
@@ -54,7 +53,7 @@ export default function PluginSettings({ plugin, children }: PluginSettingsProps
                 }}
             >
                 <Settings.Screen 
-                    name={plugin.manifest.name}
+                    name={name}
                     component={children}
                     options={{
                         headerTitleStyle: styles.headerTitle,
diff --git a/src/ui/settings/components/Version.tsx b/src/ui/settings/components/Version.tsx
index 89d4d80..363c9b1 100644
--- a/src/ui/settings/components/Version.tsx
+++ b/src/ui/settings/components/Version.tsx
@@ -15,8 +15,8 @@ export default function Version({ label, version, icon }: VersionProps) {
     return ( 
         <FormRow
             label={label}
-            leading={() => <FormRow.Icon source={getAssetIDByName(icon)} />}
-            trailing={() => <FormText>{version}</FormText>}
+            leading={<FormRow.Icon source={getAssetIDByName(icon)} />}
+            trailing={<FormText>{version}</FormText>}
             onPress={() => {
                 copyText(`${label} - ${version}`);
                 showToast("Copied version to clipboard.", getAssetIDByName("toast_copy_link"));
diff --git a/src/ui/settings/pages/AssetBrowser.tsx b/src/ui/settings/pages/AssetBrowser.tsx
new file mode 100644
index 0000000..3dc20ce
--- /dev/null
+++ b/src/ui/settings/pages/AssetBrowser.tsx
@@ -0,0 +1,40 @@
+import { ReactNative as RN, stylesheet } from "@metro/common";
+import { Forms, Search } from "@ui/components";
+import { all } from "@ui/assets";
+import AssetDisplay from "@ui/settings/components/AssetDisplay";
+
+const { FormDivider } = Forms;
+
+const styles = stylesheet.createThemedStyleSheet({
+    search: {
+        margin: 0,
+        padding: 15,
+        borderBottomWidth: 0,
+        background: "none",
+        backgroundColor: "none",
+    }
+});
+
+export default function AssetBrowser() {
+    const [searchName, setSearchName] = React.useState("");
+
+    return (
+        <RN.View style={{ flex: 1 }}>
+            <Search
+                style={styles.search}
+                onChangeText={(v: string) => setSearchName(v)}
+                placeholder="Search..."
+            />
+            <RN.FlatList
+                data={Object.values(all).filter(a => a.name.includes(searchName))}
+                renderItem={({ item }) => (
+                    <>
+                        <AssetDisplay asset={item} />
+                        <FormDivider />
+                    </>
+                )}
+                keyExtractor={item => item.name}
+            />
+        </RN.View>
+    )
+}
\ No newline at end of file
diff --git a/src/ui/settings/pages/Developer.tsx b/src/ui/settings/pages/Developer.tsx
index 5562698..5f823ef 100644
--- a/src/ui/settings/pages/Developer.tsx
+++ b/src/ui/settings/pages/Developer.tsx
@@ -1,32 +1,20 @@
-import { ReactNative as RN, stylesheet } from "@metro/common";
-import { Forms, Search } from "@ui/components";
+import { ReactNative as RN, navigation } from "@metro/common";
+import { Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { showToast } from "@/ui/toasts";
 import { connectToDebugger } from "@lib/debug";
-import { all } from "@ui/assets";
 import settings from "@lib/settings";
 import logger from "@lib/logger";
-import AssetDisplay from "@ui/settings/components/AssetDisplay";
+import Subpage from "@ui/settings/components/Subpage";
+import AssetBrowser from "@ui/settings/pages/AssetBrowser";
 
 const { FormSection, FormRow, FormInput, FormDivider } = Forms;
 
-const styles = stylesheet.createThemedStyleSheet({
-    search: {
-        margin: 0,
-        padding: 0,
-        paddingRight: 15,
-        paddingLeft: 15,
-        borderBottomWidth: 0,
-        backgroundColor: "none"
-    }
-})
-
 export default function Developer() {
     const [debuggerUrl, setDebuggerUrl] = React.useState(settings.debuggerUrl || "");
-    const [searchName, setSearchName] = React.useState("");
 
     return (
-        <RN.View>
+        <RN.View style={{ flex: 1 }}>
             <FormSection title="Debug">
                 <FormInput 
                     value={debuggerUrl}
@@ -40,14 +28,12 @@ export default function Developer() {
                 <FormRow
                     label="Connect to debug websocket"
                     leading={() => <FormRow.Icon source={getAssetIDByName("copy")} />}
-                    trailing={FormRow.Arrow}
                     onPress={() => connectToDebugger(debuggerUrl)}
                 />
                 <FormDivider />
                 {window.__vendetta_rdc && <FormRow
                     label="Connect to React DevTools"
                     leading={() => <FormRow.Icon source={getAssetIDByName("ic_badge_staff")} />}
-                    trailing={FormRow.Arrow}
                     onPress={() => {
                         try {
                             window.__vendetta_rdc?.connectToDevTools({
@@ -61,21 +47,15 @@ export default function Developer() {
                     }}
                 />}
             </FormSection>
-            <FormSection title="Assets">
-                <Search
-                    style={styles.search}
-                    onChangeText={(v: string) => setSearchName(v)}
-                    placeholder="Search..."
-                />
-                <RN.FlatList
-                    data={Object.values(all).filter(a => a.name.includes(searchName))}
-                    renderItem={({ item }) => (
-                        <>
-                            <AssetDisplay asset={item} />
-                            <FormDivider />
-                        </>
-                    )}
-                    keyExtractor={item => item.name}
+            <FormSection title="Other">
+                <FormRow
+                    label="Asset Browser"
+                    leading={() => <FormRow.Icon source={getAssetIDByName("ic_media_upload")} />}
+                    trailing={FormRow.Arrow}
+                    onPress={() => navigation.push(Subpage, {
+                        name: "Asset Browser",
+                        children: AssetBrowser,
+                    })}
                 />
             </FormSection>
         </RN.View>
diff --git a/src/ui/settings/pages/General.tsx b/src/ui/settings/pages/General.tsx
index 234bf1b..244ccf0 100644
--- a/src/ui/settings/pages/General.tsx
+++ b/src/ui/settings/pages/General.tsx
@@ -110,7 +110,6 @@ export default function General() {
                 <FormRow
                     label="Reload Discord"
                     leading={<FormRow.Icon source={getAssetIDByName("ic_message_retry")} />}
-                    trailing={FormRow.Arrow}
                     onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
                 />
                 <FormDivider />
diff --git a/src/ui/settings/pages/Plugins.tsx b/src/ui/settings/pages/Plugins.tsx
index b6f81ab..1da97ca 100644
--- a/src/ui/settings/pages/Plugins.tsx
+++ b/src/ui/settings/pages/Plugins.tsx
@@ -1,4 +1,4 @@
-import { ReactNative as RN, stylesheet } from "@metro/common";
+import { ReactNative as RN } from "@metro/common";
 import { Forms } from "@ui/components";
 import { showToast } from "@ui/toasts";
 import { getAssetIDByName } from "@ui/assets";
@@ -12,7 +12,7 @@ export default function Plugins() {
     const [pluginList, setPluginList] = React.useState(plugins);
 
     return (
-        <RN.View>
+        <RN.View style={{ flex: 1 }}>
             <FormInput 
                 value={pluginUrl}
                 onChange={(v: string) => setPluginUrl(v)}
@@ -20,8 +20,7 @@ export default function Plugins() {
             />
             <FormRow
                 label="Install plugin"
-                leading={<FormRow.Icon source={getAssetIDByName("add_white")} />}
-                trailing={FormRow.Arrow}
+                leading={<FormRow.Icon source={getAssetIDByName("ic_add_perk_24px")} />}
                 onPress={() => {
                         fetchPlugin(pluginUrl).then(() => {
                             setPluginUrl("");
@@ -33,6 +32,7 @@ export default function Plugins() {
                 }
             />
             <RN.FlatList
+                style={{ marginTop: 10 }}
                 data={Object.values(pluginList)}
                 renderItem={({ item }) => <PluginCard plugin={item} />}
                 keyExtractor={item => item.id}