[Settings] Overhaul

This commit is contained in:
Beef 2023-01-10 08:05:56 +00:00
parent a46c9c8828
commit 304757d374
8 changed files with 105 additions and 69 deletions

5
src/def.d.ts vendored
View file

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

5
src/lib/settings.ts Normal file
View file

@ -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");

View file

@ -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")}
/>
{settings.developerSettings && (
<>
<FormDivider />
<FormRow
label="Asset Browser"
leading={() => <FormRow.Icon source={getAssetIDByName("grid")} />}
label="Developer"
leading={() => <FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
trailing={FormRow.Arrow}
onPress={() => navigation.push("VendettaAssetBrowser")}
onPress={() => navigation.push("VendettaDeveloper")}
/>
</>
)}
</FormSection>
)
}

View file

@ -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: {
title: "Asset Browser",
render: AssetBrowser,
},
VendettaDeveloper: {
title: "Developer",
render: Developer
}
}
});

View file

@ -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}
/>
</>
)
}

View file

@ -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>
</>
)
}

View file

@ -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>
)
}

View file

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