Merge branch 'main' into uvc-button-view-vc

browser/GMPolyfill.js

@@ -62,7 +62,7 @@ function GM_fetch(url, opt) {
             resp.arrayBuffer = () => blobTo("arrayBuffer", blob);
             resp.text = () => blobTo("text", blob);
             resp.json = async () => JSON.parse(await blobTo("text", blob));
-            resp.headers = new Headers(parseHeaders(resp.responseHeaders));
+            resp.headers = parseHeaders(resp.responseHeaders);
             resp.ok = resp.status >= 200 && resp.status < 300;
             resolve(resp);
         };

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.6.6",
+    "version": "1.7.1",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {

scripts/generateReport.ts

@@ -428,10 +428,11 @@ function runTime(token: string) {
 
                 if (searchType === "findComponent") method = "find";
                 if (searchType === "findExportedComponent") method = "findByProps";
-                if (searchType === "waitFor" || searchType === "waitForComponent" || searchType === "waitForStore") {
+                if (searchType === "waitFor" || searchType === "waitForComponent") {
                     if (typeof args[0] === "string") method = "findByProps";
                     else method = "find";
                 }
+                if (searchType === "waitForStore") method = "findStore";
 
                 try {
                     let result: any;

scripts/runInstaller.mjs

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

src/api/ChatButton.css

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

src/api/ChatButtons.tsx

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

src/api/ContextMenu.ts

@@ -17,22 +17,20 @@
 */
 
 import { Logger } from "@utils/Logger";
+import { Menu, React } from "@webpack/common";
 import type { ReactElement } from "react";
 
-type ContextMenuPatchCallbackReturn = (() => void) | void;
 /**
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
- * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
+export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => void;
 /**
  * @param navId The navId of the context menu being patched
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
- * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => void;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -93,14 +91,19 @@ export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallba
  * @param id The id of the child. If an array is specified, all ids will be tried
  * @param children The context menu children
  */
-export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null>, _itemsArray?: Array<ReactElement | null>): Array<ReactElement | null> | null {
+export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null>): Array<ReactElement | null> | null {
     for (const child of children) {
         if (child == null) continue;
 
+        if (Array.isArray(child)) {
+            const found = findGroupChildrenByChildId(id, child);
+            if (found !== null) return found;
+        }
+
         if (
             (Array.isArray(id) && id.some(id => child.props?.id === id))
             || child.props?.id === id
-        ) return _itemsArray ?? null;
+        ) return children;
 
         let nextChildren = child.props?.children;
         if (nextChildren) {
@@ -109,7 +112,7 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
                 child.props.children = nextChildren;
             }
 
-            const found = findGroupChildrenByChildId(id, nextChildren, nextChildren);
+            const found = findGroupChildrenByChildId(id, nextChildren);
             if (found !== null) return found;
         }
     }
@@ -126,9 +129,12 @@ interface ContextMenuProps {
     onClose: (callback: (...args: Array<any>) => any) => void;
 }
 
-const patchedMenus = new WeakSet();
+export function _usePatchContextMenu(props: ContextMenuProps) {
+    props = {
+        ...props,
+        children: cloneMenuChildren(props.children),
+    };
 
-export function _patchContextMenu(props: ContextMenuProps) {
     props.contextMenuApiArguments ??= [];
     const contextMenuPatches = navPatches.get(props.navId);
 
@@ -137,8 +143,7 @@ export function _patchContextMenu(props: ContextMenuProps) {
     if (contextMenuPatches) {
         for (const patch of contextMenuPatches) {
             try {
-                const callback = patch(props.children, ...props.contextMenuApiArguments);
-                if (!patchedMenus.has(props)) callback?.();
+                patch(props.children, ...props.contextMenuApiArguments);
             } catch (err) {
                 ContextMenuLogger.error(`Patch for ${props.navId} errored,`, err);
             }
@@ -147,12 +152,30 @@ export function _patchContextMenu(props: ContextMenuProps) {
 
     for (const patch of globalPatches) {
         try {
-            const callback = patch(props.navId, props.children, ...props.contextMenuApiArguments);
-            if (!patchedMenus.has(props)) callback?.();
+            patch(props.navId, props.children, ...props.contextMenuApiArguments);
         } catch (err) {
             ContextMenuLogger.error("Global patch errored,", err);
         }
     }
 
-    patchedMenus.add(props);
+    return props;
+}
+
+function cloneMenuChildren(obj: ReactElement | Array<ReactElement | null> | null) {
+    if (Array.isArray(obj)) {
+        return obj.map(cloneMenuChildren);
+    }
+
+    if (React.isValidElement(obj)) {
+        obj = React.cloneElement(obj);
+
+        if (
+            obj?.props?.children &&
+            (obj.type !== Menu.MenuControlItem || obj.type === Menu.MenuControlItem && obj.props.control != null)
+        ) {
+            obj.props.children = cloneMenuChildren(obj.props.children);
+        }
+    }
+
+    return obj;
 }

src/api/MessageEvents.ts

@@ -74,7 +74,7 @@ export interface MessageExtra {
 }
 
 export type SendListener = (channelId: string, messageObj: MessageObject, extra: MessageExtra) => Promisable<void | { cancel: boolean; }>;
-export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void>;
+export type EditListener = (channelId: string, messageId: string, messageObj: MessageObject) => Promisable<void | { cancel: boolean; }>;
 
 const sendListeners = new Set<SendListener>();
 const editListeners = new Set<EditListener>();
@@ -84,7 +84,7 @@ export async function _handlePreSend(channelId: string, messageObj: MessageObjec
     for (const listener of sendListeners) {
         try {
             const result = await listener(channelId, messageObj, extra);
-            if (result && result.cancel === true) {
+            if (result?.cancel) {
                 return true;
             }
         } catch (e) {
@@ -97,11 +97,15 @@ export async function _handlePreSend(channelId: string, messageObj: MessageObjec
 export async function _handlePreEdit(channelId: string, messageId: string, messageObj: MessageObject) {
     for (const listener of editListeners) {
         try {
-            await listener(channelId, messageId, messageObj);
+            const result = await listener(channelId, messageId, messageObj);
+            if (result?.cancel) {
+                return true;
+            }
         } catch (e) {
             MessageEventsLogger.error("MessageEditHandler: Listener encountered an unknown error\n", e);
         }
     }
+    return false;
 }
 
 /**

src/api/Notifications/notificationLog.tsx

@@ -21,7 +21,7 @@ import { Settings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
-import { Alerts, Button, Forms, moment, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
+import { Alerts, Button, Forms, React, Text, Timestamp, useEffect, useReducer, useState } from "@webpack/common";
 import { nanoid } from "nanoid";
 import type { DispatchWithoutAction } from "react";
 
@@ -129,7 +129,7 @@ function NotificationEntry({ data }: { data: PersistentNotificationData; }) {
                 richBody={
                     <div className={cl("body")}>
                         {data.body}
-                        <Timestamp timestamp={moment(data.timestamp)} className={cl("timestamp")} />
+                        <Timestamp timestamp={new Date(data.timestamp)} className={cl("timestamp")} />
                     </div>
                 }
             />

src/api/Settings.ts

@@ -223,13 +223,13 @@ export const Settings = makeProxy(settings);
 export function useSettings(paths?: UseSettings<Settings>[]) {
     const [, forceUpdate] = React.useReducer(() => ({}), {});
 
-    const onUpdate: SubscriptionCallback = paths
-        ? (value, path) => paths.includes(path as UseSettings<Settings>) && forceUpdate()
-        : forceUpdate;
+    if (paths) {
+        (forceUpdate as SubscriptionCallback)._paths = paths;
+    }
 
     React.useEffect(() => {
-        subscriptions.add(onUpdate);
-        return () => void subscriptions.delete(onUpdate);
+        subscriptions.add(forceUpdate);
+        return () => void subscriptions.delete(forceUpdate);
     }, []);
 
     return Settings;
@@ -253,8 +253,10 @@ type ResolvePropDeep<T, P> = P extends "" ? T :
 export function addSettingsListener<Path extends keyof Settings>(path: Path, onUpdate: (newValue: Settings[Path], path: Path) => void): void;
 export function addSettingsListener<Path extends string>(path: Path, onUpdate: (newValue: Path extends "" ? any : ResolvePropDeep<Settings, Path>, path: Path extends "" ? string : Path) => void): void;
 export function addSettingsListener(path: string, onUpdate: (newValue: any, path: string) => void) {
-    if (path)
+    if (path) {
         ((onUpdate as SubscriptionCallback)._paths ??= []).push(path);
+    }
+
     subscriptions.add(onUpdate);
 }
 

src/api/index.ts

@@ -17,6 +17,7 @@
 */
 
 import * as $Badges from "./Badges";
+import * as $ChatButtons from "./ChatButtons";
 import * as $Commands from "./Commands";
 import * as $ContextMenu from "./ContextMenu";
 import * as $DataStore from "./DataStore";
@@ -104,3 +105,8 @@ export const Notifications = $Notifications;
  * An api allowing you to patch and add/remove items to/from context menus
  */
 export const ContextMenu = $ContextMenu;
+
+/**
+ * An API allowing you to add buttons to the chat input
+ */
+export const ChatButtons = $ChatButtons;

src/components/VencordSettings/CloudTab.tsx

@@ -39,9 +39,7 @@ function validateUrl(url: string) {
 async function eraseAllData() {
     const res = await fetch(new URL("/v1/", getCloudUrl()), {
         method: "DELETE",
-        headers: new Headers({
-            Authorization: await getCloudAuth()
-        })
+        headers: { Authorization: await getCloudAuth() }
     });
 
     if (!res.ok) {

src/components/VencordSettings/ThemesTab.tsx

@@ -21,9 +21,11 @@ import { classNameFactory } from "@api/Styles";
 import { Flex } from "@components/Flex";
 import { DeleteIcon } from "@components/Icons";
 import { Link } from "@components/Link";
+import PluginModal from "@components/PluginSettings/PluginModal";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
+import { openModal } from "@utils/modal";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
 import { findByPropsLazy, findLazy } from "@webpack";
@@ -248,6 +250,21 @@ function ThemesTab() {
                             >
                                 Edit QuickCSS
                             </Button>
+
+                            {Vencord.Settings.plugins.ClientTheme.enabled && (
+                                <Button
+                                    onClick={() => openModal(modalProps => (
+                                        <PluginModal
+                                            {...modalProps}
+                                            plugin={Vencord.Plugins.plugins.ClientTheme}
+                                            onRestartNeeded={() => { }}
+                                        />
+                                    ))}
+                                    size={Button.Sizes.SMALL}
+                                >
+                                    Edit ClientTheme
+                                </Button>
+                            )}
                         </>
                     </Card>
 

src/components/VencordSettings/VencordTab.tsx

@@ -83,10 +83,10 @@ function VencordSettings() {
                 title: "Use Windows' native title bar instead of Discord's custom one",
                 note: "Requires a full restart"
             }),
-            !IS_WEB && false /* This causes electron to freeze / white screen for some people */ && {
+            !IS_WEB && {
                 key: "transparent",
-                title: "Enable window transparency",
-                note: "Requires a full restart"
+                title: "Enable window transparency.",
+                note: "You need a theme that supports transparency or this will do nothing. Will stop the window from being resizable. Requires a full restart"
             },
             !IS_WEB && isWindows && {
                 key: "winCtrlQ",

src/main/ipcMain.ts

@@ -23,7 +23,7 @@ import { debounce } from "@utils/debounce";
 import { IpcEvents } from "@utils/IpcEvents";
 import { Queue } from "@utils/Queue";
 import { BrowserWindow, ipcMain, shell, systemPreferences } from "electron";
-import { mkdirSync, readFileSync, watch } from "fs";
+import { FSWatcher, mkdirSync, readFileSync, watch } from "fs";
 import { open, readdir, readFile, writeFile } from "fs/promises";
 import { join, normalize } from "path";
 
@@ -126,21 +126,35 @@ ipcMain.handle(IpcEvents.SET_SETTINGS, (_, s) => {
 
 
 export function initIpc(mainWindow: BrowserWindow) {
+    let quickCssWatcher: FSWatcher | undefined;
+
     open(QUICKCSS_PATH, "a+").then(fd => {
         fd.close();
-        watch(QUICKCSS_PATH, { persistent: false }, debounce(async () => {
+        quickCssWatcher = watch(QUICKCSS_PATH, { persistent: false }, debounce(async () => {
             mainWindow.webContents.postMessage(IpcEvents.QUICK_CSS_UPDATE, await readCss());
         }, 50));
-    });
+    }).catch(() => { });
 
-    watch(THEMES_DIR, { persistent: false }, debounce(() => {
+    const themesWatcher = watch(THEMES_DIR, { persistent: false }, debounce(() => {
         mainWindow.webContents.postMessage(IpcEvents.THEME_UPDATE, void 0);
     }));
+
+    mainWindow.once("closed", () => {
+        quickCssWatcher?.close();
+        themesWatcher.close();
+    });
 }
 
 ipcMain.handle(IpcEvents.OPEN_MONACO_EDITOR, async () => {
+    const title = "Vencord QuickCSS Editor";
+    const existingWindow = BrowserWindow.getAllWindows().find(w => w.title === title);
+    if (existingWindow && !existingWindow.isDestroyed()) {
+        existingWindow.focus();
+        return;
+    }
+
     const win = new BrowserWindow({
-        title: "Vencord QuickCSS Editor",
+        title,
         autoHideMenuBar: true,
         darkTheme: true,
         webPreferences: {

src/main/patcher.ts

@@ -79,8 +79,7 @@ if (!IS_VANILLA) {
                     delete options.frame;
                 }
 
-                // This causes electron to freeze / white screen for some people
-                if ((settings as any).transparentUNSAFE_USE_AT_OWN_RISK) {
+                if (settings.transparent) {
                     options.transparent = true;
                     options.backgroundColor = "#00000000";
                 }
@@ -130,6 +129,15 @@ if (!IS_VANILLA) {
     });
 
     process.env.DATA_DIR = join(app.getPath("userData"), "..", "Vencord");
+
+    // Monkey patch commandLine to disable WidgetLayering: Fix DevTools context menus https://github.com/electron/electron/issues/38790
+    const originalAppend = app.commandLine.appendSwitch;
+    app.commandLine.appendSwitch = function (...args) {
+        if (args[0] === "disable-features" && !args[1]?.includes("WidgetLayering")) {
+            args[1] += ",WidgetLayering";
+        }
+        return originalAppend.apply(this, args);
+    };
 } else {
     console.log("[Vencord] Running in vanilla mode. Not loading Vencord");
 }

src/main/updater/git.ts

@@ -49,9 +49,12 @@ async function getRepo() {
 async function calculateGitChanges() {
     await git("fetch");
 
-    const branch = await git("branch", "--show-current");
+    const branch = (await git("branch", "--show-current")).stdout.trim();
 
-    const res = await git("log", `HEAD...origin/${branch.stdout.trim()}`, "--pretty=format:%an/%h/%s");
+    const existsOnOrigin = (await git("ls-remote", "origin", branch)).stdout.length > 0;
+    if (!existsOnOrigin) return [];
+
+    const res = await git("log", `HEAD...origin/${branch}`, "--pretty=format:%an/%h/%s");
 
     const commits = res.stdout.trim();
     return commits ? commits.split("\n").map(line => {
@@ -73,6 +76,8 @@ async function build() {
     const command = isFlatpak ? "flatpak-spawn" : "node";
     const args = isFlatpak ? ["--host", "node", "scripts/build/build.mjs"] : ["scripts/build/build.mjs"];
 
+    if (IS_DEV) args.push("--dev");
+
     const res = await execFile(command, args, opts);
 
     return !res.stderr.includes("Build failed");

src/plugins/_api/chatButtons.ts

@@ -0,0 +1,22 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "ChatInputButtonAPI",
+    description: "API to add buttons to the chat input",
+    authors: [Devs.Ven],
+
+    patches: [{
+        find: 'location:"ChannelTextAreaButtons"',
+        replacement: {
+            match: /if\(!\i\.isMobile\)\{(?=.+?&&(\i)\.push\(.{0,50}"gift")/,
+            replace: "$&Vencord.Api.ChatButtons._injectButtons($1,arguments[0]);"
+        }
+    }]
+});

src/plugins/_api/contextMenu.ts

@@ -22,15 +22,15 @@ import definePlugin from "@utils/types";
 export default definePlugin({
     name: "ContextMenuAPI",
     description: "API for adding/removing items to/from context menus.",
-    authors: [Devs.Nuckyz, Devs.Ven],
+    authors: [Devs.Nuckyz, Devs.Ven, Devs.Kyuuhachi],
     required: true,
 
     patches: [
         {
             find: "♫ (つ｡◕‿‿◕｡)つ ♪",
             replacement: {
-                match: /let{navId:/,
-                replace: "Vencord.Api.ContextMenu._patchContextMenu(arguments[0]);$&"
+                match: /(?=let{navId:)(?<=function \i\((\i)\).+?)/,
+                replace: "$1=Vencord.Api.ContextMenu._usePatchContextMenu($1);"
             }
         },
         {

src/plugins/_api/messageEvents.ts

@@ -25,10 +25,13 @@ export default definePlugin({
     authors: [Devs.Arjix, Devs.hunt, Devs.Ven],
     patches: [
         {
-            find: '"MessageActionCreators"',
+            find: ".Messages.EDIT_TEXTAREA_HELP",
             replacement: {
-                match: /async editMessage\(.+?\)\{/,
-                replace: "$&await Vencord.Api.MessageEvents._handlePreEdit(...arguments);"
+                match: /(?<=,channel:\i\}\)\.then\().+?(?=return \i\.content!==this\.props\.message\.content&&\i\((.+?)\))/,
+                replace: (match, args) => "" +
+                    `async ${match}` +
+                    `if(await Vencord.Api.MessageEvents._handlePreEdit(${args}))` +
+                    "return Promise.resolve({shoudClear:true,shouldRefocus:true});"
             }
         },
         {

src/plugins/_core/settings.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId } from "@api/ContextMenu";
 import { Settings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
@@ -30,21 +30,21 @@ export default definePlugin({
     authors: [Devs.Ven, Devs.Megu],
     required: true,
 
-    start() {
+    contextMenus: {
         // 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;
+        "user-settings-cog"(children) {
+            const section = findGroupChildrenByChildId("VencordSettings", children);
             section?.forEach(c => {
                 const id = c?.props?.id;
                 if (id?.startsWith("Vencord") || id?.startsWith("Vesktop")) {
-                    c.props.action = () => SettingsRouter.open(id);
+                    c!.props.action = () => SettingsRouter.open(id);
                 }
             });
-        });
+        }
     },
 
     patches: [{

src/plugins/anonymiseFileNames/index.ts

@@ -1,94 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { Settings } from "@api/Settings";
-import { Devs } from "@utils/constants";
-import definePlugin, { OptionType } from "@utils/types";
-
-const enum Methods {
-    Random,
-    Consistent,
-    Timestamp,
-}
-
-const tarExtMatcher = /\.tar\.\w+$/;
-
-export default definePlugin({
-    name: "AnonymiseFileNames",
-    authors: [Devs.obscurity],
-    description: "Anonymise uploaded file names",
-    patches: [
-        {
-            find: "instantBatchUpload:function",
-            replacement: {
-                match: /uploadFiles:(.{1,2}),/,
-                replace:
-                    "uploadFiles:(...args)=>(args[0].uploads.forEach(f=>f.filename=$self.anonymise(f.filename)),$1(...args)),",
-            },
-        },
-    ],
-
-    options: {
-        method: {
-            description: "Anonymising method",
-            type: OptionType.SELECT,
-            options: [
-                { label: "Random Characters", value: Methods.Random, default: true },
-                { label: "Consistent", value: Methods.Consistent },
-                { label: "Timestamp (4chan-like)", value: Methods.Timestamp },
-            ],
-        },
-        randomisedLength: {
-            description: "Random characters length",
-            type: OptionType.NUMBER,
-            default: 7,
-            disabled: () => Settings.plugins.AnonymiseFileNames.method !== Methods.Random,
-        },
-        consistent: {
-            description: "Consistent filename",
-            type: OptionType.STRING,
-            default: "image",
-            disabled: () => Settings.plugins.AnonymiseFileNames.method !== Methods.Consistent,
-        },
-    },
-
-    anonymise(file: string) {
-        let name = "image";
-        const tarMatch = tarExtMatcher.exec(file);
-        const extIdx = tarMatch?.index ?? file.lastIndexOf(".");
-        const ext = extIdx !== -1 ? file.slice(extIdx) : "";
-
-        switch (Settings.plugins.AnonymiseFileNames.method) {
-            case Methods.Random:
-                const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-                name = Array.from(
-                    { length: Settings.plugins.AnonymiseFileNames.randomisedLength },
-                    () => chars[Math.floor(Math.random() * chars.length)]
-                ).join("");
-                break;
-            case Methods.Consistent:
-                name = Settings.plugins.AnonymiseFileNames.consistent;
-                break;
-            case Methods.Timestamp:
-                // UNIX timestamp in nanos, i could not find a better dependency-less way
-                name = `${Math.floor(Date.now() / 1000)}${Math.floor(window.performance.now())}`;
-                break;
-        }
-        return name + ext;
-    },
-});

src/plugins/anonymiseFileNames/index.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 { Upload } from "@api/MessageEvents";
+import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { findByCodeLazy, findByPropsLazy } from "@webpack";
+
+type AnonUpload = Upload & { anonymise?: boolean; };
+
+const ActionBarIcon = findByCodeLazy(".actionBarIcon)");
+const UploadDraft = findByPropsLazy("popFirstFile", "update");
+
+const enum Methods {
+    Random,
+    Consistent,
+    Timestamp,
+}
+
+const tarExtMatcher = /\.tar\.\w+$/;
+
+const settings = definePluginSettings({
+    anonymiseByDefault: {
+        description: "Whether to anonymise file names by default",
+        type: OptionType.BOOLEAN,
+        default: true,
+    },
+    method: {
+        description: "Anonymising method",
+        type: OptionType.SELECT,
+        options: [
+            { label: "Random Characters", value: Methods.Random, default: true },
+            { label: "Consistent", value: Methods.Consistent },
+            { label: "Timestamp", value: Methods.Timestamp },
+        ],
+    },
+    randomisedLength: {
+        description: "Random characters length",
+        type: OptionType.NUMBER,
+        default: 7,
+        disabled: () => settings.store.method !== Methods.Random,
+    },
+    consistent: {
+        description: "Consistent filename",
+        type: OptionType.STRING,
+        default: "image",
+        disabled: () => settings.store.method !== Methods.Consistent,
+    },
+});
+
+export default definePlugin({
+    name: "AnonymiseFileNames",
+    authors: [Devs.obscurity],
+    description: "Anonymise uploaded file names",
+    patches: [
+        {
+            find: "instantBatchUpload:function",
+            replacement: {
+                match: /uploadFiles:(.{1,2}),/,
+                replace:
+                    "uploadFiles:(...args)=>(args[0].uploads.forEach(f=>f.filename=$self.anonymise(f)),$1(...args)),",
+            },
+        },
+        {
+            find: ".Messages.ATTACHMENT_UTILITIES_SPOILER",
+            replacement: {
+                match: /(?<=children:\[)(?=.{10,80}tooltip:.{0,100}\i\.\i\.Messages\.ATTACHMENT_UTILITIES_SPOILER)/,
+                replace: "arguments[0].canEdit!==false?$self.renderIcon(arguments[0]):null,"
+            },
+        },
+    ],
+    settings,
+
+    renderIcon: ErrorBoundary.wrap(({ upload, channelId, draftType }: { upload: AnonUpload; draftType: unknown; channelId: string; }) => {
+        const anonymise = upload.anonymise ?? settings.store.anonymiseByDefault;
+        return (
+            <ActionBarIcon
+                tooltip={anonymise ? "Using anonymous file name" : "Using normal file name"}
+                onClick={() => {
+                    upload.anonymise = !anonymise;
+                    UploadDraft.update(channelId, upload.id, draftType, {}); // dummy update so component rerenders
+                }}
+            >
+                {anonymise
+                    ? <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M17.06 13C15.2 13 13.64 14.33 13.24 16.1C12.29 15.69 11.42 15.8 10.76 16.09C10.35 14.31 8.79 13 6.94 13C4.77 13 3 14.79 3 17C3 19.21 4.77 21 6.94 21C9 21 10.68 19.38 10.84 17.32C11.18 17.08 12.07 16.63 13.16 17.34C13.34 19.39 15 21 17.06 21C19.23 21 21 19.21 21 17C21 14.79 19.23 13 17.06 13M6.94 19.86C5.38 19.86 4.13 18.58 4.13 17S5.39 14.14 6.94 14.14C8.5 14.14 9.75 15.42 9.75 17S8.5 19.86 6.94 19.86M17.06 19.86C15.5 19.86 14.25 18.58 14.25 17S15.5 14.14 17.06 14.14C18.62 14.14 19.88 15.42 19.88 17S18.61 19.86 17.06 19.86M22 10.5H2V12H22V10.5M15.53 2.63C15.31 2.14 14.75 1.88 14.22 2.05L12 2.79L9.77 2.05L9.72 2.04C9.19 1.89 8.63 2.17 8.43 2.68L6 9H18L15.56 2.68L15.53 2.63Z" /></svg>
+                    : <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style={{ transform: "scale(-1,1)" }}><path fill="currentColor" d="M22.11 21.46L2.39 1.73L1.11 3L6.31 8.2L6 9H7.11L8.61 10.5H2V12H10.11L13.5 15.37C13.38 15.61 13.3 15.85 13.24 16.1C12.29 15.69 11.41 15.8 10.76 16.09C10.35 14.31 8.79 13 6.94 13C4.77 13 3 14.79 3 17C3 19.21 4.77 21 6.94 21C9 21 10.68 19.38 10.84 17.32C11.18 17.08 12.07 16.63 13.16 17.34C13.34 19.39 15 21 17.06 21C17.66 21 18.22 20.86 18.72 20.61L20.84 22.73L22.11 21.46M6.94 19.86C5.38 19.86 4.13 18.58 4.13 17C4.13 15.42 5.39 14.14 6.94 14.14C8.5 14.14 9.75 15.42 9.75 17C9.75 18.58 8.5 19.86 6.94 19.86M17.06 19.86C15.5 19.86 14.25 18.58 14.25 17C14.25 16.74 14.29 16.5 14.36 16.25L17.84 19.73C17.59 19.81 17.34 19.86 17.06 19.86M22 12H15.2L13.7 10.5H22V12M17.06 13C19.23 13 21 14.79 21 17C21 17.25 20.97 17.5 20.93 17.73L19.84 16.64C19.68 15.34 18.66 14.32 17.38 14.17L16.29 13.09C16.54 13.03 16.8 13 17.06 13M12.2 9L7.72 4.5L8.43 2.68C8.63 2.17 9.19 1.89 9.72 2.04L9.77 2.05L12 2.79L14.22 2.05C14.75 1.88 15.32 2.14 15.54 2.63L15.56 2.68L18 9H12.2Z" /></svg>
+                }
+            </ActionBarIcon>
+        );
+    }, { noop: true }),
+
+    anonymise(upload: AnonUpload) {
+        if ((upload.anonymise ?? settings.store.anonymiseByDefault) === false) return upload.filename;
+
+        const file = upload.filename;
+        const tarMatch = tarExtMatcher.exec(file);
+        const extIdx = tarMatch?.index ?? file.lastIndexOf(".");
+        const ext = extIdx !== -1 ? file.slice(extIdx) : "";
+
+        switch (settings.store.method) {
+            case Methods.Random:
+                const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+                return Array.from(
+                    { length: settings.store.randomisedLength },
+                    () => chars[Math.floor(Math.random() * chars.length)]
+                ).join("") + ext;
+            case Methods.Consistent:
+                return settings.store.consistent + ext;
+            case Methods.Timestamp:
+                return Date.now() + ext;
+        }
+    },
+});

src/plugins/betterGifPicker/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "BetterGifPicker",
+    description: "Makes the gif picker open the favourite category by default",
+    authors: [Devs.Samwich],
+    patches: [
+        {
+            find: ".GIFPickerResultTypes.SEARCH",
+            replacement: [{
+                match: "this.state={resultType:null}",
+                replace: 'this.state={resultType:"Favorites"}'
+            }]
+        }
+    ]
+});

src/plugins/betterRoleContext/README.md

@@ -0,0 +1,6 @@
+# BetterRoleContext
+
+Adds options to copy role color  and edit role when right clicking roles in the user profile
+
+![](https://github.com/Vendicated/Vencord/assets/45497981/d1765e9e-7db2-4a3c-b110-139c59235326)
+

src/plugins/betterRoleContext/index.tsx

@@ -0,0 +1,79 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import { getCurrentGuild } from "@utils/discord";
+import definePlugin from "@utils/types";
+import { findByPropsLazy } from "@webpack";
+import { Clipboard, Menu, PermissionStore, TextAndImagesSettingsStores } from "@webpack/common";
+
+const GuildSettingsActions = findByPropsLazy("open", "selectRole", "updateGuild");
+
+function PencilIcon() {
+    return (
+        <svg
+            role="img"
+            width="18"
+            height="18"
+            fill="none"
+            viewBox="0 0 24 24"
+        >
+            <path fill="currentColor" d="m13.96 5.46 4.58 4.58a1 1 0 0 0 1.42 0l1.38-1.38a2 2 0 0 0 0-2.82l-3.18-3.18a2 2 0 0 0-2.82 0l-1.38 1.38a1 1 0 0 0 0 1.42ZM2.11 20.16l.73-4.22a3 3 0 0 1 .83-1.61l7.87-7.87a1 1 0 0 1 1.42 0l4.58 4.58a1 1 0 0 1 0 1.42l-7.87 7.87a3 3 0 0 1-1.6.83l-4.23.73a1.5 1.5 0 0 1-1.73-1.73Z" />
+        </svg>
+    );
+}
+
+function AppearanceIcon() {
+    return (
+        <svg width="18" height="18" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M 12,0 C 5.3733333,0 0,5.3733333 0,12 c 0,6.626667 5.3733333,12 12,12 1.106667,0 2,-0.893333 2,-2 0,-0.52 -0.2,-0.986667 -0.52,-1.346667 -0.306667,-0.346666 -0.506667,-0.813333 -0.506667,-1.32 0,-1.106666 0.893334,-2 2,-2 h 2.36 C 21.013333,17.333333 24,14.346667 24,10.666667 24,4.7733333 18.626667,0 12,0 Z M 4.6666667,12 c -1.1066667,0 -2,-0.893333 -2,-2 0,-1.1066667 0.8933333,-2 2,-2 1.1066666,0 2,0.8933333 2,2 0,1.106667 -0.8933334,2 -2,2 z M 8.666667,6.6666667 c -1.106667,0 -2.0000003,-0.8933334 -2.0000003,-2 0,-1.1066667 0.8933333,-2 2.0000003,-2 1.106666,0 2,0.8933333 2,2 0,1.1066666 -0.893334,2 -2,2 z m 6.666666,0 c -1.106666,0 -2,-0.8933334 -2,-2 0,-1.1066667 0.893334,-2 2,-2 1.106667,0 2,0.8933333 2,2 0,1.1066666 -0.893333,2 -2,2 z m 4,5.3333333 c -1.106666,0 -2,-0.893333 -2,-2 0,-1.1066667 0.893334,-2 2,-2 1.106667,0 2,0.8933333 2,2 0,1.106667 -0.893333,2 -2,2 z" />
+        </svg>
+    );
+}
+
+export default definePlugin({
+    name: "BetterRoleContext",
+    description: "Adds options to copy role color / edit role when right clicking roles in the user profile",
+    authors: [Devs.Ven],
+
+    start() {
+        // DeveloperMode needs to be enabled for the context menu to be shown
+        TextAndImagesSettingsStores.DeveloperMode.updateSetting(true);
+    },
+
+    contextMenus: {
+        "dev-context"(children, { id }: { id: string; }) {
+            const guild = getCurrentGuild();
+            const role = guild?.roles[id];
+            if (!role) return;
+
+            if (role.colorString) {
+                children.push(
+                    <Menu.MenuItem
+                        id="vc-copy-role-color"
+                        label="Copy Role Color"
+                        action={() => Clipboard.copy(role.colorString!)}
+                        icon={AppearanceIcon}
+                    />
+                );
+            }
+
+            if (PermissionStore.getGuildPermissionProps(guild).canManageRoles) {
+                children.push(
+                    <Menu.MenuItem
+                        id="vc-edit-role"
+                        label="Edit Role"
+                        action={async () => {
+                            await GuildSettingsActions.open(guild.id, "ROLES");
+                            GuildSettingsActions.selectRole(id);
+                        }}
+                        icon={PencilIcon}
+                    />
+                );
+            }
+        }
+    }
+});

src/plugins/biggerStreamPreview/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { ScreenshareIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { openImageModal } from "@utils/discord";
@@ -60,7 +60,7 @@ export const handleViewPreview = async ({ guildId, channelId, ownerId }: Applica
     openImageModal(previewUrl);
 };
 
-export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => () => {
+export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => {
     const stream = ApplicationStreamingStore.getAnyStreamForUser(userId);
     if (!stream) return;
 
@@ -89,12 +89,8 @@ export default definePlugin({
     name: "BiggerStreamPreview",
     description: "This plugin allows you to enlarge stream previews",
     authors: [Devs.phil],
-    start: () => {
-        addContextMenuPatch("user-context", userContextPatch);
-        addContextMenuPatch("stream-context", streamContextPatch);
-    },
-    stop: () => {
-        removeContextMenuPatch("user-context", userContextPatch);
-        removeContextMenuPatch("stream-context", streamContextPatch);
+    contextMenus: {
+        "user-context": userContextPatch,
+        "stream-context": streamContextPatch
     }
 });

src/plugins/clearURLs/defaultRules.ts

@@ -140,11 +140,11 @@ export const defaultRules = [
     "tt_content",
     "lr@yandex.*",
     "redircnt@yandex.*",
-    "feature@youtube.com",
-    "kw@youtube.com",
-    "si@youtube.com",
-    "pp@youtube.com",
-    "si@youtu.be",
+    "feature@*.youtube.com",
+    "kw@*.youtube.com",
+    "si@*.youtube.com",
+    "pp@*.youtube.com",
+    "si@*.youtu.be",
     "wt_zmc",
     "utm_source",
     "utm_content",
@@ -153,5 +153,6 @@ export const defaultRules = [
     "utm_term",
     "si@open.spotify.com",
     "igshid",
+    "igsh",
     "share_id@reddit.com",
 ];

src/plugins/clientTheme/clientTheme.css

@@ -19,6 +19,16 @@
     border: thin solid var(--background-modifier-accent) !important;
 }
 
-.client-theme-warning {
+.client-theme-warning * {
     color: var(--text-danger);
 }
+
+.client-theme-contrast-warning {
+    background-color: var(--background-primary);
+    padding: 0.5rem;
+    border-radius: .5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}

src/plugins/clientTheme/index.tsx

@@ -8,19 +8,19 @@ import "./clientTheme.css";
 
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import { getTheme, Theme } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
-import { findComponentByCodeLazy } from "@webpack";
-import { Button, Forms } from "@webpack/common";
+import { findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
+import { Button, Forms, useStateFromStores } from "@webpack/common";
 
 const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
 
 const colorPresets = [
     "#1E1514", "#172019", "#13171B", "#1C1C28", "#402D2D",
     "#3A483D", "#344242", "#313D4B", "#2D2F47", "#322B42",
-    "#3C2E42", "#422938"
+    "#3C2E42", "#422938", "#b6908f", "#bfa088", "#d3c77d",
+    "#86ac86", "#88aab3", "#8693b5", "#8a89ba", "#ad94bb",
 ];
 
 function onPickColor(color: number) {
@@ -30,9 +30,35 @@ function onPickColor(color: number) {
     updateColorVars(hexColor);
 }
 
+const { saveClientTheme } = findByPropsLazy("saveClientTheme");
+
+function setTheme(theme: string) {
+    saveClientTheme({ theme });
+}
+
+const ThemeStore = findStoreLazy("ThemeStore");
+const NitroThemeStore = findStoreLazy("ClientThemesBackgroundStore");
+
 function ThemeSettings() {
-    const lightnessWarning = hexToLightness(settings.store.color) > 45;
-    const lightModeWarning = getTheme() === Theme.Light;
+    const theme = useStateFromStores([ThemeStore], () => ThemeStore.theme);
+    const isLightTheme = theme === "light";
+    const oppositeTheme = isLightTheme ? "dark" : "light";
+
+    const nitroTheme = useStateFromStores([NitroThemeStore], () => NitroThemeStore.gradientPreset);
+    const nitroThemeEnabled = nitroTheme !== undefined;
+
+    const selectedLuminance = relativeLuminance(settings.store.color);
+
+    let contrastWarning = false, fixableContrast = true;
+    if ((isLightTheme && selectedLuminance < 0.26) || !isLightTheme && selectedLuminance > 0.12)
+        contrastWarning = true;
+    if (selectedLuminance < 0.26 && selectedLuminance > 0.12)
+        fixableContrast = false;
+    // light mode with values greater than 65 leads to background colors getting crushed together and poor text contrast for muted channels
+    if (isLightTheme && selectedLuminance > 0.65) {
+        contrastWarning = true;
+        fixableContrast = false;
+    }
 
     return (
         <div className="client-theme-settings">
@@ -48,15 +74,18 @@ function ThemeSettings() {
                     suggestedColors={colorPresets}
                 />
             </div>
-            {lightnessWarning || lightModeWarning
-                ? <div>
-                    <Forms.FormDivider className={classes(Margins.top8, Margins.bottom8)} />
-                    <Forms.FormText className="client-theme-warning">Your theme won't look good:</Forms.FormText>
-                    {lightnessWarning && <Forms.FormText className="client-theme-warning">Selected color is very light</Forms.FormText>}
-                    {lightModeWarning && <Forms.FormText className="client-theme-warning">Light mode isn't supported</Forms.FormText>}
+            {(contrastWarning || nitroThemeEnabled) && (<>
+                <Forms.FormDivider className={classes(Margins.top8, Margins.bottom8)} />
+                <div className={`client-theme-contrast-warning ${contrastWarning ? (isLightTheme ? "theme-dark" : "theme-light") : ""}`}>
+                    <div className="client-theme-warning">
+                        <Forms.FormText>Warning, your theme won't look good:</Forms.FormText>
+                        {contrastWarning && <Forms.FormText>Selected color won't contrast well with text</Forms.FormText>}
+                        {nitroThemeEnabled && <Forms.FormText>Nitro themes aren't supported</Forms.FormText>}
+                    </div>
+                    {(contrastWarning && fixableContrast) && <Button onClick={() => setTheme(oppositeTheme)} color={Button.Colors.RED}>Switch to {oppositeTheme} mode</Button>}
+                    {(nitroThemeEnabled) && <Button onClick={() => setTheme(theme)} color={Button.Colors.RED}>Disable Nitro Theme</Button>}
                 </div>
-                : null
-            }
+            </>)}
         </div>
     );
 }
@@ -87,9 +116,12 @@ export default definePlugin({
     settings,
 
     startAt: StartAt.DOMContentLoaded,
-    start() {
+    async start() {
         updateColorVars(settings.store.color);
-        generateColorOffsets();
+
+        const styles = await getStyles();
+        generateColorOffsets(styles);
+        generateLightModeFixes(styles);
     },
 
     stop() {
@@ -98,56 +130,86 @@ export default definePlugin({
     }
 });
 
-const variableRegex = /(--primary-[5-9]\d{2}-hsl):.*?(\S*)%;/g;
+const variableRegex = /(--primary-\d{3}-hsl):.*?(\S*)%;/g;
+const lightVariableRegex = /^--primary-[1-5]\d{2}-hsl/g;
+const darkVariableRegex = /^--primary-[5-9]\d{2}-hsl/g;
 
-async function generateColorOffsets() {
-
-    const styleLinkNodes = document.querySelectorAll('link[rel="stylesheet"]');
-    const variableLightness = {} as Record<string, number>;
-
-    // Search all stylesheets for color variables
-    for (const styleLinkNode of styleLinkNodes) {
-        const cssLink = styleLinkNode.getAttribute("href");
-        if (!cssLink) continue;
-
-        const res = await fetch(cssLink);
-        const cssString = await res.text();
-
-        // Get lightness values of --primary variables >=500
-        let variableMatch = variableRegex.exec(cssString);
-        while (variableMatch !== null) {
-            const [, variable, lightness] = variableMatch;
-            variableLightness[variable] = parseFloat(lightness);
-            variableMatch = variableRegex.exec(cssString);
-        }
-    }
-
-    // Generate offsets
-    const lightnessOffsets = Object.entries(variableLightness)
+// generates variables per theme by:
+// - matching regex (so we can limit what variables are included in light/dark theme, otherwise text becomes unreadable)
+// - offset from specified center (light/dark theme get different offsets because light uses 100 for background-primary, while dark uses 600)
+function genThemeSpecificOffsets(variableLightness: Record<string, number>, regex: RegExp, centerVariable: string): string {
+    return Object.entries(variableLightness).filter(([key]) => key.search(regex) > -1)
         .map(([key, lightness]) => {
-            const lightnessOffset = lightness - variableLightness["--primary-600-hsl"];
+            const lightnessOffset = lightness - variableLightness[centerVariable];
             const plusOrMinus = lightnessOffset >= 0 ? "+" : "-";
             return `${key}: var(--theme-h) var(--theme-s) calc(var(--theme-l) ${plusOrMinus} ${Math.abs(lightnessOffset).toFixed(2)}%);`;
         })
         .join("\n");
+}
 
-    const style = document.createElement("style");
-    style.setAttribute("id", "clientThemeOffsets");
-    style.textContent = `:root:root {
-        ${lightnessOffsets}
-    }`;
-    document.head.appendChild(style);
+
+function generateColorOffsets(styles) {
+    const variableLightness = {} as Record<string, number>;
+
+    // Get lightness values of --primary variables
+    let variableMatch = variableRegex.exec(styles);
+    while (variableMatch !== null) {
+        const [, variable, lightness] = variableMatch;
+        variableLightness[variable] = parseFloat(lightness);
+        variableMatch = variableRegex.exec(styles);
+    }
+
+    createStyleSheet("clientThemeOffsets", [
+        `.theme-light {\n ${genThemeSpecificOffsets(variableLightness, lightVariableRegex, "--primary-345-hsl")} \n}`,
+        `.theme-dark {\n ${genThemeSpecificOffsets(variableLightness, darkVariableRegex, "--primary-600-hsl")} \n}`,
+    ].join("\n\n"));
+}
+
+function generateLightModeFixes(styles) {
+    const groupLightUsesW500Regex = /\.theme-light[^{]*\{[^}]*var\(--white-500\)[^}]*}/gm;
+    // get light capturing groups that mention --white-500
+    const relevantStyles = [...styles.matchAll(groupLightUsesW500Regex)].flat();
+
+    const groupBackgroundRegex = /^([^{]*)\{background:var\(--white-500\)/m;
+    const groupBackgroundColorRegex = /^([^{]*)\{background-color:var\(--white-500\)/m;
+    // find all capturing groups that assign background or background-color directly to w500
+    const backgroundGroups = mapReject(relevantStyles, entry => captureOne(entry, groupBackgroundRegex)).join(",\n");
+    const backgroundColorGroups = mapReject(relevantStyles, entry => captureOne(entry, groupBackgroundColorRegex)).join(",\n");
+    // create css to reassign them to --primary-100
+    const reassignBackgrounds = `${backgroundGroups} {\n background: var(--primary-100) \n}`;
+    const reassignBackgroundColors = `${backgroundColorGroups} {\n background-color: var(--primary-100) \n}`;
+
+    const groupBgVarRegex = /\.theme-light\{([^}]*--[^:}]*(?:background|bg)[^:}]*:var\(--white-500\)[^}]*)\}/m;
+    const bgVarRegex = /^(--[^:]*(?:background|bg)[^:]*):var\(--white-500\)/m;
+    // get all global variables used for backgrounds
+    const lightVars = mapReject(relevantStyles, style => captureOne(style, groupBgVarRegex)) // get the insides of capture groups that have at least one background var with w500
+        .map(str => str.split(";")).flat(); // captureGroupInsides[] -> cssRule[]
+    const lightBgVars = mapReject(lightVars, variable => captureOne(variable, bgVarRegex)); // remove vars that aren't for backgrounds or w500
+    // create css to reassign every var
+    const reassignVariables = `.theme-light {\n ${lightBgVars.map(variable => `${variable}: var(--primary-100);`).join("\n")} \n}`;
+
+    createStyleSheet("clientThemeLightModeFixes", [
+        reassignBackgrounds,
+        reassignBackgroundColors,
+        reassignVariables,
+    ].join("\n\n"));
+}
+
+function captureOne(str, regex) {
+    const result = str.match(regex);
+    return (result === null) ? null : result[1];
+}
+
+function mapReject(arr, mapFunc) {
+    return arr.map(mapFunc).filter(Boolean);
 }
 
 function updateColorVars(color: string) {
     const { hue, saturation, lightness } = hexToHSL(color);
 
     let style = document.getElementById("clientThemeVars");
-    if (!style) {
-        style = document.createElement("style");
-        style.setAttribute("id", "clientThemeVars");
-        document.head.appendChild(style);
-    }
+    if (!style)
+        style = createStyleSheet("clientThemeVars");
 
     style.textContent = `:root {
         --theme-h: ${hue};
@@ -156,6 +218,28 @@ function updateColorVars(color: string) {
     }`;
 }
 
+function createStyleSheet(id, content = "") {
+    const style = document.createElement("style");
+    style.setAttribute("id", id);
+    style.textContent = content.split("\n").map(line => line.trim()).join("\n");
+    document.body.appendChild(style);
+    return style;
+}
+
+// returns all of discord's native styles in a single string
+async function getStyles(): Promise<string> {
+    let out = "";
+    const styleLinkNodes = document.querySelectorAll('link[rel="stylesheet"]');
+    for (const styleLinkNode of styleLinkNodes) {
+        const cssLink = styleLinkNode.getAttribute("href");
+        if (!cssLink) continue;
+
+        const res = await fetch(cssLink);
+        out += await res.text();
+    }
+    return out;
+}
+
 // https://css-tricks.com/converting-color-spaces-in-javascript/
 function hexToHSL(hexCode: string) {
     // Hex => RGB normalized to 0-1
@@ -198,17 +282,14 @@ function hexToHSL(hexCode: string) {
     return { hue, saturation, lightness };
 }
 
-// Minimized math just for lightness, lowers lag when changing colors
-function hexToLightness(hexCode: string) {
-    // Hex => RGB normalized to 0-1
-    const r = parseInt(hexCode.substring(0, 2), 16) / 255;
-    const g = parseInt(hexCode.substring(2, 4), 16) / 255;
-    const b = parseInt(hexCode.substring(4, 6), 16) / 255;
+// https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
+function relativeLuminance(hexCode: string) {
+    const normalize = (x: number) =>
+        x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
 
-    const cMax = Math.max(r, g, b);
-    const cMin = Math.min(r, g, b);
+    const r = normalize(parseInt(hexCode.substring(0, 2), 16) / 255);
+    const g = normalize(parseInt(hexCode.substring(2, 4), 16) / 255);
+    const b = normalize(parseInt(hexCode.substring(4, 6), 16) / 255);
 
-    const lightness = 100 * ((cMax + cMin) / 2);
-
-    return lightness;
+    return r * 0.2126 + g * 0.7152 + b * 0.0722;
 }

src/plugins/copyUserURLs/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { LinkIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
@@ -29,7 +29,7 @@ interface UserContextProps {
     user: User;
 }
 
-const UserContextMenuPatch: NavContextMenuPatchCallback = (children, { user }: UserContextProps) => () => {
+const UserContextMenuPatch: NavContextMenuPatchCallback = (children, { user }: UserContextProps) => {
     if (!user) return;
 
     children.push(
@@ -46,12 +46,7 @@ export default definePlugin({
     name: "CopyUserURLs",
     authors: [Devs.castdrian],
     description: "Adds a 'Copy User URL' option to the user context menu.",
-
-    start() {
-        addContextMenuPatch("user-context", UserContextMenuPatch);
-    },
-
-    stop() {
-        removeContextMenuPatch("user-context", UserContextMenuPatch);
-    },
+    contextMenus: {
+        "user-context": UserContextMenuPatch
+    }
 });

src/plugins/crashHandler/index.ts

@@ -25,7 +25,6 @@ import definePlugin, { OptionType } from "@utils/types";
 import { maybePromptToUpdate } from "@utils/updater";
 import { filters, findBulk, proxyLazyWebpack } from "@webpack";
 import { FluxDispatcher, NavigationRouter, SelectedChannelStore } from "@webpack/common";
-import type { ReactElement } from "react";
 
 const CrashHandlerLogger = new Logger("CrashHandler");
 const { ModalStack, DraftManager, DraftType, closeExpressionPicker } = proxyLazyWebpack(() => {
@@ -57,13 +56,13 @@ const settings = definePluginSettings({
     }
 });
 
-let crashCount: number = 0;
-let lastCrashTimestamp: number = 0;
-let shouldAttemptNextHandle = false;
+let hasCrashedOnce = false;
+let isRecovering = false;
+let shouldAttemptRecover = true;
 
 export default definePlugin({
     name: "CrashHandler",
-    description: "Utility plugin for handling and possibly recovering from Crashes without a restart",
+    description: "Utility plugin for handling and possibly recovering from crashes without a restart",
     authors: [Devs.Nuckyz],
     enabledByDefault: true,
 
@@ -73,61 +72,67 @@ export default definePlugin({
         {
             find: ".Messages.ERRORS_UNEXPECTED_CRASH",
             replacement: {
-                match: /(?=this\.setState\()/,
-                replace: "$self.handleCrash(this)||"
+                match: /this\.setState\((.+?)\)/,
+                replace: "$self.handleCrash(this,$1);"
             }
         }
     ],
 
-    handleCrash(_this: ReactElement & { forceUpdate: () => void; }) {
-        if (Date.now() - lastCrashTimestamp <= 1_000 && !shouldAttemptNextHandle) return true;
+    handleCrash(_this: any, errorState: any) {
+        _this.setState(errorState);
 
-        shouldAttemptNextHandle = false;
+        // Already recovering, prevent error which happens more than once too fast to trigger another recover
+        if (isRecovering) return;
+        isRecovering = true;
 
-        if (++crashCount > 5) {
+        // 1 ms timeout to avoid react breaking when re-rendering
+        setTimeout(() => {
             try {
-                showNotification({
-                    color: "#eed202",
-                    title: "Discord has crashed!",
-                    body: "Awn :( Discord has crashed more than five times, not attempting to recover.",
-                    noPersist: true,
-                });
+                // Prevent a crash loop with an error that could not be handled
+                if (!shouldAttemptRecover) {
+                    try {
+                        showNotification({
+                            color: "#eed202",
+                            title: "Discord has crashed!",
+                            body: "Awn :( Discord has crashed two times rapidly, not attempting to recover.",
+                            noPersist: true
+                        });
+                    } catch { }
+
+                    return;
+                }
+
+                shouldAttemptRecover = false;
+                // This is enough to avoid a crash loop
+                setTimeout(() => shouldAttemptRecover = true, 500);
             } catch { }
 
-            lastCrashTimestamp = Date.now();
-            return false;
-        }
+            try {
+                if (!hasCrashedOnce) {
+                    hasCrashedOnce = true;
+                    maybePromptToUpdate("Uh oh, Discord has just crashed... but good news, there is a Vencord update available that might fix this issue! Would you like to update now?", true);
+                }
+            } catch { }
 
-        setTimeout(() => crashCount--, 60_000);
-
-        try {
-            if (crashCount === 1) maybePromptToUpdate("Uh oh, Discord has just crashed... but good news, there is a Vencord update available that might fix this issue! Would you like to update now?", true);
-
-            if (settings.store.attemptToPreventCrashes) {
-                this.handlePreventCrash(_this);
-                return true;
+            try {
+                if (settings.store.attemptToPreventCrashes) {
+                    this.handlePreventCrash(_this);
+                }
+            } catch (err) {
+                CrashHandlerLogger.error("Failed to handle crash", err);
             }
-
-            return false;
-        } catch (err) {
-            CrashHandlerLogger.error("Failed to handle crash", err);
-            return false;
-        } finally {
-            lastCrashTimestamp = Date.now();
-        }
+        }, 1);
     },
 
-    handlePreventCrash(_this: ReactElement & { forceUpdate: () => void; }) {
-        if (Date.now() - lastCrashTimestamp >= 1_000) {
-            try {
-                showNotification({
-                    color: "#eed202",
-                    title: "Discord has crashed!",
-                    body: "Attempting to recover...",
-                    noPersist: true,
-                });
-            } catch { }
-        }
+    handlePreventCrash(_this: any) {
+        try {
+            showNotification({
+                color: "#eed202",
+                title: "Discord has crashed!",
+                body: "Attempting to recover...",
+                noPersist: true
+            });
+        } catch { }
 
         try {
             const channelId = SelectedChannelStore.getChannelId();
@@ -176,9 +181,12 @@ export default definePlugin({
             }
         }
 
+
+        // Set isRecovering to false before setting the state to allow us to handle the next crash error correcty, in case it happens
+        setImmediate(() => isRecovering = false);
+
         try {
-            shouldAttemptNextHandle = true;
-            _this.forceUpdate();
+            _this.setState({ error: null, info: null });
         } catch (err) {
             CrashHandlerLogger.debug("Failed to update crash handler component.", err);
         }

src/plugins/customRPC/index.tsx

@@ -175,7 +175,7 @@ const settings = definePluginSettings({
     },
     startTime: {
         type: OptionType.NUMBER,
-        description: "Start timestamp (only for custom timestamp mode)",
+        description: "Start timestamp in milisecond (only for custom timestamp mode)",
         onChange: onChange,
         disabled: isTimestampDisabled,
         isValid: (value: number) => {
@@ -185,7 +185,7 @@ const settings = definePluginSettings({
     },
     endTime: {
         type: OptionType.NUMBER,
-        description: "End timestamp (only for custom timestamp mode)",
+        description: "End timestamp in milisecond (only for custom timestamp mode)",
         onChange: onChange,
         disabled: isTimestampDisabled,
         isValid: (value: number) => {
@@ -313,12 +313,12 @@ async function createActivity(): Promise<Activity | undefined> {
     switch (settings.store.timestampMode) {
         case TimestampMode.NOW:
             activity.timestamps = {
-                start: Math.floor(Date.now() / 1000)
+                start: Date.now()
             };
             break;
         case TimestampMode.TIME:
             activity.timestamps = {
-                start: Math.floor(Date.now() / 1000) - (new Date().getHours() * 3600) - (new Date().getMinutes() * 60) - new Date().getSeconds()
+                start: Date.now() - (new Date().getHours() * 3600 + new Date().getMinutes() * 60 + new Date().getSeconds()) * 1000
             };
             break;
         case TimestampMode.CUSTOM:

src/plugins/decor/index.tsx

@@ -72,7 +72,7 @@ export default definePlugin({
             replacement: [
                 // Add Decor avatar decoration hook to avatar decoration hook
                 {
-                    match: /(?<=TryItOut:\i}\),)(?<=user:(\i).+?)/,
+                    match: /(?<=TryItOut:\i,guildId:\i}\),)(?<=user:(\i).+?)/,
                     replace: "vcDecorAvatarDecoration=$self.useUserDecorAvatarDecoration($1),"
                 },
                 // Use added hook

src/plugins/disableCallIdle/index.ts

@@ -16,18 +16,27 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { migratePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 
+migratePluginSettings("DisableCallIdle", "DisableDMCallIdle");
 export default definePlugin({
-    name: "DisableDMCallIdle",
-    description: "Disables automatically getting kicked from a DM voice call after 3 minutes.",
+    name: "DisableCallIdle",
+    description: "Disables automatically getting kicked from a DM voice call after 3 minutes and being moved to an AFK voice channel.",
     authors: [Devs.Nuckyz],
     patches: [
         {
             find: ".Messages.BOT_CALL_IDLE_DISCONNECT",
             replacement: {
-                match: /(?<=function \i\(\){)(?=.{1,120}\.Messages\.BOT_CALL_IDLE_DISCONNECT)/,
+                match: /,?(?=this\.idleTimeout=new \i\.Timeout)/,
+                replace: ";return;"
+            }
+        },
+        {
+            find: "handleIdleUpdate(){",
+            replacement: {
+                match: /(?<=_initialize\(\){)/,
                 replace: "return;"
             }
         }

src/plugins/emoteCloner/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
@@ -312,7 +312,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) return;
@@ -341,7 +341,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =
         findGroupChildrenByChildId("copy-link", children)?.push(menuItem);
 };
 
-const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => () => {
+const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => {
     const { id, name, type } = props?.target?.dataset ?? {};
     if (!id) return;
 
@@ -363,14 +363,8 @@ export default definePlugin({
     description: "Allows you to clone Emotes & Stickers to your own server (right click them)",
     tags: ["StickerCloner"],
     authors: [Devs.Ven, Devs.Nuckyz],
-
-    start() {
-        addContextMenuPatch("message", messageContextMenuPatch);
-        addContextMenuPatch("expression-picker", expressionPickerPatch);
-    },
-
-    stop() {
-        removeContextMenuPatch("message", messageContextMenuPatch);
-        removeContextMenuPatch("expression-picker", expressionPickerPatch);
+    contextMenus: {
+        "message": messageContextMenuPatch,
+        "expression-picker": expressionPickerPatch
     }
 });

src/plugins/fakeNitro/index.tsx

@@ -17,14 +17,14 @@
 */
 
 import { addPreEditListener, addPreSendListener, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
-import { definePluginSettings, Settings } from "@api/Settings";
+import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { ApngBlendOp, ApngDisposeOp, importApngJs } from "@utils/dependencies";
 import { getCurrentGuild } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy, findStoreLazy, proxyLazyWebpack } from "@webpack";
-import { ChannelStore, EmojiStore, FluxDispatcher, lodash, Parser, PermissionStore, UploadHandler, UserSettingsActionCreators, UserStore } from "@webpack/common";
+import { Alerts, ChannelStore, EmojiStore, FluxDispatcher, Forms, lodash, Parser, PermissionsBits, PermissionStore, UploadHandler, UserSettingsActionCreators, UserStore } from "@webpack/common";
 import type { Message } from "discord-types/general";
 import { applyPalette, GIFEncoder, quantize } from "gifenc";
 import type { ReactElement, ReactNode } from "react";
@@ -51,8 +51,6 @@ const PreloadedUserSettingsActionCreators = proxyLazyWebpack(() => UserSettingsA
 const AppearanceSettingsActionCreators = proxyLazyWebpack(() => searchProtoClassField("appearance", PreloadedUserSettingsActionCreators.ProtoClass));
 const ClientThemeSettingsActionsCreators = proxyLazyWebpack(() => searchProtoClassField("clientThemeSettings", AppearanceSettingsActionCreators));
 
-const USE_EXTERNAL_EMOJIS = 1n << 18n;
-const USE_EXTERNAL_STICKERS = 1n << 37n;
 
 const enum EmojiIntentions {
     REACTION = 0,
@@ -108,6 +106,7 @@ const enum FakeNoticeType {
 const fakeNitroEmojiRegex = /\/emojis\/(\d+?)\.(png|webp|gif)/;
 const fakeNitroStickerRegex = /\/stickers\/(\d+?)\./;
 const fakeNitroGifStickerRegex = /\/attachments\/\d+?\/\d+?\/(\d+?)\.gif/;
+const hyperLinkRegex = /\[.+?\]\((https?:\/\/.+?)\)/;
 
 const settings = definePluginSettings({
     enableEmojiBypass: {
@@ -156,8 +155,33 @@ const settings = definePluginSettings({
         type: OptionType.BOOLEAN,
         default: true,
         restartNeeded: true
+    },
+    useHyperLinks: {
+        description: "Whether to use hyperlinks when sending fake emojis and stickers",
+        type: OptionType.BOOLEAN,
+        default: true
+    },
+    hyperLinkText: {
+        description: "What text the hyperlink should use. {{NAME}} will be replaced with the emoji/sticker name.",
+        type: OptionType.STRING,
+        default: "{{NAME}}"
     }
-});
+}).withPrivateSettings<{
+    disableEmbedPermissionCheck: boolean;
+}>();
+
+function hasPermission(channelId: string, permission: bigint) {
+    const channel = ChannelStore.getChannel(channelId);
+
+    if (!channel || channel.isPrivate()) return true;
+
+    return PermissionStore.can(permission, channel);
+}
+
+const hasExternalEmojiPerms = (channelId: string) => hasPermission(channelId, PermissionsBits.USE_EXTERNAL_EMOJIS);
+const hasExternalStickerPerms = (channelId: string) => hasPermission(channelId, PermissionsBits.USE_EXTERNAL_STICKERS);
+const hasEmbedPerms = (channelId: string) => hasPermission(channelId, PermissionsBits.EMBED_LINKS);
+const hasAttachmentPerms = (channelId: string) => hasPermission(channelId, PermissionsBits.ATTACH_FILES);
 
 export default definePlugin({
     name: "FakeNitro",
@@ -345,8 +369,8 @@ export default definePlugin({
             predicate: () => settings.store.transformEmojis,
             replacement: {
                 // Add the fake nitro emoji notice
-                match: /(?<=isDiscoverable:\i,emojiComesFromCurrentGuild:\i,.+?}=(\i).+?;)(.+?return )(.{0,1000}\.Messages\.EMOJI_POPOUT_UNJOINED_DISCOVERABLE_GUILD_DESCRIPTION.+?)(?=},)/,
-                replace: (_, props, rest, reactNode) => `let{fakeNitroNode}=${props};${rest}$self.addFakeNotice(${FakeNoticeType.Emoji},${reactNode},!!fakeNitroNode?.fake)`
+                match: /(?<=emojiDescription:)(\i)(?<=\1=\i\((\i)\).+?)/,
+                replace: (_, reactNode, props) => `$self.addFakeNotice(${FakeNoticeType.Emoji},${reactNode},!!${props}?.fakeNitroNode?.fake)`
             }
         },
         // Allow using custom app icons
@@ -447,13 +471,23 @@ export default definePlugin({
 
     trimContent(content: Array<any>) {
         const firstContent = content[0];
-        if (typeof firstContent === "string") content[0] = firstContent.trimStart();
-        if (content[0] === "") content.shift();
+        if (typeof firstContent === "string") {
+            content[0] = firstContent.trimStart();
+            content[0] || content.shift();
+        } else if (typeof firstContent?.props?.children === "string") {
+            firstContent.props.children = firstContent.props.children.trimStart();
+            firstContent.props.children || content.shift();
+        }
 
         const lastIndex = content.length - 1;
         const lastContent = content[lastIndex];
-        if (typeof lastContent === "string") content[lastIndex] = lastContent.trimEnd();
-        if (content[lastIndex] === "") content.pop();
+        if (typeof lastContent === "string") {
+            content[lastIndex] = lastContent.trimEnd();
+            content[lastIndex] || content.pop();
+        } else if (typeof lastContent?.props?.children === "string") {
+            lastContent.props.children = lastContent.props.children.trimEnd();
+            lastContent.props.children || content.pop();
+        }
     },
 
     clearEmptyArrayItems(array: Array<any>) {
@@ -465,7 +499,7 @@ export default definePlugin({
     },
 
     patchFakeNitroEmojisOrRemoveStickersLinks(content: Array<any>, inline: boolean) {
-        // If content has more than one child or it's a single ReactElement like a header or list
+        // If content has more than one child or it's a single ReactElement like a header, list or span
         if ((content.length > 1 || typeof content[0]?.type === "string") && !settings.store.transformCompoundSentence) return content;
 
         let nextIndex = content.length;
@@ -551,13 +585,15 @@ export default definePlugin({
             for (const [index, child] of children.entries()) children[index] = modifyChild(child);
 
             children = this.clearEmptyArrayItems(children);
-            this.trimContent(children);
 
             return children;
         };
 
         try {
-            return modifyChildren(lodash.cloneDeep(content));
+            const newContent = modifyChildren(lodash.cloneDeep(content));
+            this.trimContent(newContent);
+
+            return newContent;
         } catch (err) {
             new Logger("FakeNitro").error(err);
             return content;
@@ -574,7 +610,7 @@ export default definePlugin({
         itemsToMaybePush.push(...message.attachments.filter(attachment => attachment.content_type === "image/gif").map(attachment => attachment.url));
 
         for (const item of itemsToMaybePush) {
-            if (!settings.store.transformCompoundSentence && !item.startsWith("http")) continue;
+            if (!settings.store.transformCompoundSentence && !item.startsWith("http") && !hyperLinkRegex.test(item)) continue;
 
             const imgMatch = item.match(fakeNitroStickerRegex);
             if (imgMatch) {
@@ -619,8 +655,7 @@ export default definePlugin({
             case "image": {
                 if (
                     !settings.store.transformCompoundSentence
-                    && !contentItems.includes(embed.url!)
-                    && !contentItems.includes(embed.image?.proxyURL!)
+                    && !contentItems.some(item => item === embed.url! || item.match(hyperLinkRegex)?.[1] === embed.url!)
                 ) return false;
 
                 if (settings.store.transformEmojis) {
@@ -681,24 +716,8 @@ export default definePlugin({
         }
     },
 
-    hasPermissionToUseExternalEmojis(channelId: string): boolean {
-        const channel = ChannelStore.getChannel(channelId);
-
-        if (!channel || channel.isDM() || channel.isGroupDM() || channel.isMultiUserDM()) return true;
-
-        return PermissionStore.can(USE_EXTERNAL_EMOJIS, channel);
-    },
-
-    hasPermissionToUseExternalStickers(channelId: string) {
-        const channel = ChannelStore.getChannel(channelId);
-
-        if (!channel || channel.isDM() || channel.isGroupDM() || channel.isMultiUserDM()) return true;
-
-        return PermissionStore.can(USE_EXTERNAL_STICKERS, channel);
-    },
-
     getStickerLink(stickerId: string) {
-        return `https://media.discordapp.net/stickers/${stickerId}.png?size=${Settings.plugins.FakeNitro.stickerSize}`;
+        return `https://media.discordapp.net/stickers/${stickerId}.png?size=${settings.store.stickerSize}`;
     },
 
     async sendAnimatedSticker(stickerLink: string, stickerId: string, channelId: string) {
@@ -707,7 +726,7 @@ export default definePlugin({
         const { frames, width, height } = await parseURL(stickerLink);
 
         const gif = GIFEncoder();
-        const resolution = Settings.plugins.FakeNitro.stickerSize;
+        const resolution = settings.store.stickerSize;
 
         const canvas = document.createElement("canvas");
         canvas.width = resolution;
@@ -768,9 +787,38 @@ export default definePlugin({
             return (!origStr[offset] || /\s/.test(origStr[offset])) ? "" : " ";
         }
 
-        this.preSend = addPreSendListener((channelId, messageObj, extra) => {
+        function cannotEmbedNotice() {
+            return new Promise<boolean>(resolve => {
+                Alerts.show({
+                    title: "Hold on!",
+                    body: <div>
+                        <Forms.FormText>
+                            You are trying to send/edit a message that contains a FakeNitro emoji or sticker,
+                            however you do not have permissions to embed links in the current channel.
+                            Are you sure you want to send this message? Your FakeNitro items will appear as a link only.
+                        </Forms.FormText>
+                        <Forms.FormText type={Forms.FormText.Types.DESCRIPTION}>
+                            You can disable this notice in the plugin settings.
+                        </Forms.FormText>
+                    </div>,
+                    confirmText: "Send Anyway",
+                    cancelText: "Cancel",
+                    secondaryConfirmText: "Do not show again",
+                    onConfirm: () => resolve(true),
+                    onCloseCallback: () => setImmediate(() => resolve(false)),
+                    onConfirmSecondary() {
+                        settings.store.disableEmbedPermissionCheck = true;
+                        resolve(true);
+                    }
+                });
+            });
+        }
+
+        this.preSend = addPreSendListener(async (channelId, messageObj, extra) => {
             const { guildId } = this;
 
+            let hasBypass = false;
+
             stickerBypass: {
                 if (!s.enableStickerBypass)
                     break stickerBypass;
@@ -783,7 +831,7 @@ export default definePlugin({
                 if ("pack_id" in sticker)
                     break stickerBypass;
 
-                const canUseStickers = this.canUseStickers && this.hasPermissionToUseExternalStickers(channelId);
+                const canUseStickers = this.canUseStickers && hasExternalStickerPerms(channelId);
                 if (sticker.available !== false && (canUseStickers || sticker.guild_id === guildId))
                     break stickerBypass;
 
@@ -795,44 +843,78 @@ export default definePlugin({
                 if (sticker.format_type === StickerType.GIF && link.includes(".png")) {
                     link = link.replace(".png", ".gif");
                 }
+
                 if (sticker.format_type === StickerType.APNG) {
-                    this.sendAnimatedSticker(link, sticker.id, channelId);
+                    if (!hasAttachmentPerms(channelId)) {
+                        Alerts.show({
+                            title: "Hold on!",
+                            body: <div>
+                                <Forms.FormText>
+                                    You cannot send this message because it contains an animated FakeNitro sticker,
+                                    and you do not have permissions to attach files in the current channel. Please remove the sticker to proceed.
+                                </Forms.FormText>
+                            </div>
+                        });
+                    } else {
+                        this.sendAnimatedSticker(link, sticker.id, channelId);
+                    }
+
                     return { cancel: true };
                 } else {
+                    hasBypass = true;
+
+                    const url = new URL(link);
+                    url.searchParams.set("name", sticker.name);
+
+                    const linkText = s.hyperLinkText.replaceAll("{{NAME}}", sticker.name);
+
+                    messageObj.content += `${getWordBoundary(messageObj.content, messageObj.content.length - 1)}${s.useHyperLinks ? `[${linkText}](${url})` : url}`;
                     extra.stickers!.length = 0;
-                    messageObj.content += ` ${link}&name=${encodeURIComponent(sticker.name)}`;
                 }
             }
 
             if (s.enableEmojiBypass) {
-                const canUseEmotes = this.canUseEmotes && this.hasPermissionToUseExternalEmojis(channelId);
+                const canUseEmotes = this.canUseEmotes && hasExternalEmojiPerms(channelId);
 
                 for (const emoji of messageObj.validNonShortcutEmojis) {
                     if (!emoji.require_colons) continue;
                     if (emoji.available !== false && canUseEmotes) continue;
                     if (emoji.guildId === guildId && !emoji.animated) continue;
 
+                    hasBypass = true;
+
                     const emojiString = `<${emoji.animated ? "a" : ""}:${emoji.originalName || emoji.name}:${emoji.id}>`;
-                    const url = emoji.url.replace(/\?size=\d+/, "?" + new URLSearchParams({
-                        size: Settings.plugins.FakeNitro.emojiSize,
-                        name: encodeURIComponent(emoji.name)
-                    }));
+
+                    const url = new URL(emoji.url);
+                    url.searchParams.set("size", s.emojiSize.toString());
+                    url.searchParams.set("name", emoji.name);
+
+                    const linkText = s.hyperLinkText.replaceAll("{{NAME}}", emoji.name);
+
                     messageObj.content = messageObj.content.replace(emojiString, (match, offset, origStr) => {
-                        return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
+                        return `${getWordBoundary(origStr, offset - 1)}${s.useHyperLinks ? `[${linkText}](${url})` : url}${getWordBoundary(origStr, offset + match.length)}`;
                     });
                 }
             }
 
+            if (hasBypass && !s.disableEmbedPermissionCheck && !hasEmbedPerms(channelId)) {
+                if (!await cannotEmbedNotice()) {
+                    return { cancel: true };
+                }
+            }
+
             return { cancel: false };
         });
 
-        this.preEdit = addPreEditListener((channelId, __, messageObj) => {
+        this.preEdit = addPreEditListener(async (channelId, __, messageObj) => {
             if (!s.enableEmojiBypass) return;
 
-            const canUseEmotes = this.canUseEmotes && this.hasPermissionToUseExternalEmojis(channelId);
-
             const { guildId } = this;
 
+            let hasBypass = false;
+
+            const canUseEmotes = this.canUseEmotes && hasExternalEmojiPerms(channelId);
+
             messageObj.content = messageObj.content.replace(/(?<!\\)<a?:(?:\w+):(\d+)>/ig, (emojiStr, emojiId, offset, origStr) => {
                 const emoji = EmojiStore.getCustomEmojiById(emojiId);
                 if (emoji == null) return emojiStr;
@@ -840,12 +922,24 @@ export default definePlugin({
                 if (emoji.available !== false && canUseEmotes) return emojiStr;
                 if (emoji.guildId === guildId && !emoji.animated) return emojiStr;
 
-                const url = emoji.url.replace(/\?size=\d+/, "?" + new URLSearchParams({
-                    size: Settings.plugins.FakeNitro.emojiSize,
-                    name: encodeURIComponent(emoji.name)
-                }));
-                return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + emojiStr.length)}`;
+                hasBypass = true;
+
+                const url = new URL(emoji.url);
+                url.searchParams.set("size", s.emojiSize.toString());
+                url.searchParams.set("name", emoji.name);
+
+                const linkText = s.hyperLinkText.replaceAll("{{NAME}}", emoji.name);
+
+                return `${getWordBoundary(origStr, offset - 1)}${s.useHyperLinks ? `[${linkText}](${url})` : url}${getWordBoundary(origStr, offset + emojiStr.length)}`;
             });
+
+            if (hasBypass && !s.disableEmbedPermissionCheck && !hasEmbedPerms(channelId)) {
+                if (!await cannotEmbedNotice()) {
+                    return { cancel: true };
+                }
+            }
+
+            return { cancel: false };
         });
     },
 

src/plugins/fixCodeblockGap/index.ts

@@ -0,0 +1,35 @@
+/*
+ * 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";
+
+export default definePlugin({
+    name: "FixCodeblockGap",
+    description: "Removes the gap between codeblocks and text below it",
+    authors: [Devs.Grzesiek11],
+    patches: [
+        {
+            find: ".default.Messages.DELETED_ROLE_PLACEHOLDER",
+            replacement: {
+                match: String.raw`/^${"```"}(?:([a-z0-9_+\-.#]+?)\n)?\n*([^\n][^]*?)\n*${"```"}`,
+                replace: "$&\\n?",
+            },
+        },
+    ],
+});

src/plugins/fixYoutubeEmbeds.desktop/README.md

@@ -0,0 +1,5 @@
+# FixYoutubeEmbeds
+
+Bypasses youtube videos being blocked from display on Discord (for example by UMG)
+
+![](https://github.com/Vendicated/Vencord/assets/45497981/7a5fdcaa-217c-4c63-acae-f0d6af2f79be)

src/plugins/fixYoutubeEmbeds.desktop/index.ts

@@ -0,0 +1,14 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "FixYoutubeEmbeds",
+    description: "Bypasses youtube videos being blocked from display on Discord (for example by UMG)",
+    authors: [Devs.coolelectronics]
+});

src/plugins/fixYoutubeEmbeds.desktop/native.ts

@@ -0,0 +1,27 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { app } from "electron";
+import { getSettings } from "main/ipcMain";
+
+app.on("browser-window-created", (_, win) => {
+    win.webContents.on("frame-created", (_, { frame }) => {
+        frame.once("dom-ready", () => {
+            if (frame.url.startsWith("https://www.youtube.com/")) {
+                const settings = getSettings().plugins?.FixYoutubeEmbeds;
+                if (!settings?.enabled) return;
+
+                frame.executeJavaScript(`
+                new MutationObserver(() => {
+                    if(
+                        document.querySelector('div.ytp-error-content-wrap-subreason a[href*="www.youtube.com/watch?v="]')
+                    ) location.reload()
+                }).observe(document.body, { childList: true, subtree:true });
+                `);
+            }
+        });
+    });
+});

src/plugins/ignoreActivities/index.tsx

@@ -5,12 +5,14 @@
  */
 
 import * as DataStore from "@api/DataStore";
-import { definePluginSettings } from "@api/Settings";
+import { definePluginSettings, Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import { Margins } from "@utils/margins";
+import definePlugin, { OptionType } from "@utils/types";
 import { findStoreLazy } from "@webpack";
-import { StatusSettingsStores, Tooltip } from "webpack/common";
+import { Button, Forms, showToast, StatusSettingsStores, TextInput, Toasts, Tooltip, useEffect, useState } from "webpack/common";
 
 const enum ActivitiesTypes {
     Game,
@@ -69,7 +71,113 @@ function handleActivityToggle(e: React.MouseEvent<HTMLButtonElement, MouseEvent>
     StatusSettingsStores.ShowCurrentGame.updateSetting(old => old);
 }
 
-const settings = definePluginSettings({}).withPrivateSettings<{
+function ImportCustomRPCComponent() {
+    return (
+        <Flex flexDirection="column">
+            <Forms.FormText type={Forms.FormText.Types.DESCRIPTION}>Import the application id of the CustomRPC plugin to the allowed list</Forms.FormText>
+            <div>
+                <Button
+                    onClick={() => {
+                        const id = Settings.plugins.CustomRPC?.appID as string | undefined;
+                        if (!id) {
+                            return showToast("CustomRPC application ID is not set.", Toasts.Type.FAILURE);
+                        }
+
+                        const isAlreadyAdded = allowedIdsPushID?.(id);
+                        if (isAlreadyAdded) {
+                            showToast("CustomRPC application ID is already added.", Toasts.Type.FAILURE);
+                        }
+                    }}
+                >
+                    Import CustomRPC ID
+                </Button>
+            </div>
+        </Flex>
+    );
+}
+
+let allowedIdsPushID: ((id: string) => boolean) | null = null;
+
+function AllowedIdsComponent(props: { setValue: (value: string) => void; }) {
+    const [allowedIds, setAllowedIds] = useState<string>(settings.store.allowedIds ?? "");
+
+    allowedIdsPushID = (id: string) => {
+        const currentIds = new Set(allowedIds.split(",").map(id => id.trim()).filter(Boolean));
+
+        const isAlreadyAdded = currentIds.has(id) || (currentIds.add(id), false);
+
+        const ids = Array.from(currentIds).join(", ");
+        setAllowedIds(ids);
+        props.setValue(ids);
+
+        return isAlreadyAdded;
+    };
+
+    useEffect(() => () => {
+        allowedIdsPushID = null;
+    }, []);
+
+    function handleChange(newValue: string) {
+        setAllowedIds(newValue);
+        props.setValue(newValue);
+    }
+
+    return (
+        <Forms.FormSection>
+            <Forms.FormTitle tag="h3">Allowed List</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom8} type={Forms.FormText.Types.DESCRIPTION}>Comma separated list of activity IDs to allow (Useful for allowing RPC activities and CustomRPC)</Forms.FormText>
+            <TextInput
+                type="text"
+                value={allowedIds}
+                onChange={handleChange}
+                placeholder="235834946571337729, 343383572805058560"
+            />
+        </Forms.FormSection>
+    );
+}
+
+const settings = definePluginSettings({
+    importCustomRPC: {
+        type: OptionType.COMPONENT,
+        description: "",
+        component: () => <ImportCustomRPCComponent />
+    },
+    allowedIds: {
+        type: OptionType.COMPONENT,
+        description: "",
+        default: "",
+        onChange(newValue: string) {
+            const ids = new Set(newValue.split(",").map(id => id.trim()).filter(Boolean));
+            settings.store.allowedIds = Array.from(ids).join(", ");
+        },
+        component: props => <AllowedIdsComponent setValue={props.setValue} />
+    },
+    ignorePlaying: {
+        type: OptionType.BOOLEAN,
+        description: "Ignore all playing activities (These are usually game and RPC activities)",
+        default: false
+    },
+    ignoreStreaming: {
+        type: OptionType.BOOLEAN,
+        description: "Ignore all streaming activities",
+        default: false
+    },
+    ignoreListening: {
+        type: OptionType.BOOLEAN,
+        description: "Ignore all listening activities (These are usually spotify activities)",
+        default: false
+    },
+    ignoreWatching: {
+        type: OptionType.BOOLEAN,
+        description: "Ignore all watching activities",
+        default: false
+    },
+    ignoreCompeting: {
+        type: OptionType.BOOLEAN,
+        description: "Ignore all competing activities (These are normally special game activities)",
+        default: false
+    }
+}).withPrivateSettings<{
     ignoredActivities: IgnoredActivity[];
 }>();
 
@@ -77,10 +185,26 @@ function getIgnoredActivities() {
     return settings.store.ignoredActivities ??= [];
 }
 
+function isActivityTypeIgnored(type: number, id?: string) {
+    if (id && settings.store.allowedIds.includes(id)) {
+        return false;
+    }
+
+    switch (type) {
+        case 0: return settings.store.ignorePlaying;
+        case 1: return settings.store.ignoreStreaming;
+        case 2: return settings.store.ignoreListening;
+        case 3: return settings.store.ignoreWatching;
+        case 5: return settings.store.ignoreCompeting;
+    }
+
+    return false;
+}
+
 export default definePlugin({
     name: "IgnoreActivities",
     authors: [Devs.Nuckyz],
-    description: "Ignore activities from showing up on your status ONLY. You can configure which ones are ignored from the Registered Games and Activities tabs.",
+    description: "Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings below.",
 
     settings,
 
@@ -141,13 +265,17 @@ export default definePlugin({
     },
 
     isActivityNotIgnored(props: { type: number; application_id?: string; name?: string; }) {
-        if (props.type === 0 || props.type === 3) {
-            if (props.application_id != null) return !getIgnoredActivities().some(activity => activity.id === props.application_id);
-            else {
-                const exePath = RunningGameStore.getRunningGames().find(game => game.name === props.name)?.exePath;
-                if (exePath) return !getIgnoredActivities().some(activity => activity.id === exePath);
+        if (isActivityTypeIgnored(props.type, props.application_id)) return false;
+
+        if (props.application_id != null) {
+            return !getIgnoredActivities().some(activity => activity.id === props.application_id) || settings.store.allowedIds.includes(props.application_id);
+        } else {
+            const exePath = RunningGameStore.getRunningGames().find(game => game.name === props.name)?.exePath;
+            if (exePath) {
+                return !getIgnoredActivities().some(activity => activity.id === exePath);
             }
         }
+
         return true;
     },
 

src/plugins/imageZoom/components/Magnifier.tsx

@@ -123,14 +123,13 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
         waitFor(() => instance.state.readyState === "READY", () => {
             const elem = document.getElementById(ELEMENT_ID) as HTMLDivElement;
             element.current = elem;
-            elem.firstElementChild!.setAttribute("draggable", "false");
+            elem.querySelector("img,video")?.setAttribute("draggable", "false");
             if (instance.props.animated) {
                 originalVideoElementRef.current = elem!.querySelector("video")!;
                 originalVideoElementRef.current.addEventListener("timeupdate", syncVideos);
-                setReady(true);
-            } else {
-                setReady(true);
             }
+
+            setReady(true);
         });
         document.addEventListener("keydown", onKeyDown);
         document.addEventListener("keyup", onKeyUp);
@@ -155,7 +154,9 @@ export const Magnifier: React.FC<MagnifierProps> = ({ instance, size: initialSiz
 
     if (!ready) return null;
 
-    const box = element.current!.getBoundingClientRect();
+    const box = element.current?.getBoundingClientRect();
+
+    if (!box) return null;
 
     return (
         <div

src/plugins/imageZoom/index.tsx

@@ -16,14 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { NavContextMenuPatchCallback } 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 { ContextMenuApi, Menu, React, ReactDOM } from "@webpack/common";
+import { Menu, React, ReactDOM } from "@webpack/common";
 import type { Root } from "react-dom/client";
 
 import { Magnifier, MagnifierProps } from "./components/Magnifier";
@@ -80,25 +80,25 @@ export const settings = definePluginSettings({
 });
 
 
-const imageContextMenuPatch: NavContextMenuPatchCallback = children => () => {
+const imageContextMenuPatch: NavContextMenuPatchCallback = children => {
+    const { square, nearestNeighbour } = settings.use(["square", "nearestNeighbour"]);
+
     children.push(
         <Menu.MenuGroup id="image-zoom">
             <Menu.MenuCheckboxItem
                 id="vc-square"
                 label="Square Lens"
-                checked={settings.store.square}
+                checked={square}
                 action={() => {
-                    settings.store.square = !settings.store.square;
-                    ContextMenuApi.closeContextMenu();
+                    settings.store.square = !square;
                 }}
             />
             <Menu.MenuCheckboxItem
                 id="vc-nearest-neighbour"
                 label="Nearest Neighbour"
-                checked={settings.store.nearestNeighbour}
+                checked={nearestNeighbour}
                 action={() => {
-                    settings.store.nearestNeighbour = !settings.store.nearestNeighbour;
-                    ContextMenuApi.closeContextMenu();
+                    settings.store.nearestNeighbour = !nearestNeighbour;
                 }}
             />
             <Menu.MenuControlItem
@@ -171,7 +171,7 @@ export default definePlugin({
             find: "handleImageLoad=",
             replacement: [
                 {
-                    match: /showThumbhashPlaceholder:\i,/,
+                    match: /placeholderVersion:\i,/,
                     replace: "...$self.makeProps(this),$&"
                 },
 
@@ -196,6 +196,9 @@ export default definePlugin({
     ],
 
     settings,
+    contextMenus: {
+        "image-context": imageContextMenuPatch
+    },
 
     // to stop from rendering twice /shrug
     currentMagnifierElement: null as React.FunctionComponentElement<MagnifierProps & JSX.IntrinsicAttributes> | null,
@@ -245,7 +248,6 @@ export default definePlugin({
 
     start() {
         enableStyle(styles);
-        addContextMenuPatch("image-context", imageContextMenuPatch);
         this.element = document.createElement("div");
         this.element.classList.add("MagnifierContainer");
         document.body.appendChild(this.element);
@@ -256,6 +258,5 @@ export default definePlugin({
         // 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

@@ -9,6 +9,9 @@
     box-shadow: inset 0 0 10px 2px grey;
     filter: drop-shadow(0 0 2px grey);
     pointer-events: none;
+
+    /* negate the border offsetting the lens */
+    margin: -2px;
 }
 
 .vc-imgzoom-square {

src/plugins/index.ts

@@ -17,6 +17,7 @@
 */
 
 import { registerCommand, unregisterCommand } from "@api/Commands";
+import { addContextMenuPatch, removeContextMenuPatch } from "@api/ContextMenu";
 import { Settings } from "@api/Settings";
 import { Logger } from "@utils/Logger";
 import { Patch, Plugin, StartAt } from "@utils/types";
@@ -119,7 +120,7 @@ export function startDependenciesRecursive(p: Plugin) {
 }
 
 export const startPlugin = traceFunction("startPlugin", function startPlugin(p: Plugin) {
-    const { name, commands, flux } = p;
+    const { name, commands, flux, contextMenus } = p;
 
     if (p.start) {
         logger.info("Starting plugin", name);
@@ -154,11 +155,17 @@ export const startPlugin = traceFunction("startPlugin", function startPlugin(p:
         }
     }
 
+    if (contextMenus) {
+        for (const navId in contextMenus) {
+            addContextMenuPatch(navId, contextMenus[navId]);
+        }
+    }
+
     return true;
 }, p => `startPlugin ${p.name}`);
 
 export const stopPlugin = traceFunction("stopPlugin", function stopPlugin(p: Plugin) {
-    const { name, commands, flux } = p;
+    const { name, commands, flux, contextMenus } = p;
     if (p.stop) {
         logger.info("Stopping plugin", name);
         if (!p.started) {
@@ -192,5 +199,11 @@ export const stopPlugin = traceFunction("stopPlugin", function stopPlugin(p: Plu
         }
     }
 
+    if (contextMenus) {
+        for (const navId in contextMenus) {
+            removeContextMenuPatch(navId, contextMenus[navId]);
+        }
+    }
+
     return true;
 }, p => `stopPlugin ${p.name}`);

src/plugins/invisibleChat.desktop/index.tsx

@@ -16,13 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { addChatBarButton, ChatBarButton } from "@api/ChatButtons";
 import { addButton, removeButton } from "@api/MessagePopover";
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { getStegCloak } from "@utils/dependencies";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ButtonLooks, ButtonWrapperClasses, ChannelStore, FluxDispatcher, RestAPI, Tooltip } from "@webpack/common";
+import { ChannelStore, FluxDispatcher, RestAPI, Tooltip } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 import { buildDecModal } from "./components/DecryptionModal";
@@ -64,54 +65,31 @@ function Indicator() {
 
 }
 
-function ChatBarIcon(chatBoxProps: {
-    type: {
-        analyticsName: string;
-    };
-}) {
-    if (chatBoxProps.type.analyticsName !== "normal") return null;
+const ChatBarIcon: ChatBarButton = ({ isMainChat }) => {
+    if (!isMainChat) return null;
 
     return (
-        <Tooltip text="Encrypt Message">
-            {({ onMouseEnter, onMouseLeave }) => (
-                // size="" = Button.Sizes.NONE
-                /*
-                    many themes set "> button" to display: none, as the gift button is
-                    the only directly descending button (all the other elements are divs.)
-                    Thus, wrap in a div here to avoid getting hidden by that.
-                    flex is for some reason necessary as otherwise the button goes flying off
-                */
-                <div style={{ display: "flex" }}>
-                    <Button
-                        aria-haspopup="dialog"
-                        aria-label="Encrypt Message"
-                        size=""
-                        look={ButtonLooks.BLANK}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        innerClassName={ButtonWrapperClasses.button}
-                        onClick={() => buildEncModal()}
-                        style={{ padding: "0 2px", scale: "0.9" }}
-                    >
-                        <div className={ButtonWrapperClasses.buttonWrapper}>
-                            <svg
-                                aria-hidden
-                                role="img"
-                                width="32"
-                                height="32"
-                                viewBox={"0 0 64 64"}
-                                style={{ scale: "1.1" }}
-                            >
-                                <path fill="currentColor" d="M 32 9 C 24.832 9 19 14.832 19 22 L 19 27.347656 C 16.670659 28.171862 15 30.388126 15 33 L 15 49 C 15 52.314 17.686 55 21 55 L 43 55 C 46.314 55 49 52.314 49 49 L 49 33 C 49 30.388126 47.329341 28.171862 45 27.347656 L 45 22 C 45 14.832 39.168 9 32 9 z M 32 13 C 36.963 13 41 17.038 41 22 L 41 27 L 23 27 L 23 22 C 23 17.038 27.037 13 32 13 z" />
-                            </svg>
-                        </div>
-                    </Button>
-                </div>
-            )
-            }
-        </Tooltip >
+        <ChatBarButton
+            tooltip="Encrypt Message"
+            onClick={() => buildEncModal()}
+
+            buttonProps={{
+                "aria-haspopup": "dialog",
+            }}
+        >
+            <svg
+                aria-hidden
+                role="img"
+                width="24"
+                height="24"
+                viewBox={"0 0 64 64"}
+                style={{ scale: "1.39", translate: "0 -1px" }}
+            >
+                <path fill="currentColor" d="M 32 9 C 24.832 9 19 14.832 19 22 L 19 27.347656 C 16.670659 28.171862 15 30.388126 15 33 L 15 49 C 15 52.314 17.686 55 21 55 L 43 55 C 46.314 55 49 52.314 49 49 L 49 33 C 49 30.388126 47.329341 28.171862 45 27.347656 L 45 22 C 45 14.832 39.168 9 32 9 z M 32 13 C 36.963 13 41 17.038 41 22 L 41 27 L 23 27 L 23 22 C 23 17.038 27.037 13 32 13 z" />
+            </svg>
+        </ChatBarButton>
     );
-}
+};
 
 const settings = definePluginSettings({
     savedPasswords: {
@@ -125,7 +103,7 @@ export default definePlugin({
     name: "InvisibleChat",
     description: "Encrypt your Messages in a non-suspicious way!",
     authors: [Devs.SammCheese],
-    dependencies: ["MessagePopoverAPI"],
+    dependencies: ["MessagePopoverAPI", "ChatInputButtonAPI"],
     patches: [
         {
             // Indicator
@@ -135,13 +113,6 @@ export default definePlugin({
                 replace: "try {$1 && $self.INV_REGEX.test($1.message.content) ? $1.content.push($self.indicator()) : null } catch {};$&"
             }
         },
-        {
-            find: "ChannelTextAreaButtons",
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
     ],
 
     EMBED_API_URL: "https://embed.sammcheese.net",
@@ -151,10 +122,7 @@ export default definePlugin({
     ),
     settings,
     async start() {
-        const { default: StegCloak } = await getStegCloak();
-        steggo = new StegCloak(true, false);
-
-        addButton("invDecrypt", message => {
+        addButton("InvisibleChat", message => {
             return this.INV_REGEX.test(message?.content)
                 ? {
                     label: "Decrypt Message",
@@ -170,10 +138,16 @@ export default definePlugin({
                 }
                 : null;
         });
+
+        addChatBarButton("InvisibleChat", ChatBarIcon);
+
+        const { default: StegCloak } = await getStegCloak();
+        steggo = new StegCloak(true, false);
     },
 
     stop() {
-        removeButton("invDecrypt");
+        removeButton("InvisibleChat");
+        removeButton("InvisibleChat");
     },
 
     // Gets the Embed of a Link
@@ -216,7 +190,6 @@ export default definePlugin({
         });
     },
 
-    chatBarIcon: ErrorBoundary.wrap(ChatBarIcon, { noop: true }),
     popOverIcon: () => <PopOverIcon />,
     indicator: ErrorBoundary.wrap(Indicator, { noop: true })
 });

src/plugins/lastfm/index.tsx

@@ -170,6 +170,11 @@ const settings = definePluginSettings({
             }
         ],
     },
+    showLastFmLogo: {
+        description: "show the Last.fm logo by the album cover",
+        type: OptionType.BOOLEAN,
+        default: true,
+    }
 });
 
 export default definePlugin({
@@ -276,8 +281,10 @@ export default definePlugin({
             {
                 large_image: await getApplicationAsset(largeImage),
                 large_text: trackData.album || undefined,
-                small_image: await getApplicationAsset("lastfm-small"),
-                small_text: "Last.fm",
+                ...(settings.store.showLastFmLogo && {
+                    small_image: await getApplicationAsset("lastfm-small"),
+                    small_text: "Last.fm"
+                }),
             } : {
                 large_image: await getApplicationAsset("lastfm-large"),
                 large_text: trackData.album || undefined,

src/plugins/memberCount/MemberCount.tsx

@@ -0,0 +1,66 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { getCurrentChannel } from "@utils/discord";
+import { SelectedChannelStore, Tooltip, useEffect, useStateFromStores } from "@webpack/common";
+
+import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat } from ".";
+import { OnlineMemberCountStore } from "./OnlineMemberCountStore";
+
+export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; tooltipGuildId?: string; }) {
+    const currentChannel = useStateFromStores([SelectedChannelStore], () => getCurrentChannel());
+
+    const guildId = isTooltip ? tooltipGuildId! : currentChannel.guild_id;
+
+    const totalCount = useStateFromStores(
+        [GuildMemberCountStore],
+        () => GuildMemberCountStore.getMemberCount(guildId)
+    );
+
+    let onlineCount = useStateFromStores(
+        [OnlineMemberCountStore],
+        () => OnlineMemberCountStore.getCount(guildId)
+    );
+
+    const { groups } = useStateFromStores(
+        [ChannelMemberStore],
+        () => ChannelMemberStore.getProps(guildId, currentChannel.id)
+    );
+
+    if (!isTooltip && (groups.length >= 1 || groups[0].id !== "unknown")) {
+        onlineCount = groups.reduce((total, curr) => total + (curr.id === "offline" ? 0 : curr.count), 0);
+    }
+
+    useEffect(() => {
+        OnlineMemberCountStore.ensureCount(guildId);
+    }, [guildId]);
+
+    if (totalCount == null)
+        return null;
+
+    const formattedOnlineCount = onlineCount != null ? numberFormat(onlineCount) : "?";
+
+    return (
+        <div className={cl("widget", { tooltip: isTooltip, "member-list": !isTooltip })}>
+            <Tooltip text={`${formattedOnlineCount} online in this channel`} position="bottom">
+                {props => (
+                    <div {...props}>
+                        <span className={cl("online-dot")} />
+                        <span className={cl("online")}>{formattedOnlineCount}</span>
+                    </div>
+                )}
+            </Tooltip>
+            <Tooltip text={`${numberFormat(totalCount)} total server members`} position="bottom">
+                {props => (
+                    <div {...props}>
+                        <span className={cl("total-dot")} />
+                        <span className={cl("total")}>{numberFormat(totalCount)}</span>
+                    </div>
+                )}
+            </Tooltip>
+        </div>
+    );
+}

src/plugins/memberCount/OnlineMemberCountStore.ts

@@ -0,0 +1,52 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { proxyLazy } from "@utils/lazy";
+import { sleep } from "@utils/misc";
+import { Queue } from "@utils/Queue";
+import { Flux, FluxDispatcher, GuildChannelStore, PrivateChannelsStore } from "@webpack/common";
+
+export const OnlineMemberCountStore = proxyLazy(() => {
+    const preloadQueue = new Queue();
+
+    const onlineMemberMap = new Map<string, number>();
+
+    class OnlineMemberCountStore extends Flux.Store {
+        getCount(guildId: string) {
+            return onlineMemberMap.get(guildId);
+        }
+
+        async _ensureCount(guildId: string) {
+            if (onlineMemberMap.has(guildId)) return;
+
+            await PrivateChannelsStore.preload(guildId, GuildChannelStore.getDefaultChannel(guildId).id);
+        }
+
+        ensureCount(guildId: string) {
+            if (onlineMemberMap.has(guildId)) return;
+
+            preloadQueue.push(() =>
+                this._ensureCount(guildId)
+                    .then(
+                        () => sleep(200),
+                        () => sleep(200)
+                    )
+            );
+        }
+    }
+
+    return new OnlineMemberCountStore(FluxDispatcher, {
+        GUILD_MEMBER_LIST_UPDATE({ guildId, groups }: { guildId: string, groups: { count: number; id: string; }[]; }) {
+            onlineMemberMap.set(
+                guildId,
+                groups.reduce((total, curr) => total + (curr.id === "offline" ? 0 : curr.count), 0)
+            );
+        },
+        ONLINE_GUILD_MEMBER_COUNT_UPDATE({ guildId, count }) {
+            onlineMemberMap.set(guildId, count);
+        }
+    });
+});

src/plugins/memberCount/index.tsx

@@ -16,101 +16,66 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./style.css";
+
+import { definePluginSettings } from "@api/Settings";
+import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
-import { getCurrentChannel } from "@utils/discord";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 import { findStoreLazy } from "@webpack";
-import { SelectedChannelStore, Tooltip, useStateFromStores } from "@webpack/common";
 import { FluxStore } from "@webpack/types";
 
-const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore") as FluxStore & { getMemberCount(guildId: string): number | null; };
-const ChannelMemberStore = findStoreLazy("ChannelMemberStore") as FluxStore & {
+import { MemberCount } from "./MemberCount";
+
+export const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore") as FluxStore & { getMemberCount(guildId: string): number | null; };
+export const ChannelMemberStore = findStoreLazy("ChannelMemberStore") as FluxStore & {
     getProps(guildId: string, channelId: string): { groups: { count: number; id: string; }[]; };
 };
 
+const settings = definePluginSettings({
+    toolTip: {
+        type: OptionType.BOOLEAN,
+        description: "If the member count should be displayed on the server tooltip",
+        default: true,
+        restartNeeded: true
+    },
+    memberList: {
+        type: OptionType.BOOLEAN,
+        description: "If the member count should be displayed on the member list",
+        default: true,
+        restartNeeded: true
+    }
+});
+
 const sharedIntlNumberFormat = new Intl.NumberFormat();
-const numberFormat = (value: number) => sharedIntlNumberFormat.format(value);
-
-function MemberCount() {
-    const { id: channelId, guild_id: guildId } = useStateFromStores([SelectedChannelStore], () => getCurrentChannel());
-    const { groups } = useStateFromStores(
-        [ChannelMemberStore],
-        () => ChannelMemberStore.getProps(guildId, channelId)
-    );
-    const total = useStateFromStores(
-        [GuildMemberCountStore],
-        () => GuildMemberCountStore.getMemberCount(guildId)
-    );
-
-    if (total == null)
-        return null;
-
-    const online =
-        (groups.length === 1 && groups[0].id === "unknown")
-            ? 0
-            : groups.reduce((count, curr) => count + (curr.id === "offline" ? 0 : curr.count), 0);
-
-    return (
-        <Flex id="vc-membercount" style={{
-            marginTop: "1em",
-            paddingInline: "1em",
-            justifyContent: "center",
-            alignContent: "center",
-            gap: 0
-        }}>
-            <Tooltip text={`${numberFormat(online)} online in this channel`} position="bottom">
-                {props => (
-                    <div {...props}>
-                        <span
-                            style={{
-                                backgroundColor: "var(--green-360)",
-                                width: "12px",
-                                height: "12px",
-                                borderRadius: "50%",
-                                display: "inline-block",
-                                marginRight: "0.5em"
-                            }}
-                        />
-                        <span style={{ color: "var(--green-360)" }}>{numberFormat(online)}</span>
-                    </div>
-                )}
-            </Tooltip>
-            <Tooltip text={`${numberFormat(total)} total server members`} position="bottom">
-                {props => (
-                    <div {...props}>
-                        <span
-                            style={{
-                                width: "6px",
-                                height: "6px",
-                                borderRadius: "50%",
-                                border: "3px solid var(--primary-400)",
-                                display: "inline-block",
-                                marginRight: "0.5em",
-                                marginLeft: "1em"
-                            }}
-                        />
-                        <span style={{ color: "var(--primary-400)" }}>{numberFormat(total)}</span>
-                    </div>
-                )}
-            </Tooltip>
-        </Flex>
-    );
-}
+export const numberFormat = (value: number) => sharedIntlNumberFormat.format(value);
+export const cl = classNameFactory("vc-membercount-");
 
 export default definePlugin({
     name: "MemberCount",
-    description: "Shows the amount of online & total members in the server member list",
+    description: "Shows the amount of online & total members in the server member list and tooltip",
     authors: [Devs.Ven, Devs.Commandtechno],
+    settings,
 
-    patches: [{
-        find: "{isSidebarVisible:",
-        replacement: {
-            match: /(?<=let\{className:(\i),.+?children):\[(\i\.useMemo[^}]+"aria-multiselectable")/,
-            replace: ":[$1?.startsWith('members')?$self.render():null,$2"
+    patches: [
+        {
+            find: "{isSidebarVisible:",
+            replacement: {
+                match: /(?<=let\{className:(\i),.+?children):\[(\i\.useMemo[^}]+"aria-multiselectable")/,
+                replace: ":[$1?.startsWith('members')?$self.render():null,$2"
+            },
+            predicate: () => settings.store.memberList
+        },
+        {
+            find: ".invitesDisabledTooltip",
+            replacement: {
+                match: /(?<=\.VIEW_AS_ROLES_MENTIONS_WARNING.{0,100})]/,
+                replace: ",$self.renderTooltip(arguments[0].guild)]"
+            },
+            predicate: () => settings.store.toolTip
         }
-    }],
-
-    render: ErrorBoundary.wrap(MemberCount, { noop: true })
+    ],
+    render: ErrorBoundary.wrap(MemberCount, { noop: true }),
+    renderTooltip: ErrorBoundary.wrap(guild => <MemberCount isTooltip tooltipGuildId={guild.id} />, { noop: true })
 });

src/plugins/memberCount/style.css

@@ -0,0 +1,44 @@
+.vc-membercount-widget {
+    display: flex;
+    align-content: center;
+
+    --color-online: var(--green-360);
+    --color-total: var(--primary-400);
+}
+
+.vc-membercount-tooltip {
+    margin-top: 0.25em;
+    margin-left: 2px;
+}
+
+.vc-membercount-member-list {
+    justify-content: center;
+    margin-top: 1em;
+    padding-inline: 1em;
+}
+
+.vc-membercount-online {
+    color: var(--color-online);
+}
+
+.vc-membercount-total {
+    color: var(--color-total);
+}
+
+.vc-membercount-online-dot {
+    background-color: var(--color-online);
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 0.5em;
+}
+
+.vc-membercount-total-dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    border: 3px solid var(--color-total);
+    margin: 0 0.5em 0 1em;
+}

src/plugins/messageLinkEmbeds/index.tsx

@@ -29,15 +29,17 @@ import {
     ChannelStore,
     FluxDispatcher,
     GuildStore,
+    IconUtils,
     MessageStore,
     Parser,
+    PermissionsBits,
     PermissionStore,
     RestAPI,
     Text,
     TextAndImagesSettingsStores,
     UserStore
 } from "@webpack/common";
-import { Channel, Guild, Message } from "discord-types/general";
+import { Channel, Message } from "discord-types/general";
 
 const messageCache = new Map<string, {
     message?: Message;
@@ -49,8 +51,9 @@ const AutoModEmbed = findComponentByCodeLazy(".withFooter]:", "childrenMessageCo
 const ChannelMessage = findComponentByCodeLazy("renderSimpleAccessories)");
 
 const SearchResultClasses = findByPropsLazy("message", "searchResult");
+const EmbedClasses = findByPropsLazy("embedAuthorIcon", "embedAuthor", "embedAuthor");
 
-const messageLinkRegex = /(?<!<)https?:\/\/(?:\w+\.)?discord(?:app)?\.com\/channels\/(\d{17,20}|@me)\/(\d{17,20})\/(\d{17,20})/g;
+const messageLinkRegex = /(?<!<)https?:\/\/(?:\w+\.)?discord(?:app)?\.com\/channels\/(?:\d{17,20}|@me)\/(\d{17,20})\/(\d{17,20})/g;
 const tenorRegex = /^https:\/\/(?:www\.)?tenor\.com\//;
 
 interface Attachment {
@@ -63,7 +66,6 @@ interface Attachment {
 interface MessageEmbedProps {
     message: Message;
     channel: Channel;
-    guildID: string;
 }
 
 const messageFetchQueue = new Queue();
@@ -226,19 +228,19 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
 
     let match = null as RegExpMatchArray | null;
     while ((match = messageLinkRegex.exec(message.content!)) !== null) {
-        const [_, guildID, channelID, messageID] = match;
+        const [_, channelID, messageID] = match;
         if (embeddedBy.includes(messageID)) {
             continue;
         }
 
         const linkedChannel = ChannelStore.getChannel(channelID);
-        if (!linkedChannel || (guildID !== "@me" && !PermissionStore.can(1024n /* view channel */, linkedChannel))) {
+        if (!linkedChannel || (!linkedChannel.isPrivate() && !PermissionStore.can(PermissionsBits.VIEW_CHANNEL, linkedChannel))) {
             continue;
         }
 
         const { listMode, idList } = settings.store;
 
-        const isListed = [guildID, channelID, message.author.id].some(id => id && idList.includes(id));
+        const isListed = [linkedChannel.guild_id, channelID, message.author.id].some(id => id && idList.includes(id));
 
         if (listMode === "blacklist" && isListed) continue;
         if (listMode === "whitelist" && !isListed) continue;
@@ -265,8 +267,7 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
 
         const messageProps: MessageEmbedProps = {
             message: withEmbeddedBy(linkedMessage, [...embeddedBy, message.id]),
-            channel: linkedChannel,
-            guildID
+            channel: linkedChannel
         };
 
         const type = settings.store.automodEmbeds;
@@ -280,59 +281,64 @@ function MessageEmbedAccessory({ message }: { message: Message; }) {
     return accessories.length ? <>{accessories}</> : null;
 }
 
-function ChannelMessageEmbedAccessory({ message, channel, guildID }: MessageEmbedProps): JSX.Element | null {
-    const isDM = guildID === "@me";
+function getChannelLabelAndIconUrl(channel: Channel) {
+    if (channel.isDM()) return ["Direct Message", IconUtils.getUserAvatarURL(UserStore.getUser(channel.recipients[0]))];
+    if (channel.isGroupDM()) return ["Group DM", IconUtils.getChannelIconURL(channel)];
+    return ["Server", IconUtils.getGuildIconURL(GuildStore.getGuild(channel.guild_id))];
+}
 
-    const guild = !isDM && GuildStore.getGuild(channel.guild_id);
+function ChannelMessageEmbedAccessory({ message, channel }: MessageEmbedProps): JSX.Element | null {
     const dmReceiver = UserStore.getUser(ChannelStore.getChannel(channel.id).recipients?.[0]);
 
+    const [channelLabel, iconUrl] = getChannelLabelAndIconUrl(channel);
 
-    return <Embed
-        embed={{
-            rawDescription: "",
-            color: "var(--background-secondary)",
-            author: {
-                name: <Text variant="text-xs/medium" tag="span">
-                    <span>{isDM ? "Direct Message - " : (guild as Guild).name + " - "}</span>
-                    {isDM
-                        ? Parser.parse(`<@${dmReceiver.id}>`)
-                        : Parser.parse(`<#${channel.id}>`)
-                    }
-                </Text>,
-                iconProxyURL: guild
-                    ? `https://${window.GLOBAL_ENV.CDN_HOST}/icons/${guild.id}/${guild.icon}.png`
-                    : `https://${window.GLOBAL_ENV.CDN_HOST}/avatars/${dmReceiver.id}/${dmReceiver.avatar}`
-            }
-        }}
-        renderDescription={() => (
-            <div key={message.id} className={classes(SearchResultClasses.message, settings.store.messageBackgroundColor && SearchResultClasses.searchResult)}>
-                <ChannelMessage
-                    id={`message-link-embeds-${message.id}`}
-                    message={message}
-                    channel={channel}
-                    subscribeToComponentDispatch={false}
-                />
-            </div>
-        )}
-    />;
+    return (
+        <Embed
+            embed={{
+                rawDescription: "",
+                color: "var(--background-secondary)",
+                author: {
+                    name: <Text variant="text-xs/medium" tag="span">
+                        <span>{channelLabel} - </span>
+                        {Parser.parse(channel.isDM() ? `<@${dmReceiver.id}>` : `<#${channel.id}>`)}
+                    </Text>,
+                    iconProxyURL: iconUrl
+                }
+            }}
+            renderDescription={() => (
+                <div key={message.id} className={classes(SearchResultClasses.message, settings.store.messageBackgroundColor && SearchResultClasses.searchResult)}>
+                    <ChannelMessage
+                        id={`message-link-embeds-${message.id}`}
+                        message={message}
+                        channel={channel}
+                        subscribeToComponentDispatch={false}
+                    />
+                </div>
+            )}
+        />
+    );
 }
 
 function AutomodEmbedAccessory(props: MessageEmbedProps): JSX.Element | null {
-    const { message, channel, guildID } = props;
+    const { message, channel } = props;
     const compact = TextAndImagesSettingsStores.MessageDisplayCompact.useSetting();
-    const isDM = guildID === "@me";
     const images = getImages(message);
     const { parse } = Parser;
 
+    const [channelLabel, iconUrl] = getChannelLabelAndIconUrl(channel);
+
     return <AutoModEmbed
         channel={channel}
         childrenAccessories={
-            <Text color="text-muted" variant="text-xs/medium" tag="span">
-                {isDM
-                    ? parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`)
-                    : parse(`<#${channel.id}>`)
-                }
-                <span>{isDM ? " - Direct Message" : " - " + GuildStore.getGuild(channel.guild_id)?.name}</span>
+            <Text color="text-muted" variant="text-xs/medium" tag="span" className={`${EmbedClasses.embedAuthor} ${EmbedClasses.embedMargin}`}>
+                {iconUrl && <img src={iconUrl} className={EmbedClasses.embedAuthorIcon} alt="" />}
+                <span>
+                    <span>{channelLabel} - </span>
+                    {channel.isDM()
+                        ? Parser.parse(`<@${ChannelStore.getChannel(channel.id).recipients[0]}>`)
+                        : Parser.parse(`<#${channel.id}>`)
+                    }
+                </span>
             </Text>
         }
         compact={compact}

src/plugins/messageLogger/index.tsx

@@ -18,7 +18,7 @@
 
 import "./messageLogger.css";
 
-import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { Settings } from "@api/Settings";
 import { disableStyle, enableStyle } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
@@ -26,7 +26,7 @@ import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { ChannelStore, FluxDispatcher, i18n, Menu, moment, Parser, Timestamp, UserStore } from "@webpack/common";
+import { ChannelStore, FluxDispatcher, i18n, Menu, Parser, Timestamp, UserStore } from "@webpack/common";
 
 import overlayStyle from "./deleteStyleOverlay.css?managed";
 import textStyle from "./deleteStyleText.css?managed";
@@ -45,7 +45,7 @@ function addDeleteStyle() {
 
 const REMOVE_HISTORY_ID = "ml-remove-history";
 const TOGGLE_DELETE_STYLE_ID = "ml-toggle-style";
-const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => () => {
+const patchMessageContextMenu: NavContextMenuPatchCallback = (children, props) => {
     const { message } = props;
     const { deleted, editHistory, id, channel_id } = message;
 
@@ -94,13 +94,12 @@ export default definePlugin({
     description: "Temporarily logs deleted and edited messages.",
     authors: [Devs.rushii, Devs.Ven, Devs.AutumnVN],
 
-    start() {
-        addDeleteStyle();
-        addContextMenuPatch("message", patchMessageContextMenu);
+    contextMenus: {
+        "message": patchMessageContextMenu
     },
 
-    stop() {
-        removeContextMenuPatch("message", patchMessageContextMenu);
+    start() {
+        addDeleteStyle();
     },
 
     renderEdit(edit: { timestamp: any, content: string; }) {
@@ -122,7 +121,7 @@ export default definePlugin({
 
     makeEdit(newMessage: any, oldMessage: any): any {
         return {
-            timestamp: moment?.call(newMessage.edited_timestamp),
+            timestamp: new Date(newMessage.edited_timestamp),
             content: oldMessage.content
         };
     },

src/plugins/moreUserTags/index.tsx

@@ -198,7 +198,7 @@ export default definePlugin({
             replacement: [
                 // make the tag show the right text
                 {
-                    match: /(switch\((\i)\){.+?)case (\i(?:\.\i)?)\.BOT:default:(\i)=(\i\.\i\.Messages)\.BOT_TAG_BOT/,
+                    match: /(switch\((\i)\){.+?)case (\i(?:\.\i)?)\.BOT:default:(\i)=.{0,40}(\i\.\i\.Messages)\.BOT_TAG_BOT/,
                     replace: (_, origSwitch, variant, tags, displayedText, strings) =>
                         `${origSwitch}default:{${displayedText} = $self.getTagText(${tags}[${variant}], ${strings})}`
                 },

src/plugins/mutualGroupDMs/index.tsx

@@ -20,11 +20,10 @@ import { Devs } from "@utils/constants";
 import { isNonNullish } from "@utils/guards";
 import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { Avatar, ChannelStore, Clickable, RelationshipStore, ScrollerThin, UserStore } from "@webpack/common";
+import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, UserStore } from "@webpack/common";
 import { Channel, User } from "discord-types/general";
 
 const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
-const AvatarUtils = findByPropsLazy("getChannelIconURL");
 const UserUtils = findByPropsLazy("getGlobalName");
 
 const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
@@ -48,8 +47,8 @@ export default definePlugin({
         {
             find: ".Messages.USER_PROFILE_MODAL", // Note: the module is lazy-loaded
             replacement: {
-                match: /(?<=\.MUTUAL_GUILDS\}\),)(?=(\i\.bot).{0,20}(\(0,\i\.jsx\)\(.{0,100}id:))/,
-                replace: '($1||arguments[0].isCurrentUser)?null:$2"MUTUAL_GDMS",children:"Mutual Groups"}),'
+                match: /(?<=\.tabBarItem.{0,50}MUTUAL_GUILDS.+?}\),)(?=.+?(\(0,\i\.jsxs?\)\(.{0,100}id:))/,
+                replace: '(arguments[0].user.bot||arguments[0].isCurrentUser)?null:$1"MUTUAL_GDMS",children:"Mutual Groups"}),'
             }
         },
         {
@@ -71,7 +70,7 @@ export default definePlugin({
                 }}
             >
                 <Avatar
-                    src={AvatarUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
+                    src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
                     size="SIZE_40"
                     className={ProfileListClasses.listAvatar}
                 >

src/plugins/newGuildSettings/index.tsx

@@ -16,16 +16,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { definePluginSettings } from "@api/Settings";
+import { definePluginSettings,migratePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 
 const { updateGuildNotificationSettings } = findByPropsLazy("updateGuildNotificationSettings");
+const { toggleShowAllChannels } = findByPropsLazy("toggleShowAllChannels");
+const { isOptInEnabledForGuild } = findByPropsLazy("isOptInEnabledForGuild");
 
 const settings = definePluginSettings({
     guild: {
-        description: "Mute Guild",
+        description: "Mute Guild automatically",
         type: OptionType.BOOLEAN,
         default: true
     },
@@ -38,13 +40,20 @@ const settings = definePluginSettings({
         description: "Suppress All Role @mentions",
         type: OptionType.BOOLEAN,
         default: true
+    },
+    showAllChannels: {
+        description: "Show all channels automatically",
+        type: OptionType.BOOLEAN,
+        default: true
     }
 });
 
+migratePluginSettings("NewGuildSettings", "MuteNewGuild");
 export default definePlugin({
-    name: "MuteNewGuild",
-    description: "Mutes newly joined guilds",
-    authors: [Devs.Glitch, Devs.Nuckyz, Devs.carince],
+    name: "NewGuildSettings",
+    description: "Automatically mute new servers and change various other settings upon joining",
+    tags: ["MuteNewGuild", "mute", "server"],
+    authors: [Devs.Glitch, Devs.Nuckyz, Devs.carince, Devs.Mopi],
     patches: [
         {
             find: ",acceptInvite(",
@@ -70,7 +79,9 @@ export default definePlugin({
                 muted: settings.store.guild,
                 suppress_everyone: settings.store.everyone,
                 suppress_roles: settings.store.role
-            }
-        );
+            });
+        if (settings.store.showAllChannels && isOptInEnabledForGuild(guildId)) {
+            toggleShowAllChannels(guildId);
+        }
     }
 });

src/plugins/notificationVolume/index.ts

@@ -27,8 +27,8 @@ export default definePlugin({
         {
             find: "_ensureAudio(){",
             replacement: {
-                match: /onloadeddata=\(\)=>\{.\.volume=/,
-                replace: "$&$self.settings.store.notificationVolume/100*"
+                match: /(?=Math\.min\(\i\.\i\.getOutputVolume\(\)\/100)/,
+                replace: "$self.settings.store.notificationVolume/100*"
             },
         },
     ],

src/plugins/permissionsViewer/components/UserPermissions.tsx

@@ -104,6 +104,7 @@ function UserPermissionsComponent({ guild, guildMember, showBorder }: { guild: G
                     guildMember.nick || UserStore.getUser(guildMember.userId).username
                 )
             }
+            onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state}
             defaultState={settings.store.defaultPermissionsDropdownState}
             buttons={[
                 (<Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>

src/plugins/permissionsViewer/index.tsx

@@ -18,7 +18,7 @@
 
 import "./styles.css";
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
@@ -125,8 +125,10 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
 }
 
 function makeContextMenuPatch(childId: string | string[], type?: MenuItemParentType): NavContextMenuPatchCallback {
-    return (children, props) => () => {
-        if (!props || (type === MenuItemParentType.User && !props.user) || (type === MenuItemParentType.Guild && !props.guild)) return children;
+    return (children, props) => {
+        if (!props) return;
+        if ((type === MenuItemParentType.User && !props.user) || (type === MenuItemParentType.Guild && !props.guild) || (type === MenuItemParentType.Channel && (!props.channel || !props.guild)))
+            return;
 
         const group = findGroupChildrenByChildId(childId, children);
 
@@ -171,19 +173,10 @@ export default definePlugin({
 
     UserPermissions: (guild: Guild, guildMember: GuildMember | undefined, showBoder: boolean) => !!guildMember && <UserPermissions guild={guild} guildMember={guildMember} showBorder={showBoder} />,
 
-    userContextMenuPatch: makeContextMenuPatch("roles", MenuItemParentType.User),
-    channelContextMenuPatch: makeContextMenuPatch(["mute-channel", "unmute-channel"], MenuItemParentType.Channel),
-    guildContextMenuPatch: makeContextMenuPatch("privacy", MenuItemParentType.Guild),
-
-    start() {
-        addContextMenuPatch("user-context", this.userContextMenuPatch);
-        addContextMenuPatch("channel-context", this.channelContextMenuPatch);
-        addContextMenuPatch(["guild-context", "guild-header-popout"], this.guildContextMenuPatch);
-    },
-
-    stop() {
-        removeContextMenuPatch("user-context", this.userContextMenuPatch);
-        removeContextMenuPatch("channel-context", this.channelContextMenuPatch);
-        removeContextMenuPatch(["guild-context", "guild-header-popout"], this.guildContextMenuPatch);
-    },
+    contextMenus: {
+        "user-context": makeContextMenuPatch("roles", MenuItemParentType.User),
+        "channel-context": makeContextMenuPatch(["mute-channel", "unmute-channel"], MenuItemParentType.Channel),
+        "guild-context": makeContextMenuPatch("privacy", MenuItemParentType.Guild),
+        "guild-header-popout": makeContextMenuPatch("privacy", MenuItemParentType.Guild)
+    }
 });

src/plugins/pictureInPicture/index.tsx

@@ -24,7 +24,7 @@ const settings = definePluginSettings({
 export default definePlugin({
     name: "PictureInPicture",
     description: "Adds picture in picture to videos (next to the Download button)",
-    authors: [Devs.Lumap],
+    authors: [Devs.Nobody],
     settings,
     patches: [
         {

src/plugins/pinDms/contextMenus.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { Menu } from "@webpack/common";
 
 import { isPinned, movePin, PinOrder, settings, snapshotArray, togglePin } from "./settings";
@@ -50,13 +50,13 @@ function PinMenuItem(channelId: string) {
     );
 }
 
-const GroupDMContext: NavContextMenuPatchCallback = (children, props) => () => {
+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 UserContext: NavContextMenuPatchCallback = (children, props) => {
     const container = findGroupChildrenByChildId("close-dm", children);
     if (container) {
         const idx = container.findIndex(c => c?.props?.id === "close-dm");
@@ -64,12 +64,7 @@ const UserContext: NavContextMenuPatchCallback = (children, props) => () => {
     }
 };
 
-export function addContextMenus() {
-    addContextMenuPatch("gdm-context", GroupDMContext);
-    addContextMenuPatch("user-context", UserContext);
-}
-
-export function removeContextMenus() {
-    removeContextMenuPatch("gdm-context", GroupDMContext);
-    removeContextMenuPatch("user-context", UserContext);
-}
+export const contextMenus = {
+    "gdm-context": GroupDMContext,
+    "user-context": UserContext
+};

src/plugins/pinDms/index.tsx

@@ -20,7 +20,7 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Channel } from "discord-types/general";
 
-import { addContextMenus, removeContextMenus } from "./contextMenus";
+import { contextMenus } from "./contextMenus";
 import { getPinAt, isPinned, settings, snapshotArray, sortedSnapshot, usePinnedDms } from "./settings";
 
 export default definePlugin({
@@ -29,9 +29,7 @@ export default definePlugin({
     authors: [Devs.Ven, Devs.Strencher],
 
     settings,
-
-    start: addContextMenus,
-    stop: removeContextMenus,
+    contextMenus,
 
     usePinCount(channelIds: string[]) {
         const pinnedDms = usePinnedDms();

src/plugins/previewMessage/index.tsx

@@ -16,22 +16,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { addChatBarButton, ChatBarButton, removeChatBarButton } from "@api/ChatButtons";
 import { generateId, sendBotMessage } from "@api/Commands";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { StartAt } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { Button, ButtonLooks, ButtonWrapperClasses, DraftStore, DraftType, SelectedChannelStore, Tooltip, UserStore, useStateFromStores } from "@webpack/common";
+import { DraftStore, DraftType, SelectedChannelStore, UserStore, useStateFromStores } from "@webpack/common";
 import { MessageAttachment } from "discord-types/general";
 
-interface Props {
-    type: {
-        analyticsName: string;
-        isEmpty: boolean;
-        attachments: boolean;
-    };
-}
-
 const UploadStore = findByPropsLazy("getUploads");
 
 const getDraft = (channelId: string) => DraftStore.getDraft(channelId, DraftType.ChannelMessage);
@@ -81,13 +73,11 @@ const getAttachments = async (channelId: string) =>
     );
 
 
-export function PreviewButton(chatBoxProps: Props) {
-    const { isEmpty, attachments } = chatBoxProps.type;
-
+const PreviewButton: ChatBarButton = ({ isMainChat, isEmpty, type: { attachments } }) => {
     const channelId = SelectedChannelStore.getChannelId();
     const draft = useStateFromStores([DraftStore], () => getDraft(channelId));
 
-    if (chatBoxProps.type.analyticsName !== "normal") return null;
+    if (!isMainChat) return null;
 
     const hasAttachments = attachments && UploadStore.getUploads(channelId, DraftType.ChannelMessage).length > 0;
     const hasContent = !isEmpty && draft?.length > 0;
@@ -95,47 +85,47 @@ export function PreviewButton(chatBoxProps: Props) {
     if (!hasContent && !hasAttachments) return null;
 
     return (
-        <Tooltip text="Preview Message">
-            {tooltipProps => (
-                <Button
-                    {...tooltipProps}
-                    onClick={async () =>
-                        sendBotMessage(
-                            channelId,
-                            {
-                                content: getDraft(channelId),
-                                author: UserStore.getCurrentUser(),
-                                attachments: hasAttachments ? await getAttachments(channelId) : undefined,
-                            }
-                        )}
-                    size=""
-                    look={ButtonLooks.BLANK}
-                    innerClassName={ButtonWrapperClasses.button}
-                    style={{ padding: "0 2px", height: "100%" }}
-                >
-                    <div className={ButtonWrapperClasses.buttonWrapper}>
-                        <img width={24} height={24} src="https://discord.com/assets/4c5a77a89716352686f590a6f014770c.svg" />
-                    </div>
-                </Button>
-            )}
-        </Tooltip>
+        <ChatBarButton
+            tooltip="Preview Message"
+            onClick={async () =>
+                sendBotMessage(
+                    channelId,
+                    {
+                        content: getDraft(channelId),
+                        author: UserStore.getCurrentUser(),
+                        attachments: hasAttachments ? await getAttachments(channelId) : undefined,
+                    }
+                )}
+            buttonProps={{
+                style: {
+                    translate: "0 2px"
+                }
+            }}
+        >
+            <svg
+                fill="currentColor"
+                fillRule="evenodd"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                style={{ scale: "1.096", translate: "0 -1px" }}
+            >
+                <path d="M22.89 11.7c.07.2.07.4 0 .6C22.27 13.9 19.1 21 12 21c-7.11 0-10.27-7.11-10.89-8.7a.83.83 0 0 1 0-.6C1.73 10.1 4.9 3 12 3c7.11 0 10.27 7.11 10.89 8.7Zm-4.5-3.62A15.11 15.11 0 0 1 20.85 12c-.38.88-1.18 2.47-2.46 3.92C16.87 17.62 14.8 19 12 19c-2.8 0-4.87-1.38-6.39-3.08A15.11 15.11 0 0 1 3.15 12c.38-.88 1.18-2.47 2.46-3.92C7.13 6.38 9.2 5 12 5c2.8 0 4.87 1.38 6.39 3.08ZM15.56 11.77c.2-.1.44.02.44.23a4 4 0 1 1-4-4c.21 0 .33.25.23.44a2.5 2.5 0 0 0 3.32 3.32Z" />
+            </svg>
+        </ChatBarButton>
     );
 
-}
+};
 
 export default definePlugin({
     name: "PreviewMessage",
     description: "Lets you preview your message before sending it.",
     authors: [Devs.Aria],
-    patches: [
-        {
-            find: "ChannelTextAreaButtons",
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
-    ],
+    dependencies: ["ChatInputButtonAPI"],
+    // start early to ensure we're the first plugin to add our button
+    // This makes the popping in less awkward
+    startAt: StartAt.Init,
 
-    chatBarIcon: ErrorBoundary.wrap(PreviewButton, { noop: true }),
+    start: () => addChatBarButton("previewMessage", PreviewButton),
+    stop: () => removeChatBarButton("previewMessage"),
 });

src/plugins/readAllNotificationsButton/index.tsx

@@ -25,16 +25,17 @@ function onClick() {
     const channels: Array<any> = [];
 
     Object.values(GuildStore.getGuilds()).forEach(guild => {
-        GuildChannelStore.getChannels(guild.id).SELECTABLE.forEach((c: { channel: { id: string; }; }) => {
-            if (!ReadStateStore.hasUnread(c.channel.id)) return;
+        GuildChannelStore.getChannels(guild.id).SELECTABLE
+            .concat(GuildChannelStore.getChannels(guild.id).VOCAL)
+            .forEach((c: { channel: { id: string; }; }) => {
+                if (!ReadStateStore.hasUnread(c.channel.id)) return;
 
-            channels.push({
-                channelId: c.channel.id,
-                // messageId: c.channel?.lastMessageId,
-                messageId: ReadStateStore.lastMessageId(c.channel.id),
-                readStateType: 0
+                channels.push({
+                    channelId: c.channel.id,
+                    messageId: ReadStateStore.lastMessageId(c.channel.id),
+                    readStateType: 0
+                });
             });
-        });
     });
 
     FluxDispatcher.dispatch({

src/plugins/resurrectHome/README.md

@@ -0,0 +1,5 @@
+# ResurrectHome
+
+Brings back the phased out [Server Home](https://support.discord.com/hc/en-us/articles/6156116949911-Server-Home-Beta) feature!
+
+![](https://private-user-images.githubusercontent.com/47677887/309572891-a9ee7354-9e5e-4b81-8faf-304d9c44f512.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDk0OTE5MTIsIm5iZiI6MTcwOTQ5MTYxMiwicGF0aCI6Ii80NzY3Nzg4Ny8zMDk1NzI4OTEtYTllZTczNTQtOWU1ZS00YjgxLThmYWYtMzA0ZDljNDRmNTEyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzAzVDE4NDY1MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBhYzUxMWY1MzQxNTA4NDE1MWU0YjAxNzM1NzI1YWJkMTNiZmNkNjRmYTRkZDg1ZDE5NzdkMjM0MGVjMDA0OWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.TPYWPRWHTJstfviT9HOaBWFkbBhokyxiDC-gOVL2dqs)

src/plugins/resurrectHome/index.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 { findGroupChildrenByChildId } from "@api/ContextMenu";
+import { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { Menu } from "@webpack/common";
+
+const settings = definePluginSettings({
+    forceServerHome: {
+        type: OptionType.BOOLEAN,
+        description: "Force the Server Guide to be the Server Home tab when it is enabled.",
+        default: false
+    }
+});
+
+function useForceServerHome() {
+    const { forceServerHome } = settings.use(["forceServerHome"]);
+
+    return forceServerHome;
+}
+
+export default definePlugin({
+    name: "ResurrectHome",
+    description: "Re-enables the Server Home tab when there isn't a Server Guide. Also has an option to force the Server Home over the Server Guide, which is accessible through right-clicking the Server Guide.",
+    authors: [Devs.Dolfies, Devs.Nuckyz],
+    settings,
+
+    patches: [
+        // Force home deprecation override
+        {
+            find: "GuildFeatures.GUILD_HOME_DEPRECATION_OVERRIDE",
+            all: true,
+            replacement: [
+                {
+                    match: /\i\.hasFeature\(\i\.GuildFeatures\.GUILD_HOME_DEPRECATION_OVERRIDE\)/g,
+                    replace: "true"
+                }
+            ],
+        },
+        // Disable feedback prompts
+        {
+            find: "GuildHomeFeedbackExperiment.definition.id",
+            replacement: [
+                {
+                    match: /return{showFeedback:\i,setOnDismissedFeedback:(\i)}/,
+                    replace: "return{showFeedback:false,setOnDismissedFeedback:$1}"
+                }
+            ]
+        },
+        // This feature was never finished, so the patch is disabled
+
+        // Enable guild feed render mode selector
+        // {
+        //     find: "2022-01_home_feed_toggle",
+        //     replacement: [
+        //         {
+        //             match: /showSelector:!1/,
+        //             replace: "showSelector:true"
+        //         }
+        //     ]
+        // },
+
+        // Fix focusMessage clearing previously cached messages and causing a loop when fetching messages around home messages
+        {
+            find: '"MessageActionCreators"',
+            replacement: {
+                match: /(?<=focusMessage\(\i\){.+?)(?=focus:{messageId:(\i)})/,
+                replace: "before:$1,"
+            }
+        },
+        // Force Server Home instead of Server Guide
+        {
+            find: "61eef9_2",
+            replacement: {
+                match: /(?<=getMutableGuildChannelsForGuild\(\i\)\);)(?=if\(null==\i\|\|)/,
+                replace: "if($self.useForceServerHome())return false;"
+            }
+        }
+    ],
+
+    useForceServerHome,
+
+    contextMenus: {
+        "guild-context"(children, props) {
+            const forceServerHome = useForceServerHome();
+
+            if (!props?.guild) return;
+
+            const group = findGroupChildrenByChildId("hide-muted-channels", children);
+
+            group?.unshift(
+                <Menu.MenuCheckboxItem
+                    key="force-server-home"
+                    id="force-server-home"
+                    label="Force Server Home"
+                    checked={forceServerHome}
+                    action={() => settings.store.forceServerHome = !forceServerHome}
+                />
+            );
+        }
+    }
+});

src/plugins/reverseImageSearch/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { Flex } from "@components/Flex";
 import { OpenExternalIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
@@ -84,7 +84,7 @@ function makeSearchItem(src: string) {
     );
 }
 
-const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
+const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
     if (props?.reverseImageSearchType !== "img") return;
 
     const src = props.itemHref ?? props.itemSrc;
@@ -93,7 +93,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =
     group?.push(makeSearchItem(src));
 };
 
-const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
+const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
     if (!props?.src) return;
 
     const group = findGroupChildrenByChildId("copy-native-link", children) ?? children;
@@ -115,14 +115,8 @@ export default definePlugin({
             }
         }
     ],
-
-    start() {
-        addContextMenuPatch("message", messageContextMenuPatch);
-        addContextMenuPatch("image-context", imageContextMenuPatch);
-    },
-
-    stop() {
-        removeContextMenuPatch("message", messageContextMenuPatch);
-        removeContextMenuPatch("image-context", imageContextMenuPatch);
+    contextMenus: {
+        "message": messageContextMenuPatch,
+        "image-context": imageContextMenuPatch
     }
 });

src/plugins/reviewDB/auth.tsx

@@ -0,0 +1,81 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { DataStore } from "@api/index";
+import { Logger } from "@utils/Logger";
+import { openModal } from "@utils/modal";
+import { findByPropsLazy } from "@webpack";
+import { showToast, Toasts, UserStore } from "@webpack/common";
+
+import { ReviewDBAuth } from "./entities";
+
+const DATA_STORE_KEY = "rdb-auth";
+
+const { OAuth2AuthorizeModal } = findByPropsLazy("OAuth2AuthorizeModal");
+
+export let Auth: ReviewDBAuth = {};
+
+export async function initAuth() {
+    Auth = await getAuth() ?? {};
+}
+
+export async function getAuth(): Promise<ReviewDBAuth | undefined> {
+    const auth = await DataStore.get(DATA_STORE_KEY);
+    return auth?.[UserStore.getCurrentUser()?.id];
+}
+
+export async function getToken() {
+    const auth = await getAuth();
+    return auth?.token;
+}
+
+export async function updateAuth(newAuth: ReviewDBAuth) {
+    return DataStore.update(DATA_STORE_KEY, auth => {
+        auth ??= {};
+        Auth = auth[UserStore.getCurrentUser().id] ??= {};
+
+        if (newAuth.token) Auth.token = newAuth.token;
+        if (newAuth.user) Auth.user = newAuth.user;
+
+        return auth;
+    });
+}
+
+export function authorize(callback?: any) {
+    openModal(props =>
+        <OAuth2AuthorizeModal
+            {...props}
+            scopes={["identify"]}
+            responseType="code"
+            redirectUri="https://manti.vendicated.dev/api/reviewdb/auth"
+            permissions={0n}
+            clientId="915703782174752809"
+            cancelCompletesFlow={false}
+            callback={async (response: any) => {
+                try {
+                    const url = new URL(response.location);
+                    url.searchParams.append("clientMod", "vencord");
+                    const res = await fetch(url, {
+                        headers: { Accept: "application/json" }
+                    });
+
+                    if (!res.ok) {
+                        const { message } = await res.json();
+                        showToast(message || "An error occured while authorizing", Toasts.Type.FAILURE);
+                        return;
+                    }
+
+                    const { token } = await res.json();
+                    updateAuth({ token });
+                    showToast("Successfully logged in!", Toasts.Type.SUCCESS);
+                    callback?.();
+                } catch (e) {
+                    new Logger("ReviewDB").error("Failed to authorize", e);
+                }
+            }}
+        />
+    );
+}

src/plugins/reviewDB/components/BlockedUserModal.tsx

@@ -0,0 +1,99 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Logger } from "@utils/Logger";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
+import { useAwaiter } from "@utils/react";
+import { Forms, Tooltip, useState } from "@webpack/common";
+
+import { Auth } from "../auth";
+import { ReviewDBUser } from "../entities";
+import { fetchBlocks, unblockUser } from "../reviewDbApi";
+import { cl } from "../utils";
+
+function UnblockButton(props: { onClick?(): void; }) {
+    return (
+        <Tooltip text="Unblock user">
+            {tooltipProps => (
+                <div
+                    {...tooltipProps}
+                    role="button"
+                    onClick={props.onClick}
+                    className={cl("block-modal-unblock")}
+                >
+                    <svg height="20" viewBox="0 -960 960 960" width="20" fill="var(--status-danger)">
+                        <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z" />
+                    </svg>
+                </div>
+            )}
+        </Tooltip>
+    );
+}
+
+function BlockedUser({ user, isBusy, setIsBusy }: { user: ReviewDBUser; isBusy: boolean; setIsBusy(v: boolean): void; }) {
+    const [gone, setGone] = useState(false);
+    if (gone) return null;
+
+    return (
+        <div className={cl("block-modal-row")}>
+            <img src={user.profilePhoto} alt="" />
+            <Forms.FormText className={cl("block-modal-username")}>{user.username}</Forms.FormText>
+            <UnblockButton
+                onClick={isBusy ? undefined : async () => {
+                    setIsBusy(true);
+                    try {
+                        await unblockUser(user.discordID);
+                        setGone(true);
+                    } finally {
+                        setIsBusy(false);
+                    }
+                }}
+            />
+        </div>
+    );
+}
+
+function Modal() {
+    const [isBusy, setIsBusy] = useState(false);
+    const [blocks, error, pending] = useAwaiter(fetchBlocks, {
+        onError: e => new Logger("ReviewDB").error("Failed to fetch blocks", e),
+        fallbackValue: [],
+    });
+
+    if (pending)
+        return null;
+    if (error)
+        return <Forms.FormText>Failed to fetch blocks: ${String(error)}</Forms.FormText>;
+    if (!blocks.length)
+        return <Forms.FormText>No blocked users.</Forms.FormText>;
+
+    return (
+        <>
+            {blocks.map(b => (
+                <BlockedUser
+                    key={b.discordID}
+                    user={b}
+                    isBusy={isBusy}
+                    setIsBusy={setIsBusy}
+                />
+            ))}
+        </>
+    );
+}
+
+export function openBlockModal() {
+    openModal(modalProps => (
+        <ModalRoot {...modalProps}>
+            <ModalHeader className={cl("block-modal-header")}>
+                <Forms.FormTitle style={{ margin: 0 }}>Blocked Users</Forms.FormTitle>
+                <ModalCloseButton onClick={modalProps.onClose} />
+            </ModalHeader>
+            <ModalContent className={cl("block-modal")}>
+                {Auth.token ? <Modal /> : <Forms.FormText>You are not logged into ReviewDB!</Forms.FormText>}
+            </ModalContent>
+        </ModalRoot>
+    ));
+}

src/plugins/reviewDB/components/MessageButton.tsx

@@ -0,0 +1,85 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2022 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { DeleteIcon } from "@components/Icons";
+import { classes } from "@utils/misc";
+import { findByPropsLazy } from "@webpack";
+import { Tooltip } from "@webpack/common";
+
+const iconClasses = findByPropsLazy("button", "wrapper", "disabled", "separator");
+
+export function DeleteButton({ onClick }: { onClick(): void; }) {
+    return (
+        <Tooltip text="Delete Review">
+            {props => (
+                <div
+                    {...props}
+                    className={classes(iconClasses.button, iconClasses.dangerous)}
+                    onClick={onClick}
+                    role="button"
+                >
+                    <DeleteIcon width="20" height="20" />
+                </div>
+            )}
+        </Tooltip>
+    );
+}
+
+export function ReportButton({ onClick }: { onClick(): void; }) {
+    return (
+        <Tooltip text="Report Review">
+            {props => (
+                <div
+                    {...props}
+                    className={iconClasses.button}
+                    onClick={onClick}
+                    role="button"
+                >
+                    <svg width="20" height="20" viewBox="0 0 24 24">
+                        <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"
+                        />
+                    </svg>
+                </div>
+            )}
+        </Tooltip>
+    );
+}
+
+export function BlockButton({ onClick, isBlocked }: { onClick(): void; isBlocked: boolean; }) {
+    return (
+        <Tooltip text={`${isBlocked ? "Unblock" : "Block"} user`}>
+            {props => (
+                <div
+                    {...props}
+                    className={iconClasses.button}
+                    onClick={onClick}
+                    role="button"
+                >
+                    <svg height="20" viewBox="0 -960 960 960" width="20" fill="currentColor">
+                        {isBlocked
+                            ? <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+                            : <path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z" />
+                        }
+                    </svg>
+                </div>
+            )}
+        </Tooltip>
+    );
+}

src/plugins/reviewDB/components/ReviewBadge.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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 { MaskedLink, React, Tooltip } from "@webpack/common";
+import { HTMLAttributes } from "react";
+
+import { Badge } from "../entities";
+import { cl } from "../utils";
+
+export default function ReviewBadge(badge: Badge & { onClick?(): void; }) {
+    const Wrapper = badge.redirectURL
+        ? MaskedLink
+        : (props: HTMLAttributes<HTMLDivElement>) => (
+            <span {...props} role="button">{props.children}</span>
+        );
+
+    return (
+        <Tooltip
+            text={badge.name}>
+            {({ onMouseEnter, onMouseLeave }) => (
+                <Wrapper className={cl("blocked-badge")} href={badge.redirectURL!} onClick={badge.onClick}>
+                    <img
+                        className={cl("badge")}
+                        width="22px"
+                        height="22px"
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                        src={badge.icon}
+                        alt={badge.description}
+                    />
+                </Wrapper>
+            )}
+        </Tooltip>
+    );
+}

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -0,0 +1,191 @@
+/*
+ * 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 { openUserProfile } from "@utils/discord";
+import { classes } from "@utils/misc";
+import { LazyComponent } from "@utils/react";
+import { filters, findBulk } from "@webpack";
+import { Alerts, Parser, Timestamp, useState } from "@webpack/common";
+
+import { Auth, getToken } from "../auth";
+import { Review, ReviewType } from "../entities";
+import { blockUser, deleteReview, reportReview, unblockUser } from "../reviewDbApi";
+import { settings } from "../settings";
+import { canBlockReviewAuthor, canDeleteReview, canReportReview, cl, showToast } from "../utils";
+import { openBlockModal } from "./BlockedUserModal";
+import { BlockButton, DeleteButton, ReportButton } from "./MessageButton";
+import ReviewBadge from "./ReviewBadge";
+
+export default LazyComponent(() => {
+    // this is terrible, blame mantika
+    const p = filters.byProps;
+    const [
+        { cozyMessage, buttons, message, buttonsInner, groupStart },
+        { container, isHeader },
+        { avatar, clickable, username, wrapper, cozy },
+        buttonClasses,
+        botTag
+    ] = findBulk(
+        p("cozyMessage"),
+        p("container", "isHeader"),
+        p("avatar", "zalgo"),
+        p("button", "wrapper", "selected"),
+        p("botTag", "botTagRegular")
+    );
+
+    const dateFormat = new Intl.DateTimeFormat();
+
+    return function ReviewComponent({ review, refetch, profileId }: { review: Review; refetch(): void; profileId: string; }) {
+        const [showAll, setShowAll] = useState(false);
+
+        function openModal() {
+            openUserProfile(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: async () => {
+                    if (!(await getToken())) {
+                        return showToast("You must be logged in to delete reviews.");
+                    } else {
+                        deleteReview(review.id).then(res => {
+                            if (res) {
+                                refetch();
+                            }
+                        });
+                    }
+                }
+            });
+        }
+
+        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: async () => {
+                    if (!(await getToken())) {
+                        return showToast("You must be logged in to report reviews.");
+                    } else {
+                        reportReview(review.id);
+                    }
+                }
+            });
+        }
+
+        const isAuthorBlocked = Auth?.user?.blockedUsers?.includes(review.sender.discordID) ?? false;
+
+        function blockReviewSender() {
+            if (isAuthorBlocked)
+                return unblockUser(review.sender.discordID);
+
+            Alerts.show({
+                title: "Are you sure?",
+                body: "Do you really you want to block this user? They will be unable to leave further reviews on your profile. You can unblock users in the plugin settings.",
+                confirmText: "Block",
+                cancelText: "Nevermind",
+                // confirmColor: "red", this just adds a class name and breaks the submit button guh
+                onConfirm: async () => {
+                    if (!(await getToken())) {
+                        return showToast("You must be logged in to block users.");
+                    } else {
+                        blockUser(review.sender.discordID);
+                    }
+                }
+            });
+        }
+
+        return (
+            <div className={classes(cl("review"), cozyMessage, wrapper, message, groupStart, cozy)} style={
+                {
+                    marginLeft: "0px",
+                    paddingLeft: "52px", // wth is this
+                    // nobody knows anymore
+                }
+            }>
+
+                <img
+                    className={classes(avatar, clickable)}
+                    onClick={openModal}
+                    src={review.sender.profilePhoto || "/assets/1f0bfc0865d324c2587920a7d80c609b.png?size=128"}
+                    style={{ left: "0px", zIndex: 0 }}
+                />
+                <div style={{ display: "inline-flex", justifyContent: "center", alignItems: "center" }}>
+                    <span
+                        className={classes(clickable, username)}
+                        style={{ color: "var(--channels-default)", fontSize: "14px" }}
+                        onClick={() => openModal()}
+                    >
+                        {review.sender.username}
+                    </span>
+
+                    {review.type === ReviewType.System && (
+                        <span
+                            className={classes(botTag.botTagVerified, botTag.botTagRegular, botTag.botTag, botTag.px, botTag.rem)}
+                            style={{ marginLeft: "4px" }}>
+                            <span className={botTag.botText}>
+                                System
+                            </span>
+                        </span>
+                    )}
+                </div>
+                {isAuthorBlocked && (
+                    <ReviewBadge
+                        name="You have blocked this user"
+                        description="You have blocked this user"
+                        icon="/assets/aaee57e0090991557b66.svg"
+                        type={0}
+                        onClick={() => openBlockModal()}
+                    />
+                )}
+                {review.sender.badges.map(badge => <ReviewBadge {...badge} />)}
+
+                {
+                    !settings.store.hideTimestamps && review.type !== ReviewType.System && (
+                        <Timestamp timestamp={new Date(review.timestamp * 1000)} >
+                            {dateFormat.format(review.timestamp * 1000)}
+                        </Timestamp>)
+                }
+
+                <div className={cl("review-comment")}>
+                    {(review.comment.length > 200 && !showAll)
+                        ? [Parser.parseGuildEventDescription(review.comment.substring(0, 200)), "...", <br />, (<a onClick={() => setShowAll(true)}>Read more</a>)]
+                        : Parser.parseGuildEventDescription(review.comment)}
+                </div>
+
+                {review.id !== 0 && (
+                    <div className={classes(container, isHeader, buttons)} style={{
+                        padding: "0px",
+                    }}>
+                        <div className={classes(buttonClasses.wrapper, buttonsInner)} >
+                            {canReportReview(review) && <ReportButton onClick={reportRev} />}
+                            {canBlockReviewAuthor(profileId, review) && <BlockButton isBlocked={isAuthorBlocked} onClick={blockReviewSender} />}
+                            {canDeleteReview(profileId, review) && <DeleteButton onClick={delReview} />}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+});

src/plugins/reviewDB/components/ReviewModal.tsx

@@ -0,0 +1,105 @@
+/*
+ * 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 ErrorBoundary from "@components/ErrorBoundary";
+import { ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { useForceUpdater } from "@utils/react";
+import { Paginator, Text, useRef, useState } from "@webpack/common";
+
+import { Auth } from "../auth";
+import { Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
+import { cl } from "../utils";
+import ReviewComponent from "./ReviewComponent";
+import ReviewsView, { ReviewsInputComponent } from "./ReviewsView";
+
+function Modal({ modalProps, discordId, name }: { modalProps: any; discordId: string; name: string; }) {
+    const [data, setData] = useState<Response>();
+    const [signal, refetch] = useForceUpdater(true);
+    const [page, setPage] = useState(1);
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    const reviewCount = data?.reviewCount;
+    const ownReview = data?.reviews.find(r => r.sender.discordID === Auth.user?.discordID);
+
+    return (
+        <ErrorBoundary>
+            <ModalRoot {...modalProps} size={ModalSize.MEDIUM}>
+                <ModalHeader>
+                    <Text variant="heading-lg/semibold" className={cl("modal-header")}>
+                        {name}'s Reviews
+                        {!!reviewCount && <span> ({reviewCount} Reviews)</span>}
+                    </Text>
+                    <ModalCloseButton onClick={modalProps.onClose} />
+                </ModalHeader>
+
+                <ModalContent scrollerRef={ref}>
+                    <div className={cl("modal-reviews")}>
+                        <ReviewsView
+                            discordId={discordId}
+                            name={name}
+                            page={page}
+                            refetchSignal={signal}
+                            onFetchReviews={setData}
+                            scrollToTop={() => ref.current?.scrollTo({ top: 0, behavior: "smooth" })}
+                            hideOwnReview
+                        />
+                    </div>
+                </ModalContent>
+
+                <ModalFooter className={cl("modal-footer")}>
+                    <div>
+                        {ownReview && (
+                            <ReviewComponent
+                                refetch={refetch}
+                                review={ownReview}
+                                profileId={discordId}
+                            />
+                        )}
+                        <ReviewsInputComponent
+                            isAuthor={ownReview != null}
+                            discordId={discordId}
+                            name={name}
+                            refetch={refetch}
+                        />
+
+                        {!!reviewCount && (
+                            <Paginator
+                                currentPage={page}
+                                maxVisiblePages={5}
+                                pageSize={REVIEWS_PER_PAGE}
+                                totalCount={reviewCount}
+                                onPageChange={setPage}
+                            />
+                        )}
+                    </div>
+                </ModalFooter>
+            </ModalRoot>
+        </ErrorBoundary>
+    );
+}
+
+export function openReviewsModal(discordId: string, name: string) {
+    openModal(props => (
+        <Modal
+            modalProps={props}
+            discordId={discordId}
+            name={name}
+        />
+    ));
+}

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -0,0 +1,186 @@
+/*
+ * 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 { useAwaiter, useForceUpdater } from "@utils/react";
+import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
+import { Forms, React, RelationshipStore, useRef, UserStore } from "@webpack/common";
+
+import { Auth, authorize } from "../auth";
+import { Review } from "../entities";
+import { addReview, getReviews, Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
+import { settings } from "../settings";
+import { cl, showToast } from "../utils";
+import ReviewComponent from "./ReviewComponent";
+
+
+const { Editor, Transforms } = findByPropsLazy("Editor", "Transforms");
+const { ChatInputTypes } = findByPropsLazy("ChatInputTypes");
+
+const InputComponent = findComponentByCodeLazy("default.CHANNEL_TEXT_AREA");
+const { createChannelRecordFromServer } = findByPropsLazy("createChannelRecordFromServer");
+
+interface UserProps {
+    discordId: string;
+    name: string;
+}
+
+interface Props extends UserProps {
+    onFetchReviews(data: Response): void;
+    refetchSignal?: unknown;
+    showInput?: boolean;
+    page?: number;
+    scrollToTop?(): void;
+    hideOwnReview?: boolean;
+}
+
+export default function ReviewsView({
+    discordId,
+    name,
+    onFetchReviews,
+    refetchSignal,
+    scrollToTop,
+    page = 1,
+    showInput = false,
+    hideOwnReview = false,
+}: Props) {
+    const [signal, refetch] = useForceUpdater(true);
+
+    const [reviewData] = useAwaiter(() => getReviews(discordId, (page - 1) * REVIEWS_PER_PAGE), {
+        fallbackValue: null,
+        deps: [refetchSignal, signal, page],
+        onSuccess: data => {
+            if (settings.store.hideBlockedUsers)
+                data!.reviews = data!.reviews?.filter(r => !RelationshipStore.isBlocked(r.sender.discordID));
+
+            scrollToTop?.();
+            onFetchReviews(data!);
+        }
+    });
+
+    if (!reviewData) return null;
+
+    return (
+        <>
+            <ReviewList
+                refetch={refetch}
+                reviews={reviewData!.reviews}
+                hideOwnReview={hideOwnReview}
+                profileId={discordId}
+            />
+
+            {showInput && (
+                <ReviewsInputComponent
+                    name={name}
+                    discordId={discordId}
+                    refetch={refetch}
+                    isAuthor={reviewData!.reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id)}
+                />
+            )}
+        </>
+    );
+}
+
+function ReviewList({ refetch, reviews, hideOwnReview, profileId }: { refetch(): void; reviews: Review[]; hideOwnReview: boolean; profileId: string; }) {
+    const myId = UserStore.getCurrentUser().id;
+
+    return (
+        <div className={cl("view")}>
+            {reviews?.map(review =>
+                (review.sender.discordID !== myId || !hideOwnReview) &&
+                <ReviewComponent
+                    key={review.id}
+                    review={review}
+                    refetch={refetch}
+                    profileId={profileId}
+                />
+            )}
+
+            {reviews?.length === 0 && (
+                <Forms.FormText className={cl("placeholder")}>
+                    Looks like nobody reviewed this user yet. You could be the first!
+                </Forms.FormText>
+            )}
+        </div>
+    );
+}
+
+
+export function ReviewsInputComponent({ discordId, isAuthor, refetch, name }: { discordId: string, name: string; isAuthor: boolean; refetch(): void; }) {
+    const { token } = Auth;
+    const editorRef = useRef<any>(null);
+    const inputType = ChatInputTypes.FORM;
+    inputType.disableAutoFocus = true;
+
+    const channel = createChannelRecordFromServer({ id: "0", type: 1 });
+
+    return (
+        <>
+            <div onClick={() => {
+                if (!token) {
+                    showToast("Opening authorization window...");
+                    authorize();
+                }
+            }}>
+                <InputComponent
+                    className={cl("input")}
+                    channel={channel}
+                    placeholder={
+                        !token
+                            ? "You need to authorize to review users!"
+                            : isAuthor
+                                ? `Update review for @${name}`
+                                : `Review @${name}`
+                    }
+                    type={inputType}
+                    disableThemedBackground={true}
+                    setEditorRef={ref => editorRef.current = ref}
+                    textValue=""
+                    onSubmit={
+                        async res => {
+                            const response = await addReview({
+                                userid: discordId,
+                                comment: res.value,
+                            });
+
+                            if (response) {
+                                refetch();
+
+                                const slateEditor = editorRef.current.ref.current.getSlateEditor();
+
+                                // clear editor
+                                Transforms.delete(slateEditor, {
+                                    at: {
+                                        anchor: Editor.start(slateEditor, []),
+                                        focus: Editor.end(slateEditor, []),
+                                    }
+                                });
+                            }
+
+                            // even tho we need to return this, it doesnt do anything
+                            return {
+                                shouldClear: false,
+                                shouldRefocus: true,
+                            };
+                        }
+                    }
+                />
+            </div>
+
+        </>
+    );
+}

src/plugins/reviewDB/entities.ts

@@ -0,0 +1,100 @@
+/*
+ * 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 enum UserType {
+    Banned = -1,
+    Normal = 0,
+    Admin = 1
+}
+
+export const enum ReviewType {
+    User = 0,
+    Server = 1,
+    Support = 2,
+    System = 3
+}
+
+export const enum NotificationType {
+    Info = 0,
+    Ban = 1,
+    Unban = 2,
+    Warning = 3
+}
+
+export interface ReviewDBAuth {
+    token?: string;
+    user?: ReviewDBCurrentUser;
+}
+
+export interface Badge {
+    name: string;
+    description: string;
+    icon: string;
+    redirectURL?: string;
+    type: number;
+}
+
+export interface BanInfo {
+    id: string;
+    discordID: string;
+    reviewID: number;
+    reviewContent: string;
+    banEndDate: number;
+}
+
+export interface Notification {
+    id: number;
+    title: string;
+    content: string;
+    type: NotificationType;
+}
+
+export interface ReviewDBUser {
+    ID: number;
+    discordID: string;
+    username: string;
+    type: UserType;
+    profilePhoto: string;
+    badges: any[];
+}
+
+export interface ReviewDBCurrentUser extends ReviewDBUser {
+    warningCount: number;
+    clientMod: string;
+    banInfo: BanInfo | null;
+    notification: Notification | null;
+    lastReviewID: number;
+    blockedUsers?: string[];
+}
+
+export interface ReviewAuthor {
+    id: number,
+    discordID: string,
+    username: string,
+    profilePhoto: string,
+    badges: Badge[];
+}
+
+export interface Review {
+    comment: string,
+    id: number,
+    star: number,
+    sender: ReviewAuthor,
+    timestamp: number;
+    type?: ReviewType;
+}

src/plugins/reviewDB/index.tsx

@@ -0,0 +1,155 @@
+/*
+ * 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 "./style.css";
+
+import { NavContextMenuPatchCallback } from "@api/ContextMenu";
+import ErrorBoundary from "@components/ErrorBoundary";
+import ExpandableHeader from "@components/ExpandableHeader";
+import { OpenExternalIcon } from "@components/Icons";
+import { Devs } from "@utils/constants";
+import { Logger } from "@utils/Logger";
+import definePlugin from "@utils/types";
+import { Alerts, Menu, Parser, useState } from "@webpack/common";
+import { Guild, User } from "discord-types/general";
+
+import { Auth, initAuth, updateAuth } from "./auth";
+import { openReviewsModal } from "./components/ReviewModal";
+import ReviewsView from "./components/ReviewsView";
+import { NotificationType } from "./entities";
+import { getCurrentUserInfo, readNotification } from "./reviewDbApi";
+import { settings } from "./settings";
+import { showToast } from "./utils";
+
+const guildPopoutPatch: NavContextMenuPatchCallback = (children, props: { guild: Guild, onClose(): void; }) => {
+    children.push(
+        <Menu.MenuItem
+            label="View Reviews"
+            id="vc-rdb-server-reviews"
+            icon={OpenExternalIcon}
+            action={() => openReviewsModal(props.guild.id, props.guild.name)}
+        />
+    );
+};
+
+export default definePlugin({
+    name: "ReviewDB",
+    description: "Review other users (Adds a new settings to profiles)",
+    authors: [Devs.mantikafasi, Devs.Ven],
+
+    settings,
+    contextMenus: {
+        "guild-header-popout": guildPopoutPatch
+    },
+
+    patches: [
+        {
+            find: "showBorder:null",
+            replacement: {
+                match: /user:(\i),setNote:\i,canDM.+?\}\)/,
+                replace: "$&,$self.getReviewsComponent($1)"
+            }
+        }
+    ],
+
+    flux: {
+        CONNECTION_OPEN: initAuth,
+    },
+
+    async start() {
+        const s = settings.store;
+        const { lastReviewId, notifyReviews } = s;
+
+        const legacy = s as any as { token?: string; };
+        if (legacy.token) {
+            await updateAuth({ token: legacy.token });
+            legacy.token = undefined;
+            new Logger("ReviewDB").info("Migrated legacy settings");
+        }
+
+        await initAuth();
+
+        setTimeout(async () => {
+            if (!Auth.token) return;
+
+            const user = await getCurrentUserInfo(Auth.token);
+            updateAuth({ user });
+
+            if (notifyReviews) {
+                if (lastReviewId && lastReviewId < user.lastReviewID) {
+                    s.lastReviewId = user.lastReviewID;
+                    if (user.lastReviewID !== 0)
+                        showToast("You have new reviews on your profile!");
+                }
+            }
+
+            if (user.notification) {
+                const props = user.notification.type === NotificationType.Ban ? {
+                    cancelText: "Appeal",
+                    confirmText: "Ok",
+                    onCancel: async () =>
+                        VencordNative.native.openExternal(
+                            "https://reviewdb.mantikafasi.dev/api/redirect?"
+                            + new URLSearchParams({
+                                token: Auth.token!,
+                                page: "dashboard/appeal"
+                            })
+                        )
+                } : {};
+
+                Alerts.show({
+                    title: user.notification.title,
+                    body: (
+                        Parser.parse(
+                            user.notification.content,
+                            false
+                        )
+                    ),
+                    ...props
+                });
+
+                readNotification(user.notification.id);
+            }
+        }, 4000);
+    },
+
+    getReviewsComponent: ErrorBoundary.wrap((user: User) => {
+        const [reviewCount, setReviewCount] = useState<number>();
+
+        return (
+            <ExpandableHeader
+                headerText="User Reviews"
+                onMoreClick={() => openReviewsModal(user.id, user.username)}
+                moreTooltipText={
+                    reviewCount && reviewCount > 50
+                        ? `View all ${reviewCount} reviews`
+                        : "Open Review Modal"
+                }
+                onDropDownClick={state => settings.store.reviewsDropdownState = !state}
+                defaultState={settings.store.reviewsDropdownState}
+            >
+                <ReviewsView
+                    discordId={user.id}
+                    name={user.username}
+                    onFetchReviews={r => setReviewCount(r.reviewCount)}
+                    showInput
+                />
+            </ExpandableHeader>
+        );
+    }, { message: "Failed to render Reviews" })
+});

src/plugins/reviewDB/reviewDbApi.ts

@@ -0,0 +1,202 @@
+/*
+ * 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 { Toasts } from "@webpack/common";
+
+import { Auth, authorize, getToken, updateAuth } from "./auth";
+import { Review, ReviewDBCurrentUser, ReviewDBUser, ReviewType } from "./entities";
+import { settings } from "./settings";
+import { showToast } from "./utils";
+
+const API_URL = "https://manti.vendicated.dev/api/reviewdb";
+
+export const REVIEWS_PER_PAGE = 50;
+
+export interface Response {
+    message: string;
+    reviews: Review[];
+    updated: boolean;
+    hasNextPage: boolean;
+    reviewCount: number;
+}
+
+const WarningFlag = 0b00000010;
+
+async function rdbRequest(path: string, options: RequestInit = {}) {
+    return fetch(API_URL + path, {
+        ...options,
+        headers: {
+            ...options.headers,
+            Authorization: await getToken() || "",
+        }
+    });
+}
+
+export async function getReviews(id: string, offset = 0): Promise<Response> {
+    let flags = 0;
+    if (!settings.store.showWarning) flags |= WarningFlag;
+
+    const params = new URLSearchParams({
+        flags: String(flags),
+        offset: String(offset)
+    });
+    const req = await fetch(`${API_URL}/users/${id}/reviews?${params}`);
+
+    const res = (req.ok)
+        ? await req.json() as Response
+        : {
+            message: req.status === 429 ? "You are sending requests too fast. Wait a few seconds and try again." : "An Error occured while fetching reviews. Please try again later.",
+            reviews: [],
+            updated: false,
+            hasNextPage: false,
+            reviewCount: 0
+        };
+
+    if (!req.ok) {
+        showToast(res.message, Toasts.Type.FAILURE);
+        return {
+            ...res,
+            reviews: [
+                {
+                    id: 0,
+                    comment: res.message,
+                    star: 0,
+                    timestamp: 0,
+                    type: ReviewType.System,
+                    sender: {
+                        id: 0,
+                        username: "ReviewDB",
+                        profilePhoto: "https://cdn.discordapp.com/avatars/1134864775000629298/3f87ad315b32ee464d84f1270c8d1b37.png?size=256&format=webp&quality=lossless",
+                        discordID: "1134864775000629298",
+                        badges: []
+                    }
+                }
+            ]
+        };
+    }
+
+    return res;
+}
+
+export async function addReview(review: any): Promise<Response | null> {
+
+    const token = await getToken();
+    if (!token) {
+        showToast("Please authorize to add a review.");
+        authorize();
+        return null;
+    }
+
+    return await rdbRequest(`/users/${review.userid}/reviews`, {
+        method: "PUT",
+        body: JSON.stringify(review),
+        headers: {
+            "Content-Type": "application/json",
+        }
+    }).then(async r => {
+        const data = await r.json() as Response;
+        showToast(data.message);
+        return r.ok ? data : null;
+    });
+}
+
+export async function deleteReview(id: number): Promise<Response | null> {
+    return await rdbRequest(`/users/${id}/reviews`, {
+        method: "DELETE",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        },
+        body: JSON.stringify({
+            reviewid: id
+        })
+    }).then(async r => {
+        const data = await r.json() as Response;
+        showToast(data.message);
+        return r.ok ? data : null;
+    });
+}
+
+export async function reportReview(id: number) {
+    const res = await rdbRequest("/reports", {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        },
+        body: JSON.stringify({
+            reviewid: id,
+        })
+    }).then(r => r.json()) as Response;
+
+    showToast(res.message);
+}
+
+async function patchBlock(action: "block" | "unblock", userId: string) {
+    const res = await rdbRequest("/blocks", {
+        method: "PATCH",
+        headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+        },
+        body: JSON.stringify({
+            action: action,
+            discordId: userId
+        })
+    });
+
+    if (!res.ok) {
+        showToast(`Failed to ${action} user`, Toasts.Type.FAILURE);
+    } else {
+        showToast(`Successfully ${action}ed user`, Toasts.Type.SUCCESS);
+
+        if (Auth?.user?.blockedUsers) {
+            const newBlockedUsers = action === "block"
+                ? [...Auth.user.blockedUsers, userId]
+                : Auth.user.blockedUsers.filter(id => id !== userId);
+            updateAuth({ user: { ...Auth.user, blockedUsers: newBlockedUsers } });
+        }
+    }
+}
+
+export const blockUser = (userId: string) => patchBlock("block", userId);
+export const unblockUser = (userId: string) => patchBlock("unblock", userId);
+
+export async function fetchBlocks(): Promise<ReviewDBUser[]> {
+    const res = await rdbRequest("/blocks", {
+        method: "GET",
+        headers: {
+            Accept: "application/json",
+        }
+    });
+
+    if (!res.ok) throw new Error(`${res.status}: ${res.statusText}`);
+    return res.json();
+}
+
+export function getCurrentUserInfo(token: string): Promise<ReviewDBCurrentUser> {
+    return rdbRequest("/users", {
+        method: "POST",
+    }).then(r => r.json());
+}
+
+export async function readNotification(id: number) {
+    return rdbRequest(`/notifications?id=${id}`, {
+        method: "PATCH"
+    });
+}

src/plugins/reviewDB/settings.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 } from "@api/Settings";
+import { OptionType } from "@utils/types";
+import { Button } from "@webpack/common";
+
+import { authorize, getToken } from "./auth";
+import { openBlockModal } from "./components/BlockedUserModal";
+import { cl } from "./utils";
+
+export const settings = definePluginSettings({
+    authorize: {
+        type: OptionType.COMPONENT,
+        description: "Authorize with ReviewDB",
+        component: () => (
+            <Button onClick={() => authorize()}>
+                Authorize with ReviewDB
+            </Button>
+        )
+    },
+    notifyReviews: {
+        type: OptionType.BOOLEAN,
+        description: "Notify about new reviews on startup",
+        default: true,
+    },
+    showWarning: {
+        type: OptionType.BOOLEAN,
+        description: "Display warning to be respectful at the top of the reviews list",
+        default: true,
+    },
+    hideTimestamps: {
+        type: OptionType.BOOLEAN,
+        description: "Hide timestamps on reviews",
+        default: false,
+    },
+    hideBlockedUsers: {
+        type: OptionType.BOOLEAN,
+        description: "Hide reviews from blocked users",
+        default: true,
+    },
+    buttons: {
+        type: OptionType.COMPONENT,
+        description: "ReviewDB buttons",
+        component: () => (
+            <div className={cl("button-grid")} >
+                <Button onClick={openBlockModal}>Manage Blocked Users</Button>
+
+                <Button
+                    color={Button.Colors.GREEN}
+                    onClick={() => {
+                        VencordNative.native.openExternal("https://github.com/sponsors/mantikafasi");
+                    }}
+                >
+                    Support ReviewDB development
+                </Button>
+
+                <Button onClick={async () => {
+                    let url = "https://reviewdb.mantikafasi.dev/";
+                    const token = await getToken();
+                    if (token)
+                        url += "/api/redirect?token=" + encodeURIComponent(token);
+
+                    VencordNative.native.openExternal(url);
+                }}>
+                    ReviewDB website
+                </Button>
+
+
+                <Button onClick={() => {
+                    VencordNative.native.openExternal("https://discord.gg/eWPBSbvznt");
+                }}>
+                    ReviewDB Support Server
+                </Button>
+            </div >
+        )
+    }
+}).withPrivateSettings<{
+    lastReviewId?: number;
+    reviewsDropdownState?: boolean;
+}>();

src/plugins/reviewDB/style.css

@@ -0,0 +1,140 @@
+[class|="section"]:not([class|="lastSection"]) + .vc-rdb-view {
+    margin-top: 12px;
+}
+
+.vc-rdb-badge {
+    vertical-align: middle;
+    margin-left: 4px;
+}
+
+.vc-rdb-input {
+    margin-top: 6px;
+    margin-bottom: 12px;
+    resize: none;
+    overflow: hidden;
+    background: transparent;
+    border: 1px solid var(--profile-message-input-border-color);
+}
+
+.vc-rdb-modal-footer > div {
+    width: 100%;
+    margin: 6px 16px;
+}
+
+/* When input becomes disabled(while sending review), input adds unneccesary padding to left, this prevents it */
+.vc-rdb-input > div > div {
+    padding-left: 0 !important;
+}
+
+.vc-rdb-placeholder {
+    margin-bottom: 4px;
+    font-weight: bold;
+    font-style: italic;
+    color: var(--text-muted);
+}
+
+.vc-rdb-input * {
+    font-size: 14px;
+}
+
+.vc-rdb-modal-footer {
+    padding: 0;
+}
+
+.vc-rdb-modal-footer .vc-rdb-input {
+    margin-bottom: 0;
+    background: var(--input-background);
+}
+
+.vc-rdb-modal-footer [class|="pageControlContainer"] {
+    margin-top: 0;
+}
+
+.vc-rdb-modal-header {
+    flex-grow: 1;
+}
+
+.vc-rdb-modal-reviews {
+    margin-top: 16px;
+}
+
+.vc-rdb-review {
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+    padding-right: 32px !important;
+}
+
+.vc-rdb-review:hover {
+    background: var(--background-message-hover) !important;
+    border-radius: 8px;
+}
+
+.vc-rdb-review-comment img {
+    vertical-align: text-top;
+}
+
+.vc-rdb-review-comment {
+    overflow-y: hidden;
+    margin-top: 1px;
+    margin-bottom: 8px;
+    color: var(--text-normal);
+    font-size: 15px;
+}
+
+.vc-rdb-blocked-badge {
+    cursor: pointer;
+}
+
+.vc-rdb-block-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.vc-rdb-block-modal {
+    padding: 1em;
+    display: grid;
+    gap: 0.75em;
+}
+
+.vc-rdb-button-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+/* stylelint-disable-next-line media-feature-range-notation */
+@media (max-width: 600px) {
+    .vc-rdb-button-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.vc-rdb-block-modal-row {
+    display: flex;
+    height: 2em;
+    gap: 0.5em;
+    align-items: center;
+}
+
+.vc-rdb-block-modal-row img {
+    border-radius: 50%;
+    height: 2em;
+    width: 2em;
+}
+
+.vc-rdb-block-modal img::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-modifier-accent);
+}
+
+.vc-rdb-block-modal-username {
+    flex-grow: 1;
+}
+
+.vc-rdb-block-modal-unblock {
+    cursor: pointer;
+}

src/plugins/reviewDB/utils.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { classNameFactory } from "@api/Styles";
+import { Toasts, UserStore } from "@webpack/common";
+
+import { Auth } from "./auth";
+import { Review, UserType } from "./entities";
+
+export const cl = classNameFactory("vc-rdb-");
+
+export function canDeleteReview(profileId: string, review: Review) {
+    const myId = UserStore.getCurrentUser().id;
+    return (
+        myId === profileId
+        || review.sender.discordID === myId
+        || Auth.user?.type === UserType.Admin
+    );
+}
+
+export function canBlockReviewAuthor(profileId: string, review: Review) {
+    const myId = UserStore.getCurrentUser().id;
+    return profileId === myId && review.sender.discordID !== myId;
+}
+
+export function canReportReview(review: Review) {
+    return review.sender.discordID !== UserStore.getCurrentUser().id;
+}
+
+export function showToast(message: string, type = Toasts.Type.MESSAGE) {
+    Toasts.show({
+        id: Toasts.genId(),
+        message,
+        type,
+        options: {
+            position: Toasts.Position.BOTTOM, // NOBODY LIKES TOASTS AT THE TOP
+        },
+    });
+}

src/plugins/roleColorEverywhere/index.tsx

@@ -72,10 +72,6 @@ export default definePlugin({
         {
             find: 'tutorialId:"whos-online',
             replacement: [
-                {
-                    match: /\i.roleIcon,\.\.\.\i/,
-                    replace: "$&,color:$self.roleGroupColor(arguments[0])"
-                },
                 {
                     match: /null,\i," — ",\i\]/,
                     replace: "null,$self.roleGroupColor(arguments[0])]"
@@ -83,6 +79,16 @@ export default definePlugin({
             ],
             predicate: () => settings.store.memberList,
         },
+        {
+            find: ".Messages.THREAD_BROWSER_PRIVATE",
+            replacement: [
+                {
+                    match: /children:\[\i," — ",\i\]/,
+                    replace: "children:[$self.roleGroupColor(arguments[0])]"
+                },
+            ],
+            predicate: () => settings.store.memberList,
+        },
         {
             find: "renderPrioritySpeaker",
             replacement: [

src/plugins/searchReply/index.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { ReplyIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
@@ -27,7 +27,7 @@ import { Message } from "discord-types/general";
 
 const messageUtils = findByPropsLazy("replyToMessage");
 
-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;
     const channel = ChannelStore.getChannel(message?.channel_id);
@@ -38,7 +38,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { messag
     const dmGroup = findGroupChildrenByChildId("pin", children);
     if (dmGroup && !dmGroup.some(child => child?.props?.id === "reply")) {
         const pinIndex = dmGroup.findIndex(c => c?.props.id === "pin");
-        return dmGroup.splice(pinIndex + 1, 0, (
+        dmGroup.splice(pinIndex + 1, 0, (
             <Menu.MenuItem
                 id="reply"
                 label={i18n.Messages.MESSAGE_ACTION_REPLY}
@@ -46,12 +46,13 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { messag
                 action={(e: React.MouseEvent) => messageUtils.replyToMessage(channel, message, e)}
             />
         ));
+        return;
     }
 
     // servers
     const serverGroup = findGroupChildrenByChildId("mark-unread", children);
     if (serverGroup && !serverGroup.some(child => child?.props?.id === "reply")) {
-        return serverGroup.unshift((
+        serverGroup.unshift((
             <Menu.MenuItem
                 id="reply"
                 label={i18n.Messages.MESSAGE_ACTION_REPLY}
@@ -59,6 +60,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { messag
                 action={(e: React.MouseEvent) => messageUtils.replyToMessage(channel, message, e)}
             />
         ));
+        return;
     }
 };
 
@@ -67,12 +69,7 @@ export default definePlugin({
     name: "SearchReply",
     description: "Adds a reply button to search results",
     authors: [Devs.Aria],
-
-    start() {
-        addContextMenuPatch("message", messageContextMenuPatch);
-    },
-
-    stop() {
-        removeContextMenuPatch("message", messageContextMenuPatch);
+    contextMenus: {
+        "message": messageContextMenuPatch
     }
 });

src/plugins/sendTimestamps/index.tsx

@@ -18,6 +18,7 @@
 
 import "./styles.css";
 
+import { addChatBarButton, ChatBarButton, removeChatBarButton } from "@api/ChatButtons";
 import { addPreSendListener, removePreSendListener } from "@api/MessageEvents";
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
@@ -26,7 +27,7 @@ import { getTheme, insertTextIntoChatInputBox, Theme } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { closeModal, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModal } from "@utils/modal";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ButtonLooks, ButtonWrapperClasses, Forms, Parser, Select, Tooltip, useMemo, useState } from "@webpack/common";
+import { Button, Forms, Parser, Select, useMemo, useState } from "@webpack/common";
 
 const settings = definePluginSettings({
     replaceMessageContents: {
@@ -122,25 +123,49 @@ function PickerModal({ rootProps, close }: { rootProps: ModalProps, close(): voi
     );
 }
 
+const ChatBarIcon: ChatBarButton = ({ isMainChat }) => {
+    if (!isMainChat) return null;
+
+    return (
+        <ChatBarButton
+            tooltip="Insert Timestamp"
+            onClick={() => {
+                const key = openModal(props => (
+                    <PickerModal
+                        rootProps={props}
+                        close={() => closeModal(key)}
+                    />
+                ));
+            }}
+            buttonProps={{ "aria-haspopup": "dialog" }}
+        >
+            <svg
+                aria-hidden="true"
+                role="img"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                style={{ scale: "1.2" }}
+            >
+                <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>
+        </ChatBarButton>
+    );
+};
+
 export default definePlugin({
     name: "SendTimestamps",
     description: "Send timestamps easily via chat box button & text shortcuts. Read the extended description!",
     authors: [Devs.Ven, Devs.Tyler, Devs.Grzesiek11],
-    dependencies: ["MessageEventsAPI"],
+    dependencies: ["MessageEventsAPI", "ChatInputButtonAPI"],
 
-    settings: settings,
-
-    patches: [
-        {
-            find: "ChannelTextAreaButtons",
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
-    ],
+    settings,
 
     start() {
+        addChatBarButton("SendTimestamps", ChatBarIcon);
         this.listener = addPreSendListener((_, msg) => {
             if (settings.store.replaceMessageContents) {
                 msg.content = msg.content.replace(/`\d{1,2}:\d{2} ?(?:AM|PM)?`/gi, parseTime);
@@ -149,56 +174,10 @@ export default definePlugin({
     },
 
     stop() {
+        removeChatBarButton("SendTimestamps");
         removePreSendListener(this.listener);
     },
 
-    chatBarIcon(chatBoxProps: { type: { analyticsName: string; }; }) {
-        if (chatBoxProps.type.analyticsName !== "normal") return null;
-
-        return (
-            <Tooltip text="Insert Timestamp">
-                {({ onMouseEnter, onMouseLeave }) => (
-                    <div style={{ display: "flex" }}>
-                        <Button
-                            aria-haspopup="dialog"
-                            aria-label="Insert Timestamp"
-                            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",

src/plugins/sendTimestamps/styles.css

@@ -42,10 +42,6 @@
     margin-bottom: 1em;
 }
 
-.vc-st-button {
-    padding: 0 6px;
-}
-
 .vc-st-button svg {
     transform: scale(1.1) translateY(1px);
 }

src/plugins/serverProfile/GuildProfileModal.tsx

@@ -12,10 +12,9 @@ import { classes } from "@utils/misc";
 import { ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { useAwaiter } from "@utils/react";
 import { findByPropsLazy, findExportedComponentLazy } from "@webpack";
-import { FluxDispatcher, Forms, GuildChannelStore, GuildMemberStore, moment, Parser, PresenceStore, RelationshipStore, ScrollerThin, SnowflakeUtils, TabBar, Timestamp, useEffect, UserStore, UserUtils, useState, useStateFromStores } from "@webpack/common";
+import { FluxDispatcher, Forms, GuildChannelStore, GuildMemberStore, IconUtils, Parser, PresenceStore, RelationshipStore, ScrollerThin, SnowflakeUtils, TabBar, Timestamp, useEffect, UserStore, UserUtils, useState, useStateFromStores } from "@webpack/common";
 import { Guild, User } from "discord-types/general";
 
-const IconUtils = findByPropsLazy("getGuildBannerURL");
 const IconClasses = findByPropsLazy("icon", "acronym", "childWrapper");
 const FriendRow = findExportedComponentLazy("FriendRow");
 
@@ -50,7 +49,7 @@ const fetched = {
 
 function renderTimestamp(timestamp: number) {
     return (
-        <Timestamp timestamp={moment(timestamp)} />
+        <Timestamp timestamp={new Date(timestamp)} />
     );
 }
 
@@ -65,10 +64,7 @@ function GuildProfileModal({ guild }: GuildProps) {
 
     const [currentTab, setCurrentTab] = useState(Tabs.ServerInfo);
 
-    const bannerUrl = guild.banner && IconUtils.getGuildBannerURL({
-        id: guild.id,
-        banner: guild.banner
-    }, true).replace(/\?size=\d+$/, "?size=1024");
+    const bannerUrl = guild.banner && IconUtils.getGuildBannerURL(guild, true)!.replace(/\?size=\d+$/, "?size=1024");
 
     const iconUrl = guild.icon && IconUtils.getGuildIconURL({
         id: guild.id,
@@ -89,7 +85,7 @@ function GuildProfileModal({ guild }: GuildProps) {
             )}
 
             <div className={cl("header")}>
-                {guild.icon
+                {iconUrl
                     ? <img
                         src={iconUrl}
                         alt=""
@@ -150,7 +146,7 @@ function Owner(guildId: string, owner: User) {
                 avatar: guildAvatar,
                 guildId,
                 canAnimate: true
-            }, true)
+            })
             : IconUtils.getUserAvatarURL(owner, true);
 
     return (

src/plugins/serverProfile/index.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Menu } from "@webpack/common";
@@ -12,7 +12,7 @@ import { Guild } from "discord-types/general";
 
 import { openGuildProfileModal } from "./GuildProfileModal";
 
-const Patch: NavContextMenuPatchCallback = (children, { guild }: { guild: Guild; }) => () => {
+const Patch: NavContextMenuPatchCallback = (children, { guild }: { guild: Guild; }) => {
     const group = findGroupChildrenByChildId("privacy", children);
 
     group?.push(
@@ -29,12 +29,8 @@ export default definePlugin({
     description: "Allows you to view info about a server by right clicking it in the server list",
     authors: [Devs.Ven, Devs.Nuckyz],
     tags: ["guild", "info"],
-
-    start() {
-        addContextMenuPatch(["guild-context", "guild-header-popout"], Patch);
-    },
-
-    stop() {
-        removeContextMenuPatch(["guild-context", "guild-header-popout"], Patch);
+    contextMenus: {
+        "guild-context": Patch,
+        "guild-header-popout": Patch
     }
 });

src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx

@@ -20,7 +20,7 @@ import { Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { formatDuration } from "@utils/text";
 import { findByPropsLazy, findComponentByCodeLazy, findComponentLazy } from "@webpack";
-import { EmojiStore, FluxDispatcher, GuildMemberStore, GuildStore, moment, Parser, PermissionsBits, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip, useEffect, useState } from "@webpack/common";
+import { EmojiStore, FluxDispatcher, GuildMemberStore, GuildStore, Parser, PermissionsBits, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip, useEffect, useState } from "@webpack/common";
 import type { Channel } from "discord-types/general";
 
 import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "../../permissionsViewer/components/RolesAndUsersPermissions";
@@ -120,7 +120,7 @@ const VideoQualityModesToNames = {
 const HiddenChannelLogo = "/assets/433e3ec4319a9d11b0cbe39342614982.svg";
 
 function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
-    const [viewAllowedUsersAndRoles, setViewAllowedUsersAndRoles] = useState(settings.store.defaultAllowedUsersAndRolesDropdownState);
+    const { defaultAllowedUsersAndRolesDropdownState } = settings.use(["defaultAllowedUsersAndRolesDropdownState"]);
     const [permissions, setPermissions] = useState<RoleOrUserPermission[]>([]);
 
     const {
@@ -216,12 +216,12 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                 {lastMessageId &&
                     <Text variant="text-md/normal">
                         Last {channel.isForumChannel() ? "post" : "message"} created:
-                        <Timestamp timestamp={moment(SnowflakeUtils.extractTimestamp(lastMessageId))} />
+                        <Timestamp timestamp={new Date(SnowflakeUtils.extractTimestamp(lastMessageId))} />
                     </Text>
                 }
 
                 {lastPinTimestamp &&
-                    <Text variant="text-md/normal">Last message pin: <Timestamp timestamp={moment(lastPinTimestamp)} /></Text>
+                    <Text variant="text-md/normal">Last message pin: <Timestamp timestamp={new Date(lastPinTimestamp)} /></Text>
                 }
                 {(rateLimitPerUser ?? 0) > 0 &&
                     <Text variant="text-md/normal">Slowmode: {formatDuration(rateLimitPerUser!, "seconds")}</Text>
@@ -301,19 +301,19 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                             </Tooltip>
                         )}
                         <Text variant="text-lg/bold">Allowed users and roles:</Text>
-                        <Tooltip text={viewAllowedUsersAndRoles ? "Hide Allowed Users and Roles" : "View Allowed Users and Roles"}>
+                        <Tooltip text={defaultAllowedUsersAndRolesDropdownState ? "Hide Allowed Users and Roles" : "View Allowed Users and Roles"}>
                             {({ onMouseLeave, onMouseEnter }) => (
                                 <button
                                     onMouseLeave={onMouseLeave}
                                     onMouseEnter={onMouseEnter}
                                     className="shc-lock-screen-allowed-users-and-roles-container-toggle-btn"
-                                    onClick={() => setViewAllowedUsersAndRoles(v => !v)}
+                                    onClick={() => settings.store.defaultAllowedUsersAndRolesDropdownState = !defaultAllowedUsersAndRolesDropdownState}
                                 >
                                     <svg
                                         width="24"
                                         height="24"
                                         viewBox="0 0 24 24"
-                                        transform={viewAllowedUsersAndRoles ? "scale(1 -1)" : "scale(1 1)"}
+                                        transform={defaultAllowedUsersAndRolesDropdownState ? "scale(1 -1)" : "scale(1 1)"}
                                     >
                                         <path fill="currentColor" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
                                     </svg>
@@ -321,7 +321,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                             )}
                         </Tooltip>
                     </div>
-                    {viewAllowedUsersAndRoles && <ChannelBeginHeader channel={channel} />}
+                    {defaultAllowedUsersAndRolesDropdownState && <ChannelBeginHeader channel={channel} />}
                 </div>
             </div>
         </div>

src/plugins/showHiddenChannels/index.tsx

@@ -29,7 +29,7 @@ import type { Channel, Role } from "discord-types/general";
 
 import HiddenChannelLockScreen from "./components/HiddenChannelLockScreen";
 
-const ChannelListClasses = findByPropsLazy("channelEmoji", "unread", "icon");
+const ChannelListClasses = findByPropsLazy("modeMuted", "modeSelected", "unread", "icon");
 
 const enum ShowMode {
     LockIcon,
@@ -162,7 +162,7 @@ export default definePlugin({
                 },
                 // Add the hidden eye icon if the channel is hidden
                 {
-                    match: /\i\.children.+?:null(?<=,channel:(\i).+?)/,
+                    match: /\.name\),.{0,120}\.children.+?:null(?<=,channel:(\i).+?)/,
                     replace: (m, channel) => `${m},$self.isHiddenChannel(${channel})?$self.HiddenChannelIcon():null`
                 },
                 // Make voice channels also appear as muted if they are muted
@@ -305,27 +305,27 @@ export default definePlugin({
             ]
         },
         {
-            find: ".avatars),children",
+            find: '+1]})},"overflow"))',
             replacement: [
                 {
                     // Create a variable for the channel prop
-                    match: /maxUsers:\i,users:\i.+?=(\i).+?;/,
+                    match: /maxUsers:\i,users:\i.+?}=(\i).*?;/,
                     replace: (m, props) => `${m}let{shcChannel}=${props};`
                 },
                 {
                     // Make Discord always render the plus button if the component is used inside the HiddenChannelLockScreen
                     match: /\i>0(?=&&.{0,60}renderPopout)/,
-                    replace: m => `($self.isHiddenChannel(shcChannel,true)?true:${m})`
+                    replace: m => `($self.isHiddenChannel(typeof shcChannel!=="undefined"?shcChannel:void 0,true)?true:${m})`
                 },
                 {
                     // Prevent Discord from overwriting the last children with the plus button if the overflow amount is <= 0 and the component is used inside the HiddenChannelLockScreen
                     match: /(?<=\.value\(\),(\i)=.+?length-)1(?=\]=.{0,60}renderPopout)/,
-                    replace: (_, amount) => `($self.isHiddenChannel(shcChannel,true)&&${amount}<=0?0:1)`
+                    replace: (_, amount) => `($self.isHiddenChannel(typeof shcChannel!=="undefined"?shcChannel:void 0,true)&&${amount}<=0?0:1)`
                 },
                 {
                     // Show only the plus text without overflowed children amount if the overflow amount is <= 0 and the component is used inside the HiddenChannelLockScreen
                     match: /(?<="\+",)(\i)\+1/,
-                    replace: (m, amount) => `$self.isHiddenChannel(shcChannel,true)&&${amount}<=0?"":${m}`
+                    replace: (m, amount) => `$self.isHiddenChannel(typeof shcChannel!=="undefined"?shcChannel:void 0,true)&&${amount}<=0?"":${m}`
                 }
             ]
         },

src/plugins/silentMessageToggle/index.tsx

@@ -16,12 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { addChatBarButton, ChatBarButton, removeChatBarButton } from "@api/ChatButtons";
 import { addPreSendListener, removePreSendListener, SendListener } from "@api/MessageEvents";
 import { definePluginSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ButtonLooks, ButtonWrapperClasses, React, Tooltip } from "@webpack/common";
+import { React, useEffect, useState } from "@webpack/common";
 
 let lastState = false;
 
@@ -41,19 +41,15 @@ const settings = definePluginSettings({
     }
 });
 
-function SilentMessageToggle(chatBoxProps: {
-    type: {
-        analyticsName: string;
-    };
-}) {
-    const [enabled, setEnabled] = React.useState(lastState);
+const SilentMessageToggle: ChatBarButton = ({ isMainChat }) => {
+    const [enabled, setEnabled] = useState(lastState);
 
     function setEnabledValue(value: boolean) {
         if (settings.store.persistState) lastState = value;
         setEnabled(value);
     }
 
-    React.useEffect(() => {
+    useEffect(() => {
         const listener: SendListener = (_, message) => {
             if (enabled) {
                 if (settings.store.autoDisable) setEnabledValue(false);
@@ -65,55 +61,39 @@ function SilentMessageToggle(chatBoxProps: {
         return () => void removePreSendListener(listener);
     }, [enabled]);
 
-    if (chatBoxProps.type.analyticsName !== "normal") return null;
+    if (!isMainChat) return null;
 
     return (
-        <Tooltip text={enabled ? "Disable Silent Message" : "Enable Silent Message"}>
-            {tooltipProps => (
-                <div style={{ display: "flex" }}>
-                    <Button
-                        {...tooltipProps}
-                        onClick={() => setEnabledValue(!enabled)}
-                        size=""
-                        look={ButtonLooks.BLANK}
-                        innerClassName={ButtonWrapperClasses.button}
-                        style={{ padding: "0 6px" }}
-                    >
-                        <div className={ButtonWrapperClasses.buttonWrapper}>
-                            <svg width="24" height="24" viewBox="0 0 24 24">
-                                <path fill="currentColor" mask="url(#_)" d="M18 10.7101C15.1085 9.84957 13 7.17102 13 4c0-.30736.0198-.6101.0582-.907C12.7147 3.03189 12.3611 3 12 3 8.686 3 6 5.686 6 9v5c0 1.657-1.344 3-3 3v1h18v-1c-1.656 0-3-1.343-3-3v-3.2899ZM8.55493 19c.693 1.19 1.96897 2 3.44497 2s2.752-.81 3.445-2H8.55493ZM18.2624 5.50209 21 2.5V1h-4.9651v1.49791h2.4411L16 5.61088V7h5V5.50209h-2.7376Z" />
-                                {!enabled && <>
-                                    <mask id="_">
-                                        <path fill="#fff" d="M0 0h24v24H0Z" />
-                                        <path stroke="#000" stroke-width="5.99068" d="M0 24 24 0" />
-                                    </mask>
-                                    <path fill="var(--status-danger)" d="m21.178 1.70703 1.414 1.414L4.12103 21.593l-1.414-1.415L21.178 1.70703Z" />
-                                </>}
-                            </svg>
-                        </div>
-                    </Button>
-                </div>
-            )}
-        </Tooltip>
+        <ChatBarButton
+            tooltip={enabled ? "Disable Silent Message" : "Enable Silent Message"}
+            onClick={() => setEnabledValue(!enabled)}
+        >
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                style={{ scale: "1.2" }}
+            >
+                <path fill="currentColor" mask="url(#_)" d="M18 10.7101C15.1085 9.84957 13 7.17102 13 4c0-.30736.0198-.6101.0582-.907C12.7147 3.03189 12.3611 3 12 3 8.686 3 6 5.686 6 9v5c0 1.657-1.344 3-3 3v1h18v-1c-1.656 0-3-1.343-3-3v-3.2899ZM8.55493 19c.693 1.19 1.96897 2 3.44497 2s2.752-.81 3.445-2H8.55493ZM18.2624 5.50209 21 2.5V1h-4.9651v1.49791h2.4411L16 5.61088V7h5V5.50209h-2.7376Z" />
+                {!enabled && <>
+                    <mask id="_">
+                        <path fill="#fff" d="M0 0h24v24H0Z" />
+                        <path stroke="#000" stroke-width="5.99068" d="M0 24 24 0" />
+                    </mask>
+                    <path fill="var(--status-danger)" d="m21.178 1.70703 1.414 1.414L4.12103 21.593l-1.414-1.415L21.178 1.70703Z" />
+                </>}
+            </svg>
+        </ChatBarButton>
     );
-}
+};
 
 export default definePlugin({
     name: "SilentMessageToggle",
     authors: [Devs.Nuckyz, Devs.CatNoir],
     description: "Adds a button to the chat bar to toggle sending a silent message.",
-    dependencies: ["MessageEventsAPI"],
-
+    dependencies: ["MessageEventsAPI", "ChatInputButtonAPI"],
     settings,
-    patches: [
-        {
-            find: "ChannelTextAreaButtons",
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
-    ],
 
-    chatBarIcon: ErrorBoundary.wrap(SilentMessageToggle, { noop: true }),
+    start: () => addChatBarButton("SilentMessageToggle", SilentMessageToggle),
+    stop: () => removeChatBarButton("SilentMessageToggle")
 });

src/plugins/silentTyping/index.tsx

@@ -16,12 +16,12 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { addChatBarButton, ChatBarButton, removeChatBarButton } from "@api/ChatButtons";
 import { ApplicationCommandInputType, ApplicationCommandOptionType, findOption, sendBotMessage } from "@api/Commands";
 import { definePluginSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button, ButtonLooks, ButtonWrapperClasses, FluxDispatcher, React, Tooltip } from "@webpack/common";
+import { FluxDispatcher, React } from "@webpack/common";
 
 const settings = definePluginSettings({
     showIcon: {
@@ -37,45 +37,32 @@ const settings = definePluginSettings({
     }
 });
 
-function SilentTypingToggle(chatBoxProps: {
-    type: {
-        analyticsName: string;
-    };
-}) {
-    const { isEnabled } = settings.use(["isEnabled"]);
+const SilentTypingToggle: ChatBarButton = ({ isMainChat }) => {
+    const { isEnabled, showIcon } = settings.use(["isEnabled", "showIcon"]);
     const toggle = () => settings.store.isEnabled = !settings.store.isEnabled;
 
-    if (chatBoxProps.type.analyticsName !== "normal") return null;
+    if (!isMainChat || !showIcon) return null;
 
     return (
-        <Tooltip text={isEnabled ? "Disable Silent Typing" : "Enable Silent Typing"}>
-            {(tooltipProps: any) => (
-                <div style={{ display: "flex" }}>
-                    <Button
-                        {...tooltipProps}
-                        onClick={toggle}
-                        size=""
-                        look={ButtonLooks.BLANK}
-                        innerClassName={ButtonWrapperClasses.button}
-                        style={{ padding: "0 6px" }}
-                    >
-                        <div className={ButtonWrapperClasses.buttonWrapper}>
-                            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-                                <path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
-                                {isEnabled && <path d="M13 432L590 48" stroke="var(--red-500)" stroke-width="72" stroke-linecap="round" />}
-                            </svg>
-                        </div>
-                    </Button>
-                </div>
-            )}
-        </Tooltip>
+        <ChatBarButton
+            tooltip={isEnabled ? "Disable Silent Typing" : "Enable Silent Typing"}
+            onClick={toggle}
+        >
+            <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+                <path fill="currentColor" d="M528 448H48c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48h480c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48zM128 180v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm-336 96v-40c0-6.627-5.373-12-12-12H76c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12zm288 0v-40c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h232c6.627 0 12-5.373 12-12zm96 0v-40c0-6.627-5.373-12-12-12h-40c-6.627 0-12 5.373-12 12v40c0 6.627 5.373 12 12 12h40c6.627 0 12-5.373 12-12z" />
+                {isEnabled && <path d="M13 432L590 48" stroke="var(--red-500)" stroke-width="72" stroke-linecap="round" />}
+            </svg>
+        </ChatBarButton>
     );
-}
+};
 
 export default definePlugin({
     name: "SilentTyping",
     authors: [Devs.Ven, Devs.Rini],
     description: "Hide that you are typing",
+    dependencies: ["CommandsAPI", "ChatInputButtonAPI"],
+    settings,
+
     patches: [
         {
             find: '.dispatch({type:"TYPING_START_LOCAL"',
@@ -84,17 +71,8 @@ export default definePlugin({
                 replace: "startTyping:$self.startTyping,stop"
             }
         },
-        {
-            find: "ChannelTextAreaButtons",
-            predicate: () => settings.store.showIcon,
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
     ],
-    dependencies: ["CommandsAPI"],
-    settings,
+
     commands: [{
         name: "silenttype",
         description: "Toggle whether you're hiding that you're typing or not.",
@@ -120,5 +98,6 @@ export default definePlugin({
         FluxDispatcher.dispatch({ type: "TYPING_START_LOCAL", channelId });
     },
 
-    chatBarIcon: ErrorBoundary.wrap(SilentTypingToggle, { noop: true }),
+    start: () => addChatBarButton("SilentTyping", SilentTypingToggle),
+    stop: () => removeChatBarButton("SilentTyping"),
 });

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -371,6 +371,10 @@ export function Player() {
     if (!track || !device?.is_active || shouldHide)
         return null;
 
+    const exportTrackImageStyle = {
+        "--vc-spotify-track-image": `url(${track?.album?.image?.url || ""})`,
+    } as React.CSSProperties;
+
     return (
         <ErrorBoundary fallback={() => (
             <div className="vc-spotify-fallback">
@@ -378,7 +382,7 @@ export function Player() {
                 <p >Check the console for errors</p>
             </div>
         )}>
-            <div id={cl("player")}>
+            <div id={cl("player")} style={exportTrackImageStyle}>
                 <Info track={track} />
                 <SeekBar />
                 <Controls />

src/plugins/spotifyControls/index.tsx

@@ -31,7 +31,7 @@ function toggleHoverControls(value: boolean) {
 export default definePlugin({
     name: "SpotifyControls",
     description: "Adds a Spotify player above the account panel",
-    authors: [Devs.Ven, Devs.afn, Devs.KraXen72],
+    authors: [Devs.Ven, Devs.afn, Devs.KraXen72, Devs.Av32000],
     options: {
         hoverControls: {
             description: "Show controls on hover",

src/plugins/spotifyControls/spotifyStyles.css

@@ -170,9 +170,16 @@
     /* these importants are necessary, it applies a width and height through inline styles */
     height: 10px !important;
     width: 10px !important;
+    margin-top: 4px;
     background-color: var(--interactive-normal);
     border-color: var(--interactive-normal);
     color: var(--interactive-normal);
+    opacity: 0;
+    transition: opacity 0.1s;
+}
+
+#vc-spotify-progress-bar:hover > [class^="slider"] [class^="grabber"] {
+    opacity: 1;
 }
 
 #vc-spotify-progress-text {

src/plugins/superReactionTweaks/index.ts

@@ -7,6 +7,7 @@
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
+import { UserStore } from "@webpack/common";
 
 export const settings = definePluginSettings({
     superReactByDefault: {
@@ -49,7 +50,7 @@ export default definePlugin({
             find: ".trackEmojiSearchEmpty,200",
             replacement: {
                 match: /(\.trackEmojiSearchEmpty,200(?=.+?isBurstReaction:(\i).+?(\i===\i\.EmojiIntention.REACTION)).+?\[\2,\i\]=\i\.useState\().+?\)/,
-                replace: (_, rest, isBurstReactionVariable, isReactionIntention) => `${rest}$self.settings.store.superReactByDefault&&${isReactionIntention})`
+                replace: (_, rest, isBurstReactionVariable, isReactionIntention) => `${rest}$self.shouldSuperReactByDefault&&${isReactionIntention})`
             }
         }
     ],
@@ -59,5 +60,9 @@ export default definePlugin({
         if (settings.store.unlimitedSuperReactionPlaying) return true;
         if (playingCount <= settings.store.superReactionPlayingLimit) return true;
         return false;
+    },
+
+    get shouldSuperReactByDefault() {
+        return settings.store.superReactByDefault && UserStore.getCurrentUser().premiumType != null;
     }
 });

src/plugins/translate/TranslateIcon.tsx

@@ -16,9 +16,11 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { ChatBarButton } from "@api/ChatButtons";
+import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { openModal } from "@utils/modal";
-import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
+import { Alerts, Forms } from "@webpack/common";
 
 import { settings } from "./settings";
 import { TranslateModal } from "./TranslateModal";
@@ -37,42 +39,49 @@ export function TranslateIcon({ height = 24, width = 24, className }: { height?:
     );
 }
 
-export function TranslateChatBarIcon({ slateProps }: { slateProps: { type: { analyticsName: string; }; }; }) {
+export const TranslateChatBarIcon: ChatBarButton = ({ isMainChat }) => {
     const { autoTranslate } = settings.use(["autoTranslate"]);
 
-    if (slateProps.type.analyticsName !== "normal")
-        return null;
+    if (!isMainChat) return null;
 
-    const toggle = () => settings.store.autoTranslate = !autoTranslate;
+    const toggle = () => {
+        const newState = !autoTranslate;
+        settings.store.autoTranslate = newState;
+        if (newState && settings.store.showAutoTranslateAlert !== false)
+            Alerts.show({
+                title: "Vencord Auto-Translate Enabled",
+                body: <>
+                    <Forms.FormText>
+                        You just enabled auto translate (by right clicking the Translate icon). Any message you send will automatically be translated before being sent.
+                    </Forms.FormText>
+                    <Forms.FormText className={Margins.top16}>
+                        If this was an accident, disable it again, or it will change your message content before sending.
+                    </Forms.FormText>
+                </>,
+                cancelText: "Disable Auto-Translate",
+                confirmText: "Got it",
+                secondaryConfirmText: "Don't show again",
+                onConfirmSecondary: () => settings.store.showAutoTranslateAlert = false,
+                onCancel: () => settings.store.autoTranslate = false
+            });
+    };
 
     return (
-        <Tooltip text="Open Translate Modal">
-            {({ onMouseEnter, onMouseLeave }) => (
-                <div style={{ display: "flex" }}>
-                    <Button
-                        aria-haspopup="dialog"
-                        aria-label="Open Translate Modal"
-                        size=""
-                        look={ButtonLooks.BLANK}
-                        onMouseEnter={onMouseEnter}
-                        onMouseLeave={onMouseLeave}
-                        innerClassName={ButtonWrapperClasses.button}
-                        onClick={e => {
-                            if (e.shiftKey) return toggle();
+        <ChatBarButton
+            tooltip="Open Translate Modal"
+            onClick={e => {
+                if (e.shiftKey) return toggle();
 
-                            openModal(props => (
-                                <TranslateModal rootProps={props} />
-                            ));
-                        }}
-                        onContextMenu={() => toggle()}
-                        style={{ padding: "0 4px" }}
-                    >
-                        <div className={ButtonWrapperClasses.buttonWrapper}>
-                            <TranslateIcon className={cl({ "auto-translate": autoTranslate })} />
-                        </div>
-                    </Button>
-                </div>
-            )}
-        </Tooltip>
+                openModal(props => (
+                    <TranslateModal rootProps={props} />
+                ));
+            }}
+            onContextMenu={() => toggle()}
+            buttonProps={{
+                "aria-haspopup": "dialog"
+            }}
+        >
+            <TranslateIcon className={cl({ "auto-translate": autoTranslate, "chat-button": true })} />
+        </ChatBarButton>
     );
-}
+};

src/plugins/translate/index.tsx

@@ -18,11 +18,11 @@
 
 import "./styles.css";
 
-import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { addChatBarButton, removeChatBarButton } from "@api/ChatButtons";
+import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { addAccessory, removeAccessory } from "@api/MessageAccessories";
 import { addPreSendListener, removePreSendListener } from "@api/MessageEvents";
 import { addButton, removeButton } from "@api/MessagePopover";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { ChannelStore, Menu } from "@webpack/common";
@@ -32,7 +32,7 @@ import { TranslateChatBarIcon, TranslateIcon } from "./TranslateIcon";
 import { handleTranslate, TranslationAccessory } from "./TranslationAccessory";
 import { translate } from "./utils";
 
-const messageCtxPatch: NavContextMenuPatchCallback = (children, { message }) => () => {
+const messageCtxPatch: NavContextMenuPatchCallback = (children, { message }) => {
     if (!message.content) return;
 
     const group = findGroupChildrenByChildId("copy-text", children);
@@ -55,25 +55,18 @@ export default definePlugin({
     name: "Translate",
     description: "Translate messages with Google Translate",
     authors: [Devs.Ven],
-    dependencies: ["MessageAccessoriesAPI", "MessagePopoverAPI", "MessageEventsAPI"],
+    dependencies: ["MessageAccessoriesAPI", "MessagePopoverAPI", "MessageEventsAPI", "ChatInputButtonAPI"],
     settings,
+    contextMenus: {
+        "message": messageCtxPatch
+    },
     // not used, just here in case some other plugin wants it or w/e
     translate,
 
-    patches: [
-        {
-            find: "ChannelTextAreaButtons",
-            replacement: {
-                match: /(\i)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&,(()=>{try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}})()",
-            }
-        },
-    ],
-
     start() {
         addAccessory("vc-translation", props => <TranslationAccessory message={props.message} />);
 
-        addContextMenuPatch("message", messageCtxPatch);
+        addChatBarButton("vc-translate", TranslateChatBarIcon);
 
         addButton("vc-translate", message => {
             if (!message.content) return null;
@@ -100,14 +93,8 @@ export default definePlugin({
 
     stop() {
         removePreSendListener(this.preSend);
-        removeContextMenuPatch("message", messageCtxPatch);
+        removeChatBarButton("vc-translate");
         removeButton("vc-translate");
         removeAccessory("vc-translation");
     },
-
-    chatBarIcon: (slateProps: any) => (
-        <ErrorBoundary noop>
-            <TranslateChatBarIcon slateProps={slateProps} />
-        </ErrorBoundary>
-    )
 });

src/plugins/translate/settings.ts

@@ -49,4 +49,6 @@ export const settings = definePluginSettings({
         description: "Automatically translate your messages before sending. You can also shift/right click the translate button to toggle this",
         default: false
     }
-});
+}).withPrivateSettings<{
+    showAutoTranslateAlert: boolean;
+}>();

src/plugins/translate/styles.css

@@ -35,3 +35,7 @@
 .vc-trans-auto-translate {
     color: var(--green-360);
 }
+
+.vc-trans-chat-button {
+    scale: 1.085;
+}

src/plugins/typingIndicator/index.tsx

@@ -133,7 +133,7 @@ export default definePlugin({
         {
             find: "UNREAD_IMPORTANT:",
             replacement: {
-                match: /channel:(\i).{0,100}?channelEmoji,.{0,250}?\.children.{0,50}?:null/,
+                match: /\.name\),.{0,120}\.children.+?:null(?<=,channel:(\i).+?)/,
                 replace: "$&,$self.TypingIndicator($1.id)"
             }
         },