bump to v1.6.3

This reverts commit 098da8c3fd95cdd1f299b86d0b919b001009a1df.

.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) 2023 Vendicated and contributors"
-                },
-                " *",
-                " * This program is free software: you can redistribute it and/or modify",
-                " * it under the terms of the GNU General Public License as published by",
-                " * the Free Software Foundation, either version 3 of the License, or",
-                " * (at your option) any later version.",
-                " *",
-                " * This program is distributed in the hope that it will be useful,",
-                " * but WITHOUT ANY WARRANTY; without even the implied warranty of",
-                " * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the",
-                " * GNU General Public License for more details.",
-                " *",
-                " * You should have received a copy of the GNU General Public License",
-                " * along with this program.  If not, see <https://www.gnu.org/licenses/>.",
-                ""
-            ],
-            2
+        "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 }],

.github/ISSUE_TEMPLATE/blank.yml

@@ -1,14 +1,23 @@
-name: Blank Template
-description: Use this only if your issue does not fit into another template. **DO NOT ASK FOR SUPPORT OR REQUEST PLUGINS**
-labels: []
+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: textarea
-    id: info-sec
+  - type: markdown
     attributes:
-      label: Tell us all about it.
-      description: Go nuts, let us know what you're wanting to bring attention to.
-      placeholder: ...
+      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
 
@@ -16,7 +25,6 @@ body:
     id: agreement-check
     attributes:
       label: Request Agreement
-      description: DO NOT USE THIS TEMPLATE FOR SUPPORT OR PLUGIN REQUESTS!!! For Support, **join our Discord**. For plugin requests, **use discussions**
       options:
-        - label: This is not a support or plugin request
+        - label: I have read the requirements for opening an issue above
           required: true

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,9 +1,22 @@
 name: Bug/Crash Report
-description: Create a bug or crash report for Vencord
+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:
@@ -64,3 +77,5 @@ body:
       options:
         - label: I am using Discord Stable or tried on Stable and this bug happens there as well
           required: true
+        - label: I have read the requirements for opening an issue above
+          required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,32 +0,0 @@
-name: Feature Request
-description: Create a feature request for Vencord. To request new plugins, please use the Discussions tab
-labels: [enhancement]
-title: "[Feature Request] <title>"
-
-body:
-  - type: input
-    id: discord
-    attributes:
-      label: Discord Account
-      description: Who on Discord is making this request? Not required but encouraged for easier follow-up
-      placeholder: username#0000
-    validations:
-      required: false
-
-  - type: textarea
-    id: feature-basic-description
-    attributes:
-      label: What is it that you'd like to see?
-      description: Describe the feature you want added as detailed as possible
-      placeholder: I think ... would be a cool feature to add. This would be awesome, thanks!
-    validations:
-      required: true
-
-  - type: checkboxes
-    id: agreement-check
-    attributes:
-      label: Request Agreement
-      description: DO NOT USE THIS TEMPLATE FOR PLUGIN REQUESTS!!! For plugin requests, **use discussions**
-      options:
-        - label: This is not a plugin request
-          required: true

.github/workflows/build.yml

@@ -38,41 +38,43 @@ jobs:
               run: pnpm build --standalone
 
             - name: Generate plugin list
-              run: pnpm generatePluginJson dist/plugins.json
+              run: pnpm generatePluginJson dist/plugins.json dist/plugin-readmes.json
 
             - name: Clean up obsolete files
               run: |
-                rm -rf dist/extension* Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
+                  rm -rf dist/*-unpacked dist/monaco Vencord.user.css vencordDesktopRenderer.css vencordDesktopRenderer.css.map
 
             - name: Get some values needed for the release
               id: release_values
               run: |
-                echo "release_tag=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
+                  echo "release_tag=$(git rev-parse --short HEAD)" >> $GITHUB_ENV
 
             - name: Upload DevBuild as release
+              if: github.repository == 'Vendicated/Vencord'
               run: |
-                gh release upload devbuild --clobber dist/*
-                gh release edit devbuild --title "DevBuild $RELEASE_TAG"
+                  gh release upload devbuild --clobber dist/*
+                  gh release edit devbuild --title "DevBuild $RELEASE_TAG"
               env:
-                GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-                RELEASE_TAG: ${{ env.release_tag }}
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  RELEASE_TAG: ${{ env.release_tag }}
 
             - name: Upload DevBuild to builds repo
+              if: github.repository == 'Vendicated/Vencord'
               run: |
-                git config --global user.name "$USERNAME"
-                git config --global user.email actions@github.com
+                  git config --global user.name "$USERNAME"
+                  git config --global user.email actions@github.com
 
-                git clone https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git upload
-                cd upload
+                  git clone https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git upload
+                  cd upload
 
-                GLOBIGNORE=.git:.gitignore:README.md:LICENSE
-                rm -rf *
-                cp -r ../dist/* .
+                  GLOBIGNORE=.git:.gitignore:README.md:LICENSE
+                  rm -rf *
+                  cp -r ../dist/* .
 
-                git add -A
-                git commit -m "Builds for https://github.com/$GITHUB_REPOSITORY/commit/$GITHUB_SHA"
-                git push --force https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git
+                  git add -A
+                  git commit -m "Builds for https://github.com/$GITHUB_REPOSITORY/commit/$GITHUB_SHA"
+                  git push --force https://$USERNAME:$API_TOKEN@github.com/$GH_REPO.git
               env:
-                API_TOKEN: ${{ secrets.BUILDS_TOKEN }}
-                GH_REPO: Vencord/builds
-                USERNAME: GitHub-Actions
+                  API_TOKEN: ${{ secrets.BUILDS_TOKEN }}
+                  GH_REPO: Vencord/builds
+                  USERNAME: GitHub-Actions

.github/workflows/codeberg-mirror.yml

@@ -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

@@ -6,6 +6,7 @@ on:
 
 jobs:
     Publish:
+        if: github.repository == 'Vendicated/Vencord'
         runs-on: ubuntu-latest
 
         steps:
@@ -13,11 +14,11 @@ jobs:
 
             - name: check that tag matches package.json version
               run: |
-                pkg_version="v$(jq -r .version < package.json)"
-                if [[ "${{ github.ref_name }}" != "$pkg_version" ]]; then
-                    echo "Tag ${{ github.ref_name }} does not match package.json version $pkg_version" >&2
-                    exit 1
-                fi
+                  pkg_version="v$(jq -r .version < package.json)"
+                  if [[ "${{ github.ref_name }}" != "$pkg_version" ]]; then
+                      echo "Tag ${{ github.ref_name }} does not match package.json version $pkg_version" >&2
+                      exit 1
+                  fi
 
             - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
@@ -35,27 +36,10 @@ jobs:
 
             - name: Publish extension
               run: |
-                cd dist/extension-unpacked
-
-                # Do not fail so that even if chrome fails, firefox gets a shot. But also store exit code to fail workflow later
-                EXIT_CODE=0
-
-                # Chrome
-                pnpx chrome-webstore-upload-cli@2.1.0 upload --auto-publish || EXIT_CODE=$?
-
-                # Firefox
-                npm i -g web-ext@7.4.0 web-ext-submit@7.4.0
-                web-ext-submit || EXIT_CODE=$?
-
-                exit $EXIT_CODE
+                  cd dist/chromium-unpacked
+                  pnpx chrome-webstore-upload-cli@2.1.0 upload --auto-publish
               env:
-                # Chrome
-                EXTENSION_ID: ${{ secrets.CHROME_EXTENSION_ID }}
-                CLIENT_ID: ${{ secrets.CHROME_CLIENT_ID }}
-                CLIENT_SECRET: ${{ secrets.CHROME_CLIENT_SECRET }}
-                REFRESH_TOKEN: ${{ secrets.CHROME_REFRESH_TOKEN }}
-
-                # Firefox
-                WEB_EXT_API_KEY: ${{ secrets.WEBEXT_USER }}
-                WEB_EXT_API_SECRET: ${{ secrets.WEBEXT_SECRET }}
-
+                  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,25 +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 scripts/generateReport.ts > dist/report.mjs
-                node dist/report.mjs >> $GITHUB_STEP_SUMMARY
+                  esbuild scripts/generateReport.ts > dist/report.mjs
+                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
               env:
-                DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
-                DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+                  DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
+                  DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
 
             - name: Create Report (Canary)
               timeout-minutes: 10
               if: success() || failure() # even run if previous one failed
               run: |
-                export PATH="$PWD/node_modules/.bin:$PATH"
-                export CHROMIUM_BIN=$(which chromium-browser)
-                export USE_CANARY=true
+                  export PATH="$PWD/node_modules/.bin:$PATH"
+                  export CHROMIUM_BIN=$(which chromium-browser)
+                  export USE_CANARY=true
 
-                esbuild scripts/generateReport.ts > dist/report.mjs
-                node dist/report.mjs >> $GITHUB_STEP_SUMMARY
+                  esbuild scripts/generateReport.ts > dist/report.mjs
+                  node dist/report.mjs >> $GITHUB_STEP_SUMMARY
               env:
-                DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
-                DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+                  DISCORD_TOKEN: ${{ secrets.DISCORD_TOKEN }}
+                  DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}

.github/workflows/test.yml

@@ -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

.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"
+            }
+        }
+    ]
+}

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,48 +1,57 @@
 # Vencord
 
+[![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 (Download Installer, open, click install button, done)
--   100+ plugins built in: [See a list](https://gist.github.com/Vendicated/8696cde7b92548064a3ae92ead84d033)
-    -   Some highlights: SpotifyControls, GameActivityToggle, Experiments, NoTrack, MessageLogger, QuickReply, Free Emotes/Stickers, CustomCommands, ShowHiddenChannels, PronounDB
+-   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)
 -   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
 
-[![Download and run the Installer ](https://img.shields.io/github/v/release/Vencord/Installer?label=Download%20Vencord%20Installer&style=for-the-badge)](https://github.com/Vencord/Installer#usage)
+Visit https://vencord.dev/download
 
-## Installing on Browser
+## Join our Support/Community Server
 
-[![Get it on the Firefox Webstore](https://blog.mozilla.org/addons/files/2015/11/get-the-addon.png)](https://addons.mozilla.org/en-GB/firefox/addon/vencord-web/) [![Get it on the Chrome Webstore](https://storage.googleapis.com/web-dev-uploads/image/WlD8wC6g8khYWPJUsQceQkhXSlv1/UV4C4ybeBTsZt43U4xis.png)](https://chrome.google.com/webstore/detail/vencord-web/cbghhgpcnddeihccjmnadmkaejncjndb)
+https://discord.gg/D9uwnFnqmd
 
-Or use the [UserScript](https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js) - Please note that the CSS Editor, Themes loaded from remote sources and co. will not work in the UserScript. Use the extension if you need any of those
+## Star History
 
-## Building from Source
-
-See the docs folder
-
-## Contributing
-
-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]
+<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>
 
 ## Disclaimer
 
 Discord is trademark of Discord Inc. and solely mentioned for the sake of descriptivity.
 Mention of it does not imply any affiliation with or endorsement by Discord Inc.
+
+<details>
+<summary>Using Vencord violates Discord's terms of service</summary>
+
+Client modifications are against Discord’s Terms of Service.
+
+However, Discord is pretty indifferent about them and there are no known cases of users getting banned for using client mods! So you should generally be fine as long as you don’t use any plugins that implement abusive behaviour. But no worries, all inbuilt plugins are safe to use!
+
+Regardless, if your account is very important to you and it getting disabled would be a disaster for you, you should probably not use any client mods (not exclusive to Vencord), just to be safe
+
+Additionally, make sure not to post screenshots with Vencord in a server where you might get banned for it
+
+</details>

browser/GMPolyfill.js

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

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

browser/content.js

@@ -4,6 +4,11 @@ if (typeof browser === "undefined") {
 
 const script = document.createElement("script");
 script.src = browser.runtime.getURL("dist/Vencord.js");
+script.id = "vencord-script";
+Object.assign(script.dataset, {
+    extensionBaseUrl: browser.runtime.getURL(""),
+    version: browser.runtime.getManifest().version
+});
 
 const style = document.createElement("link");
 style.type = "text/css";

browser/manifest.json

@@ -21,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", "dist/Vencord.css"],
+            "resources": ["dist/*", "third-party/*"],
             "matches": ["*://*.discord.com/*"]
         }
     ],
@@ -40,12 +41,5 @@
                 "path": "modifyResponseHeaders.json"
             }
         ]
-    },
-
-    "browser_specific_settings": {
-        "gecko": {
-            "id": "vencord-firefox@vendicated.dev",
-            "strict_min_version": "109.0"
-        }
     }
 }

browser/manifestv2.json

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

browser/modifyResponseHeaders.json

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

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;
+            }
+        }
+    });
+})();

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
 
@@ -62,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:
 

docs/2_PLUGINS.md

@@ -26,10 +26,6 @@ export default definePlugin({
             name: "Your Name",
         },
     ],
-    // Delete `patches` if you are not using code patches, as it will make
-    // your plugin require restarts, and your stop() method will not be
-    // invoked at all.  The presence of the key in the object alone is
-    // enough to trigger this behavior, even if the value is an empty array.
     patches: [],
     // Delete these two below if you are only using code patches
     start() {},

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.1.6",
+    "version": "1.6.3",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -11,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"
@@ -24,52 +24,57 @@
         "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 build && pnpm lint && pnpm lint-styles && 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/runInstaller.mjs",
         "watch": "node scripts/build/build.mjs --watch"
     },
     "dependencies": {
+        "@sapphi-red/web-noise-suppressor": "0.3.3",
         "@vap/core": "0.0.12",
-        "@vap/shiki": "0.10.3",
+        "@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/lodash": "^4.14.191",
-        "@types/node": "^18.11.18",
-        "@types/react": "^18.0.27",
-        "@types/react-dom": "^18.0.10",
+        "@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.49.0",
-        "@typescript-eslint/parser": "^5.49.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.18",
-        "eslint": "^8.28.0",
+        "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.6.0",
+        "puppeteer-core": "^19.11.1",
         "standalone-electron-types": "^1.0.0",
-        "stylelint": "^14.16.1",
-        "stylelint-config-standard": "^29.0.0",
-        "tsx": "^3.12.6",
-        "type-fest": "^3.5.3",
-        "typescript": "^4.9.4"
+        "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@8.1.1",
     "pnpm": {
         "patchedDependencies": {
             "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
-            "eslint@8.28.0": "patches/eslint@8.28.0.patch"
+            "eslint@8.46.0": "patches/eslint@8.46.0.patch"
         },
         "peerDependencyRules": {
             "ignoreMissing": [
@@ -89,7 +94,7 @@
         "build": {
             "overwriteDest": true
         },
-        "sourceDir": "./dist/extension-v2-unpacked"
+        "sourceDir": "./dist/firefox-unpacked"
     },
     "engines": {
         "node": ">=18",

patches/eslint@8.46.0.patch

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

scripts/build/build.mjs

@@ -19,11 +19,16 @@
 
 import esbuild from "esbuild";
 
-import { commonOpts, globPlugins, isStandalone, watch } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, 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,9 +43,7 @@ const nodeCommonOpts = {
     format: "cjs",
     platform: "node",
     target: ["esnext"],
-    minify: true,
-    bundle: true,
-    external: ["electron", ...commonOpts.external],
+    external: ["electron", "original-fs", ...commonOpts.external],
     define: defines,
 };
 
@@ -48,16 +51,7 @@ const sourceMapFooter = s => watch ? "" : `//# sourceMappingURL=vencord://${s}.j
 const sourcemap = watch ? "inline" : "external";
 
 await Promise.all([
-    // common preload
-    esbuild.build({
-        ...nodeCommonOpts,
-        entryPoints: ["src/preload.ts"],
-        outfile: "dist/preload.js",
-        footer: { js: "//# sourceURL=VencordPreload\n" + sourceMapFooter("preload") },
-        sourcemap,
-    }),
-
-    // Discord Desktop main & renderer
+    // Discord Desktop main & renderer & preload
     esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
@@ -67,7 +61,7 @@ await Promise.all([
         define: {
             ...defines,
             IS_DISCORD_DESKTOP: true,
-            IS_VENCORD_DESKTOP: false
+            IS_VESKTOP: false
         }
     }),
     esbuild.build({
@@ -85,13 +79,24 @@ await Promise.all([
         ],
         define: {
             ...defines,
-            IS_WEB: false,
             IS_DISCORD_DESKTOP: true,
-            IS_VENCORD_DESKTOP: false
+            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
+    // Vencord Desktop main & renderer & preload
     esbuild.build({
         ...nodeCommonOpts,
         entryPoints: ["src/main/index.ts"],
@@ -101,7 +106,7 @@ await Promise.all([
         define: {
             ...defines,
             IS_DISCORD_DESKTOP: false,
-            IS_VENCORD_DESKTOP: true
+            IS_VESKTOP: true
         }
     }),
     esbuild.build({
@@ -119,9 +124,20 @@ await Promise.all([
         ],
         define: {
             ...defines,
-            IS_WEB: false,
             IS_DISCORD_DESKTOP: false,
-            IS_VENCORD_DESKTOP: true
+            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 { readFileSync } from "fs";
-import { appendFile, mkdir, readFile, rm, writeFile } from "fs/promises";
+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, globPlugins, watch } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, globPlugins, VERSION, watch } from "./common.mjs";
 
 /**
  * @type {esbuild.BuildOptions}
@@ -44,30 +41,73 @@ const commonOptions = {
     target: ["esnext"],
     define: {
         IS_WEB: "true",
+        IS_EXTENSION: "false",
         IS_STANDALONE: "true",
         IS_DEV: JSON.stringify(watch),
         IS_DISCORD_DESKTOP: "false",
-        IS_VENCORD_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",
             footer: { js: "//# sourceURL=VencordWeb" },
         }),
+        esbuild.build({
+            ...commonOptions,
+            outfile: "dist/extension.js",
+            define: {
+                ...commonOptions?.define,
+                IS_EXTENSION: "true",
+            },
+            footer: { js: "//# sourceURL=VencordWeb" },
+        }),
         esbuild.build({
             ...commonOptions,
             inject: ["browser/GMPolyfill.js", ...(commonOptions?.inject || [])],
             define: {
-                "window": "unsafeWindow",
-                ...(commonOptions?.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
@@ -78,17 +118,46 @@ await Promise.all(
 );
 
 /**
-  * @type {(target: string, files: string[], shouldZip: boolean) => Promise<void>}
+ * @type {(dir: string) => Promise<string[]>}
  */
