[???] Whatever may this do?

src/def.d.ts

@@ -125,6 +125,7 @@ interface Theme {
 interface Settings {
     debuggerUrl: string;
     developerSettings: boolean;
+    flip: boolean;
 }
 
 interface ApplicationCommand {

src/index.ts

@@ -2,10 +2,12 @@ import { patchLogHook } from "@lib/debug";
 import { patchCommands } from "@lib/commands";
 import { initPlugins } from "@lib/plugins";
 import { patchAssets } from "@ui/assets";
+import { awaitSyncWrapper } from "@lib/storage";
 import initSettings from "@ui/settings";
 import initFixes from "@lib/fixes";
 import logger from "@lib/logger";
 import windowObject from "@lib/windowObject";
+import settings from "@lib/settings";
 
 export default async () => {
     // Load everything in parallel
@@ -23,6 +25,10 @@ export default async () => {
     // Once done, load plugins
     unloads.push(await initPlugins());
 
+    // :trolley:
+    await awaitSyncWrapper(settings)
+    settings.flip ??= true;
+
     // We good :)
     logger.log("Vendetta is ready!");
 }

src/ui/settings/components/SettingsSection.tsx

@@ -1,4 +1,4 @@
-import { NavigationNative } from "@metro/common";
+import { ReactNative as RN, NavigationNative } from "@metro/common";
 import { ErrorBoundary, Forms } from "@ui/components";
 import { getAssetIDByName } from "@ui/assets";
 import { useProxy } from "@lib/storage";
@@ -12,43 +12,45 @@ export default function SettingsSection() {
 
     return (
         <ErrorBoundary>
-            <FormSection key="Vendetta" title="Vendetta">
+            <RN.View style={settings.flip && { transform: [{ rotate: "180deg" }] }}>
-                <FormRow
+                <FormSection key="Vendetta" title="Vendetta">
-                    label="General"
+                    <FormRow
-                    leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
+                        label="General"
-                    trailing={FormRow.Arrow}
+                        leading={<FormRow.Icon source={getAssetIDByName("settings")} />}
-                    onPress={() => navigation.push("VendettaSettings")}
+                        trailing={FormRow.Arrow}
-                />
+                        onPress={() => navigation.push("VendettaSettings")}
-                <FormDivider />
+                    />
-                <FormRow
+                    <FormDivider />
-                    label="Plugins"
+                    <FormRow
-                    leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
+                        label="Plugins"
-                    trailing={FormRow.Arrow}
+                        leading={<FormRow.Icon source={getAssetIDByName("debug")} />}
-                    onPress={() => navigation.push("VendettaPlugins")}
+                        trailing={FormRow.Arrow}
-                />
+                        onPress={() => navigation.push("VendettaPlugins")}
-                {window.__vendetta_loader?.features.themes && (
+                    />
-                    <>
+                    {window.__vendetta_loader?.features.themes && (
-                        <FormDivider />
+                        <>
-                        <FormRow
+                            <FormDivider />
-                            label="Themes"
+                            <FormRow
-                            leading={<FormRow.Icon source={getAssetIDByName("ic_theme_24px")} />}
+                                label="Themes"
-                            trailing={FormRow.Arrow}
+                                leading={<FormRow.Icon source={getAssetIDByName("ic_theme_24px")} />}
-                            onPress={() => navigation.push("VendettaThemes")}
+                                trailing={FormRow.Arrow}
-                        />
+                                onPress={() => navigation.push("VendettaThemes")}
-                    </>
+                            />
-                )}
+                        </>
-                {settings.developerSettings && (
+                    )}
-                    <>
+                    {settings.developerSettings && (
-                        <FormDivider />
+                        <>
-                        <FormRow
+                            <FormDivider />
-                            label="Developer"
+                            <FormRow
-                            leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
+                                label="Developer"
-                            trailing={FormRow.Arrow}
+                                leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}
-                            onPress={() => navigation.push("VendettaDeveloper")}
+                                trailing={FormRow.Arrow}
-                        />
+                                onPress={() => navigation.push("VendettaDeveloper")}
-                    </>
+                            />
-                )}
+                        </>
-            </FormSection>
+                    )}
+                </FormSection>
+            </RN.View>
         </ErrorBoundary>
     )
 }

src/ui/settings/pages/AssetBrowser.tsx

@@ -1,6 +1,8 @@
+import { useProxy } from "@/lib/storage";
 import { ReactNative as RN, stylesheet } from "@metro/common";
 import { all } from "@ui/assets";
 import { Forms, Search } from "@ui/components";
+import settings from "@lib/settings";
 import ErrorBoundary from "@ui/components/ErrorBoundary";
 import AssetDisplay from "@ui/settings/components/AssetDisplay";
 
@@ -18,10 +20,11 @@ const styles = stylesheet.createThemedStyleSheet({
 
 export default function AssetBrowser() {
     const [search, setSearch] = React.useState("");
+    useProxy(settings);
 
     return (
         <ErrorBoundary>
-            <RN.View style={{ flex: 1 }}>
+            <RN.View style={{ flex: 1, ...(settings.flip && { transform: [{ rotate: "180deg" }] }) }}>
                 <Search
                     style={styles.search}
                     onChangeText={(v: string) => setSearch(v)}

src/ui/settings/pages/Developer.tsx

@@ -16,7 +16,7 @@ export default function Developer() {
 
     return (
         <ErrorBoundary>
-            <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
+            <RN.ScrollView style={{ flex: 1, ...(settings.flip && { transform: [{ rotate: "180deg" }] }) }} contentContainerStyle={{ paddingBottom: 38 }}>
                 <FormSection title="Debug" titleStyleType="no_border">
                     <FormInput
                         value={settings.debuggerUrl}

src/ui/settings/pages/General.tsx

@@ -82,7 +82,7 @@ export default function General() {
 
     return (
         <ErrorBoundary>
-            <RN.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingBottom: 38 }}>
+            <RN.ScrollView style={{ flex: 1, ...(settings.flip && { transform: [{ rotate: "180deg" }] }) }} contentContainerStyle={{ paddingBottom: 38 }}>
                 <FormSection title="Links" titleStyleType="no_border">
                     <FormRow
                         label="Discord Server"
@@ -105,6 +105,16 @@ export default function General() {
                         onPress={() => RN.NativeModules.BundleUpdaterManager.reload()}
                     />
                     <FormDivider />
+                    <FormSwitchRow
+                        label="Flip UI"
+                        subLabel="April Fools!"
+                        leading={<FormRow.Icon source={getAssetIDByName("ic_emoji_24px")} />}
+                        value={settings.flip}
+                        onValueChange={(v: boolean) => {
+                            settings.flip = v;
+                        }}
+                        style={{ transform: [{ rotate: "180deg" }] }}
+                    />
                     <FormSwitchRow
                         label="Developer Settings"
                         leading={<FormRow.Icon source={getAssetIDByName("ic_progress_wrench_24px")} />}

src/ui/settings/pages/Plugins.tsx

@@ -1,15 +1,17 @@
 import { ReactNative as RN } from "@metro/common";
 import { useProxy } from "@lib/storage";
 import { plugins } from "@lib/plugins";
+import settings from "@lib/settings";
 import PluginCard from "@ui/settings/components/PluginCard";
 import ErrorBoundary from "@ui/components/ErrorBoundary";
 
 export default function Plugins() {
     useProxy(plugins);
+    useProxy(settings)
 
     return (
         <ErrorBoundary>
-            <RN.View style={{ flex: 1 }}>
+            <RN.View style={{ flex: 1, ...(settings.flip && { transform: [{ rotate: "180deg" }] }) }}>
                 <RN.FlatList
                     data={Object.values(plugins)}
                     renderItem={({ item, index }) => <PluginCard plugin={item} index={index} />}

src/ui/settings/pages/Themes.tsx

@@ -1,15 +1,17 @@
 import { themes } from "@/lib/themes";
 import { useProxy } from "@lib/storage";
 import { ReactNative as RN } from "@metro/common";
+import settings from "@lib/settings";
 import ErrorBoundary from "@ui/components/ErrorBoundary";
 import ThemeCard from "@ui/settings/components/ThemeCard";
 
 export default function Themes() {
     useProxy(themes);
+    useProxy(settings)
 
     return (
         <ErrorBoundary>
-            <RN.View style={{ flex: 1 }}>
+            <RN.View style={{ flex: 1, ...(settings.flip && { transform: [{ rotate: "180deg" }] }) }}>
                 <RN.FlatList
                     data={Object.values(themes)}
                     renderItem={({ item, index }) => <ThemeCard theme={item} index={index} />}