chore(deps): add renovate.json

Co-authored-by: V <vendicated@riseup.net>
Co-authored-by: Jack Matthews <jm5112356@gmail.com>

.eslintrc.json

@@ -4,7 +4,7 @@
     "ignorePatterns": ["dist", "browser"],
     "plugins": [
         "@typescript-eslint",
-        "header",
+        "simple-header",
         "simple-import-sort",
         "unused-imports",
         "path-alias"
@@ -26,35 +26,12 @@
         // 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) 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/>.",
-                ""
-            ],
-            2
+        "simple-header/header": [
+            "error",
+            {
+                "files": ["scripts/header-new.txt", "scripts/header-old.txt"],
+                "templates": { "author": [".*", "Vendicated and contributors"] }
+            }
         ],
         "quotes": ["error", "double", { "avoidEscape": true }],
         "jsx-quotes": ["error", "prefer-double"],
@@ -62,7 +39,7 @@
         "indent": ["error", 4, { "SwitchCase": 1 }],
         "arrow-parens": ["error", "as-needed"],
         "eol-last": ["error", "always"],
-        "func-call-spacing": ["error", "never"],
+        "@typescript-eslint/func-call-spacing": ["error", "never"],
         "no-multi-spaces": "error",
         "no-trailing-spaces": "error",
         "no-whitespace-before-property": "error",
@@ -74,7 +51,10 @@
         "eqeqeq": ["error", "always", { "null": "ignore" }],
         "spaced-comment": ["error", "always", { "markers": ["!"] }],
         "yoda": "error",
-        "prefer-destructuring": ["error", { "object": true, "array": false }],
+        "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 }],
@@ -82,9 +62,13 @@
         "no-constant-condition": ["error", { "checkLoops": false }],
         "no-duplicate-imports": "error",
         "no-extra-semi": "error",
-        "consistent-return": ["warn", { "treatUndefinedAsUnspecified": true }],
         "dot-notation": "error",
-        "no-useless-escape": "error",
+        "no-useless-escape": [
+            "error",
+            {
+                "extra": "i"
+            }
+        ],
         "no-fallthrough": "error",
         "for-direction": "error",
         "no-async-promise-executor": "error",

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/FUNDING.yml

@@ -1,13 +0,0 @@
-# These are supported funding model platforms
-
-github: Vendicated
-patreon: Aliucord
-open_collective: # Replace with a single Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-otechie: # Replace with a single Otechie username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/blank.yml

@@ -0,0 +1,30 @@
+name: Blank Issue
+description: Create a blank issue. ALWAYS FIRST USE OUR SUPPORT CHANNEL! ONLY USE THIS FORM IF YOU ARE A CONTRIBUTOR OR WERE TOLD TO DO SO IN THE SUPPORT CHANNEL.
+
+body:
+  - type: markdown
+    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
+        - you are filing a security related report
+
+  - type: textarea
+    id: content
+    attributes:
+      label: Content
+    validations:
+      required: true
+
+  - type: checkboxes
+    id: agreement-check
+    attributes:
+      label: Request Agreement
+      options:
+        - label: I have read the requirements for opening an issue above
+          required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,81 @@
+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.
+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:
+      label: Discord Account
+      description: Who on Discord is making this request? Not required but encouraged for easier follow-up
+      placeholder: username#0000
+    validations:
+      required: false
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: What happens when the bug or crash occurs?
+      description: Where does this bug or crash occur, when does it occur, etc.
+      placeholder: The bug/crash happens sometimes when I do ..., causing this to not work/the app to crash. I think it happens because of ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behaviour
+    attributes:
+      label: What is the expected behaviour?
+      description: Simply detail what the expected behaviour is.
+      placeholder: I expect Vencord/Discord to open the ... page instead of ..., it prevents me from doing ...
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-take
+    attributes:
+      label: How do you recreate this bug or crash?
+      description: Give us a list of steps in order to recreate the bug or crash.
+      placeholder: |
+        1. Do ...
+        2. Then ...
+        3. Do this ..., ... and then ...
+        4. Observe "the bug" or "the crash"
+    validations:
+      required: true
+
+  - type: textarea
+    id: crash-log
+    attributes:
+      label: Errors
+      description: Open the Developer Console with Ctrl/Cmd + Shift + i. Then look for any red errors (Ignore network errors like Failed to load resource) and paste them between the "```".
+      value: |
+        ```
+        Replace this text with your crash-log.
+        ```
+    validations:
+      required: false
+
+  - type: checkboxes
+    id: agreement-check
+    attributes:
+      label: Request Agreement
+      description: We only accept reports for bugs that happen on Discord Stable. Canary and PTB are Development branches and may be unstable
+      options:
+        - label: I am using Discord Stable or tried on Stable and this bug happens there as well
+          required: true
+        - label: I have read the requirements for opening an issue above
+          required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Vencord Support Server
+    url: https://discord.gg/D9uwnFnqmd
+    about: If you need help regarding Vencord, please join our support server!
+  - name: Vencord Installer
+    url: https://github.com/Vencord/Installer
+    about: You can find the Vencord Installer here

.github/workflows/build.yml

@@ -34,31 +34,47 @@ jobs:
             - name: Build web
               run: pnpm buildWeb --standalone
 
-            - name: Sign firefox extension
-              run: |
-                pnpx web-ext sign --api-key $WEBEXT_USER --api-secret $WEBEXT_SECRET --channel=unlisted
-              env:
-                WEBEXT_USER: ${{ secrets.WEBEXT_USER }}
-                WEBEXT_SECRET: ${{ secrets.WEBEXT_SECRET }}
-
             - name: Build
               run: pnpm build --standalone
 
-            - name: Rename extensions for more user friendliness
+            - name: Generate plugin list
+              run: pnpm generatePluginJson dist/plugins.json dist/plugin-readmes.json
+
+            - name: Clean up obsolete files
               run: |
-                mv dist/*.xpi dist/Vencord-for-Firefox.xpi
-                mv dist/extension-v3.zip dist/Vencord-for-Chrome-and-Edge.zip
-                rm -rf dist/extension-v2-unpacked
+                  rm -rf dist/*-unpacked dist/monaco Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
 
             - name: Get some values needed for the release
               id: release_values
               run: |
-                echo "release_tag=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+                  echo "release_tag=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
 
-            - name: Upload Devbuild
+            - 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 clone https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git upload
+                  cd upload
+
+                  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
+              env:
+                  API_TOKEN: ${{ secrets.BUILDS_TOKEN }}
+                  GH_REPO: Vencord/builds
+                  USERNAME: GitHub-Actions

.github/workflows/codeberg-mirror.yml

@@ -0,0 +1,22 @@
+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@v3
+              with:
+                  fetch-depth: 0
+            - uses: pixta-dev/repository-mirroring-action@674e65a7d483ca28dafaacba0d07351bdcc8bd75 # v1.1.1
+              with:
+                  target_repo_url: "git@codeberg.org:Ven/cord.git"
+                  ssh_private_key: ${{ secrets.CODEBERG_SSH_PRIVATE_KEY }}

.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: Release Browser Extension
+on:
+    push:
+        tags:
+            - v*
+
+jobs:
+    Publish:
+        if: github.repository == 'Vendicated/Vencord'
+        runs-on: ubuntu-latest
+
+        steps:
+            - 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
+
+            - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
+
+            - name: Use Node.js 19
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 19
+                  cache: "pnpm"
+
+            - name: Install dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Build web
+              run: pnpm buildWeb --standalone
+
+            - name: Publish extension
+              run: |
+                  cd dist/chromium-unpacked
+                  pnpx chrome-webstore-upload-cli@2.1.0 upload --auto-publish
+              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 }}

.github/workflows/reportBrokenPlugins.yml

@@ -2,11 +2,12 @@ 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:
@@ -22,10 +23,10 @@ jobs:
 
             - name: Install dependencies
               run: |
-                pnpm install --frozen-lockfile
-                pnpm add puppeteer
+                  pnpm install --frozen-lockfile
+                  pnpm add puppeteer
 
-                sudo apt-get install -y chromium-browser
+                  sudo apt-get install -y chromium-browser
 
             - name: Build web
               run: pnpm buildWeb --standalone
@@ -33,11 +34,25 @@ jobs:
             - name: Create Report
               timeout-minutes: 10
               run: |
-                export PATH="$PWD/node_modules/.bin:$PATH"
-                export CHROMIUM_BIN=$(which chromium-browser)
+                  export PATH="$PWD/node_modules/.bin:$PATH"
+                  export CHROMIUM_BIN=$(which chromium-browser)
 
-                esbuild test/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=$(which chromium-browser)
+                  export USE_CANARY=true
+
+                  esbuild scripts/generateReport.ts > dist/report.mjs
+                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
+              env:
+                  DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
+                  DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
             - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
             - name: Use Node.js 18
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
                   cache: "pnpm"
@@ -26,5 +26,8 @@ jobs:
             - name: Lint & Test if desktop version compiles
               run: pnpm test
 
-            - name: Lint & Test if web version compiles
-              run: pnpm testWeb
+            - name: Test if web version compiles
+              run: pnpm buildWeb
+
+            - name: Test if plugin structure is valid
+              run: pnpm generatePluginJson

.gitignore

@@ -5,6 +5,7 @@ node_modules
 vencord_installer
 
 .idea
+.DS_Store
 
 yarn.lock
 package-lock.json

.stylelintrc.json

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

.vscode/extensions.json

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

.vscode/settings.json

@@ -12,5 +12,12 @@
     "javascript.format.semicolons": "insert",
     "typescript.format.semicolons": "insert",
     "typescript.preferences.quoteStyle": "double",
-    "javascript.preferences.quoteStyle": "double"
+    "javascript.preferences.quoteStyle": "double",
+
+    "gitlens.remotes": [
+        {
+            "domain": "codeberg.org",
+            "type": "Gitea"
+        }
+    ]
 }

.vscode/tasks.json

@@ -0,0 +1,25 @@
+{
+    // 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

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

CONTRIBUTING.md

@@ -65,7 +65,7 @@ Also pay attention to the following:
     -   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
+-   Additionally, as you might have noticed, all of the above approaches use regex groups (`(...)`) to capture the variable name. You can then use those groups in your replacement to access those variables dynamically
 
 #### "replace"
 

README.md

@@ -1,58 +1,65 @@
 # Vencord
 
-A Discord client mod that does things differently
+[![Codeberg Mirror](https://img.shields.io/static/v1?style=for-the-badge&label=Codeberg%20Mirror&message=codeberg.org/Ven/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/Ven/cord)
+
+The cutest Discord client mod
+
+![image](https://github.com/Vendicated/Vencord/assets/45497981/706722b1-32de-4d99-bee9-93993b504334)
 
 ## Features
 
--   Super easy to install, no git or node or anything else required
--   Many plugins built in: [See a list](https://gist.github.com/Vendicated/8696cde7b92548064a3ae92ead84d033)
-    -   Some highlights: SpotifyControls, Experiments, NoTrack, MessageLogger, QuickReply, Free Emotes/Stickers, custom slash commands, ShowHiddenChannels
--   Browser Support: Run Vencord in your Browser via extension or UserScript
+-   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
+-   Fairly lightweight despite the many inbuilt plugins
+-   Excellent Browser Support: Run Vencord in your Browser via extension or UserScript
+-   Works on any Discord branch: Stable, Canary or PTB all work (though for the best experience I recommend stable!)
 -   Custom CSS and Themes: Inbuilt css editor with support to import any css files (including BetterDiscord themes)
--   Works in all Electron versions (Confirmed working on versions 13-23)
+-   Privacy friendly, blocks Discord analytics & crash reporting out of the box and has no telemetry
+-   Maintained very actively, broken plugins are usually fixed within 12 hours
+-   Settings sync: Keep your plugins and their settings synchronised between devices / apps (optional)
+
 
 ## Installing / Uninstalling
 
-If you're just a normal user, use [our simple gui installer!](https://github.com/Vendicated/VencordInstaller#usage)
+Visit https://vencord.dev/download
 
-If you're a power user who wants to contribute and make plugins or just want to build from source and install manually, read [Megu's Installation Guide!](docs/1_INSTALLING.md)
+## Join our Support/Community Server
 
-## Installing on Browser
+https://discord.gg/D9uwnFnqmd
 
-Install the browser extension for [![Chrome](https://img.shields.io/badge/chrome-ext-brightgreen)](https://github.com/Vendicated/Vencord/releases/latest/download/Vencord-for-Chrome-and-Edge.zip), [![Firefox](https://img.shields.io/badge/firefox-ext-brightgreen)](https://github.com/Vendicated/Vencord/releases/latest/download/Vencord-for-Firefox.xpi) or [UserScript](https://github.com/Vendicated/Vencord/releases/download/devbuild/Vencord.user.js). Please note that they aren't automatically updated for now, so you will regularely have to reinstall it.
+## Sponsors
+
+| **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)* |
 
 
-You may also build them from source, to do that do the same steps as in the manual regular install method,
-except run `pnpm buildWeb` instead of `pnpm build`, and your outputs will be in the dist folder
+## Star History
 
-```sh
-pnpm buildWeb
-```
+<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>
 
-You will find the built extension at dist/extension.zip. Now just install this extension in your Browser
+## Disclaimer
 
-## Installing Plugins
+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.
 
-> **Note**
-> You can only use 3rd party plugins in the manual Vencord install for now.
+<details>
+<summary>Using Vencord violates Discord's terms of service</summary>
 
-Vencord comes with a bunch of plugins out of the box!
+Client modifications are against Discord’s Terms of Service.
 
-However, if you want to install your own ones, create a `userplugins` folder in the `src` directory and create or clone your plugins in there.
-Don't forget to rebuild!
+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!
 
-Want to learn how to create your own plugin, and maybe PR it into Vencord? See the [Contributing](#contributing) section below!
+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
 
-## Contributing
+Additionally, make sure not to post screenshots with Vencord in a server where you might get banned for it
 
-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]
+</details>

browser/GMPolyfill.js

@@ -0,0 +1,75 @@
+/*
+ * 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/>.
+*/
+
+function parseHeaders(headers) {
+    if (!headers)
+        return {};
+    const result = {};
+    const headersArr = headers.trim().split("\n");
+    for (var i = 0; i < headersArr.length; i++) {
+        var row = headersArr[i];
+        var index = row.indexOf(":")
+            , key = row.slice(0, index).trim().toLowerCase()
+            , value = row.slice(index + 1).trim();
+
+        if (result[key] === undefined) {
+            result[key] = value;
+        } else if (Array.isArray(result[key])) {
+            result[key].push(value);
+        } else {
+            result[key] = [result[key], value];
+        }
+    }
+    return result;
+}
+
+function blobTo(to, blob) {
+    if (to === "arrayBuffer" && blob.arrayBuffer) return blob.arrayBuffer();
+    return new Promise((resolve, reject) => {
+        var fileReader = new FileReader();
+        fileReader.onload = event => resolve(event.target.result);
+        if (to === "arrayBuffer") fileReader.readAsArrayBuffer(blob);
+        else if (to === "text") fileReader.readAsText(blob, "utf-8");
+        else reject("unknown to");
+    });
+}
+
+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 = new 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);
+    });
+}
+export const fetch = GM_fetch;

browser/VencordNativeStub.ts

@@ -16,51 +16,90 @@
  * 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 "~fileContent/monacoWin.html";
+import monacoHtmlCdn from "~fileContent/../src/main/monacoWin.html";
 import * as DataStore from "../src/api/DataStore";
-import IpcEvents from "../src/utils/IpcEvents";
+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";
 
 // Discord deletes this so need to store in variable
 const { localStorage } = window;
 
 // listeners for ipc.on
-const listeners = {} as Record<string, Set<Function>>;
+const cssListeners = new Set<(css: string) => void>();
+const NOOP = () => { };
+const NOOP_ASYNC = async () => { };
 
-const handlers = {
-    [IpcEvents.GET_REPO]: () => "https://github.com/Vendicated/Vencord", // shrug
-    [IpcEvents.GET_SETTINGS_DIR]: () => "LocalStorage",
+const setCssDebounced = debounce((css: string) => VencordNative.quickCss.set(css));
 
-    [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);
-}
+const themeStore = DataStore.createStore("VencordThemes", "VencordThemeData");
 
 // probably should make this less cursed at some point
 window.VencordNative = {
-    getVersions: () => ({}),
-    ipc: {
-        send: (event: string, ...args: any[]) => void onEvent(event, ...args),
-        sendSync: onEvent,
-        on(event: string, listener: () => {}) {
-            (listeners[event] ??= new Set()).add(listener);
-        },
-        off(event: string, listener: () => {}) {
-            return listeners[event]?.delete(listener);
-        },
-        invoke: (event: string, ...args: any[]) => Promise.resolve(onEvent(event, ...args))
+    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));
+        },
+        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);
+        },
+    },
+
+    settings: {
+        get: () => localStorage.getItem("VencordSettings") || "{}",
+        set: async (s: string) => localStorage.setItem("VencordSettings", s),
+        getSettingsDir: async () => "LocalStorage"
+    },
+
+    pluginHelpers: {} as any,
 };

browser/background.js