-async function buildPluginZip(target, files, shouldZip) {
+async function globDir(dir) {
+    const files = [];
+
+    for (const child of await readdir(dir, { withFileTypes: true })) {
+        const p = join(dir, child.name);
+        if (child.isDirectory())
+            files.push(...await globDir(p));
+        else
+            files.push(p);
+    }
+
+    return files;
+}
+
+/**
+ * @type {(dir: string, basePath?: string) => Promise<Record<string, string>>}
+ */
+async function loadDir(dir, basePath = "") {
+    const files = await globDir(dir);
+    return Object.fromEntries(await Promise.all(files.map(async f => [f.slice(basePath.length), await readFile(f)])));
+}
+
+/**
+  * @type {(target: string, files: string[]) => Promise<void>}
+ */
+async function buildExtension(target, files) {
     const entries = {
-        "dist/Vencord.js": await readFile("dist/browser.js"),
-        "dist/Vencord.css": await readFile("dist/browser.css"),
+        "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 = PackageJSON.version;
+                json.version = VERSION;
                 content = new TextEncoder().encode(JSON.stringify(json));
             }
 
@@ -99,31 +168,15 @@ async function buildPluginZip(target, files, shouldZip) {
         }))),
     };
 
-    if (shouldZip) {
-        return new Promise((resolve, reject) => {
-            zip(entries, {}, (err, data) => {
-                if (err) {
-                    reject(err);
-                } else {
-                    const out = join("dist", target);
-                    writeFile(out, data).then(() => {
-                        console.info("Extension written to " + out);
-                        resolve();
-                    }).catch(reject);
-                }
-            });
-        });
-    } else {
-        await rm(target, { recursive: true, force: true });
-        await Promise.all(Object.entries(entries).map(async ([file, content]) => {
-            const dest = join("dist", target, file);
-            const parentDirectory = join(dest, "..");
-            await mkdir(parentDirectory, { recursive: true });
-            await writeFile(dest, content);
-        }));
+    await rm(target, { recursive: true, force: true });
+    await Promise.all(Object.entries(entries).map(async ([file, content]) => {
+        const dest = join("dist", target, file);
+        const parentDirectory = join(dest, "..");
+        await mkdir(parentDirectory, { recursive: true });
+        await writeFile(dest, content);
+    }));
 
-        console.info("Unpacked Extension written to dist/" + target);
-    }
+    console.info("Unpacked Extension written to dist/" + target);
 }
 
 const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content => {
@@ -141,7 +194,12 @@ const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content
 
 await Promise.all([
     appendCssRuntime,
-    buildPluginZip("extension.zip", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], true),
-    buildPluginZip("extension-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], false),
+    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,20 +16,32 @@
  * 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, readFileSync } from "fs";
 import { 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()
 };
 
@@ -62,7 +74,7 @@ export const globPlugins = kind => ({
         });
 
         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;
@@ -70,16 +82,16 @@ export const globPlugins = kind => ({
                 if (!existsSync(`./src/${dir}`)) continue;
                 const files = await readdir(`./src/${dir}`);
                 for (const file of files) {
-                    if (file.startsWith(".")) continue;
+                    if (file.startsWith("_") || file.startsWith(".")) continue;
                     if (file === "index.ts") continue;
-                    const fileBits = file.split(".");
-                    if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1))) {
-                        const mod = fileBits.at(-2);
-                        if (mod === "dev" && !watch) continue;
-                        if (mod === "web" && kind === "discordDesktop") continue;
-                        if (mod === "desktop" && kind === "web") continue;
-                        if (mod === "discordDesktop" && kind !== "discordDesktop") continue;
-                        if (mod === "vencordDesktop" && kind !== "vencordDesktop") continue;
+
+                    const 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}`;
@@ -124,11 +136,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}"` };
         });

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

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

