Merge branch 'dev' into feat/translation

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

.eslintrc.json

@@ -0,0 +1,98 @@
+{
+    "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"
+    }
+}

.github/ISSUE_TEMPLATE/blank.yml

@@ -2,24 +2,30 @@ name: Blank Issue
 description: Create a blank issue. ALWAYS FIRST USE OUR SUPPORT CHANNEL! ONLY USE THIS FORM IF YOU ARE A CONTRIBUTOR OR WERE TOLD TO DO SO IN THE SUPPORT CHANNEL.
 
 body:
-    - type: markdown
+  - type: markdown
-      attributes:
+    attributes:
-          value: |
+      value: |
-              ![Are you a developer? No? This form is not for you!](https://github.com/Vendicated/Vencord/blob/main/.github/ISSUE_TEMPLATE/developer-banner.png?raw=true)
+        # READ THIS BEFORE OPENING AN ISSUE
 
-              GitHub Issues are for development, not support! Please use our [support server](https://vencord.dev/discord) unless you are a Vencord Developer.
+        This form is ONLY FOR DEVELOPERS. YOUR ISSUE WILL BE CLOSED AND YOU WILL POSSIBLY BE BLOCKED FROM THE REPOSITORY IF YOU IGNORE THIS.
         
-    - type: textarea
+        DO NOT USE THIS FORM, unless
-      id: content
+        - you are a vencord contributor
-      attributes:
+        - you were given explicit permission to use this form by a moderator in our support server
-          label: Content
+        
-      validations:
+        DO NOT USE THIS FORM FOR SECURITY RELATED ISSUES. [CREATE A SECURITY ADVISORY INSTEAD.](https://github.com/Vendicated/Vencord/security/advisories/new)
+
+  - type: textarea
+    id: content
+    attributes:
+      label: Content
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: agreement-check
+    attributes:
+      label: Request Agreement
+      options:
+        - label: I have read the requirements for opening an issue above
           required: true
-
-    - type: checkboxes
-      id: agreement-check
-      attributes:
-          label: Request Agreement
-          options:
-              - label: I have read the requirements for opening an issue above
-                required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -4,63 +4,78 @@ labels: [bug]
 title: "[Bug] <title>"
 
 body:
-    - type: markdown
+  - type: markdown
-      attributes:
+    attributes:
-          value: |
+      value: |
-              ![Are you a developer? No? This form is not for you!](https://github.com/Vendicated/Vencord/blob/main/.github/ISSUE_TEMPLATE/developer-banner.png?raw=true)
+        # READ THIS BEFORE OPENING AN ISSUE
 
-              GitHub Issues are for development, not support! Please use our [support server](https://vencord.dev/discord) unless you are a Vencord Developer.
+        This form is ONLY FOR DEVELOPERS. YOUR ISSUE WILL BE CLOSED AND YOU WILL POSSIBLY BE BLOCKED FROM THE REPOSITORY IF YOU IGNORE THIS.
         
-    - type: textarea
+        DO NOT USE THIS FORM, unless
-      id: bug-description
+        - you are a vencord contributor
-      attributes:
+        - you were given explicit permission to use this form by a moderator in our support server
-          label: What happens when the bug or crash occurs?
+        
-          description: Where does this bug or crash occur, when does it occur, etc.
+        DO NOT USE THIS FORM FOR SECURITY RELATED ISSUES. [CREATE A SECURITY ADVISORY INSTEAD.](https://github.com/Vendicated/Vencord/security/advisories/new)
-          placeholder: The bug/crash happens sometimes when I do ..., causing this to not work/the app to crash. I think it happens because of ...
+  
-      validations:
+  - type: input
+    id: discord
+    attributes:
+      label: Discord Account
+      description: Who on Discord is making this request? Not required but encouraged for easier follow-up
+      placeholder: username#0000
+    validations:
+      required: false
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: What happens when the bug or crash occurs?
+      description: Where does this bug or crash occur, when does it occur, etc.
+      placeholder: The bug/crash happens sometimes when I do ..., causing this to not work/the app to crash. I think it happens because of ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behaviour
+    attributes:
+      label: What is the expected behaviour?
+      description: Simply detail what the expected behaviour is.
+      placeholder: I expect Vencord/Discord to open the ... page instead of ..., it prevents me from doing ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-take
+    attributes:
+      label: How do you recreate this bug or crash?
+      description: Give us a list of steps in order to recreate the bug or crash.
+      placeholder: |
+        1. Do ...
+        2. Then ...
+        3. Do this ..., ... and then ...
+        4. Observe "the bug" or "the crash"
+    validations:
+      required: true
+
+  - type: textarea
+    id: crash-log
+    attributes:
+      label: Errors
+      description: Open the Developer Console with Ctrl/Cmd + Shift + i. Then look for any red errors (Ignore network errors like Failed to load resource) and paste them between the "```".
+      value: |
+        ```
+        Replace this text with your crash-log.
+        ```
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: agreement-check
+    attributes:
+      label: Request Agreement
+      description: We only accept reports for bugs that happen on Discord Stable. Canary and PTB are Development branches and may be unstable
+      options:
+        - label: I am using Discord Stable or tried on Stable and this bug happens there as well
           required: true
-
+        - label: I have read the requirements for opening an issue above
-    - type: textarea
-      id: expected-behaviour
-      attributes:
-          label: What is the expected behaviour?
-          description: Simply detail what the expected behaviour is.
-          placeholder: I expect Vencord/Discord to open the ... page instead of ..., it prevents me from doing ...
-      validations:
           required: true
-
-    - type: textarea
-      id: steps-to-take
-      attributes:
-          label: How do you recreate this bug or crash?
-          description: Give us a list of steps in order to recreate the bug or crash.
-          placeholder: |
-              1. Do ...
-              2. Then ...
-              3. Do this ..., ... and then ...
-              4. Observe "the bug" or "the crash"
-      validations:
-          required: true
-
-    - type: textarea
-      id: crash-log
-      attributes:
-          label: Errors
-          description: Open the Developer Console with Ctrl/Cmd + Shift + i. Then look for any red errors (Ignore network errors like Failed to load resource) and paste them between the "```".
-          value: |
-              ```
-              Replace this text with your crash-log.
-              ```
-      validations:
-          required: false
-
-    - type: checkboxes
-      id: agreement-check
-      attributes:
-          label: Request Agreement
-          description: We only accept reports for bugs that happen on Discord Stable. Canary and PTB are Development branches and may be unstable
-          options:
-              - label: I am using Discord Stable or tried on Stable and this bug happens there as well
-                required: true
-              - label: I am a Vencord Developer
-                required: true

.github/workflows/build.yml

@@ -42,7 +42,7 @@ jobs:
 
             - name: Clean up obsolete files
               run: |
-                  rm -rf dist/*-unpacked dist/vendor Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
+                  rm -rf dist/*-unpacked dist/monaco Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
 
             - name: Get some values needed for the release
               id: release_values

.github/workflows/reportBrokenPlugins.yml

@@ -1,22 +1,9 @@
 name: Test Patches
 on:
     workflow_dispatch:
-        inputs:
+    schedule:
-            discord_branch:
+        # Every day at midnight
-                type: choice
+        - cron: 0 0 * * *
-                description: "Discord Branch to test patches on"
-                options:
-                    - both
-                    - stable
-                    - canary
-                default: both
-            webhook_url:
-                type: string
-                description: "Webhook URL that the report will be posted to. This will be visible for everyone, so DO NOT pass sensitive webhooks like discord webhook. This is meant to be used by Venbot."
-                required: false
-    # schedule:
-    #   # Every day at midnight
-    #   - cron: 0 0 * * *
 
 jobs:
     TestPlugins:
@@ -53,43 +40,28 @@ jobs:
             - name: Build Vencord Reporter Version
               run: pnpm buildReporter
 
-            - name: Run Reporter
+            - name: Create Report
               timeout-minutes: 10
               run: |
                   export PATH="$PWD/node_modules/.bin:$PATH"
                   export CHROMIUM_BIN=${{ steps.setup-chrome.outputs.chrome-path }}
 
                   esbuild scripts/generateReport.ts > dist/report.mjs
-
+                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
-                  stable_output_file=$(mktemp)
-                  canary_output_file=$(mktemp)
-
-                  pids=""
-
-                  branch="${{ inputs.discord_branch }}"
-                  if [[ "${{ github.event_name }}" = "schedule" ]]; then
-                    branch="both"
-                  fi
-
-                  if [[ "$branch" = "both" || "$branch" = "stable" ]]; then
-                    node dist/report.mjs > "$stable_output_file" &
-                    pids+=" $!"
-                  fi
-
-                  if [[ "$branch" = "both" || "$branch" = "canary" ]]; then
-                    USE_CANARY=true node dist/report.mjs > "$canary_output_file" &
-                    pids+=" $!"
-                  fi
-
-                  exit_code=0
-                  for pid in $pids; do
-                      if ! wait "$pid"; then
-                        exit_code=1
-                      fi
-                  done
-
-                  cat "$stable_output_file" "$canary_output_file" >> $GITHUB_STEP_SUMMARY
-                  exit $exit_code
               env:
-                  WEBHOOK_URL: ${{ inputs.webhook_url || secrets.DISCORD_WEBHOOK }}
+                  DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
-                  WEBHOOK_SECRET: ${{ secrets.WEBHOOK_SECRET }}
+                  DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+
+            - name: Create Report (Canary)
+              timeout-minutes: 10
+              if: success() || failure() # even run if previous one failed
+              run: |
+                  export PATH="$PWD/node_modules/.bin:$PATH"
+                  export CHROMIUM_BIN=${{ steps.setup-chrome.outputs.chrome-path }}
+                  export USE_CANARY=true
+
+                  esbuild scripts/generateReport.ts > dist/report.mjs
+                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
+              env:
+                  DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
+                  DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}

.gitignore

@@ -8,7 +8,6 @@ vencord_installer
 .DS_Store
 
 yarn.lock
-bun.lock
 package-lock.json
 
 *.log
@@ -19,5 +18,7 @@ lerna-debug.log*
 .pnpm-debug.log*
 *.tsbuildinfo
 
+src/userplugins
+
 ExtensionCache/
 settings/

.gitmodules

@@ -1,3 +0,0 @@
-[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,7 @@
 {
     "extends": "stylelint-config-standard",
     "rules": {
+        "indentation": 4,
         "selector-class-pattern": [
             "^[a-z][a-zA-Z0-9]*(-[a-z0-9][a-zA-Z0-9]*)*$",
             {

.vscode/extensions.json

@@ -4,6 +4,7 @@
         "EditorConfig.EditorConfig",
         "GregorBiswanger.json2ts",
         "stylelint.vscode-stylelint",
-        "Vendicated.vencord-companion"
+        "Vendicated.vencord-companion",
+        "lokalise.i18n-ally"
     ]
 }

.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,16 @@
+languageIds:
+    - javascript
+    - typescript
+    - javascriptreact
+    - typescriptreact
+
+usageMatchRegex:
+    - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+    - "<Translate ?.* i18nKey=\\{?['\"`]({key})['\"`]"
+
+refactorTemplates:
+    - "t(\"$1\")"
+    - "{t(\"$1\")}"
+    - "<Translate i18nKey=\"$1\" />"
+
+monopoly: true

.vscode/settings.json

@@ -14,10 +14,18 @@
     "typescript.preferences.quoteStyle": "double",
     "javascript.preferences.quoteStyle": "double",
 
+    "eslint.experimental.useFlatConfig": false,
+
     "gitlens.remotes": [
         {
             "domain": "codeberg.org",
             "type": "Gitea"
         }
-    ]
+    ],
+    "i18n-ally.namespace": true,
+    "i18n-ally.localesPaths": ["./translations"],
+    "i18n-ally.sourceLanguage": "en",
+    "i18n-ally.extract.keygenStyle": "camelCase",
+    "i18n-ally.sortKeys": true,
+    "i18n-ally.keystyle": "nested"
 }

CONTRIBUTING.md

@@ -31,7 +31,6 @@ Before starting your plugin:
 - 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

browser/manifest.json

@@ -36,7 +36,7 @@
 
     "web_accessible_resources": [
         {
-            "resources": ["dist/*", "vendor/*"],
+            "resources": ["dist/*", "third-party/*"],
             "matches": ["*://*.discord.com/*"]
         }
     ],

browser/monaco.ts

@@ -15,7 +15,7 @@ declare global {
     const getTheme: () => string;
 }
 
-const BASE = "/vendor/monaco/vs";
+const BASE = "/dist/monaco/vs";
 
 self.MonacoEnvironment = {
     getWorkerUrl(_moduleId: unknown, label: string) {

browser/monacoWin.html

@@ -24,12 +24,12 @@
 
         <script>
             const script = document.createElement("script");
-            script.src = new URL("/vendor/monaco/index.js", baseUrl);
+            script.src = new URL("/dist/monaco/index.js", baseUrl);
 
             const style = document.createElement("link");
             style.type = "text/css";
             style.rel = "stylesheet";
-            style.href = new URL("/vendor/monaco/index.css", baseUrl);
+            style.href = new URL("/dist/monaco/index.css", baseUrl);
 
             document.body.append(style, script);
         </script>

browser/userscript.meta.js

@@ -5,7 +5,6 @@
 // @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

eslint.config.mjs

@@ -1,147 +0,0 @@
-/*
- * 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", { destructuring: "all" }],
-            "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.11.7",
+    "version": "1.9.3",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -21,69 +21,67 @@
         "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 --allowJs false",
+        "generateTypes": "tspc --emitDeclarationOnly --declaration --outDir packages/vencord-types",
-        "inject": "node scripts/runInstaller.mjs -- --install",
+        "inject": "node scripts/runInstaller.mjs",
-        "uninject": "node scripts/runInstaller.mjs -- --uninstall",
+        "uninject": "node scripts/runInstaller.mjs",
-        "lint": "eslint",
+        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern src/userplugins",
         "lint-styles": "stylelint \"src/**/*.css\" --ignore-pattern src/userplugins",
         "lint:fix": "pnpm lint --fix",
-        "test": "pnpm buildStandalone && pnpm testTsc && pnpm lint && pnpm lint-styles && pnpm generatePluginJson",
+        "test": "pnpm buildStandalone && pnpm lint && pnpm lint-styles && pnpm testTsc && pnpm generatePluginJson",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
         "testTsc": "tsc --noEmit"
     },
     "dependencies": {
-        "@intrnl/xxhash64": "^0.1.2",
+        "@fluent/langneg": "^0.7.0",
+        "@sapphi-red/web-noise-suppressor": "0.3.3",
         "@vap/core": "0.0.12",
         "@vap/shiki": "0.10.5",
-        "fflate": "^0.8.2",
+        "eslint-plugin-simple-header": "^1.0.2",
+        "fflate": "^0.7.4",
         "gifenc": "github:mattdesl/gifenc#64842fca317b112a8590f8fef2bf3825da8f6fe3",
-        "monaco-editor": "^0.52.2",
+        "monaco-editor": "^0.50.0",
-        "nanoid": "^5.1.5",
+        "nanoid": "^4.0.2",
         "virtual-merge": "^1.0.1"
     },
     "devDependencies": {
-        "@stylistic/eslint-plugin": "^4.2.0",
+        "@types/chrome": "^0.0.246",
-        "@types/chrome": "^0.0.312",
+        "@types/diff": "^5.0.3",
-        "@types/diff": "^7.0.2",
+        "@types/lodash": "^4.14.194",
-        "@types/lodash": "^4.17.14",
+        "@types/node": "^18.16.3",
-        "@types/node": "^22.13.13",
+        "@types/react": "^18.2.0",
-        "@types/react": "^19.0.10",
+        "@types/react-dom": "^18.2.1",
-        "@types/react-dom": "^19.0.4",
+        "@types/yazl": "^2.4.2",
-        "@types/yazl": "^2.4.5",
+        "@typescript-eslint/eslint-plugin": "^5.59.1",
-        "diff": "^7.0.0",
+        "@typescript-eslint/parser": "^5.59.1",
+        "diff": "^5.1.0",
         "discord-types": "^1.3.26",
-        "esbuild": "^0.25.1",
+        "esbuild": "^0.15.18",
-        "eslint": "9.20.1",
+        "eslint": "^8.46.0",
         "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-plugin-path-alias": "2.1.0",
+        "eslint-plugin-path-alias": "^1.0.0",
-        "eslint-plugin-react": "^7.37.3",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
-        "eslint-plugin-simple-header": "^1.2.1",
+        "eslint-plugin-unused-imports": "^2.0.0",
-        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "highlight.js": "10.6.0",
-        "eslint-plugin-unused-imports": "^4.1.4",
-        "highlight.js": "11.11.1",
         "html-minifier-terser": "^7.2.0",
-        "moment": "^2.22.2",
+        "moment": "^2.29.4",
-        "puppeteer-core": "^24.4.0",
+        "puppeteer-core": "^19.11.1",
-        "standalone-electron-types": "^34.2.0",
+        "standalone-electron-types": "^1.0.0",
-        "stylelint": "^16.17.0",
+        "stylelint": "^15.6.0",
-        "stylelint-config-standard": "^37.0.0",
+        "stylelint-config-standard": "^33.0.0",
-        "ts-patch": "^3.3.0",
+        "ts-patch": "^3.1.2",
-        "ts-pattern": "^5.6.0",
+        "tsx": "^3.12.7",
-        "tsx": "^4.19.3",
+        "type-fest": "^3.9.0",
-        "type-fest": "^4.38.0",
+        "typescript": "^5.4.5",
-        "typescript": "^5.8.2",
+        "typescript-transform-paths": "^3.4.7",
-        "typescript-eslint": "^8.28.0",
-        "typescript-transform-paths": "^3.5.5",
         "zip-local": "^0.3.5"
     },
-    "packageManager": "pnpm@10.4.1",
+    "packageManager": "pnpm@9.1.0",
     "pnpm": {
         "patchedDependencies": {
-            "eslint@9.20.1": "patches/eslint@9.20.1.patch",
+            "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
-            "eslint-plugin-path-alias@2.1.0": "patches/eslint-plugin-path-alias@2.1.0.patch"
+            "eslint@8.46.0": "patches/eslint@8.46.0.patch"
         },
         "peerDependencyRules": {
             "ignoreMissing": [
@@ -95,14 +93,18 @@
             "source-map-resolve": "*",
             "resolve-url": "*",
             "source-map-url": "*",
-            "urix": "*",
+            "urix": "*"
-            "q": "*"
+        }
+    },
+    "webExt": {
+        "artifactsDir": "./dist",
+        "build": {
+            "overwriteDest": true
         },
-        "onlyBuiltDependencies": [
+        "sourceDir": "./dist/firefox-unpacked"
-            "esbuild"
-        ]
     },
     "engines": {
-        "node": ">=18"
+        "node": ">=18",
+        "pnpm": ">=9"
     }
 }

packages/vencord-types/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vencord/types",
     "private": false,
-    "version": "1.11.5",
+    "version": "0.1.3",
     "description": "",
     "types": "index.d.ts",
     "scripts": {
@@ -13,16 +13,16 @@
     "license": "GPL-3.0",
     "devDependencies": {
         "@types/fs-extra": "^11.0.4",
-        "fs-extra": "^11.3.0",
+        "fs-extra": "^11.2.0",
-        "tsx": "^4.19.2"
+        "tsx": "^3.12.6"
     },
     "dependencies": {
-        "@types/lodash": "4.17.15",
+        "@types/lodash": "^4.14.191",
-        "@types/node": "^22.13.4",
+        "@types/node": "^18.11.18",
-        "@types/react": "18.3.1",
+        "@types/react": "^18.2.0",
-        "@types/react-dom": "18.3.1",
+        "@types/react-dom": "^18.0.10",
         "discord-types": "^1.3.26",
-        "standalone-electron-types": "^34.2.0",
+        "standalone-electron-types": "^1.0.0",
-        "type-fest": "^4.35.0"
+        "type-fest": "^3.5.3"
     }
 }

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

@@ -0,0 +1,13 @@
+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

@@ -1,14 +0,0 @@
-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

@@ -17,41 +17,38 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// @ts-check
+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, commonRendererPlugins, watch, buildOrWatchAll, stringifyValues } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, resolvePluginName, VERSION, watch } from "./common.mjs";
 
-const defines = stringifyValues({
+const defines = {
     IS_STANDALONE,
     IS_DEV,
     IS_REPORTER,
     IS_UPDATER_DISABLED,
     IS_WEB: false,
     IS_EXTENSION: false,
-    VERSION,
+    VERSION: JSON.stringify(VERSION),
     BUILD_TIMESTAMP
-});
+};
 
-if (defines.IS_STANDALONE === "false") {
+if (defines.IS_STANDALONE === false)
     // If this is a local build (not standalone), optimize
     // for the specific platform we're on
     defines["process.platform"] = JSON.stringify(process.platform);
-}
 
 /**
- * @type {import("esbuild").BuildOptions}
+ * @type {esbuild.BuildOptions}
  */
 const nodeCommonOpts = {
     ...commonOpts,
-    define: defines,
     format: "cjs",
     platform: "node",
     target: ["esnext"],
-    // @ts-ignore this is never undefined
+    external: ["electron", "original-fs", "~pluginNatives", ...commonOpts.external],
-    external: ["electron", "original-fs", "~pluginNatives", ...commonOpts.external]
+    define: defines
 };
 
 const sourceMapFooter = s => watch ? "" : `//# sourceMappingURL=vencord://${s}.js.map`;
@@ -105,27 +102,25 @@ const globNativesPlugin = {
     }
 };
 
-/** @type {import("esbuild").BuildOptions[]} */
+await Promise.all([
-const buildConfigs = ([
     // Discord Desktop main & renderer & preload
-    {
+    esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
         outfile: "dist/patcher.js",
         footer: { js: "//# sourceURL=VencordPatcher\n" + sourceMapFooter("patcher") },
         sourcemap,
-        plugins: [
-            // @ts-ignore this is never undefined
-            ...nodeCommonOpts.plugins,
-            globNativesPlugin
-        ],
         define: {
             ...defines,
-            IS_DISCORD_DESKTOP: "true",
+            IS_DISCORD_DESKTOP: true,
-            IS_VESKTOP: "false"
+            IS_VESKTOP: false
-        }
+        },
-    },
+        plugins: [
-    {
+            ...nodeCommonOpts.plugins,
+            globNativesPlugin
+        ]
+    }),
+    esbuild.build({
         ...commonOpts,
         entryPoints: ["src/Vencord.ts"],
         outfile: "dist/renderer.js",
@@ -136,15 +131,15 @@ const buildConfigs = ([
         sourcemap,
         plugins: [
             globPlugins("discordDesktop"),
-            ...commonRendererPlugins
+            ...commonOpts.plugins
         ],
         define: {
             ...defines,
-            IS_DISCORD_DESKTOP: "true",
+            IS_DISCORD_DESKTOP: true,
-            IS_VESKTOP: "false"
+            IS_VESKTOP: false
         }
-    },
+    }),
-    {
+    esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/preload.ts"],
         outfile: "dist/preload.js",
@@ -152,29 +147,29 @@ const buildConfigs = ([
         sourcemap,
         define: {
             ...defines,
-            IS_DISCORD_DESKTOP: "true",
+            IS_DISCORD_DESKTOP: true,
-            IS_VESKTOP: "false"
+            IS_VESKTOP: false
         }
-    },
+    }),
 
     // Vencord Desktop main & renderer & preload
-    {
+    esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
         outfile: "dist/vencordDesktopMain.js",
         footer: { js: "//# sourceURL=VencordDesktopMain\n" + sourceMapFooter("vencordDesktopMain") },
         sourcemap,
+        define: {
+            ...defines,
+            IS_DISCORD_DESKTOP: false,
+            IS_VESKTOP: true
+        },
         plugins: [
             ...nodeCommonOpts.plugins,
             globNativesPlugin
-        ],
+        ]
-        define: {
+    }),
-            ...defines,
+    esbuild.build({
-            IS_DISCORD_DESKTOP: "false",
-            IS_VESKTOP: "true"
-        }
-    },
-    {
         ...commonOpts,
         entryPoints: ["src/Vencord.ts"],
         outfile: "dist/vencordDesktopRenderer.js",
@@ -185,15 +180,15 @@ const buildConfigs = ([
         sourcemap,
         plugins: [
             globPlugins("vencordDesktop"),
-            ...commonRendererPlugins
+            ...commonOpts.plugins
         ],
         define: {
             ...defines,
-            IS_DISCORD_DESKTOP: "false",
+            IS_DISCORD_DESKTOP: false,
-            IS_VESKTOP: "true"
+            IS_VESKTOP: true
         }
-    },
+    }),
-    {
+    esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/preload.ts"],
         outfile: "dist/vencordDesktopPreload.js",
@@ -201,10 +196,14 @@ const buildConfigs = ([
         sourcemap,
         define: {
             ...defines,
-            IS_DISCORD_DESKTOP: "false",
+            IS_DISCORD_DESKTOP: false,
-            IS_VESKTOP: "true"
+            IS_VESKTOP: true
         }
-    }
+    }),
-]);
+]).catch(err => {
-
+    console.error("Build failed");
-await buildOrWatchAll(buildConfigs);
+    console.error(err.message);
+    // make ci fail
+    if (!commonOpts.watch)
+        process.exitCode = 1;
+});