@@ -1,48 +1,32 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Linnea Gräf
- *
- * 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/>.
-*/
-
-function setContentTypeOnStylesheets(details) {
-    if (details.type === "stylesheet") {
-        details.responseHeaders = details.responseHeaders.filter(it => it.name.toLowerCase() !== 'content-type');
-        details.responseHeaders.push({ name: "Content-Type", value: "text/css" });
-    }
-    return { responseHeaders: details.responseHeaders };
+/**
+ * @template T
+ * @param {T[]} arr
+ * @param {(v: T) => boolean} predicate
+ */
+function removeFirst(arr, predicate) {
+    const idx = arr.findIndex(predicate);
+    if (idx !== -1) arr.splice(idx, 1);
 }
 
-var cspHeaders = [
-    "content-security-policy",
-    "content-security-policy-report-only",
-];
+chrome.webRequest.onHeadersReceived.addListener(
+    ({ responseHeaders, type, url }) => {
+        if (!responseHeaders) return;
 
-function removeCSPHeaders(details) {
-    return {
-        responseHeaders: details.responseHeaders.filter(header =>
-            !cspHeaders.includes(header.name.toLowerCase()))
-    };
-}
-
-
-
-
-browser.webRequest.onHeadersReceived.addListener(
-    setContentTypeOnStylesheets, { urls: ["https://raw.githubusercontent.com/*"] }, ["blocking", "responseHeaders"]
-);
-
-browser.webRequest.onHeadersReceived.addListener(
-    removeCSPHeaders, { urls: ["https://raw.githubusercontent.com/*", "*://*.discord.com/*"] }, ["blocking", "responseHeaders"]
+        if (type === "main_frame") {
+            // In main frame requests, the CSP needs to be removed to enable fetching of custom css
+            // as desired by the user
+            removeFirst(responseHeaders, h => h.name.toLowerCase() === "content-security-policy");
+        } else if (type === "stylesheet" && url.startsWith("https://raw.githubusercontent.com/")) {
+            // Most users will load css from GitHub, but GitHub doesn't set the correct content type,
+            // so we fix it here
+            removeFirst(responseHeaders, h => h.name.toLowerCase() === "content-type");
+            responseHeaders.push({
+                name: "Content-Type",
+                value: "text/css"
+            });
+        }
+        return { responseHeaders };
+    },
+    { urls: ["https://raw.githubusercontent.com/*", "*://*.discord.com/*"], types: ["main_frame", "stylesheet"] },
+    ["blocking", "responseHeaders"]
 );

browser/content.js

@@ -2,7 +2,23 @@ if (typeof browser === "undefined") {
     var browser = chrome;
 }
 
-var script = document.createElement("script");
+const script = document.createElement("script");
 script.src = browser.runtime.getURL("dist/Vencord.js");
-// documentElement because we load before body/head are ready
-document.documentElement.appendChild(script);
+script.id = "vencord-script";
+Object.assign(script.dataset, {
+    extensionBaseUrl: browser.runtime.getURL(""),
+    version: browser.runtime.getManifest().version
+});
+
+const style = document.createElement("link");
+style.type = "text/css";
+style.rel = "stylesheet";
+style.href = browser.runtime.getURL("dist/Vencord.css");
+
+document.documentElement.append(script);
+
+document.addEventListener(
+    "DOMContentLoaded",
+    () => document.documentElement.append(style),
+    { once: true }
+);

browser/manifest.json

@@ -1,10 +1,14 @@
 {
     "manifest_version": 3,
+    "minimum_chrome_version": "91",
+
     "name": "Vencord Web",
-    "description": "Yeee",
-    "version": "1.0.0",
+    "description": "The cutest Discord mod now in your browser",
     "author": "Vendicated",
     "homepage_url": "https://github.com/Vendicated/Vencord",
+    "icons": {
+        "128": "icon.png"
+    },
 
     "host_permissions": [
         "*://*.discord.com/*",
@@ -17,13 +21,14 @@
         {
             "run_at": "document_start",
             "matches": ["*://*.discord.com/*"],
-            "js": ["content.js"]
+            "js": ["content.js"],
+            "all_frames": true
         }
     ],
 
     "web_accessible_resources": [
         {
-            "resources": ["dist/Vencord.js"],
+            "resources": ["dist/*", "third-party/*"],
             "matches": ["*://*.discord.com/*"]
         }
     ],

browser/manifestv2.json

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

browser/modifyResponseHeaders.json

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

browser/monaco.ts

@@ -0,0 +1,43 @@
+/*
+ * 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

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

@@ -0,0 +1,135 @@
+/*
+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

@@ -7,7 +7,7 @@
 // @supportURL      https://github.com/Vendicated/Vencord
 // @license         GPL-3.0
 // @match           *://*.discord.com/*
-// @grant           none
+// @grant           GM_xmlhttpRequest
 // @run-at          document-start
 // @compatible      chrome Chrome + Tampermonkey or Violentmonkey
 // @compatible      firefox Firefox Tampermonkey

build.mjs

@@ -1,3 +0,0 @@
-// FIXME: Delete this soon, for now it is needed so people can update
-
-import("./scripts/build/build.mjs");

docs/1_INSTALLING.md

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

package.json

@@ -1,9 +1,8 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.0.1",
-    "description": "A Discord client mod that does things differently",
-    "keywords": [],
+    "version": "1.6.3",
+    "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
         "url": "https://github.com/Vendicated/Vencord/issues"
@@ -12,7 +11,7 @@
         "type": "git",
         "url": "git+https://github.com/Vendicated/Vencord.git"
     },
-    "license": "GPL-3.0",
+    "license": "GPL-3.0-or-later",
     "author": "Vendicated",
     "directories": {
         "doc": "docs"
@@ -20,49 +19,74 @@
     "scripts": {
         "build": "node scripts/build/build.mjs",
         "buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/buildWeb.mjs",
-        "inject": "node scripts/patcher/install.js",
-        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+        "generatePluginJson": "tsx scripts/generatePluginList.ts",
+        "inject": "node scripts/runInstaller.mjs",
+        "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 lint && pnpm build && pnpm testTsc",
+        "test": "pnpm build && pnpm lint && pnpm lint-styles && pnpm testTsc && pnpm generatePluginJson",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
         "testTsc": "tsc --noEmit",
-        "uninject": "node scripts/patcher/uninstall.js",
+        "uninject": "node scripts/runInstaller.mjs",
         "watch": "node scripts/build/build.mjs --watch"
     },
     "dependencies": {
-        "fflate": "^0.7.4"
+        "@sapphi-red/web-noise-suppressor": "0.3.3",
+        "@vap/core": "0.0.12",
+        "@vap/shiki": "0.10.5",
+        "eslint-plugin-simple-header": "^1.0.2",
+        "fflate": "^0.7.4",
+        "gifenc": "github:mattdesl/gifenc#64842fca317b112a8590f8fef2bf3825da8f6fe3",
+        "monaco-editor": "^0.43.0",
+        "nanoid": "^4.0.2",
+        "virtual-merge": "^1.0.1"
     },
     "devDependencies": {
-        "@types/diff": "^5.0.2",
-        "@types/node": "^18.11.9",
-        "@types/react": "^18.0.25",
-        "@types/react-dom": "^18.0.9",
+        "@types/chrome": "^0.0.246",
+        "@types/diff": "^5.0.3",
+        "@types/lodash": "^4.14.194",
+        "@types/node": "^18.16.3",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.1",
         "@types/yazl": "^2.4.2",
-        "@typescript-eslint/eslint-plugin": "^5.44.0",
-        "@typescript-eslint/parser": "^5.44.0",
-        "@vap/core": "0.0.12",
-        "@vap/shiki": "0.10.3",
-        "console-menu": "^0.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.59.1",
+        "@typescript-eslint/parser": "^5.59.1",
         "diff": "^5.1.0",
         "discord-types": "^1.3.26",
-        "esbuild": "^0.15.16",
-        "eslint": "^8.28.0",
+        "esbuild": "^0.15.18",
+        "eslint": "^8.46.0",
         "eslint-import-resolver-alias": "^1.1.2",
-        "eslint-plugin-header": "^3.1.1",
         "eslint-plugin-path-alias": "^1.0.0",
-        "eslint-plugin-simple-import-sort": "^8.0.0",
+        "eslint-plugin-simple-import-sort": "^10.0.0",
         "eslint-plugin-unused-imports": "^2.0.0",
         "highlight.js": "10.6.0",
         "moment": "^2.29.4",
-        "puppeteer-core": "^19.3.0",
+        "puppeteer-core": "^19.11.1",
         "standalone-electron-types": "^1.0.0",
-        "type-fest": "^3.3.0",
-        "typescript": "^4.9.3"
+        "stylelint": "^15.6.0",
+        "stylelint-config-standard": "^33.0.0",
+        "tsx": "^3.12.7",
+        "type-fest": "^3.9.0",
+        "typescript": "^5.0.4",
+        "zip-local": "^0.3.5"
     },
-    "packageManager": "pnpm@7.13.4",
+    "packageManager": "pnpm@8.10.2",
     "pnpm": {
         "patchedDependencies": {
-            "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch"
+            "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
+            "eslint@8.46.0": "patches/eslint@8.46.0.patch"
+        },
+        "peerDependencyRules": {
+            "ignoreMissing": [
+                "eslint-plugin-import",
+                "eslint"
+            ]
+        },
+        "allowedDeprecatedVersions": {
+            "source-map-resolve": "*",
+            "resolve-url": "*",
+            "source-map-url": "*",
+            "urix": "*"
         }
     },
     "webExt": {
@@ -70,6 +94,10 @@
         "build": {
             "overwriteDest": true
         },
-        "sourceDir": "./dist/extension-v2-unpacked"
+        "sourceDir": "./dist/firefox-unpacked"
+    },
+    "engines": {
+        "node": ">=18",
+        "pnpm": ">=8"
     }
 }

patches/eslint@8.46.0.patch

@@ -0,0 +1,49 @@
+diff --git a/lib/rules/no-useless-escape.js b/lib/rules/no-useless-escape.js
+index 0e0f6f09f2c35f3276173c08f832cde9f2cf56a0..7dc22851715f3574d935f513c1b5e35552985711 100644
+--- a/lib/rules/no-useless-escape.js
++++ b/lib/rules/no-useless-escape.js
+@@ -65,13 +65,31 @@ module.exports = {
+             escapeBackslash: "Replace the `\\` with `\\\\` to include the actual backslash character."
+         },
+
+-        schema: []
++        schema: [{
++            type: "object",
++            properties: {
++                extra: {
++                    type: "string",
++                    default: ""
++                },
++                extraCharClass: {
++                    type: "string",
++                    default: ""
++                },
++            },
++            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));
++
+         /**
+          * 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;

renovate.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+    "extends": [
+        "local>Fascinated/renovate-config"
+    ]
+}

scripts/build/build.mjs

@@ -18,12 +18,19 @@
 */
 
 import esbuild from "esbuild";
+import { readdir } from "fs/promises";
+import { join } from "path";
 
-import { commonOpts, globPlugins, isStandalone, watch } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, existsAsync, globPlugins, isStandalone, updaterDisabled, VERSION, watch } from "./common.mjs";
 
 const defines = {
     IS_STANDALONE: isStandalone,
-    IS_DEV: JSON.stringify(watch)
+    IS_DEV: JSON.stringify(watch),
+    IS_UPDATER_DISABLED: updaterDisabled,
+    IS_WEB: false,
+    IS_EXTENSION: false,
+    VERSION: JSON.stringify(VERSION),
+    BUILD_TIMESTAMP,
 };
 if (defines.IS_STANDALONE === "false")
     // If this is a local build (not standalone), optimise
@@ -38,29 +45,76 @@ const nodeCommonOpts = {
     format: "cjs",
     platform: "node",
     target: ["esnext"],
-    minify: true,
-    bundle: true,
-    external: ["electron", ...commonOpts.external],
+    external: ["electron", "original-fs", "~pluginNatives", ...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 existsAsync(dirPath)) continue;
+                const plugins = await readdir(dirPath);
+                for (const p of plugins) {
+                    if (!await existsAsync(join(dirPath, p, "native.ts"))) continue;
+
+                    const nameParts = p.split(".");
+                    const namePartsWithoutTarget = nameParts.length === 1 ? nameParts : nameParts.slice(0, -1);
+                    // pluginName.thing.desktop -> PluginName.thing
+                    const cleanPluginName = p[0].toUpperCase() + namePartsWithoutTarget.join(".").slice(1);
+
+                    const mod = `p${i}`;
+                    code += `import * as ${mod} from "./${dir}/${p}/native";\n`;
+                    natives += `${JSON.stringify(cleanPluginName)}:${mod},\n`;
+                    i++;
+                }
+            }
+            code += `export default {${natives}};`;
+            return {
+                contents: code,
+                resolveDir: "./src"
+            };
+        });
+    }
+};
+
 await Promise.all([
+    // Discord Desktop main & renderer & preload
     esbuild.build({
         ...nodeCommonOpts,
-        entryPoints: ["src/preload.ts"],
-        outfile: "dist/preload.js",
-        footer: { js: "//# sourceURL=VencordPreload\n" + sourceMapFooter("preload") },
-        sourcemap,
-    }),
-    esbuild.build({
-        ...nodeCommonOpts,
-        entryPoints: ["src/patcher.ts"],
+        entryPoints: ["src/main/index.ts"],
         outfile: "dist/patcher.js",
         footer: { js: "//# sourceURL=VencordPatcher\n" + sourceMapFooter("patcher") },
         sourcemap,
+        define: {
+            ...defines,
+            IS_DISCORD_DESKTOP: true,
+            IS_VESKTOP: false
+        },
+        plugins: [
+            ...nodeCommonOpts.plugins,
+            globNativesPlugin
+        ]
     }),
     esbuild.build({
         ...commonOpts,
@@ -72,12 +126,74 @@ await Promise.all([
         globalName: "Vencord",
         sourcemap,
         plugins: [
-            globPlugins,
+            globPlugins("discordDesktop"),
             ...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
+        }
+    }),
+
+    // Vencord Desktop main & renderer & preload
+    esbuild.build({
+        ...nodeCommonOpts,
+        entryPoints: ["src/main/index.ts"],
+        outfile: "dist/vencordDesktopMain.js",
+        footer: { js: "//# sourceURL=VencordDesktopMain\n" + sourceMapFooter("vencordDesktopMain") },
+        sourcemap,
+        define: {
+            ...defines,
+            IS_DISCORD_DESKTOP: false,
+            IS_VESKTOP: true
+        },
+        plugins: [
+            ...nodeCommonOpts.plugins,
+            globNativesPlugin
+        ]
+    }),
+    esbuild.build({
+        ...commonOpts,
+        entryPoints: ["src/Vencord.ts"],
+        outfile: "dist/vencordDesktopRenderer.js",
+        format: "iife",
+        target: ["esnext"],
+        footer: { js: "//# sourceURL=VencordDesktopRenderer\n" + sourceMapFooter("vencordDesktopRenderer") },
+        globalName: "Vencord",
+        sourcemap,
+        plugins: [
+            globPlugins("vencordDesktop"),
+            ...commonOpts.plugins
+        ],
+        define: {
+            ...defines,
+            IS_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
         }
     }),
 ]).catch(err => {

scripts/build/buildWeb.mjs

@@ -17,16 +17,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-
 import esbuild from "esbuild";
-import { zip } from "fflate";
-import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
-import { readFile } from "fs/promises";
-import { join, resolve } from "path";
+import { readFileSync } from "fs";
+import { appendFile, mkdir, readdir, readFile, rm, writeFile } from "fs/promises";
+import { join } from "path";
+import Zip from "zip-local";
 
-// wtf is this assert syntax
-import PackageJSON from "../../package.json" assert { type: "json" };
-import { commonOpts, fileIncludePlugin, gitHashPlugin, gitRemotePlugin, globPlugins, watch } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, globPlugins, VERSION, watch } from "./common.mjs";
 
 /**
  * @type {esbuild.BuildOptions}
@@ -36,23 +33,57 @@ const commonOptions = {
     entryPoints: ["browser/Vencord.ts"],
     globalName: "Vencord",
     format: "iife",
-    external: ["plugins", "git-hash"],
+    external: ["plugins", "git-hash", "/assets/*"],
     plugins: [
-        globPlugins,
-        gitHashPlugin,
-        gitRemotePlugin,
-        fileIncludePlugin
+        globPlugins("web"),
+        ...commonOpts.plugins,
     ],
     target: ["esnext"],
     define: {
         IS_WEB: "true",
+        IS_EXTENSION: "false",
         IS_STANDALONE: "true",
-        IS_DEV: JSON.stringify(watch)
+        IS_DEV: JSON.stringify(watch),
+        IS_DISCORD_DESKTOP: "false",
+        IS_VESKTOP: "false",
+        IS_UPDATER_DISABLED: "true",
+        VERSION: JSON.stringify(VERSION),
+        BUILD_TIMESTAMP,
     }
 };
 
+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",
@@ -60,51 +91,115 @@ await Promise.all(
         }),
         esbuild.build({
             ...commonOptions,
+            outfile: "dist/extension.js",
+            define: {
+                ...commonOptions?.define,
+                IS_EXTENSION: "true",
+            },
+            footer: { js: "//# sourceURL=VencordWeb" },
+        }),
+        esbuild.build({
+            ...commonOptions,
+            inject: ["browser/GMPolyfill.js", ...(commonOptions?.inject || [])],
+            define: {
+                ...(commonOptions?.define),
+                window: "unsafeWindow",
+            },
             outfile: "dist/Vencord.user.js",
             banner: {
-                js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", `${PackageJSON.version}.${new Date().getTime()}`)
+                js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", `${VERSION}.${new Date().getTime()}`)
             },
             footer: {
                 // UserScripts get wrapped in an iife, so define Vencord prop on window that returns our local
-                js: "Object.defineProperty(window,'Vencord',{get:()=>Vencord});"
+                js: "Object.defineProperty(unsafeWindow,'Vencord',{get:()=>Vencord});"
             },
         })
     ]
 );
 
-async function buildPluginZip(target, files, shouldZip) {
-    const entries = {
-        "dist/Vencord.js": readFileSync("dist/browser.js"),
-        ...Object.fromEntries(await Promise.all(files.map(async f => [
-            (f.startsWith("manifest") ? "manifest.json" : f),
-            await readFile(join("browser", f))
-        ]))),
-    };
+/**
+ * @type {(dir: string) => Promise<string[]>}
+ */
+async function globDir(dir) {
+    const files = [];
 
-    if (shouldZip) {
-        zip(entries, {}, (err, data) => {
-            if (err) {
-                console.error(err);
-                process.exitCode = 1;
-            } else {
-                writeFileSync("dist/" + target, data);
-                console.info("Extension written to dist/" + target);
-            }
-        });
-    } else {
-        if (existsSync(target))
-            rmSync(target, { recursive: true });
-        for (const entry in entries) {
-            const destination = "dist/" + target + "/" + entry;
-            const parentDirectory = resolve(destination, "..");
-            mkdirSync(parentDirectory, { recursive: true });
-            writeFileSync(destination, entries[entry]);
-        }
-        console.info("Unpacked Extension written to dist/" + target);
+    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;
 }
 
-await buildPluginZip("extension-v3.zip", ["modifyResponseHeaders.json", "content.js", "manifestv3.json"], true);
-await buildPluginZip("extension-v2.zip", ["background.js", "content.js", "manifestv2.json"], true);
-await buildPluginZip("extension-v2-unpacked", ["background.js", "content.js", "manifestv2.json"], false);
+/**
+ * @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) {
+    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}`)]
+        ))),
+        ...Object.fromEntries(await Promise.all(files.map(async f => {
+            let content = await readFile(join("browser", f));
+            if (f.startsWith("manifest")) {
+                const json = JSON.parse(content.toString("utf-8"));
+                json.version = VERSION;
+                content = new TextEncoder().encode(JSON.stringify(json));
+            }
+
+            return [
+                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);
+    }));
+
+    console.info("Unpacked Extension written to dist/" + target);
+}
+
+const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content => {
+    const cssRuntime = `
+;document.addEventListener("DOMContentLoaded", () => document.documentElement.appendChild(
+    Object.assign(document.createElement("style"), {
+        textContent: \`${content.replaceAll("`", "\\`")}\`,
+        id: "vencord-css-core"
+    })
+), { once: true });
+`;
+
+    return appendFile("dist/Vencord.user.js", cssRuntime);
+});
+
+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"]),
+]);
+
+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");

scripts/build/common.mjs

@@ -16,26 +16,46 @@
  * 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 { existsSync } from "fs";
-import { readdir, readFile } from "fs/promises";
-import { join } from "path";
+import { constants as FsConstants, readFileSync } from "fs";
+import { access, readdir, readFile } from "fs/promises";
+import { join, relative } from "path";
 import { promisify } from "util";
 
+// wtf is this assert syntax
+import PackageJSON from "../../package.json" assert { type: "json" };
+import { getPluginTarget } from "../utils.mjs";
+
+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 isStandalone = JSON.stringify(process.argv.includes("--standalone"));
-export const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
+export const updaterDisabled = JSON.stringify(process.argv.includes("--disable-updater"));
+export const gitHash = process.env.VENCORD_HASH || execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
 export const banner = {
     js: `
 // Vencord ${gitHash}
 // Standalone: ${isStandalone}
 // Platform: ${isStandalone === "false" ? process.platform : "Universal"}
+// Updater disabled: ${updaterDisabled}
 `.trim()
 };
 
+const isWeb = process.argv.slice(0, 2).some(f => f.endsWith("buildWeb.mjs"));
+
+export function existsAsync(path) {
+    return access(path, FsConstants.F_OK)
+        .then(() => true)
+        .catch(() => false);
+}
+
 // https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
 /**
- * @type {esbuild.Plugin}
+ * @type {import("esbuild").Plugin}
  */
 export const makeAllPackagesExternalPlugin = {
     name: "make-all-packages-external",
@@ -46,9 +66,9 @@ export const makeAllPackagesExternalPlugin = {
 };
 
 /**
- * @type {esbuild.Plugin}
+ * @type {(kind: "web" | "discordDesktop" | "vencordDesktop") => import("esbuild").Plugin}
  */
-export const globPlugins = {
+export const globPlugins = kind => ({
     name: "glob-plugins",
     setup: build => {
         const filter = /^~plugins$/;
@@ -60,19 +80,28 @@ export const globPlugins = {
         });
 
         build.onLoad({ filter, namespace: "import-plugins" }, async () => {
-            const pluginDirs = ["plugins", "userplugins"];
+            const pluginDirs = ["plugins/_api", "plugins/_core", "plugins", "userplugins"];
             let code = "";
             let plugins = "\n";
             let i = 0;
             for (const dir of pluginDirs) {
-                if (!existsSync(`./src/${dir}`)) continue;
+                if (!await existsAsync(`./src/${dir}`)) continue;
                 const files = await readdir(`./src/${dir}`);
                 for (const file of files) {
-                    if (file === "index.ts") {
-                        continue;
+                    if (file.startsWith("_") || file.startsWith(".")) continue;
+                    if (file === "index.ts") continue;
+
+                    const target = getPluginTarget(file);
+                    if (target) {
+                        if (target === "dev" && !watch) continue;
+                        if (target === "web" && kind === "discordDesktop") continue;
+                        if (target === "desktop" && kind === "web") continue;
+                        if (target === "discordDesktop" && kind !== "discordDesktop") continue;
+                        if (target === "vencordDesktop" && kind !== "vencordDesktop") continue;
                     }
+
                     const mod = `p${i}`;
-                    code += `import ${mod} from "./${dir}/${file.replace(/.tsx?$/, "")}";\n`;
+                    code += `import ${mod} from "./${dir}/${file.replace(/\.tsx?$/, "")}";\n`;
                     plugins += `[${mod}.name]:${mod},\n`;
                     i++;
                 }
@@ -84,10 +113,10 @@ export const globPlugins = {
             };
         });
     }
-};
+});
 
 /**
- * @type {esbuild.Plugin}
+ * @type {import("esbuild").Plugin}
  */
 export const gitHashPlugin = {
     name: "git-hash-plugin",
@@ -103,7 +132,7 @@ export const gitHashPlugin = {
 };
 
 /**
- * @type {esbuild.Plugin}
+ * @type {import("esbuild").Plugin}
  */
 export const gitRemotePlugin = {
     name: "git-remote-plugin",
@@ -113,11 +142,14 @@ export const gitRemotePlugin = {
             namespace: "git-remote", path: args.path
         }));
         build.onLoad({ filter, namespace: "git-remote" }, async () => {
-            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$/, "");
+            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$/, "");
+            }
 
             return { contents: `export default "${remote}"` };
         });
@@ -125,7 +157,7 @@ export const gitRemotePlugin = {
 };
 
 /**
- * @type {esbuild.Plugin}
+ * @type {import("esbuild").Plugin}
  */
 export const fileIncludePlugin = {
     name: "file-include-plugin",
@@ -147,6 +179,31 @@ export const fileIncludePlugin = {
     }
 };
 
+const styleModule = readFileSync("./scripts/build/module/style.js", "utf-8");
+/**
+ * @type {import("esbuild").Plugin}
+ */
+export const stylePlugin = {
+    name: "style-plugin",
+    setup: ({ onResolve, onLoad }) => {
+        onResolve({ filter: /\.css\?managed$/, namespace: "file" }, ({ path, resolveDir }) => ({
+            path: relative(process.cwd(), join(resolveDir, path.replace("?managed", ""))),
+            namespace: "managed-style",
+        }));
+        onLoad({ filter: /\.css$/, namespace: "managed-style" }, async ({ path }) => {
+            const css = await readFile(path, "utf-8");
+            const name = relative(process.cwd(), path).replaceAll("\\", "/");
+
+            return {
+                loader: "js",
+                contents: styleModule
+                    .replaceAll("STYLE_SOURCE", JSON.stringify(css))
+                    .replaceAll("STYLE_NAME", JSON.stringify(name))
+            };
+        });
+    }
+};
+
 /**
  * @type {import("esbuild").BuildOptions}
  */
@@ -158,8 +215,8 @@ export const commonOpts = {
     sourcemap: watch ? "inline" : "",
     legalComments: "linked",
     banner,
-    plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin],
-    external: ["~plugins", "~git-hash", "~git-remote"],
+    plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
+    external: ["~plugins", "~git-hash", "~git-remote", "/assets/*"],
     inject: ["./scripts/build/inject/react.mjs"],
     jsxFactory: "VencordCreateElement",
     jsxFragment: "VencordFragment",

scripts/build/inject/react.mjs

@@ -16,6 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export const VencordFragment = Symbol.for("react.fragment");
+export const VencordFragment = /* #__PURE__*/ Symbol.for("react.fragment");
 export let VencordCreateElement =
     (...args) => (VencordCreateElement = Vencord.Webpack.Common.React.createElement)(...args);

scripts/build/module/style.js

@@ -16,6 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export { default as PatchHelper } from "./PatchHelper";
-export { default as PluginSettings } from "./PluginSettings";
-export { default as VencordSettings } from "./VencordSettings";
+(window.VencordStyles ??= new Map()).set(STYLE_NAME, {
+    name: STYLE_NAME,
+    source: STYLE_SOURCE,
+    classNames: {},
+    dom: null,
+});
+
+export default STYLE_NAME;

scripts/checkNodeVersion.js

@@ -0,0 +1,20 @@
+/*
+ * 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/>.
+*/
+
+if (Number(process.versions.node.split(".")[0]) < 18)
+    throw `Your node version (${process.version}) is too old, please update to v18 or higher https://nodejs.org/en/download/`;

scripts/genPluginList.js

@@ -1,62 +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/>.
-*/
-
-// 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

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

scripts/generateReport.ts

@@ -31,13 +31,15 @@ for (const variable of ["DISCORD_TOKEN", "CHROMIUM_BIN"]) {
     }
 }
 
+const CANARY = process.env.USE_CANARY === "true";
+
 const browser = await pup.launch({
     headless: true,
     executablePath: process.env.CHROMIUM_BIN
 });
 
 const page = await browser.newPage();
-await page.setUserAgent("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36");
+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");
 
 function maybeGetError(handle: JSHandle) {
     return (handle as JSHandle<Error>)?.getProperty("message")
@@ -59,13 +61,20 @@ const report = {
     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 '/
+] as Array<string | RegExp>;
+
 function toCodeBlock(s: string) {
     s = s.replace(/```/g, "`\u200B`\u200B`");
     return "```" + s + " ```";
 }
 
 async function printReport() {
-    console.log("# Vencord Report");
+    console.log("# Vencord Report" + (CANARY ? " (Canary)" : ""));
     console.log();
 
     console.log("## Bad Patches");
@@ -84,6 +93,8 @@ async function printReport() {
         console.log(`  - Error: ${toCodeBlock(p.error)}`);
     });
 
+    report.otherErrors = report.otherErrors.filter(e => !IGNORED_DISCORD_ERRORS.some(regex => e.match(regex)));
+
     console.log("## Discord Errors");
     report.otherErrors.forEach(e => {
         console.log(`- ${toCodeBlock(e)}`);
@@ -98,7 +109,7 @@ async function printReport() {
             },
             body: JSON.stringify({
                 description: "Here's the latest Vencord Report!",
-                username: "Vencord Reporter",
+                username: "Vencord Reporter" + (CANARY ? " (Canary)" : ""),
                 avatar_url: "https://cdn.discordapp.com/icons/1015060230222131221/f0204a918c6c9c9a43195997e97d8adf.webp",
                 embeds: [
                     {
@@ -128,7 +139,7 @@ async function printReport() {
                     },
                     {
                         title: "Discord Errors",
-                        description: toCodeBlock(report.otherErrors.join("\n")),
+                        description: report.otherErrors.length ? toCodeBlock(report.otherErrors.join("\n")) : "None",
                         color: report.otherErrors.length ? 0xff0000 : 0x00ff00
                     }
                 ]
@@ -169,7 +180,7 @@ page.on("console", async e => {
                     plugin,
                     type,
                     id,
-                    match: regex,
+                    match: regex.replace(/\[A-Za-z_\$\]\[\\w\$\]\*/g, "\\i"),
                     error: cause
                 });
                 break;
@@ -184,8 +195,21 @@ page.on("console", async e => {
     } else if (isDebug) {
         console.error(e.text());
     } else if (level === "error") {
-        console.error("Got unexpected error", e.text());
-        report.otherErrors.push(e.text());
+        const text = 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(" ").trim());
+
+
+        if (text.length && !text.startsWith("Failed to load resource: the server responded with a status of")) {
+            console.error("Got unexpected error", text);
+            report.otherErrors.push(text);
+        }
     }
 });
 
@@ -207,6 +231,7 @@ function runTime(token: string) {
 
 
         // Monkey patch Logger to not log with custom css
+        // @ts-ignore
         Vencord.Util.Logger.prototype._log = function (level, levelColor, args) {
             if (level === "warn" || level === "error")
                 console[level]("[Vencord]", this.name + ":", ...args);
@@ -215,7 +240,10 @@ function runTime(token: string) {
         // force enable all plugins and patches
         Vencord.Plugins.patches.length = 0;
         Object.values(Vencord.Plugins.plugins).forEach(p => {
-            p.required = true;
+            // Needs native server to run
+            if (p.name === "WebRichPresence (arRPC)") return;
+
+            Vencord.Settings.plugins[p.name].enabled = true;
             p.patches?.forEach(patch => {
                 patch.plugin = p.name;
                 delete patch.predicate;
@@ -240,14 +268,16 @@ function runTime(token: string) {
             const { wreq } = Vencord.Webpack;
 
             console.error("[PUP_DEBUG]", "Loading all chunks...");
-            const ids = Function("return" + wreq.u.toString().match(/\{.+\}/s)![0])();
+            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"));
+                    .then(t => t.includes(".module.wasm") || !t.includes("(this.webpackChunkdiscord_app=this.webpackChunkdiscord_app||[]).push"));
 
                 if (!isWasm)
                     await wreq.e(id as any);
+
+                await new Promise(r => setTimeout(r, 150));
             }
             console.error("[PUP_DEBUG]", "Finished loading chunks!");
 
@@ -259,7 +289,7 @@ function runTime(token: string) {
             setTimeout(() => console.log("PUPPETEER_TEST_DONE_SIGNAL"), 1000);
         }, 1000));
     } catch (e) {
-        console.error("[PUP_DEBUG]", "A fatal error occured");
+        console.error("[PUP_DEBUG]", "A fatal error occurred");
         console.error("[PUP_DEBUG]", e);
         process.exit(1);
     }
@@ -271,4 +301,4 @@ await page.evaluateOnNewDocument(`
     ;(${runTime.toString()})(${JSON.stringify(process.env.DISCORD_TOKEN)});
 `);
 
-await page.goto("https://discord.com/login");
+await page.goto(CANARY ? "https://canary.discord.com/login" : "https://discord.com/login");

scripts/header-new.txt

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

scripts/header-old.txt

@@ -0,0 +1,17 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) {year} {author}
+ *
+ * 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/>.
+*/

scripts/patcher/common.js

@@ -1,342 +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/>.
-*/
-
-const path = require("path");
-const readline = require("readline");
-const fs = require("fs");
-const menu = require("console-menu");
-
-const BRANCH_NAMES = [
-    "Discord",
-    "DiscordPTB",
-    "DiscordCanary",
-    "DiscordDevelopment",
-    "discord",
-    "discordptb",
-    "discordcanary",
-    "discorddevelopment",
-    "discord-ptb",
-    "discord-canary",
-    "discord-development",
-    // Flatpak
-    "com.discordapp.Discord",
-    "com.discordapp.DiscordPTB",
-    "com.discordapp.DiscordCanary",
-    "com.discordapp.DiscordDevelopment",
-];
-
-const MACOS_DISCORD_DIRS = [
-    "Discord.app",
-    "Discord PTB.app",
-    "Discord Canary.app",
-    "Discord Development.app",
-];
-
-if (process.platform === "linux" && process.env.SUDO_USER) {
-    process.env.HOME = fs
-        .readFileSync("/etc/passwd", "utf-8")
-        .match(new RegExp(`^${process.env.SUDO_USER}.+$`, "m"))[0]
-        .split(":")[5];
-}
-
-const LINUX_DISCORD_DIRS = [
-    "/usr/share",
-    "/usr/lib64",
-    "/opt",
-    `${process.env.HOME}/.local/share`,
-    `${process.env.HOME}/.dvm`,
-    "/var/lib/flatpak/app",
-    `${process.env.HOME}/.local/share/flatpak/app`,
-];
-
-const FLATPAK_NAME_MAPPING = {
-    DiscordCanary: "discord-canary",
-    DiscordPTB: "discord-ptb",
-    DiscordDevelopment: "discord-development",
-    Discord: "discord",
-};
-
-const ENTRYPOINT = path
-    .join(process.cwd(), "dist", "patcher.js")
-    .replace(/\\/g, "/");
-
-function question(question) {
-    const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-        terminal: false,
-    });
-
-    return new Promise(resolve => {
-        rl.question(question, answer => {
-            rl.close();
-            resolve(answer);
-        });
-    });
-}
-
-async function getMenuItem(installations) {
-    const menuItems = installations.map(info => ({
-        title: info.patched ? "[MODIFIED] " + info.location : info.location,
-        info,
-    }));
-
-    const result = await menu(
-        [
-            ...menuItems,
-            { title: "Specify custom path", info: "custom" },
-            { title: "Exit without patching", exit: true }
-        ],
-        {
-            header: "Select a Discord installation to patch:",
-            border: true,
-            helpMessage:
-                "Use the up/down arrow keys to select an option. " +
-                "Press ENTER to confirm.",
-        }
-    );
-
-    if (!result || !result.info || result.exit) {
-        console.log("No installation selected.");
-        process.exit(0);
-    }
-
-    if (result.info === "custom") {
-        const customPath = await question("Please enter the path: ");
-        if (!customPath || !fs.existsSync(customPath)) {
-            console.log("No such Path or not specifed.");
-            process.exit();
-        }
-
-        const resourceDir = path.join(customPath, "resources");
-        if (!fs.existsSync(path.join(resourceDir, "app.asar"))) {
-            console.log("Unsupported Install. resources/app.asar not found");
-            process.exit();
-        }
-
-        const appDir = path.join(resourceDir, "app");
-        result.info = {
-            branch: "unknown",
-            patched: fs.existsSync(appDir),
-            location: customPath,
-            versions: [{
-                path: appDir,
-                name: null
-            }],
-            arch: process.platform === "linux" ? "linux" : "win32",
-            isFlatpak: false,
-        };
-    }
-
-    if (result.info.patched) {
-        const answer = await question(
-            "This installation has already been modified. Overwrite? [Y/n]: "
-        );
-
-        if (!["y", "yes", "yeah", ""].includes(answer.toLowerCase())) {
-            console.log("Not patching.");
-            process.exit(0);
-        }
-    }
-
-    return result.info;
-}
-
-function getWindowsDirs() {
-    const dirs = [];
-    for (const dir of fs.readdirSync(process.env.LOCALAPPDATA)) {
-        if (!BRANCH_NAMES.includes(dir)) continue;
-
-        const location = path.join(process.env.LOCALAPPDATA, dir);
-        if (!fs.statSync(location).isDirectory()) continue;
-
-        const appDirs = fs
-            .readdirSync(location, { withFileTypes: true })
-            .filter(file => file.isDirectory())
-            .filter(file => file.name.startsWith("app-"))
-            .map(file => path.join(location, file.name));
-
-        const versions = [];
-        let patched = false;
-
-        for (const fqAppDir of appDirs) {
-            const resourceDir = path.join(fqAppDir, "resources");
-            if (!fs.existsSync(path.join(resourceDir, "app.asar"))) {
-                continue;
-            }
-            const appDir = path.join(resourceDir, "app");
-            if (fs.existsSync(appDir)) {
-                patched = true;
-            }
-            versions.push({
-                path: appDir,
-                name: /app-([0-9.]+)/.exec(fqAppDir)[1],
-            });
-        }
-
-        if (appDirs.length) {
-            dirs.push({
-                branch: dir,
-                patched,
-                location,
-                versions,
-                arch: "win32",
-                flatpak: false,
-            });
-        }
-    }
-    return dirs;
-}
-
-function getDarwinDirs() {
-    const dirs = [];
-    for (const dir of fs.readdirSync("/Applications")) {
-        if (!MACOS_DISCORD_DIRS.includes(dir)) continue;
-
-        const location = path.join("/Applications", dir, "Contents");
-        if (!fs.existsSync(location)) continue;
-        if (!fs.statSync(location).isDirectory()) continue;
-
-        const appDirs = fs
-            .readdirSync(location, { withFileTypes: true })
-            .filter(file => file.isDirectory())
-            .filter(file => file.name.startsWith("Resources"))
-            .map(file => path.join(location, file.name));
-
-        const versions = [];
-        let patched = false;
-
-        for (const resourceDir of appDirs) {
-            if (!fs.existsSync(path.join(resourceDir, "app.asar"))) {
-                continue;
-            }
-            const appDir = path.join(resourceDir, "app");
-            if (fs.existsSync(appDir)) {
-                patched = true;
-            }
-
-            versions.push({
-                path: appDir,
-                name: null, // MacOS installs have no version number
-            });
-        }
-
-        if (appDirs.length) {
-            dirs.push({
-                branch: dir,
-                patched,
-                location,
-                versions,
-                arch: "win32",
-            });
-        }
-    }
-    return dirs;
-}
-
-function getLinuxDirs() {
-    const dirs = [];
-    for (const dir of LINUX_DISCORD_DIRS) {
-        if (!fs.existsSync(dir)) continue;
-        for (const branch of fs.readdirSync(dir)) {
-            if (!BRANCH_NAMES.includes(branch)) continue;
-
-            const location = path.join(dir, branch);
-            if (!fs.statSync(location).isDirectory()) continue;
-
-            const isFlatpak = location.includes("/flatpak/");
-
-            let appDirs = [];
-
-            if (isFlatpak) {
-                const fqDir = path.join(location, "current", "active", "files");
-                if (!/com\.discordapp\.(\w+)\//.test(fqDir)) continue;
-                const branchName = /com\.discordapp\.(\w+)\//.exec(fqDir)[1];
-                if (!Object.keys(FLATPAK_NAME_MAPPING).includes(branchName)) {
-                    continue;
-                }
-                const appDir = path.join(
-                    fqDir,
-                    FLATPAK_NAME_MAPPING[branchName]
-                );
-
-                if (!fs.existsSync(appDir)) continue;
-                if (!fs.statSync(appDir).isDirectory()) continue;
-
-                const resourceDir = path.join(appDir, "resources");
-
-                appDirs.push(resourceDir);
-            } else {
-                appDirs = fs
-                    .readdirSync(location, { withFileTypes: true })
-                    .filter(file => file.isDirectory())
-                    .filter(
-                        file =>
-                            file.name.startsWith("app-") ||
-                            file.name === "resources"
-                    )
-                    .map(file => path.join(location, file.name));
-            }
-
-            const versions = [];
-            let patched = false;
-
-            for (const resourceDir of appDirs) {
-                if (!fs.existsSync(path.join(resourceDir, "app.asar"))) {
-                    continue;
-                }
-                const appDir = path.join(resourceDir, "app");
-                if (fs.existsSync(appDir)) {
-                    patched = true;
-                }
-
-                const version = /app-([0-9.]+)/.exec(resourceDir);
-
-                versions.push({
-                    path: appDir,
-                    name: version && version.length > 1 ? version[1] : null,
-                });
-            }
-
-            if (appDirs.length) {
-                dirs.push({
-                    branch,
-                    patched,
-                    location,
-                    versions,
-                    arch: "linux",
-                    isFlatpak,
-                });
-            }
-        }
-    }
-    return dirs;
-}
-
-module.exports = {
-    BRANCH_NAMES,
-    MACOS_DISCORD_DIRS,
-    LINUX_DISCORD_DIRS,
-    FLATPAK_NAME_MAPPING,
-    ENTRYPOINT,
-    question,
-    getMenuItem,
-    getWindowsDirs,
-    getDarwinDirs,
-    getLinuxDirs,
-};

scripts/patcher/install.js

@@ -1,153 +0,0 @@
-#!/usr/bin/node
-/*
- * 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/>.
-*/
-
-const path = require("path");
-const fs = require("fs");
-const { execSync } = require("child_process");
-
-console.log("\nVencord Installer\n");
-
-if (!fs.existsSync(path.join(process.cwd(), "node_modules"))) {
-    console.log("You need to install dependencies first. Run:", "pnpm install --frozen-lockfile");
-    process.exit(1);
-}
-
-if (!fs.existsSync(path.join(process.cwd(), "dist", "patcher.js"))) {
-    console.log("You need to build the project first. Run:", "pnpm build");
-    process.exit(1);
-}
-
-const {
-    getMenuItem,
-    getWindowsDirs,
-    getDarwinDirs,
-    getLinuxDirs,
-    ENTRYPOINT,
-    question
-} = require("./common");
-
-switch (process.platform) {
-    case "win32":
-        install(getWindowsDirs());
-        break;
-    case "darwin":
-        install(getDarwinDirs());
-        break;
-    case "linux":
-        install(getLinuxDirs());
-        break;
-    default:
-        console.log("Unknown OS");
-        break;
-}
-
-async function install(installations) {
-    const selected = await getMenuItem(installations);
-
-    // Attempt to give flatpak perms
-    if (selected.isFlatpak) {
-        try {
-            const cwd = process.cwd();
-            const globalCmd = `flatpak override ${selected.branch} --filesystem=${cwd}`;
-            const userCmd = `flatpak override --user ${selected.branch} --filesystem=${cwd}`;
-            const cmd = selected.location.startsWith("/home")
-                ? userCmd
-                : globalCmd;
-            execSync(cmd);
-            console.log("Gave write perms to Discord Flatpak.");
-        } catch (e) {
-            console.log("Failed to give write perms to Discord Flatpak.");
-            console.log(
-                "Try running this script as an administrator:",
-                "sudo pnpm inject"
-            );
-            process.exit(1);
-        }
-
-        const answer = await question(
-            `Would you like to allow ${selected.branch} to talk to org.freedesktop.Flatpak?\n` +
-            "This is essentially full host access but necessary to spawn git. Without it, the updater will not work\n" +
-            "Consider using the http based updater (using the gui installer) instead if you want to maintain the sandbox.\n" +
-            "[y/N]: "
-        );
-
-        if (["y", "yes", "yeah"].includes(answer.toLowerCase())) {
-            try {
-                const globalCmd = `flatpak override ${selected.branch} --talk-name=org.freedesktop.Flatpak`;
-                const userCmd = `flatpak override --user ${selected.branch} --talk-name=org.freedesktop.Flatpak`;
-                const cmd = selected.location.startsWith("/home")
-                    ? userCmd
-                    : globalCmd;
-                execSync(cmd);
-                console.log("Sucessfully gave talk permission");
-            } catch (err) {
-                console.error("Failed to give talk permission\n", err);
-            }
-        } else {
-            console.log(`Not giving full host access. If you change your mind later, you can run:\nflatpak override ${selected.branch} --talk-name=org.freedesktop.Flatpak`);
-        }
-    }
-
-    for (const version of selected.versions) {
-        const dir = version.path;
-        // Check if we have write perms to the install directory...
-        try {
-            fs.accessSync(selected.location, fs.constants.W_OK);
-        } catch (e) {
-            console.error("No write access to", selected.location);
-            console.error(
-                "Try running this script as an administrator:",
-                "sudo pnpm inject"
-            );
-            process.exit(1);
-        }
-        if (fs.existsSync(dir) && fs.lstatSync(dir).isDirectory()) {
-            fs.rmSync(dir, { recursive: true });
-        }
-        if (!fs.existsSync(dir)) {
-            fs.mkdirSync(dir, { recursive: true });
-        }
-
-        fs.writeFileSync(
-            path.join(dir, "index.js"),
-            `require("${ENTRYPOINT}");`
-        );
-        fs.writeFileSync(
-            path.join(dir, "package.json"),
-            JSON.stringify({
-                name: "discord",
-                main: "index.js",
-            })
-        );
-
-        const requiredFiles = ["index.js", "package.json"];
-
-        if (requiredFiles.every(f => fs.existsSync(path.join(dir, f)))) {
-            console.log(
-                "Successfully patched",
-                version.name
-                    ? `${selected.branch} ${version.name}`
-                    : selected.branch
-            );
-        } else {
-            console.log("Failed to patch", dir);
-            console.log("Files in directory:", fs.readdirSync(dir));
-        }
-    }
-}

scripts/patcher/uninstall.js

@@ -1,78 +0,0 @@
-#!/usr/bin/node
-/*
- * 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/>.
-*/
-
-const path = require("path");
-const fs = require("fs");
-
-console.log("\nVencord Uninstaller\n");
-
-if (!fs.existsSync(path.join(process.cwd(), "node_modules"))) {
-    console.log("You need to install dependencies first. Run:", "pnpm install --frozen-lockfile");
-    process.exit(1);
-}
-
-const {
-    getMenuItem,
-    getWindowsDirs,
-    getDarwinDirs,
-    getLinuxDirs,
-} = require("./common");
-
-switch (process.platform) {
-    case "win32":
-        uninstall(getWindowsDirs());
-        break;
-    case "darwin":
-        uninstall(getDarwinDirs());
-        break;
-    case "linux":
-        uninstall(getLinuxDirs());
-        break;
-    default:
-        console.log("Unknown OS");
-        break;
-}
-
-async function uninstall(installations) {
-    const selected = await getMenuItem(installations);
-
-    for (const version of selected.versions) {
-        const dir = version.path;
-        // Check if we have write perms to the install directory...
-        try {
-            fs.accessSync(selected.location, fs.constants.W_OK);
-        } catch (e) {
-            console.error("No write access to", selected.location);
-            console.error(
-                "Try running this script as an administrator:",
-                "sudo pnpm uninject"
-            );
-            process.exit(1);
-        }
-        if (fs.existsSync(dir)) {
-            fs.rmSync(dir, { recursive: true });
-        }
-        console.log(
-            "Successfully unpatched",
-            version.name
-                ? `${selected.branch} ${version.name}`
-                : selected.branch
-        );
-    }
-}

scripts/runInstaller.mjs

@@ -0,0 +1,128 @@
+/*
+ * 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 "./checkNodeVersion.js";
+
+import { execFileSync, execSync } from "child_process";
+import { createWriteStream, existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
+import { dirname, join } from "path";
+import { Readable } from "stream";
+import { finished } from "stream/promises";
+import { fileURLToPath } from "url";
+
+const BASE_URL = "https://github.com/Vencord/Installer/releases/latest/download/";
+const INSTALLER_PATH_DARWIN = "VencordInstaller.app/Contents/MacOS/VencordInstaller";
+
+const BASE_DIR = join(dirname(fileURLToPath(import.meta.url)), "..");
+const FILE_DIR = join(BASE_DIR, "dist", "Installer");
+const ETAG_FILE = join(FILE_DIR, "etag.txt");
+
+function getFilename() {
+    switch (process.platform) {
+        case "win32":
+            return "VencordInstaller.exe";
+        case "darwin":
+            return "VencordInstaller.MacOS.zip";
+        case "linux":
+            return "VencordInstaller-" + (process.env.WAYLAND_DISPLAY ? "wayland" : "x11");
+        default:
+            throw new Error("Unsupported platform: " + process.platform);
+    }
+}
+
+async function ensureBinary() {
+    const filename = getFilename();
+    console.log("Downloading " + filename);
+
+    mkdirSync(FILE_DIR, { recursive: true });
+
+    const downloadName = join(FILE_DIR, filename);
+    const outputFile = process.platform === "darwin"
+        ? join(FILE_DIR, "VencordInstaller")
+        : downloadName;
+
+    const etag = existsSync(outputFile) && existsSync(ETAG_FILE)
+        ? readFileSync(ETAG_FILE, "utf-8")
+        : null;
+
+    const res = await fetch(BASE_URL + filename, {
+        headers: {
+            "User-Agent": "Vencord (https://github.com/Vendicated/Vencord)",
+            "If-None-Match": etag
+        }
+    });
+
+    if (res.status === 304) {
+        console.log("Up to date, not redownloading!");
+        return outputFile;
+    }
+    if (!res.ok)
+        throw new Error(`Failed to download installer: ${res.status} ${res.statusText}`);
+
+    writeFileSync(ETAG_FILE, res.headers.get("etag"));
+
+    if (process.platform === "darwin") {
+        console.log("Unzipping...");
+        const zip = new Uint8Array(await res.arrayBuffer());
+
+        const ff = await import("fflate");
+        const bytes = ff.unzipSync(zip, {
+            filter: f => f.name === INSTALLER_PATH_DARWIN
+        })[INSTALLER_PATH_DARWIN];
+
+        writeFileSync(outputFile, bytes, { mode: 0o755 });
+
+        console.log("Overriding security policy for installer binary (this is required to run it)");
+        console.log("xattr might error, that's okay");
+
+        const logAndRun = cmd => {
+            console.log("Running", cmd);
+            try {
+                execSync(cmd);
+            } catch { }
+        };
+        logAndRun(`sudo spctl --add '${outputFile}' --label "Vencord Installer"`);
+        logAndRun(`sudo xattr -d com.apple.quarantine '${outputFile}'`);
+    } else {
+        // WHY DOES NODE FETCH RETURN A WEB STREAM OH MY GOD
+        const body = Readable.fromWeb(res.body);
+        await finished(body.pipe(createWriteStream(outputFile, {
+            mode: 0o755,
+            autoClose: true
+        })));
+    }
+
+    console.log("Finished downloading!");
+
+    return outputFile;
+}
+
+
+
+const installerBin = await ensureBinary();
+
+console.log("Now running Installer...");
+
+execFileSync(installerBin, {
+    stdio: "inherit",
+    env: {
+        ...process.env,
+        VENCORD_USER_DATA_DIR: BASE_DIR,
+        VENCORD_DEV_INSTALL: "1"
+    }
+});

scripts/utils.mjs

@@ -0,0 +1,30 @@
+/*
+ * 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

@@ -18,7 +18,6 @@
 
 export * as Api from "./api";
 export * as Plugins from "./plugins";
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 export * as Util from "./utils";
 export * as QuickCss from "./utils/quickCss";
 export * as Updater from "./utils/updater";
@@ -28,34 +27,90 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
-import { popNotice, showNotice } from "./api/Notices";
-import { PlainSettings, Settings } from "./api/settings";
+import { get as dsGet } from "./api/DataStore";
+import { showNotification } from "./api/Notifications";
+import { PlainSettings, Settings } from "./api/Settings";
 import { patches, PMLogger, startAllPlugins } from "./plugins";
-import { checkForUpdates, UpdateLogger } from "./utils/updater";
+import { localStorage } from "./utils/localStorage";
+import { relaunch } from "./utils/native";
+import { getCloudSettings, putCloudSettings } from "./utils/settingsSync";
+import { checkForUpdates, update, UpdateLogger } from "./utils/updater";
 import { onceReady } from "./webpack";
-import { Router } from "./webpack/common";
+import { SettingsRouter } from "./webpack/common";
 
-export let Components: any;
+async function syncSettings() {
+    // pre-check for local shared settings
+    if (
+        Settings.cloud.authenticated &&
+        await dsGet("Vencord_cloudSecret") === null // 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
+    ) {
+        if (localStorage.Vencord_settingsDirty) {
+            await putCloudSettings();
+            delete localStorage.Vencord_settingsDirty;
+        } else if (await getCloudSettings(false)) { // if we synchronized something (false means no sync)
+            // we show a notification here instead of allowing getCloudSettings() to show one to declutter the amount of
+            // potential notifications that might occur. getCloudSettings() will always send a notification regardless if
+            // there was an error to notify the user, but besides that we only want to show one notification instead of all
+            // of the possible ones it has (such as when your settings are newer).
+            showNotification({
+                title: "Cloud Settings",
+                body: "Your settings have been updated! Click here to restart to fully apply changes!",
+                color: "var(--green-360)",
+                onClick: relaunch
+            });
+        }
+    }
+}
 
 async function init() {
     await onceReady;
     startAllPlugins();
-    Components = await import("./components");
+
+    syncSettings();
 
     if (!IS_WEB) {
         try {
             const isOutdated = await checkForUpdates();
-            if (isOutdated && Settings.notifyAboutUpdates)
-                setTimeout(() => {
-                    showNotice(
-                        "A Vencord update is available!",
-                        "View Update",
-                        () => {
-                            popNotice();
-                            Router.open("VencordUpdater");
-                        }
-                    );
-                }, 10000);
+            if (!isOutdated) return;
+
+            if (Settings.autoUpdate) {
+                await update();
+                if (Settings.autoUpdateNotification)
+                    setTimeout(() => showNotification({
+                        title: "Vencord has been updated!",
+                        body: "Click here to restart",
+                        permanent: true,
+                        noPersist: true,
+                        onClick: relaunch
+                    }), 10_000);
+                return;
+            }
+
+            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);
         }
@@ -76,3 +131,12 @@ async function init() {
 }
 
 init();
+
+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}"
+        }));
+    }, { once: true });
+}

src/VencordNative.ts

@@ -1,49 +1,76 @@
 /*
- * 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/>.
-*/
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
 
-import IPC_EVENTS from "@utils/IpcEvents";
-import { IpcRenderer, ipcRenderer } from "electron";
+import { IpcEvents } from "@utils/IpcEvents";
+import { IpcRes } from "@utils/types";
+import { ipcRenderer } from "electron";
+import { PluginIpcMappings } from "main/ipcPlugins";
+import type { UserThemeHeader } from "main/themes";
 
-function assertEventAllowed(event: string) {
-    if (!(event in IPC_EVENTS)) throw new Error(`Event ${event} not allowed.`);
+function invoke<T = any>(event: IpcEvents, ...args: any[]) {
+    return ipcRenderer.invoke(event, ...args) as Promise<T>;
 }
-export default {
-    getVersions: () => process.versions,
-    ipc: {
-        send(event: string, ...args: any[]) {
-            assertEventAllowed(event);
-            ipcRenderer.send(event, ...args);
-        },
-        sendSync<T = any>(event: string, ...args: any[]): T {
-            assertEventAllowed(event);
-            return ipcRenderer.sendSync(event, ...args);
-        },
-        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);
-        }
+
+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<string>(IpcEvents.GET_SETTINGS),
+        set: (settings: string) => invoke<void>(IpcEvents.SET_SETTINGS, settings),
+        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));
+        },
+
+        addThemeChangeListener(cb: () => void) {
+            ipcRenderer.on(IpcEvents.THEME_UPDATE, () => cb());
+        },
+
+        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
 };

src/api/Badges.ts

@@ -16,31 +16,34 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import ErrorBoundary from "@components/ErrorBoundary";
 import { User } from "discord-types/general";
-import { HTMLProps } from "react";
+import { ComponentType, HTMLProps } from "react";
 
 import Plugins from "~plugins";
 
-export enum BadgePosition {
+export const enum BadgePosition {
     START,
     END
 }
 
 export interface ProfileBadge {
-    /** The tooltip to show on hover */
-    tooltip: string;
+    /** The tooltip to show on hover. Required for image badges */
+    description?: string;
+    /** Custom component for the badge (tooltip not included) */
+    component?: ComponentType<ProfileBadge & BadgeUserArgs>;
     /** The custom image to use */
     image?: string;
+    link?: string;
     /** Action to perform when you click the badge */
     onClick?(): void;
     /** Should the user display this badge? */
     shouldShow?(userInfo: BadgeUserArgs): boolean;
-    /** Optional props (e.g. style) for the badge */
+    /** Optional props (e.g. style) for the badge, ignored for component badges */
     props?: HTMLProps<HTMLImageElement>;
     /** Insert at start or end? */
     position?: BadgePosition;
-
-    /** The badge name to display. Discord uses this, but we don't. */
+    /** The badge name to display, Discord uses this. Required for component badges */
     key?: string;
 }
 
@@ -51,6 +54,7 @@ const Badges = new Set<ProfileBadge>();
  * @param badge The badge to register
  */
 export function addBadge(badge: ProfileBadge) {
+    badge.component &&= ErrorBoundary.wrap(badge.component, { noop: true });
     Badges.add(badge);
 }
 
@@ -66,17 +70,19 @@ export function removeBadge(badge: ProfileBadge) {
  * Inject badges into the profile badges array.
  * You probably don't need to use this.
  */
-export function inject(badgeArray: ProfileBadge[], args: BadgeUserArgs) {
+export function _getBadges(args: BadgeUserArgs) {
+    const badges = [] as ProfileBadge[];
     for (const badge of Badges) {
         if (!badge.shouldShow || badge.shouldShow(args)) {
             badge.position === BadgePosition.START
-                ? badgeArray.unshift(badge)
-                : badgeArray.push(badge);
+                ? badges.unshift({ ...badge, ...args })
+                : badges.push({ ...badge, ...args });
         }
     }
-    (Plugins.BadgeAPI as any).addDonorBadge(badgeArray, args.user.id);
+    const donorBadges = (Plugins.BadgeAPI as unknown as typeof import("../plugins/_api/badges").default).getDonorBadges(args.user.id);
+    if (donorBadges) badges.unshift(...donorBadges);
 
-    return badgeArray;
+    return badges;
 }
 
 export interface BadgeUserArgs {

src/api/Commands/commandHelpers.ts

@@ -17,18 +17,16 @@
 */
 
 import { mergeDefaults } from "@utils/misc";
-import { findByCodeLazy, findByPropsLazy, waitFor } from "@webpack";
+import { 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 MessageCreator = findByPropsLazy("createBotMessage");
 const MessageSender = findByPropsLazy("receiveMessage");
 
-let SnowflakeUtils: any;
-waitFor("fromTimestamp", m => SnowflakeUtils = m);
-
 export function generateId() {
     return `-${SnowflakeUtils.fromTimestamp(Date.now())}`;
 }
@@ -40,7 +38,7 @@ export function generateId() {
  * @returns {Message}
  */
 export function sendBotMessage(channelId: string, message: PartialDeep<Message>): Message {
-    const botMessage = createBotMessage({ channelId, content: "", embeds: [] });
+    const botMessage = MessageCreator.createBotMessage({ channelId, content: "", embeds: [] });
 
     MessageSender.receiveMessage(channelId, mergeDefaults(message, botMessage));
 

src/api/Commands/index.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { makeCodeblock } from "@utils/misc";
+import { makeCodeblock } from "@utils/text";
 
 import { sendBotMessage } from "./commandHelpers";
 import { ApplicationCommandInputType, ApplicationCommandOptionType, ApplicationCommandType, Argument, Command, CommandContext, Option } from "./types";
@@ -111,6 +111,7 @@ function registerSubCommands(cmd: Command, plugin: string) {
             ...o,
             type: ApplicationCommandType.CHAT_INPUT,
             name: `${cmd.name} ${o.name}`,
+            id: `${o.name}-${cmd.id}`,
             displayName: `${cmd.name} ${o.name}`,
             subCommandPath: [{
                 name: o.name,

src/api/Commands/types.ts

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

src/api/ContextMenu.ts

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

src/api/DataStore/index.ts

@@ -1,4 +1,4 @@
-/* eslint-disable header/header */
+/* eslint-disable simple-header/header */
 
 /*!
  * idb-keyval v6.2.0

src/api/MemberListDecorators.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 { Channel, User } from "discord-types/general/index.js";
+
+interface DecoratorProps {
+    activities: any[];
+    channel: Channel;
+    /**
+     * Only for DM members
+     */
+    channelName?: string;
+    /**
+     * Only for server members
+     */
+    currentUser?: User;
+    guildId?: string;
+    isMobile: boolean;
+    isOwner?: boolean;
+    isTyping: boolean;
+    selected: boolean;
+    status: string;
+    user: User;
+    [key: string]: any;
+}
+export type Decorator = (props: DecoratorProps) => JSX.Element | null;
+type OnlyIn = "guilds" | "dms";
+
+export const decorators = new Map<string, { decorator: Decorator, onlyIn?: OnlyIn; }>();
+
+export function addDecorator(identifier: string, decorator: Decorator, onlyIn?: OnlyIn) {
+    decorators.set(identifier, { decorator, onlyIn });
+}
+
+export function removeDecorator(identifier: string) {
+    decorators.delete(identifier);
+}
+
+export function __getDecorators(props: DecoratorProps): (JSX.Element | null)[] {
+    const isInGuild = !!(props.guildId);
+    return Array.from(decorators.values(), decoratorObj => {
+        const { decorator, onlyIn } = decoratorObj;
+        // this can most likely be done cleaner
+        if (!onlyIn || (onlyIn === "guilds" && isInGuild) || (onlyIn === "dms" && !isInGuild)) {
+            return decorator(props);
+        }
+        return null;
+    });
+}

src/api/MessageAccessories.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export type AccessoryCallback = (props: Record<string, any>) => JSX.Element;
+export type AccessoryCallback = (props: Record<string, any>) => JSX.Element | null | Array<JSX.Element | null>;
 export type Accessory = {
     callback: AccessoryCallback;
     position?: number;
@@ -44,6 +44,15 @@ export function _modifyAccessories(
     props: Record<string, any>
 ) {
     for (const accessory of accessories.values()) {
+        let accessories = accessory.callback(props);
+        if (accessories == null)
+            continue;
+
+        if (!Array.isArray(accessories))
+            accessories = [accessories];
+        else if (accessories.length === 0)
+            continue;
+
         elements.splice(
             accessory.position != null
                 ? accessory.position < 0
@@ -51,7 +60,7 @@ export function _modifyAccessories(
                     : accessory.position
                 : elements.length,
             0,
-            accessory.callback(props)
+            ...accessories.filter(e => e != null) as JSX.Element[]
         );
     }
 

src/api/MessageDecorations.ts

@@ -0,0 +1,63 @@
+/*
+ * 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 { Channel, Message } from "discord-types/general/index.js";
+
+interface DecorationProps {
+    author: {
+        /**
+         * Will be username if the user has no nickname
+         */
+        nick: string;
+        iconRoleId: string;
+        guildMemberAvatar: string;
+        colorRoleName: string;
+        colorString: string;
+    };
+    channel: Channel;
+    compact: boolean;
+    decorations: {
+        /**
+         * Element for the [BOT] tag if there is one
+         */
+        0: JSX.Element | null;
+        /**
+         * Other decorations (including ones added with this api)
+         */
+        1: JSX.Element[];
+    };
+    message: Message;
+    [key: string]: any;
+}
+export type Decoration = (props: DecorationProps) => JSX.Element | null;
+
+export const decorations = new Map<string, Decoration>();
+
+export function addDecoration(identifier: string, decoration: Decoration) {
+    decorations.set(identifier, decoration);
+}
+
+export function removeDecoration(identifier: string) {
+    decorations.delete(identifier);
+}
+
+export function __addDecorationsToMessage(props: DecorationProps): (JSX.Element | null)[] {
+    return [...decorations.values()].map(decoration => {
+        return decoration(props);
+    });
+}

src/api/MessageEvents.ts

@@ -16,41 +16,74 @@
  * 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: Emoji[];
+    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;
+    };
 }
 
 export interface MessageExtra {
-    stickerIds?: string[];
+    stickers?: string[];
+    uploads?: Upload[];
+    replyOptions: MessageReplyOptions;
+    content: string;
+    channel: Channel;
+    type?: any;
+    openWarningPopout: (props: any) => any;
 }
 
-export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => void | { cancel: boolean; };
-export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => void;
+export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
+export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void>;
 
 const sendListeners = new Set<SendListener>();
 const editListeners = new Set<EditListener>();
 
-export function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra) {
+export async function _handlePreSend(channelId: string, messageObj: MessageObject, extra: MessageExtra, replyOptions: MessageReplyOptions) {
+    extra.replyOptions = replyOptions;
     for (const listener of sendListeners) {
         try {
-            const result = listener(channelId, messageObj, extra);
+            const result = await listener(channelId, messageObj, extra);
             if (result && result.cancel === true) {
                 return true;
             }
@@ -61,10 +94,10 @@ export function _handlePreSend(channelId: string, messageObj: MessageObject, ext
     return false;
 }
 
-export function _handlePreEdit(channelId: string, messageId: string, messageObj: MessageObject) {
+export async function _handlePreEdit(channelId: string, messageId: string, messageObj: MessageObject) {
     for (const listener of editListeners) {
         try {
-            listener(channelId, messageId, messageObj);
+            await listener(channelId, messageId, messageObj);
         } catch (e) {
             MessageEventsLogger.error("MessageEditHandler: Listener encountered an unknown error\n", e);
         }

src/api/MessagePopover.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import Logger from "@utils/Logger";
+import { Logger } from "@utils/Logger";
 import { Channel, Message } from "discord-types/general";
 import type { MouseEventHandler } from "react";
 

src/api/Notifications/NotificationComponent.tsx

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

src/api/Notifications/Notifications.tsx

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

src/api/Notifications/index.ts

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

src/api/Notifications/notificationLog.tsx

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

src/api/Notifications/styles.css

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

src/api/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 enum ServerListRenderPosition {
+export const enum ServerListRenderPosition {
     Above,
     In,
 }

src/api/Settings.ts

@@ -16,10 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import IpcEvents from "@utils/IpcEvents";
-import Logger from "@utils/Logger";
+import { debounce } from "@utils/debounce";
+import { localStorage } from "@utils/localStorage";
+import { Logger } from "@utils/Logger";
 import { mergeDefaults } from "@utils/misc";
-import { OptionType } from "@utils/types";
+import { putCloudSettings } from "@utils/settingsSync";
+import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
 import { React } from "@webpack/common";
 
 import plugins from "~plugins";
@@ -27,34 +29,87 @@ import plugins from "~plugins";
 const logger = new Logger("Settings");
 export interface Settings {
     notifyAboutUpdates: boolean;
+    autoUpdate: boolean;
+    autoUpdateNotification: boolean,
     useQuickCss: boolean;
     enableReactDevtools: boolean;
     themeLinks: string[];
+    enabledThemes: 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: [],
+    enabledThemes: [],
     enableReactDevtools: false,
-    plugins: {}
+    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;
+    var settings = JSON.parse(VencordNative.settings.get()) 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);
 }
 
-type SubscriptionCallback = ((newValue: any, path: string) => void) & { _path?: string; };
+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) & { _paths?: Array<string>; };
 const subscriptions = new Set<SubscriptionCallback>();
 
 const proxyCache = {} as Record<string, any>;
@@ -70,7 +125,7 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
                 // Return empty for plugins with no settings
                 if (path === "plugins" && p in plugins)
                     return target[p] = makeProxy({
-                        enabled: plugins[p].required ?? false
+                        enabled: plugins[p].required ?? plugins[p].enabledByDefault ?? false
                     }, root, `plugins.${p}`);
 
                 // Since the property is not set, check if this is a plugin's setting and if so, try to resolve
@@ -109,13 +164,17 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
             target[p] = v;
             // Call any listeners that are listening to a setting of this path
             const setPath = `${path}${path && "."}${p}`;
+            delete proxyCache[setPath];
             for (const subscription of subscriptions) {
-                if (!subscription._path || subscription._path === setPath) {
+                if (!subscription._paths || subscription._paths.includes(setPath)) {
                     subscription(v, setPath);
                 }
             }
             // And don't forget to persist the settings!
-            VencordNative.ipc.invoke(IpcEvents.SET_SETTINGS, JSON.stringify(root, null, 4));
+            PlainSettings.cloud.settingsSyncVersion = Date.now();
+            localStorage.Vencord_settingsDirty = true;
+            saveSettingsOnFrequentAction();
+            VencordNative.settings.set(JSON.stringify(root, null, 4));
             return true;
         }
     });
@@ -144,11 +203,12 @@ export const Settings = makeProxy(settings);
  * @param paths An optional list of paths to whitelist for rerenders
  * @returns Settings
  */
-export function useSettings(paths?: string[]) {
+// 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) && forceUpdate()
+        ? (value, path) => paths.includes(path as UseSettings<Settings>) && forceUpdate()
         : forceUpdate;
 
     React.useEffect(() => {
@@ -177,7 +237,8 @@ type ResolvePropDeep<T, P> = P extends "" ? T :
 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;
+    if (path)
+        ((onUpdate as SubscriptionCallback)._paths ??= []).push(path);
     subscriptions.add(onUpdate);
 }
 
@@ -190,11 +251,45 @@ export function migratePluginSettings(name: string, ...oldNames: string[]) {
             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)
-            );
+            VencordNative.settings.set(JSON.stringify(settings, null, 4));
             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;
+        },
+        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/Styles.ts

@@ -0,0 +1,162 @@
+/*
+ * 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 type { MapValue } from "type-fest/source/entry";
+
+export type Style = MapValue<typeof VencordStyles>;
+
+export const styleMap = window.VencordStyles ??= new Map();
+
+export function requireStyle(name: string) {
+    const style = styleMap.get(name);
+    if (!style) throw new Error(`Style "${name}" does not exist`);
+    return style;
+}
+
+/**
+ * A style's name can be obtained from importing a stylesheet with `?managed` at the end of the import
+ * @param name The name of the style
+ * @returns `false` if the style was already enabled, `true` otherwise
+ * @example
+ * import pluginStyle from "./plugin.css?managed";
+ *
+ * // Inside some plugin method like "start()" or "[option].onChange()"
+ * enableStyle(pluginStyle);
+ */
+export function enableStyle(name: string) {
+    const style = requireStyle(name);
+
+    if (style.dom?.isConnected)
+        return false;
+
+    if (!style.dom) {
+        style.dom = document.createElement("style");
+        style.dom.dataset.vencordName = style.name;
+    }
+    compileStyle(style);
+
+    document.head.appendChild(style.dom);
+    return true;
+}
+
+/**
+ * @param name The name of the style
+ * @returns `false` if the style was already disabled, `true` otherwise
+ * @see {@link enableStyle} for info on getting the name of an imported style
+ */
+export function disableStyle(name: string) {
+    const style = requireStyle(name);
+    if (!style.dom?.isConnected)
+        return false;
+
+    style.dom.remove();
+    style.dom = null;
+    return true;
+}
+
+/**
+ * @param name The name of the style
+ * @returns `true` in most cases, may return `false` in some edge cases
+ * @see {@link enableStyle} for info on getting the name of an imported style
+ */
+export const toggleStyle = (name: string) => isStyleEnabled(name) ? disableStyle(name) : enableStyle(name);
+
+/**
+ * @param name The name of the style
+ * @returns Whether the style is enabled
+ * @see {@link enableStyle} for info on getting the name of an imported style
+ */
+export const isStyleEnabled = (name: string) => requireStyle(name).dom?.isConnected ?? false;
+
+/**
+ * Sets the variables of a style
+ * ```ts
+ * // -- plugin.ts --
+ * import pluginStyle from "./plugin.css?managed";
+ * import { setStyleVars } from "@api/Styles";
+ * import { findByPropsLazy } from "@webpack";
+ * const classNames = findByPropsLazy("thin", "scrollerBase"); // { thin: "thin-31rlnD scrollerBase-_bVAAt", ... }
+ *
+ * // Inside some plugin method like "start()"
+ * setStyleClassNames(pluginStyle, classNames);
+ * enableStyle(pluginStyle);
+ * ```
+ * ```scss
+ * // -- plugin.css --
+ * .plugin-root [--thin]::-webkit-scrollbar { ... }
+ * ```
+ * ```scss
+ * // -- final stylesheet --
+ * .plugin-root .thin-31rlnD.scrollerBase-_bVAAt::-webkit-scrollbar { ... }
+ * ```
+ * @param name The name of the style
+ * @param classNames An object where the keys are the variable names and the values are the variable values
+ * @param recompile Whether to recompile the style after setting the variables, defaults to `true`
+ * @see {@link enableStyle} for info on getting the name of an imported style
+ */
+export const setStyleClassNames = (name: string, classNames: Record<string, string>, recompile = true) => {
+    const style = requireStyle(name);
+    style.classNames = classNames;
+    if (recompile && isStyleEnabled(style.name))
+        compileStyle(style);
+};
+
+/**
+ * Updates the stylesheet after doing the following to the sourcecode:
+ *   - Interpolate style classnames
+ * @param style **_Must_ be a style with a DOM element**
+ * @see {@link setStyleClassNames} for more info on style classnames
+ */
+export const compileStyle = (style: Style) => {
+    if (!style.dom) throw new Error("Style has no DOM element");
+
+    style.dom.textContent = style.source
+        .replace(/\[--(\w+)\]/g, (match, name) => {
+            const className = style.classNames[name];
+            return className ? classNameToSelector(className) : match;
+        });
+};
+
+/**
+ * @param name The classname
+ * @param prefix A prefix to add each class, defaults to `""`
+ * @return A css selector for the classname
+ * @example
+ * classNameToSelector("foo bar") // => ".foo.bar"
+ */
+export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
+
+type ClassNameFactoryArg = string | string[] | Record<string, unknown> | false | null | undefined | 0 | "";
+/**
+ * @param prefix The prefix to add to each class, defaults to `""`
+ * @returns A classname generator function
+ * @example
+ * const cl = classNameFactory("plugin-");
+ *
+ * cl("base", ["item", "editable"], { selected: null, disabled: true })
+ * // => "plugin-base plugin-item plugin-editable plugin-disabled"
+ */
+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);
+        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));
+    }
+    return Array.from(classNames, name => prefix + name).join(" ");
+};

src/api/index.ts

@@ -18,12 +18,18 @@
 
 import * as $Badges from "./Badges";
 import * as $Commands from "./Commands";
+import * as $ContextMenu from "./ContextMenu";
 import * as $DataStore from "./DataStore";
+import * as $MemberListDecorators from "./MemberListDecorators";
 import * as $MessageAccessories from "./MessageAccessories";
+import * as $MessageDecorations from "./MessageDecorations";
 import * as $MessageEventsAPI from "./MessageEvents";
 import * as $MessagePopover from "./MessagePopover";
 import * as $Notices from "./Notices";
+import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
+import * as $Settings from "./Settings";
+import * as $Styles from "./Styles";
 
 /**
  * An API allowing you to listen to Message Clicks or run your own logic
@@ -31,16 +37,16 @@ import * as $ServerList from "./ServerList";
  *
  * If your plugin uses this, you must add MessageEventsAPI to its dependencies
  */
-const MessageEvents = $MessageEventsAPI;
+export const MessageEvents = $MessageEventsAPI;
 /**
  * An API allowing you to create custom notices
  * (snackbars on the top, like the Update prompt)
  */
-const Notices = $Notices;
+export const Notices = $Notices;
 /**
  * An API allowing you to register custom commands
  */
-const Commands = $Commands;
+export const Commands = $Commands;
 /**
  * A wrapper around IndexedDB. This can store arbitrarily
  * large data and supports a lot of datatypes (Blob, Map, ...).
@@ -55,22 +61,46 @@ const Commands = $Commands;
  * This is actually just idb-keyval, so if you're familiar with that, you're golden!
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#supported_types}
  */
-const DataStore = $DataStore;
+export const DataStore = $DataStore;
 /**
  * An API allowing you to add custom components as message accessories
  */
-const MessageAccessories = $MessageAccessories;
+export const MessageAccessories = $MessageAccessories;
 /**
  * An API allowing you to add custom buttons in the message popover
  */
-const MessagePopover = $MessagePopover;
+export const MessagePopover = $MessagePopover;
 /**
  * An API allowing you to add badges to user profiles
  */
-const Badges = $Badges;
+export const Badges = $Badges;
 /**
  * An API allowing you to add custom elements to the server list
  */
-const ServerList = $ServerList;
+export const ServerList = $ServerList;
+/**
+ * An API allowing you to add components as message accessories
+ */
+export const MessageDecorations = $MessageDecorations;
+/**
+ * An API allowing you to add components to member list users, in both DM's and servers
+ */
+export const MemberListDecorators = $MemberListDecorators;
+/**
+ * An API allowing you to persist data
+ */
+export const Settings = $Settings;
+/**
+ * An API allowing you to dynamically load styles
+ * a
+ */
+export const Styles = $Styles;
+/**
+ * An API allowing you to display notifications
+ */
+export const Notifications = $Notifications;
 
-export { Badges, Commands, DataStore, MessageAccessories, MessageEvents, MessagePopover, Notices, ServerList };
+/**
+ * An api allowing you to patch and add/remove items to/from context menus
+ */
+export const ContextMenu = $ContextMenu;

src/components/Badge.tsx

@@ -16,10 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { useSettings } from "@api/settings";
-
-import { ShikiSettings } from "../types";
-
-export function useShikiSettings(settings: (keyof ShikiSettings)[]) {
-    return useSettings(settings.map(setting => `plugins.ShikiCodeblocks.${setting}`)).plugins.ShikiCodeblocks as ShikiSettings;
+export function Badge({ text, color }): JSX.Element {
+    return (
+        <div className="vc-plugins-badge" style={{
+            backgroundColor: color,
+            justifySelf: "flex-end",
+            marginLeft: "auto"
+        }}>
+            {text}
+        </div>
+    );
 }

src/components/CodeBlock.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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,7 +16,6 @@
  * 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";
@@ -27,9 +26,7 @@ export default function DonateButton(props: any) {
             {...props}
             look={Button.Looks.LINK}
             color={Button.Colors.TRANSPARENT}
-            onClick={() =>
-                VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/sponsors/Vendicated")
-            }
+            onClick={() => VencordNative.native.openExternal("https://github.com/sponsors/Vendicated")}
         >
             <Heart />
             Donate

src/components/ErrorBoundary.tsx

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

src/components/ErrorCard.css

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

src/components/ErrorCard.tsx

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

src/components/ExpandableHeader.css

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

src/components/ExpandableHeader.tsx

@@ -0,0 +1,108 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { classNameFactory } from "@api/Styles";
+import { Text, Tooltip, useState } from "@webpack/common";
+export const cl = classNameFactory("vc-expandableheader-");
+import "./ExpandableHeader.css";
+
+export interface ExpandableHeaderProps {
+    onMoreClick?: () => void;
+    moreTooltipText?: string;
+    onDropDownClick?: (state: boolean) => void;
+    defaultState?: boolean;
+    headerText: string;
+    children: React.ReactNode;
+    buttons?: React.ReactNode[];
+}
+
+export default function ExpandableHeader({ children, onMoreClick, buttons, moreTooltipText, defaultState = false, onDropDownClick, headerText }: ExpandableHeaderProps) {
+    const [showContent, setShowContent] = useState(defaultState);
+
+    return (
+        <>
+            <div style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "8px"
+            }}>
+                <Text
+                    tag="h2"
+                    variant="eyebrow"
+                    style={{
+                        color: "var(--header-primary)",
+                        display: "inline"
+                    }}
+                >
+                    {headerText}
+                </Text>
+
+                <div className={cl("center-flex")}>
+                    {
+                        buttons ?? null
+                    }
+
+                    {
+                        onMoreClick && // only show more button if callback is provided
+                        <Tooltip text={moreTooltipText}>
+                            {tooltipProps => (
+                                <button
+                                    {...tooltipProps}
+                                    className={cl("btn")}
+                                    onClick={onMoreClick}>
+                                    <svg
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
+                                    </svg>
+                                </button>
+                            )}
+                        </Tooltip>
+                    }
+
+
+                    <Tooltip text={showContent ? "Hide " + headerText : "Show " + headerText}>
+                        {tooltipProps => (
+                            <button
+                                {...tooltipProps}
+                                className={cl("btn")}
+                                onClick={() => {
+                                    setShowContent(v => !v);
+                                    onDropDownClick?.(showContent);
+                                }}
+                            >
+                                <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    transform={showContent ? "scale(1 -1)" : "scale(1 1)"}
+                                >
+                                    <path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
+                                </svg>
+                            </button>
+                        )}
+                    </Tooltip>
+                </div>
+            </div>
+            {showContent && children}
+        </>
+    );
+}

src/components/Icons.tsx

@@ -0,0 +1,257 @@
+/*
+ * 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 { classes } from "@utils/misc";
+import { i18n } from "@webpack/common";
+import type { PropsWithChildren, SVGProps } from "react";
+
+interface BaseIconProps extends IconProps {
+    viewBox: string;
+}
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    height?: string | number;
+    width?: string | number;
+}
+
+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 popout right of the username when clicking
+ * your own username in the bottom left user panel
+ */
+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="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
+                <path d="M15 5H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" />
+            </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={i18n.Messages.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>
+    );
+}

src/components/Monaco.ts

@@ -1,44 +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 "@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 win = open("about:blank", void 0, "popup,width=1000,height=1000")!;
-
-    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);
-}

src/components/PluginSettings/ContributorModal.tsx

@@ -0,0 +1,113 @@
+/*
+ * 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 { DevsById } from "@utils/constants";
+import { fetchUserProfile, getTheme, Theme } from "@utils/discord";
+import { ModalContent, ModalRoot, openModal } from "@utils/modal";
+import { Forms, MaskedLink, showToast, useEffect, useMemo, UserProfileStore, useStateFromStores } from "@webpack/common";
+import { User } from "discord-types/general";
+
+import Plugins from "~plugins";
+
+import { PluginCard } from ".";
+
+const WebsiteIconDark = "/assets/e1e96d89e192de1997f73730db26e94f.svg";
+const WebsiteIconLight = "/assets/730f58bcfd5a57a5e22460c445a0c6cf.svg";
+const GithubIconLight = "/assets/3ff98ad75ac94fa883af5ed62d17c459.svg";
+const GithubIconDark = "/assets/6a853b4c87fce386cbfef4a2efbacb09.svg";
+
+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 GithubIcon() {
+    const src = getTheme() === Theme.Light ? GithubIconLight : GithubIconDark;
+    return <img src={src} alt="GitHub" />;
+}
+
+function WebsiteIcon() {
+    const src = getTheme() === Theme.Light ? WebsiteIconLight : WebsiteIconDark;
+    return <img src={src} alt="Website" />;
+}
+
+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]);
+
+    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={cl("links")}>
+                    {website && (
+                        <MaskedLink
+                            href={"https://" + website}
+                        >
+                            <WebsiteIcon />
+                        </MaskedLink>
+                    )}
+                    {githubName && (
+                        <MaskedLink href={`https://github.com/${githubName}`}>
+                            <GithubIcon />
+                        </MaskedLink>
+                    )}
+                </div>
+            </div>
+
+            <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/PluginModal.tsx

@@ -17,15 +17,17 @@
 */
 
 import { generateId } from "@api/Commands";
-import { useSettings } from "@api/settings";
+import { useSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { LazyComponent } from "@utils/misc";
-import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
-import { proxyLazy } from "@utils/proxyLazy";
+import { proxyLazy } from "@utils/lazy";
+import { Margins } from "@utils/margins";
+import { classes, isObjectEmpty } from "@utils/misc";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
+import { LazyComponent } from "@utils/react";
 import { OptionType, Plugin } from "@utils/types";
 import { findByCode, findByPropsLazy } from "@webpack";
-import { Button, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "@webpack/common";
+import { Button, Clickable, FluxDispatcher, Forms, React, Text, Tooltip, UserStore, UserUtils } from "@webpack/common";
 import { User } from "discord-types/general";
 import { Constructor } from "type-fest";
 
@@ -38,6 +40,7 @@ import {
     SettingSliderComponent,
     SettingTextComponent
 } from "./components";
+import { openContributorModal } from "./ContributorModal";
 
 const UserSummaryItem = LazyComponent(() => findByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
@@ -48,11 +51,12 @@ interface PluginModalProps extends ModalProps {
     onRestartNeeded(): void;
 }
 
-/** To stop discord making unwanted requests... */
-function makeDummyUser(user: { name: string, id: BigInt; }) {
+function makeDummyUser(user: { username: string; id?: string; avatar?: string; }) {
     const newUser = new UserRecord({
-        username: user.name,
-        id: generateId(),
+        username: user.username,
+        id: user.id ?? generateId(),
+        avatar: user.avatar,
+        /** To stop discord making unwanted requests... */
         bot: true,
     });
     FluxDispatcher.dispatch({
@@ -84,12 +88,16 @@ 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));
+
     React.useEffect(() => {
         (async () => {
             for (const user of plugin.authors.slice(0, 6)) {
                 const author = user.id
-                    ? await UserUtils.fetchUser(`${user.id}`).catch(() => makeDummyUser(user))
-                    : makeDummyUser(user);
+                    ? await UserUtils.getUser(`${user.id}`)
+                        .catch(() => makeDummyUser({ username: user.name }))
+                    : makeDummyUser({ username: user.name });
+
                 setAuthors(a => [...a, author]);
             }
         })();
@@ -121,33 +129,36 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     }
 
     function renderSettings() {
-        if (!pluginSettings || !plugin.options) {
+        if (!hasSettings || !plugin.options) {
             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 }));
+                }
+
+                function onError(hasError: boolean) {
+                    setErrors(e => ({ ...e, [key]: hasError }));
+                }
+
+                const Component = Components[setting.type];
+                return (
+                    <Component
+                        id={key}
+                        key={key}
+                        option={setting}
+                        onChange={onChange}
+                        onError={onError}
+                        pluginSettings={pluginSettings}
+                        definedSettings={plugin.settings}
+                    />
+                );
+            });
+
+            return <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>{options}</Flex>;
         }
-
-        const options = Object.entries(plugin.options).map(([key, setting]) => {
-            function onChange(newValue: any) {
-                setTempSettings(s => ({ ...s, [key]: newValue }));
-            }
-
-            function onError(hasError: boolean) {
-                setErrors(e => ({ ...e, [key]: hasError }));
-            }
-
-            const Component = Components[setting.type];
-            return (
-                <Component
-                    id={key}
-                    key={key}
-                    option={setting}
-                    onChange={onChange}
-                    onError={onError}
-                    pluginSettings={pluginSettings}
-                />
-            );
-        });
-
-        return <Flex flexDirection="column" style={{ gap: 12 }}>{options}</Flex>;
     }
 
     function renderMoreUsers(_label: string, count: number) {
@@ -171,15 +182,17 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     }
 
     return (
-        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
-            <ModalHeader>
-                <Text variant="heading-md/bold">{plugin.name}</Text>
+        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM} className="vc-text-selectable">
+            <ModalHeader separator={false}>
+                <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text>
+                <ModalCloseButton onClick={onClose} />
             </ModalHeader>
-            <ModalContent style={{ marginBottom: 8, marginTop: 8 }}>
+            <ModalContent>
                 <Forms.FormSection>
                     <Forms.FormTitle tag="h3">About {plugin.name}</Forms.FormTitle>
                     <Forms.FormText>{plugin.description}</Forms.FormText>
-                    <div style={{ marginTop: 8, marginBottom: 8, width: "fit-content" }}>
+                    <Forms.FormTitle tag="h3" style={{ marginTop: 8, marginBottom: 0 }}>Authors</Forms.FormTitle>
+                    <div style={{ width: "fit-content", marginBottom: 8 }}>
                         <UserSummaryItem
                             users={authors}
                             count={plugin.authors.length}
@@ -189,30 +202,44 @@ 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>
                 {!!plugin.settingsAboutComponent && (
-                    <div style={{ marginBottom: 8 }}>
+                    <div className={classes(Margins.bottom8, "vc-text-selectable")}>
                         <Forms.FormSection>
                             <ErrorBoundary message="An error occurred while rendering this plugin's custom InfoComponent">
-                                <plugin.settingsAboutComponent />
+                                <plugin.settingsAboutComponent tempSettings={tempSettings} />
                             </ErrorBoundary>
                         </Forms.FormSection>
                     </div>
                 )}
-                <Forms.FormSection>
+                <Forms.FormSection className={Margins.bottom16}>
                     <Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
                     {renderSettings()}
                 </Forms.FormSection>
             </ModalContent>
-            <ModalFooter>
+            {hasSettings && <ModalFooter>
                 <Flex flexDirection="column" style={{ width: "100%" }}>
                     <Flex style={{ marginLeft: "auto" }}>
                         <Button
                             onClick={onClose}
                             size={Button.Sizes.SMALL}
-                            color={Button.Colors.RED}
+                            color={Button.Colors.PRIMARY}
+                            look={Button.Looks.LINK}
                         >
                             Cancel
                         </Button>
@@ -233,7 +260,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     </Flex>
                     {saveError && <Text variant="text-md/semibold" style={{ color: "var(--text-danger)" }}>Error while saving: {saveError}</Text>}
                 </Flex>
-            </ModalFooter>
+            </ModalFooter>}
         </ModalRoot>
     );
 }

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -16,12 +16,13 @@
  * 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, Select } from "@webpack/common";
+import { Forms, React, Switch } from "@webpack/common";
 
 import { ISettingElementProps } from ".";
 
-export function SettingBooleanComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionBoolean>) {
+export function SettingBooleanComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps<PluginOptionBoolean>) {
     const def = pluginSettings[id] ?? option.default;
 
     const [state, setState] = React.useState(def ?? false);
@@ -31,13 +32,8 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange,
         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 && option.isValid(newValue)) ?? true;
+        const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
         else {
@@ -49,18 +45,17 @@ export function SettingBooleanComponent({ option, pluginSettings, id, onChange,
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
-            <Select
-                isDisabled={option.disabled?.() ?? false}
-                options={options}
-                placeholder={option.placeholder ?? "Select an option"}
-                maxVisibleItems={5}
-                closeOnSelect={true}
-                select={handleChange}
-                isSelected={v => v === state}
-                serialize={v => String(v)}
+            <Switch
+                value={state}
+                onChange={handleChange}
+                note={option.description}
+                disabled={option.disabled?.call(definedSettings) ?? false}
                 {...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

@@ -23,7 +23,7 @@ import { ISettingElementProps } from ".";
 
 const MAX_SAFE_NUMBER = BigInt(Number.MAX_SAFE_INTEGER);
 
-export function SettingNumericComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionNumber>) {
+export function SettingNumericComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps<PluginOptionNumber>) {
     function serialize(value: any) {
         if (option.type === OptionType.BIGINT) return BigInt(value);
         return Number(value);
@@ -37,10 +37,13 @@ export function SettingNumericComponent({ option, pluginSettings, id, onChange,
     }, [error]);
 
     function handleChange(newValue) {
-        const isValid = (option.isValid && option.isValid(newValue)) ?? true;
+        const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
+
+        setError(null);
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
-        else if (option.type === OptionType.NUMBER && BigInt(newValue) >= MAX_SAFE_NUMBER) {
+
+        if (option.type === OptionType.NUMBER && BigInt(newValue) >= MAX_SAFE_NUMBER) {
             setState(`${Number.MAX_SAFE_INTEGER}`);
             onChange(serialize(newValue));
         } else {
@@ -58,7 +61,7 @@ export function SettingNumericComponent({ option, pluginSettings, id, onChange,
                 value={state}
                 onChange={handleChange}
                 placeholder={option.placeholder ?? "Enter a number"}
-                disabled={option.disabled?.() ?? false}
+                disabled={option.disabled?.call(definedSettings) ?? false}
                 {...option.componentProps}
             />
             {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}

src/components/PluginSettings/components/SettingSelectComponent.tsx

@@ -21,7 +21,7 @@ import { Forms, React, Select } from "@webpack/common";
 
 import { ISettingElementProps } from ".";
 
-export function SettingSelectComponent({ option, pluginSettings, onChange, onError, id }: ISettingElementProps<PluginOptionSelect>) {
+export function SettingSelectComponent({ option, pluginSettings, definedSettings, onChange, onError, id }: ISettingElementProps<PluginOptionSelect>) {
     const def = pluginSettings[id] ?? option.options?.find(o => o.default)?.value;
 
     const [state, setState] = React.useState<any>(def ?? null);
@@ -32,10 +32,11 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
     }, [error]);
 
     function handleChange(newValue) {
-        const isValid = (option.isValid && option.isValid(newValue)) ?? true;
+        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);
         }
@@ -45,7 +46,7 @@ export function SettingSelectComponent({ option, pluginSettings, onChange, onErr
         <Forms.FormSection>
             <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <Select
-                isDisabled={option.disabled?.() ?? false}
+                isDisabled={option.disabled?.call(definedSettings) ?? false}
                 options={option.options}
                 placeholder={option.placeholder ?? "Select an option"}
                 maxVisibleItems={5}

src/components/PluginSettings/components/SettingSliderComponent.tsx

@@ -29,7 +29,7 @@ export function makeRange(start: number, end: number, step = 1) {
     return ranges;
 }
 
-export function SettingSliderComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionSlider>) {
+export function SettingSliderComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps<PluginOptionSlider>) {
     const def = pluginSettings[id] ?? option.default;
 
     const [error, setError] = React.useState<string | null>(null);
@@ -39,7 +39,7 @@ export function SettingSliderComponent({ option, pluginSettings, id, onChange, o
     }, [error]);
 
     function handleChange(newValue: number): void {
-        const isValid = (option.isValid && option.isValid(newValue)) ?? true;
+        const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
         else {
@@ -52,7 +52,7 @@ export function SettingSliderComponent({ option, pluginSettings, id, onChange, o
         <Forms.FormSection>
             <Forms.FormTitle>{option.description}</Forms.FormTitle>
             <Slider
-                disabled={option.disabled?.() ?? false}
+                disabled={option.disabled?.call(definedSettings) ?? false}
                 markers={option.markers}
                 minValue={option.markers[0]}
                 maxValue={option.markers[option.markers.length - 1]}

src/components/PluginSettings/components/SettingTextComponent.tsx

@@ -21,7 +21,7 @@ import { Forms, React, TextInput } from "@webpack/common";
 
 import { ISettingElementProps } from ".";
 
-export function SettingTextComponent({ option, pluginSettings, id, onChange, onError }: ISettingElementProps<PluginOptionString>) {
+export function SettingTextComponent({ option, pluginSettings, definedSettings, id, onChange, onError }: ISettingElementProps<PluginOptionString>) {
     const [state, setState] = React.useState(pluginSettings[id] ?? option.default ?? null);
     const [error, setError] = React.useState<string | null>(null);
 
@@ -30,13 +30,13 @@ export function SettingTextComponent({ option, pluginSettings, id, onChange, onE
     }, [error]);
 
     function handleChange(newValue) {
-        const isValid = (option.isValid && option.isValid(newValue)) ?? true;
+        const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
-        else {
-            setState(newValue);
-            onChange(newValue);
-        }
+        else setError(null);
+
+        setState(newValue);
+        onChange(newValue);
     }
 
     return (
@@ -47,7 +47,7 @@ export function SettingTextComponent({ option, pluginSettings, id, onChange, onE
                 value={state}
                 onChange={handleChange}
                 placeholder={option.placeholder ?? "Enter a value"}
-                disabled={option.disabled?.() ?? false}
+                disabled={option.disabled?.call(definedSettings) ?? false}
                 {...option.componentProps}
             />
             {error && <Forms.FormText style={{ color: "var(--text-danger)" }}>{error}</Forms.FormText>}

src/components/PluginSettings/components/index.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { PluginOptionBase } from "@utils/types";
+import { DefinedSettings, PluginOptionBase } from "@utils/types";
 
 export interface ISettingElementProps<T extends PluginOptionBase> {
     option: T;
@@ -27,8 +27,10 @@ export interface ISettingElementProps<T extends PluginOptionBase> {
     };
     id: string;
     onError(hasError: boolean): void;
+    definedSettings?: DefinedSettings;
 }
 
+export * from "../../Badge";
 export * from "./SettingBooleanComponent";
 export * from "./SettingCustomComponent";
 export * from "./SettingNumericComponent";

src/components/PluginSettings/contributorModal.css

@@ -0,0 +1,58 @@
+.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: 16px;
+    background: var(--background-tertiary);
+    z-index: -1;
+    left: -16px;
+    top: 0;
+}
+
+.vc-author-modal-avatar {
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+}
+
+.vc-author-modal-links {
+    margin-left: auto;
+    display: flex;
+    gap: 0.2em;
+}
+
+.vc-author-modal-links img {
+    height: 32px;
+    width: 32px;
+    border-radius: 50%;
+    border: 4px solid var(--background-tertiary);
+    box-sizing: border-box
+}
+
+.vc-author-modal-plugins {
+    display: grid;
+    gap: 0.5em;
+}

src/components/PluginSettings/index.tsx

@@ -16,32 +16,37 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./styles.css";
+
+import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
-import { Settings, useSettings } from "@api/settings";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { ErrorCard } from "@components/ErrorCard";
-import { Flex } from "@components/Flex";
-import { handleComponentFailed } from "@components/handleComponentFailed";
+import { Settings, useSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
+import { CogWheel, InfoIcon } from "@components/Icons";
+import PluginModal from "@components/PluginSettings/PluginModal";
+import { AddonCard } from "@components/VencordSettings/AddonCard";
+import { SettingsTab } from "@components/VencordSettings/shared";
 import { ChangeList } from "@utils/ChangeList";
-import Logger from "@utils/Logger";
-import { classes, LazyComponent } from "@utils/misc";
+import { Logger } from "@utils/Logger";
+import { Margins } from "@utils/margins";
+import { classes, isObjectEmpty } from "@utils/misc";
 import { openModalLazy } from "@utils/modal";
+import { useAwaiter } from "@utils/react";
 import { Plugin } from "@utils/types";
-import { findByCode, findByPropsLazy } from "@webpack";
-import { Alerts, Button, Forms, Margins, Parser, React, Select, Switch, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
+import { findByPropsLazy } from "@webpack";
+import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip } from "@webpack/common";
 
 import Plugins from "~plugins";
 
 import { startDependenciesRecursive, startPlugin, stopPlugin } from "../../plugins";
-import PluginModal from "./PluginModal";
-import * as styles from "./styles";
 
+
+const cl = classNameFactory("vc-plugins-");
 const logger = new Logger("PluginSettings", "#a6d189");
 
 const InputStyles = findByPropsLazy("inputDefault", "inputWrapper");
+const ButtonClasses = findByPropsLazy("button", "disabled", "enabled");
 
-const CogWheel = LazyComponent(() => findByCode("18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069"));
-const InfoIcon = LazyComponent(() => findByCode("4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16"));
 
 function showErrorToast(message: string) {
     Toasts.show({
@@ -54,23 +59,27 @@ function showErrorToast(message: string) {
     });
 }
 
-interface ReloadRequiredCardProps extends React.HTMLProps<HTMLDivElement> {
-    plugins: string[];
-}
-
-function ReloadRequiredCard({ plugins, ...props }: ReloadRequiredCardProps) {
-    if (plugins.length === 0) return null;
-
-    const pluginPrefix = plugins.length === 1 ? "The plugin" : "The following plugins require a reload to apply changes:";
-    const pluginSuffix = plugins.length === 1 ? " requires a reload to apply changes." : ".";
-
+function ReloadRequiredCard({ required }: { required: boolean; }) {
     return (
-        <ErrorCard {...props} style={{ padding: "1em", display: "grid", gridTemplateColumns: "1fr auto", gap: 8, ...props.style }}>
-            <span style={{ margin: "auto 0" }}>
-                {pluginPrefix} <code>{plugins.join(", ")}</code>{pluginSuffix}
-            </span>
-            <Button look={Button.Looks.INVERTED} onClick={() => location.reload()}>Reload</Button>
-        </ErrorCard>
+        <Card className={cl("info-card", { "restart-card": required })}>
+            {required ? (
+                <>
+                    <Forms.FormTitle tag="h5">Restart required!</Forms.FormTitle>
+                    <Forms.FormText className={cl("dep-text")}>
+                        Restart now to apply new plugins and their settings
+                    </Forms.FormText>
+                    <Button color={Button.Colors.YELLOW} onClick={() => location.reload()}>
+                        Restart
+                    </Button>
+                </>
+            ) : (
+                <>
+                    <Forms.FormTitle tag="h5">Plugin Management</Forms.FormTitle>
+                    <Forms.FormText>Press the cog wheel or info icon to get more info on a plugin</Forms.FormText>
+                    <Forms.FormText>Plugins with a cog wheel have settings you can modify!</Forms.FormText>
+                </>
+            )}
+        </Card>
     );
 }
 
@@ -78,17 +87,13 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
     plugin: Plugin;
     disabled: boolean;
     onRestartNeeded(name: string): void;
+    isNew?: boolean;
 }
 
-function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave }: PluginCardProps) {
-    const settings = useSettings();
-    const pluginSettings = settings.plugins[plugin.name];
+export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
+    const settings = Settings.plugins[plugin.name];
 
-    const [iconHover, setIconHover] = React.useState(false);
-
-    function isEnabled() {
-        return pluginSettings?.enabled || plugin.started;
-    }
+    const isEnabled = () => settings.enabled ?? false;
 
     function openModal() {
         openModalLazy(async () => {
@@ -110,81 +115,68 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
                 return;
             } else if (restartNeeded) {
                 // If any dependencies have patches, don't start the plugin yet.
-                pluginSettings.enabled = true;
+                settings.enabled = true;
                 onRestartNeeded(plugin.name);
                 return;
             }
         }
 
         // if the plugin has patches, dont use stopPlugin/startPlugin. Wait for restart to apply changes.
-        if (plugin.patches) {
-            pluginSettings.enabled = !wasEnabled;
+        if (plugin.patches?.length) {
+            settings.enabled = !wasEnabled;
             onRestartNeeded(plugin.name);
             return;
         }
 
         // If the plugin is enabled, but hasn't been started, then we can just toggle it off.
         if (wasEnabled && !plugin.started) {
-            pluginSettings.enabled = !wasEnabled;
+            settings.enabled = !wasEnabled;
             return;
         }
 
         const result = wasEnabled ? stopPlugin(plugin) : startPlugin(plugin);
-        const action = wasEnabled ? "stop" : "start";
 
         if (!result) {
-            logger.error(`Failed to ${action} plugin ${plugin.name}`);
-            showErrorToast(`Failed to ${action} plugin: ${plugin.name}`);
+            settings.enabled = false;
+
+            const msg = `Error while ${wasEnabled ? "stopping" : "starting"} plugin ${plugin.name}`;
+            logger.error(msg);
+            showErrorToast(msg);
             return;
         }
 
-        pluginSettings.enabled = !wasEnabled;
+        settings.enabled = !wasEnabled;
     }
 
     return (
-        <Flex style={styles.PluginsGridItem} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            <Switch
-                onChange={toggleEnabled}
-                disabled={disabled}
-                value={isEnabled()}
-                note={<Text variant="text-md/normal" style={{
-                    height: 40,
-                    overflow: "hidden",
-                    // mfw css is so bad you need whatever this is to get multi line overflow ellipsis to work
-                    textOverflow: "ellipsis",
-                    display: "-webkit-box", // firefox users will cope (it doesn't support it)
-                    WebkitLineClamp: 2,
-                    lineClamp: 2,
-                    WebkitBoxOrient: "vertical",
-                    boxOrient: "vertical"
-                }}>
-                    {plugin.description}
-                </Text>}
-                hideBorder={true}
-            >
-                <Flex style={{ marginTop: "auto", width: "100%", height: "100%", alignItems: "center" }}>
-                    <Text variant="text-md/bold" style={{ flexGrow: "1" }}>{plugin.name}</Text>
-                    <button role="switch" onClick={() => openModal()} style={styles.SettingsIcon} className="button-12Fmur">
-                        {plugin.options
-                            ? <CogWheel
-                                style={{ color: iconHover ? "" : "var(--text-muted)" }}
-                                onMouseEnter={() => setIconHover(true)}
-                                onMouseLeave={() => setIconHover(false)}
-                            />
-                            : <InfoIcon
-                                width="24" height="24"
-                                style={{ color: iconHover ? "" : "var(--text-muted)" }}
-                                onMouseEnter={() => setIconHover(true)}
-                                onMouseLeave={() => setIconHover(false)}
-                            />}
-                    </button>
-                </Flex>
-            </Switch>
-        </Flex>
+        <AddonCard
+            name={plugin.name}
+            description={plugin.description}
+            isNew={isNew}
+            enabled={isEnabled()}
+            setEnabled={toggleEnabled}
+            disabled={disabled}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            infoButton={
+                <button role="switch" onClick={() => openModal()} className={classes(ButtonClasses.button, cl("info-button"))}>
+                    {plugin.options && !isObjectEmpty(plugin.options)
+                        ? <CogWheel />
+                        : <InfoIcon />}
+                </button>
+            }
+        />
     );
 }
 
-export default ErrorBoundary.wrap(function Settings() {
+const enum SearchStatus {
+    ALL,
+    ENABLED,
+    DISABLED,
+    NEW
+}
+
+export default function PluginSettings() {
     const settings = useSettings();
     const changes = React.useMemo(() => new ChangeList<string>(), []);
 
@@ -225,41 +217,110 @@ export default ErrorBoundary.wrap(function Settings() {
     const sortedPlugins = React.useMemo(() => Object.values(Plugins)
         .sort((a, b) => a.name.localeCompare(b.name)), []);
 
-    const [searchValue, setSearchValue] = React.useState({ value: "", status: "all" });
+    const [searchValue, setSearchValue] = React.useState({ value: "", status: SearchStatus.ALL });
 
     const onSearch = (query: string) => setSearchValue(prev => ({ ...prev, value: query }));
-    const onStatusChange = (status: string) => setSearchValue(prev => ({ ...prev, status }));
+    const onStatusChange = (status: SearchStatus) => setSearchValue(prev => ({ ...prev, status }));
 
     const pluginFilter = (plugin: typeof Plugins[keyof typeof Plugins]) => {
-        const showEnabled = searchValue.status === "enabled" || searchValue.status === "all";
-        const showDisabled = searchValue.status === "disabled" || searchValue.status === "all";
-        const enabled = settings.plugins[plugin.name]?.enabled || plugin.started;
+        const enabled = settings.plugins[plugin.name]?.enabled;
+        if (enabled && searchValue.status === SearchStatus.DISABLED) return false;
+        if (!enabled && searchValue.status === SearchStatus.ENABLED) return false;
+        if (searchValue.status === SearchStatus.NEW && !newPlugins?.includes(plugin.name)) return false;
+        if (!searchValue.value.length) return true;
+
+        const v = searchValue.value.toLowerCase();
         return (
-            ((showEnabled && enabled) || (showDisabled && !enabled)) &&
-            (
-                plugin.name.toLowerCase().includes(searchValue.value.toLowerCase()) ||
-                plugin.description.toLowerCase().includes(searchValue.value.toLowerCase())
-            )
+            plugin.name.toLowerCase().includes(v) ||
+            plugin.description.toLowerCase().includes(v) ||
+            plugin.tags?.some(t => t.toLowerCase().includes(v))
         );
     };
 
+    const [newPlugins] = useAwaiter(() => DataStore.get("Vencord_existingPlugins").then((cachedPlugins: Record<string, number> | undefined) => {
+        const now = Date.now() / 1000;
+        const existingTimestamps: Record<string, number> = {};
+        const sortedPluginNames = Object.values(sortedPlugins).map(plugin => plugin.name);
+
+        const newPlugins: string[] = [];
+        for (const { name: p } of sortedPlugins) {
+            const time = existingTimestamps[p] = cachedPlugins?.[p] ?? now;
+            if ((time + 60 * 60 * 24 * 2) > now) {
+                newPlugins.push(p);
+            }
+        }
+        DataStore.set("Vencord_existingPlugins", existingTimestamps);
+
+        return lodash.isEqual(newPlugins, sortedPluginNames) ? [] : newPlugins;
+    }));
+
+    type P = JSX.Element | JSX.Element[];
+    let plugins: P, requiredPlugins: P;
+    if (sortedPlugins?.length) {
+        plugins = [];
+        requiredPlugins = [];
+
+        for (const p of sortedPlugins) {
+            if (!p.options && p.name.endsWith("API") && searchValue.value !== "API")
+                continue;
+
+            if (!pluginFilter(p)) continue;
+
+            const isRequired = p.required || 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));
+
+                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}
+                    />
+                );
+            }
+
+        }
+    } else {
+        plugins = requiredPlugins = <Text variant="text-md/normal">No plugins meet search criteria.</Text>;
+    }
+
     return (
-        <Forms.FormSection>
-            <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
+        <SettingsTab title="Plugins">
+            <ReloadRequiredCard required={changes.hasChanges} />
+
+            <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Filters
             </Forms.FormTitle>
 
-            <ReloadRequiredCard plugins={[...changes.getChanges()]} style={{ marginBottom: 16 }} />
-
-            <div style={styles.FiltersBar}>
-                <TextInput value={searchValue.value} placeholder={"Search for a plugin..."} onChange={onSearch} style={{ marginBottom: 24 }} />
+            <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: "all", default: true },
-                            { label: "Show Enabled", value: "enabled" },
-                            { label: "Show Disabled", value: "disabled" }
+                            { 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 }
                         ]}
                         serialize={String}
                         select={onStatusChange}
@@ -269,68 +330,29 @@ export default ErrorBoundary.wrap(function Settings() {
                 </div>
             </div>
 
-            <Forms.FormTitle className={Margins.marginTop20}>Plugins</Forms.FormTitle>
+            <Forms.FormTitle className={Margins.top20}>Plugins</Forms.FormTitle>
 
-            <div style={styles.PluginsGrid}>
-                {sortedPlugins?.length ? sortedPlugins
-                    .filter(a => !a.required && !dependencyCheck(a.name, depMap).length && pluginFilter(a))
-                    .map(plugin => {
-                        const enabledDependants = depMap[plugin.name]?.filter(d => settings.plugins[d].enabled);
-                        const dependency = enabledDependants?.length;
-                        return <PluginCard
-                            onRestartNeeded={name => changes.add(name)}
-                            disabled={plugin.required || !!dependency}
-                            plugin={plugin}
-                            key={plugin.name}
-                        />;
-                    })
-                    : <Text variant="text-md/normal">No plugins meet search criteria.</Text>
-                }
+            <div className={cl("grid")}>
+                {plugins}
             </div>
-            <Forms.FormDivider />
-            <Forms.FormTitle tag="h5" className={classes(Margins.marginTop20, Margins.marginBottom8)}>
+
+            <Forms.FormDivider className={Margins.top20} />
+
+            <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
                 Required Plugins
             </Forms.FormTitle>
-            <div style={styles.PluginsGrid}>
-                {sortedPlugins?.length ? sortedPlugins
-                    .filter(a => a.required || dependencyCheck(a.name, depMap).length && pluginFilter(a))
-                    .map(plugin => {
-                        const enabledDependants = depMap[plugin.name]?.filter(d => settings.plugins[d].enabled);
-                        const dependency = enabledDependants?.length;
-                        const tooltipText = plugin.required
-                            ? "This plugin is required for Vencord to function."
-                            : makeDependencyList(dependencyCheck(plugin.name, depMap));
-                        return <Tooltip text={tooltipText} key={plugin.name}>
-                            {({ onMouseLeave, onMouseEnter }) => (
-                                <PluginCard
-                                    onMouseLeave={onMouseLeave}
-                                    onMouseEnter={onMouseEnter}
-                                    onRestartNeeded={name => changes.handleChange(name)}
-                                    disabled={plugin.required || !!dependency}
-                                    plugin={plugin}
-                                />
-                            )}
-                        </Tooltip>;
-                    })
-                    : <Text variant="text-md/normal">No plugins meet search criteria.</Text>
-                }
+            <div className={cl("grid")}>
+                {requiredPlugins}
             </div>
-        </Forms.FormSection >
+        </SettingsTab >
     );
-}, {
-    message: "Failed to render the Plugin Settings. If this persists, try using the installer to reinstall!",
-    onError: handleComponentFailed,
-});
+}
 
 function makeDependencyList(deps: string[]) {
     return (
         <React.Fragment>
             <Forms.FormText>This plugin is required by:</Forms.FormText>
-            {deps.map((dep: string) => <Forms.FormText style={{ margin: "0 auto" }}>{dep}</Forms.FormText>)}
+            {deps.map((dep: string) => <Forms.FormText className={cl("dep-text")}>{dep}</Forms.FormText>)}
         </React.Fragment>
     );
 }
-
-function dependencyCheck(pluginName: string, depMap: Record<string, string[]>): string[] {
-    return depMap[pluginName]?.filter(d => Settings.plugins[d].enabled) || [];
-}

src/components/PluginSettings/styles.css

@@ -0,0 +1,85 @@
+/*
+ * 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/>.
+*/
+
+.vc-plugins-grid {
+    margin-top: 16px;
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.vc-plugins-info-button {
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    background: transparent;
+    margin-right: 8px;
+}
+
+.vc-plugins-settings-button:hover {
+    color: var(--interactive-hover);
+}
+
+.vc-plugins-filter-controls {
+    display: grid;
+    height: 40px;
+    gap: 10px;
+    grid-template-columns: 1fr 150px;
+}
+
+.vc-plugins-badge {
+    padding: 0 6px;
+    font-family: var(--font-display);
+    font-weight: 500;
+    border-radius: 8px;
+    height: 16px;
+    font-size: 12px;
+    line-height: 16px;
+    color: var(--white-500);
+    text-align: center;
+}
+
+.vc-plugins-dep-name {
+    margin: 0 auto;
+}
+
+.vc-plugins-info-card {
+    padding: 1em;
+    height: 8em;
+    display: flex;
+    flex-direction: column;
+}
+
+.vc-plugins-info-card div {
+    line-height: 32px;
+}
+
+.vc-plugins-restart-card {
+    padding: 1em;
+    background: var(--info-warning-background);
+    border: 1px solid var(--info-warning-foreground);
+    color: var(--info-warning-text);
+}
+
+.vc-plugins-restart-card button {
+    margin-top: 0.5em;
+}
+
+.vc-plugins-info-button svg:not(:hover, :focus) {
+    color: var(--text-muted);
+}

src/components/PluginSettings/styles.ts

@@ -1,50 +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/>.
-*/
-
-export const PluginsGrid: React.CSSProperties = {
-    marginTop: 16,
-    display: "grid",
-    gridGap: 16,
-    gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))",
-};
-
-export const PluginsGridItem: React.CSSProperties = {
-    backgroundColor: "var(--background-modifier-selected)",
-    color: "var(--interactive-active)",
-    borderRadius: 3,
-    cursor: "pointer",
-    display: "block",
-    height: "min-content",
-    padding: 10,
-    width: "100%",
-};
-
-export const FiltersBar: React.CSSProperties = {
-    gap: 10,
-    height: 40,
-    gridTemplateColumns: "1fr 150px",
-    display: "grid"
-};
-
-export const SettingsIcon: React.CSSProperties = {
-    height: "24px",
-    width: "24px",
-    padding: "0",
-    background: "transparent",
-    marginRight: 8
-};

src/components/Switch.css

@@ -0,0 +1,3 @@
+.vc-switch-slider {
+    transition: 100ms transform ease-in-out;
+}

src/components/Switch.tsx

@@ -0,0 +1,77 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./Switch.css";
+
+import { classes } from "@utils/misc";
+import { findByPropsLazy } from "@webpack";
+
+interface SwitchProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+}
+
+const SWITCH_ON = "var(--green-360)";
+const SWITCH_OFF = "var(--primary-400)";
+const SwitchClasses = findByPropsLazy("slider", "input", "container");
+
+export function Switch({ checked, onChange, disabled }: SwitchProps) {
+    return (
+        <div>
+            <div className={classes(SwitchClasses.container, "default-colors", checked ? SwitchClasses.checked : void 0)} style={{
+                backgroundColor: checked ? SWITCH_ON : SWITCH_OFF,
+                opacity: disabled ? 0.3 : 1
+            }}>
+                <svg
+                    className={SwitchClasses.slider + " vc-switch-slider"}
+                    viewBox="0 0 28 20"
+                    preserveAspectRatio="xMinYMid meet"
+                    aria-hidden="true"
+                    style={{
+                        transform: checked ? "translateX(12px)" : "translateX(-3px)",
+                    }}
+                >
+                    <rect fill="white" x="4" y="0" height="20" width="20" rx="10" />
+                    <svg viewBox="0 0 20 20" fill="none">
+                        {checked ? (
+                            <>
+                                <path fill={SWITCH_ON} d="M7.89561 14.8538L6.30462 13.2629L14.3099 5.25755L15.9009 6.84854L7.89561 14.8538Z" />
+                                <path fill={SWITCH_ON} d="M4.08643 11.0903L5.67742 9.49929L9.4485 13.2704L7.85751 14.8614L4.08643 11.0903Z" />
+                            </>
+                        ) : (
+                            <>
+                                <path fill={SWITCH_OFF} d="M5.13231 6.72963L6.7233 5.13864L14.855 13.2704L13.264 14.8614L5.13231 6.72963Z" />
+                                <path fill={SWITCH_OFF} d="M13.2704 5.13864L14.8614 6.72963L6.72963 14.8614L5.13864 13.2704L13.2704 5.13864Z" />
+                            </>
+                        )}
+
+                    </svg>
+                </svg>
+                <input
+                    disabled={disabled}
+                    type="checkbox"
+                    className={SwitchClasses.input}
+                    tabIndex={0}
+                    checked={checked}
+                    onChange={e => onChange(e.currentTarget.checked)}
+                />
+            </div>
+        </div>
+    );
+}

src/components/VencordSettings/AddonCard.tsx

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