ci: fix cding into wrong folder

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

.github/workflows/build.yml

@@ -37,9 +37,12 @@ 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
+                rm -rf dist/*-unpacked Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
 
             - name: Get some values needed for the release
               id: release_values

.github/workflows/publish.yml

@@ -35,15 +35,15 @@ jobs:
 
             - name: Publish extension
               run: |
-                cd dist/extension-unpacked
-
                 # Do not fail so that even if chrome fails, firefox gets a shot. But also store exit code to fail workflow later
                 EXIT_CODE=0
 
                 # Chrome
+                cd dist/chromium-unpacked
                 pnpx chrome-webstore-upload-cli@2.1.0 upload --auto-publish || EXIT_CODE=$?
 
                 # Firefox
+                cd ../firefox-unpacked
                 npm i -g web-ext@7.4.0 web-ext-submit@7.4.0
                 web-ext-submit || EXIT_CODE=$?
 
@@ -58,4 +58,3 @@ jobs:
                 # Firefox
                 WEB_EXT_API_KEY: ${{ secrets.WEBEXT_USER }}
                 WEB_EXT_API_SECRET: ${{ secrets.WEBEXT_SECRET }}
-

.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 }}
@@ -50,7 +50,7 @@ jobs:
                 export CHROMIUM_BIN=$(which chromium-browser)
                 export USE_CANARY=true
 
-                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 }}

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
             - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
             - name: Use Node.js 18
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
                   cache: "pnpm"

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

@@ -6,7 +6,7 @@ The cutest Discord client mod
 
 -   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
+    -   Some highlights: SpotifyControls, GameActivityToggle, 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!)

browser/GMPolyfill.js

@@ -59,8 +59,8 @@ async function checkCors(url, method) {
     const origin = headers["access-control-allow-origin"];
     if (origin !== "*" && origin !== window.location.origin) return false;
 
-    const methods = headers["access-control-allow-methods"]?.split(/,\s/g);
+    const methods = headers["access-control-allow-methods"]?.toLowerCase().split(/,\s/g);
-    if (methods && !methods.includes(method)) return false;
+    if (methods && !methods.includes(method.toLowerCase())) return false;
 
     return true;
 }

browser/background.js

@@ -0,0 +1,32 @@
+/**
+ * @template T
+ * @param {T[]} arr
+ * @param {(v: T) => boolean} predicate
+ */
+function removeFirst(arr, predicate) {
+    const idx = arr.findIndex(predicate);
+    if (idx !== -1) arr.splice(idx, 1);
+}
+
+chrome.webRequest.onHeadersReceived.addListener(
+    ({ responseHeaders, type, url }) => {
+        if (!responseHeaders) return;
+
+        if (type === "main_frame") {
+            // In main frame requests, the CSP needs to be removed to enable fetching of custom css
+            // as desired by the user
+            removeFirst(responseHeaders, h => h.name.toLowerCase() === "content-security-policy");
+        } else if (type === "stylesheet" && url.startsWith("https://raw.githubusercontent.com")) {
+            // Most users will load css from GitHub, but GitHub doesn't set the correct content type,
+            // so we fix it here
+            removeFirst(responseHeaders, h => h.name.toLowerCase() === "content-type");
+            responseHeaders.push({
+                name: "Content-Type",
+                value: "text/css"
+            });
+        }
+        return { responseHeaders };
+    },
+    { urls: ["https://raw.githubusercontent.com/*", "*://*.discord.com/*"], types: ["main_frame", "stylesheet"] },
+    ["blocking", "responseHeaders"]
+);

browser/manifest.json

@@ -21,7 +21,8 @@
         {
             "run_at": "document_start",
             "matches": ["*://*.discord.com/*"],
-            "js": ["content.js"]
+            "js": ["content.js"],
+            "all_frames": true
         }
     ],
 

browser/manifestv2.json

@@ -0,0 +1,41 @@
+{
+    "manifest_version": 2,
+    "minimum_chrome_version": "91",
+
+    "name": "Vencord Web",
+    "description": "The cutest Discord mod now in your browser",
+    "author": "Vendicated",
+    "homepage_url": "https://github.com/Vendicated/Vencord",
+    "icons": {
+        "128": "icon.png"
+    },
+
+    "permissions": [
+        "webRequest",
+        "webRequestBlocking",
+        "*://*.discord.com/*",
+        "https://raw.githubusercontent.com/*"
+    ],
+
+    "content_scripts": [
+        {
+            "run_at": "document_start",
+            "matches": ["*://*.discord.com/*"],
+            "js": ["content.js"],
+            "all_frames": true
+        }
+    ],
+
+    "background": {
+        "scripts": ["background.js"]
+    },
+
+    "web_accessible_resources": ["dist/Vencord.js", "dist/Vencord.css"],
+
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "vencord-firefox@vendicated.dev",
+            "strict_min_version": "91.0"
+        }
+    }
+}

browser/modifyResponseHeaders.json

@@ -15,7 +15,7 @@
             ]
         },
         "condition": {
-            "resourceTypes": ["main_frame"]
+            "resourceTypes": ["main_frame", "sub_frame"]
         }
     },
     {

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,11 +21,9 @@ 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 next command may need to be run as admin/sudo depending on your system, and you may need to close and reopen your terminal for pnpm to be in your PATH.
+> :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
@@ -103,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.1.1",
+    "version": "1.1.9",
     "description": "The cutest Discord client mod",
-    "keywords": [],
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
         "url": "https://github.com/Vendicated/Vencord/issues"
@@ -20,9 +19,10 @@
     "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": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern src/userplugins",
-        "lint-styles": "stylelint \"src/**/*.css\"",
+        "lint-styles": "stylelint \"src/**/*.css\" --ignore-pattern src/userplugins",
         "lint:fix": "pnpm lint --fix",
         "test": "pnpm build && pnpm lint && pnpm lint-styles && pnpm testTsc",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
@@ -33,7 +33,9 @@
     "dependencies": {
         "@vap/core": "0.0.12",
         "@vap/shiki": "0.10.3",
-        "fflate": "^0.7.4"
+        "fflate": "^0.7.4",
+        "nanoid": "^4.0.2",
+        "virtual-merge": "^1.0.1"
     },
     "devDependencies": {
         "@types/diff": "^5.0.2",
@@ -59,10 +61,11 @@
         "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"
     },
-    "packageManager": "pnpm@7.13.4",
+    "packageManager": "pnpm@8.1.1",
     "pnpm": {
         "patchedDependencies": {
             "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
@@ -89,6 +92,7 @@
         "sourceDir": "./dist/extension-v2-unpacked"
     },
     "engines": {
-        "node": ">=18"
+        "node": ">=18",
+        "pnpm": ">=8"
     }
 }

scripts/build/build.mjs

@@ -48,6 +48,7 @@ const sourceMapFooter = s => watch ? "" : `//# sourceMappingURL=vencord://${s}.j
 const sourcemap = watch ? "inline" : "external";
 
 await Promise.all([
+    // common preload
     esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/preload.ts"],
@@ -55,12 +56,19 @@ await Promise.all([
         footer: { js: "//# sourceURL=VencordPreload\n" + sourceMapFooter("preload") },
         sourcemap,
     }),
+
+    // Discord Desktop main & renderer
     esbuild.build({
         ...nodeCommonOpts,
-        entryPoints: ["src/patcher.ts"],
+        entryPoints: ["src/main/index.ts"],
         outfile: "dist/patcher.js",
         footer: { js: "//# sourceURL=VencordPatcher\n" + sourceMapFooter("patcher") },
         sourcemap,
+        define: {
+            ...defines,
+            IS_DISCORD_DESKTOP: true,
+            IS_VENCORD_DESKTOP: false
+        }
     }),
     esbuild.build({
         ...commonOpts,
@@ -72,12 +80,48 @@ await Promise.all([
         globalName: "Vencord",
         sourcemap,
         plugins: [
-            globPlugins,
+            globPlugins("discordDesktop"),
             ...commonOpts.plugins
         ],
         define: {
             ...defines,
-            IS_WEB: false
+            IS_WEB: false,
+            IS_DISCORD_DESKTOP: true,
+            IS_VENCORD_DESKTOP: false
+        }
+    }),
+
+    // Vencord Desktop main & renderer
+    esbuild.build({
+        ...nodeCommonOpts,
+        entryPoints: ["src/main/index.ts"],
+        outfile: "dist/vencordDesktopMain.js",
+        footer: { js: "//# sourceURL=VencordDesktopMain\n" + sourceMapFooter("vencordDesktopMain") },
+        sourcemap,
+        define: {
+            ...defines,
+            IS_DISCORD_DESKTOP: false,
+            IS_VENCORD_DESKTOP: true
+        }
+    }),
+    esbuild.build({
+        ...commonOpts,
+        entryPoints: ["src/Vencord.ts"],
+        outfile: "dist/vencordDesktopRenderer.js",
+        format: "iife",
+        target: ["esnext"],
+        footer: { js: "//# sourceURL=VencordDesktopRenderer\n" + sourceMapFooter("vencordDesktopRenderer") },
+        globalName: "Vencord",
+        sourcemap,
+        plugins: [
+            globPlugins("vencordDesktop"),
+            ...commonOpts.plugins
+        ],
+        define: {
+            ...defines,
+            IS_WEB: false,
+            IS_DISCORD_DESKTOP: false,
+            IS_VENCORD_DESKTOP: true
         }
     }),
 ]).catch(err => {

scripts/build/buildWeb.mjs

@@ -36,16 +36,18 @@ const commonOptions = {
     entryPoints: ["browser/Vencord.ts"],
     globalName: "Vencord",
     format: "iife",
-    external: ["plugins", "git-hash"],
+    external: ["plugins", "git-hash", "/assets/*"],
     plugins: [
-        globPlugins,
+        globPlugins("web"),
         ...commonOpts.plugins,
     ],
     target: ["esnext"],
     define: {
         IS_WEB: "true",
         IS_STANDALONE: "true",
-        IS_DEV: JSON.stringify(watch)
+        IS_DEV: JSON.stringify(watch),
+        IS_DISCORD_DESKTOP: "false",
+        IS_VENCORD_DESKTOP: "false"
     }
 };
 
@@ -140,6 +142,7 @@ const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content
 await Promise.all([
     appendCssRuntime,
     buildPluginZip("extension.zip", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], true),
-    buildPluginZip("extension-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], false),
+    buildPluginZip("chromium-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], false),
+    buildPluginZip("firefox-unpacked", ["background.js", "content.js", "manifestv2.json", "icon.png"], false),
 ]);
 

scripts/build/common.mjs

@@ -48,9 +48,9 @@ export const makeAllPackagesExternalPlugin = {
 };
 
 /**
- * @type {import("esbuild").Plugin}
+ * @type {(kind: "web" | "discordDesktop" | "vencordDesktop") => import("esbuild").Plugin}
  */
-export const globPlugins = {
+export const globPlugins = kind => ({
     name: "glob-plugins",
     setup: build => {
         const filter = /^~plugins$/;
@@ -76,8 +76,10 @@ export const globPlugins = {
                     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 === "web" && kind === "discordDesktop") continue;
-                        if (mod === "desktop" && isWeb) continue;
+                        if (mod === "desktop" && kind === "web") continue;
+                        if (mod === "discordDesktop" && kind !== "discordDesktop") continue;
+                        if (mod === "vencordDesktop" && kind !== "vencordDesktop") continue;
                     }
 
                     const mod = `p${i}`;
@@ -93,7 +95,7 @@ export const globPlugins = {
             };
         });
     }
-};
+});
 
 /**
  * @type {import("esbuild").Plugin}
@@ -193,7 +195,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: "discordDesktop" | "vencordDesktop" | "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", "discordDesktop", "vencordDesktop", "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);
+    }
+})();

src/Vencord.ts

@@ -27,20 +27,48 @@ 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 { localStorage } from "./utils/localStorage";
+import { relaunch } from "./utils/native";
+import { getCloudSettings, putCloudSettings } from "./utils/settingsSync";
 import { checkForUpdates, rebuild, update, UpdateLogger } from "./utils/updater";
 import { onceReady } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
 
 export let Components: any;
 
+async function syncSettings() {
+    if (
+        Settings.cloud.settingsSync && // if it's enabled
+        Settings.cloud.authenticated // if cloud integrations are enabled
+    ) {
+        if (localStorage.Vencord_settingsDirty) {
+            await putCloudSettings();
+            delete localStorage.Vencord_settingsDirty;
+        } else if (await getCloudSettings(false)) { // if we synchronized something (false means no sync)
+            // we show a notification here instead of allowing getCloudSettings() to show one to declutter the amount of
+            // potential notifications that might occur. getCloudSettings() will always send a notification regardless if
+            // there was an error to notify the user, but besides that we only want to show one notification instead of all
+            // of the possible ones it has (such as when your settings are newer).
+            showNotification({
+                title: "Cloud Settings",
+                body: "Your settings have been updated! Click here to restart to fully apply changes!",
+                color: "var(--green-360)",
+                onClick: relaunch
+            });
+        }
+    }
+}
+
 async function init() {
     await onceReady;
     startAllPlugins();
     Components = await import("./components");
 
+    syncSettings();
+
     if (!IS_WEB) {
         try {
             const isOutdated = await checkForUpdates();
@@ -48,33 +76,28 @@ async function init() {
 
             if (Settings.autoUpdate) {
                 await update();
-                const needsFullRestart = await rebuild();
+                await rebuild();
-                setTimeout(() => {
+                if (Settings.autoUpdateNotification)
-                    showNotice(
+                    setTimeout(() => showNotification({
-                        "Vencord has been updated!",
+                        title: "Vencord has been updated!",
-                        "Restart",
+                        body: "Click here to restart",
-                        () => {
+                        permanent: true,
-                            if (needsFullRestart)
+                        noPersist: true,
-                                window.DiscordNative.app.relaunch();
+                        onClick: relaunch
-                            else
+                    }), 10_000);
-                                location.reload();
-                        }
-                    );
-                }, 10_000);
                 return;
             }
 
             if (Settings.notifyAboutUpdates)
-                setTimeout(() => {
+                setTimeout(() => showNotification({
-                    showNotice(
+                    title: "A Vencord update is available!",
-                        "A Vencord update is available!",
+                    body: "Click here to view the update",
-                        "View Update",
+                    permanent: true,
-                        () => {
+                    noPersist: true,
-                            popNotice();
+                    onClick() {
                         SettingsRouter.open("VencordUpdater");
                     }
-                    );
+                }), 10_000);
-                }, 10_000);
         } catch (err) {
             UpdateLogger.error("Failed to check for updates", err);
         }
@@ -96,7 +119,7 @@ async function init() {
 
 init();
 
-if (!IS_WEB && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
+if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
     document.addEventListener("DOMContentLoaded", () => {
         document.head.append(Object.assign(document.createElement("style"), {
             id: "vencord-native-titlebar-style",

src/api/Badges.ts

@@ -29,11 +29,12 @@ export enum BadgePosition {
 
 export interface ProfileBadge {
     /** The tooltip to show on hover. Required for image badges */
-    tooltip?: string;
+    description?: string;
     /** Custom component for the badge (tooltip not included) */
     component?: ComponentType<ProfileBadge & BadgeUserArgs>;
     /** The custom image to use */
     image?: string;
+    link?: string;
     /** Action to perform when you click the badge */
     onClick?(): void;
     /** Should the user display this badge? */
@@ -69,17 +70,19 @@ export function removeBadge(badge: ProfileBadge) {
  * Inject badges into the profile badges array.
  * You probably don't need to use this.
  */
-export function inject(badgeArray: ProfileBadge[], args: BadgeUserArgs) {
+export function _getBadges(args: BadgeUserArgs) {
+    const badges = [] as ProfileBadge[];
     for (const badge of Badges) {
         if (!badge.shouldShow || badge.shouldShow(args)) {
             badge.position === BadgePosition.START
-                ? badgeArray.unshift({ ...badge, ...args })
+                ? badges.unshift({ ...badge, ...args })
-                : badgeArray.push({ ...badge, ...args });
+                : badges.push({ ...badge, ...args });
         }
     }
-    (Plugins.BadgeAPI as any).addDonorBadge(badgeArray, args.user.id);
+    const donorBadge = (Plugins.BadgeAPI as any).getDonorBadge(args.user.id);
+    if (donorBadge) badges.unshift(donorBadge);
 
-    return badgeArray;
+    return badges;
 }
 
 export interface BadgeUserArgs {

src/api/Commands/index.ts

@@ -111,6 +111,7 @@ function registerSubCommands(cmd: Command, plugin: string) {
             ...o,
             type: ApplicationCommandType.CHAT_INPUT,
             name: `${cmd.name} ${o.name}`,
+            id: `${o.name}-${cmd.id}`,
             displayName: `${cmd.name} ${o.name}`,
             subCommandPath: [{
                 name: o.name,

src/api/ContextMenu.ts

@@ -19,17 +19,20 @@
 import Logger from "@utils/Logger";
 import type { ReactElement } from "react";
 
+type ContextMenuPatchCallbackReturn = (() => void) | void;
 /**
  * @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
+ * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type NavContextMenuPatchCallback = (children: Array<React.ReactElement>, args?: Array<any>) => void;
+export type NavContextMenuPatchCallback = (children: Array<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 /**
- * @param The navId of the context menu being patched
+ * @param navId 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
+ * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<React.ReactElement>, args?: Array<any>) => void;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -78,6 +81,7 @@ export function removeContextMenuPatch<T extends string | Array<string>>(navId:
 
 /**
  * Remove a global context menu patch
+ * @param patch The patch to be removed
  * @returns Wheter the patch was sucessfully removed
  */
 export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback): boolean {
@@ -87,12 +91,13 @@ export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallba
 /**
  * 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
+ * @param children The context menu children
  */
-export function findGroupChildrenByChildId(id: string, children: Array<React.ReactElement>, itemsArray?: Array<React.ReactElement>): Array<React.ReactElement> | null {
+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;
+        if (child.props?.id === id) return _itemsArray ?? null;
 
         let nextChildren = child.props?.children;
         if (nextChildren) {
@@ -118,13 +123,19 @@ interface ContextMenuProps {
     onClose: (callback: (...args: Array<any>) => any) => void;
 }
 
+const patchedMenus = new WeakSet();
+
 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);
+                const callback = patch(props.children, ...props.contextMenuApiArguments);
+                if (!patchedMenus.has(props)) callback?.();
             } catch (err) {
                 ContextMenuLogger.error(`Patch for ${props.navId} errored,`, err);
             }
@@ -133,9 +144,12 @@ export function _patchContextMenu(props: ContextMenuProps) {
 
     for (const patch of globalPatches) {
         try {
-            patch(props.navId, props.children, props.contextMenuApiArguments);
+            const callback = patch(props.navId, props.children, ...props.contextMenuApiArguments);
+            if (!patchedMenus.has(props)) callback?.();
         } catch (err) {
             ContextMenuLogger.error("Global patch errored,", err);
         }
     }
+
+    patchedMenus.add(props);
 }

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 SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
-export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => void;
+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

@@ -20,6 +20,7 @@ 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";
@@ -33,8 +34,10 @@ export default ErrorBoundary.wrap(function NotificationComponent({
     onClick,
     onClose,
     image,
-    permanent
+    permanent,
-}: NotificationData) {
+    className,
+    dismissOnClick
+}: NotificationData & { className?: string; }) {
     const { timeout, position } = useSettings(["notifications.timeout", "notifications.position"]).notifications;
     const hasFocus = useStateFromStores([WindowStore], () => WindowStore.isFocused());
 
@@ -61,9 +64,13 @@ export default ErrorBoundary.wrap(function NotificationComponent({
 
     return (
         <button
-            className="vc-notification-root"
+            className={classes("vc-notification-root", className)}
             style={position === "bottom-right" ? { bottom: "1rem" } : { top: "3rem" }}
-            onClick={onClick}
+            onClick={() => {
+                onClick?.();
+                if (dismissOnClick !== false)
+                    onClose!();
+            }}
             onContextMenu={e => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -78,7 +85,7 @@ export default ErrorBoundary.wrap(function NotificationComponent({
                     <div className="vc-notification-header">
                         <h2 className="vc-notification-title">{title}</h2>
                         <button
-                            style={{ all: "unset", cursor: "pointer" }}
+                            className="vc-notification-close-btn"
                             onClick={e => {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -86,7 +93,6 @@ export default ErrorBoundary.wrap(function NotificationComponent({
                             }}
                         >
                             <svg
-                                className="vc-notification-close-btn"
                                 width="24"
                                 height="24"
                                 viewBox="0 0 24 24"

src/api/Notifications/Notifications.tsx

@@ -23,6 +23,7 @@ import type { ReactNode } from "react";
 import type { Root } from "react-dom/client";
 
 import NotificationComponent from "./NotificationComponent";
+import { persistNotification } from "./notificationLog";
 
 const NotificationQueue = new Queue();
 
@@ -56,6 +57,10 @@ export interface NotificationData {
     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) {
@@ -72,6 +77,8 @@ function _showNotification(notification: NotificationData, id: number) {
 }
 
 function shouldBeNative() {
+    if (typeof Notification === "undefined") return false;
+
     const { useNative } = Settings.notifications;
     if (useNative === "always") return true;
     if (useNative === "not-focused") return !document.hasFocus();
@@ -86,6 +93,8 @@ export async function requestPermission() {
 }
 
 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, {

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

@@ -3,16 +3,20 @@
     all: unset;
     display: flex;
     flex-direction: column;
-    width: 25vw;
-    min-height: 10vh;
     color: var(--text-normal);
     background-color: var(--background-secondary-alt);
-    position: absolute;
-    z-index: 2147483647;
-    right: 1rem;
     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 {
@@ -40,6 +44,8 @@
 }
 
 .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;
@@ -70,3 +76,47 @@
 .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/SettingsStore.ts

@@ -0,0 +1,69 @@
+/*
+ * 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 { proxyLazy } from "@utils/proxyLazy";
+import { findModuleId, wreq } from "@webpack";
+
+import { Settings } from "./settings";
+
+interface Setting<T> {
+    /**
+     * Get the setting value
+     */
+    getSetting(): T;
+    /**
+     * Update the setting value
+     * @param value The new value
+     */
+    updateSetting(value: T | ((old: T) => T)): Promise<void>;
+    /**
+     * React hook for automatically updating components when the setting is updated
+     */
+    useSetting(): T;
+    settingsStoreApiGroup: string;
+    settingsStoreApiName: string;
+}
+
+const SettingsStores: Array<Setting<any>> | undefined = proxyLazy(() => {
+    const modId = findModuleId('"textAndImages","renderSpoilers"');
+    if (modId == null) return new Logger("SettingsStoreAPI").error("Didn't find stores module.");
+
+    const mod = wreq(modId);
+    if (mod == null) return;
+
+    return Object.values(mod).filter((s: any) => s?.settingsStoreApiGroup) as any;
+});
+
+/**
+ * Get the store for a setting
+ * @param group The setting group
+ * @param name The name of the setting
+ */
+export function getSettingStore<T = any>(group: string, name: string): Setting<T> | undefined {
+    if (!Settings.plugins.SettingsStoreAPI.enabled) throw new Error("Cannot use SettingsStoreAPI without setting as dependency.");
+
+    return SettingsStores?.find(s => s?.settingsStoreApiGroup === group && s?.settingsStoreApiName === name);
+}
+
+/**
+ * getSettingStore but lazy
+ */
+export function getSettingStoreLazy<T = any>(group: string, name: string) {
+    return proxyLazy(() => getSettingStore<T>(group, name));
+}

src/api/index.ts

@@ -28,6 +28,7 @@ import * as $MessagePopover from "./MessagePopover";
 import * as $Notices from "./Notices";
 import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
+import * as $SettingsStore from "./SettingsStore";
 import * as $Styles from "./Styles";
 
 /**
@@ -85,6 +86,10 @@ export const MessageDecorations = $MessageDecorations;
  * An API allowing you to add components to member list users, in both DM's and servers
  */
 export const MemberListDecorators = $MemberListDecorators;
+/**
+ * An API allowing you to read, manipulate and automatically update components based on Discord settings
+ */
+export const SettingsStore = $SettingsStore;
 /**
  * An API allowing you to dynamically load styles
  * a

src/api/settings.ts

@@ -16,9 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { debounce } from "@utils/debounce";
 import IpcEvents from "@utils/IpcEvents";
+import { localStorage } from "@utils/localStorage";
 import Logger from "@utils/Logger";
 import { mergeDefaults } from "@utils/misc";
+import { putCloudSettings } from "@utils/settingsSync";
 import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
 import { React } from "@webpack/common";
 
@@ -28,12 +31,15 @@ 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;
+    macosTranslucency: boolean;
+    disableMinSize: boolean;
     winNativeTitleBar: boolean;
     plugins: {
         [plugin: string]: {
@@ -46,25 +52,44 @@ export interface Settings {
         timeout: number;
         position: "top-right" | "bottom-right";
         useNative: "always" | "never" | "not-focused";
+        logLimit: number;
+    };
+
+    cloud: {
+        authenticated: boolean;
+        url: string;
+        settingsSync: boolean;
+        settingsSyncVersion: number;
     };
 }
 
 const DefaultSettings: Settings = {
     notifyAboutUpdates: true,
     autoUpdate: false,
+    autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
     enableReactDevtools: false,
     frameless: false,
     transparent: false,
     winCtrlQ: false,
+    macosTranslucency: false,
+    disableMinSize: false,
     winNativeTitleBar: false,
     plugins: {},
 
     notifications: {
         timeout: 5000,
         position: "bottom-right",
-        useNative: "not-focused"
+        useNative: "not-focused",
+        logLimit: 50
+    },
+
+    cloud: {
+        authenticated: false,
+        url: "https://api.vencord.dev/",
+        settingsSync: false,
+        settingsSyncVersion: 0
     }
 };
 
@@ -76,6 +101,13 @@ try {
     logger.error("An error occurred while loading the settings. Corrupt settings file?\n", err);
 }
 
+const saveSettingsOnFrequentAction = debounce(async () => {
+    if (Settings.cloud.settingsSync && Settings.cloud.authenticated) {
+        await putCloudSettings();
+        delete localStorage.Vencord_settingsDirty;
+    }
+}, 60_000);
+
 type SubscriptionCallback = ((newValue: any, path: string) => void) & { _path?: string; };
 const subscriptions = new Set<SubscriptionCallback>();
 
@@ -131,12 +163,16 @@ 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);
                 }
             }
             // And don't forget to persist the settings!
+            PlainSettings.cloud.settingsSyncVersion = Date.now();
+            localStorage.Vencord_settingsDirty = true;
+            saveSettingsOnFrequentAction();
             VencordNative.ipc.invoke(IpcEvents.SET_SETTINGS, JSON.stringify(root, null, 4));
             return true;
         }

src/components/ErrorBoundary.tsx

@@ -105,7 +105,7 @@ const ErrorBoundary = LazyComponent(() => {
     };
 }) as
     React.ComponentType<React.PropsWithChildren<Props>> & {
-        wrap<T extends object = any>(Component: React.ComponentType<T>, errorBoundaryProps?: Omit<Props<T>, "wrappedProps">): 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 => (

src/components/PatchHelper.tsx

@@ -19,7 +19,8 @@
 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, Parser, React, Switch, Text, TextInput } from "@webpack/common";
 
@@ -185,9 +186,10 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                 error={error ?? replacementError}
             />
             {!isFunc && (
-                <>
+                <div className="vc-text-selectable">
                     <Forms.FormTitle>Cheat Sheet</Forms.FormTitle>
                     {Object.entries({
+                        "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
                         "$$": "Insert a $",
                         "$&": "Insert the entire match",
                         "$`\u200b": "Insert the substring before the match",
@@ -199,7 +201,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                             {Parser.parse("`" + placeholder + "`")}: {desc}
                         </Forms.FormText>
                     ))}