scripts/build/buildWeb.mjs

@@ -17,30 +17,29 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// @ts-check
+import esbuild from "esbuild";
-
 import { readFileSync } from "fs";
 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, commonRendererPlugins, buildOrWatchAll, stringifyValues } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, globPlugins, IS_DEV, IS_REPORTER, VERSION } from "./common.mjs";
 
 /**
- * @type {import("esbuild").BuildOptions}
+ * @type {esbuild.BuildOptions}
  */
 const commonOptions = {
     ...commonOpts,
     entryPoints: ["browser/Vencord.ts"],
-    format: "iife",
     globalName: "Vencord",
+    format: "iife",
     external: ["~plugins", "~git-hash", "/assets/*"],
-    target: ["esnext"],
     plugins: [
         globPlugins("web"),
-        ...commonRendererPlugins
+        ...commonOpts.plugins,
     ],
-    define: stringifyValues({
+    target: ["esnext"],
+    define: {
         IS_WEB: true,
         IS_EXTENSION: false,
         IS_STANDALONE: true,
@@ -49,9 +48,9 @@ const commonOptions = {
         IS_DISCORD_DESKTOP: false,
         IS_VESKTOP: false,
         IS_UPDATER_DISABLED: true,
-        VERSION,
+        VERSION: JSON.stringify(VERSION),
         BUILD_TIMESTAMP
-    })
+    }
 };
 
 const MonacoWorkerEntryPoints = [
@@ -59,59 +58,65 @@ const MonacoWorkerEntryPoints = [
     "vs/editor/editor.worker.js"
 ];
 
-/** @type {import("esbuild").BuildOptions[]} */
+const RnNoiseFiles = [
-const buildConfigs = [
+    "dist/rnnoise.wasm",
-    {
+    "dist/rnnoise_simd.wasm",
-        entryPoints: MonacoWorkerEntryPoints.map(entry => `node_modules/monaco-editor/esm/${entry}`),
+    "dist/rnnoise/workletProcessor.js",
-        bundle: true,
+    "LICENSE"
-        minify: true,
-        format: "iife",
-        outbase: "node_modules/monaco-editor/esm/",
-        outdir: "dist/vendor/monaco"
-    },
-    {
-        entryPoints: ["browser/monaco.ts"],
-        bundle: true,
-        minify: true,
-        format: "iife",
-        outfile: "dist/vendor/monaco/index.js",
-        loader: {
-            ".ttf": "file"
-        }
-    },
-    {
-        ...commonOptions,
-        outfile: "dist/browser.js",
-        footer: { js: "//# sourceURL=VencordWeb" }
-    },
-    {
-        ...commonOptions,
-        outfile: "dist/extension.js",
-        define: {
-            ...commonOptions.define,
-            IS_EXTENSION: "true"
-        },
-        footer: { js: "//# sourceURL=VencordWeb" }
-    },
-    {
-        ...commonOptions,
-        inject: ["browser/GMPolyfill.js", ...(commonOptions?.inject || [])],
-        define: {
-            ...commonOptions.define,
-            window: "unsafeWindow",
-        },
-        outfile: "dist/Vencord.user.js",
-        banner: {
-            js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", `${VERSION}.${new Date().getTime()}`)
-        },
-        footer: {
-            // UserScripts get wrapped in an iife, so define Vencord prop on window that returns our local
-            js: "Object.defineProperty(unsafeWindow,'Vencord',{get:()=>Vencord});"
-        }
-    }
 ];
 
-await buildOrWatchAll(buildConfigs);
+await Promise.all(
+    [
+        esbuild.build({
+            entryPoints: MonacoWorkerEntryPoints.map(entry => `node_modules/monaco-editor/esm/${entry}`),
+            bundle: true,
+            minify: true,
+            format: "iife",
+            outbase: "node_modules/monaco-editor/esm/",
+            outdir: "dist/monaco"
+        }),
+        esbuild.build({
+            entryPoints: ["browser/monaco.ts"],
+            bundle: true,
+            minify: true,
+            format: "iife",
+            outfile: "dist/monaco/index.js",
+            loader: {
+                ".ttf": "file"
+            }
+        }),
+        esbuild.build({
+            ...commonOptions,
+            outfile: "dist/browser.js",
+            footer: { js: "//# sourceURL=VencordWeb" }
+        }),
+        esbuild.build({
+            ...commonOptions,
+            outfile: "dist/extension.js",
+            define: {
+                ...commonOptions?.define,
+                IS_EXTENSION: true,
+            },
+            footer: { js: "//# sourceURL=VencordWeb" }
+        }),
+        esbuild.build({
+            ...commonOptions,
+            inject: ["browser/GMPolyfill.js", ...(commonOptions?.inject || [])],
+            define: {
+                ...(commonOptions?.define),
+                window: "unsafeWindow",
+            },
+            outfile: "dist/Vencord.user.js",
+            banner: {
+                js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", `${VERSION}.${new Date().getTime()}`)
+            },
+            footer: {
+                // UserScripts get wrapped in an iife, so define Vencord prop on window that returns our local
+                js: "Object.defineProperty(unsafeWindow,'Vencord',{get:()=>Vencord});"
+            }
+        })
+    ]
+);
 
 /**
  * @type {(dir: string) => Promise<string[]>}
@@ -145,13 +150,16 @@ async function buildExtension(target, files) {
     const entries = {
         "dist/Vencord.js": await readFile("dist/extension.js"),
         "dist/Vencord.css": await readFile("dist/extension.css"),
-        ...await loadDir("dist/vendor/monaco", "dist/"),
+        ...await loadDir("dist/monaco"),
+        ...Object.fromEntries(await Promise.all(RnNoiseFiles.map(async file =>
+            [`third-party/rnnoise/${file.replace(/^dist\//, "")}`, await readFile(`node_modules/@sapphi-red/web-noise-suppressor/${file}`)]
+        ))),
         ...Object.fromEntries(await Promise.all(files.map(async f => {
             let content = await readFile(join("browser", f));
             if (f.startsWith("manifest")) {
                 const json = JSON.parse(content.toString("utf-8"));
                 json.version = VERSION;
-                content = Buffer.from(new TextEncoder().encode(JSON.stringify(json)));
+                content = new TextEncoder().encode(JSON.stringify(json));
             }
 
             return [
@@ -197,6 +205,7 @@ if (!process.argv.includes("--skip-extension")) {
 
     Zip.sync.zip("dist/firefox-unpacked").compress().save("dist/extension-firefox.zip");
     console.info("Packed Firefox Extension written to dist/extension-firefox.zip");
+
 } else {
     await appendCssRuntime;
 }

scripts/build/common.mjs

@@ -16,13 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-// @ts-check
-
 import "../suppressExperimentalWarnings.js";
 import "../checkNodeVersion.js";
 
 import { exec, execSync } from "child_process";
-import esbuild, { build, context } from "esbuild";
+import esbuild from "esbuild";
 import { constants as FsConstants, readFileSync } from "fs";
 import { access, readdir, readFile } from "fs/promises";
 import { minify as minifyHtml } from "html-minifier-terser";
@@ -30,10 +28,9 @@ 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", "utf-8"));
+const PackageJSON = JSON.parse(readFileSync("package.json"));
 
 export const VERSION = PackageJSON.version;
 // https://reproducible-builds.org/docs/source-date-epoch/
@@ -56,34 +53,6 @@ export const banner = {
 `.trim()
 };
 
-/**
- * JSON.stringify all values in an object
- * @type {(obj: Record<string, any>) => Record<string, string>}
- */
-export function stringifyValues(obj) {
-    for (const key in obj) {
-        obj[key] = JSON.stringify(obj[key]);
-    }
-    return obj;
-}
-
-/**
- * @param {import("esbuild").BuildOptions[]} buildConfigs
- */
-export async function buildOrWatchAll(buildConfigs) {
-    if (watch) {
-        await Promise.all(buildConfigs.map(cfg =>
-            context(cfg).then(ctx => ctx.watch())
-        ));
-    } else {
-        await Promise.all(buildConfigs.map(cfg => build(cfg)))
-            .catch(error => {
-                console.error(error.message);
-                process.exit(1); // exit immediately to skip the rest of the builds
-            });
-    }
-}
-
 const PluginDefinitionNameMatcher = /definePlugin\(\{\s*(["'])?name\1:\s*(["'`])(.+?)\2/;
 /**
  * @param {string} base
@@ -324,16 +293,37 @@ export const stylePlugin = {
 };
 
 /**
- * @type {(filter: RegExp, message: string) => import("esbuild").Plugin}
+ * @type {import("esbuild").Plugin}
  */
-export const banImportPlugin = (filter, message) => ({
+export const translationPlugin = {
-    name: "ban-imports",
+    name: "translation-plugin",
-    setup: build => {
+    setup: ({ onResolve, onLoad }) => {
-        build.onResolve({ filter }, () => {
+        const filter = /^~translations$/;
-            return { errors: [{ text: message }] };
+
+        onResolve({ filter }, ({ path }) => ({
+            namespace: "translations", path
+        }));
+        onLoad({ filter, namespace: "translations" }, async () => {
+            const translations = {};
+            const locales = await readdir("./translations");
+
+            for (const locale of locales) {
+                const translationBundles = await readdir(`./translations/${locale}`);
+
+                for (const bundle of translationBundles) {
+                    const name = bundle.replace(/\.json$/, "");
+
+                    translations[locale] ??= {};
+                    translations[locale][name] = JSON.parse(await readFile(`./translations/${locale}/${bundle}`, "utf-8"));
+                }
+            }
+
+            return {
+                contents: `export default ${JSON.stringify(translations)}`,
+            };
         });
     }
-});
+};
 
 /**
  * @type {import("esbuild").BuildOptions}
@@ -341,28 +331,16 @@ export const banImportPlugin = (filter, message) => ({
 export const commonOpts = {
     logLevel: "info",
     bundle: true,
-    minify: !watch && !IS_REPORTER,
+    watch,
-    sourcemap: watch ? "inline" : "external",
+    minify: !watch,
+    sourcemap: watch ? "inline" : "",
     legalComments: "linked",
     banner,
-    plugins: [fileUrlPlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
+    plugins: [fileUrlPlugin, gitHashPlugin, gitRemotePlugin, stylePlugin, translationPlugin],
-    external: ["~plugins", "~git-hash", "~git-remote", "/assets/*"],
+    external: ["~plugins", "~git-hash", "~git-remote", "~translations", "/assets/*"],
     inject: ["./scripts/build/inject/react.mjs"],
-    jsx: "transform",
     jsxFactory: "VencordCreateElement",
-    jsxFragment: "VencordFragment"
+    jsxFragment: "VencordFragment",
+    // 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"),
-    // @ts-ignore this is never undefined
-    ...commonOpts.plugins
-];

scripts/build/tsconfig.esbuild.json

@@ -0,0 +1,7 @@
+// Work around https://github.com/evanw/esbuild/issues/2460
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "jsx": "react"
+    }
+}

scripts/generatePluginList.ts

@@ -20,7 +20,7 @@ import { Dirent, readdirSync, readFileSync, writeFileSync } from "fs";
 import { access, readFile } from "fs/promises";
 import { join, sep } from "path";
 import { normalize as posixNormalize, sep as posixSep } from "path/posix";
-import { BigIntLiteral, createSourceFile, Identifier, isArrayLiteralExpression, isCallExpression, isExportAssignment, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isSatisfiesExpression, isStringLiteral, isVariableStatement, NamedDeclaration, NodeArray, ObjectLiteralExpression, ScriptTarget, StringLiteral, SyntaxKind } from "typescript";
+import { BigIntLiteral, CallExpression, createSourceFile, Identifier, isArrayLiteralExpression, isCallExpression, isExportAssignment, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isSatisfiesExpression, isStringLiteral, isVariableStatement, LiteralExpression, NamedDeclaration, Node, NodeArray, ObjectLiteralExpression, ScriptTarget, StringLiteral, SyntaxKind } from "typescript";
 
 import { getPluginTarget } from "./utils.mjs";
 
@@ -90,6 +90,38 @@ function parseDevs() {
     throw new Error("Could not find Devs constant");
 }
 
+function isTranslationExpression(node: Node): node is CallExpression {
+    if (!isCallExpression(node)) return false;
+
+    const literal = node.expression as LiteralExpression;
+
+    if (literal.text !== "t") return false;
+
+    return true;
+}
+
+async function getTranslation(node: Node): Promise<string | null> {
+    if (!isTranslationExpression(node)) return null;
+
+    const translationString = node.arguments[0];
+
+    if (!isStringLiteral(translationString)) return null;
+
+    const splitPath = translationString.text.split(".");
+    const namespace = splitPath.shift();
+    const path = splitPath.join(".");
+
+    // load the namespace
+    const bundle = JSON.parse(
+        await readFile(`./translations/en/${namespace}.json`, "utf-8")
+    );
+
+    const dotProp = (key: string, object: any) =>
+        key.split(".").reduce((obj, key) => obj?.[key], object);
+
+    return dotProp(path, bundle);
+}
+
 async function parseFile(fileName: string) {
     const file = createSourceFile(fileName, await readFile(fileName, "utf8"), ScriptTarget.Latest);
 
@@ -120,10 +152,16 @@ async function parseFile(fileName: string) {
 
             switch (key) {
                 case "name":
-                case "description":
                     if (!isStringLiteral(value)) throw fail(`${key} is not a string literal`);
                     data[key] = value.text;
                     break;
+                case "description":
+                    if (isStringLiteral(value))
+                        data[key] = value.text;
+                    else if (isTranslationExpression(value))
+                        data[key] = (await getTranslation(value))!;
+                    else throw fail(`${key} is not a string literal or a translation function call`);
+                    break;
                 case "patches":
                     data.hasPatches = true;
                     break;

scripts/generateReport.ts

@@ -16,32 +16,28 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+/* eslint-disable no-fallthrough */
+
+// eslint-disable-next-line spaced-comment
 /// <reference types="../src/globals" />
+// eslint-disable-next-line spaced-comment
 /// <reference types="../src/modules" />
 
-import { createHmac } from "crypto";
 import { readFileSync } from "fs";
 import pup, { JSHandle } from "puppeteer-core";
 
-const logStderr = (...data: any[]) => console.error(`${CANARY ? "CANARY" : "STABLE"} ---`, ...data);
+for (const variable of ["DISCORD_TOKEN", "CHROMIUM_BIN"]) {
-
-for (const variable of ["CHROMIUM_BIN"]) {
     if (!process.env[variable]) {
-        logStderr(`Missing environment variable ${variable}`);
+        console.error(`Missing environment variable ${variable}`);
         process.exit(1);
     }
 }
 
 const CANARY = process.env.USE_CANARY === "true";
-let metaData = {
-    buildNumber: "Unknown Build Number",
-    buildHash: "Unknown Build Hash"
-};
 
 const browser = await pup.launch({
-    headless: true,
+    headless: "new",
-    executablePath: process.env.CHROMIUM_BIN,
+    executablePath: process.env.CHROMIUM_BIN
-    args: ["--no-sandbox"]
 });
 
 const page = await browser.newPage();
@@ -54,17 +50,14 @@ async function maybeGetError(handle: JSHandle): Promise<string | undefined> {
         .catch(() => undefined);
 }
 
-interface PatchInfo {
-    plugin: string;
-    type: string;
-    id: string;
-    match: string;
-    error?: string;
-};
-
 const report = {
-    badPatches: [] as PatchInfo[],
+    badPatches: [] as {
-    slowPatches: [] as PatchInfo[],
+        plugin: string;
+        type: string;
+        id: string;
+        match: string;
+        error?: string;
+    }[],
     badStarts: [] as {
         plugin: string;
         error: string;
@@ -134,88 +127,56 @@ async function printReport() {
 
     console.log();
 
-    if (process.env.WEBHOOK_URL) {
+    if (process.env.DISCORD_WEBHOOK) {
-        const patchesToEmbed = (title: string, patches: PatchInfo[], color: number) => ({
+        await fetch(process.env.DISCORD_WEBHOOK, {
-            title,
-            color,
-            description: patches.map(p => {
-                const lines = [
-                    `**__${p.plugin} (${p.type}):__**`,
-                    `ID: \`${p.id}\``,
-                    `Match: ${toCodeBlock(p.match, "Match: ".length, true)}`
-                ];
-                if (p.error) lines.push(`Error: ${toCodeBlock(p.error, "Error: ".length, true)}`);
-
-                return lines.join("\n");
-            }).join("\n\n"),
-        });
-
-        const embeds = [
-            {
-                author: {
-                    name: `Discord ${CANARY ? "Canary" : "Stable"} (${metaData.buildNumber})`,
-                    url: `https://nelly.tools/builds/app/${metaData.buildHash}`,
-                    icon_url: CANARY ? "https://cdn.discordapp.com/emojis/1252721945699549327.png?size=128" : "https://cdn.discordapp.com/emojis/1252721943463985272.png?size=128"
-                },
-                color: CANARY ? 0xfbb642 : 0x5865f2
-            },
-            report.badPatches.length > 0 && patchesToEmbed("Bad Patches", report.badPatches, 0xff0000),
-            report.slowPatches.length > 0 && patchesToEmbed("Slow Patches", report.slowPatches, 0xf0b232),
-            report.badWebpackFinds.length > 0 && {
-                title: "Bad Webpack Finds",
-                description: report.badWebpackFinds.map(f => toCodeBlock(f, 0, true)).join("\n") || "None",
-                color: 0xff0000
-            },
-            report.badStarts.length > 0 && {
-                title: "Bad Starts",
-                description: report.badStarts.map(p => {
-                    const lines = [
-                        `**__${p.plugin}:__**`,
-                        toCodeBlock(p.error, 0, true)
-                    ];
-                    return lines.join("\n");
-                }
-                ).join("\n\n") || "None",
-                color: 0xff0000
-            },
-            report.otherErrors.length > 0 && {
-                title: "Discord Errors",
-                description: report.otherErrors.length ? toCodeBlock(report.otherErrors.join("\n"), 0, true) : "None",
-                color: 0xff0000
-            }
-        ].filter(Boolean);
-
-        if (embeds.length === 1) {
-            embeds.push({
-                title: "No issues found",
-                description: "Seems like everything is working fine (for now) <:shipit:1330992641466433556>",
-                color: 0x00ff00
-            });
-        }
-
-        const body = JSON.stringify({
-            username: "Vencord Reporter" + (CANARY ? " (Canary)" : ""),
-            embeds
-        });
-
-        const headers = {
-            "Content-Type": "application/json"
-        };
-
-        // functions similar to https://docs.github.com/en/webhooks/using-webhooks/validating-webhook-deliveries
-        // used by venbot to ensure webhook invocations are genuine (since we will pass the webhook url as a workflow input which is publicly visible)
-        // generate a secret with something like `openssl rand -hex 128`
-        if (process.env.WEBHOOK_SECRET) {
-            headers["X-Signature"] = "sha256=" + createHmac("sha256", process.env.WEBHOOK_SECRET).update(body).digest("hex");
-        }
-
-        await fetch(process.env.WEBHOOK_URL, {
             method: "POST",
-            headers,
+            headers: {
-            body
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+                description: "Here's the latest Vencord Report!",
+                username: "Vencord Reporter" + (CANARY ? " (Canary)" : ""),
+                embeds: [
+                    {
+                        title: "Bad Patches",
+                        description: report.badPatches.map(p => {
+                            const lines = [
+                                `**__${p.plugin} (${p.type}):__**`,
+                                `ID: \`${p.id}\``,
+                                `Match: ${toCodeBlock(p.match, "Match: ".length, true)}`
+                            ];
+                            if (p.error) lines.push(`Error: ${toCodeBlock(p.error, "Error: ".length, true)}`);
+                            return lines.join("\n");
+                        }).join("\n\n") || "None",
+                        color: report.badPatches.length ? 0xff0000 : 0x00ff00
+                    },
+                    {
+                        title: "Bad Webpack Finds",
+                        description: report.badWebpackFinds.map(f => toCodeBlock(f, 0, true)).join("\n") || "None",
+                        color: report.badWebpackFinds.length ? 0xff0000 : 0x00ff00
+                    },
+                    {
+                        title: "Bad Starts",
+                        description: report.badStarts.map(p => {
+                            const lines = [
+                                `**__${p.plugin}:__**`,
+                                toCodeBlock(p.error, 0, true)
+                            ];
+                            return lines.join("\n");
+                        }
+                        ).join("\n\n") || "None",
+                        color: report.badStarts.length ? 0xff0000 : 0x00ff00
+                    },
+                    {
+                        title: "Discord Errors",
+                        description: report.otherErrors.length ? toCodeBlock(report.otherErrors.join("\n"), 0, true) : "None",
+                        color: report.otherErrors.length ? 0xff0000 : 0x00ff00
+                    }
+                ]
+            })
         }).then(res => {
-            if (!res.ok) logStderr(`Webhook failed with status ${res.status}`);
+            if (!res.ok) console.error(`Webhook failed with status ${res.status}`);
-            else logStderr("Posted to Webhook successfully");
+            else console.error("Posted to Discord Webhook successfully");
         });
     }
 }
@@ -224,13 +185,10 @@ page.on("console", async e => {
     const level = e.type();
     const rawArgs = e.args();
 
-    async function getText(skipFirst = true) {
+    async function getText() {
-        let args = e.args();
-        if (skipFirst) args = args.slice(1);
-
         try {
             return await Promise.all(
-                args.map(async a => {
+                e.args().map(async a => {
                     return await maybeGetError(a) || await a.jsonValue();
                 })
             ).then(a => a.join(" ").trim());
@@ -243,12 +201,6 @@ page.on("console", async e => {
 
     const isVencord = firstArg === "[Vencord]";
     const isDebug = firstArg === "[PUP_DEBUG]";
-    const isReporterMeta = firstArg === "[REPORTER_META]";
-
-    if (isReporterMeta) {
-        metaData = await rawArgs[1].jsonValue() as any;
-        return;
-    }
 
     outer:
     if (isVencord) {
@@ -262,21 +214,18 @@ page.on("console", async e => {
 
         switch (tag) {
             case "WebpackInterceptor:":
-                const patchFailMatch = message.match(/Patch by (.+?) (had no effect|errored|found no module) \(Module id is (.+?)\): (.+)/);
+                const patchFailMatch = message.match(/Patch by (.+?) (had no effect|errored|found no module) \(Module id is (.+?)\): (.+)/)!;
-                const patchSlowMatch = message.match(/Patch by (.+?) (took [\d.]+?ms) \(Module id is (.+?)\): (.+)/);
+                if (!patchFailMatch) break;
-                const match = patchFailMatch ?? patchSlowMatch;
-                if (!match) break;
 
-                logStderr(await getText());
+                console.error(await getText());
                 process.exitCode = 1;
 
-                const [, plugin, type, id, regex] = match;
+                const [, plugin, type, id, regex] = patchFailMatch;
-                const list = patchFailMatch ? report.badPatches : report.slowPatches;
+                report.badPatches.push({
-                list.push({
                     plugin,
                     type,
                     id,
-                    match: regex,
+                    match: regex.replace(/\[A-Za-z_\$\]\[\\w\$\]\*/g, "\\i"),
                     error: await maybeGetError(e.args()[3])
                 });
 
@@ -285,7 +234,7 @@ page.on("console", async e => {
                 const failedToStartMatch = message.match(/Failed to start (.+)/);
                 if (!failedToStartMatch) break;
 
-                logStderr(await getText());
+                console.error(await getText());
                 process.exitCode = 1;
 
                 const [, name] = failedToStartMatch;
@@ -296,7 +245,7 @@ page.on("console", async e => {
 
                 break;
             case "LazyChunkLoader:":
-                logStderr(await getText());
+                console.error(await getText());
 
                 switch (message) {
                     case "A fatal error occurred:":
@@ -305,7 +254,7 @@ page.on("console", async e => {
 
                 break;
             case "Reporter:":
-                logStderr(await getText());
+                console.error(await getText());
 
                 switch (message) {
                     case "A fatal error occurred:":
@@ -323,36 +272,47 @@ page.on("console", async e => {
     }
 
     if (isDebug) {
-        logStderr(await getText());
+        console.error(await getText());
     } else if (level === "error") {
-        const text = await getText(false);
+        const text = await getText();
 
         if (text.length && !text.startsWith("Failed to load resource: the server responded with a status of") && !text.includes("Webpack")) {
             if (IGNORED_DISCORD_ERRORS.some(regex => text.match(regex))) {
                 report.ignoredErrors.push(text);
             } else {
-                logStderr("[Unexpected Error]", text);
+                console.error("[Unexpected Error]", text);
                 report.otherErrors.push(text);
             }
         }
     }
 });
 
-page.on("error", e => logStderr("[Error]", e.message));
+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") && !/^.{1,2}$/.test(e.message)) {
+    if (!e.message.startsWith("Object") && !e.message.includes("Cannot find module")) {
-        logStderr("[Page Error]", e.message);
+        console.error("[Page Error]", e.message);
         report.otherErrors.push(e.message);
     } else {
         report.ignoredErrors.push(e.message);
     }
 });
 
+async function reporterRuntime(token: string) {
+    Vencord.Webpack.waitFor(
+        "loginToken",
+        m => {
+            console.log("[PUP_DEBUG]", "Logging in with token...");
+            m.loginToken(token);
+        }
+    );
+}
+
 await page.evaluateOnNewDocument(`
     if (location.host.endsWith("discord.com")) {
         ${readFileSync("./dist/browser.js", "utf-8")};
+        (${reporterRuntime.toString()})(${JSON.stringify(process.env.DISCORD_TOKEN)});
     }
 `);
 

scripts/runInstaller.mjs

@@ -118,11 +118,8 @@ const installerBin = await ensureBinary();
 
 console.log("Now running Installer...");
 
-const argStart = process.argv.indexOf("--");
-const args = argStart === -1 ? [] : process.argv.slice(argStart + 1);
-
 try {
-    execFileSync(installerBin, args, {
+    execFileSync(installerBin, {
         stdio: "inherit",
         env: {
             ...process.env,

setup.bat

@@ -1,20 +0,0 @@
-@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

@@ -1,18 +0,0 @@
-#!/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/Vencord.ts

@@ -23,7 +23,6 @@ export * as Util from "./utils";
 export * as QuickCss from "./utils/quickCss";
 export * as Updater from "./utils/updater";
 export * as Webpack from "./webpack";
-export * as WebpackPatcher from "./webpack/patchWebpack";
 export { PlainSettings, Settings };
 
 import "./utils/quickCss";
@@ -39,6 +38,7 @@ import { patches, PMLogger, startAllPlugins } from "./plugins";
 import { localStorage } from "./utils/localStorage";
 import { relaunch } from "./utils/native";
 import { getCloudSettings, putCloudSettings } from "./utils/settingsSync";
+import { t } from "./utils/translation";
 import { checkForUpdates, update, UpdateLogger } from "./utils/updater";
 import { onceReady } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
@@ -55,9 +55,8 @@ async function syncSettings() {
     ) {
         // show a notification letting them know and tell them how to fix it
         showNotification({
-            title: "Cloud Integrations",
+            title: t("vencord.cloudIntegrations"),
-            body: "We've noticed you have cloud integrations enabled in another client! Due to limitations, you will " +
+            body: t("vencord.cloud.integrations.reauthenticate"),
-                "need to re-authenticate to continue using them. Click here to go to the settings page to do so!",
             color: "var(--yellow-360)",
             onClick: () => SettingsRouter.open("VencordCloud")
         });
@@ -77,8 +76,8 @@ async function syncSettings() {
             // there was an error to notify the user, but besides that we only want to show one notification instead of all
             // of the possible ones it has (such as when your settings are newer).
             showNotification({
-                title: "Cloud Settings",
+                title: t("vencord.cloudSettings"),
-                body: "Your settings have been updated! Click here to restart to fully apply changes!",
+                body: t("vencord.cloud.settings.updated"),
                 color: "var(--green-360)",
                 onClick: relaunch
             });
@@ -101,8 +100,8 @@ async function init() {
                 await update();
                 if (Settings.autoUpdateNotification)
                     setTimeout(() => showNotification({
-                        title: "Vencord has been updated!",
+                        title: t("vencord.update.updated"),
-                        body: "Click here to restart",
+                        body: t("vencord.update.clickToRestart"),
                         permanent: true,
                         noPersist: true,
                         onClick: relaunch
@@ -111,8 +110,8 @@ async function init() {
             }
 
             setTimeout(() => showNotification({
-                title: "A Vencord update is available!",
+                title: t("vencord.update.available"),
-                body: "Click here to view the update",
+                body: t("vencord.update.clickToView"),
                 permanent: true,
                 noPersist: true,
                 onClick: openUpdaterModal!

src/VencordNative.ts

@@ -4,11 +4,11 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import type { Settings } from "@api/Settings";
 import { PluginIpcMappings } from "@main/ipcPlugins";
 import type { UserThemeHeader } from "@main/themes";
 import { IpcEvents } from "@shared/IpcEvents";
 import { IpcRes } from "@utils/types";
+import type { Settings } from "api/Settings";
 import { ipcRenderer } from "electron";
 
 function invoke<T = any>(event: IpcEvents, ...args: any[]) {

src/api/Badges.ts

@@ -57,7 +57,7 @@ const Badges = new Set<ProfileBadge>();
  * Register a new badge with the Badges API
  * @param badge The badge to register
  */
-export function addProfileBadge(badge: ProfileBadge) {
+export function addBadge(badge: ProfileBadge) {
     badge.component &&= ErrorBoundary.wrap(badge.component, { noop: true });
     Badges.add(badge);
 }
@@ -66,7 +66,7 @@ export function addProfileBadge(badge: ProfileBadge) {
  * Unregister a badge from the Badges API
  * @param badge The badge to remove
  */
-export function removeProfileBadge(badge: ProfileBadge) {
+export function removeBadge(badge: ProfileBadge) {
     return Badges.delete(badge);
 }
 
@@ -100,3 +100,20 @@ 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, ButtonWrapperClasses, Tooltip } from "@webpack/common";
+import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
 import { Channel } from "discord-types/general";
-import { HTMLProps, JSX, MouseEventHandler, ReactNode } from "react";
+import { HTMLProps, 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 ChatBarButtonFactory = (props: ChatBarProps & { isMainChat: boolean; }) => JSX.Element | null;
+export type ChatBarButton = (props: ChatBarProps & { isMainChat: boolean; }) => JSX.Element | null;
 
-const buttonFactories = new Map<string, ChatBarButtonFactory>();
+const buttonFactories = new Map<string, ChatBarButton>();
 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: ChatBarButtonFactory) => buttonFactories.set(id, button);
+export const addChatBarButton = (id: string, button: ChatBarButton) => buttonFactories.set(id, button);
 export const removeChatBarButton = (id: string) => buttonFactories.delete(id);
 
 export interface ChatBarButtonProps {
@@ -99,8 +99,7 @@ export interface ChatBarButtonProps {
     tooltip: string;
     onClick: MouseEventHandler<HTMLButtonElement>;
     onContextMenu?: MouseEventHandler<HTMLButtonElement>;
-    onAuxClick?: MouseEventHandler<HTMLButtonElement>;
+    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu">;
-    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu" | "onAuxClick">;
 }
 export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
     return (
@@ -110,13 +109,12 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
                     <Button
                         aria-label={props.tooltip}
                         size=""
-                        look={Button.Looks.BLANK}
+                        look={ButtonLooks.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,7 +16,6 @@
  * 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";
@@ -31,7 +30,6 @@ export const commands = {} as Record<string, Command>;
 // hack for plugins being evaluated before we can grab these from webpack
 const OptPlaceholder = Symbol("OptionalMessageOption") as any as Option;
 const ReqPlaceholder = Symbol("RequiredMessageOption") as any as Option;
-
 /**
  * Optional message option named "message" you can use in commands.
  * Used in "tableflip" or "shrug"
@@ -45,18 +43,13 @@ export let OptionalMessageOption: Option = OptPlaceholder;
  */
 export let RequiredMessageOption: Option = ReqPlaceholder;
 
-// Discord's command list has random gaps for some reason, which can cause issues while rendering the commands
-// Add this offset to every added command to keep them unique
-let commandIdOffset: number;
-
 export const _init = function (cmds: Command[]) {
     try {
         BUILT_IN = cmds;
-        OptionalMessageOption = cmds.find(c => (c.untranslatedName || c.displayName) === "shrug")!.options![0];
+        OptionalMessageOption = cmds.find(c => c.name === "shrug")!.options![0];
-        RequiredMessageOption = cmds.find(c => (c.untranslatedName || c.displayName) === "me")!.options![0];
+        RequiredMessageOption = cmds.find(c => c.name === "me")!.options![0];
-        commandIdOffset = Math.abs(BUILT_IN.map(x => Number(x.id)).sort((x, y) => x - y)[0]) - BUILT_IN.length;
     } catch (e) {
-        new Logger("CommandsAPI").error("Failed to load CommandsApi", e, " - cmds is", cmds);
+        console.error("Failed to load CommandsApi");
     }
     return cmds;
 } as never;
@@ -116,7 +109,6 @@ 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}`,
@@ -146,9 +138,7 @@ 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.id ??= `-${BUILT_IN.length + 1}`;
-    command.untranslatedDescription ??= command.description;
-    command.id ??= `-${BUILT_IN.length + commandIdOffset + 1}`;
     command.applicationId ??= "-1"; // BUILT_IN;
     command.type ??= ApplicationCommandType.CHAT_INPUT;
     command.inputType ??= ApplicationCommandInputType.BUILT_IN_TEXT;

src/api/Commands/types.ts

@@ -93,10 +93,8 @@ 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<any> | null>, ...args: Array<any>) => void;
+export type NavContextMenuPatchCallback = (children: Array<ReactElement | 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<any> | null>, ...args: Array<any>) => void;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | 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: string[] = Array.isArray(navId) ? navId : [navId];
+    const navIds = Array.isArray(navId) ? navId : [navId as string];
 
     const results = navIds.map(id => navPatches.get(id)?.delete(patch) ?? false);
 
@@ -90,20 +90,19 @@ 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<any> | null | undefined>, matchSubstring = false): Array<ReactElement<any> | null | undefined> | null {
+export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null>): Array<ReactElement | null> | null {
     for (const child of children) {
         if (child == null) continue;
 
         if (Array.isArray(child)) {
-            const found = findGroupChildrenByChildId(id, child, matchSubstring);
+            const found = findGroupChildrenByChildId(id, child);
             if (found !== null) return found;
         }
 
         if (
-            (Array.isArray(id) && id.some(id => matchSubstring ? child.props?.id?.includes(id) : child.props?.id === id))
+            (Array.isArray(id) && id.some(id => child.props?.id === id))
-            || (matchSubstring ? child.props?.id?.includes(id) : child.props?.id === id)
+            || child.props?.id === id
         ) return children;
 
         let nextChildren = child.props?.children;
@@ -113,7 +112,7 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
                 child.props.children = nextChildren;
             }
 
-            const found = findGroupChildrenByChildId(id, nextChildren, matchSubstring);
+            const found = findGroupChildrenByChildId(id, nextChildren);
             if (found !== null) return found;
         }
     }
@@ -122,9 +121,9 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
 }
 
 interface ContextMenuProps {
-    contextMenuAPIArguments?: Array<any>;
+    contextMenuApiArguments?: Array<any>;
     navId: string;
-    children: Array<ReactElement<any> | null>;
+    children: Array<ReactElement | null>;
     "aria-label": string;
     onSelect: (() => void) | undefined;
     onClose: (callback: (...args: Array<any>) => any) => void;
@@ -136,7 +135,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];
@@ -144,7 +143,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);
             }
@@ -153,7 +152,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);
         }
@@ -162,7 +161,7 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
     return props;
 }
 
-function cloneMenuChildren(obj: ReactElement<any> | Array<ReactElement<any> | null> | null) {
+function cloneMenuChildren(obj: ReactElement | Array<ReactElement | null> | null) {
     if (Array.isArray(obj)) {
         return obj.map(cloneMenuChildren);
     }

src/api/MemberListDecorators.ts

@@ -16,9 +16,7 @@
  * 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[];
@@ -40,39 +38,27 @@ interface DecoratorProps {
     user: User;
     [key: string]: any;
 }
-export type MemberListDecoratorFactory = (props: DecoratorProps) => JSX.Element | null;
+export type Decorator = (props: DecoratorProps) => JSX.Element | null;
 type OnlyIn = "guilds" | "dms";
 
-export const decoratorsFactories = new Map<string, { render: MemberListDecoratorFactory, onlyIn?: OnlyIn; }>();
+export const decorators = new Map<string, { decorator: Decorator, onlyIn?: OnlyIn; }>();
 
-export function addMemberListDecorator(identifier: string, render: MemberListDecoratorFactory, onlyIn?: OnlyIn) {
+export function addDecorator(identifier: string, decorator: Decorator, onlyIn?: OnlyIn) {
-    decoratorsFactories.set(identifier, { render, onlyIn });
+    decorators.set(identifier, { decorator, onlyIn });
 }
 
-export function removeMemberListDecorator(identifier: string) {
+export function removeDecorator(identifier: string) {
-    decoratorsFactories.delete(identifier);
+    decorators.delete(identifier);
 }
 
-export function __getDecorators(props: DecoratorProps): JSX.Element {
+export function __getDecorators(props: DecoratorProps): (JSX.Element | null)[] {
     const isInGuild = !!(props.guildId);
-
+    return Array.from(decorators.values(), decoratorObj => {
-    const decorators = Array.from(
+        const { decorator, onlyIn } = decoratorObj;
-        decoratorsFactories.entries(),
+        // this can most likely be done cleaner
-        ([key, { render: Decorator, onlyIn }]) => {
+        if (!onlyIn || (onlyIn === "guilds" && isInGuild) || (onlyIn === "dms" && !isInGuild)) {
-            if ((onlyIn === "guilds" && !isInGuild) || (onlyIn === "dms" && isInGuild))
+            return decorator(props);
-                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.ts

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

src/api/MessageDecorations.ts

@@ -16,11 +16,9 @@
  * 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";
 
-export interface MessageDecorationProps {
+interface DecorationProps {
     author: {
         /**
          * Will be username if the user has no nickname
@@ -46,31 +44,20 @@ export interface MessageDecorationProps {
     message: Message;
     [key: string]: any;
 }
-export type MessageDecorationFactory = (props: MessageDecorationProps) => JSX.Element | null;
+export type Decoration = (props: DecorationProps) => JSX.Element | null;
 
-export const decorationsFactories = new Map<string, MessageDecorationFactory>();
+export const decorations = new Map<string, Decoration>();
 
-export function addMessageDecoration(identifier: string, decoration: MessageDecorationFactory) {
+export function addDecoration(identifier: string, decoration: Decoration) {
-    decorationsFactories.set(identifier, decoration);
+    decorations.set(identifier, decoration);
 }
 
-export function removeMessageDecoration(identifier: string) {
+export function removeDecoration(identifier: string) {
-    decorationsFactories.delete(identifier);
+    decorations.delete(identifier);
 }
 
-export function __addDecorationsToMessage(props: MessageDecorationProps): JSX.Element {
+export function __addDecorationsToMessage(props: DecorationProps): (JSX.Element | null)[] {
-    const decorations = Array.from(
+    return [...decorations.values()].map(decoration => {
-        decorationsFactories.entries(),
+        return decoration(props);
-        ([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 MessageSendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
+export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
-export type MessageEditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void | { cancel: boolean; }>;
+export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void | { cancel: boolean; }>;
 
-const sendListeners = new Set<MessageSendListener>();
+const sendListeners = new Set<SendListener>();
-const editListeners = new Set<MessageEditListener>();
+const editListeners = new Set<EditListener>();
 
 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 addMessagePreSendListener(listener: MessageSendListener) {
+export function addPreSendListener(listener: SendListener) {
     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 addMessagePreEditListener(listener: MessageEditListener) {
+export function addPreEditListener(listener: EditListener) {
     editListeners.add(listener);
     return listener;
 }
-export function removeMessagePreSendListener(listener: MessageSendListener) {
+export function removePreSendListener(listener: SendListener) {
     return sendListeners.delete(listener);
 }
-export function removeMessagePreEditListener(listener: MessageEditListener) {
+export function removePreEditListener(listener: EditListener) {
     return editListeners.delete(listener);
 }
 
 
 // Message clicks
-export type MessageClickListener = (message: Message, channel: Channel, event: MouseEvent) => void;
+type ClickListener = (message: Message, channel: Channel, event: MouseEvent) => void;
 
-const listeners = new Set<MessageClickListener>();
+const listeners = new Set<ClickListener>();
 
 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 addMessageClickListener(listener: MessageClickListener) {
+export function addClickListener(listener: ClickListener) {
     listeners.add(listener);
     return listener;
 }
 
-export function removeMessageClickListener(listener: MessageClickListener) {
+export function removeClickListener(listener: ClickListener) {
     return listeners.delete(listener);
 }

src/api/MessagePopover.ts

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

src/api/ServerList.ts

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

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, useEffect } from "@webpack/common";
+import { React } from "@webpack/common";
 
 import plugins from "~plugins";
 
@@ -32,10 +32,9 @@ export interface Settings {
     autoUpdate: boolean;
     autoUpdateNotification: boolean,
     useQuickCss: boolean;
-    eagerPatches: boolean;
-    enabledThemes: string[];
     enableReactDevtools: boolean;
     themeLinks: string[];
+    enabledThemes: string[];
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
@@ -82,7 +81,6 @@ const DefaultSettings: Settings = {
     autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
-    eagerPatches: IS_REPORTER,
     enabledThemes: [],
     enableReactDevtools: false,
     frameless: false,
@@ -194,7 +192,7 @@ export const Settings = SettingsStore.store;
 export function useSettings(paths?: UseSettings<Settings>[]) {
     const [, forceUpdate] = React.useReducer(() => ({}), {});
 
-    useEffect(() => {
+    React.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,17 +220,6 @@ 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>,
@@ -243,10 +230,6 @@ 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 }) {
+export function Badge({ text, color }): JSX.Element {
     return (
         <div className="vc-plugins-badge" style={{
             backgroundColor: color,

src/components/DonateButton.tsx

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

src/components/ErrorBoundary.tsx

@@ -19,6 +19,7 @@
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { LazyComponent } from "@utils/react";
+import { t } from "@utils/translation";
 import { React } from "@webpack/common";
 
 import { ErrorCard } from "./ErrorCard";
@@ -27,7 +28,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; wrappedProps: T; }>>;
+    fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; }>>;
     /** 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,7 +71,8 @@ const ErrorBoundary = LazyComponent(() => {
 
         componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
             this.props.onError?.({ error, errorInfo, props: this.props.wrappedProps });
-            logger.error(`${this.props.message || "A component threw an Error"}\n`, error, errorInfo.componentStack);
+            logger.error("A component threw an Error\n", error);
+            logger.error("Component Stack", errorInfo.componentStack);
         }
 
         render() {
@@ -79,20 +81,16 @@ const ErrorBoundary = LazyComponent(() => {
             if (this.props.noop) return null;
 
             if (this.props.fallback)
-                return (
+                return <this.props.fallback
-                    <this.props.fallback
+                    children={this.props.children}
-                        wrappedProps={this.props.wrappedProps}
+                    {...this.state}
-                        {...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.";
+            const msg = this.props.message || t("vencord.errorBoundaryDescription");
 
             return (
                 <ErrorCard style={{ overflow: "hidden" }}>
-                    <h1>Oh no!</h1>
+                    <h1>{t("vencord.ohNo")}</h1>
                     <p>{msg}</p>
                     <code>
                         {this.state.message}

src/components/ExpandableHeader.css

@@ -0,0 +1,12 @@
+.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

@@ -0,0 +1,121 @@
+/*
+ * 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[];
+    forceOpen?: boolean;
+}
+
+export function ExpandableHeader({
+    children,
+    onMoreClick,
+    buttons,
+    moreTooltipText,
+    onDropDownClick,
+    headerText,
+    defaultState = false,
+    forceOpen = false,
+}: ExpandableHeaderProps) {
+    const [showContent, setShowContent] = useState(defaultState || forceOpen);
+
+    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);
+                                }}
+                                disabled={forceOpen}
+                            >
+                                <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

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { CSSProperties, JSX } from "react";
+import { CSSProperties } from "react";
 
 interface Props {
     columns: number;

src/components/Heart.tsx

@@ -16,22 +16,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { classes } from "@utils/misc";
+export function Heart() {
-import { SVGProps } from "react";
-
-export function Heart(props: SVGProps<SVGSVGElement>) {
     return (
         <svg
             aria-hidden="true"
-            viewBox="0 0 16 16"
             height="16"
+            viewBox="0 0 16 16"
             width="16"
-            {...props}
+            style={{ marginRight: "0.5em", transform: "translateY(2px)" }}
-            className={classes("vc-heart-icon", props.className)}
         >
             <path
                 fill="#db61a2"
-                fillRule="evenodd"
+                fill-rule="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,9 +18,10 @@
 
 import "./iconStyles.css";
 
-import { getIntlMessage } from "@utils/discord";
+import { getTheme, Theme } from "@utils/discord";
 import { classes } from "@utils/misc";
-import type { JSX, PropsWithChildren } from "react";
+import { i18n } from "@webpack/common";
+import type { PropsWithChildren } from "react";
 
 interface BaseIconProps extends IconProps {
     viewBox: string;
@@ -55,7 +56,7 @@ export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
             className={classes(className, "vc-link-icon")}
             viewBox="0 0 24 24"
         >
-            <g fill="none" fillRule="evenodd">
+            <g fill="none" fill-rule="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>
@@ -64,7 +65,8 @@ export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
 }
 
 /**
- * Discord's copy icon, as seen in the user panel popout on the right of the username and in large code blocks
+ * 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
  */
 export function CopyIcon(props: IconProps) {
     return (
@@ -74,9 +76,8 @@ export function CopyIcon(props: IconProps) {
             viewBox="0 0 24 24"
         >
             <g fill="currentColor">
-                <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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
-                <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="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="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>
     );
@@ -122,8 +123,8 @@ export function InfoIcon(props: IconProps) {
         >
             <path
                 fill="currentColor"
-                fillRule="evenodd"
+                transform="translate(2 2)"
-                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"
+                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"
             />
         </Icon>
     );
@@ -132,7 +133,7 @@ export function InfoIcon(props: IconProps) {
 export function OwnerCrownIcon(props: IconProps) {
     return (
         <Icon
-            aria-label={getIntlMessage("GUILD_OWNER")}
+            aria-label={i18n.Messages.GUILD_OWNER}
             {...props}
             className={classes(props.className, "vc-owner-crown-icon")}
             role="img"
@@ -211,10 +212,9 @@ export function CogWheel(props: IconProps) {
             viewBox="0 0 24 24"
         >
             <path
-                fill="currentColor"
-                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"
+                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"
             />
         </Icon>
     );
@@ -262,7 +262,7 @@ export function PlusIcon(props: IconProps) {
             viewBox="0 0 18 18"
         >
             <polygon
-                fillRule="nonzero"
+                fill-rule="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"
             />
@@ -407,30 +407,23 @@ export function PencilIcon(props: IconProps) {
     );
 }
 
-export function GithubIcon(props: IconProps) {
+const WebsiteIconDark = "/assets/e1e96d89e192de1997f73730db26e94f.svg";
-    return (
+const WebsiteIconLight = "/assets/730f58bcfd5a57a5e22460c445a0c6cf.svg";
-        <Icon
+const GithubIconLight = "/assets/3ff98ad75ac94fa883af5ed62d17c459.svg";
-            {...props}
+const GithubIconDark = "/assets/6a853b4c87fce386cbfef4a2efbacb09.svg";
-            viewBox="-3 -3 30 30"
+
-        >
+export function GithubIcon(props: ImageProps) {
-            <path
+    const src = getTheme() === Theme.Light
-                fill={props.fill || "currentColor"}
+        ? GithubIconLight
-                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"
+        : GithubIconDark;
-            />
+
-        </Icon>
+    return <img {...props} src={src} />;
-    );
 }
 
-export function WebsiteIcon(props: IconProps) {
+export function WebsiteIcon(props: ImageProps) {
-    return (
+    const src = getTheme() === Theme.Light
-        <Icon
+        ? WebsiteIconLight
-            {...props}
+        : WebsiteIconDark;
-            viewBox="0 0 24 24"
+
-        >
+    return <img {...props} src={src} />;
-            <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

@@ -12,8 +12,9 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
 import { DevsById } from "@utils/constants";
 import { fetchUserProfile } from "@utils/discord";
-import { classes, pluralise } from "@utils/misc";
+import { classes } from "@utils/misc";
 import { ModalContent, ModalRoot, openModal } from "@utils/modal";
+import { t, Translate } from "@utils/translation";
 import { Forms, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
 import { User } from "discord-types/general";
 
@@ -44,7 +45,7 @@ function ContributorModal({ user }: { user: User; }) {
     useEffect(() => {
         if (!profile && !user.bot && user.id)
             fetchUserProfile(user.id);
-    }, [user.id, user.bot, profile]);
+    }, [user.id]);
 
     const githubName = profile?.connectedAccounts?.find(a => a.type === "github")?.name;
     const website = profile?.connectedAccounts?.find(a => a.type === "domain")?.name;
@@ -60,8 +61,6 @@ function ContributorModal({ user }: { user: User; }) {
             .sort((a, b) => Number(a.required ?? false) - Number(b.required ?? false));
     }, [user.id, user.username]);
 
-    const ContributedHyperLink = <Link href="https://vencord.dev/source">contributed</Link>;
-
     return (
         <>
             <div className={cl("header")}>
@@ -88,15 +87,11 @@ function ContributorModal({ user }: { user: User; }) {
                 </div>
             </div>
 
-            {plugins.length ? (
+            <Forms.FormText>
-                <Forms.FormText>
+                <Translate i18nKey="vencord.pluginContributed" variables={{ count: plugins.length }}>
-                    This person has {ContributedHyperLink} to {pluralise(plugins.length, "plugin")}!
+                    <Link href="https://vencord.dev/source" />
-                </Forms.FormText>
+                </Translate>
-            ) : (
+            </Forms.FormText>
-                <Forms.FormText>
-                    This person has not made any plugins. They likely {ContributedHyperLink} to Vencord in other ways!
-                </Forms.FormText>
-            )}
 
             {!!plugins.length && (
                 <div className={cl("plugins")}>
@@ -105,7 +100,7 @@ function ContributorModal({ user }: { user: User; }) {
                             key={p.name}
                             plugin={p}
                             disabled={p.required ?? false}
-                            onRestartNeeded={() => showToast("Restart to apply changes!")}
+                            onRestartNeeded={() => showToast(t("vencord.pluginRestart"))}
                         />
                     )}
                 </div>

src/components/PluginSettings/LinkIconButton.tsx

@@ -6,19 +6,16 @@
 
 import "./LinkIconButton.css";
 
-import { getTheme, Theme } from "@utils/discord";
 import { MaskedLink, Tooltip } from "@webpack/common";
 
 import { GithubIcon, WebsiteIcon } from "..";
 
 export function GithubLinkIcon() {
-    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
+    return <GithubIcon aria-hidden className={"vc-settings-modal-link-icon"} />;
-    return <GithubIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
 }
 
 export function WebsiteLinkIcon() {
-    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
+    return <WebsiteIcon aria-hidden className={"vc-settings-modal-link-icon"} />;
-    return <WebsiteIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
 }
 
 interface Props {

src/components/PluginSettings/PluginModal.tsx

@@ -28,6 +28,7 @@ import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { t } from "@utils/translation";
 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,7 +38,6 @@ import { Constructor } from "type-fest";
 import { PluginMeta } from "~plugins";
 
 import {
-    ISettingCustomElementProps,
     ISettingElementProps,
     SettingBooleanComponent,
     SettingCustomComponent,
@@ -75,15 +75,14 @@ function makeDummyUser(user: { username: string; id?: string; avatar?: string; }
     return newUser;
 }
 
-const Components: Record<OptionType, React.ComponentType<ISettingElementProps<any> | ISettingCustomElementProps<any>>> = {
+const Components: Record<OptionType, React.ComponentType<ISettingElementProps<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) {
@@ -111,7 +110,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 setAuthors(a => [...a, author]);
             }
         })();
-    }, [plugin.authors]);
+    }, []);
 
     async function saveAndClose() {
         if (!plugin.options) {
@@ -131,8 +130,7 @@ 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,10 +139,10 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
     function renderSettings() {
         if (!hasSettings || !plugin.options) {
-            return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
+            return <Forms.FormText>{t("vencord.noSettings")}</Forms.FormText>;
         } else {
             const options = Object.entries(plugin.options).map(([key, setting]) => {
-                if (setting.type === OptionType.CUSTOM || setting.hidden) return null;
+                if (setting.hidden) return null;
 
                 function onChange(newValue: any) {
                     setTempSettings(s => ({ ...s, [key]: newValue }));
@@ -277,7 +275,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     </div>
                 )}
                 <Forms.FormSection className={Margins.bottom16}>
-                    <Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
+                    <Forms.FormTitle tag="h3">{t("vencord.settings")}</Forms.FormTitle>
                     {renderSettings()}
                 </Forms.FormSection>
             </ModalContent>
@@ -292,7 +290,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         >
                             Cancel
                         </Button>
-                        <Tooltip text="You must fix all errors before saving" shouldShow={!canSubmit()}>
+                        <Tooltip text={t("vencord.settingsErrors")} shouldShow={!canSubmit()}>
                             {({ onMouseEnter, onMouseLeave }) => (
                                 <Button
                                     size={Button.Sizes.SMALL}
@@ -302,12 +300,12 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                                     onMouseLeave={onMouseLeave}
                                     disabled={!canSubmit()}
                                 >
-                                    Save & Close
+                                    {t("vencord.saveAndClose")}
                                 </Button>
                             )}
                         </Tooltip>
                     </Flex>
-                    {saveError && <Text variant="text-md/semibold" style={{ color: "var(--text-danger)" }}>Error while saving: {saveError}</Text>}
+                    {saveError && <Text variant="text-md/semibold" style={{ color: "var(--text-danger)" }}>{t("vencord.settingsSaveError", { saveError })}</Text>}
                 </Flex>
             </ModalFooter>}
         </ModalRoot>

src/components/PluginSettings/components/SettingCustomComponent.tsx

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

src/components/PluginSettings/components/SettingNumericComponent.tsx

@@ -16,8 +16,6 @@
  * 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";
 
@@ -56,8 +54,7 @@ export function SettingNumericComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.description}</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,8 +16,6 @@
  * 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";
 
@@ -46,8 +44,7 @@ export function SettingSelectComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.description}</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,8 +16,6 @@
  * 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";
 
@@ -52,8 +50,7 @@ export function SettingSliderComponent({ option, pluginSettings, definedSettings
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.description}</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,8 +16,6 @@
  * 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";
 
@@ -43,15 +41,13 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
-            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
             <TextInput
                 type="text"
                 value={state}
                 onChange={handleChange}
                 placeholder={option.placeholder ?? "Enter a value"}
                 disabled={option.disabled?.call(definedSettings) ?? false}
-                maxLength={null}
                 {...option.componentProps}
             />
             {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}

src/components/PluginSettings/components/index.ts

@@ -18,7 +18,7 @@
 
 import { DefinedSettings, PluginOptionBase } from "@utils/types";
 
-interface ISettingElementPropsBase<T> {
+export interface ISettingElementProps<T extends PluginOptionBase> {
     option: T;
     onChange(newValue: any): void;
     pluginSettings: {
@@ -30,9 +30,6 @@ interface ISettingElementPropsBase<T> {
     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

@@ -32,10 +32,10 @@ import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { classes, isObjectEmpty } from "@utils/misc";
 import { useAwaiter } from "@utils/react";
+import { t } from "@utils/translation";
 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";
 
@@ -65,19 +65,19 @@ function ReloadRequiredCard({ required }: { required: boolean; }) {
         <Card className={cl("info-card", { "restart-card": required })}>
             {required ? (
                 <>
-                    <Forms.FormTitle tag="h5">Restart required!</Forms.FormTitle>
+                    <Forms.FormTitle tag="h5">{t("vencord.pluginHeader.reloadHeader")}</Forms.FormTitle>
                     <Forms.FormText className={cl("dep-text")}>
-                        Restart now to apply new plugins and their settings
+                        {t("vencord.pluginHeader.reloadDescription")}
                     </Forms.FormText>
-                    <Button onClick={() => location.reload()} className={cl("restart-button")}>
+                    <Button onClick={() => location.reload()}>
-                        Restart
+                        {t("vencord.pluginHeader.restart")}
                     </Button>
                 </>
             ) : (
                 <>
-                    <Forms.FormTitle tag="h5">Plugin Management</Forms.FormTitle>
+                    <Forms.FormTitle tag="h5">{t("vencord.pluginHeader.managementHeader")}</Forms.FormTitle>
-                    <Forms.FormText>Press the cog wheel or info icon to get more info on a plugin</Forms.FormText>
+                    <Forms.FormText>{t("vencord.pluginHeader.iconInformation")}</Forms.FormText>
-                    <Forms.FormText>Plugins with a cog wheel have settings you can modify!</Forms.FormText>
+                    <Forms.FormText>{t("vencord.pluginHeader.cogWheel")}</Forms.FormText>
                 </>
             )}
         </Card>
@@ -94,7 +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 = () => Vencord.Plugins.isPluginEnabled(plugin.name);
+    const isEnabled = () => settings.enabled ?? false;
 
     function toggleEnabled() {
         const wasEnabled = isEnabled();
@@ -158,8 +158,8 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on
                     className={classes(ButtonClasses.button, cl("info-button"))}
                 >
                     {plugin.options && !isObjectEmpty(plugin.options)
-                        ? <CogWheel className={cl("info-icon")} />
+                        ? <CogWheel />
-                        : <InfoIcon className={cl("info-icon")} />}
+                        : <InfoIcon />}
                 </button>
             }
         />
@@ -210,10 +210,10 @@ export default function PluginSettings() {
 
     React.useEffect(() => {
         return () => void (changes.hasChanges && Alerts.show({
-            title: "Restart required",
+            title: t("vencord.restartRequired"),
             body: (
                 <>
-                    <p>The following plugins require a restart:</p>
+                    <p>$t("vencord.pluginsNeedRestart")</p>
                     <div>{changes.map((s, i) => (
                         <>
                             {i > 0 && ", "}
@@ -222,8 +222,8 @@ export default function PluginSettings() {
                     ))}</div>
                 </>
             ),
-            confirmText: "Restart now",
+            confirmText: t("vencord.restartNow"),
-            cancelText: "Later!",
+            cancelText: t("vencord.restartLater"),
             onConfirm: () => location.reload()
         }));
     }, []);
@@ -293,11 +293,11 @@ export default function PluginSettings() {
 
         if (!pluginFilter(p)) continue;
 
-        const isRequired = p.required || p.isDependency || depMap[p.name]?.some(d => settings.plugins[d].enabled);
+        const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
 
         if (isRequired) {
-            const tooltipText = p.required || !depMap[p.name]
+            const tooltipText = p.required
-                ? "This plugin is required for Vencord to function."
+                ? t("vencord.requiredPlugin")
                 : makeDependencyList(depMap[p.name]?.filter(d => settings.plugins[d].enabled));
 
             requiredPlugins.push(
@@ -332,18 +332,18 @@ export default function PluginSettings() {
             <ReloadRequiredCard required={changes.hasChanges} />
 
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
-                Filters
+                {t("vencord.pluginFilters")}
             </Forms.FormTitle>
 
             <div className={classes(Margins.bottom20, cl("filter-controls"))}>
-                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} />
+                <TextInput autoFocus value={searchValue.value} placeholder={t("vencord.search.placeholder")} onChange={onSearch} />
                 <div className={InputStyles.inputWrapper}>
                     <Select
                         options={[
-                            { label: "Show All", value: SearchStatus.ALL, default: true },
+                            { label: t("vencord.search.all"), value: SearchStatus.ALL, default: true },
-                            { label: "Show Enabled", value: SearchStatus.ENABLED },
+                            { label: t("vencord.search.enabled"), value: SearchStatus.ENABLED },
-                            { label: "Show Disabled", value: SearchStatus.DISABLED },
+                            { label: t("vencord.search.disabled"), value: SearchStatus.DISABLED },
-                            { label: "Show New", value: SearchStatus.NEW }
+                            { label: t("vencord.search.new"), value: SearchStatus.NEW }
                         ]}
                         serialize={String}
                         select={onStatusChange}
@@ -354,7 +354,7 @@ export default function PluginSettings() {
                 </div>
             </div>
 
-            <Forms.FormTitle className={Margins.top20}>Plugins</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top20}>{t("vencord.plugins")}</Forms.FormTitle>
 
             {plugins.length || requiredPlugins.length
                 ? (
@@ -372,7 +372,7 @@ export default function PluginSettings() {
             <Forms.FormDivider className={Margins.top20} />
 
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
-                Required Plugins
+                {t("vencord.requiredPlugins")}
             </Forms.FormTitle>
             <div className={cl("grid")}>
                 {requiredPlugins.length
@@ -387,8 +387,8 @@ export default function PluginSettings() {
 function makeDependencyList(deps: string[]) {
     return (
         <React.Fragment>
-            <Forms.FormText>This plugin is required by:</Forms.FormText>
+            <Forms.FormText>{t("vencord.pluginRequiredBy")}</Forms.FormText>
-            {deps.map((dep: string) => <Forms.FormText key={dep} className={cl("dep-text")}>{dep}</Forms.FormText>)}
+            {deps.map((dep: string) => <Forms.FormText className={cl("dep-text")}>{dep}</Forms.FormText>)}
         </React.Fragment>
     );
 }

src/components/PluginSettings/styles.css

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

src/components/VencordSettings/AddonCard.tsx

@@ -21,6 +21,7 @@ import "./addonCard.css";
 import { classNameFactory } from "@api/Styles";
 import { Badge } from "@components/Badge";
 import { Switch } from "@components/Switch";
+import { t } from "@utils/translation";
 import { Text, useRef } from "@webpack/common";
 import type { MouseEventHandler, ReactNode } from "react";
 
@@ -67,7 +68,7 @@ export function AddonCard({ disabled, isNew, name, infoButton, footer, author, e
                             >
                                 {name}
                             </div>
-                        </div>{isNew && <Badge text="NEW" color="#ED4245" />}
+                        </div>{isNew && <Badge text={t("vencord.new")} color="#ED4245" />}
                     </Text>
                     {!!author && (
                         <Text variant="text-md/normal" className={cl("author")}>

src/components/VencordSettings/BackupAndRestoreTab.tsx

@@ -20,6 +20,7 @@ import { Flex } from "@components/Flex";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
+import { t } from "@utils/translation";
 import { Button, Card, Text } from "@webpack/common";
 
 import { SettingsTab, wrapTab } from "./shared";
@@ -29,21 +30,19 @@ function BackupRestoreTab() {
         <SettingsTab title="Backup & Restore">
             <Card className={classes("vc-settings-card", "vc-backup-restore-card")}>
                 <Flex flexDirection="column">
-                    <strong>Warning</strong>
+                    <strong>{t("vencord.warning")}</strong>
-                    <span>Importing a settings file will overwrite your current settings.</span>
+                    <span>{t("vencord.backupAndRestore.importWarning")}</span>
                 </Flex>
             </Card>
             <Text variant="text-md/normal" className={Margins.bottom8}>
-                You can import and export your Vencord settings as a JSON file.
+                {t("vencord.backupAndRestore.description")}
-                This allows you to easily transfer your settings to another device,
-                or recover your settings after reinstalling Vencord or Discord.
             </Text>
             <Text variant="text-md/normal" className={Margins.bottom8}>
-                Settings Export contains:
+                {t("vencord.backupAndRestore.exportContains")}
                 <ul>
-                    <li>&mdash; Custom QuickCSS</li>
+                    <li>&mdash; {t("vencord.backupAndRestore.customQuickcss")}</li>
-                    <li>&mdash; Theme Links</li>
+                    <li>&mdash; {t("vencord.backupAndRestore.themeLinks")}</li>
-                    <li>&mdash; Plugin Settings</li>
+                    <li>&mdash; {t("vencord.backupAndRestore.pluginSettings")}</li>
                 </ul>
             </Text>
             <Flex>
@@ -51,13 +50,13 @@ function BackupRestoreTab() {
                     onClick={() => uploadSettingsBackup()}
                     size={Button.Sizes.SMALL}
                 >
-                    Import Settings
+                    {t("vencord.backupAndRestore.importSettings")}
                 </Button>
                 <Button
                     onClick={downloadSettingsBackup}
                     size={Button.Sizes.SMALL}
                 >
-                    Export Settings
+                    {t("vencord.backupAndRestore.exportSettings")}
                 </Button>
             </Flex>
         </SettingsTab>

src/components/VencordSettings/CloudTab.tsx

@@ -24,6 +24,7 @@ import { Link } from "@components/Link";
 import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
 import { Margins } from "@utils/margins";
 import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
+import { t, Translate } from "@utils/translation";
 import { Alerts, Button, Forms, Switch, Tooltip } from "@webpack/common";
 
 import { SettingsTab, wrapTab } from "./shared";
@@ -46,8 +47,8 @@ async function eraseAllData() {
     if (!res.ok) {
         cloudLogger.error(`Failed to erase data, API returned ${res.status}`);
         showNotification({
-            title: "Cloud Integrations",
+            title: t("vencord.cloudIntegrations"),
-            body: `Could not erase all data (API returned ${res.status}), please contact support.`,
+            body: t("vencord.cloud.integrations.eraseError", { status: res.status }),
             color: "var(--red-360)"
         });
         return;
@@ -57,8 +58,8 @@ async function eraseAllData() {
     await deauthorizeCloud();
 
     showNotification({
-        title: "Cloud Integrations",
+        title: t("vencord.cloudIntegrations"),
-        body: "Successfully erased all data.",
+        body: t("vencord.cloud.integrations.eraseSuccess"),
         color: "var(--green-360)"
     });
 }
@@ -70,8 +71,7 @@ function SettingsSyncSection() {
     return (
         <Forms.FormSection title="Settings Sync" className={Margins.top16}>
             <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
-                Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with
+                {t("vencord.cloud.settings.description")}
-                minimal effort.
             </Forms.FormText>
             <Switch
                 key="cloud-sync"
@@ -79,7 +79,7 @@ function SettingsSyncSection() {
                 value={cloud.settingsSync}
                 onChange={v => { cloud.settingsSync = v; }}
             >
-                Settings Sync
+                {t("vencord.settingsSync")}
             </Switch>
             <div className="vc-cloud-settings-sync-grid">
                 <Button
@@ -87,9 +87,9 @@ function SettingsSyncSection() {
                     disabled={!sectionEnabled}
                     onClick={() => putCloudSettings(true)}
                 >
-                    Sync to Cloud
+                    {t("vencord.cloud.settings.syncToCloud")}
                 </Button>
-                <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
+                <Tooltip text={t("vencord.cloud.settings.overwriteWarning")}>
                     {({ onMouseLeave, onMouseEnter }) => (
                         <Button
                             onMouseLeave={onMouseLeave}
@@ -99,7 +99,7 @@ function SettingsSyncSection() {
                             disabled={!sectionEnabled}
                             onClick={() => getCloudSettings(true, true)}
                         >
-                            Sync from Cloud
+                            {t("vencord.cloud.settings.syncFromCloud")}
                         </Button>
                     )}
                 </Tooltip>
@@ -109,7 +109,7 @@ function SettingsSyncSection() {
                     disabled={!sectionEnabled}
                     onClick={() => deleteCloudSettings()}
                 >
-                    Delete Cloud Settings
+                    {t("vencord.cloud.settings.deleteCloudSettings")}
                 </Button>
             </div>
         </Forms.FormSection>
@@ -121,12 +121,12 @@ function CloudTab() {
 
     return (
         <SettingsTab title="Vencord Cloud">
-            <Forms.FormSection title="Cloud Settings" className={Margins.top16}>
+            <Forms.FormSection title={t("vencord.cloudSettings")} className={Margins.top16}>
                 <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
-                    Vencord comes with a cloud integration that adds goodies like settings sync across devices.
+                    <Translate i18nKey="vencord.cloud.integrations.description">
-                    It <Link href="https://vencord.dev/cloud/privacy">respects your privacy</Link>, and
+                        <Link href="https://vencord.dev/cloud/privacy" />
-                    the <Link href="https://github.com/Vencord/Backend">source code</Link> is AGPL 3.0 licensed so you
+                        <Link href="https://github.com/Vencord/Backend" />
-                    can host it yourself.
+                    </Translate>
                 </Forms.FormText>
                 <Switch
                     key="backend"
@@ -137,13 +137,13 @@ function CloudTab() {
                         else
                             settings.cloud.authenticated = v;
                     }}
-                    note="This will request authorization if you have not yet set up cloud integrations."
+                    note={t("vencord.cloud.integrations.authorizationNote")}
                 >
-                    Enable Cloud Integrations
+                    {t("vencord.cloud.integrations.enable")}
                 </Switch>
-                <Forms.FormTitle tag="h5">Backend URL</Forms.FormTitle>
+                <Forms.FormTitle tag="h5">{t("vencord.cloud.integrations.backendUrl")}</Forms.FormTitle>
                 <Forms.FormText className={Margins.bottom8}>
-                    Which backend to use when using cloud integrations.
+                    {t("vencord.cloud.integrations.backendNote")}
                 </Forms.FormText>
                 <CheckedTextInput
                     key="backendUrl"
@@ -166,25 +166,24 @@ function CloudTab() {
                             await authorizeCloud();
                         }}
                     >
-                        Reauthorise
+                        {t("vencord.reauthorise")}
                     </Button>
                     <Button
                         size={Button.Sizes.MEDIUM}
                         color={Button.Colors.RED}
                         disabled={!settings.cloud.authenticated}
                         onClick={() => Alerts.show({
-                            title: "Are you sure?",
+                            title: t("vencord.areYouSure"),
-                            body: "Once your data is erased, we cannot recover it. There's no going back!",
+                            body: t("vencord.cloud.integrations.eraseWarning"),
                             onConfirm: eraseAllData,
-                            confirmText: "Erase it!",
+                            confirmText: t("vencord.cloud.integrations.eraseIt"),
                             confirmColor: "vc-cloud-erase-data-danger-btn",
-                            cancelText: "Nevermind"
+                            cancelText: t("vencord.nevermind")
                         })}
                     >
                         Erase All Data
                     </Button>
                 </Grid>
-
                 <Forms.FormDivider className={Margins.top16} />
             </Forms.FormSection >
             <SettingsSyncSection />

src/components/VencordSettings/PatchHelperTab.tsx

@@ -65,7 +65,7 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
         }
         const canonicalMatch = canonicalizeMatch(new RegExp(match));
         try {
-            const canonicalReplace = canonicalizeReplace(replacement, 'Vencord.Plugins.plugins["YourPlugin"]');
+            const canonicalReplace = canonicalizeReplace(replacement, "YourPlugin");
             var patched = src.replace(canonicalMatch, canonicalReplace as string);
             setReplacementError(void 0);
         } catch (e) {
@@ -111,9 +111,9 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
     }
 
     function renderDiff() {
-        return diff?.map((p, idx) => {
+        return diff?.map(p => {
             const color = p.added ? "lime" : p.removed ? "red" : "grey";
-            return <div key={idx} style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>;
+            return <div 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}][0])`) as Patch;
+            const parsed = (0, eval)(`(${fullPatch})`) as Patch;
 
             if (!parsed.find) throw new Error("No 'find' field");
             if (!parsed.replacement) throw new Error("No 'replacement' field");
@@ -382,7 +382,6 @@ 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

@@ -1,77 +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 "./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,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings, useSettings } from "@api/Settings";
+import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
 import { DeleteIcon, FolderIcon, PaintbrushIcon, PencilIcon, PlusIcon, RestartIcon } from "@components/Icons";
@@ -25,14 +25,14 @@ import { openPluginModal } from "@components/PluginSettings/PluginModal";
 import type { UserThemeHeader } from "@main/themes";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { findLazy } from "@webpack";
+import { t } from "@utils/translation";
+import { findByPropsLazy, 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";
@@ -44,7 +44,9 @@ 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-");
 
@@ -77,16 +79,8 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
             <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 => {
+                {themeLinks.map(link => (
-                    const { label, link } = (() => {
+                    <Card style={{
-                        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"
@@ -94,11 +88,11 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
                         <Forms.FormTitle tag="h5" style={{
                             overflowWrap: "break-word"
                         }}>
-                            {label}
+                            {link}
                         </Forms.FormTitle>
                         <Validator link={link} />
-                    </Card>;
+                    </Card>
-                })}
+                ))}
             </div>
         </>
     );
@@ -209,60 +203,68 @@ function ThemesTab() {
         return (
             <>
                 <Card className="vc-settings-card">
-                    <Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
+                    <Forms.FormTitle tag="h5">{t("vencord.themes.findThemes")}</Forms.FormTitle>
                     <div style={{ marginBottom: ".5em", display: "flex", flexDirection: "column" }}>
                         <Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
-                            BetterDiscord Themes
+                            {t("vencord.themes.betterDiscord")}
                         </Link>
                         <Link href="https://github.com/search?q=discord+theme">GitHub</Link>
                     </div>
-                    <Forms.FormText>If using the BD site, click on "Download" and place the downloaded .theme.css file into your themes folder.</Forms.FormText>
+                    <Forms.FormText>{t("vencord.themes.betterDiscordNote")}</Forms.FormText>
                 </Card>
 
-                <Forms.FormSection title="Local Themes">
+                <Forms.FormSection title={t("vencord.themes.local")}>
-                    <QuickActionCard>
+                    <Card className="vc-settings-quick-actions-card">
                         <>
                             {IS_WEB ?
                                 (
-                                    <QuickAction
+                                    <Button
-                                        text={
+                                        size={Button.Sizes.SMALL}
-                                            <span style={{ position: "relative" }}>
+                                        disabled={themeDirPending}
-                                                Upload Theme
+                                    >
-                                                <FileInput
+                                        {t("vencord.themes.upload")}
-                                                    ref={fileInputRef}
+                                        <FileInput
-                                                    onChange={onFileUpload}
+                                            ref={fileInputRef}
-                                                    multiple={true}
+                                            onChange={onFileUpload}
-                                                    filters={[{ extensions: ["css"] }]}
+                                            multiple={true}
-                                                />
+                                            filters={[{ extensions: ["css"] }]}
-                                            </span>
+                                        />
-                                        }
+                                    </Button>
-                                        Icon={PlusIcon}
-                                    />
                                 ) : (
                                     <QuickAction
-                                        text="Open Themes Folder"
+                                        text={t("vencord.themes.openFolder")}
                                         action={() => showItemInFolder(themeDir!)}
                                         disabled={themeDirPending}
-                                        Icon={FolderIcon}
+                                    >
-                                    />
+                                        {t("vencord.themes.openFolder")}
+                                    </Button>
                                 )}
-                            <QuickAction
+                            <Button
-                                text="Load missing Themes"
+                                onClick={refreshLocalThemes}
-                                action={refreshLocalThemes}
+                                size={Button.Sizes.SMALL}
-                                Icon={RestartIcon}
+                            >
-                            />
+                                {t("vencord.themes.loadMissing")}
-                            <QuickAction
+                            </Button>
-                                text="Edit QuickCSS"
+                            <Button
-                                action={() => VencordNative.quickCss.openEditor()}
+                                onClick={() => VencordNative.quickCss.openEditor()}
-                                Icon={PaintbrushIcon}
+                                size={Button.Sizes.SMALL}
-                            />
+                            >
+                                {t("vencord.themes.editQuickCss")}
+                            </Button>
 
-                            {Settings.plugins.ClientTheme.enabled && (
+                            {Vencord.Settings.plugins.ClientTheme.enabled && (
-                                <QuickAction
+                                <Button
-                                    text="Edit ClientTheme"
+                                    onClick={() => openModal(modalProps => (
-                                    action={() => openPluginModal(Plugins.ClientTheme)}
+                                        <PluginModal
-                                    Icon={PencilIcon}
+                                            {...modalProps}
-                                />
+                                            plugin={Vencord.Plugins.plugins.ClientTheme}
+                                            onRestartNeeded={() => { }}
+                                        />
+                                    ))}
+                                    size={Button.Sizes.SMALL}
+                                >
+                                    {t("clientTheme.edit")}
+                                </Button>
                             )}
                         </>
                     </QuickActionCard>
@@ -302,17 +304,16 @@ function ThemesTab() {
         return (
             <>
                 <Card className="vc-settings-card vc-text-selectable">
-                    <Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
+                    <Forms.FormTitle tag="h5">{t("vencord.themes.pasteLinks")}</Forms.FormTitle>
-                    <Forms.FormText>One link per line</Forms.FormText>
+                    <Forms.FormText>{t("vencord.themes.oneLinkPerLine")}</Forms.FormText>
-                    <Forms.FormText>You can prefix lines with @light or @dark to toggle them based on your Discord theme</Forms.FormText>
+                    <Forms.FormText>{t("vencord.themes.useDirect")}</Forms.FormText>
-                    <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
                 </Card>
 
-                <Forms.FormSection title="Online Themes" tag="h5">
+                <Forms.FormSection title={t("vencord.themes.online")} tag="h5">
                     <TextArea
                         value={themeText}
                         onChange={setThemeText}
-                        className={"vc-settings-theme-links"}
+                        className={classes(TextAreaProps.textarea, "vc-settings-theme-links")}
                         placeholder="Theme Links"
                         spellCheck={false}
                         onBlur={onBlur}
@@ -337,13 +338,13 @@ function ThemesTab() {
                     className="vc-settings-tab-bar-item"
                     id={ThemeTab.LOCAL}
                 >
-                    Local Themes
+                    {t("vencord.themes.local")}
                 </TabBar.Item>
                 <TabBar.Item
                     className="vc-settings-tab-bar-item"
                     id={ThemeTab.ONLINE}
                 >
-                    Online Themes
+                    {t("vencord.themes.online")}
                 </TabBar.Item>
             </TabBar>
 

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, idx) => <div key={idx}>{Parser.parse(line)}</div>)}
+                        {err.split("\n").map(line => <div>{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 key={hash} style={{
+                <div style={{
                     marginTop: "0.5em",
                     marginBottom: "0.5em"
                 }}>

src/components/VencordSettings/VencordTab.tsx

@@ -20,38 +20,29 @@ import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
-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, isPluginDev } from "@utils/misc";
+import { identity } from "@utils/misc";
 import { relaunch, showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { Button, Forms, GuildMemberStore, React, Select, Switch, UserStore } from "@webpack/common";
+import { Button, Card, Forms, React, Select, Switch } 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];
 
+
 function VencordSettings() {
     const [settingsDir, , settingsDirPending] = useAwaiter(VencordNative.settings.getSettingsDir, {
         fallbackValue: "Loading..."
@@ -64,8 +55,6 @@ 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;
@@ -110,44 +99,7 @@ function VencordSettings() {
 
     return (
         <SettingsTab title="Vencord Settings">
-            {isDonor(user?.id)
+            <DonateCard image={donateImage} />
-                ? (
-                    <SpecialCard
-                        title="Donations"
-                        subtitle="Thank you for donating!"
-                        description="You can manage your perks 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">
                 <QuickActionCard>
                     <QuickAction
@@ -287,19 +239,31 @@ function VencordSettings() {
     );
 }
 
-function DonateButtonComponent() {
+interface DonateCardProps {
+    image: string;
+}
+
+function DonateCard({ image }: DonateCardProps) {
     return (
-        <DonateButton
+        <Card className={cl("card", "donate")}>
-            look={Button.Looks.FILLED}
+            <div>
-            color={Button.Colors.WHITE}
+                <Forms.FormTitle tag="h5">Support the Project</Forms.FormTitle>
-            style={{ marginTop: "1em" }}
+                <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/addonCard.css

@@ -11,11 +11,6 @@
     box-sizing: border-box;
 }
 
-.visual-refresh .vc-addon-card {
-    background-color: var(--card-primary-bg);
-    border: 1px solid var(--border-subtle);
-}
-
 .vc-addon-card-disabled {
     opacity: 0.6;
 }
@@ -26,11 +21,6 @@
     box-shadow: var(--elevation-high);
 }
 
-.visual-refresh .vc-addon-card:hover {
-    /* same as non-hover, here to overwrite the non-refresh hover background */
-    background-color: var(--card-primary-bg);
-}
-
 .vc-addon-header {
     margin-top: auto;
     display: flex;

src/components/VencordSettings/quickActions.css

@@ -1,17 +1,12 @@
 .vc-settings-quickActions-card {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(200px, max-content));
     gap: 0.5em;
-    padding: 0.5em;
+    justify-content: center;
+    padding: 0.5em 0;
     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);
@@ -19,16 +14,12 @@
     display: flex;
     align-items: center;
     gap: 0.5em;
-    padding: 8px 9px;
+    padding: 8px 12px;
-    border-radius: 8px;
+    border-radius: 9999px;
-    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 {
@@ -36,14 +27,6 @@
     outline-offset: 2px;
 }
 
-.visual-refresh .vc-settings-quickActions-pill {
-    background: var(--button-secondary-background);
-}
-
-.visual-refresh .vc-settings-quickActions-pill:hover {
-    background: var(--button-secondary-background-hover);
-}
-
 .vc-settings-quickActions-img {
     width: 24px;
     height: 24px;

src/components/VencordSettings/settingsStyles.css

@@ -33,20 +33,6 @@
     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

@@ -1,92 +0,0 @@
-.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/handleComponentFailed.ts

@@ -16,12 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { t } from "@utils/translation";
 import { maybePromptToUpdate } from "@utils/updater";
 
 export function handleComponentFailed() {
     maybePromptToUpdate(
-        "Uh Oh! Failed to render this Page." +
+        t("vencord.failureUpdate")
-        " However, there is an update available that might fix it." +
-        " Would you like to update and restart now?"
     );
 }

src/components/iconStyles.css

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

src/components/index.ts

@@ -10,6 +10,7 @@ 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/Tracer.ts

@@ -23,61 +23,35 @@ if (IS_DEV || IS_REPORTER) {
     var logger = new Logger("Tracer", "#FFD166");
 }
 
-export const beginTrace = !(IS_DEV || IS_REPORTER) ? () => { } :
+const noop = function () { };
+
+export const beginTrace = !(IS_DEV || IS_REPORTER) ? noop :
     function beginTrace(name: string, ...args: any[]) {
-        if (name in traces) {
+        if (name in traces)
             throw new Error(`Trace ${name} already exists!`);
-        }
 
         traces[name] = [performance.now(), args];
     };
 
-export const finishTrace = !(IS_DEV || IS_REPORTER) ? () => 0 :
+export const finishTrace = !(IS_DEV || IS_REPORTER) ? noop : function finishTrace(name: string) {
-    function finishTrace(name: string) {
+    const end = performance.now();
-        const end = performance.now();
 
-        const [start, args] = traces[name];
+    const [start, args] = traces[name];
-        delete traces[name];
+    delete traces[name];
 
-        const totalTime = end - start;
+    logger.debug(`${name} took ${end - start}ms`, args);
-        logger.debug(`${name} took ${totalTime}ms`, args);
+};
-
-        return totalTime;
-    };
 
 type Func = (...args: any[]) => any;
 type TraceNameMapper<F extends Func> = (...args: Parameters<F>) => string;
 
-function noopTracerWithResults<F extends Func>(name: string, f: F, mapper?: TraceNameMapper<F>) {
+const noopTracer =
-    return function (this: unknown, ...args: Parameters<F>): [ReturnType<F>, number] {
+    <F extends Func>(name: string, f: F, mapper?: TraceNameMapper<F>) => f;
-        return [f.apply(this, args), 0];
-    };
-}
-
-function noopTracer<F extends Func>(name: string, f: F, mapper?: TraceNameMapper<F>) {
-    return f;
-}
-
-export const traceFunctionWithResults = !(IS_DEV || IS_REPORTER)
-    ? noopTracerWithResults
-    : function traceFunctionWithResults<F extends Func>(name: string, f: F, mapper?: TraceNameMapper<F>): (this: unknown, ...args: Parameters<F>) => [ReturnType<F>, number] {
-        return function (this: unknown, ...args: Parameters<F>) {
-            const traceName = mapper?.(...args) ?? name;
-
-            beginTrace(traceName, ...arguments);
-            try {
-                return [f.apply(this, args), finishTrace(traceName)];
-            } catch (e) {
-                finishTrace(traceName);
-                throw e;
-            }
-        };
-    };
 
 export const traceFunction = !(IS_DEV || IS_REPORTER)
     ? noopTracer
     : function traceFunction<F extends Func>(name: string, f: F, mapper?: TraceNameMapper<F>): F {
-        return function (this: unknown, ...args: Parameters<F>) {
+        return function (this: any, ...args: Parameters<F>) {
             const traceName = mapper?.(...args) ?? name;
 
             beginTrace(traceName, ...arguments);

src/debug/loadLazyChunks.ts

@@ -8,44 +8,35 @@ import { Logger } from "@utils/Logger";
 import { canonicalizeMatch } from "@utils/patches";
 import * as Webpack from "@webpack";
 import { wreq } from "@webpack";
-import { AnyModuleFactory, ModuleFactory } from "@webpack/wreq.d";
+
+const LazyChunkLoaderLogger = new Logger("LazyChunkLoader");
 
 export async function loadLazyChunks() {
-    const LazyChunkLoaderLogger = new Logger("LazyChunkLoader");
-
     try {
         LazyChunkLoaderLogger.log("Loading all chunks...");
 
-        const validChunks = new Set<PropertyKey>();
+        const validChunks = new Set<string>();
-        const invalidChunks = new Set<PropertyKey>();
+        const invalidChunks = new Set<string>();
-        const deferredRequires = new Set<PropertyKey>();
+        const deferredRequires = new Set<string>();
 
-        const { promise: chunksSearchingDone, resolve: chunksSearchingResolve } = Promise.withResolvers<void>();
+        let chunksSearchingResolve: (value: void | PromiseLike<void>) => void;
+        const chunksSearchingDone = new Promise<void>(r => chunksSearchingResolve = r);
 
         // True if resolved, false otherwise
         const chunksSearchPromises = [] as Array<() => boolean>;
 
-        /* This regex loads all language packs which makes webpack finds testing extremely slow, so for now, lets use one which doesnt include those
-        const LazyChunkRegex = canonicalizeMatch(/(?:(?:Promise\.all\(\[)?(\i\.e\("?[^)]+?"?\)[^\]]*?)(?:\]\))?)\.then\(\i(?:\.\i)?\.bind\(\i,"?([^)]+?)"?(?:,[^)]+?)?\)\)/g);
-        */
         const LazyChunkRegex = canonicalizeMatch(/(?:(?:Promise\.all\(\[)?(\i\.e\("?[^)]+?"?\)[^\]]*?)(?:\]\))?)\.then\(\i\.bind\(\i,"?([^)]+?)"?\)\)/g);
 
-        let foundCssDebuggingLoad = false;
-
         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: PropertyKey[], entryPoint: PropertyKey]>();
+            const validChunkGroups = new Set<[chunkIds: string[], entryPoint: string]>();
 
-            const shouldForceDefer = 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");
 
             await Promise.all(Array.from(lazyChunks).map(async ([, rawChunkIds, entryPoint]) => {
-                const chunkIds = rawChunkIds ? Array.from(rawChunkIds.matchAll(Webpack.ChunkIdsRegex)).map(m => {
+                const chunkIds = rawChunkIds ? Array.from(rawChunkIds.matchAll(Webpack.ChunkIdsRegex)).map(m => m[1]) : [];
-                    const numChunkId = Number(m[1]);
-                    return Number.isNaN(numChunkId) ? m[1] : numChunkId;
-                }) : [];
 
                 if (chunkIds.length === 0) {
                     return;
@@ -54,21 +45,11 @@ 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))
                         .then(r => r.text())
-                        .then(t => /importScripts\(|self\.postMessage/.test(t));
+                        .then(t => t.includes("importScripts("));
 
                     if (isWorkerAsset) {
                         invalidChunks.add(id);
@@ -80,8 +61,7 @@ export async function loadLazyChunks() {
                 }
 
                 if (!invalidChunkGroup) {
-                    const numEntryPoint = Number(entryPoint);
+                    validChunkGroups.add([chunkIds, entryPoint]);
-                    validChunkGroups.add([chunkIds, Number.isNaN(numEntryPoint) ? entryPoint : numEntryPoint]);
                 }
             }));
 
@@ -89,7 +69,7 @@ export async function loadLazyChunks() {
             await Promise.all(
                 Array.from(validChunkGroups)
                     .map(([chunkIds]) =>
-                        Promise.all(chunkIds.map(id => wreq.e(id)))
+                        Promise.all(chunkIds.map(id => wreq.e(id as any).catch(() => { })))
                     )
             );
 
@@ -101,7 +81,7 @@ export async function loadLazyChunks() {
                         continue;
                     }
 
-                    if (wreq.m[entryPoint]) wreq(entryPoint);
+                    if (wreq.m[entryPoint]) wreq(entryPoint as any);
                 } catch (err) {
                     console.error(err);
                 }
@@ -129,44 +109,41 @@ export async function loadLazyChunks() {
             }, 0);
         }
 
-        function factoryListener(factory: AnyModuleFactory | ModuleFactory) {
+        Webpack.factoryListeners.add(factory => {
             let isResolved = false;
-            searchAndLoadLazyChunks(String(factory))
+            searchAndLoadLazyChunks(factory.toString()).then(() => isResolved = true);
-                .then(() => isResolved = true)
+
-                .catch(() => isResolved = true);
+            chunksSearchPromises.push(() => isResolved);
+        });
+
+        for (const factoryId in wreq.m) {
+            let isResolved = false;
+            searchAndLoadLazyChunks(wreq.m[factoryId].toString()).then(() => isResolved = true);
 
             chunksSearchPromises.push(() => isResolved);
         }
 
-        Webpack.factoryListeners.add(factoryListener);
-        for (const moduleId in wreq.m) {
-            factoryListener(wreq.m[moduleId]);
-        }
-
         await chunksSearchingDone;
-        Webpack.factoryListeners.delete(factoryListener);
 
         // Require deferred entry points
         for (const deferredRequire of deferredRequires) {
-            wreq(deferredRequire);
+            wreq!(deferredRequire as any);
         }
 
         // All chunks Discord has mapped to asset files, even if they are not used anymore
-        const allChunks = [] as PropertyKey[];
+        const allChunks = [] as string[];
 
         // Matches "id" or id:
-        for (const currentMatch of String(wreq.u).matchAll(/(?:"([\deE]+?)"(?![,}]))|(?:([\deE]+?):)/g)) {
+        for (const currentMatch of wreq!.u.toString().matchAll(/(?:"(\d+?)")|(?:(\d+?):)/g)) {
             const id = currentMatch[1] ?? currentMatch[2];
             if (id == null) continue;
 
-            const numId = Number(id);
+            allChunks.push(id);
-            allChunks.push(Number.isNaN(numId) ? id : numId);
         }
 
         if (allChunks.length === 0) throw new Error("Failed to get all chunks");
 
-        // Chunks which our regex could not catch to load
+        // Chunks that are not loaded (not used) by Discord code anymore
-        // It will always contain WebWorker assets, and also currently contains some language packs which are loaded differently
         const chunksLeft = allChunks.filter(id => {
             return !(validChunks.has(id) || invalidChunks.has(id));
         });
@@ -174,11 +151,14 @@ export async function loadLazyChunks() {
         await Promise.all(chunksLeft.map(async id => {
             const isWorkerAsset = await fetch(wreq.p + wreq.u(id))
                 .then(r => r.text())
-                .then(t => /importScripts\(|self\.postMessage/.test(t));
+                .then(t => t.includes("importScripts("));
 
-            // Loads the chunk. Currently this only happens with the language packs which are loaded differently
+            // Loads and requires a chunk
             if (!isWorkerAsset) {
-                await wreq.e(id);
+                await wreq.e(id as any);
+                // Technically, the id of the chunk does not match the entry point
+                // But, still try it because we have no way to get the actual entry point
+                if (wreq.m[id]) wreq(id as any);
             }
         }));
 

src/debug/runReporter.ts

@@ -6,56 +6,28 @@
 
 import { Logger } from "@utils/Logger";
 import * as Webpack from "@webpack";
-import { getBuildNumber, patchTimings } from "@webpack/patcher";
+import { patches } from "plugins";
 
-import { addPatch, patches } from "../plugins";
 import { loadLazyChunks } from "./loadLazyChunks";
 
-async function runReporter() {
+const ReporterLogger = new Logger("Reporter");
-    const ReporterLogger = new Logger("Reporter");
 
+async function runReporter() {
     try {
         ReporterLogger.log("Starting test...");
 
-        const { promise: loadLazyChunksDone, resolve: loadLazyChunksResolve } = Promise.withResolvers<void>();
+        let loadLazyChunksResolve: (value: void | PromiseLike<void>) => void;
-
+        const loadLazyChunksDone = new Promise<void>(r => loadLazyChunksResolve = r);
-        // The main patch for starting the reporter chunk loading
-        addPatch({
-            find: '"Could not find app-mount"',
-            replacement: {
-                match: /(?<="use strict";)/,
-                replace: "Vencord.Webpack._initReporter();"
-            }
-        }, "Vencord Reporter");
-
-        // @ts-ignore
-        Vencord.Webpack._initReporter = function () {
-            // initReporter is called in the patched entry point of Discord
-            // setImmediate to only start searching for lazy chunks after Discord initialized the app
-            setTimeout(() => loadLazyChunks().then(loadLazyChunksResolve), 0);
-        };
 
+        Webpack.beforeInitListeners.add(() => loadLazyChunks().then((loadLazyChunksResolve)));
         await loadLazyChunksDone;
 
-        if (IS_REPORTER && IS_WEB && !IS_VESKTOP) {
-            console.log("[REPORTER_META]", {
-                buildNumber: getBuildNumber(),
-                buildHash: window.GLOBAL_ENV.SENTRY_TAGS.buildId
-            });
-        }
-
         for (const patch of patches) {
             if (!patch.all) {
                 new Logger("WebpackInterceptor").warn(`Patch by ${patch.plugin} found no module (Module id is -): ${patch.find}`);
             }
         }
 
-        for (const [plugin, moduleId, match, totalTime] of patchTimings) {
-            if (totalTime > 5) {
-                new Logger("WebpackInterceptor").warn(`Patch by ${plugin} took ${Math.round(totalTime * 100) / 100}ms (Module id is ${String(moduleId)}): ${match}`);
-            }
-        }
-
         for (const [searchType, args] of Webpack.lazyWebpackSearchHistory) {
             let method = searchType;
 
@@ -78,9 +50,9 @@ async function runReporter() {
                     result = await Webpack.extractAndLoadChunks(code, matcher);
                     if (result === false) result = null;
                 } else if (method === "mapMangledModule") {
-                    const [code, mapper, includeBlacklistedExports] = args;
+                    const [code, mapper] = args;
 
-                    result = Webpack.mapMangledModule(code, mapper, includeBlacklistedExports);
+                    result = Webpack.mapMangledModule(code, mapper);
                     if (Object.keys(result).length !== Object.keys(mapper).length) throw new Error("Webpack Find Fail");
                 } else {
                     // @ts-ignore
@@ -90,21 +62,14 @@ 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") {
+                if (method === "find" || method === "proxyLazyWebpack" || method === "LazyComponentWebpack") logMessage += `(${args[0].toString().slice(0, 147)}...)`;
-                    if (args[0].$$vencordProps != null) {
+                else if (method === "extractAndLoadChunks") logMessage += `([${args[0].map(arg => `"${arg}"`).join(", ")}], ${args[1].toString()})`;
-                        logMessage += `(${args[0].$$vencordProps.map(arg => `"${arg}"`).join(", ")})`;
+                else if (method === "mapMangledModule") {
-                    } 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);
             }
@@ -116,6 +81,4 @@ async function runReporter() {
     }
 }
 
-// Run after the Vencord object has been created.
+runReporter();
-// We need to add extra properties to it, and it is only created after all of Vencord code has ran
-setTimeout(runReporter, 0);

src/globals.d.ts

@@ -64,8 +64,13 @@ declare global {
     export var Vesktop: any;
     export var VesktopNative: any;
 
-    interface Window extends Record<PropertyKey, any> {
+    interface Window {
+        webpackChunkdiscord_app: {
+            push(chunk: any): any;
+            pop(): any;
+        };
         _: LoDashStatic;
+        [k: string]: any;
     }
 }
 

src/main/index.ts

@@ -101,7 +101,7 @@ if (IS_VESKTOP || !IS_VANILLA) {
                 // TODO: Restrict this to only imported packages with fixed version.
                 // Perhaps auto generate with esbuild
                 csp["script-src"] ??= [];
-                csp["script-src"].push("'unsafe-eval'", "https://cdn.jsdelivr.net", "https://cdnjs.cloudflare.com");
+                csp["script-src"].push("'unsafe-eval'", "https://unpkg.com", "https://cdnjs.cloudflare.com");
                 headers[header] = [stringifyPolicy(csp)];
             }
         };

src/main/updater/http.ts

@@ -16,7 +16,6 @@
  * 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";
@@ -26,6 +25,7 @@ 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,8 +35,7 @@ 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,16 +71,13 @@ 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=${process.versions.chrome}`;
+            : `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${id}%26uc&prodversion=32`;
-
         const buf = await get(url, {
             headers: {
-                "User-Agent": `Electron ${process.versions.electron} ~ Vencord (https://github.com/Vendicated/Vencord)`
+                "User-Agent": "Vencord (https://github.com/Vendicated/Vencord)"
             }
         });
-
         await extract(crxToZip(buf), extDir).catch(console.error);
     }
 

src/modules.d.ts

@@ -16,6 +16,7 @@
  * 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" {
@@ -42,6 +43,11 @@ declare module "~git-remote" {
     export default remote;
 }
 
+declare module "~translations" {
+    const translations: Record<string, Record<string, any>>;
+    export default translations;
+}
+
 declare module "file://*" {
     const content: string;
     export default content;

src/plugins/_api/badges/fixBadgeOverflow.css

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

src/plugins/_api/badges/fixDiscordBadgePadding.css

@@ -1,5 +0,0 @@
-/* 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 "./fixDiscordBadgePadding.css";
+import "./fixBadgeOverflow.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, ModalContent, ModalFooter, ModalHeader, ModalRoot, openModal } from "@utils/modal";
+import { closeModal, Modals, openModal } from "@utils/modal";
 import definePlugin from "@utils/types";
 import { Forms, Toasts, UserStore } from "@webpack/common";
 import { User } from "discord-types/general";
@@ -62,28 +62,58 @@ export default definePlugin({
     authors: [Devs.Megu, Devs.Ven, Devs.TheSun],
     required: true,
     patches: [
+        /* Patch the badge list component on user profiles */
         {
-            find: ".FULL_SIZE]:26",
+            find: 'id:"premium",',
-            replacement: {
-                match: /(?=;return 0===(\i)\.length\?)(?<=(\i)\.useMemo.+?)/,
-                replace: ";$1=$2.useMemo(()=>[...$self.getBadges(arguments[0].displayProfile),...$1],[$1])"
-            }
-        },
-        {
-            find: "#{intl::PROFILE_USER_BADGES}",
             replacement: [
                 {
-                    match: /(alt:" ","aria-hidden":!0,src:)(.+?)(?=,)(?<=href:(\i)\.link.+?)/,
+                    match: /&&(\i)\.push\(\{id:"premium".+?\}\);/,
-                    replace: (_, rest, originalSrc, badge) => `...${badge}.props,${rest}${badge}.image??(${originalSrc})`
+                    replace: "$&$1.unshift(...$self.getBadges(arguments[0]));",
                 },
                 {
-                    match: /(?<="aria-label":(\i)\.description,.{0,200})children:/,
+                    // alt: "", aria-hidden: false, src: originalSrc
-                    replace: "children:$1.component?$self.renderBadgeComponent({...$1}) :"
+                    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)}),$&"
+                    replace: "...($1.onClick && { onClick: vcE => $1.onClick(vcE, $1) }),$&"
+                }
+            ]
+        },
+
+        /* new profiles */
+        {
+            find: ".PANEL]:14",
+            replacement: {
+                match: /(?<=(\i)=\(0,\i\.\i\)\(\i\);)return 0===\i.length\?/,
+                replace: "$1.unshift(...$self.getBadges(arguments[0].displayProfile));$&"
+            }
+        },
+        {
+            find: ".description,delay:",
+            replacement: [
+                {
+                    // alt: "", aria-hidden: false, src: originalSrc
+                    match: /alt:" ","aria-hidden":!0,src:(?=.{0,20}(\i)\.icon)/,
+                    // ...badge.props, ..., src: badge.image ?? ...
+                    replace: "...$1.props,$& $1.image??"
+                },
+                {
+                    match: /(?<=text:(\i)\.description,.{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) }),$&"
                 }
             ]
         }
@@ -100,9 +130,8 @@ export default definePlugin({
         }
     },
 
-    userProfileBadge: ContributorBadge,
-
     async start() {
+        Vencord.Api.Badges.addBadge(ContributorBadge);
         await loadBadges();
     },
 
@@ -142,8 +171,8 @@ export default definePlugin({
                         closeModal(modalKey);
                         VencordNative.native.openExternal("https://github.com/sponsors/Vendicated");
                     }}>
-                        <ModalRoot {...props}>
+                        <Modals.ModalRoot {...props}>
-                            <ModalHeader>
+                            <Modals.ModalHeader>
                                 <Flex style={{ width: "100%", justifyContent: "center" }}>
                                     <Forms.FormTitle
                                         tag="h2"
@@ -157,8 +186,8 @@ export default definePlugin({
                                         Vencord Donor
                                     </Forms.FormTitle>
                                 </Flex>
-                            </ModalHeader>
+                            </Modals.ModalHeader>
-                            <ModalContent>
+                            <Modals.ModalContent>
                                 <Flex>
                                     <img
                                         role="presentation"
@@ -181,13 +210,13 @@ export default definePlugin({
                                         Please consider supporting the development of Vencord by becoming a donor. It would mean a lot!!
                                     </Forms.FormText>
                                 </div>
-                            </ModalContent>
+                            </Modals.ModalContent>
-                            <ModalFooter>
+                            <Modals.ModalFooter>
                                 <Flex style={{ width: "100%", justifyContent: "center" }}>
                                     <DonateButton />
                                 </Flex>
-                            </ModalFooter>
+                            </Modals.ModalFooter>
-                        </ModalRoot>
+                        </Modals.ModalRoot>
                     </ErrorBoundary>
                 ));
             },

src/plugins/_api/chatButtons.ts

@@ -12,16 +12,11 @@ export default definePlugin({
     description: "API to add buttons to the chat input",
     authors: [Devs.Ven],
 
-    patches: [
+    patches: [{
-        {
+        find: '"sticker")',
-            find: '"sticker")',
+        replacement: {
-            replacement: {
+            match: /return\(!\i\.\i&&(?=\(\i\.isDM.+?(\i)\.push\(.{0,50}"gift")/,
-                // FIXME(Bundler change related): Remove old compatiblity once enough time has passed
+            replace: "$&(Vencord.Api.ChatButtons._injectButtons($1,arguments[0]),true)&&"
-                match: /return\((!)?\i\.\i(?:\|\||&&)(?=\(.+?(\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,22 +34,12 @@ export default definePlugin({
             }
         },
         {
-            find: "navId:",
+            find: ".Menu,{",
             all: true,
-            noWarn: true,
+            replacement: {
-            replacement: [
+                match: /Menu,{(?<=\.jsxs?\)\(\i\.Menu,{)/g,
-                {
+                replace: "$&contextMenuApiArguments:typeof arguments!=='undefined'?arguments:[],"
-                    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

@@ -1,31 +0,0 @@
-/*
- * 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: ".contain,SCALE_DOWN:",
-            replacement: {
-                match: /(?<="IMAGE"===\i\?)\i(?=\?)/,
-                replace: "true"
-            }
-        },
-        {
-            find: ".dimensionlessImage,",
-            replacement: {
-                match: /(?<="IMAGE"===\i&&\(\i=)\i(?=\?)/,
-                replace: "true"
-            }
-        }
-    ]
-});

src/plugins/_api/memberListDecorators.ts

@@ -19,15 +19,10 @@
 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)",
@@ -36,8 +31,8 @@ export default definePlugin({
                     match: /let\{[^}]*lostPermissionTooltipText:\i[^}]*\}=(\i),/,
                     replace: "$&vencordProps=$1,"
                 }, {
-                    match: /#{intl::GUILD_OWNER}(?=.+?decorators:(\i)\(\)).+?\1=?\(\)=>.+?children:\[/,
+                    match: /\.Messages\.GUILD_OWNER(?=.+?decorators:(\i)\(\)).+?\1=?\(\)=>.+?children:\[/,
-                    replace: "$&(typeof vencordProps=='undefined'?null:Vencord.Api.MemberListDecorators.__getDecorators(vencordProps)),"
+                    replace: "$&...(typeof vencordProps=='undefined'?[]:Vencord.Api.MemberListDecorators.__getDecorators(vencordProps)),"
                 }
             ]
         },
@@ -45,8 +40,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

@@ -1,11 +0,0 @@
-.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

@@ -1,68 +0,0 @@
-/*
- * 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}`;
-                },
-            },
-        },
-    ],
-});