latest?

.eslintrc.json

@@ -62,7 +62,7 @@
         "indent": ["error", 4, { "SwitchCase": 1 }],
         "arrow-parens": ["error", "as-needed"],
         "eol-last": ["error", "always"],
-        "func-call-spacing": ["error", "never"],
+        "@typescript-eslint/func-call-spacing": ["error", "never"],
         "no-multi-spaces": "error",
         "no-trailing-spaces": "error",
         "no-whitespace-before-property": "error",

README.md

@@ -10,7 +10,7 @@ The cutest Discord client mod
 
 -   Super easy to install (Download Installer, open, click install button, done)
 -   100+ plugins built in: [See a list](https://vencord.dev/plugins)
-    -   Some highlights: SpotifyControls, GameActivityToggle, Experiments, NoTrack, MessageLogger, QuickReply, Free Emotes/Stickers, CustomCommands, ShowHiddenChannels, PronounDB
+    -   Some highlights: SpotifyControls, MessageLogger, Experiments, GameActivityToggle, Translate, NoTrack, QuickReply, Free Emotes/Stickers, PermissionsViewer, CustomCommands, ShowHiddenChannels, PronounDB
 -   Fairly lightweight despite the many inbuilt plugins
 -   Excellent Browser Support: Run Vencord in your Browser via extension or UserScript
 -   Works on any Discord branch: Stable, Canary or PTB all work (though for the best experience I recommend stable!)
@@ -32,12 +32,21 @@ Click the below button to install Vencord to the Discord Desktop app
 
 Or use the [UserScript](https://raw.githubusercontent.com/Vencord/builds/main/Vencord.user.js) - Please note that the CSS Editor, Themes loaded from remote sources and co. will not work in the UserScript. Use the extension if you need any of those
 
-## Installing our Desktop App
+<details>
+<summary>Alternative Downloads</summary>
+
+## Vencord Desktop
+
+> **Warning**
+> This is an alternative app. It currently doesn't support screensharing or keybinds. If you just want to install to the normal Discord Desktop app, scroll up
+
 
 As an alternative to the Discord Desktop app, Vencord also has its own standalone Desktop app that is snappier and lighter than Discord's official Desktop app. It is currently in beta and we have yet to implement some features like screensharing, but you can try the beta nonetheless
 
 [![Download Vencord Desktop](https://img.shields.io/github/v/release/Vencord/Desktop?label=Download%20Vencord%20Desktop&style=for-the-badge)](https://github.com/Vencord/Desktop#vencord-desktop)
 
+</details>
+
 ## Join our Support/Community Server
 
 [![Vencord Discord Server](https://invidget.switchblade.xyz/D9uwnFnqmd?theme=dark)](https://discord.gg/D9uwnFnqmd)
@@ -48,7 +57,7 @@ Discord is trademark of Discord Inc. and solely mentioned for the sake of descri
 Mention of it does not imply any affiliation with or endorsement by Discord Inc.
 
 <details>
-<summary>Using Vencord violates Discord's terms of service</summary> 
+<summary>Using Vencord violates Discord's terms of service</summary>
 
 Client modifications are against Discord’s Terms of Service.
 

browser/GMPolyfill.js

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

package.json

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

scripts/generatePluginList.ts

@@ -19,7 +19,7 @@
 import { Dirent, readdirSync, readFileSync, writeFileSync } from "fs";
 import { access, readFile } from "fs/promises";
 import { join } from "path";
-import { BigIntLiteral, createSourceFile, Identifier, isArrayLiteralExpression, isCallExpression, isExportAssignment, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isStringLiteral, isVariableStatement, NamedDeclaration, NodeArray, ObjectLiteralExpression, ScriptTarget, StringLiteral, SyntaxKind } from "typescript";
+import { BigIntLiteral, createSourceFile, Identifier, isArrayLiteralExpression, isCallExpression, isExportAssignment, isIdentifier, isObjectLiteralExpression, isPropertyAccessExpression, isPropertyAssignment, isSatisfiesExpression, isStringLiteral, isVariableStatement, NamedDeclaration, NodeArray, ObjectLiteralExpression, ScriptTarget, StringLiteral, SyntaxKind } from "typescript";
 
 interface Dev {
     name: string;
@@ -29,6 +29,7 @@ interface Dev {
 interface PluginData {
     name: string;
     description: string;
+    tags: string[];
     authors: Dev[];
     dependencies: string[];
     hasPatches: boolean;
@@ -65,9 +66,9 @@ function parseDevs() {
 
         const value = devsDeclaration.initializer.arguments[0];
 
-        if (!isObjectLiteralExpression(value)) return;
+        if (!isSatisfiesExpression(value) || !isObjectLiteralExpression(value.expression)) throw new Error("Failed to parse devs: not an object literal");
 
-        for (const prop of value.properties) {
+        for (const prop of value.expression.properties) {
             const name = (prop.name as Identifier).text;
             const value = isPropertyAssignment(prop) ? prop.initializer : prop;
 
@@ -106,6 +107,7 @@ async function parseFile(fileName: string) {
             hasCommands: false,
             enabledByDefault: false,
             required: false,
+            tags: [] as string[]
         } as PluginData;
 
         for (const prop of pluginObj.properties) {
@@ -128,7 +130,16 @@ async function parseFile(fileName: string) {
                     if (!isArrayLiteralExpression(value)) throw fail("authors is not an array literal");
                     data.authors = value.elements.map(e => {
                         if (!isPropertyAccessExpression(e)) throw fail("authors array contains non-property access expressions");
-                        return devs[getName(e)!];
+                        const d = devs[getName(e)!];
+                        if (!d) throw fail(`couldn't look up author ${getName(e)}`);
+                        return d;
+                    });
+                    break;
+                case "tags":
+                    if (!isArrayLiteralExpression(value)) throw fail("tags is not an array literal");
+                    data.tags = value.elements.map(e => {
+                        if (!isStringLiteral(e)) throw fail("tags array contains non-string literals");
+                        return e.text;
                     });
                     break;
                 case "dependencies":

src/Vencord.ts

@@ -37,8 +37,6 @@ import { checkForUpdates, update, UpdateLogger } from "./utils/updater";
 import { onceReady } from "./webpack";
 import { SettingsRouter } from "./webpack/common";
 
-export let Components: any;
-
 async function syncSettings() {
     if (
         Settings.cloud.settingsSync && // if it's enabled
@@ -65,7 +63,6 @@ async function syncSettings() {
 async function init() {
     await onceReady;
     startAllPlugins();
-    Components = await import("./components");
 
     syncSettings();
 

src/api/ContextMenu.ts

@@ -25,14 +25,14 @@ type ContextMenuPatchCallbackReturn = (() => void) | void;
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
  * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type NavContextMenuPatchCallback = (children: Array<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
+export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 /**
  * @param navId The navId of the context menu being patched
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
  * @returns A callback which is only ran once used to modify the context menu elements (Use to avoid duplicates)
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<React.ReactElement>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => ContextMenuPatchCallbackReturn;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -89,15 +89,18 @@ export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallba
 }
 
 /**
- * A helper function for finding the children array of a group nested inside a context menu based on the id of one of its childs
- * @param id The id of the child
+ * A helper function for finding the children array of a group nested inside a context menu based on the id(s) of its children
+ * @param id The id of the child. If an array is specified, all ids will be tried
  * @param children The context menu children
  */
-export function findGroupChildrenByChildId(id: string, children: Array<React.ReactElement>, _itemsArray?: Array<React.ReactElement>): Array<React.ReactElement> | null {
+export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null>, _itemsArray?: Array<ReactElement | null>): Array<ReactElement | null> | null {
     for (const child of children) {
         if (child == null) continue;
 
-        if (child.props?.id === id) return _itemsArray ?? null;
+        if (
+            (Array.isArray(id) && id.some(id => child.props?.id === id))
+            || child.props?.id === id
+        ) return _itemsArray ?? null;
 
         let nextChildren = child.props?.children;
         if (nextChildren) {
@@ -117,7 +120,7 @@ export function findGroupChildrenByChildId(id: string, children: Array<React.Rea
 interface ContextMenuProps {
     contextMenuApiArguments?: Array<any>;
     navId: string;
-    children: Array<ReactElement>;
+    children: Array<ReactElement | null>;
     "aria-label": string;
     onSelect: (() => void) | undefined;
     onClose: (callback: (...args: Array<any>) => any) => void;

src/api/MessageEvents.ts

@@ -18,24 +18,15 @@
 
 import { Logger } from "@utils/Logger";
 import { MessageStore } from "@webpack/common";
+import { CustomEmoji } from "@webpack/types";
 import type { Channel, Message } from "discord-types/general";
 import type { Promisable } from "type-fest";
 
 const MessageEventsLogger = new Logger("MessageEvents", "#e5c890");
 
-export interface Emoji {
-    require_colons: boolean,
-    originalName: string,
-    animated: boolean;
-    guildId: string,
-    name: string,
-    url: string,
-    id: string,
-}
-
 export interface MessageObject {
     content: string,
-    validNonShortcutEmojis: Emoji[];
+    validNonShortcutEmojis: CustomEmoji[];
     invalidEmojis: any[];
     tts: boolean;
 }

src/api/index.ts

@@ -28,6 +28,7 @@ import * as $MessagePopover from "./MessagePopover";
 import * as $Notices from "./Notices";
 import * as $Notifications from "./Notifications";
 import * as $ServerList from "./ServerList";
+import * as $Settings from "./Settings";
 import * as $SettingsStore from "./SettingsStore";
 import * as $Styles from "./Styles";
 
@@ -86,6 +87,10 @@ export const MessageDecorations = $MessageDecorations;
  * An API allowing you to add components to member list users, in both DM's and servers
  */
 export const MemberListDecorators = $MemberListDecorators;
+/**
+ * An API allowing you to persist data
+ */
+export const Settings = $Settings;
 /**
  * An API allowing you to read, manipulate and automatically update components based on Discord settings
  */

src/components/Icons.tsx

@@ -0,0 +1,148 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./iconStyles.css";
+
+import { classes } from "@utils/misc";
+import { i18n } from "@webpack/common";
+import type { PropsWithChildren, SVGProps } from "react";
+
+interface BaseIconProps extends IconProps {
+    viewBox: string;
+}
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+    className?: string;
+    height?: number;
+    width?: number;
+}
+
+function Icon({ height = 24, width = 24, className, children, viewBox, ...svgProps }: PropsWithChildren<BaseIconProps>) {
+    return (
+        <svg
+            className={classes(className, "vc-icon")}
+            role="img"
+            width={width}
+            height={height}
+            viewBox={viewBox}
+            {...svgProps}
+        >
+            {children}
+        </svg>
+    );
+}
+
+/**
+ * Discord's link icon, as seen in the Message context menu "Copy Message Link" option
+ */
+export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
+    return (
+        <Icon
+            height={height}
+            width={width}
+            className={classes(className, "vc-link-icon")}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none" fill-rule="evenodd">
+                <path fill="currentColor" d="M10.59 13.41c.41.39.41 1.03 0 1.42-.39.39-1.03.39-1.42 0a5.003 5.003 0 0 1 0-7.07l3.54-3.54a5.003 5.003 0 0 1 7.07 0 5.003 5.003 0 0 1 0 7.07l-1.49 1.49c.01-.82-.12-1.64-.4-2.42l.47-.48a2.982 2.982 0 0 0 0-4.24 2.982 2.982 0 0 0-4.24 0l-3.53 3.53a2.982 2.982 0 0 0 0 4.24zm2.82-4.24c.39-.39 1.03-.39 1.42 0a5.003 5.003 0 0 1 0 7.07l-3.54 3.54a5.003 5.003 0 0 1-7.07 0 5.003 5.003 0 0 1 0-7.07l1.49-1.49c-.01.82.12 1.64.4 2.43l-.47.47a2.982 2.982 0 0 0 0 4.24 2.982 2.982 0 0 0 4.24 0l3.53-3.53a2.982 2.982 0 0 0 0-4.24.973.973 0 0 1 0-1.42z" />
+                <rect width={width} height={height} />
+            </g>
+        </Icon>
+    );
+}
+
+/**
+ * Discord's copy icon, as seen in the user popout right of the username when clicking
+ * your own username in the bottom left user panel
+ */
+export function CopyIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-copy-icon")}
+            viewBox="0 0 24 24"
+        >
+            <g fill="currentColor">
+                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
+                <path d="M15 5H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" />
+            </g>
+        </Icon>
+    );
+}
+
+/**
+ * Discord's open external icon, as seen in the user profile connections
+ */
+export function OpenExternalIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-open-external-icon")}
+            viewBox="0 0 24 24"
+        >
+            <polygon
+                fill="currentColor"
+                fill-rule="nonzero"
+                points="13 20 11 20 11 8 5.5 13.5 4.08 12.08 12 4.16 19.92 12.08 18.5 13.5 13 8"
+            />
+        </Icon>
+    );
+}
+
+export function ImageIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-image-icon")}
+            viewBox="0 0 24 24"
+        >
+            <path fill="currentColor" d="M21,19V5c0,-1.1 -0.9,-2 -2,-2H5c-1.1,0 -2,0.9 -2,2v14c0,1.1 0.9,2 2,2h14c1.1,0 2,-0.9 2,-2zM8.5,13.5l2.5,3.01L14.5,12l4.5,6H5l3.5,-4.5z" />
+        </Icon>
+    );
+}
+
+export function InfoIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            className={classes(props.className, "vc-info-icon")}
+            viewBox="0 0 12 12"
+        >
+            <path fill="currentColor" d="M6 1C3.243 1 1 3.244 1 6c0 2.758 2.243 5 5 5s5-2.242 5-5c0-2.756-2.243-5-5-5zm0 2.376a.625.625 0 110 1.25.625.625 0 010-1.25zM7.5 8.5h-3v-1h1V6H5V5h1a.5.5 0 01.5.5v2h1v1z" />
+        </Icon>
+    );
+}
+
+export function OwnerCrownIcon(props: IconProps) {
+    return (
+        <Icon
+            aria-label={i18n.Messages.GUILD_OWNER}
+            {...props}
+            className={classes(props.className, "vc-owner-crown-icon")}
+            role="img"
+            viewBox="0 0 16 16"
+        >
+            <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M13.6572 5.42868C13.8879 5.29002 14.1806 5.30402 14.3973 5.46468C14.6133 5.62602 14.7119 5.90068 14.6473 6.16202L13.3139 11.4954C13.2393 11.7927 12.9726 12.0007 12.6666 12.0007H3.33325C3.02725 12.0007 2.76058 11.792 2.68592 11.4954L1.35258 6.16202C1.28792 5.90068 1.38658 5.62602 1.60258 5.46468C1.81992 5.30468 2.11192 5.29068 2.34325 5.42868L5.13192 7.10202L7.44592 3.63068C7.46173 3.60697 7.48377 3.5913 7.50588 3.57559C7.5192 3.56612 7.53255 3.55663 7.54458 3.54535L6.90258 2.90268C6.77325 2.77335 6.77325 2.56068 6.90258 2.43135L7.76458 1.56935C7.89392 1.44002 8.10658 1.44002 8.23592 1.56935L9.09792 2.43135C9.22725 2.56068 9.22725 2.77335 9.09792 2.90268L8.45592 3.54535C8.46794 3.55686 8.48154 3.56651 8.49516 3.57618C8.51703 3.5917 8.53897 3.60727 8.55458 3.63068L10.8686 7.10202L13.6572 5.42868ZM2.66667 12.6673H13.3333V14.0007H2.66667V12.6673Z"
+            />
+        </Icon>
+    );
+}

src/components/PluginSettings/PluginModal.tsx

@@ -18,6 +18,7 @@
 
 import { generateId } from "@api/Commands";
 import { useSettings } from "@api/Settings";
+import { disableStyle, enableStyle } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
 import { proxyLazy } from "@utils/lazy";
@@ -40,6 +41,7 @@ import {
     SettingSliderComponent,
     SettingTextComponent
 } from "./components";
+import hideBotTagStyle from "./userPopoutHideBotTag.css?managed";
 
 const UserSummaryItem = LazyComponent(() => findByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 const AvatarStyles = findByPropsLazy("moreUsers", "emptyUser", "avatarContainer", "clickableAvatar");
@@ -50,11 +52,12 @@ interface PluginModalProps extends ModalProps {
     onRestartNeeded(): void;
 }
 
-/** To stop discord making unwanted requests... */
-function makeDummyUser(user: { name: string, id: BigInt; }) {
+function makeDummyUser(user: { username: string; id?: string; avatar?: string; }) {
     const newUser = new UserRecord({
-        username: user.name,
-        id: generateId(),
+        username: user.username,
+        id: user.id ?? generateId(),
+        avatar: user.avatar,
+        /** To stop discord making unwanted requests... */
         bot: true,
     });
     FluxDispatcher.dispatch({
@@ -89,14 +92,27 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
     const hasSettings = Boolean(pluginSettings && plugin.options);
 
     React.useEffect(() => {
+        enableStyle(hideBotTagStyle);
+
+        let originalUser: User;
         (async () => {
             for (const user of plugin.authors.slice(0, 6)) {
                 const author = user.id
-                    ? await UserUtils.fetchUser(`${user.id}`).catch(() => makeDummyUser(user))
-                    : makeDummyUser(user);
+                    ? await UserUtils.fetchUser(`${user.id}`)
+                        // only show name & pfp and no actions so users cannot harass plugin devs for support (send dms, add as friend, etc)
+                        .then(u => (originalUser = u, makeDummyUser(u)))
+                        .catch(() => makeDummyUser({ username: user.name }))
+                    : makeDummyUser({ username: user.name });
+
                 setAuthors(a => [...a, author]);
             }
         })();
+
+        return () => {
+            disableStyle(hideBotTagStyle);
+            if (originalUser)
+                FluxDispatcher.dispatch({ type: "USER_UPDATE", user: originalUser });
+        };
     }, []);
 
     async function saveAndClose() {
@@ -129,6 +145,8 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
             return <Forms.FormText>There are no settings for this plugin.</Forms.FormText>;
         } else {
             const options = Object.entries(plugin.options).map(([key, setting]) => {
+                if (setting.hidden) return null;
+
                 function onChange(newValue: any) {
                     setTempSettings(s => ({ ...s, [key]: newValue }));
                 }

src/components/PluginSettings/index.tsx

@@ -20,20 +20,18 @@ import "./styles.css";
 
 import * as DataStore from "@api/DataStore";
 import { showNotice } from "@api/Notices";
-import { useSettings } from "@api/Settings";
+import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
-import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Badge } from "@components/PluginSettings/components";
 import PluginModal from "@components/PluginSettings/PluginModal";
 import { Switch } from "@components/Switch";
+import { SettingsTab } from "@components/VencordSettings/shared";
 import { ChangeList } from "@utils/ChangeList";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { openModalLazy } from "@utils/modal";
-import { onlyOnce } from "@utils/onlyOnce";
 import { LazyComponent, useAwaiter } from "@utils/react";
 import { Plugin } from "@utils/types";
 import { findByCode, findByPropsLazy } from "@webpack";
@@ -96,7 +94,7 @@ interface PluginCardProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 function PluginCard({ plugin, disabled, onRestartNeeded, onMouseEnter, onMouseLeave, isNew }: PluginCardProps) {
-    const settings = useSettings([`plugins.${plugin.name}.enabled`]).plugins[plugin.name];
+    const settings = Settings.plugins[plugin.name];
 
     const isEnabled = () => settings.enabled ?? false;
 
@@ -179,7 +177,7 @@ enum SearchStatus {
     DISABLED
 }
 
-export default ErrorBoundary.wrap(function PluginSettings() {
+export default function PluginSettings() {
     const settings = useSettings();
     const changes = React.useMemo(() => new ChangeList<string>(), []);
 
@@ -230,9 +228,12 @@ export default ErrorBoundary.wrap(function PluginSettings() {
         if (enabled && searchValue.status === SearchStatus.DISABLED) return false;
         if (!enabled && searchValue.status === SearchStatus.ENABLED) return false;
         if (!searchValue.value.length) return true;
+
+        const v = searchValue.value.toLowerCase();
         return (
-            plugin.name.toLowerCase().includes(searchValue.value.toLowerCase()) ||
-            plugin.description.toLowerCase().includes(searchValue.value.toLowerCase())
+            plugin.name.toLowerCase().includes(v) ||
+            plugin.description.toLowerCase().includes(v) ||
+            plugin.tags?.some(t => t.toLowerCase().includes(v))
         );
     };
 
@@ -260,6 +261,9 @@ export default ErrorBoundary.wrap(function PluginSettings() {
         requiredPlugins = [];
 
         for (const p of sortedPlugins) {
+            if (!p.options && p.name.endsWith("API") && searchValue.value !== "API")
+                continue;
+
             if (!pluginFilter(p)) continue;
 
             const isRequired = p.required || depMap[p.name]?.some(d => settings.plugins[d].enabled);
@@ -300,7 +304,7 @@ export default ErrorBoundary.wrap(function PluginSettings() {
     }
 
     return (
-        <Forms.FormSection className={Margins.top16}>
+        <SettingsTab title="Plugins">
             <ReloadRequiredCard required={changes.hasChanges} />
 
             <Forms.FormTitle tag="h5" className={classes(Margins.top20, Margins.bottom8)}>
@@ -339,12 +343,9 @@ export default ErrorBoundary.wrap(function PluginSettings() {
             <div className={cl("grid")}>
                 {requiredPlugins}
             </div>
-        </Forms.FormSection >
+        </SettingsTab >
     );
-}, {
-    message: "Failed to render the Plugin Settings. If this persists, try using the installer to reinstall!",
-    onError: onlyOnce(handleComponentFailed),
-});
+}
 
 function makeDependencyList(deps: string[]) {
     return (

src/components/PluginSettings/userPopoutHideBotTag.css

@@ -0,0 +1,3 @@
+[class|="userPopoutOuter"] [class*="botTag"] {
+    display: none;
+}

src/components/VencordSettings/BackupAndRestoreTab.tsx

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

src/components/VencordSettings/CloudTab.tsx

@@ -19,13 +19,14 @@
 import { showNotification } from "@api/Notifications";
 import { Settings, useSettings } from "@api/Settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
 import { authorizeCloud, cloudLogger, deauthorizeCloud, getCloudAuth, getCloudUrl } from "@utils/cloud";
 import { Margins } from "@utils/margins";
 import { deleteCloudSettings, getCloudSettings, putCloudSettings } from "@utils/settingsSync";
 import { Alerts, Button, Forms, Switch, Tooltip } from "@webpack/common";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 function validateUrl(url: string) {
     try {
         new URL(url);
@@ -114,7 +115,7 @@ function CloudTab() {
     const settings = useSettings(["cloud.authenticated", "cloud.url"]);
 
     return (
-        <>
+        <SettingsTab title="Vencord Cloud">
             <Forms.FormSection title="Cloud Settings" className={Margins.top16}>
                 <Forms.FormText variant="text-md/normal" className={Margins.bottom20}>
                     Vencord comes with a cloud integration that adds goodies like settings sync across devices.
@@ -157,8 +158,8 @@ function CloudTab() {
                 <Forms.FormDivider className={Margins.top16} />
             </Forms.FormSection >
             <SettingsSyncSection />
-        </>
+        </SettingsTab>
     );
 }
 
-export default ErrorBoundary.wrap(CloudTab);
+export default wrapTab(CloudTab, "Cloud");

src/components/VencordSettings/PatchHelperTab.tsx

@@ -16,16 +16,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { CheckedTextInput } from "@components/CheckedTextInput";
 import { debounce } from "@utils/debounce";
 import { Margins } from "@utils/margins";
 import { canonicalizeMatch, canonicalizeReplace } from "@utils/patches";
 import { makeCodeblock } from "@utils/text";
 import { ReplaceFn } from "@utils/types";
 import { search } from "@webpack";
-import { Button, Clipboard, Forms, Parser, React, Switch, Text, TextInput } from "@webpack/common";
+import { Button, Clipboard, Forms, Parser, React, Switch, TextInput } from "@webpack/common";
 
-import { CheckedTextInput } from "./CheckedTextInput";
-import ErrorBoundary from "./ErrorBoundary";
+import { SettingsTab, wrapTab } from "./shared";
 
 // Do not include diff in non dev builds (side effects import)
 if (IS_DEV) {
@@ -258,8 +258,7 @@ function PatchHelper() {
     }
 
     return (
-        <Forms.FormSection>
-            <Text variant="heading-md/normal" tag="h2" className={Margins.bottom8}>Patch Helper</Text>
+        <SettingsTab title="Patch Helper">
             <Forms.FormTitle>find</Forms.FormTitle>
             <TextInput
                 type="text"
@@ -304,8 +303,8 @@ function PatchHelper() {
                     <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
                 </>
             )}
-        </Forms.FormSection>
+        </SettingsTab>
     );
 }
 
-export default IS_DEV ? ErrorBoundary.wrap(PatchHelper) : null;
+export default IS_DEV ? wrapTab(PatchHelper, "PatchHelper") : null;

src/components/VencordSettings/PluginsTab.tsx

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

src/components/VencordSettings/ThemesTab.tsx

@@ -17,13 +17,14 @@
 */
 
 import { useSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
 import { useAwaiter } from "@utils/react";
 import { findLazy } from "@webpack";
 import { Card, Forms, React, TextArea } from "@webpack/common";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 const TextAreaProps = findLazy(m => typeof m.textarea === "string");
 
 function Validator({ link }: { link: string; }) {
@@ -74,8 +75,8 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
     );
 }
 
-export default ErrorBoundary.wrap(function () {
-    const settings = useSettings();
+function ThemesTab() {
+    const settings = useSettings(["themeLinks"]);
     const [themeText, setThemeText] = React.useState(settings.themeLinks.join("\n"));
 
     function onBlur() {
@@ -89,7 +90,7 @@ export default ErrorBoundary.wrap(function () {
     }
 
     return (
-        <>
+        <SettingsTab title="Themes">
             <Card className="vc-settings-card vc-text-selectable">
                 <Forms.FormTitle tag="h5">Paste links to .theme.css files here</Forms.FormTitle>
                 <Forms.FormText>One link per line</Forms.FormText>
@@ -124,6 +125,8 @@ export default ErrorBoundary.wrap(function () {
                 onBlur={onBlur}
             />
             <Validators themeLinks={settings.themeLinks} />
-        </>
+        </SettingsTab>
     );
-});
+}
+
+export default wrapTab(ThemesTab, "Themes");

src/components/VencordSettings/UpdaterTab.tsx

@@ -17,21 +17,20 @@
 */
 
 import { useSettings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { ErrorCard } from "@components/ErrorCard";
 import { Flex } from "@components/Flex";
-import { handleComponentFailed } from "@components/handleComponentFailed";
 import { Link } from "@components/Link";
 import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import { relaunch } from "@utils/native";
-import { onlyOnce } from "@utils/onlyOnce";
 import { useAwaiter } from "@utils/react";
 import { changes, checkForUpdates, getRepo, isNewer, update, updateError, UpdateLogger } from "@utils/updater";
 import { Alerts, Button, Card, Forms, Parser, React, Switch, Toasts } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>>, action: () => any) {
     return async () => {
         dispatcher(true);
@@ -199,7 +198,7 @@ function Updater() {
     };
 
     return (
-        <Forms.FormSection className={Margins.top16}>
+        <SettingsTab title="Vencord Updater">
             <Forms.FormTitle tag="h5">Updater Settings</Forms.FormTitle>
             <Switch
                 value={settings.notifyAboutUpdates}
@@ -246,11 +245,8 @@ function Updater() {
             <Forms.FormTitle tag="h5">Updates</Forms.FormTitle>
 
             {isNewer ? <Newer {...commonProps} /> : <Updatable {...commonProps} />}
-        </Forms.FormSection >
+        </SettingsTab>
     );
 }
 
-export default IS_WEB ? null : ErrorBoundary.wrap(Updater, {
-    message: "Failed to render the Updater. If this persists, try using the installer to reinstall!",
-    onError: onlyOnce(handleComponentFailed),
-});
+export default IS_WEB ? null : wrapTab(Updater, "Updater");

src/components/VencordSettings/VencordTab.tsx

@@ -21,7 +21,6 @@ import { openNotificationLogModal } from "@api/Notifications/notificationLog";
 import { Settings, useSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import DonateButton from "@components/DonateButton";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { ErrorCard } from "@components/ErrorCard";
 import { Margins } from "@utils/margins";
 import { identity } from "@utils/misc";
@@ -29,6 +28,8 @@ import { relaunch, showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
 import { Button, Card, Forms, React, Select, Slider, Switch } from "@webpack/common";
 
+import { SettingsTab, wrapTab } from "./shared";
+
 const cl = classNameFactory("vc-settings-");
 
 const DEFAULT_DONATE_IMAGE = "https://cdn.discordapp.com/emojis/1026533090627174460.png";
@@ -97,7 +98,7 @@ function VencordSettings() {
         ];
 
     return (
-        <React.Fragment>
+        <SettingsTab title="Vencord Settings">
             <DonateCard image={donateImage} />
             <Forms.FormSection title="Quick Actions">
                 <Card className={cl("quick-actions-card")}>
@@ -153,7 +154,7 @@ function VencordSettings() {
 
 
             {typeof Notification !== "undefined" && <NotificationSection settings={settings.notifications} />}
-        </React.Fragment>
+        </SettingsTab>
     );
 }
 
@@ -263,4 +264,4 @@ function DonateCard({ image }: DonateCardProps) {
     );
 }
 
-export default ErrorBoundary.wrap(VencordSettings);
+export default wrapTab(VencordSettings, "Vencord Settings");

src/components/VencordSettings/index.tsx

@@ -1,96 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import "./settingsStyles.css";
-
-import { classNameFactory } from "@api/Styles";
-import ErrorBoundary from "@components/ErrorBoundary";
-import { handleComponentFailed } from "@components/handleComponentFailed";
-import { isMobile } from "@utils/misc";
-import { onlyOnce } from "@utils/onlyOnce";
-import { Forms, SettingsRouter, TabBar, Text } from "@webpack/common";
-
-import BackupRestoreTab from "./BackupRestoreTab";
-import CloudTab from "./CloudTab";
-import PluginsTab from "./PluginsTab";
-import ThemesTab from "./ThemesTab";
-import Updater from "./Updater";
-import VencordSettings from "./VencordTab";
-
-const cl = classNameFactory("vc-settings-");
-
-interface SettingsProps {
-    tab: string;
-}
-
-interface SettingsTab {
-    name: string;
-    component?: React.ComponentType;
-}
-
-const SettingsTabs: Record<string, SettingsTab> = {
-    VencordSettings: { name: "Vencord", component: () => <VencordSettings /> },
-    VencordPlugins: { name: "Plugins", component: () => <PluginsTab /> },
-    VencordThemes: { name: "Themes", component: () => <ThemesTab /> },
-    VencordUpdater: { name: "Updater" }, // Only show updater if IS_WEB is false
-    VencordCloud: { name: "Cloud", component: () => <CloudTab /> },
-    VencordSettingsSync: { name: "Backup & Restore", component: () => <BackupRestoreTab /> }
-};
-
-if (!IS_WEB) SettingsTabs.VencordUpdater.component = () => Updater && <Updater />;
-
-function Settings(props: SettingsProps) {
-    const { tab = "VencordSettings" } = props;
-
-    const CurrentTab = SettingsTabs[tab]?.component ?? null;
-    if (isMobile) {
-        return CurrentTab && <CurrentTab />;
-    }
-
-    return <Forms.FormSection>
-        <Text variant="heading-lg/semibold" style={{ color: "var(--header-primary)" }} tag="h2">Vencord Settings</Text>
-
-        <TabBar
-            type="top"
-            look="brand"
-            className={cl("tab-bar")}
-            selectedItem={tab}
-            onItemSelect={SettingsRouter.open}
-        >
-            {Object.entries(SettingsTabs).map(([key, { name, component }]) => {
-                if (!component) return null;
-                return <TabBar.Item
-                    id={key}
-                    className={cl("tab-bar-item")}
-                    key={key}>
-                    {name}
-                </TabBar.Item>;
-            })}
-        </TabBar>
-        <Forms.FormDivider />
-        {CurrentTab && <CurrentTab />}
-    </Forms.FormSection >;
-}
-
-const onError = onlyOnce(handleComponentFailed);
-
-export default function (props: SettingsProps) {
-    return <ErrorBoundary onError={onError}>
-        <Settings tab={props.tab} />
-    </ErrorBoundary>;
-}

src/components/VencordSettings/settingsStyles.css

@@ -29,14 +29,12 @@
 .vc-settings-card {
     padding: 1em;
     margin-bottom: 1em;
-    margin-top: 1em;
 }
 
 .vc-backup-restore-card {
     background-color: var(--info-warning-background);
     border-color: var(--info-warning-foreground);
     color: var(--info-warning-text);
-    margin-top: 0;
 }
 
 .vc-settings-theme-links {
@@ -59,7 +57,7 @@
 }
 
 .vc-text-selectable,
-.vc-text-selectable :not(a, button, a *, button *) {
+.vc-text-selectable :not(a, button, a *, button *, input, input *) {
     /* make text selectable, silly discord makes the entirety of settings not selectable */
     user-select: text;
 

src/components/VencordSettings/shared.tsx

@@ -0,0 +1,51 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./settingsStyles.css";
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { handleComponentFailed } from "@components/handleComponentFailed";
+import { Margins } from "@utils/margins";
+import { onlyOnce } from "@utils/onlyOnce";
+import { Forms, Text } from "@webpack/common";
+import type { ComponentType, PropsWithChildren } from "react";
+
+export function SettingsTab({ title, children }: PropsWithChildren<{ title: string; }>) {
+    return (
+        <Forms.FormSection>
+            <Text
+                variant="heading-lg/semibold"
+                tag="h2"
+                className={Margins.bottom16}
+            >
+                {title}
+            </Text>
+
+            {children}
+        </Forms.FormSection>
+    );
+}
+
+const onError = onlyOnce(handleComponentFailed);
+
+export function wrapTab(component: ComponentType, tab: string) {
+    return ErrorBoundary.wrap(component, {
+        message: `Failed to render the ${tab} tab. If this issue persists, try using the installer to reinstall!`,
+        onError,
+    });
+}

src/components/iconStyles.css

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

src/components/index.ts

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

src/plugins/apiBadges.tsx

@@ -24,15 +24,13 @@ import { Heart } from "@components/Heart";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
+import { isPluginDev } from "@utils/misc";
 import { closeModal, Modals, openModal } from "@utils/modal";
 import definePlugin from "@utils/types";
 import { Forms, Toasts } from "@webpack/common";
 
 const CONTRIBUTOR_BADGE = "https://cdn.discordapp.com/attachments/1033680203433660458/1092089947126780035/favicon.png";
 
-/** List of vencord contributor IDs */
-const contributorIds: string[] = Object.values(Devs).map(d => d.id.toString());
-
 const ContributorBadge: ProfileBadge = {
     description: "Vencord Contributor",
     image: CONTRIBUTOR_BADGE,
@@ -43,7 +41,7 @@ const ContributorBadge: ProfileBadge = {
             transform: "scale(0.9)" // The image is a bit too big compared to default badges
         }
     },
-    shouldShow: ({ user }) => contributorIds.includes(user.id),
+    shouldShow: ({ user }) => isPluginDev(user.id),
     link: "https://github.com/Vendicated/Vencord"
 };
 
@@ -82,8 +80,8 @@ export default definePlugin({
             find: "Messages.PROFILE_USER_BADGES,role:",
             replacement: [
                 {
-                    match: /null==\i\?void 0:(\i)\.getBadges\(\)/,
-                    replace: (_, badgesMod) => `Vencord.Api.Badges._getBadges(arguments[0]).concat(${badgesMod}?.getBadges()??[])`,
+                    match: /(?<=(\i)\.isTryItOutFlow,)(.{0,300})null==\i\?void 0:(\i)\.getBadges\(\)/,
+                    replace: (_, props, restCode, badgesMod) => `vencordProps=${props},${restCode}Vencord.Api.Badges._getBadges(vencordProps).concat(${badgesMod}?.getBadges()??[])`,
                 },
                 {
                     // alt: "", aria-hidden: false, src: originalSrc

src/plugins/apiServerList.ts

@@ -32,7 +32,7 @@ export default definePlugin({
             }
         },
         {
-            find: "Messages.SERVERS",
+            find: "Messages.SERVERS,children",
             replacement: {
                 match: /(Messages\.SERVERS,children:)(.+?default:return null\}\}\)\))/,
                 replace: "$1Vencord.Api.ServerList.renderAll(Vencord.Api.ServerList.ServerListRenderPosition.In).concat($2)"

src/plugins/emoteCloner.tsx

@@ -21,17 +21,101 @@ import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
 import { Margins } from "@utils/margins";
-import { ModalContent, ModalHeader, ModalRoot, openModal } from "@utils/modal";
+import { ModalContent, ModalHeader, ModalRoot, openModalLazy } from "@utils/modal";
 import definePlugin from "@utils/types";
-import { findByCodeLazy, findByPropsLazy } from "@webpack";
-import { Forms, GuildStore, Menu, PermissionStore, React, Toasts, Tooltip, UserStore } from "@webpack/common";
+import { findByCodeLazy, findStoreLazy } from "@webpack";
+import { EmojiStore, FluxDispatcher, Forms, GuildStore, Menu, PermissionStore, React, RestAPI, Toasts, Tooltip, UserStore } from "@webpack/common";
+import { Promisable } from "type-fest";
 
 const MANAGE_EMOJIS_AND_STICKERS = 1n << 30n;
 
-const GuildEmojiStore = findByPropsLazy("getGuilds", "getGuildEmoji");
+const StickersStore = findStoreLazy("StickersStore");
 const uploadEmoji = findByCodeLazy('"EMOJI_UPLOAD_START"', "GUILD_EMOJIS(");
 
-function getGuildCandidates(isAnimated: boolean) {
+interface Sticker {
+    t: "Sticker";
+    description: string;
+    format_type: number;
+    guild_id: string;
+    id: string;
+    name: string;
+    tags: string;
+    type: number;
+}
+
+interface Emoji {
+    t: "Emoji";
+    id: string;
+    name: string;
+    isAnimated: boolean;
+}
+
+type Data = Emoji | Sticker;
+
+const StickerExt = [, "png", "png", "json", "gif"] as const;
+
+function getUrl(data: Data) {
+    if (data.t === "Emoji")
+        return `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${data.id}.${data.isAnimated ? "gif" : "png"}`;
+
+    return `${location.origin}/stickers/${data.id}.${StickerExt[data.format_type]}`;
+}
+
+async function fetchSticker(id: string) {
+    const cached = StickersStore.getStickerById(id);
+    if (cached) return cached;
+
+    const { body } = await RestAPI.get({
+        url: `/stickers/${id}`
+    });
+
+    FluxDispatcher.dispatch({
+        type: "STICKER_FETCH_SUCCESS",
+        sticker: body
+    });
+
+    return body as Sticker;
+}
+
+async function cloneSticker(guildId: string, sticker: Sticker) {
+    const data = new FormData();
+    data.append("name", sticker.name);
+    data.append("tags", sticker.tags);
+    data.append("description", sticker.description);
+    data.append("file", await fetchBlob(getUrl(sticker)));
+
+    const { body } = await RestAPI.post({
+        url: `/guilds/${guildId}/stickers`,
+        body: data,
+    });
+
+    FluxDispatcher.dispatch({
+        type: "GUILD_STICKERS_CREATE_SUCCESS",
+        guildId,
+        sticker: {
+            ...body,
+            user: UserStore.getCurrentUser()
+        }
+    });
+}
+
+async function cloneEmoji(guildId: string, emoji: Emoji) {
+    const data = await fetchBlob(getUrl(emoji));
+
+    const dataUrl = await new Promise<string>(resolve => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result as string);
+        reader.readAsDataURL(data);
+    });
+
+    return uploadEmoji({
+        guildId,
+        name: emoji.name.split("~")[0],
+        image: dataUrl
+    });
+}
+
+function getGuildCandidates(data: Data) {
     const meId = UserStore.getCurrentUser().id;
 
     return Object.values(GuildStore.getGuilds()).filter(g => {
@@ -39,8 +123,12 @@ function getGuildCandidates(isAnimated: boolean) {
             BigInt(PermissionStore.getGuildPermissions({ id: g.id }) & MANAGE_EMOJIS_AND_STICKERS) === MANAGE_EMOJIS_AND_STICKERS;
         if (!canCreate) return false;
 
+        if (data.t === "Sticker") return true;
+
+        const { isAnimated } = data as Emoji;
+
         const emojiSlots = g.getMaxEmojiSlots();
-        const { emojis } = GuildEmojiStore.getGuilds()[g.id];
+        const { emojis } = EmojiStore.getGuilds()[g.id];
 
         let count = 0;
         for (const emoji of emojis)
@@ -49,33 +137,34 @@ function getGuildCandidates(isAnimated: boolean) {
     }).sort((a, b) => a.name.localeCompare(b.name));
 }
 
-async function doClone(guildId: string, id: string, name: string, isAnimated: boolean) {
-    const data = await fetch(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${id}.${isAnimated ? "gif" : "png"}`)
-        .then(r => r.blob());
-    const reader = new FileReader();
+async function fetchBlob(url: string) {
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(`Failed to fetch ${url} - ${res.status}`);
 
-    reader.onload = () => {
-        uploadEmoji({
-            guildId,
-            name: name.split("~")[0],
-            image: reader.result
-        }).then(() => {
-            Toasts.show({
-                message: `Successfully cloned ${name}!`,
-                type: Toasts.Type.SUCCESS,
-                id: Toasts.genId()
-            });
-        }).catch((e: any) => {
-            new Logger("EmoteCloner").error("Failed to upload emoji", e);
-            Toasts.show({
-                message: "Oopsie something went wrong :( Check console!!!",
-                type: Toasts.Type.FAILURE,
-                id: Toasts.genId()
-            });
+    return res.blob();
+}
+
+async function doClone(guildId: string, data: Sticker | Emoji) {
+    try {
+        if (data.t === "Sticker")
+            await cloneSticker(guildId, data);
+        else
+            await cloneEmoji(guildId, data);
+
+        Toasts.show({
+            message: `Successfully cloned ${data.name} to ${GuildStore.getGuild(guildId)?.name ?? "your server"}!`,
+            type: Toasts.Type.SUCCESS,
+            id: Toasts.genId()
         });
-    };
-
-    reader.readAsDataURL(data);
+    } catch (e) {
+        new Logger("EmoteCloner").error("Failed to clone", data.name, "to", guildId, e);
+        Toasts.show({
+            message: "Oopsie something went wrong :( Check console!!!",
+            type: Toasts.Type.FAILURE,
+            id: Toasts.genId()
+        });
+    }
 }
 
 const getFontSize = (s: string) => {
@@ -86,22 +175,26 @@ const getFontSize = (s: string) => {
 
 const nameValidator = /^\w+$/i;
 
-function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: string; isAnimated: boolean; }) {
+function CloneModal({ data }: { data: Sticker | Emoji; }) {
     const [isCloning, setIsCloning] = React.useState(false);
-    const [name, setName] = React.useState(emojiName);
+    const [name, setName] = React.useState(data.name);
 
     const [x, invalidateMemo] = React.useReducer(x => x + 1, 0);
 
-    const guilds = React.useMemo(() => getGuildCandidates(isAnimated), [isAnimated, x]);
+    const guilds = React.useMemo(() => getGuildCandidates(data), [data.id, x]);
 
     return (
         <>
             <Forms.FormTitle className={Margins.top20}>Custom Name</Forms.FormTitle>
             <CheckedTextInput
                 value={name}
-                onChange={setName}
+                onChange={v => {
+                    data.name = v;
+                    setName(v);
+                }}
                 validate={v =>
-                    (v.length > 1 && v.length < 32 && nameValidator.test(v))
+                    (data.t === "Emoji" && v.length > 2 && v.length < 32 && nameValidator.test(v))
+                    || (data.t === "Sticker" && v.length > 2 && v.length < 30)
                     || "Name must be between 2 and 32 characters and only contain alphanumeric characters"
                 }
             />
@@ -135,7 +228,7 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
                                 }}
                                 onClick={isCloning ? void 0 : async () => {
                                     setIsCloning(true);
-                                    doClone(g.id, id, name, isAnimated).finally(() => {
+                                    doClone(g.id, data).finally(() => {
                                         invalidateMemo();
                                         setIsCloning(false);
                                     });
@@ -175,32 +268,38 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
     );
 }
 
-function buildMenuItem(id: string, name: string, isAnimated: boolean) {
+function buildMenuItem(type: "Emoji" | "Sticker", fetchData: () => Promisable<Omit<Sticker | Emoji, "t">>) {
     return (
         <Menu.MenuItem
             id="emote-cloner"
             key="emote-cloner"
-            label="Clone Emote"
+            label={`Clone ${type}`}
             action={() =>
-                openModal(modalProps => (
-                    <ModalRoot {...modalProps}>
-                        <ModalHeader>
-                            <img
-                                role="presentation"
-                                aria-hidden
-                                src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${id}.${isAnimated ? "gif" : "png"}`}
-                                alt=""
-                                height={24}
-                                width={24}
-                                style={{ marginRight: "0.5em" }}
-                            />
-                            <Forms.FormText>Clone {name}</Forms.FormText>
-                        </ModalHeader>
-                        <ModalContent>
-                            <CloneModal id={id} name={name} isAnimated={isAnimated} />
-                        </ModalContent>
-                    </ModalRoot>
-                ))
+                openModalLazy(async () => {
+                    const res = await fetchData();
+                    const data = { t: type, ...res } as Sticker | Emoji;
+                    const url = getUrl(data);
+
+                    return modalProps => (
+                        <ModalRoot {...modalProps}>
+                            <ModalHeader>
+                                <img
+                                    role="presentation"
+                                    aria-hidden
+                                    src={url}
+                                    alt=""
+                                    height={24}
+                                    width={24}
+                                    style={{ marginRight: "0.5em" }}
+                                />
+                                <Forms.FormText>Clone {data.name}</Forms.FormText>
+                            </ModalHeader>
+                            <ModalContent>
+                                <CloneModal data={data} />
+                            </ModalContent>
+                        </ModalRoot>
+                    );
+                })
             }
         />
     );
@@ -213,28 +312,53 @@ function isGifUrl(url: string) {
 const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => () => {
     const { favoriteableId, itemHref, itemSrc, favoriteableType } = props ?? {};
 
-    if (!favoriteableId || favoriteableType !== "emoji") return;
+    if (!favoriteableId) return;
 
-    const match = props.message.content.match(RegExp(`<a?:(\\w+)(?:~\\d+)?:${favoriteableId}>|https://cdn\\.discordapp\\.com/emojis/${favoriteableId}\\.`));
-    if (!match) return;
-    const name = match[1] ?? "FakeNitroEmoji";
+    const menuItem = (() => {
+        switch (favoriteableType) {
+            case "emoji":
+                const match = props.message.content.match(RegExp(`<a?:(\\w+)(?:~\\d+)?:${favoriteableId}>|https://cdn\\.discordapp\\.com/emojis/${favoriteableId}\\.`));
+                if (!match) return;
+                const name = match[1] ?? "FakeNitroEmoji";
 
-    const group = findGroupChildrenByChildId("copy-link", children);
-    if (group) group.push(buildMenuItem(favoriteableId, name, isGifUrl(itemHref ?? itemSrc)));
+                return buildMenuItem("Emoji", () => ({
+                    id: favoriteableId,
+                    name,
+                    isAnimated: isGifUrl(itemHref ?? itemSrc)
+                }));
+            case "sticker":
+                const sticker = props.message.stickerItems.find(s => s.id === favoriteableId);
+                if (sticker?.format_type === 3 /* LOTTIE */) return;
+
+                return buildMenuItem("Sticker", () => fetchSticker(favoriteableId));
+        }
+    })();
+
+    if (menuItem)
+        findGroupChildrenByChildId("copy-link", children)?.push(menuItem);
 };
 
 const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => () => {
     const { id, name, type } = props?.target?.dataset ?? {};
-    if (!id || !name || type !== "emoji") return;
+    if (!id) return;
 
-    const firstChild = props.target.firstChild as HTMLImageElement;
+    if (type === "emoji" && name) {
+        const firstChild = props.target.firstChild as HTMLImageElement;
 
-    children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
+        children.push(buildMenuItem("Emoji", () => ({
+            id,
+            name,
+            isAnimated: firstChild && isGifUrl(firstChild.src)
+        })));
+    } else if (type === "sticker" && !props.target.className?.includes("lottieCanvas")) {
+        children.push(buildMenuItem("Sticker", () => fetchSticker(id)));
+    }
 };
 
 export default definePlugin({
     name: "EmoteCloner",
-    description: "Adds a Clone context menu item to emotes to clone them your own server",
+    description: "Allows you to clone Emotes & Stickers to your own server (right click them)",
+    tags: ["StickerCloner"],
     authors: [Devs.Ven, Devs.Nuckyz],
 
     start() {

src/plugins/experiments.tsx

@@ -17,7 +17,10 @@
 */
 
 import { definePluginSettings } from "@api/Settings";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { ErrorCard } from "@components/ErrorCard";
 import { Devs } from "@utils/constants";
+import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { Forms, React } from "@webpack/common";
@@ -87,6 +90,13 @@ export default definePlugin({
                 match: /"staging"===window\.GLOBAL_ENV\.RELEASE_CHANNEL/,
                 replace: "true"
             }
+        },
+        {
+            find: 'H1,title:"Experiments"',
+            replacement: {
+                match: 'title:"Experiments",children:[',
+                replace: "$&$self.WarningCard(),"
+            }
         }
     ],
 
@@ -109,5 +119,19 @@ export default definePlugin({
                 </Forms.FormText>
             </React.Fragment>
         );
-    }
+    },
+
+    WarningCard: ErrorBoundary.wrap(() => (
+        <ErrorCard id="vc-experiments-warning-card" className={Margins.bottom16}>
+            <Forms.FormTitle tag="h2">Hold on!!</Forms.FormTitle>
+
+            <Forms.FormText>
+                Experiments are unreleased Discord features. They might not work, or even break your client or get your account disabled.
+            </Forms.FormText>
+
+            <Forms.FormText className={Margins.top8}>
+                Only use experiments if you know what you're doing. Vencord is not responsible for any damage caused by enabling experiments.
+            </Forms.FormText>
+        </ErrorCard>
+    ), { noop: true })
 });

src/plugins/fakeNitro.ts

@@ -22,11 +22,12 @@ import { Devs } from "@utils/constants";
 import { ApngBlendOp, ApngDisposeOp, getGifEncoder, importApngJs } from "@utils/dependencies";
 import { getCurrentGuild } from "@utils/discord";
 import { proxyLazy } from "@utils/lazy";
+import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
-import { ChannelStore, FluxDispatcher, Parser, PermissionStore, UserStore } from "@webpack/common";
+import { ChannelStore, EmojiStore, FluxDispatcher, Parser, PermissionStore, UserStore } from "@webpack/common";
 import type { Message } from "discord-types/general";
-import type { ReactNode } from "react";
+import type { ReactElement, ReactNode } from "react";
 
 const DRAFT_TYPE = 0;
 const promptToUpload = findByCodeLazy("UPLOAD_FILE_LIMIT_ERROR");
@@ -38,8 +39,6 @@ const StickerStore = findStoreLazy("StickersStore") as {
     getAllGuildStickers(): Map<string, Sticker[]>;
     getStickerById(id: string): Sticker | undefined;
 };
-const EmojiStore = findStoreLazy("EmojiStore");
-
 
 function searchProtoClass(localName: string, parentProtoClass: any) {
     if (!parentProtoClass) return;
@@ -57,7 +56,7 @@ const ClientThemeSettingsProto = proxyLazy(() => searchProtoClass("clientThemeSe
 const USE_EXTERNAL_EMOJIS = 1n << 18n;
 const USE_EXTERNAL_STICKERS = 1n << 37n;
 
-enum EmojiIntentions {
+const enum EmojiIntentions {
     REACTION = 0,
     STATUS = 1,
     COMMUNITY_CONTENT = 2,
@@ -68,6 +67,14 @@ enum EmojiIntentions {
     SOUNDBOARD = 7
 }
 
+const enum StickerType {
+    PNG = 1,
+    APNG = 2,
+    LOTTIE = 3,
+    // don't think you can even have gif stickers but the docs have it
+    GIF = 4
+}
+
 interface BaseSticker {
     available: boolean;
     description: string;
@@ -173,6 +180,10 @@ export default definePlugin({
                 {
                     match: /(&&!\i&&)!(\i)(?=\)return \i\.\i\.DISALLOW_EXTERNAL;)/,
                     replace: (_, rest, canUseExternal) => `${rest}(!${canUseExternal}&&(typeof fakeNitroIntention==="undefined"||![${EmojiIntentions.CHAT},${EmojiIntentions.GUILD_STICKER_RELATED_EMOJI}].includes(fakeNitroIntention)))`
+                },
+                {
+                    match: /if\(!\i\.available/,
+                    replace: m => `${m}&&(typeof fakeNitroIntention==="undefined"||![${EmojiIntentions.CHAT},${EmojiIntentions.GUILD_STICKER_RELATED_EMOJI}].includes(fakeNitroIntention))`
                 }
             ]
         },
@@ -321,7 +332,7 @@ export default definePlugin({
     },
 
     handleProtoChange(proto: any, user: any) {
-        if ((!proto.appearance && !AppearanceSettingsProto) || !UserSettingsProtoStore) return;
+        if (proto == null || typeof proto === "string" || !UserSettingsProtoStore || (!proto.appearance && !AppearanceSettingsProto)) return;
 
         const premiumType: number = user?.premium_type ?? UserStore?.getCurrentUser()?.premiumType ?? 0;
 
@@ -382,70 +393,137 @@ export default definePlugin({
         });
     },
 
-    patchFakeNitroEmojisOrRemoveStickersLinks(content: Array<any>, inline: boolean) {
-        if (content.length > 1 && !settings.store.transformCompoundSentence) return content;
+    trimContent(content: Array<any>) {
+        const firstContent = content[0];
+        if (typeof firstContent === "string") content[0] = firstContent.trimStart();
+        if (content[0] === "") content.shift();
 
-        const newContent: Array<any> = [];
+        const lastIndex = content.length - 1;
+        const lastContent = content[lastIndex];
+        if (typeof lastContent === "string") content[lastIndex] = lastContent.trimEnd();
+        if (content[lastIndex] === "") content.pop();
+    },
+
+    clearEmptyArrayItems(array: Array<any>) {
+        return array.filter(item => item != null);
+    },
+
+    ensureChildrenIsArray(child: ReactElement) {
+        if (!Array.isArray(child.props.children)) child.props.children = [child.props.children];
+    },
+
+    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.length > 1 || typeof content[0]?.type === "string") && !settings.store.transformCompoundSentence) return content;
 
         let nextIndex = content.length;
 
-        for (const element of content) {
-            if (element.props?.trusted == null) {
-                newContent.push(element);
-                continue;
-            }
-
+        const transformLinkChild = (child: ReactElement) => {
             if (settings.store.transformEmojis) {
-                const fakeNitroMatch = element.props.href.match(fakeNitroEmojiRegex);
+                const fakeNitroMatch = child.props.href.match(fakeNitroEmojiRegex);
                 if (fakeNitroMatch) {
                     let url: URL | null = null;
                     try {
-                        url = new URL(element.props.href);
+                        url = new URL(child.props.href);
                     } catch { }
 
                     const emojiName = EmojiStore.getCustomEmojiById(fakeNitroMatch[1])?.name ?? url?.searchParams.get("name") ?? "FakeNitroEmoji";
 
-                    newContent.push(Parser.defaultRules.customEmoji.react({
-                        jumboable: !inline && content.length === 1,
+                    return Parser.defaultRules.customEmoji.react({
+                        jumboable: !inline && content.length === 1 && typeof content[0].type !== "string",
                         animated: fakeNitroMatch[2] === "gif",
                         emojiId: fakeNitroMatch[1],
                         name: emojiName,
                         fake: true
-                    }, void 0, { key: String(nextIndex++) }));
-
-                    continue;
+                    }, void 0, { key: String(nextIndex++) });
                 }
             }
 
             if (settings.store.transformStickers) {
-                if (fakeNitroStickerRegex.test(element.props.href)) continue;
+                if (fakeNitroStickerRegex.test(child.props.href)) return null;
 
-                const gifMatch = element.props.href.match(fakeNitroGifStickerRegex);
+                const gifMatch = child.props.href.match(fakeNitroGifStickerRegex);
                 if (gifMatch) {
                     // There is no way to differentiate a regular gif attachment from a fake nitro animated sticker, so we check if the StickerStore contains the id of the fake sticker
-                    if (StickerStore.getStickerById(gifMatch[1])) continue;
+                    if (StickerStore.getStickerById(gifMatch[1])) return null;
                 }
             }
 
-            newContent.push(element);
+            return child;
+        };
+
+        const transformChild = (child: ReactElement) => {
+            if (child?.props?.trusted != null) return transformLinkChild(child);
+            if (child?.props?.children != null) {
+                if (!Array.isArray(child.props.children)) {
+                    child.props.children = modifyChild(child.props.children);
+                    return child;
+                }
+
+                child.props.children = modifyChildren(child.props.children);
+                if (child.props.children.length === 0) return null;
+                return child;
+            }
+
+            return child;
+        };
+
+        const modifyChild = (child: ReactElement) => {
+            const newChild = transformChild(child);
+
+            if (newChild?.type === "ul" || newChild?.type === "ol") {
+                this.ensureChildrenIsArray(newChild);
+                if (newChild.props.children.length === 0) return null;
+
+                let listHasAnItem = false;
+                for (const [index, child] of newChild.props.children.entries()) {
+                    if (child == null) {
+                        delete newChild.props.children[index];
+                        continue;
+                    }
+
+                    this.ensureChildrenIsArray(child);
+                    if (child.props.children.length > 0) listHasAnItem = true;
+                    else delete newChild.props.children[index];
+                }
+
+                if (!listHasAnItem) return null;
+
+                newChild.props.children = this.clearEmptyArrayItems(newChild.props.children);
+            }
+
+            return newChild;
+        };
+
+        const modifyChildren = (children: Array<ReactElement>) => {
+            for (const [index, child] of children.entries()) children[index] = modifyChild(child);
+
+            children = this.clearEmptyArrayItems(children);
+            this.trimContent(children);
+
+            return children;
+        };
+
+        try {
+            return modifyChildren(window._.cloneDeep(content));
+        } catch (err) {
+            new Logger("FakeNitro").error(err);
+            return content;
         }
-
-        const firstContent = newContent[0];
-        if (typeof firstContent === "string") newContent[0] = firstContent.trimStart();
-
-        return newContent;
     },
 
     patchFakeNitroStickers(stickers: Array<any>, message: Message) {
         const itemsToMaybePush: Array<string> = [];
 
         const contentItems = message.content.split(/\s/);
-        if (contentItems.length === 1 && !settings.store.transformCompoundSentence) itemsToMaybePush.push(contentItems[0]);
-        else itemsToMaybePush.push(...contentItems);
+        if (settings.store.transformCompoundSentence) itemsToMaybePush.push(...contentItems);
+        else if (contentItems.length === 1) itemsToMaybePush.push(contentItems[0]);
 
         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;
+
             const imgMatch = item.match(fakeNitroStickerRegex);
             if (imgMatch) {
                 let url: URL | null = null;
@@ -482,10 +560,13 @@ export default definePlugin({
     },
 
     shouldIgnoreEmbed(embed: Message["embeds"][number], message: Message) {
-        if (message.content.split(/\s/).length > 1 && !settings.store.transformCompoundSentence) return false;
+        const contentItems = message.content.split(/\s/);
+        if (contentItems.length > 1 && !settings.store.transformCompoundSentence) return false;
 
         switch (embed.type) {
             case "image": {
+                if (!settings.store.transformCompoundSentence && !contentItems.includes(embed.url!) && !contentItems.includes(embed.image!.proxyURL)) return false;
+
                 if (settings.store.transformEmojis) {
                     if (fakeNitroEmojiRegex.test(embed.url!)) return true;
                 }
@@ -544,7 +625,7 @@ export default definePlugin({
         }
     },
 
-    hasPermissionToUseExternalEmojis(channelId: string) {
+    hasPermissionToUseExternalEmojis(channelId: string): boolean {
         const channel = ChannelStore.getChannel(channelId);
 
         if (!channel || channel.isDM() || channel.isGroupDM() || channel.isMultiUserDM()) return true;
@@ -625,8 +706,9 @@ export default definePlugin({
     },
 
     start() {
-        const settings = Settings.plugins.FakeNitro;
-        if (!settings.enableEmojiBypass && !settings.enableStickerBypass) {
+        const s = settings.store;
+
+        if (!s.enableEmojiBypass && !s.enableStickerBypass) {
             return;
         }
 
@@ -638,39 +720,37 @@ export default definePlugin({
             const { guildId } = this;
 
             stickerBypass: {
-                if (!settings.enableStickerBypass)
+                if (!s.enableStickerBypass)
                     break stickerBypass;
 
                 const sticker = StickerStore.getStickerById(extra.stickers?.[0]!);
                 if (!sticker)
                     break stickerBypass;
 
-                if (sticker.available !== false && ((this.canUseStickers && this.hasPermissionToUseExternalStickers(channelId)) || (sticker as GuildSticker)?.guild_id === guildId))
+                // Discord Stickers are now free yayyy!! :D
+                if ("pack_id" in sticker)
                     break stickerBypass;
 
-                let link = this.getStickerLink(sticker.id);
-                if (sticker.format_type === 2) {
+                const canUseStickers = this.canUseStickers && this.hasPermissionToUseExternalStickers(channelId);
+                if (sticker.available !== false && (canUseStickers || sticker.guild_id === guildId))
+                    break stickerBypass;
+
+                const link = this.getStickerLink(sticker.id);
+                if (sticker.format_type === StickerType.APNG) {
                     this.sendAnimatedSticker(link, sticker.id, channelId);
                     return { cancel: true };
                 } else {
-                    if ("pack_id" in sticker) {
-                        const packId = sticker.pack_id === "847199849233514549"
-                            // Discord moved these stickers into a different pack at some point, but
-                            // Distok still uses the old id
-                            ? "749043879713701898"
-                            : sticker.pack_id;
-
-                        link = `https://distok.top/stickers/${packId}/${sticker.id}.gif`;
-                    }
-
                     extra.stickers!.length = 0;
-                    messageObj.content += " " + link + `&name=${encodeURIComponent(sticker.name)}`;
+                    messageObj.content += ` ${link}&name=${encodeURIComponent(sticker.name)}`;
                 }
             }
 
-            if ((!this.canUseEmotes || !this.hasPermissionToUseExternalEmojis(channelId)) && settings.enableEmojiBypass) {
+            if (s.enableEmojiBypass) {
+                const canUseEmotes = this.canUseEmotes && this.hasPermissionToUseExternalEmojis(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;
 
                     const emojiString = `<${emoji.animated ? "a" : ""}:${emoji.originalName || emoji.name}:${emoji.id}>`;
@@ -688,23 +768,25 @@ export default definePlugin({
         });
 
         this.preEdit = addPreEditListener((channelId, __, messageObj) => {
-            if (this.canUseEmotes && this.hasPermissionToUseExternalEmojis(channelId)) return;
+            if (!s.enableEmojiBypass) return;
+
+            const canUseEmotes = this.canUseEmotes && this.hasPermissionToUseExternalEmojis(channelId);
 
             const { guildId } = this;
 
-            for (const [emojiStr, _, emojiId] of messageObj.content.matchAll(/(?<!\\)<a?:(\w+):(\d+)>/ig)) {
+            messageObj.content = messageObj.content.replace(/(?<!\\)<a?:(?:\w+):(\d+)>/ig, (emojiStr, emojiId, offset, origStr) => {
                 const emoji = EmojiStore.getCustomEmojiById(emojiId);
-                if (emoji == null || (emoji.guildId === guildId && !emoji.animated)) continue;
-                if (!emoji.require_colons) continue;
+                if (emoji == null) return emojiStr;
+                if (!emoji.require_colons) return emojiStr;
+                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)
                 }));
-                messageObj.content = messageObj.content.replace(emojiStr, (match, offset, origStr) => {
-                    return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + match.length)}`;
-                });
-            }
+                return `${getWordBoundary(origStr, offset - 1)}${url}${getWordBoundary(origStr, offset + emojiStr.length)}`;
+            });
         });
     },
 

src/plugins/favEmojiFirst.ts

@@ -0,0 +1,83 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { EmojiStore } from "@webpack/common";
+import { Emoji } from "@webpack/types";
+
+interface EmojiAutocompleteState {
+    query?: {
+        type: string;
+        typeInfo: {
+            sentinel: string;
+        };
+        results: {
+            emojis: Emoji[] & { sliceTo?: number; };
+        };
+    };
+}
+
+export default definePlugin({
+    name: "FavoriteEmojiFirst",
+    authors: [Devs.Aria, Devs.Ven],
+    description: "Puts your favorite emoji first in the emoji autocomplete.",
+    patches: [
+        {
+            find: ".activeCommandOption",
+            replacement: [
+                {
+                    // = someFunc(a.selectedIndex); ...trackEmojiSearch({ state: theState, isInPopoutExperimental: someBool })
+                    match: /=\i\(\i\.selectedIndex\);(?=.+?state:(\i),isInPopoutExperiment:\i)/,
+                    // self.sortEmojis(theState)
+                    replace: "$&$self.sortEmojis($1);"
+                },
+
+                // set maxCount to Infinity so our sortEmojis callback gets the entire list, not just the first 10
+                // and remove Discord's emojiResult slice, storing the endIndex on the array for us to use later
+                {
+                    // searchEmojis(...,maxCount: stuff) ... endEmojis = emojis.slice(0, maxCount - gifResults.length)
+                    match: /,maxCount:(\i)(.+?)=(\i)\.slice\(0,(\1-\i\.length)\)/,
+                    // ,maxCount:Infinity ... endEmojis = (emojis.sliceTo = n, emojis)
+                    replace: ",maxCount:Infinity$2=($3.sliceTo=$4,$3)"
+                }
+            ]
+        }
+    ],
+
+    sortEmojis({ query }: EmojiAutocompleteState) {
+        if (
+            query?.type !== "EMOJIS_AND_STICKERS"
+            || query.typeInfo?.sentinel !== ":"
+            || !query.results?.emojis?.length
+        ) return;
+
+        const emojiContext = EmojiStore.getDisambiguatedEmojiContext();
+
+        query.results.emojis = query.results.emojis.sort((a, b) => {
+            const aIsFavorite = emojiContext.isFavoriteEmojiWithoutFetchingLatest(a);
+            const bIsFavorite = emojiContext.isFavoriteEmojiWithoutFetchingLatest(b);
+
+            if (aIsFavorite && !bIsFavorite) return -1;
+
+            if (!aIsFavorite && bIsFavorite) return 1;
+
+            return 0;
+        }).slice(0, query.results.emojis.sliceTo ?? 10);
+    }
+});

src/plugins/imageZoom/index.tsx

@@ -130,6 +130,8 @@ export default definePlugin({
     name: "ImageZoom",
     description: "Lets you zoom in to images and gifs. Use scroll wheel to zoom in and shift + scroll wheel to increase lens radius / size",
     authors: [Devs.Aria],
+    tags: ["ImageUtilities"],
+
     patches: [
         {
             find: '"renderLinkComponent","maxWidth"',

src/plugins/invisibleChat/index.tsx

@@ -22,7 +22,7 @@ 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, Tooltip } from "@webpack/common";
+import { Button, ButtonLooks, ButtonWrapperClasses, ChannelStore, FluxDispatcher, RestAPI, Tooltip } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 import { buildDecModal } from "./components/DecryptionModal";
@@ -64,7 +64,13 @@ function Indicator() {
 
 }
 
-function ChatBarIcon() {
+function ChatBarIcon(chatBoxProps: {
+    type: {
+        analyticsName: string;
+    };
+}) {
+    if (chatBoxProps.type.analyticsName !== "normal") return null;
+
     return (
         <Tooltip text="Encrypt Message">
             {({ onMouseEnter, onMouseLeave }) => (
@@ -85,7 +91,7 @@ function ChatBarIcon() {
                         onMouseLeave={onMouseLeave}
                         innerClassName={ButtonWrapperClasses.button}
                         onClick={() => buildEncModal()}
-                        style={{ padding: "0 4px" }}
+                        style={{ padding: "0 2px", scale: "0.9" }}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>
                             <svg
@@ -117,7 +123,7 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "InvisibleChat",
-    description: "Encrypt your Messages in a non-suspicious way! This plugin makes requests to >>https://embed.sammcheese.net<< to provide embeds to decrypted links!",
+    description: "Encrypt your Messages in a non-suspicious way!",
     authors: [Devs.SammCheese],
     dependencies: ["MessagePopoverAPI"],
     patches: [
@@ -133,7 +139,7 @@ export default definePlugin({
             find: ".activeCommandOption",
             replacement: {
                 match: /(.)\.push.{1,30}disabled:(\i),.{1,20}\},"gift"\)\)/,
-                replace: "$&;try{$2||$1.push($self.chatBarIcon())}catch{}",
+                replace: "$&;try{$2||$1.push($self.chatBarIcon(arguments[0]))}catch{}",
             }
         },
     ],
@@ -172,25 +178,13 @@ export default definePlugin({
 
     // Gets the Embed of a Link
     async getEmbed(url: URL): Promise<Object | {}> {
-        const controller = new AbortController();
-        const timeout = setTimeout(() => controller.abort(), 5000);
-
-        const options: RequestInit = {
-            signal: controller.signal,
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-                url,
-            }),
-        };
-
-        // AWS hosted url to discord embed object
-        const rawRes = await fetch(this.EMBED_API_URL, options);
-        clearTimeout(timeout);
-
-        return await rawRes.json();
+        const { body } = await RestAPI.post({
+            url: "/unfurler/embed-urls",
+            body: {
+                urls: [url]
+            }
+        });
+        return await body.embeds[0];
     },
 
     async buildEmbed(message: any, revealed: string): Promise<void> {

src/plugins/lastfm.tsx

@@ -72,7 +72,7 @@ enum ActivityFlag {
     INSTANCE = 1 << 0,
 }
 
-const applicationId = "1043533871037284423";
+const applicationId = "1108588077900898414";
 const placeholderId = "2a96cbd8b46e442fc41c2b86b821562f";
 
 const logger = new Logger("LastFMRichPresence");
@@ -167,6 +167,7 @@ export default definePlugin({
     settings,
 
     start() {
+        this.updatePresence();
         this.updateInterval = setInterval(() => { this.updatePresence(); }, 16000);
     },
 
@@ -198,7 +199,7 @@ export default definePlugin({
 
             const trackData = json.recenttracks?.track[0];
 
-            if (!trackData || !trackData["@attr"]?.nowplaying)
+            if (!trackData?.["@attr"]?.nowplaying)
                 return null;
 
             // why does the json api have xml structure

src/plugins/messageClickActions.ts

@@ -17,10 +17,11 @@
 */
 
 import { addClickListener, removeClickListener } from "@api/MessageEvents";
+import { definePluginSettings, Settings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { PermissionStore, UserStore } from "@webpack/common";
+import { FluxDispatcher, PermissionStore, UserStore } from "@webpack/common";
 
 let isDeletePressed = false;
 const keydown = (e: KeyboardEvent) => e.key === "Backspace" && (isDeletePressed = true);
@@ -28,24 +29,36 @@ const keyup = (e: KeyboardEvent) => e.key === "Backspace" && (isDeletePressed =
 
 const MANAGE_CHANNELS = 1n << 4n;
 
+const settings = definePluginSettings({
+    enableDeleteOnClick: {
+        type: OptionType.BOOLEAN,
+        description: "Enable delete on click",
+        default: true
+    },
+    enableDoubleClickToEdit: {
+        type: OptionType.BOOLEAN,
+        description: "Enable double click to edit",
+        default: true
+    },
+    enableDoubleClickToReply: {
+        type: OptionType.BOOLEAN,
+        description: "Enable double click to reply",
+        default: true
+    },
+    requireModifier: {
+        type: OptionType.BOOLEAN,
+        description: "Only do double click actions when shift/ctrl is held",
+        default: false
+    }
+});
+
 export default definePlugin({
     name: "MessageClickActions",
-    description: "Hold Backspace and click to delete, double click to edit",
+    description: "Hold Backspace and click to delete, double click to edit/reply",
     authors: [Devs.Ven],
     dependencies: ["MessageEventsAPI"],
 
-    options: {
-        enableDeleteOnClick: {
-            type: OptionType.BOOLEAN,
-            description: "Enable delete on click",
-            default: true
-        },
-        enableDoubleClickToEdit: {
-            type: OptionType.BOOLEAN,
-            description: "Enable double click to edit",
-            default: true
-        }
-    },
+    settings,
 
     start() {
         const MessageActions = findByPropsLazy("deleteMessage", "startEditMessage");
@@ -54,15 +67,30 @@ export default definePlugin({
         document.addEventListener("keydown", keydown);
         document.addEventListener("keyup", keyup);
 
-        this.onClick = addClickListener((msg, chan, event) => {
+        this.onClick = addClickListener((msg, channel, event) => {
             const isMe = msg.author.id === UserStore.getCurrentUser().id;
             if (!isDeletePressed) {
-                if (Vencord.Settings.plugins.MessageClickActions.enableDoubleClickToEdit && (isMe && event.detail >= 2 && !EditStore.isEditing(chan.id, msg.id))) {
-                    MessageActions.startEditMessage(chan.id, msg.id, msg.content);
+                if (event.detail < 2) return;
+                if (settings.store.requireModifier && !event.ctrlKey && !event.shiftKey) return;
+
+                if (isMe) {
+                    if (!settings.store.enableDoubleClickToEdit || EditStore.isEditing(channel.id, msg.id)) return;
+
+                    MessageActions.startEditMessage(channel.id, msg.id, msg.content);
                     event.preventDefault();
+                } else {
+                    if (!settings.store.enableDoubleClickToReply) return;
+
+                    FluxDispatcher.dispatch({
+                        type: "CREATE_PENDING_REPLY",
+                        channel,
+                        message: msg,
+                        shouldMention: !Settings.plugins.NoReplyMention.enabled,
+                        showMentionToggle: channel.guild_id !== null
+                    });
                 }
-            } else if (Vencord.Settings.plugins.MessageClickActions.enableDeleteOnClick && (isMe || PermissionStore.can(MANAGE_CHANNELS, chan))) {
-                MessageActions.deleteMessage(chan.id, msg.id);
+            } else if (settings.store.enableDeleteOnClick && (isMe || PermissionStore.can(MANAGE_CHANNELS, channel))) {
+                MessageActions.deleteMessage(channel.id, msg.id);
                 event.preventDefault();
             }
         });

src/plugins/moreUserTags.tsx

@@ -17,11 +17,13 @@
 */
 
 import { definePluginSettings } from "@api/Settings";
+import { Flex } from "@components/Flex";
 import { Devs } from "@utils/constants";
-import { proxyLazy } from "@utils/lazy.js";
+import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
-import { find, findByPropsLazy } from "@webpack";
-import { ChannelStore, GuildStore } from "@webpack/common";
+import { findByPropsLazy, findLazy } from "@webpack";
+import { Card, ChannelStore, Forms, GuildStore, Switch, TextInput, Tooltip, useState } from "@webpack/common";
+import { RC } from "@webpack/types";
 import { Channel, Message, User } from "discord-types/general";
 
 type PermissionName = "CREATE_INSTANT_INVITE" | "KICK_MEMBERS" | "BAN_MEMBERS" | "ADMINISTRATOR" | "MANAGE_CHANNELS" | "MANAGE_GUILD" | "CHANGE_NICKNAME" | "MANAGE_NICKNAMES" | "MANAGE_ROLES" | "MANAGE_WEBHOOKS" | "MANAGE_GUILD_EXPRESSIONS" | "CREATE_GUILD_EXPRESSIONS" | "VIEW_AUDIT_LOG" | "VIEW_CHANNEL" | "VIEW_GUILD_ANALYTICS" | "VIEW_CREATOR_MONETIZATION_ANALYTICS" | "MODERATE_MEMBERS" | "SEND_MESSAGES" | "SEND_TTS_MESSAGES" | "MANAGE_MESSAGES" | "EMBED_LINKS" | "ATTACH_FILES" | "READ_MESSAGE_HISTORY" | "MENTION_EVERYONE" | "USE_EXTERNAL_EMOJIS" | "ADD_REACTIONS" | "USE_APPLICATION_COMMANDS" | "MANAGE_THREADS" | "CREATE_PUBLIC_THREADS" | "CREATE_PRIVATE_THREADS" | "USE_EXTERNAL_STICKERS" | "SEND_MESSAGES_IN_THREADS" | "CONNECT" | "SPEAK" | "MUTE_MEMBERS" | "DEAFEN_MEMBERS" | "MOVE_MEMBERS" | "USE_VAD" | "PRIORITY_SPEAKER" | "STREAM" | "USE_EMBEDDED_ACTIVITIES" | "USE_SOUNDBOARD" | "USE_EXTERNAL_SOUNDS" | "REQUEST_TO_SPEAK" | "MANAGE_EVENTS" | "CREATE_EVENTS";
@@ -36,6 +38,21 @@ interface Tag {
     condition?(message: Message | null, user: User, channel: Channel): boolean;
 }
 
+interface TagSetting {
+    text: string;
+    showInChat: boolean;
+    showInNotChat: boolean;
+}
+interface TagSettings {
+    WEBHOOK: TagSetting,
+    OWNER: TagSetting,
+    ADMINISTRATOR: TagSetting,
+    MODERATOR_STAFF: TagSetting,
+    MODERATOR: TagSetting,
+    VOICE_MODERATOR: TagSetting,
+    [k: string]: TagSetting;
+}
+
 const CLYDE_ID = "1081004946872352958";
 
 // PermissionStore.computePermissions is not the same function and doesn't work here
@@ -44,7 +61,7 @@ const PermissionUtil = findByPropsLazy("computePermissions", "canEveryoneRole")
 };
 
 const Permissions = findByPropsLazy("SEND_MESSAGES", "VIEW_CREATOR_MONETIZATION_ANALYTICS") as Record<PermissionName, bigint>;
-const Tags = proxyLazy(() => find(m => m.Types?.[0] === "BOT").Types) as Record<string, number>;
+const Tag = findLazy(m => m.Types?.[0] === "BOT") as RC<{ type?: number, className?: string, useRemSizes?: boolean; }> & { Types: Record<string, number>; };
 
 const isWebhook = (message: Message, user: User) => !!message?.webhookId && user.isNonUserBot();
 
@@ -81,64 +98,119 @@ const tags: Tag[] = [
         permissions: ["MOVE_MEMBERS", "MUTE_MEMBERS", "DEAFEN_MEMBERS"]
     }
 ];
+const defaultSettings = Object.fromEntries(
+    tags.map(({ name, displayName }) => [name, { text: displayName, showInChat: true, showInNotChat: true }])
+) as TagSettings;
+
+function SettingsComponent(props: { setValue(v: any): void; }) {
+    settings.store.tagSettings ??= defaultSettings;
+
+    const [tagSettings, setTagSettings] = useState(settings.store.tagSettings as TagSettings);
+    const setValue = (v: TagSettings) => {
+        setTagSettings(v);
+        props.setValue(v);
+    };
+
+    return (
+        <Flex flexDirection="column">
+            {tags.map(t => (
+                <Card style={{ padding: "1em 1em 0" }}>
+                    <Forms.FormTitle style={{ width: "fit-content" }}>
+                        <Tooltip text={t.description}>
+                            {({ onMouseEnter, onMouseLeave }) => (
+                                <div
+                                    onMouseEnter={onMouseEnter}
+                                    onMouseLeave={onMouseLeave}
+                                >
+                                    {t.displayName} Tag <Tag type={Tag.Types[t.name]} />
+                                </div>
+                            )}
+                        </Tooltip>
+                    </Forms.FormTitle>
+
+                    <TextInput
+                        type="text"
+                        value={tagSettings[t.name]?.text ?? t.displayName}
+                        placeholder={`Text on tag (default: ${t.displayName})`}
+                        onChange={v => {
+                            tagSettings[t.name].text = v;
+                            setValue(tagSettings);
+                        }}
+                        className={Margins.bottom16}
+                    />
+
+                    <Switch
+                        value={tagSettings[t.name]?.showInChat ?? true}
+                        onChange={v => {
+                            tagSettings[t.name].showInChat = v;
+                            setValue(tagSettings);
+                        }}
+                        hideBorder
+                    >
+                        Show in messages
+                    </Switch>
+
+                    <Switch
+                        value={tagSettings[t.name]?.showInNotChat ?? true}
+                        onChange={v => {
+                            tagSettings[t.name].showInNotChat = v;
+                            setValue(tagSettings);
+                        }}
+                        hideBorder
+                    >
+                        Show in member list and profiles
+                    </Switch>
+                </Card>
+            ))}
+        </Flex>
+    );
+}
 
 const settings = definePluginSettings({
     dontShowForBots: {
-        description: "Don't show tags (not including the webhook tag) for bots",
+        description: "Don't show extra tags for bots (excluding webhooks)",
         type: OptionType.BOOLEAN
     },
     dontShowBotTag: {
-        description: "Don't show [BOT] text for bots with other tags (verified bots will still have checkmark)",
+        description: "Only show extra tags for bots / Hide [BOT] text",
         type: OptionType.BOOLEAN
     },
-    ...Object.fromEntries(tags.map(({ name, displayName, description }) => [
-        `visibility_${name}`, {
-            description: `Show ${displayName} tags (${description})`,
-            type: OptionType.SELECT,
-            options: [
-                {
-                    label: "Always",
-                    value: "always",
-                    default: true
-                }, {
-                    label: "Only in chat",
-                    value: "chat"
-                }, {
-                    label: "Only in member list and profiles",
-                    value: "not-chat"
-                }, {
-                    label: "Never",
-                    value: "never"
-                }
-            ]
-        }
-    ]))
+    tagSettings: {
+        type: OptionType.COMPONENT,
+        component: SettingsComponent,
+        description: "fill me",
+    }
 });
 
 export default definePlugin({
     name: "MoreUserTags",
     description: "Adds tags for webhooks and moderative roles (owner, admin, etc.)",
-    authors: [Devs.Cyn, Devs.TheSun, Devs.RyanCaoDev],
+    authors: [Devs.Cyn, Devs.TheSun, Devs.RyanCaoDev, Devs.LordElias],
     settings,
     patches: [
         // add tags to the tag list
         {
             find: '.BOT=0]="BOT"',
             replacement: [
-                // add tags to the exported tags list (the Tags variable here)
+                // add tags to the exported tags list (Tag.Types)
                 {
                     match: /(\i)\[.\.BOT=0\]="BOT";/,
                     replace: "$&$1=$self.addTagVariants($1);"
-                },
+                }
+            ]
+        },
+        {
+            find: ".DISCORD_SYSTEM_MESSAGE_BOT_TAG_TOOLTIP;",
+            replacement: [
                 // make the tag show the right text
                 {
-                    match: /(switch\((\i)\){.+?)case (\i)\.BOT:default:(\i)=(\i\.\i\.Messages)\.BOT_TAG_BOT/,
+                    match: /(switch\((\i)\){.+?)case (\i(?:\.\i)?)\.BOT:default:(\i)=(\i\.\i\.Messages)\.BOT_TAG_BOT/,
                     replace: (_, origSwitch, variant, tags, displayedText, strings) =>
                         `${origSwitch}default:{${displayedText} = $self.getTagText(${tags}[${variant}], ${strings})}`
                 },
                 // show OP tags correctly
                 {
-                    match: /(\i)=(\i)===\i\.ORIGINAL_POSTER/,
+                    match: /(\i)=(\i)===\i(?:\.\i)?\.ORIGINAL_POSTER/,
                     replace: "$1=$self.isOPTag($2)"
                 },
                 // add HTML data attributes (for easier theming)
@@ -169,15 +241,15 @@ return type!==null?$2.botTag,type"
         {
             find: ".hasAvatarForGuild(null==",
             replacement: {
-                match: /\.usernameSection,user/,
-                replace: ".usernameSection,moreTags_channelId:arguments[0].channelId,user"
+                match: /(?=usernameIcon:)/,
+                replace: "moreTags_channelId:arguments[0].channelId,"
             }
         },
         {
             find: 'copyMetaData:"User Tag"',
             replacement: {
-                match: /discriminatorClass:(.{1,100}),botClass:/,
-                replace: "discriminatorClass:$1,moreTags_channelId:arguments[0].moreTags_channelId,botClass:"
+                match: /(?=,botClass:)/,
+                replace: ",moreTags_channelId:arguments[0].moreTags_channelId"
             }
         },
         // in profiles
@@ -190,6 +262,37 @@ return type!==null?$2.botTag,type"
         },
     ],
 
+    start() {
+        if (settings.store.tagSettings) return;
+        // @ts-ignore
+        if (!settings.store.visibility_WEBHOOK) settings.store.tagSettings = defaultSettings;
+        else {
+            const newSettings = { ...defaultSettings };
+            Object.entries(Vencord.PlainSettings.plugins.MoreUserTags).forEach(([name, value]) => {
+                const [setting, tag] = name.split("_");
+                if (setting === "visibility") {
+                    switch (value) {
+                        case "always":
+                            // its the default
+                            break;
+                        case "chat":
+                            newSettings[tag].showInNotChat = false;
+                            break;
+                        case "not-chat":
+                            newSettings[tag].showInChat = false;
+                            break;
+                        case "never":
+                            newSettings[tag].showInChat = false;
+                            newSettings[tag].showInNotChat = false;
+                            break;
+                    }
+                }
+                settings.store.tagSettings = newSettings;
+                delete Vencord.Settings.plugins.MoreUserTags[name];
+            });
+        }
+    },
+
     getPermissions(user: User, channel: Channel): string[] {
         const guild = GuildStore.getGuild(channel?.guild_id);
         if (!guild) return [];
@@ -202,35 +305,36 @@ return type!==null?$2.botTag,type"
             .filter(Boolean);
     },
 
-    addTagVariants(val: any /* i cant think of a good name */) {
+    addTagVariants(tagConstant) {
         let i = 100;
         tags.forEach(({ name }) => {
-            val[name] = ++i;
-            val[i] = name;
-            val[`${name}-BOT`] = ++i;
-            val[i] = `${name}-BOT`;
-            val[`${name}-OP`] = ++i;
-            val[i] = `${name}-OP`;
+            tagConstant[name] = ++i;
+            tagConstant[i] = name;
+            tagConstant[`${name}-BOT`] = ++i;
+            tagConstant[i] = `${name}-BOT`;
+            tagConstant[`${name}-OP`] = ++i;
+            tagConstant[i] = `${name}-OP`;
         });
-        return val;
+        return tagConstant;
     },
 
-    isOPTag: (tag: number) => tag === Tags.ORIGINAL_POSTER || tags.some(t => tag === Tags[`${t.name}-OP`]),
+    isOPTag: (tag: number) => tag === Tag.Types.ORIGINAL_POSTER || tags.some(t => tag === Tag.Types[`${t.name}-OP`]),
 
     getTagText(passedTagName: string, strings: Record<string, string>) {
-        if (!passedTagName) return "BOT";
+        if (!passedTagName) return strings.BOT_TAG_BOT;
         const [tagName, variant] = passedTagName.split("-");
         const tag = tags.find(({ name }) => tagName === name);
-        if (!tag) return "BOT";
+        if (!tag) return strings.BOT_TAG_BOT;
         if (variant === "BOT" && tagName !== "WEBHOOK" && this.settings.store.dontShowForBots) return strings.BOT_TAG_BOT;
 
+        const tagText = settings.store.tagSettings?.[tag.name]?.text || tag.displayName;
         switch (variant) {
             case "OP":
-                return `${strings.BOT_TAG_FORUM_ORIGINAL_POSTER} • ${tag.displayName}`;
+                return `${strings.BOT_TAG_FORUM_ORIGINAL_POSTER} • ${tagText}`;
             case "BOT":
-                return `${strings.BOT_TAG_BOT} • ${tag.displayName}`;
+                return `${strings.BOT_TAG_BOT} • ${tagText}`;
             default:
-                return tag.displayName;
+                return tagText;
         }
     },
 
@@ -242,12 +346,12 @@ return type!==null?$2.botTag,type"
         channel?: Channel & { isForumPost(): boolean; },
         channelId?: string;
         origType?: number;
-        location: string;
+        location: "chat" | "not-chat";
     }): number | null {
         if (location === "chat" && user.id === "1")
-            return Tags.OFFICIAL;
+            return Tag.Types.OFFICIAL;
         if (user.id === CLYDE_ID)
-            return Tags.AI;
+            return Tag.Types.AI;
 
         let type = typeof origType === "number" ? origType : null;
 
@@ -258,24 +362,19 @@ return type!==null?$2.botTag,type"
         const perms = this.getPermissions(user, channel);
 
         for (const tag of tags) {
-            switch (settings[`visibility_${tag.name}`]) {
-                case "always":
-                case location:
-                    break;
-                default:
-                    continue;
-            }
+            if (location === "chat" && !settings.tagSettings[tag.name].showInChat) continue;
+            if (location === "not-chat" && !settings.tagSettings[tag.name].showInNotChat) continue;
 
             if (
                 tag.permissions?.some(perm => perms.includes(perm)) ||
                 (tag.condition?.(message!, user, channel))
             ) {
                 if (channel.isForumPost() && channel.ownerId === user.id)
-                    type = Tags[`${tag.name}-OP`];
+                    type = Tag.Types[`${tag.name}-OP`];
                 else if (user.bot && !isWebhook(message!, user) && !settings.dontShowBotTag)
-                    type = Tags[`${tag.name}-BOT`];
+                    type = Tag.Types[`${tag.name}-BOT`];
                 else
-                    type = Tags[tag.name];
+                    type = Tag.Types[tag.name];
                 break;
             }
         }

src/plugins/noReplyMention.tsx

@@ -22,12 +22,27 @@ import definePlugin, { OptionType } from "@utils/types";
 import type { Message } from "discord-types/general";
 
 const settings = definePluginSettings({
-    exemptList: {
+    userList: {
         description:
-            "List of users to exempt from this plugin (separated by commas or spaces)",
+            "List of users to allow or exempt pings for (separated by commas or spaces)",
         type: OptionType.STRING,
         default: "1234567890123445,1234567890123445",
     },
+    shouldPingListed: {
+        description: "Behaviour",
+        type: OptionType.SELECT,
+        options: [
+            {
+                label: "Do not ping the listed users",
+                value: false,
+            },
+            {
+                label: "Only ping the listed users",
+                value: true,
+                default: true,
+            },
+        ],
+    },
     inverseShiftReply: {
         description: "Invert Discord's shift replying behaviour (enable to make shift reply mention user)",
         type: OptionType.BOOLEAN,
@@ -38,11 +53,12 @@ const settings = definePluginSettings({
 export default definePlugin({
     name: "NoReplyMention",
     description: "Disables reply pings by default",
-    authors: [Devs.DustyAngel47, Devs.axyie, Devs.pylix],
+    authors: [Devs.DustyAngel47, Devs.axyie, Devs.pylix, Devs.outfoxxed],
     settings,
 
     shouldMention(message: Message, isHoldingShift: boolean) {
-        const isExempt = settings.store.exemptList.includes(message.author.id);
+        const isListed = settings.store.userList.includes(message.author.id);
+        const isExempt = settings.store.shouldPingListed ? isListed : !isListed;
         return settings.store.inverseShiftReply ? isHoldingShift !== isExempt : !isHoldingShift && isExempt;
     },
 

src/plugins/partyMode.ts

@@ -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 { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { findStoreLazy } from "@webpack";
+import { GenericStore } from "@webpack/common";
+
+const PoggerModeSettingsStore: GenericStore = findStoreLazy("PoggermodeSettingsStore");
+
+const enum Intensity {
+    Normal,
+    Better,
+    ProjectX,
+}
+
+const settings = definePluginSettings({
+    superIntensePartyMode: {
+        description: "Party intensity",
+        type: OptionType.SELECT,
+        options: [
+            { label: "Normal", value: Intensity.Normal, default: true },
+            { label: "Better", value: Intensity.Better },
+            { label: "Project X", value: Intensity.ProjectX },
+        ],
+        restartNeeded: false,
+        onChange: setSettings
+    },
+});
+
+export default definePlugin({
+    name: "Party mode 🎉",
+    description: "Allows you to use party mode cause the party never ends ✨",
+    authors: [Devs.UwUDev],
+    settings,
+
+    start() {
+        setPoggerState(true);
+        setSettings(settings.store.superIntensePartyMode);
+    },
+
+    stop() {
+        setPoggerState(false);
+    },
+});
+
+function setPoggerState(state: boolean) {
+    Object.assign(PoggerModeSettingsStore.__getLocalVars().state, {
+        enabled: state,
+        settingsVisible: state
+    });
+}
+
+function setSettings(intensity: Intensity) {
+    const state = {
+        screenshakeEnabledLocations: { 0: true, 1: true, 2: true },
+        shakeIntensity: 1,
+        confettiSize: 16,
+        confettiCount: 5,
+        combosRequiredCount: 1
+    };
+
+    switch (intensity) {
+        case Intensity.Normal: {
+            Object.assign(state, {
+                screenshakeEnabledLocations: { 0: true, 1: false, 2: false },
+                combosRequiredCount: 5
+            });
+            break;
+        }
+        case Intensity.Better: {
+            Object.assign(state, {
+                confettiSize: 12,
+                confettiCount: 8,
+            });
+            break;
+        }
+        case Intensity.ProjectX: {
+            Object.assign(state, {
+                shakeIntensity: 20,
+                confettiSize: 25,
+                confettiCount: 15,
+            });
+            break;
+        }
+    }
+
+    Object.assign(PoggerModeSettingsStore.__getLocalVars().state, state);
+}

src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx

@@ -0,0 +1,225 @@
+/*
+ * 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 { Flex } from "@components/Flex";
+import { InfoIcon, OwnerCrownIcon } from "@components/Icons";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { ContextMenu, FluxDispatcher, GuildMemberStore, Menu, PermissionsBits, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
+import type { Guild } from "discord-types/general";
+
+import { cl, getPermissionDescription, getPermissionString } from "../utils";
+import { PermissionAllowedIcon, PermissionDefaultIcon, PermissionDeniedIcon } from "./icons";
+
+export const enum PermissionType {
+    Role = 0,
+    User = 1,
+    Owner = 2
+}
+
+export interface RoleOrUserPermission {
+    type: PermissionType;
+    id?: string;
+    permissions?: bigint;
+    overwriteAllow?: bigint;
+    overwriteDeny?: bigint;
+}
+
+function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) {
+    return openModal(modalProps => (
+        <RolesAndUsersPermissions
+            modalProps={modalProps}
+            permissions={permissions}
+            guild={guild}
+            header={header}
+        />
+    ));
+}
+
+function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
+    permissions.sort((a, b) => a.type - b.type);
+
+    useStateFromStores(
+        [GuildMemberStore],
+        () => GuildMemberStore.getMemberIds(guild.id),
+        null,
+        (old, current) => old.length === current.length
+    );
+
+    useEffect(() => {
+        const usersToRequest = permissions
+            .filter(p => p.type === PermissionType.User && !GuildMemberStore.isMember(guild.id, p.id!))
+            .map(({ id }) => id);
+
+        FluxDispatcher.dispatch({
+            type: "GUILD_MEMBERS_REQUEST",
+            guildIds: [guild.id],
+            userIds: usersToRequest
+        });
+    }, []);
+
+    const [selectedItemIndex, selectItem] = useState(0);
+    const selectedItem = permissions[selectedItemIndex];
+
+    return (
+        <ModalRoot
+            {...modalProps}
+            size={ModalSize.LARGE}
+        >
+            <ModalHeader>
+                <Text className={cl("perms-title")} variant="heading-lg/semibold">{header} permissions:</Text>
+                <ModalCloseButton onClick={modalProps.onClose} />
+            </ModalHeader>
+
+            <ModalContent>
+                {!selectedItem && (
+                    <div className={cl("perms-no-perms")}>
+                        <Text variant="heading-lg/normal">No permissions to display!</Text>
+                    </div>
+                )}
+
+                {selectedItem && (
+                    <div className={cl("perms-container")}>
+                        <div className={cl("perms-list")}>
+                            {permissions.map((permission, index) => {
+                                const user = UserStore.getUser(permission.id ?? "");
+                                const role = guild.roles[permission.id ?? ""];
+
+                                return (
+                                    <button
+                                        className={cl("perms-list-item-btn")}
+                                        onClick={() => selectItem(index)}
+                                    >
+                                        <div
+                                            className={cl("perms-list-item", { "perms-list-item-active": selectedItemIndex === index })}
+                                            onContextMenu={e => {
+                                                if (permission.type === PermissionType.Role)
+                                                    ContextMenu.open(e, () => (
+                                                        <RoleContextMenu
+                                                            guild={guild}
+                                                            roleId={permission.id!}
+                                                            onClose={modalProps.onClose}
+                                                        />
+                                                    ));
+                                            }}
+                                        >
+                                            {(permission.type === PermissionType.Role || permission.type === PermissionType.Owner) && (
+                                                <span
+                                                    className={cl("perms-role-circle")}
+                                                    style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }}
+                                                />
+                                            )}
+                                            {permission.type === PermissionType.User && user !== undefined && (
+                                                <img
+                                                    className={cl("perms-user-img")}
+                                                    src={user.getAvatarURL(void 0, void 0, false)}
+                                                />
+                                            )}
+                                            <Text variant="text-md/normal">
+                                                {
+                                                    permission.type === PermissionType.Role
+                                                        ? role?.name || "Unknown Role"
+                                                        : permission.type === PermissionType.User
+                                                            ? user?.tag || "Unknown User"
+                                                            : (
+                                                                <Flex style={{ gap: "0.2em", justifyItems: "center" }}>
+                                                                    @owner
+                                                                    <OwnerCrownIcon
+                                                                        height={18}
+                                                                        width={18}
+                                                                        aria-hidden="true"
+                                                                    />
+                                                                </Flex>
+                                                            )
+                                                }
+                                            </Text>
+                                        </div>
+                                    </button>
+                                );
+                            })}
+                        </div>
+                        <div className={cl("perms-perms")}>
+                            {Object.entries(PermissionsBits).map(([permissionName, bit]) => (
+                                <div className={cl("perms-perms-item")}>
+                                    <div className={cl("perms-perms-item-icon")}>
+                                        {(() => {
+                                            const { permissions, overwriteAllow, overwriteDeny } = selectedItem;
+
+                                            if (permissions)
+                                                return (permissions & bit) === bit
+                                                    ? PermissionAllowedIcon()
+                                                    : PermissionDeniedIcon();
+
+                                            if (overwriteAllow && (overwriteAllow & bit) === bit)
+                                                return PermissionAllowedIcon();
+                                            if (overwriteDeny && (overwriteDeny & bit) === bit)
+                                                return PermissionDeniedIcon();
+
+                                            return PermissionDefaultIcon();
+                                        })()}
+                                    </div>
+                                    <Text variant="text-md/normal">{getPermissionString(permissionName)}</Text>
+
+                                    <Tooltip text={getPermissionDescription(permissionName) || "No Description"}>
+                                        {props => <InfoIcon {...props} />}
+                                    </Tooltip>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                )}
+            </ModalContent>
+        </ModalRoot >
+    );
+}
+
+function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: string; onClose: () => void; }) {
+    return (
+        <Menu.Menu
+            navId={cl("role-context-menu")}
+            onClose={ContextMenu.close}
+            aria-label="Role Options"
+        >
+            <Menu.MenuItem
+                id="vc-pw-view-as-role"
+                label="View As Role"
+                action={() => {
+                    const role = guild.roles[roleId];
+                    if (!role) return;
+
+                    onClose();
+
+                    FluxDispatcher.dispatch({
+                        type: "IMPERSONATE_UPDATE",
+                        guildId: guild.id,
+                        data: {
+                            type: "ROLES",
+                            roles: {
+                                [roleId]: role
+                            }
+                        }
+                    });
+                }}
+            />
+        </Menu.Menu>
+    );
+}
+
+const RolesAndUsersPermissions = ErrorBoundary.wrap(RolesAndUsersPermissionsComponent);
+
+export default openRolesAndUsersPermissionsModal;

src/plugins/permissionsViewer/components/UserPermissions.tsx

@@ -0,0 +1,197 @@
+/*
+ * 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 { proxyLazy } from "@utils/lazy";
+import { classes } from "@utils/misc";
+import { filters, findBulk } from "@webpack";
+import { i18n, PermissionsBits, Text, Tooltip, useMemo, UserStore, useState } from "@webpack/common";
+import type { Guild, GuildMember } from "discord-types/general";
+
+import { PermissionsSortOrder, settings } from "..";
+import { cl, getPermissionString, getSortedRoles, sortUserRoles } from "../utils";
+import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermission } from "./RolesAndUsersPermissions";
+
+interface UserPermission {
+    permission: string;
+    roleColor: string;
+    rolePosition: number;
+}
+
+type UserPermissions = Array<UserPermission>;
+
+const Classes = proxyLazy(() => {
+    const modules = findBulk(
+        filters.byProps("roles", "rolePill", "rolePillBorder"),
+        filters.byProps("roleCircle", "dotBorderBase", "dotBorderColor"),
+        filters.byProps("roleNameOverflow", "root", "roleName", "roleRemoveButton")
+    );
+
+    return Object.assign({}, ...modules);
+}) as Record<"roles" | "rolePill" | "rolePillBorder" | "desaturateUserColors" | "flex" | "alignCenter" | "justifyCenter" | "svg" | "background" | "dot" | "dotBorderColor" | "roleCircle" | "dotBorderBase" | "flex" | "alignCenter" | "justifyCenter" | "wrap" | "root" | "role" | "roleRemoveButton" | "roleDot" | "roleFlowerStar" | "roleRemoveIcon" | "roleRemoveIconFocused" | "roleVerifiedIcon" | "roleName" | "roleNameOverflow" | "actionButton" | "overflowButton" | "addButton" | "addButtonIcon" | "overflowRolesPopout" | "overflowRolesPopoutArrowWrapper" | "overflowRolesPopoutArrow" | "popoutBottom" | "popoutTop" | "overflowRolesPopoutHeader" | "overflowRolesPopoutHeaderIcon" | "overflowRolesPopoutHeaderText" | "roleIcon", string>;
+
+function UserPermissionsComponent({ guild, guildMember }: { guild: Guild; guildMember: GuildMember; }) {
+    const stns = settings.use(["permissionsSortOrder"]);
+    const [viewPermissions, setViewPermissions] = useState(settings.store.defaultPermissionsDropdownState);
+
+    const [rolePermissions, userPermissions] = useMemo(() => {
+        const userPermissions: UserPermissions = [];
+
+        const userRoles = getSortedRoles(guild, guildMember);
+
+        const rolePermissions: Array<RoleOrUserPermission> = userRoles.map(role => ({
+            type: PermissionType.Role,
+            ...role
+        }));
+
+        if (guild.ownerId === guildMember.userId) {
+            rolePermissions.push({
+                type: PermissionType.Owner,
+                permissions: Object.values(PermissionsBits).reduce((prev, curr) => prev | curr, 0n)
+            });
+
+            const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner";
+            userPermissions.push({
+                permission: OWNER,
+                roleColor: "var(--primary-300)",
+                rolePosition: Infinity
+            });
+        }
+
+        sortUserRoles(userRoles);
+
+        for (const [permission, bit] of Object.entries(PermissionsBits)) {
+            for (const { permissions, colorString, position, name } of userRoles) {
+                if ((permissions & bit) === bit) {
+                    userPermissions.push({
+                        permission: getPermissionString(permission),
+                        roleColor: colorString || "var(--primary-300)",
+                        rolePosition: position
+                    });
+
+                    break;
+                }
+            }
+        }
+
+        userPermissions.sort((a, b) => b.rolePosition - a.rolePosition);
+
+        return [rolePermissions, userPermissions];
+    }, [stns.permissionsSortOrder]);
+
+    const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes;
+
+    return (
+        <div>
+            <div className={cl("userperms-title-container")}>
+                <Text className={cl("userperms-title")} variant="eyebrow">Permissions</Text>
+
+                <div className={cl("userperms-btns-container")}>
+                    <Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
+                        {tooltipProps => (
+                            <button
+                                {...tooltipProps}
+                                className={cl("userperms-sortorder-btn")}
+                                onClick={() => {
+                                    stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
+                                }}
+                            >
+                                <svg
+                                    width="20"
+                                    height="20"
+                                    viewBox="0 96 960 960"
+                                    transform={stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
+                                >
+                                    <path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
+                                </svg>
+                            </button>
+                        )}
+                    </Tooltip>
+
+                    <Tooltip text="Role Details">
+                        {tooltipProps => (
+                            <button
+                                {...tooltipProps}
+                                className={cl("userperms-permdetails-btn")}
+                                onClick={() =>
+                                    openRolesAndUsersPermissionsModal(
+                                        rolePermissions,
+                                        guild,
+                                        guildMember.nick || UserStore.getUser(guildMember.userId).username
+                                    )
+                                }
+                            >
+                                <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
+                                </svg>
+                            </button>
+                        )}
+                    </Tooltip>
+
+                    <Tooltip text={viewPermissions ? "Hide Permissions" : "View Permissions"}>
+                        {tooltipProps => (
+                            <button
+                                {...tooltipProps}
+                                className={cl("userperms-toggleperms-btn")}
+                                onClick={() => setViewPermissions(v => !v)}
+                            >
+                                <svg
+                                    width="24"
+                                    height="24"
+                                    viewBox="0 0 24 24"
+                                    transform={viewPermissions ? "scale(1 -1)" : "scale(1 1)"}
+                                >
+                                    <path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
+                                </svg>
+                            </button>
+                        )}
+                    </Tooltip>
+                </div>
+            </div>
+
+            {viewPermissions && userPermissions.length > 0 && (
+                <div className={classes(root, roles)}>
+                    {userPermissions.map(({ permission, roleColor }) => (
+                        <div className={classes(role, rolePill, rolePillBorder)}>
+                            <div className={roleRemoveButton}>
+                                <span
+                                    className={roleCircle}
+                                    style={{ backgroundColor: roleColor }}
+                                />
+                            </div>
+                            <div className={roleName}>
+                                <Text
+                                    className={roleNameOverflow}
+                                    variant="text-xs/medium"
+                                >
+                                    {permission}
+                                </Text>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default ErrorBoundary.wrap(UserPermissionsComponent, { noop: true });

src/plugins/permissionsViewer/components/icons.tsx

@@ -0,0 +1,58 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+export function PermissionDeniedIcon() {
+    return (
+        <svg
+            height="24"
+            width="24"
+            viewBox="0 0 24 24"
+        >
+            <title>Denied</title>
+            <path fill="var(--status-danger)" d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z" />
+        </svg>
+    );
+}
+
+export function PermissionAllowedIcon() {
+    return (
+        <svg
+            height="24"
+            width="24"
+            viewBox="0 0 24 24"
+        >
+            <title>Allowed</title>
+            <path fill="var(--text-positive)" d="M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7.00003L19.5899 5.59003L8.99991 16.17ZZ" />
+        </svg>
+    );
+}
+
+export function PermissionDefaultIcon() {
+    return (
+        <svg
+            height="24"
+            width="24"
+            viewBox="0 0 16 16"
+        >
+            <g>
+                <title>Not overwritten</title>
+                <polygon fill="var(--text-normal)" points="12 2.32 10.513 2 4 13.68 5.487 14" />
+            </g>
+        </svg>
+    );
+}

src/plugins/permissionsViewer/index.tsx

@@ -0,0 +1,189 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { ChannelStore, GuildMemberStore, GuildStore, Menu, PermissionsBits, UserStore } from "@webpack/common";
+import type { Guild, GuildMember } from "discord-types/general";
+
+import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions";
+import UserPermissions from "./components/UserPermissions";
+import { getSortedRoles, sortPermissionOverwrites } from "./utils";
+
+export const enum PermissionsSortOrder {
+    HighestRole,
+    LowestRole
+}
+
+const enum MenuItemParentType {
+    User,
+    Channel,
+    Guild
+}
+
+export const settings = definePluginSettings({
+    permissionsSortOrder: {
+        description: "The sort method used for defining which role grants an user a certain permission",
+        type: OptionType.SELECT,
+        options: [
+            { label: "Highest Role", value: PermissionsSortOrder.HighestRole, default: true },
+            { label: "Lowest Role", value: PermissionsSortOrder.LowestRole }
+        ],
+    },
+    defaultPermissionsDropdownState: {
+        description: "Whether the permissions dropdown on user popouts should be open by default",
+        type: OptionType.BOOLEAN,
+        default: false,
+    }
+});
+
+function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
+    if (type === MenuItemParentType.User && !GuildMemberStore.isMember(guildId, id!)) return null;
+
+    return (
+        <Menu.MenuItem
+            id="perm-viewer-permissions"
+            label="Permissions"
+            action={() => {
+                const guild = GuildStore.getGuild(guildId);
+
+                let permissions: RoleOrUserPermission[];
+                let header: string;
+
+                switch (type) {
+                    case MenuItemParentType.User: {
+                        const member = GuildMemberStore.getMember(guildId, id!);
+
+                        permissions = getSortedRoles(guild, member)
+                            .map(role => ({
+                                type: PermissionType.Role,
+                                ...role
+                            }));
+
+                        if (guild.ownerId === id) {
+                            permissions.push({
+                                type: PermissionType.Owner,
+                                permissions: Object.values(PermissionsBits).reduce((prev, curr) => prev | curr, 0n)
+                            });
+                        }
+
+                        header = member.nick ?? UserStore.getUser(member.userId).username;
+
+                        break;
+                    }
+
+                    case MenuItemParentType.Channel: {
+                        const channel = ChannelStore.getChannel(id!);
+
+                        permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({
+                            type: type as PermissionType,
+                            id,
+                            overwriteAllow: allow,
+                            overwriteDeny: deny
+                        })), guildId);
+
+                        header = channel.name;
+
+                        break;
+                    }
+
+                    default: {
+                        permissions = Object.values(guild.roles).map(role => ({
+                            type: PermissionType.Role,
+                            ...role
+                        }));
+
+                        header = guild.name;
+
+                        break;
+                    }
+                }
+
+                openRolesAndUsersPermissionsModal(permissions, guild, header);
+            }}
+        />
+    );
+}
+
+function makeContextMenuPatch(childId: string | string[], type?: MenuItemParentType): NavContextMenuPatchCallback {
+    return (children, props) => () => {
+        if (!props) return children;
+
+        const group = findGroupChildrenByChildId(childId, children);
+
+        const item = (() => {
+            switch (type) {
+                case MenuItemParentType.User:
+                    return MenuItem(props.guildId, props.user.id, type);
+                case MenuItemParentType.Channel:
+                    return MenuItem(props.guild.id, props.channel.id, type);
+                case MenuItemParentType.Guild:
+                    return MenuItem(props.guild.id);
+                default:
+                    return null;
+            }
+        })();
+
+        if (item == null) return;
+
+        if (group)
+            group.push(item);
+        else if (childId === "roles" && props.guildId)
+            // "roles" may not be present due to the member not having any roles. In that case, add it above "Copy ID"
+            children.splice(-1, 0, <Menu.MenuGroup>{item}</Menu.MenuGroup>);
+    };
+}
+
+export default definePlugin({
+    name: "PermissionsViewer",
+    description: "View the permissions a user or channel has, and the roles of a server",
+    authors: [Devs.Nuckyz, Devs.Ven],
+    settings,
+
+    patches: [
+        {
+            find: ".Messages.BOT_PROFILE_SLASH_COMMANDS",
+            replacement: {
+                match: /showBorder:.{0,60}}\),(?<=guild:(\i),guildMember:(\i),.+?)/,
+                replace: (m, guild, guildMember) => `${m}$self.UserPermissions(${guild},${guildMember}),`
+            }
+        }
+    ],
+
+    UserPermissions: (guild: Guild, guildMember?: GuildMember) => !!guildMember && <UserPermissions guild={guild} guildMember={guildMember} />,
+
+    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", this.guildContextMenuPatch);
+    },
+
+    stop() {
+        removeContextMenuPatch("user-context", this.userContextMenuPatch);
+        removeContextMenuPatch("channel-context", this.channelContextMenuPatch);
+        removeContextMenuPatch("guild-context", this.guildContextMenuPatch);
+    },
+});

src/plugins/permissionsViewer/styles.css

@@ -0,0 +1,146 @@
+/* User Permissions Component */
+
+.vc-permviewer-userperms-title-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    margin-bottom: 6px;
+}
+
+.vc-permviewer-userperms-btns-container {
+    display: flex;
+    align-items: center;
+}
+
+.vc-permviewer-userperms-sortorder-btn {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+}
+
+.vc-permviewer-userperms-permdetails-btn {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.vc-permviewer-userperms-toggleperms-btn {
+    all: unset;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+/*  RolesAndUsersPermissions Component */
+
+.vc-permviewer-perms-title {
+    flex-grow: 1;
+}
+
+.vc-permviewer-perms-no-perms {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
+.vc-permviewer-perms-container {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    grid-template-areas: "list permissions";
+    padding: 16px 0;
+}
+
+.vc-permviewer-perms-list {
+    grid-area: list;
+    display: flex;
+    flex-direction: column;
+    border-right: 2px solid var(--background-modifier-active);
+}
+
+.vc-permviewer-perms-list-item-btn {
+    all: unset;
+    cursor: pointer;
+}
+
+.vc-permviewer-perms-list-item {
+    display: flex;
+    align-items: center;
+    padding: 8px 5px;
+    cursor: pointer;
+    width: 230px;
+}
+
+.vc-permviewer-perms-list-item > div {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.vc-permviewer-perms-list-item-active {
+    background-color: var(--background-modifier-selected);
+    border-radius: 5px;
+}
+
+.vc-permviewer-perms-role-circle {
+    border-radius: 50%;
+    width: 12px;
+    height: 12px;
+    margin-left: 3px;
+    margin-right: 11px;
+    flex-shrink: 0;
+}
+
+.vc-permviewer-perms-user-img {
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
+}
+
+.vc-permviewer-perms-perms {
+    grid-area: permissions;
+    display: flex;
+    flex-direction: column;
+    margin-left: 5px;
+}
+
+.vc-permviewer-perms-perms-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 2px solid var(--background-modifier-active);
+}
+
+.vc-permviewer-perms-perms-item:last-child {
+    border: 0;
+}
+
+.vc-permviewer-perms-perms-item-icon {
+    border: 1px solid var(--background-modifier-selected);
+    width: 24px;
+    height: 24px;
+    margin-right: 5px;
+}
+
+.vc-permviewer-perms-perms-item .vc-info-icon {
+    color: var(--interactive-muted);
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    scale: 0.9;
+    transition: color ease-in 0.1s;
+}
+
+.vc-permviewer-perms-perms-item .vc-info-icon:hover {
+    color: var(--interactive-active);
+}

src/plugins/permissionsViewer/utils.ts

@@ -0,0 +1,98 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { classNameFactory } from "@api/Styles";
+import { wordsToTitle } from "@utils/text";
+import { GuildStore, i18n, Parser } from "@webpack/common";
+import { Guild, GuildMember, Role } from "discord-types/general";
+import type { ReactNode } from "react";
+
+import { PermissionsSortOrder, settings } from ".";
+import { PermissionType } from "./components/RolesAndUsersPermissions";
+
+export const cl = classNameFactory("vc-permviewer-");
+
+function formatPermissionWithoutMatchingString(permission: string) {
+    return wordsToTitle(permission.toLowerCase().split("_"));
+}
+
+// because discord is unable to be consistent with their names
+const PermissionKeyMap = {
+    MANAGE_GUILD: "MANAGE_SERVER",
+    MANAGE_GUILD_EXPRESSIONS: "MANAGE_EXPRESSIONS",
+    CREATE_GUILD_EXPRESSIONS: "CREATE_EXPRESSIONS",
+    MODERATE_MEMBERS: "MODERATE_MEMBER", // HELLOOOO ??????
+    STREAM: "VIDEO",
+    SEND_VOICE_MESSAGES: "ROLE_PERMISSIONS_SEND_VOICE_MESSAGE",
+} as const;
+
+export function getPermissionString(permission: string) {
+    permission = PermissionKeyMap[permission] || permission;
+
+    return i18n.Messages[permission] ||
+        // shouldn't get here but just in case
+        formatPermissionWithoutMatchingString(permission);
+}
+
+export function getPermissionDescription(permission: string): ReactNode {
+    // DISCORD PLEEEEEEEEAAAAASE IM BEGGING YOU :(
+    if (permission === "USE_APPLICATION_COMMANDS")
+        permission = "USE_APPLICATION_COMMANDS_GUILD";
+    else if (permission === "SEND_VOICE_MESSAGES")
+        permission = "SEND_VOICE_MESSAGE_GUILD";
+    else if (permission !== "STREAM")
+        permission = PermissionKeyMap[permission] || permission;
+
+    const msg = i18n.Messages[`ROLE_PERMISSIONS_${permission}_DESCRIPTION`] as any;
+    if (msg?.hasMarkdown)
+        return Parser.parse(msg.message);
+
+    if (typeof msg === "string") return msg;
+
+    return "";
+}
+
+export function getSortedRoles({ roles, id }: Guild, member: GuildMember) {
+    return [...member.roles, id]
+        .map(id => roles[id])
+        .sort((a, b) => b.position - a.position);
+}
+
+export function sortUserRoles(roles: Role[]) {
+    switch (settings.store.permissionsSortOrder) {
+        case PermissionsSortOrder.HighestRole:
+            return roles.sort((a, b) => b.position - a.position);
+        case PermissionsSortOrder.LowestRole:
+            return roles.sort((a, b) => a.position - b.position);
+        default:
+            return roles;
+    }
+}
+
+export function sortPermissionOverwrites<T extends { id: string; type: number; }>(overwrites: T[], guildId: string) {
+    const guild = GuildStore.getGuild(guildId);
+
+    return overwrites.sort((a, b) => {
+        if (a.type !== PermissionType.Role || b.type !== PermissionType.Role) return 0;
+
+        const roleA = guild.roles[a.id];
+        const roleB = guild.roles[b.id];
+
+        return roleB.position - roleA.position;
+    });
+}

src/plugins/platformIndicators.tsx

@@ -29,22 +29,16 @@ import { User } from "discord-types/general";
 
 const SessionsStore = findStoreLazy("SessionsStore");
 
-function Icon(path: string, viewBox = "0 0 24 24") {
-    return ({ color, tooltip, wantMargin }: { color: string; tooltip: string; wantMargin: boolean; }) => (
+function Icon(path: string, opts?: { viewBox?: string; width?: number; height?: number; }) {
+    return ({ color, tooltip }: { color: string; tooltip: string; }) => (
         <Tooltip text={tooltip} >
             {(tooltipProps: any) => (
                 <svg
                     {...tooltipProps}
-                    height="20"
-                    width="20"
-                    viewBox={viewBox}
+                    height={opts?.height ?? 20}
+                    width={opts?.width ?? 20}
+                    viewBox={opts?.viewBox ?? "0 0 24 24"}
                     fill={color}
-                    style={{
-                        marginLeft: wantMargin ? 4 : 0,
-                        verticalAlign: "top",
-                        position: "relative",
-                        top: wantMargin ? 1 : 0,
-                    }}
                 >
                     <path d={path} />
                 </svg>
@@ -56,23 +50,23 @@ function Icon(path: string, viewBox = "0 0 24 24") {
 const Icons = {
     desktop: Icon("M4 2.5c-1.103 0-2 .897-2 2v11c0 1.104.897 2 2 2h7v2H7v2h10v-2h-4v-2h7c1.103 0 2-.896 2-2v-11c0-1.103-.897-2-2-2H4Zm16 2v9H4v-9h16Z"),
     web: Icon("M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93Zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39Z"),
-    mobile: Icon("M15.5 1h-8A2.5 2.5 0 0 0 5 3.5v17A2.5 2.5 0 0 0 7.5 23h8a2.5 2.5 0 0 0 2.5-2.5v-17A2.5 2.5 0 0 0 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"),
-    console: Icon("M14.8 2.7 9 3.1V47h3.3c1.7 0 6.2.3 10 .7l6.7.6V2l-4.2.2c-2.4.1-6.9.3-10 .5zm1.8 6.4c1 1.7-1.3 3.6-2.7 2.2C12.7 10.1 13.5 8 15 8c.5 0 1.2.5 1.6 1.1zM16 33c0 6-.4 10-1 10s-1-4-1-10 .4-10 1-10 1 4 1 10zm15-8v23.3l3.8-.7c2-.3 4.7-.6 6-.6H43V3h-2.2c-1.3 0-4-.3-6-.6L31 1.7V25z", "0 0 50 50"),
+    mobile: Icon("M 187 0 L 813 0 C 916.277 0 1000 83.723 1000 187 L 1000 1313 C 1000 1416.277 916.277 1500 813 1500 L 187 1500 C 83.723 1500 0 1416.277 0 1313 L 0 187 C 0 83.723 83.723 0 187 0 Z M 125 1000 L 875 1000 L 875 250 L 125 250 Z M 500 1125 C 430.964 1125 375 1180.964 375 1250 C 375 1319.036 430.964 1375 500 1375 C 569.036 1375 625 1319.036 625 1250 C 625 1180.964 569.036 1125 500 1125 Z", { viewBox: "0 0 1000 1500", height: 17, width: 17 }),
+    console: Icon("M14.8 2.7 9 3.1V47h3.3c1.7 0 6.2.3 10 .7l6.7.6V2l-4.2.2c-2.4.1-6.9.3-10 .5zm1.8 6.4c1 1.7-1.3 3.6-2.7 2.2C12.7 10.1 13.5 8 15 8c.5 0 1.2.5 1.6 1.1zM16 33c0 6-.4 10-1 10s-1-4-1-10 .4-10 1-10 1 4 1 10zm15-8v23.3l3.8-.7c2-.3 4.7-.6 6-.6H43V3h-2.2c-1.3 0-4-.3-6-.6L31 1.7V25z", { viewBox: "0 0 50 50" }),
 };
 type Platform = keyof typeof Icons;
 
 const getStatusColor = findByCodeLazy(".TWITCH", ".STREAMING", ".INVISIBLE");
 
-const PlatformIcon = ({ platform, status, wantMargin }: { platform: Platform, status: string; wantMargin: boolean; }) => {
+const PlatformIcon = ({ platform, status }: { platform: Platform, status: string; }) => {
     const tooltip = platform[0].toUpperCase() + platform.slice(1);
     const Icon = Icons[platform] ?? Icons.desktop;
 
-    return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} wantMargin={wantMargin} />;
+    return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} />;
 };
 
 const getStatus = (id: string): Record<Platform, string> => PresenceStore.getState()?.clientStatuses?.[id];
 
-const PlatformIndicator = ({ user, wantMargin = true }: { user: User; wantMargin?: boolean; }) => {
+const PlatformIndicator = ({ user, wantMargin = true, wantTopMargin = false }: { user: User; wantMargin?: boolean; wantTopMargin?: boolean; }) => {
     if (!user || user.bot) return null;
 
     if (user.id === UserStore.getCurrentUser().id) {
@@ -105,14 +99,27 @@ const PlatformIndicator = ({ user, wantMargin = true }: { user: User; wantMargin
             key={platform}
             platform={platform as Platform}
             status={status}
-            wantMargin={wantMargin}
         />
     ));
 
     if (!icons.length) return null;
 
     return (
-        <span className="vc-platform-indicator">
+        <span
+            className="vc-platform-indicator"
+            style={{
+                display: "inline-flex",
+                justifyContent: "center",
+                alignItems: "center",
+                marginLeft: wantMargin ? 4 : 0,
+                verticalAlign: "top",
+                position: "relative",
+                top: wantTopMargin ? 2 : 0,
+                padding: !wantMargin ? 1 : 0,
+                gap: 2
+            }}
+
+        >
             {icons}
         </span>
     );
@@ -144,7 +151,7 @@ const indicatorLocations = {
         description: "Inside messages",
         onEnable: () => addDecoration("platform-indicator", props =>
             <ErrorBoundary noop>
-                <PlatformIndicator user={props.message?.author} />
+                <PlatformIndicator user={props.message?.author} wantTopMargin={true} />
             </ErrorBoundary>
         ),
         onDisable: () => removeDecoration("platform-indicator")
@@ -154,7 +161,7 @@ const indicatorLocations = {
 export default definePlugin({
     name: "PlatformIndicators",
     description: "Adds platform indicators (Desktop, Mobile, Web...) to users",
-    authors: [Devs.kemo, Devs.TheSun, Devs.Nuckyz],
+    authors: [Devs.kemo, Devs.TheSun, Devs.Nuckyz, Devs.Ven],
     dependencies: ["MessageDecorationsAPI", "MemberListDecoratorsAPI"],
 
     start() {

src/plugins/pronoundb/components/PronounsChatComponent.tsx

@@ -26,10 +26,12 @@ import { settings } from "../settings";
 
 const styles: Record<string, string> = findByPropsLazy("timestampInline");
 
+const AUTO_MODERATION_ACTION = 24;
+
 function shouldShow(message: Message): boolean {
     if (!settings.store.showInMessages)
         return false;
-    if (message.author.bot || message.author.system)
+    if (message.author.bot || message.author.system || message.type === AUTO_MODERATION_ACTION)
         return false;
     if (!settings.store.showSelf && message.author.id === UserStore.getCurrentUser().id)
         return false;

src/plugins/reverseImageSearch.tsx

@@ -17,6 +17,8 @@
 */
 
 import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
+import { Flex } from "@components/Flex";
+import { OpenExternalIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
 import { Menu } from "@webpack/common";
@@ -28,7 +30,7 @@ const Engines = {
     IQDB: "https://iqdb.org/?url=",
     TinEye: "https://www.tineye.com/search?url=",
     ImgOps: "https://imgops.com/start?url="
-};
+} as const;
 
 function search(src: string, engine: string) {
     open(engine + encodeURIComponent(src), "_blank");
@@ -50,13 +52,28 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =>
                 key="search-image"
                 id="search-image"
             >
-                {Object.keys(Engines).map(engine => {
+                {Object.keys(Engines).map((engine, i) => {
                     const key = "search-image-" + engine;
                     return (
                         <Menu.MenuItem
                             key={key}
                             id={key}
-                            label={engine}
+                            label={
+                                <Flex style={{ alignItems: "center", gap: "0.5em" }}>
+                                    <img
+                                        style={{
+                                            borderRadius: i >= 3 // Do not round Google, Yandex & SauceNAO
+                                                ? "50%"
+                                                : void 0
+                                        }}
+                                        aria-hidden="true"
+                                        height={16}
+                                        width={16}
+                                        src={new URL("/favicon.ico", Engines[engine]).toString().replace("lens.", "")}
+                                    />
+                                    {engine}
+                                </Flex>
+                            }
                             action={() => search(src, Engines[engine])}
                         />
                     );
@@ -64,7 +81,12 @@ const imageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =>
                 <Menu.MenuItem
                     key="search-image-all"
                     id="search-image-all"
-                    label="All"
+                    label={
+                        <Flex style={{ alignItems: "center", gap: "0.5em" }}>
+                            <OpenExternalIcon height={16} width={16} />
+                            All
+                        </Flex>
+                    }
                     action={() => Object.values(Engines).forEach(e => search(src, e))}
                 />
             </Menu.MenuItem>
@@ -76,6 +98,8 @@ export default definePlugin({
     name: "ReverseImageSearch",
     description: "Adds ImageSearch to image context menus",
     authors: [Devs.Ven, Devs.Nuckyz],
+    tags: ["ImageUtilities"],
+
     patches: [
         {
             find: ".Messages.MESSAGE_ACTIONS_MENU_LABEL",

src/plugins/reviewDB/Utils/Utils.tsx

@@ -44,20 +44,19 @@ export function authorize(callback?: any) {
             {...props}
             scopes={["identify"]}
             responseType="code"
-            redirectUri="https://manti.vendicated.dev/URauth"
+            redirectUri="https://manti.vendicated.dev/api/reviewdb/auth"
             permissions={0n}
             clientId="915703782174752809"
             cancelCompletesFlow={false}
             callback={async (u: string) => {
                 try {
                     const url = new URL(u);
-                    url.searchParams.append("returnType", "json");
                     url.searchParams.append("clientMod", "vencord");
                     const res = await fetch(url, {
                         headers: new Headers({ Accept: "application/json" })
                     });
-                    const { token, status } = await res.json();
-                    if (status === 0) {
+                    const { token, success } = await res.json();
+                    if (success) {
                         Settings.plugins.ReviewDB.token = token;
                         showToast("Successfully logged in!");
                         callback?.();
@@ -65,7 +64,7 @@ export function authorize(callback?: any) {
                         showToast("An Error occurred while logging in.");
                     }
                 } catch (e) {
-                    new Logger("ReviewDB").error("Failed to authorise", e);
+                    new Logger("ReviewDB").error("Failed to authorize", e);
                 }
             }}
         />
@@ -86,5 +85,5 @@ export function showToast(text: string) {
 export const sleep = (ms: number) => new Promise(r => setTimeout(r, ms));
 
 export function canDeleteReview(review: Review, userId: string) {
-    if (review.sender.discordID === userId || Settings.plugins.ReviewDB.userType === UserType.Admin) return true;
+    if (review.sender.discordID === userId || Settings.plugins.ReviewDB.user?.type === UserType.Admin) return true;
 }

src/plugins/reviewDB/components/ReviewComponent.tsx

@@ -34,19 +34,17 @@ export default LazyComponent(() => {
     const [
         { cozyMessage, buttons, message, groupStart },
         { container, isHeader },
-        { avatar, clickable, username, messageContent, wrapper, cozy, timestampInline, timestamp },
-        { contents },
+        { avatar, clickable, username, messageContent, wrapper, cozy },
         buttonClasses,
-        { defaultColor }
     ] = findBulk(
         p("cozyMessage"),
         p("container", "isHeader"),
         p("avatar", "zalgo"),
-        p("contents"),
         p("button", "wrapper", "selected"),
-        p("defaultColor")
     );
 
+    const dateFormat = new Intl.DateTimeFormat();
+
     return function ReviewComponent({ review, refetch }: { review: Review; refetch(): void; }) {
         function openModal() {
             openUserProfileModal(review.sender.discordID);
@@ -89,7 +87,7 @@ export default LazyComponent(() => {
                 }
             }>
 
-                <div className={contents} style={{ paddingLeft: "0px" }}>
+                <div>
                     <img
                         className={classes(avatar, clickable)}
                         onClick={openModal}
@@ -107,16 +105,14 @@ export default LazyComponent(() => {
 
                     {
                         !Settings.plugins.ReviewDB.hideTimestamps && (
-                            <Timestamp
-                                timestamp={moment(review.timestamp * 1000)}
-                                compact={true}
-                            />
-                        )
+                            <Timestamp timestamp={moment(review.timestamp * 1000)} >
+                                {dateFormat.format(review.timestamp * 1000)}
+                            </Timestamp>)
                     }
 
                     <p
-                        className={classes(messageContent, defaultColor)}
-                        style={{ fontSize: 15, marginTop: 4 }}
+                        className={classes(messageContent)}
+                        style={{ fontSize: 15, marginTop: 4, color: "var(--text-normal)" }}
                     >
                         {review.comment}
                     </p>

src/plugins/reviewDB/components/ReviewsView.tsx

@@ -19,7 +19,7 @@
 import { Settings } from "@api/Settings";
 import { classes } from "@utils/misc";
 import { useAwaiter } from "@utils/react";
-import { findLazy } from "@webpack";
+import { findByPropsLazy } from "@webpack";
 import { Forms, React, Text, UserStore } from "@webpack/common";
 import type { KeyboardEvent } from "react";
 
@@ -27,7 +27,7 @@ import { addReview, getReviews } from "../Utils/ReviewDBAPI";
 import { authorize, showToast } from "../Utils/Utils";
 import ReviewComponent from "./ReviewComponent";
 
-const Classes = findLazy(m => typeof m.textarea === "string");
+const Classes = findByPropsLazy("inputDefault", "editable");
 
 export default function ReviewsView({ userId }: { userId: string; }) {
     const { token } = Settings.plugins.ReviewDB;
@@ -65,7 +65,7 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                 tag="h2"
                 variant="eyebrow"
                 style={{
-                    marginBottom: "12px",
+                    marginBottom: "8px",
                     color: "var(--header-primary)"
                 }}
             >
@@ -79,13 +79,17 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                 />
             )}
             {reviews?.length === 0 && (
-                <Forms.FormText style={{ padding: "12px", paddingTop: "0px", paddingLeft: "4px", fontWeight: "bold", fontStyle: "italic" }}>
+                <Forms.FormText style={{ paddingRight: "12px", paddingTop: "0px", paddingLeft: "0px", paddingBottom: "4px", fontWeight: "bold", fontStyle: "italic" }}>
                     Looks like nobody reviewed this user yet. You could be the first!
                 </Forms.FormText>
             )}
             <textarea
-                className={classes(Classes.textarea.replace("textarea", ""), "enter-comment")}
-                // this produces something like '-_59yqs ...' but since no class exists with that name its fine
+                className={classes(Classes.inputDefault, "enter-comment")}
+                onKeyDownCapture={e => {
+                    if (e.key === "Enter") {
+                        e.preventDefault(); // prevent newlines
+                    }
+                }}
                 placeholder={
                     token
                         ? (reviews?.some(r => r.sender.discordID === UserStore.getCurrentUser().id)
@@ -106,6 +110,9 @@ export default function ReviewsView({ userId }: { userId: string; }) {
                     resize: "none",
                     marginBottom: "12px",
                     overflow: "hidden",
+                    background: "transparent",
+                    border: "1px solid var(--profile-message-input-border-color)",
+                    fontSize: "14px",
                 }}
             />
         </div>

src/plugins/reviewDB/entities/User.ts

@@ -22,7 +22,23 @@ export const enum UserType {
     Admin = 1
 }
 
-export interface ReviewDBUser {
-    lastReviewID: number,
-    type: UserType;
+export interface BanInfo {
+    id: string;
+    discordID: string;
+    reviewID: number;
+    reviewContent: string;
+    banEndDate: string;
+}
+
+export interface ReviewDBUser {
+    ID: number
+    discordID: string
+    username: string
+    profilePhoto: string
+    clientMod: string
+    warningCount: number
+    badges: any[]
+    banInfo: BanInfo | null
+    lastReviewID: number
+    type: UserType
 }

src/plugins/reviewDB/index.tsx

@@ -22,10 +22,11 @@ import { Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { Button } from "@webpack/common";
+import { Alerts, Button } from "@webpack/common";
 import { User } from "discord-types/general";
 
 import ReviewsView from "./components/ReviewsView";
+import { UserType } from "./entities/User";
 import { getCurrentUserInfo } from "./Utils/ReviewDBAPI";
 import { authorize, showToast } from "./Utils/Utils";
 
@@ -47,10 +48,10 @@ export default definePlugin({
     options: {
         authorize: {
             type: OptionType.COMPONENT,
-            description: "Authorise with ReviewDB",
+            description: "Authorize with ReviewDB",
             component: () => (
                 <Button onClick={authorize}>
-                    Authorise with ReviewDB
+                    Authorize with ReviewDB
                 </Button>
             )
         },
@@ -68,7 +69,29 @@ export default definePlugin({
             type: OptionType.BOOLEAN,
             description: "Hide timestamps on reviews",
             default: false,
-        }
+        },
+        website: {
+            type: OptionType.COMPONENT,
+            description: "ReviewDB website",
+            component: () => (
+                <Button onClick={() => {
+                    window.open("https://reviewdb.mantikafasi.dev");
+                }}>
+                    ReviewDB website
+                </Button>
+            )
+        },
+        supportServer: {
+            type: OptionType.COMPONENT,
+            description: "ReviewDB Support Server",
+            component: () => (
+                <Button onClick={() => {
+                    window.open("https://discord.gg/eWPBSbvznt");
+                }}>
+                    ReviewDB Support Server
+                </Button>
+            )
+        },
     },
 
     async start() {
@@ -82,7 +105,34 @@ export default definePlugin({
                 if (user.lastReviewID !== 0)
                     showToast("You have new reviews on your profile!");
             }
-            settings.userType = user.type;
+
+            if (user.banInfo) {
+                const endDate = new Date(user.banInfo.banEndDate);
+                if (endDate > new Date() && (settings.user?.banInfo?.banEndDate ?? 0) < endDate) {
+
+                    Alerts.show({
+                        title: "You have been banned from ReviewDB",
+                        body: <>
+                            <p>
+                                You are banned from ReviewDB {(user.type === UserType.Banned) ? "permanently" : "until " + endDate.toLocaleString()}
+                            </p>
+                            <p>
+                                Offending Review: {user.banInfo.reviewContent}
+                            </p>
+                            <p>
+                                Continued offenses will result in a permanent ban.
+                            </p>
+                        </>,
+                        cancelText: "Appeal",
+                        confirmText: "Ok",
+                        onCancel: () => {
+                            window.open("https://forms.gle/Thj3rDYaMdKoMMuq6");
+                        }
+                    });
+                }
+            }
+
+            settings.user = user;
         }, 4000);
     },
 

src/plugins/searchReply.tsx

@@ -38,7 +38,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, { messag
     // dms and group chats
     const dmGroup = findGroupChildrenByChildId("pin", children);
     if (dmGroup && !dmGroup.some(child => child?.props?.id === "reply")) {
-        const pinIndex = dmGroup.findIndex(c => c.props.id === "pin");
+        const pinIndex = dmGroup.findIndex(c => c?.props.id === "pin");
         return dmGroup.splice(pinIndex + 1, 0, (
             <Menu.MenuItem
                 id="reply"

src/plugins/sendTimestamps/styles.css

@@ -43,7 +43,7 @@
 }
 
 .vc-st-button {
-    padding: 0 8px;
+    padding: 0 6px;
 }
 
 .vc-st-button svg {

src/plugins/settings.tsx

@@ -18,17 +18,13 @@
 
 import { addContextMenuPatch } from "@api/ContextMenu";
 import { Settings } from "@api/Settings";
-import PatchHelper from "@components/PatchHelper";
 import { Devs } from "@utils/constants";
 import { Logger } from "@utils/Logger";
-import { LazyComponent } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
-import { SettingsRouter } from "@webpack/common";
+import { React, SettingsRouter } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
-const SettingsComponent = LazyComponent(() => require("../components/VencordSettings").default);
-
 export default definePlugin({
     name: "Settings",
     description: "Adds Settings UI and debug info",
@@ -95,37 +91,37 @@ export default definePlugin({
             {
                 section: "VencordSettings",
                 label: "Vencord",
-                element: () => <SettingsComponent tab="VencordSettings" />
+                element: require("@components/VencordSettings/VencordTab").default
             },
             {
                 section: "VencordPlugins",
                 label: "Plugins",
-                element: () => <SettingsComponent tab="VencordPlugins" />,
+                element: require("@components/VencordSettings/PluginsTab").default,
             },
             {
                 section: "VencordThemes",
                 label: "Themes",
-                element: () => <SettingsComponent tab="VencordThemes" />,
+                element: require("@components/VencordSettings/ThemesTab").default,
             },
             !IS_WEB && {
                 section: "VencordUpdater",
                 label: "Updater",
-                element: () => <SettingsComponent tab="VencordUpdater" />,
+                element: require("@components/VencordSettings/UpdaterTab").default,
             },
             {
                 section: "VencordCloud",
                 label: "Cloud",
-                element: () => <SettingsComponent tab="VencordCloud" />,
+                element: require("@components/VencordSettings/CloudTab").default,
             },
             {
                 section: "VencordSettingsSync",
                 label: "Backup & Restore",
-                element: () => <SettingsComponent tab="VencordSettingsSync" />,
+                element: require("@components/VencordSettings/BackupAndRestoreTab").default,
             },
             IS_DEV && {
                 section: "VencordPatchHelper",
                 label: "Patch Helper",
-                element: PatchHelper!,
+                element: require("@components/VencordSettings/PatchHelperTab").default,
             },
             IS_VENCORD_DESKTOP && {
                 section: "VencordDesktop",

src/plugins/showConnections/VerifiedIcon.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { LazyComponent } from "@utils/react";
+import { findByCode, findLazy } from "@webpack";
+import { i18n, useToken } from "@webpack/common";
+
+const ColorMap = findLazy(m => m.colors?.INTERACTIVE_MUTED?.css);
+const VerifiedIconComponent = LazyComponent(() => findByCode(".CONNECTIONS_ROLE_OFFICIAL_ICON_TOOLTIP"));
+
+export function VerifiedIcon() {
+    const color = useToken(ColorMap.colors.INTERACTIVE_MUTED).hex();
+    const forcedIconColor = useToken(ColorMap.colors.INTERACTIVE_ACTIVE).hex();
+
+    return (
+        <VerifiedIconComponent
+            color={color}
+            forcedIconColor={forcedIconColor}
+            size={16}
+            tooltipText={i18n.Messages.CONNECTION_VERIFIED}
+        />
+    );
+}

src/plugins/showConnections/index.tsx

@@ -20,6 +20,8 @@ import "./styles.css";
 
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { Flex } from "@components/Flex";
+import { CopyIcon, LinkIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { copyWithToast } from "@utils/misc";
 import { LazyComponent } from "@utils/react";
@@ -28,6 +30,8 @@ import { findByCode, findByCodeLazy, findByPropsLazy, findStoreLazy } from "@web
 import { Text, Tooltip } from "@webpack/common";
 import { User } from "discord-types/general";
 
+import { VerifiedIcon } from "./VerifiedIcon";
+
 const Section = LazyComponent(() => findByCode("().lastSection"));
 const UserProfileStore = findStoreLazy("UserProfileStore");
 const ThemeStore = findStoreLazy("ThemeStore");
@@ -97,7 +101,13 @@ function ConnectionsComponent({ id, theme }: { id: string, theme: string; }) {
             >
                 Connections
             </Text>
-            {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
+            <Flex style={{
+                marginTop: "8px",
+                gap: getSpacingPx(settings.store.iconSpacing),
+                flexWrap: "wrap"
+            }}>
+                {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
+            </Flex>
         </Section>
     );
 }
@@ -111,17 +121,23 @@ function CompactConnectionComponent({ connection, theme }: { connection: Connect
             aria-label={connection.name}
             src={theme === "light" ? platform.icon.lightSVG : platform.icon.darkSVG}
             style={{
-                marginTop: getSpacingPx(settings.store.iconSpacing),
-                marginRight: getSpacingPx(settings.store.iconSpacing),
                 width: settings.store.iconSize,
                 height: settings.store.iconSize
             }}
         />
     );
 
+    const TooltipIcon = url ? LinkIcon : CopyIcon;
+
     return (
         <Tooltip
-            text={`${connection.name}${!connection.verified ? " (unverified)" : ""}`}
+            text={
+                <span className="vc-sc-tooltip">
+                    {connection.name}
+                    {connection.verified && <VerifiedIcon />}
+                    <TooltipIcon height={16} width={16} />
+                </span>
+            }
             key={connection.id}
         >
             {tooltipProps =>

src/plugins/showConnections/styles.css

@@ -3,3 +3,9 @@
     display: inline-block;
     cursor: pointer;
 }
+
+.vc-sc-tooltip {
+    display: inline-flex;
+    gap: 0.25em;
+    align-items: center;
+}

src/plugins/showHiddenChannels/components/HiddenChannelLockScreen.tsx

@@ -16,15 +16,18 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Settings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { LazyComponent } from "@utils/react";
 import { formatDuration } from "@utils/text";
-import { find, findByPropsLazy, findStoreLazy } from "@webpack";
-import { FluxDispatcher, GuildMemberStore, GuildStore, moment, Parser, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip } from "@webpack/common";
+import { find, findByPropsLazy } from "@webpack";
+import { EmojiStore, FluxDispatcher, GuildMemberStore, GuildStore, moment, Parser, PermissionStore, SnowflakeUtils, Text, Timestamp, Tooltip, useEffect, useState } from "@webpack/common";
 import type { Channel } from "discord-types/general";
 import type { ComponentType } from "react";
 
-import { VIEW_CHANNEL } from "..";
+import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "../../permissionsViewer/components/RolesAndUsersPermissions";
+import { sortPermissionOverwrites } from "../../permissionsViewer/utils";
+import { settings, VIEW_CHANNEL } from "..";
 
 enum SortOrderTypes {
     LATEST_ACTIVITY = 0,
@@ -92,7 +95,6 @@ const TagComponent = LazyComponent(() => find(m => {
     return code.includes(".Messages.FORUM_TAG_A11Y_FILTER_BY_TAG") && !code.includes("increasedActivityPill");
 }));
 
-const EmojiStore = findStoreLazy("EmojiStore");
 const EmojiParser = findByPropsLazy("convertSurrogateToName");
 const EmojiUtils = findByPropsLazy("getURL", "buildEmojiReactionColorsPlatformed");
 
@@ -124,6 +126,9 @@ const VideoQualityModesToNames = {
 const HiddenChannelLogo = "/assets/433e3ec4319a9d11b0cbe39342614982.svg";
 
 function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
+    const [viewAllowedUsersAndRoles, setViewAllowedUsersAndRoles] = useState(settings.store.defaultAllowedUsersAndRolesDropdownState);
+    const [permissions, setPermissions] = useState<RoleOrUserPermission[]>([]);
+
     const {
         type,
         topic,
@@ -140,27 +145,39 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
         bitrate,
         rtcRegion,
         videoQualityMode,
-        permissionOverwrites
+        permissionOverwrites,
+        guild_id
     } = channel;
 
-    const membersToFetch: Array<string> = [];
+    useEffect(() => {
+        const membersToFetch: Array<string> = [];
 
-    const guildOwnerId = GuildStore.getGuild(channel.guild_id).ownerId;
-    if (!GuildMemberStore.getMember(channel.guild_id, guildOwnerId)) membersToFetch.push(guildOwnerId);
+        const guildOwnerId = GuildStore.getGuild(guild_id).ownerId;
+        if (!GuildMemberStore.getMember(guild_id, guildOwnerId)) membersToFetch.push(guildOwnerId);
 
-    Object.values(permissionOverwrites).forEach(({ type, id: userId }) => {
-        if (type === 1) {
-            if (!GuildMemberStore.getMember(channel.guild_id, userId)) membersToFetch.push(userId);
-        }
-    });
-
-    if (membersToFetch.length > 0) {
-        FluxDispatcher.dispatch({
-            type: "GUILD_MEMBERS_REQUEST",
-            guildIds: [channel.guild_id],
-            userIds: membersToFetch
+        Object.values(permissionOverwrites).forEach(({ type, id: userId }) => {
+            if (type === 1 && !GuildMemberStore.getMember(guild_id, userId)) {
+                membersToFetch.push(userId);
+            }
         });
-    }
+
+        if (membersToFetch.length > 0) {
+            FluxDispatcher.dispatch({
+                type: "GUILD_MEMBERS_REQUEST",
+                guildIds: [guild_id],
+                userIds: membersToFetch
+            });
+        }
+
+        if (Settings.plugins.PermissionsViewer.enabled) {
+            setPermissions(sortPermissionOverwrites(Object.values(permissionOverwrites).map(overwrite => ({
+                type: overwrite.type as PermissionType,
+                id: overwrite.id,
+                overwriteAllow: overwrite.allow,
+                overwriteDeny: overwrite.deny
+            })), guild_id));
+        }
+    }, [channelId]);
 
     return (
         <div className={ChatScrollClasses.auto + " " + ChatScrollClasses.customTheme + " " + ChatClasses.chatContent + " " + "shc-lock-screen-outer-container"}>
@@ -182,7 +199,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                                     aria-hidden={true}
                                     role="img"
                                 >
-                                    <path d="M.7 43.05 24 2.85l23.3 40.2Zm23.55-6.25q.75 0 1.275-.525.525-.525.525-1.275 0-.75-.525-1.3t-1.275-.55q-.8 0-1.325.55-.525.55-.525 1.3t.55 1.275q.55.525 1.3.525Zm-1.85-6.1h3.65V19.4H22.4Z" />
+                                    <path fill="currentColor" d="M.7 43.05 24 2.85l23.3 40.2Zm23.55-6.25q.75 0 1.275-.525.525-.525.525-1.275 0-.75-.525-1.3t-1.275-.55q-.8 0-1.325.55-.525.55-.525 1.3t.55 1.275q.55.525 1.3.525Zm-1.85-6.1h3.65V19.4H22.4Z" />
                                 </svg>
                             )}
                         </Tooltip>
@@ -192,7 +209,7 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                 {(!channel.isGuildVoice() && !channel.isGuildStageVoice()) && (
                     <Text variant="text-lg/normal">
                         You can not see the {channel.isForumChannel() ? "posts" : "messages"} of this channel.
-                        {channel.isForumChannel() && topic && topic.length > 0 && "However you may see its guidelines:"}
+                        {channel.isForumChannel() && topic && topic.length > 0 && " However you may see its guidelines:"}
                     </Text >
                 )}
 
@@ -268,8 +285,49 @@ function HiddenChannelLockScreen({ channel }: { channel: ExtendedChannel; }) {
                     </div>
                 }
                 <div className="shc-lock-screen-allowed-users-and-roles-container">
-                    <Text variant="text-lg/bold">Allowed users and roles:</Text>
-                    <ChannelBeginHeader channel={channel} />
+                    <div className="shc-lock-screen-allowed-users-and-roles-container-title">
+                        {Settings.plugins.PermissionsViewer.enabled && (
+                            <Tooltip text="Permission Details">
+                                {({ onMouseLeave, onMouseEnter }) => (
+                                    <button
+                                        onMouseLeave={onMouseLeave}
+                                        onMouseEnter={onMouseEnter}
+                                        className="shc-lock-screen-allowed-users-and-roles-container-permdetails-btn"
+                                        onClick={() => openRolesAndUsersPermissionsModal(permissions, GuildStore.getGuild(channel.guild_id), channel.name)}
+                                    >
+                                        <svg
+                                            width="24"
+                                            height="24"
+                                            viewBox="0 0 24 24"
+                                        >
+                                            <path fill="currentColor" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
+                                        </svg>
+                                    </button>
+                                )}
+                            </Tooltip>
+                        )}
+                        <Text variant="text-lg/bold">Allowed users and roles:</Text>
+                        <Tooltip text={viewAllowedUsersAndRoles ? "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)}
+                                >
+                                    <svg
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        transform={viewAllowedUsersAndRoles ? "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>
+                                </button>
+                            )}
+                        </Tooltip>
+                    </div>
+                    {viewAllowedUsersAndRoles && <ChannelBeginHeader channel={channel} />}
                 </div>
             </div>
         </div>

src/plugins/showHiddenChannels/index.tsx

@@ -39,7 +39,7 @@ enum ShowMode {
     HiddenIconWithMutedStyle
 }
 
-const settings = definePluginSettings({
+export const settings = definePluginSettings({
     hideUnreads: {
         description: "Hide Unreads",
         type: OptionType.BOOLEAN,
@@ -54,6 +54,11 @@ const settings = definePluginSettings({
             { label: "Muted style with hidden eye icon on the right", value: ShowMode.HiddenIconWithMutedStyle },
         ],
         restartNeeded: true
+    },
+    defaultAllowedUsersAndRolesDropdownState: {
+        description: "Whether the allowed users and roles dropdown on hidden channels should be open by default",
+        type: OptionType.BOOLEAN,
+        default: true
     }
 });
 
@@ -102,13 +107,13 @@ export default definePlugin({
                 },
                 {
                     // Prevent Discord from trying to connect to hidden channels
-                    match: /(?=\|\|\i\.default\.selectVoiceChannel\((\i)\.id\))/,
-                    replace: (_, channel) => `||$self.isHiddenChannel(${channel})`
+                    match: /if\(!\i&&!\i(?=.{0,50}?selectVoiceChannel\((\i)\.id\))/,
+                    replace: (m, channel) => `${m}&&!$self.isHiddenChannel(${channel})`
                 },
                 {
                     // Make Discord show inside the channel if clicking on a hidden or locked channel
-                    match: /(?<=\|\|\i\.default\.selectVoiceChannel\((\i)\.id\);!__OVERLAY__&&\()/,
-                    replace: (_, channel) => `$self.isHiddenChannel(${channel},true)||`
+                    match: /!__OVERLAY__&&\((?<=selectVoiceChannel\((\i)\.id\).+?)/,
+                    replace: (m, channel) => `${m}$self.isHiddenChannel(${channel},true)||`
                 }
             ]
         },
@@ -190,7 +195,7 @@ export default definePlugin({
                     replace: (_, pushNotificationButtonExpression, channel) => `if($self.isHiddenChannel(${channel})){${pushNotificationButtonExpression}break;}`
                 },
                 {
-                    match: /(?<=renderHeaderToolbar=function.+?case \i\.\i\.GUILD_FORUM:if\(!\i\){)(?=.+?;(.+?{channel:(\i)},"notifications"\)\)))/,
+                    match: /(?<=renderHeaderToolbar=function.+?case \i\.\i\.GUILD_FORUM:.+?if\(!\i\){)(?=.+?;(.+?{channel:(\i)},"notifications"\)\)))/,
                     replace: (_, pushNotificationButtonExpression, channel) => `if($self.isHiddenChannel(${channel})){${pushNotificationButtonExpression};break;}`
                 },
                 {
@@ -371,7 +376,7 @@ export default definePlugin({
                 },
                 {
                     // Remove the open chat button for the HiddenChannelLockScreen
-                    match: /"recents".+?null,(?=.{0,120}?channelId:(\i)\.id)/,
+                    match: /"recents".+?null,(?=.+?channelId:(\i)\.id,showRequestToSpeakSidebar)/,
                     replace: (m, channel) => `${m}!$self.isHiddenChannel(${channel})&&`
                 }
             ],

src/plugins/showHiddenChannels/style.css

@@ -33,9 +33,8 @@
     margin: inherit;
 }
 
-.shc-lock-screen-heading-nsfw-icon > path {
-    fill: var(--text-normal);
-    fill-rule: evenodd;
+.shc-lock-screen-heading-nsfw-icon {
+    color: var(--text-normal);
 }
 
 .shc-lock-screen-topic-container {
@@ -99,6 +98,36 @@
     max-width: 70vw;
 }
 
+.shc-lock-screen-allowed-users-and-roles-container-title {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.shc-lock-screen-allowed-users-and-roles-container-toggle-btn {
+    all: unset;
+    margin-left: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.shc-lock-screen-allowed-users-and-roles-container-toggle-btn > svg {
+    color: var(--text-normal);
+}
+
+.shc-lock-screen-allowed-users-and-roles-container-permdetails-btn {
+    all: unset;
+    margin-right: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.shc-lock-screen-allowed-users-and-roles-container-permdetails-btn > svg {
+    color: var(--text-normal);
+}
+
 .shc-lock-screen-allowed-users-and-roles-container > [class^="members"] {
     margin-left: 10px;
     flex-wrap: wrap;

src/plugins/silentMessageToggle.tsx

@@ -33,6 +33,11 @@ const settings = definePluginSettings({
         onChange(newValue: boolean) {
             if (newValue === false) lastState = false;
         }
+    },
+    autoDisable: {
+        type: OptionType.BOOLEAN,
+        description: "Automatically disable the silent message toggle again after sending one",
+        default: true
     }
 });
 
@@ -51,7 +56,7 @@ function SilentMessageToggle(chatBoxProps: {
     React.useEffect(() => {
         const listener: SendListener = (_, message) => {
             if (enabled) {
-                setEnabledValue(false);
+                if (settings.store.autoDisable) setEnabledValue(false);
                 if (!message.content.startsWith("@silent ")) message.content = "@silent " + message.content;
             }
         };
@@ -72,7 +77,7 @@ function SilentMessageToggle(chatBoxProps: {
                         size=""
                         look={ButtonLooks.BLANK}
                         innerClassName={ButtonWrapperClasses.button}
-                        style={{ padding: "0 8px" }}
+                        style={{ padding: "0 6px" }}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>
                             <svg
@@ -96,7 +101,7 @@ function SilentMessageToggle(chatBoxProps: {
 
 export default definePlugin({
     name: "SilentMessageToggle",
-    authors: [Devs.Nuckyz],
+    authors: [Devs.Nuckyz, Devs.CatNoir],
     description: "Adds a button to the chat bar to toggle sending a silent message.",
     dependencies: ["MessageEventsAPI"],
 

src/plugins/silentTyping.tsx

@@ -57,7 +57,7 @@ function SilentTypingToggle(chatBoxProps: {
                         size=""
                         look={ButtonLooks.BLANK}
                         innerClassName={ButtonWrapperClasses.button}
-                        style={{ padding: "0 8px" }}
+                        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">

src/plugins/spotifyControls/PlayerComponent.tsx

@@ -20,6 +20,7 @@ import "./spotifyStyles.css";
 
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Flex } from "@components/Flex";
+import { ImageIcon, LinkIcon, OpenExternalIcon } from "@components/Icons";
 import { Link } from "@components/Link";
 import { debounce } from "@utils/debounce";
 import { classes, copyWithToast } from "@utils/misc";
@@ -88,12 +89,14 @@ function CopyContextMenu({ name, path }: { name: string; path: string; }) {
                 id={copyId}
                 label={`Copy ${name} Link`}
                 action={() => copyWithToast("https://open.spotify.com" + path)}
+                icon={LinkIcon}
             />
             <Menu.MenuItem
                 key={openId}
                 id={openId}
                 label={`Open ${name} in Spotify`}
                 action={() => SpotifyStore.openExternal(path)}
+                icon={OpenExternalIcon}
             />
         </Menu.Menu>
     );
@@ -221,6 +224,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 id="open-album"
                 label="Open Album"
                 action={() => SpotifyStore.openExternal(`/album/${track.album.id}`)}
+                icon={OpenExternalIcon}
             />
             <Menu.MenuItem
                 key="view-cover"
@@ -228,6 +232,7 @@ function AlbumContextMenu({ track }: { track: Track; }) {
                 label="View Album Cover"
                 // trolley
                 action={() => (Vencord.Plugins.plugins.ViewIcons as any).openImage(track.album.image.url)}
+                icon={ImageIcon}
             />
             <Menu.MenuControlItem
                 id="spotify-volume"

src/plugins/supportHelper.tsx

@@ -18,6 +18,7 @@
 
 import { DataStore } from "@api/index";
 import { Devs, SUPPORT_CHANNEL_ID } from "@utils/constants";
+import { isPluginDev } from "@utils/misc";
 import { makeCodeblock } from "@utils/text";
 import definePlugin from "@utils/types";
 import { isOutdated } from "@utils/updater";
@@ -74,8 +75,7 @@ ${makeCodeblock(Object.keys(plugins).filter(Vencord.Plugins.isPluginEnabled).joi
         async CHANNEL_SELECT({ channelId }) {
             if (channelId !== SUPPORT_CHANNEL_ID) return;
 
-            const myId = BigInt(UserStore.getCurrentUser().id);
-            if (Object.values(Devs).some(d => d.id === myId)) return;
+            if (isPluginDev(UserStore.getCurrentUser().id)) return;
 
             if (isOutdated && gitHash !== await DataStore.get(REMEMBER_DISMISS_KEY)) {
                 const rememberDismiss = () => DataStore.set(REMEMBER_DISMISS_KEY, gitHash);

src/plugins/textReplace.tsx

@@ -159,7 +159,7 @@ function TextReplace({ title, rulesArray, rulesKey, update }: TextReplaceProps)
                                     <Input
                                         placeholder="Replace"
                                         initialValue={rule.replace}
-                                        onChange={e => onChange(e.replaceAll("\\n", "\n"), index, "replace")}
+                                        onChange={e => onChange(e, index, "replace")}
                                     />
                                     <Input
                                         placeholder="Only if includes"
@@ -220,7 +220,7 @@ function applyRules(content: string): string {
             if (!rule.find || !rule.replace) continue;
             if (rule.onlyIfIncludes && !content.includes(rule.onlyIfIncludes)) continue;
 
-            content = content.replaceAll(rule.find, rule.replace);
+            content = content.replaceAll(rule.find, rule.replace.replaceAll("\\n", "\n"));
         }
     }
 
@@ -231,7 +231,7 @@ function applyRules(content: string): string {
 
             try {
                 const regex = stringToRegex(rule.find);
-                content = content.replace(regex, rule.replace);
+                content = content.replace(regex, rule.replace.replaceAll("\\n", "\n"));
             } catch (e) {
                 new Logger("TextReplace").error(`Invalid regex: ${rule.find}`);
             }

src/plugins/translate/TranslateIcon.tsx

@@ -0,0 +1,78 @@
+/*
+ * 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 { classes } from "@utils/misc";
+import { openModal } from "@utils/modal";
+import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
+
+import { settings } from "./settings";
+import { TranslateModal } from "./TranslateModal";
+import { cl } from "./utils";
+
+export function TranslateIcon({ height = 24, width = 24, className }: { height?: number; width?: number; className?: string; }) {
+    return (
+        <svg
+            viewBox="0 96 960 960"
+            height={height}
+            width={width}
+            className={classes(cl("icon"), className)}
+        >
+            <path fill="currentColor" d="m475 976 181-480h82l186 480h-87l-41-126H604l-47 126h-82Zm151-196h142l-70-194h-2l-70 194Zm-466 76-55-55 204-204q-38-44-67.5-88.5T190 416h87q17 33 37.5 62.5T361 539q45-47 75-97.5T487 336H40v-80h280v-80h80v80h280v80H567q-22 69-58.5 135.5T419 598l98 99-30 81-127-122-200 200Z" />
+        </svg>
+    );
+}
+
+export function TranslateChatBarIcon({ slateProps }: { slateProps: { type: { analyticsName: string; }; }; }) {
+    const { autoTranslate } = settings.use(["autoTranslate"]);
+
+    if (slateProps.type.analyticsName !== "normal")
+        return null;
+
+    const toggle = () => settings.store.autoTranslate = !autoTranslate;
+
+    return (
+        <Tooltip text="Open Translate Modal">
+            {({ onMouseEnter, onMouseLeave }) => (
+                <div style={{ display: "flex" }}>
+                    <Button
+                        aria-haspopup="dialog"
+                        aria-label=""
+                        size=""
+                        look={ButtonLooks.BLANK}
+                        onMouseEnter={onMouseEnter}
+                        onMouseLeave={onMouseLeave}
+                        innerClassName={ButtonWrapperClasses.button}
+                        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>
+    );
+}

src/plugins/translate/TranslateModal.tsx

@@ -0,0 +1,101 @@
+/*
+ * 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 { Margins } from "@utils/margins";
+import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot } from "@utils/modal";
+import { Forms, SearchableSelect, Switch, useMemo } from "@webpack/common";
+
+import { Languages } from "./languages";
+import { settings } from "./settings";
+import { cl } from "./utils";
+
+const LanguageSettingKeys = ["receivedInput", "receivedOutput", "sentInput", "sentOutput"] as const;
+
+function LanguageSelect({ settingsKey, includeAuto }: { settingsKey: typeof LanguageSettingKeys[number]; includeAuto: boolean; }) {
+    const currentValue = settings.use([settingsKey])[settingsKey];
+
+    const options = useMemo(
+        () => {
+            const options = Object.entries(Languages).map(([value, label]) => ({ value, label }));
+            if (!includeAuto)
+                options.shift();
+
+            return options;
+        }, []
+    );
+
+    return (
+        <section className={Margins.bottom16}>
+            <Forms.FormTitle tag="h3">
+                {settings.def[settingsKey].description}
+            </Forms.FormTitle>
+
+            <SearchableSelect
+                options={options}
+                value={options.find(o => o.value === currentValue)}
+                placeholder={"Select a language"}
+                maxVisibleItems={5}
+                closeOnSelect={true}
+                onChange={v => settings.store[settingsKey] = v}
+            />
+        </section>
+    );
+}
+
+function AutoTranslateToggle() {
+    const value = settings.use(["autoTranslate"]).autoTranslate;
+
+    return (
+        <Switch
+            value={value}
+            onChange={v => settings.store.autoTranslate = v}
+            note={settings.def.autoTranslate.description}
+            hideBorder
+        >
+            Auto Translate
+        </Switch>
+    );
+}
+
+
+export function TranslateModal({ rootProps }: { rootProps: ModalProps; }) {
+    return (
+        <ModalRoot {...rootProps}>
+            <ModalHeader className={cl("modal-header")}>
+                <Forms.FormTitle tag="h2">
+                    Translate
+                </Forms.FormTitle>
+                <ModalCloseButton onClick={rootProps.onClose} />
+            </ModalHeader>
+
+            <ModalContent className={cl("modal-content")}>
+                {LanguageSettingKeys.map(s => (
+                    <LanguageSelect
+                        key={s}
+                        settingsKey={s}
+                        includeAuto={s.endsWith("Input")}
+                    />
+                ))}
+
+                <Forms.FormDivider className={Margins.bottom16} />
+
+                <AutoTranslateToggle />
+            </ModalContent>
+        </ModalRoot>
+    );
+}

src/plugins/translate/TranslationAccessory.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 { Parser, useEffect, useState } from "@webpack/common";
+import { Message } from "discord-types/general";
+
+import { Languages } from "./languages";
+import { TranslateIcon } from "./TranslateIcon";
+import { cl, TranslationValue } from "./utils";
+
+const TranslationSetters = new Map<string, (v: TranslationValue) => void>();
+
+export function handleTranslate(messageId: string, data: TranslationValue) {
+    TranslationSetters.get(messageId)!(data);
+}
+
+function Dismiss({ onDismiss }: { onDismiss: () => void; }) {
+    return (
+        <button
+            onClick={onDismiss}
+            className={cl("dismiss")}
+        >
+            Dismiss
+        </button>
+    );
+}
+
+export function TranslationAccessory({ message }: { message: Message; }) {
+    const [translation, setTranslation] = useState<TranslationValue>();
+
+    useEffect(() => {
+        TranslationSetters.set(message.id, setTranslation);
+
+        return () => void TranslationSetters.delete(message.id);
+    }, []);
+
+    if (!translation) return null;
+
+    return (
+        <span className={cl("accessory")}>
+            <TranslateIcon width={16} height={16} />
+            {Parser.parse(translation.text)}
+            {" "}
+            (translated from {Languages[translation.src] ?? translation.src} - <Dismiss onDismiss={() => setTranslation(undefined)} />)
+        </span>
+    );
+}

src/plugins/translate/index.tsx

@@ -0,0 +1,90 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import "./styles.css";
+
+import { 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 } from "@webpack/common";
+
+import { settings } from "./settings";
+import { TranslateChatBarIcon, TranslateIcon } from "./TranslateIcon";
+import { handleTranslate, TranslationAccessory } from "./TranslationAccessory";
+import { translate } from "./utils";
+
+export default definePlugin({
+    name: "Translate",
+    description: "Translate messages with Google Translate",
+    authors: [Devs.Ven],
+    dependencies: ["MessageAccessoriesAPI", "MessagePopoverAPI", "MessageEventsAPI"],
+    settings,
+    // not used, just here in case some other plugin wants it or w/e
+    translate,
+
+    patches: [
+        {
+            find: ".activeCommandOption",
+            replacement: {
+                match: /(.)\.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} />);
+
+        addButton("vc-translate", message => {
+            if (!message.content) return null;
+
+            return {
+                label: "Translate",
+                icon: TranslateIcon,
+                message,
+                channel: ChannelStore.getChannel(message.channel_id),
+                onClick: async () => {
+                    const trans = await translate("received", message.content);
+                    handleTranslate(message.id, trans);
+                }
+            };
+        });
+
+        this.preSend = addPreSendListener(async (_, message) => {
+            if (!settings.store.autoTranslate) return;
+            if (!message.content) return;
+
+            message.content = (await translate("sent", message.content)).text;
+        });
+    },
+
+    stop() {
+        removePreSendListener(this.preSend);
+        removeButton("vc-translate");
+        removeAccessory("vc-translation");
+    },
+
+    chatBarIcon: (slateProps: any) => (
+        <ErrorBoundary noop>
+            <TranslateChatBarIcon slateProps={slateProps} />
+        </ErrorBoundary>
+    )
+});

src/plugins/translate/languages.ts

@@ -0,0 +1,172 @@
+/*
+ * 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/>.
+*/
+
+
+/*
+To generate:
+- Visit https://translate.google.com/?sl=auto&tl=en&op=translate
+- Open Language dropdown
+- Open Devtools and use the element picker to pick the root of the language picker
+- Right click on the element in devtools and click "Store as global variable"
+
+copy(Object.fromEntries(
+    Array.from(
+        temp1.querySelectorAll("[data-language-code]"),
+        e => [e.dataset.languageCode, e.children[1].textContent]
+    ).sort((a, b) => a[1] === "Detect language" ? -1 : b[1] === "Detect language" ? 1 : a[1].localeCompare(b[1]))
+))
+*/
+
+export type Language = keyof typeof Languages;
+
+export const Languages = {
+    "auto": "Detect language",
+    "af": "Afrikaans",
+    "sq": "Albanian",
+    "am": "Amharic",
+    "ar": "Arabic",
+    "hy": "Armenian",
+    "as": "Assamese",
+    "ay": "Aymara",
+    "az": "Azerbaijani",
+    "bm": "Bambara",
+    "eu": "Basque",
+    "be": "Belarusian",
+    "bn": "Bengali",
+    "bho": "Bhojpuri",
+    "bs": "Bosnian",
+    "bg": "Bulgarian",
+    "ca": "Catalan",
+    "ceb": "Cebuano",
+    "ny": "Chichewa",
+    "zh-CN": "Chinese (Simplified)",
+    "zh-TW": "Chinese (Traditional)",
+    "co": "Corsican",
+    "hr": "Croatian",
+    "cs": "Czech",
+    "da": "Danish",
+    "dv": "Dhivehi",
+    "doi": "Dogri",
+    "nl": "Dutch",
+    "en": "English",
+    "eo": "Esperanto",
+    "et": "Estonian",
+    "ee": "Ewe",
+    "tl": "Filipino",
+    "fi": "Finnish",
+    "fr": "French",
+    "fy": "Frisian",
+    "gl": "Galician",
+    "ka": "Georgian",
+    "de": "German",
+    "el": "Greek",
+    "gn": "Guarani",
+    "gu": "Gujarati",
+    "ht": "Haitian Creole",
+    "ha": "Hausa",
+    "haw": "Hawaiian",
+    "iw": "Hebrew",
+    "hi": "Hindi",
+    "hmn": "Hmong",
+    "hu": "Hungarian",
+    "is": "Icelandic",
+    "ig": "Igbo",
+    "ilo": "Ilocano",
+    "id": "Indonesian",
+    "ga": "Irish",
+    "it": "Italian",
+    "ja": "Japanese",
+    "jw": "Javanese",
+    "kn": "Kannada",
+    "kk": "Kazakh",
+    "km": "Khmer",
+    "rw": "Kinyarwanda",
+    "gom": "Konkani",
+    "ko": "Korean",
+    "kri": "Krio",
+    "ku": "Kurdish (Kurmanji)",
+    "ckb": "Kurdish (Sorani)",
+    "ky": "Kyrgyz",
+    "lo": "Lao",
+    "la": "Latin",
+    "lv": "Latvian",
+    "ln": "Lingala",
+    "lt": "Lithuanian",
+    "lg": "Luganda",
+    "lb": "Luxembourgish",
+    "mk": "Macedonian",
+    "mai": "Maithili",
+    "mg": "Malagasy",
+    "ms": "Malay",
+    "ml": "Malayalam",
+    "mt": "Maltese",
+    "mi": "Maori",
+    "mr": "Marathi",
+    "mni-Mtei": "Meiteilon (Manipuri)",
+    "lus": "Mizo",
+    "mn": "Mongolian",
+    "my": "Myanmar (Burmese)",
+    "ne": "Nepali",
+    "no": "Norwegian",
+    "or": "Odia (Oriya)",
+    "om": "Oromo",
+    "ps": "Pashto",
+    "fa": "Persian",
+    "pl": "Polish",
+    "pt": "Portuguese",
+    "pa": "Punjabi",
+    "qu": "Quechua",
+    "ro": "Romanian",
+    "ru": "Russian",
+    "sm": "Samoan",
+    "sa": "Sanskrit",
+    "gd": "Scots Gaelic",
+    "nso": "Sepedi",
+    "sr": "Serbian",
+    "st": "Sesotho",
+    "sn": "Shona",
+    "sd": "Sindhi",
+    "si": "Sinhala",
+    "sk": "Slovak",
+    "sl": "Slovenian",
+    "so": "Somali",
+    "es": "Spanish",
+    "su": "Sundanese",
+    "sw": "Swahili",
+    "sv": "Swedish",
+    "tg": "Tajik",
+    "ta": "Tamil",
+    "tt": "Tatar",
+    "te": "Telugu",
+    "th": "Thai",
+    "ti": "Tigrinya",
+    "ts": "Tsonga",
+    "tr": "Turkish",
+    "tk": "Turkmen",
+    "ak": "Twi",
+    "uk": "Ukrainian",
+    "ur": "Urdu",
+    "ug": "Uyghur",
+    "uz": "Uzbek",
+    "vi": "Vietnamese",
+    "cy": "Welsh",
+    "xh": "Xhosa",
+    "yi": "Yiddish",
+    "yo": "Yoruba",
+    "zu": "Zulu"
+} as const;

src/plugins/translate/settings.ts

@@ -0,0 +1,52 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { definePluginSettings } from "@api/Settings";
+import { OptionType } from "@utils/types";
+
+export const settings = definePluginSettings({
+    receivedInput: {
+        type: OptionType.STRING,
+        description: "Input language for received messages",
+        default: "auto",
+        hidden: true
+    },
+    receivedOutput: {
+        type: OptionType.STRING,
+        description: "Output language for received messages",
+        default: "en",
+        hidden: true
+    },
+    sentInput: {
+        type: OptionType.STRING,
+        description: "Input language for sent messages",
+        default: "auto",
+        hidden: true
+    },
+    sentOutput: {
+        type: OptionType.STRING,
+        description: "Output language for sent messages",
+        default: "en",
+        hidden: true
+    },
+    autoTranslate: {
+        type: OptionType.BOOLEAN,
+        description: "Automatically translate your messages before sending. You can also shift/right click the translate button to toggle this",
+        default: false
+    }
+});

src/plugins/translate/styles.css

@@ -0,0 +1,37 @@
+.vc-trans-modal-content {
+    padding: 1em;
+}
+
+.vc-trans-modal-header {
+    justify-content: space-between;
+    align-content: center;
+}
+
+.vc-trans-modal-header h1 {
+    margin: 0;
+}
+
+.vc-trans-accessory {
+    color: var(--text-muted);
+    margin-top: 0.5em;
+    font-style: italic;
+    font-weight: 400;
+}
+
+.vc-trans-accessory svg {
+    margin-right: 0.25em;
+}
+
+.vc-trans-dismiss {
+    all: unset;
+    cursor: pointer;
+    color: var(--text-link);
+}
+
+.vc-trans-dismiss:is(:hover, :focus) {
+    text-decoration: underline;
+}
+
+.vc-trans-auto-translate {
+    color: var(--green-360);
+}

src/plugins/translate/utils.ts

@@ -0,0 +1,75 @@
+/*
+ * Vencord, a modification for Discord's desktop app
+ * Copyright (c) 2023 Vendicated and contributors
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+*/
+
+import { classNameFactory } from "@api/Styles";
+
+import { settings } from "./settings";
+
+export const cl = classNameFactory("vc-trans-");
+
+interface TranslationData {
+    src: string;
+    sentences: {
+        // 🏳️‍⚧️
+        trans: string;
+    }[];
+}
+
+export interface TranslationValue {
+    src: string;
+    text: string;
+}
+
+export async function translate(kind: "received" | "sent", text: string): Promise<TranslationValue> {
+    const sourceLang = settings.store[kind + "Input"];
+    const targetLang = settings.store[kind + "Output"];
+
+    const url = "https://translate.googleapis.com/translate_a/single?" + new URLSearchParams({
+        // see https://stackoverflow.com/a/29537590 for more params
+        // holy shidd nvidia
+        client: "gtx",
+        // source language
+        sl: sourceLang,
+        // target language
+        tl: targetLang,
+        // what to return, t = translation probably
+        dt: "t",
+        // Send json object response instead of weird array
+        dj: "1",
+        source: "input",
+        // query, duh
+        q: text
+    });
+
+    const res = await fetch(url);
+    if (!res.ok)
+        throw new Error(
+            `Failed to translate "${text}" (${sourceLang} -> ${targetLang})`
+            + `\n${res.status} ${res.statusText}`
+        );
+
+    const { src, sentences }: TranslationData = await res.json();
+
+    return {
+        src,
+        text: sentences.
+            map(s => s?.trans).
+            filter(Boolean).
+            join("")
+    };
+}

src/plugins/typingIndicator.tsx

@@ -89,7 +89,7 @@ function TypingIndicator({ channelId }: { channelId: string; }) {
             <Tooltip text={tooltipText!}>
                 {({ onMouseLeave, onMouseEnter }) => (
                     <div
-                        style={{ marginLeft: 6, zIndex: 0, cursor: "pointer" }}
+                        style={{ marginLeft: 6, height: 16, display: "flex", alignItems: "center", zIndex: 0, cursor: "pointer" }}
                         onMouseLeave={onMouseLeave}
                         onMouseEnter={onMouseEnter}
                     >

src/plugins/typingTweaks.tsx

@@ -89,7 +89,11 @@ const TypingUser = ErrorBoundary.wrap(function ({ user, guildId }: Props) {
                         src={user.getAvatarURL(guildId, 128)} />
                 </div>
             )}
-            {GuildMemberStore.getNick(guildId!, user.id) || !guildId && RelationshipStore.getNickname(user.id) || user.username}
+            {GuildMemberStore.getNick(guildId!, user.id)
+                || (!guildId && RelationshipStore.getNickname(user.id))
+                || (user as any).globalName
+                || user.username
+            }
         </strong>
     );
 }, { noop: true });

src/plugins/urbanDictionary.ts

@@ -41,37 +41,48 @@ export default definePlugin({
             ],
             execute: async (args, ctx) => {
                 try {
-                    const { list: [definition] } = await (await fetch(`https://api.urbandictionary.com/v0/define?term=${args[0].value}`)).json();
+                    const query = encodeURIComponent(args[0].value);
+                    const { list: [definition] } = await (await fetch(`https://api.urbandictionary.com/v0/define?term=${query}`)).json();
 
                     if (!definition)
                         return void sendBotMessage(ctx.channel.id, { content: "No results found." });
 
-                    const linkify = text => text.replace(/\[(.+?)\]/g, (_, word) => `[${word}](https://www.urbandictionary.com/define.php?term=${encodeURIComponent(word)})`);
+                    const linkify = (text: string) => text
+                        .replaceAll("\r\n", "\n")
+                        .replace(/([*>_`~\\])/gsi, "\\$1")
+                        .replace(/\[(.+?)\]/g, (_, word) => `[${word}](https://www.urbandictionary.com/define.php?term=${encodeURIComponent(word)} "Define '${word}' on Urban Dictionary")`)
+                        .trim();
 
                     return void sendBotMessage(ctx.channel.id, {
                         embeds: [
                             {
                                 type: "rich",
                                 author: {
-                                    name: `Definition of ${definition.word}`,
-                                    url: definition.permalink
+                                    name: `Uploaded by "${definition.author}"`,
+                                    url: `https://www.urbandictionary.com/author.php?author=${encodeURIComponent(definition.author)}`,
                                 },
+                                title: definition.word,
+                                url: `https://www.urbandictionary.com/define.php?term=${encodeURIComponent(definition.word)}`,
                                 description: linkify(definition.definition),
                                 fields: [
                                     {
                                         name: "Example",
-                                        value: linkify(definition.example)
-                                    }
+                                        value: linkify(definition.example),
+                                    },
+                                    {
+                                        name: "Want more definitions?",
+                                        value: `Check out [more definitions](https://www.urbandictionary.com/define.php?term=${query} "Define "${args[0].value}" on Urban Dictionary") on Urban Dictionary.`,
+                                    },
                                 ],
                                 color: 0xFF9900,
-                                footer: { text: `👍 ${definition.thumbs_up.toString()} | 👎 ${definition.thumbs_down.toString()} | Uploaded by ${definition.author}`, icon_url: "https://www.urbandictionary.com/favicon.ico" },
-                                timestamp: new Date(definition.written_on).toISOString()
-                            }
-                        ] as any
+                                footer: { text: `👍 ${definition.thumbs_up.toString()} | 👎 ${definition.thumbs_down.toString()}`, icon_url: "https://www.urbandictionary.com/favicon.ico" },
+                                timestamp: new Date(definition.written_on).toISOString(),
+                            },
+                        ] as any,
                     });
                 } catch (error) {
-                    return void sendBotMessage(ctx.channel.id, {
-                        content: `Something went wrong: \`${error}\``
+                    sendBotMessage(ctx.channel.id, {
+                        content: `Something went wrong: \`${error}\``,
                     });
                 }
             }

src/plugins/usrbg/index.tsx

@@ -47,8 +47,8 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "USRBG",
-    description: "USRBG is a community maintained database of Discord banners, allowing anyone to get a banner without requiring Nitro",
-    authors: [Devs.AutumnVN, Devs.pylix],
+    description: "Displays user banners from USRBG, allowing anyone to get a banner without Nitro",
+    authors: [Devs.AutumnVN, Devs.pylix, Devs.TheKodeToad],
     settings,
     patches: [
         {
@@ -61,6 +61,10 @@ export default definePlugin({
                 {
                     match: /(\i)\.bannerSrc,/,
                     replace: "$self.useBannerHook($1),"
+                },
+                {
+                    match: /\?\(0,\i\.jsx\)\(\i,{type:\i,shown/,
+                    replace: "&&$self.shouldShowBadge(arguments[0])$&"
                 }
             ]
         },
@@ -104,6 +108,10 @@ export default definePlugin({
         if (data[userId]) return 2;
     },
 
+    shouldShowBadge({ displayProfile, user }: any) {
+        return displayProfile?.banner && (!data[user.id] || settings.store.nitroFirst);
+    },
+
     async start() {
         enableStyle(style);
 

src/plugins/uwuify.ts

@@ -17,8 +17,10 @@
 */
 
 import { findOption, RequiredMessageOption } from "@api/Commands";
+import { addPreEditListener, addPreSendListener, MessageObject, removePreEditListener, removePreSendListener } from "@api/MessageEvents";
+import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
 
 const endings = [
     "rawr x3",
@@ -65,6 +67,15 @@ const replacements = [
     ["meow", "nya~"],
 ];
 
+const settings = definePluginSettings({
+    uwuEveryMessage: {
+        description: "Make every single message uwuified",
+        type: OptionType.BOOLEAN,
+        default: false,
+        restartNeeded: false
+    }
+});
+
 function selectRandomElement(arr) {
     // generate a random index based on the length of the array
     const randomIndex = Math.floor(Math.random() * arr.length);
@@ -94,8 +105,9 @@ function uwuify(message: string): string {
 export default definePlugin({
     name: "UwUifier",
     description: "Simply uwuify commands",
-    authors: [Devs.echo, Devs.skyevg],
-    dependencies: ["CommandsAPI"],
+    authors: [Devs.echo, Devs.skyevg, Devs.PandaNinjas],
+    dependencies: ["CommandsAPI", "MessageEventsAPI"],
+    settings,
 
     commands: [
         {
@@ -108,4 +120,23 @@ export default definePlugin({
             }),
         },
     ],
+
+    onSend(msg: MessageObject) {
+        // Only run when it's enabled
+        if (settings.store.uwuEveryMessage) {
+            msg.content = uwuify(msg.content);
+        }
+    },
+
+    start() {
+        this.preSend = addPreSendListener((_, msg) => this.onSend(msg));
+        this.preEdit = addPreEditListener((_cid, _mid, msg) =>
+            this.onSend(msg)
+        );
+    },
+
+    stop() {
+        removePreSendListener(this.preSend);
+        removePreEditListener(this.preEdit);
+    },
 });

src/plugins/validUser.tsx

@@ -0,0 +1,144 @@
+/*
+ * 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 { Devs } from "@utils/constants";
+import { sleep } from "@utils/misc";
+import { Queue } from "@utils/Queue";
+import definePlugin from "@utils/types";
+import { findByCodeLazy } from "@webpack";
+import { UserStore, useState } from "@webpack/common";
+import type { User } from "discord-types/general";
+import type { ComponentType } from "react";
+
+const fetching = new Set<string>();
+const queue = new Queue(5);
+const fetchUser = findByCodeLazy("USER(") as (id: string) => Promise<User>;
+
+interface MentionProps {
+    data: {
+        userId?: string;
+        channelId?: string;
+        content: any;
+    };
+    parse: (content: any, props: MentionProps["props"]) => string[];
+    props: {
+        key: string;
+        formatInline: boolean;
+        noStyleAndInteraction: boolean;
+    };
+    RoleMention: ComponentType<any>;
+    UserMention: ComponentType<any>;
+}
+
+function MentionWrapper({ data, UserMention, RoleMention, parse, props }: MentionProps) {
+    const [userId, setUserId] = useState(data.userId);
+
+    // if userId is set it means the user is cached. Uncached users have userId set to undefined
+    if (userId)
+        return (
+            <UserMention
+                className="mention"
+                userId={userId}
+                channelId={data.channelId}
+                inlinePreview={props.noStyleAndInteraction}
+                key={props.key}
+            />
+        );
+
+    // Parses the raw text node array data.content into a ReactNode[]: ["<@userid>"]
+    const children = parse(data.content, props);
+
+    return (
+        // Discord is deranged and renders unknown user mentions as role mentions
+        <RoleMention
+            {...data}
+            inlinePreview={props.formatInline}
+        >
+            <span
+                onMouseEnter={() => {
+                    const mention = children?.[0];
+                    if (typeof mention !== "string") return;
+
+                    const id = mention.match(/<@(\d+)>/)?.[1];
+                    if (!id) return;
+
+                    if (fetching.has(id))
+                        return;
+
+                    if (UserStore.getUser(id))
+                        return setUserId(id);
+
+                    const fetch = () => {
+                        fetching.add(id);
+
+                        queue.unshift(() =>
+                            fetchUser(id)
+                                .then(() => {
+                                    setUserId(id);
+                                    fetching.delete(id);
+                                })
+                                .catch(e => {
+                                    if (e?.status === 429) {
+                                        queue.unshift(() => sleep(1000).then(fetch));
+                                        fetching.delete(id);
+                                    }
+                                })
+                                .finally(() => sleep(300))
+                        );
+                    };
+
+                    fetch();
+                }}
+            >
+                {children}
+            </span>
+        </RoleMention>
+    );
+}
+
+export default definePlugin({
+    name: "ValidUser",
+    description: "Fix mentions for unknown users showing up as '<@343383572805058560>' (hover over a mention to fix it)",
+    authors: [Devs.Ven],
+    tags: ["MentionCacheFix"],
+
+    patches: [{
+        find: 'className:"mention"',
+        replacement: {
+            // mention = { react: function (data, parse, props) { if (data.userId == null) return RoleMention() else return UserMention()
+            match: /react:(?=function\(\i,\i,\i\).{0,50}return null==\i\?\(0,\i\.jsx\)\((\i),.+?jsx\)\((\i),\{className:"mention")/,
+            // react: (...args) => OurWrapper(RoleMention, UserMention, ...args), originalReact: theirFunc
+            replace: "react:(...args)=>$self.renderMention($1,$2,...args),originalReact:"
+        }
+    }],
+
+    renderMention(RoleMention, UserMention, data, parse, props) {
+        return (
+            <ErrorBoundary noop>
+                <MentionWrapper
+                    RoleMention={RoleMention}
+                    UserMention={UserMention}
+                    data={data}
+                    parse={parse}
+                    props={props}
+                />
+            </ErrorBoundary>
+        );
+    },
+});

src/plugins/vcNarrator.tsx

@@ -165,7 +165,7 @@ export default definePlugin({
                 if (!type) continue;
 
                 const template = Settings.plugins.VcNarrator[type + "Message"];
-                const user = isMe ? "" : UserStore.getUser(userId).username;
+                const user = isMe && !Settings.plugins.VcNarrator.sayOwnName ? "" : UserStore.getUser(userId).username;
                 const channel = ChannelStore.getChannel(id).name;
 
                 speak(formatText(template, user, channel));
@@ -230,6 +230,11 @@ export default definePlugin({
                 markers: [0.1, 0.5, 1, 2, 5, 10],
                 stickToMarkers: false
             },
+            sayOwnName: {
+                description: "Say own name",
+                type: OptionType.BOOLEAN,
+                default: false
+            },
             joinMessage: {
                 type: OptionType.STRING,
                 description: "Join Message",

src/plugins/viewIcons.tsx

@@ -18,6 +18,7 @@
 
 import { addContextMenuPatch, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
 import { definePluginSettings } from "@api/Settings";
+import { ImageIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { ModalRoot, ModalSize, openModal } from "@utils/modal";
 import { LazyComponent } from "@utils/react";
@@ -84,12 +85,13 @@ function openImage(url: string) {
 const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: UserContextProps) => () => {
     const memberAvatar = GuildMemberStore.getMember(guildId!, user.id)?.avatar || null;
 
-    children.splice(1, 0, (
+    children.splice(-1, 0, (
         <Menu.MenuGroup>
             <Menu.MenuItem
                 id="view-avatar"
                 label="View Avatar"
                 action={() => openImage(BannerStore.getUserAvatarURL(user, true, 512))}
+                icon={ImageIcon}
             />
             {memberAvatar && (
                 <Menu.MenuItem
@@ -100,6 +102,7 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U
                         avatar: memberAvatar,
                         guildId
                     }, true))}
+                    icon={ImageIcon}
                 />
             )}
         </Menu.MenuGroup>
@@ -109,13 +112,7 @@ const UserContext: NavContextMenuPatchCallback = (children, { user, guildId }: U
 const GuildContext: NavContextMenuPatchCallback = (children, { guild: { id, icon, banner } }: GuildContextProps) => () => {
     if (!banner && !icon) return;
 
-    // before copy id (if it exists)
-    const idx = children.length +
-        children[children.length - 1]?.props?.children?.props?.id === "devmode-copy-id"
-        ? -2
-        : -1;
-
-    children.splice(idx, 0, (
+    children.splice(-1, 0, (
         <Menu.MenuGroup>
             {icon ? (
                 <Menu.MenuItem
@@ -129,6 +126,7 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild: { id, icon
                             canAnimate: true
                         }))
                     }
+                    icon={ImageIcon}
                 />
             ) : null}
             {banner ? (
@@ -141,6 +139,7 @@ const GuildContext: NavContextMenuPatchCallback = (children, { guild: { id, icon
                             banner,
                         }, true))
                     }
+                    icon={ImageIcon}
                 />
             ) : null}
         </Menu.MenuGroup>
@@ -151,6 +150,7 @@ export default definePlugin({
     name: "ViewIcons",
     authors: [Devs.Ven, Devs.TheKodeToad, Devs.Nuckyz],
     description: "Makes avatars and banners in user profiles clickable, and adds View Icon/Banner entries in the user and server context menu",
+    tags: ["ImageUtilities"],
 
     settings,
 

src/plugins/webContextMenus.web.ts

@@ -157,9 +157,9 @@ export default definePlugin({
                     replace: "$1=[],$2=[]",
                 },
                 {
-                    // if (!IS_DESKTOP) return
-                    match: /(?<=showApplicationCommandSuggestions;)if\(!\i\.\i\)/,
-                    replace: "if(false)"
+                    // if (!IS_DESKTOP) return null;
+                    match: /if\(!\i\.\i\)return null;/,
+                    replace: ""
                 },
                 {
                     // do not add menu items for entries removed in patch 1. Using a lookbehind for group 1 is slow,

src/utils/constants.ts

@@ -29,7 +29,18 @@ export const REACT_GLOBAL = "Vencord.Webpack.Common.React";
 export const VENCORD_USER_AGENT = `Vencord/${gitHash}${gitRemote ? ` (https://github.com/${gitRemote})` : ""}`;
 export const SUPPORT_CHANNEL_ID = "1026515880080842772";
 
-// Add yourself here if you made a plugin
+export interface Dev {
+    name: string;
+    id: bigint;
+    badge?: boolean;
+}
+
+/**
+ * If you made a plugin or substantial contribution, add yourself here.
+ * This object is used for the plugin author list, as well as to add a contributor badge to your profile.
+ * If you wish to stay fully anonymous, feel free to set ID to 0n.
+ * If you are fine with attribution but don't want the badge, add badge: false
+ */
 export const Devs = /* #__PURE__*/ Object.freeze({
     Ven: {
         name: "Vendicated",
@@ -201,7 +212,8 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     },
     nick: {
         name: "nick",
-        id: 347884694408265729n
+        id: 347884694408265729n,
+        badge: false
     },
     whqwert: {
         name: "whqwert",
@@ -286,5 +298,30 @@ export const Devs = /* #__PURE__*/ Object.freeze({
     carince: {
         name: "carince",
         id: 818323528755314698n
-    }
-});
+    },
+    PandaNinjas: {
+        name: "PandaNinjas",
+        id: 455128749071925248n
+    },
+    CatNoir: {
+        name: "CatNoir",
+        id: 260371016348336128n
+    },
+    outfoxxed: {
+        name: "outfoxxed",
+        id: 837425748435796060n
+    },
+    UwUDev: {
+        name: "UwU",
+        id: 691413039156690994n,
+    },
+} satisfies Record<string, Dev>);
+
+// iife so #__PURE__ works correctly
+export const DevsById = /* #__PURE__*/ (() =>
+    Object.freeze(Object.fromEntries(
+        Object.entries(Devs)
+            .filter(d => d[1].id !== 0n)
+            .map(([_, v]) => [v.id, v] as const)
+    ))
+)() as Record<string, Dev>;

src/utils/discord.ts

@@ -16,11 +16,13 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { findLazy } from "@webpack";
+import { MessageObject } from "@api/MessageEvents";
+import { findByPropsLazy, findLazy } from "@webpack";
 import { ChannelStore, ComponentDispatch, GuildStore, PrivateChannelsStore, SelectedChannelStore } from "@webpack/common";
-import { Guild } from "discord-types/general";
+import { Guild, Message } from "discord-types/general";
 
 const PreloadedUserSettings = findLazy(m => m.ProtoClass?.typeName.endsWith("PreloadedUserSettings"));
+const MessageActions = findByPropsLazy("editMessage", "sendMessage");
 
 export function getCurrentChannel() {
     return ChannelStore.getChannel(SelectedChannelStore.getChannelId());
@@ -49,3 +51,29 @@ export function insertTextIntoChatInputBox(text: string) {
         plainText: text
     });
 }
+
+interface MessageExtra {
+    messageReference: Message["messageReference"];
+    allowedMentions: {
+        parse: string[];
+        replied_user: boolean;
+    };
+    stickerIds: string[];
+}
+
+export function sendMessage(
+    channelId: string,
+    data: Partial<MessageObject>,
+    waitForChannelReady?: boolean,
+    extra?: Partial<MessageExtra>
+) {
+    const messageData = {
+        content: "",
+        invalidEmojis: [],
+        tts: false,
+        validNonShortcutEmojis: [],
+        ...data
+    };
+
+    return MessageActions.sendMessage(channelId, messageData, waitForChannelReady, extra);
+}

src/utils/misc.tsx

@@ -18,6 +18,8 @@
 
 import { Clipboard, Toasts } from "@webpack/common";
 
+import { DevsById } from "./constants";
+
 /**
  * Recursively merges defaults into an object and returns the same object
  * @param obj Object
@@ -100,3 +102,5 @@ export function identity<T>(value: T): T {
 // https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_tablet_or_desktop
 // "In summary, we recommend looking for the string Mobi anywhere in the User Agent to detect a mobile device."
 export const isMobile = navigator.userAgent.includes("Mobi");
+
+export const isPluginDev = (id: string) => Object.hasOwn(DevsById, id);

src/utils/types.ts

@@ -147,8 +147,15 @@ export interface PluginSettingCommon {
     description: string;
     placeholder?: string;
     onChange?(newValue: any): void;
+    /**
+     * Whether changing this setting requires a restart
+     */
     restartNeeded?: boolean;
     componentProps?: Record<string, any>;
+    /**
+     * Hide this setting from the settings UI
+     */
+    hidden?: boolean;
     /**
      * Set this if the setting only works on Browser or Desktop, not both
      */

src/webpack/common/components.ts

@@ -43,6 +43,9 @@ export let ButtonLooks: t.ButtonLooks;
 export let Popout: t.Popout;
 export let Dialog: t.Dialog;
 export let TabBar: any;
+// token lagger real
+/** css colour resolver stuff, no clue what exactly this does, just copied usage from Discord */
+export let useToken: t.useToken;
 
 export const Timestamp = waitForComponent<t.Timestamp>("Timestamp", filters.byCode(".Messages.MESSAGE_EDITED_TIMESTAMP_A11Y_LABEL.format"));
 export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"]);
@@ -50,6 +53,6 @@ export const Flex = waitForComponent<t.Flex>("Flex", ["Justify", "Align", "Wrap"
 export const ButtonWrapperClasses = findByPropsLazy("buttonWrapper", "buttonContent") as Record<string, string>;
 
 waitFor("FormItem", m => {
-    ({ Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m);
+    ({ useToken, Card, Button, FormSwitch: Switch, Tooltip, TextInput, TextArea, Text, Select, SearchableSelect, Slider, ButtonLooks, TabBar, Popout, Dialog } = m);
     Forms = m;
 });

src/webpack/common/stores.ts

@@ -25,7 +25,7 @@ import * as t from "./types/stores";
 
 export const Flux: t.Flux = findByPropsLazy("connectStores");
 
-type GenericStore = t.FluxStore & Record<string, any>;
+export type GenericStore = t.FluxStore & Record<string, any>;
 
 export let MessageStore: Omit<Stores.MessageStore, "getMessages"> & {
     getMessages(chanId: string): any;
@@ -37,6 +37,7 @@ export let PermissionStore: GenericStore;
 export let GuildChannelStore: GenericStore;
 export let ReadStateStore: GenericStore;
 export let PresenceStore: GenericStore;
+export let PoggerModeSettingsStore: GenericStore;
 
 export let GuildStore: Stores.GuildStore & t.FluxStore;
 export let UserStore: Stores.UserStore & t.FluxStore;
@@ -49,6 +50,7 @@ export let RelationshipStore: Stores.RelationshipStore & t.FluxStore & {
     getSince(userId: string): string;
 };
 
+export let EmojiStore: t.EmojiStore;
 export let WindowStore: t.WindowStore;
 
 export const MaskedLinkStore = mapMangledModuleLazy('"MaskedLinkStore"', {
@@ -87,3 +89,4 @@ waitForStore("ReadStateStore", m => ReadStateStore = m);
 waitForStore("GuildChannelStore", m => GuildChannelStore = m);
 waitForStore("MessageStore", m => MessageStore = m);
 waitForStore("WindowStore", m => WindowStore = m);
+waitForStore("EmojiStore", m => EmojiStore = m);

src/webpack/common/types/components.d.ts

@@ -375,3 +375,15 @@ export type Popout = ComponentType<{
 };
 
 export type Dialog = ComponentType<PropsWithChildren<any>>;
+
+type Resolve = (data: { theme: "light" | "dark", saturation: number; }) => {
+    hex(): string;
+    hsl(): string;
+    int(): number;
+    spring(): string;
+};
+
+export type useToken = (color: {
+    css: string;
+    resolve: Resolve;
+}) => ReturnType<Resolve>;

src/webpack/common/types/menu.d.ts

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, UIEvent } from "react";
+import type { ComponentType, CSSProperties, MouseEvent, PropsWithChildren, ReactNode, UIEvent } from "react";
 
 type RC<C> = ComponentType<PropsWithChildren<C & Record<string, any>>>;
 
@@ -35,11 +35,12 @@ export interface Menu {
     }>;
     MenuItem: RC<{
         id: string;
-        label: string;
+        label: ReactNode;
         action?(e: MouseEvent): void;
+        icon?: ComponentType<any>;
 
         color?: string;
-        render?: ComponentType;
+        render?: ComponentType<any>;
         onChildrenScroll?: Function;
         childRowHeight?: number;
         listClassName?: string;

src/webpack/common/types/stores.d.ts

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Channel } from "discord-types/general";
+
 import { FluxDispatcher, FluxEvents } from "./utils";
 
 export class FluxStore {
@@ -38,3 +40,102 @@ export class WindowStore extends FluxStore {
     isFocused(): boolean;
     windowSize(): Record<"width" | "height", number>;
 }
+
+type Emoji = CustomEmoji | UnicodeEmoji;
+export interface CustomEmoji {
+    allNamesString: string;
+    animated: boolean;
+    available: boolean;
+    guildId: string;
+    id: string;
+    managed: boolean;
+    name: string;
+    originalName?: string;
+    require_colons: boolean;
+    roles: string[];
+    url: string;
+}
+
+export interface UnicodeEmoji {
+    diversityChildren: Record<any, any>;
+    emojiObject: {
+        names: string[];
+        surrogates: string;
+        unicodeVersion: number;
+    };
+    index: number;
+    surrogates: string;
+    uniqueName: string;
+    useSpriteSheet: boolean;
+    get allNamesString(): string;
+    get animated(): boolean;
+    get defaultDiversityChild(): any;
+    get hasDiversity(): boolean | undefined;
+    get hasDiversityParent(): boolean | undefined;
+    get hasMultiDiversity(): boolean | undefined;
+    get hasMultiDiversityParent(): boolean | undefined;
+    get managed(): boolean;
+    get name(): string;
+    get names(): string[];
+    get optionallyDiverseSequence(): string | undefined;
+    get unicodeVersion(): number;
+    get url(): string;
+}
+
+export class EmojiStore extends FluxStore {
+    getCustomEmojiById(id?: string | null): CustomEmoji;
+    getUsableCustomEmojiById(id?: string | null): CustomEmoji;
+    getGuilds(): Record<string, {
+        id: string;
+        _emojiMap: Record<string, CustomEmoji>;
+        _emojis: CustomEmoji[];
+        get emojis(): CustomEmoji[];
+        get rawEmojis(): CustomEmoji[];
+        _usableEmojis: CustomEmoji[];
+        get usableEmojis(): CustomEmoji[];
+        _emoticons: any[];
+        get emoticons(): any[];
+    }>;
+    getGuildEmoji(guildId?: string | null): CustomEmoji[];
+    getNewlyAddedEmoji(guildId?: string | null): CustomEmoji[];
+    getTopEmoji(guildId?: string | null): CustomEmoji[];
+    getTopEmojisMetadata(guildId?: string | null): {
+        emojiIds: string[];
+        topEmojisTTL: number;
+    };
+    hasPendingUsage(): boolean;
+    hasUsableEmojiInAnyGuild(): boolean;
+    searchWithoutFetchingLatest(data: any): any;
+    getSearchResultsOrder(...args: any[]): any;
+    getState(): {
+        pendingUsages: { key: string, timestamp: number; }[];
+    };
+    searchWithoutFetchingLatest(data: {
+        channel: Channel,
+        query: string;
+        count?: number;
+        intention: number;
+        includeExternalGuilds?: boolean;
+        matchComparator?(name: string): boolean;
+    }): Record<"locked" | "unlocked", Emoji[]>;
+
+    getDisambiguatedEmojiContext(): {
+        backfillTopEmojis: Record<any, any>;
+        customEmojis: Record<string, CustomEmoji>;
+        emojisById: Record<string, CustomEmoji>;
+        emojisByName: Record<string, CustomEmoji>;
+        emoticonRegex: RegExp | null;
+        emoticonsByName: Record<string, any>;
+        escapedEmoticonNames: string;
+        favoriteNamesAndIds?: any;
+        favorites?: any;
+        frequentlyUsed?: any;
+        groupedCustomEmojis: Record<string, CustomEmoji[]>;
+        guildId?: string;
+        isFavoriteEmojiWithoutFetchingLatest(e: Emoji): boolean;
+        newlyAddedEmoji: Record<string, CustomEmoji[]>;
+        topEmojis?: any;
+        unicodeAliases: Record<string, string>;
+        get favoriteEmojisWithoutFetchingLatest(): Emoji[];
+    };
+}

src/webpack/common/types/utils.d.ts

@@ -85,6 +85,51 @@ export type RestAPI = Record<"delete" | "get" | "patch" | "post" | "put", (data:
     getAPIBaseURL(withVersion?: boolean): string;
 };
 
+export type Permissions = "CREATE_INSTANT_INVITE"
+    | "KICK_MEMBERS"
+    | "BAN_MEMBERS"
+    | "ADMINISTRATOR"
+    | "MANAGE_CHANNELS"
+    | "MANAGE_GUILD"
+    | "CHANGE_NICKNAME"
+    | "MANAGE_NICKNAMES"
+    | "MANAGE_ROLES"
+    | "MANAGE_WEBHOOKS"
+    | "MANAGE_GUILD_EXPRESSIONS"
+    | "VIEW_AUDIT_LOG"
+    | "VIEW_CHANNEL"
+    | "VIEW_GUILD_ANALYTICS"
+    | "VIEW_CREATOR_MONETIZATION_ANALYTICS"
+    | "MODERATE_MEMBERS"
+    | "SEND_MESSAGES"
+    | "SEND_TTS_MESSAGES"
+    | "MANAGE_MESSAGES"
+    | "EMBED_LINKS"
+    | "ATTACH_FILES"
+    | "READ_MESSAGE_HISTORY"
+    | "MENTION_EVERYONE"
+    | "USE_EXTERNAL_EMOJIS"
+    | "ADD_REACTIONS"
+    | "USE_APPLICATION_COMMANDS"
+    | "MANAGE_THREADS"
+    | "CREATE_PUBLIC_THREADS"
+    | "CREATE_PRIVATE_THREADS"
+    | "USE_EXTERNAL_STICKERS"
+    | "SEND_MESSAGES_IN_THREADS"
+    | "CONNECT"
+    | "SPEAK"
+    | "MUTE_MEMBERS"
+    | "DEAFEN_MEMBERS"
+    | "MOVE_MEMBERS"
+    | "USE_VAD"
+    | "PRIORITY_SPEAKER"
+    | "STREAM"
+    | "USE_EMBEDDED_ACTIVITIES"
+    | "REQUEST_TO_SPEAK"
+    | "MANAGE_EVENTS";
+
+export type PermissionsBits = Record<Permissions, bigint>;
+
 export interface Locale {
     name: string;
     value: string;

src/webpack/common/utils.ts

@@ -114,3 +114,5 @@ waitFor("parseTopic", m => Parser = m);
 
 export let SettingsRouter: any;
 waitFor(["open", "saveAccountChanges"], m => SettingsRouter = m);
+
+export const PermissionsBits: t.PermissionsBits = findLazy(m => typeof m.ADMINISTRATOR === "bigint");