fix: merge tti components, use css file

.github/workflows/build.yml

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

browser/VencordNativeStub.ts

@@ -19,11 +19,9 @@
 /// <reference path="../src/modules.d.ts" />
 /// <reference path="../src/globals.d.ts" />
 
-import monacoHtmlLocal from "~fileContent/monacoWin.html";
+import monacoHtml from "~fileContent/../src/components/monacoWin.html";
-import monacoHtmlCdn from "~fileContent/../src/main/monacoWin.html";
 import * as DataStore from "../src/api/DataStore";
 import { debounce } from "../src/utils";
-import { EXTENSION_BASE_URL } from "../src/utils/web-metadata";
 import { getTheme, Theme } from "../src/utils/discord";
 import { getThemeInfo } from "../src/main/themes";
 
@@ -82,7 +80,6 @@ window.VencordNative = {
                 return;
             }
 
-            win.baseUrl = EXTENSION_BASE_URL;
             win.setCss = setCssDebounced;
             win.getCurrentCss = () => VencordNative.quickCss.get();
             win.getTheme = () =>
@@ -90,7 +87,7 @@ window.VencordNative = {
                     ? "vs-light"
                     : "vs-dark";
 
-            win.document.write(IS_EXTENSION ? monacoHtmlLocal : monacoHtmlCdn);
+            win.document.write(monacoHtml);
         },
     },
 

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,11 +4,6 @@ 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

@@ -28,7 +28,7 @@
 
     "web_accessible_resources": [
         {
-            "resources": ["dist/*", "third-party/*"],
+            "resources": ["dist/Vencord.js", "dist/Vencord.css"],
             "matches": ["*://*.discord.com/*"]
         }
     ],

browser/manifestv2.json

@@ -26,7 +26,11 @@
         }
     ],
 
