QoL You settings changes

Co-authored-by: nexpid <poggerschampersqwq@gmail.com>

src/core/i18n/default.json

@@ -36,7 +36,7 @@
     "MANUFACTURER": "Manufacturer",
     "MODAL_THEME_REFETCHED": "Theme refetched",
     "MODAL_THEME_REFETCHED_DESC": "A reload is required to see the changes. Do you want to reload now?",
-    "MODAL_UNPROXIED_PLUGIN_DESC": "The plugin you are trying to install has not been proxied/verified by Vendetta staff. Are you sure you want to continue?",
+    "MODAL_UNPROXIED_PLUGIN_DESC": "The plugin you are trying to install has not been proxied/verified by staffs. Are you sure you want to continue?",
     "MODAL_UNPROXIED_PLUGIN_HEADER": "Unproxied Plugin",
     "OPEN_IN_BROWSER": "Open in Browser",
     "OPERATING_SYSTEM": "Operating System",
@@ -67,7 +67,7 @@
     "UNINSTALL": "Uninstall",
     "UNINSTALL_TITLE": "Uninstall {title}",
     "VERSIONS": "Versions",
-    "COMMAND_DEBUG_DESC": "Send Vendetta debug info.",
+    "COMMAND_DEBUG_DESC": "Send Bunny debug info.",
     "COMMAND_DEBUG_OPT_EPHEMERALLY": "Send debug info ephemerally.",
     "COMMAND_EVAL_DESC": "Evaluate JavaScript code.",
     "COMMAND_EVAL_OPT_CODE": "The code to evaluate.",

src/lib/ui/settings/components/SettingsSection.tsx

@@ -1,7 +1,7 @@
 import { NavigationNative } from "@metro/common";
 import { useProxy } from "@/lib/api/storage";
 import { getAssetIDByName } from "@/lib/api/assets";
-import { getRenderableScreens } from "@ui/settings/data";
+import { getScreens } from "@ui/settings/data";
 import { ErrorBoundary, Forms } from "@ui/components";
 import { settings } from "@lib/settings";
 import { Strings } from "@/core/i18n";
