Merge branch 'main' of https://github.com/Vendicated/Vencord

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

.eslintrc.json

@@ -1,98 +0,0 @@
-{
-    "root": true,
-    "parser": "@typescript-eslint/parser",
-    "ignorePatterns": ["dist", "browser", "packages/vencord-types"],
-    "plugins": [
-        "@typescript-eslint",
-        "simple-header",
-        "simple-import-sort",
-        "unused-imports",
-        "path-alias"
-    ],
-    "settings": {
-        "import/resolver": {
-            "alias": {
-                "map": [
-                    ["@webpack", "./src/webpack"],
-                    ["@webpack/common", "./src/webpack/common"],
-                    ["@utils", "./src/utils"],
-                    ["@api", "./src/api"],
-                    ["@components", "./src/components"]
-                ]
-            }
-        }
-    },
-    "rules": {
-        // Since it's only been a month and Vencord has already been stolen
-        // by random skids who rebranded it to "AlphaCord" and erased all license
-        // information
-        "simple-header/header": [
-            "error",
-            {
-                "files": ["scripts/header-new.txt", "scripts/header-old.txt"],
-                "templates": { "author": [".*", "Vendicated and contributors"] }
-            }
-        ],
-        "quotes": ["error", "double", { "avoidEscape": true }],
-        "jsx-quotes": ["error", "prefer-double"],
-        "no-mixed-spaces-and-tabs": "error",
-        "indent": ["error", 4, { "SwitchCase": 1 }],
-        "arrow-parens": ["error", "as-needed"],
-        "eol-last": ["error", "always"],
-        "@typescript-eslint/func-call-spacing": ["error", "never"],
-        "no-multi-spaces": "error",
-        "no-trailing-spaces": "error",
-        "no-whitespace-before-property": "error",
-        "semi": ["error", "always"],
-        "semi-style": ["error", "last"],
-        "space-in-parens": ["error", "never"],
-        "block-spacing": ["error", "always"],
-        "object-curly-spacing": ["error", "always"],
-        "eqeqeq": ["error", "always", { "null": "ignore" }],
-        "spaced-comment": ["error", "always", { "markers": ["!"] }],
-        "yoda": "error",
-        "prefer-destructuring": ["error", {
-                "VariableDeclarator": { "array": false, "object": true },
-                "AssignmentExpression": { "array": false, "object": false }
-        }],
-        "operator-assignment": ["error", "always"],
-        "no-useless-computed-key": "error",
-        "no-unneeded-ternary": ["error", { "defaultAssignment": false }],
-        "no-invalid-regexp": "error",
-        "no-constant-condition": ["error", { "checkLoops": false }],
-        "no-duplicate-imports": "error",
-        "no-extra-semi": "error",
-        "dot-notation": "error",
-        "no-useless-escape": [
-            "error",
-            {
-                "extra": "i"
-            }
-        ],
-        "no-fallthrough": "error",
-        "for-direction": "error",
-        "no-async-promise-executor": "error",
-        "no-cond-assign": "error",
-        "no-dupe-else-if": "error",
-        "no-duplicate-case": "error",
-        "no-irregular-whitespace": "error",
-        "no-loss-of-precision": "error",
-        "no-misleading-character-class": "error",
-        "no-prototype-builtins": "error",
-        "no-regex-spaces": "error",
-        "no-shadow-restricted-names": "error",
-        "no-unexpected-multiline": "error",
-        "no-unsafe-optional-chaining": "error",
-        "no-useless-backreference": "error",
-        "use-isnan": "error",
-        "prefer-const": "error",
-        "prefer-spread": "error",
-
-        "simple-import-sort/imports": "error",
-        "simple-import-sort/exports": "error",
-
-        "unused-imports/no-unused-imports": "error",
-
-        "path-alias/no-relative": "error"
-    }
-}

.gitignore

@@ -18,7 +18,5 @@ lerna-debug.log*
 .pnpm-debug.log*
 *.tsbuildinfo
 
-src/userplugins
-
 ExtensionCache/
 settings/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/userplugins/vc-message-logger-enhanced"]
+	path = src/userplugins/vc-message-logger-enhanced
+	url = https://github.com/Syncxv/vc-message-logger-enhanced.git

.stylelintrc.json

@@ -1,6 +1,11 @@
 {
     "extends": "stylelint-config-standard",
     "rules": {
-        "indentation": 4
+        "selector-class-pattern": [
+            "^[a-z][a-zA-Z0-9]*(-[a-z0-9][a-zA-Z0-9]*)*$",
+            {
+                "message": "Expected class selector to be kebab-case with camelCase segments"
+            }
+        ]
     }
 }

.vscode/settings.json

@@ -14,8 +14,6 @@
     "typescript.preferences.quoteStyle": "double",
     "javascript.preferences.quoteStyle": "double",
 
