initial custom plugin loading

.eslintrc.json

@@ -0,0 +1,118 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "ignorePatterns": ["dist", "browser"],
+    "plugins": [
+        "@typescript-eslint",
+        "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
+        "header/header": [
+            2,
+            "block",
+            [
+                {
+                    "pattern": "!?",
+                    "template": " "
+                },
+                " * Vencord, a modification for Discord's desktop app",
+                {
+                    "pattern": " \\* Copyright \\(c\\) \\d{4}",
+                    "template": " * 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/>.",
+                ""
+            ],
+            2
+        ],
+        "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"],
+        "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", { "object": true, "array": 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

@@ -1,24 +1,14 @@
-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.
+name: Blank Template
+description: Use this only if your issue does not fit into another template. **DO NOT ASK FOR SUPPORT OR REQUEST PLUGINS**
+labels: []
 
 body:
-  - type: markdown
-    attributes:
-      value: |
-        # READ THIS BEFORE OPENING AN ISSUE
-
-        This form is ONLY FOR DEVELOPERS. YOUR ISSUE WILL BE CLOSED AND YOU WILL POSSIBLY BE BLOCKED FROM THE REPOSITORY IF YOU IGNORE THIS.
-        
-        DO NOT USE THIS FORM, unless
-        - you are a vencord contributor
-        - you were given explicit permission to use this form by a moderator in our support server
-        
-        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
+    id: info-sec
     attributes:
-      label: Content
+      label: Tell us all about it.
+      description: Go nuts, let us know what you're wanting to bring attention to.
+      placeholder: ...
     validations:
       required: true
 
@@ -26,6 +16,7 @@ body:
     id: agreement-check
     attributes:
       label: Request Agreement
+      description: DO NOT USE THIS TEMPLATE FOR SUPPORT OR PLUGIN REQUESTS!!! For Support, **join our Discord**. For plugin requests, **use discussions**
       options:
-        - label: I have read the requirements for opening an issue above
+        - label: This is not a support or plugin request
           required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,22 +1,9 @@
 name: Bug/Crash Report
-description: Create a bug or crash report for Vencord. 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.
+description: Create a bug or crash report for Vencord
 labels: [bug]
 title: "[Bug] <title>"
 
 body:
-  - type: markdown
-    attributes:
-      value: |
-        # READ THIS BEFORE OPENING AN ISSUE
-
-        This form is ONLY FOR DEVELOPERS. YOUR ISSUE WILL BE CLOSED AND YOU WILL POSSIBLY BE BLOCKED FROM THE REPOSITORY IF YOU IGNORE THIS.
-        
-        DO NOT USE THIS FORM, unless
-        - you are a vencord contributor
-        - you were given explicit permission to use this form by a moderator in our support server
-        
-        DO NOT USE THIS FORM FOR SECURITY RELATED ISSUES. [CREATE A SECURITY ADVISORY INSTEAD.](https://github.com/Vendicated/Vencord/security/advisories/new)
-  
   - type: input
     id: discord
     attributes:
@@ -77,5 +64,3 @@ body:
       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
-          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,32 @@
+name: Feature Request
+description: Create a feature request for Vencord. To request new plugins, please use the Discussions tab
+labels: [enhancement]
+title: "[Feature Request] <title>"
+
+body:
+  - 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: feature-basic-description
+    attributes:
+      label: What is it that you'd like to see?
+      description: Describe the feature you want added as detailed as possible
+      placeholder: I think ... would be a cool feature to add. This would be awesome, thanks!
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: agreement-check
+    attributes:
+      label: Request Agreement
+      description: DO NOT USE THIS TEMPLATE FOR PLUGIN REQUESTS!!! For plugin requests, **use discussions**
+      options:
+        - label: This is not a plugin request
+          required: true

.github/workflows/build.yml

@@ -18,63 +18,61 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@v3
 
-            - uses: pnpm/action-setup@v3 # Install pnpm using packageManager key in package.json
+            - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
-            - name: Use Node.js 20
-              uses: actions/setup-node@v4
+            - name: Use Node.js 19
+              uses: actions/setup-node@v3
               with:
-                  node-version: 20
+                  node-version: 19
                   cache: "pnpm"
 
             - name: Install dependencies
               run: pnpm install --frozen-lockfile
 
             - name: Build web
-              run: pnpm buildWebStandalone
+              run: pnpm buildWeb --standalone
 
             - name: Build
               run: pnpm build --standalone
 
             - name: Generate plugin list
-              run: pnpm generatePluginJson dist/plugins.json dist/plugin-readmes.json
+              run: pnpm generatePluginJson dist/plugins.json
 
             - name: Clean up obsolete files
               run: |
-                  rm -rf dist/*-unpacked dist/monaco Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
+                rm -rf dist/*-unpacked Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
 
             - name: Get some values needed for the release
               id: release_values
               run: |
-                  echo "release_tag=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+                echo "release_tag=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
 
             - name: Upload DevBuild as release
-              if: github.repository == 'Vendicated/Vencord'
               run: |
-                  gh release upload devbuild --clobber dist/*
-                  gh release edit devbuild --title "DevBuild $RELEASE_TAG"
+                gh release upload devbuild --clobber dist/*
+                gh release edit devbuild --title "DevBuild $RELEASE_TAG"
               env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                  RELEASE_TAG: ${{ env.release_tag }}
+                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                RELEASE_TAG: ${{ env.release_tag }}
 
             - name: Upload DevBuild to builds repo
-              if: github.repository == 'Vendicated/Vencord'
               run: |
-                  git config --global user.name "$USERNAME"
-                  git config --global user.email actions@github.com
+                git config --global user.name "$USERNAME"
+                git config --global user.email actions@github.com
 
-                  git clone https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git upload
-                  cd upload
+                git clone https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git upload
+                cd upload
 
-                  GLOBIGNORE=.git:.gitignore:README.md:LICENSE
-                  rm -rf *
-                  cp -r ../dist/* .
+                GLOBIGNORE=.git:.gitignore:README.md:LICENSE
+                rm -rf *
+                cp -r ../dist/* .
 
-                  git add -A
-                  git commit -m "Builds for https://github.com/$GITHUB_REPOSITORY/commit/$GITHUB_SHA"
-                  git push --force https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git
+                git add -A
+                git commit -m "Builds for https://github.com/$GITHUB_REPOSITORY/commit/$GITHUB_SHA"
+                git push --force https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git
               env:
-                  API_TOKEN: ${{ secrets.BUILDS_TOKEN }}
-                  GH_REPO: Vencord/builds
-                  USERNAME: GitHub-Actions
+                API_TOKEN: ${{ secrets.BUILDS_TOKEN }}
+                GH_REPO: Vencord/builds
+                USERNAME: GitHub-Actions

.github/workflows/codeberg-mirror.yml

@@ -1,22 +0,0 @@
-name: Sync to Codeberg
-concurrency:
-    group: ${{ github.ref }}
-    cancel-in-progress: true
-on:
-    push:
-    workflow_dispatch:
-    schedule:
-        - cron: "0 */6 * * *"
-
-jobs:
-    codeberg:
-        if: github.repository == 'Vendicated/Vencord'
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
-            - uses: pixta-dev/repository-mirroring-action@674e65a7d483ca28dafaacba0d07351bdcc8bd75 # v1.1.1
-              with:
-                  target_repo_url: "git@codeberg.org:Vee/cord.git"
-                  ssh_private_key: ${{ secrets.CODEBERG_SSH_PRIVATE_KEY }}

.github/workflows/publish.yml

@@ -6,40 +6,55 @@ on:
 
 jobs:
     Publish:
-        if: github.repository == 'Vendicated/Vencord'
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v4
+            - uses: actions/checkout@v3
 
             - name: check that tag matches package.json version
               run: |
-                  pkg_version="v$(jq -r .version < package.json)"
-                  if [[ "${{ github.ref_name }}" != "$pkg_version" ]]; then
-                      echo "Tag ${{ github.ref_name }} does not match package.json version $pkg_version" >&2
-                      exit 1
-                  fi
+                pkg_version="v$(jq -r .version < package.json)"
+                if [[ "${{ github.ref_name }}" != "$pkg_version" ]]; then
+                    echo "Tag ${{ github.ref_name }} does not match package.json version $pkg_version" >&2
+                    exit 1
+                fi
 
-            - uses: pnpm/action-setup@v3 # Install pnpm using packageManager key in package.json
+            - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
             - name: Use Node.js 19
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v3
               with:
-                  node-version: 20
+                  node-version: 19
                   cache: "pnpm"
 
             - name: Install dependencies
               run: pnpm install --frozen-lockfile
 
             - name: Build web
-              run: pnpm buildWebStandalone
+              run: pnpm buildWeb --standalone
 
             - name: Publish extension
               run: |
-                  cd dist/chromium-unpacked
-                  pnpx chrome-webstore-upload-cli@2.1.0 upload --auto-publish
+                # Do not fail so that even if chrome fails, firefox gets a shot. But also store exit code to fail workflow later
+                EXIT_CODE=0
+
+                # Chrome
+                cd dist/chromium-unpacked
+                pnpx chrome-webstore-upload-cli@2.1.0 upload --auto-publish || EXIT_CODE=$?
+
+                # Firefox
+                cd ../firefox-unpacked
+                npm i -g web-ext@7.4.0 web-ext-submit@7.4.0
+                web-ext-submit || EXIT_CODE=$?
+
+                exit $EXIT_CODE
               env:
-                  EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
-                  CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
-                  CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
-                  REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+                # Chrome
+                EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
+                CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
+                CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
+                REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
+
+                # Firefox
+                WEB_EXT_API_KEY: ${{ secrets.WEBEXT_USER }}
+                WEB_EXT_API_SECRET: ${{ secrets.WEBEXT_SECRET }}

.github/workflows/reportBrokenPlugins.yml

@@ -2,66 +2,56 @@ name: Test Patches
 on:
     workflow_dispatch:
     schedule:
-        # Every day at midnight
-        - cron: 0 0 * * *
+      # Every day at midnight
+      - cron: 0 0 * * *
 
 jobs:
     TestPlugins:
-        if: github.repository == 'Vendicated/Vencord'
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v4
-              if: ${{ github.event_name == 'schedule' }}
+            - uses: actions/checkout@v3
+
+            - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
+
+            - name: Use Node.js 19
+              uses: actions/setup-node@v3
               with:
-                  ref: dev
-
-            - uses: actions/checkout@v4
-              if: ${{ github.event_name == 'workflow_dispatch' }}
-
-            - uses: pnpm/action-setup@v3 # Install pnpm using packageManager key in package.json
-
-            - name: Use Node.js 20
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 20
+                  node-version: 19
                   cache: "pnpm"
 
             - name: Install dependencies
               run: |
-                  pnpm install --frozen-lockfile
+                pnpm install --frozen-lockfile
+                pnpm add puppeteer
 
-            - name: Install Google Chrome
-              id: setup-chrome
-              uses: browser-actions/setup-chrome@82b9ce628cc5595478a9ebadc480958a36457dc2
-              with:
-                  chrome-version: stable
+                sudo apt-get install -y chromium-browser
 
-            - name: Build Vencord Reporter Version
-              run: pnpm buildReporter
+            - name: Build web
+              run: pnpm buildWeb --standalone
 
             - name: Create Report
               timeout-minutes: 10
               run: |
-                  export PATH="$PWD/node_modules/.bin:$PATH"
-                  export CHROMIUM_BIN=${{ steps.setup-chrome.outputs.chrome-path }}
+                export PATH="$PWD/node_modules/.bin:$PATH"
+                export CHROMIUM_BIN=$(which chromium-browser)
 
-                  esbuild scripts/generateReport.ts > dist/report.mjs
-                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
+                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 }}
+                DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
+                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
+                export PATH="$PWD/node_modules/.bin:$PATH"
+                export CHROMIUM_BIN=$(which chromium-browser)
+                export USE_CANARY=true
 
-                  esbuild scripts/generateReport.ts > dist/report.mjs
-                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
+                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 }}
+                DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
+                DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}

.github/workflows/test.yml

@@ -1,22 +1,23 @@
 name: test
 on:
     push:
+        branches:
+            - main
     pull_request:
         branches:
             - main
-            - dev
 jobs:
     test:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v4
-            - uses: pnpm/action-setup@v3 # Install pnpm using packageManager key in package.json
+            - uses: actions/checkout@v3
+            - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
-            - name: Use Node.js 20
-              uses: actions/setup-node@v4
+            - name: Use Node.js 18
+              uses: actions/setup-node@v3
               with:
-                  node-version: 20
+                  node-version: 18
                   cache: "pnpm"
 
             - name: Install dependencies
@@ -25,8 +26,5 @@ jobs:
             - name: Lint & Test if desktop version compiles
               run: pnpm test
 
-            - name: Test if web version compiles
-              run: pnpm buildWeb
-
-            - name: Test if plugin structure is valid
-              run: pnpm generatePluginJson
+            - name: Lint & Test if web version compiles
+              run: pnpm testWeb

.gitignore

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

.gitmodules

@@ -1,18 +0,0 @@
-[submodule "src/userplugins/ToastNotificationsMerge"]
-	path = src/userplugins/ToastNotificationsMerge
-	url = https://github.com/ethan-davies/ToastNotificationsMerge.git
-[submodule "src/userplugins/vc-message-logger-enhanced"]
-	path = src/userplugins/vc-message-logger-enhanced
-	url = https://github.com/Syncxv/vc-message-logger-enhanced.git
-[submodule "src/userplugins/DontLeak"]
-	path = src/userplugins/DontLeak
-	url = https://github.com/pernydev/DontLeak.git
-[submodule "src/userplugins/VencordPlugins"]
-	path = src/userplugins/VencordPlugins
-	url = https://github.com/Kyuuhachi/VencordPlugins.git
-[submodule "src/userplugins/vc-timezones"]
-	path = src/userplugins/vc-timezones
-	url = https://github.com/Syncxv/vc-timezones.git
-[submodule "src/userplugins/ServerDownload"]
-	path = src/userplugins/ServerDownload
-	url = https://github.com/cheesesamwich/ServerDownload.git

.npmrc

@@ -1,2 +1 @@
 strict-peer-dependencies=false
-package-manager-strict=false

.stylelintrc.json

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

.vscode/extensions.json

@@ -1,9 +1,11 @@
 {
     "recommendations": [
         "dbaeumer.vscode-eslint",
+        "eamodio.gitlens",
         "EditorConfig.EditorConfig",
+        "ExodiusStudios.comment-anchors",
+        "formulahendry.auto-rename-tag",
         "GregorBiswanger.json2ts",
-        "stylelint.vscode-stylelint",
-        "Vendicated.vencord-companion"
+        "stylelint.vscode-stylelint"
     ]
 }

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "explicit"
+        "source.fixAll.eslint": true
     },
     "[typescript]": {
         "editor.defaultFormatter": "vscode.typescript-language-features"
@@ -12,12 +12,5 @@
     "javascript.format.semicolons": "insert",
     "typescript.format.semicolons": "insert",
     "typescript.preferences.quoteStyle": "double",
-    "javascript.preferences.quoteStyle": "double",
-
-    "gitlens.remotes": [
-        {
-            "domain": "codeberg.org",
-            "type": "Gitea"
-        }
-    ]
+    "javascript.preferences.quoteStyle": "double"
 }

.vscode/tasks.json

@@ -1,25 +0,0 @@
-{
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "label": "Build",
-            "type": "shell",
-            "command": "pnpm build",
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
-        },
-        {
-            "label": "Watch",
-            "type": "shell",
-            "command": "pnpm watch",
-            "problemMatcher": [],
-            "group": {
-                "kind": "build"
-            }
-        }
-    ]
-}

CODE_OF_CONDUCT.md

@@ -16,6 +16,5 @@ DON'T
 
 Repetitive violations of these guidelines might get your access to the repository restricted.
 
