Bump to v1.1.4

Co-authored-by: Ven <vendicated@riseup.net>

.eslintrc.json

@@ -82,7 +82,6 @@
         "no-constant-condition": ["error", { "checkLoops": false }],
         "no-duplicate-imports": "error",
         "no-extra-semi": "error",
-        "consistent-return": ["warn", { "treatUndefinedAsUnspecified": true }],
         "dot-notation": "error",
         "no-useless-escape": [
             "error",

.github/workflows/build.yml

@@ -37,6 +37,9 @@ jobs:
             - name: Build
               run: pnpm build --standalone
 
+            - name: Generate plugin list
+              run: pnpm generatePluginJson dist/plugins.json
+
             - name: Clean up obsolete files
               run: |
                 rm -rf dist/extension* Vencord.user.css

.github/workflows/reportBrokenPlugins.yml

@@ -36,7 +36,7 @@ jobs:
                 export PATH="$PWD/node_modules/.bin:$PATH"
                 export CHROMIUM_BIN=$(which chromium-browser)
 
-                esbuild test/generateReport.ts > dist/report.mjs
+                esbuild scripts/generateReport.ts > dist/report.mjs
                 node dist/report.mjs >> $GITHUB_STEP_SUMMARY
               env:
                 DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "stylelint-config-standard",
+    "rules": {
+        "indentation": 4
+    }
+}

.vscode/extensions.json

@@ -1,11 +1,11 @@
 {
     "recommendations": [
-        "EditorConfig.EditorConfig",
-        "pmneo.tsimporter",
         "dbaeumer.vscode-eslint",
+        "eamodio.gitlens",
+        "EditorConfig.EditorConfig",
+        "ExodiusStudios.comment-anchors",
         "formulahendry.auto-rename-tag",
         "GregorBiswanger.json2ts",
-        "eamodio.gitlens",
-        "kamikillerto.vscode-colorize"
+        "stylelint.vscode-stylelint"
     ]
 }

CODE_OF_CONDUCT.md

@@ -0,0 +1,20 @@
+# Code of Conduct
+
+Our community is welcoming to everyone, regardless of their characteristics.
+
+As such, we expect you to treat everyone with respect and contribute to an open and welcoming community.
+
+DO
+- have empathy and be nice to others
+- be respectful of differing opinions, even if you disagree
+- give and accept constructive criticism
+
+DON'T
+- use offensive or derogatory language
+- troll or spam
+- personally attack or harass others
+
+Repetitive violations of these guidelines might get your access to the repository restricted.
+
+
+If you feel like a user is violating these guidelines or feel treated unfairly, please refrain from publicly challenging them and instead contact a Moderator on our Discord server or send an email to vendicated+conduct@riseup.net!

README.md

@@ -4,12 +4,14 @@ The cutest Discord client mod
 
 ## Features
 