@@ -61,6 +61,13 @@ 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 + " ```";
@@ -86,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)}`);
@@ -130,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
                     }
                 ]
@@ -171,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;
@@ -186,8 +195,18 @@ page.on("console", async e => {
     } else if (isDebug) {
         console.error(e.text());
     } else if (level === "error") {
-        const text = e.text();
-        if (!text.startsWith("Failed to load resource: the server responded with a status of")) {
+        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);
         }
@@ -224,7 +243,7 @@ function runTime(token: string) {
             // Needs native server to run
             if (p.name === "WebRichPresence (arRPC)") return;
 
-            p.required = true;
+            Vencord.Settings.plugins[p.name].enabled = true;
             p.patches?.forEach(patch => {
                 patch.plugin = p.name;
                 delete patch.predicate;
@@ -249,16 +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, 100));
+                await new Promise(r => setTimeout(r, 150));
             }
             console.error("[PUP_DEBUG]", "Finished loading chunks!");
 
@@ -270,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);
     }

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/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

@@ -27,18 +27,34 @@ export { PlainSettings, Settings };
 import "./utils/quickCss";
 import "./webpack/patchWebpack";
 
+import { get as dsGet } from "./api/DataStore";
 import { showNotification } from "./api/Notifications";
-import { PlainSettings, Settings } from "./api/settings";
+import { PlainSettings, Settings } from "./api/Settings";
 import { patches, PMLogger, startAllPlugins } from "./plugins";
 import { localStorage } from "./utils/localStorage";
+import { relaunch } from "./utils/native";
 import { getCloudSettings, putCloudSettings } from "./utils/settingsSync";
-import { checkForUpdates, rebuild, update, UpdateLogger } from "./utils/updater";
+import { checkForUpdates, update, UpdateLogger } from "./utils/updater";
 import { onceReady } from "./webpack";
 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
@@ -55,7 +71,7 @@ async function syncSettings() {
                 title: "Cloud Settings",
                 body: "Your settings have been updated! Click here to restart to fully apply changes!",
                 color: "var(--green-360)",
-                onClick: () => window.DiscordNative.app.relaunch()
+                onClick: relaunch
             });
         }
     }
@@ -64,7 +80,6 @@ async function syncSettings() {
 async function init() {
     await onceReady;
     startAllPlugins();
-    Components = await import("./components");
 
     syncSettings();
 
@@ -75,23 +90,13 @@ async function init() {
 
             if (Settings.autoUpdate) {
                 await update();
-                const needsFullRestart = await rebuild();
                 if (Settings.autoUpdateNotification)
                     setTimeout(() => showNotification({
                         title: "Vencord has been updated!",
                         body: "Click here to restart",
                         permanent: true,
                         noPersist: true,
-                        onClick() {
-                            if (needsFullRestart) {
-                                if (IS_DISCORD_DESKTOP)
-                                    window.DiscordNative.app.relaunch();
-                                else
-                                    window.VencordDesktop.app.relaunch();
-                            }
-                            else
-                                location.reload();
-                        }
+                        onClick: relaunch
                     }), 10_000);
                 return;
             }
@@ -131,7 +136,7 @@ if (IS_DISCORD_DESKTOP && Settings.winNativeTitleBar && navigator.platform.toLow
     document.addEventListener("DOMContentLoaded", () => {
         document.head.append(Object.assign(document.createElement("style"), {
             id: "vencord-native-titlebar-style",
-            textContent: "[class*=titleBar-]{display: none!important}"
+            textContent: "[class*=titleBar]{display: none!important}"
         }));
     }, { once: true });
 }

src/VencordNative.ts

@@ -1,49 +1,72 @@
 /*
- * 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 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 function sendSync<T = any>(event: IpcEvents, ...args: any[]) {
+    return ipcRenderer.sendSync(event, ...args) as T;
+}
+
 export default {
-    getVersions: () => process.versions,
-    ipc: {
-        send(event: string, ...args: any[]) {
-            assertEventAllowed(event);
-            ipcRenderer.send(event, ...args);
+    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));
         },
-        sendSync<T = any>(event: string, ...args: any[]): T {
-            assertEventAllowed(event);
-            return ipcRenderer.sendSync(event, ...args);
+
+        addThemeChangeListener(cb: () => void) {
+            ipcRenderer.on(IpcEvents.THEME_UPDATE, () => cb());
         },
-        on(event: string, listener: Parameters<IpcRenderer["on"]>[1]) {
-            assertEventAllowed(event);
-            ipcRenderer.on(event, listener);
+
+        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: {
+        OpenInApp: {
+            resolveRedirect: (url: string) => invoke<string>(IpcEvents.OPEN_IN_APP__RESOLVE_REDIRECT, url),
         },
-        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);
+        VoiceMessages: {
+            readRecording: (path: string) => invoke<Uint8Array | null>(IpcEvents.VOICE_MESSAGES_READ_RECORDING, path),
         }
     }
 };

src/api/Badges.ts

@@ -22,18 +22,19 @@ 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. Required for image badges */
-    tooltip?: string;
+    description?: string;
     /** Custom component for the badge (tooltip not included) */
     component?: ComponentType<ProfileBadge & BadgeUserArgs>;
     /** The custom image to use */
     image?: string;
+    link?: string;
     /** Action to perform when you click the badge */
     onClick?(): void;
     /** Should the user display this badge? */
@@ -69,17 +70,19 @@ export function removeBadge(badge: ProfileBadge) {
  * Inject badges into the profile badges array.
  * You probably don't need to use this.
  */
-export function inject(badgeArray: ProfileBadge[], args: BadgeUserArgs) {
+export function _getBadges(args: BadgeUserArgs) {
+    const badges = [] as ProfileBadge[];
     for (const badge of Badges) {
         if (!badge.shouldShow || badge.shouldShow(args)) {
             badge.position === BadgePosition.START
-                ? badgeArray.unshift({ ...badge, ...args })
-                : badgeArray.push({ ...badge, ...args });
+                ? 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,14 +17,14 @@
 */
 
 import { mergeDefaults } from "@utils/misc";
-import { findByCodeLazy, findByPropsLazy } 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");
 
 export function generateId() {
@@ -38,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

@@ -16,20 +16,23 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import Logger from "@utils/Logger";
+import { Logger } from "@utils/Logger";
 import type { ReactElement } from "react";
 
+type ContextMenuPatchCallbackReturn = (() => void) | void;
 /**
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
+ * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type NavContextMenuPatchCallback = (children: Array<React.ReactElement>, ...args: Array<any>) => void;
+export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 /**
- * @param The navId of the context menu being patched
+ * @param navId The navId of the context menu being patched
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
+ * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<React.ReactElement>, ...args: Array<any>) => void;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -66,7 +69,7 @@ export function addGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback)
  * Remove a context menu patch
  * @param navId The navId(s) for the context menu(s) to remove the patch
  * @param patch The patch to be removed
- * @returns Wheter the patch was sucessfully removed from the context menu(s)
+ * @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];
@@ -78,21 +81,26 @@ export function removeContextMenuPatch<T extends string | Array<string>>(navId:
 
 /**
  * Remove a global context menu patch
- * @returns Wheter the patch was sucessfully removed
+ * @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 of one of its childs
- * @param id The id of the child
+ * 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, children: Array<React.ReactElement>, itemsArray?: Array<React.ReactElement>): Array<React.ReactElement> | null {
+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 (child.props?.id === id) return itemsArray ?? null;
+        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) {
@@ -112,12 +120,14 @@ export function findGroupChildrenByChildId(id: string, children: Array<React.Rea
 interface ContextMenuProps {
     contextMenuApiArguments?: Array<any>;
     navId: string;
-    children: Array<ReactElement>;
+    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);
@@ -127,7 +137,8 @@ export function _patchContextMenu(props: ContextMenuProps) {
     if (contextMenuPatches) {
         for (const patch of contextMenuPatches) {
             try {
-                patch(props.children, ...props.contextMenuApiArguments);
+                const callback = patch(props.children, ...props.contextMenuApiArguments);
+                if (!patchedMenus.has(props)) callback?.();
             } catch (err) {
                 ContextMenuLogger.error(`Patch for ${props.navId} errored,`, err);
             }
@@ -136,9 +147,12 @@ export function _patchContextMenu(props: ContextMenuProps) {
 
     for (const patch of globalPatches) {
         try {
-            patch(props.navId, props.children, ...props.contextMenuApiArguments);
+            const callback = patch(props.navId, props.children, ...props.contextMenuApiArguments);
+            if (!patchedMenus.has(props)) callback?.();
         } catch (err) {
             ContextMenuLogger.error("Global patch errored,", err);
         }
     }
+
+    patchedMenus.add(props);
 }

src/api/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

@@ -20,7 +20,6 @@ import { Channel, User } from "discord-types/general/index.js";
 
 interface DecoratorProps {
     activities: any[];
-    canUseAvatarDecorations: boolean;
     channel: Channel;
     /**
      * Only for DM members
@@ -52,9 +51,9 @@ export function removeDecorator(identifier: string) {
     decorators.delete(identifier);
 }
 
-export function __addDecoratorsToList(props: DecoratorProps): (JSX.Element | null)[] {
+export function __getDecorators(props: DecoratorProps): (JSX.Element | null)[] {
     const isInGuild = !!(props.guildId);
-    return [...decorators.values()].map(decoratorObj => {
+    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)) {

src/api/MessageEvents.ts

@@ -16,30 +16,61 @@
  * 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) => Promisable<void | { cancel: boolean; }>;
@@ -48,7 +79,8 @@ export type EditListener = (channelId: string, messageId: string, messageObj: Me
 const sendListeners = new Set<SendListener>();
 const editListeners = new Set<EditListener>();
 
-export async 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 = await listener(channelId, messageObj, extra);

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

@@ -18,7 +18,7 @@
 
 import "./styles.css";
 
-import { useSettings } from "@api/settings";
+import { useSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { classes } from "@utils/misc";
 import { React, useEffect, useMemo, useState, useStateFromStores, WindowStore } from "@webpack/common";

src/api/Notifications/Notifications.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
+import { Settings } from "@api/Settings";
 import { Queue } from "@utils/Queue";
 import { ReactDOM } from "@webpack/common";
 import type { ReactNode } from "react";
@@ -77,6 +77,8 @@ function _showNotification(notification: NotificationData, id: number) {
 }
 
 function shouldBeNative() {
+    if (typeof Notification === "undefined") return false;
+
     const { useNative } = Settings.notifications;
     if (useNative === "always") return true;
     if (useNative === "not-focused") return !document.hasFocus();

src/api/Notifications/notificationLog.tsx

@@ -17,10 +17,10 @@
 */
 
 import * as DataStore from "@api/DataStore";
-import { Settings } from "@api/settings";
+import { Settings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
-import { useAwaiter } from "@utils/misc";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { 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";

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

@@ -17,9 +17,8 @@
 */
 
 import { debounce } from "@utils/debounce";
-import IpcEvents from "@utils/IpcEvents";
 import { localStorage } from "@utils/localStorage";
-import Logger from "@utils/Logger";
+import { Logger } from "@utils/Logger";
 import { mergeDefaults } from "@utils/misc";
 import { putCloudSettings } from "@utils/settingsSync";
 import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
@@ -35,9 +34,12 @@ export interface Settings {
     useQuickCss: boolean;
     enableReactDevtools: boolean;
     themeLinks: string[];
+    enabledThemes: string[];
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
+    macosTranslucency: boolean;
+    disableMinSize: boolean;
     winNativeTitleBar: boolean;
     plugins: {
         [plugin: string]: {
@@ -67,10 +69,13 @@ const DefaultSettings: Settings = {
     autoUpdateNotification: true,
     useQuickCss: true,
     themeLinks: [],
+    enabledThemes: [],
     enableReactDevtools: false,
     frameless: false,
     transparent: false,
     winCtrlQ: false,
+    macosTranslucency: false,
+    disableMinSize: false,
     winNativeTitleBar: false,
     plugins: {},
 
@@ -90,7 +95,7 @@ const DefaultSettings: Settings = {
 };
 
 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);
@@ -104,7 +109,7 @@ const saveSettingsOnFrequentAction = debounce(async () => {
     }
 }, 60_000);
 
-type SubscriptionCallback = ((newValue: any, path: string) => void) & { _path?: string; };
+type SubscriptionCallback = ((newValue: any, path: string) => void) & { _paths?: Array<string>; };
 const subscriptions = new Set<SubscriptionCallback>();
 
 const proxyCache = {} as Record<string, any>;
@@ -161,7 +166,7 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
             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);
                 }
             }
@@ -169,7 +174,7 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
             PlainSettings.cloud.settingsSyncVersion = Date.now();
             localStorage.Vencord_settingsDirty = true;
             saveSettingsOnFrequentAction();
-            VencordNative.ipc.invoke(IpcEvents.SET_SETTINGS, JSON.stringify(root, null, 4));
+            VencordNative.settings.set(JSON.stringify(root, null, 4));
             return true;
         }
     });
@@ -232,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);
 }
 
@@ -245,17 +251,18 @@ 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<D extends SettingsDefinition, C extends SettingsChecks<D>>(def: D, checks?: C) {
-    const definedSettings: DefinedSettings<D> = {
+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;
@@ -264,9 +271,14 @@ export function definePluginSettings<D extends SettingsDefinition, C extends Set
             settings?.map(name => `plugins.${definedSettings.pluginName}.${name}`) as UseSettings<Settings>[]
         ).plugins[definedSettings.pluginName] as any,
         def,
-        checks: checks ?? {},
+        checks: checks ?? {} as any,
         pluginName: "",
+
+        withPrivateSettings<T extends object>() {
+            return this as DefinedSettings<Def, Checks, T>;
+        }
     };
+
     return definedSettings;
 }
 

src/api/SettingsStore.ts

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

src/api/Styles.ts

@@ -141,7 +141,7 @@ export const compileStyle = (style: Style) => {
  */
 export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
 
-type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
+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
@@ -154,9 +154,9 @@ type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
 export const classNameFactory = (prefix: string = "") => (...args: ClassNameFactoryArg[]) => {
     const classNames = new Set<string>();
     for (const arg of args) {
-        if (typeof arg === "string") classNames.add(arg);
+        if (arg && typeof arg === "string") classNames.add(arg);
         else if (Array.isArray(arg)) arg.forEach(name => classNames.add(name));
-        else if (typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && 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

@@ -28,7 +28,7 @@ import * as $MessagePopover from "./MessagePopover";
 import * as $Notices from "./Notices";
 import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
-import * as $SettingsStore from "./SettingsStore";
+import * as $Settings from "./Settings";
 import * as $Styles from "./Styles";
 
 /**
@@ -87,9 +87,9 @@ export const MessageDecorations = $MessageDecorations;
  */
 export const MemberListDecorators = $MemberListDecorators;
 /**
- * An API allowing you to read, manipulate and automatically update components based on Discord settings
+ * An API allowing you to persist data
  */
-export const SettingsStore = $SettingsStore;
+export const Settings = $Settings;
 /**
  * An API allowing you to dynamically load styles
  * a

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

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,51 +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 features = `popup,width=${Math.min(window.innerWidth, 1000)},height=${Math.min(window.innerHeight, 1000)}`;
-    const win = open("about:blank", "VencordQuickCss", features);
-    if (!win) {
-        alert("Failed to open QuickCSS popup. Make sure to allow popups!");
-        return;
-    }
-
-    win.setCss = setCss;
-    win.getCurrentCss = () => VencordNative.ipc.invoke(IpcEvents.GET_QUICK_CSS);
-    win.getTheme = () =>
-        find(m =>
-            m.ProtoClass?.typeName.endsWith("PreloadedUserSettings")
-        )?.getCurrentValue()?.appearance?.theme === 2
-            ? "vs-light"
-            : "vs-dark";
-
-    win.document.write(monacoHtml);
-
-    window.__VENCORD_MONACO_WIN__ = new WeakRef(win);
-}

src/components/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 { 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 { proxyLazy } from "@utils/proxyLazy";
+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,14 +88,16 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
 
     const canSubmit = () => Object.values(errors).every(e => !e);
 
-    const hasSettings = Boolean(pluginSettings && plugin.options);
+    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]);
             }
         })();
@@ -127,6 +133,8 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
             return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
         } else {
             const options = Object.entries(plugin.options).map(([key, setting]) => {
+                if (setting.hidden) return null;
+
                 function onChange(newValue: any) {
                     setTempSettings(s => ({ ...s, [key]: newValue }));
                 }
@@ -149,7 +157,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 );
             });
 
-            return <Flex flexDirection="column" style={{ gap: 12 }}>{options}</Flex>;
+            return <Flex flexDirection="column" style={{ gap: 12, marginBottom: 16 }}>{options}</Flex>;
         }
     }
 
@@ -174,12 +182,12 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     }
 
     return (
-        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM}>
+        <ModalRoot transitionState={transitionState} size={ModalSize.MEDIUM} className="vc-text-selectable">
             <ModalHeader separator={false}>
                 <Text variant="heading-lg/semibold" style={{ flexGrow: 1 }}>{plugin.name}</Text>
                 <ModalCloseButton onClick={onClose} />
             </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>
@@ -194,11 +202,24 @@ 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 tempSettings={tempSettings} />
@@ -206,7 +227,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         </Forms.FormSection>
                     </div>
                 )}
-                <Forms.FormSection>
+                <Forms.FormSection className={Margins.bottom16}>
                     <Forms.FormTitle tag="h3">Settings</Forms.FormTitle>
                     {renderSettings()}
                 </Forms.FormSection>
@@ -217,7 +238,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                         <Button
                             onClick={onClose}
                             size={Button.Sizes.SMALL}
-                            color={Button.Colors.WHITE}
+                            color={Button.Colors.PRIMARY}
                             look={Button.Looks.LINK}
                         >
                             Cancel

src/components/PluginSettings/components/SettingBooleanComponent.tsx

@@ -16,8 +16,9 @@
  * 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 ".";
 
@@ -31,11 +32,6 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
         onError(error !== null);
     }, [error]);
 
-    const options = [
-        { label: "Enabled", value: true, default: def === true },
-        { label: "Disabled", value: false, default: typeof def === "undefined" || def === false },
-    ];
-
     function handleChange(newValue: boolean): void {
         const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
@@ -49,18 +45,17 @@ export function SettingBooleanComponent({ option, pluginSettings, definedSetting
 
     return (
         <Forms.FormSection>
-            <Forms.FormTitle>{option.description}</Forms.FormTitle>
-            <Select
-                isDisabled={option.disabled?.call(definedSettings) ?? false}
-                options={options}
-                placeholder={option.placeholder ?? "Select an option"}
-                maxVisibleItems={5}
-                closeOnSelect={true}
-                select={handleChange}
-                isSelected={v => v === state}
-                serialize={v => String(v)}
+            <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/SettingTextComponent.tsx

@@ -33,11 +33,10 @@ export function SettingTextComponent({ option, pluginSettings, definedSettings,
         const isValid = option.isValid?.call(definedSettings, newValue) ?? true;
         if (typeof isValid === "string") setError(isValid);
         else if (!isValid) setError("Invalid input provided.");
-        else {
-            setError(null);
-            setState(newValue);
-            onChange(newValue);
-        }
+        else setError(null);
+
+        setState(newValue);
+        onChange(newValue);
     }
 
     return (

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

@@ -20,22 +20,21 @@ import "./styles.css";
 
 import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
-import { useSettings } from "@api/settings";
+import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
-import { handleComponentFailed } from "@components/handleComponentFailed";
-import { Badge } from "@components/PluginSettings/components";
+import { CogWheel, InfoIcon } from "@components/Icons";
 import PluginModal from "@components/PluginSettings/PluginModal";
-import { Switch } from "@components/Switch";
+import { AddonCard } from "@components/VencordSettings/AddonCard";
+import { SettingsTab } from "@components/VencordSettings/shared";
 import { ChangeList } from "@utils/ChangeList";
-import Logger from "@utils/Logger";
+import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { classes, LazyComponent, useAwaiter } from "@utils/misc";
+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, Card, Forms, Parser, React, Select, 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";
 
@@ -48,8 +47,6 @@ 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({
@@ -93,8 +90,8 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
     isNew?: boolean;
 }
 
-function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
-    const settings = useSettings([`plugins.${plugin.name}.enabled`]).plugins[plugin.name];
+export function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
+    const settings = Settings.plugins[plugin.name];
 
     const isEnabled = () => settings.enabled ?? false;
 
@@ -125,7 +122,7 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
         }
 
         // if the plugin has patches, dont use stopPlugin/startPlugin. Wait for restart to apply changes.
-        if (plugin.patches) {
+        if (plugin.patches?.length) {
             settings.enabled = !wasEnabled;
             onRestartNeeded(plugin.name);
             return;
@@ -138,11 +135,13 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
         }
 
         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;
         }
 
@@ -150,34 +149,34 @@ function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLe
     }
 
     return (
-        <Flex className={cl("card", { "card-disabled": disabled })} flexDirection="column" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-            <div className={cl("card-header")}>
-                <Text variant="text-md/bold" className={cl("name")}>
-                    {plugin.name}{isNew && <Badge text="NEW" color="#ED4245" />}
-                </Text>
+        <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
+                    {plugin.options && !isObjectEmpty(plugin.options)
                         ? <CogWheel />
-                        : <InfoIcon width="24" height="24" />}
+                        : <InfoIcon />}
                 </button>
-                <Switch
-                    checked={isEnabled()}
-                    onChange={toggleEnabled}
-                    disabled={disabled}
-                />
-            </div>
-            <Text className={cl("note")} variant="text-sm/normal">{plugin.description}</Text>
-        </Flex >
+            }
+        />
     );
 }
 
-enum SearchStatus {
+const enum SearchStatus {
     ALL,
     ENABLED,
-    DISABLED
+    DISABLED,
+    NEW
 }
 
-export default ErrorBoundary.wrap(function PluginSettings() {
+export default function PluginSettings() {
     const settings = useSettings();
     const changes = React.useMemo(() => new ChangeList<string>(), []);
 
@@ -227,10 +226,14 @@ export default ErrorBoundary.wrap(function PluginSettings() {
         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 (
-            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))
         );
     };
 
@@ -248,7 +251,7 @@ export default ErrorBoundary.wrap(function PluginSettings() {
         }
         DataStore.set("Vencord_existingPlugins", existingTimestamps);
 
-        return window._.isEqual(newPlugins, sortedPluginNames) ? [] : newPlugins;
+        return lodash.isEqual(newPlugins, sortedPluginNames) ? [] : newPlugins;
     }));
 
     type P = JSX.Element | JSX.Element[];
@@ -258,6 +261,9 @@ export default ErrorBoundary.wrap(function PluginSettings() {
         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);
@@ -298,7 +304,7 @@ export default ErrorBoundary.wrap(function PluginSettings() {
     }
 
     return (
-        <Forms.FormSection className={Margins.top16}>
+        <SettingsTab title="Plugins">
             <ReloadRequiredCard required={changes.hasChanges} />
 
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
@@ -313,7 +319,8 @@ export default ErrorBoundary.wrap(function PluginSettings() {
                         options={[
                             { label: "Show All", value: SearchStatus.ALL, default: true },
                             { label: "Show Enabled", value: SearchStatus.ENABLED },
-                            { label: "Show Disabled", value: SearchStatus.DISABLED }
+                            { label: "Show Disabled", value: SearchStatus.DISABLED },
+                            { label: "Show New", value: SearchStatus.NEW }
                         ]}
                         serialize={String}
                         select={onStatusChange}
@@ -337,12 +344,9 @@ export default ErrorBoundary.wrap(function PluginSettings() {
             <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 (

src/components/PluginSettings/styles.css

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

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

src/components/VencordSettings/BackupAndRestoreTab.tsx

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

src/components/VencordSettings/CloudTab.tsx

@@ -17,15 +17,16 @@
 */
 
 import { showNotification } from "@api/Notifications";
-import { Settings, useSettings } from "@api/settings";
+import { Settings, useSettings } from "@api/Settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
 import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
 import { Margins } from "@utils/margins";
 import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
 import { Alerts, Button, Forms, Switch, Tooltip } from "@webpack/common";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 function validateUrl(url: string) {
     try {
         new URL(url);
@@ -85,7 +86,7 @@ function SettingsSyncSection() {
                 <Button
                     size={Button.Sizes.SMALL}
                     disabled={!sectionEnabled}
-                    onClick={() => putCloudSettings()}
+                    onClick={() => putCloudSettings(true)}
                 >Sync to Cloud</Button>
                 <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
                     {({ onMouseLeave, onMouseEnter }) => (
@@ -114,7 +115,7 @@ function CloudTab() {
     const settings = useSettings(["cloud.authenticated", "cloud.url"]);
 
     return (
-        <>
+        <SettingsTab title="Vencord Cloud">
             <Forms.FormSection title="Cloud Settings" className={Margins.top16}>
                 <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
                     Vencord comes with a cloud integration that adds goodies like settings sync across devices.
@@ -157,8 +158,8 @@ function CloudTab() {
                 <Forms.FormDivider className={Margins.top16} />
             </Forms.FormSection >
             <SettingsSyncSection />
-        </>
+        </SettingsTab>
     );
 }
 
-export default ErrorBoundary.wrap(CloudTab);
+export default wrapTab(CloudTab, "Cloud");

src/components/VencordSettings/PatchHelperTab.tsx

@@ -16,16 +16,17 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { CheckedTextInput } from "@components/CheckedTextInput";
+import { CodeBlock } from "@components/CodeBlock";
 import { debounce } from "@utils/debounce";
 import { Margins } from "@utils/margins";
-import { makeCodeblock } from "@utils/misc";
 import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
+import { makeCodeblock } from "@utils/text";
 import { ReplaceFn } from "@utils/types";
 import { search } from "@webpack";
-import { Button, Clipboard, Forms, Parser, React, Switch, Text, TextInput } from "@webpack/common";
+import { Button, Clipboard, Forms, Parser, React, Switch, TextInput } from "@webpack/common";
 
-import { CheckedTextInput } from "./CheckedTextInput";
-import ErrorBoundary from "./ErrorBoundary";
+import { SettingsTab, wrapTab } from "./shared";
 
 // Do not include diff in non dev builds (side effects import)
 if (IS_DEV) {
@@ -186,9 +187,10 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                 error={error ?? replacementError}
             />
             {!isFunc && (
-                <>
+                <div className="vc-text-selectable">
                     <Forms.FormTitle>Cheat Sheet</Forms.FormTitle>
                     {Object.entries({
+                        "\\i": "Special regex escape sequence that matches identifiers (varnames, classnames, etc.)",
                         "$$": "Insert a $",
                         "$&": "Insert the entire match",
                         "$`\u200b": "Insert the substring before the match",
