Merge branch 'Vendicated:main' into CustomBanReasons

CONTRIBUTING.md

@@ -31,6 +31,7 @@ Before starting your plugin:
 - No FakeDeafen or FakeMute
 - No StereoMic
 - No plugins that simply hide or redesign ui elements. This can be done with CSS
+- No plugins that interact with specific Discord bots (official Discord apps like Youtube WatchTogether are okay)
 - No selfbots or API spam (animated status, message pruner, auto reply, nitro snipers, etc)
 - No untrusted third party APIs. Popular services like Google or GitHub are fine, but absolutely no self hosted ones
 - No plugins that require the user to enter their own API key

browser/userscript.meta.js

@@ -5,6 +5,7 @@
 // @author          Vendicated (https://github.com/Vendicated)
 // @namespace       https://github.com/Vendicated/Vencord
 // @supportURL      https://github.com/Vendicated/Vencord
+// @icon            https://raw.githubusercontent.com/Vendicated/Vencord/refs/heads/main/browser/icon.png
 // @license         GPL-3.0
 // @match           *://*.discord.com/*
 // @grant           GM_xmlhttpRequest

eslint.config.mjs

@@ -4,10 +4,9 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-// @ts-check
-
 import stylistic from "@stylistic/eslint-plugin";
 import pathAlias from "eslint-plugin-path-alias";
+import react from "eslint-plugin-react";
 import header from "eslint-plugin-simple-header";
 import simpleImportSort from "eslint-plugin-simple-import-sort";
 import unusedImports from "eslint-plugin-unused-imports";