-    "web_accessible_resources": ["dist/*", "third-party/*"],
+    "background": {
+        "scripts": ["background.js"]
+    },
+
+    "web_accessible_resources": ["dist/Vencord.js", "dist/Vencord.css"],
 
     "browser_specific_settings": {
         "gecko": {

browser/monaco.ts

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

browser/monacoWin.html

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

browser/patch-worker.js

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

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.5.1",
+    "version": "1.4.7",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -36,13 +36,10 @@
         "@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/chrome": "^0.0.246",
         "@types/diff": "^5.0.3",
         "@types/lodash": "^4.14.194",
         "@types/node": "^18.16.3",
@@ -67,8 +64,7 @@
         "stylelint-config-standard": "^33.0.0",
         "tsx": "^3.12.7",
         "type-fest": "^3.9.0",
-        "typescript": "^5.0.4",
+        "typescript": "^5.0.4"
-        "zip-local": "^0.3.5"
     },
     "packageManager": "pnpm@8.1.1",
     "pnpm": {

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 patchedDependencies:
   eslint-plugin-path-alias@1.0.0:
     hash: m6sma4g6bh67km3q6igf6uxaja
@@ -28,12 +24,6 @@ dependencies:
   fflate:
     specifier: ^0.7.4
     version: 0.7.4
-  gifenc:
-    specifier: github:mattdesl/gifenc#64842fca317b112a8590f8fef2bf3825da8f6fe3
-    version: github.com/mattdesl/gifenc/64842fca317b112a8590f8fef2bf3825da8f6fe3
-  monaco-editor:
-    specifier: ^0.43.0
-    version: 0.43.0
   nanoid:
     specifier: ^4.0.2
     version: 4.0.2
@@ -42,9 +32,6 @@ dependencies:
     version: 1.0.1
 
 devDependencies:
-  '@types/chrome':
-    specifier: ^0.0.246
-    version: 0.0.246
   '@types/diff':
     specifier: ^5.0.3
     version: 5.0.3
@@ -120,9 +107,6 @@ devDependencies:
   typescript:
     specifier: ^5.0.4
     version: 5.0.4
-  zip-local:
-    specifier: ^0.3.5
-    version: 0.3.5
 
 packages:
 
@@ -536,31 +520,10 @@ packages:
     resolution: {integrity: sha512-gAC33DCXYwNTI/k1PxOVHmbbzakUSMbb/DHpoV6rn4pKZtPI1dduULSmAAm/y1ipgIlArnk2JcnQzw4n2tCZHw==}
     dev: false
 
-  /@types/chrome@0.0.246:
-    resolution: {integrity: sha512-MxGxEomGxsJiL9xe/7ZwVgwdn8XVKWbPvxpVQl3nWOjrS0Ce63JsfzxUc4aU3GvRcUPYsfufHmJ17BFyKxeA4g==}
-    dependencies:
-      '@types/filesystem': 0.0.33
-      '@types/har-format': 1.2.13
-    dev: true
-
   /@types/diff@5.0.3:
     resolution: {integrity: sha512-amrLbRqTU9bXMCc6uX0sWpxsQzRIo9z6MJPkH1pkez/qOxuqSZVuryJAWoBRq94CeG8JxY+VK4Le9HtjQR5T9A==}
     dev: true
 
-  /@types/filesystem@0.0.33:
-    resolution: {integrity: sha512-2KedRPzwu2K528vFkoXnnWdsG0MtUwPjuA7pRy4vKxlxHEe8qUDZibYHXJKZZr2Cl/ELdCWYqyb/MKwsUuzBWw==}
-    dependencies:
-      '@types/filewriter': 0.0.30
-    dev: true
-
-  /@types/filewriter@0.0.30:
-    resolution: {integrity: sha512-lB98tui0uxc7erbj0serZfJlHKLNJHwBltPnbmO1WRpL5T325GOHRiQfr2E29V2q+S1brDO63Fpdt6vb3bES9Q==}
-    dev: true
-
-  /@types/har-format@1.2.13:
-    resolution: {integrity: sha512-PwBsCBD3lDODn4xpje3Y1di0aDJp4Ww7aSfMRVw6ysnxD4I7Wmq2mBkSKaDtN403hqH5sp6c9xQUvFYY3+lkBg==}
-    dev: true
-
   /@types/json-schema@7.0.11:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
@@ -880,10 +843,6 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /async@1.5.2:
-    resolution: {integrity: sha512-nSVgobk4rv61R9PUSDtYt7mPVB2olxNR5RWJcAsH676/ef11bUZwvu7+RGYrYauVdDPcO519v68wRhXQtxsV9w==}
-    dev: true
-
   /atob@2.1.2:
     resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
     engines: {node: '>= 4.5.0'}
@@ -1908,10 +1867,6 @@ packages:
     resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
     dev: true
 
-  /graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-    dev: true
-
   /grapheme-splitter@1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
     dev: true
@@ -2229,12 +2184,6 @@ packages:
     resolution: {integrity: sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==}
     dev: false
 
-  /jszip@2.7.0:
-    resolution: {integrity: sha512-JIsRKRVC3gTRo2vM4Wy9WBC3TRcfnIZU8k65Phi3izkvPH975FowRYtKGT6PxevA0XnJ/yO8b0QwV0ydVyQwfw==}
-    dependencies:
-      pako: 1.0.11
-    dev: true
-
   /kind-of@3.2.2:
     resolution: {integrity: sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==}
     engines: {node: '>=0.10.0'}
@@ -2405,10 +2354,6 @@ packages:
     resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
     dev: true
 
-  /monaco-editor@0.43.0:
-    resolution: {integrity: sha512-cnoqwQi/9fml2Szamv1XbSJieGJ1Dc8tENVMD26Kcfl7xGQWp7OBKMjlwKVGYFJ3/AXJjSOGvcqK7Ry/j9BM1Q==}
-    dev: false
-
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
     dev: true
@@ -2566,10 +2511,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /pako@1.0.11:
-    resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
-    dev: true
-
   /parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -2721,11 +2662,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /q@1.5.1:
-    resolution: {integrity: sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==}
-    engines: {node: '>=0.6.0', teleport: '>=0.2.0'}
-    dev: true
-
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -3441,17 +3377,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /zip-local@0.3.5:
+settings:
-    resolution: {integrity: sha512-GRV3D5TJY+/PqyeRm5CYBs7xVrKTKzljBoEXvocZu0HJ7tPEcgpSOYa2zFIsCZWgKWMuc4U3yMFgFkERGFIB9w==}
+  autoInstallPeers: true
-    dependencies:
+  excludeLinksFromLockfile: false
-      async: 1.5.2
-      graceful-fs: 4.2.11
-      jszip: 2.7.0
-      q: 1.5.1
-    dev: true
-
-  github.com/mattdesl/gifenc/64842fca317b112a8590f8fef2bf3825da8f6fe3:
-    resolution: {tarball: https://codeload.github.com/mattdesl/gifenc/tar.gz/64842fca317b112a8590f8fef2bf3825da8f6fe3}
-    name: gifenc
-    version: 1.0.3
-    dev: false

scripts/build/build.mjs

@@ -78,7 +78,6 @@ await Promise.all([
         define: {
             ...defines,
             IS_WEB: false,
-            IS_EXTENSION: false,
             IS_DISCORD_DESKTOP: true,
             IS_VESKTOP: false
         }
@@ -125,7 +124,6 @@ await Promise.all([
         define: {
             ...defines,
             IS_WEB: false,
-            IS_EXTENSION: false,
             IS_DISCORD_DESKTOP: false,
             IS_VESKTOP: true
         }

scripts/build/buildWeb.mjs

@@ -17,11 +17,12 @@
  * 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, readdir, readFile, rm, writeFile } from "fs/promises";
+import { appendFile, mkdir, readFile, rm, writeFile } from "fs/promises";
 import { join } from "path";
-import Zip from "zip-local";
 
 import { BUILD_TIMESTAMP, commonOpts, globPlugins, VERSION, watch } from "./common.mjs";
 
@@ -41,7 +42,6 @@ const commonOptions = {
     target: ["esnext"],
     define: {
         IS_WEB: "true",
-        IS_EXTENSION: "false",
         IS_STANDALONE: "true",
         IS_DEV: JSON.stringify(watch),
         IS_DISCORD_DESKTOP: "false",
@@ -52,58 +52,19 @@ const commonOptions = {
     }
 };
 
-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: {
-                ...(commonOptions?.define),
+                "window": "unsafeWindow",
-                window: "unsafeWindow",
+                ...(commonOptions?.define)
             },
             outfile: "dist/Vencord.user.js",
             banner: {
@@ -118,41 +79,12 @@ await Promise.all(
 );
 
 /**
- * @type {(dir: string) => Promise<string[]>}
+  * @type {(target: string, files: string[], shouldZip: boolean) => Promise<void>}
  */
-async function globDir(dir) {
+async function buildPluginZip(target, files, shouldZip) {
-    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, noMonaco = false) {
     const entries = {
-        "dist/Vencord.js": await readFile("dist/extension.js"),
+        "dist/Vencord.js": await readFile("dist/browser.js"),
-        "dist/Vencord.css": await readFile("dist/extension.css"),
+        "dist/Vencord.css": await readFile("dist/browser.css"),
-        ...(noMonaco ? {} : 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")) {
@@ -168,15 +100,31 @@ async function buildExtension(target, files, noMonaco = false) {
         }))),
     };
 
-    await rm(target, { recursive: true, force: true });
+    if (shouldZip) {
-    await Promise.all(Object.entries(entries).map(async ([file, content]) => {
+        return new Promise((resolve, reject) => {
-        const dest = join("dist", target, file);
+            zip(entries, {}, (err, data) => {
-        const parentDirectory = join(dest, "..");
+                if (err) {
-        await mkdir(parentDirectory, { recursive: true });
+                    reject(err);
-        await writeFile(dest, content);
+                } else {
-    }));
+                    const out = join("dist", target);
+                    writeFile(out, data).then(() => {
+                        console.info("Extension written to " + out);
+                        resolve();
+                    }).catch(reject);
+                }
+            });
+        });
+    } else {
+        await rm(target, { recursive: true, force: true });
+        await Promise.all(Object.entries(entries).map(async ([file, content]) => {
+            const dest = join("dist", target, file);
+            const parentDirectory = join(dest, "..");
+            await mkdir(parentDirectory, { recursive: true });
+            await writeFile(dest, content);
+        }));
 
-    console.info("Unpacked Extension written to dist/" + target);
+        console.info("Unpacked Extension written to dist/" + target);
+    }
 }
 
 const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content => {
@@ -194,9 +142,8 @@ const appendCssRuntime = readFile("dist/Vencord.user.css", "utf-8").then(content
 
 await Promise.all([
     appendCssRuntime,
-    buildExtension("chromium-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"]),
+    buildPluginZip("extension.zip", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], true),
-    buildExtension("firefox-unpacked", ["content.js", "manifestv2.json", "icon.png"], true),
+    buildPluginZip("chromium-unpacked", ["modifyResponseHeaders.json", "content.js", "manifest.json", "icon.png"], false),
+    buildPluginZip("firefox-unpacked", ["background.js", "content.js", "manifestv2.json", "icon.png"], false),
 ]);
 
-Zip.sync.zip("dist/chromium-unpacked").compress().save("dist/extension.zip");
-console.info("Packed Chromium Extension written to dist/extension.zip");

src/components/VencordSettings/ThemesTab.tsx

@@ -18,10 +18,8 @@
 
 import { useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
-import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
-import { IsFirefox } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { showItemInFolder } from "@utils/native";
@@ -251,14 +249,12 @@ function ThemesTab() {
                             >
                                 Load missing Themes
                             </Button>
-                            {!IsFirefox && (
+                            <Button
-                                <Button
+                                onClick={() => VencordNative.quickCss.openEditor()}
-                                    onClick={() => VencordNative.quickCss.openEditor()}
+                                size={Button.Sizes.SMALL}
-                                    size={Button.Sizes.SMALL}
+                            >
-                                >
+                                Edit QuickCSS
-                                    Edit QuickCSS
+                            </Button>
-                                </Button>
-                            )}
                         </>
                     </Card>
 
@@ -320,15 +316,6 @@ function ThemesTab() {
 
     return (
         <SettingsTab title="Themes">
-            {IsFirefox && (
-                <ErrorCard>
-                    <Forms.FormTitle tag="h5">Warning</Forms.FormTitle>
-                    <Forms.FormText>
-                        You are using Firefox. Expect the vast majority of themes to not work.
-                        If this is a problem, use a chromium browser or Discord Desktop / Vesktop.
-                    </Forms.FormText>
-                </ErrorCard>
-            )}
             <TabBar
                 type="top"
                 look="brand"

src/components/VencordSettings/VencordTab.tsx

@@ -21,7 +21,6 @@ import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
 import { ErrorCard } from "@components/ErrorCard";
-import { IsFirefox } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
 import { relaunch, showItemInFolder } from "@utils/native";
@@ -110,14 +109,12 @@ function VencordSettings() {
                                 Restart Client
                             </Button>
                         )}
-                        {!IsFirefox && (
+                        <Button
-                            <Button
+                            onClick={() => VencordNative.quickCss.openEditor()}
-                                onClick={() => VencordNative.quickCss.openEditor()}
+                            size={Button.Sizes.SMALL}
-                                size={Button.Sizes.SMALL}
+                            disabled={settingsDir === "Loading..."}>
-                                disabled={settingsDir === "Loading..."}>
+                            Open QuickCSS File
-                                Open QuickCSS File
+                        </Button>
-                            </Button>
-                        )}
                         {!IS_WEB && (
                             <Button
                                 onClick={() => showItemInFolder(settingsDir)}
@@ -260,11 +257,7 @@ function DonateCard({ image }: DonateCardProps) {
                 src={image}
                 alt=""
                 height={128}
-                style={{
+                style={{ marginLeft: "auto", transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : "" }}
-                    imageRendering: image === SHIGGY_DONATE_IMAGE ? "pixelated" : void 0,
-                    marginLeft: "auto",
-                    transform: image === DEFAULT_DONATE_IMAGE ? "rotate(10deg)" : void 0
-                }}
             />
         </Card>
     );

src/globals.d.ts

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

src/main/ipcMain.ts

@@ -27,7 +27,7 @@ import { mkdirSync, readFileSync, watch } from "fs";
 import { open, readdir, readFile, writeFile } from "fs/promises";
 import { join, normalize } from "path";
 
-import monacoHtml from "~fileContent/monacoWin.html;base64";
+import monacoHtml from "~fileContent/../components/monacoWin.html;base64";
 
 import { getThemeInfo, stripBOM, UserThemeHeader } from "./themes";
 import { ALLOWED_PROTOCOLS, QUICKCSS_PATH, SETTINGS_DIR, SETTINGS_FILE, THEMES_DIR } from "./utils/constants";

src/plugins/betterRoleDot.ts

@@ -23,7 +23,7 @@ import { Clipboard, Toasts } from "@webpack/common";
 
 export default definePlugin({
     name: "BetterRoleDot",
-    authors: [Devs.Ven, Devs.AutumnVN],
+    authors: [Devs.Ven],
     description:
         "Copy role colour on RoleDot (accessibility setting) click. Also allows using both RoleDot and coloured names simultaneously",
 
@@ -43,23 +43,6 @@ export default definePlugin({
                 match: /"(?:username|dot)"===\i(?!\.\i)/g,
                 replace: "true",
             },
-        },
-
-        {
-            find: ".ADD_ROLE_A11Y_LABEL",
-            predicate: () => Settings.plugins.BetterRoleDot.copyRoleColorInProfilePopout,
-            replacement: {
-                match: /"dot"===\i/,
-                replace: "true"
-            }
-        },
-        {
-            find: ".roleVerifiedIcon",
-            predicate: () => Settings.plugins.BetterRoleDot.copyRoleColorInProfilePopout,
-            replacement: {
-                match: /"dot"===\i/,
-                replace: "true"
-            }
         }
     ],
 
@@ -67,14 +50,7 @@ export default definePlugin({
         bothStyles: {
             type: OptionType.BOOLEAN,
             description: "Show both role dot and coloured names",
-            restartNeeded: true,
             default: false,
-        },
-        copyRoleColorInProfilePopout: {
-            type: OptionType.BOOLEAN,
-            description: "Allow click on role dot in profile popout to copy role color",
-            restartNeeded: true,
-            default: false
         }
     },
 

src/plugins/clearURLs/defaultRules.ts

@@ -127,8 +127,6 @@ export const defaultRules = [
     "redircnt@yandex.*",
     "feature@youtube.com",
     "kw@youtube.com",
-    "si@youtube.com",
-    "pp@youtube.com",
     "si@youtu.be",
     "wt_zmc",
     "utm_source",

src/plugins/fakeNitro.ts

@@ -19,7 +19,7 @@
 import { addPreEditListener, addPreSendListener, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
 import { definePluginSettings, Settings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import { ApngBlendOp, ApngDisposeOp, importApngJs } from "@utils/dependencies";
+import { ApngBlendOp, ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
 import { getCurrentGuild } from "@utils/discord";
 import { proxyLazy } from "@utils/lazy";
 import { Logger } from "@utils/Logger";
@@ -27,7 +27,6 @@ import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
 import { ChannelStore, EmojiStore, FluxDispatcher, Parser, PermissionStore, UserStore } from "@webpack/common";
 import type { Message } from "discord-types/general";
-import { applyPalette, GIFEncoder, quantize } from "gifenc";
 import type { ReactElement, ReactNode } from "react";
 
 const DRAFT_TYPE = 0;
@@ -103,11 +102,6 @@ interface StickerPack {
     stickers: Sticker[];
 }
 
-const enum FakeNoticeType {
-    Sticker,
-    Emoji
-}
-
 const fakeNitroEmojiRegex = /\/emojis\/(\d+?)\.(png|webp|gif)/;
 const fakeNitroStickerRegex = /\/stickers\/(\d+?)\./;
 const fakeNitroGifStickerRegex = /\/attachments\/\d+?\/\d+?\/(\d+?)\.gif/;
@@ -311,24 +305,16 @@ export default definePlugin({
                 },
                 {
                     match: /(emojiSection.{0,50}description:)(\i)(?<=(\i)\.sticker,.+?)(?=,)/,
-                    replace: (_, rest, reactNode, props) => `${rest}$self.addFakeNotice(${FakeNoticeType.Sticker},${reactNode},!!${props}.renderableSticker?.fake)`
+                    replace: (_, rest, reactNode, props) => `${rest}$self.addFakeNotice("STICKER",${reactNode},!!${props}.renderableSticker?.fake)`
                 }
             ]
         },
         {
-            find: ".EMOJI_UPSELL_POPOUT_MORE_EMOJIS_OPENED,",
+            find: ".Messages.EMOJI_POPOUT_PREMIUM_JOINED_GUILD_DESCRIPTION",
             predicate: () => settings.store.transformEmojis,
             replacement: {
-                match: /isDiscoverable:\i,shouldHideRoleSubscriptionCTA:\i,(?<=(\i)=\i\.node.+?)/,
+                match: /((\i)=\i\.node,\i=\i\.expressionSourceGuild)(.+?return )(.{0,450}Messages\.EMOJI_POPOUT_PREMIUM_JOINED_GUILD_DESCRIPTION.+?}\))/,
-                replace: (m, node) => `${m}fakeNitroNode:${node},`
+                replace: (_, rest1, node, rest2, reactNode) => `${rest1},fakeNitroNode=${node}${rest2}$self.addFakeNotice("EMOJI",${reactNode},fakeNitroNode.fake)`
-            }
-        },
-        {
-            find: ".Messages.EMOJI_POPOUT_UNJOINED_DISCOVERABLE_GUILD_DESCRIPTION",
-            predicate: () => settings.store.transformEmojis,
-            replacement: {
-                match: /(?<=\.Messages\.EMOJI_POPOUT_ADDED_PACK_DESCRIPTION.+?return )(.{0,1200}\.Messages\.EMOJI_POPOUT_UNJOINED_DISCOVERABLE_GUILD_DESCRIPTION.+?)(}\({)/,
-                replace: (_, reactNode, rest) => `$self.addFakeNotice(${FakeNoticeType.Emoji},${reactNode},!!arguments[0]?.fakeNitroNode?.fake)${rest}fakeNitroNode:arguments[0]?.fakeNitroNode,`
             }
         }
     ],
@@ -624,18 +610,18 @@ export default definePlugin({
         return link.target && fakeNitroEmojiRegex.test(link.target);
     },
 
-    addFakeNotice(type: FakeNoticeType, node: Array<ReactNode>, fake: boolean) {
+    addFakeNotice(type: "STICKER" | "EMOJI", node: Array<ReactNode>, fake: boolean) {
         if (!fake) return node;
 
         node = Array.isArray(node) ? node : [node];
 
         switch (type) {
-            case FakeNoticeType.Sticker: {
+            case "STICKER": {
                 node.push(" This is a FakeNitro sticker and renders like a real sticker only for you. Appears as a link to non-plugin users.");
 
                 return node;
             }
-            case FakeNoticeType.Emoji: {
+            case "EMOJI": {
                 node.push(" This is a FakeNitro emoji and renders like a real emoji only for you. Appears as a link to non-plugin users.");
 
                 return node;
@@ -664,11 +650,15 @@ export default definePlugin({
     },
 
     async sendAnimatedSticker(stickerLink: string, stickerId: string, channelId: string) {
-        const { parseURL } = importApngJs();
+        const [{ parseURL }, {
+            GIFEncoder,
+            quantize,
+            applyPalette
+        }] = await Promise.all([importApngJs(), getGifEncoder()]);
 
         const { frames, width, height } = await parseURL(stickerLink);
 
-        const gif = GIFEncoder();
+        const gif = new GIFEncoder();
         const resolution = Settings.plugins.FakeNitro.stickerSize;
 
         const canvas = document.createElement("canvas");

src/plugins/favGifSearch/index.tsx

@@ -60,7 +60,7 @@ interface Instance {
 }
 
 
-const containerClasses: { searchBar: string; } = findByPropsLazy("searchBar", "searchHeader", "searchInput");
+const containerClasses: { searchBar: string; } = findByPropsLazy("searchBar", "searchHeader", "gutterSize");
 
 export const settings = definePluginSettings({
     searchOption: {

src/plugins/fixInbox.tsx

@@ -0,0 +1,56 @@
+/*
+ * 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 { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { Forms } from "@webpack/common";
+
+export default definePlugin({
+    name: "FixInbox",
+    description: "Fixes the Unreads Inbox from crashing Discord when you're in lots of guilds.",
+    authors: [Devs.Megu],
+
+    patches: [{
+        find: "INBOX_OPEN:function",
+        replacement: {
+            // This function normally dispatches a subscribe event to every guild.
+            // this is badbadbadbadbad so we just get rid of it.
+            match: /INBOX_OPEN:function.+?\{/,
+            replace: "$&return true;"
+        }
+    }],
+
+    settingsAboutComponent() {
+        return (
+            <Forms.FormSection>
+                <Forms.FormTitle tag="h3">What's the problem?</Forms.FormTitle>
+                <Forms.FormText style={{ marginBottom: 8 }}>
+                    By default, Discord emits a GUILD_SUBSCRIPTIONS event for every guild you're in.
+                    When you're in a lot of guilds, this can cause the gateway to ratelimit you.
+                    This causes the client to crash and get stuck in an infinite ratelimit loop as it tries to reconnect.
+                </Forms.FormText>
+
+                <Forms.FormTitle tag="h3">How does it work?</Forms.FormTitle>
+                <Forms.FormText>
+                    This plugin works by stopping the client from sending GUILD_SUBSCRIPTIONS events to the gateway when you open the unreads inbox.
+                    This means that not all unreads will be shown, instead only already-subscribed guilds' unreads will be shown, but your client won't crash anymore.
+                </Forms.FormText>
+            </Forms.FormSection>
+        );
+    }
+});

src/plugins/moreUserTags.tsx

@@ -185,7 +185,7 @@ const settings = definePluginSettings({
 export default definePlugin({
     name: "MoreUserTags",
     description: "Adds tags for webhooks and moderative roles (owner, admin, etc.)",
-    authors: [Devs.Cyn, Devs.TheSun, Devs.RyanCaoDev, Devs.LordElias, Devs.AutumnVN],
+    authors: [Devs.Cyn, Devs.TheSun, Devs.RyanCaoDev, Devs.LordElias],
     settings,
     patches: [
         // add tags to the tag list
@@ -232,8 +232,9 @@ export default definePlugin({
         {
             find: ".renderBot=function(){",
             replacement: {
-                match: /\.BOT;return null!=(\i)&&.{0,10}\?(.{0,50})\.botTag,type:\i/,
+                match: /this.props.user;return null!=(\i)&&.{0,10}\?(.{0,50})\.botTag/,
-                replace: ".BOT;var type=$self.getTag({...this.props,origType:$1.bot?0:null,location:'not-chat'});return type!==null?$2.botTag,type"
+                replace: "this.props.user;var type=$self.getTag({...this.props,origType:$1.bot?0:null,location:'not-chat'});\
+return type!==null?$2.botTag,type"
             }
         },
         // pass channel id down props to be used in profiles

src/plugins/petpet.ts

@@ -18,10 +18,10 @@
 
 import { ApplicationCommandInputType, ApplicationCommandOptionType, Argument, CommandContext, findOption, sendBotMessage } from "@api/Commands";
 import { Devs } from "@utils/constants";
+import { getGifEncoder } from "@utils/dependencies";
 import { makeLazy } from "@utils/lazy";
 import definePlugin from "@utils/types";
 import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { applyPalette, GIFEncoder, quantize } from "gifenc";
 
 const DRAFT_TYPE = 0;
 const DEFAULT_DELAY = 20;
@@ -124,6 +124,7 @@ export default definePlugin({
                 }
             ],
             execute: async (opts, cmdCtx) => {
+                const { GIFEncoder, quantize, applyPalette } = await getGifEncoder();
                 const frames = await getFrames();
 
                 const noServerPfp = findOption(opts, "no-server-pfp", false);
@@ -142,7 +143,7 @@ export default definePlugin({
                 const delay = findOption(opts, "delay", DEFAULT_DELAY);
                 const resolution = findOption(opts, "resolution", DEFAULT_RESOLUTION);
 
-                const gif = GIFEncoder();
+                const gif = new GIFEncoder();
 
                 const canvas = document.createElement("canvas");
                 canvas.width = canvas.height = resolution;

src/plugins/reviewDB/components/ReviewBadge.tsx

@@ -28,8 +28,8 @@ export default function ReviewBadge(badge: Badge) {
             {({ onMouseEnter, onMouseLeave }) => (
                 <img
                     className={cl("badge")}
-                    width="22px"
+                    width="24px"
-                    height="22px"
+                    height="24px"
                     onMouseEnter={onMouseEnter}
                     onMouseLeave={onMouseLeave}
                     src={badge.icon}

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -20,7 +20,7 @@ import { openUserProfile } from "@utils/discord";
 import { classes } from "@utils/misc";
 import { LazyComponent } from "@utils/react";
 import { filters, findBulk } from "@webpack";
-import { Alerts, moment, Parser, Timestamp, UserStore } from "@webpack/common";
+import { Alerts, moment, Timestamp, UserStore } from "@webpack/common";
 
 import { Review, ReviewType } from "../entities";
 import { deleteReview, reportReview } from "../reviewDbApi";
@@ -30,12 +30,12 @@ import { DeleteButton, ReportButton } from "./MessageButton";
 import ReviewBadge from "./ReviewBadge";
 
 export default LazyComponent(() => {
-    // this is terrible, blame ven
+    // this is terrible, blame mantika
     const p = filters.byProps;
     const [
         { cozyMessage, buttons, message, buttonsInner, groupStart },
         { container, isHeader },
-        { avatar, clickable, username, wrapper, cozy },
+        { avatar, clickable, username, messageContent, wrapper, cozy },
         buttonClasses,
         botTag
     ] = findBulk(
@@ -124,10 +124,12 @@ export default LazyComponent(() => {
                         </Timestamp>)
                 }
 
-                <div className={cl("review-comment")}>
+                <p
-                    {Parser.parseGuildEventDescription(review.comment)}
+                    className={classes(messageContent)}
-                </div>
+                    style={{ fontSize: 15, marginTop: 4, color: "var(--text-normal)" }}
-
+                >
+                    {review.comment}
+                </p>
                 {review.id !== 0 && (
                     <div className={classes(container, isHeader, buttons)} style={{
                         padding: "0px",

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -16,9 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { LazyComponent, useAwaiter, useForceUpdater } from "@utils/react";
+import { classes } from "@utils/misc";
-import { find, findByPropsLazy } from "@webpack";
+import { useAwaiter, useForceUpdater } from "@utils/react";
-import { Forms, React, RelationshipStore, useRef, UserStore } from "@webpack/common";
+import { findByPropsLazy } from "@webpack";
+import { Forms, React, RelationshipStore, UserStore } from "@webpack/common";
+import type { KeyboardEvent } from "react";
 
 import { Review } from "../entities";
 import { addReview, getReviews, Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
@@ -26,12 +28,7 @@ import { settings } from "../settings";
 import { authorize, cl, showToast } from "../utils";
 import ReviewComponent from "./ReviewComponent";
 
-
+const Classes = findByPropsLazy("inputDefault", "editable");
-const Editor = findByPropsLazy("start", "end", "addMark");
-const Transform = findByPropsLazy("unwrapNodes");
-const InputTypes = findByPropsLazy("VOICE_CHANNEL_STATUS", "SIDEBAR");
-
-const InputComponent = LazyComponent(() => find(m => m?.type?.render?.toString().includes("CHANNEL_TEXT_AREA).AnalyticsLocationProvider")));
 
 interface UserProps {
     discordId: string;
@@ -116,82 +113,48 @@ function ReviewList({ refetch, reviews, hideOwnReview }: { refetch(): void; revi
     );
 }
 
-
 export function ReviewsInputComponent({ discordId, isAuthor, refetch, name }: { discordId: string, name: string; isAuthor: boolean; refetch(): void; }) {
     const { token } = settings.store;
-    const editorRef = useRef<any>(null);
-    const inputType = InputTypes.FORM;
-    inputType.disableAutoFocus = true;
 
-    const channel = {
+    function onKeyPress({ key, target }: KeyboardEvent<HTMLTextAreaElement>) {
-        flags_: 256,
+        if (key === "Enter") {
-        guild_id_: null,
+            addReview({
-        id: "0",
+                userid: discordId,
-        getGuildId: () => null,
+                comment: (target as HTMLInputElement).value,
-        isPrivate: () => true,
+                star: -1
-        isActiveThread: () => false,
+            }).then(res => {
-        isArchivedLockedThread: () => false,
+                if (res?.success) {
-        isDM: () => true,
+                    (target as HTMLInputElement).value = ""; // clear the input
-        roles: { "0": { permissions: 0n } },
+                    refetch();
-        getRecipientId: () => "0",
+                } else if (res?.message) {
-        hasFlag: () => false,
+                    showToast(res.message);
-    };
+                }
+            });
+        }
+    }
 
     return (
-        <>
+        <textarea
-            <div onClick={() => {
+            className={classes(Classes.inputDefault, "enter-comment", cl("input"))}
+            onKeyDownCapture={e => {
+                if (e.key === "Enter") {
+                    e.preventDefault(); // prevent newlines
+                }
+            }}
+            placeholder={
+                !token
+                    ? "You need to authorize to review users!"
+                    : isAuthor
+                        ? `Update review for @${name}`
+                        : `Review @${name}`
+            }
+            onKeyDown={onKeyPress}
+            onClick={() => {
                 if (!token) {
                     showToast("Opening authorization window...");
                     authorize();
                 }
-            }}>
+            }}
-                <InputComponent
+        />
-                    className={cl("input")}
-                    channel={channel}
-                    placeholder={
-                        !token
-                            ? "You need to authorize to review users!"
-                            : isAuthor
-                                ? `Update review for @${name}`
-                                : `Review @${name}`
-                    }
-                    type={inputType}
-                    disableThemedBackground={true}
-                    setEditorRef={ref => editorRef.current = ref}
-                    textValue=""
-                    onSubmit={
-                        async res => {
-                            const response = await addReview({
-                                userid: discordId,
-                                comment: res.value,
-                            });
-
-                            if (response?.success) {
-                                refetch();
-
-                                const slateEditor = editorRef.current.ref.current.getSlateEditor();
-
-                                // clear editor
-                                Transform.delete(slateEditor, {
-                                    at: {
-                                        anchor: Editor.start(slateEditor, []),
-                                        focus: Editor.end(slateEditor, []),
-                                    }
-                                });
-                            } else if (response?.message) {
-                                showToast(response.message);
-                            }
-
-                            // even tho we need to return this, it doesnt do anything
-                            return {
-                                shouldClear: false,
-                                shouldRefocus: true,
-                            };
-                        }
-                    }
-                />
-            </div>
-
-        </>
     );
 }

src/plugins/reviewDB/entities.ts

@@ -29,13 +29,6 @@ export const enum ReviewType {
     System = 3
 }
 
-export const enum NotificationType {
-    Info = 0,
-    Ban = 1,
-    Unban = 2,
-    Warning = 3
-}
-
 export interface Badge {
     name: string;
     description: string;
@@ -52,13 +45,6 @@ export interface BanInfo {
     banEndDate: number;
 }
 
-export interface Notification {
-    id: number;
-    title: string;
-    content: string;
-    type: NotificationType;
-}
-
 export interface ReviewDBUser {
     ID: number;
     discordID: string;
@@ -68,7 +54,6 @@ export interface ReviewDBUser {
     warningCount: number;
     badges: any[];
     banInfo: BanInfo | null;
-    notification: Notification | null;
     lastReviewID: number;
     type: UserType;
 }

src/plugins/reviewDB/index.tsx

@@ -24,13 +24,13 @@ import ExpandableHeader from "@components/ExpandableHeader";
 import { OpenExternalIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { Alerts, Menu, Parser, useState } from "@webpack/common";
+import { Alerts, Menu, useState } from "@webpack/common";
 import { Guild, User } from "discord-types/general";
 
 import { openReviewsModal } from "./components/ReviewModal";
 import ReviewsView from "./components/ReviewsView";
-import { NotificationType } from "./entities";
+import { UserType } from "./entities";
-import { getCurrentUserInfo, readNotification } from "./reviewDbApi";
+import { getCurrentUserInfo } from "./reviewDbApi";
 import { settings } from "./settings";
 import { showToast } from "./utils";
 
@@ -78,33 +78,40 @@ export default definePlugin({
 
             addContextMenuPatch("guild-header-popout", guildPopoutPatch);
 
-            if (user.notification) {
+            if (user.banInfo) {
-                const props = user.notification.type === NotificationType.Ban ? {
+                const endDate = new Date(user.banInfo.banEndDate);
-                    cancelText: "Appeal",
+                if (endDate.getTime() > Date.now() && (s.user?.banInfo?.banEndDate ?? 0) < endDate.getTime()) {
-                    confirmText: "Ok",
+                    Alerts.show({
-                    onCancel: () =>
+                        title: "You have been banned from ReviewDB",
-                        VencordNative.native.openExternal(
+                        body: (
-                            "https://reviewdb.mantikafasi.dev/api/redirect?"
+                            <>
-                            + new URLSearchParams({
+                                <p>
-                                token: settings.store.token!,
+                                    You are banned from ReviewDB {
-                                page: "dashboard/appeal"
+                                        user.type === UserType.Banned
-                            })
+                                            ? "permanently"
-                        )
+                                            : "until " + endDate.toLocaleString()
-                } : {};
+                                    }
-
+                                </p>
-                Alerts.show({
+                                {user.banInfo.reviewContent && (
-                    title: user.notification.title,
+                                    <p>Offending Review: {user.banInfo.reviewContent}</p>
-                    body: (
+                                )}
-                        Parser.parse(
+                                <p>Continued offenses will result in a permanent ban.</p>
-                            user.notification.content,
+                            </>
-                            false
+                        ),
-                        )
+                        cancelText: "Appeal",
-                    ),
+                        confirmText: "Ok",
-                    ...props
+                        onCancel: () =>
-                });
+                            VencordNative.native.openExternal(
-
+                                "https://reviewdb.mantikafasi.dev/api/redirect?"
-                readNotification(user.notification.id);
+                                + new URLSearchParams({
+                                    token: settings.store.token!,
+                                    page: "dashboard/appeal"
+                                })
+                            )
+                    });
+                }
             }
+
             s.user = user;
         }, 4000);
     },

src/plugins/reviewDB/reviewDbApi.ts

@@ -140,12 +140,3 @@ export function getCurrentUserInfo(token: string): Promise<ReviewDBUser> {
         method: "POST",
     }).then(r => r.json());
 }
-
-export function readNotification(id: number) {
-    return fetch(API_URL + `/api/reviewdb/notifications?id=${id}`, {
-        method: "PATCH",
-        headers: {
-            "Authorization": settings.store.token || "",
-        },
-    });
-}

src/plugins/reviewDB/style.css

@@ -14,16 +14,7 @@
     overflow: hidden;
     background: transparent;
     border: 1px solid var(--profile-message-input-border-color);
-}
+    font-size: 14px;
-
-.vc-rdb-modal-footer > div {
-    width: 100%;
-    margin: 6px 16px;
-}
-
-/* When input becomes disabled(while sending review), input adds unneccesary padding to left, this prevents it */
-.vc-rdb-input > div > div {
-    padding-left: 0 !important;
 }
 
 .vc-rdb-placeholder {
@@ -33,14 +24,15 @@
     color: var(--text-muted);
 }
 
-.vc-rdb-input * {
-    font-size: 14px;
-}
-
 .vc-rdb-modal-footer {
     padding: 0;
 }
 
+.vc-rdb-modal-footer > div {
+    width: 100%;
+    margin: 6px 16px;
+}
+
 .vc-rdb-modal-footer .vc-rdb-input {
     margin-bottom: 0;
     background: var(--input-background);
@@ -57,20 +49,3 @@
 .vc-rdb-modal-reviews {
     margin-top: 16px;
 }
-
-.vc-rdb-review {
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
-.vc-rdb-review-comment img {
-    vertical-align: text-top;
-}
-
-.vc-rdb-review-comment {
-    overflow-y: hidden;
-    margin-top: 1px;
-    margin-bottom: 8px;
-    color: var(--text-normal);
-    font-size: 15px;
-}

src/plugins/startupTimings/StartupTimingPage.css

@@ -0,0 +1,23 @@
+.vc-startuptimings-server-trace {
+    color: var(--header-primary);
+    user-select: text;
+}
+
+.vc-startuptimings-grid {
+    color: var(--header-primary);
+    display: grid;
+    gap: 2px 10px;
+    user-select: text;
+}
+
+.vc-startuptimings-4-cols {
+    grid-template-columns: repeat(3, auto) 1fr;
+}
+
+.vc-startuptimings-3-cols {
+    grid-template-columns: repeat(2, auto) 1fr;
+}
+
+.vc-startuptimings-2-cols {
+    grid-template-columns: auto 1fr;
+}

src/plugins/startupTimings/StartupTimingPage.tsx

@@ -16,11 +16,35 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./StartupTimingPage.css";
+
+import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
+import { Margins } from "@utils/margins";
+import { classes } from "@utils/misc";
 import { findByPropsLazy } from "@webpack";
 import { Forms, React } from "@webpack/common";
 
+
+export const cl = classNameFactory("vc-startuptimings-");
+
+interface ITTITrackerEvent {
+    emoji: string;
+    name: string;
+    start: number;
+    end: number;
+    hasData(): boolean;
+}
+
+interface ITTITracker {
+    serializeTTITracker(): Record<string, string | number | boolean | null | undefined>;
+    [event: string]: ITTITrackerEvent | string | boolean | null | any;
+}
+
+/** Time-To-Interactive Tracker */
+const TTITracker: ITTITracker = findByPropsLazy("serializeTTITracker");
+
 interface AppStartPerformance {
     prefix: string;
     logs: Log[];
@@ -91,11 +115,11 @@ function TimingSection({ title, logs, traceEnd }: TimingSectionProps) {
         <Forms.FormSection title={title} tag="h1">
             <code>
                 {traceEnd && (
-                    <div style={{ color: "var(--header-primary)", marginBottom: 5, userSelect: "text" }}>
+                    <div className={cl("server-trace")} style={{ marginBottom: 5 }}>
                         Trace ended at: {(new Date(traceEnd)).toTimeString()}
                     </div>
                 )}
-                <div style={{ color: "var(--header-primary)", display: "grid", gridTemplateColumns: "repeat(3, auto) 1fr", gap: "2px 10px", userSelect: "text" }}>
+                <div className={classes(cl("grid"), cl("4-cols"))}>
                     <span>Start</span>
                     <span>Interval</span>
                     <span>Delta</span>
@@ -119,13 +143,66 @@ function ServerTrace({ trace }: ServerTraceProps) {
     return (
         <Forms.FormSection title="Server Trace" tag="h2">
             <code>
-                <Flex flexDirection="column" style={{ color: "var(--header-primary)", gap: 5, userSelect: "text" }}>
+                <Flex flexDirection="column" className={cl("server-trace")} style={{ gap: 5 }}>
                     {lines.map(line => (
                         <span>{line}</span>
                     ))}
                 </Flex>
             </code>
-        </Forms.FormSection>
+        </Forms.FormSection >
+    );
+}
+
+function TTIAnalytics() {
+    const analytics = TTITracker.serializeTTITracker();
+    const filteredAnalytics = Object.entries(analytics).filter(([key, value]) => value != null && !/_start$|_end$/.test(key));
+
+    return (
+        <ErrorBoundary>
+            <Forms.FormSection title="TTI Analytics" tag="h2">
+                <code>
+                    <div className={classes(cl("grid"), cl("2-cols"))}>
+                        {filteredAnalytics.map(([key, value]) => (
+                            <React.Fragment>
+                                <span><pre>{key}</pre></span>
+                                <span><pre>{`${value}`}</pre></span>
+                            </React.Fragment>
+                        ))}
+                    </div>
+                </code>
+            </Forms.FormSection>
+        </ErrorBoundary>
+    );
+}
+
+interface TTITimingsProps {
+    records: [string, ITTITrackerEvent][];
+    title: string;
+    type: "registered" | "unregistered";
+}
+
+function TTITimings({ records, title, type }: TTITimingsProps) {
+    const isRegistered = type === "registered";
+
+    return (
+        <ErrorBoundary>
+            <Forms.FormSection title={title} tag="h2">
+                <code>
+                    <div className={classes(cl("grid"), cl(isRegistered ? "3-cols" : "2-cols"))}>
+                        {isRegistered && <span>Duration</span>}
+                        <span>Key</span>
+                        <span style={{ marginBottom: 5 }}>Event</span>
+                        {records.map(([key, event]) => (
+                            <React.Fragment key={key}>
+                                {isRegistered && <span><pre>{event.end - event.start}ms</pre></span>}
+                                <span><pre>{key}</pre></span>
+                                <span><pre>{event.emoji} {event.name}</pre></span>
+                            </React.Fragment>
+                        ))}
+                    </div>
+                </code>
+            </Forms.FormSection>
+        </ErrorBoundary>
     );
 }
 
@@ -134,6 +211,12 @@ function StartupTimingPage() {
 
     const serverTrace = AppStartPerformance.logGroups.find(g => g.serverTrace)?.serverTrace;
 
+    const registeredTTITimings: [string, ITTITrackerEvent][] = (Object.entries(TTITracker))
+        .filter(([, value]) => value?.hasData?.());
+
+    const unregisteredTTITimings: [string, ITTITrackerEvent][] = (Object.entries(TTITracker))
+        .filter(([, value]) => value?.hasData && !value.hasData());
+
     return (
         <React.Fragment>
             <TimingSection
@@ -141,9 +224,26 @@ function StartupTimingPage() {
                 logs={AppStartPerformance.logs}
                 traceEnd={AppStartPerformance.endTime_}
             />
-            {/* Lazy Divider */}
+            <Forms.FormDivider className={classes(Margins.top16, Margins.bottom16)} />
-            <div style={{ marginTop: 5 }}>&nbsp;</div>
+
             {serverTrace && <ServerTrace trace={serverTrace} />}
+            <Forms.FormDivider className={classes(Margins.top16, Margins.bottom16)} />
+
+            <TTIAnalytics />
+            <Forms.FormDivider className={classes(Margins.top16, Margins.bottom16)} />
+
+            <TTITimings
+                title="Registered TTI Timings"
+                records={registeredTTITimings}
+                type="registered"
+            />
+            <Forms.FormDivider className={classes(Margins.top16, Margins.bottom16)} />
+
+            <TTITimings
+                title="Unregistered TTI Timings"
+                records={unregisteredTTITimings}
+                type="unregistered"
+            />
         </React.Fragment>
     );
 }

src/plugins/supportHelper.tsx

@@ -17,7 +17,7 @@
 */
 
 import { DataStore } from "@api/index";
-import { Devs, IsFirefox, SUPPORT_CHANNEL_ID } from "@utils/constants";
+import { Devs, SUPPORT_CHANNEL_ID } from "@utils/constants";
 import { isPluginDev } from "@utils/misc";
 import { makeCodeblock } from "@utils/text";
 import definePlugin from "@utils/types";
@@ -27,10 +27,9 @@ import { Alerts, Forms, UserStore } from "@webpack/common";
 import gitHash from "~git-hash";
 import plugins from "~plugins";
 
-import settings from "./settings";
+import settings from "./_core/settings";
 
 const REMEMBER_DISMISS_KEY = "Vencord-SupportHelper-Dismiss";
-const FIREFOX_DISMISS_KEY = "Vencord-Firefox-Warning-Dismiss";
 
 const AllowedChannelIds = [
     SUPPORT_CHANNEL_ID,
@@ -116,22 +115,6 @@ ${makeCodeblock(enabledPlugins.join(", ") + "\n\n" + enabledApiPlugins.join(", "
                     onConfirm: rememberDismiss
                 });
             }
-
-            if (IsFirefox) {
-                const rememberDismiss = () => DataStore.set(FIREFOX_DISMISS_KEY, true);
-
-                Alerts.show({
-                    title: "Hold on!",
-                    body: <div>
-                        <Forms.FormText>You are using Firefox.</Forms.FormText>
-                        <Forms.FormText>Due to Firefox's stupid extension guidelines, most themes and many plugins will not function correctly.</Forms.FormText>
-                        <Forms.FormText>Do not report bugs. Do not ask for help with broken plugins.</Forms.FormText>
-                        <Forms.FormText>Instead, use a chromium browser, Discord Desktop, or Vesktop.</Forms.FormText>
-                    </div>,
-                    onCancel: rememberDismiss,
-                    onConfirm: rememberDismiss
-                });
-            }
         }
     }
 });

src/plugins/textReplace.tsx

@@ -213,12 +213,15 @@ function applyRules(content: string): string {
     if (content.length === 0)
         return content;
 
+    // pad so that rules can use " word " to only match whole "word"
+    content = " " + content + " ";
+
     if (stringRules) {
         for (const rule of stringRules) {
             if (!rule.find || !rule.replace) continue;
             if (rule.onlyIfIncludes && !content.includes(rule.onlyIfIncludes)) continue;
 
-            content = ` ${content} `.replaceAll(rule.find, rule.replace.replaceAll("\\n", "\n")).replace(/^\s|\s$/g, "");
+            content = content.replaceAll(rule.find, rule.replace.replaceAll("\\n", "\n"));
         }
     }
 

src/utils/constants.ts

@@ -385,5 +385,3 @@ export const DevsById = /* #__PURE__*/ (() =>
             .map(([_, v]) => [v.id, v] as const)
     ))
 )() as Record<string, Dev>;
-
-export const IsFirefox = IS_EXTENSION && navigator.userAgent.toLowerCase().includes("firefox");

src/utils/dependencies.ts

@@ -17,15 +17,23 @@
 */
 
 import { makeLazy } from "./lazy";
-import { EXTENSION_BASE_URL } from "./web-metadata";
 
 /*
     Add dynamically loaded dependencies for plugins here.
  */
 
+// https://github.com/mattdesl/gifenc
+// this lib is way better than gif.js and all other libs, they're all so terrible but this one is nice
+// @ts-ignore ts mad
+export const getGifEncoder = makeLazy(() => import("https://unpkg.com/gifenc@1.0.3/dist/gifenc.esm.js"));
+
 // needed to parse APNGs in the nitroBypass plugin
-export const importApngJs = makeLazy(() => {
+export const importApngJs = makeLazy(async () => {
-    return require("./apng-canvas").APNG as { parseURL(url: string): Promise<ApngFrameData>; };
+    const exports = {};
+    const winProxy = new Proxy(window, { set: (_, k, v) => exports[k] = v });
+    Function("self", await fetch("https://cdnjs.cloudflare.com/ajax/libs/apng-canvas/2.1.1/apng-canvas.min.js").then(r => r.text()))(winProxy);
+    // @ts-ignore
+    return exports.APNG as { parseURL(url: string): Promise<ApngFrameData>; };
 });
 
 // https://wiki.mozilla.org/APNG_Specification#.60fcTL.60:_The_Frame_Control_Chunk
@@ -67,20 +75,13 @@ export interface ApngFrameData {
     playTime: number;
 }
 
-// On web (extensions), use extension uri as basepath (load files from extension)
+const shikiWorkerDist = "https://unpkg.com/@vap/shiki-worker@0.0.8/dist";
-// On desktop (electron), load from cdn
+export const shikiWorkerSrc = `${shikiWorkerDist}/${IS_DEV ? "index.js" : "index.min.js"}`;
-export const rnnoiseDist = IS_EXTENSION
+export const shikiOnigasmSrc = "https://unpkg.com/@vap/shiki@0.10.3/dist/onig.wasm";
-    ? new URL("/third-party/rnnoise", EXTENSION_BASE_URL).toString()
+
-    : "https://unpkg.com/@sapphi-red/web-noise-suppressor@0.3.3/dist";
+export const rnnoiseDist = "https://unpkg.com/@sapphi-red/web-noise-suppressor@0.3.3/dist";
 export const rnnoiseWasmSrc = (simd = false) => `${rnnoiseDist}/rnnoise${simd ? "_simd" : ""}.wasm`;
 export const rnnoiseWorkletSrc = `${rnnoiseDist}/rnnoise/workletProcessor.js`;
 
-
+// @ts-expect-error SHUT UP
-// The below code is only used on the Desktop (electron) build of Vencord.
+export const getStegCloak = makeLazy(() => import("https://unpkg.com/stegcloak-dist@1.0.0/index.js"));
-// Browser (extension) builds do not contain these remote imports.
-
-export const shikiWorkerSrc = `https://unpkg.com/@vap/shiki-worker@0.0.8/dist/${IS_DEV ? "index.js" : "index.min.js"}`;
-export const shikiOnigasmSrc = "https://unpkg.com/@vap/shiki@0.10.3/dist/onig.wasm";
-
-// @ts-expect-error
-export const getStegCloak = /* #__PURE__*/ makeLazy(() => import("https://unpkg.com/stegcloak-dist@1.0.0/index.js"));

src/utils/web-metadata.ts

@@ -1,14 +0,0 @@
-/*
- * Vencord, a Discord client mod
- * Copyright (c) 2023 Vendicated and contributors
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-export let EXTENSION_BASE_URL: string;
-export let EXTENSION_VERSION: string;
-
-if (IS_EXTENSION) {
-    const script = document.querySelector("#vencord-script") as HTMLScriptElement;
-    EXTENSION_BASE_URL = script.dataset.extensionBaseUrl!;
-    EXTENSION_VERSION = script.dataset.version!;
-}