@@ -200,7 +202,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                             {Parser.parse("`" + placeholder + "`")}: {desc}
                         </Forms.FormText>
                     ))}
-                </>
+                </div>
             )}
 
             <Switch
@@ -257,8 +259,7 @@ function PatchHelper() {
     }
 
     return (
-        <Forms.FormSection>
-            <Text variant="heading-md/normal" tag="h2" className={Margins.bottom8}>Patch Helper</Text>
+        <SettingsTab title="Patch Helper">
             <Forms.FormTitle>find</Forms.FormTitle>
             <TextInput
                 type="text"
@@ -299,12 +300,12 @@ function PatchHelper() {
             {!!(find && match && replacement) && (
                 <>
                     <Forms.FormTitle className={Margins.top20}>Code</Forms.FormTitle>
-                    <div style={{ userSelect: "text" }}>{Parser.parse(makeCodeblock(code, "ts"))}</div>
+                    <CodeBlock lang="js" content={code} />
                     <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
                 </>
             )}
-        </Forms.FormSection>
+        </SettingsTab>
     );
 }
 
-export default IS_DEV ? ErrorBoundary.wrap(PatchHelper) : null;
+export default IS_DEV ? wrapTab(PatchHelper, "PatchHelper") : null;

src/components/VencordSettings/PluginsTab.tsx

@@ -16,7 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import ErrorBoundary from "@components/ErrorBoundary";
 import PluginSettings from "@components/PluginSettings";
 
-export default ErrorBoundary.wrap(PluginSettings);
+import { wrapTab } from "./shared";
+
+export default wrapTab(PluginSettings, "Plugins");

src/components/VencordSettings/ThemesTab.tsx