-If you feel like a user is violating these guidelines or feel treated unfairly, please refrain from vigilantism
-and instead report the issue to a moderator! The best way is joining our [official Discord community](https://vencord.dev/discord)
-and opening a modmail ticket.
+
+If you feel like a user is violating these guidelines or feel treated unfairly, please refrain from publicly challenging them and instead contact a Moderator on our Discord server or send an email to vendicated+conduct@riseup.net!

CONTRIBUTING.md

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

README.md

@@ -1,67 +1,48 @@
 # Vencord
 
-[![Codeberg Mirror](https://img.shields.io/static/v1?style=for-the-badge&label=Codeberg%20Mirror&message=codeberg.org/Vee/cord&color=2185D0&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAAKbUlEQVR4nNVae3AV5RX/nW/3Pva+b24e5HHzIICQKGoiYiW8NFBFgohaa6ctglpbFSujSGurzUinohWsOij/gGX6R2fqOK0d1FYTEZXaTrWCBbEikJCEyCvkeXNvkrunf+zdkJDkPnex/c3cmd29+53v/M6e73znnF2Cydj4Tntldzi6qrN/qKqzf2jy6b7BnL4B1dI7oMp9AyoRAIdVsNMqhlxWMZjtspzyK/Jhr036OMsm//bh2vzPzNSPzBD6xFutd7R0Dq758ky4orkjYuc05RCAkixbeEq2/UCJ1/LczxcX/c5IPfU5DMHmxpbCpu7o1k/b+xc1n43YjJI7EqV+W2RmvuPt0oDjB2vn5bQbITNjAzzdeKK8qTO0bU9T77zucNQUjzofHrvENWWu3aUBZfW6+ZOOZiIrbYXrmUXo9daX3v6i667O/iGRiRLpwqtIvKDc+0efJ3hb/UIaSkdGWgZ4sqGt9r2m3lc/P9HvSWe80ZiRp3TPL/UsX1+bvyvVsSkb4NE3WjbuPNj5SM8Fcvdk4bAKrqvwv7DxhuCPUxmXNIn6XSy3nWr6R8OhrqrU1btwqJ3m/bgwu/SqZJdEUgbYsuuka09b9/4Pm3tLMlPvwuAbpe6m+RcplfdcURBKdG9CA2zZddLV2Nx1+JO2vlxj1LswqCpynlxc6SxLZIS40bueWfy9vXvv/xt5APhXa1/u7v+EPqvfxXK8++IaoO2Vpn9+cLS33FjVLhw+bOotOX7q6N/i3TOhAX7y+rHN/+sBLxm8fah71k93tjw/0f/jGuDJxtZrdh7setA8tS4sdn7eef+v3mmfP95/Ywxw6x9Yev9I35/6Iubv83WVfl5a6Uu3VkoavZEo7TnS/Vo98xi+Yy6UKC3bDp7sd5ut1OWFDjyzNMib6oq5Oug0ezp8dqLfG3r92Nbzr48ywNONJ8obDnV/z2xlAk4ZW1aUqhaJIAvCb5YVqwFn3GBtCBoO9dz5TOPxUbnMKAM0dYa2d5lc2AgCNi8r5klui3aBgWynjE11QZbI3FV3NjQkjnYNbB+lj36wubGlcE9T71xTNQDw0Px8nlvmHl73GmfCrKCL19Tkmh4P9jT1LHz2vVP5+vmwAZq71a1m1/PXTPXwD68eS5KIEVUZd1yZwwumeEw1Qld/lJrPhF7Sz4cNsO+rUK2ZExd6rfj10iCPZ2GJCCoAZuCJxQUc9FvNVAX72kPX6ccC0Hp4zR0Ru1kT2mTCSzeXqn5l/EAniMAqoDLDYZWwqa5EVSzmhaKmsxHbLxvbbgdiBmjpHFxj2mwANlxXxBdPUib8nwgQgqAyEFUZxT4L1i/MN3UpHDsTWQvEDHDoTLjCrIluuyzAt8zMSkhGFhp5hrYUFk3z8IqZftOMcKRj4GIAEM80tFccM8n9Z+Qq+MXigqRIWCQCMzQvYIbKwH1X53FFnjkr88iZsLKpoXWa6BiIrjbDzF67hK23lKp2Obm1LAstPEZVjTwDkAio/2ZQ9dolw/VjAB0DfKfoCg9WGy2cADy1NMhBX2rR3CIRGICq8rAhAg4Jj9UWsDBhg+4MR6vF2VC0zGjB99fk8eJp3pQdyyrRMHF9KURVxswCB6+alWO4o3b2RyeLU32D2UYKnVPm5gfm5qWlrF0Wo4hzbCmoDNw0089XlboNNcLpvsFc0RtRDXuNle+x4Lkbi9PO6WWJIBFGEY+qjGjswtq5eVzosRilLnoiUavoH1INiTCyIDy/vETNcmRW1dl0L4gRVxmx3YFhlwnrry1QrZIxASE0yJIIDaiGSHt8UQFXF2Ve1zusYgzxkXGhyGvFvePUE+mgfyAqhGqAqKWVPv5udbYhSjmtkpYWq6OJqzFjqCpjTpmbl1Rk3klSGRBWmTISNC3Hjo1LgoYFJ0GA1aIVR+cTVxlQoS2Pb18a4PLszMKXzSJYuCySmq4Al03CiytKVYfBhYvLKk1IXE+XLRLhwZp81WlNf26HTFHhd0jhdAYTgKduCPLkgPHfQjitYkLiAIEZBDBlu2R6aF7euCV2Mgg45bDw2qWOdAavnp3D109PPdlJBvpTnYg4kVY3MDMuylVw62WJi63x4LHLZ0TAIR9OdWBVodPUclUQwWmT4hLXfgCIUDfDi6oiR8rzBJzyl8LnkD9KZVCOU8aLN5eoshnJ+Qh4bFJC4gztmEjgrtk5anaKnWWfXfpIuBTLjmSpSILw/E0laq7LuGxsIngVCYmIa96hLRG3TaZ1C/KTfjAEQLFIO8TPFk7aH/RZI8kMWrdgEs8udqXLKSUoMkEW4ETEQTRsoHyPlVZfmVw+Uuy3hR9bVHBQAMD0XPu/Ew24dqqH777K/La1DiKCxyYlRRzQymgG4+oyDxZOTdxZnp5r3wvEWmJ5btuL8W4uzbJh87LitLebdOFVpKSJx4IlwIzbL81CcYLO8iSX/IImGQCYae6Wg/2tXQNjNnW7LPDKyilqZd7ETU2zEBlifNTSS4i9PNFIx44x4jh2nZlBsUr0dN8QP/6XVhEaHJvnlfhtkXd/NF0BUextKRFXFznfGk+JDdcX8tdBHtDa6YpFsB4I9ac88omf8wbEgqa2XAIOme6bM35foqrQ+QZIKwGG80ifVbrXZZNGDfhOVYBvviS9JMMoaP3AEcQpPnHdOxiMGXkKbrx4dGfZY5c4T8H9+vmwAeqXFLXOKXW9r59fWuDA44sKv1byAOBzyCkTH+kdS2f4MLPgXJI0p9T17vrFxcf181GVxEUB+0qfIqt+RcKWFSWGNR4ygd4RTpW4HiCJgFWzstmnSPA7ZLU827pypPwxDB/687GXl1X6Vs6bbGz/LRN80hZCT+yLFZ0cgHED4egACeiXm89GsP9EePuzy4rvGil7jAGYmQDsBjDHUBYZ4GhHBMfORigd4rpnyIS9u6d4rqgnGrUtjCmmSYuOqwB0GcwjbWh9xviurpNnxnDA1IspMPe6bOL755MHJvhKjIgOA7jbJD4pw22Thj+kSIW47h2KRaydVezeP57sCdspRPQqgGeNJJIuBAE+ReJUiOv32mXaXjPZs21C2QnmXgdghyEsMoRfkVMiDgCywF/by9z3xJMb1wCxeHAPgDczZpAh/Iq+HSYmDjCsstgThmf5t4ii8eQm7CgS0SCA5QBezoRApnBaBSyCEhIHCLJEb4ZUd+2SqZSwzE+qpUpEQ9CC4qb01M8cRIQsh8zxiKsMtsn08nvlnrpkyAPj5AGJwMw3AtgGwJ/q2ExxvHsQB74KxfKBMblAyGmTHq4pc4/5GjQeUm6qE9FrAK4E8H6ie41GlkN/jTk6F5Ak2ueUpNmpkgfSMAAAENERAAsB3AHgZDoy0oFdFnBYpXPEBfU4beLRD6Z4qmumug+kIzPjaoeZfQDWAHgAQFam8hLh4MkwWjsHemyS2OF08IYrCjynzZ4zKTCzi5nXMvOnzBw16bevIxR95JOj7DNKb1PqXWa+HMDtAGoBXII0lxq0N2OfAmgA8Hsi2muMhudgesHPzNkA5gKoADADwFRoS8UHQO+x9wLoBNAB4AsAnwM4AOADIjLVxf8L9kdXUOE0IskAAAAASUVORK5CYII=)](https://codeberg.org/Vee/cord)
-
 The cutest Discord client mod
 
-| ![image](https://github.com/Vendicated/Vencord/assets/45497981/706722b1-32de-4d99-bee9-93993b504334) |
-| :--------------------------------------------------------------------------------------------------: |
-|   A screenshot of vencord showcasing the [vencord-theme](https://github.com/synqat/vencord-theme)    |
-
 ## Features
 
 -   Super easy to install (Download Installer, open, click install button, done)
--   100+ plugins built in: [See a list](https://vencord.dev/plugins)
-    -   Some highlights: SpotifyControls, MessageLogger, Experiments, GameActivityToggle, Translate, NoTrack, QuickReply, Free Emotes/Stickers, PermissionsViewer, CustomCommands, ShowHiddenChannels, PronounDB
+-   100+ plugins built in: [See a list](https://gist.github.com/Vendicated/8696cde7b92548064a3ae92ead84d033)
+    -   Some highlights: SpotifyControls, GameActivityToggle, Experiments, NoTrack, MessageLogger, QuickReply, Free Emotes/Stickers, CustomCommands, ShowHiddenChannels, PronounDB
 -   Fairly lightweight despite the many inbuilt plugins
 -   Excellent Browser Support: Run Vencord in your Browser via extension or UserScript
 -   Works on any Discord branch: Stable, Canary or PTB all work (though for the best experience I recommend stable!)
 -   Custom CSS and Themes: Inbuilt css editor with support to import any css files (including BetterDiscord themes)
 -   Privacy friendly, blocks Discord analytics & crash reporting out of the box and has no telemetry
 -   Maintained very actively, broken plugins are usually fixed within 12 hours
--   Settings sync: Keep your plugins and their settings synchronised between devices / apps (optional)
-
 
 ## Installing / Uninstalling
 
-Visit https://vencord.dev/download
+[![Download and run the Installer ](https://img.shields.io/github/v/release/Vencord/Installer?label=Download%20Vencord%20Installer&style=for-the-badge)](https://github.com/Vencord/Installer#usage)
 
-## Join our Support/Community Server
+## Installing on Browser
 
-https://discord.gg/D9uwnFnqmd
+[![Get it on the Firefox Webstore](https://blog.mozilla.org/addons/files/2015/11/get-the-addon.png)](https://addons.mozilla.org/en-GB/firefox/addon/vencord-web/) [![Get it on the Chrome Webstore](https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png)](https://chrome.google.com/webstore/detail/vencord-web/cbghhgpcnddeihccjmnadmkaejncjndb)
 
-## Sponsors
+Or use the [UserScript](https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js) - Please note that the CSS Editor, Themes loaded from remote sources and co. will not work in the UserScript. Use the extension if you need any of those
 
-|     **Thanks a lot to all Vencord [sponsors](https://github.com/sponsors/Vendicated)!!**     |
-| :------------------------------------------------------------------------------------------: |
-|   [![](https://meow.vendicated.dev/sponsors.png)](https://github.com/sponsors/Vendicated)    |
-| *generated using [github-sponsor-graph](https://github.com/Vendicated/github-sponsor-graph)* |
+## Building from Source
 
+See the docs folder
 
-## Star History
+## Contributing
 
-<a href="https://star-history.com/#Vendicated/Vencord&Timeline">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=Vendicated/Vencord&type=Timeline&theme=dark" />
-    <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=Vendicated/Vencord&type=Timeline" />
-    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Vendicated/Vencord&type=Timeline" />
-  </picture>
-</a>
+See [CONTRIBUTING.md](CONTRIBUTING.md) and [Megu's Plugin Guide!](docs/2_PLUGINS.md)
+
+[contribute]: CONTRIBUTING.md
+
+[contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute] [contribute]
+
+## Join
+
+[join]: https://discord.gg/D9uwnFnqmd
+
+[join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join] [join]
 
 ## Disclaimer
 
 Discord is trademark of Discord Inc. and solely mentioned for the sake of descriptivity.
 Mention of it does not imply any affiliation with or endorsement by Discord Inc.
-
-<details>
-<summary>Using Vencord violates Discord's terms of service</summary>
-
-Client modifications are against Discord’s Terms of Service.
-
-However, Discord is pretty indifferent about them and there are no known cases of users getting banned for using client mods! So you should generally be fine as long as you don’t use any plugins that implement abusive behaviour. But no worries, all inbuilt plugins are safe to use!
-
-Regardless, if your account is very important to you and it getting disabled would be a disaster for you, you should probably not use any client mods (not exclusive to Vencord), just to be safe
-
-Additionally, make sure not to post screenshots with Vencord in a server where you might get banned for it
-
-</details>

browser/GMPolyfill.js

@@ -16,6 +16,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+function fetchOptions(url) {
+    return new Promise((resolve, reject) => {
+        const opt = {
+            method: "OPTIONS",
+            url: url,
+        };
+        opt.onload = resp => resolve(resp.responseHeaders);
+        opt.ontimeout = () => reject("fetch timeout");
+        opt.onerror = () => reject("fetch error");
+        opt.onabort = () => reject("fetch abort");
+        GM_xmlhttpRequest(opt);
+    });
+}
+
 function parseHeaders(headers) {
     if (!headers)
         return {};
@@ -38,6 +52,19 @@ function parseHeaders(headers) {
     return result;
 }
 
+// returns true if CORS permits request
+async function checkCors(url, method) {
+    const headers = parseHeaders(await fetchOptions(url));
+
+    const origin = headers["access-control-allow-origin"];
+    if (origin !== "*" && origin !== window.location.origin) return false;
+
+    const methods = headers["access-control-allow-methods"]?.toLowerCase().split(/,\s/g);
+    if (methods && !methods.includes(method.toLowerCase())) return false;
+
+    return true;
+}
+
 function blobTo(to, blob) {
     if (to === "arrayBuffer" && blob.arrayBuffer) return blob.arrayBuffer();
     return new Promise((resolve, reject) => {
@@ -51,25 +78,31 @@ function blobTo(to, blob) {
 
 function GM_fetch(url, opt) {
     return new Promise((resolve, reject) => {
-        // https://www.tampermonkey.net/documentation.php?ext=dhdg#GM_xmlhttpRequest
-        const options = opt || {};
-        options.url = url;
-        options.data = options.body;
-        options.responseType = "blob";
-        options.onload = resp => {
-            var blob = resp.response;
-            resp.blob = () => Promise.resolve(blob);
-            resp.arrayBuffer = () => blobTo("arrayBuffer", blob);
-            resp.text = () => blobTo("text", blob);
-            resp.json = async () => JSON.parse(await blobTo("text", blob));
-            resp.headers = parseHeaders(resp.responseHeaders);
-            resp.ok = resp.status >= 200 && resp.status < 300;
-            resolve(resp);
-        };
-        options.ontimeout = () => reject("fetch timeout");
-        options.onerror = () => reject("fetch error");
-        options.onabort = () => reject("fetch abort");
-        GM_xmlhttpRequest(options);
+        checkCors(url, opt?.method || "GET")
+            .then(can => {
+                if (can) {
+                    // https://www.tampermonkey.net/documentation.php?ext=dhdg#GM_xmlhttpRequest
+                    const options = opt || {};
+                    options.url = url;
+                    options.data = options.body;
+                    options.responseType = "blob";
+                    options.onload = resp => {
+                        var blob = resp.response;
+                        resp.blob = () => Promise.resolve(blob);
+                        resp.arrayBuffer = () => blobTo("arrayBuffer", blob);
+                        resp.text = () => blobTo("text", blob);
+                        resp.json = async () => JSON.parse(await blobTo("text", blob));
+                        resp.headers = new Headers(parseHeaders(resp.responseHeaders));
+                        resolve(resp);
+                    };
+                    options.ontimeout = () => reject("fetch timeout");
+                    options.onerror = () => reject("fetch error");
+                    options.onabort = () => reject("fetch abort");
+                    GM_xmlhttpRequest(options);
+                } else {
+                    reject("CORS issue");
+                }
+            });
     });
 }
 export const fetch = GM_fetch;

browser/VencordNativeStub.ts

@@ -16,98 +16,51 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-/// <reference path="../src/modules.d.ts" />
-/// <reference path="../src/globals.d.ts" />
-
-import monacoHtmlLocal from "file://monacoWin.html?minify";
-import monacoHtmlCdn from "file://../src/main/monacoWin.html?minify";
 import * as DataStore from "../src/api/DataStore";
-import { debounce } from "../src/utils";
-import { EXTENSION_BASE_URL } from "../src/utils/web-metadata";
-import { getTheme, Theme } from "../src/utils/discord";
-import { getThemeInfo } from "../src/main/themes";
-import { Settings } from "../src/Vencord";
+import IpcEvents from "../src/utils/IpcEvents";
 
 // Discord deletes this so need to store in variable
 const { localStorage } = window;
 
 // listeners for ipc.on
-const cssListeners = new Set<(css: string) => void>();
-const NOOP = () => { };
-const NOOP_ASYNC = async () => { };
+const listeners = {} as Record<string, Set<Function>>;
 
-const setCssDebounced = debounce((css: string) => VencordNative.quickCss.set(css));
+const handlers = {
+    [IpcEvents.GET_REPO]: () => "https://github.com/Vendicated/Vencord", // shrug
+    [IpcEvents.GET_SETTINGS_DIR]: () => "LocalStorage",
 
-const themeStore = DataStore.createStore("VencordThemes", "VencordThemeData");
+    [IpcEvents.GET_QUICK_CSS]: () => DataStore.get("VencordQuickCss").then(s => s ?? ""),
+    [IpcEvents.SET_QUICK_CSS]: (css: string) => {
+        DataStore.set("VencordQuickCss", css);
+        listeners[IpcEvents.QUICK_CSS_UPDATE]?.forEach(l => l(null, css));
+    },
+
+    [IpcEvents.GET_SETTINGS]: () => localStorage.getItem("VencordSettings") || "{}",
+    [IpcEvents.SET_SETTINGS]: (s: string) => localStorage.setItem("VencordSettings", s),
+
+    [IpcEvents.GET_UPDATES]: () => ({ ok: true, value: [] }),
+
+    [IpcEvents.OPEN_EXTERNAL]: (url: string) => open(url, "_blank"),
+};
+
+function onEvent(event: string, ...args: any[]) {
+    const handler = handlers[event];
+    if (!handler) throw new Error(`Event ${event} not implemented.`);
+    return handler(...args);
+}
 
 // probably should make this less cursed at some point
 window.VencordNative = {
-    themes: {
-        uploadTheme: (fileName: string, fileData: string) => DataStore.set(fileName, fileData, themeStore),
-        deleteTheme: (fileName: string) => DataStore.del(fileName, themeStore),
-        getThemesDir: async () => "",
-        getThemesList: () => DataStore.entries(themeStore).then(entries =>
-            entries.map(([name, css]) => getThemeInfo(css, name.toString()))
-        ),
-        getThemeData: (fileName: string) => DataStore.get(fileName, themeStore),
-        getSystemValues: async () => ({}),
-    },
-
-    native: {
-        getVersions: () => ({}),
-        openExternal: async (url) => void open(url, "_blank")
-    },
-
-    updater: {
-        getRepo: async () => ({ ok: true, value: "https://github.com/Vendicated/Vencord" }),
-        getUpdates: async () => ({ ok: true, value: [] }),
-        update: async () => ({ ok: true, value: false }),
-        rebuild: async () => ({ ok: true, value: true }),
-    },
-
-    quickCss: {
-        get: () => DataStore.get("VencordQuickCss").then(s => s ?? ""),
-        set: async (css: string) => {
-            await DataStore.set("VencordQuickCss", css);
-            cssListeners.forEach(l => l(css));
+    getVersions: () => ({}),
+    ipc: {
+        send: (event: string, ...args: any[]) => void onEvent(event, ...args),
+        sendSync: onEvent,
+        on(event: string, listener: () => {}) {
+            (listeners[event] ??= new Set()).add(listener);
         },
-        addChangeListener(cb) {
-            cssListeners.add(cb);
-        },
-        addThemeChangeListener: NOOP,
-        openFile: NOOP_ASYNC,
-        async openEditor() {
-            const features = `popup,width=${Math.min(window.innerWidth, 1000)},height=${Math.min(window.innerHeight, 1000)}`;
-            const win = open("about:blank", "VencordQuickCss", features);
-            if (!win) {
-                alert("Failed to open QuickCSS popup. Make sure to allow popups!");
-                return;
-            }
-
-            win.baseUrl = EXTENSION_BASE_URL;
-            win.setCss = setCssDebounced;
-            win.getCurrentCss = () => VencordNative.quickCss.get();
-            win.getTheme = () =>
-                getTheme() === Theme.Light
-                    ? "vs-light"
-                    : "vs-dark";
-
-            win.document.write(IS_EXTENSION ? monacoHtmlLocal : monacoHtmlCdn);
+        off(event: string, listener: () => {}) {
+            return listeners[event]?.delete(listener);
         },
+        invoke: (event: string, ...args: any[]) => Promise.resolve(onEvent(event, ...args))
     },
-
-    settings: {
-        get: () => {
-            try {
-                return JSON.parse(localStorage.getItem("VencordSettings") || "{}");
-            } catch (e) {
-                console.error("Failed to parse settings from localStorage: ", e);
-                return {};
-            }
-        },
-        set: async (s: Settings) => localStorage.setItem("VencordSettings", JSON.stringify(s)),
-        getSettingsDir: async () => "LocalStorage"
-    },
-
-    pluginHelpers: {} as any,
 };

browser/background.js

@@ -16,7 +16,7 @@ chrome.webRequest.onHeadersReceived.addListener(
             // In main frame requests, the CSP needs to be removed to enable fetching of custom css
             // as desired by the user
             removeFirst(responseHeaders, h => h.name.toLowerCase() === "content-security-policy");
-        } else if (type === "stylesheet" && url.startsWith("https://raw.githubusercontent.com/")) {
+        } else if (type === "stylesheet" && url.startsWith("https://raw.githubusercontent.com")) {
             // Most users will load css from GitHub, but GitHub doesn't set the correct content type,
             // so we fix it here
             removeFirst(responseHeaders, h => h.name.toLowerCase() === "content-type");

browser/content.js

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

browser/manifest.json

@@ -1,6 +1,6 @@
 {
     "manifest_version": 3,
-    "minimum_chrome_version": "111",
+    "minimum_chrome_version": "91",
 
     "name": "Vencord Web",
     "description": "The cutest Discord mod now in your browser",
@@ -22,21 +22,13 @@
             "run_at": "document_start",
             "matches": ["*://*.discord.com/*"],
             "js": ["content.js"],
-            "all_frames": true,
-            "world": "ISOLATED"
-        },
-        {
-            "run_at": "document_start",
-            "matches": ["*://*.discord.com/*"],
-            "js": ["dist/Vencord.js"],
-            "all_frames": true,
-            "world": "MAIN"
+            "all_frames": true
         }
     ],
 
     "web_accessible_resources": [
         {
-            "resources": ["dist/*", "third-party/*"],
+            "resources": ["dist/Vencord.js", "dist/Vencord.css"],
             "matches": ["*://*.discord.com/*"]
         }
     ],
@@ -49,5 +41,12 @@
                 "path": "modifyResponseHeaders.json"
             }
         ]
+    },
+
+    "browser_specific_settings": {
+        "gecko": {
+            "id": "vencord-firefox@vendicated.dev",
+            "strict_min_version": "109.0"
+        }
     }
 }

browser/manifestv2.json

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

browser/monaco.ts

@@ -1,43 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2023 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import "./patch-worker";
-
-import * as monaco from "monaco-editor/esm/vs/editor/editor.main.js";
-
-declare global {
-    const baseUrl: string;
-    const getCurrentCss: () => Promise<string>;
-    const setCss: (css: string) => void;
-    const getTheme: () => string;
-}
-
-const BASE = "/dist/monaco/vs";
-
-self.MonacoEnvironment = {
-    getWorkerUrl(_moduleId: unknown, label: string) {
-        const path = label === "css" ? "/language/css/css.worker.js" : "/editor/editor.worker.js";
-        return new URL(BASE + path, baseUrl).toString();
-    }
-};
-
-getCurrentCss().then(css => {
-    const editor = monaco.editor.create(
-        document.getElementById("container")!,
-        {
-            value: css,
-            language: "css",
-            theme: getTheme(),
-        }
-    );
-    editor.onDidChangeModelContent(() =>
-        setCss(editor.getValue())
-    );
-    window.addEventListener("resize", () => {
-        // make monaco re-layout
-        editor.layout();
-    });
-});

browser/monacoWin.html

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <title>Vencord QuickCSS Editor</title>
-        <style>
-            html,
-            body,
-            #container {
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-                overflow: hidden;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="container"></div>
-
-        <script>
-            const script = document.createElement("script");
-            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("/dist/monaco/index.css", baseUrl);
-
-            document.body.append(style, script);
-        </script>
-    </body>
-</html>

browser/patch-worker.js

@@ -1,135 +0,0 @@
-/*
-Copyright 2013 Rob Wu <gwnRob@gmail.com>
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-// Target: Chrome 20+
-
-// W3-compliant Worker proxy.
-// This module replaces the global Worker object.
-// When invoked, the default Worker object is called.
-// If this call fails with SECURITY_ERR, the script is fetched
-//  using async XHR, and transparently proxies all calls and
-//  setters/getters to the new Worker object.
-// Note: This script does not magically circumvent the Same origin policy.
-
-(function () {
-    'use strict';
-    var Worker_ = window.Worker;
-    var URL = window.URL || window.webkitURL;
-    // Create dummy worker for the following purposes:
-    // 1. Don't override the global Worker object if the fallback isn't
-    //    going to work (future API changes?)
-    // 2. Use it to trigger early validation of postMessage calls
-    // Note: Blob constructor is supported since Chrome 20, but since
-    // some of the used Chrome APIs are only supported as of Chrome 20,
-    //  I don't bother adding a BlobBuilder fallback.
-    var dummyWorker = new Worker_(
-        URL.createObjectURL(new Blob([], { type: 'text/javascript' })));
-    window.Worker = function Worker(scriptURL) {
-        if (arguments.length === 0) {
-            throw new TypeError('Not enough arguments');
-        }
-        try {
-            return new Worker_(scriptURL);
-        } catch (e) {
-            if (e.code === 18/*DOMException.SECURITY_ERR*/) {
-                return new WorkerXHR(scriptURL);
-            } else {
-                throw e;
-            }
-        }
-    };
-    // Bind events and replay queued messages
-    function bindWorker(worker, workerURL) {
-        if (worker._terminated) {
-            return;
-        }
-        worker.Worker = new Worker_(workerURL);
-        worker.Worker.onerror = worker._onerror;
-        worker.Worker.onmessage = worker._onmessage;
-        var o;
-        while ((o = worker._replayQueue.shift())) {
-            worker.Worker[o.method].apply(worker.Worker, o.arguments);
-        }
-        while ((o = worker._messageQueue.shift())) {
-            worker.Worker.postMessage.apply(worker.Worker, o);
-        }
-    }
-    function WorkerXHR(scriptURL) {
-        var worker = this;
-        var x = new XMLHttpRequest();
-        x.responseType = 'blob';
-        x.onload = function () {
-            // http://stackoverflow.com/a/10372280/938089
-            var workerURL = URL.createObjectURL(x.response);
-            bindWorker(worker, workerURL);
-        };
-        x.open('GET', scriptURL);
-        x.send();
-        worker._replayQueue = [];
-        worker._messageQueue = [];
-    }
-    WorkerXHR.prototype = {
-        constructor: Worker_,
-        terminate: function () {
-            if (!this._terminated) {
-                this._terminated = true;
-                if (this.Worker)
-                    this.Worker.terminate();
-            }
-        },
-        postMessage: function (message, transfer) {
-            if (!(this instanceof WorkerXHR))
-                throw new TypeError('Illegal invocation');
-            if (this.Worker) {
-                this.Worker.postMessage.apply(this.Worker, arguments);
-            } else {
-                // Trigger validation:
-                dummyWorker.postMessage(message);
-                // Alright, push the valid message to the queue.
-                this._messageQueue.push(arguments);
-            }
-        }
-    };
-    // Implement the EventTarget interface
-    [
-        'addEventListener',
-        'removeEventListener',
-        'dispatchEvent'
-    ].forEach(function (method) {
-        WorkerXHR.prototype[method] = function () {
-            if (!(this instanceof WorkerXHR)) {
-                throw new TypeError('Illegal invocation');
-            }
-            if (this.Worker) {
-                this.Worker[method].apply(this.Worker, arguments);
-            } else {
-                this._replayQueue.push({ method: method, arguments: arguments });
-            }
-        };
-    });
-    Object.defineProperties(WorkerXHR.prototype, {
-        onmessage: {
-            get: function () { return this._onmessage || null; },
-            set: function (func) {
-                this._onmessage = typeof func === 'function' ? func : null;
-            }
-        },
-        onerror: {
-            get: function () { return this._onerror || null; },
-            set: function (func) {
-                this._onerror = typeof func === 'function' ? func : null;
-            }
-        }
-    });
-})();

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

docs/1_INSTALLING.md

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

docs/2_PLUGINS.md

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

eslint.config.mjs

@@ -1,126 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2023 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-// @ts-check
-
-import stylistic from "@stylistic/eslint-plugin";
-import pathAlias from "eslint-plugin-path-alias";
-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"],
-        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",
-            "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",
-
-            // 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.10.6",
+    "version": "1.1.9",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -11,79 +11,68 @@
         "type": "git",
         "url": "git+https://github.com/Vendicated/Vencord.git"
     },
-    "license": "GPL-3.0-or-later",
+    "license": "GPL-3.0",
     "author": "Vendicated",
+    "directories": {
+        "doc": "docs"
+    },
     "scripts": {
-        "build": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/build.mjs",
-        "buildStandalone": "pnpm build --standalone",
+        "build": "node scripts/build/build.mjs",
         "buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/buildWeb.mjs",
-        "buildWebStandalone": "pnpm buildWeb --standalone",
-        "buildReporter": "pnpm buildWebStandalone --reporter --skip-extension",
-        "buildReporterDesktop": "pnpm build --reporter",
-        "watch": "pnpm build --watch",
-        "dev": "pnpm watch",
-        "watchWeb": "pnpm buildWeb --watch",
         "generatePluginJson": "tsx scripts/generatePluginList.ts",
-        "generateTypes": "tspc --emitDeclarationOnly --declaration --outDir packages/vencord-types",
         "inject": "node scripts/runInstaller.mjs",
-        "uninject": "node scripts/runInstaller.mjs",
-        "lint": "eslint",
+        "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 lint && pnpm lint-styles && pnpm testTsc && pnpm generatePluginJson",
+        "test": "pnpm build && pnpm lint && pnpm lint-styles && pnpm testTsc",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
-        "testTsc": "tsc --noEmit"
+        "testTsc": "tsc --noEmit",
+        "uninject": "node scripts/runInstaller.mjs",
+        "watch": "node scripts/build/build.mjs --watch",
+        "buildTypes": "ttsc --emitDeclarationOnly --declaration --outDir packages/vencord-types"
     },
     "dependencies": {
-        "@intrnl/xxhash64": "^0.1.2",
-        "@sapphi-red/web-noise-suppressor": "0.3.5",
         "@vap/core": "0.0.12",
-        "@vap/shiki": "0.10.5",
-        "fflate": "^0.8.2",
-        "gifenc": "github:mattdesl/gifenc#64842fca317b112a8590f8fef2bf3825da8f6fe3",
-        "monaco-editor": "^0.50.0",
-        "nanoid": "^5.0.7",
+        "@vap/shiki": "0.10.3",
+        "fflate": "^0.7.4",
+        "nanoid": "^4.0.2",
         "virtual-merge": "^1.0.1"
     },
     "devDependencies": {
-        "@stylistic/eslint-plugin": "^2.6.1",
-        "@types/chrome": "^0.0.269",
-        "@types/diff": "^5.2.1",
-        "@types/lodash": "^4.17.7",
-        "@types/node": "^22.0.3",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
-        "@types/yazl": "^2.4.5",
-        "diff": "^5.2.0",
+        "@types/diff": "^5.0.2",
+        "@types/lodash": "^4.14.191",
+        "@types/node": "^18.11.18",
+        "@types/react": "^18.0.27",
+        "@types/react-dom": "^18.0.10",
+        "@types/yazl": "^2.4.2",
+        "@typescript-eslint/eslint-plugin": "^5.49.0",
+        "@typescript-eslint/parser": "^5.49.0",
+        "diff": "^5.1.0",
         "discord-types": "^1.3.26",
         "esbuild": "^0.15.18",
-        "eslint": "^9.8.0",
+        "eslint": "^8.28.0",
         "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-plugin-path-alias": "2.1.0",
-        "eslint-plugin-simple-header": "^1.1.1",
-        "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-unused-imports": "^4.0.1",
-        "highlight.js": "10.7.3",
-        "html-minifier-terser": "^7.2.0",
-        "moment": "^2.30.1",
-        "puppeteer-core": "^22.15.0",
+        "eslint-plugin-header": "^3.1.1",
+        "eslint-plugin-path-alias": "^1.0.0",
+        "eslint-plugin-simple-import-sort": "^8.0.0",
+        "eslint-plugin-unused-imports": "^2.0.0",
+        "highlight.js": "10.6.0",
+        "moment": "^2.29.4",
+        "puppeteer-core": "^19.6.0",
         "standalone-electron-types": "^1.0.0",
-        "stylelint": "^16.8.1",
-        "stylelint-config-standard": "^36.0.1",
-        "ts-patch": "^3.2.1",
-        "ts-pattern": "^5.3.1",
-        "tsx": "^4.16.5",
-        "type-fest": "^4.23.0",
-        "typescript": "^5.5.4",
-        "typescript-eslint": "^8.0.0",
-        "typescript-transform-paths": "^3.4.7",
-        "zip-local": "^0.3.5"
+        "stylelint": "^14.16.1",
+        "stylelint-config-standard": "^29.0.0",
+        "tsx": "^3.12.6",
+        "ttypescript": "^1.5.15",
+        "type-fest": "^3.5.3",
+        "typescript": "^4.9.4",
+        "typescript-transform-paths": "^3.4.6"
     },
-    "packageManager": "pnpm@9.1.0",
+    "packageManager": "pnpm@8.1.1",
     "pnpm": {
         "patchedDependencies": {
-            "eslint@9.8.0": "patches/eslint@9.8.0.patch",
-            "eslint-plugin-path-alias@2.1.0": "patches/eslint-plugin-path-alias@2.1.0.patch"
+            "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
+            "eslint@8.28.0": "patches/eslint@8.28.0.patch"
         },
         "peerDependencyRules": {
             "ignoreMissing": [
@@ -103,10 +92,10 @@
         "build": {
             "overwriteDest": true
         },
-        "sourceDir": "./dist/firefox-unpacked"
+        "sourceDir": "./dist/extension-v2-unpacked"
     },
     "engines": {
         "node": ">=18",
-        "pnpm": ">=9"
+        "pnpm": ">=8"
     }
 }

packages/vencord-types/.gitignore

@@ -1,7 +1,7 @@
 *
 !.*ignore
 !package.json
-!*.md
+!README.md
 !prepare.ts
 !index.d.ts
 !globals.d.ts

packages/vencord-types/.npmignore

@@ -1,4 +1,3 @@
 node_modules
 prepare.ts
 .gitignore
-HOW2PUB.md

packages/vencord-types/HOW2PUB.md

@@ -1,5 +0,0 @@
-# How to publish
-
-1. run `pnpm generateTypes` in the project root
-2. bump package.json version
-3. npm publish

packages/vencord-types/package.json

@@ -12,14 +12,12 @@
     "author": "Vencord",
     "license": "GPL-3.0",
     "devDependencies": {
-        "@types/fs-extra": "^11.0.4",
-        "fs-extra": "^11.2.0",
         "tsx": "^3.12.6"
     },
     "dependencies": {
         "@types/lodash": "^4.14.191",
         "@types/node": "^18.11.18",
-        "@types/react": "^18.2.0",
+        "@types/react": "^18.0.27",
         "@types/react-dom": "^18.0.10",
         "discord-types": "^1.3.26",
         "standalone-electron-types": "^1.0.0",

packages/vencord-types/prepare.ts

@@ -16,22 +16,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { cpSync, moveSync, readdirSync, rmSync } from "fs-extra";
+import { cpSync, readdirSync, rmSync } from "fs";
 import { join } from "path";
 
-readdirSync(join(__dirname, "src"))
-    .forEach(child => moveSync(join(__dirname, "src", child), join(__dirname, child), { overwrite: true }));
+const SRC = join(__dirname, "..", "..", "src");
 
-const VencordSrc = join(__dirname, "..", "..", "src");
-
-for (const file of ["preload.d.ts", "userplugins", "main", "debug", "src", "browser", "scripts"]) {
+for (const file of ["preload.d.ts", "userplugins", "main", "debug"]) {
     rmSync(join(__dirname, file), { recursive: true, force: true });
 }
 
 function copyDtsFiles(from: string, to: string) {
     for (const file of readdirSync(from, { withFileTypes: true })) {
         // bad
-        if (from === VencordSrc && file.name === "globals.d.ts") continue;
+        if (from === SRC && file.name === "globals.d.ts") continue;
 
         const fullFrom = join(from, file.name);
         const fullTo = join(to, file.name);
@@ -44,4 +41,4 @@ function copyDtsFiles(from: string, to: string) {
     }
 }
 
-copyDtsFiles(VencordSrc, __dirname);
+copyDtsFiles(SRC, __dirname);

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};

patches/eslint@8.28.0.patch

@@ -1,11 +1,11 @@
 diff --git a/lib/rules/no-useless-escape.js b/lib/rules/no-useless-escape.js
-index 0e0f6f09f2c35f3276173c08f832cde9f2cf56a0..7dc22851715f3574d935f513c1b5e35552985711 100644
+index 2046a148a17fd1d5f3a4bbc9f45f7700259d11fa..f4898c6b57355a4fd72c43a9f32bf1a36a6ccf4a 100644
 --- a/lib/rules/no-useless-escape.js
 +++ b/lib/rules/no-useless-escape.js
-@@ -65,13 +65,31 @@ module.exports = {
+@@ -97,12 +97,30 @@ module.exports = {
              escapeBackslash: "Replace the `\\` with `\\\\` to include the actual backslash character."
          },
-
+ 
 -        schema: []
 +        schema: [{
 +            type: "object",
@@ -22,28 +22,24 @@ index 0e0f6f09f2c35f3276173c08f832cde9f2cf56a0..7dc22851715f3574d935f513c1b5e355
 +            additionalProperties: false
 +        }]
      },
-
+ 
      create(context) {
 +        const options = context.options[0] || {};
-+        const { extra, extraCharClass } = options;
-         const sourceCode = context.sourceCode;
-         const parser = new RegExpParser();
-
-+        const NON_CHARCLASS_ESCAPES = union(REGEX_NON_CHARCLASS_ESCAPES, new Set(extra));
-+        const CHARCLASS_ESCAPES = union(REGEX_GENERAL_ESCAPES, new Set(extraCharClass));
++        const { extra, extraCharClass } = options || ''
+         const sourceCode = context.getSourceCode();
+ 
++        const NON_CHARCLASS_ESCAPES = union(REGEX_NON_CHARCLASS_ESCAPES, new Set(extra))
++        const CHARCLASS_ESCAPES = union(REGEX_GENERAL_ESCAPES, new Set(extraCharClass))
 +
          /**
           * Reports a node
           * @param {ASTNode} node The node to report
-@@ -200,9 +218,9 @@ module.exports = {
-                     let allowedEscapes;
-
-                     if (characterClassStack.length) {
--                        allowedEscapes = unicodeSets ? REGEX_CLASSSET_CHARACTER_ESCAPES : REGEX_GENERAL_ESCAPES;
-+                        allowedEscapes = unicodeSets ? REGEX_CLASSSET_CHARACTER_ESCAPES : CHARCLASS_ESCAPES;
-                     } else {
--                        allowedEscapes = REGEX_NON_CHARCLASS_ESCAPES;
-+                        allowedEscapes = NON_CHARCLASS_ESCAPES;
-                     }
-                     if (allowedEscapes.has(escapedChar)) {
-                         return;
+@@ -238,7 +256,7 @@ module.exports = {
+                     .filter(charInfo => charInfo.escaped)
+ 
+                     // Filter out characters that are valid to escape, based on their position in the regular expression.
+-                    .filter(charInfo => !(charInfo.inCharClass ? REGEX_GENERAL_ESCAPES : REGEX_NON_CHARCLASS_ESCAPES).has(charInfo.text))
++                    .filter(charInfo => !(charInfo.inCharClass ? CHARCLASS_ESCAPES : NON_CHARCLASS_ESCAPES).has(charInfo.text))
+ 
+                     // Report all the remaining characters.
+                     .forEach(charInfo => report(node, charInfo.index, charInfo.text));

scripts/build/build.mjs

@@ -18,24 +18,15 @@
 */
 
 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 } from "./common.mjs";
+import { commonOpts, globPlugins, isStandalone, watch } from "./common.mjs";
 
 const defines = {
-    IS_STANDALONE,
-    IS_DEV,
-    IS_REPORTER,
-    IS_UPDATER_DISABLED,
-    IS_WEB: false,
-    IS_EXTENSION: false,
-    VERSION: JSON.stringify(VERSION),
-    BUILD_TIMESTAMP
+    IS_STANDALONE: isStandalone,
+    IS_DEV: JSON.stringify(watch)
 };
-
-if (defines.IS_STANDALONE === false)
-    // If this is a local build (not standalone), optimize
+if (defines.IS_STANDALONE === "false")
+    // If this is a local build (not standalone), optimise
     // for the specific platform we're on
     defines["process.platform"] = JSON.stringify(process.platform);
 
@@ -47,63 +38,26 @@ const nodeCommonOpts = {
     format: "cjs",
     platform: "node",
     target: ["esnext"],
-    external: ["electron", "original-fs", "~pluginNatives", ...commonOpts.external],
-    define: defines
+    minify: true,
+    bundle: true,
+    external: ["electron", ...commonOpts.external],
+    define: defines,
 };
 
 const sourceMapFooter = s => watch ? "" : `//# sourceMappingURL=vencord://${s}.js.map`;
 const sourcemap = watch ? "inline" : "external";
 
-/**
- * @type {import("esbuild").Plugin}
- */
-const globNativesPlugin = {
-    name: "glob-natives-plugin",
-    setup: build => {
-        const filter = /^~pluginNatives$/;
-        build.onResolve({ filter }, args => {
-            return {
-                namespace: "import-natives",
-                path: args.path
-            };
-        });
-
-        build.onLoad({ filter, namespace: "import-natives" }, async () => {
-            const pluginDirs = ["plugins", "userplugins"];
-            let code = "";
-            let natives = "\n";
-            let i = 0;
-            for (const dir of pluginDirs) {
-                const dirPath = join("src", dir);
-                if (!await exists(dirPath)) continue;
-                const plugins = await readdir(dirPath, { withFileTypes: true });
-                for (const file of plugins) {
-                    const fileName = file.name;
-                    const nativePath = join(dirPath, fileName, "native.ts");
-                    const indexNativePath = join(dirPath, fileName, "native/index.ts");
-
-                    if (!(await exists(nativePath)) && !(await exists(indexNativePath)))
-                        continue;
-
-                    const pluginName = await resolvePluginName(dirPath, file);
-
-                    const mod = `p${i}`;
-                    code += `import * as ${mod} from "./${dir}/${fileName}/native";\n`;
-                    natives += `${JSON.stringify(pluginName)}:${mod},\n`;
-                    i++;
-                }
-            }
-            code += `export default {${natives}};`;
-            return {
-                contents: code,
-                resolveDir: "./src"
-            };
-        });
-    }
-};
-
 await Promise.all([
-    // Discord Desktop main & renderer & preload
+    // common preload
+    esbuild.build({
+        ...nodeCommonOpts,
+        entryPoints: ["src/preload.ts"],
+        outfile: "dist/preload.js",
+        footer: { js: "//# sourceURL=VencordPreload\n" + sourceMapFooter("preload") },
+        sourcemap,
+    }),
+
+    // Discord Desktop main & renderer
     esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
@@ -113,12 +67,8 @@ await Promise.all([
         define: {
             ...defines,
             IS_DISCORD_DESKTOP: true,
-            IS_VESKTOP: false
-        },
-        plugins: [
-            ...nodeCommonOpts.plugins,
-            globNativesPlugin
-        ]
+            IS_VENCORD_DESKTOP: false
+        }
     }),
     esbuild.build({
         ...commonOpts,
@@ -126,33 +76,22 @@ await Promise.all([
         outfile: "dist/renderer.js",
         format: "iife",
         target: ["esnext"],
-        footer: { js: "//# sourceURL=VencordRenderer\n" + sourceMapFooter("renderer") },
+        footer: { js: "Vencord.Plugins.loadExternalPlugins();\n//# sourceURL=VencordRenderer\n" + sourceMapFooter("renderer") },
         globalName: "Vencord",
         sourcemap,
         plugins: [
             globPlugins("discordDesktop"),
-            ...commonRendererPlugins
+            ...commonOpts.plugins
         ],
         define: {
             ...defines,
+            IS_WEB: false,
             IS_DISCORD_DESKTOP: true,
-            IS_VESKTOP: false
-        }
-    }),
-    esbuild.build({
-        ...nodeCommonOpts,
-        entryPoints: ["src/preload.ts"],
-        outfile: "dist/preload.js",
-        footer: { js: "//# sourceURL=VencordPreload\n" + sourceMapFooter("preload") },
-        sourcemap,
-        define: {
-            ...defines,
-            IS_DISCORD_DESKTOP: true,
-            IS_VESKTOP: false
+            IS_VENCORD_DESKTOP: false
         }
     }),
 
-    // Vencord Desktop main & renderer & preload
+    // Vencord Desktop main & renderer
     esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
@@ -162,12 +101,8 @@ await Promise.all([
         define: {
             ...defines,
             IS_DISCORD_DESKTOP: false,
-            IS_VESKTOP: true
-        },
-        plugins: [
-            ...nodeCommonOpts.plugins,
-            globNativesPlugin
-        ]
+            IS_VENCORD_DESKTOP: true
+        }
     }),
     esbuild.build({
         ...commonOpts,
@@ -175,29 +110,18 @@ await Promise.all([
         outfile: "dist/vencordDesktopRenderer.js",
         format: "iife",
         target: ["esnext"],
-        footer: { js: "//# sourceURL=VencordDesktopRenderer\n" + sourceMapFooter("vencordDesktopRenderer") },
+        footer: { js: "Vencord.Plugins.loadExternalPlugins();\n//# sourceURL=VencordDesktopRenderer\n" + sourceMapFooter("vencordDesktopRenderer") },
         globalName: "Vencord",
         sourcemap,
         plugins: [
             globPlugins("vencordDesktop"),
-            ...commonRendererPlugins
+            ...commonOpts.plugins
         ],
         define: {
             ...defines,
+            IS_WEB: false,
             IS_DISCORD_DESKTOP: false,
-            IS_VESKTOP: true
-        }
-    }),
-    esbuild.build({
-        ...nodeCommonOpts,
-        entryPoints: ["src/preload.ts"],
-        outfile: "dist/vencordDesktopPreload.js",
-        footer: { js: "//# sourceURL=VencordPreload\n" + sourceMapFooter("vencordDesktopPreload") },
-        sourcemap,
-        define: {
-            ...defines,
-            IS_DISCORD_DESKTOP: false,
-            IS_VESKTOP: true
+            IS_VENCORD_DESKTOP: true
         }
     }),
 ]).catch(err => {

scripts/build/buildWeb.mjs

@@ -17,13 +17,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-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 } from "./common.mjs";
+import esbuild from "esbuild";
+import { zip } from "fflate";
+import { readFileSync } from "fs";
+import { appendFile, mkdir, readFile, rm, writeFile } from "fs/promises";
+import { join } from "path";
+
+// wtf is this assert syntax
+import PackageJSON from "../../package.json" assert { type: "json" };
+import { commonOpts, globPlugins, watch } from "./common.mjs";
 
 /**
  * @type {esbuild.BuildOptions}
@@ -33,137 +36,59 @@ const commonOptions = {
     entryPoints: ["browser/Vencord.ts"],
     globalName: "Vencord",
     format: "iife",
-    external: ["~plugins", "~git-hash", "/assets/*"],
+    external: ["plugins", "git-hash", "/assets/*"],
     plugins: [
         globPlugins("web"),
-        ...commonRendererPlugins
+        ...commonOpts.plugins,
     ],
     target: ["esnext"],
     define: {
-        IS_WEB: true,
-        IS_EXTENSION: false,
-        IS_STANDALONE: true,
-        IS_DEV,
-        IS_REPORTER,
-        IS_DISCORD_DESKTOP: false,
-        IS_VESKTOP: false,
-        IS_UPDATER_DISABLED: true,
-        VERSION: JSON.stringify(VERSION),
-        BUILD_TIMESTAMP
+        IS_WEB: "true",
+        IS_STANDALONE: "true",
+        IS_DEV: JSON.stringify(watch),
+        IS_DISCORD_DESKTOP: "false",
+        IS_VENCORD_DESKTOP: "false"
     }
 };
 
-const MonacoWorkerEntryPoints = [
-    "vs/language/css/css.worker.js",
-    "vs/editor/editor.worker.js"
-];
-
-const RnNoiseFiles = [
-    "dist/rnnoise.wasm",
-    "dist/rnnoise_simd.wasm",
-    "dist/rnnoise/workletProcessor.js",
-    "LICENSE"
-];
-
 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" }
+            footer: { js: "//# sourceURL=VencordWeb" },
         }),
         esbuild.build({
             ...commonOptions,
             inject: ["browser/GMPolyfill.js", ...(commonOptions?.inject || [])],
             define: {
-                ...(commonOptions?.define),
-                window: "unsafeWindow",
+                "window": "unsafeWindow",
+                ...(commonOptions?.define)
             },
             outfile: "dist/Vencord.user.js",
             banner: {
-                js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", `${VERSION}.${new Date().getTime()}`)
+                js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", `${PackageJSON.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});"
-            }
+            },
         })
     ]
-).catch(err => {
-    console.error("Build failed");
-    console.error(err.message);
-    if (!commonOpts.watch)
-        process.exit(1);
-});;
+);
 
 /**
- * @type {(dir: string) => Promise<string[]>}
+  * @type {(target: string, files: string[], shouldZip: boolean) => Promise<void>}
  */
-async function globDir(dir) {
-    const files = [];
-
-    for (const child of await readdir(dir, { withFileTypes: true })) {
-        const p = join(dir, child.name);
-        if (child.isDirectory())
-            files.push(...await globDir(p));
-        else
-            files.push(p);
-    }
-
-    return files;
-}
-
-/**
- * @type {(dir: string, basePath?: string) => Promise<Record<string, string>>}
- */
-async function loadDir(dir, basePath = "") {
-    const files = await globDir(dir);
-    return Object.fromEntries(await Promise.all(files.map(async f => [f.slice(basePath.length), await readFile(f)])));
-}
-
-/**
-  * @type {(target: string, files: string[]) => Promise<void>}
- */
-async function buildExtension(target, files) {
+async function buildPluginZip(target, files, shouldZip) {
     const entries = {
-        "dist/Vencord.js": await readFile("dist/extension.js"),
-        "dist/Vencord.css": await readFile("dist/extension.css"),
-        ...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}`)]
-        ))),
+        "dist/Vencord.js": await readFile("dist/browser.js"),
+        "dist/Vencord.css": await readFile("dist/browser.css"),
         ...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;
+                json.version = PackageJSON.version;
                 content = new TextEncoder().encode(JSON.stringify(json));
             }
 
@@ -171,18 +96,34 @@ async function buildExtension(target, files) {
                 f.startsWith("manifest") ? "manifest.json" : f,
                 content
             ];
-        })))
+        }))),
     };
 
-    await rm(target, { recursive: true, force: true });
-    await Promise.all(Object.entries(entries).map(async ([file, content]) => {
-        const dest = join("dist", target, file);
-        const parentDirectory = join(dest, "..");
-        await mkdir(parentDirectory, { recursive: true });
-        await writeFile(dest, content);
-    }));
+    if (shouldZip) {
+        return new Promise((resolve, reject) => {
+            zip(entries, {}, (err, data) => {
+                if (err) {
+                    reject(err);
+                } else {
+                    const out = join("dist", target);
+                    writeFile(out, data).then(() => {
+                        console.info("Extension written to " + out);
+                        resolve();
+                    }).catch(reject);
+                }
+            });
+        });
+    } else {
+        await rm(target, { recursive: true, force: true });
+        await Promise.all(Object.entries(entries).map(async ([file, content]) => {
+            const dest = join("dist", target, file);
+            const parentDirectory = join(dest, "..");
+            await mkdir(parentDirectory, { recursive: true });
+            await writeFile(dest, content);
+        }));
 
-    console.info("Unpacked Extension written to dist/" + target);
+        console.info("Unpacked Extension written to dist/" + target);
+    }
 }
 
 const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content => {
@@ -198,19 +139,10 @@ const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content
     return appendFile("dist/Vencord.user.js", cssRuntime);
 });
 
-if (!process.argv.includes("--skip-extension")) {
-    await Promise.all([
-        appendCssRuntime,
-        buildExtension("chromium-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"]),
-        buildExtension("firefox-unpacked", ["background.js", "content.js", "manifestv2.json", "icon.png"]),
-    ]);
+await Promise.all([
+    appendCssRuntime,
+    buildPluginZip("extension.zip", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], true),
+    buildPluginZip("chromium-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], false),
+    buildPluginZip("firefox-unpacked", ["background.js", "content.js", "manifestv2.json", "icon.png"], false),
+]);
 
-    Zip.sync.zip("dist/chromium-unpacked").compress().save("dist/extension-chrome.zip");
-    console.info("Packed Chromium Extension written to dist/extension-chrome.zip");
-
-    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,75 +16,24 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "../suppressExperimentalWarnings.js";
-import "../checkNodeVersion.js";
-
 import { exec, execSync } from "child_process";
-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";
+import { existsSync, readFileSync } from "fs";
+import { readdir, readFile } from "fs/promises";
 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"));
-
-export const VERSION = PackageJSON.version;
-// https://reproducible-builds.org/docs/source-date-epoch/
-export const BUILD_TIMESTAMP = Number(process.env.SOURCE_DATE_EPOCH) || Date.now();
-
 export const watch = process.argv.includes("--watch");
-export const IS_DEV = watch || process.argv.includes("--dev");
-export const IS_REPORTER = process.argv.includes("--reporter");
-export const IS_STANDALONE = process.argv.includes("--standalone");
-
-export const IS_UPDATER_DISABLED = process.argv.includes("--disable-updater");
-export const gitHash = process.env.VENCORD_HASH || execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
-
+export const isStandalone = JSON.stringify(process.argv.includes("--standalone"));
+export const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
 export const banner = {
     js: `
 // Vencord ${gitHash}
-// Standalone: ${IS_STANDALONE}
-// Platform: ${IS_STANDALONE === false ? process.platform : "Universal"}
-// Updater Disabled: ${IS_UPDATER_DISABLED}
+// Standalone: ${isStandalone}
+// Platform: ${isStandalone === "false" ? process.platform : "Universal"}
 `.trim()
 };
 
-const PluginDefinitionNameMatcher = /definePlugin\(\{\s*(["'])?name\1:\s*(["'`])(.+?)\2/;
-/**
- * @param {string} base
- * @param {import("fs").Dirent} dirent
- */
-export async function resolvePluginName(base, dirent) {
-    const fullPath = join(base, dirent.name);
-    const content = dirent.isFile()
-        ? await readFile(fullPath, "utf-8")
-        : await (async () => {
-            for (const file of ["index.ts", "index.tsx"]) {
-                try {
-                    return await readFile(join(fullPath, file), "utf-8");
-                } catch {
-                    continue;
-                }
-            }
-            throw new Error(`Invalid plugin ${fullPath}: could not resolve entry point`);
-        })();
-
-    return PluginDefinitionNameMatcher.exec(content)?.[3]
-        ?? (() => {
-            throw new Error(`Invalid plugin ${fullPath}: must contain definePlugin call with simple string name property as first property`);
-        })();
-}
-
-export async function exists(path) {
-    return await access(path, FsConstants.F_OK)
-        .then(() => true)
-        .catch(() => false);
-}
+const isWeb = process.argv.slice(0, 2).some(f => f.endsWith("buildWeb.mjs"));
 
 // https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
 /**
@@ -95,7 +44,7 @@ export const makeAllPackagesExternalPlugin = {
     setup(build) {
         const filter = /^[^./]|^\.[^./]|^\.\.[^/]/; // Must not start with "/" or "./" or "../"
         build.onResolve({ filter }, args => ({ path: args.path, external: true }));
-    }
+    },
 };
 
 /**
@@ -113,50 +62,33 @@ export const globPlugins = kind => ({
         });
 
         build.onLoad({ filter, namespace: "import-plugins" }, async () => {
-            const pluginDirs = ["plugins/_api", "plugins/_core", "plugins", "userplugins"];
+            const pluginDirs = ["plugins", "userplugins"];
             let code = "";
-            let pluginsCode = "\n";
-            let metaCode = "\n";
-            let excludedCode = "\n";
+            let plugins = "\n";
             let i = 0;
             for (const dir of pluginDirs) {
-                const userPlugin = dir === "userplugins";
-
-                const fullDir = `./src/${dir}`;
-                if (!await exists(fullDir)) continue;
-                const files = await readdir(fullDir, { withFileTypes: true });
+                if (!existsSync(`./src/${dir}`)) continue;
+                const files = await readdir(`./src/${dir}`);
                 for (const file of files) {
-                    const fileName = file.name;
-                    if (fileName.startsWith("_") || fileName.startsWith(".")) continue;
-                    if (fileName === "index.ts") continue;
-
-                    const target = getPluginTarget(fileName);
-
-                    if (target && !IS_REPORTER) {
-                        const excluded =
-                            (target === "dev" && !IS_DEV) ||
-                            (target === "web" && kind === "discordDesktop") ||
-                            (target === "desktop" && kind === "web") ||
-                            (target === "discordDesktop" && kind !== "discordDesktop") ||
-                            (target === "vencordDesktop" && kind !== "vencordDesktop");
-
-                        if (excluded) {
-                            const name = await resolvePluginName(fullDir, file);
-                            excludedCode += `${JSON.stringify(name)}:${JSON.stringify(target)},\n`;
-                            continue;
-                        }
+                    if (file.startsWith(".")) continue;
+                    if (file === "index.ts") continue;
+                    const fileBits = file.split(".");
+                    if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1))) {
+                        const mod = fileBits.at(-2);
+                        if (mod === "dev" && !watch) continue;
+                        if (mod === "web" && kind === "discordDesktop") continue;
+                        if (mod === "desktop" && kind === "web") continue;
+                        if (mod === "discordDesktop" && kind !== "discordDesktop") continue;
+                        if (mod === "vencordDesktop" && kind !== "vencordDesktop") continue;
                     }
 
-                    const folderName = `src/${dir}/${fileName}`.replace(/^src\/plugins\//, "");
-
                     const mod = `p${i}`;
-                    code += `import ${mod} from "./${dir}/${fileName.replace(/\.tsx?$/, "")}";\n`;
-                    pluginsCode += `[${mod}.name]:${mod},\n`;
-                    metaCode += `[${mod}.name]:${JSON.stringify({ folderName, userPlugin })},\n`; // TODO: add excluded plugins to display in the UI?
+                    code += `import ${mod} from "./${dir}/${file.replace(/\.tsx?$/, "")}";\n`;
+                    plugins += `[${mod}.name]:${mod},\n`;
                     i++;
                 }
             }
-            code += `export default {${pluginsCode}};export const PluginMeta={${metaCode}};export const ExcludedPlugins={${excludedCode}};`;
+            code += `export default {${plugins}};`;
             return {
                 contents: code,
                 resolveDir: "./src"
@@ -192,14 +124,11 @@ export const gitRemotePlugin = {
             namespace: "git-remote", path: args.path
         }));
         build.onLoad({ filter, namespace: "git-remote" }, async () => {
-            let remote = process.env.VENCORD_REMOTE;
-            if (!remote) {
-                const res = await promisify(exec)("git remote get-url origin", { encoding: "utf-8" });
-                remote = res.stdout.trim()
-                    .replace("https://github.com/", "")
-                    .replace("git@github.com:", "")
-                    .replace(/.git$/, "");
-            }
+            const res = await promisify(exec)("git remote get-url origin", { encoding: "utf-8" });
+            const remote = res.stdout.trim()
+                .replace("https://github.com/", "")
+                .replace("git@github.com:", "")
+                .replace(/.git$/, "");
 
             return { contents: `export default "${remote}"` };
         });
@@ -209,60 +138,21 @@ export const gitRemotePlugin = {
 /**
  * @type {import("esbuild").Plugin}
  */
-export const fileUrlPlugin = {
-    name: "file-uri-plugin",
+export const fileIncludePlugin = {
+    name: "file-include-plugin",
     setup: build => {
-        const filter = /^file:\/\/.+$/;
+        const filter = /^~fileContent\/.+$/;
         build.onResolve({ filter }, args => ({
-            namespace: "file-uri",
+            namespace: "include-file",
             path: args.path,
             pluginData: {
-                uri: args.path,
-                path: join(args.resolveDir, args.path.slice("file://".length).split("?")[0])
+                path: join(args.resolveDir, args.path.slice("include-file/".length))
             }
         }));
-        build.onLoad({ filter, namespace: "file-uri" }, async ({ pluginData: { path, uri } }) => {
-            const { searchParams } = new URL(uri);
-            const base64 = searchParams.has("base64");
-            const minify = IS_STANDALONE === true && searchParams.has("minify");
-            const noTrim = searchParams.get("trim") === "false";
-
-            const encoding = base64 ? "base64" : "utf-8";
-
-            let content;
-            if (!minify) {
-                content = await readFile(path, encoding);
-                if (!noTrim) content = content.trimEnd();
-            } else {
-                if (path.endsWith(".html")) {
-                    content = await minifyHtml(await readFile(path, "utf-8"), {
-                        collapseWhitespace: true,
-                        removeComments: true,
-                        minifyCSS: true,
-                        minifyJS: true,
-                        removeEmptyAttributes: true,
-                        removeRedundantAttributes: true,
-                        removeScriptTypeAttributes: true,
-                        removeStyleLinkTypeAttributes: true,
-                        useShortDoctype: true
-                    });
-                } else if (/[mc]?[jt]sx?$/.test(path)) {
-                    const res = await esbuild.build({
-                        entryPoints: [path],
-                        write: false,
-                        minify: true
-                    });
-                    content = res.outputFiles[0].text;
-                } else {
-                    throw new Error(`Don't know how to minify file type: ${path}`);
-                }
-
-                if (base64)
-                    content = Buffer.from(content).toString("base64");
-            }
-
+        build.onLoad({ filter, namespace: "include-file" }, async ({ pluginData: { path } }) => {
+            const [name, format] = path.split(";");
             return {
-                contents: `export default ${JSON.stringify(content)}`
+                contents: `export default ${JSON.stringify(await readFile(name, format ?? "utf-8"))}`
             };
         });
     }
@@ -293,18 +183,6 @@ export const stylePlugin = {
     }
 };
 
-/**
- * @type {(filter: RegExp, message: string) => import("esbuild").Plugin}
- */
-export const banImportPlugin = (filter, message) => ({
-    name: "ban-imports",
-    setup: build => {
-        build.onResolve({ filter }, () => {
-            return { errors: [{ text: message }] };
-        });
-    }
-});
-
 /**
  * @type {import("esbuild").BuildOptions}
  */
@@ -316,7 +194,7 @@ export const commonOpts = {
     sourcemap: watch ? "inline" : "",
     legalComments: "linked",
     banner,
-    plugins: [fileUrlPlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
+    plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
     external: ["~plugins", "~git-hash", "~git-remote", "/assets/*"],
     inject: ["./scripts/build/inject/react.mjs"],
     jsxFactory: "VencordCreateElement",
@@ -324,16 +202,3 @@ export const commonOpts = {
     // Work around https://github.com/evanw/esbuild/issues/2460
     tsconfig: "./scripts/build/tsconfig.esbuild.json"
 };
-
-const escapedBuiltinModules = builtinModules
-    .map(m => m.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
-    .join("|");
-const builtinModuleRegex = new RegExp(`^(node:)?(${escapedBuiltinModules})$`);
-
-export const commonRendererPlugins = [
-    banImportPlugin(builtinModuleRegex, "Cannot import node inbuilt modules in browser code. You need to use a native.ts file"),
-    banImportPlugin(/^react$/, "Cannot import from react. React and hooks should be imported from @webpack/common"),
-    banImportPlugin(/^electron(\/.*)?$/, "Cannot import electron in browser code. You need to use a native.ts file"),
-    banImportPlugin(/^ts-pattern$/, "Cannot import from ts-pattern. match and P should be imported from @webpack/common"),
-    ...commonOpts.plugins
-];

scripts/genPluginList.js

@@ -0,0 +1,62 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+// A script to automatically generate a list of all plugins.
+// Just copy paste the entire file into a running Vencord install and it will prompt you
+// to save the file
+
+// eslint-disable-next-line spaced-comment
+/// <reference types="../src/modules"/>
+
+(() => {
+    /**
+     * @type {typeof import("~plugins").default}
+     */
+    const Plugins = Vencord.Plugins.plugins;
+
+    const header = `
+<!-- This file is auto generated, do not edit -->
+
+# Vencord Plugins
+`;
+
+    let tableOfContents = "\n\n";
+
+    let list = "\n\n";
+
+    for (const p of Object.values(Plugins).sort((a, b) => a.name.localeCompare(b.name))) {
+        tableOfContents += `- [${p.name}](#${p.name.replaceAll(" ", "-")})\n`;
+
+        list += `## ${p.name}
+
+${p.description}
+
+**Authors**: ${p.authors.map(a => a.name).join(", ")}
+`;
+
+        if (p.commands?.length) {
+            list += "\n\n#### Commands\n";
+            for (const cmd of p.commands) {
+                list += `${cmd.name} - ${cmd.description}\n\n`;
+            }
+        }
+        list += "\n\n";
+    }
+
+    copy(header + tableOfContents + list);
+})();

scripts/generatePluginList.ts

@@ -18,11 +18,8 @@
 
 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 { getPluginTarget } from "./utils.mjs";
+import { join } from "path";
+import { BigIntLiteral, createSourceFile, Identifier, isArrayLiteralExpression, isCallExpression, isExportAssignment, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isStringLiteral, isVariableStatement, NamedDeclaration, NodeArray, ObjectLiteralExpression, ScriptTarget, StringLiteral, SyntaxKind } from "typescript";
 
 interface Dev {
     name: string;
@@ -32,15 +29,13 @@ interface Dev {
 interface PluginData {
     name: string;
     description: string;
-    tags: string[];
     authors: Dev[];
     dependencies: string[];
     hasPatches: boolean;
     hasCommands: boolean;
     required: boolean;
     enabledByDefault: boolean;
-    target: "discordDesktop" | "vencordDesktop" | "desktop" | "web" | "dev";
-    filePath: string;
+    target: "discordDesktop" | "vencordDesktop" | "web" | "dev";
 }
 
 const devs = {} as Record<string, Dev>;
@@ -70,9 +65,9 @@ function parseDevs() {
 
         const value = devsDeclaration.initializer.arguments[0];
 
-        if (!isSatisfiesExpression(value) || !isObjectLiteralExpression(value.expression)) throw new Error("Failed to parse devs: not an object literal");
+        if (!isObjectLiteralExpression(value)) return;
 
-        for (const prop of value.expression.properties) {
+        for (const prop of value.properties) {
             const name = (prop.name as Identifier).text;
             const value = isPropertyAssignment(prop) ? prop.initializer : prop;
 
@@ -111,7 +106,6 @@ async function parseFile(fileName: string) {
             hasCommands: false,
             enabledByDefault: false,
             required: false,
-            tags: [] as string[]
         } as PluginData;
 
         for (const prop of pluginObj.properties) {
@@ -134,16 +128,7 @@ async function parseFile(fileName: string) {
                     if (!isArrayLiteralExpression(value)) throw fail("authors is not an array literal");
                     data.authors = value.elements.map(e => {
                         if (!isPropertyAccessExpression(e)) throw fail("authors array contains non-property access expressions");
-                        const d = devs[getName(e)!];
-                        if (!d) throw fail(`couldn't look up author ${getName(e)}`);
-                        return d;
-                    });
-                    break;
-                case "tags":
-                    if (!isArrayLiteralExpression(value)) throw fail("tags is not an array literal");
-                    data.tags = value.elements.map(e => {
-                        if (!isStringLiteral(e)) throw fail("tags array contains non-string literals");
-                        return e.text;
+                        return devs[getName(e)!];
                     });
                     break;
                 case "dependencies":
@@ -155,36 +140,28 @@ async function parseFile(fileName: string) {
                 case "required":
                 case "enabledByDefault":
                     data[key] = value.kind === SyntaxKind.TrueKeyword;
+                    if (!data[key] && value.kind !== SyntaxKind.FalseKeyword) throw fail(`${key} is not a boolean literal`);
                     break;
             }
         }
 
         if (!data.name || !data.description || !data.authors) throw fail("name, description or authors are missing");
 
-        const target = getPluginTarget(fileName);
-        if (target) {
-            if (!["web", "discordDesktop", "vencordDesktop", "desktop", "dev"].includes(target)) throw fail(`invalid target ${target}`);
-            data.target = target as any;
+        const fileBits = fileName.split(".");
+        if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1)!)) {
+            const mod = fileBits.at(-2)!;
+            if (!["web", "discordDesktop", "vencordDesktop", "dev"].includes(mod)) throw fail(`invalid target ${fileBits.at(-2)}`);
+            data.target = mod as any;
         }
 
-        data.filePath = posixNormalize(fileName)
-            .split(sep)
-            .join(posixSep)
-            .replace(/\/index\.([jt]sx?)$/, "")
-            .replace(/^src\/plugins\//, "");
-
-        let readme = "";
-        try {
-            readme = readFileSync(join(fileName, "..", "README.md"), "utf-8");
-        } catch { }
-        return [data, readme] as const;
+        return data;
     }
 
     throw fail("no default export called 'definePlugin' found");
 }
 
-async function getEntryPoint(dir: string, dirent: Dirent) {
-    const base = join(dir, dirent.name);
+async function getEntryPoint(dirent: Dirent) {
+    const base = join("./src/plugins", dirent.name);
     if (!dirent.isDirectory()) return base;
 
     for (const name of ["index.ts", "index.tsx"]) {
@@ -198,32 +175,16 @@ async function getEntryPoint(dir: string, dirent: Dirent) {
     throw new Error(`${dirent.name}: Couldn't find entry point`);
 }
 
-function isPluginFile({ name }: { name: string; }) {
-    if (name === "index.ts") return false;
-    return !name.startsWith("_") && !name.startsWith(".");
-}
-
 (async () => {
     parseDevs();
+    const plugins = readdirSync("./src/plugins", { withFileTypes: true }).filter(d => d.name !== "index.ts");
 
-    const plugins = [] as PluginData[];
-    const readmes = {} as Record<string, string>;
+    const promises = plugins.map(async dirent => parseFile(await getEntryPoint(dirent)));
 
-    await Promise.all(["src/plugins", "src/plugins/_core"].flatMap(dir =>
-        readdirSync(dir, { withFileTypes: true })
-            .filter(isPluginFile)
-            .map(async dirent => {
-                const [data, readme] = await parseFile(await getEntryPoint(dir, dirent));
-                plugins.push(data);
-                if (readme) readmes[data.name] = readme;
-            })
-    ));
+    const data = JSON.stringify(await Promise.all(promises));
 
-    const data = JSON.stringify(plugins);
-
-    if (process.argv.length > 3) {
+    if (process.argv.length > 2) {
         writeFileSync(process.argv[2], data);
-        writeFileSync(process.argv[3], JSON.stringify(readmes));
     } else {
         console.log(data);
     }

scripts/generateReport.ts

@@ -16,8 +16,6 @@
  * 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
@@ -42,12 +40,10 @@ const browser = await pup.launch({
 
 const page = await browser.newPage();
 await page.setUserAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36");
-await page.setBypassCSP(true);
 
-async function maybeGetError(handle: JSHandle): Promise<string | undefined> {
-    return await (handle as JSHandle<Error>)?.getProperty("message")
-        .then(m => m?.jsonValue())
-        .catch(() => undefined);
+function maybeGetError(handle: JSHandle) {
+    return (handle as JSHandle<Error>)?.getProperty("message")
+        .then(m => m.jsonValue());
 }
 
 const report = {
@@ -62,72 +58,41 @@ const report = {
         plugin: string;
         error: string;
     }[],
-    otherErrors: [] as string[],
-    ignoredErrors: [] as string[],
-    badWebpackFinds: [] as string[]
+    otherErrors: [] as string[]
 };
 
-const IGNORED_DISCORD_ERRORS = [
-    "KeybindStore: Looking for callback action",
-    "Unable to process domain list delta: Client revision number is null",
-    "Downloading the full bad domains file",
-    /\[GatewaySocket\].{0,110}Cannot access '/,
-    "search for 'name' in undefined",
-    "Attempting to set fast connect zstd when unsupported"
-] as Array<string | RegExp>;
-
-function toCodeBlock(s: string, indentation = 0, isDiscord = false) {
+function toCodeBlock(s: string) {
     s = s.replace(/```/g, "`\u200B`\u200B`");
-
-    const indentationStr = Array(!isDiscord ? indentation : 0).fill(" ").join("");
-    return `\`\`\`\n${s.split("\n").map(s => indentationStr + s).join("\n")}\n${indentationStr}\`\`\``;
+    return "```" + s + " ```";
 }
 
 async function printReport() {
-    console.log();
-
     console.log("# Vencord Report" + (CANARY ? " (Canary)" : ""));
-
     console.log();
 
     console.log("## Bad Patches");
     report.badPatches.forEach(p => {
         console.log(`- ${p.plugin} (${p.type})`);
         console.log(`  - ID: \`${p.id}\``);
-        console.log(`  - Match: ${toCodeBlock(p.match, "  - Match: ".length)}`);
-        if (p.error) console.log(`  - Error: ${toCodeBlock(p.error, "  - Error: ".length)}`);
+        console.log(`  - Match: ${toCodeBlock(p.match)}`);
+        if (p.error) console.log(`  - Error: ${toCodeBlock(p.error)}`);
     });
 
     console.log();
 
-    console.log("## Bad Webpack Finds");
-    report.badWebpackFinds.forEach(p => console.log("- " + toCodeBlock(p, "- ".length)));
-
-    console.log();
-
     console.log("## Bad Starts");
     report.badStarts.forEach(p => {
         console.log(`- ${p.plugin}`);
-        console.log(`  - Error: ${toCodeBlock(p.error, "  - Error: ".length)}`);
+        console.log(`  - Error: ${toCodeBlock(p.error)}`);
     });
 
-    console.log();
-
     console.log("## Discord Errors");
     report.otherErrors.forEach(e => {
-        console.log(`- ${toCodeBlock(e, "- ".length)}`);
+        console.log(`- ${toCodeBlock(e)}`);
     });
 
-    console.log();
-
-    console.log("## Ignored Discord Errors");
-    report.ignoredErrors.forEach(e => {
-        console.log(`- ${toCodeBlock(e, "- ".length)}`);
-    });
-
-    console.log();
-
     if (process.env.DISCORD_WEBHOOK) {
+        // this code was written almost entirely by Copilot xD
         await fetch(process.env.DISCORD_WEBHOOK, {
             method: "POST",
             headers: {
@@ -136,6 +101,7 @@ async function printReport() {
             body: JSON.stringify({
                 description: "Here's the latest Vencord Report!",
                 username: "Vencord Reporter" + (CANARY ? " (Canary)" : ""),
+                avatar_url: "https://cdn.discordapp.com/icons/1015060230222131221/f0204a918c6c9c9a43195997e97d8adf.webp",
                 embeds: [
                     {
                         title: "Bad Patches",
@@ -143,24 +109,19 @@ async function printReport() {
                             const lines = [
                                 `**__${p.plugin} (${p.type}):__**`,
                                 `ID: \`${p.id}\``,
-                                `Match: ${toCodeBlock(p.match, "Match: ".length, true)}`
+                                `Match: ${toCodeBlock(p.match)}`
                             ];
-                            if (p.error) lines.push(`Error: ${toCodeBlock(p.error, "Error: ".length, true)}`);
+                            if (p.error) lines.push(`Error: ${toCodeBlock(p.error)}`);
                             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)
+                                toCodeBlock(p.error)
                             ];
                             return lines.join("\n");
                         }
@@ -169,7 +130,7 @@ async function printReport() {
                     },
                     {
                         title: "Discord Errors",
-                        description: report.otherErrors.length ? toCodeBlock(report.otherErrors.join("\n"), 0, true) : "None",
+                        description: toCodeBlock(report.otherErrors.join("\n")),
                         color: report.otherErrors.length ? 0xff0000 : 0x00ff00
                     }
                 ]
@@ -183,137 +144,151 @@ async function printReport() {
 
 page.on("console", async e => {
     const level = e.type();
-    const rawArgs = e.args();
+    const args = e.args();
 
-    async function getText() {
-        try {
-            return await Promise.all(
-                e.args().map(async a => {
-                    return await maybeGetError(a) || await a.jsonValue();
-                })
-            ).then(a => a.join(" ").trim());
-        } catch {
-            return e.text();
-        }
+    const firstArg = (await args[0]?.jsonValue());
+    if (firstArg === "PUPPETEER_TEST_DONE_SIGNAL") {
+        await browser.close();
+        await printReport();
+        process.exit();
     }
 
-    const firstArg = await rawArgs[0]?.jsonValue();
+    const isVencord = (await args[0]?.jsonValue()) === "[Vencord]";
+    const isDebug = (await args[0]?.jsonValue()) === "[PUP_DEBUG]";
 
-    const isVencord = firstArg === "[Vencord]";
-    const isDebug = firstArg === "[PUP_DEBUG]";
-
-    outer:
     if (isVencord) {
-        try {
-            var args = await Promise.all(e.args().map(a => a.jsonValue()));
-        } catch {
-            break outer;
-        }
+        // make ci fail
+        process.exitCode = 1;
 
-        const [, tag, message, otherMessage] = args as Array<string>;
+        const jsonArgs = await Promise.all(args.map(a => a.jsonValue()));
+        const [, tag, message] = jsonArgs;
+        const cause = await maybeGetError(args[3]);
 
         switch (tag) {
             case "WebpackInterceptor:":
-                const patchFailMatch = message.match(/Patch by (.+?) (had no effect|errored|found no module) \(Module id is (.+?)\): (.+)/)!;
-                if (!patchFailMatch) break;
-
-                console.error(await getText());
-                process.exitCode = 1;
-
-                const [, plugin, type, id, regex] = patchFailMatch;
+                const [, plugin, type, id, regex] = (message as string).match(/Patch by (.+?) (had no effect|errored|found no module) \(Module id is (.+?)\): (.+)/)!;
                 report.badPatches.push({
                     plugin,
                     type,
                     id,
-                    match: regex.replace(/\[A-Za-z_\$\]\[\\w\$\]\*/g, "\\i"),
-                    error: await maybeGetError(e.args()[3])
+                    match: regex,
+                    error: cause
                 });
-
                 break;
             case "PluginManager:":
-                const failedToStartMatch = message.match(/Failed to start (.+)/);
-                if (!failedToStartMatch) break;
-
-                console.error(await getText());
-                process.exitCode = 1;
-
-                const [, name] = failedToStartMatch;
+                const [, name] = (message as string).match(/Failed to start (.+)/)!;
                 report.badStarts.push({
                     plugin: name,
-                    error: await maybeGetError(e.args()[3]) ?? "Unknown error"
+                    error: cause
                 });
-
                 break;
-            case "LazyChunkLoader:":
-                console.error(await getText());
-
-                switch (message) {
-                    case "A fatal error occurred:":
-                        process.exit(1);
-                }
-
-                break;
-            case "Reporter:":
-                console.error(await getText());
-
-                switch (message) {
-                    case "A fatal error occurred:":
-                        process.exit(1);
-                    case "Webpack Find Fail:":
-                        process.exitCode = 1;
-                        report.badWebpackFinds.push(otherMessage);
-                        break;
-                    case "Finished test":
-                        await browser.close();
-                        await printReport();
-                        process.exit();
-                }
         }
-    }
-
-    if (isDebug) {
-        console.error(await getText());
+    } else if (isDebug) {
+        console.error(e.text());
     } else if (level === "error") {
-        const text = await getText();
+        const text = await Promise.all(
+            e.args().map(async a => {
+                try {
+                    return await maybeGetError(a) || await a.jsonValue();
+                } catch (e) {
+                    return a.toString();
+                }
+            })
+        ).then(a => a.join(" "));
 
-        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 {
-                console.error("[Unexpected Error]", text);
-                report.otherErrors.push(text);
+        if (!text.startsWith("Failed to load resource: the server responded with a status of")) {
+            console.error("Got unexpected error", text);
+            report.otherErrors.push(text);
+        }
+    }
+});
+
+page.on("error", e => console.error("[Error]", e));
+page.on("pageerror", e => console.error("[Page Error]", e));
+
+await page.setBypassCSP(true);
+
+function runTime(token: string) {
+    console.error("[PUP_DEBUG]", "Starting test...");
+
+    try {
+        // spoof languages to not be suspicious
+        Object.defineProperty(navigator, "languages", {
+            get: function () {
+                return ["en-US", "en"];
+            },
+        });
+
+
+        // Monkey patch Logger to not log with custom css
+        // @ts-ignore
+        Vencord.Util.Logger.prototype._log = function (level, levelColor, args) {
+            if (level === "warn" || level === "error")
+                console[level]("[Vencord]", this.name + ":", ...args);
+        };
+
+        // force enable all plugins and patches
+        Vencord.Plugins.patches.length = 0;
+        Object.values(Vencord.Plugins.plugins).forEach(p => {
+            // Needs native server to run
+            if (p.name === "WebRichPresence (arRPC)") return;
+
+            p.required = true;
+            p.patches?.forEach(patch => {
+                patch.plugin = p.name;
+                delete patch.predicate;
+                if (!Array.isArray(patch.replacement))
+                    patch.replacement = [patch.replacement];
+                Vencord.Plugins.patches.push(patch);
+            });
+        });
+
+        Vencord.Webpack.waitFor(
+            "loginToken",
+            m => {
+                console.error("[PUP_DEBUG]", "Logging in with token...");
+                m.loginToken(token);
             }
-        }
+        );
+
+        // force load all chunks
+        Vencord.Webpack.onceReady.then(() => setTimeout(async () => {
+            console.error("[PUP_DEBUG]", "Webpack is ready!");
+
+            const { wreq } = Vencord.Webpack;
+
+            console.error("[PUP_DEBUG]", "Loading all chunks...");
+            const ids = Function("return" + wreq.u.toString().match(/\{.+\}/s)![0])();
+            for (const id in ids) {
+                const isWasm = await fetch(wreq.p + wreq.u(id))
+                    .then(r => r.text())
+                    .then(t => t.includes(".module.wasm"));
+
+                if (!isWasm)
+                    await wreq.e(id as any);
+
+                await new Promise(r => setTimeout(r, 500));
+            }
+            console.error("[PUP_DEBUG]", "Finished loading chunks!");
+
+            for (const patch of Vencord.Plugins.patches) {
+                if (!patch.all) {
+                    new Vencord.Util.Logger("WebpackInterceptor").warn(`Patch by ${patch.plugin} found no module (Module id is -): ${patch.find}`);
+                }
+            }
+            setTimeout(() => console.log("PUPPETEER_TEST_DONE_SIGNAL"), 1000);
+        }, 1000));
+    } catch (e) {
+        console.error("[PUP_DEBUG]", "A fatal error occured");
+        console.error("[PUP_DEBUG]", e);
+        process.exit(1);
     }
-});
-
-page.on("error", e => console.error("[Error]", e.message));
-page.on("pageerror", e => {
-    if (e.message.includes("Sentry successfully disabled")) return;
-
-    if (!e.message.startsWith("Object") && !e.message.includes("Cannot find module")) {
-        console.error("[Page Error]", e.message);
-        report.otherErrors.push(e.message);
-    } 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)});
-    }
+    ${readFileSync("./dist/browser.js", "utf-8")}
+
+    ;(${runTime.toString()})(${JSON.stringify(process.env.DISCORD_TOKEN)});
 `);
 
 await page.goto(CANARY ? "https://canary.discord.com/login" : "https://discord.com/login");

scripts/header-new.txt

@@ -1,3 +0,0 @@
-Vencord, a Discord client mod
-Copyright (c) {year} {author}
-SPDX-License-Identifier: GPL-3.0-or-later

scripts/runInstaller.mjs

@@ -35,11 +35,11 @@ const ETAG_FILE = join(FILE_DIR, "etag.txt");
 function getFilename() {
     switch (process.platform) {
         case "win32":
-            return "VencordInstallerCli.exe";
+            return "VencordInstaller.exe";
         case "darwin":
             return "VencordInstaller.MacOS.zip";
         case "linux":
-            return "VencordInstallerCli-linux";
+            return "VencordInstaller-" + (process.env.WAYLAND_DISPLAY ? "wayland" : "x11");
         default:
             throw new Error("Unsupported platform: " + process.platform);
     }
@@ -118,15 +118,11 @@ const installerBin = await ensureBinary();
 
 console.log("Now running Installer...");
 
-try {
-    execFileSync(installerBin, {
-        stdio: "inherit",
-        env: {
-            ...process.env,
-            VENCORD_USER_DATA_DIR: BASE_DIR,
-            VENCORD_DEV_INSTALL: "1"
-        }
-    });
-} catch {
-    console.error("Something went wrong. Please check the logs above.");
-}
+execFileSync(installerBin, {
+    stdio: "inherit",
+    env: {
+        ...process.env,
+        VENCORD_USER_DATA_DIR: BASE_DIR,
+        VENCORD_DEV_INSTALL: "1"
+    }
+});

scripts/utils.mjs

@@ -1,30 +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/>.
-*/
-
-/**
- * @param {string} filePath
- * @returns {string | null}
- */
-export function getPluginTarget(filePath) {
-    const pathParts = filePath.split(/[/\\]/);
-    if (/^index\.tsx?$/.test(pathParts.at(-1))) pathParts.pop();
-
-    const identifier = pathParts.at(-1).replace(/\.tsx?$/, "");
-    const identiferBits = identifier.split(".");
-    return identiferBits.length === 1 ? null : identiferBits.at(-1);
-}

src/Vencord.ts

@@ -17,7 +17,6 @@
 */
 
 export * as Api from "./api";
-export * as Components from "./components";
 export * as Plugins from "./plugins";
 export * as Util from "./utils";
 export * as QuickCss from "./utils/quickCss";
@@ -28,41 +27,19 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
-import { openUpdaterModal } from "@components/VencordSettings/UpdaterTab";
-import { StartAt } from "@utils/types";
-
-import { get as dsGet } from "./api/DataStore";
 import { showNotification } from "./api/Notifications";
-import { PlainSettings, Settings } from "./api/Settings";
+import { PlainSettings, Settings } from "./api/settings";
 import { patches, PMLogger, startAllPlugins } from "./plugins";
 import { localStorage } from "./utils/localStorage";
 import { relaunch } from "./utils/native";
 import { getCloudSettings, putCloudSettings } from "./utils/settingsSync";
-import { checkForUpdates, update, UpdateLogger } from "./utils/updater";
+import { checkForUpdates, rebuild, update, UpdateLogger } from "./utils/updater";
 import { onceReady } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
 
-if (IS_REPORTER) {
-    require("./debug/runReporter");
-}
+export let Components: any;
 
 async function syncSettings() {
-    // pre-check for local shared settings
-    if (
-        Settings.cloud.authenticated &&
-        !await dsGet("Vencord_cloudSecret") // this has been enabled due to local settings share or some other bug
-    ) {
-        // show a notification letting them know and tell them how to fix it
-        showNotification({
-            title: "Cloud Integrations",
-            body: "We've noticed you have cloud integrations enabled in another client! Due to limitations, you will " +
-                "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")
-        });
-        return;
-    }
-
     if (
         Settings.cloud.settingsSync && // if it's enabled
         Settings.cloud.authenticated // if cloud integrations are enabled
@@ -87,17 +64,19 @@ async function syncSettings() {
 
 async function init() {
     await onceReady;
-    startAllPlugins(StartAt.WebpackReady);
+    startAllPlugins();
+    Components = await import("./components");
 
     syncSettings();
 
-    if (!IS_WEB && !IS_UPDATER_DISABLED) {
+    if (!IS_WEB) {
         try {
             const isOutdated = await checkForUpdates();
             if (!isOutdated) return;
 
             if (Settings.autoUpdate) {
                 await update();
+                await rebuild();
                 if (Settings.autoUpdateNotification)
                     setTimeout(() => showNotification({
                         title: "Vencord has been updated!",
@@ -109,13 +88,16 @@ async function init() {
                 return;
             }
 
-            setTimeout(() => showNotification({
-                title: "A Vencord update is available!",
-                body: "Click here to view the update",
-                permanent: true,
-                noPersist: true,
-                onClick: openUpdaterModal!
-            }), 10_000);
+            if (Settings.notifyAboutUpdates)
+                setTimeout(() => showNotification({
+                    title: "A Vencord update is available!",
+                    body: "Click here to view the update",
+                    permanent: true,
+                    noPersist: true,
+                    onClick() {
+                        SettingsRouter.open("VencordUpdater");
+                    }
+                }), 10_000);
         } catch (err) {
             UpdateLogger.error("Failed to check for updates", err);
         }
@@ -135,16 +117,13 @@ async function init() {
     }
 }
 
-startAllPlugins(StartAt.Init);
 init();
 
-document.addEventListener("DOMContentLoaded", () => {
-    startAllPlugins(StartAt.DOMContentLoaded);
-
-    if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
+if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLowerCase().startsWith("win")) {
+    document.addEventListener("DOMContentLoaded", () => {
         document.head.append(Object.assign(document.createElement("style"), {
             id: "vencord-native-titlebar-style",
-            textContent: "[class*=titleBar]{display: none!important}"
+            textContent: "[class*=titleBar-]{display: none!important}"
         }));
-    }
-}, { once: true });
+    }, { once: true });
+}

src/VencordNative.ts

@@ -1,77 +1,49 @@
 /*
- * Vencord, a Discord client mod
- * Copyright (c) 2023 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022
+ *
+ * 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 { 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";
+import IPC_EVENTS from "@utils/IpcEvents";
+import { IpcRenderer, ipcRenderer } from "electron";
 
-function invoke<T = any>(event: IpcEvents, ...args: any[]) {
-    return ipcRenderer.invoke(event, ...args) as Promise<T>;
+function assertEventAllowed(event: string) {
+    if (!(event in IPC_EVENTS)) throw new Error(`Event ${event} not allowed.`);
 }
-
-export function sendSync<T = any>(event: IpcEvents, ...args: any[]) {
-    return ipcRenderer.sendSync(event, ...args) as T;
-}
-
-const PluginHelpers = {} as Record<string, Record<string, (...args: any[]) => Promise<any>>>;
-const pluginIpcMap = sendSync<PluginIpcMappings>(IpcEvents.GET_PLUGIN_IPC_METHOD_MAP);
-
-for (const [plugin, methods] of Object.entries(pluginIpcMap)) {
-    const map = PluginHelpers[plugin] = {};
-    for (const [methodName, method] of Object.entries(methods)) {
-        map[methodName] = (...args: any[]) => invoke(method as IpcEvents, ...args);
-    }
-}
-
 export default {
-    themes: {
-        uploadTheme: (fileName: string, fileData: string) => invoke<void>(IpcEvents.UPLOAD_THEME, fileName, fileData),
-        deleteTheme: (fileName: string) => invoke<void>(IpcEvents.DELETE_THEME, fileName),
-        getThemesDir: () => invoke<string>(IpcEvents.GET_THEMES_DIR),
-        getThemesList: () => invoke<Array<UserThemeHeader>>(IpcEvents.GET_THEMES_LIST),
-        getThemeData: (fileName: string) => invoke<string | undefined>(IpcEvents.GET_THEME_DATA, fileName),
-        getSystemValues: () => invoke<Record<string, string>>(IpcEvents.GET_THEME_SYSTEM_VALUES),
-    },
-
-    updater: {
-        getUpdates: () => invoke<IpcRes<Record<"hash" | "author" | "message", string>[]>>(IpcEvents.GET_UPDATES),
-        update: () => invoke<IpcRes<boolean>>(IpcEvents.UPDATE),
-        rebuild: () => invoke<IpcRes<boolean>>(IpcEvents.BUILD),
-        getRepo: () => invoke<IpcRes<string>>(IpcEvents.GET_REPO),
-    },
-
-    settings: {
-        get: () => sendSync<Settings>(IpcEvents.GET_SETTINGS),
-        set: (settings: Settings, pathToNotify?: string) => invoke<void>(IpcEvents.SET_SETTINGS, settings, pathToNotify),
-        getSettingsDir: () => invoke<string>(IpcEvents.GET_SETTINGS_DIR),
-    },
-
-    quickCss: {
-        get: () => invoke<string>(IpcEvents.GET_QUICK_CSS),
-        set: (css: string) => invoke<void>(IpcEvents.SET_QUICK_CSS, css),
-
-        addChangeListener(cb: (newCss: string) => void) {
-            ipcRenderer.on(IpcEvents.QUICK_CSS_UPDATE, (_, css) => cb(css));
+    getVersions: () => process.versions,
+    ipc: {
+        send(event: string, ...args: any[]) {
+            assertEventAllowed(event);
+            ipcRenderer.send(event, ...args);
         },
-
-        addThemeChangeListener(cb: () => void) {
-            ipcRenderer.on(IpcEvents.THEME_UPDATE, () => cb());
+        sendSync<T = any>(event: string, ...args: any[]): T {
+            assertEventAllowed(event);
+            return ipcRenderer.sendSync(event, ...args);
         },
-
-        openFile: () => invoke<void>(IpcEvents.OPEN_QUICKCSS),
-        openEditor: () => invoke<void>(IpcEvents.OPEN_MONACO_EDITOR),
-    },
-
-    native: {
-        getVersions: () => process.versions as Partial<NodeJS.ProcessVersions>,
-        openExternal: (url: string) => invoke<void>(IpcEvents.OPEN_EXTERNAL, url)
-    },
-
-    pluginHelpers: PluginHelpers
+        on(event: string, listener: Parameters<IpcRenderer["on"]>[1]) {
+            assertEventAllowed(event);
+            ipcRenderer.on(event, listener);
+        },
+        off(event: string, listener: Parameters<IpcRenderer["off"]>[1]) {
+            assertEventAllowed(event);
+            ipcRenderer.off(event, listener);
+        },
+        invoke<T = any>(event: string, ...args: any[]): Promise<T> {
+            assertEventAllowed(event);
+            return ipcRenderer.invoke(event, ...args);
+        }
+    }
 };

src/api/Badges.ts

@@ -17,11 +17,12 @@
 */
 
 import ErrorBoundary from "@components/ErrorBoundary";
+import { User } from "discord-types/general";
 import { ComponentType, HTMLProps } from "react";
 
 import Plugins from "~plugins";
 
-export const enum BadgePosition {
+export enum BadgePosition {
     START,
     END
 }
@@ -35,7 +36,7 @@ export interface ProfileBadge {
     image?: string;
     link?: string;
     /** Action to perform when you click the badge */
-    onClick?(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, props: BadgeUserArgs): void;
+    onClick?(): void;
     /** Should the user display this badge? */
     shouldShow?(userInfo: BadgeUserArgs): boolean;
     /** Optional props (e.g. style) for the badge, ignored for component badges */
@@ -44,11 +45,6 @@ export interface ProfileBadge {
     position?: BadgePosition;
     /** The badge name to display, Discord uses this. Required for component badges */
     key?: string;
-
-    /**
-     * Allows dynamically returning multiple badges
-     */
-    getBadges?(userInfo: BadgeUserArgs): ProfileBadge[];
 }
 
 const Badges = new Set<ProfileBadge>();
@@ -78,27 +74,22 @@ export function _getBadges(args: BadgeUserArgs) {
     const badges = [] as ProfileBadge[];
     for (const badge of Badges) {
         if (!badge.shouldShow || badge.shouldShow(args)) {
-            const b = badge.getBadges
-                ? badge.getBadges(args).map(b => {
-                    b.component &&= ErrorBoundary.wrap(b.component, { noop: true });
-                    return b;
-                })
-                : [{ ...badge, ...args }];
-
             badge.position === BadgePosition.START
-                ? badges.unshift(...b)
-                : badges.push(...b);
+                ? badges.unshift({ ...badge, ...args })
+                : badges.push({ ...badge, ...args });
         }
     }
-    const donorBadges = (Plugins.BadgeAPI as unknown as typeof import("../plugins/_api/badges").default).getDonorBadges(args.userId);
-    if (donorBadges) badges.unshift(...donorBadges);
+    const donorBadge = (Plugins.BadgeAPI as any).getDonorBadge(args.user.id);
+    if (donorBadge) badges.unshift(donorBadge);
 
     return badges;
 }
 
 export interface BadgeUserArgs {
-    userId: string;
-    guildId: string;
+    user: User;
+    profile: Profile;
+    premiumSince: Date;
+    premiumGuildSince?: Date;
 }
 
 interface ConnectedAccount {

src/api/ChatButton.css

@@ -1,4 +0,0 @@
-.vc-chatbar-button {
-    display: flex;
-    align-items: center;
-}

src/api/ChatButtons.tsx

@@ -1,128 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import "./ChatButton.css";
-
-import ErrorBoundary from "@components/ErrorBoundary";
-import { Logger } from "@utils/Logger";
-import { waitFor } from "@webpack";
-import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
-import { Channel } from "discord-types/general";
-import { HTMLProps, MouseEventHandler, ReactNode } from "react";
-
-let ChannelTextAreaClasses: Record<"button" | "buttonContainer", string>;
-waitFor(["buttonContainer", "channelTextArea"], m => ChannelTextAreaClasses = m);
-
-export interface ChatBarProps {
-    channel: Channel;
-    disabled: boolean;
-    isEmpty: boolean;
-    type: {
-        analyticsName: string;
-        attachments: boolean;
-        autocomplete: {
-            addReactionShortcut: boolean,
-            forceChatLayer: boolean,
-            reactions: boolean;
-        },
-        commands: {
-            enabled: boolean;
-        },
-        drafts: {
-            type: number,
-            commandType: number,
-            autoSave: boolean;
-        },
-        emojis: {
-            button: boolean;
-        },
-        gifs: {
-            button: boolean,
-            allowSending: boolean;
-        },
-        gifts: {
-            button: boolean;
-        },
-        permissions: {
-            requireSendMessages: boolean;
-        },
-        showThreadPromptOnReply: boolean,
-        stickers: {
-            button: boolean,
-            allowSending: boolean,
-            autoSuggest: boolean;
-        },
-        users: {
-            allowMentioning: boolean;
-        },
-        submit: {
-            button: boolean,
-            ignorePreference: boolean,
-            disableEnterToSubmit: boolean,
-            clearOnSubmit: boolean,
-            useDisabledStylesOnSubmit: boolean;
-        },
-        uploadLongMessages: boolean,
-        upsellLongMessages: {
-            iconOnly: boolean;
-        },
-        showCharacterCount: boolean,
-        sedReplace: boolean;
-    };
-}
-
-export type ChatBarButton = (props: ChatBarProps & { isMainChat: boolean; }) => JSX.Element | null;
-
-const buttonFactories = new Map<string, ChatBarButton>();
-const logger = new Logger("ChatButtons");
-
-export function _injectButtons(buttons: ReactNode[], props: ChatBarProps) {
-    if (props.disabled) return;
-
-    for (const [key, Button] of buttonFactories) {
-        buttons.push(
-            <ErrorBoundary noop key={key} onError={e => logger.error(`Failed to render ${key}`, e.error)}>
-                <Button {...props} isMainChat={props.type.analyticsName === "normal"} />
-            </ErrorBoundary>
-        );
-    }
-}
-
-export const addChatBarButton = (id: string, button: ChatBarButton) => buttonFactories.set(id, button);
-export const removeChatBarButton = (id: string) => buttonFactories.delete(id);
-
-export interface ChatBarButtonProps {
-    children: ReactNode;
-    tooltip: string;
-    onClick: MouseEventHandler<HTMLButtonElement>;
-    onContextMenu?: MouseEventHandler<HTMLButtonElement>;
-    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu">;
-}
-export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
-    return (
-        <Tooltip text={props.tooltip}>
-            {({ onMouseEnter, onMouseLeave }) => (
-                <div className={`expression-picker-chat-input-button ${ChannelTextAreaClasses?.buttonContainer ?? ""} vc-chatbar-button`}>
-                    <Button
-                        aria-label={props.tooltip}
-                        size=""
-                        look={ButtonLooks.BLANK}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        innerClassName={`${ButtonWrapperClasses.button} ${ChannelTextAreaClasses?.button}`}
-                        onClick={props.onClick}
-                        onContextMenu={props.onContextMenu}
-                        {...props.buttonProps}
-                    >
-                        <div className={ButtonWrapperClasses.buttonWrapper}>
-                            {props.children}
-                        </div>
-                    </Button>
-                </div>
-            )}
-        </Tooltip>
-    );
-}, { noop: true });

src/api/Commands/commandHelpers.ts

@@ -16,15 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { mergeDefaults } from "@utils/mergeDefaults";
-import { findByCodeLazy } from "@webpack";
-import { MessageActions, SnowflakeUtils } from "@webpack/common";
+import { mergeDefaults } from "@utils/misc";
+import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { SnowflakeUtils } from "@webpack/common";
 import { Message } from "discord-types/general";
 import type { PartialDeep } from "type-fest";
 
 import { Argument } from "./types";
 
 const createBotMessage = findByCodeLazy('username:"Clyde"');
+const MessageSender = findByPropsLazy("receiveMessage");
 
 export function generateId() {
     return `-${SnowflakeUtils.fromTimestamp(Date.now())}`;
@@ -39,7 +40,7 @@ export function generateId() {
 export function sendBotMessage(channelId: string, message: PartialDeep<Message>): Message {
     const botMessage = createBotMessage({ channelId, content: "", embeds: [] });
 
-    MessageActions.receiveMessage(channelId, mergeDefaults(message, botMessage));
+    MessageSender.receiveMessage(channelId, mergeDefaults(message, botMessage));
 
     return message as Message;
 }

src/api/Commands/index.ts

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

src/api/Commands/types.ts

@@ -24,7 +24,7 @@ export interface CommandContext {
     guild?: Guild;
 }
 
-export const enum ApplicationCommandOptionType {
+export enum ApplicationCommandOptionType {
     SUB_COMMAND = 1,
     SUB_COMMAND_GROUP = 2,
     STRING = 3,
@@ -38,7 +38,7 @@ export const enum ApplicationCommandOptionType {
     ATTACHMENT = 11,
 }
 
-export const enum ApplicationCommandInputType {
+export enum ApplicationCommandInputType {
     BUILT_IN = 0,
     BUILT_IN_TEXT = 1,
     BUILT_IN_INTEGRATION = 2,
@@ -64,7 +64,7 @@ export interface ChoicesOption {
     displayName?: string;
 }
 
-export const enum ApplicationCommandType {
+export enum ApplicationCommandType {
     CHAT_INPUT = 1,
     USER = 2,
     MESSAGE = 3,
@@ -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

@@ -16,21 +16,23 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Logger } from "@utils/Logger";
-import { Menu, React } from "@webpack/common";
+import Logger from "@utils/Logger";
 import type { ReactElement } from "react";
 
+type ContextMenuPatchCallbackReturn = (() => void) | void;
 /**
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
+ * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => void;
+export type NavContextMenuPatchCallback = (children: Array<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 /**
  * @param navId The navId of the context menu being patched
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
+ * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => void;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -67,7 +69,7 @@ export function addGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback)
  * Remove a context menu patch
  * @param navId The navId(s) for the context menu(s) to remove the patch
  * @param patch The patch to be removed
- * @returns Whether the patch was successfully removed from the context menu(s)
+ * @returns Wheter the patch was sucessfully removed from the context menu(s)
  */
 export function removeContextMenuPatch<T extends string | Array<string>>(navId: T, patch: NavContextMenuPatchCallback): T extends string ? boolean : Array<boolean> {
     const navIds = Array.isArray(navId) ? navId : [navId as string];
@@ -80,31 +82,22 @@ export function removeContextMenuPatch<T extends string | Array<string>>(navId:
 /**
  * Remove a global context menu patch
  * @param patch The patch to be removed
- * @returns Whether the patch was successfully removed
+ * @returns Wheter the patch was sucessfully removed
  */
 export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback): boolean {
     return globalPatches.delete(patch);
 }
 
 /**
- * A helper function for finding the children array of a group nested inside a context menu based on the id(s) of its children
- * @param id The id of the child. If an array is specified, all ids will be tried
+ * A helper function for finding the children array of a group nested inside a context menu based on the id of one of its childs
+ * @param id The id of the child
  * @param children The context menu children
- * @param matchSubstring Whether to check if the id is a substring of the child id
  */
-export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null | undefined>, matchSubstring = false): Array<ReactElement | null | undefined> | null {
+export function findGroupChildrenByChildId(id: string, children: Array<React.ReactElement>, _itemsArray?: Array<React.ReactElement>): Array<React.ReactElement> | null {
     for (const child of children) {
         if (child == null) continue;
 
-        if (Array.isArray(child)) {
-            const found = findGroupChildrenByChildId(id, child, matchSubstring);
-            if (found !== null) return found;
-        }
-
-        if (
-            (Array.isArray(id) && id.some(id => matchSubstring ? child.props?.id?.includes(id) : child.props?.id === id))
-            || (matchSubstring ? child.props?.id?.includes(id) : child.props?.id === id)
-        ) return children;
+        if (child.props?.id === id) return _itemsArray ?? null;
 
         let nextChildren = child.props?.children;
         if (nextChildren) {
@@ -113,7 +106,7 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
                 child.props.children = nextChildren;
             }
 
-            const found = findGroupChildrenByChildId(id, nextChildren, matchSubstring);
+            const found = findGroupChildrenByChildId(id, nextChildren, nextChildren);
             if (found !== null) return found;
         }
     }
@@ -124,18 +117,15 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
 interface ContextMenuProps {
     contextMenuApiArguments?: Array<any>;
     navId: string;
-    children: Array<ReactElement | null>;
+    children: Array<ReactElement>;
     "aria-label": string;
     onSelect: (() => void) | undefined;
     onClose: (callback: (...args: Array<any>) => any) => void;
 }
 
-export function _usePatchContextMenu(props: ContextMenuProps) {
-    props = {
-        ...props,
-        children: cloneMenuChildren(props.children),
-    };
+const patchedMenus = new WeakSet();
 
+export function _patchContextMenu(props: ContextMenuProps) {
     props.contextMenuApiArguments ??= [];
     const contextMenuPatches = navPatches.get(props.navId);
 
@@ -144,7 +134,8 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
     if (contextMenuPatches) {
         for (const patch of contextMenuPatches) {
             try {
-                patch(props.children, ...props.contextMenuApiArguments);
+                const callback = patch(props.children, ...props.contextMenuApiArguments);
+                if (!patchedMenus.has(props)) callback?.();
             } catch (err) {
                 ContextMenuLogger.error(`Patch for ${props.navId} errored,`, err);
             }
@@ -153,30 +144,12 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
 
     for (const patch of globalPatches) {
         try {
-            patch(props.navId, props.children, ...props.contextMenuApiArguments);
+            const callback = patch(props.navId, props.children, ...props.contextMenuApiArguments);
+            if (!patchedMenus.has(props)) callback?.();
         } catch (err) {
             ContextMenuLogger.error("Global patch errored,", err);
         }
     }
 
-    return props;
-}
-
-function cloneMenuChildren(obj: ReactElement | Array<ReactElement | null> | null) {
-    if (Array.isArray(obj)) {
-        return obj.map(cloneMenuChildren);
-    }
-
-    if (React.isValidElement(obj)) {
-        obj = React.cloneElement(obj);
-
-        if (
-            obj?.props?.children &&
-            (obj.type !== Menu.MenuControlItem || obj.type === Menu.MenuControlItem && obj.props.control != null)
-        ) {
-            obj.props.children = cloneMenuChildren(obj.props.children);
-        }
-    }
-
-    return obj;
+    patchedMenus.add(props);
 }

src/api/DataStore/index.ts

@@ -1,4 +1,4 @@
-/* eslint-disable simple-header/header */
+/* eslint-disable header/header */
 
 /*!
  * idb-keyval v6.2.0
@@ -49,7 +49,7 @@ let defaultGetStoreFunc: UseStore | undefined;
 
 function defaultGetStore() {
     if (!defaultGetStoreFunc) {
-        defaultGetStoreFunc = createStore(!IS_REPORTER ? "VencordData" : "VencordDataReporter", "VencordStore");
+        defaultGetStoreFunc = createStore("VencordData", "VencordStore");
     }
     return defaultGetStoreFunc;
 }

src/api/MemberListDecorators.ts

@@ -20,6 +20,7 @@ import { Channel, User } from "discord-types/general/index.js";
 
 interface DecoratorProps {
     activities: any[];
+    canUseAvatarDecorations: boolean;
     channel: Channel;
     /**
      * Only for DM members
@@ -51,9 +52,9 @@ export function removeDecorator(identifier: string) {
     decorators.delete(identifier);
 }
 
-export function __getDecorators(props: DecoratorProps): (JSX.Element | null)[] {
+export function __addDecoratorsToList(props: DecoratorProps): (JSX.Element | null)[] {
     const isInGuild = !!(props.guildId);
-    return Array.from(decorators.values(), decoratorObj => {
+    return [...decorators.values()].map(decoratorObj => {
         const { decorator, onlyIn } = decoratorObj;
         // this can most likely be done cleaner
         if (!onlyIn || (onlyIn === "guilds" && isInGuild) || (onlyIn === "dms" && !isInGuild)) {

src/api/MessageEvents.ts

@@ -16,75 +16,43 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Logger } from "@utils/Logger";
+import Logger from "@utils/Logger";
 import { MessageStore } from "@webpack/common";
-import { CustomEmoji } from "@webpack/types";
 import type { Channel, Message } from "discord-types/general";
 import type { Promisable } from "type-fest";
 
 const MessageEventsLogger = new Logger("MessageEvents", "#e5c890");
 
+export interface Emoji {
+    require_colons: boolean,
+    originalName: string,
+    animated: boolean;
+    guildId: string,
+    name: string,
+    url: string,
+    id: string,
+}
+
 export interface MessageObject {
     content: string,
-    validNonShortcutEmojis: CustomEmoji[];
-    invalidEmojis: any[];
-    tts: boolean;
-}
-
-export interface Upload {
-    classification: string;
-    currentSize: number;
-    description: string | null;
-    filename: string;
-    id: string;
-    isImage: boolean;
-    isVideo: boolean;
-    item: {
-        file: File;
-        platform: number;
-    };
-    loaded: number;
-    mimeType: string;
-    preCompressionSize: number;
-    responseUrl: string;
-    sensitive: boolean;
-    showLargeMessageDialog: boolean;
-    spoiler: boolean;
-    status: "NOT_STARTED" | "STARTED" | "UPLOADING" | "ERROR" | "COMPLETED" | "CANCELLED";
-    uniqueId: string;
-    uploadedFilename: string;
-}
-
-export interface MessageReplyOptions {
-    messageReference: Message["messageReference"];
-    allowedMentions?: {
-        parse: Array<string>;
-        repliedUser: boolean;
-    };
+    validNonShortcutEmojis: Emoji[];
 }
 
 export interface MessageExtra {
-    stickers?: string[];
-    uploads?: Upload[];
-    replyOptions: MessageReplyOptions;
-    content: string;
-    channel: Channel;
-    type?: any;
-    openWarningPopout: (props: any) => any;
+    stickerIds?: string[];
 }
 
 export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
-export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void | { cancel: boolean; }>;
+export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void>;
 
 const sendListeners = new Set<SendListener>();
 const editListeners = new Set<EditListener>();
 
-export async function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra, replyOptions: MessageReplyOptions) {
-    extra.replyOptions = replyOptions;
+export async function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra) {
     for (const listener of sendListeners) {
         try {
             const result = await listener(channelId, messageObj, extra);
-            if (result?.cancel) {
+            if (result && result.cancel === true) {
                 return true;
             }
         } catch (e) {
@@ -97,15 +65,11 @@ export async function _handlePreSend(channelId: string, messageObj: MessageObjec
 export async function _handlePreEdit(channelId: string, messageId: string, messageObj: MessageObject) {
     for (const listener of editListeners) {
         try {
-            const result = await listener(channelId, messageId, messageObj);
-            if (result?.cancel) {
-                return true;
-            }
+            await listener(channelId, messageId, messageObj);
         } catch (e) {
             MessageEventsLogger.error("MessageEditHandler: Listener encountered an unknown error\n", e);
         }
     }
-    return false;
 }
 
 /**

src/api/MessagePopover.ts

@@ -16,17 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import ErrorBoundary from "@components/ErrorBoundary";
-import { Logger } from "@utils/Logger";
+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 ButtonItem {
     key?: string,
     label: string,
-    icon: ComponentType<any>,
+    icon: React.ComponentType<any>,
     message: Message,
     channel: Channel,
     onClick?: MouseEventHandler<HTMLButtonElement>,
@@ -49,26 +48,22 @@ export function removeButton(identifier: string) {
 }
 
 export function _buildPopoverElements(
-    Component: React.ComponentType<ButtonItem>,
-    message: Message
+    msg: 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(
-                    <ErrorBoundary noop>
-                        <Component {...item} />
-                    </ErrorBoundary>
-                );
+                items.push(makeButton(item));
             }
         } catch (err) {
             logger.error(`[${identifier}]`, err);
         }
     }
 
-    return <>{items}</>;
+    return items;
 }

src/api/MessageUpdater.ts

@@ -1,29 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { MessageCache, MessageStore } from "@webpack/common";
-import { FluxStore } from "@webpack/types";
-import { Message } from "discord-types/general";
-
-/**
- * Update and re-render a message
- * @param channelId The channel id of the message
- * @param messageId The message id
- * @param fields The fields of the message to change. Leave empty if you just want to re-render
- */
-export function updateMessage(channelId: string, messageId: string, fields?: Partial<Message & Record<string, any>>) {
-    const channelMessageCache = MessageCache.getOrCreate(channelId);
-    if (!channelMessageCache.has(messageId)) return;
-
-    // To cause a message to re-render, we basically need to create a new instance of the message and obtain a new reference
-    // If we have fields to modify we can use the merge method of the class, otherwise we just create a new instance with the old fields
-    const newChannelMessageCache = channelMessageCache.update(messageId, (oldMessage: any) => {
-        return fields ? oldMessage.merge(fields) : new oldMessage.constructor(oldMessage);
-    });
-
-    MessageCache.commit(newChannelMessageCache);
-    (MessageStore as unknown as FluxStore).emitChange();
-}

src/api/Notifications/NotificationComponent.tsx

@@ -18,7 +18,7 @@
 
 import "./styles.css";
 
-import { useSettings } from "@api/Settings";
+import { useSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { classes } from "@utils/misc";
 import { React, useEffect, useMemo, useState, useStateFromStores, WindowStore } from "@webpack/common";
@@ -113,7 +113,7 @@ export default ErrorBoundary.wrap(function NotificationComponent({
             {timeout !== 0 && !permanent && (
                 <div
                     className="vc-notification-progressbar"
-                    style={{ width: `${(1 - timeoutProgress) * 100}%`, backgroundColor: color || "var(--brand-500)" }}
+                    style={{ width: `${(1 - timeoutProgress) * 100}%`, backgroundColor: color || "var(--brand-experiment)" }}
                 />
             )}
         </button>

src/api/Notifications/Notifications.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/Settings";
+import { Settings } from "@api/settings";
 import { Queue } from "@utils/Queue";
 import { ReactDOM } from "@webpack/common";
 import type { ReactNode } from "react";
@@ -100,7 +100,6 @@ export async function showNotification(data: NotificationData) {
         const n = new Notification(title, {
             body,
             icon,
-            // @ts-expect-error ts is drunk
             image
         });
         n.onclick = onClick;

src/api/Notifications/notificationLog.tsx

@@ -17,13 +17,11 @@
 */
 
 import * as DataStore from "@api/DataStore";
-import { Settings } from "@api/Settings";
+import { Settings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
-import { Flex } from "@components/Flex";
-import { openNotificationSettingsModal } from "@components/VencordSettings/NotificationSettings";
+import { useAwaiter } from "@utils/misc";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { useAwaiter } from "@utils/react";
-import { Alerts, Button, Forms, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
+import { Alerts, Button, Forms, moment, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
 import { nanoid } from "nanoid";
 import type { DispatchWithoutAction } from "react";
 
@@ -131,7 +129,7 @@ function NotificationEntry({ data }: { data: PersistentNotificationData; }) {
                 richBody={
                     <div className={cl("body")}>
                         {data.body}
-                        <Timestamp timestamp={new Date(data.timestamp)} className={cl("timestamp")} />
+                        <Timestamp timestamp={moment(data.timestamp)} className={cl("timestamp")} />
                     </div>
                 }
             />
@@ -172,31 +170,24 @@ function LogModal({ modalProps, close }: { modalProps: ModalProps; close(): void
             </ModalContent>
 
             <ModalFooter>
-                <Flex>
-                    <Button onClick={openNotificationSettingsModal}>
-                        Notification Settings
-                    </Button>
-
-                    <Button
-                        disabled={log.length === 0}
-                        color={Button.Colors.RED}
-                        onClick={() => {
-                            Alerts.show({
-                                title: "Are you sure?",
-                                body: `This will permanently remove ${log.length} notification${log.length === 1 ? "" : "s"}. This action cannot be undone.`,
-                                async onConfirm() {
-                                    await DataStore.set(KEY, []);
-                                    signals.forEach(x => x());
-                                },
-                                confirmText: "Do it!",
-                                confirmColor: "vc-notification-log-danger-btn",
-                                cancelText: "Nevermind"
-                            });
-                        }}
-                    >
-                        Clear Notification Log
-                    </Button>
-                </Flex>
+                <Button
+                    disabled={log.length === 0}
+                    onClick={() => {
+                        Alerts.show({
+                            title: "Are you sure?",
+                            body: `This will permanently remove ${log.length} notification${log.length === 1 ? "" : "s"}. This action cannot be undone.`,
+                            async onConfirm() {
+                                await DataStore.set(KEY, []);
+                                signals.forEach(x => x());
+                            },
+                            confirmText: "Do it!",
+                            confirmColor: "vc-notification-log-danger-btn",
+                            cancelText: "Nevermind"
+                        });
+                    }}
+                >
+                    Clear Notification Log
+                </Button>
             </ModalFooter>
         </ModalRoot>
     );

src/api/ServerList.ts

@@ -16,11 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Logger } from "@utils/Logger";
+import Logger from "@utils/Logger";
 
 const logger = new Logger("ServerListAPI");
 
-export const enum ServerListRenderPosition {
+export enum ServerListRenderPosition {
     Above,
     In,
 }

src/api/Settings.ts

@@ -1,262 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { debounce } from "@shared/debounce";
-import { SettingsStore as SettingsStoreClass } from "@shared/SettingsStore";
-import { localStorage } from "@utils/localStorage";
-import { Logger } from "@utils/Logger";
-import { mergeDefaults } from "@utils/mergeDefaults";
-import { putCloudSettings } from "@utils/settingsSync";
-import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
-import { React } from "@webpack/common";
-
-import plugins from "~plugins";
-
-const logger = new Logger("Settings");
-export interface Settings {
-    autoUpdate: boolean;
-    autoUpdateNotification: boolean,
-    useQuickCss: boolean;
-    enableReactDevtools: boolean;
-    themeLinks: string[];
-    enabledThemes: string[];
-    frameless: boolean;
-    transparent: boolean;
-    winCtrlQ: boolean;
-    macosVibrancyStyle:
-    | "content"
-    | "fullscreen-ui"
-    | "header"
-    | "hud"
-    | "menu"
-    | "popover"
-    | "selection"
-    | "sidebar"
-    | "titlebar"
-    | "tooltip"
-    | "under-page"
-    | "window"
-    | undefined;
-    disableMinSize: boolean;
-    winNativeTitleBar: boolean;
-    plugins: {
-        [plugin: string]: {
-            enabled: boolean;
-            [setting: string]: any;
-        };
-    };
-
-    notifications: {
-        timeout: number;
-        position: "top-right" | "bottom-right";
-        useNative: "always" | "never" | "not-focused";
-        logLimit: number;
-    };
-
-    cloud: {
-        authenticated: boolean;
-        url: string;
-        settingsSync: boolean;
-        settingsSyncVersion: number;
-    };
-}
-
-const DefaultSettings: Settings = {
-    autoUpdate: true,
-    autoUpdateNotification: true,
-    useQuickCss: true,
-    themeLinks: [],
-    enabledThemes: [],
-    enableReactDevtools: false,
-    frameless: false,
-    transparent: false,
-    winCtrlQ: false,
-    macosVibrancyStyle: undefined,
-    disableMinSize: false,
-    winNativeTitleBar: false,
-    plugins: {},
-
-    notifications: {
-        timeout: 5000,
-        position: "bottom-right",
-        useNative: "not-focused",
-        logLimit: 50
-    },
-
-    cloud: {
-        authenticated: false,
-        url: "https://api.vencord.dev/",
-        settingsSync: false,
-        settingsSyncVersion: 0
-    }
-};
-
-const settings = !IS_REPORTER ? VencordNative.settings.get() : {} as Settings;
-mergeDefaults(settings, DefaultSettings);
-
-const saveSettingsOnFrequentAction = debounce(async () => {
-    if (Settings.cloud.settingsSync && Settings.cloud.authenticated) {
-        await putCloudSettings();
-        delete localStorage.Vencord_settingsDirty;
-    }
-}, 60_000);
-
-
-export const SettingsStore = new SettingsStoreClass(settings, {
-    readOnly: true,
-    getDefaultValue({
-        target,
-        key,
-        path
-    }) {
-        const v = target[key];
-        if (!plugins) return v; // plugins not initialised yet. this means this path was reached by being called on the top level
-
-        if (path === "plugins" && key in plugins)
-            return target[key] = {
-                enabled: IS_REPORTER || plugins[key].required || plugins[key].enabledByDefault || false
-            };
-
-        // Since the property is not set, check if this is a plugin's setting and if so, try to resolve
-        // the default value.
-        if (path.startsWith("plugins.")) {
-            const plugin = path.slice("plugins.".length);
-            if (plugin in plugins) {
-                const setting = plugins[plugin].options?.[key];
-                if (!setting) return v;
-
-                if ("default" in setting)
-                    // normal setting with a default value
-                    return (target[key] = setting.default);
-
-                if (setting.type === OptionType.SELECT) {
-                    const def = setting.options.find(o => o.default);
-                    if (def)
-                        target[key] = def.value;
-                    return def?.value;
-                }
-            }
-        }
-        return v;
-    }
-});
-
-if (!IS_REPORTER) {
-    SettingsStore.addGlobalChangeListener((_, path) => {
-        SettingsStore.plain.cloud.settingsSyncVersion = Date.now();
-        localStorage.Vencord_settingsDirty = true;
-        saveSettingsOnFrequentAction();
-        VencordNative.settings.set(SettingsStore.plain, path);
-    });
-}
-
-/**
- * Same as {@link Settings} but unproxied. You should treat this as readonly,
- * as modifying properties on this will not save to disk or call settings
- * listeners.
- * WARNING: default values specified in plugin.options will not be ensured here. In other words,
- * settings for which you specified a default value may be uninitialised. If you need proper
- * handling for default values, use {@link Settings}
- */
-export const PlainSettings = settings;
-/**
- * A smart settings object. Altering props automagically saves
- * the updated settings to disk.
- * This recursively proxies objects. If you need the object non proxied, use {@link PlainSettings}
- */
-export const Settings = SettingsStore.store;
-
-/**
- * Settings hook for React components. Returns a smart settings
- * object that automagically triggers a rerender if any properties
- * are altered
- * @param paths An optional list of paths to whitelist for rerenders
- * @returns Settings
- */
-// TODO: Representing paths as essentially "string[].join('.')" wont allow dots in paths, change to "paths?: string[][]" later
-export function useSettings(paths?: UseSettings<Settings>[]) {
-    const [, forceUpdate] = React.useReducer(() => ({}), {});
-
-    React.useEffect(() => {
-        if (paths) {
-            paths.forEach(p => SettingsStore.addChangeListener(p, forceUpdate));
-            return () => paths.forEach(p => SettingsStore.removeChangeListener(p, forceUpdate));
-        } else {
-            SettingsStore.addGlobalChangeListener(forceUpdate);
-            return () => SettingsStore.removeGlobalChangeListener(forceUpdate);
-        }
-    }, []);
-
-    return SettingsStore.store;
-}
-
-export function migratePluginSettings(name: string, ...oldNames: string[]) {
-    const { plugins } = SettingsStore.plain;
-    if (name in plugins) return;
-
-    for (const oldName of oldNames) {
-        if (oldName in plugins) {
-            logger.info(`Migrating settings from old name ${oldName} to ${name}`);
-            plugins[name] = plugins[oldName];
-            delete plugins[oldName];
-            SettingsStore.markAsChanged();
-            break;
-        }
-    }
-}
-
-export function definePluginSettings<
-    Def extends SettingsDefinition,
-    Checks extends SettingsChecks<Def>,
-    PrivateSettings extends object = {}
->(def: Def, checks?: Checks) {
-    const definedSettings: DefinedSettings<Def, Checks, PrivateSettings> = {
-        get store() {
-            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,
-        def,
-        checks: checks ?? {} as any,
-        pluginName: "",
-
-        withPrivateSettings<T extends object>() {
-            return this as DefinedSettings<Def, Checks, T>;
-        }
-    };
-
-    return definedSettings;
-}
-
-type UseSettings<T extends object> = ResolveUseSettings<T>[keyof T];
-
-type ResolveUseSettings<T extends object> = {
-    [Key in keyof T]:
-    Key extends string
-    ? T[Key] extends Record<string, unknown>
-    // @ts-ignore "Type instantiation is excessively deep and possibly infinite"
-    ? UseSettings<T[Key]> extends string ? `${Key}.${UseSettings<T[Key]>}` : never
-    : Key
-    : never;
-};

src/api/SettingsStore.ts

@@ -0,0 +1,69 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import Logger from "@utils/Logger";
+import { proxyLazy } from "@utils/proxyLazy";
+import { findModuleId, wreq } from "@webpack";
+
+import { Settings } from "./settings";
+
+interface Setting<T> {
+    /**
+     * Get the setting value
+     */
+    getSetting(): T;
+    /**
+     * Update the setting value
+     * @param value The new value
+     */
+    updateSetting(value: T | ((old: T) => T)): Promise<void>;
+    /**
+     * React hook for automatically updating components when the setting is updated
+     */
+    useSetting(): T;
+    settingsStoreApiGroup: string;
+    settingsStoreApiName: string;
+}
+
+const SettingsStores: Array<Setting<any>> | undefined = proxyLazy(() => {
+    const modId = findModuleId('"textAndImages","renderSpoilers"');
+    if (modId == null) return new Logger("SettingsStoreAPI").error("Didn't find stores module.");
+
+    const mod = wreq(modId);
+    if (mod == null) return;
+
+    return Object.values(mod).filter((s: any) => s?.settingsStoreApiGroup) as any;
+});
+
+/**
+ * Get the store for a setting
+ * @param group The setting group
+ * @param name The name of the setting
+ */
+export function getSettingStore<T = any>(group: string, name: string): Setting<T> | undefined {
+    if (!Settings.plugins.SettingsStoreAPI.enabled) throw new Error("Cannot use SettingsStoreAPI without setting as dependency.");
+
+    return SettingsStores?.find(s => s?.settingsStoreApiGroup === group && s?.settingsStoreApiName === name);
+}
+
+/**
+ * getSettingStore but lazy
+ */
+export function getSettingStoreLazy<T = any>(group: string, name: string) {
+    return proxyLazy(() => getSettingStore<T>(group, name));
+}

src/api/Styles.ts

@@ -141,7 +141,7 @@ export const compileStyle = (style: Style) => {
  */
 export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
 
-type ClassNameFactoryArg = string | string[] | Record<string, unknown> | false | null | undefined | 0 | "";
+type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
 /**
  * @param prefix The prefix to add to each class, defaults to `""`
  * @returns A classname generator function
@@ -154,9 +154,9 @@ type ClassNameFactoryArg = string | string[] | Record<string, unknown> | false |
 export const classNameFactory = (prefix: string = "") => (...args: ClassNameFactoryArg[]) => {
     const classNames = new Set<string>();
     for (const arg of args) {
-        if (arg && typeof arg === "string") classNames.add(arg);
+        if (typeof arg === "string") classNames.add(arg);
         else if (Array.isArray(arg)) arg.forEach(name => classNames.add(name));
-        else if (arg && typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
+        else if (typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
     }
     return Array.from(classNames, name => prefix + name).join(" ");
 };

src/api/UserSettings.ts

@@ -1,81 +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 { proxyLazy } from "@utils/lazy";
-import { Logger } from "@utils/Logger";
-import { findModuleId, proxyLazyWebpack, wreq } from "@webpack";
-
-interface UserSettingDefinition<T> {
-    /**
-     * Get the setting value
-     */
-    getSetting(): T;
-    /**
-     * Update the setting value
-     * @param value The new value
-     */
-    updateSetting(value: T): Promise<void>;
-    /**
-     * Update the setting value
-     * @param value A callback that accepts the old value as the first argument, and returns the new value
-     */
-    updateSetting(value: (old: T) => T): Promise<void>;
-    /**
-     * Stateful React hook for this setting value
-     */
-    useSetting(): T;
-    userSettingsAPIGroup: string;
-    userSettingsAPIName: string;
-}
-
-export const UserSettings: Record<PropertyKey, UserSettingDefinition<any>> | undefined = proxyLazyWebpack(() => {
-    const modId = findModuleId('"textAndImages","renderSpoilers"');
-    if (modId == null) return new Logger("UserSettingsAPI ").error("Didn't find settings module.");
-
-    return wreq(modId as any);
-});
-
-/**
- * Get the setting with the given setting group and name.
- *
- * @param group The setting group
- * @param name The name of the setting
- */
-export function getUserSetting<T = any>(group: string, name: string): UserSettingDefinition<T> | undefined {
-    if (!Vencord.Plugins.isPluginEnabled("UserSettingsAPI")) throw new Error("Cannot use UserSettingsAPI without setting as dependency.");
-
-    for (const key in UserSettings) {
-        const userSetting = UserSettings[key];
-
-        if (userSetting.userSettingsAPIGroup === group && userSetting.userSettingsAPIName === name) {
-            return userSetting;
-        }
-    }
-}
-
-/**
- * {@link getUserSettingDefinition}, lazy.
- *
- * Get the setting with the given setting group and name.
- *
- * @param group The setting group
- * @param name The name of the setting
- */
-export function getUserSettingLazy<T = any>(group: string, name: string) {
-    return proxyLazy(() => getUserSetting<T>(group, name));
-}

src/api/index.ts

@@ -17,7 +17,6 @@
 */
 
 import * as $Badges from "./Badges";
-import * as $ChatButtons from "./ChatButtons";
 import * as $Commands from "./Commands";
 import * as $ContextMenu from "./ContextMenu";
 import * as $DataStore from "./DataStore";
@@ -26,13 +25,12 @@ import * as $MessageAccessories from "./MessageAccessories";
 import * as $MessageDecorations from "./MessageDecorations";
 import * as $MessageEventsAPI from "./MessageEvents";
 import * as $MessagePopover from "./MessagePopover";
-import * as $MessageUpdater from "./MessageUpdater";
 import * as $Notices from "./Notices";
 import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
-import * as $Settings from "./Settings";
+import * as $Settings from "./settings";
+import * as $SettingsStore from "./SettingsStore";
 import * as $Styles from "./Styles";
-import * as $UserSettings from "./UserSettings";
 
 /**
  * An API allowing you to listen to Message Clicks or run your own logic
@@ -90,9 +88,9 @@ export const MessageDecorations = $MessageDecorations;
  */
 export const MemberListDecorators = $MemberListDecorators;
 /**
- * An API allowing you to persist data
+ * An API allowing you to read, manipulate and automatically update components based on Discord settings
  */
-export const Settings = $Settings;
+export const SettingsStore = $SettingsStore;
 /**
  * An API allowing you to dynamically load styles
  * a
@@ -109,16 +107,7 @@ export const Notifications = $Notifications;
 export const ContextMenu = $ContextMenu;
 
 /**
- * An API allowing you to add buttons to the chat input
+ * Settings lol
  */
-export const ChatButtons = $ChatButtons;
-
-/**
- * An API allowing you to update and re-render messages
- */
-export const MessageUpdater = $MessageUpdater;
-
-/**
- * An API allowing you to get an user setting
- */
-export const UserSettings = $UserSettings;
+export const Settings = $Settings;
+export const settings = $Settings;

src/api/settings.ts

@@ -0,0 +1,287 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { debounce } from "@utils/debounce";
+import IpcEvents from "@utils/IpcEvents";
+import { localStorage } from "@utils/localStorage";
+import Logger from "@utils/Logger";
+import { mergeDefaults } from "@utils/misc";
+import { putCloudSettings } from "@utils/settingsSync";
+import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
+import { React } from "@webpack/common";
+
+import plugins from "~plugins";
+
+const logger = new Logger("Settings");
+export interface Settings {
+    notifyAboutUpdates: boolean;
+    autoUpdate: boolean;
+    autoUpdateNotification: boolean,
+    useQuickCss: boolean;
+    enableReactDevtools: boolean;
+    themeLinks: string[];
+    frameless: boolean;
+    transparent: boolean;
+    winCtrlQ: boolean;
+    macosTranslucency: boolean;
+    disableMinSize: boolean;
+    winNativeTitleBar: boolean;
+    plugins: {
+        [plugin: string]: {
+            enabled: boolean;
+            [setting: string]: any;
+        };
+    };
+
+    notifications: {
+        timeout: number;
+        position: "top-right" | "bottom-right";
+        useNative: "always" | "never" | "not-focused";
+        logLimit: number;
+    };
+
+    cloud: {
+        authenticated: boolean;
+        url: string;
+        settingsSync: boolean;
+        settingsSyncVersion: number;
+    };
+}
+
+const DefaultSettings: Settings = {
+    notifyAboutUpdates: true,
+    autoUpdate: false,
+    autoUpdateNotification: true,
+    useQuickCss: true,
+    themeLinks: [],
+    enableReactDevtools: false,
+    frameless: false,
+    transparent: false,
+    winCtrlQ: false,
+    macosTranslucency: false,
+    disableMinSize: false,
+    winNativeTitleBar: false,
+    plugins: {},
+
+    notifications: {
+        timeout: 5000,
+        position: "bottom-right",
+        useNative: "not-focused",
+        logLimit: 50
+    },
+
+    cloud: {
+        authenticated: false,
+        url: "https://api.vencord.dev/",
+        settingsSync: false,
+        settingsSyncVersion: 0
+    }
+};
+
+try {
+    var settings = JSON.parse(VencordNative.ipc.sendSync(IpcEvents.GET_SETTINGS)) as Settings;
+    mergeDefaults(settings, DefaultSettings);
+} catch (err) {
+    var settings = mergeDefaults({} as Settings, DefaultSettings);
+    logger.error("An error occurred while loading the settings. Corrupt settings file?\n", err);
+}
+
+const saveSettingsOnFrequentAction = debounce(async () => {
+    if (Settings.cloud.settingsSync && Settings.cloud.authenticated) {
+        await putCloudSettings();
+        delete localStorage.Vencord_settingsDirty;
+    }
+}, 60_000);
+
+type SubscriptionCallback = ((newValue: any, path: string) => void) & { _path?: string; };
+const subscriptions = new Set<SubscriptionCallback>();
+
+const proxyCache = {} as Record<string, any>;
+
+// Wraps the passed settings object in a Proxy to nicely handle change listeners and default values
+function makeProxy(settings: any, root = settings, path = ""): Settings {
+    return proxyCache[path] ??= new Proxy(settings, {
+        get(target, p: string) {
+            const v = target[p];
+
+            // using "in" is important in the following cases to properly handle falsy or nullish values
+            if (!(p in target)) {
+                // Return empty for plugins with no settings
+                if (path === "plugins" && p in plugins)
+                    return target[p] = makeProxy({
+                        enabled: plugins[p].required ?? plugins[p].enabledByDefault ?? false
+                    }, root, `plugins.${p}`);
+
+                // Since the property is not set, check if this is a plugin's setting and if so, try to resolve
+                // the default value.
+                if (path.startsWith("plugins.")) {
+                    const plugin = path.slice("plugins.".length);
+                    if (plugin in plugins) {
+                        const setting = plugins[plugin].options?.[p];
+                        if (!setting) return v;
+                        if ("default" in setting)
+                            // normal setting with a default value
+                            return (target[p] = setting.default);
+                        if (setting.type === OptionType.SELECT) {
+                            const def = setting.options.find(o => o.default);
+                            if (def)
+                                target[p] = def.value;
+                            return def?.value;
+                        }
+                    }
+                }
+                return v;
+            }
+
+            // Recursively proxy Objects with the updated property path
+            if (typeof v === "object" && !Array.isArray(v) && v !== null)
+                return makeProxy(v, root, `${path}${path && "."}${p}`);
+
+            // primitive or similar, no need to proxy further
+            return v;
+        },
+
+        set(target, p: string, v) {
+            // avoid unnecessary updates to React Components and other listeners
+            if (target[p] === v) return true;
+
+            target[p] = v;
+            // Call any listeners that are listening to a setting of this path
+            const setPath = `${path}${path && "."}${p}`;
+            delete proxyCache[setPath];
+            for (const subscription of subscriptions) {
+                if (!subscription._path || subscription._path === setPath) {
+                    subscription(v, setPath);
+                }
+            }
+            // And don't forget to persist the settings!
+            PlainSettings.cloud.settingsSyncVersion = Date.now();
+            localStorage.Vencord_settingsDirty = true;
+            saveSettingsOnFrequentAction();
+            VencordNative.ipc.invoke(IpcEvents.SET_SETTINGS, JSON.stringify(root, null, 4));
+            return true;
+        }
+    });
+}
+
+/**
+ * Same as {@link Settings} but unproxied. You should treat this as readonly,
+ * as modifying properties on this will not save to disk or call settings
+ * listeners.
+ * WARNING: default values specified in plugin.options will not be ensured here. In other words,
+ * settings for which you specified a default value may be uninitialised. If you need proper
+ * handling for default values, use {@link Settings}
+ */
+export const PlainSettings = settings;
+/**
+ * A smart settings object. Altering props automagically saves
+ * the updated settings to disk.
+ * This recursively proxies objects. If you need the object non proxied, use {@link PlainSettings}
+ */
+export const Settings = makeProxy(settings);
+
+/**
+ * Settings hook for React components. Returns a smart settings
+ * object that automagically triggers a rerender if any properties
+ * are altered
+ * @param paths An optional list of paths to whitelist for rerenders
+ * @returns Settings
+ */
+// TODO: Representing paths as essentially "string[].join('.')" wont allow dots in paths, change to "paths?: string[][]" later
+export function useSettings(paths?: UseSettings<Settings>[]) {
+    const [, forceUpdate] = React.useReducer(() => ({}), {});
+
+    const onUpdate: SubscriptionCallback = paths
+        ? (value, path) => paths.includes(path as UseSettings<Settings>) && forceUpdate()
+        : forceUpdate;
+
+    React.useEffect(() => {
+        subscriptions.add(onUpdate);
+        return () => void subscriptions.delete(onUpdate);
+    }, []);
+
+    return Settings;
+}
+
+// Resolves a possibly nested prop in the form of "some.nested.prop" to type of T.some.nested.prop
+type ResolvePropDeep<T, P> = P extends "" ? T :
+    P extends `${infer Pre}.${infer Suf}` ?
+    Pre extends keyof T ? ResolvePropDeep<T[Pre], Suf> : never : P extends keyof T ? T[P] : never;
+
+/**
+ * Add a settings listener that will be invoked whenever the desired setting is updated
+ * @param path Path to the setting that you want to watch, for example "plugins.Unindent.enabled" will fire your callback
+ *             whenever Unindent is toggled. Pass an empty string to get notified for all changes
+ * @param onUpdate Callback function whenever a setting matching path is updated. It gets passed the new value and the path
+ *                 to the updated setting. This path will be the same as your path argument, unless it was an empty string.
+ *
+ * @example addSettingsListener("", (newValue, path) => console.log(`${path} is now ${newValue}`))
+ *          addSettingsListener("plugins.Unindent.enabled", v => console.log("Unindent is now", v ? "enabled" : "disabled"))
+ */
+export function addSettingsListener<Path extends keyof Settings>(path: Path, onUpdate: (newValue: Settings[Path], path: Path) => void): void;
+export function addSettingsListener<Path extends string>(path: Path, onUpdate: (newValue: Path extends "" ? any : ResolvePropDeep<Settings, Path>, path: Path extends "" ? string : Path) => void): void;
+export function addSettingsListener(path: string, onUpdate: (newValue: any, path: string) => void) {
+    (onUpdate as SubscriptionCallback)._path = path;
+    subscriptions.add(onUpdate);
+}
+
+export function migratePluginSettings(name: string, ...oldNames: string[]) {
+    const { plugins } = settings;
+    if (name in plugins) return;
+
+    for (const oldName of oldNames) {
+        if (oldName in plugins) {
+            logger.info(`Migrating settings from old name ${oldName} to ${name}`);
+            plugins[name] = plugins[oldName];
+            delete plugins[oldName];
+            VencordNative.ipc.invoke(
+                IpcEvents.SET_SETTINGS,
+                JSON.stringify(settings, null, 4)
+            );
+            break;
+        }
+    }
+}
+
+export function definePluginSettings<D extends SettingsDefinition, C extends SettingsChecks<D>>(def: D, checks?: C) {
+    const definedSettings: DefinedSettings<D> = {
+        get store() {
+            if (!definedSettings.pluginName) throw new Error("Cannot access settings before plugin is initialized");
+            return Settings.plugins[definedSettings.pluginName] as any;
+        },
+        use: settings => useSettings(
+            settings?.map(name => `plugins.${definedSettings.pluginName}.${name}`) as UseSettings<Settings>[]
+        ).plugins[definedSettings.pluginName] as any,
+        def,
+        checks: checks ?? {},
+        pluginName: "",
+    };
+    return definedSettings;
+}
+
+type UseSettings<T extends object> = ResolveUseSettings<T>[keyof T];
+
+type ResolveUseSettings<T extends object> = {
+    [Key in keyof T]:
+    Key extends string
+    ? T[Key] extends Record<string, unknown>
+    // @ts-ignore "Type instantiation is excessively deep and possibly infinite"
+    ? UseSettings<T[Key]> extends string ? `${Key}.${UseSettings<T[Key]>}` : never
+    : Key
+    : never;
+};

src/components/CodeBlock.tsx

@@ -1,21 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2023 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import { findByPropsLazy } from "@webpack";
-import { Parser } from "@webpack/common";
-
-const CodeContainerClasses = findByPropsLazy("markup", "codeContainer");
-
-/**
- * Renders code in a Discord codeblock
- */
-export function CodeBlock(props: { content?: string, lang: string; }) {
-    return (
-        <div className={CodeContainerClasses.markup}>
-            {Parser.defaultRules.codeBlock.react(props, null, {})}
-        </div>
-    );
-}

src/components/DonateButton.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import IpcEvents from "@utils/IpcEvents";
 import { Button } from "@webpack/common";
 
 import { Heart } from "./Heart";
@@ -26,7 +27,9 @@ export default function DonateButton(props: any) {
             {...props}
             look={Button.Looks.LINK}
             color={Button.Colors.TRANSPARENT}
-            onClick={() => VencordNative.native.openExternal("https://github.com/sponsors/Vendicated")}
+            onClick={() =>
+                VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/sponsors/Vendicated")
+            }
         >
             <Heart />
             Donate

src/components/ErrorBoundary.tsx

@@ -16,9 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Logger } from "@utils/Logger";
+import Logger from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { LazyComponent } from "@utils/react";
+import { LazyComponent } from "@utils/misc";
 import { React } from "@webpack/common";
 
 import { ErrorCard } from "./ErrorCard";

src/components/ExpandableHeader.css

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

src/components/ExpandableHeader.tsx

@@ -1,121 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2023 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import "./ExpandableHeader.css";
-
-import { classNameFactory } from "@api/Styles";
-import { Text, Tooltip, useState } from "@webpack/common";
-
-const cl = classNameFactory("vc-expandableheader-");
-
-export interface ExpandableHeaderProps {
-    onMoreClick?: () => void;
-    moreTooltipText?: string;
-    onDropDownClick?: (state: boolean) => void;
-    defaultState?: boolean;
-    headerText: string;
-    children: React.ReactNode;
-    buttons?: React.ReactNode[];
-    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

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

src/components/Icons.tsx

@@ -1,428 +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 "./iconStyles.css";
-
-import { getIntlMessage, getTheme, Theme } from "@utils/discord";
-import { classes } from "@utils/misc";
-import type { PropsWithChildren } from "react";
-
-interface BaseIconProps extends IconProps {
-    viewBox: string;
-}
-
-type IconProps = JSX.IntrinsicElements["svg"];
-type ImageProps = JSX.IntrinsicElements["img"];
-
-function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
-    return (
-        <svg
-            className={classes(className, "vc-icon")}
-            role="img"
-            width={width}
-            height={height}
-            viewBox={viewBox}
-            {...svgProps}
-        >
-            {children}
-        </svg>
-    );
-}
-
-/**
- * Discord's link icon, as seen in the Message context menu "Copy Message Link" option
- */
-export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
-    return (
-        <Icon
-            height={height}
-            width={width}
-            className={classes(className, "vc-link-icon")}
-            viewBox="0 0 24 24"
-        >
-            <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>
-        </Icon>
-    );
-}
-
-/**
- * Discord's copy icon, as seen in the user panel popout on the right of the username and in large code blocks
- */
-export function CopyIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-copy-icon")}
-            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="M6 18a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-4h-3a5 5 0 0 1-5-5V6h-4a4 4 0 0 0-4 4v8Z" />
-                <path d="M21.73 12a3 3 0 0 0-.6-.88l-4.25-4.24a3 3 0 0 0-.88-.61V9a3 3 0 0 0 3 3h2.73Z" />
-            </g>
-        </Icon>
-    );
-}
-
-/**
- * Discord's open external icon, as seen in the user profile connections
- */
-export function OpenExternalIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-open-external-icon")}
-            viewBox="0 0 24 24"
-        >
-            <polygon
-                fill="currentColor"
-                fillRule="nonzero"
-                points="13 20 11 20 11 8 5.5 13.5 4.08 12.08 12 4.16 19.92 12.08 18.5 13.5 13 8"
-            />
-        </Icon>
-    );
-}
-
-export function ImageIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-image-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path fill="currentColor" d="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z" />
-        </Icon>
-    );
-}
-
-export function InfoIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-info-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                transform="translate(2 2)"
-                d="M9,7 L11,7 L11,5 L9,5 L9,7 Z M10,18 C5.59,18 2,14.41 2,10 C2,5.59 5.59,2 10,2 C14.41,2 18,5.59 18,10 C18,14.41 14.41,18 10,18 L10,18 Z M10,4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16,4.4771525 0,10 C-1.33226763e-15,12.6521649 1.0535684,15.195704 2.92893219,17.0710678 C4.80429597,18.9464316 7.3478351,20 10,20 C12.6521649,20 15.195704,18.9464316 17.0710678,17.0710678 C18.9464316,15.195704 20,12.6521649 20,10 C20,7.3478351 18.9464316,4.80429597 17.0710678,2.92893219 C15.195704,1.0535684 12.6521649,2.22044605e-16 10,0 L10,4.4408921e-16 Z M9,15 L11,15 L11,9 L9,9 L9,15 L9,15 Z"
-            />
-        </Icon>
-    );
-}
-
-export function OwnerCrownIcon(props: IconProps) {
-    return (
-        <Icon
-            aria-label={getIntlMessage("GUILD_OWNER")}
-            {...props}
-            className={classes(props.className, "vc-owner-crown-icon")}
-            role="img"
-            viewBox="0 0 16 16"
-        >
-            <path
-                fill="currentColor"
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M13.6572 5.42868C13.8879 5.29002 14.1806 5.30402 14.3973 5.46468C14.6133 5.62602 14.7119 5.90068 14.6473 6.16202L13.3139 11.4954C13.2393 11.7927 12.9726 12.0007 12.6666 12.0007H3.33325C3.02725 12.0007 2.76058 11.792 2.68592 11.4954L1.35258 6.16202C1.28792 5.90068 1.38658 5.62602 1.60258 5.46468C1.81992 5.30468 2.11192 5.29068 2.34325 5.42868L5.13192 7.10202L7.44592 3.63068C7.46173 3.60697 7.48377 3.5913 7.50588 3.57559C7.5192 3.56612 7.53255 3.55663 7.54458 3.54535L6.90258 2.90268C6.77325 2.77335 6.77325 2.56068 6.90258 2.43135L7.76458 1.56935C7.89392 1.44002 8.10658 1.44002 8.23592 1.56935L9.09792 2.43135C9.22725 2.56068 9.22725 2.77335 9.09792 2.90268L8.45592 3.54535C8.46794 3.55686 8.48154 3.56651 8.49516 3.57618C8.51703 3.5917 8.53897 3.60727 8.55458 3.63068L10.8686 7.10202L13.6572 5.42868ZM2.66667 12.6673H13.3333V14.0007H2.66667V12.6673Z"
-            />
-        </Icon>
-    );
-}
-
-/**
- * Discord's screenshare icon, as seen in the connection panel
- */
-export function ScreenshareIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-screenshare-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M2 4.5C2 3.397 2.897 2.5 4 2.5H20C21.103 2.5 22 3.397 22 4.5V15.5C22 16.604 21.103 17.5 20 17.5H13V19.5H17V21.5H7V19.5H11V17.5H4C2.897 17.5 2 16.604 2 15.5V4.5ZM13.2 14.3375V11.6C9.864 11.6 7.668 12.6625 6 15C6.672 11.6625 8.532 8.3375 13.2 7.6625V5L18 9.6625L13.2 14.3375Z"
-            />
-        </Icon>
-    );
-}
-
-export function ImageVisible(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-image-visible")}
-            viewBox="0 0 24 24"
-        >
-            <path fill="currentColor" d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h14q.825 0 1.413.587Q21 4.175 21 5v14q0 .825-.587 1.413Q19.825 21 19 21Zm0-2h14V5H5v14Zm1-2h12l-3.75-5-3 4L9 13Zm-1 2V5v14Z" />
-        </Icon>
-    );
-}
-
-export function ImageInvisible(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-image-invisible")}
-            viewBox="0 0 24 24"
-        >
-            <path fill="currentColor" d="m21 18.15-2-2V5H7.85l-2-2H19q.825 0 1.413.587Q21 4.175 21 5Zm-1.2 4.45L18.2 21H5q-.825 0-1.413-.587Q3 19.825 3 19V5.8L1.4 4.2l1.4-1.4 18.4 18.4ZM6 17l3-4 2.25 3 .825-1.1L5 7.825V19h11.175l-2-2Zm7.425-6.425ZM10.6 13.4Z" />
-        </Icon>
-    );
-}
-
-export function Microphone(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-microphone")}
-            viewBox="0 0 24 24"
-        >
-            <path fillRule="evenodd" clipRule="evenodd" d="M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V21H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1ZM12 4C11.2 4 11 4.66667 11 5V11C11 11.3333 11.2 12 12 12C12.8 12 13 11.3333 13 11V5C13 4.66667 12.8 4 12 4Z" fill="currentColor" />
-            <path fillRule="evenodd" clipRule="evenodd" d="M14.99 11C14.99 12.66 13.66 14 12 14C10.34 14 9 12.66 9 11V5C9 3.34 10.34 2 12 2C13.66 2 15 3.34 15 5L14.99 11ZM12 16.1C14.76 16.1 17.3 14 17.3 11H19C19 14.42 16.28 17.24 13 17.72V22H11V17.72C7.72 17.23 5 14.41 5 11H6.7C6.7 14 9.24 16.1 12 16.1Z" fill="currentColor" />
-        </Icon >
-    );
-}
-
-export function CogWheel(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-cog-wheel")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                clipRule="evenodd"
-                fill="currentColor"
-                d="M19.738 10H22V14H19.739C19.498 14.931 19.1 15.798 18.565 16.564L20 18L18 20L16.565 18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069 19.498 8.203 19.099 7.436 18.564L6 20L4 18L5.436 16.564C4.901 15.799 4.502 14.932 4.262 14H2V10H4.262C4.502 9.068 4.9 8.202 5.436 7.436L4 6L6 4L7.436 5.436C8.202 4.9 9.068 4.502 10 4.262V2H14V4.261C14.932 4.502 15.797 4.9 16.565 5.435L18 3.999L20 5.999L18.564 7.436C19.099 8.202 19.498 9.069 19.738 10ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
-            />
-        </Icon>
-    );
-}
-
-export function ReplyIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-reply-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M10 8.26667V4L3 11.4667L10 18.9333V14.56C15 14.56 18.5 16.2667 21 20C20 14.6667 17 9.33333 10 8.26667Z"
-            />
-        </Icon>
-    );
-}
-
-export function DeleteIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-delete-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z"
-            />
-            <path
-                fill="currentColor"
-                d="M5 6.99902V18.999C5 20.101 5.897 20.999 7 20.999H17C18.103 20.999 19 20.101 19 18.999V6.99902H5ZM11 17H9V11H11V17ZM15 17H13V11H15V17Z"
-            />
-        </Icon>
-    );
-}
-
-export function PlusIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-plus-icon")}
-            viewBox="0 0 18 18"
-        >
-            <polygon
-                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"
-            />
-        </Icon>
-    );
-}
-
-export function NoEntrySignIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-no-entry-sign-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                d="M0 0h24v24H0z"
-                fill="none"
-            />
-            <path
-                fill="currentColor"
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8 0-1.85.63-3.55 1.69-4.9L16.9 18.31C15.55 19.37 13.85 20 12 20zm6.31-3.1L7.1 5.69C8.45 4.63 10.15 4 12 4c4.42 0 8 3.58 8 8 0 1.85-.63 3.55-1.69 4.9z"
-            />
-        </Icon>
-    );
-}
-
-export function SafetyIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-safety-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M4.27 5.22A2.66 2.66 0 0 0 3 7.5v2.3c0 5.6 3.3 10.68 8.42 12.95.37.17.79.17 1.16 0A14.18 14.18 0 0 0 21 9.78V7.5c0-.93-.48-1.78-1.27-2.27l-6.17-3.76a3 3 0 0 0-3.12 0L4.27 5.22ZM6 7.68l6-3.66V12H6.22C6.08 11.28 6 10.54 6 9.78v-2.1Zm6 12.01V12h5.78A11.19 11.19 0 0 1 12 19.7Z"
-            />
-        </Icon>
-
-    );
-}
-
-export function NotesIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-notes-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M8 3C7.44771 3 7 3.44772 7 4V5C7 5.55228 7.44772 6 8 6H16C16.5523 6 17 5.55228 17 5V4C17 3.44772 16.5523 3 16 3H15.1245C14.7288 3 14.3535 2.82424 14.1002 2.52025L13.3668 1.64018C13.0288 1.23454 12.528 1 12 1C11.472 1 10.9712 1.23454 10.6332 1.64018L9.8998 2.52025C9.64647 2.82424 9.27121 3 8.8755 3H8Z"
-            />
-            <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                fill="currentColor"
-                d="M19 4.49996V4.99996C19 6.65681 17.6569 7.99996 16 7.99996H8C6.34315 7.99996 5 6.65681 5 4.99996V4.49996C5 4.22382 4.77446 3.99559 4.50209 4.04109C3.08221 4.27826 2 5.51273 2 6.99996V19C2 20.6568 3.34315 22 5 22H19C20.6569 22 22 20.6568 22 19V6.99996C22 5.51273 20.9178 4.27826 19.4979 4.04109C19.2255 3.99559 19 4.22382 19 4.49996ZM8 12C7.44772 12 7 12.4477 7 13C7 13.5522 7.44772 14 8 14H16C16.5523 14 17 13.5522 17 13C17 12.4477 16.5523 12 16 12H8ZM7 17C7 16.4477 7.44772 16 8 16H13C13.5523 16 14 16.4477 14 17C14 17.5522 13.5523 18 13 18H8C7.44772 18 7 17.5522 7 17Z"
-            />
-        </Icon>
-    );
-}
-
-export function FolderIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-folder-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M2 5a3 3 0 0 1 3-3h3.93a2 2 0 0 1 1.66.9L12 5h7a3 3 0 0 1 3 3v11a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V5Z"
-            />
-        </Icon>
-    );
-}
-
-export function LogIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-log-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M3.11 8H6v10.82c0 .86.37 1.68 1 2.27.46.43 1.02.71 1.63.84A1 1 0 0 0 9 22h10a4 4 0 0 0 4-4v-1a2 2 0 0 0-2-2h-1V5a3 3 0 0 0-3-3H4.67c-.87 0-1.7.32-2.34.9-.63.6-1 1.42-1 2.28 0 .71.3 1.35.52 1.75a5.35 5.35 0 0 0 .48.7l.01.01h.01L3.11 7l-.76.65a1 1 0 0 0 .76.35Zm1.56-4c-.38 0-.72.14-.97.37-.24.23-.37.52-.37.81a1.69 1.69 0 0 0 .3.82H6v-.83c0-.29-.13-.58-.37-.8C5.4 4.14 5.04 4 4.67 4Zm5 13a3.58 3.58 0 0 1 0 3H19a2 2 0 0 0 2-2v-1H9.66ZM3.86 6.35ZM11 8a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Zm-1 5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z"
-            />
-        </Icon>
-    );
-}
-
-export function RestartIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-restart-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="M4 12a8 8 0 0 1 14.93-4H15a1 1 0 1 0 0 2h6a1 1 0 0 0 1-1V3a1 1 0 1 0-2 0v3a9.98 9.98 0 0 0-18 6 10 10 0 0 0 16.29 7.78 1 1 0 0 0-1.26-1.56A8 8 0 0 1 4 12Z"
-            />
-        </Icon>
-    );
-}
-
-export function PaintbrushIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-paintbrush-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M15.35 7.24C15.9 6.67 16 5.8 16 5a3 3 0 1 1 3 3c-.8 0-1.67.09-2.24.65a1.5 1.5 0 0 0 0 2.11l1.12 1.12a3 3 0 0 1 0 4.24l-5 5a3 3 0 0 1-4.25 0l-5.76-5.75a3 3 0 0 1 0-4.24l4.04-4.04.97-.97a3 3 0 0 1 4.24 0l1.12 1.12c.58.58 1.52.58 2.1 0ZM6.9 9.9 4.3 12.54a1 1 0 0 0 0 1.42l2.17 2.17.83-.84a1 1 0 0 1 1.42 1.42l-.84.83.59.59 1.83-1.84a1 1 0 0 1 1.42 1.42l-1.84 1.83.17.17a1 1 0 0 0 1.42 0l2.63-2.62L6.9 9.9Z"
-            />
-        </Icon>
-    );
-}
-
-export function PencilIcon(props: IconProps) {
-    return (
-        <Icon
-            {...props}
-            className={classes(props.className, "vc-pencil-icon")}
-            viewBox="0 0 24 24"
-        >
-            <path
-                fill="currentColor"
-                d="m13.96 5.46 4.58 4.58a1 1 0 0 0 1.42 0l1.38-1.38a2 2 0 0 0 0-2.82l-3.18-3.18a2 2 0 0 0-2.82 0l-1.38 1.38a1 1 0 0 0 0 1.42ZM2.11 20.16l.73-4.22a3 3 0 0 1 .83-1.61l7.87-7.87a1 1 0 0 1 1.42 0l4.58 4.58a1 1 0 0 1 0 1.42l-7.87 7.87a3 3 0 0 1-1.6.83l-4.23.73a1.5 1.5 0 0 1-1.73-1.73Z"
-            />
-        </Icon>
-    );
-}
-
-const WebsiteIconDark = "/assets/e1e96d89e192de1997f73730db26e94f.svg";
-const WebsiteIconLight = "/assets/730f58bcfd5a57a5e22460c445a0c6cf.svg";
-const GithubIconLight = "/assets/3ff98ad75ac94fa883af5ed62d17c459.svg";
-const GithubIconDark = "/assets/6a853b4c87fce386cbfef4a2efbacb09.svg";
-
-export function GithubIcon(props: ImageProps) {
-    const src = getTheme() === Theme.Light
-        ? GithubIconLight
-        : GithubIconDark;
-
-    return <img {...props} src={src} />;
-}
-
-export function WebsiteIcon(props: ImageProps) {
-    const src = getTheme() === Theme.Light
-        ? WebsiteIconLight
-        : WebsiteIconDark;
-
-    return <img {...props} src={src} />;
-}

src/components/Monaco.ts

@@ -0,0 +1,51 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { debounce } from "@utils/debounce";
+import IpcEvents from "@utils/IpcEvents";
+import { Queue } from "@utils/Queue";
+import { find } from "@webpack";
+
+import monacoHtml from "~fileContent/monacoWin.html";
+
+const queue = new Queue();
+const setCss = debounce((css: string) => {
+    queue.push(() => VencordNative.ipc.invoke(IpcEvents.SET_QUICK_CSS, css));
+});
+
+export async function launchMonacoEditor() {
+    const features = `popup,width=${Math.min(window.innerWidth, 1000)},height=${Math.min(window.innerHeight, 1000)}`;
+    const win = open("about:blank", "VencordQuickCss", features);
+    if (!win) {
+        alert("Failed to open QuickCSS popup. Make sure to allow popups!");
+        return;
+    }
+
+    win.setCss = setCss;
+    win.getCurrentCss = () => VencordNative.ipc.invoke(IpcEvents.GET_QUICK_CSS);
+    win.getTheme = () =>
+        find(m =>
+            m.ProtoClass?.typeName.endsWith("PreloadedUserSettings")
+        )?.getCurrentValue()?.appearance?.theme === 2
+            ? "vs-light"
+            : "vs-dark";
+
+    win.document.write(monacoHtml);
+
+    window.__VENCORD_MONACO_WIN__ = new WeakRef(win);
+}

src/components/PatchHelper.tsx

@@ -16,16 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { CodeBlock } from "@components/CodeBlock";
-import { debounce } from "@shared/debounce";
+import { debounce } from "@utils/debounce";
 import { Margins } from "@utils/margins";
+import { makeCodeblock } from "@utils/misc";
 import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
-import { makeCodeblock } from "@utils/text";
-import { Patch, ReplaceFn } from "@utils/types";
+import { ReplaceFn } from "@utils/types";
 import { search } from "@webpack";
-import { Button, Clipboard, Forms, Parser, React, Switch, TextArea, TextInput } from "@webpack/common";
+import { Button, Clipboard, Forms, Parser, React, Switch, Text, TextInput } from "@webpack/common";
 
-import { SettingsTab, wrapTab } from "./shared";
+import { CheckedTextInput } from "./CheckedTextInput";
+import ErrorBoundary from "./ErrorBoundary";
 
 // Do not include diff in non dev builds (side effects import)
 if (IS_DEV) {
@@ -46,7 +46,7 @@ const findCandidates = debounce(function ({ find, setModule, setError }) {
 
 interface ReplacementComponentProps {
     module: [id: number, factory: Function];
-    match: string;
+    match: string | RegExp;
     replacement: string | ReplaceFn;
     setReplacementError(error: any): void;
 }
@@ -57,13 +57,7 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
 
     const [patchedCode, matchResult, diff] = React.useMemo(() => {
         const src: string = fact.toString().replaceAll("\n", "");
-
-        try {
-            new RegExp(match);
-        } catch (e) {
-            return ["", [], []];
-        }
-        const canonicalMatch = canonicalizeMatch(new RegExp(match));
+        const canonicalMatch = canonicalizeMatch(match);
         try {
             const canonicalReplace = canonicalizeReplace(replacement, "YourPlugin");
             var patched = src.replace(canonicalMatch, canonicalReplace as string);
@@ -113,7 +107,7 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
     function renderDiff() {
         return diff?.map(p => {
             const color = p.added ? "lime" : p.removed ? "red" : "grey";
-            return <div style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>;
+            return <div style={{ color, userSelect: "text" }}>{p.value}</div>;
         });
     }
 
@@ -185,8 +179,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
 
     return (
         <>
-            {/* FormTitle adds a class if className is not set, so we set it to an empty string to prevent that */}
-            <Forms.FormTitle className="">replacement</Forms.FormTitle>
+            <Forms.FormTitle>replacement</Forms.FormTitle>
             <TextInput
                 value={replacement?.toString()}
                 onChange={onChange}
@@ -194,7 +187,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
             />
             {!isFunc && (
                 <div className="vc-text-selectable">
-                    <Forms.FormTitle className={Margins.top8}>Cheat Sheet</Forms.FormTitle>
+                    <Forms.FormTitle>Cheat Sheet</Forms.FormTitle>
                     {Object.entries({
                         "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
                         "$$": "Insert a $",
@@ -224,66 +217,8 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
     );
 }
 
-interface FullPatchInputProps {
-    setFind(v: string): void;
-    setParsedFind(v: string | RegExp): void;
-    setMatch(v: string): void;
-    setReplacement(v: string | ReplaceFn): void;
-}
-
-function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacement }: FullPatchInputProps) {
-    const [fullPatch, setFullPatch] = React.useState<string>("");
-    const [fullPatchError, setFullPatchError] = React.useState<string>("");
-
-    function update() {
-        if (fullPatch === "") {
-            setFullPatchError("");
-
-            setFind("");
-            setParsedFind("");
-            setMatch("");
-            setReplacement("");
-            return;
-        }
-
-        try {
-            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");
-
-            if (parsed.replacement instanceof Array) {
-                if (parsed.replacement.length === 0) throw new Error("Invalid replacement");
-
-                parsed.replacement = {
-                    match: parsed.replacement[0].match,
-                    replace: parsed.replacement[0].replace
-                };
-            }
-
-            if (!parsed.replacement.match) throw new Error("No 'replacement.match' field");
-            if (!parsed.replacement.replace) throw new Error("No 'replacement.replace' field");
-
-            setFind(parsed.find instanceof RegExp ? parsed.find.toString() : parsed.find);
-            setParsedFind(parsed.find);
-            setMatch(parsed.replacement.match instanceof RegExp ? parsed.replacement.match.source : parsed.replacement.match);
-            setReplacement(parsed.replacement.replace);
-            setFullPatchError("");
-        } catch (e) {
-            setFullPatchError((e as Error).message);
-        }
-    }
-
-    return <>
-        <Forms.FormText className={Margins.bottom8}>Paste your full JSON patch here to fill out the fields</Forms.FormText>
-        <TextArea value={fullPatch} onChange={setFullPatch} onBlur={update} />
-        {fullPatchError !== "" && <Forms.FormText style={{ color: "var(--text-danger)" }}>{fullPatchError}</Forms.FormText>}
-    </>;
-}
-
 function PatchHelper() {
     const [find, setFind] = React.useState<string>("");
-    const [parsedFind, setParsedFind] = React.useState<string | RegExp>("");
     const [match, setMatch] = React.useState<string>("");
     const [replacement, setReplacement] = React.useState<string | ReplaceFn>("");
 
@@ -291,60 +226,41 @@ function PatchHelper() {
 
     const [module, setModule] = React.useState<[number, Function]>();
     const [findError, setFindError] = React.useState<string>();
-    const [matchError, setMatchError] = React.useState<string>();
 
     const code = React.useMemo(() => {
         return `
 {
-    find: ${parsedFind instanceof RegExp ? parsedFind.toString() : JSON.stringify(parsedFind)},
+    find: ${JSON.stringify(find)},
     replacement: {
         match: /${match.replace(/(?<!\\)\//g, "\\/")}/,
         replace: ${typeof replacement === "function" ? replacement.toString() : JSON.stringify(replacement)}
     }
 }
         `.trim();
-    }, [parsedFind, match, replacement]);
+    }, [find, match, replacement]);
 
     function onFindChange(v: string) {
+        setFindError(void 0);
         setFind(v);
+        if (v.length) {
+            findCandidates({ find: v, setModule, setError: setFindError });
+        }
+    }
 
+    function onMatchChange(v: string) {
         try {
-            let parsedFind = v as string | RegExp;
-            if (/^\/.+?\/$/.test(v)) parsedFind = new RegExp(v.slice(1, -1));
-
+            new RegExp(v);
             setFindError(void 0);
-            setParsedFind(parsedFind);
-
-            if (v.length) {
-                findCandidates({ find: parsedFind, setModule, setError: setFindError });
-            }
+            setMatch(v);
         } catch (e: any) {
             setFindError((e as Error).message);
         }
     }
 
-    function onMatchChange(v: string) {
-        setMatch(v);
-
-        try {
-            new RegExp(v);
-            setMatchError(void 0);
-        } catch (e: any) {
-            setMatchError((e as Error).message);
-        }
-    }
-
     return (
-        <SettingsTab title="Patch Helper">
-            <Forms.FormTitle>full patch</Forms.FormTitle>
-            <FullPatchInput
-                setFind={onFindChange}
-                setParsedFind={setParsedFind}
-                setMatch={onMatchChange}
-                setReplacement={setReplacement}
-            />
-
-            <Forms.FormTitle className={Margins.top8}>find</Forms.FormTitle>
+        <Forms.FormSection>
+            <Text variant="heading-md/normal" tag="h2" className={Margins.bottom8}>Patch Helper</Text>
+            <Forms.FormTitle>find</Forms.FormTitle>
             <TextInput
                 type="text"
                 value={find}
@@ -352,15 +268,19 @@ function PatchHelper() {
                 error={findError}
             />
 
-            <Forms.FormTitle className={Margins.top8}>match</Forms.FormTitle>
-            <TextInput
-                type="text"
+            <Forms.FormTitle>match</Forms.FormTitle>
+            <CheckedTextInput
                 value={match}
                 onChange={onMatchChange}
-                error={matchError}
+                validate={v => {
+                    try {
+                        return (new RegExp(v), true);
+                    } catch (e) {
+                        return (e as Error).message;
+                    }
+                }}
             />
 
-            <div className={Margins.top8} />
             <ReplacementInput
                 replacement={replacement}
                 setReplacement={setReplacement}
@@ -371,7 +291,7 @@ function PatchHelper() {
             {module && (
                 <ReplacementComponent
                     module={module}
-                    match={match}
+                    match={new RegExp(match)}
                     replacement={replacement}
                     setReplacementError={setReplacementError}
                 />
@@ -380,13 +300,12 @@ function PatchHelper() {
             {!!(find && match && replacement) && (
                 <>
                     <Forms.FormTitle className={Margins.top20}>Code</Forms.FormTitle>
-                    <CodeBlock lang="js" content={code} />
+                    <div style={{ userSelect: "text" }}>{Parser.parse(makeCodeblock(code, "ts"))}</div>
                     <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>
+        </Forms.FormSection>
     );
 }
 
-export default IS_DEV ? wrapTab(PatchHelper, "PatchHelper") : null;
+export default IS_DEV ? ErrorBoundary.wrap(PatchHelper) : null;

src/components/PluginSettings/ContributorModal.tsx

@@ -1,115 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2023 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import "./contributorModal.css";
-
-import { useSettings } from "@api/Settings";
-import { classNameFactory } from "@api/Styles";
-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 { ModalContent, ModalRoot, openModal } from "@utils/modal";
-import { Forms, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
-import { User } from "discord-types/general";
-
-import Plugins from "~plugins";
-
-import { PluginCard } from ".";
-import { GithubButton, WebsiteButton } from "./LinkIconButton";
-
-const cl = classNameFactory("vc-author-modal-");
-
-export function openContributorModal(user: User) {
-    openModal(modalProps =>
-        <ModalRoot {...modalProps}>
-            <ErrorBoundary>
-                <ModalContent className={cl("root")}>
-                    <ContributorModal user={user} />
-                </ModalContent>
-            </ErrorBoundary>
-        </ModalRoot>
-    );
-}
-
-function ContributorModal({ user }: { user: User; }) {
-    useSettings();
-
-    const profile = useStateFromStores([UserProfileStore], () => UserProfileStore.getUserProfile(user.id));
-
-    useEffect(() => {
-        if (!profile && !user.bot && user.id)
-            fetchUserProfile(user.id);
-    }, [user.id]);
-
-    const githubName = profile?.connectedAccounts?.find(a => a.type === "github")?.name;
-    const website = profile?.connectedAccounts?.find(a => a.type === "domain")?.name;
-
-    const plugins = useMemo(() => {
-        const allPlugins = Object.values(Plugins);
-        const pluginsByAuthor = DevsById[user.id]
-            ? allPlugins.filter(p => p.authors.includes(DevsById[user.id]))
-            : allPlugins.filter(p => p.authors.some(a => a.name === user.username));
-
-        return pluginsByAuthor
-            .filter(p => !p.name.endsWith("API"))
-            .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")}>
-                <img
-                    className={cl("avatar")}
-                    src={user.getAvatarURL(void 0, 512, true)}
-                    alt=""
-                />
-                <Forms.FormTitle tag="h2" className={cl("name")}>{user.username}</Forms.FormTitle>
-
-                <div className={classes("vc-settings-modal-links", cl("links"))}>
-                    {website && (
-                        <WebsiteButton
-                            text={website}
-                            href={`https://${website}`}
-                        />
-                    )}
-                    {githubName && (
-                        <GithubButton
-                            text={githubName}
-                            href={`https://github.com/${githubName}`}
-                        />
-                    )}
-                </div>
-            </div>
-
-            {plugins.length ? (
-                <Forms.FormText>
-                    This person has {ContributedHyperLink} to {pluralise(plugins.length, "plugin")}!
-                </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")}>
-                    {plugins.map(p =>
-                        <PluginCard
-                            key={p.name}
-                            plugin={p}
-                            disabled={p.required ?? false}
-                            onRestartNeeded={() => showToast("Restart to apply changes!")}
-                        />
-                    )}
-                </div>
-            )}
-        </>
-    );
-}

src/components/PluginSettings/LinkIconButton.css

@@ -1,12 +0,0 @@
-.vc-settings-modal-link-icon {
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-    border: 4px solid var(--background-tertiary);
-    box-sizing: border-box
-}
-
-.vc-settings-modal-links {
-    display: flex;
-    gap: 0.2em;
-}

src/components/PluginSettings/LinkIconButton.tsx

@@ -1,39 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2024 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-import "./LinkIconButton.css";
-
-import { MaskedLink, Tooltip } from "@webpack/common";
-
-import { GithubIcon, WebsiteIcon } from "..";
-
-export function GithubLinkIcon() {
-    return <GithubIcon aria-hidden className={"vc-settings-modal-link-icon"} />;
-}
-
-export function WebsiteLinkIcon() {
-    return <WebsiteIcon aria-hidden className={"vc-settings-modal-link-icon"} />;
-}
-
-interface Props {
-    text: string;
-    href: string;
-}
-
-function LinkIcon({ text, href, Icon }: Props & { Icon: React.ComponentType; }) {
-    return (
-        <Tooltip text={text}>
-            {props => (
-                <MaskedLink {...props} href={href}>
-                    <Icon />
-                </MaskedLink>
-            )}
-        </Tooltip>
-    );
-}
-
-export const WebsiteButton = (props: Props) => <LinkIcon {...props} Icon={WebsiteLinkIcon} />;
-export const GithubButton = (props: Props) => <LinkIcon {...props} Icon={GithubLinkIcon} />;

src/components/PluginSettings/PluginModal.css

@@ -1,7 +0,0 @@
-.vc-plugin-modal-info {
-    align-items: center;
-}
-
-.vc-plugin-modal-description {
-    flex-grow: 1;
-}

src/components/PluginSettings/PluginModal.tsx

@@ -16,26 +16,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "./PluginModal.css";
-
 import { generateId } from "@api/Commands";
-import { useSettings } from "@api/Settings";
-import { classNameFactory } from "@api/Styles";
+import { useSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { gitRemote } from "@shared/vencordUserAgent";
-import { proxyLazy } from "@utils/lazy";
 import { Margins } from "@utils/margins";
-import { classes, isObjectEmpty } from "@utils/misc";
-import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { classes, LazyComponent } from "@utils/misc";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
+import { proxyLazy } from "@utils/proxyLazy";
 import { OptionType, Plugin } from "@utils/types";
-import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
-import { Button, Clickable, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "@webpack/common";
+import { findByCode, findByPropsLazy } from "@webpack";
+import { Button, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "@webpack/common";
 import { User } from "discord-types/general";
 import { Constructor } from "type-fest";
 
-import { PluginMeta } from "~plugins";
-
 import {
     ISettingElementProps,
     SettingBooleanComponent,
@@ -45,12 +39,8 @@ import {
     SettingSliderComponent,
     SettingTextComponent
 } from "./components";
-import { openContributorModal } from "./ContributorModal";
-import { GithubButton, WebsiteButton } from "./LinkIconButton";
 
-const cl = classNameFactory("vc-plugin-modal-");
-
-const UserSummaryItem = findComponentByCodeLazy("defaultRenderUser", "showDefaultAvatarsForNullUsers");
+const UserSummaryItem = LazyComponent(() => findByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
 const UserRecord: Constructor<Partial<User>> = proxyLazy(() => UserStore.getCurrentUser().constructor) as any;
 
@@ -59,12 +49,11 @@ interface PluginModalProps extends ModalProps {
     onRestartNeeded(): void;
 }
 
-function makeDummyUser(user: { username: string; id?: string; avatar?: string; }) {
+/** To stop discord making unwanted requests... */
+function makeDummyUser(user: { name: string, id: BigInt; }) {
     const newUser = new UserRecord({
-        username: user.username,
-        id: user.id ?? generateId(),
-        avatar: user.avatar,
-        /** To stop discord making unwanted requests... */
+        username: user.name,
+        id: generateId(),
         bot: true,
     });
     FluxDispatcher.dispatch({
@@ -96,16 +85,14 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
     const canSubmit = () => Object.values(errors).every(e => !e);
 
-    const hasSettings = Boolean(pluginSettings && plugin.options && !isObjectEmpty(plugin.options));
+    const hasSettings = Boolean(pluginSettings && plugin.options);
 
     React.useEffect(() => {
         (async () => {
             for (const user of plugin.authors.slice(0, 6)) {
                 const author = user.id
-                    ? await UserUtils.getUser(`${user.id}`)
-                        .catch(() => makeDummyUser({ username: user.name }))
-                    : makeDummyUser({ username: user.name });
-
+                    ? await UserUtils.fetchUser(`${user.id}`).catch(() => makeDummyUser(user))
+                    : makeDummyUser(user);
                 setAuthors(a => [...a, author]);
             }
         })();
@@ -141,8 +128,6 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
             return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
         } else {
             const options = Object.entries(plugin.options).map(([key, setting]) => {
-                if (setting.hidden) return null;
-
                 function onChange(newValue: any) {
                     setTempSettings(s => ({ ...s, [key]: newValue }));
                 }
@@ -165,7 +150,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 );
             });
 
-            return <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>{options}</Flex>;
+            return <Flex flexDirection="column" style={{ gap: 12 }}>{options}</Flex>;
         }
     }
 
@@ -189,54 +174,16 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
         );
     }
 
-    /*
-    function switchToPopout() {
-        onClose();
-
-        const PopoutKey = `DISCORD_VENCORD_PLUGIN_SETTINGS_MODAL_${plugin.name}`;
-        PopoutActions.open(
-            PopoutKey,
-            () => <PluginModal
-                transitionState={transitionState}
-                plugin={plugin}
-                onRestartNeeded={onRestartNeeded}
-                onClose={() => PopoutActions.close(PopoutKey)}
-            />
-        );
-    }
-    */
-
-    const pluginMeta = PluginMeta[plugin.name];
-
     return (
         <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM} className="vc-text-selectable">
             <ModalHeader separator={false}>
                 <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text>
-
-                {/*
-                <Button look={Button.Looks.BLANK} onClick={switchToPopout}>
-                    <OpenExternalIcon aria-label="Open in Popout" />
-                </Button>
-                */}
                 <ModalCloseButton onClick={onClose} />
             </ModalHeader>
-            <ModalContent>
+            <ModalContent style={{ marginBottom: 8, marginTop: 8 }}>
                 <Forms.FormSection>
-                    <Flex className={cl("info")}>
-                        <Forms.FormText className={cl("description")}>{plugin.description}</Forms.FormText>
-                        {!pluginMeta.userPlugin && (
-                            <div className="vc-settings-modal-links">
-                                <WebsiteButton
-                                    text="View more info"
-                                    href={`https://vencord.dev/plugins/${plugin.name}`}
-                                />
-                                <GithubButton
-                                    text="View source code"
-                                    href={`https://github.com/${gitRemote}/tree/main/src/plugins/${pluginMeta.folderName}`}
-                                />
-                            </div>
-                        )}
-                    </Flex>
+                    <Forms.FormTitle tag="h3">About {plugin.name}</Forms.FormTitle>
+                    <Forms.FormText>{plugin.description}</Forms.FormText>
                     <Forms.FormTitle tag="h3" style={{ marginTop: 8, marginBottom: 0 }}>Authors</Forms.FormTitle>
                     <div style={{ width: "fit-content", marginBottom: 8 }}>
                         <UserSummaryItem
@@ -248,19 +195,6 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                             showDefaultAvatarsForNullUsers
                             showUserPopout
                             renderMoreUsers={renderMoreUsers}
-                            renderUser={(user: User) => (
-                                <Clickable
-                                    className={AvatarStyles.clickableAvatar}
-                                    onClick={() => openContributorModal(user)}
-                                >
-                                    <img
-                                        className={AvatarStyles.avatar}
-                                        src={user.getAvatarURL(void 0, 80, true)}
-                                        alt={user.username}
-                                        title={user.username}
-                                    />
-                                </Clickable>
-                            )}
                         />
                     </div>
                 </Forms.FormSection>
@@ -273,7 +207,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         </Forms.FormSection>
                     </div>
                 )}
-                <Forms.FormSection className={Margins.bottom16}>
+                <Forms.FormSection>
                     <Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
                     {renderSettings()}
                 </Forms.FormSection>
@@ -284,7 +218,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         <Button
                             onClick={onClose}
                             size={Button.Sizes.SMALL}
-                            color={Button.Colors.PRIMARY}
+                            color={Button.Colors.WHITE}
                             look={Button.Looks.LINK}
                         >
                             Cancel
@@ -310,13 +244,3 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
         </ModalRoot>
     );
 }
-
-export function openPluginModal(plugin: Plugin, onRestartNeeded?: (pluginName: string) => void) {
-    openModal(modalProps => (
-        <PluginModal
-            {...modalProps}
-            plugin={plugin}
-            onRestartNeeded={() => onRestartNeeded?.(plugin.name)}
-        />
-    ));
-}

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -16,9 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { wordsFromCamel, wordsToTitle } from "@utils/text";
 import { PluginOptionBoolean } from "@utils/types";
-import { Forms, React, Switch } from "@webpack/common";
+import { Forms, React, Select } from "@webpack/common";
 
 import { ISettingElementProps } from ".";
 
@@ -32,6 +31,11 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
         onError(error !== null);
     }, [error]);
 
+    const options = [
+        { label: "Enabled", value: true, default: def === true },
+        { label: "Disabled", value: false, default: typeof def === "undefined" || def === false },
+    ];
+
     function handleChange(newValue: boolean): void {
         const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
@@ -45,17 +49,18 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Switch
-                value={state}
-                onChange={handleChange}
-                note={option.description}
-                disabled={option.disabled?.call(definedSettings) ?? false}
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
+            <Select
+                isDisabled={option.disabled?.call(definedSettings) ?? false}
+                options={options}
+                placeholder={option.placeholder ?? "Select an option"}
+                maxVisibleItems={5}
+                closeOnSelect={true}
+                select={handleChange}
+                isSelected={v => v === state}
+                serialize={v => String(v)}
                 {...option.componentProps}
-                hideBorder
-                style={{ marginBottom: "0.5em" }}
-            >
-                {wordsToTitle(wordsFromCamel(id))}
-            </Switch>
+            />
             {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}
         </Forms.FormSection>
     );

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.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <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.FormText className={Margins.bottom16} type="description">{option.description}</Forms.FormText>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <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.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <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";
 
@@ -35,16 +33,16 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
         const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
-        else setError(null);
-
-        setState(newValue);
-        onChange(newValue);
+        else {
+            setError(null);
+            setState(newValue);
+            onChange(newValue);
+        }
     }
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{wordsToTitle(wordsFromCamel(id))}</Forms.FormTitle>
-            <Forms.FormText className={Margins.bottom20} type="description">{option.description}</Forms.FormText>
+            <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <TextInput
                 type="text"
                 value={state}

src/components/PluginSettings/contributorModal.css

@@ -1,51 +0,0 @@
-.vc-author-modal-root {
-    padding: 1em;
-}
-
-.vc-author-modal-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 1em;
-}
-
-.vc-author-modal-name {
-    text-transform: none;
-    flex-grow: 0;
-    background: var(--background-tertiary);
-    border-radius: 0 9999px 9999px 0;
-    padding: 6px 0.8em 6px 0.5em;
-    font-size: 20px;
-    height: 20px;
-    position: relative;
-    text-wrap: nowrap;
-}
-
-.vc-author-modal-name::before {
-    content: "";
-    display: block;
-    position: absolute;
-    height: 100%;
-    width: 32px;
-    background: var(--background-tertiary);
-    z-index: -1;
-    left: -32px;
-    top: 0;
-    border-top-left-radius: 9999px;
-    border-bottom-left-radius: 9999px;
-}
-
-.vc-author-modal-avatar {
-    height: 32px;
-    width: 32px;
-    border-radius: 50%;
-}
-
-.vc-author-modal-links {
-    margin-left: auto;
-}
-
-.vc-author-modal-plugins {
-    display: grid;
-    gap: 0.5em;
-    margin-top: 0.75em;
-}

src/components/PluginSettings/index.tsx

@@ -20,33 +20,36 @@ import "./styles.css";
 
 import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
-import { Settings, useSettings } from "@api/Settings";
+import { useSettings } from "@api/settings";
 import { classNameFactory } from "@api/Styles";
-import { CogWheel, InfoIcon } from "@components/Icons";
-import { openPluginModal } from "@components/PluginSettings/PluginModal";
-import { AddonCard } from "@components/VencordSettings/AddonCard";
-import { SettingsTab } from "@components/VencordSettings/shared";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Flex } from "@components/Flex";
+import { handleComponentFailed } from "@components/handleComponentFailed";
+import { Badge } from "@components/PluginSettings/components";
+import PluginModal from "@components/PluginSettings/PluginModal";
+import { Switch } from "@components/Switch";
 import { ChangeList } from "@utils/ChangeList";
-import { proxyLazy } from "@utils/lazy";
-import { Logger } from "@utils/Logger";
+import Logger from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { classes, isObjectEmpty } from "@utils/misc";
-import { useAwaiter } from "@utils/react";
+import { classes, LazyComponent, useAwaiter } from "@utils/misc";
+import { openModalLazy } from "@utils/modal";
 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 { findByCode, findByPropsLazy } from "@webpack";
+import { Alerts, Button, Card, Forms, Parser, React, Select, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
 
-import Plugins, { ExcludedPlugins } from "~plugins";
+import Plugins from "~plugins";
+
+import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
 
-// Avoid circular dependency
-const { startDependenciesRecursive, startPlugin, stopPlugin } = proxyLazy(() => require("../../plugins"));
 
 const cl = classNameFactory("vc-plugins-");
 const logger = new Logger("PluginSettings", "#a6d189");
 
-const InputStyles = findByPropsLazy("inputWrapper", "inputDefault", "error");
+const InputStyles = findByPropsLazy("inputDefault", "inputWrapper");
 const ButtonClasses = findByPropsLazy("button", "disabled", "enabled");
 
+const CogWheel = LazyComponent(() => findByCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
+const InfoIcon = LazyComponent(() => findByCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
 
 function showErrorToast(message: string) {
     Toasts.show({
@@ -68,7 +71,7 @@ function ReloadRequiredCard({ required }: { required: boolean; }) {
                     <Forms.FormText className={cl("dep-text")}>
                         Restart now to apply new plugins and their settings
                     </Forms.FormText>
-                    <Button onClick={() => location.reload()}>
+                    <Button color={Button.Colors.YELLOW} onClick={() => location.reload()}>
                         Restart
                     </Button>
                 </>
@@ -90,10 +93,18 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
     isNew?: boolean;
 }
 
-export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
-    const settings = Settings.plugins[plugin.name];
+function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
+    const settings = useSettings([`plugins.${plugin.name}.enabled`]).plugins[plugin.name];
 
-    const isEnabled = () => Vencord.Plugins.isPluginEnabled(plugin.name);
+    const isEnabled = () => settings.enabled ?? false;
+
+    function openModal() {
+        openModalLazy(async () => {
+            return modalProps => {
+                return <PluginModal {...modalProps} plugin={plugin} onRestartNeeded={() => onRestartNeeded(plugin.name)} />;
+            };
+        });
+    }
 
     function toggleEnabled() {
         const wasEnabled = isEnabled();
@@ -114,7 +125,7 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on
         }
 
         // if the plugin has patches, dont use stopPlugin/startPlugin. Wait for restart to apply changes.
-        if (plugin.patches?.length) {
+        if (plugin.patches) {
             settings.enabled = !wasEnabled;
             onRestartNeeded(plugin.name);
             return;
@@ -127,13 +138,11 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on
         }
 
         const result = wasEnabled ? stopPlugin(plugin) : startPlugin(plugin);
+        const action = wasEnabled ? "stop" : "start";
 
         if (!result) {
-            settings.enabled = false;
-
-            const msg = `Error while ${wasEnabled ? "stopping" : "starting"} plugin ${plugin.name}`;
-            logger.error(msg);
-            showErrorToast(msg);
+            logger.error(`Failed to ${action} plugin ${plugin.name}`);
+            showErrorToast(`Failed to ${action} plugin: ${plugin.name}`);
             return;
         }
 
@@ -141,69 +150,34 @@ export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, on
     }
 
     return (
-        <AddonCard
-            name={plugin.name}
-            description={plugin.description}
-            isNew={isNew}
-            enabled={isEnabled()}
-            setEnabled={toggleEnabled}
-            disabled={disabled}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-            infoButton={
-                <button
-                    role="switch"
-                    onClick={() => openPluginModal(plugin, onRestartNeeded)}
-                    className={classes(ButtonClasses.button, cl("info-button"))}
-                >
-                    {plugin.options && !isObjectEmpty(plugin.options)
+        <Flex className={cl("card", { "card-disabled": disabled })} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+            <div className={cl("card-header")}>
+                <Text variant="text-md/bold" className={cl("name")}>
+                    {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
+                </Text>
+                <button role="switch" onClick={() => openModal()} className={classes(ButtonClasses.button, cl("info-button"))}>
+                    {plugin.options
                         ? <CogWheel />
-                        : <InfoIcon />}
+                        : <InfoIcon width="24" height="24" />}
                 </button>
-            }
-        />
+                <Switch
+                    checked={isEnabled()}
+                    onChange={toggleEnabled}
+                    disabled={disabled}
+                />
+            </div>
+            <Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>
+        </Flex >
     );
 }
 
-const enum SearchStatus {
+enum SearchStatus {
     ALL,
     ENABLED,
-    DISABLED,
-    NEW
+    DISABLED
 }
 
-function ExcludedPluginsList({ search }: { search: string; }) {
-    const matchingExcludedPlugins = Object.entries(ExcludedPlugins)
-        .filter(([name]) => name.toLowerCase().includes(search));
-
-    const ExcludedReasons: Record<"web" | "discordDesktop" | "vencordDesktop" | "desktop" | "dev", string> = {
-        desktop: "Discord Desktop app or Vesktop",
-        discordDesktop: "Discord Desktop app",
-        vencordDesktop: "Vesktop app",
-        web: "Vesktop app and the Web version of Discord",
-        dev: "Developer version of Vencord"
-    };
-
-    return (
-        <Text variant="text-md/normal" className={Margins.top16}>
-            {matchingExcludedPlugins.length
-                ? <>
-                    <Forms.FormText>Are you looking for:</Forms.FormText>
-                    <ul>
-                        {matchingExcludedPlugins.map(([name, reason]) => (
-                            <li key={name}>
-                                <b>{name}</b>: Only available on the {ExcludedReasons[reason]}
-                            </li>
-                        ))}
-                    </ul>
-                </>
-                : "No plugins meet the search criteria."
-            }
-        </Text>
-    );
-}
-
-export default function PluginSettings() {
+export default ErrorBoundary.wrap(function PluginSettings() {
     const settings = useSettings();
     const changes = React.useMemo(() => new ChangeList<string>(), []);
 
@@ -241,27 +215,22 @@ export default function PluginSettings() {
         return o;
     }, []);
 
-    const sortedPlugins = useMemo(() => Object.values(Plugins)
+    const sortedPlugins = React.useMemo(() => Object.values(Plugins)
         .sort((a, b) => a.name.localeCompare(b.name)), []);
 
     const [searchValue, setSearchValue] = React.useState({ value: "", status: SearchStatus.ALL });
 
-    const search = searchValue.value.toLowerCase();
     const onSearch = (query: string) => setSearchValue(prev => ({ ...prev, value: query }));
     const onStatusChange = (status: SearchStatus) => setSearchValue(prev => ({ ...prev, status }));
 
     const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => {
-        const { status } = searchValue;
-        const enabled = Vencord.Plugins.isPluginEnabled(plugin.name);
-        if (enabled && status === SearchStatus.DISABLED) return false;
-        if (!enabled && status === SearchStatus.ENABLED) return false;
-        if (status === SearchStatus.NEW && !newPlugins?.includes(plugin.name)) return false;
-        if (!search.length) return true;
-
+        const enabled = settings.plugins[plugin.name]?.enabled;
+        if (enabled && searchValue.status === SearchStatus.DISABLED) return false;
+        if (!enabled && searchValue.status === SearchStatus.ENABLED) return false;
+        if (!searchValue.value.length) return true;
         return (
-            plugin.name.toLowerCase().includes(search) ||
-            plugin.description.toLowerCase().includes(search) ||
-            plugin.tags?.some(t => t.toLowerCase().includes(search))
+            plugin.name.toLowerCase().includes(searchValue.value.toLowerCase()) ||
+            plugin.description.toLowerCase().includes(searchValue.value.toLowerCase())
         );
     };
 
@@ -279,94 +248,86 @@ export default function PluginSettings() {
         }
         DataStore.set("Vencord_existingPlugins", existingTimestamps);
 
-        return lodash.isEqual(newPlugins, sortedPluginNames) ? [] : newPlugins;
+        return window._.isEqual(newPlugins, sortedPluginNames) ? [] : newPlugins;
     }));
 
-    const plugins = [] as JSX.Element[];
-    const requiredPlugins = [] as JSX.Element[];
+    type P = JSX.Element | JSX.Element[];
+    let plugins: P, requiredPlugins: P;
+    if (sortedPlugins?.length) {
+        plugins = [];
+        requiredPlugins = [];
 
-    const showApi = searchValue.value.includes("API");
-    for (const p of sortedPlugins) {
-        if (p.hidden || (!p.options && p.name.endsWith("API") && !showApi))
-            continue;
+        for (const p of sortedPlugins) {
+            if (!pluginFilter(p)) continue;
 
-        if (!pluginFilter(p)) continue;
+            const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
 
-        const isRequired = p.required || p.isDependency || depMap[p.name]?.some(d => settings.plugins[d].enabled);
+            if (isRequired) {
+                const tooltipText = p.required
+                    ? "This plugin is required for Vencord to function."
+                    : makeDependencyList(depMap[p.name]?.filter(d => settings.plugins[d].enabled));
 
-        if (isRequired) {
-            const tooltipText = p.required || !depMap[p.name]
-                ? "This plugin is required for Vencord to function."
-                : makeDependencyList(depMap[p.name]?.filter(d => settings.plugins[d].enabled));
+                requiredPlugins.push(
+                    <Tooltip text={tooltipText} key={p.name}>
+                        {({ onMouseLeave, onMouseEnter }) => (
+                            <PluginCard
+                                onMouseLeave={onMouseLeave}
+                                onMouseEnter={onMouseEnter}
+                                onRestartNeeded={name => changes.handleChange(name)}
+                                disabled={true}
+                                plugin={p}
+                            />
+                        )}
+                    </Tooltip>
+                );
+            } else {
+                plugins.push(
+                    <PluginCard
+                        onRestartNeeded={name => changes.handleChange(name)}
+                        disabled={false}
+                        plugin={p}
+                        isNew={newPlugins?.includes(p.name)}
+                        key={p.name}
+                    />
+                );
+            }
 
-            requiredPlugins.push(
-                <Tooltip text={tooltipText} key={p.name}>
-                    {({ onMouseLeave, onMouseEnter }) => (
-                        <PluginCard
-                            onMouseLeave={onMouseLeave}
-                            onMouseEnter={onMouseEnter}
-                            onRestartNeeded={name => changes.handleChange(name)}
-                            disabled={true}
-                            plugin={p}
-                            key={p.name}
-                        />
-                    )}
-                </Tooltip>
-            );
-        } else {
-            plugins.push(
-                <PluginCard
-                    onRestartNeeded={name => changes.handleChange(name)}
-                    disabled={false}
-                    plugin={p}
-                    isNew={newPlugins?.includes(p.name)}
-                    key={p.name}
-                />
-            );
         }
+    } else {
+        plugins = requiredPlugins = <Text variant="text-md/normal">No plugins meet search criteria.</Text>;
     }
 
     return (
-        <SettingsTab title="Plugins">
+        <Forms.FormSection className={Margins.top16}>
             <ReloadRequiredCard required={changes.hasChanges} />
 
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Filters
             </Forms.FormTitle>
 
-            <div className={classes(Margins.bottom20, cl("filter-controls"))}>
-                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} />
+            <div className={cl("filter-controls")}>
+                <TextInput autoFocus value={searchValue.value} placeholder="Search for a plugin..." onChange={onSearch} className={Margins.bottom20} />
                 <div className={InputStyles.inputWrapper}>
                     <Select
+                        className={InputStyles.inputDefault}
                         options={[
                             { label: "Show All", value: SearchStatus.ALL, default: true },
                             { label: "Show Enabled", value: SearchStatus.ENABLED },
-                            { label: "Show Disabled", value: SearchStatus.DISABLED },
-                            { label: "Show New", value: SearchStatus.NEW }
+                            { label: "Show Disabled", value: SearchStatus.DISABLED }
                         ]}
                         serialize={String}
                         select={onStatusChange}
                         isSelected={v => v === searchValue.status}
                         closeOnSelect={true}
-                        className={InputStyles.inputDefault}
                     />
                 </div>
             </div>
 
             <Forms.FormTitle className={Margins.top20}>Plugins</Forms.FormTitle>
 
-            {plugins.length || requiredPlugins.length
-                ? (
-                    <div className={cl("grid")}>
-                        {plugins.length
-                            ? plugins
-                            : <Text variant="text-md/normal">No plugins meet the search criteria.</Text>
-                        }
-                    </div>
-                )
-                : <ExcludedPluginsList search={search} />
-            }
-
+            <div className={cl("grid")}>
+                {plugins}
+            </div>
 
             <Forms.FormDivider className={Margins.top20} />
 
@@ -374,14 +335,14 @@ export default function PluginSettings() {
                 Required Plugins
             </Forms.FormTitle>
             <div className={cl("grid")}>
-                {requiredPlugins.length
-                    ? requiredPlugins
-                    : <Text variant="text-md/normal">No plugins meet the search criteria.</Text>
-                }
+                {requiredPlugins}
             </div>
-        </SettingsTab >
+        </Forms.FormSection >
     );
-}
+}, {
+    message: "Failed to render the Plugin Settings. If this persists, try using the installer to reinstall!",
+    onError: handleComponentFailed,
+});
 
 function makeDependencyList(deps: string[]) {
     return (

src/components/PluginSettings/styles.css

@@ -23,6 +23,38 @@
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
+.vc-plugins-card {
+    background-color: var(--background-secondary-alt);
+    color: var(--interactive-active);
+    border-radius: 8px;
+    display: block;
+    height: 100%;
+    padding: 12px;
+    width: 100%;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+}
+
+.vc-plugins-card-disabled {
+    opacity: 0.6;
+}
+
+.vc-plugins-card:hover {
+    background-color: var(--background-tertiary);
+    transform: translateY(-1px);
+    box-shadow: var(--elevation-high);
+}
+
+.vc-plugins-card-header {
+    margin-top: auto;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    height: 1.5rem;
+    align-items: center;
+    gap: 8px;
+}
+
 .vc-plugins-info-button {
     height: 24px;
     width: 24px;
@@ -54,6 +86,27 @@
     text-align: center;
 }
 
+.vc-plugins-note {
+    height: 36px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    /* stylelint-disable-next-line property-no-unknown */
+    box-orient: vertical;
+}
+
+.vc-plugins-name {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-grow: 1;
+    gap: 8px;
+    cursor: "default";
+}
+
 .vc-plugins-dep-name {
     margin: 0 auto;
 }
@@ -78,7 +131,6 @@
 
 .vc-plugins-restart-card button {
     margin-top: 0.5em;
-    background: var(--info-warning-foreground) !important;
 }
 
 .vc-plugins-info-button svg:not(:hover, :focus) {

src/components/VencordSettings/AddonCard.tsx

@@ -1,93 +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 "./addonCard.css";
-
-import { classNameFactory } from "@api/Styles";
-import { Badge } from "@components/Badge";
-import { Switch } from "@components/Switch";
-import { Text, useRef } from "@webpack/common";
-import type { MouseEventHandler, ReactNode } from "react";
-
-const cl = classNameFactory("vc-addon-");
-
-interface Props {
-    name: ReactNode;
-    description: ReactNode;
-    enabled: boolean;
-    setEnabled: (enabled: boolean) => void;
-    disabled?: boolean;
-    isNew?: boolean;
-    onMouseEnter?: MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: MouseEventHandler<HTMLDivElement>;
-
-    infoButton?: ReactNode;
-    footer?: ReactNode;
-    author?: ReactNode;
-}
-
-export function AddonCard({ disabled, isNew, name, infoButton, footer, author, enabled, setEnabled, description, onMouseEnter, onMouseLeave }: Props) {
-    const titleRef = useRef<HTMLDivElement>(null);
-    const titleContainerRef = useRef<HTMLDivElement>(null);
-    return (
-        <div
-            className={cl("card", { "card-disabled": disabled })}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-        >
-            <div className={cl("header")}>
-                <div className={cl("name-author")}>
-                    <Text variant="text-md/bold" className={cl("name")}>
-                        <div ref={titleContainerRef} className={cl("title-container")}>
-                            <div
-                                ref={titleRef}
-                                className={cl("title")}
-                                onMouseOver={() => {
-                                    const title = titleRef.current!;
-                                    const titleContainer = titleContainerRef.current!;
-
-                                    title.style.setProperty("--offset", `${titleContainer.clientWidth - title.scrollWidth}px`);
-                                    title.style.setProperty("--duration", `${Math.max(0.5, (title.scrollWidth - titleContainer.clientWidth) / 7)}s`);
-                                }}
-                            >
-                                {name}
-                            </div>
-                        </div>{isNew && <Badge text="NEW" color="#ED4245" />}
-                    </Text>
-                    {!!author && (
-                        <Text variant="text-md/normal" className={cl("author")}>
-                            {author}
-                        </Text>
-                    )}
-                </div>
-
-                {infoButton}
-
-                <Switch
-                    checked={enabled}
-                    onChange={setEnabled}
-                    disabled={disabled}
-                />
-            </div>
-
-            <Text className={cl("note")} variant="text-sm/normal">{description}</Text>
-
-            {footer}
-        </div>
-    );
-}

src/components/VencordSettings/BackupRestoreTab.tsx

@@ -16,17 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { downloadSettingsBackup, uploadSettingsBackup } from "@utils/settingsSync";
-import { Button, Card, Text } from "@webpack/common";
-
-import { SettingsTab, wrapTab } from "./shared";
+import { Button, Card, Forms, Text } from "@webpack/common";
 
 function BackupRestoreTab() {
     return (
-        <SettingsTab title="Backup & Restore">
+        <Forms.FormSection title="Settings Sync" className={Margins.top16}>
             <Card className={classes("vc-settings-card", "vc-backup-restore-card")}>
                 <Flex flexDirection="column">
                     <strong>Warning</strong>
@@ -60,8 +59,8 @@ function BackupRestoreTab() {
                     Export Settings
                 </Button>
             </Flex>
-        </SettingsTab>
+        </Forms.FormSection>
     );
 }
 
-export default wrapTab(BackupRestoreTab, "Backup & Restore");
+export default ErrorBoundary.wrap(BackupRestoreTab);

src/components/VencordSettings/CloudTab.tsx

@@ -17,17 +17,15 @@
 */
 
 import { showNotification } from "@api/Notifications";
-import { Settings, useSettings } from "@api/Settings";
+import { Settings, useSettings } from "@api/settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
-import { Grid } from "@components/Grid";
+import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
 import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
 import { Margins } from "@utils/margins";
 import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
 import { Alerts, Button, Forms, Switch, Tooltip } from "@webpack/common";
 
-import { SettingsTab, wrapTab } from "./shared";
-
 function validateUrl(url: string) {
     try {
         new URL(url);
@@ -40,7 +38,9 @@ function validateUrl(url: string) {
 async function eraseAllData() {
     const res = await fetch(new URL("/v1/", getCloudUrl()), {
         method: "DELETE",
-        headers: { Authorization: await getCloudAuth() }
+        headers: new Headers({
+            Authorization: await getCloudAuth()
+        })
     });
 
     if (!res.ok) {
@@ -85,10 +85,8 @@ function SettingsSyncSection() {
                 <Button
                     size={Button.Sizes.SMALL}
                     disabled={!sectionEnabled}
-                    onClick={() => putCloudSettings(true)}
-                >
-                    Sync to Cloud
-                </Button>
+                    onClick={() => putCloudSettings()}
+                >Sync to Cloud</Button>
                 <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
                     {({ onMouseLeave, onMouseEnter }) => (
                         <Button
@@ -98,9 +96,7 @@ function SettingsSyncSection() {
                             color={Button.Colors.RED}
                             disabled={!sectionEnabled}
                             onClick={() => getCloudSettings(true, true)}
-                        >
-                            Sync from Cloud
-                        </Button>
+                        >Sync from Cloud</Button>
                     )}
                 </Tooltip>
                 <Button
@@ -108,9 +104,7 @@ function SettingsSyncSection() {
                     color={Button.Colors.RED}
                     disabled={!sectionEnabled}
                     onClick={() => deleteCloudSettings()}
-                >
-                    Delete Cloud Settings
-                </Button>
+                >Delete Cloud Settings</Button>
             </div>
         </Forms.FormSection>
     );
@@ -120,7 +114,7 @@ function CloudTab() {
     const settings = useSettings(["cloud.authenticated", "cloud.url"]);
 
     return (
-        <SettingsTab title="Vencord Cloud">
+        <>
             <Forms.FormSection title="Cloud Settings" className={Margins.top16}>
                 <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
                     Vencord comes with a cloud integration that adds goodies like settings sync across devices.
@@ -131,12 +125,7 @@ function CloudTab() {
                 <Switch
                     key="backend"
                     value={settings.cloud.authenticated}
-                    onChange={v => {
-                        if (v)
-                            authorizeCloud();
-                        else
-                            settings.cloud.authenticated = v;
-                    }}
+                    onChange={v => { v && authorizeCloud(); if (!v) settings.cloud.authenticated = v; }}
                     note="This will request authorization if you have not yet set up cloud integrations."
                 >
                     Enable Cloud Integrations
@@ -148,48 +137,28 @@ function CloudTab() {
                 <CheckedTextInput
                     key="backendUrl"
                     value={settings.cloud.url}
-                    onChange={async v => {
-                        settings.cloud.url = v;
-                        settings.cloud.authenticated = false;
-                        deauthorizeCloud();
-                    }}
+                    onChange={v => { settings.cloud.url = v; settings.cloud.authenticated = false; deauthorizeCloud(); }}
                     validate={validateUrl}
                 />
-
-                <Grid columns={2} gap="1em" className={Margins.top8}>
-                    <Button
-                        size={Button.Sizes.MEDIUM}
-                        disabled={!settings.cloud.authenticated}
-                        onClick={async () => {
-                            await deauthorizeCloud();
-                            settings.cloud.authenticated = false;
-                            await authorizeCloud();
-                        }}
-                    >
-                        Reauthorise
-                    </Button>
-                    <Button
-                        size={Button.Sizes.MEDIUM}
-                        color={Button.Colors.RED}
-                        disabled={!settings.cloud.authenticated}
-                        onClick={() => Alerts.show({
-                            title: "Are you sure?",
-                            body: "Once your data is erased, we cannot recover it. There's no going back!",
-                            onConfirm: eraseAllData,
-                            confirmText: "Erase it!",
-                            confirmColor: "vc-cloud-erase-data-danger-btn",
-                            cancelText: "Nevermind"
-                        })}
-                    >
-                        Erase All Data
-                    </Button>
-                </Grid>
-
+                <Button
+                    className={Margins.top8}
+                    size={Button.Sizes.MEDIUM}
+                    color={Button.Colors.RED}
+                    disabled={!settings.cloud.authenticated}
+                    onClick={() => Alerts.show({
+                        title: "Are you sure?",
+                        body: "Once your data is erased, we cannot recover it. There's no going back!",
+                        onConfirm: eraseAllData,
+                        confirmText: "Erase it!",
+                        confirmColor: "vc-cloud-erase-data-danger-btn",
+                        cancelText: "Nevermind"
+                    })}
+                >Erase All Data</Button>
                 <Forms.FormDivider className={Margins.top16} />
             </Forms.FormSection >
             <SettingsSyncSection />
-        </SettingsTab>
+        </>
     );
 }
 
-export default wrapTab(CloudTab, "Cloud");
+export default ErrorBoundary.wrap(CloudTab);