--   Super easy to install (one click installer)
--   90+ plugins built in: [See a list](https://gist.github.com/Vendicated/8696cde7b92548064a3ae92ead84d033)
+-   Super easy to install (Download Installer, open, click install button, done)
+-   100+ plugins built in: [See a list](https://gist.github.com/Vendicated/8696cde7b92548064a3ae92ead84d033)
     -   Some highlights: SpotifyControls, Experiments, NoTrack, MessageLogger, QuickReply, Free Emotes/Stickers, CustomCommands, ShowHiddenChannels, PronounDB
+-   Fairly lightweight despite the many inbuilt plugins
 -   Excellent Browser Support: Run Vencord in your Browser via extension or UserScript
+-   Works on any Discord branch: Stable, Canary or PTB all work (though for the best experience I recommend stable!)
 -   Custom CSS and Themes: Inbuilt css editor with support to import any css files (including BetterDiscord themes)
--   Works in all Electron versions (Confirmed working on versions 13-23)
+-   Privacy friendly, blocks Discord analytics & crash reporting out of the box and has no telemetry
 -   Maintained very actively, broken plugins are usually fixed within 12 hours
 
 ## Installing / Uninstalling
@@ -20,7 +22,7 @@ The cutest Discord client mod
 
 [![Get it on the Firefox Webstore](https://blog.mozilla.org/addons/files/2015/11/get-the-addon.png)](https://addons.mozilla.org/en-GB/firefox/addon/vencord-web/) [![Get it on the Chrome Webstore](https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png)](https://chrome.google.com/webstore/detail/vencord-web/cbghhgpcnddeihccjmnadmkaejncjndb)
 
-Or use the [UserScript](https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js) - Please note that QuickCSS and plugins making use of external resources will not work with the UserScript.
+Or use the [UserScript](https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js) - Please note that the CSS Editor, Themes loaded from remote sources and co. will not work in the UserScript. Use the extension if you need any of those
 
 ## Building from Source
 
@@ -39,3 +41,8 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) and [Megu's Plugin Guide!](docs/2_PLUGINS
 [join]: https://discord.gg/D9uwnFnqmd
 
 [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join]
+
+## Disclaimer
+
+Discord is trademark of Discord Inc. and solely mentioned for the sake of descriptivity.
+Mention of it does not imply any affiliation with or endorsement by Discord Inc.

browser/GMPolyfill.js

@@ -92,6 +92,7 @@ function GM_fetch(url, opt) {
                         resp.arrayBuffer = () => blobTo("arrayBuffer", blob);
                         resp.text = () => blobTo("text", blob);
                         resp.json = async () => JSON.parse(await blobTo("text", blob));
+                        resp.headers = new Headers(parseHeaders(resp.responseHeaders));
                         resolve(resp);
                     };
                     options.ontimeout = () => reject("fetch timeout");

browser/manifest.json

@@ -42,7 +42,7 @@
         ]
     },
 
-    "applications": {
+    "browser_specific_settings": {
         "gecko": {
             "id": "vencord-firefox@vendicated.dev",
             "strict_min_version": "109.0"

docs/1_INSTALLING.md

@@ -13,12 +13,6 @@ Welcome to Megu's Installation Guide! In this file, you will learn about how to
   - [Installing Vencord](#installing-vencord)
   - [Updating Vencord](#updating-vencord)
   - [Uninstalling Vencord](#uninstalling-vencord)
-  - [Manually Installing Vencord](#manually-installing-vencord)
-    - [On Windows](#on-windows)
-    - [On Linux](#on-linux)
-    - [On MacOS](#on-macos)
-    - [Manual Patching](#manual-patching)
-    - [Manually Uninstalling Vencord](#manually-uninstalling-vencord)
 
 ## Dependencies
 
@@ -27,16 +21,16 @@ Welcome to Megu's Installation Guide! In this file, you will learn about how to
 
 ## Installing Vencord
 
-> :exclamation: If this doesn't work, see [Manually Installing Vencord](#manually-installing-vencord)
-
 Install `pnpm`:
 
-> :exclamation: this may need to be run as admin depending on your system, and you may need to close and reopen your terminal.
+> :exclamation: This next command may need to be run as admin/root depending on your system, and you may need to close and reopen your terminal for pnpm to be in your PATH.
 
 ```shell
 npm i -g pnpm
 ```
 
+> :exclamation: **IMPORTANT** Make sure you aren't using an admin/root terminal from here onwards. It **will** mess up your Discord/Vencord instance and you **will** most likely have to reinstall.
+
 Clone Vencord:
 
 ```shell
@@ -101,102 +95,4 @@ Simply run:
 pnpm uninject
 ```
 
-The above command may ask you to also run:
-
-```shell
-pnpm install --frozen-lockfile
-pnpm uninject
-```
-
-## Manually Installing Vencord
-
--   [Windows](#on-windows)
--   [Linux](#on-linux)
--   [MacOS](#on-macos)
-
-### On Windows
-
-Press Win+R and enter: `%LocalAppData%` and hit enter. In this page, find the page (Discord, DiscordPTB, DiscordCanary, etc) that you want to patch.
-
-Now follow the instructions at [Manual Patching](#manual-patching)
-
-### On Linux
-
-The Discord folder is usually in one of the following paths:
-
--   /usr/share
--   /usr/lib64
--   /opt
--   /home/$USER/.local/share
-
-If you use flatpak, it will usually be in one of the following paths:
-
--   /var/lib/flatpak/app/com.discordapp.Discord/current/active/files
--   /home/$USER/.local/share/flatpak/app/com.discordapp.Discord/current/active/files
-
-You will need to give flatpak access to vencord with one of the following commands:
-
-> :exclamation: If not on stable, replace `com.discordapp.Discord` with your branch name, e.g., `com.discordapp.DiscordCanary`
-
-> :exclamation: Replace `/path/to/vencord/` with the path to your vencord folder (NOT the dist folder)
-
-If Discord flatpak install is in /home/:
-
-```shell
-flatpak override --user com.discordapp.Discord --filesystem="/path/to/vencord/"
-```
-
-If Discord flatpak install not in /home/:
-
-```shell
-sudo flatpak override com.discordapp.Discord --filesystem="/path/to/vencord"
-```
-
-Now follow the instructions at [Manual Patching](#manual-patching)
-
-### On MacOS
-
-Open finder and go to your Applications folder. Right-Click on the Discord application you want to patch, and view contents.
-
-Go to the `Contents/Resources` folder.
-
-Now follow the instructions at [Manual Patching](#manual-patching)
-
-### Manual Patching
-
-> :exclamation: If using Flatpak on linux, go to the folder that contains the `app.asar` file, and skip to where we create the `app` folder below.
-
-> :exclamation: On Linux/MacOS, there's a chance there won't be an `app-<number>` folder, but there probably is a `resources` folder, so keep reading :)
-
-Inside there, look for the `app-<number>` folders. If you have multiple, use the highest number. If that doesn't work, do it for the rest of the `app-<number>` folders.
-
-Inside there, go to the `resources` folder. There should be a file called `app.asar`. If there isn't, look at a different `app-<number>` folder instead.
-
-Make a new folder in `resources` called `app`. In here, we will make two files:
-
-`package.json` and `index.js`
-
-In `index.js`:
-
-> :exclamation: Replace the path in the first line with the path to `patcher.js` in your vencord dist folder.
-> On Windows, you can get this by shift-rightclicking the patcher.js file and selecting "copy as path"
-
-```js
-require("C:/Users/<your user>/path/to/vencord/dist/patcher.js");
-```
-
-And in `package.json`:
-
-```json
-{ "name": "discord", "main": "index.js" }
-```
-
-Finally, fully close & reopen your Discord client and check to see that `Vencord` appears in settings!
-
-### Manually Uninstalling Vencord
-
-> :exclamation: Do not delete `app.asar` - Only delete the `app` folder we created.
-
-Use the instructions above to find the `app` folder, and delete it. Then Close & Reopen Discord.
-
 If you need more help, ask in the support channel in our [Discord Server](https://discord.gg/D9uwnFnqmd).

docs/2_PLUGINS.md

@@ -26,6 +26,10 @@ export default definePlugin({
             name: "Your Name",
         },
     ],
+    // Delete `patches` if you are not using code patches, as it will make
+    // your plugin require restarts, and your stop() method will not be
+    // invoked at all.  The presence of the key in the object alone is
+    // enough to trigger this behavior, even if the value is an empty array.
     patches: [],
     // Delete these two below if you are only using code patches
     start() {},

package.json

@@ -1,9 +1,8 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.0.4",
+    "version": "1.1.4",
     "description": "The cutest Discord client mod",
-    "keywords": [],
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
         "url": "https://github.com/Vendicated/Vencord/issues"
@@ -20,10 +19,12 @@
     "scripts": {
         "build": "node scripts/build/build.mjs",
         "buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/buildWeb.mjs",
+        "generatePluginJson": "tsx scripts/generatePluginList.ts",
         "inject": "node scripts/runInstaller.mjs",
         "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+        "lint-styles": "stylelint \"src/**/*.css\"",
         "lint:fix": "pnpm lint --fix",
-        "test": "pnpm lint && pnpm build && pnpm testTsc",
+        "test": "pnpm build && pnpm lint && pnpm lint-styles && pnpm testTsc",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
         "testTsc": "tsc --noEmit",
         "uninject": "node scripts/runInstaller.mjs",
@@ -32,11 +33,13 @@
     "dependencies": {
         "@vap/core": "0.0.12",
         "@vap/shiki": "0.10.3",
-        "fflate": "^0.7.4"
+        "fflate": "^0.7.4",
+        "nanoid": "^4.0.2"
     },
     "devDependencies": {
         "@types/diff": "^5.0.2",
         "@types/lodash": "^4.14.191",
+        "@types/nanoid": "^3.0.0",
         "@types/node": "^18.11.18",
         "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
@@ -56,6 +59,9 @@
         "moment": "^2.29.4",
         "puppeteer-core": "^19.6.0",
         "standalone-electron-types": "^1.0.0",
+        "stylelint": "^14.16.1",
+        "stylelint-config-standard": "^29.0.0",
+        "tsx": "^3.12.6",
         "type-fest": "^3.5.3",
         "typescript": "^4.9.4"
     },

scripts/build/buildWeb.mjs

@@ -36,7 +36,7 @@ const commonOptions = {
     entryPoints: ["browser/Vencord.ts"],
     globalName: "Vencord",
     format: "iife",
-    external: ["plugins", "git-hash"],
+    external: ["plugins", "git-hash", "/assets/*"],
     plugins: [
         globPlugins,
         ...commonOpts.plugins,

scripts/build/common.mjs

@@ -33,6 +33,8 @@ export const banner = {
 `.trim()
 };
 
+const isWeb = process.argv.slice(0, 2).some(f => f.endsWith("buildWeb.mjs"));
+
 // https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
 /**
  * @type {import("esbuild").Plugin}
@@ -69,9 +71,15 @@ export const globPlugins = {
                 const files = await readdir(`./src/${dir}`);
                 for (const file of files) {
                     if (file.startsWith(".")) continue;
-                    if (file === "index.ts") {
-                        continue;
+                    if (file === "index.ts") continue;
+                    const fileBits = file.split(".");
+                    if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1))) {
+                        const mod = fileBits.at(-2);
+                        if (mod === "dev" && !watch) continue;
+                        if (mod === "web" && !isWeb) continue;
+                        if (mod === "desktop" && isWeb) continue;
                     }
+
                     const mod = `p${i}`;
                     code += `import ${mod} from "./${dir}/${file.replace(/\.tsx?$/, "")}";\n`;
                     plugins += `[${mod}.name]:${mod},\n`;
@@ -185,7 +193,7 @@ export const commonOpts = {
     legalComments: "linked",
     banner,
     plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
-    external: ["~plugins", "~git-hash", "~git-remote"],
+    external: ["~plugins", "~git-hash", "~git-remote", "/assets/*"],
     inject: ["./scripts/build/inject/react.mjs"],
     jsxFactory: "VencordCreateElement",
     jsxFragment: "VencordFragment",

scripts/generatePluginList.ts

@@ -0,0 +1,191 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Dirent, readdirSync, readFileSync, writeFileSync } from "fs";
+import { access, readFile } from "fs/promises";
+import { join } from "path";
+import { BigIntLiteral, createSourceFile, Identifier, isArrayLiteralExpression, isCallExpression, isExportAssignment, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isStringLiteral, isVariableStatement, NamedDeclaration, NodeArray, ObjectLiteralExpression, ScriptTarget, StringLiteral, SyntaxKind } from "typescript";
+
+interface Dev {
+    name: string;
+    id: string;
+}
+
+interface PluginData {
+    name: string;
+    description: string;
+    authors: Dev[];
+    dependencies: string[];
+    hasPatches: boolean;
+    hasCommands: boolean;
+    required: boolean;
+    enabledByDefault: boolean;
+    target: "desktop" | "web" | "dev";
+}
+
+const devs = {} as Record<string, Dev>;
+
+function getName(node: NamedDeclaration) {
+    return node.name && isIdentifier(node.name) ? node.name.text : undefined;
+}
+
+function hasName(node: NamedDeclaration, name: string) {
+    return getName(node) === name;
+}
+
+function getObjectProp(node: ObjectLiteralExpression, name: string) {
+    const prop = node.properties.find(p => hasName(p, name));
+    if (prop && isPropertyAssignment(prop)) return prop.initializer;
+    return prop;
+}
+
+function parseDevs() {
+    const file = createSourceFile("constants.ts", readFileSync("src/utils/constants.ts", "utf8"), ScriptTarget.Latest);
+
+    for (const child of file.getChildAt(0).getChildren()) {
+        if (!isVariableStatement(child)) continue;
+
+        const devsDeclaration = child.declarationList.declarations.find(d => hasName(d, "Devs"));
+        if (!devsDeclaration?.initializer || !isCallExpression(devsDeclaration.initializer)) continue;
+
+        const value = devsDeclaration.initializer.arguments[0];
+
+        if (!isObjectLiteralExpression(value)) return;
+
+        for (const prop of value.properties) {
+            const name = (prop.name as Identifier).text;
+            const value = isPropertyAssignment(prop) ? prop.initializer : prop;
+
+            if (!isObjectLiteralExpression(value)) throw new Error(`Failed to parse devs: ${name} is not an object literal`);
+
+            devs[name] = {
+                name: (getObjectProp(value, "name") as StringLiteral).text,
+                id: (getObjectProp(value, "id") as BigIntLiteral).text.slice(0, -1)
+            };
+        }
+
+        return;
+    }
+
+    throw new Error("Could not find Devs constant");
+}
+
+async function parseFile(fileName: string) {
+    const file = createSourceFile(fileName, await readFile(fileName, "utf8"), ScriptTarget.Latest);
+
+    const fail = (reason: string) => {
+        return new Error(`Invalid plugin ${fileName}, because ${reason}`);
+    };
+
+    for (const node of file.getChildAt(0).getChildren()) {
+        if (!isExportAssignment(node) || !isCallExpression(node.expression)) continue;
+
+        const call = node.expression;
+        if (!isIdentifier(call.expression) || call.expression.text !== "definePlugin") continue;
+
+        const pluginObj = node.expression.arguments[0];
+        if (!isObjectLiteralExpression(pluginObj)) throw fail("no object literal passed to definePlugin");
+
+        const data = {
+            hasPatches: false,
+            hasCommands: false,
+            enabledByDefault: false,
+            required: false,
+        } as PluginData;
+
+        for (const prop of pluginObj.properties) {
+            const key = getName(prop);
+            const value = isPropertyAssignment(prop) ? prop.initializer : prop;
+
+            switch (key) {
+                case "name":
+                case "description":
+                    if (!isStringLiteral(value)) throw fail(`${key} is not a string literal`);
+                    data[key] = value.text;
+                    break;
+                case "patches":
+                    data.hasPatches = true;
+                    break;
+                case "commands":
+                    data.hasCommands = true;
+                    break;
+                case "authors":
+                    if (!isArrayLiteralExpression(value)) throw fail("authors is not an array literal");
+                    data.authors = value.elements.map(e => {
+                        if (!isPropertyAccessExpression(e)) throw fail("authors array contains non-property access expressions");
+                        return devs[getName(e)!];
+                    });
+                    break;
+                case "dependencies":
+                    if (!isArrayLiteralExpression(value)) throw fail("dependencies is not an array literal");
+                    const { elements } = value;
+                    if (elements.some(e => !isStringLiteral(e))) throw fail("dependencies array contains non-string elements");
+                    data.dependencies = (elements as NodeArray<StringLiteral>).map(e => e.text);
+                    break;
+                case "required":
+                case "enabledByDefault":
+                    data[key] = value.kind === SyntaxKind.TrueKeyword;
+                    if (!data[key] && value.kind !== SyntaxKind.FalseKeyword) throw fail(`${key} is not a boolean literal`);
+                    break;
+            }
+        }
+
+        if (!data.name || !data.description || !data.authors) throw fail("name, description or authors are missing");
+
+        const fileBits = fileName.split(".");
+        if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1)!)) {
+            const mod = fileBits.at(-2)!;
+            if (!["web", "desktop", "dev"].includes(mod)) throw fail(`invalid target ${fileBits.at(-2)}`);
+            data.target = mod as any;
+        }
+
+        return data;
+    }
+
+    throw fail("no default export called 'definePlugin' found");
+}
+
+async function getEntryPoint(dirent: Dirent) {
+    const base = join("./src/plugins", dirent.name);
+    if (!dirent.isDirectory()) return base;
+
+    for (const name of ["index.ts", "index.tsx"]) {
+        const full = join(base, name);
+        try {
+            await access(full);
+            return full;
+        } catch { }
+    }
+
+    throw new Error(`${dirent.name}: Couldn't find entry point`);
+}
+
+(async () => {
+    parseDevs();
+    const plugins = readdirSync("./src/plugins", { withFileTypes: true }).filter(d => d.name !== "index.ts");
+
+    const promises = plugins.map(async dirent => parseFile(await getEntryPoint(dirent)));
+
+    const data = JSON.stringify(await Promise.all(promises));
+
+    if (process.argv.length > 2) {
+        writeFileSync(process.argv[2], data);
+    } else {
+        console.log(data);
+    }
+})();

scripts/generateReport.ts

@@ -186,8 +186,11 @@ page.on("console", async e => {
     } else if (isDebug) {
         console.error(e.text());
     } else if (level === "error") {
-        console.error("Got unexpected error", e.text());
-        report.otherErrors.push(e.text());
+        const text = e.text();
+        if (!text.startsWith("Failed to load resource: the server responded with a status of")) {
+            console.error("Got unexpected error", text);
+            report.otherErrors.push(text);
+        }
     }
 });
 
@@ -209,6 +212,7 @@ function runTime(token: string) {
 
 
         // Monkey patch Logger to not log with custom css
+        // @ts-ignore
         Vencord.Util.Logger.prototype._log = function (level, levelColor, args) {
             if (level === "warn" || level === "error")
                 console[level]("[Vencord]", this.name + ":", ...args);
@@ -253,6 +257,8 @@ function runTime(token: string) {
 
                 if (!isWasm)
                     await wreq.e(id as any);
+
+                await new Promise(r => setTimeout(r, 100));
             }
             console.error("[PUP_DEBUG]", "Finished loading chunks!");
 

src/Vencord.ts

@@ -27,7 +27,7 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
-import { popNotice, showNotice } from "./api/Notices";
+import { showNotification } from "./api/Notifications";
 import { PlainSettings, Settings } from "./api/settings";
 import { patches, PMLogger, startAllPlugins } from "./plugins";
 import { checkForUpdates, rebuild, update, UpdateLogger } from "./utils/updater";
@@ -49,32 +49,32 @@ async function init() {
             if (Settings.autoUpdate) {
                 await update();
                 const needsFullRestart = await rebuild();
-                setTimeout(() => {
-                    showNotice(
-                        "Vencord has been updated!",
-                        "Restart",
-                        () => {
+                if (Settings.autoUpdateNotification)
+                    setTimeout(() => showNotification({
+                        title: "Vencord has been updated!",
+                        body: "Click here to restart",
+                        permanent: true,
+                        noPersist: true,
+                        onClick() {
                             if (needsFullRestart)
                                 window.DiscordNative.app.relaunch();
                             else
                                 location.reload();
                         }
-                    );
-                }, 10_000);
+                    }), 10_000);
                 return;
             }
 
             if (Settings.notifyAboutUpdates)
-                setTimeout(() => {
-                    showNotice(
-                        "A Vencord update is available!",
-                        "View Update",
-                        () => {
-                            popNotice();
+                setTimeout(() => showNotification({
+                    title: "A Vencord update is available!",
+                    body: "Click here to view the update",
+                    permanent: true,
+                    noPersist: true,
+                    onClick() {
                         SettingsRouter.open("VencordUpdater");
                     }
-                    );
-                }, 10_000);
+                }), 10_000);
         } catch (err) {
             UpdateLogger.error("Failed to check for updates", err);
         }
@@ -95,3 +95,12 @@ async function init() {
 }
 
 init();
+
+if (!IS_WEB && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
+    document.addEventListener("DOMContentLoaded", () => {
+        document.head.append(Object.assign(document.createElement("style"), {
+            id: "vencord-native-titlebar-style",
+            textContent: "[class*=titleBar-]{display: none!important}"
+        }));
+    }, { once: true });
+}

src/api/Badges.ts

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import ErrorBoundary from "@components/ErrorBoundary";
 import { User } from "discord-types/general";
 import { ComponentType, HTMLProps } from "react";
 
@@ -52,6 +53,7 @@ const Badges = new Set<ProfileBadge>();
  * @param badge The badge to register
  */
 export function addBadge(badge: ProfileBadge) {
+    badge.component &&= ErrorBoundary.wrap(badge.component, { noop: true });
     Badges.add(badge);
 }
 

src/api/ContextMenu.ts

@@ -0,0 +1,144 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import Logger from "@utils/Logger";
+import type { ReactElement } from "react";
+
+/**
+ * @param children The rendered context menu elements
+ * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
+ */
+export type NavContextMenuPatchCallback = (children: Array<React.ReactElement>, ...args: Array<any>) => void;
+/**
+ * @param The navId of the context menu being patched
+ * @param children The rendered context menu elements
+ * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
+ */
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<React.ReactElement>, ...args: Array<any>) => void;
+
+const ContextMenuLogger = new Logger("ContextMenu");
+
+export const navPatches = new Map<string, Set<NavContextMenuPatchCallback>>();
+export const globalPatches = new Set<GlobalContextMenuPatchCallback>();
+
+/**
+ * Add a context menu patch
+ * @param navId The navId(s) for the context menu(s) to patch
+ * @param patch The patch to be applied
+ */
+export function addContextMenuPatch(navId: string | Array<string>, patch: NavContextMenuPatchCallback) {
+    if (!Array.isArray(navId)) navId = [navId];
+    for (const id of navId) {
+        let contextMenuPatches = navPatches.get(id);
+        if (!contextMenuPatches) {
+            contextMenuPatches = new Set();
+            navPatches.set(id, contextMenuPatches);
+        }
+
+        contextMenuPatches.add(patch);
+    }
+}
+
+/**
+ * Add a global context menu patch that fires the patch for all context menus
+ * @param patch The patch to be applied
+ */
+export function addGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback) {
+    globalPatches.add(patch);
+}
+
+/**
+ * Remove a context menu patch
+ * @param navId The navId(s) for the context menu(s) to remove the patch
+ * @param patch The patch to be removed
+ * @returns Wheter the patch was sucessfully removed from the context menu(s)
+ */
+export function removeContextMenuPatch<T extends string | Array<string>>(navId: T, patch: NavContextMenuPatchCallback): T extends string ? boolean : Array<boolean> {
+    const navIds = Array.isArray(navId) ? navId : [navId as string];
+
+    const results = navIds.map(id => navPatches.get(id)?.delete(patch) ?? false);
+
+    return (Array.isArray(navId) ? results : results[0]) as T extends string ? boolean : Array<boolean>;
+}
+
+/**
+ * Remove a global context menu patch
+ * @returns Wheter the patch was sucessfully removed
+ */
+export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback): boolean {
+    return globalPatches.delete(patch);
+}
+
+/**
+ * A helper function for finding the children array of a group nested inside a context menu based on the id of one of its childs
+ * @param id The id of the child
+ */
+export function findGroupChildrenByChildId(id: string, children: Array<React.ReactElement>, itemsArray?: Array<React.ReactElement>): Array<React.ReactElement> | null {
+    for (const child of children) {
+        if (child == null) continue;
+
+        if (child.props?.id === id) return itemsArray ?? null;
+
+        let nextChildren = child.props?.children;
+        if (nextChildren) {
+            if (!Array.isArray(nextChildren)) {
+                nextChildren = [nextChildren];
+                child.props.children = nextChildren;
+            }
+
+            const found = findGroupChildrenByChildId(id, nextChildren, nextChildren);
+            if (found !== null) return found;
+        }
+    }
+
+    return null;
+}
+
+interface ContextMenuProps {
+    contextMenuApiArguments?: Array<any>;
+    navId: string;
+    children: Array<ReactElement>;
+    "aria-label": string;
+    onSelect: (() => void) | undefined;
+    onClose: (callback: (...args: Array<any>) => any) => void;
+}
+
+export function _patchContextMenu(props: ContextMenuProps) {
+    props.contextMenuApiArguments ??= [];
+    const contextMenuPatches = navPatches.get(props.navId);
+
+    if (!Array.isArray(props.children)) props.children = [props.children];
+
+    if (contextMenuPatches) {
+        for (const patch of contextMenuPatches) {
+            try {
+                patch(props.children, ...props.contextMenuApiArguments);
+            } catch (err) {
+                ContextMenuLogger.error(`Patch for ${props.navId} errored,`, err);
+            }
+        }
+    }
+
+    for (const patch of globalPatches) {
+        try {
+            patch(props.navId, props.children, ...props.contextMenuApiArguments);
+        } catch (err) {
+            ContextMenuLogger.error("Global patch errored,", err);
+        }
+    }
+}

src/api/MessageEvents.ts

@@ -19,6 +19,7 @@
 import Logger from "@utils/Logger";
 import { MessageStore } from "@webpack/common";
 import type { Channel, Message } from "discord-types/general";
+import type { Promisable } from "type-fest";
 
 const MessageEventsLogger = new Logger("MessageEvents", "#e5c890");
 
@@ -41,16 +42,16 @@ export interface MessageExtra {
     stickerIds?: string[];
 }
 
-export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => void | { cancel: boolean; };
-export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => void;
+export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
+export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void>;
 
 const sendListeners = new Set<SendListener>();
 const editListeners = new Set<EditListener>();
 
-export function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra) {
+export async function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra) {
     for (const listener of sendListeners) {
         try {
-            const result = listener(channelId, messageObj, extra);
+            const result = await listener(channelId, messageObj, extra);
             if (result && result.cancel === true) {
                 return true;
             }
@@ -61,10 +62,10 @@ export function _handlePreSend(channelId: string, messageObj: MessageObject, ext
     return false;
 }
 
-export function _handlePreEdit(channelId: string, messageId: string, messageObj: MessageObject) {
+export async function _handlePreEdit(channelId: string, messageId: string, messageObj: MessageObject) {
     for (const listener of editListeners) {
         try {
-            listener(channelId, messageId, messageObj);
+            await listener(channelId, messageId, messageObj);
         } catch (e) {
             MessageEventsLogger.error("MessageEditHandler: Listener encountered an unknown error\n", e);
         }

src/api/Notifications/NotificationComponent.tsx

@@ -0,0 +1,123 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import { useSettings } from "@api/settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { classes } from "@utils/misc";
+import { React, useEffect, useMemo, useState, useStateFromStores, WindowStore } from "@webpack/common";
+
+import { NotificationData } from "./Notifications";
+
+export default ErrorBoundary.wrap(function NotificationComponent({
+    title,
+    body,
+    richBody,
+    color,
+    icon,
+    onClick,
+    onClose,
+    image,
+    permanent,
+    className,
+    dismissOnClick
+}: NotificationData & { className?: string; }) {
+    const { timeout, position } = useSettings(["notifications.timeout", "notifications.position"]).notifications;
+    const hasFocus = useStateFromStores([WindowStore], () => WindowStore.isFocused());
+
+    const [isHover, setIsHover] = useState(false);
+    const [elapsed, setElapsed] = useState(0);
+
+    const start = useMemo(() => Date.now(), [timeout, isHover, hasFocus]);
+
+    useEffect(() => {
+        if (isHover || !hasFocus || timeout === 0 || permanent) return void setElapsed(0);
+
+        const intervalId = setInterval(() => {
+            const elapsed = Date.now() - start;
+            if (elapsed >= timeout)
+                onClose!();
+            else
+                setElapsed(elapsed);
+        }, 10);
+
+        return () => clearInterval(intervalId);
+    }, [timeout, isHover, hasFocus]);
+
+    const timeoutProgress = elapsed / timeout;
+
+    return (
+        <button
+            className={classes("vc-notification-root", className)}
+            style={position === "bottom-right" ? { bottom: "1rem" } : { top: "3rem" }}
+            onClick={() => {
+                onClick?.();
+                if (dismissOnClick !== false)
+                    onClose!();
+            }}
+            onContextMenu={e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onClose!();
+            }}
+            onMouseEnter={() => setIsHover(true)}
+            onMouseLeave={() => setIsHover(false)}
+        >
+            <div className="vc-notification">
+                {icon && <img className="vc-notification-icon" src={icon} alt="" />}
+                <div className="vc-notification-content">
+                    <div className="vc-notification-header">
+                        <h2 className="vc-notification-title">{title}</h2>
+                        <button
+                            className="vc-notification-close-btn"
+                            onClick={e => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onClose!();
+                            }}
+                        >
+                            <svg
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                role="img"
+                                aria-labelledby="vc-notification-dismiss-title"
+                            >
+                                <title id="vc-notification-dismiss-title">Dismiss Notification</title>
+                                <path fill="currentColor" d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
+                            </svg>
+                        </button>
+                    </div>
+                    <div>
+                        {richBody ?? <p className="vc-notification-p">{body}</p>}
+                    </div>
+                </div>
+            </div>
+            {image && <img className="vc-notification-img" src={image} alt="" />}
+            {timeout !== 0 && !permanent && (
+                <div
+                    className="vc-notification-progressbar"
+                    style={{ width: `${(1 - timeoutProgress) * 100}%`, backgroundColor: color || "var(--brand-experiment)" }}
+                />
+            )}
+        </button>
+    );
+}, {
+    onError: ({ props }) => props.onClose!()
+});

src/api/Notifications/Notifications.tsx

@@ -0,0 +1,108 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Settings } from "@api/settings";
+import { Queue } from "@utils/Queue";
+import { ReactDOM } from "@webpack/common";
+import type { ReactNode } from "react";
+import type { Root } from "react-dom/client";
+
+import NotificationComponent from "./NotificationComponent";
+import { persistNotification } from "./notificationLog";
+
+const NotificationQueue = new Queue();
+
+let reactRoot: Root;
+let id = 42;
+
+function getRoot() {
+    if (!reactRoot) {
+        const container = document.createElement("div");
+        container.id = "vc-notification-container";
+        document.body.append(container);
+        reactRoot = ReactDOM.createRoot(container);
+    }
+    return reactRoot;
+}
+
+export interface NotificationData {
+    title: string;
+    body: string;
+    /**
+     * Same as body but can be a custom component.
+     * Will be used over body if present.
+     * Not supported on desktop notifications, those will fall back to body */
+    richBody?: ReactNode;
+    /** Small icon. This is for things like profile pictures and should be square */
+    icon?: string;
+    /** Large image. Optimally, this should be around 16x9 but it doesn't matter much. Desktop Notifications might not support this */
+    image?: string;
+    onClick?(): void;
+    onClose?(): void;
+    color?: string;
+    /** Whether this notification should not have a timeout */
+    permanent?: boolean;
+    /** Whether this notification should not be persisted in the Notification Log */
+    noPersist?: boolean;
+    /** Whether this notification should be dismissed when clicked (defaults to true) */
+    dismissOnClick?: boolean;
+}
+
+function _showNotification(notification: NotificationData, id: number) {
+    const root = getRoot();
+    return new Promise<void>(resolve => {
+        root.render(
+            <NotificationComponent key={id} {...notification} onClose={() => {
+                notification.onClose?.();
+                root.render(null);
+                resolve();
+            }} />,
+        );
+    });
+}
+
+function shouldBeNative() {
+    const { useNative } = Settings.notifications;
+    if (useNative === "always") return true;
+    if (useNative === "not-focused") return !document.hasFocus();
+    return false;
+}
+
+export async function requestPermission() {
+    return (
+        Notification.permission === "granted" ||
+        (Notification.permission !== "denied" && (await Notification.requestPermission()) === "granted")
+    );
+}
+
+export async function showNotification(data: NotificationData) {
+    persistNotification(data);
+
+    if (shouldBeNative() && await requestPermission()) {
+        const { title, body, icon, image, onClick = null, onClose = null } = data;
+        const n = new Notification(title, {
+            body,
+            icon,
+            image
+        });
+        n.onclick = onClick;
+        n.onclose = onClose;
+    } else {
+        NotificationQueue.push(() => _showNotification(data, id++));
+    }
+}

src/api/Notifications/index.ts

@@ -0,0 +1,19 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export * from "./Notifications";

src/api/Notifications/notificationLog.tsx

@@ -0,0 +1,203 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import * as DataStore from "@api/DataStore";
+import { Settings } from "@api/settings";
+import { classNameFactory } from "@api/Styles";
+import { useAwaiter } from "@utils/misc";
+import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { Alerts, Button, Forms, moment, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
+import { nanoid } from "nanoid";
+import type { DispatchWithoutAction } from "react";
+
+import NotificationComponent from "./NotificationComponent";
+import type { NotificationData } from "./Notifications";
+
+interface PersistentNotificationData extends Pick<NotificationData, "title" | "body" | "image" | "icon" | "color"> {
+    timestamp: number;
+    id: string;
+}
+
+const KEY = "notification-log";
+
+const getLog = async () => {
+    const log = await DataStore.get(KEY) as PersistentNotificationData[] | undefined;
+    return log ?? [];
+};
+
+const cl = classNameFactory("vc-notification-log-");
+const signals = new Set<DispatchWithoutAction>();
+
+export async function persistNotification(notification: NotificationData) {
+    if (notification.noPersist) return;
+
+    const limit = Settings.notifications.logLimit;
+    if (limit === 0) return;
+
+    await DataStore.update(KEY, (old: PersistentNotificationData[] | undefined) => {
+        const log = old ?? [];
+
+        // Omit stuff we don't need
+        const {
+            onClick, onClose, richBody, permanent, noPersist, dismissOnClick,
+            ...pureNotification
+        } = notification;
+
+        log.unshift({
+            ...pureNotification,
+            timestamp: Date.now(),
+            id: nanoid()
+        });
+
+        if (log.length > limit && limit !== 200)
+            log.length = limit;
+
+        return log;
+    });
+
+    signals.forEach(x => x());
+}
+
+export async function deleteNotification(timestamp: number) {
+    const log = await getLog();
+    const index = log.findIndex(x => x.timestamp === timestamp);
+    if (index === -1) return;
+
+    log.splice(index, 1);
+    await DataStore.set(KEY, log);
+    signals.forEach(x => x());
+}
+
+export function useLogs() {
+    const [signal, setSignal] = useReducer(x => x + 1, 0);
+
+    useEffect(() => {
+        signals.add(setSignal);
+        return () => void signals.delete(setSignal);
+    }, []);
+
+    const [log, _, pending] = useAwaiter(getLog, {
+        fallbackValue: [],
+        deps: [signal]
+    });
+
+    return [log, pending] as const;
+}
+
+function NotificationEntry({ data }: { data: PersistentNotificationData; }) {
+    const [removing, setRemoving] = useState(false);
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const div = ref.current!;
+
+        const setHeight = () => {
+            if (div.clientHeight === 0) return requestAnimationFrame(setHeight);
+            div.style.height = `${div.clientHeight}px`;
+        };
+
+        setHeight();
+    }, []);
+
+    return (
+        <div className={cl("wrapper", { removing })} ref={ref}>
+            <NotificationComponent
+                {...data}
+                permanent={true}
+                dismissOnClick={false}
+                onClose={() => {
+                    if (removing) return;
+                    setRemoving(true);
+
+                    setTimeout(() => deleteNotification(data.timestamp), 200);
+                }}
+                richBody={
+                    <div className={cl("body")}>
+                        {data.body}
+                        <Timestamp timestamp={moment(data.timestamp)} className={cl("timestamp")} />
+                    </div>
+                }
+            />
+        </div>
+    );
+}
+
+export function NotificationLog({ log, pending }: { log: PersistentNotificationData[], pending: boolean; }) {
+    if (!log.length && !pending)
+        return (
+            <div className={cl("container")}>
+                <div className={cl("empty")} />
+                <Forms.FormText style={{ textAlign: "center" }}>
+                    No notifications yet
+                </Forms.FormText>
+            </div>
+        );
+
+    return (
+        <div className={cl("container")}>
+            {log.map(n => <NotificationEntry data={n} key={n.id} />)}
+        </div>
+    );
+}
+
+function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void; }) {
+    const [log, pending] = useLogs();
+
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.LARGE}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Notification Log</Text>
+                <ModalCloseButton onClick={close} />
+            </ModalHeader>
+
+            <ModalContent>
+                <NotificationLog log={log} pending={pending} />
+            </ModalContent>
+
+            <ModalFooter>
+                <Button
+                    disabled={log.length === 0}
+                    onClick={() => {
+                        Alerts.show({
+                            title: "Are you sure?",
+                            body: `This will permanently remove ${log.length} notification${log.length === 1 ? "" : "s"}. This action cannot be undone.`,
+                            async onConfirm() {
+                                await DataStore.set(KEY, []);
+                                signals.forEach(x => x());
+                            },
+                            confirmText: "Do it!",
+                            confirmColor: "vc-notification-log-danger-btn",
+                            cancelText: "Nevermind"
+                        });
+                    }}
+                >
+                    Clear Notification Log
+                </Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
+
+export function openNotificationLogModal() {
+    const key = openModal(modalProps => (
+        <LogModal
+            modalProps={modalProps}
+            close={() => closeModal(key)}
+        />
+    ));
+}

src/api/Notifications/styles.css

@@ -0,0 +1,122 @@
+.vc-notification-root {
+    /* clear default button styles */
+    all: unset;
+    display: flex;
+    flex-direction: column;
+    color: var(--text-normal);
+    background-color: var(--background-secondary-alt);
+    border-radius: 6px;
+    overflow: hidden;
+    cursor: pointer;
+    width: 100%;
+}
+
+.vc-notification-root:not(.vc-notification-log-wrapper > .vc-notification-root) {
+    position: absolute;
+    z-index: 2147483647;
+    right: 1rem;
+    width: 25vw;
+    min-height: 10vh;
+}
+
+.vc-notification {
+    display: flex;
+    flex-direction: row;
+    padding: 1.25rem;
+    gap: 1.25rem;
+}
+
+.vc-notification-content {
+    width: 100%;
+}
+
+.vc-notification-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.vc-notification-title {
+    color: var(--header-primary);
+    font-size: 1rem;
+    font-weight: 600;
+    line-height: 1.25rem;
+    text-transform: uppercase;
+}
+
+.vc-notification-close-btn {
+    all: unset;
+    cursor: pointer;
+    color: var(--interactive-normal);
+    opacity: 0.5;
+    transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+
+.vc-notification-close-btn:hover {
+    color: var(--interactive-hover);
+    opacity: 1;
+}
+
+.vc-notification-icon {
+    height: 4rem;
+    width: 4rem;
+    border-radius: 6px;
+}
+
+.vc-notification-progressbar {
+    height: 0.25rem;
+    border-radius: 5px;
+    margin-top: auto;
+}
+
+.vc-notification-p {
+    margin: 0.5rem 0 0;
+    line-height: 140%;
+}
+
+.vc-notification-img {
+    width: 100%;
+}
+
+.vc-notification-log-empty {
+    height: 218px;
+    background: url("/assets/b36de980b174d7b798c89f35c116e5c6.svg") center no-repeat;
+    margin-bottom: 40px;
+}
+
+.vc-notification-log-container {
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+    overflow: hidden;
+}
+
+.vc-notification-log-wrapper {
+    transition: 200ms ease;
+    transition-property: height, opacity;
+}
+
+.vc-notification-log-wrapper:not(:last-child) {
+    margin-bottom: 1em;
+}
+
+.vc-notification-log-removing {
+    height: 0 !important;
+    opacity: 0;
+    margin-bottom: 1em;
+}
+
+.vc-notification-log-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.vc-notification-log-timestamp {
+    margin-left: auto;
+    font-size: 0.8em;
+    font-weight: lighter;
+}
+
+.vc-notification-log-danger-btn {
+    color: var(--white-500);
+    background-color: var(--button-danger-background);
+}

src/api/index.ts

@@ -18,6 +18,7 @@
 
 import * as $Badges from "./Badges";
 import * as $Commands from "./Commands";
+import * as $ContextMenu from "./ContextMenu";
 import * as $DataStore from "./DataStore";
 import * as $MemberListDecorators from "./MemberListDecorators";
 import * as $MessageAccessories from "./MessageAccessories";
@@ -25,6 +26,7 @@ import * as $MessageDecorations from "./MessageDecorations";
 import * as $MessageEventsAPI from "./MessageEvents";
 import * as $MessagePopover from "./MessagePopover";
 import * as $Notices from "./Notices";
+import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
 import * as $Styles from "./Styles";
 
@@ -88,3 +90,12 @@ export const MemberListDecorators = $MemberListDecorators;
  * a
  */
 export const Styles = $Styles;
+/**
+ * An API allowing you to display notifications
+ */
+export const Notifications = $Notifications;
+
+/**
+ * An api allowing you to patch and add/remove items to/from context menus
+ */
+export const ContextMenu = $ContextMenu;

src/api/settings.ts

@@ -28,30 +28,48 @@ const logger = new Logger("Settings");
 export interface Settings {
     notifyAboutUpdates: boolean;
     autoUpdate: boolean;
+    autoUpdateNotification: boolean,
     useQuickCss: boolean;
     enableReactDevtools: boolean;
     themeLinks: string[];
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
+    winNativeTitleBar: boolean;
     plugins: {
         [plugin: string]: {
             enabled: boolean;
             [setting: string]: any;
         };
     };
+
+    notifications: {
+        timeout: number;
+        position: "top-right" | "bottom-right";
+        useNative: "always" | "never" | "not-focused";
+        logLimit: number;
+    };
 }
 
 const DefaultSettings: Settings = {
     notifyAboutUpdates: true,
     autoUpdate: false,
+    autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
     enableReactDevtools: false,
     frameless: false,
     transparent: false,
     winCtrlQ: false,
-    plugins: {}
+    winNativeTitleBar: false,
+    plugins: {},
+
+    notifications: {
+        timeout: 5000,
+        position: "bottom-right",
+        useNative: "not-focused",
+        logLimit: 50
+    }
 };
 
 try {
@@ -78,7 +96,7 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
                 // Return empty for plugins with no settings
                 if (path === "plugins" && p in plugins)
                     return target[p] = makeProxy({
-                        enabled: plugins[p].required ?? false
+                        enabled: plugins[p].required ?? plugins[p].enabledByDefault ?? false
                     }, root, `plugins.${p}`);
 
                 // Since the property is not set, check if this is a plugin's setting and if so, try to resolve
@@ -117,6 +135,7 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
             target[p] = v;
             // Call any listeners that are listening to a setting of this path
             const setPath = `${path}${path && "."}${p}`;
+            delete proxyCache[setPath];
             for (const subscription of subscriptions) {
                 if (!subscription._path || subscription._path === setPath) {
                     subscription(v, setPath);
@@ -153,11 +172,11 @@ export const Settings = makeProxy(settings);
  * @returns Settings
  */
 // TODO: Representing paths as essentially "string[].join('.')" wont allow dots in paths, change to "paths?: string[][]" later
-export function useSettings(paths?: string[]) {
+export function useSettings(paths?: UseSettings<Settings>[]) {
     const [, forceUpdate] = React.useReducer(() => ({}), {});
 
     const onUpdate: SubscriptionCallback = paths
-        ? (value, path) => paths.includes(path) && forceUpdate()
+        ? (value, path) => paths.includes(path as UseSettings<Settings>) && forceUpdate()
         : forceUpdate;
 
     React.useEffect(() => {
@@ -215,7 +234,7 @@ export function definePluginSettings<D extends SettingsDefinition, C extends Set
             return Settings.plugins[definedSettings.pluginName] as any;
         },
         use: settings => useSettings(
-            settings?.map(name => `plugins.${definedSettings.pluginName}.${name}`)
+            settings?.map(name => `plugins.${definedSettings.pluginName}.${name}`) as UseSettings<Settings>[]
         ).plugins[definedSettings.pluginName] as any,
         def,
         checks: checks ?? {},
@@ -223,3 +242,15 @@ export function definePluginSettings<D extends SettingsDefinition, C extends Set
     };
     return definedSettings;
 }
+
+type UseSettings<T extends object> = ResolveUseSettings<T>[keyof T];
+
+type ResolveUseSettings<T extends object> = {
+    [Key in keyof T]:
+    Key extends string
+    ? T[Key] extends Record<string, unknown>
+    // @ts-ignore "Type instantiation is excessively deep and possibly infinite"
+    ? UseSettings<T[Key]> extends string ? `${Key}.${UseSettings<T[Key]>}` : never
+    : Key
+    : never;
+};

src/components/ErrorBoundary.tsx

@@ -17,20 +17,24 @@
 */
 
 import Logger from "@utils/Logger";
+import { Margins } from "@utils/margins";
 import { LazyComponent } from "@utils/misc";
-import { Margins, React } from "@webpack/common";
+import { React } from "@webpack/common";
 
 import { ErrorCard } from "./ErrorCard";
 
-interface Props {
+interface Props<T = any> {
     /** Render nothing if an error occurs */
     noop?: boolean;
     /** Fallback component to render if an error occurs */
     fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; }>>;
-    /** called when an error occurs */
-    onError?(error: Error, errorInfo: React.ErrorInfo): void;
+    /** called when an error occurs. The props property is only available if using .wrap */
+    onError?(data: { error: Error, errorInfo: React.ErrorInfo, props: T; }): void;
     /** Custom error message */
     message?: string;
+
+    /** The props passed to the wrapped component. Only used by wrap */
+    wrappedProps?: T;
 }
 
 const color = "#e78284";
@@ -65,7 +69,7 @@ const ErrorBoundary = LazyComponent(() => {
         }
 
         componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-            this.props.onError?.(error, errorInfo);
+            this.props.onError?.({ error, errorInfo, props: this.props.wrappedProps });
             logger.error("A component threw an Error\n", error);
             logger.error("Component Stack", errorInfo.componentStack);
         }
@@ -84,15 +88,13 @@ const ErrorBoundary = LazyComponent(() => {
             const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console.";
 
             return (
-                <ErrorCard style={{
-                    overflow: "hidden",
-                }}>
+                <ErrorCard style={{ overflow: "hidden" }}>
                     <h1>Oh no!</h1>
                     <p>{msg}</p>
                     <code>
                         {this.state.message}
                         {!!this.state.stack && (
-                            <pre className={Margins.marginTop8}>
+                            <pre className={Margins.top8}>
                                 {this.state.stack}
                             </pre>
                         )}
@@ -103,11 +105,11 @@ const ErrorBoundary = LazyComponent(() => {
     };
 }) as
     React.ComponentType<React.PropsWithChildren<Props>> & {
-        wrap<T extends JSX.IntrinsicAttributes = any>(Component: React.ComponentType<T>, errorBoundaryProps?: Props): React.ComponentType<T>;
+        wrap<T extends object = any>(Component: React.ComponentType<T>, errorBoundaryProps?: Omit<Props<T>, "wrappedProps">): React.FunctionComponent<T>;
     };
 
 ErrorBoundary.wrap = (Component, errorBoundaryProps) => props => (
-    <ErrorBoundary {...errorBoundaryProps}>
+    <ErrorBoundary {...errorBoundaryProps} wrappedProps={props}>
         <Component {...props} />
     </ErrorBoundary>
 );

src/components/ErrorCard.css

@@ -0,0 +1,7 @@
+.vc-error-card {
+    padding: 2em;
+    background-color: #e7828430;
+    border: 1px solid #e78284;
+    border-radius: 5px;
+    color: var(--text-normal, white);
+}

src/components/ErrorCard.tsx

@@ -16,24 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Card } from "@webpack/common";
+import "./ErrorCard.css";
 
-interface Props {
-    style?: React.CSSProperties;
-    className?: string;
-}
-export function ErrorCard(props: React.PropsWithChildren<Props>) {
+import { classes } from "@utils/misc";
+import type { HTMLProps } from "react";
+
+export function ErrorCard(props: React.PropsWithChildren<HTMLProps<HTMLDivElement>>) {
     return (
-        <Card className={props.className} style={
-            {
-                padding: "2em",
-                backgroundColor: "#e7828430",
-                borderColor: "#e78284",
-                color: "var(--text-normal)",
-                ...props.style
-            }
-        }>
+        <div {...props} className={classes(props.className, "vc-error-card")}>
             {props.children}
-        </Card>
+        </div>
     );
 }

src/components/PatchHelper.tsx

@@ -17,10 +17,12 @@
 */
 
 import { debounce } from "@utils/debounce";
+import { Margins } from "@utils/margins";
 import { makeCodeblock } from "@utils/misc";
-import { canonicalizeMatch, canonicalizeReplace, ReplaceFn } from "@utils/patches";
+import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
+import { ReplaceFn } from "@utils/types";
 import { search } from "@webpack";
-import { Button, Clipboard, Forms, Margins, Parser, React, Switch, Text, TextInput } from "@webpack/common";
+import { Button, Clipboard, Forms, Parser, React, Switch, Text, TextInput } from "@webpack/common";
 
 import { CheckedTextInput } from "./CheckedTextInput";
 import ErrorBoundary from "./ErrorBoundary";
@@ -128,7 +130,7 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
             )}
 
             {!!diff?.length && (
-                <Button className={Margins.marginTop20} onClick={() => {
+                <Button className={Margins.top20} onClick={() => {
                     try {
                         Function(patchedCode.replace(/^function\(/, "function patchedModule("));
                         setCompileResult([true, "Compiled successfully"]);
@@ -202,7 +204,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
             )}
 
             <Switch
-                className={Margins.marginTop8}
+                className={Margins.top8}
                 value={isFunc}
                 onChange={setIsFunc}
                 note="'replacement' will be evaled if this is toggled"
@@ -256,7 +258,7 @@ function PatchHelper() {
 
     return (
         <Forms.FormSection>
-            <Text variant="heading-md/normal" tag="h2" className={Margins.marginBottom8}>Patch Helper</Text>
+            <Text variant="heading-md/normal" tag="h2" className={Margins.bottom8}>Patch Helper</Text>
             <Forms.FormTitle>find</Forms.FormTitle>
             <TextInput
                 type="text"
@@ -296,7 +298,7 @@ function PatchHelper() {
 
             {!!(find && match && replacement) && (
                 <>
-                    <Forms.FormTitle className={Margins.marginTop20}>Code</Forms.FormTitle>
+                    <Forms.FormTitle className={Margins.top20}>Code</Forms.FormTitle>
                     <div style={{ userSelect: "text" }}>{Parser.parse(makeCodeblock(code, "ts"))}</div>
                     <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
                 </>

src/components/PluginSettings/components/SettingNumericComponent.tsx

@@ -38,9 +38,12 @@ export function SettingNumericComponent({ option, pluginSettings, definedSetting
 
     function handleChange(newValue) {
         const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
+
+        setError(null);
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
-        else if (option.type === OptionType.NUMBER && BigInt(newValue) >= MAX_SAFE_NUMBER) {
+
+        if (option.type === OptionType.NUMBER && BigInt(newValue) >= MAX_SAFE_NUMBER) {
             setState(`${Number.MAX_SAFE_INTEGER}`);
             onChange(serialize(newValue));
         } else {

src/components/PluginSettings/components/SettingSelectComponent.tsx

@@ -36,6 +36,7 @@ export function SettingSelectComponent({ option, pluginSettings, definedSettings
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
         else {
+            setError(null);
             setState(newValue);
             onChange(newValue);
         }

src/components/PluginSettings/components/SettingTextComponent.tsx

@@ -34,6 +34,7 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
         else {
+            setError(null);
             setState(newValue);
             onChange(newValue);
         }

src/components/PluginSettings/index.tsx

@@ -30,11 +30,12 @@ import PluginModal from "@components/PluginSettings/PluginModal";
 import { Switch } from "@components/Switch";
 import { ChangeList } from "@utils/ChangeList";
 import Logger from "@utils/Logger";
+import { Margins } from "@utils/margins";
 import { classes, LazyComponent, useAwaiter } from "@utils/misc";
 import { openModalLazy } from "@utils/modal";
 import { Plugin } from "@utils/types";
 import { findByCode, findByPropsLazy } from "@webpack";
-import { Alerts, Button, Card, Forms, Margins, Parser, React, Select, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
+import { Alerts, Button, Card, Forms, Parser, React, Select, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
 
 import Plugins from "~plugins";
 
@@ -92,7 +93,7 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
-    const settings = useSettings([`plugins.${plugin.name}`]).plugins[plugin.name];
+    const settings = useSettings([`plugins.${plugin.name}.enabled`]).plugins[plugin.name];
 
     const isEnabled = () => settings.enabled ?? false;
 
@@ -222,7 +223,7 @@ export default ErrorBoundary.wrap(function PluginSettings() {
     const onStatusChange = (status: SearchStatus) => setSearchValue(prev => ({ ...prev, status }));
 
     const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => {
-        const enabled = settings.plugins[plugin.name]?.enabled || plugin.started;
+        const enabled = settings.plugins[plugin.name]?.enabled;
         if (enabled && searchValue.status === SearchStatus.DISABLED) return false;
         if (!enabled && searchValue.status === SearchStatus.ENABLED) return false;
         if (!searchValue.value.length) return true;
@@ -296,15 +297,15 @@ export default ErrorBoundary.wrap(function PluginSettings() {
     }
 
     return (
-        <Forms.FormSection className={Margins.marginTop16}>
+        <Forms.FormSection className={Margins.top16}>
             <ReloadRequiredCard required={changes.hasChanges} />
 
-            <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
+            <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Filters
             </Forms.FormTitle>
 
             <div className={cl("filter-controls")}>
-                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.marginBottom20} />
+                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.bottom20} />
                 <div className={InputStyles.inputWrapper}>
                     <Select
                         className={InputStyles.inputDefault}
@@ -321,15 +322,15 @@ export default ErrorBoundary.wrap(function PluginSettings() {
                 </div>
             </div>
 
-            <Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top20}>Plugins</Forms.FormTitle>
 
             <div className={cl("grid")}>
                 {plugins}
             </div>
 
-            <Forms.FormDivider className={Margins.marginTop20} />
+            <Forms.FormDivider className={Margins.top20} />
 
-            <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
+            <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Required Plugins
             </Forms.FormTitle>
             <div className={cl("grid")}>

src/components/PluginSettings/styles.css

@@ -94,6 +94,7 @@
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
+    /* stylelint-disable-next-line property-no-unknown */
     box-orient: vertical;
 }
 
@@ -132,6 +133,6 @@
     margin-top: 0.5em;
 }
 
-.vc-plugins-info-button svg:not(:hover):not(:focus) {
+.vc-plugins-info-button svg:not(:hover, :focus) {
     color: var(--text-muted);
 }

src/components/Switch.tsx

@@ -18,6 +18,7 @@
 
 import "./Switch.css";
 
+import { classes } from "@utils/misc";
 import { findByPropsLazy } from "@webpack";
 
 interface SwitchProps {
@@ -26,14 +27,14 @@ interface SwitchProps {
     disabled?: boolean;
 }
 
-const SWITCH_ON = "var(--status-green-600)";
-const SWITCH_OFF = "var(--primary-dark-400)";
+const SWITCH_ON = "var(--green-360)";
+const SWITCH_OFF = "var(--primary-400)";
 const SwitchClasses = findByPropsLazy("slider", "input", "container");
 
 export function Switch({ checked, onChange, disabled }: SwitchProps) {
     return (
         <div>
-            <div className={`${SwitchClasses.container} default-colors`} style={{
+            <div className={classes(SwitchClasses.container, "default-colors", checked ? SwitchClasses.checked : void 0)} style={{
                 backgroundColor: checked ? SWITCH_ON : SWITCH_OFF,
                 opacity: disabled ? 0.3 : 1
             }}>

src/components/VencordSettings/BackupRestoreTab.tsx

@@ -18,25 +18,26 @@
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
+import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
-import { Button, Card, Forms, Margins, Text } from "@webpack/common";
+import { Button, Card, Forms, Text } from "@webpack/common";
 
 function BackupRestoreTab() {
     return (
-        <Forms.FormSection title="Settings Sync" className={Margins.marginTop16}>
+        <Forms.FormSection title="Settings Sync" className={Margins.top16}>
             <Card className={classes("vc-settings-card", "vc-backup-restore-card")}>
                 <Flex flexDirection="column">
                     <strong>Warning</strong>
                     <span>Importing a settings file will overwrite your current settings.</span>
                 </Flex>
             </Card>
-            <Text variant="text-md/normal" className={Margins.marginBottom8}>
+            <Text variant="text-md/normal" className={Margins.bottom8}>
                 You can import and export your Vencord settings as a JSON file.
                 This allows you to easily transfer your settings to another device,
                 or recover your settings after reinstalling Vencord or Discord.
             </Text>
-            <Text variant="text-md/normal" className={Margins.marginBottom8}>
+            <Text variant="text-md/normal" className={Margins.bottom8}>
                 Settings Export contains:
                 <ul>
                     <li>&mdash; Custom QuickCSS</li>

src/components/VencordSettings/ThemesTab.tsx

@@ -19,9 +19,10 @@
 import { useSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
+import { Margins } from "@utils/margins";
 import { useAwaiter } from "@utils/misc";
 import { findLazy } from "@webpack";
-import { Card, Forms, Margins, React, TextArea } from "@webpack/common";
+import { Card, Forms, React, TextArea } from "@webpack/common";
 
 const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
@@ -51,7 +52,7 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
 
     return (
         <>
-            <Forms.FormTitle className={Margins.marginTop20} tag="h5">Validator</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
             <Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
             <div>
                 {themeLinks.map(link => (
@@ -93,7 +94,7 @@ export default ErrorBoundary.wrap(function () {
                 <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
                 <Forms.FormText>One link per line</Forms.FormText>
                 <Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
-                <Forms.FormDivider className={Margins.marginTop8 + " " + Margins.marginBottom8} />
+                <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
                 <Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
                 <div style={{ marginBottom: ".5em" }}>
                     <Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
@@ -115,13 +116,9 @@ export default ErrorBoundary.wrap(function () {
             </Card>
             <Forms.FormTitle tag="h5">Themes</Forms.FormTitle>
             <TextArea
-                style={{
-                    padding: ".5em",
-                    border: "1px solid var(--background-modifier-accent)"
-                }}
                 value={themeText}
                 onChange={e => setThemeText(e.currentTarget.value)}
-                className={TextAreaProps.textarea}
+                className={`${TextAreaProps.textarea} vc-settings-theme-links`}
                 placeholder="Theme Links"
                 spellCheck={false}
                 onBlur={onBlur}

src/components/VencordSettings/Updater.tsx

@@ -22,9 +22,10 @@ import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
 import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Link } from "@components/Link";
+import { Margins } from "@utils/margins";
 import { classes, useAwaiter } from "@utils/misc";
 import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "@utils/updater";
-import { Alerts, Button, Card, Forms, Margins, Parser, React, Switch, Toasts } from "@webpack/common";
+import { Alerts, Button, Card, Forms, Parser, React, Switch, Toasts } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
@@ -109,14 +110,14 @@ function Updatable(props: CommonProps) {
                     </ErrorCard>
                 </>
             ) : (
-                <Forms.FormText className={Margins.marginBottom8}>
+                <Forms.FormText className={Margins.bottom8}>
                     {isOutdated ? `There are ${updates.length} Updates` : "Up to Date!"}
                 </Forms.FormText>
             )}
 
             {isOutdated && <Changes updates={updates} {...props} />}
 
-            <Flex className={classes(Margins.marginBottom8, Margins.marginTop8)}>
+            <Flex className={classes(Margins.bottom8, Margins.top8)}>
                 {isOutdated && <Button
                     size={Button.Sizes.SMALL}
                     disabled={isUpdating || isChecking}
@@ -175,7 +176,7 @@ function Updatable(props: CommonProps) {
 function Newer(props: CommonProps) {
     return (
         <>
-            <Forms.FormText className={Margins.marginBottom8}>
+            <Forms.FormText className={Margins.bottom8}>
                 Your local copy has more recent commits. Please stash or reset them.
             </Forms.FormText>
             <Changes {...props} updates={changes} />
@@ -184,7 +185,7 @@ function Newer(props: CommonProps) {
 }
 
 function Updater() {
-    const settings = useSettings(["notifyAboutUpdates", "autoUpdate"]);
+    const settings = useSettings(["notifyAboutUpdates", "autoUpdate", "autoUpdateNotification"]);
 
     const [repo, err, repoPending] = useAwaiter(getRepo, { fallbackValue: "Loading..." });
 
@@ -199,12 +200,12 @@ function Updater() {
     };
 
     return (
-        <Forms.FormSection className={Margins.marginTop16}>
+        <Forms.FormSection className={Margins.top16}>
             <Forms.FormTitle tag="h5">Updater Settings</Forms.FormTitle>
             <Switch
                 value={settings.notifyAboutUpdates}
                 onChange={(v: boolean) => settings.notifyAboutUpdates = v}
-                note="Shows a toast on startup"
+                note="Shows a notification on startup"
                 disabled={settings.autoUpdate}
             >
                 Get notified about new updates
@@ -216,6 +217,14 @@ function Updater() {
             >
                 Automatically update
             </Switch>
+            <Switch
+                value={settings.autoUpdateNotification}
+                onChange={(v: boolean) => settings.autoUpdateNotification = v}
+                note="Shows a notification when Vencord automatically updates"
+                disabled={!settings.autoUpdate}
+            >
+                Get notified when an automatic update completes
+            </Switch>
 
             <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
 
@@ -225,7 +234,7 @@ function Updater() {
                 </Link>
             )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
 
-            <Forms.FormDivider className={Margins.marginTop8 + " " + Margins.marginBottom8} />
+            <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
 
             <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
 

src/components/VencordSettings/VencordTab.tsx

@@ -17,27 +17,74 @@
 */
 
 
+import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { useSettings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { ErrorCard } from "@components/ErrorCard";
 import IpcEvents from "@utils/IpcEvents";
-import { useAwaiter } from "@utils/misc";
-import { Button, Card, Forms, Margins, React, Switch } from "@webpack/common";
+import { Margins } from "@utils/margins";
+import { identity, useAwaiter } from "@utils/misc";
+import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
 
 const cl = classNameFactory("vc-settings-");
 
 const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
 const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png";
 
+type KeysOfType<Object, Type> = {
+    [K in keyof Object]: Object[K] extends Type ? K : never;
+}[keyof Object];
+
 function VencordSettings() {
     const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
         fallbackValue: "Loading..."
     });
     const settings = useSettings();
+    const notifSettings = settings.notifications;
 
     const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
 
+    const isWindows = navigator.platform.toLowerCase().startsWith("win");
+
+    const Switches: Array<false | {
+        key: KeysOfType<typeof settings, boolean>;
+        title: string;
+        note: string;
+    }> =
+        [
+            {
+                key: "useQuickCss",
+                title: "Enable Custom CSS",
+                note: "Loads your Custom CSS"
+            },
+            !IS_WEB && {
+                key: "enableReactDevtools",
+                title: "Enable React Developer Tools",
+                note: "Requires a full restart"
+            },
+            !IS_WEB && (!isWindows ? {
+                key: "frameless",
+                title: "Disable the window frame",
+                note: "Requires a full restart"
+            } : {
+                key: "winNativeTitleBar",
+                title: "Use Windows' native title bar instead of Discord's custom one",
+                note: "Requires a full restart"
+            }),
+            !IS_WEB && false /* This causes electron to freeze / white screen for some people */ && {
+                key: "transparent",
+                title: "Enable window transparency",
+                note: "Requires a full restart"
+            },
+            !IS_WEB && isWindows && {
+                key: "winCtrlQ",
+                title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
+                note: "Requires a full restart"
+            }
+        ];
+
     return (
         <React.Fragment>
             <DonateCard image={donateImage} />
@@ -82,52 +129,99 @@ function VencordSettings() {
 
             <Forms.FormDivider />
 
-            <Forms.FormSection className={Margins.marginTop16} title="Settings">
-                <Forms.FormText className={Margins.marginBottom20}>
+            <Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
+                <Forms.FormText className={Margins.bottom20}>
                     Hint: You can change the position of this settings section in the settings of the "Settings" plugin!
                 </Forms.FormText>
+                {Switches.map(s => s && (
                     <Switch
-                    value={settings.useQuickCss}
-                    onChange={(v: boolean) => settings.useQuickCss = v}
-                    note="Loads styles from your QuickCSS file">
-                    Use QuickCSS
-                </Switch>
-                {!IS_WEB && (
-                    <React.Fragment>
-                        <Switch
-                            value={settings.enableReactDevtools}
-                            onChange={(v: boolean) => settings.enableReactDevtools = v}
-                            note="Requires a full restart"
+                        key={s.key}
+                        value={settings[s.key]}
+                        onChange={v => settings[s.key] = v}
+                        note={s.note}
                     >
-                            Enable React Developer Tools
+                        {s.title}
                     </Switch>
-                        <Switch
-                            value={settings.frameless}
-                            onChange={(v: boolean) => settings.frameless = v}
-                            note="Requires a full restart"
-                        >
-                            Disable the window frame
-                        </Switch>
-                        <Switch
-                            value={settings.transparent}
-                            onChange={(v: boolean) => settings.transparent = v}
-                            note="Requires a full restart"
-                        >
-                            Enable window transparency
-                        </Switch>
-                        {navigator.platform.toLowerCase().startsWith("win") && (
-                            <Switch
-                                value={settings.winCtrlQ}
-                                onChange={(v: boolean) => settings.winCtrlQ = v}
-                                note="Requires a full restart"
-                            >
-                                Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)
-                            </Switch>
-                        )}
-                    </React.Fragment>
-                )}
-
+                ))}
             </Forms.FormSection>
+
+
+            <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
+            {notifSettings.useNative !== "never" && Notification.permission === "denied" && (
+                <ErrorCard style={{ padding: "1em" }} className={Margins.bottom8}>
+                    <Forms.FormTitle tag="h5">Desktop Notification Permission denied</Forms.FormTitle>
+                    <Forms.FormText>You have denied Notification Permissions. Thus, Desktop notifications will not work!</Forms.FormText>
+                </ErrorCard>
+            )}
+            <Forms.FormText className={Margins.bottom8}>
+                Some plugins may show you notifications. These come in two styles:
+                <ul>
+                    <li><strong>Vencord Notifications</strong>: These are in-app notifications</li>
+                    <li><strong>Desktop Notifications</strong>: Native Desktop notifications (like when you get a ping)</li>
+                </ul>
+            </Forms.FormText>
+            <Select
+                placeholder="Notification Style"
+                options={[
+                    { label: "Only use Desktop notifications when Discord is not focused", value: "not-focused", default: true },
+                    { label: "Always use Desktop notifications", value: "always" },
+                    { label: "Always use Vencord notifications", value: "never" },
+                ] satisfies Array<{ value: typeof settings["notifications"]["useNative"]; } & Record<string, any>>}
+                closeOnSelect={true}
+                select={v => notifSettings.useNative = v}
+                isSelected={v => v === notifSettings.useNative}
+                serialize={identity}
+            />
+
+            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
+            <Select
+                isDisabled={notifSettings.useNative === "always"}
+                placeholder="Notification Position"
+                options={[
+                    { label: "Bottom Right", value: "bottom-right", default: true },
+                    { label: "Top Right", value: "top-right" },
+                ] satisfies Array<{ value: typeof settings["notifications"]["position"]; } & Record<string, any>>}
+                select={v => notifSettings.position = v}
+                isSelected={v => v === notifSettings.position}
+                serialize={identity}
+            />
+
+            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom16}>Set to 0s to never automatically time out</Forms.FormText>
+            <Slider
+                disabled={notifSettings.useNative === "always"}
+                markers={[0, 1000, 2500, 5000, 10_000, 20_000]}
+                minValue={0}
+                maxValue={20_000}
+                initialValue={notifSettings.timeout}
+                onValueChange={v => notifSettings.timeout = v}
+                onValueRender={v => (v / 1000).toFixed(2) + "s"}
+                onMarkerRender={v => (v / 1000) + "s"}
+                stickToMarkers={false}
+            />
+
+            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Log Limit</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom16}>
+                The amount of notifications to save in the log until old ones are removed.
+                Set to <code>0</code> to disable Notification log and <code>∞</code> to never automatically remove old Notifications
+            </Forms.FormText>
+            <Slider
+                markers={[0, 25, 50, 75, 100, 200]}
+                minValue={0}
+                maxValue={200}
+                stickToMarkers={true}
+                initialValue={notifSettings.logLimit}
+                onValueChange={v => notifSettings.logLimit = v}
+                onValueRender={v => v === 200 ? "∞" : v}
+                onMarkerRender={v => v === 200 ? "∞" : v}
+            />
+
+            <Button
+                onClick={openNotificationLogModal}
+                disabled={notifSettings.logLimit === 0}
+            >
+                Open Notification Log
+            </Button>
         </React.Fragment>
     );
 }

src/components/VencordSettings/index.tsx

@@ -20,6 +20,7 @@ import "./settingsStyles.css";
 
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { handleComponentFailed } from "@components/handleComponentFailed";
 import { findByCodeLazy } from "@webpack";
 import { Forms, SettingsRouter, Text } from "@webpack/common";
 
@@ -58,11 +59,11 @@ function Settings(props: SettingsProps) {
     const CurrentTab = SettingsTabs[tab]?.component;
 
     return <Forms.FormSection>
-        <Text variant="heading-md/normal" tag="h2">Vencord Settings</Text>
+        <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">Vencord Settings</Text>
 
         <TabBar
-            type={TabBar.Types.TOP}
-            look={TabBar.Looks.BRAND}
+            type="top"
+            look="brand"
             className={cl("tab-bar")}
             selectedItem={tab}
             onItemSelect={SettingsRouter.open}
@@ -83,7 +84,7 @@ function Settings(props: SettingsProps) {
 }
 
 export default function (props: SettingsProps) {
-    return <ErrorBoundary>
+    return <ErrorBoundary onError={handleComponentFailed}>
         <Settings tab={props.tab} />
     </ErrorBoundary>;
 }

src/components/VencordSettings/settingsStyles.css

@@ -16,9 +16,8 @@
     gap: 1em;
     align-items: center;
     justify-content: space-between;
-    flex-wrap: wrap;
     flex-grow: 1;
-    flex-direction: row;
+    flex-flow: row wrap;
     margin-bottom: 1em;
 }
 
@@ -39,3 +38,11 @@
     color: var(--info-warning-text);
     margin-top: 0;
 }
+
+.vc-settings-theme-links {
+    /* Needed to fix bad themes that hide certain textarea elements for whatever eldritch reason */
+    display: inline-block !important;
+    color: var(--text-normal) !important;
+    padding: 0.5em;
+    border: 1px solid var(--background-modifier-accent);
+}

src/components/handleComponentFailed.ts

@@ -16,29 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { isOutdated, rebuild, update } from "@utils/updater";
+import { maybePromptToUpdate } from "@utils/updater";
 
-export async function handleComponentFailed() {
-    if (isOutdated) {
-        setImmediate(async () => {
-            const wantsUpdate = confirm(
+export function handleComponentFailed() {
+    maybePromptToUpdate(
         "Uh Oh! Failed to render this Page." +
         " However, there is an update available that might fix it." +
         " Would you like to update and restart now?"
     );
-            if (wantsUpdate) {
-                try {
-                    await update();
-                    await rebuild();
-                    if (IS_WEB)
-                        location.reload();
-                    else
-                        DiscordNative.app.relaunch();
-                } catch (e) {
-                    console.error(e);
-                    alert("That also failed :( Try updating or reinstalling with the installer!");
-                }
-            }
-        });
-    }
 }

src/globals.d.ts

@@ -51,8 +51,7 @@ declare global {
      * Only available when running in Electron, undefined on web.
      * Thus, avoid using this or only use it inside an {@link IS_WEB} guard.
      *
-     * If you really must use it, mark your plugin as Desktop App only via
-     * `target: "DESKTOP"`
+     * If you really must use it, mark your plugin as Desktop App only by naming it Foo.desktop.ts(x)
      */
     export var DiscordNative: any;
 

src/ipcMain/index.ts

@@ -91,7 +91,8 @@ ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
         webPreferences: {
             preload: join(__dirname, "preload.js"),
             contextIsolation: true,
-            nodeIntegration: false
+            nodeIntegration: false,
+            sandbox: false
         }
     });
     await win.loadURL(`data:text/html;base64,${monacoHtml}`);

src/modules.d.ts

@@ -38,7 +38,8 @@ declare module "~fileContent/*" {
     export default content;
 }
 
-declare module "*.css" { }
+declare module "*.css";
+
 declare module "*.css?managed" {
     const name: string;
     export default name;

src/patcher.ts

@@ -17,7 +17,7 @@
 */
 
 import { onceDefined } from "@utils/onceDefined";
-import electron, { app, BrowserWindowConstructorOptions, Menu } from "electron";
+import electron, { app, BrowserWindowConstructorOptions, Menu, protocol, session } from "electron";
 import { dirname, join } from "path";
 
 import { initIpc } from "./ipcMain";
@@ -79,8 +79,12 @@ if (!process.argv.includes("--vanilla")) {
                 options.webPreferences.sandbox = false;
                 if (settings.frameless) {
                     options.frame = false;
+                } else if (process.platform === "win32" && settings.winNativeTitleBar) {
+                    delete options.frame;
                 }
-                if (settings.transparent) {
+
+                // This causes electron to freeze / white screen for some people
+                if ((settings as any).transparentUNSAFE_USE_AT_OWN_RISK) {
                     options.transparent = true;
                     options.backgroundColor = "#00000000";
                 }
@@ -113,10 +117,10 @@ if (!process.argv.includes("--vanilla")) {
 
     process.env.DATA_DIR = join(app.getPath("userData"), "..", "Vencord");
 
-    electron.app.whenReady().then(() => {
+    app.whenReady().then(() => {
         // Source Maps! Maybe there's a better way but since the renderer is executed
         // from a string I don't think any other form of sourcemaps would work
-        electron.protocol.registerFileProtocol("vencord", ({ url: unsafeUrl }, cb) => {
+        protocol.registerFileProtocol("vencord", ({ url: unsafeUrl }, cb) => {
             let url = unsafeUrl.slice("vencord://".length);
             if (url.endsWith("/")) url = url.slice(0, -1);
             switch (url) {
@@ -172,7 +176,7 @@ if (!process.argv.includes("--vanilla")) {
             }
         }
 
-        electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, resourceType }, cb) => {
+        session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, resourceType }, cb) => {
             if (responseHeaders) {
                 if (resourceType === "mainFrame")
                     patchCsp(responseHeaders, "content-security-policy");
@@ -184,6 +188,11 @@ if (!process.argv.includes("--vanilla")) {
             }
             cb({ cancel: false, responseHeaders });
         });
+
+        // assign a noop to onHeadersReceived to prevent other mods from adding their own incompatible ones.
+        // For instance, OpenAsar adds their own that doesn't fix content-type for stylesheets which makes it
+        // impossible to load css from github raw despite our fix above
+        session.defaultSession.webRequest.onHeadersReceived = () => { };
     });
 } else {
     console.log("[Vencord] Running in vanilla mode. Not loading Vencord");

src/plugins/alwaysTrust.ts

@@ -32,10 +32,10 @@ export default definePlugin({
             }
         },
         {
-            find: "\"github.com\":new RegExp(\"\\\\/releases\\\\S*\\\\/download\"),",
+            find: '"7z","ade","adp"',
             replacement: {
-                match: /const o=JSON.parse\('\[.+?'\)/,
-                replace: "const o=[]"
+                match: /JSON\.parse\('\[.+?'\)/,
+                replace: "[]"
             }
         }
     ]

src/plugins/anonymiseFileNames.ts

@@ -36,7 +36,7 @@ export default definePlugin({
             replacement: {
                 match: /uploadFiles:(.{1,2}),/,
                 replace:
-                    "uploadFiles:(...args)=>(args[0].uploads.forEach(f=>f.filename=Vencord.Plugins.plugins.AnonymiseFileNames.anonymise(f.filename)),$1(...args)),",
+                    "uploadFiles:(...args)=>(args[0].uploads.forEach(f=>f.filename=$self.anonymise(f.filename)),$1(...args)),",
             },
         },
     ],

src/plugins/apiBadges.tsx

@@ -24,9 +24,10 @@ import { Heart } from "@components/Heart";
 import { Devs } from "@utils/constants";
 import IpcEvents from "@utils/IpcEvents";
 import Logger from "@utils/Logger";
+import { Margins } from "@utils/margins";
 import { closeModal, Modals, openModal } from "@utils/modal";
 import definePlugin from "@utils/types";
-import { Forms, Margins } from "@webpack/common";
+import { Forms } from "@webpack/common";
 
 const CONTRIBUTOR_BADGE = "https://media.discordapp.net/stickers/1026517526106087454.webp";
 
@@ -150,7 +151,7 @@ export default definePlugin({
                                         <Forms.FormText>
                                             This Badge is a special perk for Vencord Donors
                                         </Forms.FormText>
-                                        <Forms.FormText className={Margins.marginTop20}>
+                                        <Forms.FormText className={Margins.top20}>
                                             Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
                                         </Forms.FormText>
                                     </div>

src/plugins/apiContextMenu.ts

@@ -0,0 +1,99 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Settings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { type PatchReplacement } from "@utils/types";
+import { addListener, removeListener } from "@webpack";
+
+/**
+ * The last var name corresponding to the Context Menu API (Discord, not ours) module
+ */
+let lastVarName = "";
+
+/**
+ * @param target The patch replacement object
+ * @param exportKey The key exporting the build Context Menu component function
+ */
+function makeReplacementProxy(target: PatchReplacement, exportKey: string) {
+    return new Proxy(target, {
+        get(_, p) {
+            if (p === "match") return RegExp(`${exportKey},{(?<=${lastVarName}\\.${exportKey},{)`, "g");
+            // @ts-expect-error
+            return Reflect.get(...arguments);
+        }
+    });
+}
+
+function listener(exports: any, id: number) {
+    if (!Settings.plugins.ContextMenuAPI.enabled) return removeListener(listener);
+
+    if (typeof exports !== "object" || exports === null) return;
+
+    for (const key in exports) if (key.length <= 3) {
+        const prop = exports[key];
+        if (typeof prop !== "function") continue;
+
+        const str = Function.prototype.toString.call(prop);
+        if (str.includes('path:["empty"]')) {
+            Vencord.Plugins.patches.push({
+                plugin: "ContextMenuAPI",
+                all: true,
+                noWarn: true,
+                find: "navId:",
+                replacement: [
+                    {
+                        // Set the lastVarName for our proxy to use
+                        match: RegExp(`${id}(?<=(\\i)=.+?)`),
+                        replace: (id, varName) => {
+                            lastVarName = varName;
+                            return id;
+                        }
+                    },
+                    /**
+                     * We are using a proxy here to utilize the whole code the patcher gives us, instead of matching the entire module (which is super slow)
+                     * Our proxy returns the corresponding match for that module utilizing lastVarName, which is set by the patch before
+                     */
+                    makeReplacementProxy({
+                        match: "", // Needed to canonicalizeDescriptor
+                        replace: "$&contextMenuApiArguments:arguments,",
+                    }, key)
+                ]
+            });
+
+            removeListener(listener);
+        }
+    }
+}
+
+addListener(listener);
+
+export default definePlugin({
+    name: "ContextMenuAPI",
+    description: "API for adding/removing items to/from context menus.",
+    authors: [Devs.Nuckyz],
+    patches: [
+        {
+            find: "♫ (つ｡◕‿‿◕｡)つ ♪",
+            replacement: {
+                match: /(?<=function \i\((\i)\){)(?=var \i,\i=\i\.navId)/,
+                replace: (_, props) => `Vencord.Api.ContextMenu._patchContextMenu(${props});`
+            }
+        }
+    ]
+});

src/plugins/apiMenuItemDeobfuscator.ts

@@ -43,7 +43,7 @@ export default definePlugin({
         {
             find: '"Menu API',
             replacement: {
-                match: /function.{0,80}type===(.{1,3})\..{1,3}\).{0,50}navigable:.+?Menu API/s,
+                match: /function.{0,80}type===(\i)\).{0,50}navigable:.+?Menu API/s,
                 replace: (m, mod) => {
                     let nicenNames = "";
                     const redefines = [] as string[];

src/plugins/apiMessageEvents.ts

@@ -22,22 +22,22 @@ import definePlugin from "@utils/types";
 export default definePlugin({
     name: "MessageEventsAPI",
     description: "Api required by anything using message events.",
-    authors: [Devs.Arjix],
+    authors: [Devs.Arjix, Devs.hunt],
     patches: [
         {
-            find: "sendMessage:function",
+            find: '"MessageActionCreators"',
             replacement: [{
-                match: /(?<=_sendMessage:function\([^)]+\)){/,
-                replace: "{if(Vencord.Api.MessageEvents._handlePreSend(...arguments)){return;};"
+                match: /_sendMessage:(function\([^)]+\)){/,
+                replace: "_sendMessage:async $1{if(await Vencord.Api.MessageEvents._handlePreSend(...arguments))return;"
             }, {
-                match: /(?<=\beditMessage:function\([^)]+\)){/,
-                replace: "{Vencord.Api.MessageEvents._handlePreEdit(...arguments);"
+                match: /\beditMessage:(function\([^)]+\)){/,
+                replace: "editMessage:async $1{await Vencord.Api.MessageEvents._handlePreEdit(...arguments);"
             }]
         },
         {
             find: '("interactionUsernameProfile',
             replacement: {
-                match: /var \w=(\w)\.id,\w=(\w)\.id;return .{1,2}\.useCallback\(\(?function\((.{1,2})\){/,
+                match: /var \i=(\i)\.id,\i=(\i)\.id;return \i\.useCallback\(\(?function\((\i)\){/,
                 replace: (m, message, channel, event) =>
                     // the message param is shadowed by the event param, so need to alias them
                     `var _msg=${message},_chan=${channel};${m}Vencord.Api.MessageEvents._handleClick(_msg, _chan, ${event});`

src/plugins/apiMessagePopover.ts

@@ -22,12 +22,17 @@ import definePlugin from "@utils/types";
 export default definePlugin({
     name: "MessagePopoverAPI",
     description: "API to add buttons to message popovers.",
-    authors: [Devs.KingFish],
+    authors: [Devs.KingFish, Devs.Ven, Devs.Nuckyz],
     patches: [{
         find: "Messages.MESSAGE_UTILITIES_A11Y_LABEL",
         replacement: {
-            match: /\?(?<makeButton>\i)\(.{1,35}\.Messages\.CONFIGURE.+?message:(?<message>\i).+?children:\[/,
-            replace: "$&...Vencord.Api.MessagePopover._buildPopoverElements($<message>,$<makeButton>),"
+            // foo && !bar ? createElement(reactionStuffs)... createElement(blah,...makeElement(reply-other))
+            match: /\i&&!\i\?\(0,\i\.jsxs?\)\(.{0,200}renderEmojiPicker:.{0,500}\?(\i)\(\{key:"reply-other"/,
+            replace: (m, makeElement) => {
+                const msg = m.match(/message:(.{1,3}),/)?.[1];
+                if (!msg) throw new Error("Could not find message variable");
+                return `...Vencord.Api.MessagePopover._buildPopoverElements(${msg},${makeElement}),${m}`;
+            }
         }
     }],
 });

src/plugins/apiNotices.ts

@@ -29,13 +29,12 @@ export default definePlugin({
             find: 'displayName="NoticeStore"',
             replacement: [
                 {
-                    match: /;.{1,2}=null;.{0,70}getPremiumSubscription/g,
-                    replace:
-                        ";if(Vencord.Api.Notices.currentNotice)return false$&"
+                    match: /(?=;\i=null;.{0,70}getPremiumSubscription)/g,
+                    replace: ";if(Vencord.Api.Notices.currentNotice)return false"
                 },
                 {
-                    match: /(?<=NOTICE_DISMISS:function.+?){(?=if\(null==(.+?)\))/,
-                    replace: '{if($1?.id=="VencordNotice")return ($1=null,Vencord.Api.Notices.nextNotice(),true);'
+                    match: /(?<=,NOTICE_DISMISS:function\(\i\){)(?=if\(null==(\i)\))/,
+                    replace: (_, notice) => `if(${notice}.id=="VencordNotice")return(${notice}=null,Vencord.Api.Notices.nextNotice(),true);`
                 }
             ]
         }

src/plugins/arRPC.web.tsx

@@ -48,7 +48,6 @@ export default definePlugin({
     name: "WebRichPresence (arRPC)",
     description: "Client plugin for arRPC to enable RPC on Discord Web (experimental)",
     authors: [Devs.Ducko],
-    target: "WEB",
 
     settingsAboutComponent: () => (
         <>
@@ -60,6 +59,9 @@ export default definePlugin({
     ),
 
     async start() {
+        // ArmCord comes with its own arRPC implementation, so this plugin just confuses users
+        if ("armcord" in window) return;
+
         if (ws) ws.close();
         ws = new WebSocket("ws://127.0.0.1:1337"); // try to open WebSocket
 

src/plugins/betterGifAltText.ts

@@ -31,7 +31,7 @@ export default definePlugin({
             replacement: {
                 match: /(return.{0,10}\.jsx.{0,50}isWindowFocused)/,
                 replace:
-                    "Vencord.Plugins.plugins.BetterGifAltText.altify(e);$1",
+                    "$self.altify(e);$1",
             },
         },
         {
@@ -39,7 +39,7 @@ export default definePlugin({
             replacement: {
                 match: /(?<==(.{1,3})\.alt.{0,20})\?.{0,5}\.Messages\.GIF/,
                 replace:
-                    "?($1.alt='GIF',Vencord.Plugins.plugins.BetterGifAltText.altify($1))",
+                    "?($1.alt='GIF',$self.altify($1))",
             },
         },
     ],

src/plugins/betterRoleDot.ts

@@ -33,15 +33,15 @@ export default definePlugin({
             find: "M0 4C0 1.79086 1.79086 0 4 0H16C18.2091 0 20 1.79086 20 4V16C20 18.2091 18.2091 20 16 20H4C1.79086 20 0 18.2091 0 16V4Z",
             replacement: {
                 match: /viewBox:"0 0 20 20"/,
-                replace: "$&,onClick:()=>Vencord.Plugins.plugins.BetterRoleDot.copyToClipBoard(e.color),style:{cursor:'pointer'}",
+                replace: "$&,onClick:()=>$self.copyToClipBoard(e.color),style:{cursor:'pointer'}",
             },
         },
         {
-            find: '"username"===',
+            find: '"dot"===',
             all: true,
             predicate: () => Settings.plugins.BetterRoleDot.bothStyles,
             replacement: {
-                match: /"(?:username|dot)"===\w(?!\.\w)/g,
+                match: /"(?:username|dot)"===\i(?!\.\i)/g,
                 replace: "true",
             },
         },

src/plugins/callTimer.tsx

@@ -75,7 +75,7 @@ export default definePlugin({
         find: ".renderConnectionStatus=",
         replacement: {
             match: /(?<=renderConnectionStatus=.+\.channel,children:)\w/,
-            replace: "[$&, Vencord.Plugins.plugins.CallTimer.renderTimer(this.props.channel.id)]"
+            replace: "[$&, $self.renderTimer(this.props.channel.id)]"
         }
     }],
     renderTimer(channelId: string) {

src/plugins/colorSighted.ts

@@ -0,0 +1,42 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "ColorSighted",
+    description: "Removes the colorblind-friendly icons from statuses, just like 2015-2017 Discord",
+    authors: [Devs.lewisakura],
+    patches: [
+        {
+            find: "Masks.STATUS_ONLINE",
+            replacement: {
+                match: /Masks\.STATUS_(?:IDLE|DND|STREAMING|OFFLINE)/g,
+                replace: "Masks.STATUS_ONLINE"
+            }
+        },
+        {
+            find: ".AVATAR_STATUS_MOBILE_16;",
+            replacement: {
+                match: /(\.fromIsMobile,.+?)\i.status/,
+                replace: (_, rest) => `${rest}"online"`
+            }
+        }
+    ]
+});

src/plugins/consoleShortcuts.ts

@@ -18,6 +18,9 @@
 
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
+import * as Webpack from "@webpack";
+import { extract, filters, findAll, search } from "@webpack";
+import { React } from "@webpack/common";
 
 const WEB_ONLY = (f: string) => () => {
     throw new Error(`'${f}' is Discord Desktop only.`);
@@ -29,19 +32,48 @@ export default definePlugin({
     authors: [Devs.Ven],
 
     getShortcuts() {
+        function newFindWrapper(filterFactory: (...props: any[]) => Webpack.FilterFn) {
+            const cache = new Map<string, unknown>();
+
+            return function (...filterProps: unknown[]) {
+                const cacheKey = String(filterProps);
+                if (cache.has(cacheKey)) return cache.get(cacheKey);
+
+                const matches = findAll(filterFactory(...filterProps));
+
+                const result = (() => {
+                    switch (matches.length) {
+                        case 0: return null;
+                        case 1: return matches[0];
+                        default:
+                            const uniqueMatches = [...new Set(matches)];
+                            if (uniqueMatches.length > 1)
+                                console.warn(`Warning: This filter matches ${matches.length} modules. Make it more specific!\n`, uniqueMatches);
+
+                            return matches[0];
+                    }
+                })();
+                if (result && cacheKey) cache.set(cacheKey, result);
+                return result;
+            };
+        }
+
         return {
-            toClip: IS_WEB ? WEB_ONLY("toClip") : window.DiscordNative.clipboard.copy,
-            fromClip: IS_WEB ? WEB_ONLY("fromClip") : window.DiscordNative.clipboard.read,
             wp: Vencord.Webpack,
-            wpc: Vencord.Webpack.wreq.c,
-            wreq: Vencord.Webpack.wreq,
-            wpsearch: Vencord.Webpack.search,
-            wpex: Vencord.Webpack.extract,
+            wpc: Webpack.wreq.c,
+            wreq: Webpack.wreq,
+            wpsearch: search,
+            wpex: extract,
             wpexs: (code: string) => Vencord.Webpack.extract(Vencord.Webpack.findModuleId(code)!),
-            findByProps: Vencord.Webpack.findByProps,
-            find: Vencord.Webpack.find,
-            Plugins: Vencord.Plugins,
-            React: Vencord.Webpack.Common.React,
+            find: newFindWrapper(f => f),
+            findAll,
+            findByProps: newFindWrapper(filters.byProps),
+            findAllByProps: (...props: string[]) => findAll(filters.byProps(...props)),
+            findByCode: newFindWrapper(filters.byCode),
+            findAllByCode: (code: string) => findAll(filters.byCode(code)),
+            PluginsApi: Vencord.Plugins,
+            plugins: Vencord.Plugins.plugins,
+            React,
             Settings: Vencord.Settings,
             Api: Vencord.Api,
             reload: () => location.reload(),

src/plugins/crashHandler.ts

@@ -0,0 +1,159 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { showNotification } from "@api/Notifications";
+import { definePluginSettings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import Logger from "@utils/Logger";
+import { closeAllModals } from "@utils/modal";
+import definePlugin, { OptionType } from "@utils/types";
+import { maybePromptToUpdate } from "@utils/updater";
+import { FluxDispatcher, NavigationRouter } from "@webpack/common";
+import type { ReactElement } from "react";
+
+const CrashHandlerLogger = new Logger("CrashHandler");
+
+const settings = definePluginSettings({
+    attemptToPreventCrashes: {
+        type: OptionType.BOOLEAN,
+        description: "Whether to attempt to prevent Discord crashes.",
+        default: true
+    },
+    attemptToNavigateToHome: {
+        type: OptionType.BOOLEAN,
+        description: "Whether to attempt to navigate to the home when preventing Discord crashes.",
+        default: false
+    }
+});
+
+let crashCount: number = 0;
+let lastCrashTimestamp: number = 0;
+
+export default definePlugin({
+    name: "CrashHandler",
+    description: "Utility plugin for handling and possibly recovering from Crashes without a restart",
+    authors: [Devs.Nuckyz],
+    enabledByDefault: true,
+
+    popAllModals: undefined as (() => void) | undefined,
+
+    settings,
+
+    patches: [
+        {
+            find: ".Messages.ERRORS_UNEXPECTED_CRASH",
+            replacement: {
+                match: /(?=this\.setState\()/,
+                replace: "$self.handleCrash(this)||"
+            }
+        },
+        {
+            find: 'dispatch({type:"MODAL_POP_ALL"})',
+            replacement: {
+                match: /"MODAL_POP_ALL".+?};(?<=(\i)=function.+?)/,
+                replace: (m, popAll) => `${m}$self.popAllModals=${popAll};`
+            }
+        }
+    ],
+
+    handleCrash(_this: ReactElement & { forceUpdate: () => void; }) {
+        if (++crashCount > 5) {
+            try {
+                showNotification({
+                    color: "#eed202",
+                    title: "Discord has crashed!",
+                    body: "Awn :( Discord has crashed more than five times, not attempting to recover.",
+                    noPersist: true,
+                });
+            } catch { }
+
+            lastCrashTimestamp = Date.now();
+            return false;
+        }
+
+        setTimeout(() => crashCount--, 60_000);
+
+        try {
+            if (crashCount === 1) maybePromptToUpdate("Uh oh, Discord has just crashed... but good news, there is a Vencord update available that might fix this issue! Would you like to update now?", true);
+
+            if (settings.store.attemptToPreventCrashes) {
+                this.handlePreventCrash(_this);
+                return true;
+            }
+
+            return false;
+        } catch (err) {
+            CrashHandlerLogger.error("Failed to handle crash", err);
+            return false;
+        } finally {
+            lastCrashTimestamp = Date.now();
+        }
+    },
+
+    handlePreventCrash(_this: ReactElement & { forceUpdate: () => void; }) {
+        if (Date.now() - lastCrashTimestamp >= 1_000) {
+            try {
+                showNotification({
+                    color: "#eed202",
+                    title: "Discord has crashed!",
+                    body: "Attempting to recover...",
+                    noPersist: true,
+                });
+            } catch { }
+        }
+
+        try {
+            FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" });
+        } catch (err) {
+            CrashHandlerLogger.debug("Failed to close open context menu.", err);
+        }
+        try {
+            this.popAllModals?.();
+        } catch (err) {
+            CrashHandlerLogger.debug("Failed to close old modals.", err);
+        }
+        try {
+            closeAllModals();
+        } catch (err) {
+            CrashHandlerLogger.debug("Failed to close all open modals.", err);
+        }
+        try {
+            FluxDispatcher.dispatch({ type: "USER_PROFILE_MODAL_CLOSE" });
+        } catch (err) {
+            CrashHandlerLogger.debug("Failed to close user popout.", err);
+        }
+        try {
+            FluxDispatcher.dispatch({ type: "LAYER_POP_ALL" });
+        } catch (err) {
+            CrashHandlerLogger.debug("Failed to pop all layers.", err);
+        }
+        if (settings.store.attemptToNavigateToHome) {
+            try {
+                NavigationRouter.transitionTo("/channels/@me");
+            } catch (err) {
+                CrashHandlerLogger.debug("Failed to navigate to home", err);
+            }
+        }
+
+        try {
+            _this.forceUpdate();
+        } catch (err) {
+            CrashHandlerLogger.debug("Failed to update crash handler component.", err);
+        }
+    }
+});

src/plugins/customRPC.tsx

@@ -19,6 +19,7 @@
 import { definePluginSettings } from "@api/settings";
 import { Link } from "@components/Link";
 import { Devs } from "@utils/constants";
+import { isTruthy } from "@utils/guards";
 import { useAwaiter } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
 import { filters, findByCodeLazy, findByPropsLazy, mapMangledModuleLazy } from "@webpack";
@@ -56,11 +57,11 @@ interface ActivityAssets {
 }
 
 interface Activity {
-    state: string;
+    state?: string;
     details?: string;
     timestamps?: {
-        start?: Number;
-        end?: Number;
+        start?: number;
+        end?: number;
     };
     assets?: ActivityAssets;
     buttons?: Array<string>;
@@ -70,7 +71,7 @@ interface Activity {
         button_urls?: Array<string>;
     };
     type: ActivityType;
-    flags: Number;
+    flags: number;
 }
 
 enum ActivityType {
@@ -93,13 +94,13 @@ const numOpt = (description: string) => ({
     onChange: setRpc
 }) as const;
 
-const choice = (label: string, value: any, _default?: Boolean) => ({
+const choice = (label: string, value: any, _default?: boolean) => ({
     label,
     value,
     default: _default
 }) as const;
 
-const choiceOpt = (description: string, options) => ({
+const choiceOpt = <T,>(description: string, options: T) => ({
     type: OptionType.SELECT,
     description,
     onChange: setRpc,
@@ -173,13 +174,13 @@ async function createActivity(): Promise<Activity | undefined> {
         activity.buttons = [
             buttonOneText,
             buttonTwoText
-        ].filter(Boolean);
+        ].filter(isTruthy);
 
         activity.metadata = {
             button_urls: [
                 buttonOneURL,
                 buttonTwoURL
-            ].filter(Boolean)
+            ].filter(isTruthy)
         };
     }
 
@@ -206,17 +207,16 @@ async function createActivity(): Promise<Activity | undefined> {
             delete activity[k];
     }
 
-    // WHAT DO YOU WANT FROM ME
-    // eslint-disable-next-line consistent-return
     return activity;
 }
 
-async function setRpc(disable?: Boolean) {
+async function setRpc(disable?: boolean) {
     const activity: Activity | undefined = await createActivity();
 
     FluxDispatcher.dispatch({
         type: "LOCAL_ACTIVITY_UPDATE",
-        activity: !disable ? activity : {}
+        activity: !disable ? activity : null,
+        socketId: "CustomRPC",
     });
 }
 

src/plugins/devCompanion.dev.tsx

@@ -0,0 +1,268 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { showNotification } from "@api/Notifications";
+import { definePluginSettings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import Logger from "@utils/Logger";
+import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
+import definePlugin, { OptionType } from "@utils/types";
+import { filters, findAll, search } from "@webpack";
+import { Menu } from "@webpack/common";
+
+const PORT = 8485;
+const NAV_ID = "dev-companion-reconnect";
+
+const logger = new Logger("DevCompanion");
+
+let socket: WebSocket | undefined;
+
+type Node = StringNode | RegexNode | FunctionNode;
+
+interface StringNode {
+    type: "string";
+    value: string;
+}
+
+interface RegexNode {
+    type: "regex";
+    value: {
+        pattern: string;
+        flags: string;
+    };
+}
+
+interface FunctionNode {
+    type: "function";
+    value: string;
+}
+
+interface PatchData {
+    find: string;
+    replacement: {
+        match: StringNode | RegexNode;
+        replace: StringNode | FunctionNode;
+    }[];
+}
+
+interface FindData {
+    type: string;
+    args: Array<StringNode | FunctionNode>;
+}
+
+const settings = definePluginSettings({
+    notifyOnAutoConnect: {
+        description: "Whether to notify when Dev Companion has automatically connected.",
+        type: OptionType.BOOLEAN,
+        default: true
+    }
+});
+
+function parseNode(node: Node) {
+    switch (node.type) {
+        case "string":
+            return node.value;
+        case "regex":
+            return new RegExp(node.value.pattern, node.value.flags);
+        case "function":
+            // We LOVE remote code execution
+            // Safety: This comes from localhost only, which actually means we have less permissions than the source,
+            // since we're running in the browser sandbox, whereas the sender has host access
+            return (0, eval)(node.value);
+        default:
+            throw new Error("Unknown Node Type " + (node as any).type);
+    }
+}
+
+function initWs(isManual = false) {
+    let wasConnected = isManual;
+    let hasErrored = false;
+    const ws = socket = new WebSocket(`ws://localhost:${PORT}`);
+
+    ws.addEventListener("open", () => {
+        wasConnected = true;
+
+        logger.info("Connected to WebSocket");
+
+        (settings.store.notifyOnAutoConnect || isManual) && showNotification({
+            title: "Dev Companion Connected",
+            body: "Connected to WebSocket"
+        });
+    });
+
+    ws.addEventListener("error", e => {
+        if (!wasConnected) return;
+
+        hasErrored = true;
+
+        logger.error("Dev Companion Error:", e);
+
+        showNotification({
+            title: "Dev Companion Error",
+            body: (e as ErrorEvent).message || "No Error Message",
+            color: "var(--status-danger, red)",
+            noPersist: true,
+        });
+    });
+
+    ws.addEventListener("close", e => {
+        if (!wasConnected || hasErrored) return;
+
+        logger.info("Dev Companion Disconnected:", e.code, e.reason);
+
+        showNotification({
+            title: "Dev Companion Disconnected",
+            body: e.reason || "No Reason provided",
+            color: "var(--status-danger, red)",
+            noPersist: true,
+        });
+    });
+
+    ws.addEventListener("message", e => {
+        try {
+            var { nonce, type, data } = JSON.parse(e.data);
+        } catch (err) {
+            logger.error("Invalid JSON:", err, "\n" + e.data);
+            return;
+        }
+
+        function reply(error?: string) {
+            const data = { nonce, ok: !error } as Record<string, unknown>;
+            if (error) data.error = error;
+
+            ws.send(JSON.stringify(data));
+        }
+
+        logger.info("Received Message:", type, "\n", data);
+
+        switch (type) {
+            case "testPatch": {
+                const { find, replacement } = data as PatchData;
+
+                const candidates = search(find);
+                const keys = Object.keys(candidates);
+                if (keys.length !== 1)
+                    return reply("Expected exactly one 'find' matches, found " + keys.length);
+
+                const mod = candidates[keys[0]];
+                let src = String(mod.original ?? mod);
+
+                let i = 0;
+
+                for (const { match, replace } of replacement) {
+                    i++;
+
+                    try {
+                        const matcher = canonicalizeMatch(parseNode(match));
+                        const replacement = canonicalizeReplace(parseNode(replace), "PlaceHolderPluginName");
+
+                        const newSource = src.replace(matcher, replacement as string);
+
+                        if (src === newSource) throw "Had no effect";
+                        Function(newSource);
+
+                        src = newSource;
+                    } catch (err) {
+                        return reply(`Replacement ${i} failed: ${err}`);
+                    }
+                }
+
+                reply();
+                break;
+            }
+            case "testFind": {
+                const { type, args } = data as FindData;
+                try {
+                    var parsedArgs = args.map(parseNode);
+                } catch (err) {
+                    return reply("Failed to parse args: " + err);
+                }
+
+                try {
+                    let results: any[];
+                    switch (type.replace("find", "").replace("Lazy", "")) {
+                        case "":
+                            results = findAll(parsedArgs[0]);
+                            break;
+                        case "ByProps":
+                            results = findAll(filters.byProps(...parsedArgs));
+                            break;
+                        case "Store":
+                            results = findAll(filters.byStoreName(parsedArgs[0]));
+                            break;
+                        case "ByCode":
+                            results = findAll(filters.byCode(...parsedArgs));
+                            break;
+                        case "ModuleId":
+                            results = Object.keys(search(parsedArgs[0]));
+                            break;
+                        default:
+                            return reply("Unknown Find Type " + type);
+                    }
+
+                    const uniqueResultsCount = new Set(results).size;
+                    if (uniqueResultsCount === 0) throw "No results";
+                    if (uniqueResultsCount > 1) throw "Found more than one result! Make this filter more specific";
+                } catch (err) {
+                    return reply("Failed to find: " + err);
+                }
+
+                reply();
+                break;
+            }
+            default:
+                reply("Unknown Type " + type);
+                break;
+        }
+    });
+}
+
+const contextMenuPatch: NavContextMenuPatchCallback = kids => {
+    if (kids.some(k => k?.props?.id === NAV_ID)) return;
+
+    kids.unshift(
+        <Menu.MenuItem
+            id={NAV_ID}
+            label="Reconnect Dev Companion"
+            action={() => {
+                socket?.close(1000, "Reconnecting");
+                initWs(true);
+            }}
+        />
+    );
+};
+
+export default definePlugin({
+    name: "DevCompanion",
+    description: "Dev Companion Plugin",
+    authors: [Devs.Ven],
+    dependencies: ["ContextMenuAPI"],
+    settings,
+
+    start() {
+        initWs();
+        addContextMenuPatch("user-settings-cog", contextMenuPatch);
+    },
+
+    stop() {
+        socket?.close(1000, "Plugin Stopped");
+        socket = void 0;
+        removeContextMenuPatch("user-settings-cog", contextMenuPatch);
+    }
+});

src/plugins/disableDMCallIdle.ts

@@ -27,9 +27,9 @@ export default definePlugin({
         {
             find: ".Messages.BOT_CALL_IDLE_DISCONNECT",
             replacement: {
-                match: /function (?<functionName>.{1,3})\(\){.{1,100}\.Messages\.BOT_CALL_IDLE_DISCONNECT.+?}}/,
-                replace: "function $<functionName>(){}",
-            },
-        },
-    ],
+                match: /(?<=function \i\(\){)(?=.{1,100}\.Messages\.BOT_CALL_IDLE_DISCONNECT)/,
+                replace: "return;"
+            }
+        }
+    ]
 });

src/plugins/emoteCloner.tsx

@@ -16,15 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { migratePluginSettings, Settings } from "@api/settings";
+import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Devs } from "@utils/constants";
 import Logger from "@utils/Logger";
-import { makeLazy } from "@utils/misc";
+import { Margins } from "@utils/margins";
 import { ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 import definePlugin from "@utils/types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { Forms, GuildStore, Margins, Menu, PermissionStore, React, Toasts, Tooltip, UserStore } from "@webpack/common";
+import { Forms, GuildStore, Menu, PermissionStore, React, Toasts, Tooltip, UserStore } from "@webpack/common";
 
 const MANAGE_EMOJIS_AND_STICKERS = 1n << 30n;
 
@@ -96,7 +96,7 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
 
     return (
         <>
-            <Forms.FormTitle className={Margins.marginTop20}>Custom Name</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top20}>Custom Name</Forms.FormTitle>
             <CheckedTextInput
                 value={name}
                 onChange={setName}
@@ -175,50 +175,12 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
     );
 }
 
-migratePluginSettings("EmoteCloner", "EmoteYoink");
-export default definePlugin({
-    name: "EmoteCloner",
-    description: "Adds a Clone context menu item to emotes to clone them your own server",
-    authors: [Devs.Ven],
-    dependencies: ["MenuItemDeobfuscatorAPI"],
-
-    patches: [{
-        // Literally copy pasted from ReverseImageSearch lol
-        find: "open-native-link",
-        replacement: {
-            match: /id:"open-native-link".{0,200}\(\{href:(.{0,3}),.{0,200}\},"open-native-link"\)/,
-            replace: "$&,Vencord.Plugins.plugins.EmoteCloner.makeMenu(arguments[2])"
-        },
-
-    },
-    // Also copy pasted from Reverse Image Search
-    {
-        // pass the target to the open link menu so we can grab its data
-        find: "REMOVE_ALL_REACTIONS_CONFIRM_BODY,",
-        predicate: makeLazy(() => !Settings.plugins.ReverseImageSearch.enabled),
-        noWarn: true,
-        replacement: {
-            match: /(?<props>.).onHeightUpdate.{0,200}(.)=(.)=.\.url;.+?\(null!=\3\?\3:\2[^)]+/,
-            replace: "$&,$<props>.target"
-        }
-    }],
-
-    makeMenu(htmlElement: HTMLImageElement) {
-        if (htmlElement?.dataset.type !== "emoji")
-            return null;
-
-        const { id } = htmlElement.dataset;
-        const name = htmlElement.alt.match(/:(.*)(?:~\d+)?:/)?.[1];
-
-        if (!name || !id)
-            return null;
-
-        const isAnimated = new URL(htmlElement.src).pathname.endsWith(".gif");
-
-        return <Menu.MenuItem
+function buildMenuItem(id: string, name: string, isAnimated: boolean) {
+    return (
+        <Menu.MenuItem
             id="emote-cloner"
             key="emote-cloner"
-            label="Clone"
+            label="Clone Emote"
             action={() =>
                 openModal(modalProps => (
                     <ModalRoot {...modalProps}>
@@ -240,7 +202,51 @@ export default definePlugin({
                     </ModalRoot>
                 ))
             }
-        >
-        </Menu.MenuItem>;
+        />
+    );
+}
+
+function isGifUrl(url: string) {
+    return new URL(url).pathname.endsWith(".gif");
+}
+
+const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+    const { favoriteableId, itemHref, itemSrc, favoriteableType } = props ?? {};
+
+    if (!favoriteableId || favoriteableType !== "emoji") return;
+
+    const match = props.message.content.match(RegExp(`<a?:(\\w+)(?:~\\d+)?:${favoriteableId}>|https://cdn\\.discordapp\\.com/emojis/${favoriteableId}\\.`));
+    if (!match) return;
+    const name = match[1] ?? "FakeNitroEmoji";
+
+    const group = findGroupChildrenByChildId("copy-link", children);
+    if (group && !group.some(child => child?.props?.id === "emote-cloner"))
+        group.push(buildMenuItem(favoriteableId, name, isGifUrl(itemHref ?? itemSrc)));
+};
+
+const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => {
+    const { id, name, type } = props?.target?.dataset ?? {};
+    if (!id || !name || type !== "emoji") return;
+
+    const firstChild = props.target.firstChild as HTMLImageElement;
+
+    if (!children.some(c => c?.props?.id === "emote-cloner"))
+        children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
+};
+
+export default definePlugin({
+    name: "EmoteCloner",
+    description: "Adds a Clone context menu item to emotes to clone them your own server",
+    authors: [Devs.Ven, Devs.Nuckyz],
+    dependencies: ["MenuItemDeobfuscatorAPI", "ContextMenuAPI"],
+
+    start() {
+        addContextMenuPatch("message", messageContextMenuPatch);
+        addContextMenuPatch("expression-picker", expressionPickerPatch);
     },
+
+    stop() {
+        removeContextMenuPatch("message", messageContextMenuPatch);
+        removeContextMenuPatch("expression-picker", expressionPickerPatch);
+    }
 });

src/plugins/experiments.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
+import { definePluginSettings } from "@api/settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
@@ -24,49 +24,71 @@ import { Forms, React } from "@webpack/common";
 
 const KbdStyles = findByPropsLazy("key", "removeBuildOverride");
 
+const settings = definePluginSettings({
+    enableIsStaff: {
+        description: "Enable isStaff",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: true
+    },
+    forceStagingBanner: {
+        description: "Whether to force Staging banner under user area.",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: true
+    }
+});
+
 export default definePlugin({
     name: "Experiments",
+    description: "Enable Access to Experiments in Discord!",
     authors: [
         Devs.Megu,
         Devs.Ven,
         Devs.Nickyux,
-        Devs.BanTheNons
+        Devs.BanTheNons,
+        Devs.Nuckyz
     ],
-    description: "Enable Access to Experiments in Discord!",
-    patches: [{
+    settings,
+
+    patches: [
+        {
             find: "Object.defineProperties(this,{isDeveloper",
             replacement: {
-            match: /(?<={isDeveloper:\{[^}]+,get:function\(\)\{return )\w/,
+                match: /(?<={isDeveloper:\{[^}]+?,get:function\(\)\{return )\w/,
                 replace: "true"
-        },
-    }, {
-        find: 'type:"user",revision',
-        replacement: {
-            match: /!(\w{1,3})&&"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.isStaff\(\)\s*\|\|/,
-                replace: "hasFreePremium=function(){return ",
-            },
-        ],
-    }],
-    options: {
-        enableIsStaff: {
-            description: "Enable isStaff (requires restart)",
-            type: OptionType.BOOLEAN,
-            default: false,
-            restartNeeded: true,
             }
         },
+        {
+            find: 'type:"user",revision',
+            replacement: {
+                match: /!(\i)&&"CONNECTION_OPEN".+?;/g,
+                replace: "$1=!0;"
+            }
+        },
+        {
+            find: ".isStaff=function(){",
+            predicate: () => settings.store.enableIsStaff,
+            replacement: [
+                {
+                    match: /return\s*?(\i)\.hasFlag\((\i\.\i)\.STAFF\)}/,
+                    replace: (_, user, flags) => `return Vencord.Webpack.Common.UserStore.getCurrentUser().id===${user}.id||${user}.hasFlag(${flags}.STAFF)}`
+                },
+                {
+                    match: /hasFreePremium=function\(\){return this.isStaff\(\)\s*?\|\|/,
+                    replace: "hasFreePremium=function(){return ",
+                }
+            ]
+        },
+        {
+            find: ".Messages.DEV_NOTICE_STAGING",
+            predicate: () => settings.store.forceStagingBanner,
+            replacement: {
+                match: /"staging"===window\.GLOBAL_ENV\.RELEASE_CHANNEL/,
+                replace: "true"
+            }
+        }
+    ],
 
     settingsAboutComponent: () => {
         const isMacOS = navigator.platform.includes("Mac");

src/plugins/f8break.ts

@@ -0,0 +1,42 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "F8Break",
+    description: "Pause the client when you press F8 with DevTools (+ breakpoints) open.",
+    authors: [Devs.lewisakura],
+
+    start() {
+        window.addEventListener("keydown", this.event);
+    },
+
+    stop() {
+        window.removeEventListener("keydown", this.event);
+    },
+
+    event(e: KeyboardEvent) {
+        if (e.code === "F8") {
+            // Hi! You've just paused the client. Pressing F8 in DevTools or in the main window will unpause it again.
+            // It's up to you on what to do, friend. Happy travels!
+            debugger;
+        }
+    }
+});

src/plugins/fakeNitro.ts

@@ -1,309 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { addPreEditListener, addPreSendListener, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
-import { migratePluginSettings, Settings } from "@api/settings";
-import { Devs } from "@utils/constants";
-import { ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
-import definePlugin, { OptionType } from "@utils/types";
-import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { ChannelStore, UserStore } from "@webpack/common";
-
-const DRAFT_TYPE = 0;
-const promptToUpload = findByCodeLazy("UPLOAD_FILE_LIMIT_ERROR");
-
-interface BaseSticker {
-    available: boolean;
-    description: string;
-    format_type: number;
-    id: string;
-    name: string;
-    tags: string;
-    type: number;
-}
-interface GuildSticker extends BaseSticker {
-    guild_id: string;
-}
-interface DiscordSticker extends BaseSticker {
-    pack_id: string;
-}
-type Sticker = GuildSticker | DiscordSticker;
-
-interface StickerPack {
-    id: string;
-    name: string;
-    sku_id: string;
-    description: string;
-    cover_sticker_id: string;
-    banner_asset_id: string;
-    stickers: Sticker[];
-}
-
-migratePluginSettings("FakeNitro", "NitroBypass");
-
-export default definePlugin({
-    name: "FakeNitro",
-    authors: [Devs.Arjix, Devs.D3SOX, Devs.Ven, Devs.obscurity],
-    description: "Allows you to stream in nitro quality and send fake emojis/stickers.",
-    dependencies: ["MessageEventsAPI"],
-
-    patches: [
-        {
-            find: "canUseAnimatedEmojis:function",
-            predicate: () => Settings.plugins.FakeNitro.enableEmojiBypass === true,
-            replacement: [
-                "canUseAnimatedEmojis",
-                "canUseEmojisEverywhere"
-            ].map(func => {
-                return {
-                    match: new RegExp(`${func}:function\\(.+?\\{`),
-                    replace: "$&return true;"
-                };
-            })
-        },
-        {
-            find: "canUseAnimatedEmojis:function",
-            predicate: () => Settings.plugins.FakeNitro.enableStickerBypass === true,
-            replacement: {
-                match: /canUseStickersEverywhere:function\(.+?\{/,
-                replace: "$&return true;"
-            },
-        },
-        {
-            find: "\"SENDABLE\"",
-            predicate: () => Settings.plugins.FakeNitro.enableStickerBypass === true,
-            replacement: {
-                match: /(\w+)\.available\?/,
-                replace: "true?"
-            }
-        },
-        {
-            find: "canUseAnimatedEmojis:function",
-            predicate: () => Settings.plugins.FakeNitro.enableStreamQualityBypass === true,
-            replacement: [
-                "canUseHighVideoUploadQuality",
-                "canStreamHighQuality",
-                "canStreamMidQuality"
-            ].map(func => {
-                return {
-                    match: new RegExp(`${func}:function\\(.+?\\{`),
-                    replace: "$&return true;"
-                };
-            })
-        },
-        {
-            find: "STREAM_FPS_OPTION.format",
-            predicate: () => Settings.plugins.FakeNitro.enableStreamQualityBypass === true,
-            replacement: {
-                match: /(userPremiumType|guildPremiumTier):.{0,10}TIER_\d,?/g,
-                replace: ""
-            }
-        },
-    ],
-
-    options: {
-        enableEmojiBypass: {
-            description: "Allow sending fake emojis",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        },
-        emojiSize: {
-            description: "Size of the emojis when sending",
-            type: OptionType.SLIDER,
-            default: 48,
-            markers: [32, 48, 64, 128, 160, 256, 512],
-        },
-        enableStickerBypass: {
-            description: "Allow sending fake stickers",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        },
-        stickerSize: {
-            description: "Size of the stickers when sending",
-            type: OptionType.SLIDER,
-            default: 160,
-            markers: [32, 64, 128, 160, 256, 512],
-        },
-        enableStreamQualityBypass: {
-            description: "Allow streaming in nitro quality",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        }
-    },
-
-    get guildId() {
-        return window.location.href.split("channels/")[1].split("/")[0];
-    },
-
-    get canUseEmotes() {
-        return (UserStore.getCurrentUser().premiumType ?? 0) > 0;
-    },
-
-    get canUseStickers() {
-        return (UserStore.getCurrentUser().premiumType ?? 0) > 1;
-    },
-
-    getStickerLink(stickerId: string) {
-        return `https://media.discordapp.net/stickers/${stickerId}.png?size=${Settings.plugins.FakeNitro.stickerSize}`;
-    },
-
-    async sendAnimatedSticker(stickerLink: string, stickerId: string, channelId: string) {
-        const [{ parseURL }, {
-            GIFEncoder,
-            quantize,
-            applyPalette
-        }] = await Promise.all([importApngJs(), getGifEncoder()]);
-
-        const { frames, width, height } = await parseURL(stickerLink);
-
-        const gif = new GIFEncoder();
-        const resolution = Settings.plugins.FakeNitro.stickerSize;
-
-        const canvas = document.createElement("canvas");
-        canvas.width = resolution;
-        canvas.height = resolution;
-
-        const ctx = canvas.getContext("2d", {
-            willReadFrequently: true
-        })!;
-
-        const scale = resolution / Math.max(width, height);
-        ctx.scale(scale, scale);
-
-        let lastImg: HTMLImageElement | null = null;
-        for (const { left, top, width, height, disposeOp, img, delay } of frames) {
-            ctx.drawImage(img, left, top, width, height);
-
-            const { data } = ctx.getImageData(0, 0, resolution, resolution);
-
-            const palette = quantize(data, 256);
-            const index = applyPalette(data, palette);
-
-            gif.writeFrame(index, resolution, resolution, {
-                transparent: true,
-                palette,
-                delay,
-            });
-
-            if (disposeOp === ApngDisposeOp.BACKGROUND) {
-                ctx.clearRect(left, top, width, height);
-            } else if (disposeOp === ApngDisposeOp.PREVIOUS && lastImg) {
-                ctx.drawImage(lastImg, left, top, width, height);
-            }
-
-            lastImg = img;
-        }
-
-        gif.finish();
-        const file = new File([gif.bytesView()], `${stickerId}.gif`, { type: "image/gif" });
-        promptToUpload([file], ChannelStore.getChannel(channelId), DRAFT_TYPE);
-    },
-
-    start() {
-        const settings = Settings.plugins.FakeNitro;
-        if (!settings.enableEmojiBypass && !settings.enableStickerBypass) {
-            return;
-        }
-
-        const EmojiStore = findByPropsLazy("getCustomEmojiById");
-        const StickerStore = findByPropsLazy("getAllGuildStickers") as {
-            getPremiumPacks(): StickerPack[];
-            getAllGuildStickers(): Map<string, Sticker[]>;
-            getStickerById(id: string): Sticker | undefined;
-        };
-
-        function getWordBoundary(origStr: string, offset: number) {
-            return (!origStr[offset] || /\s/.test(origStr[offset])) ? "" : " ";
-        }
-
-        this.preSend = addPreSendListener((channelId, messageObj, extra) => {
-            const { guildId } = this;
-
-            stickerBypass: {
-                if (!settings.enableStickerBypass)
-                    break stickerBypass;
-
-                const sticker = StickerStore.getStickerById(extra?.stickerIds?.[0]!);
-                if (!sticker)
-                    break stickerBypass;
-
-                if (sticker.available !== false && (this.canUseStickers || (sticker as GuildSticker)?.guild_id === guildId))
-                    break stickerBypass;
-
-                let link = this.getStickerLink(sticker.id);
-                if (sticker.format_type === 2) {
-                    this.sendAnimatedSticker(this.getStickerLink(sticker.id), sticker.id, channelId);
-                    return { cancel: true };
-                } else {
-                    if ("pack_id" in sticker) {
-                        const packId = sticker.pack_id === "847199849233514549"
-                            // Discord moved these stickers into a different pack at some point, but
-                            // Distok still uses the old id
-                            ? "749043879713701898"
-                            : sticker.pack_id;
-
-                        link = `https://distok.top/stickers/${packId}/${sticker.id}.gif`;
-                    }
-
-                    delete extra.stickerIds;
-                    messageObj.content += " " + link;
-                }
-            }
-
-            if (!this.canUseEmotes && settings.enableEmojiBypass) {
-                for (const emoji of messageObj.validNonShortcutEmojis) {
-                    if (!emoji.require_colons) continue;
-                    if (emoji.guildId === guildId && !emoji.animated) continue;
-
-                    const emojiString = `<${emoji.animated ? "a" : ""}:${emoji.originalName || emoji.name}:${emoji.id}>`;
-                    const url = emoji.url.replace(/\?size=\d+/, `?size=${Settings.plugins.FakeNitro.emojiSize}`);
-                    messageObj.content = messageObj.content.replace(emojiString, (match, offset, origStr) => {
-                        return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
-                    });
-                }
-            }
-
-            return { cancel: false };
-        });
-
-        if (!this.canUseEmotes && settings.enableEmojiBypass) {
-            this.preEdit = addPreEditListener((_, __, messageObj) => {
-                const { guildId } = this;
-
-                for (const [emojiStr, _, emojiId] of messageObj.content.matchAll(/(?<!\\)<a?:(\w+):(\d+)>/ig)) {
-                    const emoji = EmojiStore.getCustomEmojiById(emojiId);
-                    if (emoji == null || (emoji.guildId === guildId && !emoji.animated)) continue;
-                    if (!emoji.require_colons) continue;
-
-                    const url = emoji.url.replace(/\?size=\d+/, `?size=${Settings.plugins.FakeNitro.emojiSize}`);
-                    messageObj.content = messageObj.content.replace(emojiStr, (match, offset, origStr) => {
-                        return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
-                    });
-                }
-            });
-        }
-    },
-
-    stop() {
-        removePreSendListener(this.preSend);
-        removePreEditListener(this.preEdit);
-    }
-});

src/plugins/fakeNitro.tsx

@@ -0,0 +1,528 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { addPreEditListener, addPreSendListener, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
+import { migratePluginSettings, Settings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import { ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
+import { getCurrentGuild } from "@utils/discord";
+import { proxyLazy } from "@utils/proxyLazy";
+import definePlugin, { OptionType } from "@utils/types";
+import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
+import { ChannelStore, FluxDispatcher, PermissionStore, UserStore } from "@webpack/common";
+
+const DRAFT_TYPE = 0;
+const promptToUpload = findByCodeLazy("UPLOAD_FILE_LIMIT_ERROR");
+const UserSettingsProtoStore = findStoreLazy("UserSettingsProtoStore");
+const PreloadedUserSettingsProtoHandler = findLazy(m => m.ProtoClass?.typeName === "discord_protos.discord_users.v1.PreloadedUserSettings");
+const ReaderFactory = findByPropsLazy("readerFactory");
+
+function searchProtoClass(localName: string, parentProtoClass: any) {
+    if (!parentProtoClass) return;
+
+    const field = parentProtoClass.fields.find(field => field.localName === localName);
+    if (!field) return;
+
+    const getter: any = Object.values(field).find(value => typeof value === "function");
+    return getter?.();
+}
+
+const AppearanceSettingsProto = proxyLazy(() => searchProtoClass("appearance", PreloadedUserSettingsProtoHandler.ProtoClass));
+const ClientThemeSettingsProto = proxyLazy(() => searchProtoClass("clientThemeSettings", AppearanceSettingsProto));
+
+const USE_EXTERNAL_EMOJIS = 1n << 18n;
+const USE_EXTERNAL_STICKERS = 1n << 37n;
+
+enum EmojiIntentions {
+    REACTION = 0,
+    STATUS = 1,
+    COMMUNITY_CONTENT = 2,
+    CHAT = 3,
+    GUILD_STICKER_RELATED_EMOJI = 4,
+    GUILD_ROLE_BENEFIT_EMOJI = 5,
+    COMMUNITY_CONTENT_ONLY = 6,
+    SOUNDBOARD = 7
+}
+
+interface BaseSticker {
+    available: boolean;
+    description: string;
+    format_type: number;
+    id: string;
+    name: string;
+    tags: string;
+    type: number;
+}
+interface GuildSticker extends BaseSticker {
+    guild_id: string;
+}
+interface DiscordSticker extends BaseSticker {
+    pack_id: string;
+}
+type Sticker = GuildSticker | DiscordSticker;
+
+interface StickerPack {
+    id: string;
+    name: string;
+    sku_id: string;
+    description: string;
+    cover_sticker_id: string;
+    banner_asset_id: string;
+    stickers: Sticker[];
+}
+
+migratePluginSettings("FakeNitro", "NitroBypass");
+
+export default definePlugin({
+    name: "FakeNitro",
+    authors: [Devs.Arjix, Devs.D3SOX, Devs.Ven, Devs.obscurity, Devs.captain, Devs.Nuckyz],
+    description: "Allows you to stream in nitro quality, send fake emojis/stickers and use client themes.",
+    dependencies: ["MessageEventsAPI"],
+
+    patches: [
+        {
+            find: ".PREMIUM_LOCKED;",
+            predicate: () => Settings.plugins.FakeNitro.enableEmojiBypass === true,
+            replacement: [
+                {
+                    match: /(?<=(\i)=\i\.intention)/,
+                    replace: (_, intention) => `,fakeNitroIntention=${intention}`
+                },
+                {
+                    match: /\.(?:canUseEmojisEverywhere|canUseAnimatedEmojis)\(\i(?=\))/g,
+                    replace: '$&,typeof fakeNitroIntention!=="undefined"?fakeNitroIntention:void 0'
+                },
+                {
+                    match: /(&&!\i&&)!(\i)(?=\)return \i\.\i\.DISALLOW_EXTERNAL;)/,
+                    replace: (_, rest, canUseExternal) => `${rest}(!${canUseExternal}&&(typeof fakeNitroIntention==="undefined"||![${EmojiIntentions.CHAT},${EmojiIntentions.GUILD_STICKER_RELATED_EMOJI}].includes(fakeNitroIntention)))`
+                }
+            ]
+        },
+        {
+            find: "canUseAnimatedEmojis:function",
+            predicate: () => Settings.plugins.FakeNitro.enableEmojiBypass === true,
+            replacement: {
+                match: /((?:canUseEmojisEverywhere|canUseAnimatedEmojis):function\(\i)\){(.+?\))/g,
+                replace: (_, rest, premiumCheck) => `${rest},fakeNitroIntention){${premiumCheck}||fakeNitroIntention==null||[${EmojiIntentions.CHAT},${EmojiIntentions.GUILD_STICKER_RELATED_EMOJI}].includes(fakeNitroIntention)`
+            }
+        },
+        {
+            find: "canUseStickersEverywhere:function",
+            predicate: () => Settings.plugins.FakeNitro.enableStickerBypass === true,
+            replacement: {
+                match: /canUseStickersEverywhere:function\(\i\){/,
+                replace: "$&return true;"
+            },
+        },
+        {
+            find: "\"SENDABLE\"",
+            predicate: () => Settings.plugins.FakeNitro.enableStickerBypass === true,
+            replacement: {
+                match: /(\w+)\.available\?/,
+                replace: "true?"
+            }
+        },
+        {
+            find: "canStreamHighQuality:function",
+            predicate: () => Settings.plugins.FakeNitro.enableStreamQualityBypass === true,
+            replacement: [
+                "canUseHighVideoUploadQuality",
+                "canStreamHighQuality",
+                "canStreamMidQuality"
+            ].map(func => {
+                return {
+                    match: new RegExp(`${func}:function\\(\\i\\){`),
+                    replace: "$&return true;"
+                };
+            })
+        },
+        {
+            find: "STREAM_FPS_OPTION.format",
+            predicate: () => Settings.plugins.FakeNitro.enableStreamQualityBypass === true,
+            replacement: {
+                match: /(userPremiumType|guildPremiumTier):.{0,10}TIER_\d,?/g,
+                replace: ""
+            }
+        },
+        {
+            find: "canUseClientThemes:function",
+            replacement: {
+                match: /canUseClientThemes:function\(\i\){/,
+                replace: "$&return true;"
+            }
+        },
+        {
+            find: '.displayName="UserSettingsProtoStore"',
+            replacement: [
+                {
+                    match: /CONNECTION_OPEN:function\((\i)\){/,
+                    replace: (m, props) => `${m}$self.handleProtoChange(${props}.userSettingsProto,${props}.user);`
+                },
+                {
+                    match: /=(\i)\.local;/,
+                    replace: (m, props) => `${m}${props}.local||$self.handleProtoChange(${props}.settings.proto);`
+                }
+            ]
+        },
+        {
+            find: "updateTheme:function",
+            replacement: {
+                match: /(function \i\(\i\){var (\i)=\i\.backgroundGradientPresetId.+?)(\i\.\i\.updateAsync.+?theme=(.+?);.+?\),\i\))/,
+                replace: (_, rest, backgroundGradientPresetId, originalCall, theme) => `${rest}$self.handleGradientThemeSelect(${backgroundGradientPresetId},${theme},()=>${originalCall});`
+            }
+        },
+        {
+            find: 'jumboable?"jumbo":"default"',
+            predicate: () => Settings.plugins.FakeNitro.transformEmojis === true,
+            replacement: {
+                match: /jumboable\?"jumbo":"default",emojiId.+?}}\)},(?<=(\i)=function\(\i\){var \i=\i\.node.+?)/,
+                replace: (m, component) => `${m}fakeNitroEmojiComponentExport=($self.EmojiComponent=${component},void 0),`
+            }
+        },
+        {
+            find: '["strong","em","u","text","inlineCode","s","spoiler"]',
+            predicate: () => Settings.plugins.FakeNitro.transformEmojis === true,
+            replacement: [
+                {
+                    match: /1!==(\i)\.length\|\|1!==\i\.length/,
+                    replace: (m, content) => `${m}||${content}[0].target?.startsWith("https://cdn.discordapp.com/emojis/")`
+                },
+                {
+                    match: /(?=return{hasSpoilerEmbeds:\i,content:(\i)})/,
+                    replace: (_, content) => `${content}=$self.patchFakeNitroEmojis(${content},arguments[2]?.formatInline);`
+                }
+            ]
+        },
+        {
+            find: "renderEmbeds=function",
+            predicate: () => Settings.plugins.FakeNitro.transformEmojis === true,
+            replacement: {
+                match: /renderEmbeds=function\(\i\){.+?embeds\.map\(\(function\((\i)\){/,
+                replace: (m, embed) => `${m}if(${embed}.url?.startsWith("https://cdn.discordapp.com/emojis/"))return null;`
+            }
+        }
+    ],
+
+    options: {
+        enableEmojiBypass: {
+            description: "Allow sending fake emojis",
+            type: OptionType.BOOLEAN,
+            default: true,
+            restartNeeded: true,
+        },
+        emojiSize: {
+            description: "Size of the emojis when sending",
+            type: OptionType.SLIDER,
+            default: 48,
+            markers: [32, 48, 64, 128, 160, 256, 512],
+        },
+        transformEmojis: {
+            description: "Whether to transform fake emojis into real ones",
+            type: OptionType.BOOLEAN,
+            default: true,
+            restartNeeded: true,
+        },
+        enableStickerBypass: {
+            description: "Allow sending fake stickers",
+            type: OptionType.BOOLEAN,
+            default: true,
+            restartNeeded: true,
+        },
+        stickerSize: {
+            description: "Size of the stickers when sending",
+            type: OptionType.SLIDER,
+            default: 160,
+            markers: [32, 64, 128, 160, 256, 512],
+        },
+        enableStreamQualityBypass: {
+            description: "Allow streaming in nitro quality",
+            type: OptionType.BOOLEAN,
+            default: true,
+            restartNeeded: true,
+        }
+    },
+
+    get guildId() {
+        return getCurrentGuild()?.id;
+    },
+
+    get canUseEmotes() {
+        return (UserStore.getCurrentUser().premiumType ?? 0) > 0;
+    },
+
+    get canUseStickers() {
+        return (UserStore.getCurrentUser().premiumType ?? 0) > 1;
+    },
+
+    handleProtoChange(proto: any, user: any) {
+        if ((!proto.appearance && !AppearanceSettingsProto) || !UserSettingsProtoStore) return;
+
+        const premiumType: number = user?.premium_type ?? UserStore?.getCurrentUser()?.premiumType ?? 0;
+
+        if (premiumType !== 2) {
+            proto.appearance ??= AppearanceSettingsProto.create();
+
+            if (UserSettingsProtoStore.settings.appearance?.theme != null) {
+                proto.appearance.theme = UserSettingsProtoStore.settings.appearance.theme;
+            }
+
+            if (UserSettingsProtoStore.settings.appearance?.clientThemeSettings?.backgroundGradientPresetId?.value != null && ClientThemeSettingsProto) {
+                const clientThemeSettingsDummyProto = ClientThemeSettingsProto.create({
+                    backgroundGradientPresetId: {
+                        value: UserSettingsProtoStore.settings.appearance.clientThemeSettings.backgroundGradientPresetId.value
+                    }
+                });
+
+                proto.appearance.clientThemeSettings ??= clientThemeSettingsDummyProto;
+                proto.appearance.clientThemeSettings.backgroundGradientPresetId = clientThemeSettingsDummyProto.backgroundGradientPresetId;
+            }
+        }
+    },
+
+    handleGradientThemeSelect(backgroundGradientPresetId: number | undefined, theme: number, original: () => void) {
+        const premiumType = UserStore?.getCurrentUser()?.premiumType ?? 0;
+        if (premiumType === 2 || backgroundGradientPresetId == null) return original();
+
+        if (!AppearanceSettingsProto || !ClientThemeSettingsProto || !ReaderFactory) return;
+
+        const currentAppearanceProto = PreloadedUserSettingsProtoHandler.getCurrentValue().appearance;
+
+        const newAppearanceProto = currentAppearanceProto != null
+            ? AppearanceSettingsProto.fromBinary(AppearanceSettingsProto.toBinary(currentAppearanceProto), ReaderFactory)
+            : AppearanceSettingsProto.create();
+
+        newAppearanceProto.theme = theme;
+
+        const clientThemeSettingsDummyProto = ClientThemeSettingsProto.create({
+            backgroundGradientPresetId: {
+                value: backgroundGradientPresetId
+            }
+        });
+
+        newAppearanceProto.clientThemeSettings ??= clientThemeSettingsDummyProto;
+        newAppearanceProto.clientThemeSettings.backgroundGradientPresetId = clientThemeSettingsDummyProto.backgroundGradientPresetId;
+
+        const proto = PreloadedUserSettingsProtoHandler.ProtoClass.create();
+        proto.appearance = newAppearanceProto;
+
+        FluxDispatcher.dispatch({
+            type: "USER_SETTINGS_PROTO_UPDATE",
+            local: true,
+            partial: true,
+            settings: {
+                type: 1,
+                proto
+            }
+        });
+    },
+
+    EmojiComponent: null as any,
+
+    patchFakeNitroEmojis(content: Array<any>, inline: boolean) {
+        if (!this.EmojiComponent) return content;
+
+        const newContent: Array<any> = [];
+
+        for (const element of content) {
+            if (element.props?.trusted == null) {
+                newContent.push(element);
+                continue;
+            }
+
+            const fakeNitroMatch = element.props.href.match(/https:\/\/cdn\.discordapp\.com\/emojis\/(\d+?)\.(png|webp|gif).+?(?=\s|$)/);
+            if (!fakeNitroMatch) {
+                newContent.push(element);
+                continue;
+            }
+
+            newContent.push((
+                <this.EmojiComponent node={{
+                    type: "customEmoji",
+                    jumboable: !inline && content.length === 1,
+                    animated: fakeNitroMatch[2] === "gif",
+                    name: ":FakeNitroEmoji:",
+                    emojiId: fakeNitroMatch[1]
+                }} />
+            ));
+        }
+
+        return newContent;
+    },
+
+    hasPermissionToUseExternalEmojis(channelId: string) {
+        const channel = ChannelStore.getChannel(channelId);
+
+        if (!channel || channel.isDM() || channel.isGroupDM() || channel.isMultiUserDM()) return true;
+
+        return PermissionStore.can(USE_EXTERNAL_EMOJIS, channel);
+    },
+
+    hasPermissionToUseExternalStickers(channelId: string) {
+        const channel = ChannelStore.getChannel(channelId);
+
+        if (!channel || channel.isDM() || channel.isGroupDM() || channel.isMultiUserDM()) return true;
+
+        return PermissionStore.can(USE_EXTERNAL_STICKERS, channel);
+    },
+
+    getStickerLink(stickerId: string) {
+        return `https://media.discordapp.net/stickers/${stickerId}.png?size=${Settings.plugins.FakeNitro.stickerSize}`;
+    },
+
+    async sendAnimatedSticker(stickerLink: string, stickerId: string, channelId: string) {
+        const [{ parseURL }, {
+            GIFEncoder,
+            quantize,
+            applyPalette
+        }] = await Promise.all([importApngJs(), getGifEncoder()]);
+
+        const { frames, width, height } = await parseURL(stickerLink);
+
+        const gif = new GIFEncoder();
+        const resolution = Settings.plugins.FakeNitro.stickerSize;
+
+        const canvas = document.createElement("canvas");
+        canvas.width = resolution;
+        canvas.height = resolution;
+
+        const ctx = canvas.getContext("2d", {
+            willReadFrequently: true
+        })!;
+
+        const scale = resolution / Math.max(width, height);
+        ctx.scale(scale, scale);
+
+        let lastImg: HTMLImageElement | null = null;
+        for (const { left, top, width, height, disposeOp, img, delay } of frames) {
+            ctx.drawImage(img, left, top, width, height);
+
+            const { data } = ctx.getImageData(0, 0, resolution, resolution);
+
+            const palette = quantize(data, 256);
+            const index = applyPalette(data, palette);
+
+            gif.writeFrame(index, resolution, resolution, {
+                transparent: true,
+                palette,
+                delay,
+            });
+
+            if (disposeOp === ApngDisposeOp.BACKGROUND) {
+                ctx.clearRect(left, top, width, height);
+            } else if (disposeOp === ApngDisposeOp.PREVIOUS && lastImg) {
+                ctx.drawImage(lastImg, left, top, width, height);
+            }
+
+            lastImg = img;
+        }
+
+        gif.finish();
+        const file = new File([gif.bytesView()], `${stickerId}.gif`, { type: "image/gif" });
+        promptToUpload([file], ChannelStore.getChannel(channelId), DRAFT_TYPE);
+    },
+
+    start() {
+        const settings = Settings.plugins.FakeNitro;
+        if (!settings.enableEmojiBypass && !settings.enableStickerBypass) {
+            return;
+        }
+
+        const EmojiStore = findByPropsLazy("getCustomEmojiById");
+        const StickerStore = findByPropsLazy("getAllGuildStickers") as {
+            getPremiumPacks(): StickerPack[];
+            getAllGuildStickers(): Map<string, Sticker[]>;
+            getStickerById(id: string): Sticker | undefined;
+        };
+
+        function getWordBoundary(origStr: string, offset: number) {
+            return (!origStr[offset] || /\s/.test(origStr[offset])) ? "" : " ";
+        }
+
+        this.preSend = addPreSendListener((channelId, messageObj, extra) => {
+            const { guildId } = this;
+
+            stickerBypass: {
+                if (!settings.enableStickerBypass)
+                    break stickerBypass;
+
+                const sticker = StickerStore.getStickerById(extra?.stickerIds?.[0]!);
+                if (!sticker)
+                    break stickerBypass;
+
+                if (sticker.available !== false && ((this.canUseStickers && this.hasPermissionToUseExternalStickers(channelId)) || (sticker as GuildSticker)?.guild_id === guildId))
+                    break stickerBypass;
+
+                let link = this.getStickerLink(sticker.id);
+                if (sticker.format_type === 2) {
+                    this.sendAnimatedSticker(this.getStickerLink(sticker.id), sticker.id, channelId);
+                    return { cancel: true };
+                } else {
+                    if ("pack_id" in sticker) {
+                        const packId = sticker.pack_id === "847199849233514549"
+                            // Discord moved these stickers into a different pack at some point, but
+                            // Distok still uses the old id
+                            ? "749043879713701898"
+                            : sticker.pack_id;
+
+                        link = `https://distok.top/stickers/${packId}/${sticker.id}.gif`;
+                    }
+
+                    delete extra.stickerIds;
+                    messageObj.content += " " + link;
+                }
+            }
+
+            if ((!this.canUseEmotes || !this.hasPermissionToUseExternalEmojis(channelId)) && settings.enableEmojiBypass) {
+                for (const emoji of messageObj.validNonShortcutEmojis) {
+                    if (!emoji.require_colons) continue;
+                    if (emoji.guildId === guildId && !emoji.animated) continue;
+
+                    const emojiString = `<${emoji.animated ? "a" : ""}:${emoji.originalName || emoji.name}:${emoji.id}>`;
+                    const url = emoji.url.replace(/\?size=\d+/, `?size=${Settings.plugins.FakeNitro.emojiSize}`);
+                    messageObj.content = messageObj.content.replace(emojiString, (match, offset, origStr) => {
+                        return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
+                    });
+                }
+            }
+
+            return { cancel: false };
+        });
+
+        this.preEdit = addPreEditListener((channelId, __, messageObj) => {
+            if (this.canUseEmotes && this.hasPermissionToUseExternalEmojis(channelId)) return;
+
+            const { guildId } = this;
+
+            for (const [emojiStr, _, emojiId] of messageObj.content.matchAll(/(?<!\\)<a?:(\w+):(\d+)>/ig)) {
+                const emoji = EmojiStore.getCustomEmojiById(emojiId);
+                if (emoji == null || (emoji.guildId === guildId && !emoji.animated)) continue;
+                if (!emoji.require_colons) continue;
+
+                const url = emoji.url.replace(/\?size=\d+/, `?size=${Settings.plugins.FakeNitro.emojiSize}`);
+                messageObj.content = messageObj.content.replace(emojiStr, (match, offset, origStr) => {
+                    return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
+                });
+            }
+        });
+    },
+
+    stop() {
+        removePreSendListener(this.preSend);
+        removePreEditListener(this.preEdit);
+    }
+});

src/plugins/fixInbox.tsx

@@ -0,0 +1,56 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { Forms } from "@webpack/common";
+
+export default definePlugin({
+    name: "FixInbox",
+    description: "Fixes the Unreads Inbox from crashing Discord when you're in lots of guilds.",
+    authors: [Devs.Megu],
+
+    patches: [{
+        find: "INBOX_OPEN:function",
+        replacement: {
+            // This function normally dispatches a subscribe event to every guild.
+            // this is badbadbadbadbad so we just get rid of it.
+            match: /INBOX_OPEN:function.+?\{/,
+            replace: "$&return true;"
+        }
+    }],
+
+    settingsAboutComponent() {
+        return (
+            <Forms.FormSection>
+                <Forms.FormTitle tag="h3">What's the problem?</Forms.FormTitle>
+                <Forms.FormText style={{ marginBottom: 8 }}>
+                    By default, Discord emits a GUILD_SUBSCRIPTIONS event for every guild you're in.
+                    When you're in a lot of guilds, this can cause the gateway to ratelimit you.
+                    This causes the client to crash and get stuck in an infinite ratelimit loop as it tries to reconnect.
+                </Forms.FormText>
+
+                <Forms.FormTitle tag="h3">How does it work?</Forms.FormTitle>
+                <Forms.FormText>
+                    This plugin works by stopping the client from sending GUILD_SUBSCRIPTIONS events to the gateway when you open the unreads inbox.
+                    This means that not all unreads will be shown, instead only already-subscribed guilds' unreads will be shown, but your client won't crash anymore.
+                </Forms.FormText>
+            </Forms.FormSection>
+        );
+    }
+});

src/plugins/forceOwnerCrown.ts

@@ -30,7 +30,7 @@ export default definePlugin({
             find: ".renderOwner=",
             replacement: {
                 match: /isOwner;return null!=(\w+)?&&/g,
-                replace: "isOwner;if(Vencord.Plugins.plugins.ForceOwnerCrown.isGuildOwner(this.props)){$1=true;}return null!=$1&&"
+                replace: "isOwner;if($self.isGuildOwner(this.props)){$1=true;}return null!=$1&&"
             }
         },
     ],

src/plugins/friendInvites.ts

@@ -23,7 +23,7 @@ import { findByProps } from "@webpack";
 
 export default definePlugin({
     name: "FriendInvites",
-    description: "Generate and manage friend invite links.",
+    description: "Create and manage friend invite links via slash commands (/create friend invite, /view friend invites, /revoke friend invites).",
     authors: [Devs.afn],
     dependencies: ["CommandsAPI"],
     commands: [
@@ -37,8 +37,8 @@ export default definePlugin({
 
                 return void sendBotMessage(ctx.channel.id, {
                     content: `
-                        discord.gg/${createInvite.code}
-                        Expires: <t:${new Date(createInvite.expires_at).getTime() / 1000}:R>
+                        discord.gg/${createInvite.code} ·
+                        Expires: <t:${new Date(createInvite.expires_at).getTime() / 1000}:R> ·
                         Max uses: \`${createInvite.max_uses}\`
                     `.trim().replace(/\s+/g, " ")
                 });
@@ -52,25 +52,25 @@ export default definePlugin({
                 const friendInvites = findByProps("createFriendInvite");
                 const invites = await friendInvites.getAllFriendInvites();
                 const friendInviteList = invites.map(i =>
-                    `_discord.gg/${i.code}_
-                    Expires: <t:${new Date(i.expires_at).getTime() / 1000}:R>
+                    `_discord.gg/${i.code}_ ·
+                    Expires: <t:${new Date(i.expires_at).getTime() / 1000}:R> ·
                     Times used: \`${i.uses}/${i.max_uses}\``.trim().replace(/\s+/g, " ")
                 );
 
                 return void sendBotMessage(ctx.channel.id, {
-                    content: friendInviteList.join("\n\n") || "You have no active friend invites!"
+                    content: friendInviteList.join("\n") || "You have no active friend invites!"
                 });
             },
         },
         {
             name: "revoke friend invites",
-            description: "Revokes ALL generated friend invite links.",
+            description: "Revokes all generated friend invites.",
             inputType: ApplicationCommandInputType.BOT,
             execute: async (_, ctx) => {
                 await findByProps("createFriendInvite").revokeFriendInvites();
 
                 return void sendBotMessage(ctx.channel.id, {
-                    content: "All friend links have been revoked."
+                    content: "All friend invites have been revoked."
                 });
             },
         },

src/plugins/gifPaste.ts

@@ -0,0 +1,47 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { filters, findLazy, mapMangledModuleLazy } from "@webpack";
+
+const ExpressionPickerState = mapMangledModuleLazy('name:"expression-picker-last-active-view"', {
+    close: filters.byCode("activeView:null", "setState")
+});
+const ComponentDispatch = findLazy(m => m.emitter?._events?.INSERT_TEXT);
+
+export default definePlugin({
+    name: "GifPaste",
+    description: "Makes picking a gif in the gif picker insert a link into the chatbox instead of instantly sending it",
+    authors: [Devs.Ven],
+
+    patches: [{
+        find: ".handleSelectGIF=",
+        replacement: {
+            match: /\.handleSelectGIF=function.+?\{/,
+            replace: ".handleSelectGIF=function(gif){return $self.handleSelect(gif);"
+        }
+    }],
+
+    handleSelect(gif?: { url: string; }) {
+        if (gif) {
+            ComponentDispatch.dispatchToLastSubscribed("INSERT_TEXT", { rawText: gif.url + " " });
+            ExpressionPickerState.close();
+        }
+    }
+});

src/plugins/ignoreActivities.tsx

@@ -21,7 +21,7 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { useForceUpdater } from "@utils/misc";
 import definePlugin from "@utils/types";
-import { findByPropsLazy } from "@webpack";
+import { findByPropsLazy, findStoreLazy } from "@webpack";
 import { Tooltip } from "webpack/common";
 
 enum ActivitiesTypes {
@@ -37,7 +37,7 @@ interface IgnoredActivity {
 const RegisteredGamesClasses = findByPropsLazy("overlayToggleIconOff", "overlayToggleIconOn");
 const TryItOutClasses = findByPropsLazy("tryItOutBadge", "tryItOutBadgeIcon");
 const BaseShapeRoundClasses = findByPropsLazy("baseShapeRound", "baseShapeRoundLeft", "baseShapeRoundRight");
-const RunningGameStore = findByPropsLazy("getRunningGames", "getGamesSeen");
+const RunningGameStore = findStoreLazy("RunningGameStore");
 
 function ToggleIconOff() {
     return (
@@ -71,7 +71,7 @@ function ToggleIconOff() {
     );
 }
 
-function ToggleIconOn() {
+function ToggleIconOn({ forceWhite }: { forceWhite?: boolean; }) {
     return (
         <svg
             className={RegisteredGamesClasses.overlayToggleIconOn}
@@ -80,14 +80,15 @@ function ToggleIconOn() {
             viewBox="0 0 32 26"
         >
             <path
-                className={RegisteredGamesClasses.fill}
+                className={forceWhite ? "" : RegisteredGamesClasses.fill}
+                fill={forceWhite ? "var(--white-500)" : ""}
                 d="M 16 8 C 7.664063 8 1.25 15.34375 1.25 15.34375 L 0.65625 16 L 1.25 16.65625 C 1.25 16.65625 7.097656 23.324219 14.875 23.9375 C 15.246094 23.984375 15.617188 24 16 24 C 16.382813 24 16.753906 23.984375 17.125 23.9375 C 24.902344 23.324219 30.75 16.65625 30.75 16.65625 L 31.34375 16 L 30.75 15.34375 C 30.75 15.34375 24.335938 8 16 8 Z M 16 10 C 18.203125 10 20.234375 10.601563 22 11.40625 C 22.636719 12.460938 23 13.675781 23 15 C 23 18.613281 20.289063 21.582031 16.78125 21.96875 C 16.761719 21.972656 16.738281 21.964844 16.71875 21.96875 C 16.480469 21.980469 16.242188 22 16 22 C 15.734375 22 15.476563 21.984375 15.21875 21.96875 C 11.710938 21.582031 9 18.613281 9 15 C 9 13.695313 9.351563 12.480469 9.96875 11.4375 L 9.9375 11.4375 C 11.71875 10.617188 13.773438 10 16 10 Z M 16 12 C 14.34375 12 13 13.34375 13 15 C 13 16.65625 14.34375 18 16 18 C 17.65625 18 19 16.65625 19 15 C 19 13.34375 17.65625 12 16 12 Z M 7.25 12.9375 C 7.09375 13.609375 7 14.285156 7 15 C 7 16.753906 7.5 18.394531 8.375 19.78125 C 5.855469 18.324219 4.105469 16.585938 3.53125 16 C 4.011719 15.507813 5.351563 14.203125 7.25 12.9375 Z M 24.75 12.9375 C 26.648438 14.203125 27.988281 15.507813 28.46875 16 C 27.894531 16.585938 26.144531 18.324219 23.625 19.78125 C 24.5 18.394531 25 16.753906 25 15 C 25 14.285156 24.90625 13.601563 24.75 12.9375 Z"
             />
         </svg>
     );
 }
 
-function ToggleActivityComponent({ activity }: { activity: IgnoredActivity; }) {
+function ToggleActivityComponent({ activity, forceWhite }: { activity: IgnoredActivity; forceWhite?: boolean; }) {
     const forceUpdate = useForceUpdater();
 
     return (
@@ -105,7 +106,7 @@ function ToggleActivityComponent({ activity }: { activity: IgnoredActivity; }) {
                     {
                         ignoredActivitiesCache.has(activity.id)
                             ? <ToggleIconOff />
-                            : <ToggleIconOn />
+                            : <ToggleIconOn forceWhite={forceWhite} />
                     }
                 </div>
             )}
@@ -117,9 +118,9 @@ function ToggleActivityComponentWithBackground({ activity }: { activity: Ignored
     return (
         <div
             className={`${TryItOutClasses.tryItOutBadge} ${BaseShapeRoundClasses.baseShapeRound}`}
-            style={{ padding: "0 2px" }}
+            style={{ padding: "0px 2px" }}
         >
-            <ToggleActivityComponent activity={activity} />
+            <ToggleActivityComponent activity={activity} forceWhite={true} />
         </div>
     );
 }
@@ -142,25 +143,32 @@ export default definePlugin({
     name: "IgnoreActivities",
     authors: [Devs.Nuckyz],
     description: "Ignore certain activities (like games and actual activities) from showing up on your status. You can configure which ones are ignored from the Registered Games and Activities tabs.",
-    patches: [{
+    patches: [
+        {
             find: ".Messages.SETTINGS_GAMES_TOGGLE_OVERLAY",
             replacement: {
-            match: /var .=(?<props>.)\.overlay.+?"aria-label":.\..\.Messages\.SETTINGS_GAMES_TOGGLE_OVERLAY.+?}}\)/,
-            replace: "$&,Vencord.Plugins.plugins.IgnoreActivities.renderToggleGameActivityButton($<props>)"
+                match: /!(\i)(\)return null;var \i=(\i)\.overlay.+?children:)(\[.{0,70}overlayStatusText.+?\])(?=}\)}\(\))/,
+                replace: (_, platformCheck, restWithoutPlatformCheck, props, children) => "false"
+                    + `${restWithoutPlatformCheck}`
+                    + `(${platformCheck}?${children}:[])`
+                    + `.concat(Vencord.Plugins.plugins.IgnoreActivities.renderToggleGameActivityButton(${props}))`
             }
-    }, {
+        },
+        {
             find: ".overlayBadge",
             replacement: {
-            match: /.badgeContainer.+?.\?\(0,.\.jsx\)\(.{1,2},{name:(?<props>.)\.name}\):null/,
-            replace: "$&,Vencord.Plugins.plugins.IgnoreActivities.renderToggleActivityButton($<props>)"
+                match: /(?<=\(\)\.badgeContainer.+?(\i)\.name}\):null)/,
+                replace: (_, props) => `,$self.renderToggleActivityButton(${props})`
             }
-    }, {
+        },
+        {
             find: '.displayName="LocalActivityStore"',
             replacement: {
-            match: /(?<activities>.)\.push\(.\({type:.\..{1,3}\.LISTENING.+?\)\)/,
-            replace: "$&;$<activities>=$<activities>.filter(Vencord.Plugins.plugins.IgnoreActivities.isActivityNotIgnored);"
+                match: /LISTENING.+?\)\);(?<=(\i)\.push.+?)/,
+                replace: (m, activities) => `${m}${activities}=${activities}.filter($self.isActivityNotIgnored);`
             }
-    }],
+        }
+    ],
 
     async start() {
         const ignoredActivitiesData = await DataStore.get<string[] | Map<IgnoredActivity["id"], IgnoredActivity>>("IgnoreActivities_ignoredActivities") ?? new Map<IgnoredActivity["id"], IgnoredActivity>();
@@ -214,5 +222,5 @@ export default definePlugin({
             }
         }
         return true;
-    },
+    }
 });

src/plugins/index.ts

@@ -43,8 +43,11 @@ export function isPluginEnabled(p: string) {
 
 const pluginsValues = Object.values(Plugins);
 
-// First roundtrip to mark and force enable dependencies
-for (const p of pluginsValues) {
+// First roundtrip to mark and force enable dependencies (only for enabled plugins)
+//
+// FIXME: might need to revisit this if there's ever nested (dependencies of dependencies) dependencies since this only
+// goes for the top level and their children, but for now this works okay with the current API plugins
+for (const p of pluginsValues) if (settings[p.name]?.enabled) {
     p.dependencies?.forEach(d => {
         const dep = Plugins[d];
         if (dep) {

src/plugins/invisibleChat/components/DecryptionModal.tsx

@@ -51,7 +51,7 @@ export function DecModal(props: any) {
                 <Button
                     color={Button.Colors.GREEN}
                     onClick={() => {
-                        const toSend = decrypt(secret, password);
+                        const toSend = decrypt(secret, password, true);
                         if (!toSend || !props?.message) return;
                         // @ts-expect-error
                         Vencord.Plugins.plugins.InvisibleChat.buildEmbed(props?.message, toSend);

src/plugins/invisibleChat/index.tsx

@@ -17,11 +17,13 @@
 */
 
 import { addButton, removeButton } from "@api/MessagePopover";
+import { definePluginSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { getStegCloak } from "@utils/dependencies";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { Button, ButtonLooks, ButtonWrapperClasses, ChannelStore, FluxDispatcher, Tooltip } from "@webpack/common";
+import { Message } from "discord-types/general";
 
 import { buildDecModal } from "./components/DecryptionModal";
 import { buildEncModal } from "./components/EncryptionModal";
@@ -89,8 +91,8 @@ function ChatBarIcon() {
                             <svg
                                 aria-hidden
                                 role="img"
-                                width="24"
-                                height="24"
+                                width="32"
+                                height="32"
                                 viewBox={"0 0 64 64"}
                                 style={{ scale: "1.1" }}
                             >
@@ -105,6 +107,13 @@ function ChatBarIcon() {
     );
 }
 
+const settings = definePluginSettings({
+    savedPasswords: {
+        type: OptionType.STRING,
+        default: "password, Password",
+        description: "Saved Passwords (Seperated with a , )"
+    }
+});
 
 export default definePlugin({
     name: "InvisibleChat",
@@ -122,8 +131,8 @@ export default definePlugin({
         {
             find: ".activeCommandOption",
             replacement: {
-                match: /.=.\.activeCommand,.=.\.activeCommandOption,.{1,133}(.)=\[\];/,
-                replace: "$&;$1.push($self.chatBarIcon());",
+                match: /(.)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
+                replace: "$&;try{$2||$1.push($self.chatBarIcon())}catch{}",
             }
         },
     ],
@@ -133,7 +142,7 @@ export default definePlugin({
     URL_REGEX: new RegExp(
         /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_+.~#?&//=]*)/,
     ),
-
+    settings,
     async start() {
         const { default: StegCloak } = await getStegCloak();
         steggo = new StegCloak(true, false);
@@ -145,7 +154,12 @@ export default definePlugin({
                     icon: this.popOverIcon,
                     message: message,
                     channel: ChannelStore.getChannel(message.channel_id),
-                    onClick: () => buildDecModal({ message })
+                    onClick: async () => {
+                        await iteratePasswords(message).then((res: string | false) => {
+                            if (res) return void this.buildEmbed(message, res);
+                            return void buildDecModal({ message });
+                        });
+                    }
                 }
                 : null;
         });
@@ -213,7 +227,31 @@ export function encrypt(secret: string, password: string, cover: string): string
     return steggo.hide(secret + "\u200b", password, cover);
 }
 
-export function decrypt(secret: string, password: string): string {
-    return steggo.reveal(secret, password).replace("\u200b", "");
+export function decrypt(secret: string, password: string, removeIndicator: boolean): string {
+    const decrypted = steggo.reveal(secret, password);
+    return removeIndicator ? decrypted.replace("\u200b", "") : decrypted;
 }
 
+export function isCorrectPassword(result: string): boolean {
+    return result.endsWith("\u200b");
+}
+
+export async function iteratePasswords(message: Message): Promise<string | false> {
+    const passwords = settings.store.savedPasswords.split(",").map(s => s.trim());
+
+    if (!message?.content || !passwords?.length) return false;
+
+    let { content } = message;
+
+    // we use an extra variable so we dont have to edit the message content directly
+    if (/^\W/.test(message.content)) content = `d ${message.content}d`;
+
+    for (let i = 0; i < passwords.length; i++) {
+        const result = decrypt(content, passwords[i], false);
+        if (isCorrectPassword(result)) {
+            return result;
+        }
+    }
+
+    return false;
+}

src/plugins/lastfm.tsx

@@ -16,9 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
+import { definePluginSettings } from "@api/settings";
 import { Link } from "@components/Link";
 import { Devs } from "@utils/constants";
+import Logger from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { filters, findByPropsLazy, mapMangledModuleLazy } from "@webpack";
 import { FluxDispatcher, Forms } from "@webpack/common";
@@ -30,11 +31,17 @@ interface ActivityAssets {
     small_text?: string;
 }
 
+
+interface ActivityButton {
+    label: string;
+    url: string;
+}
+
 interface Activity {
     state: string;
     details?: string;
     timestamps?: {
-        start?: Number;
+        start?: number;
     };
     assets?: ActivityAssets;
     buttons?: Array<string>;
@@ -43,8 +50,8 @@ interface Activity {
     metadata?: {
         button_urls?: Array<string>;
     };
-    type: Number;
-    flags: Number;
+    type: number;
+    flags: number;
 }
 
 interface TrackData {
@@ -66,6 +73,9 @@ enum ActivityFlag {
 }
 
 const applicationId = "1043533871037284423";
+const placeholderId = "2a96cbd8b46e442fc41c2b86b821562f";
+
+const logger = new Logger("LastFMRichPresence");
 
 const presenceStore = findByPropsLazy("getLocalPresence");
 const assetManager = mapMangledModuleLazy(
@@ -79,14 +89,64 @@ async function getApplicationAsset(key: string): Promise<string> {
     return (await assetManager.getAsset(applicationId, [key, undefined]))[0];
 }
 
-function setActivity(activity?: Activity) {
-    FluxDispatcher.dispatch({ type: "LOCAL_ACTIVITY_UPDATE", activity: activity });
+function setActivity(activity: Activity | null) {
+    FluxDispatcher.dispatch({
+        type: "LOCAL_ACTIVITY_UPDATE",
+        activity,
+        socketId: "LastFM",
+    });
 }
 
+const settings = definePluginSettings({
+    username: {
+        description: "last.fm username",
+        type: OptionType.STRING,
+    },
+    apiKey: {
+        description: "last.fm api key",
+        type: OptionType.STRING,
+    },
+    shareUsername: {
+        description: "show link to last.fm profile",
+        type: OptionType.BOOLEAN,
+        default: false,
+    },
+    hideWithSpotify: {
+        description: "hide last.fm presence if spotify is running",
+        type: OptionType.BOOLEAN,
+        default: true,
+    },
+    statusName: {
+        description: "text shown in status",
+        type: OptionType.STRING,
+        default: "some music",
+    },
+    useListeningStatus: {
+        description: 'show "Listening to" status instead of "Playing"',
+        type: OptionType.BOOLEAN,
+        default: false,
+    },
+    missingArt: {
+        description: "When album or album art is missing",
+        type: OptionType.SELECT,
+        options: [
+            {
+                label: "Use large Last.fm logo",
+                value: "lastfmLogo",
+                default: true
+            },
+            {
+                label: "Use generic placeholder",
+                value: "placeholder"
+            }
+        ],
+    }
+});
+
 export default definePlugin({
     name: "LastFMRichPresence",
     description: "Little plugin for Last.fm rich presence",
-    authors: [Devs.dzshn],
+    authors: [Devs.dzshn, Devs.RuiNtD],
 
     settingsAboutComponent: () => (
         <>
@@ -104,30 +164,9 @@ export default definePlugin({
         </>
     ),
 
-    options: {
-        username: {
-            description: "last.fm username",
-            type: OptionType.STRING,
-        },
-        apiKey: {
-            description: "last.fm api key",
-            type: OptionType.STRING,
-        },
-        hideWithSpotify: {
-            description: "hide last.fm presence if spotify is running",
-            type: OptionType.BOOLEAN,
-            default: true,
-        },
-        useListeningStatus: {
-            description: 'show "Listening to" status instead of "Playing"',
-            type: OptionType.BOOLEAN,
-            default: false,
-        }
-    },
+    settings,
 
     start() {
-        this.settings = Settings.plugins.LastFMRichPresence;
-
         this.updateInterval = setInterval(() => { this.updatePresence(); }, 16000);
     },
 
@@ -136,12 +175,31 @@ export default definePlugin({
     },
 
     async fetchTrackData(): Promise<TrackData | null> {
-        if (!this.settings.username || !this.settings.apiKey) return null;
+        if (!settings.store.username || !settings.store.apiKey)
+            return null;
 
-        const response = await fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&api_key=${this.settings.apiKey}&user=${this.settings.username}&limit=1&format=json`);
-        const trackData = (await response.json()).recenttracks.track[0];
+        try {
+            const params = new URLSearchParams({
+                method: "user.getrecenttracks",
+                api_key: settings.store.apiKey,
+                user: settings.store.username,
+                limit: "1",
+                format: "json"
+            });
 
-        if (!trackData["@attr"]?.nowplaying) return null;
+            const res = await fetch(`https://ws.audioscrobbler.com/2.0/?${params}`);
+            if (!res.ok) throw `${res.status} ${res.statusText}`;
+
+            const json = await res.json();
+            if (json.error) {
+                logger.error("Error from Last.fm API", `${json.error}: ${json.message}`);
+                return null;
+            }
+
+            const trackData = json.recenttracks?.track[0];
+
+            if (!trackData || !trackData["@attr"]?.nowplaying)
+                return null;
 
             // why does the json api have xml structure
             return {
@@ -149,60 +207,80 @@ export default definePlugin({
                 album: trackData.album["#text"],
                 artist: trackData.artist["#text"] || "Unknown",
                 url: trackData.url,
-            imageUrl: (trackData.image || []).filter(x => x.size === "large")[0]?.["#text"]
+                imageUrl: trackData.image?.find((x: any) => x.size === "large")?.["#text"]
             };
+        } catch (e) {
+            logger.error("Failed to query Last.fm API", e);
+            // will clear the rich presence if API fails
+            return null;
+        }
     },
 
     async updatePresence() {
-        if (this.settings.hideWithSpotify) {
+        setActivity(await this.getActivity());
+    },
+
+    getLargeImage(track: TrackData): string | undefined {
+        if (track.imageUrl && !track.imageUrl.includes(placeholderId))
+            return track.imageUrl;
+
+        if (settings.store.missingArt === "placeholder")
+            return "placeholder";
+    },
+
+    async getActivity(): Promise<Activity | null> {
+        if (settings.store.hideWithSpotify) {
             for (const activity of presenceStore.getActivities()) {
                 if (activity.type === ActivityType.LISTENING && activity.application_id !== applicationId) {
-                    // there is already music status (probably only spotify can do this currently)
-                    setActivity();
-                    return;
+                    // there is already music status because of Spotify or richerCider (probably more)
+                    return null;
                 }
             }
         }
 
         const trackData = await this.fetchTrackData();
+        if (!trackData) return null;
 
-        if (!trackData) {
-            setActivity();
-            return;
-        }
-
-        const hideAlbumName = !trackData.album || trackData.album === trackData.name;
-
-        let assets: ActivityAssets;
-        if (trackData.imageUrl) {
-            assets = {
-                large_image: await getApplicationAsset(trackData.imageUrl),
-                large_text: trackData.name,
+        const largeImage = this.getLargeImage(trackData);
+        const assets: ActivityAssets = largeImage ?
+            {
+                large_image: await getApplicationAsset(largeImage),
+                large_text: trackData.album || undefined,
                 small_image: await getApplicationAsset("lastfm-small"),
                 small_text: "Last.fm",
-            };
-        } else {
-            assets = {
+            } : {
                 large_image: await getApplicationAsset("lastfm-large"),
-                large_text: "Last.fm",
+                large_text: trackData.album || undefined,
             };
-        }
 
-        setActivity({
+        const buttons: ActivityButton[] = [
+            {
+                label: "View Song",
+                url: trackData.url,
+            },
+        ];
+
+        if (settings.store.shareUsername)
+            buttons.push({
+                label: "Last.fm Profile",
+                url: `https://www.last.fm/user/${settings.store.username}`,
+            });
+
+        return {
             application_id: applicationId,
-            name: "some music",
+            name: settings.store.statusName,
 
             details: trackData.name,
-            state: hideAlbumName ? trackData.artist : `${trackData.artist} - ${trackData.album}`,
+            state: trackData.artist,
             assets,
 
-            buttons: ["Open in Last.fm"],
+            buttons: buttons.map(v => v.label),
             metadata: {
-                button_urls: [trackData.url]
+                button_urls: buttons.map(v => v.url),
             },
 
-            type: this.settings.useListeningStatus ? ActivityType.LISTENING : ActivityType.PLAYING,
+            type: settings.store.useListeningStatus ? ActivityType.LISTENING : ActivityType.PLAYING,
             flags: ActivityFlag.INSTANCE,
-        });
+        };
     }
 });

src/plugins/loadingQuotes.ts

@@ -68,7 +68,7 @@ export default definePlugin({
             find: ".LOADING_DID_YOU_KNOW",
             replacement: {
                 match: /\._loadingText=.+?random\(.+?;/s,
-                replace: "._loadingText=Vencord.Plugins.plugins.LoadingQuotes.quote;",
+                replace: "._loadingText=$self.quote;",
             },
         },
     ],

src/plugins/memberCount.tsx

@@ -56,7 +56,7 @@ function MemberCount() {
                     <div {...props}>
                         <span
                             style={{
-                                backgroundColor: "var(--status-green-600)",
+                                backgroundColor: "var(--green-360)",
                                 width: "12px",
                                 height: "12px",
                                 borderRadius: "50%",
@@ -64,7 +64,7 @@ function MemberCount() {
                                 marginRight: "0.5em"
                             }}
                         />
-                        <span style={{ color: "var(--status-green-600)" }}>{online}</span>
+                        <span style={{ color: "var(--green-360)" }}>{online}</span>
                     </div>
                 )}
             </Tooltip>
@@ -76,13 +76,13 @@ function MemberCount() {
                                 width: "6px",
                                 height: "6px",
                                 borderRadius: "50%",
-                                border: "3px solid var(--status-grey-500)",
+                                border: "3px solid var(--primary-400)",
                                 display: "inline-block",
                                 marginRight: "0.5em",
                                 marginLeft: "1em"
                             }}
                         />
-                        <span style={{ color: "var(--status-grey-500)" }}>{total}</span>
+                        <span style={{ color: "var(--primary-400)" }}>{total}</span>
                     </div>
                 )}
             </Tooltip>
@@ -99,7 +99,7 @@ export default definePlugin({
         find: ".isSidebarVisible,",
         replacement: {
             match: /(var (.)=.\.className.+?children):\[(.\.useMemo[^}]+"aria-multiselectable")/,
-            replace: "$1:[$2.startsWith('members')?Vencord.Plugins.plugins.MemberCount.render():null,$3"
+            replace: "$1:[$2.startsWith('members')?$self.render():null,$3"
         }
     }],
 

src/plugins/messageClickActions.ts

@@ -20,18 +20,20 @@ import { addClickListener, removeClickListener } from "@api/MessageEvents";
 import { migratePluginSettings } from "@api/settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy, findLazy } from "@webpack";
-import { UserStore } from "@webpack/common";
+import { findByPropsLazy } from "@webpack";
+import { PermissionStore, UserStore } from "@webpack/common";
 
 let isDeletePressed = false;
 const keydown = (e: KeyboardEvent) => e.key === "Backspace" && (isDeletePressed = true);
 const keyup = (e: KeyboardEvent) => e.key === "Backspace" && (isDeletePressed = false);
 
+const MANAGE_CHANNELS = 1n << 4n;
+
 migratePluginSettings("MessageClickActions", "MessageQuickActions");
 
 export default definePlugin({
     name: "MessageClickActions",
-    description: "Hold Delete and click to delete, double click to edit",
+    description: "Hold Backspace and click to delete, double click to edit",
     authors: [Devs.Ven],
     dependencies: ["MessageEventsAPI"],
 
@@ -50,8 +52,6 @@ export default definePlugin({
 
     start() {
         const MessageActions = findByPropsLazy("deleteMessage", "startEditMessage");
-        const PermissionStore = findByPropsLazy("can", "initialize");
-        const Permissions = findLazy(m => typeof m.MANAGE_MESSAGES === "bigint");
         const EditStore = findByPropsLazy("isEditing", "isEditingAny");
 
         document.addEventListener("keydown", keydown);
@@ -64,7 +64,7 @@ export default definePlugin({
                     MessageActions.startEditMessage(chan.id, msg.id, msg.content);
                     event.preventDefault();
                 }
-            } else if (Vencord.Settings.plugins.MessageClickActions.enableDeleteOnClick && (isMe || PermissionStore.can(Permissions.MANAGE_MESSAGES, chan))) {
+            } else if (Vencord.Settings.plugins.MessageClickActions.enableDeleteOnClick && (isMe || PermissionStore.can(MANAGE_CHANNELS, chan))) {
                 MessageActions.deleteMessage(chan.id, msg.id);
                 event.preventDefault();
             }

src/plugins/messageLinkEmbeds.tsx

@@ -17,11 +17,13 @@
 */
 
 import { addAccessory } from "@api/MessageAccessories";
-import { Settings } from "@api/settings";
+import { definePluginSettings } from "@api/settings";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants.js";
+import { classes, LazyComponent } from "@utils/misc";
 import { Queue } from "@utils/Queue";
 import definePlugin, { OptionType } from "@utils/types";
-import { filters, findByPropsLazy, waitFor } from "@webpack";
+import { find, findByCode, findByPropsLazy } from "@webpack";
 import {
     Button,
     ChannelStore,
@@ -36,41 +38,20 @@ import {
 } from "@webpack/common";
 import { Channel, Guild, Message } from "discord-types/general";
 
-let messageCache: { [id: string]: { message?: Message, fetched: boolean; }; } = {};
+const messageCache = new Map<string, {
+    message?: Message;
+    fetched: boolean;
+}>();
 
-let AutomodEmbed: React.ComponentType<any>,
-    Embed: React.ComponentType<any>,
-    ChannelMessage: React.ComponentType<any>,
-    Endpoints: Record<string, any>;
+const Embed = LazyComponent(() => findByCode(".inlineMediaEmbed"));
+const ChannelMessage = LazyComponent(() => find(m => m.type?.toString()?.includes('["message","compact","className",')));
 
-waitFor(["mle_AutomodEmbed"], m => (AutomodEmbed = m.mle_AutomodEmbed));
-waitFor(filters.byCode(".inlineMediaEmbed"), m => Embed = m);
-waitFor(m => m.type?.toString()?.includes('["message","compact","className",'), m => ChannelMessage = m);
-waitFor(["MESSAGE_CREATE_ATTACHMENT_UPLOAD"], _ => Endpoints = _);
 const SearchResultClasses = findByPropsLazy("message", "searchResult");
 
-const messageFetchQueue = new Queue();
-async function fetchMessage(channelID: string, messageID: string): Promise<Message | void> {
-    if (messageID in messageCache && !messageCache[messageID].fetched) return Promise.resolve();
-    if (messageCache[messageID]?.fetched) return Promise.resolve(messageCache[messageID].message);
+let AutoModEmbed: React.ComponentType<any> = () => null;
 
-    messageCache[messageID] = { fetched: false };
-    const res = await RestAPI.get({
-        url: Endpoints.MESSAGES(channelID),
-        query: {
-            limit: 1,
-            around: messageID
-        },
-        retries: 2
-    }).catch(() => { });
-    const apiMessage = res.body?.[0];
-    const message: Message = MessageStore.getMessages(apiMessage.channel_id).receiveMessage(apiMessage).get(apiMessage.id);
-    messageCache[message.id] = {
-        message: message,
-        fetched: true
-    };
-    return Promise.resolve(message);
-}
+const messageLinkRegex = /(?<!<)https?:\/\/(?:\w+\.)?discord(?:app)?\.com\/channels\/(\d{17,20}|@me)\/(\d{17,20})\/(\d{17,20})/g;
+const tenorRegex = /https:\/\/(?:www.)?tenor\.com/;
 
 interface Attachment {
     height: number;
@@ -79,84 +60,15 @@ interface Attachment {
     proxyURL?: string;
 }
 
-const isTenorGif = /https:\/\/(?:www.)?tenor\.com/;
-function getImages(message: Message): Attachment[] {
-    const attachments: Attachment[] = [];
-    message.attachments?.forEach(a => {
-        if (a.content_type!.startsWith("image/")) attachments.push({
-            height: a.height!,
-            width: a.width!,
-            url: a.url,
-            proxyURL: a.proxy_url!
-        });
-    });
-    message.embeds?.forEach(e => {
-        if (e.type === "image") attachments.push(
-            e.image ? { ...e.image } : { ...e.thumbnail! }
-        );
-        if (e.type === "gifv" && !isTenorGif.test(e.url!)) {
-            attachments.push({
-                height: e.thumbnail!.height,
-                width: e.thumbnail!.width,
-                url: e.url!
-            });
-        }
-    });
-    return attachments;
-}
-
-const noContent = (attachments: number, embeds: number): string => {
-    if (!attachments && !embeds) return "";
-    if (!attachments) return `[no content, ${embeds} embed${embeds !== 1 ? "s" : ""}]`;
-    if (!embeds) return `[no content, ${attachments} attachment${attachments !== 1 ? "s" : ""}]`;
-    return `[no content, ${attachments} attachment${attachments !== 1 ? "s" : ""} and ${embeds} embed${embeds !== 1 ? "s" : ""}]`;
-};
-
-function requiresRichEmbed(message: Message) {
-    if (message.attachments.every(a => a.content_type?.startsWith("image/"))
-        && message.embeds.every(e => e.type === "image" || (e.type === "gifv" && !isTenorGif.test(e.url!)))
-        && !message.components.length
-    ) return false;
-    return true;
-}
-
-const computeWidthAndHeight = (width: number, height: number) => {
-    const maxWidth = 400, maxHeight = 300;
-    let newWidth: number, newHeight: number;
-    if (width > height) {
-        newWidth = Math.min(width, maxWidth);
-        newHeight = Math.round(height / (width / newWidth));
-    } else {
-        newHeight = Math.min(height, maxHeight);
-        newWidth = Math.round(width / (height / newHeight));
-    }
-    return { width: newWidth, height: newHeight };
-};
-
 interface MessageEmbedProps {
     message: Message;
     channel: Channel;
     guildID: string;
 }
 
-export default definePlugin({
-    name: "MessageLinkEmbeds",
-    description: "Adds a preview to messages that link another message",
-    authors: [Devs.TheSun],
-    dependencies: ["MessageAccessoriesAPI"],
-    patches: [
-        {
-            find: ".embedCard",
-            replacement: [{
-                match: /{"use strict";(.{0,10})\(\)=>(.{1,2})}\);/,
-                replace: '{"use strict";$1()=>$2,me:()=>messageEmbed});'
-            }, {
-                match: /function (.{1,2})\(.{1,2}\){var .{1,2}=.{1,2}\.message,.{1,2}=.{1,2}\.channel.{0,300}\.embedCard.{0,500}}\)}/,
-                replace: "$&;var messageEmbed={mle_AutomodEmbed:$1};"
-            }]
-        }
-    ],
-    options: {
+const messageFetchQueue = new Queue();
+
+const settings = definePluginSettings({
     messageBackgroundColor: {
         description: "Background color for messages in rich embeds",
         type: OptionType.BOOLEAN
@@ -164,53 +76,152 @@ export default definePlugin({
     automodEmbeds: {
         description: "Use automod embeds instead of rich embeds (smaller but less info)",
         type: OptionType.SELECT,
-            options: [{
+        options: [
+            {
                 label: "Always use automod embeds",
                 value: "always"
-            }, {
+            },
+            {
                 label: "Prefer automod embeds, but use rich embeds if some content can't be shown",
                 value: "prefer"
-            }, {
+            },
+            {
                 label: "Never use automod embeds",
                 value: "never",
                 default: true
-            }]
+            }
+        ]
     },
     clearMessageCache: {
         type: OptionType.COMPONENT,
         description: "Clear the linked message cache",
         component: () =>
-                <Button onClick={() => messageCache = {}}>
+            <Button onClick={() => messageCache.clear()}>
                 Clear the linked message cache
             </Button>
     }
+});
+
+
+async function fetchMessage(channelID: string, messageID: string) {
+    const cached = messageCache.get(messageID);
+    if (cached) return cached.message;
+
+    messageCache.set(messageID, { fetched: false });
+
+    const res = await RestAPI.get({
+        url: `/channels/${channelID}/messages`,
+        query: {
+            limit: 1,
+            around: messageID
         },
+        retries: 2
+    }).catch(() => null);
 
-    start() {
-        addAccessory("messageLinkEmbed", props => this.messageEmbedAccessory(props), 4 /* just above rich embeds*/);
-    },
+    const msg = res?.body?.[0];
+    if (!msg) return;
 
-    messageLinkRegex: /(?<!<)https?:\/\/(?:\w+\.)?discord(?:app)?\.com\/channels\/(\d{17,19}|@me)\/(\d{17,19})\/(\d{17,19})/g,
+    const message: Message = MessageStore.getMessages(msg.channel_id).receiveMessage(msg).get(msg.id);
 
-    messageEmbedAccessory(props) {
-        const { message }: { message: Message; } = props;
+    messageCache.set(message.id, {
+        message,
+        fetched: true
+    });
+
+    return message;
+}
+
+
+function getImages(message: Message): Attachment[] {
+    const attachments: Attachment[] = [];
+
+    for (const { content_type, height, width, url, proxy_url } of message.attachments ?? []) {
+        if (content_type?.startsWith("image/"))
+            attachments.push({
+                height: height!,
+                width: width!,
+                url: url,
+                proxyURL: proxy_url!
+            });
+    }
+
+    for (const { type, image, thumbnail, url } of message.embeds ?? []) {
+        if (type === "image")
+            attachments.push({ ...(image ?? thumbnail!) });
+        else if (url && type === "gifv" && !tenorRegex.test(url))
+            attachments.push({
+                height: thumbnail!.height,
+                width: thumbnail!.width,
+                url
+            });
+    }
+
+    return attachments;
+}
+
+function noContent(attachments: number, embeds: number) {
+    if (!attachments && !embeds) return "";
+    if (!attachments) return `[no content, ${embeds} embed${embeds !== 1 ? "s" : ""}]`;
+    if (!embeds) return `[no content, ${attachments} attachment${attachments !== 1 ? "s" : ""}]`;
+    return `[no content, ${attachments} attachment${attachments !== 1 ? "s" : ""} and ${embeds} embed${embeds !== 1 ? "s" : ""}]`;
+}
+
+function requiresRichEmbed(message: Message) {
+    if (message.components.length) return true;
+    if (message.attachments.some(a => !a.content_type?.startsWith("image/"))) return true;
+    if (message.embeds.some(e => e.type !== "image" && (e.type !== "gifv" || tenorRegex.test(e.url!)))) return true;
+
+    return false;
+}
+
+function computeWidthAndHeight(width: number, height: number) {
+    const maxWidth = 400;
+    const maxHeight = 300;
+
+    if (width > height) {
+        const adjustedWidth = Math.min(width, maxWidth);
+        return { width: adjustedWidth, height: Math.round(height / (width / adjustedWidth)) };
+    }
+
+    const adjustedHeight = Math.min(height, maxHeight);
+    return { width: Math.round(width / (height / adjustedHeight)), height: adjustedHeight };
+}
+
+function withEmbeddedBy(message: Message, embeddedBy: string[]) {
+    return new Proxy(message, {
+        get(_, prop) {
+            if (prop === "vencordEmbeddedBy") return embeddedBy;
+            // @ts-ignore ts so bad
+            return Reflect.get(...arguments);
+        }
+    });
+}
+
+
+function MessageEmbedAccessory({ message }: { message: Message; }) {
+    // @ts-ignore
+    const embeddedBy: string[] = message.vencordEmbeddedBy ?? [];
 
     const accessories = [] as (JSX.Element | null)[];
 
     let match = null as RegExpMatchArray | null;
-        while ((match = this.messageLinkRegex.exec(message.content!)) !== null) {
+    while ((match = messageLinkRegex.exec(message.content!)) !== null) {
         const [_, guildID, channelID, messageID] = match;
+        if (embeddedBy.includes(messageID)) {
+            continue;
+        }
 
         const linkedChannel = ChannelStore.getChannel(channelID);
         if (!linkedChannel || (guildID !== "@me" && !PermissionStore.can(1024n /* view channel */, linkedChannel))) {
             continue;
         }
 
-            let linkedMessage = messageCache[messageID]?.message as Message;
+        let linkedMessage = messageCache.get(messageID)?.message;
         if (!linkedMessage) {
             linkedMessage ??= MessageStore.getMessage(channelID, messageID);
-                if (linkedMessage) messageCache[messageID] = { message: linkedMessage, fetched: true };
-                else {
+            if (linkedMessage) {
+                messageCache.set(messageID, { message: linkedMessage, fetched: true });
+            } else {
                 const msg = { ...message } as any;
                 delete msg.embeds;
                 messageFetchQueue.push(() => fetchMessage(channelID, messageID)
@@ -222,30 +233,30 @@ export default definePlugin({
                 continue;
             }
         }
+
         const messageProps: MessageEmbedProps = {
-                message: linkedMessage,
+            message: withEmbeddedBy(linkedMessage, [...embeddedBy, message.id]),
             channel: linkedChannel,
             guildID
         };
 
-            const type = Settings.plugins[this.name].automodEmbeds;
+        const type = settings.store.automodEmbeds;
         accessories.push(
             type === "always" || (type === "prefer" && !requiresRichEmbed(linkedMessage))
-                    ? this.automodEmbedAccessory(messageProps)
-                    : this.channelMessageEmbedAccessory(messageProps)
+                ? <AutomodEmbedAccessory {...messageProps} />
+                : <ChannelMessageEmbedAccessory {...messageProps} />
         );
     }
-        return accessories;
-    },
 
-    channelMessageEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
-        const { message, channel, guildID } = props;
+    return accessories.length ? <>{accessories}</> : null;
+}
 
+function ChannelMessageEmbedAccessory({ message, channel, guildID }: MessageEmbedProps): JSX.Element | null {
     const isDM = guildID === "@me";
+
     const guild = !isDM && GuildStore.getGuild(channel.guild_id);
     const dmReceiver = UserStore.getUser(ChannelStore.getChannel(channel.id).recipients?.[0]);
-        const classNames = [SearchResultClasses.message];
-        if (Settings.plugins[this.name].messageBackgroundColor) classNames.push(SearchResultClasses.searchResult);
+
 
     return <Embed
         embed={{
@@ -253,62 +264,105 @@ export default definePlugin({
             color: "var(--background-secondary)",
             author: {
                 name: <Text variant="text-xs/medium" tag="span">
-                        {[
-                            <span>{isDM ? "Direct Message - " : (guild as Guild).name + " - "}</span>,
-                            ...(isDM
+                    <span>{isDM ? "Direct Message - " : (guild as Guild).name + " - "}</span>
+                    {isDM
                         ? Parser.parse(`<@${dmReceiver.id}>`)
                         : Parser.parse(`<#${channel.id}>`)
-                            )
-                        ]}
+                    }
                 </Text>,
                 iconProxyURL: guild
                     ? `https://${window.GLOBAL_ENV.CDN_HOST}/icons/${guild.id}/${guild.icon}.png`
                     : `https://${window.GLOBAL_ENV.CDN_HOST}/avatars/${dmReceiver.id}/${dmReceiver.avatar}`
             }
         }}
-            renderDescription={() => {
-                return <div key={message.id} className={classNames.join(" ")} >
+        renderDescription={() => (
+            <div key={message.id} className={classes(SearchResultClasses.message, settings.store.messageBackgroundColor && SearchResultClasses.searchResult)}>
                 <ChannelMessage
                     id={`message-link-embeds-${message.id}`}
                     message={message}
                     channel={channel}
                     subscribeToComponentDispatch={false}
                 />
-                </div >;
-            }}
+            </div>
+        )}
     />;
-    },
+}
 
-    automodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
+function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
     const { message, channel, guildID } = props;
 
     const isDM = guildID === "@me";
     const images = getImages(message);
     const { parse } = Parser;
 
-        return <AutomodEmbed
+    return <AutoModEmbed
         channel={channel}
-            childrenAccessories={<Text color="text-muted" variant="text-xs/medium" tag="span">
-                {[
-                    ...(isDM ? parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`) : parse(`<#${channel.id}>`)),
+        childrenAccessories={
+            <Text color="text-muted" variant="text-xs/medium" tag="span">
+                {isDM
+                    ? parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`)
+                    : parse(`<#${channel.id}>`)
+                }
                 <span>{isDM ? " - Direct Message" : " - " + GuildStore.getGuild(channel.guild_id)?.name}</span>
-                ]}
-            </Text>}
+            </Text>
+        }
         compact={false}
-            content={[
-                ...(message.content || !(message.attachments.length > images.length)
+        content={
+            <>
+                {message.content || message.attachments.length <= images.length
                     ? parse(message.content)
                     : [noContent(message.attachments.length, message.embeds.length)]
-                ),
-                ...(images.map<JSX.Element>(a => {
-                    const { width, height } = computeWidthAndHeight(a.width, a.height);
-                    return <div><img src={a.url} width={width} height={height} /></div>;
                 }
-                ))
-            ]}
+                {images.map(a => {
+                    const { width, height } = computeWidthAndHeight(a.width, a.height);
+                    return (
+                        <div>
+                            <img src={a.url} width={width} height={height} />
+                        </div>
+                    );
+                })}
+            </>
+        }
         hideTimestamp={false}
         message={message}
         _messageEmbed="automod"
     />;
+}
+
+export default definePlugin({
+    name: "MessageLinkEmbeds",
+    description: "Adds a preview to messages that link another message",
+    authors: [Devs.TheSun, Devs.Ven],
+    dependencies: ["MessageAccessoriesAPI"],
+    patches: [
+        {
+            find: ".embedCard",
+            replacement: [{
+                match: /function (\i)\(\i\){var \i=\i\.message,\i=\i\.channel.{0,200}\.hideTimestamp/,
+                replace: "$self.AutoModEmbed=$1;$&"
+            }]
+        }
+    ],
+
+    set AutoModEmbed(e: any) {
+        AutoModEmbed = e;
+    },
+
+    settings,
+
+    start() {
+        addAccessory("messageLinkEmbed", props => {
+            if (!messageLinkRegex.test(props.message.content))
+                return null;
+
+            // need to reset the regex because it's global
+            messageLinkRegex.lastIndex = 0;
+
+            return (
+                <ErrorBoundary>
+                    <MessageEmbedAccessory message={props.message} />
+                </ErrorBoundary>
+            );
+        }, 4 /* just above rich embeds */);
     },
 });

src/plugins/messageLogger/deleteStyleOverlay.css

@@ -0,0 +1,3 @@
+.messagelogger-deleted {
+    background-color: rgba(240 71 71 / 15%);
+}

src/plugins/messageLogger/deleteStyleText.css

@@ -0,0 +1,8 @@
+.messagelogger-deleted div {
+    color: #f04747;
+}
+
+.messagelogger-deleted a {
+    color: #be3535;
+    text-decoration: underline;
+}

src/plugins/messageLogger/index.tsx

@@ -18,50 +18,86 @@
 
 import "./messageLogger.css";
 
+import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { Settings } from "@api/settings";
+import { disableStyle, enableStyle } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import Logger from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
-import { moment, Parser, Timestamp, UserStore } from "@webpack/common";
+import { findByPropsLazy } from "@webpack";
+import { FluxDispatcher, i18n, Menu, moment, Parser, Timestamp, UserStore } from "@webpack/common";
 
-function addDeleteStyleClass() {
+import overlayStyle from "./deleteStyleOverlay.css?managed";
+import textStyle from "./deleteStyleText.css?managed";
+
+const styles = findByPropsLazy("edited", "communicationDisabled", "isSystemMessage");
+
+function addDeleteStyle() {
     if (Settings.plugins.MessageLogger.deleteStyle === "text") {
-        document.body.classList.remove("messagelogger-red-overlay");
-        document.body.classList.add("messagelogger-red-text");
+        enableStyle(textStyle);
+        disableStyle(overlayStyle);
     } else {
-        document.body.classList.remove("messagelogger-red-text");
-        document.body.classList.add("messagelogger-red-overlay");
+        disableStyle(textStyle);
+        enableStyle(overlayStyle);
     }
 }
 
+const MENU_ITEM_ID = "message-logger-remove-history";
+const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => {
+    const { message } = props;
+    const { deleted, editHistory, id, channel_id } = message;
+
+    if (!deleted && !editHistory?.length) return;
+    if (children.some(c => c?.props?.id === MENU_ITEM_ID)) return;
+
+    children.push((
+        <Menu.MenuItem
+            id={MENU_ITEM_ID}
+            key={MENU_ITEM_ID}
+            label="Remove Message History"
+            action={() => {
+                if (message.deleted) {
+                    FluxDispatcher.dispatch({
+                        type: "MESSAGE_DELETE",
+                        channelId: channel_id,
+                        id,
+                        mlDeleted: true
+                    });
+                } else {
+                    message.editHistory = [];
+                }
+            }}
+        />
+    ));
+};
+
 export default definePlugin({
     name: "MessageLogger",
     description: "Temporarily logs deleted and edited messages.",
     authors: [Devs.rushii, Devs.Ven],
+    dependencies: ["ContextMenuAPI", "MenuItemDeobfuscatorAPI"],
 
     start() {
-        addDeleteStyleClass();
+        addDeleteStyle();
+        addContextMenuPatch("message", patchMessageContextMenu);
     },
 
     stop() {
-        document.querySelectorAll(".messageLogger-deleted").forEach(e => e.remove());
-        document.querySelectorAll(".messageLogger-edited").forEach(e => e.remove());
-        document.body.classList.remove("messagelogger-red-overlay");
-        document.body.classList.remove("messagelogger-red-text");
+        removeContextMenuPatch("message", patchMessageContextMenu);
     },
 
     renderEdit(edit: { timestamp: any, content: string; }) {
         return (
             <ErrorBoundary noop>
-                <div className="messageLogger-edited">
+                <div className="messagelogger-edited">
                     {Parser.parse(edit.content)}
                     <Timestamp
                         timestamp={edit.timestamp}
                         isEdited={true}
                         isInline={false}
                     >
-                        <span>{" "}(edited)</span>
+                        <span className={styles.edited}>{" "}({i18n.Messages.MESSAGE_EDITED})</span>
                     </Timestamp>
                 </div>
             </ErrorBoundary>
@@ -84,7 +120,7 @@ export default definePlugin({
                 { label: "Red text", value: "text", default: true },
                 { label: "Red overlay", value: "overlay" }
             ],
-            onChange: () => addDeleteStyleClass()
+            onChange: () => addDeleteStyle()
         },
         ignoreBots: {
             type: OptionType.BOOLEAN,
@@ -98,7 +134,7 @@ export default definePlugin({
         }
     },
 
-    handleDelete(cache: any, data: { ids: string[], id: string; }, isBulk: boolean) {
+    handleDelete(cache: any, data: { ids: string[], id: string; mlDeleted?: boolean; }, isBulk: boolean) {
         try {
             if (cache == null || (!isBulk && !cache.has(data.id))) return cache;
 
@@ -110,7 +146,8 @@ export default definePlugin({
                 if (!msg) return;
 
                 const EPHEMERAL = 64;
-                const shouldIgnore = (msg.flags & EPHEMERAL) === EPHEMERAL ||
+                const shouldIgnore = data.mlDeleted ||
+                    (msg.flags & EPHEMERAL) === EPHEMERAL ||
                     ignoreBots && msg.author?.bot ||
                     ignoreSelf && msg.author?.id === myId;
 
@@ -147,7 +184,7 @@ export default definePlugin({
                     replace:
                         "MESSAGE_DELETE:function($1){" +
                         "   var cache = $2getOrCreate($1.channelId);" +
-                        "   cache = Vencord.Plugins.plugins.MessageLogger.handleDelete(cache, $1, false);" +
+                        "   cache = $self.handleDelete(cache, $1, false);" +
                         "   $2commit(cache);" +
                         "},"
                 },
@@ -157,7 +194,7 @@ export default definePlugin({
                     replace:
                         "MESSAGE_DELETE_BULK:function($1){" +
                         "   var cache = $2getOrCreate($1.channelId);" +
-                        "   cache = Vencord.Plugins.plugins.MessageLogger.handleDelete(cache, $1, true);" +
+                        "   cache = $self.handleDelete(cache, $1, true);" +
                         "   $2commit(cache);" +
                         "},"
                 },
@@ -166,8 +203,9 @@ export default definePlugin({
                     match: /(MESSAGE_UPDATE:function\((\w)\).+?)\.update\((\w)/,
                     replace: "$1" +
                         ".update($3,m =>" +
+                        "   (($2.message.flags & 64) === 64 || (Vencord.Settings.plugins.MessageLogger.ignoreBots && $2.message.author?.bot) || (Vencord.Settings.plugins.MessageLogger.ignoreSelf && $2.message.author?.id === Vencord.Webpack.Common.UserStore.getCurrentUser().id)) ? m :" +
                         "   $2.message.content !== m.editHistory?.[0]?.content && $2.message.content !== m.content ?" +
-                        "       m.set('editHistory',[...(m.editHistory || []), Vencord.Plugins.plugins.MessageLogger.makeEdit($2.message, m)]) :" +
+                        "       m.set('editHistory',[...(m.editHistory || []), $self.makeEdit($2.message, m)]) :" +
                         "       m" +
                         ")" +
                         ".update($3"
@@ -252,7 +290,7 @@ export default definePlugin({
                 },
                 {
                     match: /\["className","attachment","inlineMedia".+?className:/,
-                    replace: "$& (deleted ? 'messageLogger-deleted-attachment ' : '') +"
+                    replace: "$& (deleted ? 'messagelogger-deleted-attachment ' : '') +"
                 }
             ]
         },
@@ -263,14 +301,9 @@ export default definePlugin({
             find: "Message must not be a thread starter message",
             replacement: [
                 {
-                    // Write message.deleted to deleted var
-                    match: /var (\w)=(\w).id,(?=\w=\w.message)/,
-                    replace: "var $1=$2.id,deleted=$2.message.deleted,"
-                },
-                {
-                    // Append messageLogger-deleted to classNames if deleted
+                    // Append messagelogger-deleted to classNames if deleted
                     match: /\)\("li",\{(.+?),className:/,
-                    replace: ")(\"li\",{$1,className:(deleted ? \"messageLogger-deleted \" : \"\")+"
+                    replace: ")(\"li\",{$1,className:(arguments[0].message.deleted ? \"messagelogger-deleted \" : \"\")+"
                 }
             ]
         },
@@ -283,7 +316,7 @@ export default definePlugin({
                 {
                     // Render editHistory in the deepest div for message content
                     match: /(\)\("div",\{id:.+?children:\[)/,
-                    replace: "$1 (arguments[0].message.editHistory.length > 0 ? arguments[0].message.editHistory.map(edit => Vencord.Plugins.plugins.MessageLogger.renderEdit(edit)) : null), "
+                    replace: "$1 (arguments[0].message.editHistory.length > 0 ? arguments[0].message.editHistory.map(edit => $self.renderEdit(edit)) : null), "
                 }
             ]
         },

src/plugins/messageLogger/messageLogger.css

@@ -1,27 +1,22 @@
-.messagelogger-red-overlay .messageLogger-deleted {
-    background-color: rgba(240, 71, 71, 0.15);
-}
-.messagelogger-red-text .messageLogger-deleted div {
-    color: #f04747;
-}
-
-.messageLogger-deleted [class^="buttons"] {
+.messagelogger-deleted [class^="buttons"] {
     display: none;
 }
 
-.messageLogger-deleted-attachment {
+.messagelogger-deleted-attachment,
+.messagelogger-deleted div iframe {
     filter: grayscale(1);
+    transition: 150ms filter ease-in-out;
 }
 
-.messageLogger-deleted-attachment:hover {
+.messagelogger-deleted-attachment:hover,
+.messagelogger-deleted div iframe:hover {
     filter: grayscale(0);
-    transition: 250ms filter linear;
 }
 
-.theme-dark .messageLogger-edited {
+.theme-dark .messagelogger-edited {
     filter: brightness(80%);
 }
 
-.theme-light .messageLogger-edited {
+.theme-light .messagelogger-edited {
     opacity: 0.5;
 }

src/plugins/moyai.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
+import { definePluginSettings } from "@api/settings";
 import { makeRange } from "@components/PluginSettings/components/SettingSliderComponent";
 import { Devs } from "@utils/constants";
 import { sleep } from "@utils/misc";
@@ -54,15 +54,36 @@ const MOYAI = "🗿";
 const MOYAI_URL =
     "https://raw.githubusercontent.com/MeguminSama/VencordPlugins/main/plugins/moyai/moyai.mp3";
 
+const settings = definePluginSettings({
+    volume: {
+        description: "Volume of the 🗿🗿🗿",
+        type: OptionType.SLIDER,
+        markers: makeRange(0, 1, 0.1),
+        default: 0.5,
+        stickToMarkers: false
+    },
+    triggerWhenUnfocused: {
+        description: "Trigger the 🗿 even when the window is unfocused",
+        type: OptionType.BOOLEAN,
+        default: true
+    },
+    ignoreBots: {
+        description: "Ignore bots",
+        type: OptionType.BOOLEAN,
+        default: true
+    }
+});
+
 export default definePlugin({
     name: "Moyai",
     authors: [Devs.Megu, Devs.Nuckyz],
     description: "🗿🗿🗿🗿🗿🗿🗿🗿",
+    settings,
 
     async onMessage(e: IMessageCreate) {
         if (e.optimistic || e.type !== "MESSAGE_CREATE") return;
         if (e.message.state === "SENDING") return;
-        if (Settings.plugins.Moyai.ignoreBots && e.message.author?.bot) return;
+        if (settings.store.ignoreBots && e.message.author?.bot) return;
         if (!e.message.content) return;
         if (e.channelId !== SelectedChannelStore.getChannelId()) return;
 
@@ -76,7 +97,7 @@ export default definePlugin({
 
     onReaction(e: IReactionAdd) {
         if (e.optimistic || e.type !== "MESSAGE_REACTION_ADD") return;
-        if (Settings.plugins.Moyai.ignoreBots && UserStore.getUser(e.userId)?.bot) return;
+        if (settings.store.ignoreBots && UserStore.getUser(e.userId)?.bot) return;
         if (e.channelId !== SelectedChannelStore.getChannelId()) return;
 
         const name = e.emoji.name.toLowerCase();
@@ -103,28 +124,6 @@ export default definePlugin({
         FluxDispatcher.unsubscribe("MESSAGE_CREATE", this.onMessage);
         FluxDispatcher.unsubscribe("MESSAGE_REACTION_ADD", this.onReaction);
         FluxDispatcher.unsubscribe("VOICE_CHANNEL_EFFECT_SEND", this.onVoiceChannelEffect);
-    },
-
-    options: {
-        volume: {
-            description: "Volume of the 🗿🗿🗿",
-            type: OptionType.SLIDER,
-            markers: makeRange(0, 1, 0.1),
-            default: 0.5,
-            stickToMarkers: false,
-        },
-        triggerWhenUnfocused: {
-            description: "Trigger the 🗿 even when the window is unfocused",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: false,
-        },
-        ignoreBots: {
-            description: "Ignore bots",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: false,
-        }
     }
 });
 
@@ -158,9 +157,9 @@ function getMoyaiCount(message: string) {
 }
 
 function boom() {
-    if (!Settings.plugins.Moyai.triggerWhenUnfocused && !document.hasFocus()) return;
+    if (!settings.store.triggerWhenUnfocused && !document.hasFocus()) return;
     const audioElement = document.createElement("audio");
     audioElement.src = MOYAI_URL;
-    audioElement.volume = Settings.plugins.Moyai.volume;
+    audioElement.volume = settings.store.volume;
     audioElement.play();
 }

src/plugins/noBlockedMessages.ts

@@ -37,16 +37,19 @@ export default definePlugin({
                 }
             ]
         },
-        {
-            find: "displayName=\"MessageStore\"",
+        ...[
+            'displayName="MessageStore"',
+            'displayName="ReadStateStore"'
+        ].map(find => ({
+            find,
             predicate: () => Settings.plugins.NoBlockedMessages.ignoreBlockedMessages === true,
             replacement: [
                 {
-                    match: /(?<=MESSAGE_CREATE:function\((\w)\){var \w=\w\.channelId,\w=\w\.message,\w=\w\.isPushNotification,\w=\w\.\w\.getOrCreate\(\w\));/,
-                    replace: ";if(Vencord.Plugins.plugins.NoBlockedMessages.isBlocked(n))return;"
+                    match: /(?<=MESSAGE_CREATE:function\((\i)\){)/,
+                    replace: (_, props) => `if($self.isBlocked(${props}.message))return;`
                 }
             ]
-        }
+        }))
     ],
     options: {
         ignoreBlockedMessages: {

src/plugins/noDevtoolsWarning.ts

@@ -24,7 +24,7 @@ migratePluginSettings("NoDevtoolsWarning", "STFU");
 
 export default definePlugin({
     name: "NoDevtoolsWarning",
-    description: "Disables the 'HOLD UP' banner in the console",
+    description: "Disables the 'HOLD UP' banner in the console. As a side effect, also prevents Discord from hiding your token, which prevents random logouts.",
     authors: [Devs.Ven],
     patches: [{
         find: "setDevtoolsCallbacks",

src/plugins/noF1.ts

@@ -16,9 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { migratePluginSettings } from "@api/settings";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
+migratePluginSettings("NoF1", "No F1");
 export default definePlugin({
     name: "NoF1",
     description: "Disables F1 help bind.",

src/plugins/noRPC.desktop.ts

@@ -16,14 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { migratePluginSettings } from "@api/settings";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
+migratePluginSettings("NoRPC", "No RPC");
 export default definePlugin({
     name: "NoRPC",
     description: "Disables Discord's RPC server.",
     authors: [Devs.Cyn],
-    target: "DESKTOP",
     patches: [
         {
             find: '.ensureModule("discord_rpc")',

src/plugins/noReplyMention.tsx

@@ -51,7 +51,7 @@ export default definePlugin({
             replacement: {
                 match: /CREATE_PENDING_REPLY:function\((.{1,2})\){/,
                 replace:
-                    "CREATE_PENDING_REPLY:function($1){$1.shouldMention=Vencord.Plugins.plugins.NoReplyMention.shouldMention($1);",
+                    "CREATE_PENDING_REPLY:function($1){$1.shouldMention=$self.shouldMention($1);",
             },
         },
     ],

src/plugins/noScreensharePreview.ts

@@ -27,12 +27,12 @@ export default definePlugin({
         {
             find: '("ApplicationStreamPreviewUploadManager")',
             replacement: [
-                ".\\.default\\.makeChunkedRequest\\(",
-                ".{1,2}\\..\\.post\\({url:"
+                "\\i\\.default\\.makeChunkedRequest\\(",
+                "\\i\\.\\i\\.post\\({url:"
             ].map(match => ({
-                match: new RegExp(`return\\[(?<code>\\d),${match}.\\..{1,3}\\.STREAM_PREVIEW.+?}\\)\\];`),
-                replace: 'return[$<code>,Promise.resolve({body:"",status:204})];'
+                match: new RegExp(`(?=return\\[(\\d),${match}\\i\\.\\i\\.STREAM_PREVIEW.+?}\\)\\];)`),
+                replace: (_, code) => `return[${code},Promise.resolve({body:"",status:204})];`
             }))
-        },
-    ],
+        }
+    ]
 });

src/plugins/noSystemBadge.desktop.ts

@@ -23,7 +23,6 @@ export default definePlugin({
     name: "NoSystemBadge",
     description: "Disables the taskbar and system tray unread count badge.",
     authors: [Devs.rushii],
-    target: "DESKTOP",
     patches: [
         {
             find: "setSystemTrayApplications:function",

src/plugins/noTrack.ts

@@ -21,8 +21,8 @@ import definePlugin from "@utils/types";
 
 export default definePlugin({
     name: "NoTrack",
-    description: "Disable Discord's tracking and crash reporting",
-    authors: [Devs.Cyn],
+    description: "Disable Discord's tracking ('science'), metrics and Sentry crash reporting",
+    authors: [Devs.Cyn, Devs.Ven, Devs.Nuckyz],
     required: true,
     patches: [
         {
@@ -35,9 +35,22 @@ export default definePlugin({
         {
             find: "window.DiscordSentry=",
             replacement: {
-                match: /window\.DiscordSentry=function.+\}\(\)/,
-                replace: "",
+                match: /^.+$/,
+                replace: "()=>{}",
             }
+        },
+        {
+            find: ".METRICS,",
+            replacement: [
+                {
+                    match: /this\._intervalId.+?12e4\)/,
+                    replace: ""
+                },
+                {
+                    match: /(?<=increment=function\(\i\){)/,
+                    replace: "return;"
+                }
+            ]
         }
     ]
 });

src/plugins/platformIndicators.tsx

@@ -23,11 +23,11 @@ import { Settings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { findByCodeLazy, findStoreLazy } from "@webpack";
 import { PresenceStore, Tooltip, UserStore } from "@webpack/common";
 import { User } from "discord-types/general";
 
-const SessionStore = findByPropsLazy("getActiveSession");
+const SessionsStore = findStoreLazy("SessionsStore");
 
 function Icon(path: string, viewBox = "0 0 24 24") {
     return ({ color, tooltip }: { color: string; tooltip: string; }) => (
@@ -55,7 +55,7 @@ const Icons = {
 };
 type Platform = keyof typeof Icons;
 
-const getStatusColor = findByCodeLazy("STATUS_YELLOW", "TWITCH", "STATUS_GREY");
+const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE");
 
 const PlatformIcon = ({ platform, status }: { platform: Platform, status: string; }) => {
     const tooltip = platform[0].toUpperCase() + platform.slice(1);
@@ -70,7 +70,7 @@ const PlatformIndicator = ({ user, inline = false, marginLeft = "4px" }: { user:
     if (!user || user.bot) return null;
 
     if (user.id === UserStore.getCurrentUser().id) {
-        const sessions = SessionStore.getSessions();
+        const sessions = SessionsStore.getSessions();
         if (typeof sessions !== "object") return null;
         const sortedSessions = Object.values(sessions).sort(({ status: a }: any, { status: b }: any) => {
             if (a === b) return 0;
@@ -156,7 +156,7 @@ const indicatorLocations = {
 export default definePlugin({
     name: "PlatformIndicators",
     description: "Adds platform indicators (Desktop, Mobile, Web...) to users",
-    authors: [Devs.kemo, Devs.TheSun],
+    authors: [Devs.kemo, Devs.TheSun, Devs.Nuckyz],
     dependencies: ["MessageDecorationsAPI", "MemberListDecoratorsAPI"],
 
     start() {
@@ -185,6 +185,55 @@ export default definePlugin({
         });
     },
 
+    patches: [
+        {
+            find: ".Masks.STATUS_ONLINE_MOBILE",
+            predicate: () => Settings.plugins.PlatformIndicators.colorMobileIndicator,
+            replacement: [
+                {
+                    // Return the STATUS_ONLINE_MOBILE mask if the user is on mobile, no matter the status
+                    match: /(?<=return \i\.\i\.Masks\.STATUS_TYPING;)(.+?)(\i)\?(\i\.\i\.Masks\.STATUS_ONLINE_MOBILE):/,
+                    replace: (_, rest, isMobile, mobileMask) => `if(${isMobile})return ${mobileMask};${rest}`
+                },
+                {
+                    // Return the STATUS_ONLINE_MOBILE mask if the user is on mobile, no matter the status
+                    match: /(switch\(\i\){case \i\.\i\.ONLINE:return )(\i)\?({.+?}):/,
+                    replace: (_, rest, isMobile, component) => `if(${isMobile})return${component};${rest}`
+                }
+            ]
+        },
+        {
+            find: ".AVATAR_STATUS_MOBILE_16;",
+            predicate: () => Settings.plugins.PlatformIndicators.colorMobileIndicator,
+            replacement: [
+                {
+                    // Return the AVATAR_STATUS_MOBILE size mask if the user is on mobile, no matter the status
+                    match: /\i===\i\.\i\.ONLINE&&(?=.{0,70}\.AVATAR_STATUS_MOBILE_16;)/,
+                    replace: ""
+                },
+                {
+                    // Fix sizes for mobile indicators which aren't online
+                    match: /(?<=\(\i\.status,)(\i)(?=,(\i),\i\))/,
+                    replace: (_, userStatus, isMobile) => `${isMobile}?"online":${userStatus}`
+                },
+                {
+                    // Make isMobile true no matter the status
+                    match: /(?<=\i&&!\i)&&\i===\i\.\i\.ONLINE/,
+                    replace: ""
+                }
+            ]
+        },
+        {
+            find: "isMobileOnline=function",
+            predicate: () => Settings.plugins.PlatformIndicators.colorMobileIndicator,
+            replacement: {
+                // Make isMobileOnline return true no matter what is the user status
+                match: /(?<=\i\[\i\.\i\.MOBILE\])===\i\.\i\.ONLINE/,
+                replace: "!= null"
+            }
+        }
+    ],
+
     options: {
         ...Object.fromEntries(
             Object.entries(indicatorLocations).map(([key, value]) => {
@@ -196,6 +245,12 @@ export default definePlugin({
                     default: true
                 }];
             })
-        )
+        ),
+        colorMobileIndicator: {
+            type: OptionType.BOOLEAN,
+            description: "Whether to make the mobile indicator match the color of the user status.",
+            default: true,
+            restartNeeded: true
+        }
     }
 });

src/plugins/pronoundb/components/PronounsChatComponent.tsx

@@ -17,39 +17,63 @@
 */
 
 import { Settings } from "@api/settings";
-import { classes, useAwaiter } from "@utils/misc";
+import { classes } from "@utils/misc";
 import { findByPropsLazy } from "@webpack";
 import { UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
-import { fetchPronouns, formatPronouns } from "../pronoundbUtils";
-import { PronounMapping } from "../types";
+import { awaitAndFormatPronouns } from "../pronoundbUtils";
 
 const styles: Record<string, string> = findByPropsLazy("timestampInline");
 
-export default function PronounsChatComponentWrapper({ message }: { message: Message; }) {
+function shouldShow(message: Message): boolean {
+    // Respect showInMessages
+    if (!Settings.plugins.PronounDB.showInMessages)
+        return false;
     // Don't bother fetching bot or system users
     if (message.author.bot || message.author.system)
-        return null;
+        return false;
     // Respect showSelf options
     if (!Settings.plugins.PronounDB.showSelf && message.author.id === UserStore.getCurrentUser().id)
+        return false;
+
+    return true;
+}
+
+export function PronounsChatComponentWrapper({ message }: { message: Message; }) {
+    if (!shouldShow(message))
         return null;
 
     return <PronounsChatComponent message={message} />;
 }
 
-function PronounsChatComponent({ message }: { message: Message; }) {
-    const [result, , isPending] = useAwaiter(() => fetchPronouns(message.author.id), {
-        fallbackValue: null,
-        onError: e => console.error("Fetching pronouns failed: ", e)
-    });
+export function CompactPronounsChatComponentWrapper({ message }: { message: Message; }) {
+    if (!shouldShow(message))
+        return null;
 
-    // If the promise completed, the result was not "unspecified", and there is a mapping for the code, then return a span with the pronouns
-    if (!isPending && result && result !== "unspecified" && PronounMapping[result]) {
+    return <CompactPronounsChatComponent message={message} />;
+}
+
+function PronounsChatComponent({ message }: { message: Message; }) {
+    const result = awaitAndFormatPronouns(message.author.id);
+    if (result != null) {
         return (
             <span
                 className={classes(styles.timestampInline, styles.timestamp)}
-            >• {formatPronouns(result)}</span>
+            >• {result}</span>
+        );
+    }
+
+    return null;
+}
+
+export function CompactPronounsChatComponent({ message }: { message: Message; }) {
+    const result = awaitAndFormatPronouns(message.author.id);
+    if (result != null) {
+        return (
+            <span
+                className={classes(styles.timestampInline, styles.timestamp, "vc-pronoundb-compact")}
+            >• {result}</span>
         );
     }