-    "eslint.experimental.useFlatConfig": false,
-
     "gitlens.remotes": [
         {
             "domain": "codeberg.org",

CODE_OF_CONDUCT.md

@@ -16,5 +16,6 @@ DON'T
 
 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!
+If you feel like a user is violating these guidelines or feel treated unfairly, please refrain from vigilantism
+and instead report the issue to a moderator! The best way is joining our [official Discord community](https://vencord.dev/discord)
+and opening a modmail ticket.

CONTRIBUTING.md

@@ -1,82 +1,56 @@
-# Contribution Guide
+# Contributing to Vencord
 
-First of all, thank you for contributing! :3
+Vencord is a community project and welcomes any kind of contribution from anyone!
 
-To ensure your contribution is robust, please follow the below guide!
+We have development documentation for new contributors, which can be found at <https://docs.vencord.dev>.
 
-For a friendly introduction to plugins, see [Megu's Plugin Guide!](docs/2_PLUGINS.md)
+All contributions should be made in accordance with our [Code of Conduct](./CODE_OF_CONDUCT.md).
 
-## Style Guide
+## How to contribute
 
--   This project has a very minimal .editorconfig. Make sure your editor supports this!
-    If you are using VSCode, it should automatically recommend you the extension; If not,
-    please install the Editorconfig extension
--   Try to follow the formatting in the rest of the project and stay consistent
--   Follow the file naming convention. File names should usually be camelCase, unless they export a Class
-    or React Component, in which case they should be PascalCase
+Contributions can be sent via pull requests. If you're new to Git, check [this guide](https://opensource.com/article/19/7/create-pull-request-github).
 
-## Contributing a Plugin
+Pull requests can be made either to the `main` or the `dev` branch. However, unless you're an advanced user, I recommend sticking to `main`. This is because the dev branch might contain unstable changes and be force pushed frequently, which could cause conflicts in your pull request.
 
-Because plugins modify code directly, incompatibilities are a problem.
+## Write a plugin
 
-Thus, 3rd party plugins are not supported, instead all plugins are part of Vencord itself.
-This way we can ensure compatibility and high quality patches.
+Writing a plugin is the primary way to contribute.
 
-Follow the below guide to make your first plugin!
+Before starting your plugin:
+- Check existing pull requests to see if someone is already working on a similar plugin
+- Check our [plugin requests tracker](https://github.com/Vencord/plugin-requests/issues) to see if there is an existing request, or if the same idea has been rejected
+- If there isn't an existing request, [open one](https://github.com/Vencord/plugin-requests/issues/new?assignees=&labels=&projects=&template=request.yml) yourself
+  and include that you'd like to work on this yourself. Then wait for feedback to see if the idea even has any chance of being accepted. Or maybe others have some ideas to improve it!
+- Familarise yourself with our plugin rules below to ensure your plugin is not banned
 
-### Finding the right module to patch
+### Plugin Rules
 
-If the thing you want to patch is an action performed when interacting with a part of the UI, use React DevTools.
-They come preinstalled and can be found as the "Components" tab in DevTools.
-Use the Selector (top left) to select the UI Element. Now you can see all callbacks, props or jump to the source
-directly.
+- No simple slash command plugins like `/cat`. Instead, make a [user installable Discord bot](https://discord.com/developers/docs/change-log#userinstallable-apps-preview)
+- No simple text replace plugins like Let me Google that for you. The TextReplace plugin can do this
+- No raw DOM manipulation. Use proper patches and React
+- No FakeDeafen or FakeMute
+- No StereoMic
+- No plugins that simply hide or redesign ui elements. This can be done with CSS
+- No plugins that interact with specific Discord bots (official Discord apps like Youtube WatchTogether are okay)
+- No selfbots or API spam (animated status, message pruner, auto reply, nitro snipers, etc)
+- No untrusted third party APIs. Popular services like Google or GitHub are fine, but absolutely no self hosted ones
+- No plugins that require the user to enter their own API key
+- Do not introduce new dependencies unless absolutely necessary and warranted
 
-If it is anything else, or you're too lazy to use React DevTools, hit `CTRL + Shift + F` while in DevTools and
-enter a search term, for example "getUser" to search all source files.
-Look at the results until you find something promising. Set a breakpoint and trigger the execution of that part of Code to inspect arguments, locals, etc...
+## Improve Vencord itself
 
-### Writing a robust patch
+If you have any ideas on how to improve Vencord itself, or want to propose a new plugin API, feel free to open a feature request so we can discuss.
 
-##### "find"
+Or if you notice any bugs or typos, feel free to fix them!
 
-First you need to find a good `find` value. This should be a string that is unique to your module.
-If you want to patch the `getUser` function, usually a good first try is `getUser:` or `function getUser()`,
-depending on how the module is structured. Again, make sure this string is unique to your module and is not
-found in any other module. To verify this, search for it in all bundles (CTRL + Shift + F)
+## Contribute to our Documentation
 
-##### "match"
+The source code of our documentation is available at <https://github.com/Vencord/Docs>
 
-This is the regex that will operate on the module found with "find". Just like in find, you should make sure
-this only matches exactly the part you want to patch and no other parts in the file.
+If you see anything outdated, incorrect or lacking, please fix it!
+If you think a new page should be added, feel free to suggest it via an issue and we can discuss.
 
-The easiest way to write and test your regex is the following:
+## Help out users in our Discord community
 
--   Get the ID of the module you want to patch. To do this, go to it in the sources tab and scroll up until you
-    see something like `447887: (e,t,n)=>{` (Obviously the number will differ).
--   Now paste the following into the console: `Vencord.Webpack.wreq.m[447887].toString()` (Changing the number to your ID)
--   Now either test regexes on this string in the console or use a tool like https://regex101.com
-
-Also pay attention to the following:
-
--   Never hardcode variable or parameter names or any other minified names. They will change in the future. The only Exception to this rule
-    are the react props parameter which seems to always be `e`, but even then only rely on this if it is necessary.
-    Instead, use one of the following approaches where applicable:
-    -   Match 1 or 2 of any character: `.{1,2}`, for example to match the variable name in `var a=b`, `var (.{1,2})=`
-    -   Match any but a guaranteed terminating character: `[^;]+`, for example to match the entire assigned value in `var a=b||c||func();`,
-        `var .{1,2}=([^;]+);`
-    -   If you don't care about that part, just match a bunch of chars: `.{0,50}`, for example to extract the variable "b" in `createElement("div",{a:"foo",c:"bar"},b)`, `createElement\("div".{0,30},(.{1,2})\),`. Note the `.{0,30}`, this is essentially the same as `.+`, but safer as you can't end up accidently eating thousands of characters
--   Additionally, as you might have noticed, all of the above approaches use regex groups (`(...)`) to capture the variable name. You can then use those groups in your replacement to access those variables dynamically
-
-#### "replace"
-
-This is the replacement for the match. This is the second argument to [String.replace](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace), so refer to those docs for info.
-
-Never hardcode minified variable or parameter names here. Instead, use capture groups in your regex to capture the variable names
-and use those in your replacement
-
-Make sure your replacement does not introduce any whitespace. While this might seem weird, random whitespace may mess up other patches.
-This includes spaces, tabs and especially newlines
-
----
-
-And that's it! Now open a Pull Request with your Plugin
+We have an open support channel in our [Discord community](https://vencord.dev/discord).
+Helping out users there is always appreciated! The more, the merrier.

browser/content.js

@@ -2,23 +2,22 @@ if (typeof browser === "undefined") {
     var browser = chrome;
 }
 
-const script = document.createElement("script");
-script.src = browser.runtime.getURL("dist/Vencord.js");
-script.id = "vencord-script";
-Object.assign(script.dataset, {
-    extensionBaseUrl: browser.runtime.getURL(""),
-    version: browser.runtime.getManifest().version
-});
-
 const style = document.createElement("link");
 style.type = "text/css";
 style.rel = "stylesheet";
 style.href = browser.runtime.getURL("dist/Vencord.css");
 
-document.documentElement.append(script);
-
 document.addEventListener(
     "DOMContentLoaded",
-    () => document.documentElement.append(style),
+    () => {
+        document.documentElement.append(style);
+        window.postMessage({
+            type: "vencord:meta",
+            meta: {
+                EXTENSION_VERSION: browser.runtime.getManifest().version,
+                EXTENSION_BASE_URL: browser.runtime.getURL(""),
+            }
+        });
+    },
     { once: true }
 );

browser/manifest.json

@@ -1,6 +1,6 @@
 {
     "manifest_version": 3,
-    "minimum_chrome_version": "91",
+    "minimum_chrome_version": "111",
 
     "name": "Vencord Web",
     "description": "The cutest Discord mod now in your browser",
@@ -22,7 +22,15 @@
             "run_at": "document_start",
             "matches": ["*://*.discord.com/*"],
             "js": ["content.js"],
-            "all_frames": true
+            "all_frames": true,
+            "world": "ISOLATED"
+        },
+        {
+            "run_at": "document_start",
+            "matches": ["*://*.discord.com/*"],
+            "js": ["dist/Vencord.js"],
+            "all_frames": true,
+            "world": "MAIN"
         }
     ],
 

browser/manifestv2.json

@@ -22,7 +22,15 @@
             "run_at": "document_start",
             "matches": ["*://*.discord.com/*"],
             "js": ["content.js"],
-            "all_frames": true
+            "all_frames": true,
+            "world": "ISOLATED"
+        },
+        {
+            "run_at": "document_start",
+            "matches": ["*://*.discord.com/*"],
+            "js": ["dist/Vencord.js"],
+            "all_frames": true,
+            "world": "MAIN"
         }
     ],
 
@@ -35,7 +43,7 @@
     "browser_specific_settings": {
         "gecko": {
             "id": "vencord-firefox@vendicated.dev",
-            "strict_min_version": "91.0"
+            "strict_min_version": "128.0"
         }
     }
 }

browser/userscript.meta.js

@@ -5,6 +5,7 @@
 // @author          Vendicated (https://github.com/Vendicated)
 // @namespace       https://github.com/Vendicated/Vencord
 // @supportURL      https://github.com/Vendicated/Vencord
+// @icon            https://raw.githubusercontent.com/Vendicated/Vencord/refs/heads/main/browser/icon.png
 // @license         GPL-3.0
 // @match           *://*.discord.com/*
 // @grant           GM_xmlhttpRequest

docs/1_INSTALLING.md

@@ -1,97 +0,0 @@
-> [!WARNING]
-> These instructions are only for advanced users. If you're not a Developer, you should use our [graphical installer](https://github.com/Vendicated/VencordInstaller#usage) instead.
-> No support will be provided for installing in this fashion. If you cannot figure it out, you should just stick to a regular install.
-
-# Installation Guide
-
-Welcome to Megu's Installation Guide! In this file, you will learn about how to download, install, and uninstall Vencord!
-
-## Sections
-
-- [Installation Guide](#installation-guide)
-  - [Sections](#sections)
-  - [Dependencies](#dependencies)
-  - [Installing Vencord](#installing-vencord)
-  - [Updating Vencord](#updating-vencord)
-  - [Uninstalling Vencord](#uninstalling-vencord)
-
-## Dependencies
-
--   Install Git from https://git-scm.com/download
--   Install Node.JS LTS from here: https://nodejs.dev/en/
-
-## Installing Vencord
-
-Install `pnpm`:
-
-> :exclamation: This next command may need to be run as admin/root depending on your system, and you may need to close and reopen your terminal for pnpm to be in your PATH.
-
-```shell
-npm i -g pnpm
-```
-
-> :exclamation: **IMPORTANT** Make sure you aren't using an admin/root terminal from here onwards. It **will** mess up your Discord/Vencord instance and you **will** most likely have to reinstall.
-
-Clone Vencord:
-
-```shell
-git clone https://github.com/Vendicated/Vencord
-cd Vencord
-```
-
-Install dependencies:
-
-```shell
-pnpm install --frozen-lockfile
-```
-
-Build Vencord:
-
-```shell
-pnpm build
-```
-
-Inject vencord into your client:
-
-```shell
-pnpm inject
-```
-
-Then fully close Discord from your taskbar or task manager, and restart it. Vencord should be injected - you can check this by looking for the Vencord section in Discord settings.
-
-## Updating Vencord
-
-If you're using Discord already, go into the `Updater` tab in settings.
-
-Sometimes it may be necessary to manually update if the GUI updater fails.
-
-To pull latest changes:
-
-```shell
-git pull
-```
-
-If this fails, you likely need to reset your local changes to vencord to resolve merge errors:
-
-> :exclamation: This command will remove any local changes you've made to vencord. Make sure you back up if you made any code changes you don't want to lose!
-
-```shell
-git reset --hard
-git pull
-```
-
-and then to build the changes:
-
-```shell
-pnpm build
-```
-
-Then just refresh your client
-
-## Uninstalling Vencord
-
-Simply run:
-
-```shell
-pnpm uninject
-```

docs/2_PLUGINS.md

@@ -1,111 +0,0 @@
-# Plugins Guide
-
-Welcome to Megu's Plugin Guide! In this file, you will learn about how to write your own plugin!
-
-You don't need to run `pnpm build` every time you make a change. Instead, use `pnpm watch` - this will auto-compile Vencord whenever you make a change. If using code patches (recommended), you will need to CTRL+R to load the changes.
-
-## Plugin Entrypoint
-
-> If it doesn't already exist, create a folder called `userplugins` in the `src` directory of this repo.
-
-1. Create a folder in `src/userplugins/` with the name of your plugin. For example, `src/userplugins/epicPlugin/` - All of your plugin files will go here.
-
-2. Create a file in that folder called `index.ts`
-
-3. In `index.ts`, copy-paste the following template code:
-
-```ts
-import definePlugin from "@utils/types";
-
-export default definePlugin({
-    name: "Epic Plugin",
-    description: "This plugin is absolutely epic",
-    authors: [
-        {
-            id: 12345n,
-            name: "Your Name",
-        },
-    ],
-    patches: [],
-    // Delete these two below if you are only using code patches
-    start() {},
-    stop() {},
-});
-```
-
-Change the name, description, and authors to your own information.
-
-Replace `12345n` with your user ID ending in `n` (e.g., `545581357812678656n`). If you don't want to share your Discord account, use `0n` instead!
-
-## How Plugins Work In Vencord
-
-Vencord uses a different way of making mods than you're used to.
-Instead of monkeypatching webpack, we directly modify the code before Discord loads it.
-
-This is _significantly_ more efficient than monkeypatching webpack, and is surprisingly easy, but it may be confusing at first.
-
-## Making your patch
-
-For an in-depth guide into patching code, see [CONTRIBUTING.md](../CONTRIBUTING.md)
-
-in the `index.ts` file we made earlier, you'll see a `patches` array.
-
-> You'll see examples of how patches are used in all the existing plugins, and it'll be easier to understand by looking at those examples, so do that first, and then return here!
-
-> For a good example of a plugin using code patches AND runtime patching, check `src/plugins/unindent.ts`, which uses code patches to run custom runtime code.
-
-One of the patches in the `isStaff` plugin, looks like this:
-
-```ts
-{
-    match: /(\w+)\.isStaff=function\(\){return\s*!1};/,
-    replace: "$1.isStaff=function(){return true};",
-},
-```
-
-The above regex matches the string in discord that will look something like:
-
-```js
-abc.isStaff = function () {
-    return !1;
-};
-```
-
-Remember that Discord code is minified, so there won't be any newlines, and there will only be spaces where necessary. So the source code looks something like:
-
-```
-abc.isStaff=function(){return!1;}
-```
-
-You can find these snippets by opening the devtools (`ctrl+shift+i`) and pressing `ctrl+shift+f`, searching for what you're looking to modify in there, and beautifying the file to make it more readable.
-
-In the `match` regex in the example shown above, you'll notice at the start there is a `(\w+)`.
-Anything in the brackets will be accessible in the `replace` string using `$<number>`. e.g., the first pair of brackets will be `$1`, the second will be `$2`, etc.
-
-The replacement string we used is:
-
-```
-"$1.isStaff=function(){return true;};"
-```
-
-Which, using the above example, would replace the code with:
-
-> **Note**
-> In this example, `$1` becomes `abc`
-
-```js
-abc.isStaff = function () {
-    return true;
-};
-```
-
-The match value _can_ be a string, rather than regex, however usually regex will be better suited, as it can work with unknown values, whereas strings must be exact matches.
-
-Once you've made your plugin, make sure you run `pnpm test` and make sure your code is nice and clean!
-
-If you want to publish your plugin into the Vencord repo, move your plugin from `src/userplugins` into the `src/plugins` folder and open a PR!
-
-> **Warning**
-> Make sure you've read [CONTRIBUTING.md](../CONTRIBUTING.md) before opening a PR
-
-If you need more help, ask in the support channel in our [Discord Server](https://discord.gg/D9uwnFnqmd).

eslint.config.mjs

@@ -0,0 +1,147 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import stylistic from "@stylistic/eslint-plugin";
+import pathAlias from "eslint-plugin-path-alias";
+import react from "eslint-plugin-react";
+import header from "eslint-plugin-simple-header";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import unusedImports from "eslint-plugin-unused-imports";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+    { ignores: ["dist", "browser", "packages/vencord-types"] },
+    {
+        files: ["src/**/*.{tsx,ts,mts,mjs,js,jsx}", "eslint.config.mjs"],
+        settings: {
+            react: {
+                version: "18"
+            }
+        },
+        ...react.configs.flat.recommended,
+        rules: {
+            ...react.configs.flat.recommended.rules,
+            "react/react-in-jsx-scope": "off",
+            "react/prop-types": "off",
+            "react/display-name": "off",
+            "react/no-unescaped-entities": "off",
+        }
+    },
+    {
+        files: ["src/**/*.{tsx,ts,mts,mjs,js,jsx}", "eslint.config.mjs"],
+        plugins: {
+            "simple-header": header,
+            "@stylistic": stylistic,
+            "@typescript-eslint": tseslint.plugin,
+            "simple-import-sort": simpleImportSort,
+            "unused-imports": unusedImports,
+            "path-alias": pathAlias
+        },
+        settings: {
+            "import/resolver": {
+                map: [
+                    ["@webpack", "./src/webpack"],
+                    ["@webpack/common", "./src/webpack/common"],
+                    ["@utils", "./src/utils"],
+                    ["@api", "./src/api"],
+                    ["@components", "./src/components"]
+                ]
+            }
+        },
+        languageOptions: {
+            parser: tseslint.parser,
+            parserOptions: {
+                project: ["./tsconfig.json"],
+                tsconfigRootDir: import.meta.dirname
+            }
+        },
+        rules: {
+            /*
+             * Since it's only been a month and Vencord has already been stolen
+             * by random skids who rebranded it to "AlphaCord" and erased all license
+             * information
+             */
+            "simple-header/header": [
+                "error",
+                {
+                    "files": ["scripts/header-new.txt", "scripts/header-old.txt"],
+                    "templates": { "author": [".*", "Vendicated and contributors"] }
+                }
+            ],
+
+            // Style Rules
+            "@stylistic/jsx-quotes": ["error", "prefer-double"],
+            "@stylistic/quotes": ["error", "double", { "avoidEscape": true }],
+            "@stylistic/no-mixed-spaces-and-tabs": "error",
+            "@stylistic/arrow-parens": ["error", "as-needed"],
+            "@stylistic/eol-last": ["error", "always"],
+            "@stylistic/no-multi-spaces": "error",
+            "@stylistic/no-trailing-spaces": "error",
+            "@stylistic/no-whitespace-before-property": "error",
+            "@stylistic/semi": ["error", "always"],
+            "@stylistic/semi-style": ["error", "last"],
+            "@stylistic/space-in-parens": ["error", "never"],
+            "@stylistic/block-spacing": ["error", "always"],
+            "@stylistic/object-curly-spacing": ["error", "always"],
+            "@stylistic/spaced-comment": ["error", "always", { "markers": ["!"] }],
+            "@stylistic/no-extra-semi": "error",
+
+            // TS Rules
+            "@stylistic/func-call-spacing": ["error", "never"],
+
+            // ESLint Rules
+            "yoda": "error",
+            "eqeqeq": ["error", "always", { "null": "ignore" }],
+            "prefer-destructuring": ["error", {
+                "VariableDeclarator": { "array": false, "object": true },
+                "AssignmentExpression": { "array": false, "object": false }
+            }],
+            "operator-assignment": ["error", "always"],
+            "no-useless-computed-key": "error",
+            "no-unneeded-ternary": ["error", { "defaultAssignment": false }],
+            "no-invalid-regexp": "error",
+            "no-constant-condition": ["error", { "checkLoops": false }],
+            "no-duplicate-imports": "error",
+            "@typescript-eslint/dot-notation": [
+                "error",
+                {
+                    "allowPrivateClassPropertyAccess": true,
+                    "allowProtectedClassPropertyAccess": true
+                }
+            ],
+            "no-useless-escape": [
+                "error",
+                {
+                    "extra": "i"
+                }
+            ],
+            "no-fallthrough": "error",
+            "for-direction": "error",
+            "no-async-promise-executor": "error",
+            "no-cond-assign": "error",
+            "no-dupe-else-if": "error",
+            "no-duplicate-case": "error",
+            "no-irregular-whitespace": "error",
+            "no-loss-of-precision": "error",
+            "no-misleading-character-class": "error",
+            "no-prototype-builtins": "error",
+            "no-regex-spaces": "error",
+            "no-shadow-restricted-names": "error",
+            "no-unexpected-multiline": "error",
+            "no-unsafe-optional-chaining": "error",
+            "no-useless-backreference": "error",
+            "use-isnan": "error",
+            "prefer-const": "error",
+            "prefer-spread": "error",
+
+            // Plugin Rules
+            "simple-import-sort/imports": "error",
+            "simple-import-sort/exports": "error",
+            "unused-imports/no-unused-imports": "error",
+            "path-alias/no-relative": "error"
+        }
+    }
+);

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.9.0",
+    "version": "1.11.4",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -13,9 +13,6 @@
     },
     "license": "GPL-3.0-or-later",
     "author": "Vendicated",
-    "directories": {
-        "doc": "docs"
-    },
     "scripts": {
         "build": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/build.mjs",
         "buildStandalone": "pnpm build --standalone",
@@ -24,12 +21,13 @@
         "buildReporter": "pnpm buildWebStandalone --reporter --skip-extension",
         "buildReporterDesktop": "pnpm build --reporter",
         "watch": "pnpm build --watch",
+        "dev": "pnpm watch",
         "watchWeb": "pnpm buildWeb --watch",
         "generatePluginJson": "tsx scripts/generatePluginList.ts",
         "generateTypes": "tspc --emitDeclarationOnly --declaration --outDir packages/vencord-types",
         "inject": "node scripts/runInstaller.mjs",
         "uninject": "node scripts/runInstaller.mjs",
-        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern src/userplugins",
+        "lint": "eslint",
         "lint-styles": "stylelint \"src/**/*.css\" --ignore-pattern src/userplugins",
         "lint:fix": "pnpm lint --fix",
         "test": "pnpm buildStandalone && pnpm lint && pnpm lint-styles && pnpm testTsc && pnpm generatePluginJson",
@@ -37,53 +35,56 @@
         "testTsc": "tsc --noEmit"
     },
     "dependencies": {
-        "@sapphi-red/web-noise-suppressor": "0.3.3",
+        "@intrnl/xxhash64": "^0.1.2",
+        "@sapphi-red/web-noise-suppressor": "0.3.5",
         "@vap/core": "0.0.12",
         "@vap/shiki": "0.10.5",
-        "eslint-plugin-simple-header": "^1.0.2",
-        "fflate": "^0.7.4",
+        "fflate": "^0.8.2",
         "gifenc": "github:mattdesl/gifenc#64842fca317b112a8590f8fef2bf3825da8f6fe3",
-        "monaco-editor": "^0.43.0",
-        "nanoid": "^4.0.2",
+        "monaco-editor": "^0.52.2",
+        "nanoid": "^5.0.9",
         "virtual-merge": "^1.0.1"
     },
     "devDependencies": {
-        "@types/chrome": "^0.0.246",
-        "@types/diff": "^5.0.3",
-        "@types/lodash": "^4.14.194",
-        "@types/node": "^18.16.3",
-        "@types/react": "^18.2.0",
-        "@types/react-dom": "^18.2.1",
-        "@types/yazl": "^2.4.2",
-        "@typescript-eslint/eslint-plugin": "^5.59.1",
-        "@typescript-eslint/parser": "^5.59.1",
-        "diff": "^5.1.0",
+        "@stylistic/eslint-plugin": "^2.12.1",
+        "@types/chrome": "^0.0.287",
+        "@types/diff": "^6.0.0",
+        "@types/lodash": "^4.17.14",
+        "@types/node": "^22.10.5",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
+        "@types/yazl": "^2.4.5",
+        "diff": "^7.0.0",
         "discord-types": "^1.3.26",
         "esbuild": "^0.15.18",
-        "eslint": "^8.46.0",
+        "eslint": "^9.17.0",
         "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-plugin-path-alias": "^1.0.0",
-        "eslint-plugin-simple-import-sort": "^10.0.0",
-        "eslint-plugin-unused-imports": "^2.0.0",
-        "highlight.js": "10.6.0",
+        "eslint-plugin-path-alias": "2.1.0",
+        "eslint-plugin-react": "^7.37.3",
+        "eslint-plugin-simple-header": "^1.2.1",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "eslint-plugin-unused-imports": "^4.1.4",
+        "highlight.js": "11.7.0",
         "html-minifier-terser": "^7.2.0",
-        "moment": "^2.29.4",
-        "puppeteer-core": "^19.11.1",
+        "moment": "^2.22.2",
+        "puppeteer-core": "^23.11.1",
         "standalone-electron-types": "^1.0.0",
-        "stylelint": "^15.6.0",
-        "stylelint-config-standard": "^33.0.0",
-        "ts-patch": "^3.1.2",
-        "tsx": "^3.12.7",
-        "type-fest": "^3.9.0",
-        "typescript": "^5.4.5",
-        "typescript-transform-paths": "^3.4.7",
+        "stylelint": "^16.12.0",
+        "stylelint-config-standard": "^36.0.1",
+        "ts-patch": "^3.3.0",
+        "ts-pattern": "^5.6.0",
+        "tsx": "^4.19.2",
+        "type-fest": "^4.31.0",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.19.0",
+        "typescript-transform-paths": "^3.5.3",
         "zip-local": "^0.3.5"
     },
     "packageManager": "pnpm@9.1.0",
     "pnpm": {
         "patchedDependencies": {
-            "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
-            "eslint@8.46.0": "patches/eslint@8.46.0.patch"
+            "eslint@9.17.0": "patches/eslint@9.17.0.patch",
+            "eslint-plugin-path-alias@2.1.0": "patches/eslint-plugin-path-alias@2.1.0.patch"
         },
         "peerDependencyRules": {
             "ignoreMissing": [

patches/eslint-plugin-path-alias@1.0.0.patch

@@ -1,13 +0,0 @@
-diff --git a/lib/rules/no-relative.js b/lib/rules/no-relative.js
-index 71594c83f1f4f733ffcc6047d7f7084348335dbe..d8623d87c89499c442171db3272cba07c9efabbe 100644
---- a/lib/rules/no-relative.js
-+++ b/lib/rules/no-relative.js
-@@ -41,7 +41,7 @@ module.exports = {
- 			ImportDeclaration(node) {
- 				const importPath = node.source.value;
- 
--				if (!/^(\.?\.\/)/.test(importPath)) {
-+				if (!/^(\.\.\/)/.test(importPath)) {
- 					return;
- 				}
- 

patches/eslint-plugin-path-alias@2.1.0.patch

@@ -0,0 +1,14 @@
+diff --git a/dist/index.js b/dist/index.js
+index 67de6fb139070fd0e49beca65e3b63c531202e16..aa2883c8126e4952a42872ee920f59547a066430 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -1 +1 @@
+-var C=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},y=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of U(t))!F.call(e,s)&&s!==r&&f(e,s,{get:()=>t[s],enumerable:!(i=I(t,s))||i.enumerable});return e};var b=(e,t,r)=>(r=e!=null?C(S(e)):{},y(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),D=e=>y(f({},"__esModule",{value:!0}),e);var N={};$(N,{default:()=>J});module.exports=D(N);var h="eslint-plugin-path-alias",v="2.0.0";var l=require("path"),M=b(require("nanomatch"));function j(e){return`https://github/com/msfragala/eslint-plugin-path-alias/blob/master/docs/rules/${e}.md`}var R=require("get-tsconfig"),a=require("path"),w=b(require("find-pkg")),O=require("fs");function P(e){if(e.options[0]?.paths)return z(e);let t=e.getFilename?.()??e.filename,r=(0,R.getTsconfig)(t);if(r?.config?.compilerOptions?.paths)return q(r);let i=w.default.sync((0,a.dirname)(t));if(!i)return;let s=JSON.parse((0,O.readFileSync)(i).toString());if(s?.imports)return L(s,i)}function L(e,t){let r=new Map,i=e.imports??{},s=(0,a.dirname)(t);return Object.entries(i).forEach(([o,n])=>{if(!n||typeof n!="string")return;let p=(0,a.resolve)(s,n);r.set(o,[p])}),r}function q(e){let t=new Map,r=e?.config?.compilerOptions?.paths??{},i=(0,a.dirname)(e.path);return e.config.compilerOptions?.baseUrl&&(i=(0,a.resolve)((0,a.dirname)(e.path),e.config.compilerOptions.baseUrl)),Object.entries(r).forEach(([s,o])=>{s=s.replace(/\/\*$/,""),o=o.map(n=>(0,a.resolve)(i,n.replace(/\/\*$/,""))),t.set(s,o)}),t}function z(e){let t=new Map,r=e.options[0]?.paths??{};return Object.entries(r).forEach(([i,s])=>{if(!s||typeof s!="string")return;if(s.startsWith("/")){t.set(i,[s]);return}let o=e.getCwd?.()??e.cwd,n=(0,a.resolve)(o,s);t.set(i,[n])}),t}var T={meta:{type:"suggestion",docs:{description:"Ensure imports use path aliases whenever possible vs. relative paths",url:j("no-relative")},fixable:"code",schema:[{type:"object",properties:{exceptions:{type:"array",items:{type:"string"}},paths:{type:"object"}},additionalProperties:!1}],messages:{shouldUseAlias:"Import should use path alias instead of relative path"}},create(e){let t=e.options[0]?.exceptions,r=e.getFilename?.()??e.filename,i=P(e);return i?.size?{ImportExpression(s){if(s.source.type!=="Literal"||typeof s.source.value!="string")return;let o=s.source.raw,n=s.source.value;if(!/^(\.?\.\/)/.test(n))return;let p=(0,l.resolve)((0,l.dirname)(r),n);if(A(p,t))return;let c=k(p,i);c&&e.report({node:s,messageId:"shouldUseAlias",data:{alias:c},fix(m){let g=E(p,c,i.get(c)),d=o.replace(n,g);return m.replaceText(s.source,d)}})},ImportDeclaration(s){if(typeof s.source.value!="string")return;let o=s.source.value;if(!/^(\.?\.\/)/.test(o))return;let n=(0,l.resolve)((0,l.dirname)(r),o),p=A(n,t),u=k(n,i);p||u&&e.report({node:s,messageId:"shouldUseAlias",data:{alias:u},fix(c){let m=s.source.raw,g=E(n,u,i.get(u)),d=m.replace(o,g);return c.replaceText(s.source,d)}})}}:{}}};function k(e,t){return Array.from(t.keys()).find(r=>t.get(r).some(s=>e.indexOf(s)===0))}function A(e,t){if(!t)return!1;let r=(0,l.basename)(e);return(0,M.default)(r,t).includes(r)}function E(e,t,r){for(let i of r)if(e.indexOf(i)===0)return e.replace(i,t)}var J={name:h,version:v,meta:{name:h,version:v},rules:{"no-relative":T}};
++var C=Object.create;var f=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var $=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},y=(e,t,r,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of U(t))!F.call(e,s)&&s!==r&&f(e,s,{get:()=>t[s],enumerable:!(i=I(t,s))||i.enumerable});return e};var b=(e,t,r)=>(r=e!=null?C(S(e)):{},y(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),D=e=>y(f({},"__esModule",{value:!0}),e);var N={};$(N,{default:()=>J});module.exports=D(N);var h="eslint-plugin-path-alias",v="2.0.0";var l=require("path"),M=b(require("nanomatch"));function j(e){return`https://github/com/msfragala/eslint-plugin-path-alias/blob/master/docs/rules/${e}.md`}var R=require("get-tsconfig"),a=require("path"),w=b(require("find-pkg")),O=require("fs");function P(e){if(e.options[0]?.paths)return z(e);let t=e.getFilename?.()??e.filename,r=(0,R.getTsconfig)(t);if(r?.config?.compilerOptions?.paths)return q(r);let i=w.default.sync((0,a.dirname)(t));if(!i)return;let s=JSON.parse((0,O.readFileSync)(i).toString());if(s?.imports)return L(s,i)}function L(e,t){let r=new Map,i=e.imports??{},s=(0,a.dirname)(t);return Object.entries(i).forEach(([o,n])=>{if(!n||typeof n!="string")return;let p=(0,a.resolve)(s,n);r.set(o,[p])}),r}function q(e){let t=new Map,r=e?.config?.compilerOptions?.paths??{},i=(0,a.dirname)(e.path);return e.config.compilerOptions?.baseUrl&&(i=(0,a.resolve)((0,a.dirname)(e.path),e.config.compilerOptions.baseUrl)),Object.entries(r).forEach(([s,o])=>{s=s.replace(/\/\*$/,""),o=o.map(n=>(0,a.resolve)(i,n.replace(/\/\*$/,""))),t.set(s,o)}),t}function z(e){let t=new Map,r=e.options[0]?.paths??{};return Object.entries(r).forEach(([i,s])=>{if(!s||typeof s!="string")return;if(s.startsWith("/")){t.set(i,[s]);return}let o=e.getCwd?.()??e.cwd,n=(0,a.resolve)(o,s);t.set(i,[n])}),t}var T={meta:{type:"suggestion",docs:{description:"Ensure imports use path aliases whenever possible vs. relative paths",url:j("no-relative")},fixable:"code",schema:[{type:"object",properties:{exceptions:{type:"array",items:{type:"string"}},paths:{type:"object"}},additionalProperties:!1}],messages:{shouldUseAlias:"Import should use path alias instead of relative path"}},create(e){let t=e.options[0]?.exceptions,r=e.getFilename?.()??e.filename,i=P(e);return i?.size?{ImportExpression(s){if(s.source.type!=="Literal"||typeof s.source.value!="string")return;let o=s.source.raw,n=s.source.value;if(!/^(\.\.\/)/.test(n))return;let p=(0,l.resolve)((0,l.dirname)(r),n);if(A(p,t))return;let c=k(p,i);c&&e.report({node:s,messageId:"shouldUseAlias",data:{alias:c},fix(m){let g=E(p,c,i.get(c)),d=o.replace(n,g);return m.replaceText(s.source,d)}})},ImportDeclaration(s){if(typeof s.source.value!="string")return;let o=s.source.value;if(!/^(\.\.\/)/.test(o))return;let n=(0,l.resolve)((0,l.dirname)(r),o),p=A(n,t),u=k(n,i);p||u&&e.report({node:s,messageId:"shouldUseAlias",data:{alias:u},fix(c){let m=s.source.raw,g=E(n,u,i.get(u)),d=m.replace(o,g);return c.replaceText(s.source,d)}})}}:{}}};function k(e,t){return Array.from(t.keys()).find(r=>t.get(r).some(s=>e.indexOf(s)===0))}function A(e,t){if(!t)return!1;let r=(0,l.basename)(e);return(0,M.default)(r,t).includes(r)}function E(e,t,r){for(let i of r)if(e.indexOf(i)===0)return e.replace(i,t)}var J={name:h,version:v,meta:{name:h,version:v},rules:{"no-relative":T}};
+diff --git a/dist/index.mjs b/dist/index.mjs
+index 96de18e06d4cc413e11af038cd760e4804c32e59..27e8c4e3e2c942400cc3982e52159904ca6eedfa 100644
+--- a/dist/index.mjs
++++ b/dist/index.mjs
+@@ -1 +1 @@
+-var d="eslint-plugin-path-alias",h="2.0.0";import{dirname as x,resolve as j,basename as I}from"path";import U from"nanomatch";function y(e){return`https://github/com/msfragala/eslint-plugin-path-alias/blob/master/docs/rules/${e}.md`}import{getTsconfig as k}from"get-tsconfig";import{resolve as c,dirname as u}from"path";import A from"find-pkg";import{readFileSync as E}from"fs";function b(e){if(e.options[0]?.paths)return C(e);let s=e.getFilename?.()??e.filename,i=k(s);if(i?.config?.compilerOptions?.paths)return T(i);let r=A.sync(u(s));if(!r)return;let t=JSON.parse(E(r).toString());if(t?.imports)return M(t,r)}function M(e,s){let i=new Map,r=e.imports??{},t=u(s);return Object.entries(r).forEach(([o,n])=>{if(!n||typeof n!="string")return;let a=c(t,n);i.set(o,[a])}),i}function T(e){let s=new Map,i=e?.config?.compilerOptions?.paths??{},r=u(e.path);return e.config.compilerOptions?.baseUrl&&(r=c(u(e.path),e.config.compilerOptions.baseUrl)),Object.entries(i).forEach(([t,o])=>{t=t.replace(/\/\*$/,""),o=o.map(n=>c(r,n.replace(/\/\*$/,""))),s.set(t,o)}),s}function C(e){let s=new Map,i=e.options[0]?.paths??{};return Object.entries(i).forEach(([r,t])=>{if(!t||typeof t!="string")return;if(t.startsWith("/")){s.set(r,[t]);return}let o=e.getCwd?.()??e.cwd,n=c(o,t);s.set(r,[n])}),s}var P={meta:{type:"suggestion",docs:{description:"Ensure imports use path aliases whenever possible vs. relative paths",url:y("no-relative")},fixable:"code",schema:[{type:"object",properties:{exceptions:{type:"array",items:{type:"string"}},paths:{type:"object"}},additionalProperties:!1}],messages:{shouldUseAlias:"Import should use path alias instead of relative path"}},create(e){let s=e.options[0]?.exceptions,i=e.getFilename?.()??e.filename,r=b(e);return r?.size?{ImportExpression(t){if(t.source.type!=="Literal"||typeof t.source.value!="string")return;let o=t.source.raw,n=t.source.value;if(!/^(\.?\.\/)/.test(n))return;let a=j(x(i),n);if(w(a,s))return;let l=R(a,r);l&&e.report({node:t,messageId:"shouldUseAlias",data:{alias:l},fix(f){let m=O(a,l,r.get(l)),g=o.replace(n,m);return f.replaceText(t.source,g)}})},ImportDeclaration(t){if(typeof t.source.value!="string")return;let o=t.source.value;if(!/^(\.?\.\/)/.test(o))return;let n=j(x(i),o),a=w(n,s),p=R(n,r);a||p&&e.report({node:t,messageId:"shouldUseAlias",data:{alias:p},fix(l){let f=t.source.raw,m=O(n,p,r.get(p)),g=f.replace(o,m);return l.replaceText(t.source,g)}})}}:{}}};function R(e,s){return Array.from(s.keys()).find(i=>s.get(i).some(t=>e.indexOf(t)===0))}function w(e,s){if(!s)return!1;let i=I(e);return U(i,s).includes(i)}function O(e,s,i){for(let r of i)if(e.indexOf(r)===0)return e.replace(r,s)}var Q={name:d,version:h,meta:{name:d,version:h},rules:{"no-relative":P}};export{Q as default};
++var d="eslint-plugin-path-alias",h="2.0.0";import{dirname as x,resolve as j,basename as I}from"path";import U from"nanomatch";function y(e){return`https://github/com/msfragala/eslint-plugin-path-alias/blob/master/docs/rules/${e}.md`}import{getTsconfig as k}from"get-tsconfig";import{resolve as c,dirname as u}from"path";import A from"find-pkg";import{readFileSync as E}from"fs";function b(e){if(e.options[0]?.paths)return C(e);let s=e.getFilename?.()??e.filename,i=k(s);if(i?.config?.compilerOptions?.paths)return T(i);let r=A.sync(u(s));if(!r)return;let t=JSON.parse(E(r).toString());if(t?.imports)return M(t,r)}function M(e,s){let i=new Map,r=e.imports??{},t=u(s);return Object.entries(r).forEach(([o,n])=>{if(!n||typeof n!="string")return;let a=c(t,n);i.set(o,[a])}),i}function T(e){let s=new Map,i=e?.config?.compilerOptions?.paths??{},r=u(e.path);return e.config.compilerOptions?.baseUrl&&(r=c(u(e.path),e.config.compilerOptions.baseUrl)),Object.entries(i).forEach(([t,o])=>{t=t.replace(/\/\*$/,""),o=o.map(n=>c(r,n.replace(/\/\*$/,""))),s.set(t,o)}),s}function C(e){let s=new Map,i=e.options[0]?.paths??{};return Object.entries(i).forEach(([r,t])=>{if(!t||typeof t!="string")return;if(t.startsWith("/")){s.set(r,[t]);return}let o=e.getCwd?.()??e.cwd,n=c(o,t);s.set(r,[n])}),s}var P={meta:{type:"suggestion",docs:{description:"Ensure imports use path aliases whenever possible vs. relative paths",url:y("no-relative")},fixable:"code",schema:[{type:"object",properties:{exceptions:{type:"array",items:{type:"string"}},paths:{type:"object"}},additionalProperties:!1}],messages:{shouldUseAlias:"Import should use path alias instead of relative path"}},create(e){let s=e.options[0]?.exceptions,i=e.getFilename?.()??e.filename,r=b(e);return r?.size?{ImportExpression(t){if(t.source.type!=="Literal"||typeof t.source.value!="string")return;let o=t.source.raw,n=t.source.value;if(!/^(\.\.\/)/.test(n))return;let a=j(x(i),n);if(w(a,s))return;let l=R(a,r);l&&e.report({node:t,messageId:"shouldUseAlias",data:{alias:l},fix(f){let m=O(a,l,r.get(l)),g=o.replace(n,m);return f.replaceText(t.source,g)}})},ImportDeclaration(t){if(typeof t.source.value!="string")return;let o=t.source.value;if(!/^(\.\.\/)/.test(o))return;let n=j(x(i),o),a=w(n,s),p=R(n,r);a||p&&e.report({node:t,messageId:"shouldUseAlias",data:{alias:p},fix(l){let f=t.source.raw,m=O(n,p,r.get(p)),g=f.replace(o,m);return l.replaceText(t.source,g)}})}}:{}}};function R(e,s){return Array.from(s.keys()).find(i=>s.get(i).some(t=>e.indexOf(t)===0))}function w(e,s){if(!s)return!1;let i=I(e);return U(i,s).includes(i)}function O(e,s,i){for(let r of i)if(e.indexOf(r)===0)return e.replace(r,s)}var Q={name:d,version:h,meta:{name:d,version:h},rules:{"no-relative":P}};export{Q as default};

scripts/build/build.mjs

@@ -21,7 +21,7 @@ import esbuild from "esbuild";
 import { readdir } from "fs/promises";
 import { join } from "path";
 
-import { BUILD_TIMESTAMP, commonOpts, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, resolvePluginName, VERSION, watch } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, resolvePluginName, VERSION, commonRendererPlugins, watch } from "./common.mjs";
 
 const defines = {
     IS_STANDALONE,
@@ -131,7 +131,7 @@ await Promise.all([
         sourcemap,
         plugins: [
             globPlugins("discordDesktop"),
-            ...commonOpts.plugins
+            ...commonRendererPlugins
         ],
         define: {
             ...defines,
@@ -180,7 +180,7 @@ await Promise.all([
         sourcemap,
         plugins: [
             globPlugins("vencordDesktop"),
-            ...commonOpts.plugins
+            ...commonRendererPlugins
         ],
         define: {
             ...defines,

scripts/build/buildWeb.mjs

@@ -23,7 +23,7 @@ import { appendFile, mkdir, readdir, readFile, rm, writeFile } from "fs/promises
 import { join } from "path";
 import Zip from "zip-local";
 
-import { BUILD_TIMESTAMP, commonOpts, globPlugins, IS_DEV, IS_REPORTER, VERSION } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, globPlugins, IS_DEV, IS_REPORTER, VERSION, commonRendererPlugins } from "./common.mjs";
 
 /**
  * @type {esbuild.BuildOptions}
@@ -36,7 +36,7 @@ const commonOptions = {
     external: ["~plugins", "~git-hash", "/assets/*"],
     plugins: [
         globPlugins("web"),
-        ...commonOpts.plugins,
+        ...commonRendererPlugins
     ],
     target: ["esnext"],
     define: {
@@ -116,7 +116,12 @@ await Promise.all(
             }
         })
     ]
-);
+).catch(err => {
+    console.error("Build failed");
+    console.error(err.message);
+    if (!commonOpts.watch)
+        process.exit(1);
+});;
 
 /**
  * @type {(dir: string) => Promise<string[]>}

scripts/build/common.mjs

@@ -28,6 +28,7 @@ import { join, relative } from "path";
 import { promisify } from "util";
 
 import { getPluginTarget } from "../utils.mjs";
+import { builtinModules } from "module";
 
 /** @type {import("../../package.json")} */
 const PackageJSON = JSON.parse(readFileSync("package.json"));
@@ -292,6 +293,18 @@ export const stylePlugin = {
     }
 };
 
+/**
+ * @type {(filter: RegExp, message: string) => import("esbuild").Plugin}
+ */
+export const banImportPlugin = (filter, message) => ({
+    name: "ban-imports",
+    setup: build => {
+        build.onResolve({ filter }, () => {
+            return { errors: [{ text: message }] };
+        });
+    }
+});
+
 /**
  * @type {import("esbuild").BuildOptions}
  */
@@ -311,3 +324,16 @@ export const commonOpts = {
     // Work around https://github.com/evanw/esbuild/issues/2460
     tsconfig: "./scripts/build/tsconfig.esbuild.json"
 };
+
+const escapedBuiltinModules = builtinModules
+    .map(m => m.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
+    .join("|");
+const builtinModuleRegex = new RegExp(`^(node:)?(${escapedBuiltinModules})$`);
+
+export const commonRendererPlugins = [
+    banImportPlugin(builtinModuleRegex, "Cannot import node inbuilt modules in browser code. You need to use a native.ts file"),
+    banImportPlugin(/^react$/, "Cannot import from react. React and hooks should be imported from @webpack/common"),
+    banImportPlugin(/^electron(\/.*)?$/, "Cannot import electron in browser code. You need to use a native.ts file"),
+    banImportPlugin(/^ts-pattern$/, "Cannot import from ts-pattern. match and P should be imported from @webpack/common"),
+    ...commonOpts.plugins
+];

scripts/generateReport.ts

@@ -36,8 +36,9 @@ for (const variable of ["DISCORD_TOKEN", "CHROMIUM_BIN"]) {
 const CANARY = process.env.USE_CANARY === "true";
 
 const browser = await pup.launch({
-    headless: "new",
-    executablePath: process.env.CHROMIUM_BIN
+    headless: true,
+    executablePath: process.env.CHROMIUM_BIN,
+    args: ["--no-sandbox"]
 });
 
 const page = await browser.newPage();
@@ -136,7 +137,6 @@ async function printReport() {
             body: JSON.stringify({
                 description: "Here's the latest Vencord Report!",
                 username: "Vencord Reporter" + (CANARY ? " (Canary)" : ""),
-                avatar_url: "https://cdn.discordapp.com/avatars/1017176847865352332/c312b6b44179ae6817de7e4b09e9c6af.webp?size=512",
                 embeds: [
                     {
                         title: "Bad Patches",
@@ -226,7 +226,7 @@ page.on("console", async e => {
                     plugin,
                     type,
                     id,
-                    match: regex.replace(/\[A-Za-z_\$\]\[\\w\$\]\*/g, "\\i"),
+                    match: regex.replace(/\(\?:\[A-Za-z_\$\]\[\\w\$\]\*\)/g, "\\i"),
                     error: await maybeGetError(e.args()[3])
                 });
 
@@ -290,6 +290,8 @@ page.on("console", async e => {
 
 page.on("error", e => console.error("[Error]", e.message));
 page.on("pageerror", e => {
+    if (e.message.includes("Sentry successfully disabled")) return;
+
     if (!e.message.startsWith("Object") && !e.message.includes("Cannot find module")) {
         console.error("[Page Error]", e.message);
         report.otherErrors.push(e.message);

setup.bat

@@ -0,0 +1,20 @@
+@echo off
+
+:: Check if 'upstream' remote exists
+git remote | findstr upstream >nul
+if errorlevel 1 (
+    :: Add upstream remote
+    git remote add upstream https://github.com/Vendicated/Vencord.git
+    echo Added upstream remote
+)
+
+:: Disable push to upstream by setting push URL to 'no_push'
+git remote set-url --push upstream no_push
+echo Disabled push to upstream remote
+
+:: Add alias for sync: fetch, merge, and push to origin
+git config alias.sync "!git fetch upstream && git merge upstream/main && git push origin main"
+echo Configured sync alias
+
+echo Setup completed!
+

setup.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+# Add upstream remote if it doesn't exist
+if ! git remote | grep -q 'upstream'; then
+  git remote add upstream https://github.com/Vendicated/Vencord.git
+  echo "Added upstream remote"
+fi
+
+# Disable push to upstream by removing its push URL
+git remote set-url --push upstream no_push
+echo "Disabled push to upstream remote"
+
+# Add alias for sync: fetch, merge, and push to origin
+git config alias.sync '!git fetch upstream && git merge upstream/main && git push origin main'
+echo "Configured sync alias"
+
+echo "Setup completed!"
+

src/api/Badges.ts

@@ -44,6 +44,11 @@ export interface ProfileBadge {
     position?: BadgePosition;
     /** The badge name to display, Discord uses this. Required for component badges */
     key?: string;
+
+    /**
+     * Allows dynamically returning multiple badges
+     */
+    getBadges?(userInfo: BadgeUserArgs): ProfileBadge[];
 }
 
 const Badges = new Set<ProfileBadge>();
@@ -52,7 +57,7 @@ const Badges = new Set<ProfileBadge>();
  * Register a new badge with the Badges API
  * @param badge The badge to register
  */
-export function addBadge(badge: ProfileBadge) {
+export function addProfileBadge(badge: ProfileBadge) {
     badge.component &&= ErrorBoundary.wrap(badge.component, { noop: true });
     Badges.add(badge);
 }
@@ -61,7 +66,7 @@ export function addBadge(badge: ProfileBadge) {
  * Unregister a badge from the Badges API
  * @param badge The badge to remove
  */
-export function removeBadge(badge: ProfileBadge) {
+export function removeProfileBadge(badge: ProfileBadge) {
     return Badges.delete(badge);
 }
 
@@ -73,9 +78,16 @@ export function _getBadges(args: BadgeUserArgs) {
     const badges = [] as ProfileBadge[];
     for (const badge of Badges) {
         if (!badge.shouldShow || badge.shouldShow(args)) {
+            const b = badge.getBadges
+                ? badge.getBadges(args).map(b => {
+                    b.component &&= ErrorBoundary.wrap(b.component, { noop: true });
+                    return b;
+                })
+                : [{ ...badge, ...args }];
+
             badge.position === BadgePosition.START
-                ? badges.unshift({ ...badge, ...args })
-                : badges.push({ ...badge, ...args });
+                ? badges.unshift(...b)
+                : badges.push(...b);
         }
     }
     const donorBadges = (Plugins.BadgeAPI as unknown as typeof import("../plugins/_api/badges").default).getDonorBadges(args.userId);
@@ -88,20 +100,3 @@ export interface BadgeUserArgs {
     userId: string;
     guildId: string;
 }
-
-interface ConnectedAccount {
-    type: string;
-    id: string;
-    name: string;
-    verified: boolean;
-}
-
-interface Profile {
-    connectedAccounts: ConnectedAccount[];
-    premiumType: number;
-    premiumSince: string;
-    premiumGuildSince?: any;
-    lastFetched: number;
-    profileFetchFailed: boolean;
-    application?: any;
-}

src/api/ChatButtons.tsx

@@ -9,9 +9,9 @@ import "./ChatButton.css";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Logger } from "@utils/Logger";
 import { waitFor } from "@webpack";
-import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
+import { Button, ButtonWrapperClasses, Tooltip } from "@webpack/common";
 import { Channel } from "discord-types/general";
-import { HTMLProps, MouseEventHandler, ReactNode } from "react";
+import { HTMLProps, JSX, MouseEventHandler, ReactNode } from "react";
 
 let ChannelTextAreaClasses: Record<"button" | "buttonContainer", string>;
 waitFor(["buttonContainer", "channelTextArea"], m => ChannelTextAreaClasses = m);
@@ -74,9 +74,9 @@ export interface ChatBarProps {
     };
 }
 
-export type ChatBarButton = (props: ChatBarProps & { isMainChat: boolean; }) => JSX.Element | null;
+export type ChatBarButtonFactory = (props: ChatBarProps & { isMainChat: boolean; }) => JSX.Element | null;
 
-const buttonFactories = new Map<string, ChatBarButton>();
+const buttonFactories = new Map<string, ChatBarButtonFactory>();
 const logger = new Logger("ChatButtons");
 
 export function _injectButtons(buttons: ReactNode[], props: ChatBarProps) {
@@ -91,7 +91,7 @@ export function _injectButtons(buttons: ReactNode[], props: ChatBarProps) {
     }
 }
 
-export const addChatBarButton = (id: string, button: ChatBarButton) => buttonFactories.set(id, button);
+export const addChatBarButton = (id: string, button: ChatBarButtonFactory) => buttonFactories.set(id, button);
 export const removeChatBarButton = (id: string) => buttonFactories.delete(id);
 
 export interface ChatBarButtonProps {
@@ -99,7 +99,8 @@ export interface ChatBarButtonProps {
     tooltip: string;
     onClick: MouseEventHandler<HTMLButtonElement>;
     onContextMenu?: MouseEventHandler<HTMLButtonElement>;
-    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu">;
+    onAuxClick?: MouseEventHandler<HTMLButtonElement>;
+    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu" | "onAuxClick">;
 }
 export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
     return (
@@ -109,12 +110,13 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
                     <Button
                         aria-label={props.tooltip}
                         size=""
-                        look={ButtonLooks.BLANK}
+                        look={Button.Looks.BLANK}
                         onMouseEnter={onMouseEnter}
                         onMouseLeave={onMouseLeave}
                         innerClassName={`${ButtonWrapperClasses.button} ${ChannelTextAreaClasses?.button}`}
                         onClick={props.onClick}
                         onContextMenu={props.onContextMenu}
+                        onAuxClick={props.onAuxClick}
                         {...props.buttonProps}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>

src/api/Commands/commandHelpers.ts

@@ -54,5 +54,5 @@ export function sendBotMessage(channelId: string, message: PartialDeep<Message>)
 export function findOption<T>(args: Argument[], name: string): T & {} | undefined;
 export function findOption<T>(args: Argument[], name: string, fallbackValue: T): T & {};
 export function findOption(args: Argument[], name: string, fallbackValue?: any) {
-    return (args.find(a => a.name === name)?.value || fallbackValue) as any;
+    return (args.find(a => a.name === name)?.value ?? fallbackValue) as any;
 }

src/api/Commands/index.ts

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Logger } from "@utils/Logger";
 import { makeCodeblock } from "@utils/text";
 
 import { sendBotMessage } from "./commandHelpers";
@@ -46,10 +47,10 @@ export let RequiredMessageOption: Option = ReqPlaceholder;
 export const _init = function (cmds: Command[]) {
     try {
         BUILT_IN = cmds;
-        OptionalMessageOption = cmds.find(c => c.name === "shrug")!.options![0];
-        RequiredMessageOption = cmds.find(c => c.name === "me")!.options![0];
+        OptionalMessageOption = cmds.find(c => (c.untranslatedName || c.displayName) === "shrug")!.options![0];
+        RequiredMessageOption = cmds.find(c => (c.untranslatedName || c.displayName) === "me")!.options![0];
     } catch (e) {
-        console.error("Failed to load CommandsApi");
+        new Logger("CommandsAPI").error("Failed to load CommandsApi", e, " - cmds is", cmds);
     }
     return cmds;
 } as never;
@@ -109,6 +110,7 @@ function registerSubCommands(cmd: Command, plugin: string) {
         const subCmd = {
             ...cmd,
             ...o,
+            options: o.options !== undefined ? o.options : undefined,
             type: ApplicationCommandType.CHAT_INPUT,
             name: `${cmd.name} ${o.name}`,
             id: `${o.name}-${cmd.id}`,
@@ -138,6 +140,8 @@ export function registerCommand<C extends Command>(command: C, plugin: string) {
         throw new Error(`Command '${command.name}' already exists.`);
 
     command.isVencordCommand = true;
+    command.untranslatedName ??= command.name;
+    command.untranslatedDescription ??= command.description;
     command.id ??= `-${BUILT_IN.length + 1}`;
     command.applicationId ??= "-1"; // BUILT_IN;
     command.type ??= ApplicationCommandType.CHAT_INPUT;

src/api/Commands/types.ts

@@ -93,8 +93,10 @@ export interface Command {
     isVencordCommand?: boolean;
 
     name: string;
+    untranslatedName?: string;
     displayName?: string;
     description: string;
+    untranslatedDescription?: string;
     displayDescription?: string;
 
     options?: Option[];

src/api/ContextMenu.ts

@@ -24,13 +24,13 @@ import type { ReactElement } from "react";
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
  */
-export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => void;
+export type NavContextMenuPatchCallback = (children: Array<ReactElement<any> | null>, ...args: Array<any>) => void;
 /**
  * @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
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => void;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement<any> | null>, ...args: Array<any>) => void;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -70,7 +70,7 @@ export function addGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback)
  * @returns Whether the patch was successfully removed from the context menu(s)
  */
 export function removeContextMenuPatch<T extends string | Array<string>>(navId: T, patch: NavContextMenuPatchCallback): T extends string ? boolean : Array<boolean> {
-    const navIds = Array.isArray(navId) ? navId : [navId as string];
+    const navIds: string[] = Array.isArray(navId) ? navId : [navId];
 
     const results = navIds.map(id => navPatches.get(id)?.delete(patch) ?? false);
 
@@ -90,19 +90,20 @@ 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(s) of its children
  * @param id The id of the child. If an array is specified, all ids will be tried
  * @param children The context menu children
+ * @param matchSubstring Whether to check if the id is a substring of the child id
  */
-export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null>): Array<ReactElement | null> | null {
+export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement<any> | null | undefined>, matchSubstring = false): Array<ReactElement<any> | null | undefined> | null {
     for (const child of children) {
         if (child == null) continue;
 
         if (Array.isArray(child)) {
-            const found = findGroupChildrenByChildId(id, child);
+            const found = findGroupChildrenByChildId(id, child, matchSubstring);
             if (found !== null) return found;
         }
 
         if (
-            (Array.isArray(id) && id.some(id => child.props?.id === id))
-            || child.props?.id === id
+            (Array.isArray(id) && id.some(id => matchSubstring ? child.props?.id?.includes(id) : child.props?.id === id))
+            || (matchSubstring ? child.props?.id?.includes(id) : child.props?.id === id)
         ) return children;
 
         let nextChildren = child.props?.children;
@@ -112,7 +113,7 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
                 child.props.children = nextChildren;
             }
 
-            const found = findGroupChildrenByChildId(id, nextChildren);
+            const found = findGroupChildrenByChildId(id, nextChildren, matchSubstring);
             if (found !== null) return found;
         }
     }
@@ -121,9 +122,9 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
 }
 
 interface ContextMenuProps {
-    contextMenuApiArguments?: Array<any>;
+    contextMenuAPIArguments?: Array<any>;
     navId: string;
-    children: Array<ReactElement | null>;
+    children: Array<ReactElement<any> | null>;
     "aria-label": string;
     onSelect: (() => void) | undefined;
     onClose: (callback: (...args: Array<any>) => any) => void;
@@ -135,7 +136,7 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
         children: cloneMenuChildren(props.children),
     };
 
-    props.contextMenuApiArguments ??= [];
+    props.contextMenuAPIArguments ??= [];
     const contextMenuPatches = navPatches.get(props.navId);
 
     if (!Array.isArray(props.children)) props.children = [props.children];
@@ -143,7 +144,7 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
     if (contextMenuPatches) {
         for (const patch of contextMenuPatches) {
             try {
-                patch(props.children, ...props.contextMenuApiArguments);
+                patch(props.children, ...props.contextMenuAPIArguments);
             } catch (err) {
                 ContextMenuLogger.error(`Patch for ${props.navId} errored,`, err);
             }
@@ -152,7 +153,7 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
 
     for (const patch of globalPatches) {
         try {
-            patch(props.navId, props.children, ...props.contextMenuApiArguments);
+            patch(props.navId, props.children, ...props.contextMenuAPIArguments);
         } catch (err) {
             ContextMenuLogger.error("Global patch errored,", err);
         }
@@ -161,7 +162,7 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
     return props;
 }
 
-function cloneMenuChildren(obj: ReactElement | Array<ReactElement | null> | null) {
+function cloneMenuChildren(obj: ReactElement<any> | Array<ReactElement<any> | null> | null) {
     if (Array.isArray(obj)) {
         return obj.map(cloneMenuChildren);
     }

src/api/MemberListDecorators.tsx

@@ -16,7 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Channel, User } from "discord-types/general/index.js";
+import { JSX } from "react";
 
 interface DecoratorProps {
     activities: any[];
@@ -38,27 +40,39 @@ interface DecoratorProps {
     user: User;
     [key: string]: any;
 }
-export type Decorator = (props: DecoratorProps) => JSX.Element | null;
+export type MemberListDecoratorFactory = (props: DecoratorProps) => JSX.Element | null;
 type OnlyIn = "guilds" | "dms";
 
-export const decorators = new Map<string, { decorator: Decorator, onlyIn?: OnlyIn; }>();
+export const decoratorsFactories = new Map<string, { render: MemberListDecoratorFactory, onlyIn?: OnlyIn; }>();
 
-export function addDecorator(identifier: string, decorator: Decorator, onlyIn?: OnlyIn) {
-    decorators.set(identifier, { decorator, onlyIn });
+export function addMemberListDecorator(identifier: string, render: MemberListDecoratorFactory, onlyIn?: OnlyIn) {
+    decoratorsFactories.set(identifier, { render, onlyIn });
 }
 
-export function removeDecorator(identifier: string) {
-    decorators.delete(identifier);
+export function removeMemberListDecorator(identifier: string) {
+    decoratorsFactories.delete(identifier);
 }
 
-export function __getDecorators(props: DecoratorProps): (JSX.Element | null)[] {
+export function __getDecorators(props: DecoratorProps): JSX.Element {
     const isInGuild = !!(props.guildId);
-    return Array.from(decorators.values(), decoratorObj => {
-        const { decorator, onlyIn } = decoratorObj;
-        // this can most likely be done cleaner
-        if (!onlyIn || (onlyIn === "guilds" && isInGuild) || (onlyIn === "dms" && !isInGuild)) {
-            return decorator(props);
+
+    const decorators = Array.from(
+        decoratorsFactories.entries(),
+        ([key, { render: Decorator, onlyIn }]) => {
+            if ((onlyIn === "guilds" && !isInGuild) || (onlyIn === "dms" && isInGuild))
+                return null;
+
+            return (
+                <ErrorBoundary noop key={key} message={`Failed to render ${key} Member List Decorator`}>
+                    <Decorator {...props} />
+                </ErrorBoundary>
+            );
         }
-        return null;
-    });
+    );
+
+    return (
+        <div className="vc-member-list-decorators-wrapper">
+            {decorators}
+        </div>
+    );
 }

src/api/MessageAccessories.tsx

@@ -16,26 +16,29 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export type AccessoryCallback = (props: Record<string, any>) => JSX.Element | null | Array<JSX.Element | null>;
-export type Accessory = {
-    callback: AccessoryCallback;
+import ErrorBoundary from "@components/ErrorBoundary";
+import { JSX, ReactNode } from "react";
+
+export type MessageAccessoryFactory = (props: Record<string, any>) => ReactNode;
+export type MessageAccessory = {
+    render: MessageAccessoryFactory;
     position?: number;
 };
 
-export const accessories = new Map<String, Accessory>();
+export const accessories = new Map<string, MessageAccessory>();
 
-export function addAccessory(
+export function addMessageAccessory(
     identifier: string,
-    callback: AccessoryCallback,
+    render: MessageAccessoryFactory,
     position?: number
 ) {
     accessories.set(identifier, {
-        callback,
+        render,
         position,
     });
 }
 
-export function removeAccessory(identifier: string) {
+export function removeMessageAccessory(identifier: string) {
     accessories.delete(identifier);
 }
 
@@ -43,15 +46,12 @@ export function _modifyAccessories(
     elements: JSX.Element[],
     props: Record<string, any>
 ) {
-    for (const accessory of accessories.values()) {
-        let accessories = accessory.callback(props);
-        if (accessories == null)
-            continue;
-
-        if (!Array.isArray(accessories))
-            accessories = [accessories];
-        else if (accessories.length === 0)
-            continue;
+    for (const [key, accessory] of accessories.entries()) {
+        const res = (
+            <ErrorBoundary message={`Failed to render ${key} Message Accessory`} key={key}>
+                <accessory.render {...props} />
+            </ErrorBoundary>
+        );
 
         elements.splice(
             accessory.position != null
@@ -60,7 +60,7 @@ export function _modifyAccessories(
                     : accessory.position
                 : elements.length,
             0,
-            ...accessories.filter(e => e != null) as JSX.Element[]
+            res
         );
     }
 

src/api/MessageDecorations.tsx

@@ -16,9 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Channel, Message } from "discord-types/general/index.js";
+import { JSX } from "react";
 
-interface DecorationProps {
+export interface MessageDecorationProps {
     author: {
         /**
          * Will be username if the user has no nickname
@@ -44,20 +46,31 @@ interface DecorationProps {
     message: Message;
     [key: string]: any;
 }
-export type Decoration = (props: DecorationProps) => JSX.Element | null;
+export type MessageDecorationFactory = (props: MessageDecorationProps) => JSX.Element | null;
 
-export const decorations = new Map<string, Decoration>();
+export const decorationsFactories = new Map<string, MessageDecorationFactory>();
 
-export function addDecoration(identifier: string, decoration: Decoration) {
-    decorations.set(identifier, decoration);
+export function addMessageDecoration(identifier: string, decoration: MessageDecorationFactory) {
+    decorationsFactories.set(identifier, decoration);
 }
 
-export function removeDecoration(identifier: string) {
-    decorations.delete(identifier);
+export function removeMessageDecoration(identifier: string) {
+    decorationsFactories.delete(identifier);
 }
 
-export function __addDecorationsToMessage(props: DecorationProps): (JSX.Element | null)[] {
-    return [...decorations.values()].map(decoration => {
-        return decoration(props);
-    });
+export function __addDecorationsToMessage(props: MessageDecorationProps): JSX.Element {
+    const decorations = Array.from(
+        decorationsFactories.entries(),
+        ([key, Decoration]) => (
+            <ErrorBoundary noop message={`Failed to render ${key} Message Decoration`} key={key}>
+                <Decoration {...props} />
+            </ErrorBoundary>
+        )
+    );
+
+    return (
+        <div className="vc-message-decorations-wrapper">
+            {decorations}
+        </div>
+    );
 }

src/api/MessageEvents.ts

@@ -73,11 +73,11 @@ export interface MessageExtra {
     openWarningPopout: (props: any) => any;
 }
 
-export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
-export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void | { cancel: boolean; }>;
+export type MessageSendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
+export type MessageEditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void | { cancel: boolean; }>;
 
-const sendListeners = new Set<SendListener>();
-const editListeners = new Set<EditListener>();
+const sendListeners = new Set<MessageSendListener>();
+const editListeners = new Set<MessageEditListener>();
 
 export async function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra, replyOptions: MessageReplyOptions) {
     extra.replyOptions = replyOptions;
@@ -111,29 +111,29 @@ export async function _handlePreEdit(channelId: string, messageId: string, messa
 /**
  * Note: This event fires off before a message is sent, allowing you to edit the message.
  */
-export function addPreSendListener(listener: SendListener) {
+export function addMessagePreSendListener(listener: MessageSendListener) {
     sendListeners.add(listener);
     return listener;
 }
 /**
  * Note: This event fires off before a message's edit is applied, allowing you to further edit the message.
  */
-export function addPreEditListener(listener: EditListener) {
+export function addMessagePreEditListener(listener: MessageEditListener) {
     editListeners.add(listener);
     return listener;
 }
-export function removePreSendListener(listener: SendListener) {
+export function removeMessagePreSendListener(listener: MessageSendListener) {
     return sendListeners.delete(listener);
 }
-export function removePreEditListener(listener: EditListener) {
+export function removeMessagePreEditListener(listener: MessageEditListener) {
     return editListeners.delete(listener);
 }
 
 
 // Message clicks
-type ClickListener = (message: Message, channel: Channel, event: MouseEvent) => void;
+export type MessageClickListener = (message: Message, channel: Channel, event: MouseEvent) => void;
 
-const listeners = new Set<ClickListener>();
+const listeners = new Set<MessageClickListener>();
 
 export function _handleClick(message: Message, channel: Channel, event: MouseEvent) {
     // message object may be outdated, so (try to) fetch latest one
@@ -147,11 +147,11 @@ export function _handleClick(message: Message, channel: Channel, event: MouseEve
     }
 }
 
-export function addClickListener(listener: ClickListener) {
+export function addMessageClickListener(listener: MessageClickListener) {
     listeners.add(listener);
     return listener;
 }
 
-export function removeClickListener(listener: ClickListener) {
+export function removeMessageClickListener(listener: MessageClickListener) {
     return listeners.delete(listener);
 }

src/api/MessagePopover.tsx

@@ -16,54 +16,59 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Logger } from "@utils/Logger";
 import { Channel, Message } from "discord-types/general";
-import type { MouseEventHandler } from "react";
+import type { ComponentType, MouseEventHandler } from "react";
 
 const logger = new Logger("MessagePopover");
 
-export interface ButtonItem {
+export interface MessagePopoverButtonItem {
     key?: string,
     label: string,
-    icon: React.ComponentType<any>,
+    icon: ComponentType<any>,
     message: Message,
     channel: Channel,
     onClick?: MouseEventHandler<HTMLButtonElement>,
     onContextMenu?: MouseEventHandler<HTMLButtonElement>;
 }
 
-export type getButtonItem = (message: Message) => ButtonItem | null;
+export type MessagePopoverButtonFactory = (message: Message) => MessagePopoverButtonItem | null;
 
-export const buttons = new Map<string, getButtonItem>();
+export const buttons = new Map<string, MessagePopoverButtonFactory>();
 
-export function addButton(
+export function addMessagePopoverButton(
     identifier: string,
-    item: getButtonItem,
+    item: MessagePopoverButtonFactory,
 ) {
     buttons.set(identifier, item);
 }
 
-export function removeButton(identifier: string) {
+export function removeMessagePopoverButton(identifier: string) {
     buttons.delete(identifier);
 }
 
 export function _buildPopoverElements(
-    msg: Message,
-    makeButton: (item: ButtonItem) => React.ComponentType
+    Component: React.ComponentType<MessagePopoverButtonItem>,
+    message: Message
 ) {
-    const items = [] as React.ComponentType[];
+    const items: React.ReactNode[] = [];
 
     for (const [identifier, getItem] of buttons.entries()) {
         try {
-            const item = getItem(msg);
+            const item = getItem(message);
             if (item) {
                 item.key ??= identifier;
-                items.push(makeButton(item));
+                items.push(
+                    <ErrorBoundary noop>
+                        <Component {...item} />
+                    </ErrorBoundary>
+                );
             }
         } catch (err) {
             logger.error(`[${identifier}]`, err);
         }
     }
 
-    return items;
+    return <>{items}</>;
 }

src/api/Notifications/notificationLog.tsx

@@ -19,6 +19,8 @@
 import * as DataStore from "@api/DataStore";
 import { Settings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
+import { Flex } from "@components/Flex";
+import { openNotificationSettingsModal } from "@components/VencordSettings/NotificationSettings";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { Alerts, Button, Forms, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
@@ -170,24 +172,31 @@ function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void
             </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>
+                <Flex>
+                    <Button onClick={openNotificationSettingsModal}>
+                        Notification Settings
+                    </Button>
+
+                    <Button
+                        disabled={log.length === 0}
+                        color={Button.Colors.RED}
+                        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>
+                </Flex>
             </ModalFooter>
         </ModalRoot>
     );

src/api/ServerList.tsx

@@ -16,40 +16,36 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Logger } from "@utils/Logger";
-
-const logger = new Logger("ServerListAPI");
+import ErrorBoundary from "@components/ErrorBoundary";
+import { ComponentType } from "react";
 
 export const enum ServerListRenderPosition {
     Above,
     In,
 }
 
-const renderFunctionsAbove = new Set<Function>();
-const renderFunctionsIn = new Set<Function>();
+const componentsAbove = new Set<ComponentType>();
+const componentsBelow = new Set<ComponentType>();
 
 function getRenderFunctions(position: ServerListRenderPosition) {
-    return position === ServerListRenderPosition.Above ? renderFunctionsAbove : renderFunctionsIn;
+    return position === ServerListRenderPosition.Above ? componentsAbove : componentsBelow;
 }
 
-export function addServerListElement(position: ServerListRenderPosition, renderFunction: Function) {
+export function addServerListElement(position: ServerListRenderPosition, renderFunction: ComponentType) {
     getRenderFunctions(position).add(renderFunction);
 }
 
-export function removeServerListElement(position: ServerListRenderPosition, renderFunction: Function) {
+export function removeServerListElement(position: ServerListRenderPosition, renderFunction: ComponentType) {
     getRenderFunctions(position).delete(renderFunction);
 }
 
 export const renderAll = (position: ServerListRenderPosition) => {
-    const ret: Array<JSX.Element> = [];
-
-    for (const renderFunction of getRenderFunctions(position)) {
-        try {
-            ret.unshift(renderFunction());
-        } catch (e) {
-            logger.error("Failed to render server list element:", e);
-        }
-    }
-
-    return ret;
+    return Array.from(
+        getRenderFunctions(position),
+        (Component, i) => (
+            <ErrorBoundary noop key={i}>
+                <Component />
+            </ErrorBoundary>
+        )
+    );
 };

src/api/Settings.ts

@@ -23,7 +23,7 @@ import { Logger } from "@utils/Logger";
 import { mergeDefaults } from "@utils/mergeDefaults";
 import { putCloudSettings } from "@utils/settingsSync";
 import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
-import { React } from "@webpack/common";
+import { React, useEffect } from "@webpack/common";
 
 import plugins from "~plugins";
 
@@ -34,7 +34,6 @@ export interface Settings {
     useQuickCss: boolean;
     enableReactDevtools: boolean;
     themeLinks: string[];
-    enabledThemeLinks: string[];
     enabledThemes: string[];
     frameless: boolean;
     transparent: boolean;
@@ -82,7 +81,6 @@ const DefaultSettings: Settings = {
     autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
-    enabledThemeLinks: [],
     enabledThemes: [],
     enableReactDevtools: false,
     frameless: false,
@@ -131,7 +129,7 @@ export const SettingsStore = new SettingsStoreClass(settings, {
 
         if (path === "plugins" && key in plugins)
             return target[key] = {
-                enabled: IS_REPORTER ?? plugins[key].required ?? plugins[key].enabledByDefault ?? false
+                enabled: IS_REPORTER || plugins[key].required || plugins[key].enabledByDefault || false
             };
 
         // Since the property is not set, check if this is a plugin's setting and if so, try to resolve
@@ -194,7 +192,7 @@ export const Settings = SettingsStore.store;
 export function useSettings(paths?: UseSettings<Settings>[]) {
     const [, forceUpdate] = React.useReducer(() => ({}), {});
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (paths) {
             paths.forEach(p => SettingsStore.addChangeListener(p, forceUpdate));
             return () => paths.forEach(p => SettingsStore.removeChangeListener(p, forceUpdate));
@@ -202,7 +200,7 @@ export function useSettings(paths?: UseSettings<Settings>[]) {
             SettingsStore.addGlobalChangeListener(forceUpdate);
             return () => SettingsStore.removeGlobalChangeListener(forceUpdate);
         }
-    }, []);
+    }, [paths]);
 
     return SettingsStore.store;
 }
@@ -222,6 +220,17 @@ export function migratePluginSettings(name: string, ...oldNames: string[]) {
     }
 }
 
+export function migratePluginSetting(pluginName: string, oldSetting: string, newSetting: string) {
+    const settings = SettingsStore.plain.plugins[pluginName];
+    if (!settings) return;
+
+    if (!Object.hasOwn(settings, oldSetting) || Object.hasOwn(settings, newSetting)) return;
+
+    settings[newSetting] = settings[oldSetting];
+    delete settings[oldSetting];
+    SettingsStore.markAsChanged();
+}
+
 export function definePluginSettings<
     Def extends SettingsDefinition,
     Checks extends SettingsChecks<Def>,
@@ -232,6 +241,10 @@ export function definePluginSettings<
             if (!definedSettings.pluginName) throw new Error("Cannot access settings before plugin is initialized");
             return Settings.plugins[definedSettings.pluginName] as any;
         },
+        get plain() {
+            if (!definedSettings.pluginName) throw new Error("Cannot access settings before plugin is initialized");
+            return PlainSettings.plugins[definedSettings.pluginName] as any;
+        },
         use: settings => useSettings(
             settings?.map(name => `plugins.${definedSettings.pluginName}.${name}`) as UseSettings<Settings>[]
         ).plugins[definedSettings.pluginName] as any,

src/components/Badge.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export function Badge({ text, color }): JSX.Element {
+export function Badge({ text, color }) {
     return (
         <div className="vc-plugins-badge" style={{
             backgroundColor: color,

src/components/DonateButton.tsx

@@ -17,16 +17,22 @@
 */
 
 import { Button } from "@webpack/common";
+import { ButtonProps } from "@webpack/types";
 
 import { Heart } from "./Heart";
 
-export default function DonateButton(props: any) {
+export default function DonateButton({
+    look = Button.Looks.LINK,
+    color = Button.Colors.TRANSPARENT,
+    ...props
+}: Partial<ButtonProps>) {
     return (
         <Button
             {...props}
-            look={Button.Looks.LINK}
-            color={Button.Colors.TRANSPARENT}
+            look={look}
+            color={color}
             onClick={() => VencordNative.native.openExternal("https://github.com/sponsors/Vendicated")}
+            innerClassName="vc-donate-button"
         >
             <Heart />
             Donate

src/components/ErrorBoundary.tsx

@@ -27,7 +27,7 @@ interface Props<T = any> {
     /** Render nothing if an error occurs */
     noop?: boolean;
     /** Fallback component to render if an error occurs */
-    fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; }>>;
+    fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; wrappedProps: T; }>>;
     /** called when an error occurs. The props property is only available if using .wrap */
     onError?(data: { error: Error, errorInfo: React.ErrorInfo, props: T; }): void;
     /** Custom error message */
@@ -70,8 +70,7 @@ const ErrorBoundary = LazyComponent(() => {
 
         componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
             this.props.onError?.({ error, errorInfo, props: this.props.wrappedProps });
-            logger.error("A component threw an Error\n", error);
-            logger.error("Component Stack", errorInfo.componentStack);
+            logger.error(`${this.props.message || "A component threw an Error"}\n`, error, errorInfo.componentStack);
         }
 
         render() {
@@ -80,10 +79,14 @@ const ErrorBoundary = LazyComponent(() => {
             if (this.props.noop) return null;
 
             if (this.props.fallback)
-                return <this.props.fallback
-                    children={this.props.children}
-                    {...this.state}
-                />;
+                return (
+                    <this.props.fallback
+                        wrappedProps={this.props.wrappedProps}
+                        {...this.state}
+                    >
+                        {this.props.children}
+                    </this.props.fallback>
+                );
 
             const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console.";
 

src/components/ExpandableHeader.css

@@ -1,12 +0,0 @@
-.vc-expandableheader-center-flex {
-    display: flex;
-    justify-items: center;
-    align-items: center;
-}
-
-.vc-expandableheader-btn {
-    all: unset;
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-}

src/components/ExpandableHeader.tsx

@@ -1,110 +0,0 @@
-/*
- * 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 "./ExpandableHeader.css";
-
-import { classNameFactory } from "@api/Styles";
-import { Text, Tooltip, useState } from "@webpack/common";
-
-const cl = classNameFactory("vc-expandableheader-");
-
-export interface ExpandableHeaderProps {
-    onMoreClick?: () => void;
-    moreTooltipText?: string;
-    onDropDownClick?: (state: boolean) => void;
-    defaultState?: boolean;
-    headerText: string;
-    children: React.ReactNode;
-    buttons?: React.ReactNode[];
-}
-
-export function ExpandableHeader({ children, onMoreClick, buttons, moreTooltipText, defaultState = false, onDropDownClick, headerText }: ExpandableHeaderProps) {
-    const [showContent, setShowContent] = useState(defaultState);
-
-    return (
-        <>
-            <div style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "8px"
-            }}>
-                <Text
-                    tag="h2"
-                    variant="eyebrow"
-                    style={{
-                        color: "var(--header-primary)",
-                        display: "inline"
-                    }}
-                >
-                    {headerText}
-                </Text>
-
-                <div className={cl("center-flex")}>
-                    {
-                        buttons ?? null
-                    }
-
-                    {
-                        onMoreClick && // only show more button if callback is provided
-                        <Tooltip text={moreTooltipText}>
-                            {tooltipProps => (
-                                <button
-                                    {...tooltipProps}
-                                    className={cl("btn")}
-                                    onClick={onMoreClick}>
-                                    <svg
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
-                                    </svg>
-                                </button>
-                            )}
-                        </Tooltip>
-                    }
-
-
-                    <Tooltip text={showContent ? "Hide " + headerText : "Show " + headerText}>
-                        {tooltipProps => (
-                            <button
-                                {...tooltipProps}
-                                className={cl("btn")}
-                                onClick={() => {
-                                    setShowContent(v => !v);
-                                    onDropDownClick?.(showContent);
-                                }}
-                            >
-                                <svg
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    transform={showContent ? "scale(1 -1)" : "scale(1 1)"}
-                                >
-                                    <path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
-                                </svg>
-                            </button>
-                        )}
-                    </Tooltip>
-                </div>
-            </div>
-            {showContent && children}
-        </>
-    );
-}

src/components/Grid.tsx

@@ -0,0 +1,28 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { CSSProperties, JSX } from "react";
+
+interface Props {
+    columns: number;
+    gap?: string;
+    inline?: boolean;
+}
+
+export function Grid(props: Props & JSX.IntrinsicElements["div"]) {
+    const style: CSSProperties = {
+        display: props.inline ? "inline-grid" : "grid",
+        gridTemplateColumns: `repeat(${props.columns}, 1fr)`,
+        gap: props.gap,
+        ...props.style
+    };
+
+    return (
+        <div {...props} style={style}>
+            {props.children}
+        </div>
+    );
+}

src/components/Heart.tsx

@@ -16,18 +16,22 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export function Heart() {
+import { classes } from "@utils/misc";
+import { SVGProps } from "react";
+
+export function Heart(props: SVGProps<SVGSVGElement>) {
     return (
         <svg
             aria-hidden="true"
-            height="16"
             viewBox="0 0 16 16"
+            height="16"
             width="16"
-            style={{ marginRight: "0.5em", transform: "translateY(2px)" }}
+            {...props}
+            className={classes("vc-heart-icon", props.className)}
         >
             <path
                 fill="#db61a2"
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"
             />
         </svg>

src/components/Icons.tsx

@@ -18,19 +18,16 @@
 
 import "./iconStyles.css";
 
+import { getIntlMessage } from "@utils/discord";
 import { classes } from "@utils/misc";
-import { i18n } from "@webpack/common";
-import type { PropsWithChildren, SVGProps } from "react";
+import type { JSX, PropsWithChildren } from "react";
 
 interface BaseIconProps extends IconProps {
     viewBox: string;
 }
 
-interface IconProps extends SVGProps<SVGSVGElement> {
-    className?: string;
-    height?: string | number;
-    width?: string | number;
-}
+type IconProps = JSX.IntrinsicElements["svg"];
+type ImageProps = JSX.IntrinsicElements["img"];
 
 function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
     return (
@@ -58,7 +55,7 @@ export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
             className={classes(className, "vc-link-icon")}
             viewBox="0 0 24 24"
         >
-            <g fill="none" fill-rule="evenodd">
+            <g fill="none" fillRule="evenodd">
                 <path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z" />
                 <rect width={width} height={height} />
             </g>
@@ -67,8 +64,7 @@ export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
 }
 
 /**
- * Discord's copy icon, as seen in the user popout right of the username when clicking
- * your own username in the bottom left user panel
+ * Discord's copy icon, as seen in the user panel popout on the right of the username and in large code blocks
  */
 export function CopyIcon(props: IconProps) {
     return (
@@ -78,8 +74,9 @@ export function CopyIcon(props: IconProps) {
             viewBox="0 0 24 24"
         >
             <g fill="currentColor">
-                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
-                <path d="M15 5H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" />
+                <path d="M3 16a1 1 0 0 1-1-1v-5a8 8 0 0 1 8-8h5a1 1 0 0 1 1 1v.5a.5.5 0 0 1-.5.5H10a6 6 0 0 0-6 6v5.5a.5.5 0 0 1-.5.5H3Z" />
+                <path d="M6 18a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-4h-3a5 5 0 0 1-5-5V6h-4a4 4 0 0 0-4 4v8Z" />
+                <path d="M21.73 12a3 3 0 0 0-.6-.88l-4.25-4.24a3 3 0 0 0-.88-.61V9a3 3 0 0 0 3 3h2.73Z" />
             </g>
         </Icon>
     );
@@ -125,8 +122,8 @@ export function InfoIcon(props: IconProps) {
         >
             <path
                 fill="currentColor"
-                transform="translate(2 2)"
-                d="M9,7 L11,7 L11,5 L9,5 L9,7 Z M10,18 C5.59,18 2,14.41 2,10 C2,5.59 5.59,2 10,2 C14.41,2 18,5.59 18,10 C18,14.41 14.41,18 10,18 L10,18 Z M10,4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16,4.4771525 0,10 C-1.33226763e-15,12.6521649 1.0535684,15.195704 2.92893219,17.0710678 C4.80429597,18.9464316 7.3478351,20 10,20 C12.6521649,20 15.195704,18.9464316 17.0710678,17.0710678 C18.9464316,15.195704 20,12.6521649 20,10 C20,7.3478351 18.9464316,4.80429597 17.0710678,2.92893219 C15.195704,1.0535684 12.6521649,2.22044605e-16 10,0 L10,4.4408921e-16 Z M9,15 L11,15 L11,9 L9,9 L9,15 L9,15 Z"
+                fillRule="evenodd"
+                d="M23 12a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-9.5-4.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-.77 3.96a1 1 0 1 0-1.96-.42l-1.04 4.86a2.77 2.77 0 0 0 4.31 2.83l.24-.17a1 1 0 1 0-1.16-1.62l-.24.17a.77.77 0 0 1-1.2-.79l1.05-4.86Z" clipRule="evenodd"
             />
         </Icon>
     );
@@ -135,7 +132,7 @@ export function InfoIcon(props: IconProps) {
 export function OwnerCrownIcon(props: IconProps) {
     return (
         <Icon
-            aria-label={i18n.Messages.GUILD_OWNER}
+            aria-label={getIntlMessage("GUILD_OWNER")}
             {...props}
             className={classes(props.className, "vc-owner-crown-icon")}
             role="img"
@@ -214,9 +211,10 @@ export function CogWheel(props: IconProps) {
             viewBox="0 0 24 24"
         >
             <path
-                clipRule="evenodd"
                 fill="currentColor"
-                d="M19.738 10H22V14H19.739C19.498 14.931 19.1 15.798 18.565 16.564L20 18L18 20L16.565 18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069 19.498 8.203 19.099 7.436 18.564L6 20L4 18L5.436 16.564C4.901 15.799 4.502 14.932 4.262 14H2V10H4.262C4.502 9.068 4.9 8.202 5.436 7.436L4 6L6 4L7.436 5.436C8.202 4.9 9.068 4.502 10 4.262V2H14V4.261C14.932 4.502 15.797 4.9 16.565 5.435L18 3.999L20 5.999L18.564 7.436C19.099 8.202 19.498 9.069 19.738 10ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
+                fillRule="evenodd"
+                d="M10.56 1.1c-.46.05-.7.53-.64.98.18 1.16-.19 2.2-.98 2.53-.8.33-1.79-.15-2.49-1.1-.27-.36-.78-.52-1.14-.24-.77.59-1.45 1.27-2.04 2.04-.28.36-.12.87.24 1.14.96.7 1.43 1.7 1.1 2.49-.33.8-1.37 1.16-2.53.98-.45-.07-.93.18-.99.64a11.1 11.1 0 0 0 0 2.88c.06.46.54.7.99.64 1.16-.18 2.2.19 2.53.98.33.8-.14 1.79-1.1 2.49-.36.27-.52.78-.24 1.14.59.77 1.27 1.45 2.04 2.04.36.28.87.12 1.14-.24.7-.95 1.7-1.43 2.49-1.1.8.33 1.16 1.37.98 2.53-.07.45.18.93.64.99a11.1 11.1 0 0 0 2.88 0c.46-.06.7-.54.64-.99-.18-1.16.19-2.2.98-2.53.8-.33 1.79.14 2.49 1.1.27.36.78.52 1.14.24.77-.59 1.45-1.27 2.04-2.04.28-.36.12-.87-.24-1.14-.96-.7-1.43-1.7-1.1-2.49.33-.8 1.37-1.16 2.53-.98.45.07.93-.18.99-.64a11.1 11.1 0 0 0 0-2.88c-.06-.46-.54-.7-.99-.64-1.16.18-2.2-.19-2.53-.98-.33-.8.14-1.79 1.1-2.49.36-.27.52-.78.24-1.14a11.07 11.07 0 0 0-2.04-2.04c-.36-.28-.87-.12-1.14.24-.7.96-1.7 1.43-2.49 1.1-.8-.33-1.16-1.37-.98-2.53.07-.45-.18-.93-.64-.99a11.1 11.1 0 0 0-2.88 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+                clipRule="evenodd"
             />
         </Icon>
     );
@@ -264,7 +262,7 @@ export function PlusIcon(props: IconProps) {
             viewBox="0 0 18 18"
         >
             <polygon
-                fill-rule="nonzero"
+                fillRule="nonzero"
                 fill="currentColor"
                 points="15 10 10 10 10 15 8 15 8 10 3 10 3 8 8 8 8 3 10 3 10 8 15 8"
             />
@@ -290,3 +288,149 @@ export function NoEntrySignIcon(props: IconProps) {
         </Icon>
     );
 }
+
+export function SafetyIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-safety-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.27 5.22A2.66 2.66 0 0 0 3 7.5v2.3c0 5.6 3.3 10.68 8.42 12.95.37.17.79.17 1.16 0A14.18 14.18 0 0 0 21 9.78V7.5c0-.93-.48-1.78-1.27-2.27l-6.17-3.76a3 3 0 0 0-3.12 0L4.27 5.22ZM6 7.68l6-3.66V12H6.22C6.08 11.28 6 10.54 6 9.78v-2.1Zm6 12.01V12h5.78A11.19 11.19 0 0 1 12 19.7Z"
+            />
+        </Icon>
+
+    );
+}
+
+export function NotesIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-notes-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                d="M8 3C7.44771 3 7 3.44772 7 4V5C7 5.55228 7.44772 6 8 6H16C16.5523 6 17 5.55228 17 5V4C17 3.44772 16.5523 3 16 3H15.1245C14.7288 3 14.3535 2.82424 14.1002 2.52025L13.3668 1.64018C13.0288 1.23454 12.528 1 12 1C11.472 1 10.9712 1.23454 10.6332 1.64018L9.8998 2.52025C9.64647 2.82424 9.27121 3 8.8755 3H8Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                fill="currentColor"
+                d="M19 4.49996V4.99996C19 6.65681 17.6569 7.99996 16 7.99996H8C6.34315 7.99996 5 6.65681 5 4.99996V4.49996C5 4.22382 4.77446 3.99559 4.50209 4.04109C3.08221 4.27826 2 5.51273 2 6.99996V19C2 20.6568 3.34315 22 5 22H19C20.6569 22 22 20.6568 22 19V6.99996C22 5.51273 20.9178 4.27826 19.4979 4.04109C19.2255 3.99559 19 4.22382 19 4.49996ZM8 12C7.44772 12 7 12.4477 7 13C7 13.5522 7.44772 14 8 14H16C16.5523 14 17 13.5522 17 13C17 12.4477 16.5523 12 16 12H8ZM7 17C7 16.4477 7.44772 16 8 16H13C13.5523 16 14 16.4477 14 17C14 17.5522 13.5523 18 13 18H8C7.44772 18 7 17.5522 7 17Z"
+            />
+        </Icon>
+    );
+}
+
+export function FolderIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-folder-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                d="M2 5a3 3 0 0 1 3-3h3.93a2 2 0 0 1 1.66.9L12 5h7a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5Z"
+            />
+        </Icon>
+    );
+}
+
+export function LogIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-log-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M3.11 8H6v10.82c0 .86.37 1.68 1 2.27.46.43 1.02.71 1.63.84A1 1 0 0 0 9 22h10a4 4 0 0 0 4-4v-1a2 2 0 0 0-2-2h-1V5a3 3 0 0 0-3-3H4.67c-.87 0-1.7.32-2.34.9-.63.6-1 1.42-1 2.28 0 .71.3 1.35.52 1.75a5.35 5.35 0 0 0 .48.7l.01.01h.01L3.11 7l-.76.65a1 1 0 0 0 .76.35Zm1.56-4c-.38 0-.72.14-.97.37-.24.23-.37.52-.37.81a1.69 1.69 0 0 0 .3.82H6v-.83c0-.29-.13-.58-.37-.8C5.4 4.14 5.04 4 4.67 4Zm5 13a3.58 3.58 0 0 1 0 3H19a2 2 0 0 0 2-2v-1H9.66ZM3.86 6.35ZM11 8a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Zm-1 5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z"
+            />
+        </Icon>
+    );
+}
+
+export function RestartIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-restart-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                d="M4 12a8 8 0 0 1 14.93-4H15a1 1 0 1 0 0 2h6a1 1 0 0 0 1-1V3a1 1 0 1 0-2 0v3a9.98 9.98 0 0 0-18 6 10 10 0 0 0 16.29 7.78 1 1 0 0 0-1.26-1.56A8 8 0 0 1 4 12Z"
+            />
+        </Icon>
+    );
+}
+
+export function PaintbrushIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-paintbrush-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M15.35 7.24C15.9 6.67 16 5.8 16 5a3 3 0 1 1 3 3c-.8 0-1.67.09-2.24.65a1.5 1.5 0 0 0 0 2.11l1.12 1.12a3 3 0 0 1 0 4.24l-5 5a3 3 0 0 1-4.25 0l-5.76-5.75a3 3 0 0 1 0-4.24l4.04-4.04.97-.97a3 3 0 0 1 4.24 0l1.12 1.12c.58.58 1.52.58 2.1 0ZM6.9 9.9 4.3 12.54a1 1 0 0 0 0 1.42l2.17 2.17.83-.84a1 1 0 0 1 1.42 1.42l-.84.83.59.59 1.83-1.84a1 1 0 0 1 1.42 1.42l-1.84 1.83.17.17a1 1 0 0 0 1.42 0l2.63-2.62L6.9 9.9Z"
+            />
+        </Icon>
+    );
+}
+
+export function PencilIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-pencil-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                d="m13.96 5.46 4.58 4.58a1 1 0 0 0 1.42 0l1.38-1.38a2 2 0 0 0 0-2.82l-3.18-3.18a2 2 0 0 0-2.82 0l-1.38 1.38a1 1 0 0 0 0 1.42ZM2.11 20.16l.73-4.22a3 3 0 0 1 .83-1.61l7.87-7.87a1 1 0 0 1 1.42 0l4.58 4.58a1 1 0 0 1 0 1.42l-7.87 7.87a3 3 0 0 1-1.6.83l-4.23.73a1.5 1.5 0 0 1-1.73-1.73Z"
+            />
+        </Icon>
+    );
+}
+
+export function GithubIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="-3 -3 30 30"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.745.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.998.108-.775.42-1.305.763-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.398 3-.403 1.02.005 2.043.137 3 .403 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.873.118 3.176.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.625-5.475 5.92.43.37.823 1.102.823 2.222v3.293c0 .32.218.694.825.577C20.565 21.797 24 17.298 24 12c0-6.63-5.37-12-12-12z"
+            />
+        </Icon>
+    );
+}
+
+export function WebsiteIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM4 12c0-.899.156-1.762.431-2.569L6 11l2 2v2l2 2 1 1v1.931C7.061 19.436 4 16.072 4 12zm14.33 4.873C17.677 16.347 16.687 16 16 16v-1a2 2 0 0 0-2-2h-4v-3a2 2 0 0 0 2-2V7h1a2 2 0 0 0 2-2v-.411C17.928 5.778 20 8.65 20 12a7.947 7.947 0 0 1-1.67 4.873z"
+            />
+        </Icon>
+    );
+}

src/components/PluginSettings/ContributorModal.tsx

@@ -44,7 +44,7 @@ function ContributorModal({ user }: { user: User; }) {
     useEffect(() => {
         if (!profile && !user.bot && user.id)
             fetchUserProfile(user.id);
-    }, [user.id]);
+    }, [user.id, user.bot, profile]);
 
     const githubName = profile?.connectedAccounts?.find(a => a.type === "github")?.name;
     const website = profile?.connectedAccounts?.find(a => a.type === "domain")?.name;

src/components/PluginSettings/LinkIconButton.tsx

@@ -9,19 +9,16 @@ import "./LinkIconButton.css";
 import { getTheme, Theme } from "@utils/discord";
 import { MaskedLink, Tooltip } from "@webpack/common";
 
-const WebsiteIconDark = "/assets/e1e96d89e192de1997f73730db26e94f.svg";
-const WebsiteIconLight = "/assets/730f58bcfd5a57a5e22460c445a0c6cf.svg";
-const GithubIconLight = "/assets/3ff98ad75ac94fa883af5ed62d17c459.svg";
-const GithubIconDark = "/assets/6a853b4c87fce386cbfef4a2efbacb09.svg";
+import { GithubIcon, WebsiteIcon } from "..";
 
-export function GithubIcon() {
-    const src = getTheme() === Theme.Light ? GithubIconLight : GithubIconDark;
-    return <img src={src} aria-hidden className={"vc-settings-modal-link-icon"} />;
+export function GithubLinkIcon() {
+    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
+    return <GithubIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
 }
 
-export function WebsiteIcon() {
-    const src = getTheme() === Theme.Light ? WebsiteIconLight : WebsiteIconDark;
-    return <img src={src} aria-hidden className={"vc-settings-modal-link-icon"} />;
+export function WebsiteLinkIcon() {
+    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
+    return <WebsiteIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
 }
 
 interface Props {
@@ -41,5 +38,5 @@ function LinkIcon({ text, href, Icon }: Props & { Icon: React.ComponentType; })
     );
 }
 
-export const WebsiteButton = (props: Props) => <LinkIcon {...props} Icon={WebsiteIcon} />;
-export const GithubButton = (props: Props) => <LinkIcon {...props} Icon={GithubIcon} />;
+export const WebsiteButton = (props: Props) => <LinkIcon {...props} Icon={WebsiteLinkIcon} />;
+export const GithubButton = (props: Props) => <LinkIcon {...props} Icon={GithubLinkIcon} />;

src/components/PluginSettings/PluginModal.tsx

@@ -27,7 +27,7 @@ import { gitRemote } from "@shared/vencordUserAgent";
 import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { OptionType, Plugin } from "@utils/types";
 import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
 import { Button, Clickable, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "@webpack/common";
@@ -37,6 +37,7 @@ import { Constructor } from "type-fest";
 import { PluginMeta } from "~plugins";
 
 import {
+    ISettingCustomElementProps,
     ISettingElementProps,
     SettingBooleanComponent,
     SettingCustomComponent,
@@ -74,14 +75,15 @@ function makeDummyUser(user: { username: string; id?: string; avatar?: string; }
     return newUser;
 }
 
-const Components: Record<OptionType, React.ComponentType<ISettingElementProps<any>>> = {
+const Components: Record<OptionType, React.ComponentType<ISettingElementProps<any> | ISettingCustomElementProps<any>>> = {
     [OptionType.STRING]: SettingTextComponent,
     [OptionType.NUMBER]: SettingNumericComponent,
     [OptionType.BIGINT]: SettingNumericComponent,
     [OptionType.BOOLEAN]: SettingBooleanComponent,
     [OptionType.SELECT]: SettingSelectComponent,
     [OptionType.SLIDER]: SettingSliderComponent,
-    [OptionType.COMPONENT]: SettingCustomComponent
+    [OptionType.COMPONENT]: SettingCustomComponent,
+    [OptionType.CUSTOM]: () => null,
 };
 
 export default function PluginModal({ plugin, onRestartNeeded, onClose, transitionState }: PluginModalProps) {
@@ -109,7 +111,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 setAuthors(a => [...a, author]);
             }
         })();
-    }, []);
+    }, [plugin.authors]);
 
     async function saveAndClose() {
         if (!plugin.options) {
@@ -129,7 +131,8 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
         for (const [key, value] of Object.entries(tempSettings)) {
             const option = plugin.options[key];
             pluginSettings[key] = value;
-            option?.onChange?.(value);
+
+            if (option.type === OptionType.CUSTOM) continue;
             if (option?.restartNeeded) restartNeeded = true;
         }
         if (restartNeeded) onRestartNeeded();
@@ -141,7 +144,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
             return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
         } else {
             const options = Object.entries(plugin.options).map(([key, setting]) => {
-                if (setting.hidden) return null;
+                if (setting.type === OptionType.CUSTOM || setting.hidden) return null;
 
                 function onChange(newValue: any) {
                     setTempSettings(s => ({ ...s, [key]: newValue }));
@@ -310,3 +313,13 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
         </ModalRoot>
     );
 }
+
+export function openPluginModal(plugin: Plugin, onRestartNeeded?: (pluginName: string) => void) {
+    openModal(modalProps => (
+        <PluginModal
+            {...modalProps}
+            plugin={plugin}
+            onRestartNeeded={() => onRestartNeeded?.(plugin.name)}
+        />
+    ));
+}

src/components/PluginSettings/components/SettingCustomComponent.tsx

@@ -18,8 +18,8 @@
 
 import { PluginOptionComponent } from "@utils/types";
 
-import { ISettingElementProps } from ".";
+import { ISettingCustomElementProps } from ".";
 
-export function SettingCustomComponent({ option, onChange, onError }: ISettingElementProps<PluginOptionComponent>) {
+export function SettingCustomComponent({ option, onChange, onError }: ISettingCustomElementProps<PluginOptionComponent>) {
     return option.component({ setValue: onChange, setError: onError, option });
 }

src/components/PluginSettings/components/SettingNumericComponent.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { OptionType, PluginOptionNumber } from "@utils/types";
 import { Forms, React, TextInput } from "@webpack/common";
 
@@ -54,7 +56,8 @@ export function SettingNumericComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="number"
                 pattern="-?[0-9]+"

src/components/PluginSettings/components/SettingSelectComponent.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionSelect } from "@utils/types";
 import { Forms, React, Select } from "@webpack/common";
 
@@ -44,7 +46,8 @@ export function SettingSelectComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom16} type="description">{option.description}</Forms.FormText>
             <Select
                 isDisabled={option.disabled?.call(definedSettings) ?? false}
                 options={option.options}

src/components/PluginSettings/components/SettingSliderComponent.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionSlider } from "@utils/types";
 import { Forms, React, Slider } from "@webpack/common";
 
@@ -50,7 +52,8 @@ export function SettingSliderComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <Slider
                 disabled={option.disabled?.call(definedSettings) ?? false}
                 markers={option.markers}

src/components/PluginSettings/components/SettingTextComponent.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Margins } from "@utils/margins";
+import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionString } from "@utils/types";
 import { Forms, React, TextInput } from "@webpack/common";
 
@@ -41,7 +43,8 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="text"
                 value={state}

src/components/PluginSettings/components/index.ts

@@ -18,7 +18,7 @@
 
 import { DefinedSettings, PluginOptionBase } from "@utils/types";
 
-export interface ISettingElementProps<T extends PluginOptionBase> {
+interface ISettingElementPropsBase<T> {
     option: T;
     onChange(newValue: any): void;
     pluginSettings: {
@@ -30,6 +30,9 @@ export interface ISettingElementProps<T extends PluginOptionBase> {
     definedSettings?: DefinedSettings;
 }
 
+export type ISettingElementProps<T extends PluginOptionBase> = ISettingElementPropsBase<T>;
+export type ISettingCustomElementProps<T extends Omit<PluginOptionBase, "description" | "placeholder">> = ISettingElementPropsBase<T>;
+
 export * from "../../Badge";
 export * from "./SettingBooleanComponent";
 export * from "./SettingCustomComponent";

src/components/PluginSettings/index.tsx

@@ -23,7 +23,7 @@ import { showNotice } from "@api/Notices";
 import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { CogWheel, InfoIcon } from "@components/Icons";
-import PluginModal from "@components/PluginSettings/PluginModal";
+import { openPluginModal } from "@components/PluginSettings/PluginModal";
 import { AddonCard } from "@components/VencordSettings/AddonCard";
 import { SettingsTab } from "@components/VencordSettings/shared";
 import { ChangeList } from "@utils/ChangeList";
@@ -31,11 +31,11 @@ import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
-import { openModalLazy } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { Plugin } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip, useMemo } from "@webpack/common";
+import { JSX } from "react";
 
 import Plugins, { ExcludedPlugins } from "~plugins";
 
@@ -45,7 +45,7 @@ const { startDependenciesRecursive, startPlugin, stopPlugin } = proxyLazy(() =>
 const cl = classNameFactory("vc-plugins-");
 const logger = new Logger("PluginSettings", "#a6d189");
 
-const InputStyles = findByPropsLazy("inputDefault", "inputWrapper");
+const InputStyles = findByPropsLazy("inputWrapper", "inputDefault", "error");
 const ButtonClasses = findByPropsLazy("button", "disabled", "enabled");
 
 
@@ -69,7 +69,7 @@ function ReloadRequiredCard({ required }: { required: boolean; }) {
                     <Forms.FormText className={cl("dep-text")}>
                         Restart now to apply new plugins and their settings
                     </Forms.FormText>
-                    <Button onClick={() => location.reload()}>
+                    <Button onClick={() => location.reload()} className={cl("restart-button")}>
                         Restart
                     </Button>
                 </>
@@ -94,15 +94,7 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
 export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
     const settings = Settings.plugins[plugin.name];
 
-    const isEnabled = () => settings.enabled ?? false;
-
-    function openModal() {
-        openModalLazy(async () => {
-            return modalProps => {
-                return <PluginModal {...modalProps} plugin={plugin} onRestartNeeded={() => onRestartNeeded(plugin.name)} />;
-            };
-        });
-    }
+    const isEnabled = () => Vencord.Plugins.isPluginEnabled(plugin.name);
 
     function toggleEnabled() {
         const wasEnabled = isEnabled();
@@ -160,10 +152,14 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on
             onMouseEnter={onMouseEnter}
             onMouseLeave={onMouseLeave}
             infoButton={
-                <button role="switch" onClick={() => openModal()} className={classes(ButtonClasses.button, cl("info-button"))}>
+                <button
+                    role="switch"
+                    onClick={() => openPluginModal(plugin, onRestartNeeded)}
+                    className={classes(ButtonClasses.button, cl("info-button"))}
+                >
                     {plugin.options && !isObjectEmpty(plugin.options)
-                        ? <CogWheel />
-                        : <InfoIcon />}
+                        ? <CogWheel className={cl("info-icon")} />
+                        : <InfoIcon className={cl("info-icon")} />}
                 </button>
             }
         />
@@ -297,10 +293,10 @@ export default function PluginSettings() {
 
         if (!pluginFilter(p)) continue;
 
-        const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
+        const isRequired = p.required || p.isDependency || depMap[p.name]?.some(d => settings.plugins[d].enabled);
 
         if (isRequired) {
-            const tooltipText = p.required
+            const tooltipText = p.required || !depMap[p.name]
                 ? "This plugin is required for Vencord to function."
                 : makeDependencyList(depMap[p.name]?.filter(d => settings.plugins[d].enabled));
 
@@ -339,8 +335,8 @@ export default function PluginSettings() {
                 Filters
             </Forms.FormTitle>
 
-            <div className={cl("filter-controls")}>
-                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.bottom20} />
+            <div className={classes(Margins.bottom20, cl("filter-controls"))}>
+                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} />
                 <div className={InputStyles.inputWrapper}>
                     <Select
                         options={[
@@ -353,6 +349,7 @@ export default function PluginSettings() {
                         select={onStatusChange}
                         isSelected={v => v === searchValue.status}
                         closeOnSelect={true}
+                        className={InputStyles.inputDefault}
                     />
                 </div>
             </div>
@@ -391,7 +388,7 @@ function makeDependencyList(deps: string[]) {
     return (
         <React.Fragment>
             <Forms.FormText>This plugin is required by:</Forms.FormText>
-            {deps.map((dep: string) => <Forms.FormText className={cl("dep-text")}>{dep}</Forms.FormText>)}
+            {deps.map((dep: string) => <Forms.FormText key={dep} className={cl("dep-text")}>{dep}</Forms.FormText>)}
         </React.Fragment>
     );
 }

src/components/PluginSettings/styles.css

@@ -63,10 +63,7 @@
     height: 8em;
     display: flex;
     flex-direction: column;
-}
-
-.vc-plugins-info-card div {
-    line-height: 32px;
+    gap: 0.25em;
 }
 
 .vc-plugins-restart-card {
@@ -76,11 +73,11 @@
     color: var(--info-warning-text);
 }
 
-.vc-plugins-restart-card button {
+.vc-plugins-restart-button {
     margin-top: 0.5em;
     background: var(--info-warning-foreground) !important;
 }
 
-.vc-plugins-info-button svg:not(:hover, :focus) {
+.vc-plugins-info-icon:not(:hover, :focus) {
     color: var(--text-muted);
 }

src/components/VencordSettings/CloudTab.tsx

@@ -19,6 +19,7 @@
 import { showNotification } from "@api/Notifications";
 import { Settings, useSettings } from "@api/Settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
+import { Grid } from "@components/Grid";
 import { Link } from "@components/Link";
 import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
 import { Margins } from "@utils/margins";
@@ -85,7 +86,9 @@ function SettingsSyncSection() {
                     size={Button.Sizes.SMALL}
                     disabled={!sectionEnabled}
                     onClick={() => putCloudSettings(true)}
-                >Sync to Cloud</Button>
+                >
+                    Sync to Cloud
+                </Button>
                 <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
                     {({ onMouseLeave, onMouseEnter }) => (
                         <Button
@@ -95,7 +98,9 @@ function SettingsSyncSection() {
                             color={Button.Colors.RED}
                             disabled={!sectionEnabled}
                             onClick={() => getCloudSettings(true, true)}
-                        >Sync from Cloud</Button>
+                        >
+                            Sync from Cloud
+                        </Button>
                     )}
                 </Tooltip>
                 <Button
@@ -103,7 +108,9 @@ function SettingsSyncSection() {
                     color={Button.Colors.RED}
                     disabled={!sectionEnabled}
                     onClick={() => deleteCloudSettings()}
-                >Delete Cloud Settings</Button>
+                >
+                    Delete Cloud Settings
+                </Button>
             </div>
         </Forms.FormSection>
     );
@@ -124,7 +131,12 @@ function CloudTab() {
                 <Switch
                     key="backend"
                     value={settings.cloud.authenticated}
-                    onChange={v => { v && authorizeCloud(); if (!v) settings.cloud.authenticated = v; }}
+                    onChange={v => {
+                        if (v)
+                            authorizeCloud();
+                        else
+                            settings.cloud.authenticated = v;
+                    }}
                     note="This will request authorization if you have not yet set up cloud integrations."
                 >
                     Enable Cloud Integrations
@@ -136,23 +148,43 @@ function CloudTab() {
                 <CheckedTextInput
                     key="backendUrl"
                     value={settings.cloud.url}
-                    onChange={v => { settings.cloud.url = v; settings.cloud.authenticated = false; deauthorizeCloud(); }}
+                    onChange={async 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>
+
+                <Grid columns={2} gap="1em" className={Margins.top8}>
+                    <Button
+                        size={Button.Sizes.MEDIUM}
+                        disabled={!settings.cloud.authenticated}
+                        onClick={async () => {
+                            await deauthorizeCloud();
+                            settings.cloud.authenticated = false;
+                            await authorizeCloud();
+                        }}
+                    >
+                        Reauthorise
+                    </Button>
+                    <Button
+                        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>
+                </Grid>
+
                 <Forms.FormDivider className={Margins.top16} />
             </Forms.FormSection >
             <SettingsSyncSection />

src/components/VencordSettings/NotificationSettings.tsx

@@ -0,0 +1,106 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { useSettings } from "@api/Settings";
+import { Margins } from "@utils/margins";
+import { identity } from "@utils/misc";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { Forms, Select, Slider, Text } from "@webpack/common";
+
+import { ErrorCard } from "..";
+
+export function NotificationSettings() {
+    const settings = useSettings().notifications;
+
+    return (
+        <div style={{ padding: "1em 0" }}>
+            <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
+            {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>
+                </ErrorCard>
+            )}
+            <Forms.FormText className={Margins.bottom8}>
+                Some plugins may show you notifications. These come in two styles:
+                <ul>
+                    <li><strong>Vencord Notifications</strong>: These are in-app notifications</li>
+                    <li><strong>Desktop Notifications</strong>: Native Desktop notifications (like when you get a ping)</li>
+                </ul>
+            </Forms.FormText>
+            <Select
+                placeholder="Notification Style"
+                options={[
+                    { label: "Only use Desktop notifications when Discord is not focused", value: "not-focused", default: true },
+                    { label: "Always use Desktop notifications", value: "always" },
+                    { label: "Always use Vencord notifications", value: "never" },
+                ] satisfies Array<{ value: typeof settings["useNative"]; } & Record<string, any>>}
+                closeOnSelect={true}
+                select={v => settings.useNative = v}
+                isSelected={v => v === settings.useNative}
+                serialize={identity}
+            />
+
+            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
+            <Select
+                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["position"]; } & Record<string, any>>}
+                select={v => settings.position = v}
+                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={settings.useNative === "always"}
+                markers={[0, 1000, 2500, 5000, 10_000, 20_000]}
+                minValue={0}
+                maxValue={20_000}
+                initialValue={settings.timeout}
+                onValueChange={v => settings.timeout = v}
+                onValueRender={v => (v / 1000).toFixed(2) + "s"}
+                onMarkerRender={v => (v / 1000) + "s"}
+                stickToMarkers={false}
+            />
+
+            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Log Limit</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom16}>
+                The amount of notifications to save in the log until old ones are removed.
+                Set to <code>0</code> to disable Notification log and <code>∞</code> to never automatically remove old Notifications
+            </Forms.FormText>
+            <Slider
+                markers={[0, 25, 50, 75, 100, 200]}
+                minValue={0}
+                maxValue={200}
+                stickToMarkers={true}
+                initialValue={settings.logLimit}
+                onValueChange={v => settings.logLimit = v}
+                onValueRender={v => v === 200 ? "∞" : v}
+                onMarkerRender={v => v === 200 ? "∞" : v}
+            />
+        </div>
+    );
+}
+
+export function openNotificationSettingsModal() {
+    openModal(props => (
+        <ModalRoot {...props} size={ModalSize.MEDIUM}>
+            <ModalHeader>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>Notification Settings</Text>
+                <ModalCloseButton onClick={props.onClose} />
+            </ModalHeader>
+
+            <ModalContent>
+                <NotificationSettings />
+            </ModalContent>
+        </ModalRoot>
+    ));
+}

src/components/VencordSettings/PatchHelperTab.tsx

@@ -111,9 +111,9 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
     }
 
     function renderDiff() {
-        return diff?.map(p => {
+        return diff?.map((p, idx) => {
             const color = p.added ? "lime" : p.removed ? "red" : "grey";
-            return <div style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>;
+            return <div key={idx} style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>;
         });
     }
 
@@ -247,7 +247,7 @@ function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacement }: Fu
         }
 
         try {
-            const parsed = (0, eval)(`(${fullPatch})`) as Patch;
+            const parsed = (0, eval)(`([${fullPatch}][0])`) as Patch;
 
             if (!parsed.find) throw new Error("No 'find' field");
             if (!parsed.replacement) throw new Error("No 'replacement' field");
@@ -382,6 +382,7 @@ function PatchHelper() {
                     <Forms.FormTitle className={Margins.top20}>Code</Forms.FormTitle>
                     <CodeBlock lang="js" content={code} />
                     <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
+                    <Button className={Margins.top8} onClick={() => Clipboard.copy("```ts\n" + code + "\n```")}>Copy as Codeblock</Button>
                 </>
             )}
         </SettingsTab>

src/components/VencordSettings/SpecialCard.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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 "./specialCard.css";
+
+import { classNameFactory } from "@api/Styles";
+import { Card, Clickable, Forms, React } from "@webpack/common";
+import type { PropsWithChildren } from "react";
+
+const cl = classNameFactory("vc-special-");
+
+interface StyledCardProps {
+    title: string;
+    subtitle?: string;
+    description: string;
+    cardImage?: string;
+    backgroundImage?: string;
+    backgroundColor?: string;
+    buttonTitle?: string;
+    buttonOnClick?: () => void;
+}
+
+export function SpecialCard({ title, subtitle, description, cardImage, backgroundImage, backgroundColor, buttonTitle, buttonOnClick: onClick, children }: PropsWithChildren<StyledCardProps>) {
+    const cardStyle: React.CSSProperties = {
+        backgroundColor: backgroundColor || "#9c85ef",
+        backgroundImage: `url(${backgroundImage || ""})`,
+    };
+
+    return (
+        <Card className={cl("card", "card-special")} style={cardStyle}>
+            <div className={cl("card-flex")}>
+                <div className={cl("card-flex-main")}>
+                    <Forms.FormTitle className={cl("title")} tag="h5">{title}</Forms.FormTitle>
+                    <Forms.FormText className={cl("subtitle")}>{subtitle}</Forms.FormText>
+                    <Forms.FormText className={cl("text")}>{description}</Forms.FormText>
+
+                    {children}
+                </div>
+                {cardImage && (
+                    <div className={cl("image-container")}>
+                        <img
+                            role="presentation"
+                            src={cardImage}
+                            alt=""
+                            className={cl("image")}
+                        />
+                    </div>
+                )}
+            </div>
+            {buttonTitle && (
+                <>
+                    <Forms.FormDivider className={cl("seperator")} />
+                    <Clickable onClick={onClick} className={cl("hyperlink")}>
+                        <Forms.FormText className={cl("hyperlink-text")}>
+                            {buttonTitle}
+                        </Forms.FormText>
+                    </Clickable>
+                </>
+            )}
+        </Card>
+    );
+}

src/components/VencordSettings/ThemesTab.tsx

@@ -16,22 +16,25 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { useSettings } from "@api/Settings";
+import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
-import { DeleteIcon } from "@components/Icons";
+import { DeleteIcon, FolderIcon, PaintbrushIcon, PencilIcon, PlusIcon, RestartIcon } from "@components/Icons";
 import { Link } from "@components/Link";
-import PluginModal from "@components/PluginSettings/PluginModal";
-import { getThemeInfo, type UserThemeHeader } from "@main/themes";
+import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import type { UserThemeHeader } from "@main/themes";
 import { openInviteModal } from "@utils/discord";
-import { openModal } from "@utils/modal";
+import { Margins } from "@utils/margins";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { findByPropsLazy, findLazy } from "@webpack";
-import { Button, Card, Forms, React, showToast, TabBar, TextInput, useEffect, useRef, useState } from "@webpack/common";
+import { findLazy } from "@webpack";
+import { Card, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
 import type { ComponentType, Ref, SyntheticEvent } from "react";
 
+import Plugins from "~plugins";
+
 import { AddonCard } from "./AddonCard";
+import { QuickAction, QuickActionCard } from "./quickActions";
 import { SettingsTab, wrapTab } from "./shared";
 
 type FileInput = ComponentType<{
@@ -41,22 +44,17 @@ type FileInput = ComponentType<{
     filters?: { name?: string; extensions: string[]; }[];
 }>;
 
-const InviteActions = findByPropsLazy("resolveInvite");
 const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue && m.prototype.setRef);
-const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
 const cl = classNameFactory("vc-settings-theme-");
 
-function Validator({ link, onValidate }: { link: string; onValidate: (valid: boolean) => void; }) {
+function Validator({ link }: { link: string; }) {
     const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
         if (res.status > 300) throw `${res.status} ${res.statusText}`;
         const contentType = res.headers.get("Content-Type");
-        if (!contentType?.startsWith("text/css") && !contentType?.startsWith("text/plain")) {
-            onValidate(false);
+        if (!contentType?.startsWith("text/css") && !contentType?.startsWith("text/plain"))
             throw "Not a CSS file. Remember to use the raw link!";
-        }
 
-        onValidate(true);
         return "Okay!";
     }));
 
@@ -71,15 +69,49 @@ function Validator({ link, onValidate }: { link: string; onValidate: (valid: boo
     }}>{text}</Forms.FormText>;
 }
 
+function Validators({ themeLinks }: { themeLinks: string[]; }) {
+    if (!themeLinks.length) return null;
+
+    return (
+        <>
+            <Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
+            <Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
+            <div>
+                {themeLinks.map(rawLink => {
+                    const { label, link } = (() => {
+                        const match = /^@(light|dark) (.*)/.exec(rawLink);
+                        if (!match) return { label: rawLink, link: rawLink };
+
+                        const [, mode, link] = match;
+                        return { label: `[${mode} mode only] ${link}`, link };
+                    })();
+
+                    return <Card style={{
+                        padding: ".5em",
+                        marginBottom: ".5em",
+                        marginTop: ".5em"
+                    }} key={link}>
+                        <Forms.FormTitle tag="h5" style={{
+                            overflowWrap: "break-word"
+                        }}>
+                            {label}
+                        </Forms.FormTitle>
+                        <Validator link={link} />
+                    </Card>;
+                })}
+            </div>
+        </>
+    );
+}
+
 interface ThemeCardProps {
     theme: UserThemeHeader;
     enabled: boolean;
     onChange: (enabled: boolean) => void;
     onDelete: () => void;
-    showDeleteButton?: boolean;
 }
 
-function ThemeCard({ theme, enabled, onChange, onDelete, showDeleteButton }: ThemeCardProps) {
+function ThemeCard({ theme, enabled, onChange, onDelete }: ThemeCardProps) {
     return (
         <AddonCard
             name={theme.name}
@@ -88,7 +120,7 @@ function ThemeCard({ theme, enabled, onChange, onDelete, showDeleteButton }: The
             enabled={enabled}
             setEnabled={onChange}
             infoButton={
-                (IS_WEB || showDeleteButton) && (
+                IS_WEB && (
                     <div style={{ cursor: "pointer", color: "var(--status-danger" }} onClick={onDelete}>
                         <DeleteIcon />
                     </div>
@@ -121,19 +153,16 @@ enum ThemeTab {
 }
 
 function ThemesTab() {
-    const settings = useSettings(["themeLinks", "enabledThemeLinks", "enabledThemes"]);
+    const settings = useSettings(["themeLinks", "enabledThemes"]);
 
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [currentTab, setCurrentTab] = useState(ThemeTab.LOCAL);
-    const [currentThemeLink, setCurrentThemeLink] = useState("");
-    const [themeLinkValid, setThemeLinkValid] = useState(false);
+    const [themeText, setThemeText] = useState(settings.themeLinks.join("\n"));
     const [userThemes, setUserThemes] = useState<UserThemeHeader[] | null>(null);
-    const [onlineThemes, setOnlineThemes] = useState<(UserThemeHeader & { link: string; })[] | null>(null);
     const [themeDir, , themeDirPending] = useAwaiter(VencordNative.themes.getThemesDir);
 
     useEffect(() => {
         refreshLocalThemes();
-        refreshOnlineThemes();
     }, []);
 
     async function refreshLocalThemes() {
@@ -176,7 +205,7 @@ function ThemesTab() {
         refreshLocalThemes();
     }
 
-    function LocalThemes() {
+    function renderLocalThemes() {
         return (
             <>
                 <Card className="vc-settings-card">
@@ -191,60 +220,52 @@ function ThemesTab() {
                 </Card>
 
                 <Forms.FormSection title="Local Themes">
-                    <Card className="vc-settings-quick-actions-card">
+                    <QuickActionCard>
                         <>
                             {IS_WEB ?
                                 (
-                                    <Button
-                                        size={Button.Sizes.SMALL}
-                                        disabled={themeDirPending}
-                                    >
-                                        Upload Theme
-                                        <FileInput
-                                            ref={fileInputRef}
-                                            onChange={onFileUpload}
-                                            multiple={true}
-                                            filters={[{ extensions: ["css"] }]}
-                                        />
-                                    </Button>
+                                    <QuickAction
+                                        text={
+                                            <span style={{ position: "relative" }}>
+                                                Upload Theme
+                                                <FileInput
+                                                    ref={fileInputRef}
+                                                    onChange={onFileUpload}
+                                                    multiple={true}
+                                                    filters={[{ extensions: ["css"] }]}
+                                                />
+                                            </span>
+                                        }
+                                        Icon={PlusIcon}
+                                    />
                                 ) : (
-                                    <Button
-                                        onClick={() => showItemInFolder(themeDir!)}
-                                        size={Button.Sizes.SMALL}
+                                    <QuickAction
+                                        text="Open Themes Folder"
+                                        action={() => showItemInFolder(themeDir!)}
                                         disabled={themeDirPending}
-                                    >
-                                        Open Themes Folder
-                                    </Button>
+                                        Icon={FolderIcon}
+                                    />
                                 )}
-                            <Button
-                                onClick={refreshLocalThemes}
-                                size={Button.Sizes.SMALL}
-                            >
-                                Load missing Themes
-                            </Button>
-                            <Button
-                                onClick={() => VencordNative.quickCss.openEditor()}
-                                size={Button.Sizes.SMALL}
-                            >
-                                Edit QuickCSS
-                            </Button>
+                            <QuickAction
+                                text="Load missing Themes"
+                                action={refreshLocalThemes}
+                                Icon={RestartIcon}
+                            />
+                            <QuickAction
+                                text="Edit QuickCSS"
+                                action={() => VencordNative.quickCss.openEditor()}
+                                Icon={PaintbrushIcon}
+                            />
 
-                            {Vencord.Settings.plugins.ClientTheme.enabled && (
-                                <Button
-                                    onClick={() => openModal(modalProps => (
-                                        <PluginModal
-                                            {...modalProps}
-                                            plugin={Vencord.Plugins.plugins.ClientTheme}
-                                            onRestartNeeded={() => { }}
-                                        />
-                                    ))}
-                                    size={Button.Sizes.SMALL}
-                                >
-                                    Edit ClientTheme
-                                </Button>
+                            {Settings.plugins.ClientTheme.enabled && (
+                                <QuickAction
+                                    text="Edit ClientTheme"
+                                    action={() => openPluginModal(Plugins.ClientTheme)}
+                                    Icon={PencilIcon}
+                                />
                             )}
                         </>
-                    </Card>
+                    </QuickActionCard>
 
                     <div className={cl("grid")}>
                         {userThemes?.map(theme => (
@@ -266,63 +287,38 @@ function ThemesTab() {
         );
     }
 
-    function addThemeLink(link: string) {
-        if (!themeLinkValid) return;
-        if (settings.themeLinks.includes(link)) return;
-
-        settings.themeLinks = [...settings.themeLinks, link];
-        setCurrentThemeLink("");
-        refreshOnlineThemes();
+    // When the user leaves the online theme textbox, update the settings
+    function onBlur() {
+        settings.themeLinks = [...new Set(
+            themeText
+                .trim()
+                .split(/\n+/)
+                .map(s => s.trim())
+                .filter(Boolean)
+        )];
     }
 
-    async function refreshOnlineThemes() {
-        const themes = await Promise.all(settings.themeLinks.map(async link => {
-            const css = await fetch(link).then(res => res.text());
-            return { ...getThemeInfo(css, link), link };
-        }));
-        setOnlineThemes(themes);
-    }
-
-    function onThemeLinkEnabledChange(link: string, enabled: boolean) {
-        if (enabled) {
-            if (settings.enabledThemeLinks.includes(link)) return;
-            settings.enabledThemeLinks = [...settings.enabledThemeLinks, link];
-        } else {
-            settings.enabledThemeLinks = settings.enabledThemeLinks.filter(f => f !== link);
-        }
-    }
-
-    function deleteThemeLink(link: string) {
-        settings.themeLinks = settings.themeLinks.filter(f => f !== link);
-
-        refreshOnlineThemes();
-    }
-
-    function OnlineThemes() {
+    function renderOnlineThemes() {
         return (
             <>
-                <Forms.FormSection title="Online Themes" tag="h5">
-                    <Card className="vc-settings-theme-add-card">
-                        <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
-                        <Flex flexDirection="row">
-                            <TextInput placeholder="Theme Link" className="vc-settings-theme-link-input" value={currentThemeLink} onChange={setCurrentThemeLink} />
-                            <Button onClick={() => addThemeLink(currentThemeLink)} disabled={!themeLinkValid}>Add</Button>
-                        </Flex>
-                        {currentThemeLink && <Validator link={currentThemeLink} onValidate={setThemeLinkValid} />}
-                    </Card>
+                <Card className="vc-settings-card vc-text-selectable">
+                    <Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
+                    <Forms.FormText>One link per line</Forms.FormText>
+                    <Forms.FormText>You can prefix lines with @light or @dark to toggle them based on your Discord theme</Forms.FormText>
+                    <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
+                </Card>
 
-                    <div className={cl("grid")}>
-                        {onlineThemes?.map(theme => {
-                            return <ThemeCard
-                                key={theme.fileName}
-                                enabled={settings.enabledThemeLinks.includes(theme.link)}
-                                onChange={enabled => onThemeLinkEnabledChange(theme.link, enabled)}
-                                onDelete={() => deleteThemeLink(theme.link)}
-                                showDeleteButton
-                                theme={theme}
-                            />;
-                        })}
-                    </div>
+                <Forms.FormSection title="Online Themes" tag="h5">
+                    <TextArea
+                        value={themeText}
+                        onChange={setThemeText}
+                        className={"vc-settings-theme-links"}
+                        placeholder="Theme Links"
+                        spellCheck={false}
+                        onBlur={onBlur}
+                        rows={10}
+                    />
+                    <Validators themeLinks={settings.themeLinks} />
                 </Forms.FormSection>
             </>
         );
@@ -351,8 +347,8 @@ function ThemesTab() {
                 </TabBar.Item>
             </TabBar>
 
-            {currentTab === ThemeTab.LOCAL && <LocalThemes />}
-            {currentTab === ThemeTab.ONLINE && <OnlineThemes />}
+            {currentTab === ThemeTab.LOCAL && renderLocalThemes()}
+            {currentTab === ThemeTab.ONLINE && renderOnlineThemes()}
         </SettingsTab>
     );
 }

src/components/VencordSettings/UpdaterTab.tsx

@@ -61,7 +61,7 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
                 title: "Oops!",
                 body: (
                     <ErrorCard>
-                        {err.split("\n").map(line => <div>{Parser.parse(line)}</div>)}
+                        {err.split("\n").map((line, idx) => <div key={idx}>{Parser.parse(line)}</div>)}
                     </ErrorCard>
                 )
             });
@@ -87,7 +87,7 @@ function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof
     return (
         <Card style={{ padding: "0 0.5em" }}>
             {updates.map(({ hash, author, message }) => (
-                <div style={{
+                <div key={hash} style={{
                     marginTop: "0.5em",
                     marginBottom: "0.5em"
                 }}>

src/components/VencordSettings/VencordTab.tsx

@@ -17,23 +17,37 @@
 */
 
 import { openNotificationLogModal } from "@api/Notifications/notificationLog";
-import { Settings, useSettings } from "@api/Settings";
+import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
-import { ErrorCard } from "@components/ErrorCard";
+import { openContributorModal } from "@components/PluginSettings/ContributorModal";
+import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import { gitRemote } from "@shared/vencordUserAgent";
+import { DONOR_ROLE_ID, VENCORD_GUILD_ID } from "@utils/constants";
 import { Margins } from "@utils/margins";
-import { identity } from "@utils/misc";
+import { identity, isPluginDev } from "@utils/misc";
 import { relaunch, showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
+import { Button, Forms, GuildMemberStore, React, Select, Switch, UserStore } from "@webpack/common";
 
+import BadgeAPI from "../../plugins/_api/badges";
+import { Flex, FolderIcon, GithubIcon, LogIcon, PaintbrushIcon, RestartIcon } from "..";
+import { openNotificationSettingsModal } from "./NotificationSettings";
+import { QuickAction, QuickActionCard } from "./quickActions";
 import { SettingsTab, wrapTab } from "./shared";
+import { SpecialCard } from "./SpecialCard";
 
 const cl = classNameFactory("vc-settings-");
 
 const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
 const SHIGGY_DONATE_IMAGE = "https://media.discordapp.net/stickers/1039992459209490513.png";
 
+const VENNIE_DONATOR_IMAGE = "https://cdn.discordapp.com/emojis/1238120638020063377.png";
+const COZY_CONTRIB_IMAGE = "https://cdn.discordapp.com/emojis/1026533070955872337.png";
+
+const DONOR_BACKGROUND_IMAGE = "https://media.discordapp.net/stickers/1311070116305436712.png?size=2048";
+const CONTRIB_BACKGROUND_IMAGE = "https://media.discordapp.net/stickers/1311070166481895484.png?size=2048";
+
 type KeysOfType<Object, Type> = {
     [K in keyof Object]: Object[K] extends Type ? K : never;
 }[keyof Object];
@@ -50,6 +64,8 @@ function VencordSettings() {
     const isMac = navigator.platform.toLowerCase().startsWith("mac");
     const needsVibrancySettings = IS_DISCORD_DESKTOP && isMac;
 
+    const user = UserStore.getCurrentUser();
+
     const Switches: Array<false | {
         key: KeysOfType<typeof settings, boolean>;
         title: string;
@@ -78,7 +94,7 @@ function VencordSettings() {
             !IS_WEB && {
                 key: "transparent",
                 title: "Enable window transparency.",
-                note: "You need a theme that supports transparency or this will do nothing. Will stop the window from being resizable. Requires a full restart"
+                note: "You need a theme that supports transparency or this will do nothing. WILL STOP THE WINDOW FROM BEING RESIZABLE!! Requires a full restart"
             },
             !IS_WEB && isWindows && {
                 key: "winCtrlQ",
@@ -94,47 +110,92 @@ function VencordSettings() {
 
     return (
         <SettingsTab title="Vencord Settings">
-            <DonateCard image={donateImage} />
+            {isDonor(user?.id)
+                ? (
+                    <SpecialCard
+                        title="Donations"
+                        subtitle="Thank you for donating!"
+                        description="All Vencord users can see your badge! You can change it at any time by messaging @vending.machine."
+                        cardImage={VENNIE_DONATOR_IMAGE}
+                        backgroundImage={DONOR_BACKGROUND_IMAGE}
+                        backgroundColor="#ED87A9"
+                    >
+                        <DonateButtonComponent />
+                    </SpecialCard>
+                )
+                : (
+                    <SpecialCard
+                        title="Support the Project"
+                        description="Please consider supporting the development of Vencord by donating!"
+                        cardImage={donateImage}
+                        backgroundImage={DONOR_BACKGROUND_IMAGE}
+                        backgroundColor="#c3a3ce"
+                    >
+                        <DonateButtonComponent />
+                    </SpecialCard>
+                )
+            }
+            {isPluginDev(user?.id) && (
+                <SpecialCard
+                    title="Contributions"
+                    subtitle="Thank you for contributing!"
+                    description="Since you've contributed to Vencord you now have a cool new badge!"
+                    cardImage={COZY_CONTRIB_IMAGE}
+                    backgroundImage={CONTRIB_BACKGROUND_IMAGE}
+                    backgroundColor="#EDCC87"
+                    buttonTitle="See what you've contributed to"
+                    buttonOnClick={() => openContributorModal(user)}
+                />
+            )}
+
             <Forms.FormSection title="Quick Actions">
-                <Card className={cl("quick-actions-card")}>
-                    <React.Fragment>
-                        {!IS_WEB && (
-                            <Button
-                                onClick={relaunch}
-                                size={Button.Sizes.SMALL}>
-                                Restart Client
-                            </Button>
-                        )}
-                        <Button
-                            onClick={() => VencordNative.quickCss.openEditor()}
-                            size={Button.Sizes.SMALL}
-                            disabled={settingsDir === "Loading..."}>
-                            Open QuickCSS File
-                        </Button>
-                        {!IS_WEB && (
-                            <Button
-                                onClick={() => showItemInFolder(settingsDir)}
-                                size={Button.Sizes.SMALL}
-                                disabled={settingsDirPending}>
-                                Open Settings Folder
-                            </Button>
-                        )}
-                        <Button
-                            onClick={() => VencordNative.native.openExternal("https://github.com/Vendicated/Vencord")}
-                            size={Button.Sizes.SMALL}
-                            disabled={settingsDirPending}>
-                            Open in GitHub
-                        </Button>
-                    </React.Fragment>
-                </Card>
+                <QuickActionCard>
+                    <QuickAction
+                        Icon={LogIcon}
+                        text="Notification Log"
+                        action={openNotificationLogModal}
+                    />
+                    <QuickAction
+                        Icon={PaintbrushIcon}
+                        text="Edit QuickCSS"
+                        action={() => VencordNative.quickCss.openEditor()}
+                    />
+                    {!IS_WEB && (
+                        <QuickAction
+                            Icon={RestartIcon}
+                            text="Relaunch Discord"
+                            action={relaunch}
+                        />
+                    )}
+                    {!IS_WEB && (
+                        <QuickAction
+                            Icon={FolderIcon}
+                            text="Open Settings Folder"
+                            action={() => showItemInFolder(settingsDir)}
+                        />
+                    )}
+                    <QuickAction
+                        Icon={GithubIcon}
+                        text="View Source Code"
+                        action={() => VencordNative.native.openExternal("https://github.com/" + gitRemote)}
+                    />
+                </QuickActionCard>
             </Forms.FormSection>
 
             <Forms.FormDivider />
 
             <Forms.FormSection className={Margins.top16} title="Settings" tag="h5">
-                <Forms.FormText className={Margins.bottom20}>
-                    Hint: You can change the position of this settings section in the settings of the "Settings" plugin!
+                <Forms.FormText className={Margins.bottom20} style={{ color: "var(--text-muted)" }}>
+                    Hint: You can change the position of this settings section in the
+                    {" "}<Button
+                        look={Button.Looks.BLANK}
+                        style={{ color: "var(--text-link)", display: "inline-block" }}
+                        onClick={() => openPluginModal(Vencord.Plugins.plugins.Settings)}
+                    >
+                        settings of the Settings plugin
+                    </Button>!
                 </Forms.FormText>
+
                 {Switches.map(s => s && (
                     <Switch
                         key={s.key}
@@ -212,119 +273,33 @@ function VencordSettings() {
                     serialize={identity} />
             </>}
 
-            {typeof Notification !== "undefined" && <NotificationSection settings={settings.notifications} />}
+            <Forms.FormSection className={Margins.top16} title="Vencord Notifications" tag="h5">
+                <Flex>
+                    <Button onClick={openNotificationSettingsModal}>
+                        Notification Settings
+                    </Button>
+                    <Button onClick={openNotificationLogModal}>
+                        View Notification Log
+                    </Button>
+                </Flex>
+            </Forms.FormSection>
         </SettingsTab>
     );
 }
 
-function NotificationSection({ settings }: { settings: typeof Settings["notifications"]; }) {
+function DonateButtonComponent() {
     return (
-        <>
-            <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
-            {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>
-                </ErrorCard>
-            )}
-            <Forms.FormText className={Margins.bottom8}>
-                Some plugins may show you notifications. These come in two styles:
-                <ul>
-                    <li><strong>Vencord Notifications</strong>: These are in-app notifications</li>
-                    <li><strong>Desktop Notifications</strong>: Native Desktop notifications (like when you get a ping)</li>
-                </ul>
-            </Forms.FormText>
-            <Select
-                placeholder="Notification Style"
-                options={[
-                    { label: "Only use Desktop notifications when Discord is not focused", value: "not-focused", default: true },
-                    { label: "Always use Desktop notifications", value: "always" },
-                    { label: "Always use Vencord notifications", value: "never" },
-                ] satisfies Array<{ value: typeof settings["useNative"]; } & Record<string, any>>}
-                closeOnSelect={true}
-                select={v => settings.useNative = v}
-                isSelected={v => v === settings.useNative}
-                serialize={identity}
-            />
-
-            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
-            <Select
-                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["position"]; } & Record<string, any>>}
-                select={v => settings.position = v}
-                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={settings.useNative === "always"}
-                markers={[0, 1000, 2500, 5000, 10_000, 20_000]}
-                minValue={0}
-                maxValue={20_000}
-                initialValue={settings.timeout}
-                onValueChange={v => settings.timeout = v}
-                onValueRender={v => (v / 1000).toFixed(2) + "s"}
-                onMarkerRender={v => (v / 1000) + "s"}
-                stickToMarkers={false}
-            />
-
-            <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Log Limit</Forms.FormTitle>
-            <Forms.FormText className={Margins.bottom16}>
-                The amount of notifications to save in the log until old ones are removed.
-                Set to <code>0</code> to disable Notification log and <code>∞</code> to never automatically remove old Notifications
-            </Forms.FormText>
-            <Slider
-                markers={[0, 25, 50, 75, 100, 200]}
-                minValue={0}
-                maxValue={200}
-                stickToMarkers={true}
-                initialValue={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>
-        </>
+        <DonateButton
+            look={Button.Looks.FILLED}
+            color={Button.Colors.WHITE}
+            style={{ marginTop: "1em" }}
+        />
     );
 }
 
-interface DonateCardProps {
-    image: string;
-}
-
-function DonateCard({ image }: DonateCardProps) {
-    return (
-        <Card className={cl("card", "donate")}>
-            <div>
-                <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
-                <Forms.FormText>Please consider supporting the development of Vencord by donating!</Forms.FormText>
-                <DonateButton style={{ transform: "translateX(-1em)" }} />
-            </div>
-            <img
-                role="presentation"
-                src={image}
-                alt=""
-                height={128}
-                style={{
-                    imageRendering: image === SHIGGY_DONATE_IMAGE ? "pixelated" : void 0,
-                    marginLeft: "auto",
-                    transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : void 0
-                }}
-            />
-        </Card>
-    );
+function isDonor(userId: string): boolean {
+    const donorBadges = BadgeAPI.getDonorBadges(userId);
+    return GuildMemberStore.getMember(VENCORD_GUILD_ID, userId)?.roles.includes(DONOR_ROLE_ID) || !!donorBadges;
 }
 
 export default wrapTab(VencordSettings, "Vencord Settings");

src/components/VencordSettings/quickActions.css

@@ -0,0 +1,42 @@
+.vc-settings-quickActions-card {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5em;
+    padding: 0.5em;
+    margin-bottom: 1em;
+}
+
+@media (width <=1040px) {
+    .vc-settings-quickActions-card {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+.vc-settings-quickActions-pill {
+    all: unset;
+    background: var(--background-secondary);
+    color: var(--header-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    padding: 8px 9px;
+    border-radius: 8px;
+    transition: 0.1s ease-out;
+    box-sizing: border-box;
+}
+
+.vc-settings-quickActions-pill:hover {
+    background: var(--background-secondary-alt);
+    transform: translateY(-1px);
+    box-shadow: var(--elevation-high);
+}
+
+.vc-settings-quickActions-pill:focus-visible {
+    outline: 2px solid var(--focus-primary);
+    outline-offset: 2px;
+}
+
+.vc-settings-quickActions-img {
+    width: 24px;
+    height: 24px;
+}

src/components/VencordSettings/quickActions.tsx

@@ -0,0 +1,39 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./quickActions.css";
+
+import { classNameFactory } from "@api/Styles";
+import { Card } from "@webpack/common";
+import type { ComponentType, PropsWithChildren, ReactNode } from "react";
+
+const cl = classNameFactory("vc-settings-quickActions-");
+
+export interface QuickActionProps {
+    Icon: ComponentType<{ className?: string; }>;
+    text: ReactNode;
+    action?: () => void;
+    disabled?: boolean;
+}
+
+export function QuickAction(props: QuickActionProps) {
+    const { Icon, action, text, disabled } = props;
+
+    return (
+        <button className={cl("pill")} onClick={action} disabled={disabled}>
+            <Icon className={cl("img")} />
+            {text}
+        </button>
+    );
+}
+
+export function QuickActionCard(props: PropsWithChildren) {
+    return (
+        <Card className={cl("card")}>
+            {props.children}
+        </Card>
+    );
+}

src/components/VencordSettings/settingsStyles.css

@@ -10,17 +10,6 @@
     margin-bottom: -2px;
 }
 
-.vc-settings-quick-actions-card {
-    padding: 1em;
-    display: flex;
-    gap: 1em;
-    align-items: center;
-    justify-content: space-evenly;
-    flex-grow: 1;
-    flex-flow: row wrap;
-    margin-bottom: 1em;
-}
-
 .vc-settings-donate {
     display: flex;
     flex-direction: row;
@@ -44,6 +33,20 @@
     padding: 0.5em;
     border: 1px solid var(--background-modifier-accent);
     max-height: unset;
+    background-color: transparent;
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 14px;
+    resize: none;
+    width: 100%;
+}
+
+.vc-settings-theme-links::placeholder {
+    color: var(--header-secondary);
+}
+
+.vc-settings-theme-links:focus {
+    background-color: var(--background-tertiary);
 }
 
 .vc-cloud-settings-sync-grid {

src/components/VencordSettings/specialCard.css

@@ -0,0 +1,92 @@
+.vc-donate-button {
+    overflow: visible !important;
+}
+
+.vc-donate-button .vc-heart-icon {
+    transition: transform 0.3s;
+}
+
+.vc-donate-button:hover .vc-heart-icon {
+    transform: scale(1.1);
+    z-index: 10;
+    position: relative;
+}
+
+.vc-settings-card {
+    padding: 1em;
+    margin-bottom: 1em;
+}
+
+.vc-special-card-special {
+    padding: 1em 1.5em;
+    margin-bottom: 1em;
+    background-size: cover;
+    background-position: center;
+}
+
+.vc-special-card-flex {
+    display: flex;
+    flex-direction: row;
+}
+
+.vc-special-card-flex-main {
+    width: 100%;
+}
+
+.vc-special-title {
+    color: black;
+}
+
+.vc-special-subtitle {
+    color: black;
+    font-size: 1.2em;
+    font-weight: bold;
+    margin-top: 0.5em;
+}
+
+.vc-special-text {
+    color: black;
+    font-size: 1em;
+    margin-top: .75em;
+    white-space: pre-line;
+}
+
+.vc-special-seperator {
+    margin-top: .75em;
+    border-top: 1px solid white;
+    opacity: 0.4;
+}
+
+.vc-special-hyperlink {
+    margin-top: 1em;
+    cursor: pointer;
+
+    .vc-special-hyperlink-text {
+        color: black;
+        font-size: 1em;
+        font-weight: bold;
+        text-align: center;
+        transition: text-decoration 0.5s;
+        cursor: pointer;
+    }
+
+    &:hover .vc-special-hyperlink-text {
+        text-decoration: underline;
+    }
+}
+
+.vc-special-image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 1em;
+    flex-shrink: 0;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background-color: white;
+}
+
+.vc-special-image {
+    width: 65%;
+}

src/components/VencordSettings/themesStyles.css

@@ -27,12 +27,3 @@
 .vc-settings-theme-author::before {
     content: "by ";
 }
-
-.vc-settings-theme-link-input {
-    width: 100%;
-}
-
-.vc-settings-theme-add-card {
-    padding: 1em;
-    margin-bottom: 16px;
-}

src/components/iconStyles.css

@@ -5,3 +5,8 @@
 .vc-owner-crown-icon {
     color: var(--text-warning);
 }
+
+.vc-heart-icon {
+    margin-right: 0.5em;
+    translate: 0 2px;
+}

src/components/index.ts

@@ -10,7 +10,6 @@ export * from "./CodeBlock";
 export * from "./DonateButton";
 export { default as ErrorBoundary } from "./ErrorBoundary";
 export * from "./ErrorCard";
-export * from "./ExpandableHeader";
 export * from "./Flex";
 export * from "./Heart";
 export * from "./Icons";

src/debug/loadLazyChunks.ts

@@ -15,9 +15,9 @@ export async function loadLazyChunks() {
     try {
         LazyChunkLoaderLogger.log("Loading all chunks...");
 
-        const validChunks = new Set<string>();
-        const invalidChunks = new Set<string>();
-        const deferredRequires = new Set<string>();
+        const validChunks = new Set<number>();
+        const invalidChunks = new Set<number>();
+        const deferredRequires = new Set<number>();
 
         let chunksSearchingResolve: (value: void | PromiseLike<void>) => void;
         const chunksSearchingDone = new Promise<void>(r => chunksSearchingResolve = r);
@@ -27,16 +27,19 @@ export async function loadLazyChunks() {
 
         const LazyChunkRegex = canonicalizeMatch(/(?:(?:Promise\.all\(\[)?(\i\.e\("?[^)]+?"?\)[^\]]*?)(?:\]\))?)\.then\(\i\.bind\(\i,"?([^)]+?)"?\)\)/g);
 
-        async function searchAndLoadLazyChunks(factoryCode: string) {
-            const lazyChunks = factoryCode.matchAll(LazyChunkRegex);
-            const validChunkGroups = new Set<[chunkIds: string[], entryPoint: string]>();
+        let foundCssDebuggingLoad = false;
 
-            // Workaround for a chunk that depends on the ChannelMessage component but may be be force loaded before
-            // the chunk containing the component
-            const shouldForceDefer = factoryCode.includes(".Messages.GUILD_FEED_UNFEATURE_BUTTON_TEXT");
+        async function searchAndLoadLazyChunks(factoryCode: string) {
+            // Workaround to avoid loading the CSS debugging chunk which turns the app pink
+            const hasCssDebuggingLoad = foundCssDebuggingLoad ? false : (foundCssDebuggingLoad = factoryCode.includes(".cssDebuggingEnabled&&"));
+
+            const lazyChunks = factoryCode.matchAll(LazyChunkRegex);
+            const validChunkGroups = new Set<[chunkIds: number[], entryPoint: number]>();
+
+            const shouldForceDefer = false;
 
             await Promise.all(Array.from(lazyChunks).map(async ([, rawChunkIds, entryPoint]) => {
-                const chunkIds = rawChunkIds ? Array.from(rawChunkIds.matchAll(Webpack.ChunkIdsRegex)).map(m => m[1]) : [];
+                const chunkIds = rawChunkIds ? Array.from(rawChunkIds.matchAll(Webpack.ChunkIdsRegex)).map(m => Number(m[1])) : [];
 
                 if (chunkIds.length === 0) {
                     return;
@@ -45,6 +48,16 @@ export async function loadLazyChunks() {
                 let invalidChunkGroup = false;
 
                 for (const id of chunkIds) {
+                    if (hasCssDebuggingLoad) {
+                        if (chunkIds.length > 1) {
+                            throw new Error("Found multiple chunks in factory that loads the CSS debugging chunk");
+                        }
+
+                        invalidChunks.add(id);
+                        invalidChunkGroup = true;
+                        break;
+                    }
+
                     if (wreq.u(id) == null || wreq.u(id) === "undefined.js") continue;
 
                     const isWorkerAsset = await fetch(wreq.p + wreq.u(id))
@@ -61,7 +74,7 @@ export async function loadLazyChunks() {
                 }
 
                 if (!invalidChunkGroup) {
-                    validChunkGroups.add([chunkIds, entryPoint]);
+                    validChunkGroups.add([chunkIds, Number(entryPoint)]);
                 }
             }));
 
@@ -131,14 +144,14 @@ export async function loadLazyChunks() {
         }
 
         // All chunks Discord has mapped to asset files, even if they are not used anymore
-        const allChunks = [] as string[];
+        const allChunks = [] as number[];
 
         // Matches "id" or id:
-        for (const currentMatch of wreq!.u.toString().matchAll(/(?:"(\d+?)")|(?:(\d+?):)/g)) {
+        for (const currentMatch of wreq!.u.toString().matchAll(/(?:"([\deE]+?)"(?![,}]))|(?:([\deE]+?):)/g)) {
             const id = currentMatch[1] ?? currentMatch[2];
             if (id == null) continue;
 
-            allChunks.push(id);
+            allChunks.push(Number(id));
         }
 
         if (allChunks.length === 0) throw new Error("Failed to get all chunks");

src/debug/runReporter.ts

@@ -62,14 +62,21 @@ async function runReporter() {
                 if (result == null || (result.$$vencordInternal != null && result.$$vencordInternal() == null)) throw new Error("Webpack Find Fail");
             } catch (e) {
                 let logMessage = searchType;
-                if (method === "find" || method === "proxyLazyWebpack" || method === "LazyComponentWebpack") logMessage += `(${args[0].toString().slice(0, 147)}...)`;
-                else if (method === "extractAndLoadChunks") logMessage += `([${args[0].map(arg => `"${arg}"`).join(", ")}], ${args[1].toString()})`;
-                else if (method === "mapMangledModule") {
+                if (method === "find" || method === "proxyLazyWebpack" || method === "LazyComponentWebpack") {
+                    if (args[0].$$vencordProps != null) {
+                        logMessage += `(${args[0].$$vencordProps.map(arg => `"${arg}"`).join(", ")})`;
+                    } else {
+                        logMessage += `(${args[0].toString().slice(0, 147)}...)`;
+                    }
+                } else if (method === "extractAndLoadChunks") {
+                    logMessage += `([${args[0].map(arg => `"${arg}"`).join(", ")}], ${args[1].toString()})`;
+                } else if (method === "mapMangledModule") {
                     const failedMappings = Object.keys(args[1]).filter(key => result?.[key] == null);
 
                     logMessage += `("${args[0]}", {\n${failedMappings.map(mapping => `\t${mapping}: ${args[1][mapping].toString().slice(0, 147)}...`).join(",\n")}\n})`;
+                } else {
+                    logMessage += `(${args.map(arg => `"${arg}"`).join(", ")})`;
                 }
-                else logMessage += `(${args.map(arg => `"${arg}"`).join(", ")})`;
 
                 ReporterLogger.log("Webpack Find Fail:", logMessage);
             }

src/main/monacoWin.html

@@ -5,8 +5,8 @@
         <title>Vencord QuickCSS Editor</title>
         <link
             rel="stylesheet"
-            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css"
-            integrity="sha512-MOoQ02h80hklccfLrXFYkCzG+WVjORflOp9Zp8dltiaRP+35LYnO4LKOklR64oMGfGgJDLO8WJpkM1o5gZXYZQ=="
+            href="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/editor/editor.main.css"
+            integrity="sha256-tiJPQ2O04z/pZ/AwdyIghrOMzewf+PIvEl1YKbQvsZk="
             crossorigin="anonymous"
             referrerpolicy="no-referrer"
         />
@@ -29,8 +29,8 @@
     <body>
         <div id="container"></div>
         <script
-            src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.min.js"
-            integrity="sha512-QzMpXeCPciAHP4wbYlV2PYgrQcaEkDQUjzkPU4xnjyVSD9T36/udamxtNBqb4qK4/bMQMPZ8ayrBe9hrGdBFjQ=="
+            src="https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs/loader.js"
+            integrity="sha256-KcU48TGr84r7unF7J5IgBo95aeVrEbrGe04S7TcFUjs="
             crossorigin="anonymous"
             referrerpolicy="no-referrer"
         ></script>
@@ -38,7 +38,7 @@
         <script>
             require.config({
                 paths: {
-                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs",
+                    vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.50.0/min/vs",
                 },
             });
 

src/main/updater/http.ts

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { get } from "@main/utils/simpleGet";
 import { IpcEvents } from "@shared/IpcEvents";
 import { VENCORD_USER_AGENT } from "@shared/vencordUserAgent";
 import { ipcMain } from "electron";
@@ -25,7 +26,6 @@ import { join } from "path";
 import gitHash from "~git-hash";
 import gitRemote from "~git-remote";
 
-import { get } from "../utils/simpleGet";
 import { serializeErrors, VENCORD_FILES } from "./common";
 
 const API_BASE = `https://api.github.com/repos/${gitRemote}`;

src/main/utils/constants.ts

@@ -35,7 +35,8 @@ export const ALLOWED_PROTOCOLS = [
     "steam:",
     "spotify:",
     "com.epicgames.launcher:",
-    "tidal:"
+    "tidal:",
+    "itunes:",
 ];
 
 export const IS_VANILLA = /* @__PURE__ */ process.argv.includes("--vanilla");

src/main/utils/extensions.ts

@@ -71,13 +71,16 @@ export async function installExt(id: string) {
             // React Devtools v4.25
             // v4.27 is broken in Electron, see https://github.com/facebook/react/issues/25843
             // Unfortunately, Google does not serve old versions, so this is the only way
+            // This zip file is pinned to long commit hash so it cannot be changed remotely
             ? "https://raw.githubusercontent.com/Vendicated/random-files/f6f550e4c58ac5f2012095a130406c2ab25b984d/fmkadmapgofadopljbjfkapdkoienihi.zip"
-            : `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${id}%26uc&prodversion=32`;
+            : `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${id}%26uc&prodversion=${process.versions.chrome}`;
+
         const buf = await get(url, {
             headers: {
-                "User-Agent": "Vencord (https://github.com/Vendicated/Vencord)"
+                "User-Agent": `Electron ${process.versions.electron} ~ Vencord (https://github.com/Vendicated/Vencord)`
             }
         });
+
         await extract(crxToZip(buf), extDir).catch(console.error);
     }
 

src/modules.d.ts

@@ -16,7 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// eslint-disable-next-line spaced-comment
 /// <reference types="standalone-electron-types"/>
 
 declare module "~plugins" {

src/plugins/_api/badges/fixBadgeOverflow.css

@@ -1,3 +0,0 @@
-[class*="profileBadges"] {
-    flex: none;
-}

src/plugins/_api/badges/fixDiscordBadgePadding.css

@@ -0,0 +1,5 @@
+/* the profile popout badge container(s) */
+[class*="biteSize_"] [class*="tags_"] [class*="container_"] {
+    /* Discord has padding set to 2px instead of 1px, which causes the 12th badge to wrap to a new line. */
+    padding: 0 1px;
+}

src/plugins/_api/badges/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "./fixBadgeOverflow.css";
+import "./fixDiscordBadgePadding.css";
 
 import { _getBadges, BadgePosition, BadgeUserArgs, ProfileBadge } from "@api/Badges";
 import DonateButton from "@components/DonateButton";
@@ -28,7 +28,7 @@ import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { isPluginDev } from "@utils/misc";
-import { closeModal, Modals, openModal } from "@utils/modal";
+import { closeModal, ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
 import definePlugin from "@utils/types";
 import { Forms, Toasts, UserStore } from "@webpack/common";
 import { User } from "discord-types/general";
@@ -62,36 +62,8 @@ export default definePlugin({
     authors: [Devs.Megu, Devs.Ven, Devs.TheSun],
     required: true,
     patches: [
-        /* Patch the badge list component on user profiles */
         {
-            find: 'id:"premium",',
-            replacement: [
-                {
-                    match: /&&(\i)\.push\(\{id:"premium".+?\}\);/,
-                    replace: "$&$1.unshift(...$self.getBadges(arguments[0]));",
-                },
-                {
-                    // alt: "", aria-hidden: false, src: originalSrc
-                    match: /alt:" ","aria-hidden":!0,src:(?=(\i)\.src)/,
-                    // ...badge.props, ..., src: badge.image ?? ...
-                    replace: "...$1.props,$& $1.image??"
-                },
-                // replace their component with ours if applicable
-                {
-                    match: /(?<=text:(\i)\.description,spacing:12,.{0,50})children:/,
-                    replace: "children:$1.component ? () => $self.renderBadgeComponent($1) :"
-                },
-                // conditionally override their onClick with badge.onClick if it exists
-                {
-                    match: /href:(\i)\.link/,
-                    replace: "...($1.onClick && { onClick: vcE => $1.onClick(vcE, $1) }),$&"
-                }
-            ]
-        },
-
-        /* new profiles */
-        {
-            find: ".PANEL]:14",
+            find: ".FULL_SIZE]:26",
             replacement: {
                 match: /(?<=(\i)=\(0,\i\.\i\)\(\i\);)return 0===\i.length\?/,
                 replace: "$1.unshift(...$self.getBadges(arguments[0].displayProfile));$&"
@@ -107,7 +79,7 @@ export default definePlugin({
                     replace: "...$1.props,$& $1.image??"
                 },
                 {
-                    match: /(?<=text:(\i)\.description,.{0,50})children:/,
+                    match: /(?<="aria-label":(\i)\.description,.{0,200})children:/,
                     replace: "children:$1.component ? $self.renderBadgeComponent({ ...$1 }) :"
                 },
                 // conditionally override their onClick with badge.onClick if it exists
@@ -130,12 +102,15 @@ export default definePlugin({
         }
     },
 
+    userProfileBadge: ContributorBadge,
+
     async start() {
-        Vencord.Api.Badges.addBadge(ContributorBadge);
         await loadBadges();
     },
 
     getBadges(props: { userId: string; user?: User; guildId: string; }) {
+        if (!props) return [];
+
         try {
             props.userId ??= props.user?.id!;
 
@@ -169,8 +144,8 @@ export default definePlugin({
                         closeModal(modalKey);
                         VencordNative.native.openExternal("https://github.com/sponsors/Vendicated");
                     }}>
-                        <Modals.ModalRoot {...props}>
-                            <Modals.ModalHeader>
+                        <ModalRoot {...props}>
+                            <ModalHeader>
                                 <Flex style={{ width: "100%", justifyContent: "center" }}>
                                     <Forms.FormTitle
                                         tag="h2"
@@ -184,8 +159,8 @@ export default definePlugin({
                                         Vencord Donor
                                     </Forms.FormTitle>
                                 </Flex>
-                            </Modals.ModalHeader>
-                            <Modals.ModalContent>
+                            </ModalHeader>
+                            <ModalContent>
                                 <Flex>
                                     <img
                                         role="presentation"
@@ -208,13 +183,13 @@ export default definePlugin({
                                         Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
                                     </Forms.FormText>
                                 </div>
-                            </Modals.ModalContent>
-                            <Modals.ModalFooter>
+                            </ModalContent>
+                            <ModalFooter>
                                 <Flex style={{ width: "100%", justifyContent: "center" }}>
                                     <DonateButton />
                                 </Flex>
-                            </Modals.ModalFooter>
-                        </Modals.ModalRoot>
+                            </ModalFooter>
+                        </ModalRoot>
                     </ErrorBoundary>
                 ));
             },

src/plugins/_api/chatButtons.ts

@@ -12,11 +12,16 @@ export default definePlugin({
     description: "API to add buttons to the chat input",
     authors: [Devs.Ven],
 
-    patches: [{
-        find: '"sticker")',
-        replacement: {
-            match: /return\(!\i\.\i&&(?=\(\i\.isDM.+?(\i)\.push\(.{0,50}"gift")/,
-            replace: "$&(Vencord.Api.ChatButtons._injectButtons($1,arguments[0]),true)&&"
+    patches: [
+        {
+            find: '"sticker")',
+            replacement: {
+                // FIXME(Bundler change related): Remove old compatiblity once enough time has passed
+                match: /return\((!)?\i\.\i(?:\|\||&&)(?=\(\i\.isDM.+?(\i)\.push)/,
+                replace: (m, not, children) => not
+                    ? `${m}(Vencord.Api.ChatButtons._injectButtons(${children},arguments[0]),true)&&`
+                    : `${m}(Vencord.Api.ChatButtons._injectButtons(${children},arguments[0]),false)||`
+            }
         }
-    }]
+    ]
 });

src/plugins/_api/contextMenu.ts

@@ -34,12 +34,22 @@ export default definePlugin({
             }
         },
         {
-            find: ".Menu,{",
+            find: "navId:",
             all: true,
-            replacement: {
-                match: /Menu,{(?<=\.jsxs?\)\(\i\.Menu,{)/g,
-                replace: "$&contextMenuApiArguments:typeof arguments!=='undefined'?arguments:[],"
-            }
+            noWarn: true,
+            replacement: [
+                {
+                    match: /navId:(?=.+?([,}].*?\)))/g,
+                    replace: (m, rest) => {
+                        // Check if this navId: match is a destructuring statement, ignore it if it is
+                        const destructuringMatch = rest.match(/}=.+/);
+                        if (destructuringMatch == null) {
+                            return `contextMenuAPIArguments:typeof arguments!=='undefined'?arguments:[],${m}`;
+                        }
+                        return m;
+                    }
+                }
+            ]
         }
     ]
 });

src/plugins/_api/dynamicImageModalApi.ts

@@ -0,0 +1,24 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+
+export default definePlugin({
+    name: "DynamicImageModalAPI",
+    authors: [Devs.sadan, Devs.Nuckyz],
+    description: "Allows you to omit either width or height when opening an image modal",
+    patches: [
+        {
+            find: "SCALE_DOWN:",
+            replacement: {
+                match: /!\(null==(\i)\|\|0===\i\|\|null==(\i)\|\|0===\i\)/,
+                replace: (_, width, height) => `!((null == ${width} || 0 === ${width}) && (null == ${height} || 0 === ${height}))`
+            }
+        }
+    ]
+});

src/plugins/_api/memberListDecorators/index.tsx

@@ -19,10 +19,15 @@
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
+import managedStyle from "./style.css?managed";
+
 export default definePlugin({
     name: "MemberListDecoratorsAPI",
     description: "API to add decorators to member list (both in servers and DMs)",
     authors: [Devs.TheSun, Devs.Ven],
+
+    managedStyle,
+
     patches: [
         {
             find: ".lostPermission)",
@@ -31,8 +36,8 @@ export default definePlugin({
                     match: /let\{[^}]*lostPermissionTooltipText:\i[^}]*\}=(\i),/,
                     replace: "$&vencordProps=$1,"
                 }, {
-                    match: /\.Messages\.GUILD_OWNER(?=.+?decorators:(\i)\(\)).+?\1=?\(\)=>.+?children:\[/,
-                    replace: "$&...(typeof vencordProps=='undefined'?[]:Vencord.Api.MemberListDecorators.__getDecorators(vencordProps)),"
+                    match: /#{intl::GUILD_OWNER}(?=.+?decorators:(\i)\(\)).+?\1=?\(\)=>.+?children:\[/,
+                    replace: "$&(typeof vencordProps=='undefined'?null:Vencord.Api.MemberListDecorators.__getDecorators(vencordProps)),"
                 }
             ]
         },
@@ -40,8 +45,8 @@ export default definePlugin({
             find: "PrivateChannel.renderAvatar",
             replacement: {
                 match: /decorators:(\i\.isSystemDM\(\))\?(.+?):null/,
-                replace: "decorators:[...Vencord.Api.MemberListDecorators.__getDecorators(arguments[0]), $1?$2:null]"
+                replace: "decorators:[Vencord.Api.MemberListDecorators.__getDecorators(arguments[0]),$1?$2:null]"
             }
         }
-    ],
+    ]
 });

src/plugins/_api/memberListDecorators/style.css

@@ -0,0 +1,11 @@
+.vc-member-list-decorators-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+}
+
+.vc-member-list-decorators-wrapper:not(:empty) {
+    /* Margin to match default Discord decorators */
+    margin-left: 0.25em;
+}

src/plugins/_api/menuItemDemangler.ts

@@ -0,0 +1,68 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import { canonicalizeMatch } from "@utils/patches";
+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",
+};
+
+export default definePlugin({
+    name: "MenuItemDemanglerAPI",
+    description: "Demangles Discord's Menu Item module",
+    authors: [Devs.Ven],
+    required: true,
+    patches: [
+        {
+            find: '"Menu API',
+            replacement: {
+                match: /function.{0,80}type===(\i\.\i)\).{0,50}navigable:.+?Menu API/s,
+                replace: (m, mod) => {
+                    const nameAssignments = [] as string[];
+
+                    // if (t.type === m.MenuItem)
+                    const typeCheckRe = canonicalizeMatch(/\(\i\.type===(\i\.\i)\)/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];
+                            nameAssignments.push(`Object.defineProperty(${item},"name",{value:"${name}"})`);
+                        }
+                    }
+                    if (nameAssignments.length < 6) {
+                        console.warn("[MenuItemDemanglerAPI] Expected to at least remap 6 items, only remapped", nameAssignments.length);
+                    }
+
+                    // Merge all our redefines with the actual module
+                    return `${nameAssignments.join(";")};${m}`;
+                },
+            },
+        },
+    ],
+});

src/plugins/_api/messageAccessories.ts

@@ -25,7 +25,7 @@ export default definePlugin({
     authors: [Devs.Cyn],
     patches: [
         {
-            find: ".Messages.REMOVE_ATTACHMENT_BODY",
+            find: "#{intl::REMOVE_ATTACHMENT_BODY}",
             replacement: {
                 match: /(?<=.container\)?,children:)(\[.+?\])/,
                 replace: "Vencord.Api.MessageAccessories._modifyAccessories($1,this.props)",

src/plugins/_api/messageDecorations/index.tsx

@@ -19,17 +19,22 @@
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
+import managedStyle from "./style.css?managed";
+
 export default definePlugin({
     name: "MessageDecorationsAPI",
     description: "API to add decorations to messages",
     authors: [Devs.TheSun],
+
+    managedStyle,
+
     patches: [
         {
             find: '"Message Username"',
             replacement: {
-                match: /\.Messages\.GUILD_COMMUNICATION_DISABLED_BOTTOM_SHEET_TITLE.+?}\),\i(?=\])/,
-                replace: "$&,...Vencord.Api.MessageDecorations.__addDecorationsToMessage(arguments[0])"
+                match: /#{intl::GUILD_COMMUNICATION_DISABLED_BOTTOM_SHEET_TITLE}.+?}\),\i(?=\])/,
+                replace: "$&,Vencord.Api.MessageDecorations.__addDecorationsToMessage(arguments[0])"
             }
         }
-    ],
+    ]
 });

src/plugins/_api/messageDecorations/style.css

@@ -0,0 +1,18 @@
+.vc-message-decorations-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25em;
+}
+
+.vc-message-decorations-wrapper:not(:empty) {
+    /* Margin to match default Discord decorators */
+    margin-left: 0.25em;
+
+    /* Align vertically */
+    position: relative;
+    vertical-align: top;
+    top: 0.1rem;
+    height: calc(1rem + 4px);
+    max-height: calc(1rem + 4px)
+}

src/plugins/_api/messageEvents.ts

@@ -25,26 +25,23 @@ export default definePlugin({
     authors: [Devs.Arjix, Devs.hunt, Devs.Ven],
     patches: [
         {
-            find: ".Messages.EDIT_TEXTAREA_HELP",
+            find: "#{intl::EDIT_TEXTAREA_HELP}",
             replacement: {
                 match: /(?<=,channel:\i\}\)\.then\().+?(?=return \i\.content!==this\.props\.message\.content&&\i\((.+?)\))/,
                 replace: (match, args) => "" +
                     `async ${match}` +
                     `if(await Vencord.Api.MessageEvents._handlePreEdit(${args}))` +
-                    "return Promise.resolve({shoudClear:true,shouldRefocus:true});"
+                    "return Promise.resolve({shouldClear:false,shouldRefocus:true});"
             }
         },
         {
             find: ".handleSendMessage,onResize",
             replacement: {
-                // props.chatInputType...then((function(isMessageValid)... var parsedMessage = b.c.parse(channel,... var replyOptions = f.g.getSendMessageOptionsForReply(pendingReply);
-                // Lookbehind: validateMessage)({openWarningPopout:..., type: i.props.chatInputType, content: t, stickers: r, ...}).then((function(isMessageValid)
-                match: /(type:this\.props\.chatInputType.+?\.then\()(\i=>\{.+?let (\i)=\i\.\i\.parse\((\i),.+?let (\i)=\i\.\i\.getSendMessageOptionsForReply\(\i\);)(?<=\)\(({.+?})\)\.then.+?)/,
-                // props.chatInputType...then((async function(isMessageValid)... var replyOptions = f.g.getSendMessageOptionsForReply(pendingReply); if(await Vencord.api...) return { shoudClear:true, shouldRefocus:true };
-                replace: (_, rest1, rest2, parsedMessage, channel, replyOptions, extra) => "" +
-                    `${rest1}async ${rest2}` +
+                // https://regex101.com/r/hBlXpl/1
+                match: /let (\i)=\i\.\i\.parse\((\i),.+?let (\i)=\i\.\i\.getSendMessageOptions\(\{.+?\}\);(?<=\)\(({.+?})\)\.then.+?)/,
+                replace: (m, parsedMessage, channel, replyOptions, extra) => m +
                     `if(await Vencord.Api.MessageEvents._handlePreSend(${channel}.id,${parsedMessage},${extra},${replyOptions}))` +
-                    "return{shoudClear:true,shouldRefocus:true};"
+                    "return{shouldClear:false,shouldRefocus:true};"
             }
         },
         {
@@ -52,8 +49,7 @@ export default definePlugin({
             replacement: {
                 match: /let\{id:\i}=(\i),{id:\i}=(\i);return \i\.useCallback\((\i)=>\{/,
                 replace: (m, message, channel, event) =>
-                    // the message param is shadowed by the event param, so need to alias them
-                    `const vcMsg=${message},vcChan=${channel};${m}Vencord.Api.MessageEvents._handleClick(vcMsg, vcChan, ${event});`
+                    `const vcMsg=${message},vcChan=${channel};${m}Vencord.Api.MessageEvents._handleClick(vcMsg,vcChan,${event});`
             }
         }
     ]

src/plugins/_api/messagePopover.ts

@@ -23,16 +23,14 @@ export default definePlugin({
     name: "MessagePopoverAPI",
     description: "API to add buttons to message popovers.",
     authors: [Devs.KingFish, Devs.Ven, Devs.Nuckyz],
-    patches: [{
-        find: "Messages.MESSAGE_UTILITIES_A11Y_LABEL",
-        replacement: {
-            // foo && !bar ? createElement(reactionStuffs)... createElement(blah,...makeElement(reply-other))
-            match: /\i&&!\i\?\(0,\i\.jsxs?\)\(.{0,200}renderEmojiPicker:.{0,500}\?(\i)\(\{key:"reply-other"/,
-            replace: (m, makeElement) => {
-                const msg = m.match(/message:(.{1,3}),/)?.[1];
-                if (!msg) throw new Error("Could not find message variable");
-                return `...Vencord.Api.MessagePopover._buildPopoverElements(${msg},${makeElement}),${m}`;
+    patches: [
+        {
+            find: "#{intl::MESSAGE_UTILITIES_A11Y_LABEL}",
+            replacement: {
+                match: /(?<=:null),(.{0,40}togglePopout:.+?}\)),(.+?)\]}\):null,(?<=\((\i\.\i),{label:.+?:null,(\i&&!\i)\?\(0,\i\.jsxs?\)\(\i\.Fragment.+?message:(\i).+?)/,
+                replace: (_, ReactButton, PotionButton, ButtonComponent, showReactButton, message) => "" +
+                    `]}):null,Vencord.Api.MessagePopover._buildPopoverElements(${ButtonComponent},${message}),${showReactButton}?${ReactButton}:null,${showReactButton}&&${PotionButton},`
             }
         }
-    }],
+    ]
 });

src/plugins/_api/notices.ts

@@ -34,7 +34,7 @@ export default definePlugin({
                 },
                 {
                     match: /(?<=,NOTICE_DISMISS:function\(\i\){)return null!=(\i)/,
-                    replace: "if($1.id==\"VencordNotice\")return($1=null,Vencord.Api.Notices.nextNotice(),true);$&"
+                    replace: "if($1?.id==\"VencordNotice\")return($1=null,Vencord.Api.Notices.nextNotice(),true);$&"
                 }
             ]
         }

src/plugins/_api/serverList.ts

@@ -25,16 +25,16 @@ export default definePlugin({
     description: "Api required for plugins that modify the server list",
     patches: [
         {
-            find: "Messages.DISCODO_DISABLED",
+            find: "#{intl::DISCODO_DISABLED}",
             replacement: {
-                match: /(?<=Messages\.DISCODO_DISABLED.+?return)(\(.{0,75}?tutorialContainer.+?}\))(?=}function)/,
+                match: /(?<=#{intl::DISCODO_DISABLED}.+?return)(\(.{0,75}?tutorialContainer.+?}\))(?=}function)/,
                 replace: "[$1].concat(Vencord.Api.ServerList.renderAll(Vencord.Api.ServerList.ServerListRenderPosition.Above))"
             }
         },
         {
-            find: "Messages.SERVERS,children",
+            find: "#{intl::SERVERS}),children",
             replacement: {
-                match: /(?<=Messages\.SERVERS,children:).+?default:return null\}\}\)/,
+                match: /(?<=#{intl::SERVERS}\),children:)\i\.map\(\i\)/,
                 replace: "Vencord.Api.ServerList.renderAll(Vencord.Api.ServerList.ServerListRenderPosition.In).concat($&)"
             }
         }

src/plugins/_core/noTrack.ts

@@ -18,7 +18,8 @@
 
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
+import { Logger } from "@utils/Logger";
+import definePlugin, { OptionType, StartAt } from "@utils/types";
 
 const settings = definePluginSettings({
     disableAnalytics: {
@@ -47,14 +48,7 @@ export default definePlugin({
             },
         },
         {
-            find: "window.DiscordSentry=",
-            replacement: {
-                match: /^.+$/,
-                replace: "()=>{}",
-            }
-        },
-        {
-            find: ".METRICS,",
+            find: ".METRICS",
             replacement: [
                 {
                     match: /this\._intervalId=/,
@@ -67,12 +61,73 @@ export default definePlugin({
             ]
         },
         {
-            find: ".installedLogHooks)",
+            find: ".BetterDiscord||null!=",
             replacement: {
-                // if getDebugLogging() returns false, the hooks don't get installed.
-                match: "getDebugLogging(){",
-                replace: "getDebugLogging(){return false;"
+                // Make hasClientMods return false
+                match: /(?=let \i=window;)/,
+                replace: "return false;"
             }
-        },
-    ]
+        }
+    ],
+
+    startAt: StartAt.Init,
+    start() {
+        // Sentry is initialized in its own WebpackInstance.
+        // It has everything it needs preloaded, so, it doesn't include any chunk loading functionality.
+        // Because of that, its WebpackInstance doesnt export wreq.m or wreq.c
+
+        // To circuvent this and disable Sentry we are gonna hook when wreq.g of its WebpackInstance is set.
+        // When that happens we are gonna forcefully throw an error and abort everything.
+        Object.defineProperty(Function.prototype, "g", {
+            configurable: true,
+
+            set(v: any) {
+                Object.defineProperty(this, "g", {
+                    value: v,
+                    configurable: true,
+                    enumerable: true,
+                    writable: true
+                });
+
+                // Ensure this is most likely the Sentry WebpackInstance.
+                // Function.g is a very generic property and is not uncommon for another WebpackInstance (or even a React component: <g></g>) to include it
+                const { stack } = new Error();
+                if (!(stack?.includes("discord.com") || stack?.includes("discordapp.com")) || !String(this).includes("exports:{}") || this.c != null) {
+                    return;
+                }
+
+                const assetPath = stack?.match(/\/assets\/.+?\.js/)?.[0];
+                if (!assetPath) {
+                    return;
+                }
+
+                const srcRequest = new XMLHttpRequest();
+                srcRequest.open("GET", assetPath, false);
+                srcRequest.send();
+
+                // Final condition to see if this is the Sentry WebpackInstance
+                if (!srcRequest.responseText.includes("window.DiscordSentry=")) {
+                    return;
+                }
+
+                new Logger("NoTrack", "#8caaee").info("Disabling Sentry by erroring its WebpackInstance");
+
+                Reflect.deleteProperty(Function.prototype, "g");
+                Reflect.deleteProperty(window, "DiscordSentry");
+
+                throw new Error("Sentry successfully disabled");
+            }
+        });
+
+        Object.defineProperty(window, "DiscordSentry", {
+            configurable: true,
+
+            set() {
+                new Logger("NoTrack", "#8caaee").error("Failed to disable Sentry. Falling back to deleting window.DiscordSentry");
+
+                Reflect.deleteProperty(Function.prototype, "g");
+                Reflect.deleteProperty(window, "DiscordSentry");
+            }
+        });
+    }
 });

src/plugins/_core/settings.tsx

@@ -25,8 +25,9 @@ import ThemesTab from "@components/VencordSettings/ThemesTab";
 import UpdaterTab from "@components/VencordSettings/UpdaterTab";
 import VencordTab from "@components/VencordSettings/VencordTab";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
-import { i18n, React } from "@webpack/common";
+import { React } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
@@ -57,20 +58,21 @@ export default definePlugin({
             ]
         },
         {
-            find: "Messages.ACTIVITY_SETTINGS",
+            find: ".SEARCH_NO_RESULTS&&0===",
             replacement: [
                 {
                     match: /(?<=section:(.{0,50})\.DIVIDER\}\))([,;])(?=.{0,200}(\i)\.push.{0,100}label:(\i)\.header)/,
                     replace: (_, sectionTypes, commaOrSemi, elements, element) => `${commaOrSemi} $self.addSettings(${elements}, ${element}, ${sectionTypes}) ${commaOrSemi}`
                 },
                 {
-                    match: /({(?=.+?function (\i).{0,120}(\i)=\i\.useMemo.{0,30}return \i\.useMemo\(\(\)=>\i\(\3).+?function\(\){return )\2(?=})/,
+                    // FIXME(Bundler change related): Remove old compatiblity once enough time has passed
+                    match: /({(?=.+?function (\i).{0,160}(\i)=\i\.useMemo.{0,140}return \i\.useMemo\(\(\)=>\i\(\3).+?(?:function\(\){return |\(\)=>))\2/,
                     replace: (_, rest, settingsHook) => `${rest}$self.wrapSettingsHook(${settingsHook})`
                 }
             ]
         },
         {
-            find: "Messages.USER_SETTINGS_ACTIONS_MENU_LABEL",
+            find: "#{intl::USER_SETTINGS_ACTIONS_MENU_LABEL}",
             replacement: {
                 match: /(?<=function\((\i),\i\)\{)(?=let \i=Object.values\(\i.\i\).*?(\i\.\i)\.open\()/,
                 replace: "$2.open($1);return;"
@@ -148,13 +150,18 @@ export default definePlugin({
 
         if (!header) return;
 
-        const names = {
-            top: i18n.Messages.USER_SETTINGS,
-            aboveNitro: i18n.Messages.BILLING_SETTINGS,
-            belowNitro: i18n.Messages.APP_SETTINGS,
-            aboveActivity: i18n.Messages.ACTIVITY_SETTINGS
-        };
-        return header === names[settingsLocation];
+        try {
+            const names = {
+                top: getIntlMessage("USER_SETTINGS"),
+                aboveNitro: getIntlMessage("BILLING_SETTINGS"),
+                belowNitro: getIntlMessage("APP_SETTINGS"),
+                aboveActivity: getIntlMessage("ACTIVITY_SETTINGS")
+            };
+
+            return header === names[settingsLocation];
+        } catch {
+            return firstChild === "PREMIUM";
+        }
     },
 
     patchedSettings: new WeakSet(),
@@ -197,7 +204,7 @@ export default definePlugin({
     },
 
     get electronVersion() {
-        return VencordNative.native.getVersions().electron || window.armcord?.electron || null;
+        return VencordNative.native.getVersions().electron || window.legcord?.electron || null;
     },
 
     get chromiumVersion() {

src/plugins/_core/supportHelper.tsx

@@ -16,13 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addAccessory } from "@api/MessageAccessories";
+import { definePluginSettings } from "@api/Settings";
 import { getUserSettingLazy } from "@api/UserSettings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
 import { openUpdaterModal } from "@components/VencordSettings/UpdaterTab";
-import { Devs, SUPPORT_CHANNEL_ID } from "@utils/constants";
+import { CONTRIB_ROLE_ID, Devs, DONOR_ROLE_ID, KNOWN_ISSUES_CHANNEL_ID, REGULAR_ROLE_ID, SUPPORT_CHANNEL_ID, VENBOT_USER_ID, VENCORD_GUILD_ID } from "@utils/constants";
 import { sendMessage } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
@@ -32,16 +32,14 @@ import { onlyOnce } from "@utils/onlyOnce";
 import { makeCodeblock } from "@utils/text";
 import definePlugin from "@utils/types";
 import { checkForUpdates, isOutdated, update } from "@utils/updater";
-import { Alerts, Button, Card, ChannelStore, Forms, GuildMemberStore, Parser, RelationshipStore, showToast, Toasts, UserStore } from "@webpack/common";
+import { Alerts, Button, Card, ChannelStore, Forms, GuildMemberStore, Parser, RelationshipStore, showToast, Text, Toasts, UserStore } from "@webpack/common";
+import { JSX } from "react";
 
 import gitHash from "~git-hash";
 import plugins, { PluginMeta } from "~plugins";
 
-import settings from "./settings";
+import SettingsPlugin from "./settings";
 
-const VENCORD_GUILD_ID = "1015060230222131221";
-const VENBOT_USER_ID = "1017176847865352332";
-const KNOWN_ISSUES_CHANNEL_ID = "1222936386626129920";
 const CodeBlockRe = /```js\n(.+?)```/s;
 
 const AllowedChannelIds = [
@@ -51,9 +49,9 @@ const AllowedChannelIds = [
 ];
 
 const TrustedRolesIds = [
-    "1026534353167208489", // contributor
-    "1026504932959977532", // regular
-    "1042507929485586532", // donor
+    CONTRIB_ROLE_ID, // contributor
+    REGULAR_ROLE_ID, // regular
+    DONOR_ROLE_ID, // donor
 ];
 
 const AsyncFunction = async function () { }.constructor;
@@ -76,7 +74,7 @@ async function generateDebugInfoMessage() {
     const client = (() => {
         if (IS_DISCORD_DESKTOP) return `Discord Desktop v${DiscordNative.app.getVersion()}`;
         if (IS_VESKTOP) return `Vesktop v${VesktopNative.app.getVersion()}`;
-        if ("armcord" in window) return `ArmCord v${window.armcord.version}`;
+        if ("legcord" in window) return `Legcord v${window.legcord.version}`;
 
         // @ts-expect-error
         const name = typeof unsafeWindow !== "undefined" ? "UserScript" : "Web";
@@ -86,7 +84,7 @@ async function generateDebugInfoMessage() {
     const info = {
         Vencord:
             `v${VERSION} • [${gitHash}](<https://github.com/Vendicated/Vencord/commit/${gitHash}>)` +
-            `${settings.additionalInfo} - ${Intl.DateTimeFormat("en-GB", { dateStyle: "medium" }).format(BUILD_TIMESTAMP)}`,
+            `${SettingsPlugin.additionalInfo} - ${Intl.DateTimeFormat("en-GB", { dateStyle: "medium" }).format(BUILD_TIMESTAMP)}`,
         Client: `${RELEASE_CHANNEL} ~ ${client}`,
         Platform: window.navigator.platform
     };
@@ -132,18 +130,24 @@ function generatePluginList() {
 
 const checkForUpdatesOnce = onlyOnce(checkForUpdates);
 
+const settings = definePluginSettings({}).withPrivateSettings<{
+    dismissedDevBuildWarning?: boolean;
+}>();
+
 export default definePlugin({
     name: "SupportHelper",
     required: true,
     description: "Helps us provide support to you",
     authors: [Devs.Ven],
-    dependencies: ["CommandsAPI", "UserSettingsAPI"],
+    dependencies: ["UserSettingsAPI"],
+
+    settings,
 
     patches: [{
-        find: ".BEGINNING_DM.format",
+        find: "#{intl::BEGINNING_DM}",
         replacement: {
-            match: /BEGINNING_DM\.format\(\{.+?\}\),(?=.{0,100}userId:(\i\.getRecipientId\(\)))/,
-            replace: "$& $self.ContributorDmWarningCard({ userId: $1 }),"
+            match: /#{intl::BEGINNING_DM},{.+?}\),(?=.{0,300}(\i)\.isMultiUserDM)/,
+            replace: "$& $self.renderContributorDmWarningCard({ channel: $1 }),"
         }
     }],
 
@@ -207,23 +211,108 @@ export default definePlugin({
                 });
             }
 
-            const repo = await VencordNative.updater.getRepo();
-            if (repo.ok && !repo.value.includes("Vendicated/Vencord")) {
+            if (!IS_STANDALONE && !settings.store.dismissedDevBuildWarning) {
                 return Alerts.show({
                     title: "Hold on!",
                     body: <div>
-                        <Forms.FormText>You are using a fork of Vencord, which we do not provide support for!</Forms.FormText>
+                        <Forms.FormText>You are using a custom build of Vencord, which we do not provide support for!</Forms.FormText>
+
                         <Forms.FormText className={Margins.top8}>
-                            Please either switch to an <Link href="https://vencord.dev/download">officially supported version of Vencord</Link>, or
-                            contact your package maintainer for support instead.
+                            We only provide support for <Link href="https://vencord.dev/download">official builds</Link>.
+                            Either <Link href="https://vencord.dev/download">switch to an official build</Link> or figure your issue out yourself.
                         </Forms.FormText>
-                    </div>
+
+                        <Text variant="text-md/bold" className={Margins.top8}>You will be banned from receiving support if you ignore this rule.</Text>
+                    </div>,
+                    confirmText: "Understood",
+                    secondaryConfirmText: "Don't show again",
+                    onConfirmSecondary: () => settings.store.dismissedDevBuildWarning = true
                 });
             }
         }
     },
 
-    ContributorDmWarningCard: ErrorBoundary.wrap(({ userId }) => {
+    renderMessageAccessory(props) {
+        const buttons = [] as JSX.Element[];
+
+        const shouldAddUpdateButton =
+            !IS_UPDATER_DISABLED
+            && (
+                (props.channel.id === KNOWN_ISSUES_CHANNEL_ID) ||
+                (props.channel.id === SUPPORT_CHANNEL_ID && props.message.author.id === VENBOT_USER_ID)
+            )
+            && props.message.content?.includes("update");
+
+        if (shouldAddUpdateButton) {
+            buttons.push(
+                <Button
+                    key="vc-update"
+                    color={Button.Colors.GREEN}
+                    onClick={async () => {
+                        try {
+                            if (await forceUpdate())
+                                showToast("Success! Restarting...", Toasts.Type.SUCCESS);
+                            else
+                                showToast("Already up to date!", Toasts.Type.MESSAGE);
+                        } catch (e) {
+                            new Logger(this.name).error("Error while updating:", e);
+                            showToast("Failed to update :(", Toasts.Type.FAILURE);
+                        }
+                    }}
+                >
+                    Update Now
+                </Button>
+            );
+        }
+
+        if (props.channel.id === SUPPORT_CHANNEL_ID) {
+            if (props.message.content.includes("/vencord-debug") || props.message.content.includes("/vencord-plugins")) {
+                buttons.push(
+                    <Button
+                        key="vc-dbg"
+                        onClick={async () => sendMessage(props.channel.id, { content: await generateDebugInfoMessage() })}
+                    >
+                        Run /vencord-debug
+                    </Button>,
+                    <Button
+                        key="vc-plg-list"
+                        onClick={async () => sendMessage(props.channel.id, { content: generatePluginList() })}
+                    >
+                        Run /vencord-plugins
+                    </Button>
+                );
+            }
+
+            if (props.message.author.id === VENBOT_USER_ID) {
+                const match = CodeBlockRe.exec(props.message.content || props.message.embeds[0]?.rawDescription || "");
+                if (match) {
+                    buttons.push(
+                        <Button
+                            key="vc-run-snippet"
+                            onClick={async () => {
+                                try {
+                                    await AsyncFunction(match[1])();
+                                    showToast("Success!", Toasts.Type.SUCCESS);
+                                } catch (e) {
+                                    new Logger(this.name).error("Error while running snippet:", e);
+                                    showToast("Failed to run snippet :(", Toasts.Type.FAILURE);
+                                }
+                            }}
+                        >
+                            Run Snippet
+                        </Button>
+                    );
+                }
+            }
+        }
+
+        return buttons.length
+            ? <Flex>{buttons}</Flex>
+            : null;
+    },
+
+    renderContributorDmWarningCard: ErrorBoundary.wrap(({ channel }) => {
+        const userId = channel.getRecipientId();
         if (!isPluginDev(userId)) return null;
         if (RelationshipStore.isFriend(userId) || isPluginDev(UserStore.getCurrentUser()?.id)) return null;
 
@@ -236,85 +325,4 @@ export default definePlugin({
             </Card>
         );
     }, { noop: true }),
-
-    start() {
-        addAccessory("vencord-debug", props => {
-            const buttons = [] as JSX.Element[];
-
-            const shouldAddUpdateButton =
-                !IS_UPDATER_DISABLED
-                && (
-                    (props.channel.id === KNOWN_ISSUES_CHANNEL_ID) ||
-                    (props.channel.id === SUPPORT_CHANNEL_ID && props.message.author.id === VENBOT_USER_ID)
-                )
-                && props.message.content?.includes("update");
-
-            if (shouldAddUpdateButton) {
-                buttons.push(
-                    <Button
-                        key="vc-update"
-                        color={Button.Colors.GREEN}
-                        onClick={async () => {
-                            try {
-                                if (await forceUpdate())
-                                    showToast("Success! Restarting...", Toasts.Type.SUCCESS);
-                                else
-                                    showToast("Already up to date!", Toasts.Type.MESSAGE);
-                            } catch (e) {
-                                new Logger(this.name).error("Error while updating:", e);
-                                showToast("Failed to update :(", Toasts.Type.FAILURE);
-                            }
-                        }}
-                    >
-                        Update Now
-                    </Button>
-                );
-            }
-
-            if (props.channel.id === SUPPORT_CHANNEL_ID) {
-                if (props.message.content.includes("/vencord-debug") || props.message.content.includes("/vencord-plugins")) {
-                    buttons.push(
-                        <Button
-                            key="vc-dbg"
-                            onClick={async () => sendMessage(props.channel.id, { content: await generateDebugInfoMessage() })}
-                        >
-                            Run /vencord-debug
-                        </Button>,
-                        <Button
-                            key="vc-plg-list"
-                            onClick={async () => sendMessage(props.channel.id, { content: generatePluginList() })}
-                        >
-                            Run /vencord-plugins
-                        </Button>
-                    );
-                }
-
-                if (props.message.author.id === VENBOT_USER_ID) {
-                    const match = CodeBlockRe.exec(props.message.content || props.message.embeds[0]?.rawDescription || "");
-                    if (match) {
-                        buttons.push(
-                            <Button
-                                key="vc-run-snippet"
-                                onClick={async () => {
-                                    try {
-                                        await AsyncFunction(match[1])();
-                                        showToast("Success!", Toasts.Type.SUCCESS);
-                                    } catch (e) {
-                                        new Logger(this.name).error("Error while running snippet:", e);
-                                        showToast("Failed to run snippet :(", Toasts.Type.FAILURE);
-                                    }
-                                }}
-                            >
-                                Run Snippet
-                            </Button>
-                        );
-                    }
-                }
-            }
-
-            return buttons.length
-                ? <Flex>{buttons}</Flex>
-                : null;
-        });
-    },
 });

src/plugins/accountPanelServerProfile/README.md

@@ -0,0 +1,7 @@
+# AccountPanelServerProfile
+
+Right click your account panel in the bottom left to view your profile in the current server
+
+![](https://github.com/user-attachments/assets/3228497d-488f-479c-93d2-a32ccdb08f0f)
+
+![](https://github.com/user-attachments/assets/6fc45363-d95f-4810-812f-2f9fb28b41b5)

src/plugins/accountPanelServerProfile/index.tsx

@@ -0,0 +1,134 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import { getCurrentChannel } from "@utils/discord";
+import definePlugin, { OptionType } from "@utils/types";
+import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
+import { ContextMenuApi, Menu, useEffect, useRef } from "@webpack/common";
+import { User } from "discord-types/general";
+
+interface UserProfileProps {
+    popoutProps: Record<string, any>;
+    currentUser: User;
+    originalRenderPopout: () => React.ReactNode;
+}
+
+const UserProfile = findComponentByCodeLazy("UserProfilePopoutWrapper: user cannot be undefined");
+const styles = findByPropsLazy("accountProfilePopoutWrapper");
+
+let openAlternatePopout = false;
+let accountPanelRef: React.RefObject<Record<PropertyKey, any> | null> = { current: null };
+
+const AccountPanelContextMenu = ErrorBoundary.wrap(() => {
+    const { prioritizeServerProfile } = settings.use(["prioritizeServerProfile"]);
+
+    return (
+        <Menu.Menu
+            navId="vc-ap-server-profile"
+            onClose={ContextMenuApi.closeContextMenu}
+        >
+            <Menu.MenuItem
+                id="vc-ap-view-alternate-popout"
+                label={prioritizeServerProfile ? "View Account Profile" : "View Server Profile"}
+                disabled={getCurrentChannel()?.getGuildId() == null}
+                action={e => {
+                    openAlternatePopout = true;
+                    accountPanelRef.current?.props.onMouseDown();
+                    accountPanelRef.current?.props.onClick(e);
+                }}
+            />
+            <Menu.MenuCheckboxItem
+                id="vc-ap-prioritize-server-profile"
+                label="Prioritize Server Profile"
+                checked={prioritizeServerProfile}
+                action={() => settings.store.prioritizeServerProfile = !prioritizeServerProfile}
+            />
+        </Menu.Menu>
+    );
+}, { noop: true });
+
+const settings = definePluginSettings({
+    prioritizeServerProfile: {
+        type: OptionType.BOOLEAN,
+        description: "Prioritize Server Profile when left clicking your account panel",
+        default: false
+    }
+});
+
+export default definePlugin({
+    name: "AccountPanelServerProfile",
+    description: "Right click your account panel in the bottom left to view your profile in the current server",
+    authors: [Devs.Nuckyz, Devs.relitrix],
+    settings,
+
+    patches: [
+        {
+            find: "#{intl::ACCOUNT_SPEAKING_WHILE_MUTED}",
+            group: true,
+            replacement: [
+                {
+                    match: /(?<=\.AVATAR_SIZE\);)/,
+                    replace: "$self.useAccountPanelRef();"
+                },
+                {
+                    match: /(\.AVATAR,children:.+?renderPopout:(\i)=>){(.+?)}(?=,position)(?<=currentUser:(\i).+?)/,
+                    replace: (_, rest, popoutProps, originalPopout, currentUser) => `${rest}$self.UserProfile({popoutProps:${popoutProps},currentUser:${currentUser},originalRenderPopout:()=>{${originalPopout}}})`
+                },
+                {
+                    match: /\.AVATAR,children:.+?(?=renderPopout:)/,
+                    replace: "$&onRequestClose:$self.onPopoutClose,"
+                },
+                {
+                    match: /(?<=\.avatarWrapper,)/,
+                    replace: "ref:$self.accountPanelRef,onContextMenu:$self.openAccountPanelContextMenu,"
+                }
+            ]
+        }
+    ],
+
+    get accountPanelRef() {
+        return accountPanelRef;
+    },
+
+    useAccountPanelRef() {
+        useEffect(() => () => {
+            accountPanelRef.current = null;
+        }, []);
+
+        return (accountPanelRef = useRef(null));
+    },
+
+    openAccountPanelContextMenu(event: React.UIEvent) {
+        ContextMenuApi.openContextMenu(event, AccountPanelContextMenu);
+    },
+
+    onPopoutClose() {
+        openAlternatePopout = false;
+    },
+
+    UserProfile: ErrorBoundary.wrap(({ popoutProps, currentUser, originalRenderPopout }: UserProfileProps) => {
+        if (
+            (settings.store.prioritizeServerProfile && openAlternatePopout) ||
+            (!settings.store.prioritizeServerProfile && !openAlternatePopout)
+        ) {
+            return originalRenderPopout();
+        }
+
+        const currentChannel = getCurrentChannel();
+        if (currentChannel?.getGuildId() == null) {
+            return originalRenderPopout();
+        }
+
+        return (
+            <div className={styles.accountProfilePopoutWrapper}>
+                <UserProfile {...popoutProps} userId={currentUser.id} guildId={currentChannel.getGuildId()} channelId={currentChannel.id} />
+            </div>
+        );
+    }, { noop: true })
+});