bump to v1.1.7

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

.github/workflows/build.yml

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

.github/workflows/test.yml

@@ -15,7 +15,7 @@ jobs:
             - uses: pnpm/action-setup@v2 # Install pnpm using packageManager key in package.json
 
             - name: Use Node.js 18
-              uses: actions/setup-node@v2
+              uses: actions/setup-node@v3
               with:
                   node-version: 18
                   cache: "pnpm"

browser/GMPolyfill.js

@@ -59,8 +59,8 @@ async function checkCors(url, method) {
     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);
+    const methods = headers["access-control-allow-methods"]?.toLowerCase().split(/,\s/g);
-    if (methods && !methods.includes(method)) return false;
+    if (methods && !methods.includes(method.toLowerCase())) return false;
 
     return true;
 }

browser/manifest.json

@@ -21,7 +21,8 @@
         {
             "run_at": "document_start",
             "matches": ["*://*.discord.com/*"],
-            "js": ["content.js"]
+            "js": ["content.js"],
+            "all_frames": true
         }
     ],
 

browser/modifyResponseHeaders.json

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

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.1.5",
+    "version": "1.1.7",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -21,8 +21,8 @@
         "buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/buildWeb.mjs",
         "generatePluginJson": "tsx scripts/generatePluginList.ts",
         "inject": "node scripts/runInstaller.mjs",
-        "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+        "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-pattern src/userplugins",
-        "lint-styles": "stylelint \"src/**/*.css\"",
+        "lint-styles": "stylelint \"src/**/*.css\" --ignore-pattern src/userplugins",
         "lint:fix": "pnpm lint --fix",
         "test": "pnpm build && pnpm lint && pnpm lint-styles && pnpm testTsc",
         "testWeb": "pnpm lint && pnpm buildWeb && pnpm testTsc",
@@ -65,7 +65,7 @@
         "type-fest": "^3.5.3",
         "typescript": "^4.9.4"
     },
-    "packageManager": "pnpm@7.13.4",
+    "packageManager": "pnpm@8.1.1",
     "pnpm": {
         "patchedDependencies": {
             "eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
@@ -92,6 +92,7 @@
         "sourceDir": "./dist/extension-v2-unpacked"
     },
     "engines": {
-        "node": ">=18"
+        "node": ">=18",
+        "pnpm": ">=8"
     }
 }

scripts/build/build.mjs