@@ -15,6 +14,22 @@ import tseslint from "typescript-eslint";
 
 export default tseslint.config(
     { ignores: ["dist", "browser", "packages/vencord-types"] },
+    {
+        files: ["src/**/*.{tsx,ts,mts,mjs,js,jsx}", "eslint.config.mjs"],
+        settings: {
+            react: {
+                version: "18"
+            }
+        },
+        ...react.configs.flat.recommended,
+        rules: {
+            ...react.configs.flat.recommended.rules,
+            "react/react-in-jsx-scope": "off",
+            "react/prop-types": "off",
+            "react/display-name": "off",
+            "react/no-unescaped-entities": "off",
+        }
+    },
     {
         files: ["src/**/*.{tsx,ts,mts,mjs,js,jsx}", "eslint.config.mjs"],
         plugins: {
@@ -23,7 +38,7 @@ export default tseslint.config(
             "@typescript-eslint": tseslint.plugin,
             "simple-import-sort": simpleImportSort,
             "unused-imports": unusedImports,
-            "path-alias": pathAlias,
+            "path-alias": pathAlias
         },
         settings: {
             "import/resolver": {

package.json

@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.10.4",
+    "version": "1.11.0",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {
@@ -35,53 +35,55 @@
         "testTsc": "tsc --noEmit"
     },
     "dependencies": {
+        "@intrnl/xxhash64": "^0.1.2",
         "@sapphi-red/web-noise-suppressor": "0.3.5",
         "@vap/core": "0.0.12",
         "@vap/shiki": "0.10.5",
         "fflate": "^0.8.2",
         "gifenc": "github:mattdesl/gifenc#64842fca317b112a8590f8fef2bf3825da8f6fe3",
-        "monaco-editor": "^0.50.0",
-        "nanoid": "^5.0.7",
+        "monaco-editor": "^0.52.2",
+        "nanoid": "^5.0.9",
         "virtual-merge": "^1.0.1"
     },
     "devDependencies": {
-        "@stylistic/eslint-plugin": "^2.6.1",
-        "@types/chrome": "^0.0.269",
-        "@types/diff": "^5.2.1",
-        "@types/lodash": "^4.17.7",
-        "@types/node": "^22.0.3",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@stylistic/eslint-plugin": "^2.12.1",
+        "@types/chrome": "^0.0.287",
+        "@types/diff": "^6.0.0",
+        "@types/lodash": "^4.17.14",
+        "@types/node": "^22.10.5",
+        "@types/react": "^19.0.2",
+        "@types/react-dom": "^19.0.2",
         "@types/yazl": "^2.4.5",
-        "diff": "^5.2.0",
+        "diff": "^7.0.0",
         "discord-types": "^1.3.26",
         "esbuild": "^0.15.18",
-        "eslint": "^9.8.0",
+        "eslint": "^9.17.0",
         "eslint-import-resolver-alias": "^1.1.2",
         "eslint-plugin-path-alias": "2.1.0",
-        "eslint-plugin-simple-header": "^1.1.1",
+        "eslint-plugin-react": "^7.37.3",
+        "eslint-plugin-simple-header": "^1.2.1",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-unused-imports": "^4.0.1",
-        "highlight.js": "10.7.3",
+        "eslint-plugin-unused-imports": "^4.1.4",
+        "highlight.js": "11.7.0",
         "html-minifier-terser": "^7.2.0",
-        "moment": "^2.30.1",
-        "puppeteer-core": "^22.15.0",
+        "moment": "^2.22.2",
+        "puppeteer-core": "^23.11.1",
         "standalone-electron-types": "^1.0.0",
-        "stylelint": "^16.8.1",
+        "stylelint": "^16.12.0",
         "stylelint-config-standard": "^36.0.1",
-        "ts-patch": "^3.2.1",
-        "ts-pattern": "^5.3.1",
-        "tsx": "^4.16.5",
-        "type-fest": "^4.23.0",
-        "typescript": "^5.5.4",
-        "typescript-eslint": "^8.0.0",
-        "typescript-transform-paths": "^3.4.7",
+        "ts-patch": "^3.3.0",
+        "ts-pattern": "^5.6.0",
+        "tsx": "^4.19.2",
+        "type-fest": "^4.31.0",
+        "typescript": "^5.7.2",
+        "typescript-eslint": "^8.19.0",
+        "typescript-transform-paths": "^3.5.3",
         "zip-local": "^0.3.5"
     },
     "packageManager": "pnpm@9.1.0",
     "pnpm": {
         "patchedDependencies": {
-            "eslint@9.8.0": "patches/eslint@9.8.0.patch",
+            "eslint@9.17.0": "patches/eslint@9.17.0.patch",
             "eslint-plugin-path-alias@2.1.0": "patches/eslint-plugin-path-alias@2.1.0.patch"
         },
         "peerDependencyRules": {

scripts/generateReport.ts

@@ -37,7 +37,8 @@ const CANARY = process.env.USE_CANARY === "true";
 
 const browser = await pup.launch({
     headless: true,
-    executablePath: process.env.CHROMIUM_BIN
+    executablePath: process.env.CHROMIUM_BIN,
+    args: ["--no-sandbox"]
 });
 
 const page = await browser.newPage();
@@ -225,7 +226,7 @@ page.on("console", async e => {
                     plugin,
                     type,
                     id,
-                    match: regex.replace(/\[A-Za-z_\$\]\[\\w\$\]\*/g, "\\i"),
+                    match: regex.replace(/\(\?:\[A-Za-z_\$\]\[\\w\$\]\*\)/g, "\\i"),
                     error: await maybeGetError(e.args()[3])
                 });
 

src/api/ChatButtons.tsx

@@ -11,7 +11,7 @@ import { Logger } from "@utils/Logger";
 import { waitFor } from "@webpack";
 import { Button, ButtonLooks, ButtonWrapperClasses, Tooltip } from "@webpack/common";
 import { Channel } from "discord-types/general";
-import { HTMLProps, MouseEventHandler, ReactNode } from "react";
+import { HTMLProps, JSX, MouseEventHandler, ReactNode } from "react";
 
 let ChannelTextAreaClasses: Record<"button" | "buttonContainer", string>;
 waitFor(["buttonContainer", "channelTextArea"], m => ChannelTextAreaClasses = m);
@@ -99,7 +99,8 @@ export interface ChatBarButtonProps {
     tooltip: string;
     onClick: MouseEventHandler<HTMLButtonElement>;
     onContextMenu?: MouseEventHandler<HTMLButtonElement>;
-    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu">;
+    onAuxClick?: MouseEventHandler<HTMLButtonElement>;
+    buttonProps?: Omit<HTMLProps<HTMLButtonElement>, "size" | "onClick" | "onContextMenu" | "onAuxClick">;
 }
 export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
     return (
@@ -115,6 +116,7 @@ export const ChatBarButton = ErrorBoundary.wrap((props: ChatBarButtonProps) => {
                         innerClassName={`${ButtonWrapperClasses.button} ${ChannelTextAreaClasses?.button}`}
                         onClick={props.onClick}
                         onContextMenu={props.onContextMenu}
+                        onAuxClick={props.onAuxClick}
                         {...props.buttonProps}
                     >
                         <div className={ButtonWrapperClasses.buttonWrapper}>

src/api/Commands/commandHelpers.ts

@@ -54,5 +54,5 @@ export function sendBotMessage(channelId: string, message: PartialDeep<Message>)
 export function findOption<T>(args: Argument[], name: string): T & {} | undefined;
 export function findOption<T>(args: Argument[], name: string, fallbackValue: T): T & {};
 export function findOption(args: Argument[], name: string, fallbackValue?: any) {
-    return (args.find(a => a.name === name)?.value || fallbackValue) as any;
+    return (args.find(a => a.name === name)?.value ?? fallbackValue) as any;
 }

src/api/Commands/index.ts

@@ -110,6 +110,7 @@ function registerSubCommands(cmd: Command, plugin: string) {
         const subCmd = {
             ...cmd,
             ...o,
+            options: o.options !== undefined ? o.options : undefined,
             type: ApplicationCommandType.CHAT_INPUT,
             name: `${cmd.name} ${o.name}`,
             id: `${o.name}-${cmd.id}`,

src/api/ContextMenu.ts

@@ -24,13 +24,13 @@ import type { ReactElement } from "react";
  * @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
  */
-export type NavContextMenuPatchCallback = (children: Array<ReactElement | null>, ...args: Array<any>) => void;
+export type NavContextMenuPatchCallback = (children: Array<ReactElement<any> | null>, ...args: Array<any>) => void;
 /**
  * @param navId The navId of the context menu being patched
  * @param children The rendered context menu elements
  * @param args Any arguments passed into making the context menu, like the guild, channel, user or message for example
  */
-export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement | null>, ...args: Array<any>) => void;
+export type GlobalContextMenuPatchCallback = (navId: string, children: Array<ReactElement<any> | null>, ...args: Array<any>) => void;
 
 const ContextMenuLogger = new Logger("ContextMenu");
 
@@ -70,7 +70,7 @@ export function addGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallback)
  * @returns Whether the patch was successfully removed from the context menu(s)
  */
 export function removeContextMenuPatch<T extends string | Array<string>>(navId: T, patch: NavContextMenuPatchCallback): T extends string ? boolean : Array<boolean> {
-    const navIds = Array.isArray(navId) ? navId : [navId as string];
+    const navIds: string[] = Array.isArray(navId) ? navId : [navId];
 
     const results = navIds.map(id => navPatches.get(id)?.delete(patch) ?? false);
 
@@ -92,7 +92,7 @@ export function removeGlobalContextMenuPatch(patch: GlobalContextMenuPatchCallba
  * @param children The context menu children
  * @param matchSubstring Whether to check if the id is a substring of the child id
  */
-export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement | null | undefined>, matchSubstring = false): Array<ReactElement | null | undefined> | null {
+export function findGroupChildrenByChildId(id: string | string[], children: Array<ReactElement<any> | null | undefined>, matchSubstring = false): Array<ReactElement<any> | null | undefined> | null {
     for (const child of children) {
         if (child == null) continue;
 
@@ -124,7 +124,7 @@ export function findGroupChildrenByChildId(id: string | string[], children: Arra
 interface ContextMenuProps {
     contextMenuApiArguments?: Array<any>;
     navId: string;
-    children: Array<ReactElement | null>;
+    children: Array<ReactElement<any> | null>;
     "aria-label": string;
     onSelect: (() => void) | undefined;
     onClose: (callback: (...args: Array<any>) => any) => void;
@@ -162,7 +162,7 @@ export function _usePatchContextMenu(props: ContextMenuProps) {
     return props;
 }
 
-function cloneMenuChildren(obj: ReactElement | Array<ReactElement | null> | null) {
+function cloneMenuChildren(obj: ReactElement<any> | Array<ReactElement<any> | null> | null) {
     if (Array.isArray(obj)) {
         return obj.map(cloneMenuChildren);
     }

src/api/MemberListDecorators.ts

@@ -17,6 +17,7 @@
 */
 
 import { Channel, User } from "discord-types/general/index.js";
+import { JSX } from "react";
 
 interface DecoratorProps {
     activities: any[];

src/api/MessageAccessories.ts

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { JSX } from "react";
+
 export type AccessoryCallback = (props: Record<string, any>) => JSX.Element | null | Array<JSX.Element | null>;
 export type Accessory = {
     callback: AccessoryCallback;

src/api/MessageDecorations.ts

@@ -17,6 +17,7 @@
 */
 
 import { Channel, Message } from "discord-types/general/index.js";
+import { JSX } from "react";
 
 interface DecorationProps {
     author: {

src/api/ServerList.ts

@@ -17,6 +17,7 @@
 */
 
 import { Logger } from "@utils/Logger";
+import { JSX } from "react";
 
 const logger = new Logger("ServerListAPI");
 

src/api/Settings.ts

@@ -23,7 +23,7 @@ import { Logger } from "@utils/Logger";
 import { mergeDefaults } from "@utils/mergeDefaults";
 import { putCloudSettings } from "@utils/settingsSync";
 import { DefinedSettings, OptionType, SettingsChecks, SettingsDefinition } from "@utils/types";
-import { React } from "@webpack/common";
+import { React, useEffect } from "@webpack/common";
 
 import plugins from "~plugins";
 
@@ -192,7 +192,7 @@ export const Settings = SettingsStore.store;
 export function useSettings(paths?: UseSettings<Settings>[]) {
     const [, forceUpdate] = React.useReducer(() => ({}), {});
 
-    React.useEffect(() => {
+    useEffect(() => {
         if (paths) {
             paths.forEach(p => SettingsStore.addChangeListener(p, forceUpdate));
             return () => paths.forEach(p => SettingsStore.removeChangeListener(p, forceUpdate));
@@ -200,7 +200,7 @@ export function useSettings(paths?: UseSettings<Settings>[]) {
             SettingsStore.addGlobalChangeListener(forceUpdate);
             return () => SettingsStore.removeGlobalChangeListener(forceUpdate);
         }
-    }, []);
+    }, [paths]);
 
     return SettingsStore.store;
 }

src/components/Badge.tsx

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-export function Badge({ text, color }): JSX.Element {
+export function Badge({ text, color }) {
     return (
         <div className="vc-plugins-badge" style={{
             backgroundColor: color,

src/components/ErrorBoundary.tsx

@@ -27,7 +27,7 @@ interface Props<T = any> {
     /** Render nothing if an error occurs */
     noop?: boolean;
     /** Fallback component to render if an error occurs */
-    fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; }>>;
+    fallback?: React.ComponentType<React.PropsWithChildren<{ error: any; message: string; stack: string; wrappedProps: T; }>>;
     /** called when an error occurs. The props property is only available if using .wrap */
     onError?(data: { error: Error, errorInfo: React.ErrorInfo, props: T; }): void;
     /** Custom error message */
@@ -80,10 +80,14 @@ const ErrorBoundary = LazyComponent(() => {
             if (this.props.noop) return null;
 
             if (this.props.fallback)
-                return <this.props.fallback
-                    children={this.props.children}
-                    {...this.state}
-                />;
+                return (
+                    <this.props.fallback
+                        wrappedProps={this.props.wrappedProps}
+                        {...this.state}
+                    >
+                        {this.props.children}
+                    </this.props.fallback>
+                );
 
             const msg = this.props.message || "An error occurred while rendering this Component. More info can be found below and in your console.";
 

src/components/ExpandableHeader.css

@@ -1,11 +0,0 @@
-.vc-expandableheader-center-flex {
-    display: flex;
-    place-items: center;
-}
-
-.vc-expandableheader-btn {
-    all: unset;
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-}

src/components/ExpandableHeader.tsx

@@ -1,121 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2023 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import "./ExpandableHeader.css";
-
-import { classNameFactory } from "@api/Styles";
-import { Text, Tooltip, useState } from "@webpack/common";
-
-const cl = classNameFactory("vc-expandableheader-");
-
-export interface ExpandableHeaderProps {
-    onMoreClick?: () => void;
-    moreTooltipText?: string;
-    onDropDownClick?: (state: boolean) => void;
-    defaultState?: boolean;
-    headerText: string;
-    children: React.ReactNode;
-    buttons?: React.ReactNode[];
-    forceOpen?: boolean;
-}
-
-export function ExpandableHeader({
-    children,
-    onMoreClick,
-    buttons,
-    moreTooltipText,
-    onDropDownClick,
-    headerText,
-    defaultState = false,
-    forceOpen = false,
-}: ExpandableHeaderProps) {
-    const [showContent, setShowContent] = useState(defaultState || forceOpen);
-
-    return (
-        <>
-            <div style={{
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-                marginBottom: "8px"
-            }}>
-                <Text
-                    tag="h2"
-                    variant="eyebrow"
-                    style={{
-                        color: "var(--header-primary)",
-                        display: "inline"
-                    }}
-                >
-                    {headerText}
-                </Text>
-
-                <div className={cl("center-flex")}>
-                    {
-                        buttons ?? null
-                    }
-
-                    {
-                        onMoreClick && // only show more button if callback is provided
-                        <Tooltip text={moreTooltipText}>
-                            {tooltipProps => (
-                                <button
-                                    {...tooltipProps}
-                                    className={cl("btn")}
-                                    onClick={onMoreClick}>
-                                    <svg
-                                        width="24"
-                                        height="24"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <path fill="var(--text-normal)" d="M7 12.001C7 10.8964 6.10457 10.001 5 10.001C3.89543 10.001 3 10.8964 3 12.001C3 13.1055 3.89543 14.001 5 14.001C6.10457 14.001 7 13.1055 7 12.001ZM14 12.001C14 10.8964 13.1046 10.001 12 10.001C10.8954 10.001 10 10.8964 10 12.001C10 13.1055 10.8954 14.001 12 14.001C13.1046 14.001 14 13.1055 14 12.001ZM19 10.001C20.1046 10.001 21 10.8964 21 12.001C21 13.1055 20.1046 14.001 19 14.001C17.8954 14.001 17 13.1055 17 12.001C17 10.8964 17.8954 10.001 19 10.001Z" />
-                                    </svg>
-                                </button>
-                            )}
-                        </Tooltip>
-                    }
-
-
-                    <Tooltip text={showContent ? "Hide " + headerText : "Show " + headerText}>
-                        {tooltipProps => (
-                            <button
-                                {...tooltipProps}
-                                className={cl("btn")}
-                                onClick={() => {
-                                    setShowContent(v => !v);
-                                    onDropDownClick?.(showContent);
-                                }}
-                                disabled={forceOpen}
-                            >
-                                <svg
-                                    width="24"
-                                    height="24"
-                                    viewBox="0 0 24 24"
-                                    transform={showContent ? "scale(1 -1)" : "scale(1 1)"}
-                                >
-                                    <path fill="var(--text-normal)" d="M16.59 8.59003L12 13.17L7.41 8.59003L6 10L12 16L18 10L16.59 8.59003Z" />
-                                </svg>
-                            </button>
-                        )}
-                    </Tooltip>
-                </div>
-            </div>
-            {showContent && children}
-        </>
-    );
-}

src/components/Grid.tsx

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import { CSSProperties } from "react";
+import { CSSProperties, JSX } from "react";
 
 interface Props {
     columns: number;

src/components/Heart.tsx

@@ -27,7 +27,7 @@ export function Heart() {
         >
             <path
                 fill="#db61a2"
-                fill-rule="evenodd"
+                fillRule="evenodd"
                 d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z"
             />
         </svg>

src/components/Icons.tsx

@@ -18,10 +18,9 @@
 
 import "./iconStyles.css";
 
-import { getTheme, Theme } from "@utils/discord";
+import { getIntlMessage } from "@utils/discord";
 import { classes } from "@utils/misc";
-import { i18n } from "@webpack/common";
-import type { PropsWithChildren } from "react";
+import type { JSX, PropsWithChildren } from "react";
 
 interface BaseIconProps extends IconProps {
     viewBox: string;
@@ -56,7 +55,7 @@ export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
             className={classes(className, "vc-link-icon")}
             viewBox="0 0 24 24"
         >
-            <g fill="none" fill-rule="evenodd">
+            <g fill="none" fillRule="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>
@@ -123,8 +122,8 @@ export function InfoIcon(props: IconProps) {
         >
             <path
                 fill="currentColor"
-                transform="translate(2 2)"
-                d="M9,7 L11,7 L11,5 L9,5 L9,7 Z M10,18 C5.59,18 2,14.41 2,10 C2,5.59 5.59,2 10,2 C14.41,2 18,5.59 18,10 C18,14.41 14.41,18 10,18 L10,18 Z M10,4.4408921e-16 C4.4771525,-1.77635684e-15 4.4408921e-16,4.4771525 0,10 C-1.33226763e-15,12.6521649 1.0535684,15.195704 2.92893219,17.0710678 C4.80429597,18.9464316 7.3478351,20 10,20 C12.6521649,20 15.195704,18.9464316 17.0710678,17.0710678 C18.9464316,15.195704 20,12.6521649 20,10 C20,7.3478351 18.9464316,4.80429597 17.0710678,2.92893219 C15.195704,1.0535684 12.6521649,2.22044605e-16 10,0 L10,4.4408921e-16 Z M9,15 L11,15 L11,9 L9,9 L9,15 L9,15 Z"
+                fillRule="evenodd"
+                d="M23 12a11 11 0 1 1-22 0 11 11 0 0 1 22 0Zm-9.5-4.75a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-.77 3.96a1 1 0 1 0-1.96-.42l-1.04 4.86a2.77 2.77 0 0 0 4.31 2.83l.24-.17a1 1 0 1 0-1.16-1.62l-.24.17a.77.77 0 0 1-1.2-.79l1.05-4.86Z" clipRule="evenodd"
             />
         </Icon>
     );
@@ -133,7 +132,7 @@ export function InfoIcon(props: IconProps) {
 export function OwnerCrownIcon(props: IconProps) {
     return (
         <Icon
-            aria-label={i18n.Messages.GUILD_OWNER}
+            aria-label={getIntlMessage("GUILD_OWNER")}
             {...props}
             className={classes(props.className, "vc-owner-crown-icon")}
             role="img"
@@ -212,9 +211,10 @@ export function CogWheel(props: IconProps) {
             viewBox="0 0 24 24"
         >
             <path
-                clipRule="evenodd"
                 fill="currentColor"
-                d="M19.738 10H22V14H19.739C19.498 14.931 19.1 15.798 18.565 16.564L20 18L18 20L16.565 18.564C15.797 19.099 14.932 19.498 14 19.738V22H10V19.738C9.069 19.498 8.203 19.099 7.436 18.564L6 20L4 18L5.436 16.564C4.901 15.799 4.502 14.932 4.262 14H2V10H4.262C4.502 9.068 4.9 8.202 5.436 7.436L4 6L6 4L7.436 5.436C8.202 4.9 9.068 4.502 10 4.262V2H14V4.261C14.932 4.502 15.797 4.9 16.565 5.435L18 3.999L20 5.999L18.564 7.436C19.099 8.202 19.498 9.069 19.738 10ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
+                fillRule="evenodd"
+                d="M10.56 1.1c-.46.05-.7.53-.64.98.18 1.16-.19 2.2-.98 2.53-.8.33-1.79-.15-2.49-1.1-.27-.36-.78-.52-1.14-.24-.77.59-1.45 1.27-2.04 2.04-.28.36-.12.87.24 1.14.96.7 1.43 1.7 1.1 2.49-.33.8-1.37 1.16-2.53.98-.45-.07-.93.18-.99.64a11.1 11.1 0 0 0 0 2.88c.06.46.54.7.99.64 1.16-.18 2.2.19 2.53.98.33.8-.14 1.79-1.1 2.49-.36.27-.52.78-.24 1.14.59.77 1.27 1.45 2.04 2.04.36.28.87.12 1.14-.24.7-.95 1.7-1.43 2.49-1.1.8.33 1.16 1.37.98 2.53-.07.45.18.93.64.99a11.1 11.1 0 0 0 2.88 0c.46-.06.7-.54.64-.99-.18-1.16.19-2.2.98-2.53.8-.33 1.79.14 2.49 1.1.27.36.78.52 1.14.24.77-.59 1.45-1.27 2.04-2.04.28-.36.12-.87-.24-1.14-.96-.7-1.43-1.7-1.1-2.49.33-.8 1.37-1.16 2.53-.98.45.07.93-.18.99-.64a11.1 11.1 0 0 0 0-2.88c-.06-.46-.54-.7-.99-.64-1.16.18-2.2-.19-2.53-.98-.33-.8.14-1.79 1.1-2.49.36-.27.52-.78.24-1.14a11.07 11.07 0 0 0-2.04-2.04c-.36-.28-.87-.12-1.14.24-.7.96-1.7 1.43-2.49 1.1-.8-.33-1.16-1.37-.98-2.53.07-.45-.18-.93-.64-.99a11.1 11.1 0 0 0-2.88 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
+                clipRule="evenodd"
             />
         </Icon>
     );
@@ -262,7 +262,7 @@ export function PlusIcon(props: IconProps) {
             viewBox="0 0 18 18"
         >
             <polygon
-                fill-rule="nonzero"
+                fillRule="nonzero"
                 fill="currentColor"
                 points="15 10 10 10 10 15 8 15 8 10 3 10 3 8 8 8 8 3 10 3 10 8 15 8"
             />
@@ -407,23 +407,30 @@ export function PencilIcon(props: IconProps) {
     );
 }
 
-const WebsiteIconDark = "/assets/e1e96d89e192de1997f73730db26e94f.svg";
-const WebsiteIconLight = "/assets/730f58bcfd5a57a5e22460c445a0c6cf.svg";
-const GithubIconLight = "/assets/3ff98ad75ac94fa883af5ed62d17c459.svg";
-const GithubIconDark = "/assets/6a853b4c87fce386cbfef4a2efbacb09.svg";
-
-export function GithubIcon(props: ImageProps) {
-    const src = getTheme() === Theme.Light
-        ? GithubIconLight
-        : GithubIconDark;
-
-    return <img {...props} src={src} />;
+export function GithubIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="-3 -3 30 30"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.438 9.8 8.205 11.385.6.11.82-.26.82-.577v-2.17c-3.338.726-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.745.083-.73.083-.73 1.205.084 1.84 1.237 1.84 1.237 1.07 1.835 2.807 1.305 3.492.998.108-.775.42-1.305.763-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.467-2.38 1.235-3.22-.123-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.3 1.23.957-.266 1.98-.398 3-.403 1.02.005 2.043.137 3 .403 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.24 2.873.118 3.176.77.84 1.233 1.91 1.233 3.22 0 4.61-2.803 5.625-5.475 5.92.43.37.823 1.102.823 2.222v3.293c0 .32.218.694.825.577C20.565 21.797 24 17.298 24 12c0-6.63-5.37-12-12-12z"
+            />
+        </Icon>
+    );
 }
 
-export function WebsiteIcon(props: ImageProps) {
-    const src = getTheme() === Theme.Light
-        ? WebsiteIconLight
-        : WebsiteIconDark;
-
-    return <img {...props} src={src} />;
+export function WebsiteIcon(props: IconProps) {
+    return (
+        <Icon
+            {...props}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill={props.fill || "currentColor"}
+                d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM4 12c0-.899.156-1.762.431-2.569L6 11l2 2v2l2 2 1 1v1.931C7.061 19.436 4 16.072 4 12zm14.33 4.873C17.677 16.347 16.687 16 16 16v-1a2 2 0 0 0-2-2h-4v-3a2 2 0 0 0 2-2V7h1a2 2 0 0 0 2-2v-.411C17.928 5.778 20 8.65 20 12a7.947 7.947 0 0 1-1.67 4.873z"
+            />
+        </Icon>
+    );
 }

src/components/PluginSettings/ContributorModal.tsx

@@ -44,7 +44,7 @@ function ContributorModal({ user }: { user: User; }) {
     useEffect(() => {
         if (!profile && !user.bot && user.id)
             fetchUserProfile(user.id);
-    }, [user.id]);
+    }, [user.id, user.bot, profile]);
 
     const githubName = profile?.connectedAccounts?.find(a => a.type === "github")?.name;
     const website = profile?.connectedAccounts?.find(a => a.type === "domain")?.name;

src/components/PluginSettings/LinkIconButton.tsx

@@ -6,16 +6,19 @@
 
 import "./LinkIconButton.css";
 
+import { getTheme, Theme } from "@utils/discord";
 import { MaskedLink, Tooltip } from "@webpack/common";
 
 import { GithubIcon, WebsiteIcon } from "..";
 
 export function GithubLinkIcon() {
-    return <GithubIcon aria-hidden className={"vc-settings-modal-link-icon"} />;
+    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
+    return <GithubIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
 }
 
 export function WebsiteLinkIcon() {
-    return <WebsiteIcon aria-hidden className={"vc-settings-modal-link-icon"} />;
+    const theme = getTheme() === Theme.Light ? "#000000" : "#FFFFFF";
+    return <WebsiteIcon aria-hidden fill={theme} className={"vc-settings-modal-link-icon"} />;
 }
 
 interface Props {

src/components/PluginSettings/PluginModal.tsx

@@ -109,7 +109,7 @@ export default function PluginModal({ plugin, onRestartNeeded, onClose, transiti
                 setAuthors(a => [...a, author]);
             }
         })();
-    }, []);
+    }, [plugin.authors]);
 
     async function saveAndClose() {
         if (!plugin.options) {

src/components/PluginSettings/index.tsx

@@ -35,6 +35,7 @@ import { useAwaiter } from "@utils/react";
 import { Plugin } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
 import { Alerts, Button, Card, Forms, lodash, Parser, React, Select, Text, TextInput, Toasts, Tooltip, useMemo } from "@webpack/common";
+import { JSX } from "react";
 
 import Plugins, { ExcludedPlugins } from "~plugins";
 
@@ -387,7 +388,7 @@ function makeDependencyList(deps: string[]) {
     return (
         <React.Fragment>
             <Forms.FormText>This plugin is required by:</Forms.FormText>
-            {deps.map((dep: string) => <Forms.FormText className={cl("dep-text")}>{dep}</Forms.FormText>)}
+            {deps.map((dep: string) => <Forms.FormText key={dep} className={cl("dep-text")}>{dep}</Forms.FormText>)}
         </React.Fragment>
     );
 }

src/components/VencordSettings/PatchHelperTab.tsx

@@ -111,9 +111,9 @@ function ReplacementComponent({ module, match, replacement, setReplacementError
     }
 
     function renderDiff() {
-        return diff?.map(p => {
+        return diff?.map((p, idx) => {
             const color = p.added ? "lime" : p.removed ? "red" : "grey";
-            return <div style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>;
+            return <div key={idx} style={{ color, userSelect: "text", wordBreak: "break-all", lineBreak: "anywhere" }}>{p.value}</div>;
         });
     }
 
@@ -247,7 +247,7 @@ function FullPatchInput({ setFind, setParsedFind, setMatch, setReplacement }: Fu
         }
 
         try {
-            const parsed = (0, eval)(`(${fullPatch})`) as Patch;
+            const parsed = (0, eval)(`([${fullPatch}][0])`) as Patch;
 
             if (!parsed.find) throw new Error("No 'find' field");
             if (!parsed.replacement) throw new Error("No 'replacement' field");

src/components/VencordSettings/UpdaterTab.tsx

@@ -61,7 +61,7 @@ function withDispatcher(dispatcher: React.Dispatch<React.SetStateAction<boolean>
                 title: "Oops!",
                 body: (
                     <ErrorCard>
-                        {err.split("\n").map(line => <div>{Parser.parse(line)}</div>)}
+                        {err.split("\n").map((line, idx) => <div key={idx}>{Parser.parse(line)}</div>)}
                     </ErrorCard>
                 )
             });
@@ -87,7 +87,7 @@ function Changes({ updates, repo, repoPending }: CommonProps & { updates: typeof
     return (
         <Card style={{ padding: "0 0.5em" }}>
             {updates.map(({ hash, author, message }) => (
-                <div style={{
+                <div key={hash} style={{
                     marginTop: "0.5em",
                     marginBottom: "0.5em"
                 }}>

src/components/index.ts

@@ -10,7 +10,6 @@ export * from "./CodeBlock";
 export * from "./DonateButton";
 export { default as ErrorBoundary } from "./ErrorBoundary";
 export * from "./ErrorCard";
-export * from "./ExpandableHeader";
 export * from "./Flex";
 export * from "./Heart";
 export * from "./Icons";

src/debug/loadLazyChunks.ts

@@ -27,13 +27,16 @@ export async function loadLazyChunks() {
 
         const LazyChunkRegex = canonicalizeMatch(/(?:(?:Promise\.all\(\[)?(\i\.e\("?[^)]+?"?\)[^\]]*?)(?:\]\))?)\.then\(\i\.bind\(\i,"?([^)]+?)"?\)\)/g);
 
+        let foundCssDebuggingLoad = false;
+
         async function searchAndLoadLazyChunks(factoryCode: string) {
+            // Workaround to avoid loading the CSS debugging chunk which turns the app pink
+            const hasCssDebuggingLoad = foundCssDebuggingLoad ? false : (foundCssDebuggingLoad = factoryCode.includes(".cssDebuggingEnabled&&"));
+
             const lazyChunks = factoryCode.matchAll(LazyChunkRegex);
             const validChunkGroups = new Set<[chunkIds: number[], entryPoint: number]>();
 
-            // Workaround for a chunk that depends on the ChannelMessage component but may be be force loaded before
-            // the chunk containing the component
-            const shouldForceDefer = factoryCode.includes(".Messages.GUILD_FEED_UNFEATURE_BUTTON_TEXT");
+            const shouldForceDefer = false;
 
             await Promise.all(Array.from(lazyChunks).map(async ([, rawChunkIds, entryPoint]) => {
                 const chunkIds = rawChunkIds ? Array.from(rawChunkIds.matchAll(Webpack.ChunkIdsRegex)).map(m => Number(m[1])) : [];
@@ -45,6 +48,16 @@ export async function loadLazyChunks() {
                 let invalidChunkGroup = false;
 
                 for (const id of chunkIds) {
+                    if (hasCssDebuggingLoad) {
+                        if (chunkIds.length > 1) {
+                            throw new Error("Found multiple chunks in factory that loads the CSS debugging chunk");
+                        }
+
+                        invalidChunks.add(id);
+                        invalidChunkGroup = true;
+                        break;
+                    }
+
                     if (wreq.u(id) == null || wreq.u(id) === "undefined.js") continue;
 
                     const isWorkerAsset = await fetch(wreq.p + wreq.u(id))

src/main/utils/extensions.ts

@@ -71,13 +71,16 @@ export async function installExt(id: string) {
             // React Devtools v4.25
             // v4.27 is broken in Electron, see https://github.com/facebook/react/issues/25843
             // Unfortunately, Google does not serve old versions, so this is the only way
+            // This zip file is pinned to long commit hash so it cannot be changed remotely
             ? "https://raw.githubusercontent.com/Vendicated/random-files/f6f550e4c58ac5f2012095a130406c2ab25b984d/fmkadmapgofadopljbjfkapdkoienihi.zip"
-            : `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${id}%26uc&prodversion=32`;
+            : `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${id}%26uc&prodversion=${process.versions.chrome}`;
+
         const buf = await get(url, {
             headers: {
-                "User-Agent": "Vencord (https://github.com/Vendicated/Vencord)"
+                "User-Agent": `Electron ${process.versions.electron} ~ Vencord (https://github.com/Vendicated/Vencord)`
             }
         });
+
         await extract(crxToZip(buf), extDir).catch(console.error);
     }
 

src/plugins/_api/badges/fixDiscordBadgePadding.css

@@ -0,0 +1,5 @@
+/* the profile popout badge container(s) */
+[class*="biteSize_"] [class*="tags_"] [class*="container_"] {
+    /* Discord has padding set to 2px instead of 1px, which causes the 12th badge to wrap to a new line. */
+    padding: 0 1px;
+}

src/plugins/_api/badges/index.tsx

@@ -16,6 +16,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import "./fixDiscordBadgePadding.css";
+
 import { _getBadges, BadgePosition, BadgeUserArgs, ProfileBadge } from "@api/Badges";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
@@ -77,7 +79,7 @@ export default definePlugin({
                     replace: "...$1.props,$& $1.image??"
                 },
                 {
-                    match: /(?<=text:(\i)\.description,.{0,200})children:/,
+                    match: /(?<="aria-label":(\i)\.description,.{0,200})children:/,
                     replace: "children:$1.component ? $self.renderBadgeComponent({ ...$1 }) :"
                 },
                 // conditionally override their onClick with badge.onClick if it exists

src/plugins/_api/dynamicImageModalApi.ts

@@ -0,0 +1,24 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+
+export default definePlugin({
+    name: "DynamicImageModalAPI",
+    authors: [Devs.sadan, Devs.Nuckyz],
+    description: "Allows you to omit either width or height when opening an image modal",
+    patches: [
+        {
+            find: "SCALE_DOWN:",
+            replacement: {
+                match: /!\(null==(\i)\|\|0===\i\|\|null==(\i)\|\|0===\i\)/,
+                replace: (_, width, height) => `!((null == ${width} || 0 === ${width}) && (null == ${height} || 0 === ${height}))`
+            }
+        }
+    ]
+});

src/plugins/_api/memberListDecorators.ts

@@ -31,7 +31,7 @@ export default definePlugin({
                     match: /let\{[^}]*lostPermissionTooltipText:\i[^}]*\}=(\i),/,
                     replace: "$&vencordProps=$1,"
                 }, {
-                    match: /\.Messages\.GUILD_OWNER(?=.+?decorators:(\i)\(\)).+?\1=?\(\)=>.+?children:\[/,
+                    match: /#{intl::GUILD_OWNER}(?=.+?decorators:(\i)\(\)).+?\1=?\(\)=>.+?children:\[/,
                     replace: "$&...(typeof vencordProps=='undefined'?[]:Vencord.Api.MemberListDecorators.__getDecorators(vencordProps)),"
                 }
             ]

src/plugins/_api/messageAccessories.ts

@@ -25,7 +25,7 @@ export default definePlugin({
     authors: [Devs.Cyn],
     patches: [
         {
-            find: ".Messages.REMOVE_ATTACHMENT_BODY",
+            find: "#{intl::REMOVE_ATTACHMENT_BODY}",
             replacement: {
                 match: /(?<=.container\)?,children:)(\[.+?\])/,
                 replace: "Vencord.Api.MessageAccessories._modifyAccessories($1,this.props)",

src/plugins/_api/messageDecorations.ts

@@ -27,7 +27,7 @@ export default definePlugin({
         {
             find: '"Message Username"',
             replacement: {
-                match: /\.Messages\.GUILD_COMMUNICATION_DISABLED_BOTTOM_SHEET_TITLE.+?}\),\i(?=\])/,
+                match: /#{intl::GUILD_COMMUNICATION_DISABLED_BOTTOM_SHEET_TITLE}.+?}\),\i(?=\])/,
                 replace: "$&,...Vencord.Api.MessageDecorations.__addDecorationsToMessage(arguments[0])"
             }
         }

src/plugins/_api/messageEvents.ts

@@ -25,13 +25,13 @@ export default definePlugin({
     authors: [Devs.Arjix, Devs.hunt, Devs.Ven],
     patches: [
         {
-            find: ".Messages.EDIT_TEXTAREA_HELP",
+            find: "#{intl::EDIT_TEXTAREA_HELP}",
             replacement: {
                 match: /(?<=,channel:\i\}\)\.then\().+?(?=return \i\.content!==this\.props\.message\.content&&\i\((.+?)\))/,
                 replace: (match, args) => "" +
                     `async ${match}` +
                     `if(await Vencord.Api.MessageEvents._handlePreEdit(${args}))` +
-                    "return Promise.resolve({shoudClear:true,shouldRefocus:true});"
+                    "return Promise.resolve({shouldClear:false,shouldRefocus:true});"
             }
         },
         {
@@ -39,12 +39,12 @@ export default definePlugin({
             replacement: {
                 // props.chatInputType...then((function(isMessageValid)... var parsedMessage = b.c.parse(channel,... var replyOptions = f.g.getSendMessageOptionsForReply(pendingReply);
                 // Lookbehind: validateMessage)({openWarningPopout:..., type: i.props.chatInputType, content: t, stickers: r, ...}).then((function(isMessageValid)
-                match: /(type:this\.props\.chatInputType.+?\.then\()(\i=>\{.+?let (\i)=\i\.\i\.parse\((\i),.+?let (\i)=\i\.\i\.getSendMessageOptionsForReply\(\i\);)(?<=\)\(({.+?})\)\.then.+?)/,
+                match: /(\{openWarningPopout:.{0,100}type:this.props.chatInputType.+?\.then\()(\i=>\{.+?let (\i)=\i\.\i\.parse\((\i),.+?let (\i)=\i\.\i\.getSendMessageOptions\(\{.+?\}\);)(?<=\)\(({.+?})\)\.then.+?)/,
                 // props.chatInputType...then((async function(isMessageValid)... var replyOptions = f.g.getSendMessageOptionsForReply(pendingReply); if(await Vencord.api...) return { shoudClear:true, shouldRefocus:true };
                 replace: (_, rest1, rest2, parsedMessage, channel, replyOptions, extra) => "" +
                     `${rest1}async ${rest2}` +
                     `if(await Vencord.Api.MessageEvents._handlePreSend(${channel}.id,${parsedMessage},${extra},${replyOptions}))` +
-                    "return{shoudClear:true,shouldRefocus:true};"
+                    "return{shouldClear:false,shouldRefocus:true};"
             }
         },
         {

src/plugins/_api/messagePopover.ts

@@ -23,11 +23,14 @@ export default definePlugin({
     name: "MessagePopoverAPI",
     description: "API to add buttons to message popovers.",
     authors: [Devs.KingFish, Devs.Ven, Devs.Nuckyz],
-    patches: [{
-        find: "Messages.MESSAGE_UTILITIES_A11Y_LABEL",
-        replacement: {
-            match: /\.jsx\)\((\i\.\i),\{label:\i\.\i\.Messages\.MESSAGE_ACTION_REPLY.{0,200}?"reply-self".{0,50}?\}\):null(?=,.+?message:(\i))/,
-            replace: "$&,Vencord.Api.MessagePopover._buildPopoverElements($1,$2)"
+    patches: [
+        {
+            find: "#{intl::MESSAGE_UTILITIES_A11Y_LABEL}",
+            replacement: {
+                match: /(?<=:null),(.{0,40}togglePopout:.+?}\)),(.+?)\]}\):null,(?<=\((\i\.\i),{label:.+?:null,(\i&&!\i)\?\(0,\i\.jsxs?\)\(\i\.Fragment.+?message:(\i).+?)/,
+                replace: (_, ReactButton, PotionButton, ButtonComponent, showReactButton, message) => "" +
+                    `]}):null,Vencord.Api.MessagePopover._buildPopoverElements(${ButtonComponent},${message}),${showReactButton}?${ReactButton}:null,${showReactButton}&&${PotionButton},`
+            }
         }
-    }],
+    ]
 });

src/plugins/_api/notices.ts

@@ -34,7 +34,7 @@ export default definePlugin({
                 },
                 {
                     match: /(?<=,NOTICE_DISMISS:function\(\i\){)return null!=(\i)/,
-                    replace: "if($1.id==\"VencordNotice\")return($1=null,Vencord.Api.Notices.nextNotice(),true);$&"
+                    replace: "if($1?.id==\"VencordNotice\")return($1=null,Vencord.Api.Notices.nextNotice(),true);$&"
                 }
             ]
         }

src/plugins/_api/serverList.ts

@@ -25,16 +25,16 @@ export default definePlugin({
     description: "Api required for plugins that modify the server list",
     patches: [
         {
-            find: "Messages.DISCODO_DISABLED",
+            find: "#{intl::DISCODO_DISABLED}",
             replacement: {
-                match: /(?<=Messages\.DISCODO_DISABLED.+?return)(\(.{0,75}?tutorialContainer.+?}\))(?=}function)/,
+                match: /(?<=#{intl::DISCODO_DISABLED}.+?return)(\(.{0,75}?tutorialContainer.+?}\))(?=}function)/,
                 replace: "[$1].concat(Vencord.Api.ServerList.renderAll(Vencord.Api.ServerList.ServerListRenderPosition.Above))"
             }
         },
         {
-            find: "Messages.SERVERS,children",
+            find: "#{intl::SERVERS}),children",
             replacement: {
-                match: /(?<=Messages\.SERVERS,children:)\i\.map\(\i\)/,
+                match: /(?<=#{intl::SERVERS}\),children:)\i\.map\(\i\)/,
                 replace: "Vencord.Api.ServerList.renderAll(Vencord.Api.ServerList.ServerListRenderPosition.In).concat($&)"
             }
         }

src/plugins/_core/noTrack.ts

@@ -61,13 +61,13 @@ export default definePlugin({
             ]
         },
         {
-            find: ".installedLogHooks)",
+            find: ".BetterDiscord||null!=",
             replacement: {
-                // if getDebugLogging() returns false, the hooks don't get installed.
-                match: "getDebugLogging(){",
-                replace: "getDebugLogging(){return false;"
+                // Make hasClientMods return false
+                match: /(?=let \i=window;)/,
+                replace: "return false;"
             }
-        },
+        }
     ],
 
     startAt: StartAt.Init,

src/plugins/_core/settings.tsx

@@ -25,8 +25,9 @@ import ThemesTab from "@components/VencordSettings/ThemesTab";
 import UpdaterTab from "@components/VencordSettings/UpdaterTab";
 import VencordTab from "@components/VencordSettings/VencordTab";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
-import { i18n, React } from "@webpack/common";
+import { React } from "@webpack/common";
 
 import gitHash from "~git-hash";
 
@@ -57,20 +58,20 @@ export default definePlugin({
             ]
         },
         {
-            find: "Messages.ACTIVITY_SETTINGS",
+            find: ".SEARCH_NO_RESULTS&&0===",
             replacement: [
                 {
                     match: /(?<=section:(.{0,50})\.DIVIDER\}\))([,;])(?=.{0,200}(\i)\.push.{0,100}label:(\i)\.header)/,
                     replace: (_, sectionTypes, commaOrSemi, elements, element) => `${commaOrSemi} $self.addSettings(${elements}, ${element}, ${sectionTypes}) ${commaOrSemi}`
                 },
                 {
-                    match: /({(?=.+?function (\i).{0,120}(\i)=\i\.useMemo.{0,60}return \i\.useMemo\(\(\)=>\i\(\3).+?function\(\){return )\2(?=})/,
+                    match: /({(?=.+?function (\i).{0,160}(\i)=\i\.useMemo.{0,140}return \i\.useMemo\(\(\)=>\i\(\3).+?function\(\){return )\2(?=})/,
                     replace: (_, rest, settingsHook) => `${rest}$self.wrapSettingsHook(${settingsHook})`
                 }
             ]
         },
         {
-            find: "Messages.USER_SETTINGS_ACTIONS_MENU_LABEL",
+            find: "#{intl::USER_SETTINGS_ACTIONS_MENU_LABEL}",
             replacement: {
                 match: /(?<=function\((\i),\i\)\{)(?=let \i=Object.values\(\i.\i\).*?(\i\.\i)\.open\()/,
                 replace: "$2.open($1);return;"
@@ -148,13 +149,18 @@ export default definePlugin({
 
         if (!header) return;
 
-        const names = {
-            top: i18n.Messages.USER_SETTINGS,
-            aboveNitro: i18n.Messages.BILLING_SETTINGS,
-            belowNitro: i18n.Messages.APP_SETTINGS,
-            aboveActivity: i18n.Messages.ACTIVITY_SETTINGS
-        };
-        return header === names[settingsLocation];
+        try {
+            const names = {
+                top: getIntlMessage("USER_SETTINGS"),
+                aboveNitro: getIntlMessage("BILLING_SETTINGS"),
+                belowNitro: getIntlMessage("APP_SETTINGS"),
+                aboveActivity: getIntlMessage("ACTIVITY_SETTINGS")
+            };
+
+            return header === names[settingsLocation];
+        } catch {
+            return firstChild === "PREMIUM";
+        }
     },
 
     patchedSettings: new WeakSet(),
@@ -197,7 +203,7 @@ export default definePlugin({
     },
 
     get electronVersion() {
-        return VencordNative.native.getVersions().electron || window.armcord?.electron || null;
+        return VencordNative.native.getVersions().electron || window.legcord?.electron || null;
     },
 
     get chromiumVersion() {

src/plugins/_core/supportHelper.tsx

@@ -34,6 +34,7 @@ import { makeCodeblock } from "@utils/text";
 import definePlugin from "@utils/types";
 import { checkForUpdates, isOutdated, update } from "@utils/updater";
 import { Alerts, Button, Card, ChannelStore, Forms, GuildMemberStore, Parser, RelationshipStore, showToast, Text, Toasts, UserStore } from "@webpack/common";
+import { JSX } from "react";
 
 import gitHash from "~git-hash";
 import plugins, { PluginMeta } from "~plugins";
@@ -77,7 +78,7 @@ async function generateDebugInfoMessage() {
     const client = (() => {
         if (IS_DISCORD_DESKTOP) return `Discord Desktop v${DiscordNative.app.getVersion()}`;
         if (IS_VESKTOP) return `Vesktop v${VesktopNative.app.getVersion()}`;
-        if ("armcord" in window) return `ArmCord v${window.armcord.version}`;
+        if ("legcord" in window) return `Legcord v${window.legcord.version}`;
 
         // @ts-expect-error
         const name = typeof unsafeWindow !== "undefined" ? "UserScript" : "Web";
@@ -147,10 +148,10 @@ export default definePlugin({
     settings,
 
     patches: [{
-        find: ".BEGINNING_DM.format",
+        find: "#{intl::BEGINNING_DM}",
         replacement: {
-            match: /BEGINNING_DM\.format\(\{.+?\}\),(?=.{0,100}userId:(\i\.getRecipientId\(\)))/,
-            replace: "$& $self.ContributorDmWarningCard({ userId: $1 }),"
+            match: /#{intl::BEGINNING_DM},{.+?}\),(?=.{0,300}(\i)\.isMultiUserDM)/,
+            replace: "$& $self.renderContributorDmWarningCard({ channel: $1 }),"
         }
     }],
 
@@ -235,7 +236,8 @@ export default definePlugin({
         }
     },
 
-    ContributorDmWarningCard: ErrorBoundary.wrap(({ userId }) => {
+    renderContributorDmWarningCard: ErrorBoundary.wrap(({ channel }) => {
+        const userId = channel.getRecipientId();
         if (!isPluginDev(userId)) return null;
         if (RelationshipStore.isFriend(userId) || isPluginDev(UserStore.getCurrentUser()?.id)) return null;
 

src/plugins/accountPanelServerProfile/index.tsx

@@ -16,7 +16,7 @@ import { User } from "discord-types/general";
 interface UserProfileProps {
     popoutProps: Record<string, any>;
     currentUser: User;
-    originalPopout: () => React.ReactNode;
+    originalRenderPopout: () => React.ReactNode;
 }
 
 const UserProfile = findComponentByCodeLazy("UserProfilePopoutWrapper: user cannot be undefined");
@@ -69,23 +69,23 @@ export default definePlugin({
 
     patches: [
         {
-            find: ".Messages.ACCOUNT_SPEAKING_WHILE_MUTED",
+            find: "#{intl::ACCOUNT_SPEAKING_WHILE_MUTED}",
             group: true,
             replacement: [
                 {
-                    match: /(?<=\.SIZE_32\)}\);)/,
+                    match: /(?<=\.AVATAR_SIZE\);)/,
                     replace: "$self.useAccountPanelRef();"
                 },
                 {
                     match: /(\.AVATAR,children:.+?renderPopout:(\i)=>){(.+?)}(?=,position)(?<=currentUser:(\i).+?)/,
-                    replace: (_, rest, popoutProps, originalPopout, currentUser) => `${rest}$self.UserProfile({popoutProps:${popoutProps},currentUser:${currentUser},originalPopout:()=>{${originalPopout}}})`
+                    replace: (_, rest, popoutProps, originalPopout, currentUser) => `${rest}$self.UserProfile({popoutProps:${popoutProps},currentUser:${currentUser},originalRenderPopout:()=>{${originalPopout}}})`
                 },
                 {
                     match: /\.AVATAR,children:.+?(?=renderPopout:)/,
                     replace: "$&onRequestClose:$self.onPopoutClose,"
                 },
                 {
-                    match: /(?<=.avatarWrapper,)/,
+                    match: /(?<=\.avatarWrapper,)/,
                     replace: "ref:$self.accountPanelRef,onContextMenu:$self.openAccountPanelContextMenu,"
                 }
             ]
@@ -112,17 +112,17 @@ export default definePlugin({
         openAlternatePopout = false;
     },
 
-    UserProfile: ErrorBoundary.wrap(({ popoutProps, currentUser, originalPopout }: UserProfileProps) => {
+    UserProfile: ErrorBoundary.wrap(({ popoutProps, currentUser, originalRenderPopout }: UserProfileProps) => {
         if (
             (settings.store.prioritizeServerProfile && openAlternatePopout) ||
             (!settings.store.prioritizeServerProfile && !openAlternatePopout)
         ) {
-            return originalPopout();
+            return originalRenderPopout();
         }
 
         const currentChannel = getCurrentChannel();
         if (currentChannel?.getGuildId() == null) {
-            return originalPopout();
+            return originalRenderPopout();
         }
 
         return (

src/plugins/alwaysAnimate/index.ts

@@ -41,7 +41,7 @@ export default definePlugin({
         },
         {
             // Status emojis
-            find: ".Messages.GUILD_OWNER,",
+            find: "#{intl::GUILD_OWNER}),children:",
             replacement: {
                 match: /(?<=\.activityEmoji,.+?animate:)\i/,
                 replace: "!0"

src/plugins/alwaysExpandRoles/index.ts

@@ -28,10 +28,18 @@ export default definePlugin({
     patches: [
         {
             find: 'action:"EXPAND_ROLES"',
-            replacement: {
-                match: /(roles:\i(?=.+?(\i)\(!0\)[,;]\i\({action:"EXPAND_ROLES"}\)).+?\[\i,\2\]=\i\.useState\()!1\)/,
-                replace: (_, rest, setExpandedRoles) => `${rest}!0)`
-            }
+            replacement: [
+                {
+                    match: /(roles:\i(?=.+?(\i)\(!0\)[,;]\i\({action:"EXPAND_ROLES"}\)).+?\[\i,\2\]=\i\.useState\()!1\)/,
+                    replace: (_, rest, setExpandedRoles) => `${rest}!0)`
+                },
+                {
+                    // Fix not calculating non-expanded roles because the above patch makes the default "expanded",
+                    // which makes the collapse button never show up and calculation never occur
+                    match: /(?<=useLayoutEffect\(\(\)=>{if\()\i/,
+                    replace: isExpanded => "false"
+                }
+            ]
         }
     ]
 });

src/plugins/alwaysTrust/index.ts

@@ -51,7 +51,7 @@ export default definePlugin({
         {
             find: "bitbucket.org",
             replacement: {
-                match: /function \i\(\i\){(?=.{0,60}\.parse\(\i\))/,
+                match: /function \i\(\i\){(?=.{0,30}pathname:\i)/,
                 replace: "$&return null;"
             },
             predicate: () => settings.store.file

src/plugins/anonymiseFileNames/index.tsx

@@ -86,9 +86,9 @@ export default definePlugin({
             }
         },
         {
-            find: ".Messages.ATTACHMENT_UTILITIES_SPOILER",
+            find: "#{intl::ATTACHMENT_UTILITIES_SPOILER}",
             replacement: {
-                match: /(?<=children:\[)(?=.{10,80}tooltip:.{0,100}\i\.\i\.Messages\.ATTACHMENT_UTILITIES_SPOILER)/,
+                match: /(?<=children:\[)(?=.{10,80}tooltip:.{0,100}#{intl::ATTACHMENT_UTILITIES_SPOILER})/,
                 replace: "arguments[0].canEdit!==false?$self.renderIcon(arguments[0]):null,"
             },
         },

src/plugins/appleMusic.desktop/native.ts

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { canonicalizeMatch } from "@utils/patches";
 import { execFile } from "child_process";
 import { promisify } from "util";
 
@@ -26,7 +27,7 @@ interface RemoteData {
 let cachedRemoteData: { id: string, data: RemoteData; } | { id: string, failures: number; } | null = null;
 
 const APPLE_MUSIC_BUNDLE_REGEX = /<script type="module" crossorigin src="([a-zA-Z0-9.\-/]+)"><\/script>/;
-const APPLE_MUSIC_TOKEN_REGEX = /\w+="([A-Za-z0-9-_]*\.[A-Za-z0-9-_]*\.[A-Za-z0-9-_]*)",\w+="x-apple-jingle-correlation-key"/;
+const APPLE_MUSIC_TOKEN_REGEX = canonicalizeMatch(/Promise.allSettled\(\i\)\}const \i="([A-Za-z0-9-_]*\.[A-Za-z0-9-_]*\.[A-Za-z0-9-_]*)"/);
 
 let cachedToken: string | undefined = undefined;
 

src/plugins/arRPC.web/index.tsx

@@ -73,8 +73,8 @@ export default definePlugin({
     },
 
     async start() {
-        // ArmCord comes with its own arRPC implementation, so this plugin just confuses users
-        if ("armcord" in window) return;
+        // Legcord comes with its own arRPC implementation, so this plugin just confuses users
+        if ("legcord" in window) return;
 
         if (ws) ws.close();
         ws = new WebSocket("ws://127.0.0.1:1337"); // try to open WebSocket

src/plugins/banger/index.ts

@@ -36,7 +36,7 @@ export default definePlugin({
     settings,
     patches: [
         {
-            find: "BAN_CONFIRM_TITLE.",
+            find: "#{intl::BAN_CONFIRM_TITLE}",
             replacement: {
                 match: /src:\i\("?\d+"?\)/g,
                 replace: "src:$self.source"

src/plugins/betterFolders/index.tsx

@@ -18,9 +18,10 @@
 
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy, findLazy, findStoreLazy } from "@webpack";
-import { FluxDispatcher, i18n, useMemo } from "@webpack/common";
+import { FluxDispatcher, useMemo } from "@webpack/common";
 
 import FolderSideBar from "./FolderSideBar";
 
@@ -122,7 +123,7 @@ export default definePlugin({
                 },
                 // If we are rendering the Better Folders sidebar, we filter out everything but the servers and folders from the GuildsBar Guild List children
                 {
-                    match: /lastTargetNode:\i\[\i\.length-1\].+?Fragment.+?\]}\)\]/,
+                    match: /lastTargetNode:\i\[\i\.length-1\].+?}\)(?::null)?\](?=}\))/,
                     replace: "$&.filter($self.makeGuildsBarGuildListFilter(!!arguments[0]?.isBetterFolders))"
                 },
                 // If we are rendering the Better Folders sidebar, we filter out everything but the scroller for the guild list from the GuildsBar Tree children
@@ -158,7 +159,7 @@ export default definePlugin({
             ]
         },
         {
-            find: ".FOLDER_ITEM_GUILD_ICON_MARGIN);",
+            find: ".expandedFolderBackground,",
             predicate: () => settings.store.sidebar,
             replacement: [
                 // We use arguments[0] to access the isBetterFolders variable in this nested folder component (the parent exports all the props so we don't have to patch it)
@@ -172,7 +173,7 @@ export default definePlugin({
                 // Disable expanding and collapsing folders transition in the normal GuildsBar sidebar
                 {
                     predicate: () => !settings.store.keepIcons,
-                    match: /(?<=\.Messages\.SERVER_FOLDER_PLACEHOLDER.+?useTransition\)\()/,
+                    match: /(?<=#{intl::SERVER_FOLDER_PLACEHOLDER}.+?useTransition\)\()/,
                     replace: "$self.shouldShowTransition(arguments[0])&&"
                 },
                 // If we are rendering the normal GuildsBar sidebar, we avoid rendering guilds from folders that are expanded
@@ -184,7 +185,7 @@ export default definePlugin({
                 {
                     // Decide if we should render the expanded folder background if we are rendering the Better Folders sidebar
                     predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always,
-                    match: /(?<=\.wrapper,children:\[)/,
+                    match: /(?<=\.isExpanded\),children:\[)/,
                     replace: "$self.shouldShowFolderIconAndBackground(!!arguments[0]?.isBetterFolders,arguments[0]?.betterFoldersExpandedIds)&&"
                 },
                 {
@@ -205,7 +206,7 @@ export default definePlugin({
             }
         },
         {
-            find: ".Messages.DISCODO_DISABLED",
+            find: "#{intl::DISCODO_DISABLED}",
             predicate: () => settings.store.closeAllHomeButton,
             replacement: {
                 // Close all folders when clicking the home button
@@ -275,19 +276,29 @@ export default definePlugin({
 
     makeGuildsBarGuildListFilter(isBetterFolders: boolean) {
         return child => {
-            if (isBetterFolders) {
-                return child?.props?.["aria-label"] === i18n.Messages.SERVERS;
+            if (!isBetterFolders) return true;
+
+            try {
+                return child?.props?.["aria-label"] === getIntlMessage("SERVERS");
+            } catch (e) {
+                console.error(e);
             }
+
             return true;
         };
     },
 
     makeGuildsBarTreeFilter(isBetterFolders: boolean) {
         return child => {
-            if (isBetterFolders) {
-                return child?.props?.onScroll != null;
+            if (!isBetterFolders) return true;
+
+            if (child?.props?.className?.includes("itemsContainer") && child.props.children != null) {
+                // Filter out everything but the scroller for the guild list
+                child.props.children = child.props.children.filter(child => child?.props?.onScroll != null);
+                return true;
             }
-            return true;
+
+            return false;
         };
     },
 

src/plugins/betterGifAltText/index.ts

@@ -34,9 +34,9 @@ export default definePlugin({
             },
         },
         {
-            find: ".Messages.GIF,",
+            find: "#{intl::GIF}",
             replacement: {
-                match: /alt:(\i)=(\i\.\i\.Messages\.GIF)(?=,[^}]*\}=(\i))/,
+                match: /alt:(\i)=(\i\.\i\.string\(\i\.\i#{intl::GIF}\))(?=,[^}]*\}=(\i))/,
                 replace:
                     // rename prop so we can always use default value
                     "alt_$$:$1=$self.altify($3)||$2",

src/plugins/betterNotes/index.tsx

@@ -63,9 +63,9 @@ export default definePlugin({
             }
         },
         {
-            find: "Messages.NOTE_PLACEHOLDER",
+            find: "#{intl::NOTE_PLACEHOLDER}",
             replacement: {
-                match: /\.NOTE_PLACEHOLDER,/,
+                match: /#{intl::NOTE_PLACEHOLDER}\),/,
                 replace: "$&spellCheck:!$self.noSpellCheck,"
             }
         }

src/plugins/betterRoleContext/index.tsx

@@ -99,7 +99,11 @@ export default definePlugin({
                         id="vc-view-role-icon"
                         label="View Role Icon"
                         action={() => {
-                            openImageModal(`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`);
+                            openImageModal({
+                                url: `${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${role.id}/${role.icon}.${settings.store.roleIconFileFormat}`,
+                                height: 128,
+                                width: 128
+                            });
                         }}
                         icon={ImageIcon}
                     />

src/plugins/betterRoleDot/index.ts

@@ -47,7 +47,7 @@ export default definePlugin({
         },
 
         {
-            find: ".ADD_ROLE_A11Y_LABEL",
+            find: "#{intl::ADD_ROLE_A11Y_LABEL}",
             all: true,
             predicate: () => Settings.plugins.BetterRoleDot.copyRoleColorInProfilePopout && !Settings.plugins.BetterRoleDot.bothStyles,
             noWarn: true,

src/plugins/betterSessions/components/icons.tsx

@@ -99,7 +99,7 @@ export const UnknownIcon = (props: React.PropsWithChildren<SVGProps<SVGSVGElemen
         fill="currentColor"
         viewBox="0 0 16 16"
     >
-        <path fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z" />
+        <path fillRule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215 0 1.344-.665 2.288-1.79 2.973-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712 1.03-.632 1.397-1.135 1.397-2.028 0-.979-.758-1.698-1.926-1.698-1.009 0-1.71.529-1.938 1.402-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09 0-.618-.473-1.092-1.095-1.092-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z" />
     </svg>
 );
 

src/plugins/betterSessions/index.tsx

@@ -60,7 +60,7 @@ export default definePlugin({
 
     patches: [
         {
-            find: "Messages.AUTH_SESSIONS_SESSION_LOG_OUT",
+            find: "#{intl::AUTH_SESSIONS_SESSION_LOG_OUT}",
             replacement: [
                 // Replace children with a single label with state
                 {

src/plugins/betterSettings/PluginsSubmenu.tsx

@@ -5,8 +5,9 @@
  */
 
 import { openPluginModal } from "@components/PluginSettings/PluginModal";
+import { getIntlMessage } from "@utils/discord";
 import { isObjectEmpty } from "@utils/misc";
-import { Alerts, i18n, Menu, useMemo, useState } from "@webpack/common";
+import { Alerts, Menu, useMemo, useState } from "@webpack/common";
 
 import Plugins from "~plugins";
 
@@ -48,7 +49,7 @@ export default function PluginsSubmenu() {
                         query={query}
                         onChange={setQuery}
                         ref={ref}
-                        placeholder={i18n.Messages.SEARCH}
+                        placeholder={getIntlMessage("SEARCH")}
                     />
                 )}
             />

src/plugins/betterSettings/index.tsx

@@ -7,10 +7,11 @@
 import { definePluginSettings } from "@api/Settings";
 import { classNameFactory } from "@api/Styles";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType } from "@utils/types";
 import { waitFor } from "@webpack";
-import { ComponentDispatch, FocusLock, i18n, Menu, useEffect, useRef } from "@webpack/common";
+import { ComponentDispatch, FocusLock, Menu, useEffect, useRef } from "@webpack/common";
 import type { HTMLAttributes, ReactElement } from "react";
 
 import PluginsSubmenu from "./PluginsSubmenu";
@@ -111,15 +112,15 @@ export default definePlugin({
             predicate: () => settings.store.disableFade
         },
         { // Load menu TOC eagerly
-            find: "Messages.USER_SETTINGS_WITH_BUILD_OVERRIDE.format",
+            find: "#{intl::USER_SETTINGS_WITH_BUILD_OVERRIDE}",
             replacement: {
-                match: /(\i)\(this,"handleOpenSettingsContextMenu",.{0,100}?null!=\i&&.{0,100}?(await Promise\.all[^};]*?\)\)).*?,(?=\1\(this)/,
+                match: /(\i)\(this,"handleOpenSettingsContextMenu",.{0,100}?null!=\i&&.{0,100}?(await [^};]*?\)\)).*?,(?=\1\(this)/,
                 replace: "$&(async ()=>$2)(),"
             },
             predicate: () => settings.store.eagerLoad
         },
         { // Settings cog context menu
-            find: "Messages.USER_SETTINGS_ACTIONS_MENU_LABEL",
+            find: "#{intl::USER_SETTINGS_ACTIONS_MENU_LABEL}",
             replacement: [
                 {
                     match: /(EXPERIMENTS:.+?)(\(0,\i.\i\)\(\))(?=\.filter\(\i=>\{let\{section:\i\}=)/,
@@ -159,7 +160,7 @@ export default definePlugin({
             if (item.section === "HEADER") {
                 items.push({ label: item.label, items: [] });
             } else if (item.section === "DIVIDER") {
-                items.push({ label: i18n.Messages.OTHER_OPTIONS, items: [] });
+                items.push({ label: getIntlMessage("OTHER_OPTIONS"), items: [] });
             } else {
                 items.at(-1)!.items.push(item);
             }
@@ -172,7 +173,7 @@ export default definePlugin({
                 }
                 return this;
             },
-            map(render: (item: SettingsEntry) => ReactElement) {
+            map(render: (item: SettingsEntry) => ReactElement<any>) {
                 return items
                     .filter(a => a.items.length > 0)
                     .map(({ label, items }) => {
@@ -180,11 +181,14 @@ export default definePlugin({
                         if (label) {
                             return (
                                 <Menu.MenuItem
+                                    key={label}
                                     id={label.replace(/\W/, "_")}
                                     label={label}
-                                    children={children}
                                     action={children[0].props.action}
-                                />);
+                                >
+                                    {children}
+                                </Menu.MenuItem>
+                            );
                         } else {
                             return children;
                         }

src/plugins/betterUploadButton/index.ts

@@ -27,7 +27,7 @@ export default definePlugin({
         {
             find: '"ChannelAttachButton"',
             replacement: {
-                match: /\.attachButtonInner,"aria-label":.{0,50},onDoubleClick:(.+?:void 0),\.\.\.(\i),/,
+                match: /\.attachButtonInner,"aria-label":.{0,50},onDoubleClick:(.+?:void 0),.{0,30}?\.\.\.(\i),/,
                 replace: "$&onClick:$1,onContextMenu:$2.onClick,",
             },
         },

src/plugins/biggerStreamPreview/index.tsx

@@ -57,7 +57,11 @@ export const handleViewPreview = async ({ guildId, channelId, ownerId }: Applica
     const previewUrl = await ApplicationStreamPreviewStore.getPreviewURL(guildId, channelId, ownerId);
     if (!previewUrl) return;
 
-    openImageModal(previewUrl);
+    openImageModal({
+        url: previewUrl,
+        height: 720,
+        width: 1280
+    });
 };
 
 export const addViewStreamContext: NavContextMenuPatchCallback = (children, { userId }: { userId: string | bigint; }) => {

src/plugins/callTimer/index.tsx

@@ -75,10 +75,11 @@ export default definePlugin({
     patches: [{
         find: "renderConnectionStatus(){",
         replacement: {
-            match: /(?<=renderConnectionStatus\(\)\{.+\.channel,children:)\i/,
+            match: /(?<=renderConnectionStatus\(\){.+\.channel,children:).+?}\):\i(?=}\))/,
             replace: "[$&, $self.renderTimer(this.props.channel.id)]"
         }
     }],
+
     renderTimer(channelId: string) {
         return <ErrorBoundary noop>
             <this.Timer channelId={channelId} />

src/plugins/clientTheme/index.tsx

@@ -14,7 +14,7 @@ import definePlugin, { OptionType, StartAt } from "@utils/types";
 import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
 import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
 
-const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
+const ColorPicker = findComponentByCodeLazy("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", ".BACKGROUND_PRIMARY)");
 
 const colorPresets = [
     "#1E1514", "#172019", "#13171B", "#1C1C28", "#402D2D",
@@ -110,7 +110,7 @@ const settings = definePluginSettings({
 
 export default definePlugin({
     name: "ClientTheme",
-    authors: [Devs.F53, Devs.Nuckyz],
+    authors: [Devs.Nuckyz],
     description: "Recreation of the old client theme experiment. Add a color to your Discord client theme",
     settings,
 

src/plugins/consoleJanitor/index.ts

@@ -66,6 +66,20 @@ export default definePlugin({
     },
 
     patches: [
+        {
+            find: "https://github.com/highlightjs/highlight.js/issues/2277",
+            replacement: {
+                match: /(?<=&&\()console.log\(`Deprecated.+?`\),/,
+                replace: ""
+            }
+        },
+        {
+            find: 'The "interpolate" function is deprecated in v10 (use "to" instead)',
+            replacement: {
+                match: /,console.warn\(\i\+'The "interpolate" function is deprecated in v10 \(use "to" instead\)'\)/,
+                replace: ""
+            }
+        },
         {
             find: 'console.warn("Window state not initialized"',
             replacement: {
@@ -119,7 +133,7 @@ export default definePlugin({
         {
             find: "Slow dispatch on",
             replacement: {
-                match: /\i\.totalTime>100&&\i\.verbose\("Slow dispatch on ".+?\)\);/,
+                match: /\i\.totalTime>\i&&\i\.verbose\("Slow dispatch on ".+?\)\);/,
                 replace: ""
             }
         },
@@ -140,5 +154,5 @@ export default definePlugin({
                 replace: "$self.NoopLogger()"
             }
         }
-    ],
+    ]
 });

src/plugins/consoleShortcuts/index.ts

@@ -18,7 +18,9 @@
 
 import { Devs } from "@utils/constants";
 import { getCurrentChannel, getCurrentGuild } from "@utils/discord";
+import { runtimeHashMessageKey } from "@utils/intlHash";
 import { SYM_LAZY_CACHED, SYM_LAZY_GET } from "@utils/lazy";
+import { ModalAPI } from "@utils/modal";
 import { relaunch } from "@utils/native";
 import { canonicalizeMatch, canonicalizeReplace, canonicalizeReplacement } from "@utils/patches";
 import definePlugin, { PluginNative, StartAt } from "@utils/types";
@@ -104,6 +106,7 @@ function makeShortcuts() {
         canonicalizeMatch,
         canonicalizeReplace,
         canonicalizeReplacement,
+        runtimeHashMessageKey,
         fakeRender: (component: ComponentType, props: any) => {
             const prevWin = fakeRenderWin?.deref();
             const win = prevWin?.closed === false
@@ -130,7 +133,10 @@ function makeShortcuts() {
                 });
             }
 
-            Common.ReactDOM.render(Common.React.createElement(component, props), doc.body.appendChild(document.createElement("div")));
+            const root = Common.ReactDOM.createRoot(doc.body.appendChild(document.createElement("div")));
+            root.render(Common.React.createElement(component, props));
+
+            doc.addEventListener("close", () => root.unmount(), { once: true });
         },
 
         preEnable: (plugin: string) => (Vencord.Settings.plugins[plugin] ??= { enabled: true }).enabled = true,
@@ -142,6 +148,8 @@ function makeShortcuts() {
         me: { getter: () => Common.UserStore.getCurrentUser(), preload: false },
         meId: { getter: () => Common.UserStore.getCurrentUser().id, preload: false },
         messages: { getter: () => Common.MessageStore.getMessages(Common.SelectedChannelStore.getChannelId()), preload: false },
+        openModal: { getter: () => ModalAPI.openModal },
+        openModalLazy: { getter: () => ModalAPI.openModalLazy },
 
         Stores: {
             getter: () => Object.fromEntries(
@@ -171,6 +179,16 @@ export default definePlugin({
     description: "Adds shorter Aliases for many things on the window. Run `shortcutList` for a list.",
     authors: [Devs.Ven],
 
+    patches: [
+        {
+            find: 'this,"_changeCallbacks",',
+            replacement: {
+                match: /\i\(this,"_changeCallbacks",/,
+                replace: "Reflect.defineProperty(this,Symbol.toStringTag,{value:this.getName(),configurable:!0,writable:!0,enumerable:!1}),$&"
+            }
+        }
+    ],
+
     startAt: StartAt.Init,
     start() {
         const shortcuts = makeShortcuts();

src/plugins/copyFileContents/index.tsx

@@ -25,7 +25,7 @@ export default definePlugin({
     authors: [Devs.Obsidian, Devs.Nuckyz],
     patches: [
         {
-            find: ".Messages.PREVIEW_BYTES_LEFT.format(",
+            find: "#{intl::PREVIEW_BYTES_LEFT}",
             replacement: {
                 match: /\.footerGap.+?url:\i,fileName:\i,fileSize:\i}\),(?<=fileContents:(\i),bytesLeft:(\i).+?)/g,
                 replace: "$&$self.addCopyButton({fileContents:$1,bytesLeft:$2}),"

src/plugins/crashHandler/index.ts

@@ -67,7 +67,7 @@ export default definePlugin({
 
     patches: [
         {
-            find: ".Messages.ERRORS_UNEXPECTED_CRASH",
+            find: "#{intl::ERRORS_UNEXPECTED_CRASH}",
             replacement: {
                 match: /this\.setState\((.+?)\)/,
                 replace: "$self.handleCrash(this,$1);"

src/plugins/customRPC/index.tsx

@@ -19,6 +19,7 @@
 import { definePluginSettings, Settings } from "@api/Settings";
 import { getUserSettingLazy } from "@api/UserSettings";
 import { ErrorCard } from "@components/ErrorCard";
+import { Flex } from "@components/Flex";
 import { Link } from "@components/Link";
 import { Devs } from "@utils/constants";
 import { isTruthy } from "@utils/guards";
@@ -27,15 +28,14 @@ import { classes } from "@utils/misc";
 import { useAwaiter } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findComponentByCodeLazy } from "@webpack";
-import { ApplicationAssetUtils, Button, FluxDispatcher, Forms, GuildStore, React, SelectedChannelStore, SelectedGuildStore, UserStore } from "@webpack/common";
+import { ApplicationAssetUtils, Button, FluxDispatcher, Forms, React, UserStore } from "@webpack/common";
 
 const useProfileThemeStyle = findByCodeLazy("profileThemeStyle:", "--profile-gradient-primary-color");
-const ActivityComponent = findComponentByCodeLazy("onOpenGameProfile");
+const ActivityView = findComponentByCodeLazy(".party?(0", ".card");
 
 const ShowCurrentGame = getUserSettingLazy<boolean>("status", "showCurrentGame")!;
 
 async function getApplicationAsset(key: string): Promise<string> {
-    if (/https?:\/\/(cdn|media)\.discordapp\.(com|net)\/attachments\//.test(key)) return "mp:" + key.replace(/https?:\/\/(cdn|media)\.discordapp\.(com|net)\//, "");
     return (await ApplicationAssetUtils.fetchAssetIds(settings.store.appID!, [key]))[0];
 }
 
@@ -169,7 +169,7 @@ const settings = definePluginSettings({
                 value: TimestampMode.NOW
             },
             {
-                label: "Same as your current time",
+                label: "Same as your current time (not reset after 24h)",
                 value: TimestampMode.TIME
             },
             {
@@ -269,6 +269,7 @@ function isStreamLinkDisabled() {
 
 function isStreamLinkValid(value: string) {
     if (!isStreamLinkDisabled() && !/https?:\/\/(www\.)?(twitch\.tv|youtube\.com)\/\w+/.test(value)) return "Streaming link must be a valid URL.";
+    if (value && value.length > 512) return "Streaming link must be not longer than 512 characters.";
     return true;
 }
 
@@ -277,8 +278,9 @@ function isTimestampDisabled() {
 }
 
 function isImageKeyValid(value: string) {
-    if (/https?:\/\/(?!i\.)?imgur\.com\//.test(value)) return "Imgur link must be a direct link to the image. (e.g. https://i.imgur.com/...)";
-    if (/https?:\/\/(?!media\.)?tenor\.com\//.test(value)) return "Tenor link must be a direct link to the image. (e.g. https://media.tenor.com/...)";
+    if (/https?:\/\/(cdn|media)\.discordapp\.(com|net)\//.test(value)) return "Don't use a Discord link. Use an Imgur image link instead.";
+    if (/https?:\/\/(?!i\.)?imgur\.com\//.test(value)) return "Imgur link must be a direct link to the image (e.g. https://i.imgur.com/...). Right click the image and click 'Copy image address'";
+    if (/https?:\/\/(?!media\.)?tenor\.com\//.test(value)) return "Tenor link must be a direct link to the image (e.g. https://media.tenor.com/...). Right click the GIF and click 'Copy image address'";
     return true;
 }
 
@@ -390,13 +392,24 @@ async function setRpc(disable?: boolean) {
 
 export default definePlugin({
     name: "CustomRPC",
-    description: "Allows you to set a custom rich presence.",
+    description: "Add a fully customisable Rich Presence (Game status) to your Discord profile",
     authors: [Devs.captain, Devs.AutumnVN, Devs.nin0dev],
     dependencies: ["UserSettingsAPI"],
     start: setRpc,
     stop: () => setRpc(true),
     settings,
 
+    patches: [
+        {
+            find: ".party?(0",
+            all: true,
+            replacement: {
+                match: /\i\.id===\i\.id\?null:/,
+                replace: ""
+            }
+        }
+    ],
+
     settingsAboutComponent: () => {
         const activity = useAwaiter(createActivity);
         const gameActivityEnabled = ShowCurrentGame.useSetting();
@@ -410,7 +423,7 @@ export default definePlugin({
                         style={{ padding: "1em" }}
                     >
                         <Forms.FormTitle>Notice</Forms.FormTitle>
-                        <Forms.FormText>Game activity isn't enabled, people won't be able to see your custom rich presence!</Forms.FormText>
+                        <Forms.FormText>Activity Sharing isn't enabled, people won't be able to see your custom rich presence!</Forms.FormText>
 
                         <Button
                             color={Button.Colors.TRANSPARENT}
@@ -422,24 +435,33 @@ export default definePlugin({
                     </ErrorCard>
                 )}
 
-                <Forms.FormText>
-                    Go to <Link href="https://discord.com/developers/applications">Discord Developer Portal</Link> to create an application and
-                    get the application ID.
-                </Forms.FormText>
-                <Forms.FormText>
-                    Upload images in the Rich Presence tab to get the image keys.
-                </Forms.FormText>
-                <Forms.FormText>
-                    If you want to use image link, download your image and reupload the image to <Link href="https://imgur.com">Imgur</Link> and get the image link by right-clicking the image and select "Copy image address".
-                </Forms.FormText>
+                <Flex flexDirection="column" style={{ gap: ".5em" }} className={Margins.top16}>
+                    <Forms.FormText>
+                        Go to the <Link href="https://discord.com/developers/applications">Discord Developer Portal</Link> to create an application and
+                        get the application ID.
+                    </Forms.FormText>
+                    <Forms.FormText>
+                        Upload images in the Rich Presence tab to get the image keys.
+                    </Forms.FormText>
+                    <Forms.FormText>
+                        If you want to use an image link, download your image and reupload the image to <Link href="https://imgur.com">Imgur</Link> and get the image link by right-clicking the image and selecting "Copy image address".
+                    </Forms.FormText>
+                    <Forms.FormText>
+                        You can't see your own buttons on your profile, but everyone else can see it fine.
+                    </Forms.FormText>
+                    <Forms.FormText>
+                        Some weird unicode text ("fonts" 𝖑𝖎𝖐𝖊 𝖙𝖍𝖎𝖘) may cause the rich presence to not show up, try using normal letters instead.
+                    </Forms.FormText>
+                </Flex>
 
                 <Forms.FormDivider className={Margins.top8} />
 
-                <div style={{ width: "284px", ...profileThemeStyle, padding: 8, marginTop: 8, borderRadius: 8, background: "var(--bg-mod-faint)" }}>
-                    {activity[0] && <ActivityComponent activity={activity[0]} channelId={SelectedChannelStore.getChannelId()}
-                        guild={GuildStore.getGuild(SelectedGuildStore.getLastSelectedGuildId())}
-                        application={{ id: settings.store.appID }}
-                        user={UserStore.getCurrentUser()} />}
+                <div style={{ width: "284px", ...profileThemeStyle, marginTop: 8, borderRadius: 8, background: "var(--bg-mod-faint)" }}>
+                    {activity[0] && <ActivityView
+                        activity={activity[0]}
+                        user={UserStore.getCurrentUser()}
+                        currentUser={UserStore.getCurrentUser()}
+                    />}
                 </div>
             </>
         );

src/plugins/decor/index.tsx

@@ -41,7 +41,7 @@ export default definePlugin({
         {
             find: "DefaultCustomizationSections",
             replacement: {
-                match: /(?<=USER_SETTINGS_AVATAR_DECORATION},"decoration"\),)/,
+                match: /(?<=#{intl::USER_SETTINGS_AVATAR_DECORATION}\)},"decoration"\),)/,
                 replace: "$self.DecorSection(),"
             }
         },

src/plugins/decor/lib/stores/AuthorizationStore.tsx

@@ -93,7 +93,7 @@ export const useAuthorizationStore = proxyLazy(() => zustandCreate(
         } as AuthorizationState),
         {
             name: "decor-auth",
-            getStorage: () => indexedDBStorage,
+            storage: indexedDBStorage,
             partialize: state => ({ tokens: state.tokens }),
             onRehydrateStorage: () => state => state?.init()
         }

src/plugins/decor/lib/stores/UsersDecorationsStore.ts

@@ -95,24 +95,39 @@ export const useUsersDecorationsStore = proxyLazy(() => zustandCreate((set: any,
 } as UsersDecorationsState)));
 
 export function useUserDecorAvatarDecoration(user?: User): AvatarDecoration | null | undefined {
-    const [decorAvatarDecoration, setDecorAvatarDecoration] = useState<string | null>(user ? useUsersDecorationsStore.getState().getAsset(user.id) ?? null : null);
+    try {
+        const [decorAvatarDecoration, setDecorAvatarDecoration] = useState<string | null>(user ? useUsersDecorationsStore.getState().getAsset(user.id) ?? null : null);
 
-    useEffect(() => {
-        const destructor = useUsersDecorationsStore.subscribe(
-            state => {
-                if (!user) return;
-                const newDecorAvatarDecoration = state.getAsset(user.id);
-                if (!newDecorAvatarDecoration) return;
-                if (decorAvatarDecoration !== newDecorAvatarDecoration) setDecorAvatarDecoration(newDecorAvatarDecoration);
-            }
-        );
+        useEffect(() => {
+            const destructor = (() => {
+                try {
+                    return useUsersDecorationsStore.subscribe(
+                        state => {
+                            if (!user) return;
+                            const newDecorAvatarDecoration = state.getAsset(user.id);
+                            if (!newDecorAvatarDecoration) return;
+                            if (decorAvatarDecoration !== newDecorAvatarDecoration) setDecorAvatarDecoration(newDecorAvatarDecoration);
+                        }
+                    );
+                } catch {
+                    return () => { };
+                }
+            })();
 
-        if (user) {
-            const { fetch: fetchUserDecorAvatarDecoration } = useUsersDecorationsStore.getState();
-            fetchUserDecorAvatarDecoration(user.id);
-        }
-        return destructor;
-    }, []);
+            try {
+                if (user) {
+                    const { fetch: fetchUserDecorAvatarDecoration } = useUsersDecorationsStore.getState();
+                    fetchUserDecorAvatarDecoration(user.id);
+                }
+            } catch { }
 
-    return decorAvatarDecoration ? { asset: decorAvatarDecoration, skuId: SKU_ID } : null;
+            return destructor;
+        }, []);
+
+        return decorAvatarDecoration ? { asset: decorAvatarDecoration, skuId: SKU_ID } : null;
+    } catch (e) {
+        console.error(e);
+    }
+
+    return null;
 }

src/plugins/decor/ui/components/DecorationGridCreate.tsx

@@ -5,7 +5,8 @@
  */
 
 import { PlusIcon } from "@components/Icons";
-import { i18n, Text } from "@webpack/common";
+import { getIntlMessage } from "@utils/discord";
+import { Text } from "@webpack/common";
 import { HTMLProps } from "react";
 
 import { DecorationGridItem } from ".";
@@ -24,7 +25,7 @@ export default function DecorationGridCreate(props: DecorationGridCreateProps) {
             variant="text-xs/normal"
             color="header-primary"
         >
-            {i18n.Messages.CREATE}
+            {getIntlMessage("CREATE")}
         </Text>
     </DecorationGridItem >;
 }

src/plugins/decor/ui/components/DecorationGridNone.tsx

@@ -5,7 +5,8 @@
  */
 
 import { NoEntrySignIcon } from "@components/Icons";
-import { i18n, Text } from "@webpack/common";
+import { getIntlMessage } from "@utils/discord";
+import { Text } from "@webpack/common";
 import { HTMLProps } from "react";
 
 import { DecorationGridItem } from ".";
@@ -24,7 +25,7 @@ export default function DecorationGridNone(props: DecorationGridNoneProps) {
             variant="text-xs/normal"
             color="header-primary"
         >
-            {i18n.Messages.NONE}
+            {getIntlMessage("NONE")}
         </Text>
     </DecorationGridItem >;
 }

src/plugins/decor/ui/components/Grid.tsx

@@ -5,6 +5,7 @@
  */
 
 import { React } from "@webpack/common";
+import { JSX } from "react";
 
 import { cl } from "../";
 

src/plugins/decor/ui/components/SectionedGridList.tsx

@@ -7,6 +7,7 @@
 import { classes } from "@utils/misc";
 import { findByPropsLazy } from "@webpack";
 import { React } from "@webpack/common";
+import { JSX } from "react";
 
 import { cl } from "../";
 import Grid, { GridProps } from "./Grid";

src/plugins/decor/ui/modals/ChangeDecorationModal.tsx

@@ -10,6 +10,7 @@ import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
 import { classes, copyWithToast } from "@utils/misc";
 import { closeAllModals, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
+import { Queue } from "@utils/Queue";
 import { findComponentByCodeLazy } from "@webpack";
 import { Alerts, Button, FluxDispatcher, Forms, GuildStore, NavigationRouter, Parser, Text, Tooltip, useEffect, UserStore, UserUtils, useState } from "@webpack/common";
 import { User } from "discord-types/general";
@@ -49,6 +50,8 @@ interface SectionHeaderProps {
     section: Section;
 }
 
+const fetchAuthorsQueue = new Queue();
+
 function SectionHeader({ section }: SectionHeaderProps) {
     const hasSubtitle = typeof section.subtitle !== "undefined";
     const hasAuthorIds = typeof section.authorIds !== "undefined";
@@ -56,17 +59,18 @@ function SectionHeader({ section }: SectionHeaderProps) {
     const [authors, setAuthors] = useState<User[]>([]);
 
     useEffect(() => {
-        (async () => {
+        fetchAuthorsQueue.push(async () => {
             if (!section.authorIds) return;
 
             for (const authorId of section.authorIds) {
-                const author = UserStore.getUser(authorId) ?? await UserUtils.getUser(authorId);
+                const author = UserStore.getUser(authorId) ?? await UserUtils.getUser(authorId).catch(() => null);
+                if (author == null) continue;
+
                 setAuthors(authors => [...authors, author]);
             }
-        })();
+        });
     }, [section.authorIds]);
 
-
     return <div>
         <Flex>
             <Forms.FormTitle style={{ flexGrow: 1 }}>{section.title}</Forms.FormTitle>

src/plugins/decor/ui/modals/CreateDecorationModal.tsx

@@ -20,7 +20,7 @@ import { AvatarDecorationModalPreview } from "../components";
 const FileUpload = findComponentByCodeLazy("fileUploadInput,");
 
 const { HelpMessage, HelpMessageTypes } = mapMangledModuleLazy('POSITIVE=3]="POSITIVE', {
-    HelpMessageTypes: filters.byProps("POSITIVE", "WARNING"),
+    HelpMessageTypes: filters.byProps("POSITIVE", "WARNING", "INFO"),
     HelpMessage: filters.byCode(".iconDiv")
 });
 
@@ -119,8 +119,8 @@ function CreateDecorationModal(props: ModalProps) {
                         />
                     </div>
                 </div>
-                <Forms.FormText type="description" className={Margins.bottom16}>
-                    <br />You can receive updates on your decoration's review by joining <Link
+                <HelpMessage messageType={HelpMessageTypes.INFO} className={Margins.bottom8}>
+                    To receive updates on your decoration's review, join <Link
                         href={`https://discord.gg/${INVITE_KEY}`}
                         onClick={async e => {
                             e.preventDefault();
@@ -138,8 +138,8 @@ function CreateDecorationModal(props: ModalProps) {
                         }}
                     >
                         Decor's Discord server
-                    </Link>.
-                </Forms.FormText>
+                    </Link> and allow direct messages.
+                </HelpMessage>
             </ErrorBoundary>
         </ModalContent>
         <ModalFooter className={cl("modal-footer")}>

src/plugins/disableCallIdle/index.ts

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

src/plugins/emoteCloner/index.tsx

@@ -211,7 +211,7 @@ function CloneModal({ data }: { data: Sticker | Emoji; }) {
                 alignItems: "center"
             }}>
                 {guilds.map(g => (
-                    <Tooltip text={g.name}>
+                    <Tooltip key={g.id} text={g.name}>
                         {({ onMouseLeave, onMouseEnter }) => (
                             <div
                                 onMouseLeave={onMouseLeave}
@@ -310,7 +310,8 @@ function buildMenuItem(type: "Emoji" | "Sticker", fetchData: () => Promisable<Om
 }
 
 function isGifUrl(url: string) {
-    return new URL(url).pathname.endsWith(".gif");
+    const u = new URL(url);
+    return u.pathname.endsWith(".gif") || u.searchParams.get("animated") === "true";
 }
 
 const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {

src/plugins/fakeNitro/index.tsx

@@ -20,11 +20,11 @@ import { addPreEditListener, addPreSendListener, removePreEditListener, removePr
 import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
 import { ApngBlendOp, ApngDisposeOp, importApngJs } from "@utils/dependencies";
-import { getCurrentGuild } from "@utils/discord";
+import { getCurrentGuild, getEmojiURL } from "@utils/discord";
 import { Logger } from "@utils/Logger";
 import definePlugin, { OptionType, Patch } from "@utils/types";
 import { findByCodeLazy, findByPropsLazy, findStoreLazy, proxyLazyWebpack } from "@webpack";
-import { Alerts, ChannelStore, DraftType, EmojiStore, FluxDispatcher, Forms, GuildMemberStore, IconUtils, lodash, Parser, PermissionsBits, PermissionStore, UploadHandler, UserSettingsActionCreators, UserStore } from "@webpack/common";
+import { Alerts, ChannelStore, DraftType, EmojiStore, FluxDispatcher, Forms, GuildMemberStore, lodash, Parser, PermissionsBits, PermissionStore, UploadHandler, UserSettingsActionCreators, UserStore } from "@webpack/common";
 import type { Emoji } from "@webpack/types";
 import type { Message } from "discord-types/general";
 import { applyPalette, GIFEncoder, quantize } from "gifenc";
@@ -207,8 +207,8 @@ function makeBypassPatches(): Omit<Patch, "plugin"> {
     return {
         find: "canUseCustomStickersEverywhere:",
         replacement: mapping.map(({ func, predicate }) => ({
-            match: new RegExp(String.raw`(?<=${func}:function\(\i(?:,\i)?\){)`),
-            replace: "return true;",
+            match: new RegExp(String.raw`(?<=${func}:)\i`),
+            replace: "() => true",
             predicate
         }))
     };
@@ -285,7 +285,7 @@ export default definePlugin({
         },
         // Remove boost requirements to stream with high quality
         {
-            find: "STREAM_FPS_OPTION.format",
+            find: "#{intl::STREAM_FPS_OPTION}",
             predicate: () => settings.store.enableStreamQualityBypass,
             replacement: {
                 match: /guildPremiumTier:\i\.\i\.TIER_\d,?/g,
@@ -297,8 +297,8 @@ export default definePlugin({
             replacement: [
                 {
                     // Overwrite incoming connection settings proto with our local settings
-                    match: /CONNECTION_OPEN:function\((\i)\){/,
-                    replace: (m, props) => `${m}$self.handleProtoChange(${props}.userSettingsProto,${props}.user);`
+                    match: /function (\i)\((\i)\){(?=.*CONNECTION_OPEN:\1)/,
+                    replace: (m, funcName, props) => `${m}$self.handleProtoChange(${props}.userSettingsProto,${props}.user);`
                 },
                 {
                     // Overwrite non local proto changes with our local settings
@@ -350,13 +350,13 @@ export default definePlugin({
                 {
                     // Filter attachments to remove fake nitro stickers or emojis
                     predicate: () => settings.store.transformStickers,
-                    match: /renderAttachments\(\i\){let{attachments:(\i).+?;/,
+                    match: /renderAttachments\(\i\){.+?{attachments:(\i).+?;/,
                     replace: (m, attachments) => `${m}${attachments}=$self.filterAttachments(${attachments});`
                 }
             ]
         },
         {
-            find: ".Messages.STICKER_POPOUT_UNJOINED_PRIVATE_GUILD_DESCRIPTION.format",
+            find: "#{intl::STICKER_POPOUT_UNJOINED_PRIVATE_GUILD_DESCRIPTION}",
             predicate: () => settings.store.transformStickers,
             replacement: [
                 {
@@ -381,7 +381,7 @@ export default definePlugin({
             }
         },
         {
-            find: ".Messages.EMOJI_POPOUT_UNJOINED_DISCOVERABLE_GUILD_DESCRIPTION",
+            find: "#{intl::EMOJI_POPOUT_UNJOINED_DISCOVERABLE_GUILD_DESCRIPTION}",
             predicate: () => settings.store.transformEmojis,
             replacement: {
                 // Add the fake nitro emoji notice
@@ -391,7 +391,7 @@ export default definePlugin({
         },
         // Separate patch for allowing using custom app icons
         {
-            find: /\.getCurrentDesktopIcon.{0,25}\.isPremium/,
+            find: "?24:30,",
             replacement: {
                 match: /\i\.\i\.isPremium\(\i\.\i\.getCurrentUser\(\)\)/,
                 replace: "true"
@@ -514,7 +514,7 @@ export default definePlugin({
         return array.filter(item => item != null);
     },
 
-    ensureChildrenIsArray(child: ReactElement) {
+    ensureChildrenIsArray(child: ReactElement<any>) {
         if (!Array.isArray(child.props.children)) child.props.children = [child.props.children];
     },
 
@@ -524,7 +524,7 @@ export default definePlugin({
 
         let nextIndex = content.length;
 
-        const transformLinkChild = (child: ReactElement) => {
+        const transformLinkChild = (child: ReactElement<any>) => {
             if (settings.store.transformEmojis) {
                 const fakeNitroMatch = child.props.href.match(fakeNitroEmojiRegex);
                 if (fakeNitroMatch) {
@@ -558,7 +558,7 @@ export default definePlugin({
             return child;
         };
 
-        const transformChild = (child: ReactElement) => {
+        const transformChild = (child: ReactElement<any>) => {
             if (child?.props?.trusted != null) return transformLinkChild(child);
             if (child?.props?.children != null) {
                 if (!Array.isArray(child.props.children)) {
@@ -574,7 +574,7 @@ export default definePlugin({
             return child;
         };
 
-        const modifyChild = (child: ReactElement) => {
+        const modifyChild = (child: ReactElement<any>) => {
             const newChild = transformChild(child);
 
             if (newChild?.type === "ul" || newChild?.type === "ol") {
@@ -601,7 +601,7 @@ export default definePlugin({
             return newChild;
         };
 
-        const modifyChildren = (children: Array<ReactElement>) => {
+        const modifyChildren = (children: Array<ReactElement<any>>) => {
             for (const [index, child] of children.entries()) children[index] = modifyChild(child);
 
             children = this.clearEmptyArrayItems(children);
@@ -920,7 +920,7 @@ export default definePlugin({
 
                     const emojiString = `<${emoji.animated ? "a" : ""}:${emoji.originalName || emoji.name}:${emoji.id}>`;
 
-                    const url = new URL(IconUtils.getEmojiURL({ id: emoji.id, animated: emoji.animated, size: s.emojiSize }));
+                    const url = new URL(getEmojiURL(emoji.id, emoji.animated, s.emojiSize));
                     url.searchParams.set("size", s.emojiSize.toString());
                     url.searchParams.set("name", emoji.name);
 
@@ -953,7 +953,7 @@ export default definePlugin({
 
                 hasBypass = true;
 
-                const url = new URL(IconUtils.getEmojiURL({ id: emoji.id, animated: emoji.animated, size: s.emojiSize }));
+                const url = new URL(getEmojiURL(emoji.id, emoji.animated, s.emojiSize));
                 url.searchParams.set("size", s.emojiSize.toString());
                 url.searchParams.set("name", emoji.name);
 

src/plugins/fakeProfileThemes/index.tsx

@@ -29,6 +29,7 @@ import definePlugin, { OptionType } from "@utils/types";
 import { extractAndLoadChunksLazy, findComponentByCodeLazy } from "@webpack";
 import { Button, Flex, Forms, React, Text, UserProfileStore, UserStore, useState } from "@webpack/common";
 import { User } from "discord-types/general";
+import { ReactElement } from "react";
 import virtualMerge from "virtual-merge";
 
 interface UserProfile extends User {
@@ -87,7 +88,7 @@ const settings = definePluginSettings({
 
 interface ColorPickerProps {
     color: number | null;
-    label: React.ReactElement;
+    label: ReactElement<any>;
     showEyeDropper?: boolean;
     suggestedColors?: string[];
     onChange(value: number | null): void;
@@ -108,10 +109,10 @@ interface ProfileModalProps {
     isTryItOutFlow: boolean;
 }
 
-const ColorPicker = findComponentByCodeLazy<ColorPickerProps>(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");
+const ColorPicker = findComponentByCodeLazy<ColorPickerProps>("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", ".BACKGROUND_PRIMARY)");
 const ProfileModal = findComponentByCodeLazy<ProfileModalProps>("isTryItOutFlow:", "pendingThemeColors:", "pendingAvatarDecoration:", "EDIT_PROFILE_BANNER");
 
-const requireColorPicker = extractAndLoadChunksLazy(["USER_SETTINGS_PROFILE_COLOR_DEFAULT_BUTTON.format"], /createPromise:\(\)=>\i\.\i(\("?.+?"?\)).then\(\i\.bind\(\i,"?(.+?)"?\)\)/);
+const requireColorPicker = extractAndLoadChunksLazy(["#{intl::USER_SETTINGS_PROFILE_COLOR_DEFAULT_BUTTON}"], /createPromise:\(\)=>\i\.\i(\("?.+?"?\)).then\(\i\.bind\(\i,"?(.+?)"?\)\)/);
 
 export default definePlugin({
     name: "FakeProfileThemes",
@@ -126,9 +127,9 @@ export default definePlugin({
             }
         },
         {
-            find: ".USER_SETTINGS_RESET_PROFILE_THEME",
+            find: "#{intl::USER_SETTINGS_RESET_PROFILE_THEME}",
             replacement: {
-                match: /RESET_PROFILE_THEME}\)(?<=color:(\i),.{0,500}?color:(\i),.{0,500}?)/,
+                match: /#{intl::USER_SETTINGS_RESET_PROFILE_THEME}\)}\)(?<=color:(\i),.{0,500}?color:(\i),.{0,500}?)/,
                 replace: "$&,$self.addCopy3y3Button({primary:$1,accent:$2})"
             }
         }

src/plugins/favEmojiFirst/index.ts

@@ -57,7 +57,7 @@ export default definePlugin({
                 {
                     // https://regex101.com/r/x2mobQ/1
                     // searchEmojis(...,maxCount: stuff) ... endEmojis = emojis.slice(0, maxCount - gifResults.length)
-                    match: /,maxCount:(\i)(.{1,500}\i)=(\i)\.slice\(0,(\i-\i\.length)\)/,
+                    match: /,maxCount:(\i)(.{1,500}\i)=(\i)\.slice\(0,(Math\.max\(\i,\i(?:-\i\.length){2}\))\)/,
                     // ,maxCount:Infinity ... endEmojis = (emojis.sliceTo = n, emojis)
                     replace: ",maxCount:Infinity$2=($3.sliceTo = $4, $3)"
                 }

src/plugins/fixImagesQuality/README.md

@@ -0,0 +1,3 @@
+# Fix Images Quality
+
+Prevents images from being loaded as webp, which can cause quality loss

src/plugins/fixImagesQuality/index.ts

@@ -0,0 +1,23 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "FixImagesQuality",
+    description: "Prevents images from being loaded as webp, which can cause quality loss",
+    authors: [Devs.Nuckyz],
+    patches: [
+        {
+            find: ".handleImageLoad)",
+            replacement: {
+                match: /(?<=null;return )\i\.\i&&\(\i\|\|!\i\.isAnimated.+?:(?=\i&&\(\i="png"\))/,
+                replace: ""
+            }
+        }
+    ]
+});

src/plugins/forceOwnerCrown/index.ts

@@ -27,7 +27,7 @@ export default definePlugin({
     authors: [Devs.D3SOX, Devs.Nickyux],
     patches: [
         {
-            find: ".Messages.GUILD_OWNER,",
+            find: "#{intl::GUILD_OWNER}),children:",
             replacement: {
                 match: /,isOwner:(\i),/,
                 replace: ",_isOwner:$1=$self.isGuildOwner(e),"

src/plugins/friendsSince/index.tsx

@@ -26,7 +26,7 @@ export default definePlugin({
         {
             find: ".PANEL}),nicknameIcons",
             replacement: {
-                match: /USER_PROFILE_MEMBER_SINCE,.{0,100}userId:(\i\.id)}\)}\)/,
+                match: /#{intl::USER_PROFILE_MEMBER_SINCE}\),.{0,100}userId:(\i\.id)}\)}\)/,
                 replace: "$&,$self.FriendsSinceComponent({userId:$1,isSidebar:true})"
             }
         },
@@ -34,7 +34,7 @@ export default definePlugin({
         {
             find: "action:\"PRESS_APP_CONNECTION\"",
             replacement: {
-                match: /USER_PROFILE_MEMBER_SINCE,.{0,100}userId:(\i\.id),.{0,100}}\)}\),/,
+                match: /#{intl::USER_PROFILE_MEMBER_SINCE}\),.{0,100}userId:(\i\.id),.{0,100}}\)}\),/,
                 replace: "$&,$self.FriendsSinceComponent({userId:$1,isSidebar:false}),"
             }
         }

src/plugins/fullSearchContext/index.tsx

@@ -19,10 +19,11 @@
 import { findGroupChildrenByChildId, NavContextMenuPatchCallback } from "@api/ContextMenu";
 import { migratePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
+import { getIntlMessage } from "@utils/discord";
 import { NoopComponent } from "@utils/react";
 import definePlugin from "@utils/types";
 import { filters, findByPropsLazy, waitFor } from "@webpack";
-import { ChannelStore, ContextMenuApi, i18n, UserStore } from "@webpack/common";
+import { ChannelStore, ContextMenuApi, UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
 const { useMessageMenu } = findByPropsLazy("useMessageMenu");
@@ -41,7 +42,7 @@ function MessageMenu({ message, channel, onHeightUpdate }) {
 
     return useMessageMenu({
         navId: "message-actions",
-        ariaLabel: i18n.Messages.MESSAGE_UTILITIES_A11Y_LABEL,
+        ariaLabel: getIntlMessage("MESSAGE_UTILITIES_A11Y_LABEL"),
 
         message,
         channel,
@@ -72,7 +73,7 @@ const contextMenuPatch: NavContextMenuPatchCallback = (children, props: MessageA
 
     const group = findGroupChildrenByChildId("devmode-copy-id", children, true);
     group?.push(
-        CopyIdMenuItem({ id: props.message.author.id, label: i18n.Messages.COPY_ID_AUTHOR })
+        CopyIdMenuItem({ id: props.message.author.id, label: getIntlMessage("COPY_ID_AUTHOR") })
     );
 };
 

src/plugins/fullUserInChatbox/README.md

@@ -0,0 +1,9 @@
+# Full User In Chatbox
+
+Adds the full user mention to the textbox
+
+Adds the avatar if you have mentioned avatars enabled
+
+Provides the full context menu to make it easy to access the users profile, and other common actions
+
+https://github.com/user-attachments/assets/cd9edb33-99c8-4c8d-b669-8cddd05f4b45

src/plugins/fullUserInChatbox/index.tsx

@@ -0,0 +1,47 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+import { findComponentByCodeLazy } from "@webpack";
+import { ReactNode } from "react";
+
+const UserMentionComponent = findComponentByCodeLazy(".USER_MENTION)");
+
+interface UserMentionComponentProps {
+    id: string;
+    channelId: string;
+    guildId: string;
+    originalComponent: () => ReactNode;
+}
+
+export default definePlugin({
+    name: "FullUserInChatbox",
+    description: "Makes the user mention in the chatbox have more functionalities, like left/right clicking",
+    authors: [Devs.sadan],
+
+    patches: [
+        {
+            find: ':"text":',
+            replacement: {
+                match: /(hidePersonalInformation\).+?)(if\(null!=\i\){.+?return \i)(?=})/,
+                replace: "$1return $self.UserMentionComponent({...arguments[0],originalComponent:()=>{$2}});"
+            }
+        }
+    ],
+
+    UserMentionComponent: ErrorBoundary.wrap((props: UserMentionComponentProps) => (
+        <UserMentionComponent
+            // This seems to be constant
+            className="mention"
+            userId={props.id}
+            channelId={props.channelId}
+        />
+    ), {
+        fallback: ({ wrappedProps: { originalComponent } }) => originalComponent()
+    })
+});

src/plugins/gameActivityToggle/index.tsx

@@ -92,7 +92,7 @@ export default definePlugin({
 
     patches: [
         {
-            find: ".Messages.ACCOUNT_SPEAKING_WHILE_MUTED",
+            find: "#{intl::ACCOUNT_SPEAKING_WHILE_MUTED}",
             replacement: {
                 match: /this\.renderNameZone\(\).+?children:\[/,
                 replace: "$&$self.GameActivityToggleButton(),"

src/plugins/greetStickerPicker/index.tsx

@@ -166,7 +166,7 @@ export default definePlugin({
 
     patches: [
         {
-            find: "Messages.WELCOME_CTA_LABEL",
+            find: "#{intl::WELCOME_CTA_LABEL}",
             replacement: {
                 match: /innerClassName:\i\.welcomeCTAButton,(?<={channel:\i,message:\i}=(\i).{0,400}?)/,
                 replace: "$&onContextMenu:(vcEvent)=>$self.pickSticker(vcEvent, $1),"

src/plugins/ignoreActivities/index.tsx

@@ -260,9 +260,9 @@ export default definePlugin({
             }
         },
         {
-            find: ".Messages.SETTINGS_GAMES_TOGGLE_OVERLAY",
+            find: "#{intl::SETTINGS_GAMES_TOGGLE_OVERLAY}",
             replacement: {
-                match: /\.Messages\.SETTINGS_GAMES_TOGGLE_OVERLAY.+?}\(\),(?<={overlay:\i,.+?=(\i),.+?)(?=!(\i))/,
+                match: /#{intl::SETTINGS_GAMES_TOGGLE_OVERLAY}.+?}\(\),(?<={overlay:\i,.+?=(\i),.+?)(?=!(\i))/,
                 replace: (m, props, nowPlaying) => `${m}$self.renderToggleGameActivityButton(${props},${nowPlaying}),`
             }
         },

src/plugins/imageZoom/components/Magnifier.tsx

@@ -18,7 +18,7 @@
 
 import { classNameFactory } from "@api/Styles";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { FluxDispatcher, React, useRef, useState } from "@webpack/common";
+import { FluxDispatcher, useLayoutEffect, useRef, useState } from "@webpack/common";
 
 import { ELEMENT_ID } from "../constants";
 import { settings } from "../index";
@@ -55,7 +55,7 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
     const imageRef = useRef<HTMLImageElement | null>(null);
 
     // since we accessing document im gonna use useLayoutEffect
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         const onKeyDown = (e: KeyboardEvent) => {
             if (e.key === "Shift") {
                 isShiftDown.current = true;
@@ -135,12 +135,14 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
 
             setReady(true);
         });
+
         document.addEventListener("keydown", onKeyDown);
         document.addEventListener("keyup", onKeyUp);
         document.addEventListener("mousemove", updateMousePosition);
         document.addEventListener("mousedown", onMouseDown);
         document.addEventListener("mouseup", onMouseUp);
         document.addEventListener("wheel", onWheel);
+
         return () => {
             document.removeEventListener("keydown", onKeyDown);
             document.removeEventListener("keyup", onKeyUp);
@@ -148,14 +150,16 @@ export const Magnifier = ErrorBoundary.wrap<MagnifierProps>(({ instance, size: i
             document.removeEventListener("mousedown", onMouseDown);
             document.removeEventListener("mouseup", onMouseUp);
             document.removeEventListener("wheel", onWheel);
-
-            if (settings.store.saveZoomValues) {
-                settings.store.zoom = zoom.current;
-                settings.store.size = size.current;
-            }
         };
     }, []);
 
+    useLayoutEffect(() => () => {
+        if (settings.store.saveZoomValues) {
+            settings.store.zoom = zoom.current;
+            settings.store.size = size.current;
+        }
+    });
+
     if (!ready) return null;
 
     const box = element.current?.getBoundingClientRect();

src/plugins/imageZoom/index.tsx

@@ -24,6 +24,7 @@ import { debounce } from "@shared/debounce";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { Menu, ReactDOM } from "@webpack/common";
+import { JSX } from "react";
 import type { Root } from "react-dom/client";
 
 import { Magnifier, MagnifierProps } from "./components/Magnifier";
@@ -156,14 +157,10 @@ export default definePlugin({
 
     patches: [
         {
-            find: "Messages.OPEN_IN_BROWSER",
+            find: ".contain,SCALE_DOWN:",
             replacement: {
-                // there are 2 image thingies. one for carosuel and one for the single image.
-                // so thats why i added global flag.
-                // also idk if this patch is good, should it be more specific?
-                // https://regex101.com/r/xfvNvV/1
-                match: /return.{1,200}\.wrapper.{1,200}src:\i,/g,
-                replace: `$&id: '${ELEMENT_ID}',`
+                match: /\.slide,\i\),/g,
+                replace: `$&id:"${ELEMENT_ID}",`
             }
         },
 
@@ -183,15 +180,13 @@ export default definePlugin({
                 {
                     match: /componentWillUnmount\(\){/,
                     replace: "$&$self.unMountMagnifier();"
+                },
+
+                {
+                    match: /componentDidUpdate\(\i\){/,
+                    replace: "$&$self.updateMagnifier(this);"
                 }
             ]
-        },
-        {
-            find: ".carouselModal",
-            replacement: {
-                match: /(?<=\.carouselModal.{0,100}onClick:)\i,/,
-                replace: "()=>{},"
-            }
         }
     ],
 
@@ -226,6 +221,11 @@ export default definePlugin({
         }
     },
 
+    updateMagnifier(instance) {
+        this.unMountMagnifier();
+        this.renderMagnifier(instance);
+    },
+
     unMountMagnifier() {
         this.root?.unmount();
         this.currentMagnifierElement = null;

src/plugins/imageZoom/styles.css

@@ -23,12 +23,3 @@
 
     /* https://googlechrome.github.io/samples/image-rendering-pixelated/index.html */
 }
-
-/* make the carousel take up less space so we can click the backdrop and exit out of it */
-[class*="modalCarouselWrapper_"] {
-    top: 0 !important;
-}
-
-[class*="carouselModal_"] {
-    height: 0 !important;
-}

src/plugins/implicitRelationships/index.ts

@@ -32,7 +32,7 @@ export default definePlugin({
     patches: [
         // Counts header
         {
-            find: ".FRIENDS_ALL_HEADER",
+            find: "#{intl::FRIENDS_ALL_HEADER}",
             replacement: {
                 match: /toString\(\)\}\);case (\i\.\i)\.BLOCKED/,
                 replace: 'toString()});case $1.IMPLICIT:return "Implicit — "+arguments[1];case $1.BLOCKED'
@@ -48,9 +48,9 @@ export default definePlugin({
         },
         // Sections header
         {
-            find: ".FRIENDS_SECTION_ONLINE",
+            find: "#{intl::FRIENDS_SECTION_ONLINE}",
             replacement: {
-                match: /(\(0,\i\.jsx\)\(\i\.TabBar\.Item,\{id:\i\.\i)\.BLOCKED,className:([^\s]+?)\.item,children:\i\.\i\.Messages\.BLOCKED\}\)/,
+                match: /(\(0,\i\.jsx\)\(\i\.TabBar\.Item,\{id:\i\.\i)\.BLOCKED,className:([^\s]+?)\.item,children:\i\.\i\.string\(\i\.\i#{intl::BLOCKED}\)\}\)/,
                 replace: "$1.IMPLICIT,className:$2.item,children:\"Implicit\"}),$&"
             },
         },
@@ -117,7 +117,7 @@ export default definePlugin({
 
     wrapSort(comparator: Function, row: any) {
         return row.type === 5
-            ? -UserAffinitiesStore.getUserAffinity(row.user.id)?.affinity ?? 0
+            ? -(UserAffinitiesStore.getUserAffinity(row.user.id)?.affinity ?? 0)
             : comparator(row);
     },
 

src/plugins/invisibleChat.desktop/index.tsx

@@ -111,7 +111,7 @@ export default definePlugin({
     patches: [
         {
             // Indicator
-            find: ".Messages.MESSAGE_EDITED,",
+            find: "#{intl::MESSAGE_EDITED}",
             replacement: {
                 match: /let\{className:\i,message:\i[^}]*\}=(\i)/,
                 replace: "try {$1 && $self.INV_REGEX.test($1.message.content) ? $1.content.push($self.indicator()) : null } catch {};$&"