-                </>
+                </div>
             )}
 
             <Switch

src/components/PluginSettings/PluginModal.tsx

@@ -20,7 +20,8 @@ import { generateId } from "@api/Commands";
 import { useSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { LazyComponent } from "@utils/misc";
+import { Margins } from "@utils/margins";
+import { classes, LazyComponent } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
 import { proxyLazy } from "@utils/proxyLazy";
 import { OptionType, Plugin } from "@utils/types";
@@ -174,7 +175,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     }
 
     return (
-        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
+        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM} className="vc-text-selectable">
             <ModalHeader separator={false}>
                 <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text>
                 <ModalCloseButton onClick={onClose} />
@@ -198,7 +199,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     </div>
                 </Forms.FormSection>
                 {!!plugin.settingsAboutComponent && (
-                    <div style={{ marginBottom: 8 }}>
+                    <div className={classes(Margins.bottom8, "vc-text-selectable")}>
                         <Forms.FormSection>
                             <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
                                 <plugin.settingsAboutComponent tempSettings={tempSettings} />

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

@@ -46,6 +46,7 @@ const cl = classNameFactory("vc-plugins-");
 const logger = new Logger("PluginSettings", "#a6d189");
 
 const InputStyles = findByPropsLazy("inputDefault", "inputWrapper");
+const ButtonClasses = findByPropsLazy("button", "disabled", "enabled");
 
 const CogWheel = LazyComponent(() => findByCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
 const InfoIcon = LazyComponent(() => findByCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
@@ -154,7 +155,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                 <Text variant="text-md/bold" className={cl("name")}>
                     {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
                 </Text>
-                <button role="switch" onClick={() => openModal()} className={classes("button-12Fmur", cl("info-button"))}>
+                <button role="switch" onClick={() => openModal()} className={classes(ButtonClasses.button, cl("info-button"))}>
                     {plugin.options
                         ? <CogWheel />
                         : <InfoIcon width="24" height="24" />}

src/components/Switch.tsx

@@ -18,6 +18,7 @@
 
 import "./Switch.css";
 
+import { classes } from "@utils/misc";
 import { findByPropsLazy } from "@webpack";
 
 interface SwitchProps {
@@ -33,7 +34,7 @@ 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

@@ -41,6 +41,7 @@ function BackupRestoreTab() {
                 Settings Export contains:
                 <ul>
                     <li>&mdash; Custom QuickCSS</li>
+                    <li>&mdash; Theme Links</li>
                     <li>&mdash; Plugin Settings</li>
                 </ul>
             </Text>

src/components/VencordSettings/CloudTab.tsx

@@ -0,0 +1,164 @@
+/*
+ * 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 { showNotification } from "@api/Notifications";
+import { Settings, useSettings } from "@api/settings";
+import { CheckedTextInput } from "@components/CheckedTextInput";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Link } from "@components/Link";
+import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
+import { Margins } from "@utils/margins";
+import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
+import { Alerts, Button, Forms, Switch, Tooltip } from "@webpack/common";
+
+function validateUrl(url: string) {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return "Invalid URL";
+    }
+}
+
+async function eraseAllData() {
+    const res = await fetch(new URL("/v1/", getCloudUrl()), {
+        method: "DELETE",
+        headers: new Headers({
+            Authorization: await getCloudAuth()
+        })
+    });
+
+    if (!res.ok) {
+        cloudLogger.error(`Failed to erase data, API returned ${res.status}`);
+        showNotification({
+            title: "Cloud Integrations",
+            body: `Could not erase all data (API returned ${res.status}), please contact support.`,
+            color: "var(--red-360)"
+        });
+        return;
+    }
+
+    Settings.cloud.authenticated = false;
+    await deauthorizeCloud();
+
+    showNotification({
+        title: "Cloud Integrations",
+        body: "Successfully erased all data.",
+        color: "var(--green-360)"
+    });
+}
+
+function SettingsSyncSection() {
+    const { cloud } = useSettings(["cloud.authenticated", "cloud.settingsSync"]);
+    const sectionEnabled = cloud.authenticated && cloud.settingsSync;
+
+    return (
+        <Forms.FormSection title="Settings Sync" className={Margins.top16}>
+            <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
+                Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with
+                minimal effort.
+            </Forms.FormText>
+            <Switch
+                key="cloud-sync"
+                disabled={!cloud.authenticated}
+                value={cloud.settingsSync}
+                onChange={v => { cloud.settingsSync = v; }}
+            >
+                Settings Sync
+            </Switch>
+            <div className="vc-cloud-settings-sync-grid">
+                <Button
+                    size={Button.Sizes.SMALL}
+                    disabled={!sectionEnabled}
+                    onClick={() => putCloudSettings()}
+                >Sync to Cloud</Button>
+                <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
+                    {({ onMouseLeave, onMouseEnter }) => (
+                        <Button
+                            onMouseLeave={onMouseLeave}
+                            onMouseEnter={onMouseEnter}
+                            size={Button.Sizes.SMALL}
+                            color={Button.Colors.RED}
+                            disabled={!sectionEnabled}
+                            onClick={() => getCloudSettings(true, true)}
+                        >Sync from Cloud</Button>
+                    )}
+                </Tooltip>
+                <Button
+                    size={Button.Sizes.SMALL}
+                    color={Button.Colors.RED}
+                    disabled={!sectionEnabled}
+                    onClick={() => deleteCloudSettings()}
+                >Delete Cloud Settings</Button>
+            </div>
+        </Forms.FormSection>
+    );
+}
+
+function CloudTab() {
+    const settings = useSettings(["cloud.authenticated", "cloud.url"]);
+
+    return (
+        <>
+            <Forms.FormSection title="Cloud Settings" className={Margins.top16}>
+                <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
+                    Vencord comes with a cloud integration that adds goodies like settings sync across devices.
+                    It <Link href="https://vencord.dev/cloud/privacy">respects your privacy</Link>, and
+                    the <Link href="https://github.com/Vencord/Backend">source code</Link> is AGPL 3.0 licensed so you
+                    can host it yourself.
+                </Forms.FormText>
+                <Switch
+                    key="backend"
+                    value={settings.cloud.authenticated}
+                    onChange={v => { v && authorizeCloud(); if (!v) settings.cloud.authenticated = v; }}
+                    note="This will request authorization if you have not yet set up cloud integrations."
+                >
+                    Enable Cloud Integrations
+                </Switch>
+                <Forms.FormTitle tag="h5">Backend URL</Forms.FormTitle>
+                <Forms.FormText className={Margins.bottom8}>
+                    Which backend to use when using cloud integrations.
+                </Forms.FormText>
+                <CheckedTextInput
+                    key="backendUrl"
+                    value={settings.cloud.url}
+                    onChange={v => { settings.cloud.url = v; settings.cloud.authenticated = false; deauthorizeCloud(); }}
+                    validate={validateUrl}
+                />
+                <Button
+                    className={Margins.top8}
+                    size={Button.Sizes.MEDIUM}
+                    color={Button.Colors.RED}
+                    disabled={!settings.cloud.authenticated}
+                    onClick={() => Alerts.show({
+                        title: "Are you sure?",
+                        body: "Once your data is erased, we cannot recover it. There's no going back!",
+                        onConfirm: eraseAllData,
+                        confirmText: "Erase it!",
+                        confirmColor: "vc-cloud-erase-data-danger-btn",
+                        cancelText: "Nevermind"
+                    })}
+                >Erase All Data</Button>
+                <Forms.FormDivider className={Margins.top16} />
+            </Forms.FormSection >
+            <SettingsSyncSection />
+        </>
+    );
+}
+
+export default ErrorBoundary.wrap(CloudTab);

src/components/VencordSettings/ThemesTab.tsx

@@ -90,8 +90,8 @@ export default ErrorBoundary.wrap(function () {
 
     return (
         <>
-            <Card className="vc-settings-card">
+            <Card className="vc-settings-card vc-text-selectable">
-                <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
+                <Forms.FormTitle tag="h5">Paste links to .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.top8 + " " + Margins.bottom8} />
@@ -103,7 +103,7 @@ export default ErrorBoundary.wrap(function () {
                     <Link href="https://github.com/search?q=discord+theme">GitHub</Link>
                 </div>
                 <Forms.FormText>If using the BD site, click on "Source" somewhere below the Download button</Forms.FormText>
-                <Forms.FormText>In the GitHub repository of your theme, find X.theme.css / X.css, click on it, then click the "Raw" button</Forms.FormText>
+                <Forms.FormText>In the GitHub repository of your theme, find X.theme.css, click on it, then click the "Raw" button</Forms.FormText>
                 <Forms.FormText>
                     If the theme has configuration that requires you to edit the file:
                     <ul>
@@ -116,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)}
+                onChange={setThemeText}
-                className={TextAreaProps.textarea}
+                className={`${TextAreaProps.textarea} vc-settings-theme-links`}
                 placeholder="Theme Links"
                 spellCheck={false}
                 onBlur={onBlur}

src/components/VencordSettings/Updater.tsx

@@ -24,6 +24,7 @@ import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
 import { classes, useAwaiter } from "@utils/misc";
+import { relaunch } from "@utils/native";
 import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "@utils/updater";
 import { Alerts, Button, Card, Forms, Parser, React, Switch, Toasts } from "@webpack/common";
 
@@ -124,7 +125,7 @@ function Updatable(props: CommonProps) {
                     onClick={withDispatcher(setIsUpdating, async () => {
                         if (await update()) {
                             setUpdates([]);
-                            const needFullRestart = await rebuild();
+                            await rebuild();
                             await new Promise<void>(r => {
                                 Alerts.show({
                                     title: "Update Success!",
@@ -132,10 +133,7 @@ function Updatable(props: CommonProps) {
                                     confirmText: "Restart",
                                     cancelText: "Not now!",
                                     onConfirm() {
-                                        if (needFullRestart)
+                                        relaunch();
-                                            window.DiscordNative.app.relaunch();
-                                        else
-                                            location.reload();
                                         r();
                                     },
                                     onCancel: r
@@ -185,7 +183,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..." });
 
@@ -205,7 +203,7 @@ function Updater() {
             <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
@@ -217,14 +215,30 @@ 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>
 
-            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
+            <Forms.FormText className="vc-text-selectable">
+                {repoPending
+                    ? repo
+                    : err
+                        ? "Failed to retrieve - check console"
+                        : (
                             <Link href={repo}>
                                 {repo.split("/").slice(-2).join("/")}
                             </Link>
-            )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
+                        )
+                }
+                {" "}(<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)
+            </Forms.FormText>
 
             <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
 

src/components/VencordSettings/VencordTab.tsx

@@ -17,7 +17,8 @@
 */
 
 
-import { useSettings } from "@api/settings";
+import { openNotificationLogModal } from "@api/Notifications/notificationLog";
+import { Settings, useSettings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
@@ -25,6 +26,7 @@ import { ErrorCard } from "@components/ErrorCard";
 import IpcEvents from "@utils/IpcEvents";
 import { Margins } from "@utils/margins";
 import { identity, useAwaiter } from "@utils/misc";
+import { relaunch, showItemInFolder } from "@utils/native";
 import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
 
 const cl = classNameFactory("vc-settings-");
@@ -41,11 +43,11 @@ function VencordSettings() {
         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 isMac = navigator.platform.toLowerCase().startsWith("mac");
 
     const Switches: Array<false | {
         key: KeysOfType<typeof settings, boolean>;
@@ -63,7 +65,7 @@ function VencordSettings() {
                 title: "Enable React Developer Tools",
                 note: "Requires a full restart"
             },
-            !IS_WEB && (!isWindows ? {
+            !IS_WEB && (!IS_DISCORD_DESKTOP || !isWindows ? {
                 key: "frameless",
                 title: "Disable the window frame",
                 note: "Requires a full restart"
@@ -72,7 +74,7 @@ function VencordSettings() {
                 title: "Use Windows' native title bar instead of Discord's custom one",
                 note: "Requires a full restart"
             }),
-            !IS_WEB && {
+            !IS_WEB && false /* This causes electron to freeze / white screen for some people */ && {
                 key: "transparent",
                 title: "Enable window transparency",
                 note: "Requires a full restart"
@@ -81,6 +83,16 @@ function VencordSettings() {
                 key: "winCtrlQ",
                 title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
                 note: "Requires a full restart"
+            },
+            IS_DISCORD_DESKTOP && {
+                key: "disableMinSize",
+                title: "Disable minimum window size",
+                note: "Requires a full restart"
+            },
+            IS_DISCORD_DESKTOP && isMac && {
+                key: "macosTranslucency",
+                title: "Enable translucent window",
+                note: "Requires a full restart"
             }
         ];
 
@@ -99,7 +111,7 @@ function VencordSettings() {
                     ) : (
                         <React.Fragment>
                             <Button
-                                onClick={() => window.DiscordNative.app.relaunch()}
+                                onClick={relaunch}
                                 size={Button.Sizes.SMALL}>
                                 Restart Client
                             </Button>
@@ -110,7 +122,7 @@ function VencordSettings() {
                                 Open QuickCSS File
                             </Button>
                             <Button
-                                onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
+                                onClick={() => showItemInFolder(settingsDir)}
                                 size={Button.Sizes.SMALL}
                                 disabled={settingsDirPending}>
                                 Open Settings Folder
@@ -145,8 +157,16 @@ function VencordSettings() {
             </Forms.FormSection>
 
 
+            {typeof Notification !== "undefined" && <NotificationSection settings={settings.notifications} />}
+        </React.Fragment>
+    );
+}
+
+function NotificationSection({ settings }: { settings: typeof Settings["notifications"]; }) {
+    return (
+        <>
             <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
-            {notifSettings.useNative !== "never" && Notification.permission === "denied" && (
+            {settings.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>
@@ -165,44 +185,66 @@ function VencordSettings() {
                     { 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>>}
+                ] satisfies Array<{ value: typeof settings["useNative"]; } & Record<string, any>>}
                 closeOnSelect={true}
-                select={v => notifSettings.useNative = v}
+                select={v => settings.useNative = v}
-                isSelected={v => v === notifSettings.useNative}
+                isSelected={v => v === settings.useNative}
                 serialize={identity}
             />
 
             <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
             <Select
-                isDisabled={notifSettings.useNative === "always"}
+                isDisabled={settings.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>>}
+                ] satisfies Array<{ value: typeof settings["position"]; } & Record<string, any>>}
-                select={v => notifSettings.position = v}
+                select={v => settings.position = v}
-                isSelected={v => v === notifSettings.position}
+                isSelected={v => v === settings.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"}
+                disabled={settings.useNative === "always"}
                 markers={[0, 1000, 2500, 5000, 10_000, 20_000]}
                 minValue={0}
                 maxValue={20_000}
-                initialValue={notifSettings.timeout}
+                initialValue={settings.timeout}
-                onValueChange={v => notifSettings.timeout = v}
+                onValueChange={v => settings.timeout = v}
                 onValueRender={v => (v / 1000).toFixed(2) + "s"}
                 onMarkerRender={v => (v / 1000) + "s"}
                 stickToMarkers={false}
             />
-        </React.Fragment>
+
+            <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={settings.logLimit}
+                onValueChange={v => settings.logLimit = v}
+                onValueRender={v => v === 200 ? "∞" : v}
+                onMarkerRender={v => v === 200 ? "∞" : v}
+            />
+
+            <Button
+                onClick={openNotificationLogModal}
+                disabled={settings.logLimit === 0}
+            >
+                Open Notification Log
+            </Button>
+        </>
     );
 }
 
-
 interface DonateCardProps {
     image: string;
 }

src/components/VencordSettings/index.tsx

@@ -21,10 +21,11 @@ import "./settingsStyles.css";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { handleComponentFailed } from "@components/handleComponentFailed";
-import { findByCodeLazy } from "@webpack";
+import { isMobile } from "@utils/misc";
-import { Forms, SettingsRouter, Text } from "@webpack/common";
+import { Forms, SettingsRouter, TabBar, Text } from "@webpack/common";
 
 import BackupRestoreTab from "./BackupRestoreTab";
+import CloudTab from "./CloudTab";
 import PluginsTab from "./PluginsTab";
 import ThemesTab from "./ThemesTab";
 import Updater from "./Updater";
@@ -32,8 +33,6 @@ import VencordSettings from "./VencordTab";
 
 const cl = classNameFactory("vc-settings-");
 
-const TabBar = findByCodeLazy('[role="tab"][aria-disabled="false"]');
-
 interface SettingsProps {
     tab: string;
 }
@@ -48,7 +47,8 @@ const SettingsTabs: Record<string, SettingsTab> = {
     VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
     VencordThemes: { name: "Themes", component: () => <ThemesTab /> },
     VencordUpdater: { name: "Updater" }, // Only show updater if IS_WEB is false
-    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> },
+    VencordCloud: { name: "Cloud", component: () => <CloudTab /> },
+    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> }
 };
 
 if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater />;
@@ -56,10 +56,13 @@ if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater /
 function Settings(props: SettingsProps) {
     const { tab = "VencordSettings" } = props;
 
-    const CurrentTab = SettingsTabs[tab]?.component;
+    const CurrentTab = SettingsTabs[tab]?.component ?? null;
+    if (isMobile) {
+        return CurrentTab && <CurrentTab />;
+    }
 
     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="top"

src/components/VencordSettings/settingsStyles.css

@@ -38,3 +38,31 @@
     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);
+}
+
+.vc-cloud-settings-sync-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1em;
+}
+
+.vc-cloud-erase-data-danger-btn {
+    color: var(--white-500);
+    background-color: var(--button-danger-background);
+}
+
+.vc-text-selectable,
+.vc-text-selectable :not(a, button) {
+    /* make text selectable, silly discord makes the entirety of settings not selectable */
+    user-select: text;
+
+    /* discord also sets cursor: default which prevents the cursor from showing as text */
+    cursor: initial;
+}

src/components/monacoWin.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>QuickCss Editor</title>
+    <title>Vencord QuickCSS Editor</title>
     <link rel="stylesheet" data-name="vs/editor/editor.main"
         href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.css">
     <style>

src/globals.d.ts

@@ -35,6 +35,8 @@ declare global {
     export var IS_WEB: boolean;
     export var IS_DEV: boolean;
     export var IS_STANDALONE: boolean;
+    export var IS_DISCORD_DESKTOP: boolean;
+    export var IS_VENCORD_DESKTOP: boolean;
 
     export var VencordNative: typeof import("./VencordNative").default;
     export var Vencord: typeof import("./Vencord");
@@ -54,6 +56,8 @@ declare global {
      * If you really must use it, mark your plugin as Desktop App only by naming it Foo.desktop.ts(x)
      */
     export var DiscordNative: any;
+    export var VencordDesktop: any;
+    export var VencordDesktopNative: any;
 
     interface Window {
         webpackChunkdiscord_app: {

src/main/index.ts

@@ -0,0 +1,110 @@
+/*
+ * 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 { app, protocol, session } from "electron";
+import { join } from "path";
+
+import { getSettings } from "./ipcMain";
+import { IS_VANILLA } from "./utils/constants";
+import { installExt } from "./utils/extensions";
+
+if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
+    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
+        protocol.registerFileProtocol("vencord", ({ url: unsafeUrl }, cb) => {
+            let url = unsafeUrl.slice("vencord://".length);
+            if (url.endsWith("/")) url = url.slice(0, -1);
+            switch (url) {
+                case "renderer.js.map":
+                case "vencordDesktopRenderer.js.map":
+                case "preload.js.map":
+                case "patcher.js.map":
+                case "vencordDesktopMain.js.map":
+                    cb(join(__dirname, url));
+                    break;
+                default:
+                    cb({ statusCode: 403 });
+            }
+        });
+
+        try {
+            if (getSettings().enableReactDevtools)
+                installExt("fmkadmapgofadopljbjfkapdkoienihi")
+                    .then(() => console.info("[Vencord] Installed React Developer Tools"))
+                    .catch(err => console.error("[Vencord] Failed to install React Developer Tools", err));
+        } catch { }
+
+
+        // Remove CSP
+        type PolicyResult = Record<string, string[]>;
+
+        const parsePolicy = (policy: string): PolicyResult => {
+            const result: PolicyResult = {};
+            policy.split(";").forEach(directive => {
+                const [directiveKey, ...directiveValue] = directive.trim().split(/\s+/g);
+                if (directiveKey && !Object.prototype.hasOwnProperty.call(result, directiveKey)) {
+                    result[directiveKey] = directiveValue;
+                }
+            });
+            return result;
+        };
+        const stringifyPolicy = (policy: PolicyResult): string =>
+            Object.entries(policy)
+                .filter(([, values]) => values?.length)
+                .map(directive => directive.flat().join(" "))
+                .join("; ");
+
+        function patchCsp(headers: Record<string, string[]>, header: string) {
+            if (header in headers) {
+                const csp = parsePolicy(headers[header][0]);
+
+                for (const directive of ["style-src", "connect-src", "img-src", "font-src", "media-src", "worker-src"]) {
+                    csp[directive] = ["*", "blob:", "data:", "'unsafe-inline'"];
+                }
+                // TODO: Restrict this to only imported packages with fixed version.
+                // Perhaps auto generate with esbuild
+                csp["script-src"] ??= [];
+                csp["script-src"].push("'unsafe-eval'", "https://unpkg.com", "https://cdnjs.cloudflare.com");
+                headers[header] = [stringifyPolicy(csp)];
+            }
+        }
+
+        session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, resourceType }, cb) => {
+            if (responseHeaders) {
+                if (resourceType === "mainFrame")
+                    patchCsp(responseHeaders, "content-security-policy");
+
+                // Fix hosts that don't properly set the css content type, such as
+                // raw.githubusercontent.com
+                if (resourceType === "stylesheet")
+                    responseHeaders["content-type"] = ["text/css"];
+            }
+            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 = () => { };
+    });
+}
+
+if (IS_DISCORD_DESKTOP) {
+    require("./patcher");
+}

src/main/ipcMain.ts

@@ -28,7 +28,7 @@ import { join } from "path";
 
 import monacoHtml from "~fileContent/../components/monacoWin.html;base64";
 
-import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE } from "./constants";
+import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE } from "./utils/constants";
 
 mkdirSync(SETTINGS_DIR, { recursive: true });
 
@@ -44,6 +44,14 @@ export function readSettings() {
     }
 }
 
+export function getSettings(): typeof import("@api/settings").Settings {
+    try {
+        return JSON.parse(readSettings());
+    } catch {
+        return {} as any;
+    }
+}
+
 ipcMain.handle(IpcEvents.OPEN_QUICKCSS, () => shell.openPath(QUICKCSS_PATH));
 
 ipcMain.handle(IpcEvents.OPEN_EXTERNAL, (_, url) => {
@@ -85,7 +93,7 @@ export function initIpc(mainWindow: BrowserWindow) {
 
 ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
     const win = new BrowserWindow({
-        title: "QuickCss Editor",
+        title: "Vencord QuickCSS Editor",
         autoHideMenuBar: true,
         darkTheme: true,
         webPreferences: {

src/main/patcher.ts

@@ -20,9 +20,8 @@ import { onceDefined } from "@utils/onceDefined";
 import electron, { app, BrowserWindowConstructorOptions, Menu } from "electron";
 import { dirname, join } from "path";
 
-import { initIpc } from "./ipcMain";
+import { getSettings, initIpc } from "./ipcMain";
-import { installExt } from "./ipcMain/extensions";
+import { IS_VANILLA } from "./utils/constants";
-import { readSettings } from "./ipcMain/index";
 
 console.log("[Vencord] Starting up...");
 
@@ -41,11 +40,8 @@ require.main!.filename = join(asarPath, discordPkg.main);
 // @ts-ignore Untyped method? Dies from cringe
 app.setAppPath(asarPath);
 
-if (!process.argv.includes("--vanilla")) {
+if (!IS_VANILLA) {
-    let settings: typeof import("@api/settings").Settings = {} as any;
+    const settings = getSettings();
-    try {
-        settings = JSON.parse(readSettings());
-    } catch { }
 
     // Repatch after host updates on Windows
     if (process.platform === "win32") {
@@ -83,11 +79,17 @@ if (!process.argv.includes("--vanilla")) {
                     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";
                 }
 
+                if (settings.macosTranslucency && process.platform === "darwin") {
+                    options.backgroundColor = "#00000000";
+                    options.vibrancy = "sidebar";
+                }
+
                 process.env.DISCORD_PRELOAD = original;
 
                 super(options);
@@ -109,85 +111,19 @@ if (!process.argv.includes("--vanilla")) {
         BrowserWindow
     };
 
-    // Patch appSettings to force enable devtools
+    // Patch appSettings to force enable devtools and optionally disable min size
-    onceDefined(global, "appSettings", s =>
+    onceDefined(global, "appSettings", s => {
-        s.set("DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING", true)
+        s.set("DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING", true);
-    );
+        if (settings.disableMinSize) {
+            s.set("MIN_WIDTH", 0);
+            s.set("MIN_HEIGHT", 0);
+        } else {
+            s.set("MIN_WIDTH", 940);
+            s.set("MIN_HEIGHT", 500);
+        }
+    });
 
     process.env.DATA_DIR = join(app.getPath("userData"), "..", "Vencord");
-
-    electron.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) => {
-            let url = unsafeUrl.slice("vencord://".length);
-            if (url.endsWith("/")) url = url.slice(0, -1);
-            switch (url) {
-                case "renderer.js.map":
-                case "preload.js.map":
-                case "patcher.js.map": // doubt
-                    cb(join(__dirname, url));
-                    break;
-                default:
-                    cb({ statusCode: 403 });
-            }
-        });
-
-        try {
-            if (settings?.enableReactDevtools)
-                installExt("fmkadmapgofadopljbjfkapdkoienihi")
-                    .then(() => console.info("[Vencord] Installed React Developer Tools"))
-                    .catch(err => console.error("[Vencord] Failed to install React Developer Tools", err));
-        } catch { }
-
-
-        // Remove CSP
-        type PolicyResult = Record<string, string[]>;
-
-        const parsePolicy = (policy: string): PolicyResult => {
-            const result: PolicyResult = {};
-            policy.split(";").forEach(directive => {
-                const [directiveKey, ...directiveValue] = directive.trim().split(/\s+/g);
-                if (directiveKey && !Object.prototype.hasOwnProperty.call(result, directiveKey)) {
-                    result[directiveKey] = directiveValue;
-                }
-            });
-            return result;
-        };
-        const stringifyPolicy = (policy: PolicyResult): string =>
-            Object.entries(policy)
-                .filter(([, values]) => values?.length)
-                .map(directive => directive.flat().join(" "))
-                .join("; ");
-
-        function patchCsp(headers: Record<string, string[]>, header: string) {
-            if (header in headers) {
-                const csp = parsePolicy(headers[header][0]);
-
-                for (const directive of ["style-src", "connect-src", "img-src", "font-src", "media-src", "worker-src"]) {
-                    csp[directive] = ["*", "blob:", "data:", "'unsafe-inline'"];
-                }
-                // TODO: Restrict this to only imported packages with fixed version.
-                // Perhaps auto generate with esbuild
-                csp["script-src"] ??= [];
-                csp["script-src"].push("'unsafe-eval'", "https://unpkg.com", "https://cdnjs.cloudflare.com");
-                headers[header] = [stringifyPolicy(csp)];
-            }
-        }
-
-        electron.session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, resourceType }, cb) => {
-            if (responseHeaders) {
-                if (resourceType === "mainFrame")
-                    patchCsp(responseHeaders, "content-security-policy");
-
-                // Fix hosts that don't properly set the css content type, such as
-                // raw.githubusercontent.com
-                if (resourceType === "stylesheet")
-                    responseHeaders["content-type"] = ["text/css"];
-            }
-            cb({ cancel: false, responseHeaders });
-        });
-    });
 } else {
     console.log("[Vencord] Running in vanilla mode. Not loading Vencord");
 }

src/main/updater/common.ts

@@ -16,28 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { createHash } from "crypto";
-import { createReadStream } from "fs";
-import { join } from "path";
 
-export async function calculateHashes() {
+export const VENCORD_FILES = [
-    const hashes = {} as Record<string, string>;
+    IS_DISCORD_DESKTOP ? "patcher.js" : "vencordDesktopMain.js",
-
+    "preload.js",
-    await Promise.all(
+    IS_DISCORD_DESKTOP ? "renderer.js" : "vencordDesktopRenderer.js",
-        ["patcher.js", "preload.js", "renderer.js", "renderer.css"].map(file => new Promise<void>(r => {
+    "renderer.css"
-            const fis = createReadStream(join(__dirname, file));
+];
-            const hash = createHash("sha1", { encoding: "hex" });
-            fis.once("end", () => {
-                hash.end();
-                hashes[file] = hash.read();
-                r();
-            });
-            fis.pipe(hash);
-        }))
-    );
-
-    return hashes;
-}
 
 export function serializeErrors(func: (...args: any[]) => any) {
     return async function () {

src/main/updater/git.ts

@@ -22,7 +22,7 @@ import { ipcMain } from "electron";
 import { join } from "path";
 import { promisify } from "util";
 
-import { calculateHashes, serializeErrors } from "./common";
+import { serializeErrors } from "./common";
 
 const VENCORD_SRC_DIR = join(__dirname, "..");
 
@@ -76,7 +76,6 @@ async function build() {
     return !res.stderr.includes("Build failed");
 }
 
-ipcMain.handle(IpcEvents.GET_HASHES, serializeErrors(calculateHashes));
 ipcMain.handle(IpcEvents.GET_REPO, serializeErrors(getRepo));
 ipcMain.handle(IpcEvents.GET_UPDATES, serializeErrors(calculateGitChanges));
 ipcMain.handle(IpcEvents.UPDATE, serializeErrors(pull));

src/main/updater/http.ts

@@ -25,8 +25,8 @@ import { join } from "path";
 import gitHash from "~git-hash";
 import gitRemote from "~git-remote";
 
-import { get } from "../simpleGet";
+import { get } from "../utils/simpleGet";
-import { calculateHashes, serializeErrors } from "./common";
+import { serializeErrors, VENCORD_FILES } from "./common";
 
 const API_BASE = `https://api.github.com/repos/${gitRemote}`;
 let PendingUpdates = [] as [string, string][];
@@ -66,7 +66,7 @@ async function fetchUpdates() {
         return false;
 
     data.assets.forEach(({ name, browser_download_url }) => {
-        if (["patcher.js", "preload.js", "renderer.js", "renderer.css"].some(s => name.startsWith(s))) {
+        if (VENCORD_FILES.some(s => name.startsWith(s))) {
             PendingUpdates.push([name, browser_download_url]);
         }
     });
@@ -75,13 +75,15 @@ async function fetchUpdates() {
 
 async function applyUpdates() {
     await Promise.all(PendingUpdates.map(
-        async ([name, data]) => writeFile(join(__dirname, name), await get(data)))
+        async ([name, data]) => writeFile(
-    );
+            join(__dirname, name),
+            await get(data)
+        )
+    ));
     PendingUpdates = [];
     return true;
 }
 
-ipcMain.handle(IpcEvents.GET_HASHES, serializeErrors(calculateHashes));
 ipcMain.handle(IpcEvents.GET_REPO, serializeErrors(() => `https://github.com/${gitRemote}`));
 ipcMain.handle(IpcEvents.GET_UPDATES, serializeErrors(calculateGitChanges));
 ipcMain.handle(IpcEvents.UPDATE, serializeErrors(fetchUpdates));

src/main/utils/constants.ts

@@ -33,3 +33,5 @@ export const ALLOWED_PROTOCOLS = [
     "steam:",
     "spotify:"
 ];
+
+export const IS_VANILLA = /* @__PURE__ */ process.argv.includes("--vanilla");

src/plugins/alwaysAnimate.ts

@@ -1,6 +1,6 @@
 /*
  * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
+ * 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
@@ -20,16 +20,18 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
 export default definePlugin({
-    name: "MuteNewGuild",
+    name: "AlwaysAnimate",
-    description: "Mutes newly joined guilds",
+    description: "Animates anything that can be animated, besides status emojis.",
-    authors: [Devs.Glitch],
+    authors: [Devs.FieryFlames],
+
     patches: [
         {
-            find: ",acceptInvite:function",
+            find: ".canAnimate",
+            all: true,
             replacement: {
-                match: /(\w=null!==[^;]+)/,
+                match: /\.canAnimate\b/g,
-                replace: "$1;Vencord.Webpack.findByProps('updateGuildNotificationSettings').updateGuildNotificationSettings($1,{'muted':true,'suppress_everyone':true,'suppress_roles':true})"
+                replace: ".canAnimate || true"
             }
         }
-    ],
+    ]
 });

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\('\[.+?'\)/,
+                match: /JSON\.parse\('\[.+?'\)/,
-                replace: "const o=[]"
+                replace: "[]"
             }
         }
     ]

src/plugins/apiBadges.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { BadgePosition, ProfileBadge } from "@api/Badges";
+import { BadgePosition, BadgeUserArgs, ProfileBadge } from "@api/Badges";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
@@ -29,13 +29,13 @@ import { closeModal, Modals, openModal } from "@utils/modal";
 import definePlugin from "@utils/types";
 import { Forms } from "@webpack/common";
 
-const CONTRIBUTOR_BADGE = "https://media.discordapp.net/stickers/1026517526106087454.webp";
+const CONTRIBUTOR_BADGE = "https://cdn.discordapp.com/attachments/1033680203433660458/1092089947126780035/favicon.png";
 
 /** List of vencord contributor IDs */
 const contributorIds: string[] = Object.values(Devs).map(d => d.id.toString());
 
 const ContributorBadge: ProfileBadge = {
-    tooltip: "Vencord Contributor",
+    description: "Vencord Contributor",
     image: CONTRIBUTOR_BADGE,
     position: BadgePosition.START,
     props: {
@@ -45,23 +45,23 @@ const ContributorBadge: ProfileBadge = {
         }
     },
     shouldShow: ({ user }) => contributorIds.includes(user.id),
-    onClick: () => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")
+    link: "https://github.com/Vendicated/Vencord"
 };
 
-const DonorBadges = {} as Record<string, Pick<ProfileBadge, "image" | "tooltip">>;
+const DonorBadges = {} as Record<string, Pick<ProfileBadge, "image" | "description">>;
 
 export default definePlugin({
     name: "BadgeAPI",
     description: "API to add badges to users.",
-    authors: [Devs.Megu],
+    authors: [Devs.Megu, Devs.Ven, Devs.TheSun],
     required: true,
     patches: [
         /* Patch the badges array */
         {
-            find: "PREMIUM_GUILD_SUBSCRIPTION_TOOLTIP.format({date:",
+            find: "Messages.ACTIVE_DEVELOPER_BADGE_TOOLTIP",
             replacement: {
-                match: /&&((\w{1,3})\.push\({tooltip:\w{1,3}\.\w{1,3}\.Messages\.PREMIUM_GUILD_SUBSCRIPTION_TOOLTIP\.format.+?;)(?:return\s\w{1,3};?})/,
+                match: /(?<=void 0:)\i.getBadges\(\)/,
-                replace: (_, m, badgeArray) => `&&${m} return Vencord.Api.Badges.inject(${badgeArray}, arguments[0]);}`,
+                replace: "Vencord.Api.Badges._getBadges(arguments[0]).concat($&??[])",
             }
         },
         /* Patch the badge list component on user profiles */
@@ -69,21 +69,28 @@ export default definePlugin({
             find: "Messages.PROFILE_USER_BADGES,role:",
             replacement: [
                 {
-                    match: /src:(\w{1,3})\[(\w{1,3})\.key\],/,
+                    // alt: "", aria-hidden: false, src: originalSrc
-                    // <img src={badge.image ?? imageMap[badge.key]} {...badge.props} />
+                    match: /alt:" ","aria-hidden":!0,src:(?=.{0,10}\b(\i)\.(?:icon|key))/g,
-                    replace: (_, imageMap, badge) => `src: ${badge}.image ?? ${imageMap}[${badge}.key], ...${badge}.props,`
+                    // ...badge.props, ..., src: badge.image ?? ...
+                    replace: "...$1.props,$& $1.image??"
                 },
                 {
-                    match: /spacing:(\d{1,2}),children:(.{1,40}(\i)\.jsx.+?(\i)\.onClick.+?\)})},/,
+                    match: /children:function(?<=(\i)\.(?:tooltip|description),spacing:\d.+?)/g,
-                    // if the badge provides it's own component, render that instead of an image
+                    replace: "children:$1.component ? () => $self.renderBadgeComponent($1) : function"
-                    // the badge also includes info about the user that has it (type BadgeUserArgs), which is why it's passed as props
+                },
-                    replace: (_, s, origBadgeComponent, React, badge) =>
+                {
-                        `spacing:${s},children:${badge}.component ? () => (0,${React}.jsx)(${badge}.component, { ...${badge} }) : ${origBadgeComponent}},`
+                    match: /onClick:function(?=.{0,200}href:(\i)\.link)/,
+                    replace: "onClick:$1.onClick??function"
                 }
             ]
         }
     ],
 
+    renderBadgeComponent: ErrorBoundary.wrap((badge: ProfileBadge & BadgeUserArgs) => {
+        const Component = badge.component!;
+        return <Component {...badge} />;
+    }, { noop: true }),
+
     async start() {
         Vencord.Api.Badges.addBadge(ContributorBadge);
         const badges = await fetch("https://gist.githubusercontent.com/Vendicated/51a3dd775f6920429ec6e9b735ca7f01/raw/badges.csv").then(r => r.text());
@@ -93,15 +100,15 @@ export default definePlugin({
             return;
         }
         for (const line of lines) {
-            const [id, tooltip, image] = line.split(",");
+            const [id, description, image] = line.split(",");
-            DonorBadges[id] = { image, tooltip };
+            DonorBadges[id] = { image, description };
         }
     },
 
-    addDonorBadge(badges: ProfileBadge[], userId: string) {
+    getDonorBadge(userId: string) {
         const badge = DonorBadges[userId];
         if (badge) {
-            badges.unshift({
+            return {
                 ...badge,
                 position: BadgePosition.START,
                 props: {
@@ -165,7 +172,7 @@ export default definePlugin({
                         </ErrorBoundary>
                     ));
                 },
-            });
+            };
         }
     }
 });

src/plugins/apiContextMenu.ts

@@ -16,47 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { addListener, removeListener } from "@webpack";
-
-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: [{
-                    match: RegExp(`${id}(?<=(\\i)=.+?).+$`),
-                    replace: (code, varName) => {
-                        const regex = RegExp(`${key},{(?<=${varName}\\.${key},{)`, "g");
-                        return code.replace(regex, "$&contextMenuApiArguments:arguments,");
-                    }
-                }]
-            });
-
-            removeListener(listener);
-        }
-    }
-}
-
-addListener(listener);
 
 export default definePlugin({
     name: "ContextMenuAPI",
     description: "API for adding/removing items to/from context menus.",
-    authors: [Devs.Nuckyz],
+    authors: [Devs.Nuckyz, Devs.Ven],
+    required: true,
+
     patches: [
         {
             find: "♫ (つ｡◕‿‿◕｡)つ ♪",
@@ -64,6 +32,14 @@ export default definePlugin({
                 match: /(?<=function \i\((\i)\){)(?=var \i,\i=\i\.navId)/,
                 replace: (_, props) => `Vencord.Api.ContextMenu._patchContextMenu(${props});`
             }
+        },
+        {
+            find: ".Menu,{",
+            all: true,
+            replacement: {
+                match: /Menu,{(?<=\.jsxs?\)\(\i\.Menu,{)/g,
+                replace: "$&contextMenuApiArguments:typeof arguments!=='undefined'?arguments:[],"
+            }
         }
     ]
 });

src/plugins/apiMenuItemDeobfuscator.ts

@@ -1,82 +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 { migratePluginSettings } from "@api/settings";
-import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
-
-// duplicate values have multiple branches with different types. Just include all to be safe
-const nameMap = {
-    radio: "MenuRadioItem",
-    separator: "MenuSeparator",
-    checkbox: "MenuCheckboxItem",
-    groupstart: "MenuGroup",
-
-    control: "MenuControlItem",
-    compositecontrol: "MenuControlItem",
-
-    item: "MenuItem",
-    customitem: "MenuItem",
-};
-
-migratePluginSettings("MenuItemDeobfuscatorAPI", "MenuItemDeobfuscatorApi");
-export default definePlugin({
-    name: "MenuItemDeobfuscatorAPI",
-    description: "Deobfuscates Discord's Menu Item module",
-    authors: [Devs.Ven],
-    patches: [
-        {
-            find: '"Menu API',
-            replacement: {
-                match: /function.{0,80}type===(\i)\).{0,50}navigable:.+?Menu API/s,
-                replace: (m, mod) => {
-                    let nicenNames = "";
-                    const redefines = [] as string[];
-                    // if (t.type === m.MenuItem)
-                    const typeCheckRe = /\(.{1,3}\.type===(.{1,5})\)/g;
-                    // push({type:"item"})
-                    const pushTypeRe = /type:"(\w+)"/g;
-
-                    let typeMatch: RegExpExecArray | null;
-                    // for each if (t.type === ...)
-                    while ((typeMatch = typeCheckRe.exec(m)) !== null) {
-                        // extract the current menu item
-                        const item = typeMatch[1];
-                        // Set the starting index of the second regex to that of the first to start
-                        // matching from after the if
-                        pushTypeRe.lastIndex = typeCheckRe.lastIndex;
-                        // extract the first type: "..."
-                        const type = pushTypeRe.exec(m)?.[1];
-                        if (type && type in nameMap) {
-                            const name = nameMap[type];
-                            nicenNames += `Object.defineProperty(${item},"name",{value:"${name}"});`;
-                            redefines.push(`${name}:${item}`);
-                        }
-                    }
-                    if (redefines.length < 6) {
-                        console.warn("[ApiMenuItemDeobfuscator] Expected to at least remap 6 items, only remapped", redefines.length);
-                    }
-
-                    // Merge all our redefines with the actual module
-                    return `${nicenNames}Object.assign(${mod},{${redefines.join(",")}});${m}`;
-                },
-            },
-        },
-    ],
-});
-

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\([^)]+\)){/,
+                match: /_sendMessage:(function\([^)]+\)){/,
-                replace: "{if(Vencord.Api.MessageEvents._handlePreSend(...arguments)){return;};"
+                replace: "_sendMessage:async $1{if(await Vencord.Api.MessageEvents._handlePreSend(...arguments))return;"
             }, {
-                match: /(?<=\beditMessage:function\([^)]+\)){/,
+                match: /\beditMessage:(function\([^)]+\)){/,
-                replace: "{Vencord.Api.MessageEvents._handlePreEdit(...arguments);"
+                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,16 +22,16 @@ import definePlugin from "@utils/types";
 export default definePlugin({
     name: "MessagePopoverAPI",
     description: "API to add buttons to message popovers.",
-    authors: [Devs.KingFish, Devs.Ven],
+    authors: [Devs.KingFish, Devs.Ven, Devs.Nuckyz],
     patches: [{
         find: "Messages.MESSAGE_UTILITIES_A11Y_LABEL",
         replacement: {
-            // foo && !bar ? createElement(blah,...makeElement(addReactionData))
+            // foo && !bar ? createElement(reactionStuffs)... createElement(blah,...makeElement(reply-other))
-            match: /(\i&&!\i)\?\(0,\i\.jsxs?\)\(.{0,20}renderPopout:.{0,300}?(\i)\(.{3,20}\{key:"add-reaction".+?\}/,
+            match: /\i&&!\i\?\(0,\i\.jsxs?\)\(.{0,200}renderEmojiPicker:.{0,500}\?(\i)\(\{key:"reply-other"/,
-            replace: (m, bools, makeElement) => {
+            replace: (m, makeElement) => {
                 const msg = m.match(/message:(.{1,3}),/)?.[1];
                 if (!msg) throw new Error("Could not find message variable");
-                return `...(${bools}?Vencord.Api.MessagePopover._buildPopoverElements(${msg},${makeElement}):[]),${m}`;
+                return `...Vencord.Api.MessagePopover._buildPopoverElements(${msg},${makeElement}),${m}`;
             }
         }
     }],

src/plugins/apiSettingsStore.ts

@@ -0,0 +1,38 @@
+/*
+ * 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 { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "SettingsStoreAPI",
+    description: "Patches Discord's SettingsStores to expose their group and name",
+    authors: [Devs.Nuckyz],
+
+    patches: [
+        {
+            find: '"textAndImages","renderSpoilers"',
+            replacement: [
+                {
+                    match: /(?<=INFREQUENT_USER_ACTION.{0,20}),useSetting:function/,
+                    replace: ",settingsStoreApiGroup:arguments[0],settingsStoreApiName:arguments[1]$&"
+                }
+            ]
+        }
+    ]
+});

src/plugins/betterFolders/FolderSideBar.tsx

@@ -0,0 +1,84 @@
+/*
+ * 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 { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { findByPropsLazy, findStoreLazy } from "@webpack";
+import { i18n, React, useStateFromStores } from "@webpack/common";
+
+const cl = classNameFactory("vc-bf-");
+const classes = findByPropsLazy("sidebar", "guilds");
+
+const Animations = findByPropsLazy("a", "animated", "useTransition");
+const ChannelRTCStore = findStoreLazy("ChannelRTCStore");
+const ExpandedGuildFolderStore = findStoreLazy("ExpandedGuildFolderStore");
+
+function Guilds(props: {
+    className: string;
+    bfGuildFolders: any[];
+}) {
+    // @ts-expect-error
+    const res = Vencord.Plugins.plugins.BetterFolders.Guilds(props);
+
+    const scrollerProps = res.props.children?.props?.children?.[1]?.props;
+    if (scrollerProps?.children) {
+        const servers = scrollerProps.children.find(c => c?.props?.["aria-label"] === i18n.Messages.SERVERS);
+        if (servers) scrollerProps.children = servers;
+    }
+
+    return res;
+}
+
+export default ErrorBoundary.wrap(() => {
+    const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders());
+    const fullscreen = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.isFullscreenInContext());
+
+    const guilds = document.querySelector(`.${classes.guilds}`);
+
+    const visible = !!expandedFolders.size;
+    const className = cl("folder-sidebar", { fullscreen });
+
+    const Sidebar = (
+        <Guilds
+            className={classes.guilds}
+            bfGuildFolders={Array.from(expandedFolders)}
+        />
+    );
+
+    if (!guilds || !Settings.plugins.BetterFolders.sidebarAnim)
+        return visible
+            ? <div className={className}>{Sidebar}</div>
+            : null;
+
+    return (
+        <Animations.Transition
+            items={visible}
+            from={{ width: 0 }}
+            enter={{ width: guilds.getBoundingClientRect().width }}
+            leave={{ width: 0 }}
+            config={{ duration: 200 }}
+        >
+            {(style, show) => show && (
+                <Animations.animated.div style={style} className={className}>
+                    {Sidebar}
+                </Animations.animated.div>
+            )}
+        </Animations.Transition>
+    );
+}, { noop: true });

src/plugins/betterFolders/betterFolders.css

@@ -0,0 +1,17 @@
+.vc-bf-folder-sidebar [class*="wrapper-"] > [class*="listItem-"]:first-of-type,
+.vc-bf-folder-sidebar [class*="unreadMentionsIndicator"] {
+    display: none;
+}
+
+.vc-bf-folder-sidebar [class*="expandedFolderBackground-"] {
+    background-color: transparent;
+}
+
+.vc-bf-folder-sidebar {
+    display: flex;
+}
+
+.vc-bf-fullscreen {
+    width: 0 !important;
+    visibility: hidden;
+}

src/plugins/betterFolders/index.ts

@@ -0,0 +1,177 @@
+/*
+ * 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 "./betterFolders.css";
+
+import { definePluginSettings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
+import { FluxDispatcher } from "@webpack/common";
+
+import FolderSideBar from "./FolderSideBar";
+
+const GuildsTree = findLazy(m => m.prototype?.convertToFolder);
+const GuildFolderStore = findStoreLazy("SortedGuildStore");
+const ExpandedFolderStore = findStoreLazy("ExpandedGuildFolderStore");
+const FolderUtils = findByPropsLazy("move", "toggleGuildFolderExpand");
+
+const settings = definePluginSettings({
+    sidebar: {
+        type: OptionType.BOOLEAN,
+        description: "Display servers from folder on dedicated sidebar",
+        default: true,
+    },
+    sidebarAnim: {
+        type: OptionType.BOOLEAN,
+        description: "Animate opening the folder sidebar",
+        default: true,
+    },
+    closeAllFolders: {
+        type: OptionType.BOOLEAN,
+        description: "Close all folders when selecting a server not in a folder",
+        default: false,
+    },
+    closeAllHomeButton: {
+        type: OptionType.BOOLEAN,
+        description: "Close all folders when clicking on the home button",
+        default: false,
+    },
+    closeOthers: {
+        type: OptionType.BOOLEAN,
+        description: "Close other folders when opening a folder",
+        default: false,
+    },
+    forceOpen: {
+        type: OptionType.BOOLEAN,
+        description: "Force a folder to open when switching to a server of that folder",
+        default: false,
+    },
+});
+
+export default definePlugin({
+    name: "BetterFolders",
+    description: "Shows server folders on dedicated sidebar and adds folder related improvements",
+    authors: [Devs.juby, Devs.AutumnVN],
+    patches: [
+        {
+            find: '("guildsnav")',
+            predicate: () => settings.store.sidebar,
+            replacement: [
+                {
+                    match: /(\i)\(\){return \i\(\(0,\i\.jsx\)\("div",{className:\i\(\)\.guildSeparator}\)\)}/,
+                    replace: "$&$self.Separator=$1;"
+                },
+
+                // Folder component patch
+                {
+                    match: /\i\(\(function\(\i,\i,\i\){var \i=\i\.key;return.+\(\i\)},\i\)}\)\)/,
+                    replace: "arguments[0].bfHideServers?null:$&"
+                },
+
+                // BEGIN Guilds component patch
+                {
+                    match: /(\i)\.themeOverride,(.{15,25}\(function\(\){var \i=)(\i\.\i\.getGuildsTree\(\))/,
+                    replace: "$1.themeOverride,bfPatch=$1.bfGuildFolders,$2bfPatch?$self.getGuildsTree(bfPatch,$3):$3"
+                },
+                {
+                    match: /return(\(0,\i\.jsx\))(\(\i,{)(folderNode:\i,setNodeRef:\i\.setNodeRef,draggable:!0,.+},\i\.id\));case/,
+                    replace: "var bfHideServers=typeof bfPatch==='undefined',folder=$1$2bfHideServers,$3;return !bfHideServers&&arguments[1]?[$1($self.Separator,{}),folder]:folder;case"
+                },
+                // END
+
+                {
+                    match: /\("guildsnav"\);return\(0,\i\.jsx\)\(.{1,6},{navigator:\i,children:\(0,\i\.jsx\)\(/,
+                    replace: "$&$self.Guilds="
+                }
+            ]
+        },
+        {
+            find: "APPLICATION_LIBRARY,render",
+            predicate: () => settings.store.sidebar,
+            replacement: {
+                match: /(\(0,\i\.jsx\))\(\i\..,{className:\i\(\)\.guilds,themeOverride:\i}\)/,
+                replace: "$&,$1($self.FolderSideBar,{})"
+            }
+        },
+        {
+            find: '("guildsnav")',
+            predicate: () => settings.store.closeAllHomeButton,
+            replacement: {
+                match: ",onClick:function(){if(!__OVERLAY__){",
+                replace: "$&$self.closeFolders();"
+            }
+        }
+    ],
+
+    settings,
+
+    start() {
+        const getGuildFolder = (id: string) => GuildFolderStore.getGuildFolders().find(f => f.guildIds.includes(id));
+
+        FluxDispatcher.subscribe("CHANNEL_SELECT", this.onSwitch = data => {
+            if (!settings.store.closeAllFolders && !settings.store.forceOpen)
+                return;
+
+            if (this.lastGuildId !== data.guildId) {
+                this.lastGuildId = data.guildId;
+
+                const guildFolder = getGuildFolder(data.guildId);
+                if (guildFolder?.folderId) {
+                    if (settings.store.forceOpen && !ExpandedFolderStore.isFolderExpanded(guildFolder.folderId))
+                        FolderUtils.toggleGuildFolderExpand(guildFolder.folderId);
+                } else if (settings.store.closeAllFolders)
+                    this.closeFolders();
+            }
+        });
+
+        FluxDispatcher.subscribe("TOGGLE_GUILD_FOLDER_EXPAND", this.onToggleFolder = e => {
+            if (settings.store.closeOthers && !this.dispatching)
+                FluxDispatcher.wait(() => {
+                    const expandedFolders = ExpandedFolderStore.getExpandedFolders();
+                    if (expandedFolders.size > 1) {
+                        this.dispatching = true;
+
+                        for (const id of expandedFolders) if (id !== e.folderId)
+                            FolderUtils.toggleGuildFolderExpand(id);
+
+                        this.dispatching = false;
+                    }
+                });
+        });
+    },
+
+    stop() {
+        FluxDispatcher.unsubscribe("CHANNEL_SELECT", this.onSwitch);
+        FluxDispatcher.unsubscribe("TOGGLE_GUILD_FOLDER_EXPAND", this.onToggleFolder);
+    },
+
+    FolderSideBar,
+
+    getGuildsTree(folders, oldTree) {
+        const tree = new GuildsTree();
+        tree.root.children = oldTree.root.children.filter(e => folders.includes(e.id));
+        tree.nodes = folders.map(id => oldTree.nodes[id]);
+        return tree;
+    },
+
+    closeFolders() {
+        for (const id of ExpandedFolderStore.getExpandedFolders())
+            FolderUtils.toggleGuildFolderExpand(id);
+    },
+});

src/plugins/betterRoleDot.ts

@@ -37,14 +37,14 @@ export default definePlugin({
             },
         },
         {
-            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",
             },
-        },
+        }
     ],
 
     options: {

src/plugins/colorSighted.ts

@@ -27,11 +27,16 @@ export default definePlugin({
         {
             find: "Masks.STATUS_ONLINE",
             replacement: {
-                // we can use global replacement here - these are specific to the status icons and are used nowhere else,
-                // so it keeps the patch and plugin small and simple
                 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

@@ -17,10 +17,13 @@
 */
 
 import { Devs } from "@utils/constants";
+import { relaunch } from "@utils/native";
+import { canonicalizeMatch, canonicalizeReplace, canonicalizeReplacement } from "@utils/patches";
 import definePlugin from "@utils/types";
 import * as Webpack from "@webpack";
 import { extract, filters, findAll, search } from "@webpack";
-import { React } from "@webpack/common";
+import { React, ReactDOM } from "@webpack/common";
+import type { ComponentType } from "react";
 
 const WEB_ONLY = (f: string) => () => {
     throw new Error(`'${f}' is Discord Desktop only.`);
@@ -58,6 +61,7 @@ export default definePlugin({
             };
         }
 
+        let fakeRenderWin: WeakRef<Window> | undefined;
         return {
             wp: Vencord.Webpack,
             wpc: Webpack.wreq.c,
@@ -71,13 +75,25 @@ export default definePlugin({
             findAllByProps: (...props: string[]) => findAll(filters.byProps(...props)),
             findByCode: newFindWrapper(filters.byCode),
             findAllByCode: (code: string) => findAll(filters.byCode(code)),
+            findStore: newFindWrapper(filters.byStoreName),
             PluginsApi: Vencord.Plugins,
             plugins: Vencord.Plugins.plugins,
             React,
             Settings: Vencord.Settings,
             Api: Vencord.Api,
             reload: () => location.reload(),
-            restart: IS_WEB ? WEB_ONLY("restart") : window.DiscordNative.app.relaunch
+            restart: IS_WEB ? WEB_ONLY("restart") : relaunch,
+            canonicalizeMatch,
+            canonicalizeReplace,
+            canonicalizeReplacement,
+            fakeRender: (component: ComponentType, props: any) => {
+                const prevWin = fakeRenderWin?.deref();
+                const win = prevWin?.closed === false ? prevWin : window.open("about:blank", "Fake Render", "popup,width=500,height=500")!;
+                fakeRenderWin = new WeakRef(win);
+                win.focus();
+
+                ReactDOM.render(React.createElement(component, props), win.document.body);
+            }
         };
     },
 

src/plugins/corruptMp4s.ts

@@ -1,105 +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 { ApplicationCommandOptionType, sendBotMessage } from "@api/Commands";
-import { findOption } from "@api/Commands/commandHelpers";
-import { ApplicationCommandInputType } from "@api/Commands/types";
-import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
-import { findByCode, findByProps } from "@webpack";
-
-const DRAFT_TYPE = 0;
-
-export default definePlugin({
-    name: "CorruptMp4s",
-    description: "Create corrupt mp4s with extremely high or negative duration",
-    authors: [Devs.Ven],
-    dependencies: ["CommandsAPI"],
-    commands: [{
-        name: "corrupt",
-        description: "Create a corrupt mp4 with extremely high or negative duration",
-        inputType: ApplicationCommandInputType.BUILT_IN,
-        options: [
-            {
-                name: "mp4",
-                description: "the video to corrupt",
-                type: ApplicationCommandOptionType.ATTACHMENT,
-                required: true
-            },
-            {
-                name: "kind",
-                description: "the kind of corruption",
-                type: ApplicationCommandOptionType.STRING,
-                choices: [
-                    {
-                        name: "infinite",
-                        value: "infinite",
-                        label: "Very high duration"
-                    },
-                    {
-                        name: "negative",
-                        value: "negative",
-                        label: "Negative duration"
-                    }
-                ]
-            }
-        ],
-        execute: async (args, ctx) => {
-            const UploadStore = findByProps("getUploads");
-            const upload = UploadStore.getUploads(ctx.channel.id, DRAFT_TYPE)[0];
-
-            const video = upload?.item?.file as File | undefined;
-
-            if (video?.type !== "video/mp4")
-                return void sendBotMessage(ctx.channel.id, {
-                    content: "Please upload a mp4 file"
-                });
-
-            const corruption = findOption<string>(args, "kind", "infinite");
-
-            const buf = new Uint8Array(await video.arrayBuffer());
-            let found = false;
-
-            // adapted from https://github.com/GeopJr/exorcism/blob/c9a12d77ccbcb49c987b385eafae250906efc297/src/App.svelte#L41-L48
-            for (let i = 0; i < buf.length; i++) {
-                if (buf[i] === 0x6d && buf[i + 1] === 0x76 && buf[i + 2] === 0x68 && buf[i + 3] === 0x64) {
-                    let start = i + 18;
-                    buf[start++] = 0x00;
-                    buf[start++] = 0x01;
-                    buf[start++] = corruption === "negative" ? 0xff : 0x7f;
-                    buf[start++] = 0xff;
-                    buf[start++] = 0xff;
-                    buf[start++] = corruption === "negative" ? 0xf0 : 0xff;
-                    found = true;
-                    break;
-                }
-            }
-
-            if (!found) {
-                return void sendBotMessage(ctx.channel.id, {
-                    content: "Could not find signature. Is this even a mp4?"
-                });
-            }
-
-            const newName = video.name.replace(/\.mp4$/i, ".corrupt.mp4");
-            const promptToUpload = findByCode("UPLOAD_FILE_LIMIT_ERROR");
-            const file = new File([buf], newName, { type: "video/mp4" });
-            setTimeout(() => promptToUpload([file], ctx.channel, DRAFT_TYPE), 10);
-        }
-    }]
-});

src/plugins/crashHandler.ts

@@ -42,6 +42,8 @@ const settings = definePluginSettings({
 });
 
 let crashCount: number = 0;
+let lastCrashTimestamp: number = 0;
+let shouldAttemptNextHandle = false;
 
 export default definePlugin({
     name: "CrashHandler",
@@ -71,15 +73,21 @@ export default definePlugin({
     ],
 
     handleCrash(_this: ReactElement & { forceUpdate: () => void; }) {
+        if (Date.now() - lastCrashTimestamp <= 1_000 && !shouldAttemptNextHandle) return true;
+
+        shouldAttemptNextHandle = false;
+
         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;
         }
 
@@ -97,17 +105,22 @@ export default definePlugin({
         } 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" });
@@ -143,6 +156,7 @@ export default definePlugin({
         }
 
         try {
+            shouldAttemptNextHandle = true;
             _this.forceUpdate();
         } catch (err) {
             CrashHandlerLogger.debug("Failed to update crash handler component.", err);

src/plugins/customRPC.tsx

@@ -215,7 +215,8 @@ async function setRpc(disable?: boolean) {
 
     FluxDispatcher.dispatch({
         type: "LOCAL_ACTIVITY_UPDATE",
-        activity: !disable ? activity : {}
+        activity: !disable ? activity : null,
+        socketId: "CustomRPC",
     });
 }
 

src/plugins/devCompanion.dev.tsx

@@ -16,12 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch } from "@api/ContextMenu";
+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 from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { filters, findAll, search } from "@webpack";
 import { Menu } from "@webpack/common";
 
@@ -65,6 +66,14 @@ interface FindData {
     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":
@@ -91,9 +100,10 @@ function initWs(isManual = false) {
 
         logger.info("Connected to WebSocket");
 
-        showNotification({
+        (settings.store.notifyOnAutoConnect || isManual) && showNotification({
             title: "Dev Companion Connected",
-            body: "Connected to WebSocket"
+            body: "Connected to WebSocket",
+            noPersist: true
         });
     });
 
@@ -107,7 +117,8 @@ function initWs(isManual = false) {
         showNotification({
             title: "Dev Companion Error",
             body: (e as ErrorEvent).message || "No Error Message",
-            color: "var(--status-danger, red)"
+            color: "var(--status-danger, red)",
+            noPersist: true,
         });
     });
 
@@ -119,7 +130,8 @@ function initWs(isManual = false) {
         showNotification({
             title: "Dev Companion Disconnected",
             body: e.reason || "No Reason provided",
-            color: "var(--status-danger, red)"
+            color: "var(--status-danger, red)",
+            noPersist: true,
         });
     });
 
@@ -149,7 +161,12 @@ function initWs(isManual = false) {
                 if (keys.length !== 1)
                     return reply("Expected exactly one 'find' matches, found " + keys.length);
 
-                let src = String(candidates[keys[0]]);
+                const mod = candidates[keys[0]];
+                let src = String(mod.original ?? mod).replaceAll("\n", "");
+
+                if (src.startsWith("function(")) {
+                    src = "0," + src;
+                }
 
                 let i = 0;
 
@@ -221,18 +238,8 @@ function initWs(isManual = false) {
     });
 }
 
-export default definePlugin({
+const contextMenuPatch: NavContextMenuPatchCallback = children => () => {
-    name: "DevCompanion",
+    children.unshift(
-    description: "Dev Companion Plugin",
-    authors: [Devs.Ven],
-    dependencies: ["ContextMenuAPI"],
-
-    start() {
-        initWs();
-        addContextMenuPatch("user-settings-cog", kids => {
-            if (kids.some(k => k?.props?.id === NAV_ID)) return;
-
-            kids.unshift(
         <Menu.MenuItem
             id={NAV_ID}
             label="Reconnect Dev Companion"
@@ -242,11 +249,22 @@ export default definePlugin({
             }}
         />
     );
-        });
+};
+
+export default definePlugin({
+    name: "DevCompanion",
+    description: "Dev Companion Plugin",
+    authors: [Devs.Ven],
+    settings,
+
+    start() {
+        initWs();
+        addContextMenuPatch("user-settings-cog", contextMenuPatch);
     },
 
     stop() {
         socket?.close(1000, "Plugin Stopped");
         socket = void 0;
+        removeContextMenuPatch("user-settings-cog", contextMenuPatch);
     }
 });

src/plugins/emoteCloner.tsx

@@ -17,7 +17,6 @@
 */
 
 import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
-import { migratePluginSettings } from "@api/settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Devs } from "@utils/constants";
 import Logger from "@utils/Logger";
@@ -176,25 +175,12 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
     );
 }
 
-const messageContextMenuPatch: NavContextMenuPatchCallback = (children, args) => {
+function buildMenuItem(id: string, name: string, isAnimated: boolean) {
-    if (!args?.[0]) return;
+    return (
-    const { favoriteableId, emoteClonerDataAlt, itemHref, itemSrc, favoriteableType } = args[0];
-
-    if (!emoteClonerDataAlt || favoriteableType !== "emoji") return;
-
-    const name = emoteClonerDataAlt.match(/:(.*)(?:~\d+)?:/)?.[1];
-    if (!name || !favoriteableId) return;
-
-    const src = itemHref ?? itemSrc;
-    const isAnimated = new URL(src).pathname.endsWith(".gif");
-
-    const group = findGroupChildrenByChildId("save-image", children);
-    if (group && !group.some(child => child?.props?.id === "emote-cloner")) {
-        group.push((
         <Menu.MenuItem
             id="emote-cloner"
             key="emote-cloner"
-                label="Clone"
+            label="Clone Emote"
             action={() =>
                 openModal(modalProps => (
                     <ModalRoot {...modalProps}>
@@ -202,7 +188,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, args) =>
                             <img
                                 role="presentation"
                                 aria-hidden
-                                    src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${favoriteableId}.${isAnimated ? "gif" : "png"}`}
+                                src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${id}.${isAnimated ? "gif" : "png"}`}
                                 alt=""
                                 height={24}
                                 width={24}
@@ -211,39 +197,53 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, args) =>
                             <Forms.FormText>Clone {name}</Forms.FormText>
                         </ModalHeader>
                         <ModalContent>
-                                <CloneModal id={favoriteableId} name={name} isAnimated={isAnimated} />
+                            <CloneModal id={id} name={name} isAnimated={isAnimated} />
                         </ModalContent>
                     </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.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;
+
+    children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
 };
 
-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, Devs.Nuckyz],
-    dependencies: ["MenuItemDeobfuscatorAPI", "ContextMenuAPI"],
-
-    patches: [
-        {
-            find: ".Messages.MESSAGE_ACTIONS_MENU_LABEL",
-            replacement: {
-                match: /favoriteableType:\i,(?<=(\i)\.getAttribute\("data-type"\).+?)/,
-                replace: (m, target) => `${m}emoteClonerDataAlt:${target}.alt,`
-            }
-        }
-    ],
 
     start() {
         addContextMenuPatch("message", messageContextMenuPatch);
+        addContextMenuPatch("expression-picker", expressionPickerPatch);
     },
 
     stop() {
         removeContextMenuPatch("message", messageContextMenuPatch);
+        removeContextMenuPatch("expression-picker", expressionPickerPatch);
     }
 });

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,359 +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, PermissionStore, UserStore } from "@webpack/common";
-
-const DRAFT_TYPE = 0;
-const promptToUpload = findByCodeLazy("UPLOAD_FILE_LIMIT_ERROR");
-
-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: (_, canUseExternal) => `(!${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: (_, premiumCheck) => `,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;"
-            }
-        }
-    ],
-
-    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;
-    },
-
-    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/fakeNitro.tsx

@@ -0,0 +1,717 @@
+/*
+ * 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 { definePluginSettings, migratePluginSettings, Settings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import { ApngBlendOp, 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, Parser, PermissionStore, UserStore } from "@webpack/common";
+import type { Message } from "discord-types/general";
+import type { ReactNode } from "react";
+
+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");
+const StickerStore = findStoreLazy("StickersStore") as {
+    getPremiumPacks(): StickerPack[];
+    getAllGuildStickers(): Map<string, Sticker[]>;
+    getStickerById(id: string): Sticker | undefined;
+};
+const EmojiStore = findStoreLazy("EmojiStore");
+
+
+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[];
+}
+
+const fakeNitroEmojiRegex = /\/emojis\/(\d+?)\.(png|webp|gif)/;
+const fakeNitroStickerRegex = /\/stickers\/(\d+?)\./;
+const fakeNitroGifStickerRegex = /\/attachments\/\d+?\/\d+?\/(\d+?)\.gif/;
+
+const settings = definePluginSettings({
+    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]
+    },
+    transformStickers: {
+        description: "Whether to transform fake stickers into real ones",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    },
+    transformCompoundSentence: {
+        description: "Whether to transform fake stickers and emojis in compound sentences (sentences with more content than just the fake emoji or sticker link)",
+        type: OptionType.BOOLEAN,
+        default: false
+    },
+    enableStreamQualityBypass: {
+        description: "Allow streaming in nitro quality",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    }
+});
+
+migratePluginSettings("FakeNitro", "NitroBypass");
+
+export default definePlugin({
+    name: "FakeNitro",
+    authors: [Devs.Arjix, Devs.D3SOX, Devs.Ven, Devs.obscurity, Devs.captain, Devs.Nuckyz, Devs.AutumnVN],
+    description: "Allows you to stream in nitro quality, send fake emojis/stickers and use client themes.",
+    dependencies: ["MessageEventsAPI"],
+
+    settings,
+
+    patches: [
+        {
+            find: ".PREMIUM_LOCKED;",
+            predicate: () => settings.store.enableEmojiBypass,
+            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.store.enableEmojiBypass,
+            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.store.enableStickerBypass,
+            replacement: {
+                match: /canUseStickersEverywhere:function\(\i\){/,
+                replace: "$&return true;"
+            },
+        },
+        {
+            find: "\"SENDABLE\"",
+            predicate: () => settings.store.enableStickerBypass,
+            replacement: {
+                match: /(\w+)\.available\?/,
+                replace: "true?"
+            }
+        },
+        {
+            find: "canStreamHighQuality:function",
+            predicate: () => settings.store.enableStreamQualityBypass,
+            replacement: [
+                "canUseHighVideoUploadQuality",
+                "canStreamHighQuality",
+                "canStreamMidQuality"
+            ].map(func => {
+                return {
+                    match: new RegExp(`${func}:function\\(\\i\\){`),
+                    replace: "$&return true;"
+                };
+            })
+        },
+        {
+            find: "STREAM_FPS_OPTION.format",
+            predicate: () => settings.store.enableStreamQualityBypass,
+            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: '["strong","em","u","text","inlineCode","s","spoiler"]',
+            replacement: [
+                {
+                    predicate: () => settings.store.transformEmojis,
+                    match: /1!==(\i)\.length\|\|1!==\i\.length/,
+                    replace: (m, content) => `${m}||$self.shouldKeepEmojiLink(${content}[0])`
+                },
+                {
+                    predicate: () => settings.store.transformEmojis || settings.store.transformStickers,
+                    match: /(?=return{hasSpoilerEmbeds:\i,content:(\i)})/,
+                    replace: (_, content) => `${content}=$self.patchFakeNitroEmojisOrRemoveStickersLinks(${content},arguments[2]?.formatInline);`
+                }
+            ]
+        },
+        {
+            find: "renderEmbeds=function",
+            replacement: [
+                {
+                    predicate: () => settings.store.transformEmojis || settings.store.transformStickers,
+                    match: /(renderEmbeds=function\((\i)\){)(.+?embeds\.map\(\(function\((\i)\){)/,
+                    replace: (_, rest1, message, rest2, embed) => `${rest1}const fakeNitroMessage=${message};${rest2}if($self.shouldIgnoreEmbed(${embed},fakeNitroMessage))return null;`
+                },
+                {
+                    predicate: () => settings.store.transformStickers,
+                    match: /renderStickersAccessories=function\((\i)\){var (\i)=\(0,\i\.\i\)\(\i\),/,
+                    replace: (m, message, stickers) => `${m}${stickers}=$self.patchFakeNitroStickers(${stickers},${message}),`
+                },
+                {
+                    predicate: () => settings.store.transformStickers,
+                    match: /renderAttachments=function\(\i\){var (\i)=\i.attachments.+?;/,
+                    replace: (m, attachments) => `${m}${attachments}=$self.filterAttachments(${attachments});`
+                }
+            ]
+        },
+        {
+            find: ".STICKER_IN_MESSAGE_HOVER,",
+            predicate: () => settings.store.transformStickers,
+            replacement: [
+                {
+                    match: /var (\i)=\i\.renderableSticker,.{0,50}closePopout.+?channel:\i,closePopout:\i,/,
+                    replace: (m, renderableSticker) => `${m}renderableSticker:${renderableSticker},`
+                },
+                {
+                    match: /(emojiSection.{0,50}description:)(\i)(?<=(\i)\.sticker,.+?)(?=,)/,
+                    replace: (_, rest, reactNode, props) => `${rest}$self.addFakeNotice("STICKER",${reactNode},!!${props}.renderableSticker?.fake)`
+                }
+            ]
+        },
+        {
+            find: ".Messages.EMOJI_POPOUT_PREMIUM_JOINED_GUILD_DESCRIPTION",
+            predicate: () => settings.store.transformEmojis,
+            replacement: {
+                match: /((\i)=\i\.node,\i=\i\.emojiSourceDiscoverableGuild)(.+?return )(.{0,450}Messages\.EMOJI_POPOUT_PREMIUM_JOINED_GUILD_DESCRIPTION.+?}\))/,
+                replace: (_, rest1, node, rest2, reactNode) => `${rest1},fakeNitroNode=${node}${rest2}$self.addFakeNotice("EMOJI",${reactNode},fakeNitroNode.fake)`
+            }
+        }
+    ],
+
+    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
+            }
+        });
+    },
+
+    patchFakeNitroEmojisOrRemoveStickersLinks(content: Array<any>, inline: boolean) {
+        if (content.length > 1 && !settings.store.transformCompoundSentence) return content;
+
+        const newContent: Array<any> = [];
+
+        let nextIndex = content.length;
+
+        for (const element of content) {
+            if (element.props?.trusted == null) {
+                newContent.push(element);
+                continue;
+            }
+
+            if (settings.store.transformEmojis) {
+                const fakeNitroMatch = element.props.href.match(fakeNitroEmojiRegex);
+                if (fakeNitroMatch) {
+                    let url: URL | null = null;
+                    try {
+                        url = new URL(element.props.href);
+                    } catch { }
+
+                    const emojiName = EmojiStore.getCustomEmojiById(fakeNitroMatch[1])?.name ?? url?.searchParams.get("name") ?? "FakeNitroEmoji";
+
+                    newContent.push(Parser.defaultRules.customEmoji.react({
+                        jumboable: !inline && content.length === 1,
+                        animated: fakeNitroMatch[2] === "gif",
+                        emojiId: fakeNitroMatch[1],
+                        name: emojiName,
+                        fake: true
+                    }, void 0, { key: String(nextIndex++) }));
+
+                    continue;
+                }
+            }
+
+            if (settings.store.transformStickers) {
+                if (fakeNitroStickerRegex.test(element.props.href)) continue;
+
+                const gifMatch = element.props.href.match(fakeNitroGifStickerRegex);
+                if (gifMatch) {
+                    // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
+                    if (StickerStore.getStickerById(gifMatch[1])) continue;
+                }
+            }
+
+            newContent.push(element);
+        }
+
+        const firstContent = newContent[0];
+        if (typeof firstContent === "string") newContent[0] = firstContent.trimStart();
+
+        return newContent;
+    },
+
+    patchFakeNitroStickers(stickers: Array<any>, message: Message) {
+        const itemsToMaybePush: Array<string> = [];
+
+        const contentItems = message.content.split(/\s/);
+        if (contentItems.length === 1 && !settings.store.transformCompoundSentence) itemsToMaybePush.push(contentItems[0]);
+        else itemsToMaybePush.push(...contentItems);
+
+        itemsToMaybePush.push(...message.attachments.filter(attachment => attachment.content_type === "image/gif").map(attachment => attachment.url));
+
+        for (const item of itemsToMaybePush) {
+            const imgMatch = item.match(fakeNitroStickerRegex);
+            if (imgMatch) {
+                let url: URL | null = null;
+                try {
+                    url = new URL(item);
+                } catch { }
+
+                const stickerName = StickerStore.getStickerById(imgMatch[1])?.name ?? url?.searchParams.get("name") ?? "FakeNitroSticker";
+                stickers.push({
+                    format_type: 1,
+                    id: imgMatch[1],
+                    name: stickerName,
+                    fake: true
+                });
+
+                continue;
+            }
+
+            const gifMatch = item.match(fakeNitroGifStickerRegex);
+            if (gifMatch) {
+                if (!StickerStore.getStickerById(gifMatch[1])) continue;
+
+                const stickerName = StickerStore.getStickerById(gifMatch[1])?.name ?? "FakeNitroSticker";
+                stickers.push({
+                    format_type: 2,
+                    id: gifMatch[1],
+                    name: stickerName,
+                    fake: true
+                });
+            }
+        }
+
+        return stickers;
+    },
+
+    shouldIgnoreEmbed(embed: Message["embeds"][number], message: Message) {
+        if (message.content.split(/\s/).length > 1 && !settings.store.transformCompoundSentence) return false;
+
+        switch (embed.type) {
+            case "image": {
+                if (settings.store.transformEmojis) {
+                    if (fakeNitroEmojiRegex.test(embed.url!)) return true;
+                }
+
+                if (settings.store.transformStickers) {
+                    if (fakeNitroStickerRegex.test(embed.url!)) return true;
+
+                    const gifMatch = embed.url!.match(fakeNitroGifStickerRegex);
+                    if (gifMatch) {
+                        // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
+                        if (StickerStore.getStickerById(gifMatch[1])) return true;
+                    }
+                }
+
+                break;
+            }
+        }
+
+        return false;
+    },
+
+    filterAttachments(attachments: Message["attachments"]) {
+        return attachments.filter(attachment => {
+            if (attachment.content_type !== "image/gif") return true;
+
+            const match = attachment.url.match(fakeNitroGifStickerRegex);
+            if (match) {
+                // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
+                if (StickerStore.getStickerById(match[1])) return false;
+            }
+
+            return true;
+        });
+    },
+
+    shouldKeepEmojiLink(link: any) {
+        return link.target && fakeNitroEmojiRegex.test(link.target);
+    },
+
+    addFakeNotice(type: "STICKER" | "EMOJI", node: Array<ReactNode>, fake: boolean) {
+        if (!fake) return node;
+
+        node = Array.isArray(node) ? node : [node];
+
+        switch (type) {
+            case "STICKER": {
+                node.push(" This is a FakeNitro sticker and renders like a real sticker only for you. Appears as a link to non-plugin users.");
+
+                return node;
+            }
+            case "EMOJI": {
+                node.push(" This is a FakeNitro emoji and renders like a real emoji only for you. Appears as a link to non-plugin users.");
+
+                return node;
+            }
+        }
+    },
+
+    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 previousFrameData: ImageData;
+
+        for (const frame of frames) {
+            const { left, top, width, height, img, delay, blendOp, disposeOp } = frame;
+
+            previousFrameData = ctx.getImageData(left, top, width, height);
+
+            if (blendOp === ApngBlendOp.SOURCE) {
+                ctx.clearRect(left, top, width, height);
+            }
+
+            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) {
+                ctx.putImageData(previousFrameData, left, top);
+            }
+        }
+
+        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;
+        }
+
+        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(link, 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 + `&name=${encodeURIComponent(sticker.name)}`;
+                }
+            }
+
+            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+/, "?" + new URLSearchParams({
+                        size: Settings.plugins.FakeNitro.emojiSize,
+                        name: encodeURIComponent(emoji.name)
+                    }));
+                    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+/, "?" + new URLSearchParams({
+                    size: Settings.plugins.FakeNitro.emojiSize,
+                    name: encodeURIComponent(emoji.name)
+                }));
+                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/fakeProfileThemes.tsx

@@ -0,0 +1,145 @@
+/*
+ * 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/>.
+*/
+
+// This plugin is a port from Alyxia's Vendetta plugin
+import { definePluginSettings } from "@api/settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import { Margins } from "@utils/margins";
+import { copyWithToast } from "@utils/misc";
+import definePlugin, { OptionType } from "@utils/types";
+import { Button, Forms } from "@webpack/common";
+import { User } from "discord-types/general";
+import virtualMerge from "virtual-merge";
+
+interface UserProfile extends User {
+    themeColors?: Array<number>;
+}
+
+interface Colors {
+    primary: number;
+    accent: number;
+}
+
+function encode(primary: number, accent: number): string {
+    const message = `[#${primary.toString(16).padStart(6, "0")},#${accent.toString(16).padStart(6, "0")}]`;
+    const padding = "";
+    const encoded = Array.from(message)
+        .map(x => x.codePointAt(0))
+        .filter(x => x! >= 0x20 && x! <= 0x7f)
+        .map(x => String.fromCodePoint(x! + 0xe0000))
+        .join("");
+
+    return (padding || "") + " " + encoded;
+}
+
+// Courtesy of Cynthia.
+function decode(bio: string): Array<number> | null {
+    if (bio == null) return null;
+
+    const colorString = bio.match(
+        /\u{e005b}\u{e0023}([\u{e0061}-\u{e0066}\u{e0041}-\u{e0046}\u{e0030}-\u{e0039}]+?)\u{e002c}\u{e0023}([\u{e0061}-\u{e0066}\u{e0041}-\u{e0046}\u{e0030}-\u{e0039}]+?)\u{e005d}/u,
+    );
+    if (colorString != null) {
+        const parsed = [...colorString[0]]
+            .map(x => String.fromCodePoint(x.codePointAt(0)! - 0xe0000))
+            .join("");
+        const colors = parsed
+            .substring(1, parsed.length - 1)
+            .split(",")
+            .map(x => parseInt(x.replace("#", "0x"), 16));
+
+        return colors;
+    } else {
+        return null;
+    }
+}
+
+const settings = definePluginSettings({
+    nitroFirst: {
+        description: "Default color source if both are present",
+        type: OptionType.SELECT,
+        options: [
+            { label: "Nitro colors", value: true, default: true },
+            { label: "Fake colors", value: false },
+        ]
+    }
+});
+
+export default definePlugin({
+    name: "FakeProfileThemes",
+    description: "Allows profile theming by hiding the colors in your bio thanks to invisible 3y3 encoding",
+    authors: [Devs.Alyxia, Devs.Remty],
+    patches: [
+        {
+            find: "getUserProfile=",
+            replacement: {
+                match: /(?<=getUserProfile=function\(\i\){return )(\i\[\i\])/,
+                replace: "$self.colorDecodeHook($1)"
+            }
+        }, {
+            find: ".USER_SETTINGS_PROFILE_THEME_ACCENT",
+            replacement: {
+                match: /RESET_PROFILE_THEME}\)(?<=},color:(\i).+?},color:(\i).+?)/,
+                replace: "$&,$self.addCopy3y3Button({primary:$1,accent:$2})"
+            }
+        }
+    ],
+    settingsAboutComponent: () => (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h3">Usage</Forms.FormTitle>
+            <Forms.FormText>
+                After enabling this plugin, you will see custom colors in the profiles of other people using compatible plugins. <br />
+                To set your own colors:
+                <ul>
+                    <li>• go to your profile settings</li>
+                    <li>• choose your own colors in the Nitro preview</li>
+                    <li>• click the "Copy 3y3" button</li>
+                    <li>• paste the invisible text anywhere in your bio</li>
+                </ul><br />
+                <b>Please note:</b> if you are using a theme which hides nitro ads, you should disable it temporarily to set colors.
+            </Forms.FormText>
+        </Forms.FormSection>),
+    settings,
+    colorDecodeHook(user: UserProfile) {
+        if (user) {
+            // don't replace colors if already set with nitro
+            if (settings.store.nitroFirst && user.themeColors) return user;
+            const colors = decode(user.bio);
+            if (colors) {
+                return virtualMerge(user, {
+                    premiumType: 2,
+                    themeColors: colors
+                });
+            }
+        }
+        return user;
+    },
+    addCopy3y3Button: ErrorBoundary.wrap(function ({ primary, accent }: Colors) {
+        return <Button
+            onClick={() => {
+                const colorString = encode(primary, accent);
+                copyWithToast(colorString);
+            }}
+            color={Button.Colors.PRIMARY}
+            size={Button.Sizes.XLARGE}
+            className={Margins.left16}
+        >Copy 3y3
+        </Button >;
+    }, { noop: true }),
+});

src/plugins/friendInvites.ts

@@ -19,12 +19,16 @@
 import { ApplicationCommandInputType, sendBotMessage } from "@api/Commands";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { findByProps } from "@webpack";
+import { findByPropsLazy } from "@webpack";
+import { RestAPI, UserStore } from "@webpack/common";
+
+const FriendInvites = findByPropsLazy("createFriendInvite");
+const uuid = findByPropsLazy("v4", "v1");
 
 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],
+    authors: [Devs.afn, Devs.Dziurwa],
     dependencies: ["CommandsAPI"],
     commands: [
         {
@@ -32,14 +36,35 @@ export default definePlugin({
             description: "Generates a friend invite link.",
             inputType: ApplicationCommandInputType.BOT,
             execute: async (_, ctx) => {
-                const friendInvites = findByProps("createFriendInvite");
+                if (!UserStore.getCurrentUser().phone)
-                const createInvite = await friendInvites.createFriendInvite();
+                    return sendBotMessage(ctx.channel.id, {
+                        content: "You need to have a phone number connected to your account to create a friend invite!"
+                    });
 
-                return void sendBotMessage(ctx.channel.id, {
+                const random = uuid.v4();
+                const invite = await RestAPI.post({
+                    url: "/friend-finder/find-friends",
+                    body: {
+                        modified_contacts: {
+                            [random]: [1, "", ""]
+                        },
+                        phone_contact_methods_count: 1
+                    }
+                }).then(res =>
+                    FriendInvites.createFriendInvite({
+                        code: res.body.invite_suggestions[0][3],
+                        recipient_phone_number_or_email: random,
+                        contact_visibility: 1,
+                        filter_visibilities: [],
+                        filtered_invite_suggestions_index: 1
+                    })
+                );
+
+                sendBotMessage(ctx.channel.id, {
                     content: `
-                        discord.gg/${createInvite.code}
+                        discord.gg/${invite.code} ·
-                        Expires: <t:${new Date(createInvite.expires_at).getTime() / 1000}:R>
+                        Expires: <t:${new Date(invite.expires_at).getTime() / 1000}:R> ·
-                        Max uses: \`${createInvite.max_uses}\`
+                        Max uses: \`${invite.max_uses}\`
                     `.trim().replace(/\s+/g, " ")
                 });
             },
@@ -49,28 +74,29 @@ export default definePlugin({
             description: "View a list of all generated friend invites.",
             inputType: ApplicationCommandInputType.BOT,
             execute: async (_, ctx) => {
-                const friendInvites = findByProps("createFriendInvite");
+                const invites = await FriendInvites.getAllFriendInvites();
-                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}_ ·
-                    Times used: \`${i.uses}/${i.max_uses}\``.trim().replace(/\s+/g, " ")
+                    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, {
+                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();
+                await FriendInvites.revokeFriendInvites();
 
                 return void sendBotMessage(ctx.channel.id, {
-                    content: "All friend links have been revoked."
+                    content: "All friend invites have been revoked."
                 });
             },
         },

src/plugins/gameActivityToggle/index.tsx

@@ -0,0 +1,85 @@
+/*
+ * 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 { getSettingStoreLazy } from "@api/SettingsStore";
+import { disableStyle, enableStyle } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { findByCodeLazy } from "@webpack";
+
+import style from "./style.css?managed";
+
+const ShowCurrentGame = getSettingStoreLazy<boolean>("status", "showCurrentGame");
+const Button = findByCodeLazy("Button.Sizes.NONE,disabled:");
+
+function makeIcon(showCurrentGame?: boolean) {
+    return function () {
+        return (
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 96 960 960"
+            >
+                <path fill="currentColor" d="M182 856q-51 0-79-35.5T82 734l42-300q9-60 53.5-99T282 296h396q60 0 104.5 39t53.5 99l42 300q7 51-21 86.5T778 856q-21 0-39-7.5T706 826l-90-90H344l-90 90q-15 15-33 22.5t-39 7.5Zm498-240q17 0 28.5-11.5T720 576q0-17-11.5-28.5T680 536q-17 0-28.5 11.5T640 576q0 17 11.5 28.5T680 616Zm-80-120q17 0 28.5-11.5T640 456q0-17-11.5-28.5T600 416q-17 0-28.5 11.5T560 456q0 17 11.5 28.5T600 496ZM310 616h60v-70h70v-60h-70v-70h-60v70h-70v60h70v70Z" />
+                {!showCurrentGame && <line x1="920" y1="280" x2="40" y2="880" stroke="var(--status-danger)" stroke-width="80" />}
+            </svg>
+        );
+    };
+}
+
+function GameActivityToggleButton() {
+    const showCurrentGame = ShowCurrentGame?.useSetting();
+
+    return (
+        <Button
+            tooltipText={showCurrentGame ? "Disable Game Activity" : "Enable Game Activity"}
+            icon={makeIcon(showCurrentGame)}
+            role="switch"
+            aria-checked={!showCurrentGame}
+            onClick={() => ShowCurrentGame?.updateSetting(old => !old)}
+        />
+    );
+}
+
+export default definePlugin({
+    name: "GameActivityToggle",
+    description: "Adds a button next to the mic and deafen button to toggle game activity.",
+    authors: [Devs.Nuckyz],
+    dependencies: ["SettingsStoreAPI"],
+
+    patches: [
+        {
+            find: ".Messages.ACCOUNT_SPEAKING_WHILE_MUTED",
+            replacement: {
+                match: /this\.renderNameZone\(\).+?children:\[/,
+                replace: "$&$self.GameActivityToggleButton(),"
+            }
+        }
+    ],
+
+    GameActivityToggleButton: ErrorBoundary.wrap(GameActivityToggleButton, { noop: true }),
+
+    start() {
+        enableStyle(style);
+    },
+
+    stop() {
+        disableStyle(style);
+    }
+});

src/plugins/gameActivityToggle/style.css

@@ -0,0 +1,3 @@
+[class*="withTagAsButton"] {
+    min-width: 88px;
+}

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, mapMangledModuleLazy } from "@webpack";
+import { ComponentDispatch } from "@webpack/common";
+
+const ExpressionPickerState = mapMangledModuleLazy('name:"expression-picker-last-active-view"', {
+    close: filters.byCode("activeView:null", "setState")
+});
+
+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

@@ -88,7 +88,7 @@ function ToggleIconOn({ forceWhite }: { forceWhite?: boolean; }) {
     );
 }
 
-function ToggleActivityComponent({ activity, forceWhite }: { activity: IgnoredActivity; forceWhite?: boolean; }) {
+function ToggleActivityComponent({ activity, forceWhite, forceLeftMargin }: { activity: IgnoredActivity; forceWhite?: boolean; forceLeftMargin?: boolean; }) {
     const forceUpdate = useForceUpdater();
 
     return (
@@ -101,6 +101,7 @@ function ToggleActivityComponent({ activity, forceWhite }: { activity: IgnoredAc
                     role="button"
                     aria-label="Toggle activity"
                     tabIndex={0}
+                    style={forceLeftMargin ? { marginLeft: "2px" } : undefined}
                     onClick={e => handleActivityToggle(e, activity, forceUpdate)}
                 >
                     {
@@ -147,8 +148,8 @@ export default definePlugin({
         {
             find: ".Messages.SETTINGS_GAMES_TOGGLE_OVERLAY",
             replacement: {
-                match: /!(\i)\|\|(null==\i\)return null;var \i=(\i)\.overlay.+?children:)(\[.{0,70}overlayStatusText.+?\])(?=}\)}\(\))/,
+                match: /!(\i)(\)return null;var \i=(\i)\.overlay.+?children:)(\[.{0,70}overlayStatusText.+?\])(?=}\)}\(\))/,
-                replace: (_, platformCheck, restWithoutPlatformCheck, props, children) => ""
+                replace: (_, platformCheck, restWithoutPlatformCheck, props, children) => "false"
                     + `${restWithoutPlatformCheck}`
                     + `(${platformCheck}?${children}:[])`
                     + `.concat(Vencord.Plugins.plugins.IgnoreActivities.renderToggleGameActivityButton(${props}))`
@@ -200,7 +201,7 @@ export default definePlugin({
     renderToggleGameActivityButton(props: { id?: string; exePath: string; }) {
         return (
             <ErrorBoundary noop>
-                <ToggleActivityComponent activity={{ id: props.id ?? props.exePath, type: ActivitiesTypes.Game }} />
+                <ToggleActivityComponent activity={{ id: props.id ?? props.exePath, type: ActivitiesTypes.Game }} forceLeftMargin={true} />
             </ErrorBoundary>
         );
     },

src/plugins/imageZoom/components/Magnifier.tsx

@@ -0,0 +1,198 @@
+/*
+ * 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 { FluxDispatcher, React, useRef, useState } from "@webpack/common";
+
+import { ELEMENT_ID } from "../constants";
+import { settings } from "../index";
+import { waitFor } from "../utils/waitFor";
+
+interface Vec2 {
+    x: number,
+    y: number;
+}
+
+export interface MagnifierProps {
+    zoom: number;
+    size: number,
+    instance: any;
+}
+
+export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSize, zoom: initalZoom }) => {
+    const [ready, setReady] = useState(false);
+
+    const [lensPosition, setLensPosition] = useState<Vec2>({ x: 0, y: 0 });
+    const [imagePosition, setImagePosition] = useState<Vec2>({ x: 0, y: 0 });
+    const [opacity, setOpacity] = useState(0);
+
+    const isShiftDown = useRef(false);
+
+    const zoom = useRef(initalZoom);
+    const size = useRef(initialSize);
+
+    const element = useRef<HTMLDivElement | null>(null);
+    const currentVideoElementRef = useRef<HTMLVideoElement | null>(null);
+    const originalVideoElementRef = useRef<HTMLVideoElement | null>(null);
+    const imageRef = useRef<HTMLImageElement | null>(null);
+
+    // since we accessing document im gonna use useLayoutEffect
+    React.useLayoutEffect(() => {
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Shift") {
+                isShiftDown.current = true;
+            }
+        };
+        const onKeyUp = (e: KeyboardEvent) => {
+            if (e.key === "Shift") {
+                isShiftDown.current = false;
+            }
+        };
+        const syncVideos = () => {
+            currentVideoElementRef.current!.currentTime = originalVideoElementRef.current!.currentTime;
+        };
+
+        const updateMousePosition = (e: MouseEvent) => {
+            if (instance.state.mouseOver && instance.state.mouseDown) {
+                const offset = size.current / 2;
+                const pos = { x: e.pageX, y: e.pageY };
+                const x = -((pos.x - element.current!.getBoundingClientRect().left) * zoom.current - offset);
+                const y = -((pos.y - element.current!.getBoundingClientRect().top) * zoom.current - offset);
+                setLensPosition({ x: e.x - offset, y: e.y - offset });
+                setImagePosition({ x, y });
+                setOpacity(1);
+            } else {
+                setOpacity(0);
+            }
+
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+            if (instance.state.mouseOver && e.button === 0 /* left click */) {
+                zoom.current = settings.store.zoom;
+                size.current = settings.store.size;
+
+                // close context menu if open
+                if (document.getElementById("image-context")) {
+                    FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" });
+                }
+
+                updateMousePosition(e);
+                setOpacity(1);
+            }
+        };
+
+        const onMouseUp = () => {
+            setOpacity(0);
+            if (settings.store.saveZoomValues) {
+                settings.store.zoom = zoom.current;
+                settings.store.size = size.current;
+            }
+        };
+
+        const onWheel = async (e: WheelEvent) => {
+            if (instance.state.mouseOver && instance.state.mouseDown && !isShiftDown.current) {
+                const val = zoom.current + ((e.deltaY / 100) * (settings.store.invertScroll ? -1 : 1)) * settings.store.zoomSpeed;
+                zoom.current = val <= 1 ? 1 : val;
+                updateMousePosition(e);
+            }
+            if (instance.state.mouseOver && instance.state.mouseDown && isShiftDown.current) {
+                const val = size.current + (e.deltaY * (settings.store.invertScroll ? -1 : 1)) * settings.store.zoomSpeed;
+                size.current = val <= 50 ? 50 : val;
+                updateMousePosition(e);
+            }
+        };
+
+        waitFor(() => instance.state.readyState === "READY", () => {
+            const elem = document.getElementById(ELEMENT_ID) as HTMLDivElement;
+            element.current = elem;
+            elem.firstElementChild!.setAttribute("draggable", "false");
+            if (instance.props.animated) {
+                originalVideoElementRef.current = elem!.querySelector("video")!;
+                originalVideoElementRef.current.addEventListener("timeupdate", syncVideos);
+                setReady(true);
+            } else {
+                setReady(true);
+            }
+        });
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("keyup", onKeyUp);
+        document.addEventListener("mousemove", updateMousePosition);
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("wheel", onWheel);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("keyup", onKeyUp);
+            document.removeEventListener("mousemove", updateMousePosition);
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mouseup", onMouseUp);
+            document.removeEventListener("wheel", onWheel);
+
+            if (settings.store.saveZoomValues) {
+                settings.store.zoom = zoom.current;
+                settings.store.size = size.current;
+            }
+        };
+    }, []);
+
+    if (!ready) return null;
+
+    const box = element.current!.getBoundingClientRect();
+
+    return (
+        <div
+            className="vc-imgzoom-lens"
+            style={{
+                opacity,
+                width: size.current + "px",
+                height: size.current + "px",
+                transform: `translate(${lensPosition.x}px, ${lensPosition.y}px)`,
+            }}
+        >
+            {instance.props.animated ?
+                (
+                    <video
+                        ref={currentVideoElementRef}
+                        style={{
+                            position: "absolute",
+                            left: `${imagePosition.x}px`,
+                            top: `${imagePosition.y}px`
+                        }}
+                        width={`${box.width * zoom.current}px`}
+                        height={`${box.height * zoom.current}px`}
+                        poster={instance.props.src}
+                        src={originalVideoElementRef.current?.src ?? instance.props.src}
+                        autoPlay
+                        loop
+                    />
+                ) : (
+                    <img
+                        ref={imageRef}
+                        style={{
+                            position: "absolute",
+                            transform: `translate(${imagePosition.x}px, ${imagePosition.y}px)`
+                        }}
+                        width={`${box.width * zoom.current}px`}
+                        height={`${box.height * zoom.current}px`}
+                        src={instance.props.src}
+                        alt=""
+                    />
+                )}
+        </div>
+    );
+};

src/plugins/imageZoom/constants.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 const ELEMENT_ID = "vc-imgzoom-magnify-modal";

src/plugins/imageZoom/index.tsx

@@ -0,0 +1,234 @@
+/*
+ * 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 { definePluginSettings } from "@api/settings";
+import { disableStyle, enableStyle } from "@api/Styles";
+import { makeRange } from "@components/PluginSettings/components";
+import { Devs } from "@utils/constants";
+import { debounce } from "@utils/debounce";
+import definePlugin, { OptionType } from "@utils/types";
+import { Menu, React, ReactDOM } from "@webpack/common";
+import type { Root } from "react-dom/client";
+
+import { Magnifier, MagnifierProps } from "./components/Magnifier";
+import { ELEMENT_ID } from "./constants";
+import styles from "./styles.css?managed";
+
+export const settings = definePluginSettings({
+    saveZoomValues: {
+        type: OptionType.BOOLEAN,
+        description: "Whether to save zoom and lens size values",
+        default: true,
+    },
+
+    preventCarouselFromClosingOnClick: {
+        type: OptionType.BOOLEAN,
+        // Thanks chat gpt
+        description: "Allow the image modal in the image slideshow thing / carousel to remain open when clicking on the image",
+        default: true,
+    },
+
+    invertScroll: {
+        type: OptionType.BOOLEAN,
+        description: "Invert scroll",
+        default: true,
+    },
+
+    zoom: {
+        description: "Zoom of the lens",
+        type: OptionType.SLIDER,
+        markers: makeRange(1, 50, 4),
+        default: 2,
+        stickToMarkers: false,
+    },
+    size: {
+        description: "Radius / Size of the lens",
+        type: OptionType.SLIDER,
+        markers: makeRange(50, 1000, 50),
+        default: 100,
+        stickToMarkers: false,
+    },
+
+    zoomSpeed: {
+        description: "How fast the zoom / lens size changes",
+        type: OptionType.SLIDER,
+        markers: makeRange(0.1, 5, 0.2),
+        default: 0.5,
+        stickToMarkers: false,
+    },
+});
+
+
+const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
+    children.push(
+        <Menu.MenuGroup id="image-zoom">
+            {/* thanks SpotifyControls */}
+            <Menu.MenuControlItem
+                id="zoom"
+                label="Zoom"
+                control={(props, ref) => (
+                    <Menu.MenuSliderControl
+                        ref={ref}
+                        {...props}
+                        minValue={1}
+                        maxValue={50}
+                        value={settings.store.zoom}
+                        onChange={debounce((value: number) => settings.store.zoom = value, 100)}
+                    />
+                )}
+            />
+            <Menu.MenuControlItem
+                id="size"
+                label="Lens Size"
+                control={(props, ref) => (
+                    <Menu.MenuSliderControl
+                        ref={ref}
+                        {...props}
+                        minValue={50}
+                        maxValue={1000}
+                        value={settings.store.size}
+                        onChange={debounce((value: number) => settings.store.size = value, 100)}
+                    />
+                )}
+            />
+            <Menu.MenuControlItem
+                id="zoom-speed"
+                label="Zoom Speed"
+                control={(props, ref) => (
+                    <Menu.MenuSliderControl
+                        ref={ref}
+                        {...props}
+                        minValue={0.1}
+                        maxValue={5}
+                        value={settings.store.zoomSpeed}
+                        onChange={debounce((value: number) => settings.store.zoomSpeed = value, 100)}
+                        renderValue={(value: number) => `${value.toFixed(3)}x`}
+                    />
+                )}
+            />
+        </Menu.MenuGroup>
+    );
+};
+
+export default definePlugin({
+    name: "ImageZoom",
+    description: "Lets you zoom in to images and gifs. Use scroll wheel to zoom in and shift + scroll wheel to increase lens radius / size",
+    authors: [Devs.Aria],
+    patches: [
+        {
+            find: '"renderLinkComponent","maxWidth"',
+            replacement: {
+                match: /(return\(.{1,100}\(\)\.wrapper.{1,100})(src)/,
+                replace: `$1id: '${ELEMENT_ID}',$2`
+            }
+        },
+
+        {
+            find: "handleImageLoad=",
+            replacement: [
+                {
+                    match: /(render=function\(\){.{1,500}limitResponsiveWidth.{1,600})onMouseEnter:/,
+                    replace: "$1...$self.makeProps(this),onMouseEnter:"
+                },
+
+                {
+                    match: /componentDidMount=function\(\){/,
+                    replace: "$&$self.renderMagnifier(this);",
+                },
+
+                {
+                    match: /componentWillUnmount=function\(\){/,
+                    replace: "$&$self.unMountMagnifier();"
+                }
+            ]
+        },
+
+        {
+            find: ".carouselModal,",
+            replacement: {
+                match: /onClick:(\i),/,
+                replace: "onClick:$self.settings.store.preventCarouselFromClosingOnClick ? () => {} : $1,"
+            }
+        }
+    ],
+
+    settings,
+
+    // to stop from rendering twice /shrug
+    currentMagnifierElement: null as React.FunctionComponentElement<MagnifierProps & JSX.IntrinsicAttributes> | null,
+    element: null as HTMLDivElement | null,
+
+    Magnifier,
+    root: null as Root | null,
+    makeProps(instance) {
+        return {
+            onMouseOver: () => this.onMouseOver(instance),
+            onMouseOut: () => this.onMouseOut(instance),
+            onMouseDown: (e: React.MouseEvent) => this.onMouseDown(e, instance),
+            onMouseUp: () => this.onMouseUp(instance),
+            id: instance.props.id,
+        };
+    },
+
+    renderMagnifier(instance) {
+        if (instance.props.id === ELEMENT_ID) {
+            if (!this.currentMagnifierElement) {
+                this.currentMagnifierElement = <Magnifier size={settings.store.size} zoom={settings.store.zoom} instance={instance} />;
+                this.root = ReactDOM.createRoot(this.element!);
+                this.root.render(this.currentMagnifierElement);
+            }
+        }
+    },
+
+    unMountMagnifier() {
+        this.root?.unmount();
+        this.currentMagnifierElement = null;
+        this.root = null;
+    },
+
+    onMouseOver(instance) {
+        instance.setState((state: any) => ({ ...state, mouseOver: true }));
+    },
+    onMouseOut(instance) {
+        instance.setState((state: any) => ({ ...state, mouseOver: false }));
+    },
+    onMouseDown(e: React.MouseEvent, instance) {
+        if (e.button === 0 /* left */)
+            instance.setState((state: any) => ({ ...state, mouseDown: true }));
+    },
+    onMouseUp(instance) {
+        instance.setState((state: any) => ({ ...state, mouseDown: false }));
+    },
+
+    start() {
+        enableStyle(styles);
+        addContextMenuPatch("image-context", imageContextMenuPatch);
+        this.element = document.createElement("div");
+        this.element.classList.add("MagnifierContainer");
+        document.body.appendChild(this.element);
+    },
+
+    stop() {
+        disableStyle(styles);
+        // so componenetWillUnMount gets called if Magnifier component is still alive
+        this.root && this.root.unmount();
+        this.element?.remove();
+        removeContextMenuPatch("image-context", imageContextMenuPatch);
+    }
+});

src/plugins/imageZoom/styles.css

@@ -0,0 +1,31 @@
+.vc-imgzoom-lens {
+    position: absolute;
+    inset: 0;
+    z-index: 9999;
+    border: 2px solid grey;
+    border-radius: 50%;
+    overflow: hidden;
+    cursor: none;
+    box-shadow: inset 0 0 10px 2px grey;
+    filter: drop-shadow(0 0 2px grey);
+    pointer-events: none;
+}
+
+/* make the carousel take up less space so we can click the backdrop and exit out of it */
+[class|="carouselModal"] {
+    height: fit-content;
+    box-shadow: none;
+}
+
+[class*="modalCarouselWrapper"] {
+    height: fit-content;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+[class|="wrapper"]:has(> #vc-imgzoom-magnify-modal) {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}

src/plugins/imageZoom/utils/waitFor.ts

@@ -0,0 +1,22 @@
+/*
+ * 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 function waitFor(condition: () => boolean, cb: () => void) {
+    if (condition()) cb();
+    else requestAnimationFrame(() => waitFor(condition, cb));
+}

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
+// First roundtrip to mark and force enable dependencies (only for enabled plugins)
-for (const p of pluginsValues) {
+//
+// 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/EncryptionModal.tsx

@@ -24,13 +24,10 @@ import {
     ModalRoot,
     openModal,
 } from "@utils/modal";
-import { findLazy } from "@webpack";
+import { Button, ComponentDispatch, Forms, React, Switch, TextInput } from "@webpack/common";
-import { Button, Forms, React, Switch, TextInput } from "@webpack/common";
 
 import { encrypt } from "../index";
 
-const ComponentDispatch = findLazy(m => m.emitter?._events?.INSERT_TEXT);
-
 function EncModal(props: ModalProps) {
     const [secret, setSecret] = React.useState("");
     const [cover, setCover] = React.useState("");

src/plugins/invisibleChat/index.tsx

@@ -85,7 +85,7 @@ function ChatBarIcon() {
                         onMouseLeave={onMouseLeave}
                         innerClassName={ButtonWrapperClasses.button}
                         onClick={() => buildEncModal()}
-                        style={{ marginRight: "2px" }}
+                        style={{ padding: "0 4px" }}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>
                             <svg
@@ -119,6 +119,7 @@ export default definePlugin({
     name: "InvisibleChat",
     description: "Encrypt your Messages in a non-suspicious way! This plugin makes requests to >>https://embed.sammcheese.net<< to provide embeds to decrypted links!",
     authors: [Devs.SammCheese],
+    dependencies: ["MessagePopoverAPI"],
     patches: [
         {
             // Indicator
@@ -131,8 +132,8 @@ export default definePlugin({
         {
             find: ".activeCommandOption",
             replacement: {
-                match: /(.)\.push.{1,50}\(\i,\{.{1,30}\},"gift"\)\)/,
+                match: /(.)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&;try{$1.push($self.chatBarIcon())}catch{}",
+                replace: "$&;try{$2||$1.push($self.chatBarIcon())}catch{}",
             }
         },
     ],

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,6 +31,12 @@ interface ActivityAssets {
     small_text?: string;
 }
 
+
+interface ActivityButton {
+    label: string;
+    url: string;
+}
+
 interface Activity {
     state: string;
     details?: string;
@@ -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) {
+function setActivity(activity: Activity | null) {
-    FluxDispatcher.dispatch({ type: "LOCAL_ACTIVITY_UPDATE", activity: activity });
+    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: {
+    settings,
-        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,
-        }
-    },
 
     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`);
+        try {
-        const trackData = (await response.json()).recenttracks.track[0];
+            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)
+                    // there is already music status because of Spotify or richerCider (probably more)
-                    setActivity();
+                    return null;
-                    return;
                 }
             }
         }
 
         const trackData = await this.fetchTrackData();
+        if (!trackData) return null;
 
-        if (!trackData) {
+        const largeImage = this.getLargeImage(trackData);
-            setActivity();
+        const assets: ActivityAssets = largeImage ?
-            return;
+            {
-        }
+                large_image: await getApplicationAsset(largeImage),
-
+                large_text: trackData.album || undefined,
-        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,
                 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/memberCount.tsx

@@ -22,11 +22,14 @@ import { Devs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
 import { useForceUpdater } from "@utils/misc";
 import definePlugin from "@utils/types";
+import { findStoreLazy } from "@webpack";
 import { FluxDispatcher, Tooltip } from "@webpack/common";
 
 const counts = {} as Record<string, [number, number]>;
 let forceUpdate: () => void;
 
+const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore");
+
 function MemberCount() {
     const guildId = getCurrentChannel().guild_id;
     const c = counts[guildId];
@@ -37,7 +40,8 @@ function MemberCount() {
 
     let total = c[0].toLocaleString();
     if (total === "0" && c[1] > 0) {
-        total = "Loading...";
+        const approx = GuildMemberCountStore.getMemberCount(guildId);
+        total = approx ? approx.toLocaleString() : "Loading...";
     }
 
     const online = c[1].toLocaleString();