@@ -80,7 +80,7 @@ await Promise.all([
         globalName: "Vencord",
         sourcemap,
         plugins: [
-            globPlugins,
+            globPlugins("discordDesktop"),
             ...commonOpts.plugins
         ],
         define: {
@@ -114,7 +114,7 @@ await Promise.all([
         globalName: "Vencord",
         sourcemap,
         plugins: [
-            globPlugins,
+            globPlugins("vencordDesktop"),
             ...commonOpts.plugins
         ],
         define: {

scripts/build/buildWeb.mjs

@@ -38,7 +38,7 @@ const commonOptions = {
     format: "iife",
     external: ["plugins", "git-hash", "/assets/*"],
     plugins: [
-        globPlugins,
+        globPlugins("web"),
         ...commonOpts.plugins,
     ],
     target: ["esnext"],

scripts/build/common.mjs

@@ -48,9 +48,9 @@ export const makeAllPackagesExternalPlugin = {
 };
 
 /**
- * @type {import("esbuild").Plugin}
+ * @type {(kind: "web" | "discordDesktop" | "vencordDesktop") => import("esbuild").Plugin}
  */
-export const globPlugins = {
+export const globPlugins = kind => ({
     name: "glob-plugins",
     setup: build => {
         const filter = /^~plugins$/;
@@ -76,8 +76,10 @@ export const globPlugins = {
                     if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1))) {
                         const mod = fileBits.at(-2);
                         if (mod === "dev" && !watch) continue;
-                        if (mod === "web" && !isWeb) continue;
+                        if (mod === "web" && kind === "discordDesktop") continue;
-                        if (mod === "desktop" && isWeb) continue;
+                        if (mod === "desktop" && kind === "web") continue;
+                        if (mod === "discordDesktop" && kind !== "discordDesktop") continue;
+                        if (mod === "vencordDesktop" && kind !== "vencordDesktop") continue;
                     }
 
                     const mod = `p${i}`;
@@ -93,7 +95,7 @@ export const globPlugins = {
             };
         });
     }
-};
+});
 
 /**
  * @type {import("esbuild").Plugin}

scripts/generatePluginList.ts

@@ -35,7 +35,7 @@ interface PluginData {
     hasCommands: boolean;
     required: boolean;
     enabledByDefault: boolean;
-    target: "desktop" | "web" | "dev";
+    target: "discordDesktop" | "vencordDesktop" | "web" | "dev";
 }
 
 const devs = {} as Record<string, Dev>;
@@ -150,7 +150,7 @@ async function parseFile(fileName: string) {
         const fileBits = fileName.split(".");
         if (fileBits.length > 2 && ["ts", "tsx"].includes(fileBits.at(-1)!)) {
             const mod = fileBits.at(-2)!;
-            if (!["web", "desktop", "dev"].includes(mod)) throw fail(`invalid target ${fileBits.at(-2)}`);
+            if (!["web", "discordDesktop", "vencordDesktop", "dev"].includes(mod)) throw fail(`invalid target ${fileBits.at(-2)}`);
             data.target = mod as any;
         }
 

src/Vencord.ts

@@ -30,17 +30,45 @@ import "./webpack/patchWebpack";
 import { showNotification } from "./api/Notifications";
 import { PlainSettings, Settings } from "./api/settings";
 import { patches, PMLogger, startAllPlugins } from "./plugins";
-import { checkForUpdates, rebuild, update,UpdateLogger } from "./utils/updater";
+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 { onceReady } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
 
 export let Components: any;
 
+async function syncSettings() {
+    if (
+        Settings.cloud.settingsSync && // if it's enabled
+        Settings.cloud.authenticated // if cloud integrations are enabled
+    ) {
+        if (localStorage.Vencord_settingsDirty) {
+            await putCloudSettings();
+            delete localStorage.Vencord_settingsDirty;
+        } else if (await getCloudSettings(false)) { // if we synchronized something (false means no sync)
+            // we show a notification here instead of allowing getCloudSettings() to show one to declutter the amount of
+            // potential notifications that might occur. getCloudSettings() will always send a notification regardless if
+            // there was an error to notify the user, but besides that we only want to show one notification instead of all
+            // of the possible ones it has (such as when your settings are newer).
+            showNotification({
+                title: "Cloud Settings",
+                body: "Your settings have been updated! Click here to restart to fully apply changes!",
+                color: "var(--green-360)",
+                onClick: relaunch
+            });
+        }
+    }
+}
+
 async function init() {
     await onceReady;
     startAllPlugins();
     Components = await import("./components");
 
+    syncSettings();
+
     if (!IS_WEB) {
         try {
             const isOutdated = await checkForUpdates();
@@ -48,23 +76,14 @@ async function init() {
 
             if (Settings.autoUpdate) {
                 await update();
-                const needsFullRestart = await rebuild();
+                await rebuild();
                 if (Settings.autoUpdateNotification)
                     setTimeout(() => showNotification({
                         title: "Vencord has been updated!",
                         body: "Click here to restart",
                         permanent: true,
                         noPersist: true,
-                        onClick() {
+                        onClick: relaunch
-                            if (needsFullRestart) {
-                                if (IS_DISCORD_DESKTOP)
-                                    window.DiscordNative.app.relaunch();
-                                else
-                                    window.VencordDesktop.app.relaunch();
-                            }
-                            else
-                                location.reload();
-                        }
                     }), 10_000);
                 return;
             }

src/api/Badges.ts

@@ -29,11 +29,12 @@ export enum BadgePosition {
 
 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 })
+                ? badges.unshift({ ...badge, ...args })
-                : badgeArray.push({ ...badge, ...args });
+                : badges.push({ ...badge, ...args });
         }
     }
-    (Plugins.BadgeAPI as any).addDonorBadge(badgeArray, args.user.id);
+    const donorBadge = (Plugins.BadgeAPI as any).getDonorBadge(args.user.id);
+    if (donorBadge) badges.unshift(donorBadge);
 
-    return badgeArray;
+    return badges;
 }
 
 export interface BadgeUserArgs {

src/api/Commands/index.ts

@@ -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/ContextMenu.ts

@@ -19,17 +19,20 @@
 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<React.ReactElement>, ...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<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -78,6 +81,7 @@ export function removeContextMenuPatch<T extends string | Array<string>>(navId:
 
 /**
  * Remove a global context menu patch
+ * @param patch The patch to be removed
  * @returns Wheter the patch was sucessfully removed
  */
 export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback): boolean {
@@ -87,12 +91,13 @@ export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallba
 /**
  * A helper function for finding the children array of a group nested inside a context menu based on the id of one of its childs
  * @param id The id of the child
+ * @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, children: Array<React.ReactElement>, _itemsArray?: Array<React.ReactElement>): Array<React.ReactElement> | null {
     for (const child of children) {
         if (child == null) continue;
 
-        if (child.props?.id === id) return itemsArray ?? null;
+        if (child.props?.id === id) return _itemsArray ?? null;
 
         let nextChildren = child.props?.children;
         if (nextChildren) {
@@ -118,6 +123,8 @@ interface ContextMenuProps {
     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 +134,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 +144,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/Notifications/Notifications.tsx

@@ -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/settings.ts

@@ -16,9 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { debounce } from "@utils/debounce";
 import IpcEvents from "@utils/IpcEvents";
+import { localStorage } from "@utils/localStorage";
 import Logger from "@utils/Logger";
 import { mergeDefaults } from "@utils/misc";
+import { putCloudSettings } from "@utils/settingsSync";
 import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
 import { React } from "@webpack/common";
 
@@ -35,6 +38,8 @@ export interface Settings {
     frameless: boolean;
     transparent: boolean;
     winCtrlQ: boolean;
+    macosTranslucency: boolean;
+    disableMinSize: boolean;
     winNativeTitleBar: boolean;
     plugins: {
         [plugin: string]: {
@@ -49,6 +54,13 @@ export interface Settings {
         useNative: "always" | "never" | "not-focused";
         logLimit: number;
     };
+
+    cloud: {
+        authenticated: boolean;
+        url: string;
+        settingsSync: boolean;
+        settingsSyncVersion: number;
+    };
 }
 
 const DefaultSettings: Settings = {
@@ -61,6 +73,8 @@ const DefaultSettings: Settings = {
     frameless: false,
     transparent: false,
     winCtrlQ: false,
+    macosTranslucency: false,
+    disableMinSize: false,
     winNativeTitleBar: false,
     plugins: {},
 
@@ -69,6 +83,13 @@ const DefaultSettings: Settings = {
         position: "bottom-right",
         useNative: "not-focused",
         logLimit: 50
+    },
+
+    cloud: {
+        authenticated: false,
+        url: "https://api.vencord.dev/",
+        settingsSync: false,
+        settingsSyncVersion: 0
     }
 };
 
@@ -80,6 +101,13 @@ try {
     logger.error("An error occurred while loading the settings. Corrupt settings file?\n", err);
 }
 
+const saveSettingsOnFrequentAction = debounce(async () => {
+    if (Settings.cloud.settingsSync && Settings.cloud.authenticated) {
+        await putCloudSettings();
+        delete localStorage.Vencord_settingsDirty;
+    }
+}, 60_000);
+
 type SubscriptionCallback = ((newValue: any, path: string) => void) & { _path?: string; };
 const subscriptions = new Set<SubscriptionCallback>();
 
@@ -142,6 +170,9 @@ function makeProxy(settings: any, root = settings, path = ""): Settings {
                 }
             }
             // And don't forget to persist the settings!
+            PlainSettings.cloud.settingsSyncVersion = Date.now();
+            localStorage.Vencord_settingsDirty = true;
+            saveSettingsOnFrequentAction();
             VencordNative.ipc.invoke(IpcEvents.SET_SETTINGS, JSON.stringify(root, null, 4));
             return true;
         }

src/components/PatchHelper.tsx

@@ -186,9 +186,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 +201,7 @@ function ReplacementInput({ replacement, setReplacement, replacementError }) {
                             {Parser.parse("`" + placeholder + "`")}: {desc}
                         </Forms.FormText>
                     ))}
-                </>
+                </div>
             )}
 
             <Switch

src/components/PluginSettings/PluginModal.tsx

@@ -20,7 +20,8 @@ import { generateId } from "@api/Commands";
 import { useSettings } from "@api/settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { LazyComponent } from "@utils/misc";
+import { Margins } from "@utils/margins";
+import { classes, LazyComponent } from "@utils/misc";
 import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize } from "@utils/modal";
 import { proxyLazy } from "@utils/proxyLazy";
 import { OptionType, Plugin } from "@utils/types";
@@ -174,7 +175,7 @@ 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} />
@@ -198,7 +199,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                     </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} />

src/components/VencordSettings/BackupRestoreTab.tsx

@@ -41,6 +41,7 @@ function BackupRestoreTab() {
                 Settings Export contains:
                 <ul>
                     <li>&mdash; Custom QuickCSS</li>
+                    <li>&mdash; Theme Links</li>
                     <li>&mdash; Plugin Settings</li>
                 </ul>
             </Text>

src/components/VencordSettings/CloudTab.tsx

@@ -0,0 +1,164 @@
+/*
+ * 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 { showNotification } from "@api/Notifications";
+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";
+
+function validateUrl(url: string) {
+    try {
+        new URL(url);
+        return true;
+    } catch {
+        return "Invalid URL";
+    }
+}
+
+async function eraseAllData() {
+    const res = await fetch(new URL("/v1/", getCloudUrl()), {
+        method: "DELETE",
+        headers: new Headers({
+            Authorization: await getCloudAuth()
+        })
+    });
+
+    if (!res.ok) {
+        cloudLogger.error(`Failed to erase data, API returned ${res.status}`);
+        showNotification({
+            title: "Cloud Integrations",
+            body: `Could not erase all data (API returned ${res.status}), please contact support.`,
+            color: "var(--red-360)"
+        });
+        return;
+    }
+
+    Settings.cloud.authenticated = false;
+    await deauthorizeCloud();
+
+    showNotification({
+        title: "Cloud Integrations",
+        body: "Successfully erased all data.",
+        color: "var(--green-360)"
+    });
+}
+
+function SettingsSyncSection() {
+    const { cloud } = useSettings(["cloud.authenticated", "cloud.settingsSync"]);
+    const sectionEnabled = cloud.authenticated && cloud.settingsSync;
+
+    return (
+        <Forms.FormSection title="Settings Sync" className={Margins.top16}>
+            <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
+                Synchronize your settings to the cloud. This allows easy synchronization across multiple devices with
+                minimal effort.
+            </Forms.FormText>
+            <Switch
+                key="cloud-sync"
+                disabled={!cloud.authenticated}
+                value={cloud.settingsSync}
+                onChange={v => { cloud.settingsSync = v; }}
+            >
+                Settings Sync
+            </Switch>
+            <div className="vc-cloud-settings-sync-grid">
+                <Button
+                    size={Button.Sizes.SMALL}
+                    disabled={!sectionEnabled}
+                    onClick={() => putCloudSettings()}
+                >Sync to Cloud</Button>
+                <Tooltip text="This will overwrite your local settings with the ones on the cloud. Use wisely!">
+                    {({ onMouseLeave, onMouseEnter }) => (
+                        <Button
+                            onMouseLeave={onMouseLeave}
+                            onMouseEnter={onMouseEnter}
+                            size={Button.Sizes.SMALL}
+                            color={Button.Colors.RED}
+                            disabled={!sectionEnabled}
+                            onClick={() => getCloudSettings(true, true)}
+                        >Sync from Cloud</Button>
+                    )}
+                </Tooltip>
+                <Button
+                    size={Button.Sizes.SMALL}
+                    color={Button.Colors.RED}
+                    disabled={!sectionEnabled}
+                    onClick={() => deleteCloudSettings()}
+                >Delete Cloud Settings</Button>
+            </div>
+        </Forms.FormSection>
+    );
+}
+
+function CloudTab() {
+    const settings = useSettings(["cloud.authenticated", "cloud.url"]);
+
+    return (
+        <>
+            <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.
+                    It <Link href="https://vencord.dev/cloud/privacy">respects your privacy</Link>, and
+                    the <Link href="https://github.com/Vencord/Backend">source code</Link> is AGPL 3.0 licensed so you
+                    can host it yourself.
+                </Forms.FormText>
+                <Switch
+                    key="backend"
+                    value={settings.cloud.authenticated}
+                    onChange={v => { v && authorizeCloud(); if (!v) settings.cloud.authenticated = v; }}
+                    note="This will request authorization if you have not yet set up cloud integrations."
+                >
+                    Enable Cloud Integrations
+                </Switch>
+                <Forms.FormTitle tag="h5">Backend URL</Forms.FormTitle>
+                <Forms.FormText className={Margins.bottom8}>
+                    Which backend to use when using cloud integrations.
+                </Forms.FormText>
+                <CheckedTextInput
+                    key="backendUrl"
+                    value={settings.cloud.url}
+                    onChange={v => { settings.cloud.url = v; settings.cloud.authenticated = false; deauthorizeCloud(); }}
+                    validate={validateUrl}
+                />
+                <Button
+                    className={Margins.top8}
+                    size={Button.Sizes.MEDIUM}
+                    color={Button.Colors.RED}
+                    disabled={!settings.cloud.authenticated}
+                    onClick={() => Alerts.show({
+                        title: "Are you sure?",
+                        body: "Once your data is erased, we cannot recover it. There's no going back!",
+                        onConfirm: eraseAllData,
+                        confirmText: "Erase it!",
+                        confirmColor: "vc-cloud-erase-data-danger-btn",
+                        cancelText: "Nevermind"
+                    })}
+                >Erase All Data</Button>
+                <Forms.FormDivider className={Margins.top16} />
+            </Forms.FormSection >
+            <SettingsSyncSection />
+        </>
+    );
+}
+
+export default ErrorBoundary.wrap(CloudTab);

src/components/VencordSettings/ThemesTab.tsx

@@ -90,8 +90,8 @@ export default ErrorBoundary.wrap(function () {
 
     return (
         <>
-            <Card className="vc-settings-card">
+            <Card className="vc-settings-card vc-text-selectable">
-                <Forms.FormTitle tag="h5">Paste links to .css / .theme.css files here</Forms.FormTitle>
+                <Forms.FormTitle tag="h5">Paste links to .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} />
@@ -103,7 +103,7 @@ export default ErrorBoundary.wrap(function () {
                     <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>In the GitHub repository of your theme, find X.theme.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>
@@ -117,7 +117,7 @@ export default ErrorBoundary.wrap(function () {
             <Forms.FormTitle tag="h5">Themes</Forms.FormTitle>
             <TextArea
                 value={themeText}
-                onChange={e => setThemeText(e.currentTarget.value)}
+                onChange={setThemeText}
                 className={`${TextAreaProps.textarea} vc-settings-theme-links`}
                 placeholder="Theme Links"
                 spellCheck={false}

src/components/VencordSettings/Updater.tsx

@@ -125,7 +125,7 @@ function Updatable(props: CommonProps) {
                     onClick={withDispatcher(setIsUpdating, async () => {
                         if (await update()) {
                             setUpdates([]);
-                            const needFullRestart = await rebuild();
+                            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();
-                                            relaunch();
-                                        else
-                                            location.reload();
                                         r();
                                     },
                                     onCancel: r
@@ -229,11 +226,19 @@ function Updater() {
 
             <Forms.FormTitle tag="h5">Repo</Forms.FormTitle>
 
-            <Forms.FormText>{repoPending ? repo : err ? "Failed to retrieve - check console" : (
+            <Forms.FormText className="vc-text-selectable">
-                <Link href={repo}>
+                {repoPending
-                    {repo.split("/").slice(-2).join("/")}
+                    ? repo
-                </Link>
+                    : err
-            )} (<HashLink hash={gitHash} repo={repo} disabled={repoPending} />)</Forms.FormText>
+                        ? "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} />
 

src/components/VencordSettings/VencordTab.tsx

@@ -18,7 +18,7 @@
 
 
 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";
@@ -26,7 +26,7 @@ import { ErrorCard } from "@components/ErrorCard";
 import IpcEvents from "@utils/IpcEvents";
 import { Margins } from "@utils/margins";
 import { identity, useAwaiter } from "@utils/misc";
-import { relaunch } from "@utils/native";
+import { relaunch, showItemInFolder } from "@utils/native";
 import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
 
 const cl = classNameFactory("vc-settings-");
@@ -43,11 +43,11 @@ function VencordSettings() {
         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>;
@@ -65,7 +65,7 @@ function VencordSettings() {
                 title: "Enable React Developer Tools",
                 note: "Requires a full restart"
             },
-            !IS_WEB && (!isWindows ? {
+            !IS_WEB && (!IS_DISCORD_DESKTOP || !isWindows ? {
                 key: "frameless",
                 title: "Disable the window frame",
                 note: "Requires a full restart"
@@ -83,6 +83,16 @@ 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"
             }
         ];
 
@@ -112,8 +122,7 @@ function VencordSettings() {
                                 Open QuickCSS File
                             </Button>
                             <Button
-                                // FIXME: Vencord Desktop support
+                                onClick={() => showItemInFolder(settingsDir)}
-                                onClick={() => window.DiscordNative.fileManager.showItemInFolder(settingsDir)}
                                 size={Button.Sizes.SMALL}
                                 disabled={settingsDirPending}>
                                 Open Settings Folder
@@ -148,8 +157,16 @@ function VencordSettings() {
             </Forms.FormSection>
 
 
+            {typeof Notification !== "undefined" && <NotificationSection settings={settings.notifications} />}
+        </React.Fragment>
+    );
+}
+
+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>
@@ -168,35 +185,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}
+                select={v => settings.useNative = v}
-                isSelected={v => v === notifSettings.useNative}
+                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>>}
+                ] satisfies Array<{ value: typeof settings["position"]; } & Record<string, any>>}
-                select={v => notifSettings.position = v}
+                select={v => settings.position = v}
-                isSelected={v => v === notifSettings.position}
+                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}
+                initialValue={settings.timeout}
-                onValueChange={v => notifSettings.timeout = v}
+                onValueChange={v => settings.timeout = v}
                 onValueRender={v => (v / 1000).toFixed(2) + "s"}
                 onMarkerRender={v => (v / 1000) + "s"}
                 stickToMarkers={false}
@@ -212,23 +229,22 @@ function VencordSettings() {
                 minValue={0}
                 maxValue={200}
                 stickToMarkers={true}
-                initialValue={notifSettings.logLimit}
+                initialValue={settings.logLimit}
-                onValueChange={v => notifSettings.logLimit = v}
+                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;
 }

src/components/VencordSettings/index.tsx

@@ -21,9 +21,11 @@ import "./settingsStyles.css";
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { handleComponentFailed } from "@components/handleComponentFailed";
+import { isMobile } from "@utils/misc";
 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";
@@ -45,7 +47,8 @@ const SettingsTabs: Record<string, SettingsTab> = {
     VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
     VencordThemes: { name: "Themes", component: () => <ThemesTab /> },
     VencordUpdater: { name: "Updater" }, // Only show updater if IS_WEB is false
-    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> },
+    VencordCloud: { name: "Cloud", component: () => <CloudTab /> },
+    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> }
 };
 
 if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater />;
@@ -53,7 +56,10 @@ if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater /
 function Settings(props: SettingsProps) {
     const { tab = "VencordSettings" } = props;
 
-    const CurrentTab = SettingsTabs[tab]?.component;
+    const CurrentTab = SettingsTabs[tab]?.component ?? null;
+    if (isMobile) {
+        return CurrentTab && <CurrentTab />;
+    }
 
     return <Forms.FormSection>
         <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">Vencord Settings</Text>

src/components/VencordSettings/settingsStyles.css

@@ -46,3 +46,23 @@
     padding: 0.5em;
     border: 1px solid var(--background-modifier-accent);
 }
+
+.vc-cloud-settings-sync-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: 1em;
+}
+
+.vc-cloud-erase-data-danger-btn {
+    color: var(--white-500);
+    background-color: var(--button-danger-background);
+}
+
+.vc-text-selectable,
+.vc-text-selectable :not(a, button) {
+    /* 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/monacoWin.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>QuickCss Editor</title>
+    <title>Vencord 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>

src/globals.d.ts

@@ -57,6 +57,7 @@ declare global {
      */
     export var DiscordNative: any;
     export var VencordDesktop: any;
+    export var VencordDesktopNative: any;
 
     interface Window {
         webpackChunkdiscord_app: {

src/main/index.ts

@@ -32,9 +32,10 @@ if (IS_VENCORD_DESKTOP || !IS_VANILLA) {
             if (url.endsWith("/")) url = url.slice(0, -1);
             switch (url) {
                 case "renderer.js.map":
+                case "vencordDesktopRenderer.js.map":
                 case "preload.js.map":
-                case "patcher.js.map": // doubt
+                case "patcher.js.map":
-                case "main.js.map":
+                case "vencordDesktopMain.js.map":
                     cb(join(__dirname, url));
                     break;
                 default:

src/main/ipcMain.ts

@@ -93,7 +93,7 @@ export function initIpc(mainWindow: BrowserWindow) {
 
 ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
     const win = new BrowserWindow({
-        title: "QuickCss Editor",
+        title: "Vencord QuickCSS Editor",
         autoHideMenuBar: true,
         darkTheme: true,
         webPreferences: {

src/main/patcher.ts

@@ -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
+    // Patch appSettings to force enable devtools and optionally disable min size
-    onceDefined(global, "appSettings", s =>
+    onceDefined(global, "appSettings", s => {
-        s.set("DANGEROUS_ENABLE_DEVTOOLS_ONLY_ENABLE_IF_YOU_KNOW_WHAT_YOURE_DOING", true)
+        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/updater/common.ts

@@ -16,28 +16,13 @@
  * 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() {
+export const VENCORD_FILES = [
-    const hashes = {} as Record<string, string>;
+    IS_DISCORD_DESKTOP ? "patcher.js" : "vencordDesktopMain.js",
-
+    "preload.js",
-    await Promise.all(
+    IS_DISCORD_DESKTOP ? "renderer.js" : "vencordDesktopRenderer.js",
-        ["patcher.js", "preload.js", "renderer.js", "renderer.css"].map(file => new Promise<void>(r => {
+    "renderer.css"
-            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 function serializeErrors(func: (...args: any[]) => any) {
     return async function () {

src/main/updater/git.ts

@@ -22,7 +22,7 @@ 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, "..");
 
@@ -76,7 +76,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

@@ -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(
+            join(__dirname, name),
-                __dirname,
-                IS_VENCORD_DESKTOP
-                    // vencordDesktopRenderer.js -> renderer.js
-                    ? name.replace(/vencordDesktop(\w)/, (_, c) => c.toLowerCase())
-                    : 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/plugins/alwaysAnimate.ts

@@ -1,6 +1,6 @@
 /*
  * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
+ * 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
@@ -20,16 +20,18 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
 export default definePlugin({
-    name: "MuteNewGuild",
+    name: "AlwaysAnimate",
-    description: "Mutes newly joined guilds",
+    description: "Animates anything that can be animated, besides status emojis.",
-    authors: [Devs.Glitch],
+    authors: [Devs.FieryFlames],
+
     patches: [
         {
-            find: ",acceptInvite:function",
+            find: ".canAnimate",
+            all: true,
             replacement: {
-                match: /(\w=null!==[^;]+)/,
+                match: /\.canAnimate\b/g,
-                replace: "$1;Vencord.Webpack.findByProps('updateGuildNotificationSettings').updateGuildNotificationSettings($1,{'muted':true,'suppress_everyone':true,'suppress_roles':true})"
+                replace: ".canAnimate || true"
             }
         }
-    ],
+    ]
 });

src/plugins/apiBadges.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { BadgePosition, ProfileBadge } from "@api/Badges";
+import { BadgePosition, BadgeUserArgs, ProfileBadge } from "@api/Badges";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
@@ -35,7 +35,7 @@ const CONTRIBUTOR_BADGE = "https://cdn.discordapp.com/attachments/10336802034336
 const contributorIds: string[] = Object.values(Devs).map(d => d.id.toString());
 
 const ContributorBadge: ProfileBadge = {
-    tooltip: "Vencord Contributor",
+    description: "Vencord Contributor",
     image: CONTRIBUTOR_BADGE,
     position: BadgePosition.START,
     props: {
@@ -45,23 +45,23 @@ const ContributorBadge: ProfileBadge = {
         }
     },
     shouldShow: ({ user }) => contributorIds.includes(user.id),
-    onClick: () => VencordNative.ipc.invoke(IpcEvents.OPEN_EXTERNAL, "https://github.com/Vendicated/Vencord")
+    link: "https://github.com/Vendicated/Vencord"
 };
 
-const DonorBadges = {} as Record<string, Pick<ProfileBadge, "image" | "tooltip">>;
+const DonorBadges = {} as Record<string, Pick<ProfileBadge, "image" | "description">>;
 
 export default definePlugin({
     name: "BadgeAPI",
     description: "API to add badges to users.",
-    authors: [Devs.Megu],
+    authors: [Devs.Megu, Devs.Ven, Devs.TheSun],
     required: true,
     patches: [
         /* Patch the badges array */
         {
-            find: "PREMIUM_GUILD_SUBSCRIPTION_TOOLTIP.format({date:",
+            find: "Messages.ACTIVE_DEVELOPER_BADGE_TOOLTIP",
             replacement: {
-                match: /&&((\w{1,3})\.push\({tooltip:\w{1,3}\.\w{1,3}\.Messages\.PREMIUM_GUILD_SUBSCRIPTION_TOOLTIP\.format.+?;)(?:return\s\w{1,3};?})/,
+                match: /(?<=void 0:)\i.getBadges\(\)/,
-                replace: (_, m, badgeArray) => `&&${m} return Vencord.Api.Badges.inject(${badgeArray}, arguments[0]);}`,
+                replace: "Vencord.Api.Badges._getBadges(arguments[0]).concat($&??[])",
             }
         },
         /* Patch the badge list component on user profiles */
@@ -69,21 +69,28 @@ export default definePlugin({
             find: "Messages.PROFILE_USER_BADGES,role:",
             replacement: [
                 {
-                    match: /src:(\w{1,3})\[(\w{1,3})\.key\],/,
+                    // alt: "", aria-hidden: false, src: originalSrc
-                    // <img src={badge.image ?? imageMap[badge.key]} {...badge.props} />
+                    match: /alt:" ","aria-hidden":!0,src:(?=.{0,10}\b(\i)\.(?:icon|key))/g,
-                    replace: (_, imageMap, badge) => `src: ${badge}.image ?? ${imageMap}[${badge}.key], ...${badge}.props,`
+                    // ...badge.props, ..., src: badge.image ?? ...
+                    replace: "...$1.props,$& $1.image??"
                 },
                 {
-                    match: /spacing:(\d{1,2}),children:(.{1,40}(\i)\.jsx.+?(\i)\.onClick.+?\)})},/,
+                    match: /children:function(?<=(\i)\.(?:tooltip|description),spacing:\d.+?)/g,
-                    // if the badge provides it's own component, render that instead of an image
+                    replace: "children:$1.component ? () => $self.renderBadgeComponent($1) : function"
-                    // the badge also includes info about the user that has it (type BadgeUserArgs), which is why it's passed as props
+                },
-                    replace: (_, s, origBadgeComponent, React, badge) =>
+                {
-                        `spacing:${s},children:${badge}.component ? () => (0,${React}.jsx)(${badge}.component, { ...${badge} }) : ${origBadgeComponent}},`
+                    match: /onClick:function(?=.{0,200}href:(\i)\.link)/,
+                    replace: "onClick:$1.onClick??function"
                 }
             ]
         }
     ],
 
+    renderBadgeComponent: ErrorBoundary.wrap((badge: ProfileBadge & BadgeUserArgs) => {
+        const Component = badge.component!;
+        return <Component {...badge} />;
+    }, { noop: true }),
+
     async start() {
         Vencord.Api.Badges.addBadge(ContributorBadge);
         const badges = await fetch("https://gist.githubusercontent.com/Vendicated/51a3dd775f6920429ec6e9b735ca7f01/raw/badges.csv").then(r => r.text());
@@ -93,15 +100,15 @@ export default definePlugin({
             return;
         }
         for (const line of lines) {
-            const [id, tooltip, image] = line.split(",");
+            const [id, description, image] = line.split(",");
-            DonorBadges[id] = { image, tooltip };
+            DonorBadges[id] = { image, description };
         }
     },
 
-    addDonorBadge(badges: ProfileBadge[], userId: string) {
+    getDonorBadge(userId: string) {
         const badge = DonorBadges[userId];
         if (badge) {
-            badges.unshift({
+            return {
                 ...badge,
                 position: BadgePosition.START,
                 props: {
@@ -165,7 +172,7 @@ export default definePlugin({
                         </ErrorBoundary>
                     ));
                 },
-            });
+            };
         }
     }
 });

src/plugins/apiContextMenu.ts

@@ -16,77 +16,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
 import { Devs } from "@utils/constants";
-import definePlugin, { type PatchReplacement } from "@utils/types";
+import definePlugin from "@utils/types";
-import { addListener, removeListener } from "@webpack";
-
-/**
- * The last var name corresponding to the Context Menu API (Discord, not ours) module
- */
-let lastVarName = "";
-
-/**
- * @param target The patch replacement object
- * @param exportKey The key exporting the build Context Menu component function
- */
-function makeReplacementProxy(target: PatchReplacement, exportKey: string) {
-    return new Proxy(target, {
-        get(_, p) {
-            if (p === "match") return RegExp(`${exportKey},{(?<=${lastVarName}\\.${exportKey},{)`, "g");
-            // @ts-expect-error
-            return Reflect.get(...arguments);
-        }
-    });
-}
-
-function listener(exports: any, id: number) {
-    if (!Settings.plugins.ContextMenuAPI.enabled) return removeListener(listener);
-
-    if (typeof exports !== "object" || exports === null) return;
-
-    for (const key in exports) if (key.length <= 3) {
-        const prop = exports[key];
-        if (typeof prop !== "function") continue;
-
-        const str = Function.prototype.toString.call(prop);
-        if (str.includes('path:["empty"]')) {
-            Vencord.Plugins.patches.push({
-                plugin: "ContextMenuAPI",
-                all: true,
-                noWarn: true,
-                find: "navId:",
-                replacement: [
-                    {
-                        // Set the lastVarName for our proxy to use
-                        match: RegExp(`${id}(?<=(\\i)=.+?)`),
-                        replace: (id, varName) => {
-                            lastVarName = varName;
-                            return id;
-                        }
-                    },
-                    /**
-                     * We are using a proxy here to utilize the whole code the patcher gives us, instead of matching the entire module (which is super slow)
-                     * Our proxy returns the corresponding match for that module utilizing lastVarName, which is set by the patch before
-                     */
-                    makeReplacementProxy({
-                        match: "", // Needed to canonicalizeDescriptor
-                        replace: "$&contextMenuApiArguments:arguments,",
-                    }, key)
-                ]
-            });
-
-            removeListener(listener);
-        }
-    }
-}
-
-addListener(listener);
 
 export default definePlugin({
     name: "ContextMenuAPI",
     description: "API for adding/removing items to/from context menus.",
-    authors: [Devs.Nuckyz],
+    authors: [Devs.Nuckyz, Devs.Ven],
+    required: true,
+
     patches: [
         {
             find: "♫ (つ｡◕‿‿◕｡)つ ♪",
@@ -94,6 +32,14 @@ export default definePlugin({
                 match: /(?<=function \i\((\i)\){)(?=var \i,\i=\i\.navId)/,
                 replace: (_, props) => `Vencord.Api.ContextMenu._patchContextMenu(${props});`
             }
+        },
+        {
+            find: ".Menu,{",
+            all: true,
+            replacement: {
+                match: /Menu,{(?<=\.jsxs?\)\(\i\.Menu,{)/g,
+                replace: "$&contextMenuApiArguments:typeof arguments!=='undefined'?arguments:[],"
+            }
         }
     ]
 });

src/plugins/betterFolders/index.ts

@@ -67,7 +67,7 @@ const settings = definePluginSettings({
 export default definePlugin({
     name: "BetterFolders",
     description: "Shows server folders on dedicated sidebar and adds folder related improvements",
-    authors: [Devs.juby],
+    authors: [Devs.juby, Devs.AutumnVN],
     patches: [
         {
             find: '("guildsnav")',
@@ -122,7 +122,7 @@ export default definePlugin({
     settings,
 
     start() {
-        const getGuildFolder = (id: string) => GuildFolderStore.guildFolders.find(f => f.guildIds.includes(id));
+        const getGuildFolder = (id: string) => GuildFolderStore.getGuildFolders().find(f => f.guildIds.includes(id));
 
         FluxDispatcher.subscribe("CHANNEL_SELECT", this.onSwitch = data => {
             if (!settings.store.closeAllFolders && !settings.store.forceOpen)

src/plugins/consoleShortcuts.ts

@@ -18,10 +18,12 @@
 
 import { Devs } from "@utils/constants";
 import { relaunch } from "@utils/native";
+import { canonicalizeMatch, canonicalizeReplace, canonicalizeReplacement } from "@utils/patches";
 import definePlugin from "@utils/types";
 import * as Webpack from "@webpack";
 import { extract, filters, findAll, search } from "@webpack";
-import { React } from "@webpack/common";
+import { React, ReactDOM } from "@webpack/common";
+import type { ComponentType } from "react";
 
 const WEB_ONLY = (f: string) => () => {
     throw new Error(`'${f}' is Discord Desktop only.`);
@@ -59,6 +61,7 @@ export default definePlugin({
             };
         }
 
+        let fakeRenderWin: WeakRef<Window> | undefined;
         return {
             wp: Vencord.Webpack,
             wpc: Webpack.wreq.c,
@@ -79,7 +82,18 @@ export default definePlugin({
             Settings: Vencord.Settings,
             Api: Vencord.Api,
             reload: () => location.reload(),
-            restart: IS_WEB ? WEB_ONLY("restart") : relaunch
+            restart: IS_WEB ? WEB_ONLY("restart") : relaunch,
+            canonicalizeMatch,
+            canonicalizeReplace,
+            canonicalizeReplacement,
+            fakeRender: (component: ComponentType, props: any) => {
+                const prevWin = fakeRenderWin?.deref();
+                const win = prevWin?.closed === false ? prevWin : window.open("about:blank", "Fake Render", "popup,width=500,height=500")!;
+                fakeRenderWin = new WeakRef(win);
+                win.focus();
+
+                ReactDOM.render(React.createElement(component, props), win.document.body);
+            }
         };
     },
 

src/plugins/crashHandler.ts

@@ -43,6 +43,7 @@ const settings = definePluginSettings({
 
 let crashCount: number = 0;
 let lastCrashTimestamp: number = 0;
+let shouldAttemptNextHandle = false;
 
 export default definePlugin({
     name: "CrashHandler",
@@ -72,6 +73,10 @@ export default definePlugin({
     ],
 
     handleCrash(_this: ReactElement & { forceUpdate: () => void; }) {
+        if (Date.now() - lastCrashTimestamp <= 1_000 && !shouldAttemptNextHandle) return true;
+
+        shouldAttemptNextHandle = false;
+
         if (++crashCount > 5) {
             try {
                 showNotification({
@@ -151,6 +156,7 @@ export default definePlugin({
         }
 
         try {
+            shouldAttemptNextHandle = true;
             _this.forceUpdate();
         } catch (err) {
             CrashHandlerLogger.debug("Failed to update crash handler component.", err);

src/plugins/devCompanion.dev.tsx

@@ -102,7 +102,8 @@ function initWs(isManual = false) {
 
         (settings.store.notifyOnAutoConnect || isManual) && showNotification({
             title: "Dev Companion Connected",
-            body: "Connected to WebSocket"
+            body: "Connected to WebSocket",
+            noPersist: true
         });
     });
 
@@ -237,10 +238,8 @@ function initWs(isManual = false) {
     });
 }
 
-const contextMenuPatch: NavContextMenuPatchCallback = kids => {
+const contextMenuPatch: NavContextMenuPatchCallback = children => () => {
-    if (kids.some(k => k?.props?.id === NAV_ID)) return;
+    children.unshift(
-
-    kids.unshift(
         <Menu.MenuItem
             id={NAV_ID}
             label="Reconnect Dev Companion"
@@ -256,7 +255,6 @@ export default definePlugin({
     name: "DevCompanion",
     description: "Dev Companion Plugin",
     authors: [Devs.Ven],
-    dependencies: ["ContextMenuAPI"],
     settings,
 
     start() {

src/plugins/emoteCloner.tsx

@@ -210,7 +210,7 @@ function isGifUrl(url: string) {
     return new URL(url).pathname.endsWith(".gif");
 }
 
-const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
     const { favoriteableId, itemHref, itemSrc, favoriteableType } = props ?? {};
 
     if (!favoriteableId || favoriteableType !== "emoji") return;
@@ -220,25 +220,22 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =
     const name = match[1] ?? "FakeNitroEmoji";
 
     const group = findGroupChildrenByChildId("copy-link", children);
-    if (group && !group.some(child => child?.props?.id === "emote-cloner"))
+    if (group) group.push(buildMenuItem(favoriteableId, name, isGifUrl(itemHref ?? itemSrc)));
-        group.push(buildMenuItem(favoriteableId, name, isGifUrl(itemHref ?? itemSrc)));
 };
 
-const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => {
+const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => () => {
     const { id, name, type } = props?.target?.dataset ?? {};
     if (!id || !name || type !== "emoji") return;
 
     const firstChild = props.target.firstChild as HTMLImageElement;
 
-    if (!children.some(c => c?.props?.id === "emote-cloner"))
+    children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
-        children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
 };
 
 export default definePlugin({
     name: "EmoteCloner",
     description: "Adds a Clone context menu item to emotes to clone them your own server",
     authors: [Devs.Ven, Devs.Nuckyz],
-    dependencies: ["ContextMenuAPI"],
 
     start() {
         addContextMenuPatch("message", messageContextMenuPatch);

src/plugins/fakeNitro.tsx

@@ -17,20 +17,29 @@
 */
 
 import { addPreEditListener, addPreSendListener, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
-import { migratePluginSettings, Settings } from "@api/settings";
+import { definePluginSettings, migratePluginSettings, Settings } from "@api/settings";
 import { Devs } from "@utils/constants";
-import { ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
+import { ApngBlendOp, ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
 import { getCurrentGuild } from "@utils/discord";
 import { proxyLazy } from "@utils/proxyLazy";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
-import { ChannelStore, FluxDispatcher, PermissionStore, UserStore } from "@webpack/common";
+import { ChannelStore, FluxDispatcher, Parser, PermissionStore, UserStore } from "@webpack/common";
+import type { Message } from "discord-types/general";
+import type { ReactNode } from "react";
 
 const DRAFT_TYPE = 0;
 const promptToUpload = findByCodeLazy("UPLOAD_FILE_LIMIT_ERROR");
 const UserSettingsProtoStore = findStoreLazy("UserSettingsProtoStore");
 const PreloadedUserSettingsProtoHandler = findLazy(m => m.ProtoClass?.typeName === "discord_protos.discord_users.v1.PreloadedUserSettings");
 const ReaderFactory = findByPropsLazy("readerFactory");
+const StickerStore = findStoreLazy("StickersStore") as {
+    getPremiumPacks(): StickerPack[];
+    getAllGuildStickers(): Map<string, Sticker[]>;
+    getStickerById(id: string): Sticker | undefined;
+};
+const EmojiStore = findStoreLazy("EmojiStore");
+
 
 function searchProtoClass(localName: string, parentProtoClass: any) {
     if (!parentProtoClass) return;
@@ -86,18 +95,74 @@ interface StickerPack {
     stickers: Sticker[];
 }
 
+const fakeNitroEmojiRegex = /\/emojis\/(\d+?)\.(png|webp|gif)/;
+const fakeNitroStickerRegex = /\/stickers\/(\d+?)\./;
+const fakeNitroGifStickerRegex = /\/attachments\/\d+?\/\d+?\/(\d+?)\.gif/;
+
+const settings = definePluginSettings({
+    enableEmojiBypass: {
+        description: "Allow sending fake emojis",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    },
+    emojiSize: {
+        description: "Size of the emojis when sending",
+        type: OptionType.SLIDER,
+        default: 48,
+        markers: [32, 48, 64, 128, 160, 256, 512]
+    },
+    transformEmojis: {
+        description: "Whether to transform fake emojis into real ones",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    },
+    enableStickerBypass: {
+        description: "Allow sending fake stickers",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    },
+    stickerSize: {
+        description: "Size of the stickers when sending",
+        type: OptionType.SLIDER,
+        default: 160,
+        markers: [32, 64, 128, 160, 256, 512]
+    },
+    transformStickers: {
+        description: "Whether to transform fake stickers into real ones",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    },
+    transformCompoundSentence: {
+        description: "Whether to transform fake stickers and emojis in compound sentences (sentences with more content than just the fake emoji or sticker link)",
+        type: OptionType.BOOLEAN,
+        default: false
+    },
+    enableStreamQualityBypass: {
+        description: "Allow streaming in nitro quality",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: true
+    }
+});
+
 migratePluginSettings("FakeNitro", "NitroBypass");
 
 export default definePlugin({
     name: "FakeNitro",
-    authors: [Devs.Arjix, Devs.D3SOX, Devs.Ven, Devs.obscurity, Devs.captain, Devs.Nuckyz],
+    authors: [Devs.Arjix, Devs.D3SOX, Devs.Ven, Devs.obscurity, Devs.captain, Devs.Nuckyz, Devs.AutumnVN],
     description: "Allows you to stream in nitro quality, send fake emojis/stickers and use client themes.",
     dependencies: ["MessageEventsAPI"],
 
+    settings,
+
     patches: [
         {
             find: ".PREMIUM_LOCKED;",
-            predicate: () => Settings.plugins.FakeNitro.enableEmojiBypass === true,
+            predicate: () => settings.store.enableEmojiBypass,
             replacement: [
                 {
                     match: /(?<=(\i)=\i\.intention)/,
@@ -115,7 +180,7 @@ export default definePlugin({
         },
         {
             find: "canUseAnimatedEmojis:function",
-            predicate: () => Settings.plugins.FakeNitro.enableEmojiBypass === true,
+            predicate: () => settings.store.enableEmojiBypass,
             replacement: {
                 match: /((?:canUseEmojisEverywhere|canUseAnimatedEmojis):function\(\i)\){(.+?\))/g,
                 replace: (_, rest, premiumCheck) => `${rest},fakeNitroIntention){${premiumCheck}||fakeNitroIntention==null||[${EmojiIntentions.CHAT},${EmojiIntentions.GUILD_STICKER_RELATED_EMOJI}].includes(fakeNitroIntention)`
@@ -123,7 +188,7 @@ export default definePlugin({
         },
         {
             find: "canUseStickersEverywhere:function",
-            predicate: () => Settings.plugins.FakeNitro.enableStickerBypass === true,
+            predicate: () => settings.store.enableStickerBypass,
             replacement: {
                 match: /canUseStickersEverywhere:function\(\i\){/,
                 replace: "$&return true;"
@@ -131,7 +196,7 @@ export default definePlugin({
         },
         {
             find: "\"SENDABLE\"",
-            predicate: () => Settings.plugins.FakeNitro.enableStickerBypass === true,
+            predicate: () => settings.store.enableStickerBypass,
             replacement: {
                 match: /(\w+)\.available\?/,
                 replace: "true?"
@@ -139,7 +204,7 @@ export default definePlugin({
         },
         {
             find: "canStreamHighQuality:function",
-            predicate: () => Settings.plugins.FakeNitro.enableStreamQualityBypass === true,
+            predicate: () => settings.store.enableStreamQualityBypass,
             replacement: [
                 "canUseHighVideoUploadQuality",
                 "canStreamHighQuality",
@@ -153,7 +218,7 @@ export default definePlugin({
         },
         {
             find: "STREAM_FPS_OPTION.format",
-            predicate: () => Settings.plugins.FakeNitro.enableStreamQualityBypass === true,
+            predicate: () => settings.store.enableStreamQualityBypass,
             replacement: {
                 match: /(userPremiumType|guildPremiumTier):.{0,10}TIER_\d,?/g,
                 replace: ""
@@ -186,77 +251,65 @@ export default definePlugin({
                 replace: (_, rest, backgroundGradientPresetId, originalCall, theme) => `${rest}$self.handleGradientThemeSelect(${backgroundGradientPresetId},${theme},()=>${originalCall});`
             }
         },
-        {
-            find: 'jumboable?"jumbo":"default"',
-            predicate: () => Settings.plugins.FakeNitro.transformEmojis === true,
-            replacement: {
-                match: /jumboable\?"jumbo":"default",emojiId.+?}}\)},(?<=(\i)=function\(\i\){var \i=\i\.node.+?)/,
-                replace: (m, component) => `${m}fakeNitroEmojiComponentExport=($self.EmojiComponent=${component},void 0),`
-            }
-        },
         {
             find: '["strong","em","u","text","inlineCode","s","spoiler"]',
-            predicate: () => Settings.plugins.FakeNitro.transformEmojis === true,
             replacement: [
                 {
+                    predicate: () => settings.store.transformEmojis,
                     match: /1!==(\i)\.length\|\|1!==\i\.length/,
-                    replace: (m, content) => `${m}||${content}[0].target?.startsWith("https://cdn.discordapp.com/emojis/")`
+                    replace: (m, content) => `${m}||$self.shouldKeepEmojiLink(${content}[0])`
                 },
                 {
+                    predicate: () => settings.store.transformEmojis || settings.store.transformStickers,
                     match: /(?=return{hasSpoilerEmbeds:\i,content:(\i)})/,
-                    replace: (_, content) => `${content}=$self.patchFakeNitroEmojis(${content},arguments[2]?.formatInline);`
+                    replace: (_, content) => `${content}=$self.patchFakeNitroEmojisOrRemoveStickersLinks(${content},arguments[2]?.formatInline);`
                 }
             ]
         },
         {
             find: "renderEmbeds=function",
-            predicate: () => Settings.plugins.FakeNitro.transformEmojis === true,
+            replacement: [
+                {
+                    predicate: () => settings.store.transformEmojis || settings.store.transformStickers,
+                    match: /(renderEmbeds=function\((\i)\){)(.+?embeds\.map\(\(function\((\i)\){)/,
+                    replace: (_, rest1, message, rest2, embed) => `${rest1}const fakeNitroMessage=${message};${rest2}if($self.shouldIgnoreEmbed(${embed},fakeNitroMessage))return null;`
+                },
+                {
+                    predicate: () => settings.store.transformStickers,
+                    match: /renderStickersAccessories=function\((\i)\){var (\i)=\(0,\i\.\i\)\(\i\),/,
+                    replace: (m, message, stickers) => `${m}${stickers}=$self.patchFakeNitroStickers(${stickers},${message}),`
+                },
+                {
+                    predicate: () => settings.store.transformStickers,
+                    match: /renderAttachments=function\(\i\){var (\i)=\i.attachments.+?;/,
+                    replace: (m, attachments) => `${m}${attachments}=$self.filterAttachments(${attachments});`
+                }
+            ]
+        },
+        {
+            find: ".STICKER_IN_MESSAGE_HOVER,",
+            predicate: () => settings.store.transformStickers,
+            replacement: [
+                {
+                    match: /var (\i)=\i\.renderableSticker,.{0,50}closePopout.+?channel:\i,closePopout:\i,/,
+                    replace: (m, renderableSticker) => `${m}renderableSticker:${renderableSticker},`
+                },
+                {
+                    match: /(emojiSection.{0,50}description:)(\i)(?<=(\i)\.sticker,.+?)(?=,)/,
+                    replace: (_, rest, reactNode, props) => `${rest}$self.addFakeNotice("STICKER",${reactNode},!!${props}.renderableSticker?.fake)`
+                }
+            ]
+        },
+        {
+            find: ".Messages.EMOJI_POPOUT_PREMIUM_JOINED_GUILD_DESCRIPTION",
+            predicate: () => settings.store.transformEmojis,
             replacement: {
-                match: /renderEmbeds=function\(\i\){.+?embeds\.map\(\(function\((\i)\){/,
+                match: /((\i)=\i\.node,\i=\i\.emojiSourceDiscoverableGuild)(.+?return )(.{0,450}Messages\.EMOJI_POPOUT_PREMIUM_JOINED_GUILD_DESCRIPTION.+?}\))/,
-                replace: (m, embed) => `${m}if(${embed}.url?.startsWith("https://cdn.discordapp.com/emojis/"))return null;`
+                replace: (_, rest1, node, rest2, reactNode) => `${rest1},fakeNitroNode=${node}${rest2}$self.addFakeNotice("EMOJI",${reactNode},fakeNitroNode.fake)`
             }
         }
     ],
 
-    options: {
-        enableEmojiBypass: {
-            description: "Allow sending fake emojis",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        },
-        emojiSize: {
-            description: "Size of the emojis when sending",
-            type: OptionType.SLIDER,
-            default: 48,
-            markers: [32, 48, 64, 128, 160, 256, 512],
-        },
-        transformEmojis: {
-            description: "Whether to transform fake emojis into real ones",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        },
-        enableStickerBypass: {
-            description: "Allow sending fake stickers",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        },
-        stickerSize: {
-            description: "Size of the stickers when sending",
-            type: OptionType.SLIDER,
-            default: 160,
-            markers: [32, 64, 128, 160, 256, 512],
-        },
-        enableStreamQualityBypass: {
-            description: "Allow streaming in nitro quality",
-            type: OptionType.BOOLEAN,
-            default: true,
-            restartNeeded: true,
-        }
-    },
-
     get guildId() {
         return getCurrentGuild()?.id;
     },
@@ -331,37 +384,166 @@ export default definePlugin({
         });
     },
 
-    EmojiComponent: null as any,
+    patchFakeNitroEmojisOrRemoveStickersLinks(content: Array<any>, inline: boolean) {
-
+        if (content.length > 1 && !settings.store.transformCompoundSentence) return content;
-    patchFakeNitroEmojis(content: Array<any>, inline: boolean) {
-        if (!this.EmojiComponent) return content;
 
         const newContent: Array<any> = [];
 
+        let nextIndex = content.length;
+
         for (const element of content) {
             if (element.props?.trusted == null) {
                 newContent.push(element);
                 continue;
             }
 
-            const fakeNitroMatch = element.props.href.match(/https:\/\/cdn\.discordapp\.com\/emojis\/(\d+?)\.(png|webp|gif).+?(?=\s|$)/);
+            if (settings.store.transformEmojis) {
-            if (!fakeNitroMatch) {
+                const fakeNitroMatch = element.props.href.match(fakeNitroEmojiRegex);
-                newContent.push(element);
+                if (fakeNitroMatch) {
+                    let url: URL | null = null;
+                    try {
+                        url = new URL(element.props.href);
+                    } catch { }
+
+                    const emojiName = EmojiStore.getCustomEmojiById(fakeNitroMatch[1])?.name ?? url?.searchParams.get("name") ?? "FakeNitroEmoji";
+
+                    newContent.push(Parser.defaultRules.customEmoji.react({
+                        jumboable: !inline && content.length === 1,
+                        animated: fakeNitroMatch[2] === "gif",
+                        emojiId: fakeNitroMatch[1],
+                        name: emojiName,
+                        fake: true
+                    }, void 0, { key: String(nextIndex++) }));
+
+                    continue;
+                }
+            }
+
+            if (settings.store.transformStickers) {
+                if (fakeNitroStickerRegex.test(element.props.href)) continue;
+
+                const gifMatch = element.props.href.match(fakeNitroGifStickerRegex);
+                if (gifMatch) {
+                    // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
+                    if (StickerStore.getStickerById(gifMatch[1])) continue;
+                }
+            }
+
+            newContent.push(element);
+        }
+
+        const firstContent = newContent[0];
+        if (typeof firstContent === "string") newContent[0] = firstContent.trimStart();
+
+        return newContent;
+    },
+
+    patchFakeNitroStickers(stickers: Array<any>, message: Message) {
+        const itemsToMaybePush: Array<string> = [];
+
+        const contentItems = message.content.split(/\s/);
+        if (contentItems.length === 1 && !settings.store.transformCompoundSentence) itemsToMaybePush.push(contentItems[0]);
+        else itemsToMaybePush.push(...contentItems);
+
+        itemsToMaybePush.push(...message.attachments.filter(attachment => attachment.content_type === "image/gif").map(attachment => attachment.url));
+
+        for (const item of itemsToMaybePush) {
+            const imgMatch = item.match(fakeNitroStickerRegex);
+            if (imgMatch) {
+                let url: URL | null = null;
+                try {
+                    url = new URL(item);
+                } catch { }
+
+                const stickerName = StickerStore.getStickerById(imgMatch[1])?.name ?? url?.searchParams.get("name") ?? "FakeNitroSticker";
+                stickers.push({
+                    format_type: 1,
+                    id: imgMatch[1],
+                    name: stickerName,
+                    fake: true
+                });
+
                 continue;
             }
 
-            newContent.push((
+            const gifMatch = item.match(fakeNitroGifStickerRegex);
-                <this.EmojiComponent node={{
+            if (gifMatch) {
-                    type: "customEmoji",
+                if (!StickerStore.getStickerById(gifMatch[1])) continue;
-                    jumboable: !inline && content.length === 1,
+
-                    animated: fakeNitroMatch[2] === "gif",
+                const stickerName = StickerStore.getStickerById(gifMatch[1])?.name ?? "FakeNitroSticker";
-                    name: ":FakeNitroEmoji:",
+                stickers.push({
-                    emojiId: fakeNitroMatch[1]
+                    format_type: 2,
-                }} />
+                    id: gifMatch[1],
-            ));
+                    name: stickerName,
+                    fake: true
+                });
+            }
         }
 
-        return newContent;
+        return stickers;
+    },
+
+    shouldIgnoreEmbed(embed: Message["embeds"][number], message: Message) {
+        if (message.content.split(/\s/).length > 1 && !settings.store.transformCompoundSentence) return false;
+
+        switch (embed.type) {
+            case "image": {
+                if (settings.store.transformEmojis) {
+                    if (fakeNitroEmojiRegex.test(embed.url!)) return true;
+                }
+
+                if (settings.store.transformStickers) {
+                    if (fakeNitroStickerRegex.test(embed.url!)) return true;
+
+                    const gifMatch = embed.url!.match(fakeNitroGifStickerRegex);
+                    if (gifMatch) {
+                        // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
+                        if (StickerStore.getStickerById(gifMatch[1])) return true;
+                    }
+                }
+
+                break;
+            }
+        }
+
+        return false;
+    },
+
+    filterAttachments(attachments: Message["attachments"]) {
+        return attachments.filter(attachment => {
+            if (attachment.content_type !== "image/gif") return true;
+
+            const match = attachment.url.match(fakeNitroGifStickerRegex);
+            if (match) {
+                // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
+                if (StickerStore.getStickerById(match[1])) return false;
+            }
+
+            return true;
+        });
+    },
+
+    shouldKeepEmojiLink(link: any) {
+        return link.target && fakeNitroEmojiRegex.test(link.target);
+    },
+
+    addFakeNotice(type: "STICKER" | "EMOJI", node: Array<ReactNode>, fake: boolean) {
+        if (!fake) return node;
+
+        node = Array.isArray(node) ? node : [node];
+
+        switch (type) {
+            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 "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;
+            }
+        }
     },
 
     hasPermissionToUseExternalEmojis(channelId: string) {
@@ -407,8 +589,17 @@ export default definePlugin({
         const scale = resolution / Math.max(width, height);
         ctx.scale(scale, scale);
 
-        let lastImg: HTMLImageElement | null = null;
+        let previousFrameData: ImageData;
-        for (const { left, top, width, height, disposeOp, img, delay } of frames) {
+
+        for (const frame of frames) {
+            const { left, top, width, height, img, delay, blendOp, disposeOp } = frame;
+
+            previousFrameData = ctx.getImageData(left, top, width, height);
+
+            if (blendOp === ApngBlendOp.SOURCE) {
+                ctx.clearRect(left, top, width, height);
+            }
+
             ctx.drawImage(img, left, top, width, height);
 
             const { data } = ctx.getImageData(0, 0, resolution, resolution);
@@ -419,19 +610,18 @@ export default definePlugin({
             gif.writeFrame(index, resolution, resolution, {
                 transparent: true,
                 palette,
-                delay,
+                delay
             });
 
             if (disposeOp === ApngDisposeOp.BACKGROUND) {
                 ctx.clearRect(left, top, width, height);
-            } else if (disposeOp === ApngDisposeOp.PREVIOUS && lastImg) {
+            } else if (disposeOp === ApngDisposeOp.PREVIOUS) {
-                ctx.drawImage(lastImg, left, top, width, height);
+                ctx.putImageData(previousFrameData, left, top);
             }
-
-            lastImg = img;
         }
 
         gif.finish();
+
         const file = new File([gif.bytesView()], `${stickerId}.gif`, { type: "image/gif" });
         promptToUpload([file], ChannelStore.getChannel(channelId), DRAFT_TYPE);
     },
@@ -442,13 +632,6 @@ export default definePlugin({
             return;
         }
 
-        const EmojiStore = findByPropsLazy("getCustomEmojiById");
-        const StickerStore = findByPropsLazy("getAllGuildStickers") as {
-            getPremiumPacks(): StickerPack[];
-            getAllGuildStickers(): Map<string, Sticker[]>;
-            getStickerById(id: string): Sticker | undefined;
-        };
-
         function getWordBoundary(origStr: string, offset: number) {
             return (!origStr[offset] || /\s/.test(origStr[offset])) ? "" : " ";
         }
@@ -469,7 +652,7 @@ export default definePlugin({
 
                 let link = this.getStickerLink(sticker.id);
                 if (sticker.format_type === 2) {
-                    this.sendAnimatedSticker(this.getStickerLink(sticker.id), sticker.id, channelId);
+                    this.sendAnimatedSticker(link, sticker.id, channelId);
                     return { cancel: true };
                 } else {
                     if ("pack_id" in sticker) {
@@ -483,7 +666,7 @@ export default definePlugin({
                     }
 
                     delete extra.stickerIds;
-                    messageObj.content += " " + link;
+                    messageObj.content += " " + link + `&name=${encodeURIComponent(sticker.name)}`;
                 }
             }
 
@@ -493,7 +676,10 @@ export default definePlugin({
                     if (emoji.guildId === guildId && !emoji.animated) continue;
 
                     const emojiString = `<${emoji.animated ? "a" : ""}:${emoji.originalName || emoji.name}:${emoji.id}>`;
-                    const url = emoji.url.replace(/\?size=\d+/, `?size=${Settings.plugins.FakeNitro.emojiSize}`);
+                    const url = emoji.url.replace(/\?size=\d+/, "?" + new URLSearchParams({
+                        size: Settings.plugins.FakeNitro.emojiSize,
+                        name: encodeURIComponent(emoji.name)
+                    }));
                     messageObj.content = messageObj.content.replace(emojiString, (match, offset, origStr) => {
                         return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
                     });
@@ -513,7 +699,10 @@ export default definePlugin({
                 if (emoji == null || (emoji.guildId === guildId && !emoji.animated)) continue;
                 if (!emoji.require_colons) continue;
 
-                const url = emoji.url.replace(/\?size=\d+/, `?size=${Settings.plugins.FakeNitro.emojiSize}`);
+                const url = emoji.url.replace(/\?size=\d+/, "?" + new URLSearchParams({
+                    size: Settings.plugins.FakeNitro.emojiSize,
+                    name: encodeURIComponent(emoji.name)
+                }));
                 messageObj.content = messageObj.content.replace(emojiStr, (match, offset, origStr) => {
                     return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
                 });

src/plugins/fakeProfileThemes.tsx

@@ -83,7 +83,7 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "FakeProfileThemes",
-    description: "Allows profile theming by hiding the colors in your bio thanks to invisible 3y3 encoding.",
+    description: "Allows profile theming by hiding the colors in your bio thanks to invisible 3y3 encoding",
     authors: [Devs.Alyxia, Devs.Remty],
     patches: [
         {
@@ -112,7 +112,7 @@ export default definePlugin({
                     <li>• click the "Copy 3y3" button</li>
                     <li>• paste the invisible text anywhere in your bio</li>
                 </ul><br />
-                <b>Please note:</b> if you are using a theme which hides nitro upsells, you should disable it temporarily to set colors.
+                <b>Please note:</b> if you are using a theme which hides nitro ads, you should disable it temporarily to set colors.
             </Forms.FormText>
         </Forms.FormSection>),
     settings,

src/plugins/friendInvites.ts

@@ -19,12 +19,16 @@
 import { ApplicationCommandInputType, sendBotMessage } from "@api/Commands";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { findByProps } from "@webpack";
+import { findByPropsLazy } from "@webpack";
+import { RestAPI, UserStore } from "@webpack/common";
+
+const FriendInvites = findByPropsLazy("createFriendInvite");
+const uuid = findByPropsLazy("v4", "v1");
 
 export default definePlugin({
     name: "FriendInvites",
     description: "Create and manage friend invite links via slash commands (/create friend invite, /view friend invites, /revoke friend invites).",
-    authors: [Devs.afn],
+    authors: [Devs.afn, Devs.Dziurwa],
     dependencies: ["CommandsAPI"],
     commands: [
         {
@@ -32,14 +36,35 @@ export default definePlugin({
             description: "Generates a friend invite link.",
             inputType: ApplicationCommandInputType.BOT,
             execute: async (_, ctx) => {
-                const friendInvites = findByProps("createFriendInvite");
+                if (!UserStore.getCurrentUser().phone)
-                const createInvite = await friendInvites.createFriendInvite();
+                    return sendBotMessage(ctx.channel.id, {
+                        content: "You need to have a phone number connected to your account to create a friend invite!"
+                    });
 
-                return void sendBotMessage(ctx.channel.id, {
+                const random = uuid.v4();
+                const invite = await RestAPI.post({
+                    url: "/friend-finder/find-friends",
+                    body: {
+                        modified_contacts: {
+                            [random]: [1, "", ""]
+                        },
+                        phone_contact_methods_count: 1
+                    }
+                }).then(res =>
+                    FriendInvites.createFriendInvite({
+                        code: res.body.invite_suggestions[0][3],
+                        recipient_phone_number_or_email: random,
+                        contact_visibility: 1,
+                        filter_visibilities: [],
+                        filtered_invite_suggestions_index: 1
+                    })
+                );
+
+                sendBotMessage(ctx.channel.id, {
                     content: `
-                        discord.gg/${createInvite.code} ·
+                        discord.gg/${invite.code} ·
-                        Expires: <t:${new Date(createInvite.expires_at).getTime() / 1000}:R> ·
+                        Expires: <t:${new Date(invite.expires_at).getTime() / 1000}:R> ·
-                        Max uses: \`${createInvite.max_uses}\`
+                        Max uses: \`${invite.max_uses}\`
                     `.trim().replace(/\s+/g, " ")
                 });
             },
@@ -49,15 +74,16 @@ export default definePlugin({
             description: "View a list of all generated friend invites.",
             inputType: ApplicationCommandInputType.BOT,
             execute: async (_, ctx) => {
-                const friendInvites = findByProps("createFriendInvite");
+                const invites = await FriendInvites.getAllFriendInvites();
-                const invites = await friendInvites.getAllFriendInvites();
                 const friendInviteList = invites.map(i =>
-                    `_discord.gg/${i.code}_ ·
+                    `
+                    _discord.gg/${i.code}_ ·
                     Expires: <t:${new Date(i.expires_at).getTime() / 1000}:R> ·
-                    Times used: \`${i.uses}/${i.max_uses}\``.trim().replace(/\s+/g, " ")
+                    Times used: \`${i.uses}/${i.max_uses}\`
+                    `.trim().replace(/\s+/g, " ")
                 );
 
-                return void sendBotMessage(ctx.channel.id, {
+                sendBotMessage(ctx.channel.id, {
                     content: friendInviteList.join("\n") || "You have no active friend invites!"
                 });
             },
@@ -67,7 +93,7 @@ export default definePlugin({
             description: "Revokes all generated friend invites.",
             inputType: ApplicationCommandInputType.BOT,
             execute: async (_, ctx) => {
-                await findByProps("createFriendInvite").revokeFriendInvites();
+                await FriendInvites.revokeFriendInvites();
 
                 return void sendBotMessage(ctx.channel.id, {
                     content: "All friend invites have been revoked."

src/plugins/gameActivityToggle/index.tsx

@@ -48,7 +48,7 @@ function GameActivityToggleButton() {
 
     return (
         <Button
-            tooltipText="Toggle Game Activity"
+            tooltipText={showCurrentGame ? "Disable Game Activity" : "Enable Game Activity"}
             icon={makeIcon(showCurrentGame)}
             role="switch"
             aria-checked={!showCurrentGame}

src/plugins/gifPaste.ts

@@ -18,12 +18,12 @@
 
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { filters, findLazy, mapMangledModuleLazy } from "@webpack";
+import { filters, mapMangledModuleLazy } from "@webpack";
+import { ComponentDispatch } from "@webpack/common";
 
 const ExpressionPickerState = mapMangledModuleLazy('name:"expression-picker-last-active-view"', {
     close: filters.byCode("activeView:null", "setState")
 });
-const ComponentDispatch = findLazy(m => m.emitter?._events?.INSERT_TEXT);
 
 export default definePlugin({
     name: "GifPaste",

src/plugins/ignoreActivities.tsx

@@ -88,7 +88,7 @@ function ToggleIconOn({ forceWhite }: { forceWhite?: boolean; }) {
     );
 }
 
-function ToggleActivityComponent({ activity, forceWhite }: { activity: IgnoredActivity; forceWhite?: boolean; }) {
+function ToggleActivityComponent({ activity, forceWhite, forceLeftMargin }: { activity: IgnoredActivity; forceWhite?: boolean; forceLeftMargin?: boolean; }) {
     const forceUpdate = useForceUpdater();
 
     return (
@@ -101,6 +101,7 @@ function ToggleActivityComponent({ activity, forceWhite }: { activity: IgnoredAc
                     role="button"
                     aria-label="Toggle activity"
                     tabIndex={0}
+                    style={forceLeftMargin ? { marginLeft: "2px" } : undefined}
                     onClick={e => handleActivityToggle(e, activity, forceUpdate)}
                 >
                     {
@@ -200,7 +201,7 @@ export default definePlugin({
     renderToggleGameActivityButton(props: { id?: string; exePath: string; }) {
         return (
             <ErrorBoundary noop>
-                <ToggleActivityComponent activity={{ id: props.id ?? props.exePath, type: ActivitiesTypes.Game }} />
+                <ToggleActivityComponent activity={{ id: props.id ?? props.exePath, type: ActivitiesTypes.Game }} forceLeftMargin={true} />
             </ErrorBoundary>
         );
     },

src/plugins/imageZoom/components/Magnifier.tsx

@@ -0,0 +1,198 @@
+/*
+ * 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 { FluxDispatcher, React, useRef, useState } from "@webpack/common";
+
+import { ELEMENT_ID } from "../constants";
+import { settings } from "../index";
+import { waitFor } from "../utils/waitFor";
+
+interface Vec2 {
+    x: number,
+    y: number;
+}
+
+export interface MagnifierProps {
+    zoom: number;
+    size: number,
+    instance: any;
+}
+
+export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSize, zoom: initalZoom }) => {
+    const [ready, setReady] = useState(false);
+
+    const [lensPosition, setLensPosition] = useState<Vec2>({ x: 0, y: 0 });
+    const [imagePosition, setImagePosition] = useState<Vec2>({ x: 0, y: 0 });
+    const [opacity, setOpacity] = useState(0);
+
+    const isShiftDown = useRef(false);
+
+    const zoom = useRef(initalZoom);
+    const size = useRef(initialSize);
+
+    const element = useRef<HTMLDivElement | null>(null);
+    const currentVideoElementRef = useRef<HTMLVideoElement | null>(null);
+    const originalVideoElementRef = useRef<HTMLVideoElement | null>(null);
+    const imageRef = useRef<HTMLImageElement | null>(null);
+
+    // since we accessing document im gonna use useLayoutEffect
+    React.useLayoutEffect(() => {
+        const onKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Shift") {
+                isShiftDown.current = true;
+            }
+        };
+        const onKeyUp = (e: KeyboardEvent) => {
+            if (e.key === "Shift") {
+                isShiftDown.current = false;
+            }
+        };
+        const syncVideos = () => {
+            currentVideoElementRef.current!.currentTime = originalVideoElementRef.current!.currentTime;
+        };
+
+        const updateMousePosition = (e: MouseEvent) => {
+            if (instance.state.mouseOver && instance.state.mouseDown) {
+                const offset = size.current / 2;
+                const pos = { x: e.pageX, y: e.pageY };
+                const x = -((pos.x - element.current!.getBoundingClientRect().left) * zoom.current - offset);
+                const y = -((pos.y - element.current!.getBoundingClientRect().top) * zoom.current - offset);
+                setLensPosition({ x: e.x - offset, y: e.y - offset });
+                setImagePosition({ x, y });
+                setOpacity(1);
+            } else {
+                setOpacity(0);
+            }
+
+        };
+
+        const onMouseDown = (e: MouseEvent) => {
+            if (instance.state.mouseOver && e.button === 0 /* left click */) {
+                zoom.current = settings.store.zoom;
+                size.current = settings.store.size;
+
+                // close context menu if open
+                if (document.getElementById("image-context")) {
+                    FluxDispatcher.dispatch({ type: "CONTEXT_MENU_CLOSE" });
+                }
+
+                updateMousePosition(e);
+                setOpacity(1);
+            }
+        };
+
+        const onMouseUp = () => {
+            setOpacity(0);
+            if (settings.store.saveZoomValues) {
+                settings.store.zoom = zoom.current;
+                settings.store.size = size.current;
+            }
+        };
+
+        const onWheel = async (e: WheelEvent) => {
+            if (instance.state.mouseOver && instance.state.mouseDown && !isShiftDown.current) {
+                const val = zoom.current + ((e.deltaY / 100) * (settings.store.invertScroll ? -1 : 1)) * settings.store.zoomSpeed;
+                zoom.current = val <= 1 ? 1 : val;
+                updateMousePosition(e);
+            }
+            if (instance.state.mouseOver && instance.state.mouseDown && isShiftDown.current) {
+                const val = size.current + (e.deltaY * (settings.store.invertScroll ? -1 : 1)) * settings.store.zoomSpeed;
+                size.current = val <= 50 ? 50 : val;
+                updateMousePosition(e);
+            }
+        };
+
+        waitFor(() => instance.state.readyState === "READY", () => {
+            const elem = document.getElementById(ELEMENT_ID) as HTMLDivElement;
+            element.current = elem;
+            elem.firstElementChild!.setAttribute("draggable", "false");
+            if (instance.props.animated) {
+                originalVideoElementRef.current = elem!.querySelector("video")!;
+                originalVideoElementRef.current.addEventListener("timeupdate", syncVideos);
+                setReady(true);
+            } else {
+                setReady(true);
+            }
+        });
+        document.addEventListener("keydown", onKeyDown);
+        document.addEventListener("keyup", onKeyUp);
+        document.addEventListener("mousemove", updateMousePosition);
+        document.addEventListener("mousedown", onMouseDown);
+        document.addEventListener("mouseup", onMouseUp);
+        document.addEventListener("wheel", onWheel);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+            document.removeEventListener("keyup", onKeyUp);
+            document.removeEventListener("mousemove", updateMousePosition);
+            document.removeEventListener("mousedown", onMouseDown);
+            document.removeEventListener("mouseup", onMouseUp);
+            document.removeEventListener("wheel", onWheel);
+
+            if (settings.store.saveZoomValues) {
+                settings.store.zoom = zoom.current;
+                settings.store.size = size.current;
+            }
+        };
+    }, []);
+
+    if (!ready) return null;
+
+    const box = element.current!.getBoundingClientRect();
+
+    return (
+        <div
+            className="vc-imgzoom-lens"
+            style={{
+                opacity,
+                width: size.current + "px",
+                height: size.current + "px",
+                transform: `translate(${lensPosition.x}px, ${lensPosition.y}px)`,
+            }}
+        >
+            {instance.props.animated ?
+                (
+                    <video
+                        ref={currentVideoElementRef}
+                        style={{
+                            position: "absolute",
+                            left: `${imagePosition.x}px`,
+                            top: `${imagePosition.y}px`
+                        }}
+                        width={`${box.width * zoom.current}px`}
+                        height={`${box.height * zoom.current}px`}
+                        poster={instance.props.src}
+                        src={originalVideoElementRef.current?.src ?? instance.props.src}
+                        autoPlay
+                        loop
+                    />
+                ) : (
+                    <img
+                        ref={imageRef}
+                        style={{
+                            position: "absolute",
+                            transform: `translate(${imagePosition.x}px, ${imagePosition.y}px)`
+                        }}
+                        width={`${box.width * zoom.current}px`}
+                        height={`${box.height * zoom.current}px`}
+                        src={instance.props.src}
+                        alt=""
+                    />
+                )}
+        </div>
+    );
+};

src/plugins/imageZoom/constants.ts

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

src/plugins/imageZoom/index.tsx

@@ -0,0 +1,234 @@
+/*
+ * 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 { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { definePluginSettings } from "@api/settings";
+import { disableStyle, enableStyle } from "@api/Styles";
+import { makeRange } from "@components/PluginSettings/components";
+import { Devs } from "@utils/constants";
+import { debounce } from "@utils/debounce";
+import definePlugin, { OptionType } from "@utils/types";
+import { Menu, React, ReactDOM } from "@webpack/common";
+import type { Root } from "react-dom/client";
+
+import { Magnifier, MagnifierProps } from "./components/Magnifier";
+import { ELEMENT_ID } from "./constants";
+import styles from "./styles.css?managed";
+
+export const settings = definePluginSettings({
+    saveZoomValues: {
+        type: OptionType.BOOLEAN,
+        description: "Whether to save zoom and lens size values",
+        default: true,
+    },
+
+    preventCarouselFromClosingOnClick: {
+        type: OptionType.BOOLEAN,
+        // Thanks chat gpt
+        description: "Allow the image modal in the image slideshow thing / carousel to remain open when clicking on the image",
+        default: true,
+    },
+
+    invertScroll: {
+        type: OptionType.BOOLEAN,
+        description: "Invert scroll",
+        default: true,
+    },
+
+    zoom: {
+        description: "Zoom of the lens",
+        type: OptionType.SLIDER,
+        markers: makeRange(1, 50, 4),
+        default: 2,
+        stickToMarkers: false,
+    },
+    size: {
+        description: "Radius / Size of the lens",
+        type: OptionType.SLIDER,
+        markers: makeRange(50, 1000, 50),
+        default: 100,
+        stickToMarkers: false,
+    },
+
+    zoomSpeed: {
+        description: "How fast the zoom / lens size changes",
+        type: OptionType.SLIDER,
+        markers: makeRange(0.1, 5, 0.2),
+        default: 0.5,
+        stickToMarkers: false,
+    },
+});
+
+
+const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
+    children.push(
+        <Menu.MenuGroup id="image-zoom">
+            {/* thanks SpotifyControls */}
+            <Menu.MenuControlItem
+                id="zoom"
+                label="Zoom"
+                control={(props, ref) => (
+                    <Menu.MenuSliderControl
+                        ref={ref}
+                        {...props}
+                        minValue={1}
+                        maxValue={50}
+                        value={settings.store.zoom}
+                        onChange={debounce((value: number) => settings.store.zoom = value, 100)}
+                    />
+                )}
+            />
+            <Menu.MenuControlItem
+                id="size"
+                label="Lens Size"
+                control={(props, ref) => (
+                    <Menu.MenuSliderControl
+                        ref={ref}
+                        {...props}
+                        minValue={50}
+                        maxValue={1000}
+                        value={settings.store.size}
+                        onChange={debounce((value: number) => settings.store.size = value, 100)}
+                    />
+                )}
+            />
+            <Menu.MenuControlItem
+                id="zoom-speed"
+                label="Zoom Speed"
+                control={(props, ref) => (
+                    <Menu.MenuSliderControl
+                        ref={ref}
+                        {...props}
+                        minValue={0.1}
+                        maxValue={5}
+                        value={settings.store.zoomSpeed}
+                        onChange={debounce((value: number) => settings.store.zoomSpeed = value, 100)}
+                        renderValue={(value: number) => `${value.toFixed(3)}x`}
+                    />
+                )}
+            />
+        </Menu.MenuGroup>
+    );
+};
+
+export default definePlugin({
+    name: "ImageZoom",
+    description: "Lets you zoom in to images and gifs. Use scroll wheel to zoom in and shift + scroll wheel to increase lens radius / size",
+    authors: [Devs.Aria],
+    patches: [
+        {
+            find: '"renderLinkComponent","maxWidth"',
+            replacement: {
+                match: /(return\(.{1,100}\(\)\.wrapper.{1,100})(src)/,
+                replace: `$1id: '${ELEMENT_ID}',$2`
+            }
+        },
+
+        {
+            find: "handleImageLoad=",
+            replacement: [
+                {
+                    match: /(render=function\(\){.{1,500}limitResponsiveWidth.{1,600})onMouseEnter:/,
+                    replace: "$1...$self.makeProps(this),onMouseEnter:"
+                },
+
+                {
+                    match: /componentDidMount=function\(\){/,
+                    replace: "$&$self.renderMagnifier(this);",
+                },
+
+                {
+                    match: /componentWillUnmount=function\(\){/,
+                    replace: "$&$self.unMountMagnifier();"
+                }
+            ]
+        },
+
+        {
+            find: ".carouselModal,",
+            replacement: {
+                match: /onClick:(\i),/,
+                replace: "onClick:$self.settings.store.preventCarouselFromClosingOnClick ? () => {} : $1,"
+            }
+        }
+    ],
+
+    settings,
+
+    // to stop from rendering twice /shrug
+    currentMagnifierElement: null as React.FunctionComponentElement<MagnifierProps & JSX.IntrinsicAttributes> | null,
+    element: null as HTMLDivElement | null,
+
+    Magnifier,
+    root: null as Root | null,
+    makeProps(instance) {
+        return {
+            onMouseOver: () => this.onMouseOver(instance),
+            onMouseOut: () => this.onMouseOut(instance),
+            onMouseDown: (e: React.MouseEvent) => this.onMouseDown(e, instance),
+            onMouseUp: () => this.onMouseUp(instance),
+            id: instance.props.id,
+        };
+    },
+
+    renderMagnifier(instance) {
+        if (instance.props.id === ELEMENT_ID) {
+            if (!this.currentMagnifierElement) {
+                this.currentMagnifierElement = <Magnifier size={settings.store.size} zoom={settings.store.zoom} instance={instance} />;
+                this.root = ReactDOM.createRoot(this.element!);
+                this.root.render(this.currentMagnifierElement);
+            }
+        }
+    },
+
+    unMountMagnifier() {
+        this.root?.unmount();
+        this.currentMagnifierElement = null;
+        this.root = null;
+    },
+
+    onMouseOver(instance) {
+        instance.setState((state: any) => ({ ...state, mouseOver: true }));
+    },
+    onMouseOut(instance) {
+        instance.setState((state: any) => ({ ...state, mouseOver: false }));
+    },
+    onMouseDown(e: React.MouseEvent, instance) {
+        if (e.button === 0 /* left */)
+            instance.setState((state: any) => ({ ...state, mouseDown: true }));
+    },
+    onMouseUp(instance) {
+        instance.setState((state: any) => ({ ...state, mouseDown: false }));
+    },
+
+    start() {
+        enableStyle(styles);
+        addContextMenuPatch("image-context", imageContextMenuPatch);
+        this.element = document.createElement("div");
+        this.element.classList.add("MagnifierContainer");
+        document.body.appendChild(this.element);
+    },
+
+    stop() {
+        disableStyle(styles);
+        // so componenetWillUnMount gets called if Magnifier component is still alive
+        this.root && this.root.unmount();
+        this.element?.remove();
+        removeContextMenuPatch("image-context", imageContextMenuPatch);
+    }
+});

src/plugins/imageZoom/styles.css

@@ -0,0 +1,31 @@
+.vc-imgzoom-lens {
+    position: absolute;
+    inset: 0;
+    z-index: 9999;
+    border: 2px solid grey;
+    border-radius: 50%;
+    overflow: hidden;
+    cursor: none;
+    box-shadow: inset 0 0 10px 2px grey;
+    filter: drop-shadow(0 0 2px grey);
+    pointer-events: none;
+}
+
+/* make the carousel take up less space so we can click the backdrop and exit out of it */
+[class|="carouselModal"] {
+    height: fit-content;
+    box-shadow: none;
+}
+
+[class*="modalCarouselWrapper"] {
+    height: fit-content;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+[class|="wrapper"]:has(> #vc-imgzoom-magnify-modal) {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}

src/plugins/imageZoom/utils/waitFor.ts

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

src/plugins/invisibleChat/components/EncryptionModal.tsx

@@ -24,13 +24,10 @@ import {
     ModalRoot,
     openModal,
 } from "@utils/modal";
-import { findLazy } from "@webpack";
+import { Button, ComponentDispatch, Forms, React, Switch, TextInput } from "@webpack/common";
-import { Button, Forms, React, Switch, TextInput } from "@webpack/common";
 
 import { encrypt } from "../index";
 
-const ComponentDispatch = findLazy(m => m.emitter?._events?.INSERT_TEXT);
-
 function EncModal(props: ModalProps) {
     const [secret, setSecret] = React.useState("");
     const [cover, setCover] = React.useState("");

src/plugins/invisibleChat/index.tsx

@@ -119,6 +119,7 @@ export default definePlugin({
     name: "InvisibleChat",
     description: "Encrypt your Messages in a non-suspicious way! This plugin makes requests to >>https://embed.sammcheese.net<< to provide embeds to decrypted links!",
     authors: [Devs.SammCheese],
+    dependencies: ["MessagePopoverAPI"],
     patches: [
         {
             // Indicator

src/plugins/memberCount.tsx

@@ -22,11 +22,14 @@ import { Devs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
 import { useForceUpdater } from "@utils/misc";
 import definePlugin from "@utils/types";
+import { findStoreLazy } from "@webpack";
 import { FluxDispatcher, Tooltip } from "@webpack/common";
 
 const counts = {} as Record<string, [number, number]>;
 let forceUpdate: () => void;
 
+const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore");
+
 function MemberCount() {
     const guildId = getCurrentChannel().guild_id;
     const c = counts[guildId];
@@ -37,7 +40,8 @@ function MemberCount() {
 
     let total = c[0].toLocaleString();
     if (total === "0" && c[1] > 0) {
-        total = "Loading...";
+        const approx = GuildMemberCountStore.getMemberCount(guildId);
+        total = approx ? approx.toLocaleString() : "Loading...";
     }
 
     const online = c[1].toLocaleString();

src/plugins/messageLogger/deleteStyleOverlay.css

@@ -1,3 +1,3 @@
 .messagelogger-deleted {
-    background-color: rgba(240 71 71 / 15%);
+    background-color: rgba(240 71 71 / 15%) !important;
 }

src/plugins/messageLogger/deleteStyleText.css

@@ -1,8 +1,8 @@
-.messagelogger-deleted div {
+.messagelogger-deleted :is(div, h1, h2, h3, p) {
-    color: #f04747;
+    color: #f04747 !important;
 }
 
 .messagelogger-deleted a {
-    color: #be3535;
+    color: #be3535 !important;
     text-decoration: underline;
 }

src/plugins/messageLogger/index.tsx

@@ -43,21 +43,21 @@ function addDeleteStyle() {
     }
 }
 
-const MENU_ITEM_ID = "message-logger-remove-history";
+const REMOVE_HISTORY_ID = "ml-remove-history";
-const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => {
+const TOGGLE_DELETE_STYLE_ID = "ml-toggle-style";
+const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => () => {
     const { message } = props;
     const { deleted, editHistory, id, channel_id } = message;
 
     if (!deleted && !editHistory?.length) return;
-    if (children.some(c => c?.props?.id === MENU_ITEM_ID)) return;
 
     children.push((
         <Menu.MenuItem
-            id={MENU_ITEM_ID}
+            id={REMOVE_HISTORY_ID}
-            key={MENU_ITEM_ID}
+            key={REMOVE_HISTORY_ID}
             label="Remove Message History"
             action={() => {
-                if (message.deleted) {
+                if (deleted) {
                     FluxDispatcher.dispatch({
                         type: "MESSAGE_DELETE",
                         channelId: channel_id,
@@ -70,13 +70,26 @@ const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) =
             }}
         />
     ));
+
+    if (!deleted) return;
+
+    const domElement = document.getElementById(`chat-messages-${channel_id}-${id}`);
+    if (!domElement) return;
+
+    children.push((
+        <Menu.MenuItem
+            id={TOGGLE_DELETE_STYLE_ID}
+            key={TOGGLE_DELETE_STYLE_ID}
+            label="Toggle Deleted Highlight"
+            action={() => domElement.classList.toggle("messagelogger-deleted")}
+        />
+    ));
 };
 
 export default definePlugin({
     name: "MessageLogger",
     description: "Temporarily logs deleted and edited messages.",
     authors: [Devs.rushii, Devs.Ven],
-    dependencies: ["ContextMenuAPI"],
 
     start() {
         addDeleteStyle();

src/plugins/messageLogger/messageLogger.css

@@ -2,15 +2,17 @@
     display: none;
 }
 
-.messagelogger-deleted-attachment,
+.messagelogger-deleted :is(video, .emoji, [data-type="sticker"]),
+.messagelogger-deleted .messagelogger-deleted-attachment,
 .messagelogger-deleted div iframe {
-    filter: grayscale(1);
+    filter: grayscale(1) !important;
     transition: 150ms filter ease-in-out;
 }
 
-.messagelogger-deleted-attachment:hover,
+.messagelogger-deleted:hover :is(video, .emoji, [data-type="sticker"]),
-.messagelogger-deleted div iframe:hover {
+.messagelogger-deleted .messagelogger-deleted-attachment:hover,
-    filter: grayscale(0);
+.messagelogger-deleted iframe:hover {
+    filter: grayscale(0) !important;
 }
 
 .theme-dark .messagelogger-edited {

src/plugins/messageTags.ts

@@ -234,12 +234,15 @@ export default definePlugin({
                         });
                         break; // end 'preview'
                     }
-                }
 
-                return sendBotMessage(ctx.channel.id, {
+                    default: {
-                    author,
+                        sendBotMessage(ctx.channel.id, {
-                    content: "Invalid sub-command"
+                            author,
-                });
+                            content: "Invalid sub-command"
+                        });
+                        break;
+                    }
+                }
             }
         }
     ]

src/plugins/moreUserTags.ts

@@ -0,0 +1,285 @@
+/*
+ * 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 { definePluginSettings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import { proxyLazy } from "@utils/proxyLazy.js";
+import definePlugin, { OptionType } from "@utils/types";
+import { find, findByPropsLazy } from "@webpack";
+import { ChannelStore, GuildStore } from "@webpack/common";
+import { Channel, Message, User } from "discord-types/general";
+
+type PermissionName = "CREATE_INSTANT_INVITE" | "KICK_MEMBERS" | "BAN_MEMBERS" | "ADMINISTRATOR" | "MANAGE_CHANNELS" | "MANAGE_GUILD" | "CHANGE_NICKNAME" | "MANAGE_NICKNAMES" | "MANAGE_ROLES" | "MANAGE_WEBHOOKS" | "MANAGE_GUILD_EXPRESSIONS" | "CREATE_GUILD_EXPRESSIONS" | "VIEW_AUDIT_LOG" | "VIEW_CHANNEL" | "VIEW_GUILD_ANALYTICS" | "VIEW_CREATOR_MONETIZATION_ANALYTICS" | "MODERATE_MEMBERS" | "SEND_MESSAGES" | "SEND_TTS_MESSAGES" | "MANAGE_MESSAGES" | "EMBED_LINKS" | "ATTACH_FILES" | "READ_MESSAGE_HISTORY" | "MENTION_EVERYONE" | "USE_EXTERNAL_EMOJIS" | "ADD_REACTIONS" | "USE_APPLICATION_COMMANDS" | "MANAGE_THREADS" | "CREATE_PUBLIC_THREADS" | "CREATE_PRIVATE_THREADS" | "USE_EXTERNAL_STICKERS" | "SEND_MESSAGES_IN_THREADS" | "CONNECT" | "SPEAK" | "MUTE_MEMBERS" | "DEAFEN_MEMBERS" | "MOVE_MEMBERS" | "USE_VAD" | "PRIORITY_SPEAKER" | "STREAM" | "USE_EMBEDDED_ACTIVITIES" | "USE_SOUNDBOARD" | "USE_EXTERNAL_SOUNDS" | "REQUEST_TO_SPEAK" | "MANAGE_EVENTS" | "CREATE_EVENTS";
+
+interface Tag {
+    // name used for identifying, must be alphanumeric + underscores
+    name: string;
+    // name shown on the tag itself, can be anything probably; automatically uppercase'd
+    displayName: string;
+    description: string;
+    permissions?: PermissionName[];
+    condition?(message: Message | null, user: User, channel: Channel): boolean;
+}
+
+const CLYDE_ID = "1081004946872352958";
+
+// PermissionStore.computePermissions is not the same function and doesn't work here
+const PermissionUtil = findByPropsLazy("computePermissions", "canEveryoneRole") as {
+    computePermissions({ ...args }): bigint;
+};
+
+const Permissions = findByPropsLazy("SEND_MESSAGES", "VIEW_CREATOR_MONETIZATION_ANALYTICS") as Record<PermissionName, bigint>;
+const Tags = proxyLazy(() => find(m => m.Types?.[0] === "BOT").Types) as Record<string, number>;
+
+const isWebhook = (message: Message, user: User) => !!message?.webhookId && user.isNonUserBot();
+
+const tags: Tag[] = [
+    {
+        name: "WEBHOOK",
+        displayName: "Webhook",
+        description: "Messages sent by webhooks",
+        condition: isWebhook
+    }, {
+        name: "OWNER",
+        displayName: "Owner",
+        description: "Owns the server",
+        condition: (_, user, channel) => GuildStore.getGuild(channel?.guild_id)?.ownerId === user.id
+    }, {
+        name: "ADMINISTRATOR",
+        displayName: "Admin",
+        description: "Has the administrator permission",
+        permissions: ["ADMINISTRATOR"]
+    }, {
+        name: "MODERATOR_STAFF",
+        displayName: "Staff",
+        description: "Can manage the server, channels or roles",
+        permissions: ["MANAGE_GUILD", "MANAGE_CHANNELS", "MANAGE_ROLES"]
+    }, {
+        name: "MODERATOR",
+        displayName: "Mod",
+        description: "Can manage messages or kick/ban people",
+        permissions: ["MANAGE_MESSAGES", "KICK_MEMBERS", "BAN_MEMBERS"]
+    }, {
+        name: "VOICE_MODERATOR",
+        displayName: "VC Mod",
+        description: "Can manage voice chats",
+        permissions: ["MOVE_MEMBERS", "MUTE_MEMBERS", "DEAFEN_MEMBERS"]
+    }
+];
+
+const settings = definePluginSettings({
+    dontShowForBots: {
+        description: "Don't show tags (not including the webhook tag) for bots",
+        type: OptionType.BOOLEAN
+    },
+    dontShowBotTag: {
+        description: "Don't show [BOT] text for bots with other tags (verified bots will still have checkmark)",
+        type: OptionType.BOOLEAN
+    },
+    ...Object.fromEntries(tags.map(({ name, displayName, description }) => [
+        `visibility_${name}`, {
+            description: `Show ${displayName} tags (${description})`,
+            type: OptionType.SELECT,
+            options: [
+                {
+                    label: "Always",
+                    value: "always",
+                    default: true
+                }, {
+                    label: "Only in chat",
+                    value: "chat"
+                }, {
+                    label: "Only in member list and profiles",
+                    value: "not-chat"
+                }, {
+                    label: "Never",
+                    value: "never"
+                }
+            ]
+        }
+    ]))
+});
+
+export default definePlugin({
+    name: "MoreUserTags",
+    description: "Adds tags for webhooks and moderative roles (owner, admin, etc.)",
+    authors: [Devs.Cyn, Devs.TheSun, Devs.RyanCaoDev],
+    settings,
+    patches: [
+        // add tags to the tag list
+        {
+            find: '.BOT=0]="BOT"',
+            replacement: [
+                // add tags to the exported tags list (the Tags variable here)
+                {
+                    match: /(\i)\[.\.BOT=0\]="BOT";/,
+                    replace: "$&$1=$self.addTagVariants($1);"
+                },
+                // make the tag show the right text
+                {
+                    match: /(switch\((\i)\){.+?)case (\i)\.BOT:default:(\i)=(\i\.\i\.Messages)\.BOT_TAG_BOT/,
+                    replace: (_, origSwitch, variant, tags, displayedText, strings) =>
+                        `${origSwitch}default:{${displayedText} = $self.getTagText(${tags}[${variant}], ${strings})}`
+                },
+                // show OP tags correctly
+                {
+                    match: /(\i)=(\i)===\i\.ORIGINAL_POSTER/,
+                    replace: "$1=$self.isOPTag($2)"
+                },
+                // add HTML data attributes (for easier theming)
+                {
+                    match: /children:\[(?=\i,\(0,\i\.jsx\)\("span",{className:\i\(\)\.botText,children:(\i)}\)\])/,
+                    replace: "'data-tag':$1.toLowerCase(),children:["
+                }
+            ],
+        },
+        // in messages
+        {
+            find: ".Types.ORIGINAL_POSTER",
+            replacement: {
+                match: /return null==(\i)\?null:\(0,/,
+                replace: "$1=$self.getTag({...arguments[0],origType:$1,location:'chat'});$&"
+            }
+        },
+        // in the member list
+        {
+            find: ".renderBot=function(){",
+            replacement: {
+                match: /this.props.user;return null!=(\i)&&.{0,10}\?(.{0,50})\.botTag/,
+                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
+        {
+            find: ".hasAvatarForGuild(null==",
+            replacement: {
+                match: /\.usernameSection,user/,
+                replace: ".usernameSection,moreTags_channelId:arguments[0].channelId,user"
+            }
+        },
+        {
+            find: 'copyMetaData:"User Tag"',
+            replacement: {
+                match: /discriminatorClass:(.{1,100}),botClass:/,
+                replace: "discriminatorClass:$1,moreTags_channelId:arguments[0].moreTags_channelId,botClass:"
+            }
+        },
+        // in profiles
+        {
+            find: ",botType:",
+            replacement: {
+                match: /,botType:(\i\((\i)\)),/g,
+                replace: ",botType:$self.getTag({user:$2,channelId:arguments[0].moreTags_channelId,origType:$1,location:'not-chat'}),"
+            }
+        },
+    ],
+
+    getPermissions(user: User, channel: Channel): string[] {
+        const guild = GuildStore.getGuild(channel?.guild_id);
+        if (!guild) return [];
+
+        const permissions = PermissionUtil.computePermissions({ user, context: guild, overwrites: channel.permissionOverwrites });
+        return Object.entries(Permissions)
+            .map(([perm, permInt]) =>
+                permissions & permInt ? perm : ""
+            )
+            .filter(Boolean);
+    },
+
+    addTagVariants(val: any /* i cant think of a good name */) {
+        let i = 100;
+        tags.forEach(({ name }) => {
+            val[name] = ++i;
+            val[i] = name;
+            val[`${name}-BOT`] = ++i;
+            val[i] = `${name}-BOT`;
+            val[`${name}-OP`] = ++i;
+            val[i] = `${name}-OP`;
+        });
+        return val;
+    },
+
+    isOPTag: (tag: number) => tag === Tags.ORIGINAL_POSTER || tags.some(t => tag === Tags[`${t.name}-OP`]),
+
+    getTagText(passedTagName: string, strings: Record<string, string>) {
+        if (!passedTagName) return "BOT";
+        const [tagName, variant] = passedTagName.split("-");
+        const tag = tags.find(({ name }) => tagName === name);
+        if (!tag) return "BOT";
+        if (variant === "BOT" && tagName !== "WEBHOOK" && this.settings.store.dontShowForBots) return strings.BOT_TAG_BOT;
+
+        switch (variant) {
+            case "OP":
+                return `${strings.BOT_TAG_FORUM_ORIGINAL_POSTER} • ${tag.displayName}`;
+            case "BOT":
+                return `${strings.BOT_TAG_BOT} • ${tag.displayName}`;
+            default:
+                return tag.displayName;
+        }
+    },
+
+    getTag({
+        message, user, channelId, origType, location, channel
+    }: {
+        message?: Message,
+        user: User,
+        channel?: Channel & { isForumPost(): boolean; },
+        channelId?: string;
+        origType?: number;
+        location: string;
+    }): number | null {
+        if (location === "chat" && user.id === "1")
+            return Tags.OFFICIAL;
+        if (user.id === CLYDE_ID)
+            return Tags.AI;
+
+        let type = typeof origType === "number" ? origType : null;
+
+        channel ??= ChannelStore.getChannel(channelId!) as any;
+        if (!channel) return type;
+
+        const settings = this.settings.store;
+        const perms = this.getPermissions(user, channel);
+
+        for (const tag of tags) {
+            switch (settings[`visibility_${tag.name}`]) {
+                case "always":
+                case location:
+                    break;
+                default:
+                    continue;
+            }
+
+            if (
+                tag.permissions?.some(perm => perms.includes(perm)) ||
+                (tag.condition?.(message!, user, channel))
+            ) {
+                if (channel.isForumPost() && channel.ownerId === user.id)
+                    type = Tags[`${tag.name}-OP`];
+                else if (user.bot && !isWebhook(message!, user) && !settings.dontShowBotTag)
+                    type = Tags[`${tag.name}-BOT`];
+                else
+                    type = Tags[tag.name];
+                break;
+            }
+        }
+
+        return type;
+    }
+});

src/plugins/muteNewGuild.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 { Devs } from "@utils/constants";
+import { ModalContent, ModalFooter, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import definePlugin from "@utils/types";
+import { findByProps, findStoreLazy } from "@webpack";
+import { Button, Text } from "@webpack/common";
+
+const UserGuildSettingsStore = findStoreLazy("UserGuildSettingsStore");
+
+function NoDMNotificationsModal({ modalProps }: { modalProps: ModalProps; }) {
+    return (
+        <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
+            <ModalContent>
+                <div style={{ display: "flex", flexDirection: "column", justifyContent: "center", "alignItems": "center", textAlign: "center", height: "100%", padding: "8px 0", gap: "16px" }}>
+                    <Text variant="text-lg/semibold">You seem to have been affected by a bug that caused DM notifications to be muted and break if you used the MuteNewGuild plugin.</Text>
+                    <Text variant="text-lg/semibold">If you haven't received any notifications for private messages, this is why. This issue is now fixed, so they should work again. Please verify, and in case they are still broken, ask for help in the Vencord support channel!</Text>
+                    <Text variant="text-lg/semibold">We're very sorry for any inconvenience caused by this issue :(</Text>
+                </div>
+            </ModalContent>
+            <ModalFooter>
+                <div style={{ display: "flex", justifyContent: "center", width: "100%" }}>
+                    <Button
+                        onClick={modalProps.onClose}
+                        size={Button.Sizes.MEDIUM}
+                        color={Button.Colors.BRAND}
+                    >
+                        Understood!
+                    </Button>
+                </div>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
+
+export default definePlugin({
+    name: "MuteNewGuild",
+    description: "Mutes newly joined guilds",
+    authors: [Devs.Glitch, Devs.Nuckyz],
+    patches: [
+        {
+            find: ",acceptInvite:function",
+            replacement: {
+                match: /INVITE_ACCEPT_SUCCESS.+?;(\i)=null.+?;/,
+                replace: (m, guildId) => `${m}$self.handleMute(${guildId});`
+            }
+        }
+    ],
+
+    handleMute(guildId: string | null) {
+        if (guildId === "@me" || guildId === "null" || guildId == null) return;
+        findByProps("updateGuildNotificationSettings").updateGuildNotificationSettings(guildId, { muted: true, suppress_everyone: true, suppress_roles: true });
+    },
+
+    start() {
+        const [isMuted, isEveryoneSupressed, isRolesSupressed] = [UserGuildSettingsStore.isMuted(null), UserGuildSettingsStore.isSuppressEveryoneEnabled(null), UserGuildSettingsStore.isSuppressRolesEnabled(null)];
+
+        if (isMuted || isEveryoneSupressed || isRolesSupressed) {
+            findByProps("updateGuildNotificationSettings").updateGuildNotificationSettings(null, { muted: false, suppress_everyone: false, suppress_roles: false });
+
+            openModal(modalProps => <NoDMNotificationsModal modalProps={modalProps} />);
+        }
+    }
+});

src/plugins/noReplyMention.tsx

@@ -16,43 +16,43 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Settings } from "@api/settings";
+import { definePluginSettings } from "@api/settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
+import type { Message } from "discord-types/general";
 
-interface Reply {
+const settings = definePluginSettings({
-    message: {
+    exemptList: {
-        author: {
+        description:
-            id: string;
+            "List of users to exempt from this plugin (separated by commas or spaces)",
-        };
+        type: OptionType.STRING,
-    };
+        default: "1234567890123445,1234567890123445",
-}
+    },
+    inverseShiftReply: {
+        description: "Invert Discord's shift replying behaviour (enable to make shift reply mention user)",
+        type: OptionType.BOOLEAN,
+        default: false,
+    }
+});
 
 export default definePlugin({
     name: "NoReplyMention",
     description: "Disables reply pings by default",
-    authors: [Devs.DustyAngel47, Devs.axyie],
+    authors: [Devs.DustyAngel47, Devs.axyie, Devs.pylix],
-    options: {
+    settings,
-        exemptList: {
+
-            description:
+    shouldMention(message: Message, isHoldingShift: boolean) {
-                "List of users to exempt from this plugin (separated by commas)",
+        const isExempt = settings.store.exemptList.includes(message.author.id);
-            type: OptionType.STRING,
+        return settings.store.inverseShiftReply ? isHoldingShift !== isExempt : !isHoldingShift && isExempt;
-            default: "1234567890123445,1234567890123445",
-        },
-    },
-    shouldMention(reply: Reply) {
-        return Settings.plugins.NoReplyMention.exemptList.includes(
-            reply.message.author.id
-        );
     },
+
     patches: [
         {
-            find: "CREATE_PENDING_REPLY:function",
+            find: ",\"Message\")}function",
             replacement: {
-                match: /CREATE_PENDING_REPLY:function\((.{1,2})\){/,
+                match: /:(\i),shouldMention:!(\i)\.shiftKey/,
-                replace:
+                replace: ":$1,shouldMention:$self.shouldMention($1,$2.shiftKey)"
-                    "CREATE_PENDING_REPLY:function($1){$1.shouldMention=$self.shouldMention($1);",
+            }
-            },
+        }
-        },
     ],
 });

src/plugins/petpet.ts

@@ -83,7 +83,7 @@ async function resolveImage(options: Argument[], ctx: CommandContext, noServerPf
 
 export default definePlugin({
     name: "petpet",
-    description: "headpet a cutie",
+    description: "Adds a /petpet slash command to create headpet gifs from any image",
     authors: [Devs.Ven],
     dependencies: ["CommandsAPI"],
     commands: [

src/plugins/pinDms/contextMenus.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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 { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { Menu } from "@webpack/common";
+
+import { isPinned, movePin, PinOrder, settings, snapshotArray, togglePin } from "./settings";
+
+function PinMenuItem(channelId: string) {
+    const pinned = isPinned(channelId);
+    const canMove = pinned && settings.store.pinOrder === PinOrder.Custom;
+
+    return (
+        <>
+            <Menu.MenuItem
+                id="pin-dm"
+                label={pinned ? "Unpin DM" : "Pin DM"}
+                action={() => togglePin(channelId)}
+            />
+            {canMove && snapshotArray[0] !== channelId && (
+                <Menu.MenuItem
+                    id="move-pin-up"
+                    label="Move Pin Up"
+                    action={() => movePin(channelId, -1)}
+                />
+            )}
+            {canMove && snapshotArray[snapshotArray.length - 1] !== channelId && (
+                <Menu.MenuItem
+                    id="move-pin-down"
+                    label="Move Pin Down"
+                    action={() => movePin(channelId, +1)}
+                />
+            )}
+        </>
+    );
+}
+
+const GroupDMContext: NavContextMenuPatchCallback = (children, props) => () => {
+    const container = findGroupChildrenByChildId("leave-channel", children);
+    if (container)
+        container.unshift(PinMenuItem(props.channel.id));
+};
+
+const UserContext: NavContextMenuPatchCallback = (children, props) => () => {
+    const container = findGroupChildrenByChildId("close-dm", children);
+    if (container) {
+        const idx = container.findIndex(c => c?.props?.id === "close-dm");
+        container.splice(idx, 0, PinMenuItem(props.channel.id));
+    }
+};
+
+export function addContextMenus() {
+    addContextMenuPatch("gdm-context", GroupDMContext);
+    addContextMenuPatch("user-context", UserContext);
+}
+
+export function removeContextMenus() {
+    removeContextMenuPatch("gdm-context", GroupDMContext);
+    removeContextMenuPatch("user-context", UserContext);
+}

src/plugins/pinDms/index.tsx

@@ -0,0 +1,127 @@
+/*
+ * 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 { Channel } from "discord-types/general";
+
+import { addContextMenus, removeContextMenus } from "./contextMenus";
+import { getPinAt, isPinned, settings, snapshotArray, usePinnedDms } from "./settings";
+
+export default definePlugin({
+    name: "PinDMs",
+    description: "Allows you to pin private channels to the top of your DM list. To pin/unpin or reorder pins, right click DMs",
+    authors: [Devs.Ven, Devs.Strencher],
+
+    settings,
+
+    start: addContextMenus,
+    stop: removeContextMenus,
+
+    usePinCount(channelIds: string[]) {
+        const pinnedDms = usePinnedDms();
+        // See comment on 2nd patch for reasoning
+        return channelIds.length ? [pinnedDms.size] : [];
+    },
+
+    getChannel(channels: Record<string, Channel>, idx: number) {
+        return channels[getPinAt(idx)];
+    },
+
+    isPinned,
+    getSnapshot: () => snapshotArray,
+
+    getScrollOffset(channelId: string, rowHeight: number, padding: number, preRenderedChildren: number, originalOffset: number) {
+        if (!isPinned(channelId))
+            return (
+                (rowHeight + padding) * 2 // header
+                + rowHeight * snapshotArray.length // pins
+                + originalOffset // original pin offset minus pins
+            );
+
+        return rowHeight * (snapshotArray.indexOf(channelId) + preRenderedChildren) + padding;
+    },
+
+    patches: [
+        // Patch DM list
+        {
+            find: ".privateChannelsHeaderContainer,",
+            replacement: [
+                {
+                    // filter Discord's privateChannelIds list to remove pins, and pass
+                    // pinCount as prop. This needs to be here so that the entire DM list receives
+                    // updates on pin/unpin
+                    match: /privateChannelIds:(\i),/,
+                    replace: "privateChannelIds:$1.filter(c=>!$self.isPinned(c)),pinCount:$self.usePinCount($1),"
+                },
+                {
+                    // sections is an array of numbers, where each element is a section and
+                    // the number is the amount of rows. Add our pinCount in second place
+                    // - Section 1: buttons for pages like Friends & Library
+                    // - Section 2: our pinned dms
+                    // - Section 3: the normal dm list
+                    match: /(?<=renderRow:(\i)\.renderRow,)sections:\[\i,/,
+                    // For some reason, adding our sections when no private channels are ready yet
+                    // makes DMs infinitely load. Thus usePinCount returns either a single element
+                    // array with the count, or an empty array. Due to spreading, only in the former
+                    // case will an element be added to the outer array
+                    // Thanks for the fix, Strencher!
+                    replace: "$&...$1.props.pinCount,"
+                },
+                {
+                    // Patch renderSection (renders the header) to set the text to "Pinned DMs" instead of "Direct Messages"
+                    // lookbehind is used to lookup parameter name. We could use arguments[0], but
+                    // if children ever is wrapped in an iife, it will break
+                    match: /children:(\i\.\i\.Messages.DIRECT_MESSAGES)(?<=renderSection=function\((\i)\).+?)/,
+                    replace: "children:$2.section===1?'Pinned DMs':$1"
+                },
+                {
+                    // Patch channel lookup inside renderDM
+                    // channel=channels[channelIds[row]];
+                    match: /(?<=preRenderedChildren,(\i)=)((\i)\[\i\[\i\]\]);/,
+                    // section 1 is us, manually get our own channel
+                    // section === 1 ? getChannel(channels, row) : channels[channelIds[row]];
+                    replace: "arguments[0]===1?$self.getChannel($3,arguments[1]):$2;"
+                },
+                {
+                    // Fix getRowHeight's check for whether this is the DMs section
+                    // section === DMS
+                    match: /===\i.DMS&&0/,
+                    // section -1 === DMS
+                    replace: "-1$&"
+                },
+                {
+                    // Override scrollToChannel to properly account for pinned channels
+                    match: /(?<=else\{\i\+=)(\i)\*\(.+?(?=;)/,
+                    replace: "$self.getScrollOffset(arguments[0],$1,this.props.padding,this.state.preRenderedChildren,$&)"
+                }
+            ]
+        },
+
+        // Fix Alt Up/Down navigation
+        {
+            find: '"mod+alt+right"',
+            replacement: {
+                // channelIds = __OVERLAY__ ? stuff : toArray(getStaticPaths()).concat(toArray(channelIds))
+                match: /(?<=(\i)=__OVERLAY__\?\i:.{0,10})\.concat\((.{0,10})\)/,
+                // ....concat(pins).concat(toArray(channelIds).filter(c => !isPinned(c)))
+                replace: ".concat($self.getSnapshot()).concat($2.filter(c=>!$self.isPinned(c)))"
+            }
+        }
+    ]
+});

src/plugins/pinDms/settings.ts

@@ -0,0 +1,94 @@
+/*
+ * 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 { definePluginSettings, Settings, useSettings } from "@api/settings";
+import { OptionType } from "@utils/types";
+import { findStoreLazy } from "@webpack";
+
+export const enum PinOrder {
+    LastMessage,
+    Custom
+}
+
+export const settings = definePluginSettings({
+    pinOrder: {
+        type: OptionType.SELECT,
+        description: "Which order should pinned DMs be displayed in?",
+        options: [
+            { label: "Most recent message", value: PinOrder.LastMessage, default: true },
+            { label: "Custom (right click channels to reorder)", value: PinOrder.Custom }
+        ]
+    }
+});
+
+const PrivateChannelSortStore = findStoreLazy("PrivateChannelSortStore");
+
+export let snapshotArray: string[];
+let snapshot: Set<string> | undefined;
+
+const getArray = () => (Settings.plugins.PinDMs.pinnedDMs || void 0)?.split(",") as string[] | undefined;
+const save = (pins: string[]) => {
+    snapshot = void 0;
+    Settings.plugins.PinDMs.pinnedDMs = pins.join(",");
+};
+const takeSnapshot = () => {
+    snapshotArray = getArray() ?? [];
+    return snapshot = new Set<string>(snapshotArray);
+};
+const requireSnapshot = () => snapshot ?? takeSnapshot();
+
+export function usePinnedDms() {
+    useSettings(["plugins.PinDMs.pinnedDMs"]);
+
+    return requireSnapshot();
+}
+
+export function isPinned(id: string) {
+    return requireSnapshot().has(id);
+}
+
+export function togglePin(id: string) {
+    const snapshot = requireSnapshot();
+    if (!snapshot.delete(id)) {
+        snapshot.add(id);
+    }
+
+    save([...snapshot]);
+}
+
+function sortedSnapshot() {
+    requireSnapshot();
+    if (settings.store.pinOrder === PinOrder.LastMessage)
+        return PrivateChannelSortStore.getPrivateChannelIds().filter(isPinned);
+
+    return snapshotArray;
+}
+
+export function getPinAt(idx: number) {
+    return sortedSnapshot()[idx];
+}
+
+export function movePin(id: string, direction: -1 | 1) {
+    const pins = getArray()!;
+    const a = pins.indexOf(id);
+    const b = a + direction;
+
+    [pins[a], pins[b]] = [pins[b], pins[a]];
+
+    save(pins);
+}

src/plugins/pronoundb/pronoundbUtils.ts

@@ -35,29 +35,34 @@ const bulkFetch = debounce(async () => {
     const pronouns = await bulkFetchPronouns(ids);
     for (const id of ids) {
         // Call all callbacks for the id
-        requestQueue[id].forEach(c => c(pronouns[id]));
+        requestQueue[id]?.forEach(c => c(pronouns[id]));
         delete requestQueue[id];
     }
 });
 
 export function awaitAndFormatPronouns(id: string): string | null {
     const [result, , isPending] = useAwaiter(() => fetchPronouns(id), {
-        fallbackValue: null,
+        fallbackValue: getCachedPronouns(id),
         onError: e => console.error("Fetching pronouns failed: ", e)
     });
 
-    // If the promise completed, the result was not "unspecified", and there is a mapping for the code, then return the mappings
+    // If the result is present and not "unspecified", and there is a mapping for the code, then return the mappings
-    if (!isPending && result && result !== "unspecified" && PronounMapping[result])
+    if (result && result !== "unspecified" && PronounMapping[result])
         return formatPronouns(result);
 
     return null;
 }
 
+// Gets the cached pronouns, if you're too impatient for a promise!
+export function getCachedPronouns(id: string): PronounCode | null {
+    return cache[id] ?? null;
+}
+
 // Fetches the pronouns for one id, returning a promise that resolves if it was cached, or once the request is completed
 export function fetchPronouns(id: string): Promise<PronounCode> {
     return new Promise(res => {
         // If cached, return the cached pronouns
-        if (id in cache) res(cache[id]);
+        if (id in cache) res(getCachedPronouns(id)!);
         // If there is already a request added, then just add this callback to it
         else if (id in requestQueue) requestQueue[id].push(res);
         // If not already added, then add it and call the debounced function to make sure the request gets executed

src/plugins/quickMention.tsx

@@ -19,10 +19,7 @@
 import { addButton, removeButton } from "@api/MessagePopover";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { findLazy } from "@webpack";
+import { ChannelStore, ComponentDispatch } from "@webpack/common";
-import { ChannelStore } from "@webpack/common";
-
-const ComponentDispatch = findLazy(m => m.emitter?._events?.INSERT_TEXT);
 
 export default definePlugin({
     name: "QuickMention",

src/plugins/quickReply.ts

@@ -16,9 +16,9 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { migratePluginSettings } from "@api/settings";
+import { definePluginSettings, migratePluginSettings, Settings } from "@api/settings";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { ChannelStore, FluxDispatcher as Dispatcher, MessageStore, SelectedChannelStore, UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
@@ -31,10 +31,33 @@ let editIdx = -1;
 
 migratePluginSettings("QuickReply", "InteractionKeybinds");
 
+const enum MentionOptions {
+    DISABLED,
+    ENABLED,
+    NO_REPLY_MENTION_PLUGIN
+}
+
+const settings = definePluginSettings({
+    shouldMention: {
+        type: OptionType.SELECT,
+        description: "Ping reply by default",
+        options: [
+            {
+                label: "Follow NoReplyMention",
+                value: MentionOptions.NO_REPLY_MENTION_PLUGIN,
+                default: true
+            },
+            { label: "Enabled", value: MentionOptions.ENABLED },
+            { label: "Disabled", value: MentionOptions.DISABLED },
+        ]
+    }
+});
+
 export default definePlugin({
     name: "QuickReply",
-    authors: [Devs.obscurity, Devs.Ven],
+    authors: [Devs.obscurity, Devs.Ven, Devs.pylix],
     description: "Reply to (ctrl + up/down) and edit (ctrl + shift + up/down) messages via keybinds",
+    settings,
 
     start() {
         Dispatcher.subscribe("DELETE_PENDING_REPLY", onDeletePendingReply);
@@ -137,6 +160,14 @@ function getNextMessage(isUp: boolean, isReply: boolean) {
     return i === - 1 ? undefined : messages[messages.length - i - 1];
 }
 
+function shouldMention() {
+    switch (settings.store.shouldMention) {
+        case MentionOptions.NO_REPLY_MENTION_PLUGIN: return !Settings.plugins.NoReplyMention.enabled;
+        case MentionOptions.DISABLED: return false;
+        default: return true;
+    }
+}
+
 // handle next/prev reply
 function nextReply(isUp: boolean) {
     const message = getNextMessage(isUp, true);
@@ -149,11 +180,12 @@ function nextReply(isUp: boolean) {
 
     const channel = ChannelStore.getChannel(message.channel_id);
     const meId = UserStore.getCurrentUser().id;
+
     Dispatcher.dispatch({
         type: "CREATE_PENDING_REPLY",
         channel,
         message,
-        shouldMention: true,
+        shouldMention: shouldMention(),
         showMentionToggle: channel.guild_id !== null && message.author.id !== meId,
         _isQuickReply: true
     });

src/plugins/reverseImageSearch.tsx

@@ -34,7 +34,7 @@ function search(src: string, engine: string) {
     open(engine + encodeURIComponent(src), "_blank");
 }
 
-const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
     if (!props) return;
     const { reverseImageSearchType, itemHref, itemSrc } = props;
 
@@ -43,7 +43,7 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =>
     const src = itemHref ?? itemSrc;
 
     const group = findGroupChildrenByChildId("copy-link", children);
-    if (group && !group.some(child => child?.props?.id === "search-image")) {
+    if (group) {
         group.push((
             <Menu.MenuItem
                 label="Search Image"
@@ -76,7 +76,6 @@ export default definePlugin({
     name: "ReverseImageSearch",
     description: "Adds ImageSearch to image context menus",
     authors: [Devs.Ven, Devs.Nuckyz],
-    dependencies: ["ContextMenuAPI"],
     patches: [
         {
             find: ".Messages.MESSAGE_ACTIONS_MENU_LABEL",

src/plugins/reviewDB/Utils/ReviewDBAPI.ts

@@ -0,0 +1,115 @@
+/*
+ * 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 { Settings } from "@api/settings";
+
+import { Review } from "../entities/Review";
+import { authorize, showToast } from "./Utils";
+
+const API_URL = "https://manti.vendicated.dev";
+
+const getToken = () => Settings.plugins.ReviewDB.token;
+
+interface Response {
+    success: boolean,
+    message: string;
+    reviews: Review[];
+    updated: boolean;
+}
+
+export async function getReviews(id: string): Promise<Review[]> {
+    const req = await fetch(API_URL + `/api/reviewdb/users/${id}/reviews`);
+
+    const res = (req.status === 200) ? await req.json() as Response : { success: false, message: "An Error occured while fetching reviews. Please try again later.", reviews: [], updated: false };
+    if (!res.success) {
+        showToast(res.message);
+        return [
+            {
+                id: 0,
+                comment: "An Error occured while fetching reviews. Please try again later.",
+                star: 0,
+                sender: {
+                    id: 0,
+                    username: "Error",
+                    profilePhoto: "https://cdn.discordapp.com/attachments/1045394533384462377/1084900598035513447/646808599204593683.png?size=128",
+                    discordID: "0",
+                    badges: []
+                }
+            }
+        ];
+    }
+    return res.reviews;
+}
+
+export async function addReview(review: any): Promise<Response | null> {
+    review.token = getToken();
+
+    if (!review.token) {
+        showToast("Please authorize to add a review.");
+        authorize();
+        return null;
+    }
+
+    return fetch(API_URL + `/api/reviewdb/users/${review.userid}/reviews`, {
+        method: "PUT",
+        body: JSON.stringify(review),
+        headers: {
+            "Content-Type": "application/json",
+        }
+    })
+        .then(r => r.json())
+        .then(res => {
+            showToast(res.message);
+            return res ?? null;
+        });
+}
+
+export function deleteReview(id: number): Promise<Response> {
+    return fetch(API_URL + `/api/reviewdb/users/${id}/reviews`, {
+        method: "DELETE",
+        headers: new Headers({
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        }),
+        body: JSON.stringify({
+            token: getToken(),
+            reviewid: id
+        })
+    }).then(r => r.json());
+}
+
+export async function reportReview(id: number) {
+    const res = await fetch(API_URL + "/api/reviewdb/reports", {
+        method: "PUT",
+        headers: new Headers({
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        }),
+        body: JSON.stringify({
+            reviewid: id,
+            token: getToken()
+        })
+    }).then(r => r.json()) as Response;
+    showToast(await res.message);
+}
+
+export function getLastReviewID(id: string): Promise<number> {
+    return fetch(API_URL + "/getLastReviewID?discordid=" + id)
+        .then(r => r.text())
+        .then(Number);
+}

src/plugins/reviewDB/Utils/Utils.tsx

@@ -0,0 +1,95 @@
+/*
+ * 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 { Settings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import Logger from "@utils/Logger";
+import { openModal } from "@utils/modal";
+import { findByProps } from "@webpack";
+import { FluxDispatcher, React, SelectedChannelStore, Toasts, UserUtils } from "@webpack/common";
+
+import { Review } from "../entities/Review";
+
+export async function openUserProfileModal(userId: string) {
+    await UserUtils.fetchUser(userId);
+
+    await FluxDispatcher.dispatch({
+        type: "USER_PROFILE_MODAL_OPEN",
+        userId,
+        channelId: SelectedChannelStore.getChannelId(),
+        analyticsLocation: "Explosive Hotel"
+    });
+}
+
+export function authorize(callback?: any) {
+    const { OAuth2AuthorizeModal } = findByProps("OAuth2AuthorizeModal");
+
+    openModal((props: any) =>
+        <OAuth2AuthorizeModal
+            {...props}
+            scopes={["identify"]}
+            responseType="code"
+            redirectUri="https://manti.vendicated.dev/URauth"
+            permissions={0n}
+            clientId="915703782174752809"
+            cancelCompletesFlow={false}
+            callback={async (u: string) => {
+                try {
+                    const url = new URL(u);
+                    url.searchParams.append("returnType", "json");
+                    url.searchParams.append("clientMod", "vencord");
+                    const res = await fetch(url, {
+                        headers: new Headers({ Accept: "application/json" })
+                    });
+                    const { token, status } = await res.json();
+                    if (status === 0) {
+                        Settings.plugins.ReviewDB.token = token;
+                        showToast("Successfully logged in!");
+                        callback?.();
+                    } else if (res.status === 1) {
+                        showToast("An Error occurred while logging in.");
+                    }
+                } catch (e) {
+                    new Logger("ReviewDB").error("Failed to authorise", e);
+                }
+            }}
+        />
+    );
+}
+
+export function showToast(text: string) {
+    Toasts.show({
+        type: Toasts.Type.MESSAGE,
+        message: text,
+        id: Toasts.genId(),
+        options: {
+            position: Toasts.Position.BOTTOM
+        },
+    });
+}
+
+export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
+
+export function canDeleteReview(review: Review, userId: string) {
+    if (review.sender.discordID === userId) return true;
+
+    const myId = BigInt(userId);
+    return myId === Devs.mantikafasi.id ||
+        myId === Devs.Ven.id ||
+        myId === Devs.rushii.id;
+}

src/plugins/reviewDB/components/MessageButton.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { classes, LazyComponent } from "@utils/misc";
+import { findByProps } from "@webpack";
+
+export default LazyComponent(() => {
+    const { button, dangerous } = findByProps("button", "wrapper", "disabled","separator");
+
+    return function MessageButton(props) {
+        return props.type === "delete"
+            ? (
+                <div className={classes(button, dangerous)} aria-label="Delete Review" onClick={props.callback}>
+                    <svg aria-hidden="false" width="16" height="16" viewBox="0 0 20 20">
+                        <path fill="currentColor" d="M15 3.999V2H9V3.999H3V5.999H21V3.999H15Z"></path>
+                        <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"></path>
+                    </svg>
+                </div>
+            )
+            : (
+                <div className={button} aria-label="Report Review" onClick={() => props.callback()}>
+                    <svg aria-hidden="false" width="16" height="16" viewBox="0 0 20 20">
+                        <path fill="currentColor" d="M20,6.002H14V3.002C14,2.45 13.553,2.002 13,2.002H4C3.447,2.002 3,2.45 3,3.002V22.002H5V14.002H10.586L8.293,16.295C8.007,16.581 7.922,17.011 8.076,17.385C8.23,17.759 8.596,18.002 9,18.002H20C20.553,18.002 21,17.554 21,17.002V7.002C21,6.45 20.553,6.002 20,6.002Z"></path>
+                    </svg>
+                </div>
+            );
+    };
+});

src/plugins/reviewDB/components/ReviewBadge.tsx

@@ -0,0 +1,45 @@
+/*
+ * 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 { MaskedLinkStore, Tooltip } from "@webpack/common";
+
+import { Badge } from "../entities/Badge";
+
+export default function ReviewBadge(badge: Badge) {
+    return (
+        <Tooltip
+            text={badge.name}>
+            {({ onMouseEnter, onMouseLeave }) => (
+                <img
+                    width="24px"
+                    height="24px"
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                    src={badge.icon}
+                    alt={badge.description}
+                    style={{ verticalAlign: "middle", marginLeft: "4px" }}
+                    onClick={() =>
+                        MaskedLinkStore.openUntrustedLink({
+                            href: badge.redirectURL,
+                        })
+                    }
+                />
+            )}
+        </Tooltip>
+    );
+}

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -0,0 +1,125 @@
+/*
+ * 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 { classes, LazyComponent } from "@utils/misc";
+import { filters, findBulk } from "@webpack";
+import { Alerts, UserStore } from "@webpack/common";
+
+import { Review } from "../entities/Review";
+import { deleteReview, reportReview } from "../Utils/ReviewDBAPI";
+import { canDeleteReview, openUserProfileModal, showToast } from "../Utils/Utils";
+import MessageButton from "./MessageButton";
+import ReviewBadge from "./ReviewBadge";
+
+export default LazyComponent(() => {
+    // this is terrible, blame mantika
+    const p = filters.byProps;
+    const [
+        { cozyMessage, buttons, message, groupStart },
+        { container, isHeader },
+        { avatar, clickable, username, messageContent, wrapper, cozy },
+        { contents },
+        buttonClasses,
+        { defaultColor }
+    ] = findBulk(
+        p("cozyMessage"),
+        p("container", "isHeader"),
+        p("avatar", "zalgo"),
+        p("contents"),
+        p("button", "wrapper", "selected"),
+        p("defaultColor")
+    );
+
+    return function ReviewComponent({ review, refetch }: { review: Review; refetch(): void; }) {
+        function openModal() {
+            openUserProfileModal(review.sender.discordID);
+        }
+
+        function delReview() {
+            Alerts.show({
+                title: "Are you sure?",
+                body: "Do you really want to delete this review?",
+                confirmText: "Delete",
+                cancelText: "Nevermind",
+                onConfirm: () => {
+                    deleteReview(review.id).then(res => {
+                        if (res.success) {
+                            refetch();
+                        }
+                        showToast(res.message);
+                    });
+                }
+            });
+        }
+
+        function reportRev() {
+            Alerts.show({
+                title: "Are you sure?",
+                body: "Do you really you want to report this review?",
+                confirmText: "Report",
+                cancelText: "Nevermind",
+                // confirmColor: "red", this just adds a class name and breaks the submit button guh
+                onConfirm: () => reportReview(review.id)
+            });
+        }
+
+        return (
+            <div className={classes(cozyMessage, wrapper, message, groupStart, cozy, "user-review")} style={
+                {
+                    marginLeft: "0px",
+                    paddingLeft: "52px",
+                    paddingRight: "16px"
+                }
+            }>
+
+                <div className={contents} style={{ paddingLeft: "0px" }}>
+                    <img
+                        className={classes(avatar, clickable)}
+                        onClick={openModal}
+                        src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
+                        style={{ left: "0px" }}
+                    />
+                    <span
+                        className={classes(clickable, username)}
+                        style={{ color: "var(--channels-default)", fontSize: "14px" }}
+                        onClick={() => openModal()}
+                    >
+                        {review.sender.username}
+                    </span>
+                    {review.sender.badges.map(badge => <ReviewBadge {...badge} />)}
+                    <p
+                        className={classes(messageContent, defaultColor)}
+                        style={{ fontSize: 15, marginTop: 4 }}
+                    >
+                        {review.comment}
+                    </p>
+                    <div className={classes(container, isHeader, buttons)} style={{
+                        padding: "0px",
+                    }}>
+                        <div className={buttonClasses.wrapper} >
+                            <MessageButton type="report" callback={reportRev} />
+                            {canDeleteReview(review, UserStore.getCurrentUser().id) && (
+                                <MessageButton type="delete" callback={delReview} />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+});

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -0,0 +1,97 @@
+/*
+ * 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 { classes, useAwaiter } from "@utils/misc";
+import { findLazy } from "@webpack";
+import { Forms, React, Text, UserStore } from "@webpack/common";
+import type { KeyboardEvent } from "react";
+
+import { addReview, getReviews } from "../Utils/ReviewDBAPI";
+import { showToast } from "../Utils/Utils";
+import ReviewComponent from "./ReviewComponent";
+
+const Classes = findLazy(m => typeof m.textarea === "string");
+
+export default function ReviewsView({ userId }: { userId: string; }) {
+    const [refetchCount, setRefetchCount] = React.useState(0);
+    const [reviews, _, isLoading] = useAwaiter(() => getReviews(userId), {
+        fallbackValue: [],
+        deps: [refetchCount],
+    });
+    const username = UserStore.getUser(userId)?.username ?? "";
+
+    const dirtyRefetch = () => setRefetchCount(refetchCount + 1);
+
+    if (isLoading) return null;
+
+    function onKeyPress({ key, target }: KeyboardEvent<HTMLTextAreaElement>) {
+        if (key === "Enter") {
+            addReview({
+                userid: userId,
+                comment: (target as HTMLInputElement).value,
+                star: -1
+            }).then(res => {
+                if (res?.success) {
+                    (target as HTMLInputElement).value = ""; // clear the input
+                    dirtyRefetch();
+                } else if (res?.message) {
+                    showToast(res.message);
+                }
+            });
+        }
+    }
+
+    return (
+        <div className="ReviewDB">
+            <Text
+                tag="h2"
+                variant="eyebrow"
+                style={{
+                    marginBottom: "12px",
+                    color: "var(--header-primary)"
+                }}
+            >
+                User Reviews
+            </Text>
+            {reviews?.map(review =>
+                <ReviewComponent
+                    key={review.id}
+                    review={review}
+                    refetch={dirtyRefetch}
+                />
+            )}
+            {reviews?.length === 0 && (
+                <Forms.FormText style={{ padding: "12px", paddingTop: "0px", paddingLeft: "4px", fontWeight: "bold", fontStyle: "italic" }}>
+                    Looks like nobody reviewed this user yet. You could be the first!
+                </Forms.FormText>
+            )}
+            <textarea
+                className={classes(Classes.textarea.replace("textarea", ""), "enter-comment")}
+                // this produces something like '-_59yqs ...' but since no class exists with that name its fine
+                placeholder={reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id) ? `Update review for @${username}` : `Review @${username}`}
+                onKeyDown={onKeyPress}
+                style={{
+                    marginTop: "6px",
+                    resize: "none",
+                    marginBottom: "12px",
+                    overflow: "hidden",
+                }}
+            />
+        </div>
+    );
+}

src/plugins/reviewDB/entities/Badge.ts

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

src/plugins/reviewDB/entities/Review.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { Badge } from "./Badge";
+
+export interface Sender {
+    id : number,
+    discordID: string,
+    username: string,
+    profilePhoto: string,
+    badges: Badge[]
+}
+
+export interface Review {
+    comment: string,
+    id: number,
+    star: number,
+    sender: Sender,
+}

src/plugins/reviewDB/index.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 { Settings } from "@api/settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { Button, UserStore } from "@webpack/common";
+import { User } from "discord-types/general";
+
+import ReviewsView from "./components/ReviewsView";
+import { getLastReviewID } from "./Utils/ReviewDBAPI";
+import { authorize, showToast } from "./Utils/Utils";
+
+export default definePlugin({
+    name: "ReviewDB",
+    description: "Review other users (Adds a new settings to profiles)",
+    authors: [Devs.mantikafasi, Devs.Ven],
+
+    patches: [
+        {
+            find: "disableBorderColor:!0",
+            replacement: {
+                match: /\(.{0,10}\{user:(.),setNote:.,canDM:.,.+?\}\)/,
+                replace: "$&,$self.getReviewsComponent($1)"
+            },
+        }
+    ],
+
+    options: {
+        authorize: {
+            type: OptionType.COMPONENT,
+            description: "Authorise with ReviewDB",
+            component: () => (
+                <Button onClick={authorize}>
+                    Authorise with ReviewDB
+                </Button>
+            )
+        },
+        notifyReviews: {
+            type: OptionType.BOOLEAN,
+            description: "Notify about new reviews on startup",
+            default: true,
+        }
+    },
+
+    async start() {
+        const settings = Settings.plugins.ReviewDB;
+        if (!settings.lastReviewId || !settings.notifyReviews) return;
+
+        setTimeout(async () => {
+            const id = await getLastReviewID(UserStore.getCurrentUser().id);
+            if (settings.lastReviewId < id) {
+                showToast("You have new reviews on your profile!");
+                settings.lastReviewId = id;
+            }
+        }, 4000);
+    },
+
+    getReviewsComponent: (user: User) => (
+        <ErrorBoundary message="Failed to render Reviews">
+            <ReviewsView userId={user.id} />
+        </ErrorBoundary>
+    )
+});

src/plugins/searchReply.tsx

@@ -28,7 +28,7 @@ const ReplyIcon = LazyComponent(() => findByCode("M10 8.26667V4L3 11.4667L10 18.
 
 const replyFn = findByCodeLazy("showMentionToggle", "TEXTAREA_FOCUS", "shiftKey");
 
-const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { message }: { message: Message; }) => {
+const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { message }: { message: Message; }) => () => {
     // make sure the message is in the selected channel
     if (SelectedChannelStore.getChannelId() !== message.channel_id) return;
 
@@ -61,7 +61,6 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { messag
             />
         ));
     }
-
 };
 
 

src/plugins/sendTimestamps/index.tsx

@@ -0,0 +1,219 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import { addPreSendListener, removePreSendListener } from "@api/MessageEvents";
+import { classNameFactory } from "@api/Styles";
+import { Devs } from "@utils/constants";
+import { getTheme, Theme } from "@utils/discord";
+import { Margins } from "@utils/margins";
+import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
+import definePlugin from "@utils/types";
+import { Button, ButtonLooks, ButtonWrapperClasses, ComponentDispatch, Forms, Parser, Select, Tooltip, useMemo, useState } from "@webpack/common";
+
+function parseTime(time: string) {
+    const cleanTime = time.slice(1, -1).replace(/(\d)(AM|PM)$/i, "$1 $2");
+
+    let ms = new Date(`${new Date().toDateString()} ${cleanTime}`).getTime() / 1000;
+    if (isNaN(ms)) return time;
+
+    // add 24h if time is in the past
+    if (Date.now() / 1000 > ms) ms += 86400;
+
+    return `<t:${Math.round(ms)}:t>`;
+}
+
+const Formats = ["", "t", "T", "d", "D", "f", "F", "R"] as const;
+type Format = typeof Formats[number];
+
+const cl = classNameFactory("vc-st-");
+
+function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): void; }) {
+    const [value, setValue] = useState<string>();
+    const [format, setFormat] = useState<Format>("");
+    const time = Math.round((new Date(value!).getTime() || Date.now()) / 1000);
+
+    const formatTimestamp = (time: number, format: Format) => `<t:${time}${format && `:${format}`}>`;
+
+    const [formatted, rendered] = useMemo(() => {
+        const formatted = formatTimestamp(time, format);
+        return [formatted, Parser.parse(formatted)];
+    }, [time, format]);
+
+    return (
+        <ModalRoot {...rootProps}>
+            <ModalHeader className={cl("modal-header")}>
+                <Forms.FormTitle tag="h2">
+                    Timestamp Picker
+                </Forms.FormTitle>
+
+                <ModalCloseButton onClick={close} />
+            </ModalHeader>
+
+            <ModalContent className={cl("modal-content")}>
+                <input
+                    type="datetime-local"
+                    value={value}
+                    onChange={e => setValue(e.currentTarget.value)}
+                    style={{
+                        colorScheme: getTheme() === Theme.Light ? "light" : "dark",
+                    }}
+                />
+
+                <Forms.FormTitle>Timestamp Format</Forms.FormTitle>
+                <Select
+                    options={
+                        Formats.map(m => ({
+                            label: m,
+                            value: m
+                        }))
+                    }
+                    isSelected={v => v === format}
+                    select={v => setFormat(v)}
+                    serialize={v => v}
+                    renderOptionLabel={o => (
+                        <div className={cl("format-label")}>
+                            {Parser.parse(formatTimestamp(time, o.value))}
+                        </div>
+                    )}
+                    renderOptionValue={() => rendered}
+                />
+
+                <Forms.FormTitle className={Margins.bottom8}>Preview</Forms.FormTitle>
+                <Forms.FormText className={cl("preview-text")}>
+                    {rendered} ({formatted})
+                </Forms.FormText>
+            </ModalContent>
+
+            <ModalFooter>
+                <Button
+                    onClick={() => {
+                        ComponentDispatch.dispatchToLastSubscribed("INSERT_TEXT", { rawText: formatted });
+                        close();
+                    }}
+                >Insert</Button>
+            </ModalFooter>
+        </ModalRoot>
+    );
+}
+
+export default definePlugin({
+    name: "SendTimestamps",
+    description: "Send timestamps easily via chat box button & text shortcuts. Read the extended description!",
+    authors: [Devs.Ven, Devs.Tyler],
+    dependencies: ["MessageEventsAPI"],
+
+    patches: [
+        {
+            find: ".activeCommandOption",
+            replacement: {
+                match: /(.)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
+                replace: "$&;try{$2||$1.push($self.chatBarIcon())}catch{}",
+            }
+        },
+    ],
+
+    start() {
+        this.listener = addPreSendListener((_, msg) => {
+            msg.content = msg.content.replace(/`\d{1,2}:\d{2} ?(?:AM|PM)?`/gi, parseTime);
+        });
+    },
+
+    stop() {
+        removePreSendListener(this.listener);
+    },
+
+    chatBarIcon() {
+        return (
+            <Tooltip text="Insert Timestamp">
+                {({ onMouseEnter, onMouseLeave }) => (
+                    <div style={{ display: "flex" }}>
+                        <Button
+                            aria-haspopup="dialog"
+                            aria-label=""
+                            size=""
+                            look={ButtonLooks.BLANK}
+                            onMouseEnter={onMouseEnter}
+                            onMouseLeave={onMouseLeave}
+                            innerClassName={ButtonWrapperClasses.button}
+                            onClick={() => {
+                                const key = openModal(props => (
+                                    <PickerModal
+                                        rootProps={props}
+                                        close={() => closeModal(key)}
+                                    />
+                                ));
+                            }}
+                            className={cl("button")}
+                        >
+                            <div className={ButtonWrapperClasses.buttonWrapper}>
+                                <svg
+                                    aria-hidden="true"
+                                    role="img"
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <g fill="none" fill-rule="evenodd">
+                                        <path fill="currentColor" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7v-5z" />
+                                        <rect width="24" height="24" />
+                                    </g>
+                                </svg>
+                            </div>
+                        </Button>
+                    </div>
+                )
+                }
+            </Tooltip >
+        );
+    },
+
+    settingsAboutComponent() {
+        const samples = [
+            "12:00",
+            "3:51",
+            "17:59",
+            "24:00",
+            "12:00 AM",
+            "0:13PM"
+        ].map(s => `\`${s}\``);
+
+        return (
+            <>
+                <Forms.FormText>
+                    To quickly send send time only timestamps, include timestamps formatted as `HH:MM` (including the backticks!) in your message
+                </Forms.FormText>
+                <Forms.FormText>
+                    See below for examples.
+                    If you need anything more specific, use the Date button in the chat bar!
+                </Forms.FormText>
+                <Forms.FormText>
+                    Examples:
+                    <ul>
+                        {samples.map(s => (
+                            <li key={s}>
+                                <code>{s}</code> {"->"} {Parser.parse(parseTime(s))}
+                            </li>
+                        ))}
+                    </ul>
+                </Forms.FormText>
+            </>
+        );
+    },
+});

src/plugins/sendTimestamps/styles.css

@@ -0,0 +1,48 @@
+.vc-st-modal-content input {
+    background-color: var(--input-background);
+    color: var(--text-normal);
+    width: 95%;
+    padding: 8px 8px 8px 12px;
+    margin: 1em 0;
+    outline: none;
+    border: 1px solid var(--input-background);
+    border-radius: 4px;
+    font-weight: 500;
+    font-style: inherit;
+    font-size: 100%;
+}
+
+.vc-st-format-label,
+.vc-st-format-label span {
+    background-color: transparent;
+}
+
+.vc-st-modal-content [class|="select"] {
+    margin-bottom: 1em;
+}
+
+.vc-st-modal-content [class|="select"] span {
+    background-color: var(--input-background);
+}
+
+.vc-st-modal-header {
+    justify-content: space-between;
+    align-content: center;
+}
+
+.vc-st-modal-header h1 {
+    margin: 0;
+}
+
+.vc-st-modal-header button {
+    padding: 0;
+}
+
+.vc-st-preview-text {
+    margin-bottom: 1em;
+}
+
+.vc-st-button {
+    margin-right: 4px;
+    transform: scale(1.1);
+}

src/plugins/settings.tsx

@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { addContextMenuPatch } from "@api/ContextMenu";
 import { Settings } from "@api/settings";
 import PatchHelper from "@components/PatchHelper";
 import { Devs } from "@utils/constants";
@@ -33,6 +34,23 @@ export default definePlugin({
     description: "Adds Settings UI and debug info",
     authors: [Devs.Ven, Devs.Megu],
     required: true,
+
+    start() {
+        // The settings shortcuts in the user settings cog context menu
+        // read the elements from a hardcoded map which for obvious reason
+        // doesn't contain our sections. This patches the actions of our
+        // sections to manually use SettingsRouter (which only works on desktop
+        // but the context menu is usually not available on mobile anyway)
+        addContextMenuPatch("user-settings-cog", children => () => {
+            const section = children.find(c => Array.isArray(c) && c.some(it => it?.props?.id === "VencordSettings")) as any;
+            section?.forEach(c => {
+                if (c?.props?.id?.startsWith("Vencord")) {
+                    c.props.action = () => SettingsRouter.open(c.props.id);
+                }
+            });
+        });
+    },
+
     patches: [{
         find: ".versionHash",
         replacement: [
@@ -69,61 +87,55 @@ export default definePlugin({
     }],
 
     makeSettingsCategories({ ID }: { ID: Record<string, unknown>; }) {
-        const makeOnClick = (tab: string) => () => SettingsRouter.open(tab);
+        return [
-
-        const cats = [
             {
                 section: ID.HEADER,
                 label: "Vencord"
-            }, {
+            },
+            {
                 section: "VencordSettings",
                 label: "Vencord",
-                element: () => <SettingsComponent tab="VencordSettings" />,
+                element: () => <SettingsComponent tab="VencordSettings" />
-                onClick: makeOnClick("VencordSettings")
+            },
-            }, {
+            {
                 section: "VencordPlugins",
                 label: "Plugins",
                 element: () => <SettingsComponent tab="VencordPlugins" />,
-                onClick: makeOnClick("VencordPlugins")
+            },
-            }, {
+            {
                 section: "VencordThemes",
                 label: "Themes",
                 element: () => <SettingsComponent tab="VencordThemes" />,
-                onClick: makeOnClick("VencordThemes")
+            },
-            }
+            !IS_WEB && {
-        ] as Array<{
-            section: unknown,
-            label?: string;
-            element?: React.ComponentType;
-            onClick?(): void;
-        }>;
-
-        if (!IS_WEB)
-            cats.push({
                 section: "VencordUpdater",
                 label: "Updater",
                 element: () => <SettingsComponent tab="VencordUpdater" />,
-                onClick: makeOnClick("VencordUpdater")
+            },
-            });
+            {
-
+                section: "VencordCloud",
-        cats.push({
+                label: "Cloud",
-            section: "VencordSettingsSync",
+                element: () => <SettingsComponent tab="VencordCloud" />,
-            label: "Backup & Restore",
+            },
-            element: () => <SettingsComponent tab="VencordSettingsSync" />,
+            {
-            onClick: makeOnClick("VencordSettingsSync")
+                section: "VencordSettingsSync",
-        });
+                label: "Backup & Restore",
-
+                element: () => <SettingsComponent tab="VencordSettingsSync" />,
-        if (IS_DEV)
+            },
-            cats.push({
+            IS_DEV && {
                 section: "VencordPatchHelper",
                 label: "Patch Helper",
                 element: PatchHelper!,
-                onClick: makeOnClick("VencordPatchHelper")
+            },
-            });
+            IS_VENCORD_DESKTOP && {
-
+                section: "VencordDesktop",
-        cats.push({ section: ID.DIVIDER });
+                label: "Desktop Settings",
-
+                element: VencordDesktop.Components.Settings,
-        return cats;
+            },
+            {
+                section: ID.DIVIDER
+            }
+        ].filter(Boolean);
     },
 
     options: {
@@ -142,14 +154,6 @@ export default definePlugin({
         },
     },
 
-    tabs: {
-        vencord: () => <SettingsComponent tab="VencordSettings" />,
-        plugins: () => <SettingsComponent tab="VencordPlugins" />,
-        themes: () => <SettingsComponent tab="VencordThemes" />,
-        updater: () => <SettingsComponent tab="VencordUpdater" />,
-        sync: () => <SettingsComponent tab="VencordSettingsSync" />
-    },
-
     get electronVersion() {
         return VencordNative.getVersions().electron || window.armcord?.electron || null;
     },
@@ -168,7 +172,7 @@ export default definePlugin({
     get additionalInfo() {
         if (IS_DEV) return " (Dev)";
         if (IS_WEB) return " (Web)";
-        if (IS_VENCORD_DESKTOP) return " (Vencord Desktop)";
+        if (IS_VENCORD_DESKTOP) return ` (VencordDesktop v${VencordDesktopNative.app.getVersion()})`;
         if (IS_STANDALONE) return " (Standalone)";
         return "";
     },

src/plugins/shikiCodeblocks/shiki.css

@@ -44,6 +44,7 @@
 .shiki-btn {
     border-radius: 4px 4px 0 0;
     padding: 4px 8px;
+    user-select: none;
 }
 
 .shiki-btn ~ .shiki-btn {

src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx

@@ -19,14 +19,13 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { LazyComponent } from "@utils/misc";
 import { formatDuration } from "@utils/text";
-import { find, findByPropsLazy } from "@webpack";
+import { find, findByPropsLazy, findStoreLazy } from "@webpack";
 import { FluxDispatcher, GuildMemberStore, GuildStore, moment, Parser, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip } from "@webpack/common";
 import type { Channel } from "discord-types/general";
 import type { ComponentType } from "react";
 
 import { VIEW_CHANNEL } from "..";
 
-
 enum SortOrderTypes {
     LATEST_ACTIVITY = 0,
     CREATION_DATE = 1
@@ -77,18 +76,14 @@ enum ChannelFlags {
     REQUIRE_TAG = 1 << 4
 }
 
-let EmojiComponent: ComponentType<any>;
 let ChannelBeginHeader: ComponentType<any>;
 
-export function setEmojiComponent(component: ComponentType<any>) {
-    EmojiComponent = component;
-}
-
 export function setChannelBeginHeaderComponent(component: ComponentType<any>) {
     ChannelBeginHeader = component;
 }
 
 const ChatScrollClasses = findByPropsLazy("auto", "content", "scrollerBase");
+const ChatClasses = findByPropsLazy("chat", "content", "noChat", "chatContent");
 const TagComponent = LazyComponent(() => find(m => {
     if (typeof m !== "function") return false;
 
@@ -97,6 +92,10 @@ const TagComponent = LazyComponent(() => find(m => {
     return code.includes(".Messages.FORUM_TAG_A11Y_FILTER_BY_TAG") && !code.includes("increasedActivityPill");
 }));
 
+const EmojiStore = findStoreLazy("EmojiStore");
+const EmojiParser = findByPropsLazy("convertSurrogateToName");
+const EmojiUtils = findByPropsLazy("getURL", "buildEmojiReactionColorsPlatformed");
+
 const ChannelTypesToChannelNames = {
     [ChannelTypes.GUILD_TEXT]: "text",
     [ChannelTypes.GUILD_ANNOUNCEMENT]: "announcement",
@@ -164,7 +163,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
     }
 
     return (
-        <div className={ChatScrollClasses.auto + " " + "shc-lock-screen-outer-container"}>
+        <div className={ChatScrollClasses.auto + " " + ChatScrollClasses.customTheme + " " + ChatClasses.chatContent + " " + "shc-lock-screen-outer-container"}>
             <div className="shc-lock-screen-container">
                 <img className="shc-lock-screen-logo" src={HiddenChannelLogo} />
 
@@ -245,11 +244,16 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                 {defaultReactionEmoji != null &&
                     <div className="shc-lock-screen-default-emoji-container">
                         <Text variant="text-md/normal">Default reaction emoji:</Text>
-                        <EmojiComponent node={{
+                        {Parser.defaultRules[defaultReactionEmoji.emojiName ? "emoji" : "customEmoji"].react({
-                            type: defaultReactionEmoji.emojiName ? "emoji" : "customEmoji",
+                            name: defaultReactionEmoji.emojiName
-                            name: defaultReactionEmoji.emojiName ?? "",
+                                ? EmojiParser.convertSurrogateToName(defaultReactionEmoji.emojiName)
-                            emojiId: defaultReactionEmoji.emojiId
+                                : EmojiStore.getCustomEmojiById(defaultReactionEmoji.emojiId)?.name ?? "",
-                        }} />
+                            emojiId: defaultReactionEmoji.emojiId ?? void 0,
+                            surrogate: defaultReactionEmoji.emojiName ?? void 0,
+                            src: defaultReactionEmoji.emojiName
+                                ? EmojiUtils.getURL(defaultReactionEmoji.emojiName)
+                                : void 0
+                        }, void 0, { key: "0" })}
                     </div>
                 }
                 {channel.hasFlag(ChannelFlags.REQUIRE_TAG) &&

src/plugins/showHiddenChannels/index.tsx

@@ -25,9 +25,9 @@ import { canonicalizeMatch } from "@utils/patches";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { ChannelStore, PermissionStore, Tooltip } from "@webpack/common";
-import { Channel } from "discord-types/general";
+import type { Channel, Role } from "discord-types/general";
 
-import HiddenChannelLockScreen, { setChannelBeginHeaderComponent, setEmojiComponent } from "./components/HiddenChannelLockScreen";
+import HiddenChannelLockScreen, { setChannelBeginHeaderComponent } from "./components/HiddenChannelLockScreen";
 
 const ChannelListClasses = findByPropsLazy("channelName", "subtitle", "modeMuted", "iconContainer");
 
@@ -234,14 +234,6 @@ export default definePlugin({
                 replace: ".filter(ch=>!$self.isHiddenChannel(ch))"
             }
         },
-        // Export the emoji component used on the lock screen
-        {
-            find: 'jumboable?"jumbo":"default"',
-            replacement: {
-                match: /jumboable\?"jumbo":"default",emojiId.+?}}\)},(?<=(\i)=function\(\i\){var \i=\i\.node.+?)/,
-                replace: (m, component) => `${m}shcEmojiComponentExport=($self.setEmojiComponent(${component}),void 0),`
-            }
-        },
         {
             find: ".Messages.ROLE_REQUIRED_SINGLE_USER_MESSAGE",
             replacement: [
@@ -260,12 +252,24 @@ export default definePlugin({
                     match: /permissionOverwrites\[.+?\i=(?<=context:(\i)}.+?)(?=(.+?)VIEW_CHANNEL)/,
                     replace: (m, channel, permCheck) => `${m}!Vencord.Webpack.Common.PermissionStore.can(${CONNECT}n,${channel})?${permCheck}CONNECT):`
                 },
+                {
+                    // Include the @everyone role in the allowed roles list for Hidden Channels
+                    match: /sortBy.{0,100}?return (?<=var (\i)=\i\.channel.+?)(?=\i\.id)/,
+                    replace: (m, channel) => `${m}$self.isHiddenChannel(${channel})?true:`
+                },
+                {
+                    // If the @everyone role has the required permissions, make the array only contain it
+                    match: /computePermissionsForRoles.+?.value\(\)(?<=var (\i)=\i\.channel.+?)/,
+                    replace: (m, channel) => `${m}.reduce(...$self.makeAllowedRolesReduce(${channel}.guild_id))`
+                },
                 {
                     // Patch the header to only return allowed users and roles if it's a hidden channel or locked channel (Like when it's used on the HiddenChannelLockScreen)
                     match: /MANAGE_ROLES.{0,60}?return(?=\(.+?(\(0,\i\.jsxs\)\("div",{className:\i\(\)\.members.+?guildId:(\i)\.guild_id.+?roleColor.+?]}\)))/,
                     replace: (m, component, channel) => {
                         // Export the channel for the users allowed component patch
                         component = component.replace(canonicalizeMatch(/(?<=users:\i)/), `,channel:${channel}`);
+                        // Always render the component for multiple allowed users
+                        component = component.replace(canonicalizeMatch(/1!==\i\.length/), "true");
 
                         return `${m} $self.isHiddenChannel(${channel},true)?${component}:`;
                     }
@@ -305,6 +309,11 @@ export default definePlugin({
                     match: /"more-options-popout"\)\);if\((?<=function \i\((\i)\).+?)/,
                     replace: (m, props) => `${m}!${props}.inCall&&$self.isHiddenChannel(${props}.channel,true)){}else if(`
                 },
+                {
+                    // Remove invite users button for the HiddenChannelLockScreen
+                    match: /"popup".{0,100}?if\((?<=(\i)\.channel.+?)/,
+                    replace: (m, props) => `${m}(${props}.inCall||!$self.isHiddenChannel(${props}.channel,true))&&`
+                },
                 {
                     // Render our HiddenChannelLockScreen component instead of the main voice channel component
                     match: /this\.renderVoiceChannelEffects.+?children:(?<=renderContent=function.+?)/,
@@ -319,6 +328,11 @@ export default definePlugin({
                     // Disable useless components for the HiddenChannelLockScreen of voice channels
                     match: /(?:{|,)render(?!Header|ExternalHeader).{0,30}?:(?<=renderContent=function.+?)(?!void)/g,
                     replace: "$&!this.props.inCall&&$self.isHiddenChannel(this.props.channel,true)?null:"
+                },
+                {
+                    // Disable bad CSS class which mess up hidden voice channels styling
+                    match: /callContainer,(?<=\(\)\.callContainer,)/,
+                    replace: '$&!this.props.inCall&&$self.isHiddenChannel(this.props.channel,true)?"":'
                 }
             ]
         },
@@ -403,7 +417,6 @@ export default definePlugin({
         }
     ],
 
-    setEmojiComponent,
     setChannelBeginHeaderComponent,
 
     isHiddenChannel(channel: Channel & { channelId?: string; }, checkConnect = false) {
@@ -435,6 +448,20 @@ export default definePlugin({
         return res;
     },
 
+    makeAllowedRolesReduce(guildId: string) {
+        return [
+            (prev: Array<Role>, _: Role, index: number, originalArray: Array<Role>) => {
+                if (index !== 0) return prev;
+
+                const everyoneRole = originalArray.find(role => role.id === guildId);
+
+                if (everyoneRole) return [everyoneRole];
+                return originalArray;
+            },
+            [] as Array<Role>
+        ];
+    },
+
     HiddenChannelLockScreen: (channel: any) => <HiddenChannelLockScreen channel={channel} />,
 
     LockIcon: () => (

src/plugins/showHiddenChannels/style.css

@@ -1,5 +1,4 @@
 .shc-lock-screen-outer-container {
-    background-color: var(--background-primary);
     overflow: hidden scroll;
     flex: 1 1 auto;
     height: 100%;
@@ -41,14 +40,14 @@
 
 .shc-lock-screen-topic-container {
     color: var(--text-normal);
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;
 }
 
 .shc-lock-screen-tags-container {
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;
@@ -84,9 +83,9 @@
 }
 
 .shc-lock-screen-default-emoji-container > [class^="emojiContainer"] {
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 8px;
-    padding: 3px 4px;
+    padding: 5px 6px;
     margin-left: 5px;
 }
 
@@ -94,7 +93,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    background-color: var(--background-secondary);
+    background: var(--bg-overlay-3, var(--background-secondary));
     border-radius: 5px;
     padding: 10px;
     max-width: 70vw;

src/plugins/showMeYourName/index.tsx

@@ -0,0 +1,81 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Sofia Lima
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import { definePluginSettings } from "@api/settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { Message } from "discord-types/general";
+
+interface UsernameProps {
+    author: { nick: string };
+    message: Message;
+    withMentionPrefix?: boolean;
+    isRepliedMessage: boolean;
+}
+
+const settings = definePluginSettings({
+    mode: {
+        type: OptionType.SELECT,
+        description: "How to display usernames and nicks",
+        options: [
+            { label: "Username then nickname", value: "user-nick", default: true },
+            { label: "Nickname then username", value: "nick-user" },
+            { label: "Username only", value: "user" },
+        ],
+    },
+    inReplies: {
+        type: OptionType.BOOLEAN,
+        default: false,
+        description: "Also apply functionality to reply previews",
+    },
+});
+
+export default definePlugin({
+    name: "ShowMeYourName",
+    description: "Display usernames next to nicks, or no nicks at all",
+    authors: [Devs.dzshn],
+    patches: [
+        {
+            find: ".withMentionPrefix",
+            replacement: {
+                match: /(?<=onContextMenu:\i,children:)\i\+\i/,
+                replace: "$self.renderUsername(arguments[0])"
+            }
+        },
+    ],
+    settings,
+
+    renderUsername: ({ author, message, isRepliedMessage, withMentionPrefix }: UsernameProps) => {
+        try {
+            const { username } = message.author;
+            const { nick } = author;
+            const prefix = withMentionPrefix ? "@" : "";
+            if (username === nick || isRepliedMessage && !settings.store.inReplies)
+                return prefix + nick;
+            if (settings.store.mode === "user-nick")
+                return <>{prefix}{username} <span className="vc-smyn-suffix">{nick}</span></>;
+            if (settings.store.mode === "nick-user")
+                return <>{prefix}{nick} <span className="vc-smyn-suffix">{username}</span></>;
+            return prefix + username;
+        } catch {
+            return author?.nick;
+        }
+    },
+});

src/plugins/showMeYourName/styles.css

@@ -0,0 +1,11 @@
+.vc-smyn-suffix {
+    color: var(--text-muted);
+}
+
+.vc-smyn-suffix::before {
+    content: "(";
+}
+
+.vc-smyn-suffix::after {
+    content: ")";
+}

src/plugins/silentMessageToggle.tsx

@@ -44,7 +44,7 @@ function SilentMessageToggle(chatBoxProps: {
     if (chatBoxProps.type.analyticsName !== "normal") return null;
 
     return (
-        <Tooltip text="Toggle Silent Message">
+        <Tooltip text={enabled ? "Disable Silent Message" : "Enable Silent Message"}>
             {tooltipProps => (
                 <div style={{ display: "flex" }}>
                     <Button

src/plugins/silentTyping.tsx

@@ -48,7 +48,7 @@ function SilentTypingToggle(chatBoxProps: {
     if (chatBoxProps.type.analyticsName !== "normal") return null;
 
     return (
-        <Tooltip text={isEnabled ? "Disable silent typing" : "Enable silent typing"}>
+        <Tooltip text={isEnabled ? "Disable Silent Typing" : "Enable Silent Typing"}>
             {(tooltipProps: any) => (
                 <div style={{ display: "flex" }}>
                     <Button

src/plugins/spotifyControls/hoverOnly.css

@@ -0,0 +1,16 @@
+.vc-spotify-button-row {
+    height: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: 0.2s;
+    transition-property: height;
+}
+
+#vc-spotify-player:hover .vc-spotify-button-row {
+    opacity: 1;
+    height: 32px;
+    pointer-events: auto;
+
+    /* only transition opacity on show to prevent clipping */
+    transition-property: height, opacity;
+}

src/plugins/spotifyControls/index.tsx

@@ -17,27 +17,20 @@
 */
 
 import { Settings } from "@api/settings";
+import { disableStyle, enableStyle } from "@api/Styles";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 
+import hoverOnlyStyle from "./hoverOnly.css?managed";
 import { Player } from "./PlayerComponent";
 
 function toggleHoverControls(value: boolean) {
-    document.getElementById("vc-spotify-hover-controls")?.remove();
+    (value ? enableStyle : disableStyle)(hoverOnlyStyle);
-    if (value) {
-        const style = document.createElement("style");
-        style.id = "vc-spotify-hover-controls";
-        style.textContent = `
-.vc-spotify-button-row { height: 0; opacity: 0; will-change: height, opacity; transition: height .2s, opacity .05s; }
-#vc-spotify-player:hover .vc-spotify-button-row { opacity: 1; height: 32px; }
-`;
-        document.head.appendChild(style);
-    }
 }
 
 export default definePlugin({
     name: "SpotifyControls",
-    description: "Spotify Controls",
+    description: "Adds a Spotify player above the account panel",
     authors: [Devs.Ven, Devs.afn, Devs.KraXen72],
     options: {
         hoverControls: {

src/plugins/spotifyControls/spotifyStyles.css

@@ -140,6 +140,7 @@
 
 #vc-spotify-album-image {
     border-radius: 3px;
+    transition: filter 0.2s;
 }
 
 #vc-spotify-album-image:hover {

src/plugins/supportHelper.tsx

@@ -35,6 +35,7 @@ export default definePlugin({
     required: true,
     description: "Helps us provide support to you",
     authors: [Devs.Ven],
+    dependencies: ["CommandsAPI"],
 
     commands: [{
         name: "vencord-debug",
@@ -43,11 +44,18 @@ export default definePlugin({
         execute() {
             const { RELEASE_CHANNEL } = window.GLOBAL_ENV;
 
+            const client = (() => {
+                if (IS_DISCORD_DESKTOP) return `Desktop v${DiscordNative.app.getVersion()}`;
+                if (IS_VENCORD_DESKTOP) return `Vencord Desktop v${VencordDesktopNative.app.getVersion()}`;
+                if ("armcord" in window) return `ArmCord v${window.armcord.version}`;
+                return `Web (${navigator.userAgent})`;
+            })();
+
             const debugInfo = `
 **Vencord Debug Info**
 
 > Discord Branch: ${RELEASE_CHANNEL}
-> Client: ${typeof DiscordNative === "undefined" ? window.armcord ? "Armcord" : `Web (${navigator.userAgent})` : `Desktop (Electron v${settings.electronVersion})`}
+> Client: ${client}
 > Platform: ${window.navigator.platform}
 > Vencord Version: ${gitHash}${settings.additionalInfo}
 > Outdated: ${isOutdated}

src/plugins/urbanDictionary.ts

@@ -23,7 +23,7 @@ import definePlugin from "@utils/types";
 
 export default definePlugin({
     name: "UrbanDictionary",
-    description: "Searches for a word on Urban Dictionary",
+    description: "Search for a word on Urban Dictionary via /urban slash command",
     authors: [Devs.jewdev],
     dependencies: ["CommandsAPI"],
     commands: [