@@ -16,16 +16,36 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { useSettings } from "@api/settings";
-import ErrorBoundary from "@components/ErrorBoundary";
+import { useSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
+import { Flex } from "@components/Flex";
+import { DeleteIcon } from "@components/Icons";
 import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
-import { useAwaiter } from "@utils/misc";
-import { findLazy } from "@webpack";
-import { Card, Forms, React, TextArea } from "@webpack/common";
+import { classes } from "@utils/misc";
+import { showItemInFolder } from "@utils/native";
+import { useAwaiter } from "@utils/react";
+import { findByPropsLazy, findLazy } from "@webpack";
+import { Button, Card, FluxDispatcher, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
+import { UserThemeHeader } from "main/themes";
+import type { ComponentType, Ref, SyntheticEvent } from "react";
 
+import { AddonCard } from "./AddonCard";
+import { SettingsTab, wrapTab } from "./shared";
+
+type FileInput = ComponentType<{
+    ref: Ref<HTMLInputElement>;
+    onChange: (e: SyntheticEvent<HTMLInputElement>) => void;
+    multiple?: boolean;
+    filters?: { name?: string; extensions: string[]; }[];
+}>;
+
+const InviteActions = findByPropsLazy("resolveInvite");
+const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue && m.prototype.setRef);
 const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
+const cl = classNameFactory("vc-settings-theme-");
+
 function Validator({ link }: { link: string; }) {
     const [res, err, pending] = useAwaiter(() => fetch(link).then(res => {
         if (res.status > 300) throw `${res.status} ${res.statusText}`;
@@ -74,10 +94,191 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
     );
 }
 
-export default ErrorBoundary.wrap(function () {
-    const settings = useSettings();
-    const [themeText, setThemeText] = React.useState(settings.themeLinks.join("\n"));
+interface ThemeCardProps {
+    theme: UserThemeHeader;
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    onDelete: () => void;
+}
 
+function ThemeCard({ theme, enabled, onChange, onDelete }: ThemeCardProps) {
+    return (
+        <AddonCard
+            name={theme.name}
+            description={theme.description}
+            author={theme.author}
+            enabled={enabled}
+            setEnabled={onChange}
+            infoButton={
+                IS_WEB && (
+                    <div style={{ cursor: "pointer", color: "var(--status-danger" }} onClick={onDelete}>
+                        <DeleteIcon />
+                    </div>
+                )
+            }
+            footer={
+                <Flex flexDirection="row" style={{ gap: "0.2em" }}>
+                    {!!theme.website && <Link href={theme.website}>Website</Link>}
+                    {!!(theme.website && theme.invite) && " • "}
+                    {!!theme.invite && (
+                        <Link
+                            href={`https://discord.gg/${theme.invite}`}
+                            onClick={async e => {
+                                e.preventDefault();
+                                const { invite } = await InviteActions.resolveInvite(theme.invite, "Desktop Modal");
+                                if (!invite) return showToast("Invalid or expired invite");
+
+                                FluxDispatcher.dispatch({
+                                    type: "INVITE_MODAL_OPEN",
+                                    invite,
+                                    code: theme.invite,
+                                    context: "APP"
+                                });
+                            }}
+                        >
+                            Discord Server
+                        </Link>
+                    )}
+                </Flex>
+            }
+        />
+    );
+}
+
+enum ThemeTab {
+    LOCAL,
+    ONLINE
+}
+
+function ThemesTab() {
+    const settings = useSettings(["themeLinks", "enabledThemes"]);
+
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const [currentTab, setCurrentTab] = useState(ThemeTab.LOCAL);
+    const [themeText, setThemeText] = useState(settings.themeLinks.join("\n"));
+    const [userThemes, setUserThemes] = useState<UserThemeHeader[] | null>(null);
+    const [themeDir, , themeDirPending] = useAwaiter(VencordNative.themes.getThemesDir);
+
+    useEffect(() => {
+        refreshLocalThemes();
+    }, []);
+
+    async function refreshLocalThemes() {
+        const themes = await VencordNative.themes.getThemesList();
+        setUserThemes(themes);
+    }
+
+    // When a local theme is enabled/disabled, update the settings
+    function onLocalThemeChange(fileName: string, value: boolean) {
+        if (value) {
+            if (settings.enabledThemes.includes(fileName)) return;
+            settings.enabledThemes = [...settings.enabledThemes, fileName];
+        } else {
+            settings.enabledThemes = settings.enabledThemes.filter(f => f !== fileName);
+        }
+    }
+
+    async function onFileUpload(e: SyntheticEvent<HTMLInputElement>) {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!e.currentTarget?.files?.length) return;
+        const { files } = e.currentTarget;
+
+        const uploads = Array.from(files, file => {
+            const { name } = file;
+            if (!name.endsWith(".css")) return;
+
+            return new Promise<void>((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => {
+                    VencordNative.themes.uploadTheme(name, reader.result as string)
+                        .then(resolve)
+                        .catch(reject);
+                };
+                reader.readAsText(file);
+            });
+        });
+
+        await Promise.all(uploads);
+        refreshLocalThemes();
+    }
+
+    function renderLocalThemes() {
+        return (
+            <>
+                <Card className="vc-settings-card">
+                    <Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
+                    <div style={{ marginBottom: ".5em", display: "flex", flexDirection: "column" }}>
+                        <Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
+                            BetterDiscord Themes
+                        </Link>
+                        <Link href="https://github.com/search?q=discord+theme">GitHub</Link>
+                    </div>
+                    <Forms.FormText>If using the BD site, click on "Download" and place the downloaded .theme.css file into your themes folder.</Forms.FormText>
+                </Card>
+
+                <Forms.FormSection title="Local Themes">
+                    <Card className="vc-settings-quick-actions-card">
+                        <>
+                            {IS_WEB ?
+                                (
+                                    <Button
+                                        size={Button.Sizes.SMALL}
+                                        disabled={themeDirPending}
+                                    >
+                                        Upload Theme
+                                        <FileInput
+                                            ref={fileInputRef}
+                                            onChange={onFileUpload}
+                                            multiple={true}
+                                            filters={[{ extensions: ["css"] }]}
+                                        />
+                                    </Button>
+                                ) : (
+                                    <Button
+                                        onClick={() => showItemInFolder(themeDir!)}
+                                        size={Button.Sizes.SMALL}
+                                        disabled={themeDirPending}
+                                    >
+                                        Open Themes Folder
+                                    </Button>
+                                )}
+                            <Button
+                                onClick={refreshLocalThemes}
+                                size={Button.Sizes.SMALL}
+                            >
+                                Load missing Themes
+                            </Button>
+                            <Button
+                                onClick={() => VencordNative.quickCss.openEditor()}
+                                size={Button.Sizes.SMALL}
+                            >
+                                Edit QuickCSS
+                            </Button>
+                        </>
+                    </Card>
+
+                    <div className={cl("grid")}>
+                        {userThemes?.map(theme => (
+                            <ThemeCard
+                                key={theme.fileName}
+                                enabled={settings.enabledThemes.includes(theme.fileName)}
+                                onChange={enabled => onLocalThemeChange(theme.fileName, enabled)}
+                                onDelete={async () => {
+                                    onLocalThemeChange(theme.fileName, false);
+                                    await VencordNative.themes.deleteTheme(theme.fileName);
+                                    refreshLocalThemes();
+                                }}
+                                theme={theme}
+                            />
+                        ))}
+                    </div>
+                </Forms.FormSection>
+            </>
+        );
+    }
+
+    // When the user leaves the online theme textbox, update the settings
     function onBlur() {
         settings.themeLinks = [...new Set(
             themeText
@@ -88,42 +289,58 @@ export default ErrorBoundary.wrap(function () {
         )];
     }
 
+    function renderOnlineThemes() {
+        return (
+            <>
+                <Card className="vc-settings-card vc-text-selectable">
+                    <Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
+                    <Forms.FormText>One link per line</Forms.FormText>
+                    <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
+                </Card>
+
+                <Forms.FormSection title="Online Themes" tag="h5">
+                    <TextArea
+                        value={themeText}
+                        onChange={setThemeText}
+                        className={classes(TextAreaProps.textarea, "vc-settings-theme-links")}
+                        placeholder="Theme Links"
+                        spellCheck={false}
+                        onBlur={onBlur}
+                        rows={10}
+                    />
+                    <Validators themeLinks={settings.themeLinks} />
+                </Forms.FormSection>
+            </>
+        );
+    }
+
     return (
-        <>
-            <Card className="vc-settings-card">
-                <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
-                <Forms.FormText>One link per line</Forms.FormText>
-                <Forms.FormText>Make sure to use the raw links or github.io links!</Forms.FormText>
-                <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
-                <Forms.FormTitle tag="h5">Find Themes:</Forms.FormTitle>
-                <div style={{ marginBottom: ".5em" }}>
-                    <Link style={{ marginRight: ".5em" }} href="https://betterdiscord.app/themes">
-                        BetterDiscord Themes
-                    </Link>
-                    <Link href="https://github.com/search?q=discord+theme">GitHub</Link>
-                </div>
-                <Forms.FormText>If using the BD site, click on "Source" somewhere below the Download button</Forms.FormText>
-                <Forms.FormText>In the GitHub repository of your theme, find X.theme.css / X.css, click on it, then click the "Raw" button</Forms.FormText>
-                <Forms.FormText>
-                    If the theme has configuration that requires you to edit the file:
-                    <ul>
-                        <li>• Make a <Link href="https://github.com/signup">GitHub</Link> account</li>
-                        <li>• Click the fork button on the top right</li>
-                        <li>• Edit the file</li>
-                        <li>• Use the link to your own repository instead</li>
-                    </ul>
-                </Forms.FormText>
-            </Card>
-            <Forms.FormTitle tag="h5">Themes</Forms.FormTitle>
-            <TextArea
-                value={themeText}
-                onChange={setThemeText}
-                className={`${TextAreaProps.textarea} vc-settings-theme-links`}
-                placeholder="Theme Links"
-                spellCheck={false}
-                onBlur={onBlur}
-            />
-            <Validators themeLinks={settings.themeLinks} />
-        </>
+        <SettingsTab title="Themes">
+            <TabBar
+                type="top"
+                look="brand"
+                className="vc-settings-tab-bar"
+                selectedItem={currentTab}
+                onItemSelect={setCurrentTab}
+            >
+                <TabBar.Item
+                    className="vc-settings-tab-bar-item"
+                    id={ThemeTab.LOCAL}
+                >
+                    Local Themes
+                </TabBar.Item>
+                <TabBar.Item
+                    className="vc-settings-tab-bar-item"
+                    id={ThemeTab.ONLINE}
+                >
+                    Online Themes
+                </TabBar.Item>
+            </TabBar>
+
+            {currentTab === ThemeTab.LOCAL && renderLocalThemes()}
+            {currentTab === ThemeTab.ONLINE && renderOnlineThemes()}
+        </SettingsTab>
     );
-});
+}
+
+export default wrapTab(ThemesTab, "Themes");

src/components/VencordSettings/UpdaterTab.tsx

@@ -16,20 +16,21 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { useSettings } from "@api/settings";
-import ErrorBoundary from "@components/ErrorBoundary";
+import { useSettings } from "@api/Settings";
 import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
-import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
-import { classes, useAwaiter } from "@utils/misc";
+import { classes } from "@utils/misc";
 import { relaunch } from "@utils/native";
-import { changes, checkForUpdates, getRepo, isNewer, rebuild, update, updateError, UpdateLogger } from "@utils/updater";
+import { useAwaiter } from "@utils/react";
+import { changes, checkForUpdates, getRepo, isNewer, update, updateError, UpdateLogger } from "@utils/updater";
 import { Alerts, Button, Card, Forms, Parser, React, Switch, Toasts } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
     return async () => {
         dispatcher(true);
@@ -45,7 +46,7 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
                 if (code === "ENOENT")
                     var err = `Command \`${path}\` not found.\nPlease install it and try again`;
                 else {
-                    var err = `An error occured while running \`${cmd}\`:\n`;
+                    var err = `An error occurred while running \`${cmd}\`:\n`;
                     err += stderr || `Code \`${code}\`. See the console for more info`;
                 }
 
@@ -125,7 +126,6 @@ function Updatable(props: CommonProps) {
                     onClick={withDispatcher(setIsUpdating, async () => {
                         if (await update()) {
                             setUpdates([]);
-                            const needFullRestart = await rebuild();
                             await new Promise<void>(r => {
                                 Alerts.show({
                                     title: "Update Success!",
@@ -133,10 +133,7 @@ function Updatable(props: CommonProps) {
                                     confirmText: "Restart",
                                     cancelText: "Not now!",
                                     onConfirm() {
-                                        if (needFullRestart)
-                                            relaunch();
-                                        else
-                                            location.reload();
+                                        relaunch();
                                         r();
                                     },
                                     onCancel: r
@@ -201,7 +198,7 @@ function Updater() {
     };
 
     return (
-        <Forms.FormSection className={Margins.top16}>
+        <SettingsTab title="Vencord Updater">
             <Forms.FormTitle tag="h5">Updater Settings</Forms.FormTitle>
             <Switch
                 value={settings.notifyAboutUpdates}
@@ -229,22 +226,27 @@ function Updater() {
 
             <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
 
-            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
-                <Link href={repo}>
-                    {repo.split("/").slice(-2).join("/")}
-                </Link>
-            )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
+            <Forms.FormText className="vc-text-selectable">
+                {repoPending
+                    ? repo
+                    : err
+                        ? "Failed to retrieve - check console"
+                        : (
+                            <Link href={repo}>
+                                {repo.split("/").slice(-2).join("/")}
+                            </Link>
+                        )
+                }
+                {" "}(<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)
+            </Forms.FormText>
 
             <Forms.FormDivider className={Margins.top8 + " " + Margins.bottom8} />
 
             <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
 
             {isNewer ? <Newer {...commonProps} /> : <Updatable {...commonProps} />}
-        </Forms.FormSection >
+        </SettingsTab>
     );
 }
 
-export default IS_WEB ? null : ErrorBoundary.wrap(Updater, {
-    message: "Failed to render the Updater. If this persists, try using the installer to reinstall!",
-    onError: handleComponentFailed,
-});
+export default IS_UPDATER_DISABLED ? null : wrapTab(Updater, "Updater");

src/components/VencordSettings/VencordTab.tsx

@@ -16,19 +16,19 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-
 import { openNotificationLogModal } from "@api/Notifications/notificationLog";
-import { useSettings } from "@api/settings";
+import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { ErrorCard } from "@components/ErrorCard";
-import IpcEvents from "@utils/IpcEvents";
 import { Margins } from "@utils/margins";
-import { identity, useAwaiter } from "@utils/misc";
+import { identity } from "@utils/misc";
 import { relaunch, showItemInFolder } from "@utils/native";
+import { useAwaiter } from "@utils/react";
 import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 const cl = classNameFactory("vc-settings-");
 
 const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
@@ -39,15 +39,15 @@ type KeysOfType<Object, Type> = {
 }[keyof Object];
 
 function VencordSettings() {
-    const [settingsDir, , settingsDirPending] = useAwaiter(() => VencordNative.ipc.invoke<string>(IpcEvents.GET_SETTINGS_DIR), {
+    const [settingsDir, , settingsDirPending] = useAwaiter(VencordNative.settings.getSettingsDir, {
         fallbackValue: "Loading..."
     });
     const settings = useSettings();
-    const notifSettings = settings.notifications;
 
     const donateImage = React.useMemo(() => Math.random() > 0.5 ? DEFAULT_DONATE_IMAGE : SHIGGY_DONATE_IMAGE, []);
 
     const isWindows = navigator.platform.toLowerCase().startsWith("win");
+    const isMac = navigator.platform.toLowerCase().startsWith("mac");
 
     const Switches: Array<false | {
         key: KeysOfType<typeof settings, boolean>;
@@ -83,48 +83,53 @@ function VencordSettings() {
                 key: "winCtrlQ",
                 title: "Register Ctrl+Q as shortcut to close Discord (Alternative to Alt+F4)",
                 note: "Requires a full restart"
+            },
+            IS_DISCORD_DESKTOP && {
+                key: "disableMinSize",
+                title: "Disable minimum window size",
+                note: "Requires a full restart"
+            },
+            IS_DISCORD_DESKTOP && isMac && {
+                key: "macosTranslucency",
+                title: "Enable translucent window",
+                note: "Requires a full restart"
             }
         ];
 
     return (
-        <React.Fragment>
+        <SettingsTab title="Vencord Settings">
             <DonateCard image={donateImage} />
             <Forms.FormSection title="Quick Actions">
                 <Card className={cl("quick-actions-card")}>
-                    {IS_WEB ? (
-                        <Button
-                            onClick={() => require("../Monaco").launchMonacoEditor()}
-                            size={Button.Sizes.SMALL}
-                            disabled={settingsDir === "Loading..."}>
-                            Open QuickCSS File
-                        </Button>
-                    ) : (
-                        <React.Fragment>
+                    <React.Fragment>
+                        {!IS_WEB && (
                             <Button
                                 onClick={relaunch}
                                 size={Button.Sizes.SMALL}>
                                 Restart Client
                             </Button>
-                            <Button
-                                onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_MONACO_EDITOR)}
-                                size={Button.Sizes.SMALL}
-                                disabled={settingsDir === "Loading..."}>
-                                Open QuickCSS File
-                            </Button>
+                        )}
+                        <Button
+                            onClick={() => VencordNative.quickCss.openEditor()}
+                            size={Button.Sizes.SMALL}
+                            disabled={settingsDir === "Loading..."}>
+                            Open QuickCSS File
+                        </Button>
+                        {!IS_WEB && (
                             <Button
                                 onClick={() => showItemInFolder(settingsDir)}
                                 size={Button.Sizes.SMALL}
                                 disabled={settingsDirPending}>
                                 Open Settings Folder
                             </Button>
-                            <Button
-                                onClick={() => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")}
-                                size={Button.Sizes.SMALL}
-                                disabled={settingsDirPending}>
-                                Open in GitHub
-                            </Button>
-                        </React.Fragment>
-                    )}
+                        )}
+                        <Button
+                            onClick={() => VencordNative.native.openExternal("https://github.com/Vendicated/Vencord")}
+                            size={Button.Sizes.SMALL}
+                            disabled={settingsDirPending}>
+                            Open in GitHub
+                        </Button>
+                    </React.Fragment>
                 </Card>
             </Forms.FormSection>
 
@@ -147,8 +152,16 @@ function VencordSettings() {
             </Forms.FormSection>
 
 
+            {typeof Notification !== "undefined" && <NotificationSection settings={settings.notifications} />}
+        </SettingsTab>
+    );
+}
+
+function NotificationSection({ settings }: { settings: typeof Settings["notifications"]; }) {
+    return (
+        <>
             <Forms.FormTitle tag="h5">Notification Style</Forms.FormTitle>
-            {notifSettings.useNative !== "never" && Notification.permission === "denied" && (
+            {settings.useNative !== "never" && Notification?.permission === "denied" && (
                 <ErrorCard style={{ padding: "1em" }} className={Margins.bottom8}>
                     <Forms.FormTitle tag="h5">Desktop Notification Permission denied</Forms.FormTitle>
                     <Forms.FormText>You have denied Notification Permissions. Thus, Desktop notifications will not work!</Forms.FormText>
@@ -167,35 +180,35 @@ function VencordSettings() {
                     { label: "Only use Desktop notifications when Discord is not focused", value: "not-focused", default: true },
                     { label: "Always use Desktop notifications", value: "always" },
                     { label: "Always use Vencord notifications", value: "never" },
-                ] satisfies Array<{ value: typeof settings["notifications"]["useNative"]; } & Record<string, any>>}
+                ] satisfies Array<{ value: typeof settings["useNative"]; } & Record<string, any>>}
                 closeOnSelect={true}
-                select={v => notifSettings.useNative = v}
-                isSelected={v => v === notifSettings.useNative}
+                select={v => settings.useNative = v}
+                isSelected={v => v === settings.useNative}
                 serialize={identity}
             />
 
             <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Position</Forms.FormTitle>
             <Select
-                isDisabled={notifSettings.useNative === "always"}
+                isDisabled={settings.useNative === "always"}
                 placeholder="Notification Position"
                 options={[
                     { label: "Bottom Right", value: "bottom-right", default: true },
                     { label: "Top Right", value: "top-right" },
-                ] satisfies Array<{ value: typeof settings["notifications"]["position"]; } & Record<string, any>>}
-                select={v => notifSettings.position = v}
-                isSelected={v => v === notifSettings.position}
+                ] satisfies Array<{ value: typeof settings["position"]; } & Record<string, any>>}
+                select={v => settings.position = v}
+                isSelected={v => v === settings.position}
                 serialize={identity}
             />
 
             <Forms.FormTitle tag="h5" className={Margins.top16 + " " + Margins.bottom8}>Notification Timeout</Forms.FormTitle>
             <Forms.FormText className={Margins.bottom16}>Set to 0s to never automatically time out</Forms.FormText>
             <Slider
-                disabled={notifSettings.useNative === "always"}
+                disabled={settings.useNative === "always"}
                 markers={[0, 1000, 2500, 5000, 10_000, 20_000]}
                 minValue={0}
                 maxValue={20_000}
-                initialValue={notifSettings.timeout}
-                onValueChange={v => notifSettings.timeout = v}
+                initialValue={settings.timeout}
+                onValueChange={v => settings.timeout = v}
                 onValueRender={v => (v / 1000).toFixed(2) + "s"}
                 onMarkerRender={v => (v / 1000) + "s"}
                 stickToMarkers={false}
@@ -211,23 +224,22 @@ function VencordSettings() {
                 minValue={0}
                 maxValue={200}
                 stickToMarkers={true}
-                initialValue={notifSettings.logLimit}
-                onValueChange={v => notifSettings.logLimit = v}
+                initialValue={settings.logLimit}
+                onValueChange={v => settings.logLimit = v}
                 onValueRender={v => v === 200 ? "∞" : v}
                 onMarkerRender={v => v === 200 ? "∞" : v}
             />
 
             <Button
                 onClick={openNotificationLogModal}
-                disabled={notifSettings.logLimit === 0}
+                disabled={settings.logLimit === 0}
             >
                 Open Notification Log
             </Button>
-        </React.Fragment>
+        </>
     );
 }
 
-
 interface DonateCardProps {
     image: string;
 }
@@ -245,10 +257,14 @@ function DonateCard({ image }: DonateCardProps) {
                 src={image}
                 alt=""
                 height={128}
-                style={{ marginLeft: "auto", transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : "" }}
+                style={{
+                    imageRendering: image === SHIGGY_DONATE_IMAGE ? "pixelated" : void 0,
+                    marginLeft: "auto",
+                    transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : void 0
+                }}
             />
         </Card>
     );
 }
 
-export default ErrorBoundary.wrap(VencordSettings);
+export default wrapTab(VencordSettings, "Vencord Settings");

src/components/VencordSettings/addonCard.css

@@ -0,0 +1,64 @@
+.vc-addon-card {
+    background-color: var(--background-secondary-alt);
+    color: var(--interactive-active);
+    border-radius: 8px;
+    display: block;
+    height: 100%;
+    padding: 12px;
+    width: 100%;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+    box-sizing: border-box;
+}
+
+.vc-addon-card-disabled {
+    opacity: 0.6;
+}
+
+.vc-addon-card:hover {
+    background-color: var(--background-tertiary);
+    transform: translateY(-1px);
+    box-shadow: var(--elevation-high);
+}
+
+.vc-addon-header {
+    margin-top: auto;
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 0.5em;
+}
+
+.vc-addon-note {
+    height: 36px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+    /* stylelint-disable-next-line property-no-unknown */
+    box-orient: vertical;
+}
+
+.vc-addon-name-author {
+    width: 100%;
+}
+
+.vc-addon-name {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    flex-grow: 1;
+    gap: 8px;
+}
+
+.vc-addon-author {
+    font-size: 0.8em;
+}
+
+.vc-addon-author::before {
+    content: "by ";
+}

src/components/VencordSettings/index.tsx

@@ -1,89 +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 "./settingsStyles.css";
-
-import { classNameFactory } from "@api/Styles";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { handleComponentFailed } from "@components/handleComponentFailed";
-import { Forms, SettingsRouter, TabBar, Text } from "@webpack/common";
-
-import BackupRestoreTab from "./BackupRestoreTab";
-import CloudTab from "./CloudTab";
-import PluginsTab from "./PluginsTab";
-import ThemesTab from "./ThemesTab";
-import Updater from "./Updater";
-import VencordSettings from "./VencordTab";
-
-const cl = classNameFactory("vc-settings-");
-
-interface SettingsProps {
-    tab: string;
-}
-
-interface SettingsTab {
-    name: string;
-    component?: React.ComponentType;
-}
-
-const SettingsTabs: Record<string, SettingsTab> = {
-    VencordSettings: { name: "Vencord", component: () => <VencordSettings /> },
-    VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
-    VencordThemes: { name: "Themes", component: () => <ThemesTab /> },
-    VencordUpdater: { name: "Updater" }, // Only show updater if IS_WEB is false
-    VencordCloud: { name: "Cloud", component: () => <CloudTab /> },
-    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> }
-};
-
-if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater />;
-
-function Settings(props: SettingsProps) {
-    const { tab = "VencordSettings" } = props;
-
-    const CurrentTab = SettingsTabs[tab]?.component;
-
-    return <Forms.FormSection>
-        <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">Vencord Settings</Text>
-
-        <TabBar
-            type="top"
-            look="brand"
-            className={cl("tab-bar")}
-            selectedItem={tab}
-            onItemSelect={SettingsRouter.open}
-        >
-            {Object.entries(SettingsTabs).map(([key, { name, component }]) => {
-                if (!component) return null;
-                return <TabBar.Item
-                    id={key}
-                    className={cl("tab-bar-item")}
-                    key={key}>
-                    {name}
-                </TabBar.Item>;
-            })}
-        </TabBar>
-        <Forms.FormDivider />
-        {CurrentTab && <CurrentTab />}
-    </Forms.FormSection >;
-}
-
-export default function (props: SettingsProps) {
-    return <ErrorBoundary onError={handleComponentFailed}>
-        <Settings tab={props.tab} />
-    </ErrorBoundary>;
-}

src/components/VencordSettings/settingsStyles.css

@@ -1,6 +1,6 @@
 .vc-settings-tab-bar {
     margin-top: 20px;
-    margin-bottom: -2px;
+    margin-bottom: 10px;
     border-bottom: 2px solid var(--background-modifier-accent);
 }
 
@@ -15,7 +15,7 @@
     display: flex;
     gap: 1em;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-evenly;
     flex-grow: 1;
     flex-flow: row wrap;
     margin-bottom: 1em;
@@ -29,14 +29,12 @@
 .vc-settings-card {
     padding: 1em;
     margin-bottom: 1em;
-    margin-top: 1em;
 }
 
 .vc-backup-restore-card {
     background-color: var(--info-warning-background);
     border-color: var(--info-warning-foreground);
     color: var(--info-warning-text);
-    margin-top: 0;
 }
 
 .vc-settings-theme-links {
@@ -45,6 +43,7 @@
     color: var(--text-normal) !important;
     padding: 0.5em;
     border: 1px solid var(--background-modifier-accent);
+    max-height: unset;
 }
 
 .vc-cloud-settings-sync-grid {
@@ -57,3 +56,12 @@
     color: var(--white-500);
     background-color: var(--button-danger-background);
 }
+
+.vc-text-selectable,
+.vc-text-selectable :where([class*="text" i], [class*="title" i]) {
+    /* make text selectable, silly discord makes the entirety of settings not selectable */
+    user-select: text;
+
+    /* discord also sets cursor: default which prevents the cursor from showing as text */
+    cursor: initial;
+}

src/components/VencordSettings/shared.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 "./settingsStyles.css";
+import "./themesStyles.css";
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { handleComponentFailed } from "@components/handleComponentFailed";
+import { Margins } from "@utils/margins";
+import { onlyOnce } from "@utils/onlyOnce";
+import { Forms, Text } from "@webpack/common";
+import type { ComponentType, PropsWithChildren } from "react";
+
+export function SettingsTab({ title, children }: PropsWithChildren<{ title: string; }>) {
+    return (
+        <Forms.FormSection>
+            <Text
+                variant="heading-lg/semibold"
+                tag="h2"
+                className={Margins.bottom16}
+            >
+                {title}
+            </Text>
+
+            {children}
+        </Forms.FormSection>
+    );
+}
+
+const onError = onlyOnce(handleComponentFailed);
+
+export function wrapTab(component: ComponentType, tab: string) {
+    return ErrorBoundary.wrap(component, {
+        message: `Failed to render the ${tab} tab. If this issue persists, try using the installer to reinstall!`,
+        onError,
+    });
+}

src/components/VencordSettings/themesStyles.css

@@ -0,0 +1,29 @@
+.vc-settings-theme-grid {
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.vc-settings-theme-card {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--background-secondary-alt);
+    color: var(--interactive-active);
+    border-radius: 8px;
+    padding: 1em;
+    width: 100%;
+    transition: 0.1s ease-out;
+    transition-property: box-shadow, transform, background, opacity;
+}
+
+.vc-settings-theme-card-text {
+    text-overflow: ellipsis;
+    height: 1.2em;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.vc-settings-theme-author::before {
+    content: "by ";
+}

src/components/iconStyles.css

@@ -0,0 +1,7 @@
+.vc-open-external-icon {
+    transform: rotate(45deg);
+}
+
+.vc-owner-crown-icon {
+    color: var(--text-warning);
+}

src/components/monacoWin.html

@@ -1,52 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <meta charset="utf-8">
-    <title>QuickCss Editor</title>
-    <link rel="stylesheet" data-name="vs/editor/editor.main"
-        href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/editor/editor.main.min.css">
-    <style>
-        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 src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs/loader.min.js"></script>
-
-    <script>
-        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs' } });
-        require(["vs/editor/editor.main"], () => {
-            getCurrentCss().then(css => {
-                var 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();
-                });
-            });
-        });
-
-
-    </script>
-</body>
-
-</html>

src/debug/Tracer.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";
 
 if (IS_DEV) {
     var traces = {} as Record<string, [number, any[]]>;

src/globals.d.ts

@@ -33,10 +33,14 @@ declare global {
      * replace: `${IS_WEB}?foo:bar`
      */
     export var IS_WEB: boolean;
+    export var IS_EXTENSION: boolean;
     export var IS_DEV: boolean;
     export var IS_STANDALONE: boolean;
+    export var IS_UPDATER_DISABLED: boolean;
     export var IS_DISCORD_DESKTOP: boolean;
-    export var IS_VENCORD_DESKTOP: boolean;
+    export var IS_VESKTOP: boolean;
+    export var VERSION: string;
+    export var BUILD_TIMESTAMP: number;
 
     export var VencordNative: typeof import("./VencordNative").default;
     export var Vencord: typeof import("./Vencord");
@@ -56,7 +60,8 @@ declare global {
      * If you really must use it, mark your plugin as Desktop App only by naming it Foo.desktop.ts(x)
      */
     export var DiscordNative: any;
-    export var VencordDesktop: any;
+    export var Vesktop: any;
+    export var VesktopNative: any;
 
     interface Window {
         webpackChunkdiscord_app: {

src/main/index.ts

@@ -19,22 +19,34 @@
 import { app, protocol, session } from "electron";
 import { join } from "path";
 
-import { getSettings } from "./ipcMain";
-import { IS_VANILLA } from "./utils/constants";
+import { ensureSafePath, getSettings } from "./ipcMain";
+import { IS_VANILLA, THEMES_DIR } from "./utils/constants";
 import { installExt } from "./utils/extensions";
 
-if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
+if (IS_VESKTOP || !IS_VANILLA) {
     app.whenReady().then(() => {
         // Source Maps! Maybe there's a better way but since the renderer is executed
         // from a string I don't think any other form of sourcemaps would work
         protocol.registerFileProtocol("vencord", ({ url: unsafeUrl }, cb) => {
             let url = unsafeUrl.slice("vencord://".length);
             if (url.endsWith("/")) url = url.slice(0, -1);
+            if (url.startsWith("/themes/")) {
+                const theme = url.slice("/themes/".length);
+                const safeUrl = ensureSafePath(THEMES_DIR, theme);
+                if (!safeUrl) {
+                    cb({ statusCode: 403 });
+                    return;
+                }
+                cb(safeUrl.replace(/\?v=\d+$/, ""));
+                return;
+            }
             switch (url) {
                 case "renderer.js.map":
+                case "vencordDesktopRenderer.js.map":
                 case "preload.js.map":
-                case "patcher.js.map": // doubt
-                case "main.js.map":
+                case "vencordDesktopPreload.js.map":
+                case "patcher.js.map":
+                case "vencordDesktopMain.js.map":
                     cb(join(__dirname, url));
                     break;
                 default:
@@ -50,6 +62,10 @@ if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
         } catch { }
 
 
+        const findHeader = (headers: Record<string, string[]>, headerName: Lowercase<string>) => {
+            return Object.keys(headers).find(h => h.toLowerCase() === headerName);
+        };
+
         // Remove CSP
         type PolicyResult = Record<string, string[]>;
 
@@ -61,6 +77,7 @@ if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
                     result[directiveKey] = directiveValue;
                 }
             });
+
             return result;
         };
         const stringifyPolicy = (policy: PolicyResult): string =>
@@ -69,31 +86,39 @@ if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
                 .map(directive => directive.flat().join(" "))
                 .join("; ");
 
-        function patchCsp(headers: Record<string, string[]>, header: string) {
-            if (header in headers) {
+        const patchCsp = (headers: Record<string, string[]>) => {
+            const header = findHeader(headers, "content-security-policy");
+
+            if (header) {
                 const csp = parsePolicy(headers[header][0]);
 
                 for (const directive of ["style-src", "connect-src", "img-src", "font-src", "media-src", "worker-src"]) {
-                    csp[directive] = ["*", "blob:", "data:", "'unsafe-inline'"];
+                    csp[directive] ??= [];
+                    csp[directive].push("*", "blob:", "data:", "vencord:", "'unsafe-inline'");
                 }
+
                 // TODO: Restrict this to only imported packages with fixed version.
                 // Perhaps auto generate with esbuild
                 csp["script-src"] ??= [];
                 csp["script-src"].push("'unsafe-eval'", "https://unpkg.com", "https://cdnjs.cloudflare.com");
                 headers[header] = [stringifyPolicy(csp)];
             }
-        }
+        };
 
         session.defaultSession.webRequest.onHeadersReceived(({ responseHeaders, resourceType }, cb) => {
             if (responseHeaders) {
                 if (resourceType === "mainFrame")
-                    patchCsp(responseHeaders, "content-security-policy");
+                    patchCsp(responseHeaders);
 
                 // Fix hosts that don't properly set the css content type, such as
                 // raw.githubusercontent.com
-                if (resourceType === "stylesheet")
-                    responseHeaders["content-type"] = ["text/css"];
+                if (resourceType === "stylesheet") {
+                    const header = findHeader(responseHeaders, "content-type");
+                    if (header)
+                        responseHeaders[header] = ["text/css"];
+                }
             }
+
             cb({ cancel: false, responseHeaders });
         });
 

src/main/ipcMain.ts

@@ -17,25 +17,60 @@
 */
 
 import "./updater";
+import "./ipcPlugins";
 
 import { debounce } from "@utils/debounce";
-import IpcEvents from "@utils/IpcEvents";
+import { IpcEvents } from "@utils/IpcEvents";
 import { Queue } from "@utils/Queue";
-import { BrowserWindow, ipcMain, shell } from "electron";
+import { BrowserWindow, ipcMain, shell, systemPreferences } from "electron";
 import { mkdirSync, readFileSync, watch } from "fs";
-import { open, readFile, writeFile } from "fs/promises";
-import { join } from "path";
+import { open, readdir, readFile, writeFile } from "fs/promises";
+import { join, normalize } from "path";
 
-import monacoHtml from "~fileContent/../components/monacoWin.html;base64";
+import monacoHtml from "~fileContent/monacoWin.html;base64";
 
-import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE } from "./utils/constants";
+import { getThemeInfo, stripBOM, UserThemeHeader } from "./themes";
+import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE, THEMES_DIR } from "./utils/constants";
+import { makeLinksOpenExternally } from "./utils/externalLinks";
 
 mkdirSync(SETTINGS_DIR, { recursive: true });
+mkdirSync(THEMES_DIR, { recursive: true });
+
+export function ensureSafePath(basePath: string, path: string) {
+    const normalizedBasePath = normalize(basePath);
+    const newPath = join(basePath, path);
+    const normalizedPath = normalize(newPath);
+    return normalizedPath.startsWith(normalizedBasePath) ? normalizedPath : null;
+}
 
 function readCss() {
     return readFile(QUICKCSS_PATH, "utf-8").catch(() => "");
 }
 
+async function listThemes(): Promise<UserThemeHeader[]> {
+    const files = await readdir(THEMES_DIR).catch(() => []);
+
+    const themeInfo: UserThemeHeader[] = [];
+
+    for (const fileName of files) {
+        if (!fileName.endsWith(".css")) continue;
+
+        const data = await getThemeData(fileName).then(stripBOM).catch(() => null);
+        if (data == null) continue;
+
+        themeInfo.push(getThemeInfo(data, fileName));
+    }
+
+    return themeInfo;
+}
+
+function getThemeData(fileName: string) {
+    fileName = fileName.replace(/\?v=\d+$/, "");
+    const safePath = ensureSafePath(THEMES_DIR, fileName);
+    if (!safePath) return Promise.reject(`Unsafe path ${fileName}`);
+    return readFile(safePath, "utf-8");
+}
+
 export function readSettings() {
     try {
         return readFileSync(SETTINGS_FILE, "utf-8");
@@ -44,7 +79,7 @@ export function readSettings() {
     }
 }
 
-export function getSettings(): typeof import("@api/settings").Settings {
+export function getSettings(): typeof import("@api/Settings").Settings {
     try {
         return JSON.parse(readSettings());
     } catch {
@@ -74,6 +109,14 @@ ipcMain.handle(IpcEvents.SET_QUICK_CSS, (_, css) =>
     cssWriteQueue.push(() => writeFile(QUICKCSS_PATH, css))
 );
 
+ipcMain.handle(IpcEvents.GET_THEMES_DIR, () => THEMES_DIR);
+ipcMain.handle(IpcEvents.GET_THEMES_LIST, () => listThemes());
+ipcMain.handle(IpcEvents.GET_THEME_DATA, (_, fileName) => getThemeData(fileName));
+ipcMain.handle(IpcEvents.GET_THEME_SYSTEM_VALUES, () => ({
+    // win & mac only
+    "os-accent-color": `#${systemPreferences.getAccentColor?.() || ""}`
+}));
+
 ipcMain.handle(IpcEvents.GET_SETTINGS_DIR, () => SETTINGS_DIR);
 ipcMain.on(IpcEvents.GET_SETTINGS, e => e.returnValue = readSettings());
 
@@ -89,19 +132,26 @@ export function initIpc(mainWindow: BrowserWindow) {
             mainWindow.webContents.postMessage(IpcEvents.QUICK_CSS_UPDATE, await readCss());
         }, 50));
     });
+
+    watch(THEMES_DIR, { persistent: false }, debounce(() => {
+        mainWindow.webContents.postMessage(IpcEvents.THEME_UPDATE, void 0);
+    }));
 }
 
 ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
     const win = new BrowserWindow({
-        title: "QuickCss Editor",
+        title: "Vencord QuickCSS Editor",
         autoHideMenuBar: true,
         darkTheme: true,
         webPreferences: {
-            preload: join(__dirname, "preload.js"),
+            preload: join(__dirname, IS_DISCORD_DESKTOP ? "preload.js" : "vencordDesktopPreload.js"),
             contextIsolation: true,
             nodeIntegration: false,
             sandbox: false
         }
     });
+
+    makeLinksOpenExternally(win);
+
     await win.loadURL(`data:text/html;base64,${monacoHtml}`);
 });

src/main/ipcPlugins.ts

@@ -0,0 +1,89 @@
+/*
+ * 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 { IpcEvents } from "@utils/IpcEvents";
+import { app, ipcMain } from "electron";
+import { readFile } from "fs/promises";
+import { request } from "https";
+import { basename, normalize } from "path";
+
+import { getSettings } from "./ipcMain";
+
+// FixSpotifyEmbeds
+app.on("browser-window-created", (_, win) => {
+    win.webContents.on("frame-created", (_, { frame }) => {
+        frame.once("dom-ready", () => {
+            if (frame.url.startsWith("https://open.spotify.com/embed/")) {
+                const settings = getSettings().plugins?.FixSpotifyEmbeds;
+                if (!settings?.enabled) return;
+
+                frame.executeJavaScript(`
+                    const original = Audio.prototype.play;
+                    Audio.prototype.play = function() {
+                        this.volume = ${(settings.volume / 100) || 0.1};
+                        return original.apply(this, arguments);
+                    }
+                `);
+            }
+        });
+    });
+});
+
+// #region OpenInApp
+// These links don't support CORS, so this has to be native
+const validRedirectUrls = /^https:\/\/(spotify\.link|s\.team)\/.+$/;
+
+function getRedirect(url: string) {
+    return new Promise<string>((resolve, reject) => {
+        const req = request(new URL(url), { method: "HEAD" }, res => {
+            resolve(
+                res.headers.location
+                    ? getRedirect(res.headers.location)
+                    : url
+            );
+        });
+        req.on("error", reject);
+        req.end();
+    });
+}
+
+ipcMain.handle(IpcEvents.OPEN_IN_APP__RESOLVE_REDIRECT, async (_, url: string) => {
+    if (!validRedirectUrls.test(url)) return url;
+
+    return getRedirect(url);
+});
+// #endregion
+
+
+// #region VoiceMessages
+ipcMain.handle(IpcEvents.VOICE_MESSAGES_READ_RECORDING, async (_, filePath: string) => {
+    filePath = normalize(filePath);
+    const filename = basename(filePath);
+    const discordBaseDirWithTrailingSlash = normalize(app.getPath("userData") + "/");
+    console.log(filename, discordBaseDirWithTrailingSlash, filePath);
+    if (filename !== "recording.ogg" || !filePath.startsWith(discordBaseDirWithTrailingSlash)) return null;
+
+    try {
+        const buf = await readFile(filePath);
+        return new Uint8Array(buf.buffer);
+    } catch {
+        return null;
+    }
+});
+
+// #endregion

src/main/monacoWin.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <title>Vencord QuickCSS Editor</title>
+        <link
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/editor/editor.main.min.css"
+            integrity="sha512-MOoQ02h80hklccfLrXFYkCzG+WVjORflOp9Zp8dltiaRP+35LYnO4LKOklR64oMGfGgJDLO8WJpkM1o5gZXYZQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        />
+        <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
+            src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs/loader.min.js"
+            integrity="sha512-QzMpXeCPciAHP4wbYlV2PYgrQcaEkDQUjzkPU4xnjyVSD9T36/udamxtNBqb4qK4/bMQMPZ8ayrBe9hrGdBFjQ=="
+            crossorigin="anonymous"
+            referrerpolicy="no-referrer"
+        ></script>
+
+        <script>
+            require.config({
+                paths: {
+                    vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.40.0/min/vs",
+                },
+            });
+
+            require(["vs/editor/editor.main"], () => {
+                getCurrentCss().then((css) => {
+                    var 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();
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>

src/main/patchWin32Updater.ts

@@ -16,22 +16,10 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { app, autoUpdater } from "electron";
-import { existsSync, mkdirSync, readdirSync, renameSync, statSync, writeFileSync } from "fs";
+import { app } from "electron";
+import { existsSync, mkdirSync, readdirSync, renameSync, statSync, writeFileSync } from "original-fs";
 import { basename, dirname, join } from "path";
 
-const { setAppUserModelId } = app;
-
-// Apparently requiring Discords updater too early leads into issues,
-// copied this workaround from powerCord
-app.setAppUserModelId = function (id: string) {
-    app.setAppUserModelId = setAppUserModelId;
-
-    setAppUserModelId.call(this, id);
-
-    patchUpdater();
-};
-
 function isNewer($new: string, old: string) {
     const newParts = $new.slice(4).split(".").map(Number);
     const oldParts = old.slice(4).split(".").map(Number);
@@ -77,23 +65,6 @@ function patchLatest() {
     }
 }
 
-// Windows Host Updates install to a new folder app-{HOST_VERSION}, so we
-// need to reinject
-function patchUpdater() {
-    try {
-        const autoStartScript = join(require.main!.filename, "..", "autoStart", "win32.js");
-        const { update } = require(autoStartScript);
-
-        require.cache[autoStartScript]!.exports.update = function () {
-            update.apply(this, arguments);
-            patchLatest();
-        };
-    } catch {
-        // OpenAsar uses electrons autoUpdater on Windows
-        const { quitAndInstall } = autoUpdater;
-        autoUpdater.quitAndInstall = function () {
-            patchLatest();
-            quitAndInstall.call(this);
-        };
-    }
-}
+// Try to patch latest on before-quit
+// Discord's Win32 updater will call app.quit() on restart and open new version on will-quit
+app.on("before-quit", patchLatest);

src/main/patcher.ts

@@ -71,7 +71,7 @@ if (!IS_VANILLA) {
         constructor(options: BrowserWindowConstructorOptions) {
             if (options?.webPreferences?.preload && options.title) {
                 const original = options.webPreferences.preload;
-                options.webPreferences.preload = join(__dirname, "preload.js");
+                options.webPreferences.preload = join(__dirname, IS_DISCORD_DESKTOP ? "preload.js" : "vencordDesktopPreload.js");
                 options.webPreferences.sandbox = false;
                 if (settings.frameless) {
                     options.frame = false;
@@ -85,6 +85,11 @@ if (!IS_VANILLA) {
                     options.backgroundColor = "#00000000";
                 }
 
+                if (settings.macosTranslucency && process.platform === "darwin") {
+                    options.backgroundColor = "#00000000";
+                    options.vibrancy = "sidebar";
+                }
+
                 process.env.DISCORD_PRELOAD = original;
 
                 super(options);
@@ -106,10 +111,17 @@ if (!IS_VANILLA) {
         BrowserWindow
     };
 
-    // Patch appSettings to force enable devtools
-    onceDefined(global, "appSettings", s =>
-        s.set("DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING", true)
-    );
+    // Patch appSettings to force enable devtools and optionally disable min size
+    onceDefined(global, "appSettings", s => {
+        s.set("DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING", true);
+        if (settings.disableMinSize) {
+            s.set("MIN_WIDTH", 0);
+            s.set("MIN_HEIGHT", 0);
+        } else {
+            s.set("MIN_WIDTH", 940);
+            s.set("MIN_HEIGHT", 500);
+        }
+    });
 
     process.env.DATA_DIR = join(app.getPath("userData"), "..", "Vencord");
 } else {

src/main/themes/LICENSE

@@ -0,0 +1,177 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS

src/main/themes/index.ts

@@ -0,0 +1,81 @@
+/* eslint-disable simple-header/header */
+
+/*!
+ * BetterDiscord addon meta parser
+ * Copyright 2023 BetterDiscord contributors
+ * Copyright 2023 Vendicated and Vencord contributors
+ *
+ * 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.
+ */
+
+const splitRegex = /[^\S\r\n]*?\r?(?:\r\n|\n)[^\S\r\n]*?\*[^\S\r\n]?/;
+const escapedAtRegex = /^\\@/;
+
+export interface UserThemeHeader {
+    fileName: string;
+    name: string;
+    author: string;
+    description: string;
+    version?: string;
+    license?: string;
+    source?: string;
+    website?: string;
+    invite?: string;
+}
+
+function makeHeader(fileName: string, opts: Partial<UserThemeHeader> = {}): UserThemeHeader {
+    return {
+        fileName,
+        name: opts.name ?? fileName.replace(/\.css$/i, ""),
+        author: opts.author ?? "Unknown Author",
+        description: opts.description ?? "A Discord Theme.",
+        version: opts.version,
+        license: opts.license,
+        source: opts.source,
+        website: opts.website,
+        invite: opts.invite
+    };
+}
+
+export function stripBOM(fileContent: string) {
+    if (fileContent.charCodeAt(0) === 0xFEFF) {
+        fileContent = fileContent.slice(1);
+    }
+    return fileContent;
+}
+
+export function getThemeInfo(css: string, fileName: string): UserThemeHeader {
+    if (!css) return makeHeader(fileName);
+
+    const block = css.split("/**", 2)?.[1]?.split("*/", 1)?.[0];
+    if (!block) return makeHeader(fileName);
+
+    const header: Partial<UserThemeHeader> = {};
+    let field = "";
+    let accum = "";
+    for (const line of block.split(splitRegex)) {
+        if (line.length === 0) continue;
+        if (line.charAt(0) === "@" && line.charAt(1) !== " ") {
+            header[field] = accum.trim();
+            const l = line.indexOf(" ");
+            field = line.substring(1, l);
+            accum = line.substring(l + 1);
+        }
+        else {
+            accum += " " + line.replace("\\n", "\n").replace(escapedAtRegex, "@");
+        }
+    }
+    header[field] = accum.trim();
+    delete header[""];
+    return makeHeader(fileName, header);
+}

src/main/updater/common.ts

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

src/main/updater/git.ts

@@ -16,13 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import IpcEvents from "@utils/IpcEvents";
+import { IpcEvents } from "@utils/IpcEvents";
 import { execFile as cpExecFile } from "child_process";
 import { ipcMain } from "electron";
 import { join } from "path";
 import { promisify } from "util";
 
-import { calculateHashes, serializeErrors } from "./common";
+import { serializeErrors } from "./common";
 
 const VENCORD_SRC_DIR = join(__dirname, "..");
 
@@ -49,7 +49,9 @@ async function getRepo() {
 async function calculateGitChanges() {
     await git("fetch");
 
-    const res = await git("log", "HEAD...origin/main", "--pretty=format:%an/%h/%s");
+    const branch = await git("branch", "--show-current");
+
+    const res = await git("log", `HEAD...origin/${branch.stdout.trim()}`, "--pretty=format:%an/%h/%s");
 
     const commits = res.stdout.trim();
     return commits ? commits.split("\n").map(line => {
@@ -76,7 +78,6 @@ async function build() {
     return !res.stderr.includes("Build failed");
 }
 
-ipcMain.handle(IpcEvents.GET_HASHES, serializeErrors(calculateHashes));
 ipcMain.handle(IpcEvents.GET_REPO, serializeErrors(getRepo));
 ipcMain.handle(IpcEvents.GET_UPDATES, serializeErrors(calculateGitChanges));
 ipcMain.handle(IpcEvents.UPDATE, serializeErrors(pull));

src/main/updater/http.ts

@@ -17,7 +17,7 @@
 */
 
 import { VENCORD_USER_AGENT } from "@utils/constants";
-import IpcEvents from "@utils/IpcEvents";
+import { IpcEvents } from "@utils/IpcEvents";
 import { ipcMain } from "electron";
 import { writeFile } from "fs/promises";
 import { join } from "path";
@@ -26,7 +26,7 @@ import gitHash from "~git-hash";
 import gitRemote from "~git-remote";
 
 import { get } from "../utils/simpleGet";
-import { calculateHashes, serializeErrors } from "./common";
+import { serializeErrors, VENCORD_FILES } from "./common";
 
 const API_BASE = `https://api.github.com/repos/${gitRemote}`;
 let PendingUpdates = [] as [string, string][];
@@ -57,13 +57,6 @@ async function calculateGitChanges() {
     }));
 }
 
-const FILES_TO_DOWNLOAD = [
-    IS_DISCORD_DESKTOP ? "patcher.js" : "vencordDesktopMain.js",
-    "preload.js",
-    IS_DISCORD_DESKTOP ? "renderer.js" : "vencordDesktopRenderer.js",
-    "renderer.css"
-];
-
 async function fetchUpdates() {
     const release = await githubGet("/releases/latest");
 
@@ -73,7 +66,7 @@ async function fetchUpdates() {
         return false;
 
     data.assets.forEach(({ name, browser_download_url }) => {
-        if (FILES_TO_DOWNLOAD.some(s => name.startsWith(s))) {
+        if (VENCORD_FILES.some(s => name.startsWith(s))) {
             PendingUpdates.push([name, browser_download_url]);
         }
     });
@@ -83,13 +76,7 @@ async function fetchUpdates() {
 async function applyUpdates() {
     await Promise.all(PendingUpdates.map(
         async ([name, data]) => writeFile(
-            join(
-                __dirname,
-                IS_VENCORD_DESKTOP
-                    // vencordDesktopRenderer.js -> renderer.js
-                    ? name.replace(/vencordDesktop(\w)/, (_, c) => c.toLowerCase())
-                    : name
-            ),
+            join(__dirname, name),
             await get(data)
         )
     ));
@@ -97,7 +84,6 @@ async function applyUpdates() {
     return true;
 }
 
-ipcMain.handle(IpcEvents.GET_HASHES, serializeErrors(calculateHashes));
 ipcMain.handle(IpcEvents.GET_REPO, serializeErrors(() => `https://github.com/${gitRemote}`));
 ipcMain.handle(IpcEvents.GET_UPDATES, serializeErrors(calculateGitChanges));
 ipcMain.handle(IpcEvents.UPDATE, serializeErrors(fetchUpdates));

src/main/updater/index.ts

@@ -16,4 +16,5 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import(IS_STANDALONE ? "./http" : "./git");
+if (!IS_UPDATER_DISABLED)
+    import(IS_STANDALONE ? "./http" : "./git");

src/main/utils/constants.ts

@@ -25,13 +25,15 @@ export const DATA_DIR = process.env.VENCORD_USER_DATA_DIR ?? (
         : join(app.getPath("userData"), "..", "Vencord")
 );
 export const SETTINGS_DIR = join(DATA_DIR, "settings");
+export const THEMES_DIR = join(DATA_DIR, "themes");
 export const QUICKCSS_PATH = join(SETTINGS_DIR, "quickCss.css");
 export const SETTINGS_FILE = join(SETTINGS_DIR, "settings.json");
 export const ALLOWED_PROTOCOLS = [
     "https:",
     "http:",
     "steam:",
-    "spotify:"
+    "spotify:",
+    "com.epicgames.launcher:",
 ];
 
 export const IS_VANILLA = /* @__PURE__ */ process.argv.includes("--vanilla");