@@ -12,12 +12,12 @@ export default function SettingsSection() {
     const navigation = NavigationNative.useNavigation();
     useProxy(settings);
 
-    const screens = getRenderableScreens()
+    const screens = getScreens()
 
     return (
         <ErrorBoundary>
             <FormSection key="Vendetta" title={`${Strings.BUNNY}${settings.safeMode?.enabled ? ` (${Strings.SAFE_MODE})` : ""}`}>
-                {screens.map((s, i) => (
+                {screens.filter(s => (s.shouldRender?.() ?? true)).map((s, i) => (
                     <>
                         <FormRow
                             label={s.title}

src/lib/ui/settings/data.tsx

@@ -17,6 +17,7 @@ import { PROXY_PREFIX } from "@/lib/utils/constants";
 import { findByProps } from "@/lib/metro/filters";
 import { isThemeSupported } from "@/lib/api/native/loader";
 import { Strings } from "@/core/i18n";
+import { useProxy } from "@/lib/api/storage";
 
 const { useSafeAreaInsets } = findByProps("useSafeAreaInsets");
 
@@ -37,21 +38,20 @@ const useStyles = stylesheet.createStyles({
     }
 });
 
-const formatKey = (key: string, youKeys: boolean) => youKeys ? lodash.snakeCase(key).toUpperCase() : key;
 // If a function is passed, it is called with the screen object, and the return value is mapped. If a string is passed, we map to the value of the property with that name on the screen. Else, just map to the given data.
 // Question: Isn't this overengineered?
 // Answer: Maybe.
 const keyMap = (screens: Screen[], data: string | ((s: Screen) => any) | null) => Object.fromEntries(screens.map(s => [s.key, typeof data === "function" ? data(s) : typeof data === "string" ? s[data] : data]));
 
-export const getScreens = (youKeys = false): Screen[] => [
+export const getScreens = (): Screen[] => [
     {
-        key: formatKey("VendettaSettings", youKeys),
+        key: "VendettaSettings",
         title: Strings.GENERAL,
         icon: "settings",
         render: General,
     },
     {
-        key: formatKey("VendettaPlugins", youKeys),
+        key: "VendettaPlugins",
         title: Strings.PLUGINS,
         icon: "debug",
         options: {
@@ -78,7 +78,7 @@ export const getScreens = (youKeys = false): Screen[] => [
         render: Plugins,
     },
     {
-        key: formatKey("VendettaThemes", youKeys),
+        key: "VendettaThemes",
         title: Strings.THEMES,
         icon: "ic_theme_24px",
         // TODO: bad
@@ -89,14 +89,14 @@ export const getScreens = (youKeys = false): Screen[] => [
         render: Themes,
     },
     {
-        key: formatKey("VendettaDeveloper", youKeys),
+        key: "VendettaDeveloper",
         title: Strings.DEVELOPER,
         icon: "ic_progress_wrench_24px",
         shouldRender: () => settings.developerSettings ?? false,
         render: Developer,
     },
     {
-        key: formatKey("VendettaCustomPage", youKeys),
+        key: "VendettaCustomPage",
         title: "Vendetta Page",
         shouldRender: () => false,
         render: ({ render: PageView, noErrorBoundary, ...options }: { render: React.ComponentType; noErrorBoundary: boolean } & Record<string, object>) => {
@@ -108,8 +108,6 @@ export const getScreens = (youKeys = false): Screen[] => [
     },
 ];
 
-export const getRenderableScreens = (youKeys = false) => getScreens(youKeys).filter(s => s.shouldRender?.() ?? true);
-
 export const getPanelsScreens = () => keyMap(getScreens(), (s) => ({
     title: s.title,
     render: s.render,
@@ -117,14 +115,16 @@ export const getPanelsScreens = () => keyMap(getScreens(), (s) => ({
 }));
 
 export const getYouData = () => {
-    const screens = getScreens(true);
+    const screens = getScreens();
 
     return {
         getLayout: () => ({
+            // This is an old key, keeping it as "Vendetta" is good as some plugins actually checks
+            // to determine if this section is Vendetta's
             title: "Vendetta",
             label: Strings.BUNNY,
             // We can't use our keyMap function here since `settings` is an array not an object
-            settings: getRenderableScreens(true).map(s => s.key)
+            settings: screens.map(s => s.key)
         }),
         titleConfig: keyMap(screens, "title"),
         relationships: keyMap(screens, null),
@@ -140,10 +140,9 @@ export const getYouData = () => {
                 type: "route",
                 title: () => s.title,
                 icon: s.icon ? getAssetIDByName(s.icon) : null,
+                usePredicate: s.shouldRender && (() => useProxy(settings) && s.shouldRender!!()),
                 screen: {
-                    // TODO: This is bad, we should not re-convert the key casing
-                    // For some context, just using the key here would make the route key be VENDETTA_CUSTOM_PAGE in you tab, which breaks compat with panels UI navigation
-                    route: lodash.chain(s.key).camelCase().upperFirst().value(),
+                    route: s.key,
                     getComponent: () => WrappedComponent,
                 }
             }

src/lib/ui/settings/patches/you.tsx

@@ -1,6 +1,6 @@
 import { findByProps } from "@metro/filters";
 import { after, before } from "@lib/api/patcher";
-import { getRenderableScreens, getScreens, getYouData } from "@ui/settings/data";
+import { getScreens, getYouData } from "@ui/settings/data";
 import { i18n } from "@lib/metro/common";
 import { Strings } from "@/core/i18n";
 
@@ -28,8 +28,7 @@ function oldYouPatch(patches: Function[]) {
 
     if (!gettersModule || !layoutModule) return;
 
-    const screens = getScreens(true);
-    const renderableScreens = getRenderableScreens(true);
+    const screens = getScreens();
     const data = getYouData();
 
     patches.push(after("useOverviewSettings", layoutModule, (_, ret) => manipulateSections(ret, data.getLayout())));
@@ -40,7 +39,7 @@ function oldYouPatch(patches: Function[]) {
     })));
 
     patches.push(after(getterFunctionName, gettersModule, ([settings], ret) => [
-        ...(renderableScreens.filter(s => settings.includes(s.key))).map(s => ({
+        ...(screens.filter(s => settings.includes(s.key) && (s.shouldRender?.() ?? true))).map(s => ({
             type: "setting_search_result",
             ancestorRendererData: data.rendererConfigs[s.key],
             setting: s.key,
@@ -73,7 +72,7 @@ function newYouPatch(patches: Function[]) {
 
     if (!gettersModule || !settingsListComponents || !settingConstantsModule) return false;
 
-    const screens = getScreens(true);
+    const screens = getScreens();
     const data = getYouData();
 
     patches.push(before("type", settingsListComponents.SearchableSettingsList, ([{ sections }]) => manipulateSections(sections, data.getLayout())));