6 files changed, 90 insertions, 66 deletions
diff --git a/src/plugins/experiments.ts b/src/plugins/experiments.ts
deleted file mode 100644
index b441a76..0000000
--- a/src/plugins/experiments.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Devs } from "../utils/constants";
-import definePlugin from "../utils/types";
-
-export default definePlugin({
-    name: "Experiments",
-    authors: [Devs.Ven, Devs.Megu],
-    description: "Enable Experiments",
-    patches: [{
-        find: "Object.defineProperties(this,{isDeveloper",
-        replacement: {
-            match: /(?<={isDeveloper:\{[^}]+,get:function\(\)\{return )\w/,
-            replace: "true"
-        }
-    }, {
-        find: 'type:"user",revision',
-        replacement: {
-            match: /(\w)\|\|"CONNECTION_OPEN".+?;/g,
-            replace: "$1=!0;"
-        }
-    }]
-});
diff --git a/src/plugins/experiments.tsx b/src/plugins/experiments.tsx
new file mode 100644
index 0000000..4cc2167
--- /dev/null
+++ b/src/plugins/experiments.tsx
@@ -0,0 +1,74 @@
+import { lazyWebpack } from "../utils";
+import { Devs } from "../utils/constants";
+import definePlugin, { OptionType } from "../utils/types";
+import { Settings } from "../Vencord";
+import { filters } from "../webpack";
+import { Forms, React } from "../webpack/common";
+
+const KbdStyles = lazyWebpack(filters.byProps(["key", "removeBuildOverride"]));
+
+export default definePlugin({
+    name: "Experiments",
+    authors: [
+        Devs.Megu,
+        Devs.Ven,
+        { name: "Nickyux", id: 427146305651998721n },
+        { name: "BanTheNons", id: 460478012794863637n },
+    ],
+    description: "Enable Access to Experiments in Discord!",
+    patches: [{
+        find: "Object.defineProperties(this,{isDeveloper",
+        replacement: {
+            match: /(?<={isDeveloper:\{[^}]+,get:function\(\)\{return )\w/,
+            replace: "true"
+        },
+    }, {
+        find: 'type:"user",revision',
+        replacement: {
+            match: /(\w)\|\|"CONNECTION_OPEN".+?;/g,
+            replace: "$1=!0;"
+        },
+    }, {
+        find: ".isStaff=function(){",
+        predicate: () => Settings.plugins["Experiments"].enableIsStaff === true,
+        replacement: [
+            {
+                match: /return\s*(\w+)\.hasFlag\((.+?)\.STAFF\)}/,
+                replace: "return Vencord.Webpack.Common.UserStore.getCurrentUser().id===$1.id||$1.hasFlag($2.STAFF)}"
+            },
+            {
+                match: /hasFreePremium=function\(\){return this.is Staff\(\)\s*\|\|/,
+                replace: "hasFreePremium=function(){return ",
+            },
+        ],
+    }],
+    options: {
+        enableIsStaff: {
+            description: "Enable isStaff (requires restart)",
+            type: OptionType.BOOLEAN,
+            default: false,
+            restartNeeded: true,
+        }
+    },
+
+    settingsAboutComponent: () => {
+        const isMacOS = navigator.platform.includes("Mac");
+        const modKey = isMacOS ? "cmd" : "ctrl";
+        const altKey = isMacOS ? "opt" : "alt";
+        return (
+            <React.Fragment>
+                <Forms.FormTitle tag="h3">More Information</Forms.FormTitle>
+                <Forms.FormText variant="text-md/normal">
+                    You can enable client DevTools{" "}
+                    <kbd className={KbdStyles.key}>{modKey}</kbd> +{" "}
+                    <kbd className={KbdStyles.key}>{altKey}</kbd> +{" "}
+                    <kbd className={KbdStyles.key}>O</kbd>{" "}
+                    after enabling <code>isStaff</code> below
+                </Forms.FormText>
+                <Forms.FormText>
+                    and then toggling <code>Enable DevTools</code> in the <code>Developer Options</code> tab in settings.
+                </Forms.FormText>
+            </React.Fragment>
+        );
+    }
+});
diff --git a/src/plugins/index.ts b/src/plugins/index.ts
index 44f1e83..10536c4 100644
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,4 +1,5 @@
 import Plugins from "plugins";
+
 import { registerCommand, unregisterCommand } from "../api/Commands";
 import { Settings } from "../api/settings";
 import Logger from "../utils/logger";
diff --git a/src/plugins/isStaff.ts b/src/plugins/isStaff.ts
deleted file mode 100644
index c5a95d0..0000000
--- a/src/plugins/isStaff.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Devs } from "../utils/constants";
-import definePlugin from "../utils/types";
-
-export default definePlugin({
-    name: "isStaff",
-    description:
-        "Gives access to client devtools & other things locked behind isStaff",
-    authors: [
-        Devs.Megu,
-        {
-            name: "Nickyux",
-            id: 427146305651998721n
-        },
-        {
-            name: "BanTheNons",
-            id: 460478012794863637n
-        }
-    ],
-    patches: [
-        {
-            find: ".isStaff=function(){",
-            replacement: [
-                {
-                    match: /return\s*(\w+)\.hasFlag\((.+?)\.STAFF\)}/,
-                    replace: "return Vencord.Webpack.Common.UserStore.getCurrentUser().id===$1.id||$1.hasFlag($2.STAFF)}"
-                },
-                {
-                    match: /hasFreePremium=function\(\){return this.isStaff\(\)\s*\|\|/,
-                    replace: "hasFreePremium=function(){return ",
-                },
-            ],
-        },
-    ],
-});
diff --git a/src/plugins/settings.ts b/src/plugins/settings.ts
index d26688a..0c218ac 100644
--- a/src/plugins/settings.ts
+++ b/src/plugins/settings.ts
@@ -1,11 +1,12 @@
-import definePlugin from "../utils/types";
 import gitHash from "git-hash";
+
 import { Devs } from "../utils/constants";
+import definePlugin from "../utils/types";
 
 export default definePlugin({
     name: "Settings",
     description: "Adds Settings UI and debug info",
-    authors: [Devs.Ven],
+    authors: [Devs.Ven, Devs.Megu],
     required: true,
     patches: [{
         find: "().versionHash",
@@ -33,6 +34,7 @@ export default definePlugin({
                 return (
                     `{section:${mod}.ID.HEADER,label:"Vencord"},` +
                     '{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},' +
+                    '{section:"VencordPlugins",label:"Plugins",element:Vencord.Components.PluginSettings},' +
                     updater +
                     `{section:${mod}.ID.DIVIDER},${m}`
                 );
diff --git a/src/plugins/viewIcons.tsx b/src/plugins/viewIcons.tsx
index a55b8b8..d6cbf60 100644
--- a/src/plugins/viewIcons.tsx
+++ b/src/plugins/viewIcons.tsx
@@ -1,7 +1,7 @@
 import { Devs } from "../utils/constants";
 import definePlugin from "../utils/types";
 import { lazyWebpack, makeLazy } from "../utils/misc";
-import { ModalSize, openModal } from "../utils/modal";
+import { ModalRoot, ModalSize, openModal } from "../utils/modal";
 import { find } from "../webpack";
 import { React } from "../webpack/common";
 
@@ -15,14 +15,16 @@ export default definePlugin({
     description: "Makes Avatars/Banners in user profiles clickable, and adds Guild Context Menu Entries to View Banner/Icon.",
 
     openImage(url: string) {
-        openModal(() => (
-            <ImageModal
-                shouldAnimate={true}
-                original={url}
-                src={url}
-                renderLinkComponent={props => React.createElement(getMaskedLink(), props)}
-            />
-        ), { size: ModalSize.DYNAMIC });
+        openModal(modalProps => (
+            <ModalRoot size={ModalSize.DYNAMIC} {...modalProps}>
+                <ImageModal
+                    shouldAnimate={true}
+                    original={url}
+                    src={url}
+                    renderLinkComponent={props => React.createElement(getMaskedLink(), props)}
+                />
+            </ModalRoot>
+        ));
     },
 
     patches: [