Merge branch 'dev' into customFolderIcons

2024-09-19 22:20:34 +00:00 · 2024-09-02 01:10:02 -04:00 · 2024-09-02 01:10:02 -04:00 · 2272e1dfaa
commit 2272e1dfaa
parent bcb0c4100f accfc15125
75 changed files with 1041 additions and 797 deletions
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
    "name": "vencord",
    "private": "true",
-    "version": "1.9.7",
+    "version": "1.9.9",
    "description": "The cutest Discord client mod",
    "homepage": "https://github.com/Vendicated/Vencord#readme",
    "bugs": {
@ -70,6 +70,7 @@
        "stylelint": "^16.8.1",
        "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",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -116,6 +116,9 @@ importers:
      ts-patch:
        specifier: ^3.2.1
        version: 3.2.1
+      ts-pattern:
+        specifier: ^5.3.1
+        version: 5.3.1
      tsx:
        specifier: ^4.16.5
        version: 4.16.5
@ -2524,6 +2527,9 @@ packages:
    resolution: {integrity: sha512-hlR43v+GUIUy8/ZGFP1DquEqPh7PFKQdDMTAmYt671kCCA6AkDQMoeFaFmZ7ObPLYOmpMgyKUqL1C+coFMf30w==}
    hasBin: true

+  ts-pattern@5.3.1:
+    resolution: {integrity: sha512-1RUMKa8jYQdNfmnK4jyzBK3/PS/tnjcZ1CW0v1vWDeYe5RBklc/nquw03MEoB66hVBm4BnlCfmOqDVxHyT1DpA==}
+
  tsconfig-paths@3.15.0:
    resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}

@ -5158,6 +5164,8 @@ snapshots:
      semver: 7.6.3
      strip-ansi: 6.0.1

+  ts-pattern@5.3.1: {}
+
  tsconfig-paths@3.15.0:
    dependencies:
      '@types/json5': 0.0.29
--- a/scripts/build/build.mjs
+++ b/scripts/build/build.mjs
@ -21,7 +21,7 @@ import esbuild from "esbuild";
 import { readdir } from "fs/promises";
 import { join } from "path";

-import { BUILD_TIMESTAMP, commonOpts, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, resolvePluginName, VERSION, watch } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, exists, globPlugins, IS_DEV, IS_REPORTER, IS_STANDALONE, IS_UPDATER_DISABLED, resolvePluginName, VERSION, commonRendererPlugins, watch } from "./common.mjs";

 const defines = {
    IS_STANDALONE,
@ -131,7 +131,7 @@ await Promise.all([
        sourcemap,
        plugins: [
            globPlugins("discordDesktop"),
-            ...commonOpts.plugins
+            ...commonRendererPlugins
        ],
        define: {
            ...defines,
@ -180,7 +180,7 @@ await Promise.all([
        sourcemap,
        plugins: [
            globPlugins("vencordDesktop"),
-            ...commonOpts.plugins
+            ...commonRendererPlugins
        ],
        define: {
            ...defines,
--- a/scripts/build/buildWeb.mjs
+++ b/scripts/build/buildWeb.mjs
@ -23,7 +23,7 @@ import { appendFile, mkdir, readdir, readFile, rm, writeFile } from "fs/promises
 import { join } from "path";
 import Zip from "zip-local";

-import { BUILD_TIMESTAMP, commonOpts, globPlugins, IS_DEV, IS_REPORTER, VERSION } from "./common.mjs";
+import { BUILD_TIMESTAMP, commonOpts, globPlugins, IS_DEV, IS_REPORTER, VERSION, commonRendererPlugins } from "./common.mjs";

 /**
 * @type {esbuild.BuildOptions}
@ -36,7 +36,7 @@ const commonOptions = {
    external: ["~plugins", "~git-hash", "/assets/*"],
    plugins: [
        globPlugins("web"),
-        ...commonOpts.plugins,
+        ...commonRendererPlugins
    ],
    target: ["esnext"],
    define: {
@ -116,7 +116,12 @@ await Promise.all(
            }
        })
    ]
-);
+).catch(err => {
+    console.error("Build failed");
+    console.error(err.message);
+    if (!commonOpts.watch)
+        process.exit(1);
+});;

 /**
 * @type {(dir: string) => Promise<string[]>}
--- a/scripts/build/common.mjs
+++ b/scripts/build/common.mjs
@ -28,6 +28,7 @@ import { join, relative } from "path";
 import { promisify } from "util";

 import { getPluginTarget } from "../utils.mjs";
+import { builtinModules } from "module";

 /** @type {import("../../package.json")} */
 const PackageJSON = JSON.parse(readFileSync("package.json"));
@ -292,6 +293,18 @@ export const stylePlugin = {
    }
 };

+/**
+ * @type {(filter: RegExp, message: string) => import("esbuild").Plugin}
+ */
+export const banImportPlugin = (filter, message) => ({
+    name: "ban-imports",
+    setup: build => {
+        build.onResolve({ filter }, () => {
+            return { errors: [{ text: message }] };
+        });
+    }
+});
+
 /**
 * @type {import("esbuild").BuildOptions}
 */
@ -311,3 +324,16 @@ export const commonOpts = {
    // Work around https://github.com/evanw/esbuild/issues/2460
    tsconfig: "./scripts/build/tsconfig.esbuild.json"
 };
+
+const escapedBuiltinModules = builtinModules
+    .map(m => m.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"))
+    .join("|");
+const builtinModuleRegex = new RegExp(`^(node:)?(${escapedBuiltinModules})$`);
+
+export const commonRendererPlugins = [
+    banImportPlugin(builtinModuleRegex, "Cannot import node inbuilt modules in browser code. You need to use a native.ts file"),
+    banImportPlugin(/^react$/, "Cannot import from react. React and hooks should be imported from @webpack/common"),
+    banImportPlugin(/^electron(\/.*)?$/, "Cannot import electron in browser code. You need to use a native.ts file"),
+    banImportPlugin(/^ts-pattern$/, "Cannot import from ts-pattern. match and P should be imported from @webpack/common"),
+    ...commonOpts.plugins
+];
--- a/src/api/Settings.ts
+++ b/src/api/Settings.ts
@ -230,6 +230,10 @@ export function definePluginSettings<
            if (!definedSettings.pluginName) throw new Error("Cannot access settings before plugin is initialized");
            return Settings.plugins[definedSettings.pluginName] as any;
        },
+        get plain() {
+            if (!definedSettings.pluginName) throw new Error("Cannot access settings before plugin is initialized");
+            return PlainSettings.plugins[definedSettings.pluginName] as any;
+        },
        use: settings => useSettings(
            settings?.map(name => `plugins.${definedSettings.pluginName}.${name}`) as UseSettings<Settings>[]
        ).plugins[definedSettings.pluginName] as any,
--- a/src/components/Icons.tsx
+++ b/src/components/Icons.tsx
@ -65,8 +65,7 @@ export function LinkIcon({ height = 24, width = 24, className }: IconProps) {
 }

 /**
- * Discord's copy icon, as seen in the user popout right of the username when clicking
- * your own username in the bottom left user panel
+ * Discord's copy icon, as seen in the user panel popout on the right of the username and in large code blocks
 */
 export function CopyIcon(props: IconProps) {
    return (
@ -76,8 +75,9 @@ export function CopyIcon(props: IconProps) {
            viewBox="0 0 24 24"
        >
            <g fill="currentColor">
-                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1z" />
-                <path d="M15 5H8c-1.1 0-1.99.9-1.99 2L6 21c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V11l-6-6zM8 21V7h6v5h5v9H8z" />
+                <path d="M3 16a1 1 0 0 1-1-1v-5a8 8 0 0 1 8-8h5a1 1 0 0 1 1 1v.5a.5.5 0 0 1-.5.5H10a6 6 0 0 0-6 6v5.5a.5.5 0 0 1-.5.5H3Z" />
+                <path d="M6 18a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4v-4h-3a5 5 0 0 1-5-5V6h-4a4 4 0 0 0-4 4v8Z" />
+                <path d="M21.73 12a3 3 0 0 0-.6-.88l-4.25-4.24a3 3 0 0 0-.88-.61V9a3 3 0 0 0 3 3h2.73Z" />
            </g>
        </Icon>
    );
--- a/src/components/VencordSettings/PatchHelperTab.tsx
+++ b/src/components/VencordSettings/PatchHelperTab.tsx
@ -382,6 +382,7 @@ function PatchHelper() {
                    <Forms.FormTitle className={Margins.top20}>Code</Forms.FormTitle>
                    <CodeBlock lang="js" content={code} />
                    <Button onClick={() => Clipboard.copy(code)}>Copy to Clipboard</Button>
+                    <Button className={Margins.top8} onClick={() => Clipboard.copy("```ts\n" + code + "\n```")}>Copy as Codeblock</Button>
                </>
            )}
        </SettingsTab>
--- a/src/components/VencordSettings/ThemesTab.tsx
+++ b/src/components/VencordSettings/ThemesTab.tsx
@ -25,10 +25,9 @@ import { openPluginModal } from "@components/PluginSettings/PluginModal";
 import type { UserThemeHeader } from "@main/themes";
 import { openInviteModal } from "@utils/discord";
 import { Margins } from "@utils/margins";
-import { classes } from "@utils/misc";
 import { showItemInFolder } from "@utils/native";
 import { useAwaiter } from "@utils/react";
-import { findByPropsLazy, findLazy } from "@webpack";
+import { findLazy } from "@webpack";
 import { Card, Forms, React, showToast, TabBar, TextArea, useEffect, useRef, useState } from "@webpack/common";
 import type { ComponentType, Ref, SyntheticEvent } from "react";

@ -45,9 +44,7 @@ type FileInput = ComponentType<{
    filters?: { name?: string; extensions: string[]; }[];
 }>;

-const InviteActions = findByPropsLazy("resolveInvite");
 const FileInput: FileInput = findLazy(m => m.prototype?.activateUploadDialogue && m.prototype.setRef);
-const TextAreaProps = findLazy(m => typeof m.textarea === "string");

 const cl = classNameFactory("vc-settings-theme-");

@ -80,8 +77,16 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
            <Forms.FormTitle className={Margins.top20} tag="h5">Validator</Forms.FormTitle>
            <Forms.FormText>This section will tell you whether your themes can successfully be loaded</Forms.FormText>
            <div>
-                {themeLinks.map(link => (
-                    <Card style={{
+                {themeLinks.map(rawLink => {
+                    const { label, link } = (() => {
+                        const match = /^@(light|dark) (.*)/.exec(rawLink);
+                        if (!match) return { label: rawLink, link: rawLink };
+
+                        const [, mode, link] = match;
+                        return { label: `[${mode} mode only] ${link}`, link };
+                    })();
+
+                    return <Card style={{
                        padding: ".5em",
                        marginBottom: ".5em",
                        marginTop: ".5em"
@ -89,11 +94,11 @@ function Validators({ themeLinks }: { themeLinks: string[]; }) {
                        <Forms.FormTitle tag="h5" style={{
                            overflowWrap: "break-word"
                        }}>
-                            {link}
+                            {label}
                        </Forms.FormTitle>
                        <Validator link={link} />
-                    </Card>
-                ))}
+                    </Card>;
+                })}
            </div>
        </>
    );
@ -299,6 +304,7 @@ function ThemesTab() {
                <Card className="vc-settings-card vc-text-selectable">
                    <Forms.FormTitle tag="h5">Paste links to css files here</Forms.FormTitle>
                    <Forms.FormText>One link per line</Forms.FormText>
+                    <Forms.FormText>You can prefix lines with @light or @dark to toggle them based on your Discord theme</Forms.FormText>
                    <Forms.FormText>Make sure to use direct links to files (raw or github.io)!</Forms.FormText>
                </Card>

@ -306,7 +312,7 @@ function ThemesTab() {
                    <TextArea
                        value={themeText}
                        onChange={setThemeText}
-                        className={classes(TextAreaProps.textarea, "vc-settings-theme-links")}
+                        className={"vc-settings-theme-links"}
                        placeholder="Theme Links"
                        spellCheck={false}
                        onBlur={onBlur}
--- a/src/components/VencordSettings/settingsStyles.css
+++ b/src/components/VencordSettings/settingsStyles.css
@ -33,6 +33,20 @@
    padding: 0.5em;
    border: 1px solid var(--background-modifier-accent);
    max-height: unset;
+    background-color: transparent;
+    box-sizing: border-box;
+    font-size: 12px;
+    line-height: 14px;
+    resize: none;
+    width: 100%;
+}
+
+.vc-settings-theme-links::placeholder {
+    color: var(--header-secondary);
+}
+
+.vc-settings-theme-links:focus {
+    background-color: var(--background-tertiary);
 }

 .vc-cloud-settings-sync-grid {
--- a/src/debug/loadLazyChunks.ts
+++ b/src/debug/loadLazyChunks.ts
@ -134,7 +134,7 @@ export async function loadLazyChunks() {
        const allChunks = [] as number[];

        // Matches "id" or id:
-        for (const currentMatch of wreq!.u.toString().matchAll(/(?:"([\deE]+?)")|(?:([\deE]+?):)/g)) {
+        for (const currentMatch of wreq!.u.toString().matchAll(/(?:"([\deE]+?)"(?![,}]))|(?:([\deE]+?):)/g)) {
            const id = currentMatch[1] ?? currentMatch[2];
            if (id == null) continue;

--- a/src/plugins/_api/badges/index.tsx
+++ b/src/plugins/_api/badges/index.tsx
@ -62,34 +62,6 @@ export default definePlugin({
    authors: [Devs.Megu, Devs.Ven, Devs.TheSun],
    required: true,
    patches: [
-        /* Patch the badge list component on user profiles */
-        {
-            find: 'id:"premium",',
-            replacement: [
-                {
-                    match: /&&(\i)\.push\(\{id:"premium".+?\}\);/,
-                    replace: "$&$1.unshift(...$self.getBadges(arguments[0]));",
-                },
-                {
-                    // alt: "", aria-hidden: false, src: originalSrc
-                    match: /alt:" ","aria-hidden":!0,src:(?=(\i)\.src)/,
-                    // ...badge.props, ..., src: badge.image ?? ...
-                    replace: "...$1.props,$& $1.image??"
-                },
-                // replace their component with ours if applicable
-                {
-                    match: /(?<=text:(\i)\.description,spacing:12,.{0,50})children:/,
-                    replace: "children:$1.component ? () => $self.renderBadgeComponent($1) :"
-                },
-                // conditionally override their onClick with badge.onClick if it exists
-                {
-                    match: /href:(\i)\.link/,
-                    replace: "...($1.onClick && { onClick: vcE => $1.onClick(vcE, $1) }),$&"
-                }
-            ]
-        },
-
-        /* new profiles */
        {
            find: ".FULL_SIZE]:26",
            replacement: {
--- a/src/plugins/_core/settings.tsx
+++ b/src/plugins/_core/settings.tsx
@ -64,7 +64,7 @@ export default definePlugin({
                    replace: (_, sectionTypes, commaOrSemi, elements, element) => `${commaOrSemi} $self.addSettings(${elements}, ${element}, ${sectionTypes}) ${commaOrSemi}`
                },
                {
-                    match: /({(?=.+?function (\i).{0,120}(\i)=\i\.useMemo.{0,30}return \i\.useMemo\(\(\)=>\i\(\3).+?function\(\){return )\2(?=})/,
+                    match: /({(?=.+?function (\i).{0,120}(\i)=\i\.useMemo.{0,60}return \i\.useMemo\(\(\)=>\i\(\3).+?function\(\){return )\2(?=})/,
                    replace: (_, rest, settingsHook) => `${rest}$self.wrapSettingsHook(${settingsHook})`
                }
            ]
--- a/src/plugins/alwaysExpandRoles/README.md
+++ b/src/plugins/alwaysExpandRoles/README.md
@ -0,0 +1,3 @@
+# Always Expand Roles
+
+Always expands the role list in profile popouts
--- a/src/plugins/timeBarAllActivities/index.ts
+++ b/src/plugins/timeBarAllActivities/index.ts
@ -1,6 +1,6 @@
 /*
 * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
+ * Copyright (c) 2023 Vendicated and contributors
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
@ -16,20 +16,22 @@
 * 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("AlwaysExpandRoles", "ShowAllRoles");
 export default definePlugin({
-    name: "TimeBarAllActivities",
-    description: "Adds the Spotify time bar to all activities if they have start and end timestamps",
-    authors: [Devs.fawn],
+    name: "AlwaysExpandRoles",
+    description: "Always expands the role list in profile popouts",
+    authors: [Devs.surgedevs],
    patches: [
        {
-            find: "}renderTimeBar(",
+            find: 'action:"EXPAND_ROLES"',
            replacement: {
-                match: /renderTimeBar\((.{1,3})\){.{0,50}?let/,
-                replace: "renderTimeBar($1){let"
+                match: /(roles:\i(?=.+?(\i)\(!0\)[,;]\i\({action:"EXPAND_ROLES"}\)).+?\[\i,\2\]=\i\.useState\()!1\)/,
+                replace: (_, rest, setExpandedRoles) => `${rest}!0)`
            }
        }
-    ],
+    ]
 });
--- a/src/plugins/automodContext/README.md
+++ b/src/plugins/automodContext/README.md
@ -1,5 +0,0 @@
-# AutomodContext
-
-Allows you to jump to the messages surrounding an automod hit
-
-![Visualization](https://github.com/Vendicated/Vencord/assets/61953774/d13740c8-2062-4553-b975-82fd3d6cc08b)
--- a/src/plugins/automodContext/index.tsx
+++ b/src/plugins/automodContext/index.tsx
@ -1,73 +0,0 @@
-/*
- * 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 { findByPropsLazy } from "@webpack";
-import { Button, ChannelStore, Text } from "@webpack/common";
-
-const { selectChannel } = findByPropsLazy("selectChannel", "selectVoiceChannel");
-
-function jumpToMessage(channelId: string, messageId: string) {
-    const guildId = ChannelStore.getChannel(channelId)?.guild_id;
-
-    selectChannel({
-        guildId,
-        channelId,
-        messageId,
-        jumpType: "INSTANT"
-    });
-}
-
-function findChannelId(message: any): string | null {
-    const { embeds: [embed] } = message;
-    const channelField = embed.fields.find(({ rawName }) => rawName === "channel_id");
-
-    if (!channelField) {
-        return null;
-    }
-
-    return channelField.rawValue;
-}
-
-export default definePlugin({
-    name: "AutomodContext",
-    description: "Allows you to jump to the messages surrounding an automod hit.",
-    authors: [Devs.JohnyTheCarrot],
-
-    patches: [
-        {
-            find: ".Messages.GUILD_AUTOMOD_REPORT_ISSUES",
-            replacement: {
-                match: /\.Messages\.ACTIONS.+?}\)(?=,(\(0.{0,40}\.dot.*?}\)),)/,
-                replace: (m, dot) => `${m},${dot},$self.renderJumpButton({message:arguments[0].message})`
-            }
-        }
-    ],
-
-    renderJumpButton: ErrorBoundary.wrap(({ message }: { message: any; }) => {
-        const channelId = findChannelId(message);
-
-        if (!channelId) {
-            return null;
-        }
-
-        return (
-            <Button
-                style={{ padding: "2px 8px" }}
-                look={Button.Looks.LINK}
-                size={Button.Sizes.SMALL}
-                color={Button.Colors.LINK}
-                onClick={() => jumpToMessage(channelId, message.id)}
-            >
-                <Text color="text-link" variant="text-xs/normal">
-                    Jump to Surrounding
-                </Text>
-            </Button>
-        );
-    }, { noop: true })
-});
--- a/src/plugins/betterNotes/index.tsx
+++ b/src/plugins/betterNotes/index.tsx
@ -17,13 +17,9 @@
 */

 import { definePluginSettings, Settings } from "@api/Settings";
-import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { canonicalizeMatch } from "@utils/patches";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByPropsLazy } from "@webpack";
-
-const UserPopoutSectionCssClasses = findByPropsLazy("section", "lastSection");

 const settings = definePluginSettings({
    hide: {
@ -72,23 +68,9 @@ export default definePlugin({
                match: /\.NOTE_PLACEHOLDER,/,
                replace: "$&spellCheck:!$self.noSpellCheck,"
            }
-        },
-        {
-            find: ".popularApplicationCommandIds,",
-            replacement: {
-                match: /lastSection:(!?\i)}\),/,
-                replace: "$&$self.patchPadding({lastSection:$1}),"
-            }
        }
    ],

-    patchPadding: ErrorBoundary.wrap(({ lastSection }) => {
-        if (!lastSection) return null;
-        return (
-            <div className={UserPopoutSectionCssClasses.lastSection} ></div>
-        );
-    }),
-
    get noSpellCheck() {
        return settings.store.noSpellCheck;
    }
--- a/src/plugins/clientTheme/index.tsx
+++ b/src/plugins/clientTheme/index.tsx
@ -12,7 +12,7 @@ import { Margins } from "@utils/margins";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType, StartAt } from "@utils/types";
 import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
-import { Button, Forms, useStateFromStores } from "@webpack/common";
+import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";

 const ColorPicker = findComponentByCodeLazy(".Messages.USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR", ".BACKGROUND_PRIMARY)");

@ -36,7 +36,6 @@ function setTheme(theme: string) {
    saveClientTheme({ theme });
 }

-const ThemeStore = findStoreLazy("ThemeStore");
 const NitroThemeStore = findStoreLazy("ClientThemesBackgroundStore");

 function ThemeSettings() {
--- a/src/plugins/consoleJanitor/index.ts
+++ b/src/plugins/consoleJanitor/index.ts
@ -60,13 +60,6 @@ export default definePlugin({
                replace: ""
            }
        },
-        {
-            find: "notosans-400-normalitalic",
-            replacement: {
-                match: /,"notosans-.+?"/g,
-                replace: ""
-            }
-        },
        {
            find: 'console.warn("[DEPRECATED] Please use `subscribeWithSelector` middleware");',
            all: true,
--- a/src/plugins/copyFileContents/README.md
+++ b/src/plugins/copyFileContents/README.md
@ -0,0 +1,5 @@
+# CopyFileContents
+
+Adds a button to text file attachments to copy their contents.
+
+![](https://github.com/user-attachments/assets/b1a0f6f4-106f-4953-94d9-4c5ef5810bca)
--- a/src/plugins/copyFileContents/index.tsx
+++ b/src/plugins/copyFileContents/index.tsx
@ -0,0 +1,60 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./style.css";
+
+import ErrorBoundary from "@components/ErrorBoundary";
+import { CopyIcon, NoEntrySignIcon } from "@components/Icons";
+import { Devs } from "@utils/constants";
+import { copyWithToast } from "@utils/misc";
+import definePlugin from "@utils/types";
+import { Tooltip, useState } from "@webpack/common";
+
+const CheckMarkIcon = () => {
+    return <svg width="24" height="24" viewBox="0 0 24 24">
+        <path fill="currentColor" d="M21.7 5.3a1 1 0 0 1 0 1.4l-12 12a1 1 0 0 1-1.4 0l-6-6a1 1 0 1 1 1.4-1.4L9 16.58l11.3-11.3a1 1 0 0 1 1.4 0Z"></path>
+    </svg>;
+};
+
+export default definePlugin({
+    name: "CopyFileContents",
+    description: "Adds a button to text file attachments to copy their contents",
+    authors: [Devs.Obsidian, Devs.Nuckyz],
+    patches: [
+        {
+            find: ".Messages.PREVIEW_BYTES_LEFT.format(",
+            replacement: {
+                match: /\.footerGap.+?url:\i,fileName:\i,fileSize:\i}\),(?<=fileContents:(\i),bytesLeft:(\i).+?)/g,
+                replace: "$&$self.addCopyButton({fileContents:$1,bytesLeft:$2}),"
+            }
+        }
+    ],
+
+    addCopyButton: ErrorBoundary.wrap(({ fileContents, bytesLeft }: { fileContents: string, bytesLeft: number; }) => {
+        const [recentlyCopied, setRecentlyCopied] = useState(false);
+
+        return (
+            <Tooltip text={recentlyCopied ? "Copied!" : bytesLeft > 0 ? "File too large to copy" : "Copy File Contents"}>
+                {tooltipProps => (
+                    <div
+                        {...tooltipProps}
+                        className="vc-cfc-button"
+                        role="button"
+                        onClick={() => {
+                            if (!recentlyCopied && bytesLeft <= 0) {
+                                copyWithToast(fileContents);
+                                setRecentlyCopied(true);
+                                setTimeout(() => setRecentlyCopied(false), 2000);
+                            }
+                        }}
+                    >
+                        {recentlyCopied ? <CheckMarkIcon /> : bytesLeft > 0 ? <NoEntrySignIcon color="var(--channel-icon)" /> : <CopyIcon />}
+                    </div>
+                )}
+            </Tooltip>
+        );
+    }, { noop: true }),
+});
--- a/src/plugins/copyFileContents/style.css
+++ b/src/plugins/copyFileContents/style.css
@ -0,0 +1,8 @@
+.vc-cfc-button {
+    color: var(--interactive-normal);
+    cursor: pointer;
+}
+
+.vc-cfc-button:hover {
+    color: var(--interactive-hover);
+}
--- a/src/plugins/decor/index.tsx
+++ b/src/plugins/decor/index.tsx
@ -91,7 +91,7 @@ export default definePlugin({
            replacement: [
                // Use Decor avatar decoration hook
                {
-                    match: /(?<=\i\)\({avatarDecoration:)(\i).avatarDecoration(?=,)/,
+                    match: /(?<=\i\)\({avatarDecoration:)(\i)(?=,)(?<=currentUser:(\i).+?)/,
                    replace: "$self.useUserDecorAvatarDecoration($1)??$&"
                }
            ]
--- a/src/plugins/fakeProfileThemes/index.tsx
+++ b/src/plugins/fakeProfileThemes/index.tsx
@ -121,7 +121,7 @@ export default definePlugin({
        {
            find: "UserProfileStore",
            replacement: {
-                match: /(?<=getUserProfile\(\i\){return )(\i\[\i\])/,
+                match: /(?<=getUserProfile\(\i\){return )(.+?)(?=})/,
                replace: "$self.colorDecodeHook($1)"
            }
        },
--- a/src/plugins/friendsSince/index.tsx
+++ b/src/plugins/friendsSince/index.tsx
@ -16,7 +16,6 @@ const containerWrapper = findByPropsLazy("memberSinceWrapper");
 const container = findByPropsLazy("memberSince");
 const getCreatedAtDate = findByCodeLazy('month:"short",day:"numeric"');
 const locale = findByPropsLazy("getLocale");
-const lastSection = findByPropsLazy("lastSection");
 const section = findLazy((m: any) => m.section !== void 0 && m.heading !== void 0 && Object.values(m).length === 2);

 export default definePlugin({
@ -24,31 +23,7 @@ export default definePlugin({
    description: "Shows when you became friends with someone in the user popout",
    authors: [Devs.Elvyra, Devs.Antti],
    patches: [
-        // User popup - old layout
-        {
-            find: ".USER_PROFILE}};return",
-            replacement: {
-                match: /,{userId:(\i.id).{0,30}}\)/,
-                replace: "$&,$self.friendsSinceOld({ userId: $1 })"
-            }
-        },
-        // DM User Sidebar - old layout
-        {
-            find: ".PROFILE_PANEL,",
-            replacement: {
-                match: /,{userId:([^,]+?)}\)/,
-                replace: "$&,$self.friendsSinceOld({ userId: $1 })"
-            }
-        },
-        // User Profile Modal - old layout
-        {
-            find: ".userInfoSectionHeader,",
-            replacement: {
-                match: /(\.Messages\.USER_PROFILE_MEMBER_SINCE.+?userId:(.+?),textClassName:)(\i\.userInfoText)}\)/,
-                replace: (_, rest, userId, textClassName) => `${rest}!$self.getFriendSince(${userId}) ? ${textClassName} : void 0 }), $self.friendsSinceOld({ userId: ${userId}, textClassName: ${textClassName} })`
-            }
-        },
-        // DM User Sidebar - new layout
+        // DM User Sidebar
        {
            find: ".PANEL}),nicknameIcons",
            replacement: {
@ -56,7 +31,7 @@ export default definePlugin({
                replace: "$&,$self.friendsSinceNew({userId:$1,isSidebar:true})"
            }
        },
-        // User Profile Modal - new layout
+        // User Profile Modal
        {
            find: "action:\"PRESS_APP_CONNECTION\"",
            replacement: {
@ -77,39 +52,6 @@ export default definePlugin({
        }
    },

-    friendsSinceOld: ErrorBoundary.wrap(({ userId, textClassName }: { userId: string; textClassName?: string; }) => {
-        if (!RelationshipStore.isFriend(userId)) return null;
-
-        const friendsSince = RelationshipStore.getSince(userId);
-        if (!friendsSince) return null;
-
-        return (
-            <div className={lastSection.section}>
-                <Heading variant="eyebrow">
-                    Friends Since
-                </Heading>
-
-                <div className={containerWrapper.memberSinceWrapper}>
-                    {!!getCurrentChannel()?.guild_id && (
-                        <svg
-                            aria-hidden="true"
-                            width="16"
-                            height="16"
-                            viewBox="0 0 24 24"
-                            fill="var(--interactive-normal)"
-                        >
-                            <path d="M13 10a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
-                            <path d="M3 5v-.75C3 3.56 3.56 3 4.25 3s1.24.56 1.33 1.25C6.12 8.65 9.46 12 13 12h1a8 8 0 0 1 8 8 2 2 0 0 1-2 2 .21.21 0 0 1-.2-.15 7.65 7.65 0 0 0-1.32-2.3c-.15-.2-.42-.06-.39.17l.25 2c.02.15-.1.28-.25.28H9a2 2 0 0 1-2-2v-2.22c0-1.57-.67-3.05-1.53-4.37A15.85 15.85 0 0 1 3 5Z" />
-                        </svg>
-                    )}
-                    <Text variant="text-sm/normal" className={textClassName}>
-                        {getCreatedAtDate(friendsSince, locale.getLocale())}
-                    </Text>
-                </div>
-            </div>
-        );
-    }, { noop: true }),
-
    friendsSinceNew: ErrorBoundary.wrap(({ userId, isSidebar }: { userId: string; isSidebar: boolean; }) => {
        if (!RelationshipStore.isFriend(userId)) return null;

--- a/src/plugins/ignoreActivities/README.md
+++ b/src/plugins/ignoreActivities/README.md
@ -0,0 +1,13 @@
+# IgnoreActivities
+
+Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings.
+
+![](https://github.com/user-attachments/assets/f0c19060-0ecf-4f1c-8165-a5aa40143c82)
+
+![](https://github.com/user-attachments/assets/73c3fa7a-5b90-41ee-a4d6-91fa76458b74)
+
+![](https://github.com/user-attachments/assets/1ab3fe73-3911-48d1-8a08-e976af614b41)
+
+The activity stays showing as a detected game even if ignored, differently from the stock Toggle Detection button from Discord:
+
+![](https://github.com/user-attachments/assets/08ea60c3-3a31-42de-ae4c-7535fbf1b45a)
--- a/src/plugins/ignoreActivities/index.tsx
+++ b/src/plugins/ignoreActivities/index.tsx
@ -26,6 +26,11 @@ interface IgnoredActivity {
    type: ActivitiesTypes;
 }

+const enum FilterMode {
+    Whitelist,
+    Blacklist
+}
+
 const RunningGameStore = findStoreLazy("RunningGameStore");

 const ShowCurrentGame = getUserSettingLazy("status", "showCurrentGame")!;
@ -70,14 +75,17 @@ function handleActivityToggle(e: React.MouseEvent<HTMLButtonElement, MouseEvent>
    if (ignoredActivityIndex === -1) settings.store.ignoredActivities = getIgnoredActivities().concat(activity);
    else settings.store.ignoredActivities = getIgnoredActivities().filter((_, index) => index !== ignoredActivityIndex);

-    // Trigger activities recalculation
+    recalculateActivities();
+}
+
+function recalculateActivities() {
    ShowCurrentGame.updateSetting(old => old);
 }

 function ImportCustomRPCComponent() {
    return (
        <Flex flexDirection="column">
-            <Forms.FormText type={Forms.FormText.Types.DESCRIPTION}>Import the application id of the CustomRPC plugin to the allowed list</Forms.FormText>
+            <Forms.FormText type={Forms.FormText.Types.DESCRIPTION}>Import the application id of the CustomRPC plugin to the filter list</Forms.FormText>
            <div>
                <Button
                    onClick={() => {
@ -86,7 +94,7 @@ function ImportCustomRPCComponent() {
                            return showToast("CustomRPC application ID is not set.", Toasts.Type.FAILURE);
                        }

-                        const isAlreadyAdded = allowedIdsPushID?.(id);
+                        const isAlreadyAdded = idsListPushID?.(id);
                        if (isAlreadyAdded) {
                            showToast("CustomRPC application ID is already added.", Toasts.Type.FAILURE);
                        }
@ -99,39 +107,39 @@ function ImportCustomRPCComponent() {
    );
 }

-let allowedIdsPushID: ((id: string) => boolean) | null = null;
+let idsListPushID: ((id: string) => boolean) | null = null;

-function AllowedIdsComponent(props: { setValue: (value: string) => void; }) {
-    const [allowedIds, setAllowedIds] = useState<string>(settings.store.allowedIds ?? "");
+function IdsListComponent(props: { setValue: (value: string) => void; }) {
+    const [idsList, setIdsList] = useState<string>(settings.store.idsList ?? "");

-    allowedIdsPushID = (id: string) => {
-        const currentIds = new Set(allowedIds.split(",").map(id => id.trim()).filter(Boolean));
+    idsListPushID = (id: string) => {
+        const currentIds = new Set(idsList.split(",").map(id => id.trim()).filter(Boolean));

        const isAlreadyAdded = currentIds.has(id) || (currentIds.add(id), false);

        const ids = Array.from(currentIds).join(", ");
-        setAllowedIds(ids);
+        setIdsList(ids);
        props.setValue(ids);

        return isAlreadyAdded;
    };

    useEffect(() => () => {
-        allowedIdsPushID = null;
+        idsListPushID = null;
    }, []);

    function handleChange(newValue: string) {
-        setAllowedIds(newValue);
+        setIdsList(newValue);
        props.setValue(newValue);
    }

    return (
        <Forms.FormSection>
-            <Forms.FormTitle tag="h3">Allowed List</Forms.FormTitle>
-            <Forms.FormText className={Margins.bottom8} type={Forms.FormText.Types.DESCRIPTION}>Comma separated list of activity IDs to allow (Useful for allowing RPC activities and CustomRPC)</Forms.FormText>
+            <Forms.FormTitle tag="h3">Filter List</Forms.FormTitle>
+            <Forms.FormText className={Margins.bottom8} type={Forms.FormText.Types.DESCRIPTION}>Comma separated list of activity IDs to filter (Useful for filtering specific RPC activities and CustomRPC</Forms.FormText>
            <TextInput
                type="text"
-                value={allowedIds}
+                value={idsList}
                onChange={handleChange}
                placeholder="235834946571337729, 343383572805058560"
            />
@ -145,40 +153,62 @@ const settings = definePluginSettings({
        description: "",
        component: () => <ImportCustomRPCComponent />
    },
-    allowedIds: {
+    listMode: {
+        type: OptionType.SELECT,
+        description: "Change the mode of the filter list",
+        options: [
+            {
+                label: "Whitelist",
+                value: FilterMode.Whitelist,
+                default: true
+            },
+            {
+                label: "Blacklist",
+                value: FilterMode.Blacklist,
+            }
+        ],
+        onChange: recalculateActivities
+    },
+    idsList: {
        type: OptionType.COMPONENT,
        description: "",
        default: "",
        onChange(newValue: string) {
            const ids = new Set(newValue.split(",").map(id => id.trim()).filter(Boolean));
-            settings.store.allowedIds = Array.from(ids).join(", ");
+            settings.store.idsList = Array.from(ids).join(", ");
+            recalculateActivities();
        },
-        component: props => <AllowedIdsComponent setValue={props.setValue} />
+        component: props => <IdsListComponent setValue={props.setValue} />
    },
    ignorePlaying: {
        type: OptionType.BOOLEAN,
        description: "Ignore all playing activities (These are usually game and RPC activities)",
-        default: false
+        default: false,
+        onChange: recalculateActivities
    },
    ignoreStreaming: {
        type: OptionType.BOOLEAN,
        description: "Ignore all streaming activities",
-        default: false
+        default: false,
+        onChange: recalculateActivities
    },
    ignoreListening: {
        type: OptionType.BOOLEAN,
        description: "Ignore all listening activities (These are usually spotify activities)",
-        default: false
+        default: false,
+        onChange: recalculateActivities
    },
    ignoreWatching: {
        type: OptionType.BOOLEAN,
        description: "Ignore all watching activities",
-        default: false
+        default: false,
+        onChange: recalculateActivities
    },
    ignoreCompeting: {
        type: OptionType.BOOLEAN,
        description: "Ignore all competing activities (These are normally special game activities)",
-        default: false
+        default: false,
+        onChange: recalculateActivities
    }
 }).withPrivateSettings<{
    ignoredActivities: IgnoredActivity[];
@ -189,8 +219,8 @@ function getIgnoredActivities() {
 }

 function isActivityTypeIgnored(type: number, id?: string) {
-    if (id && settings.store.allowedIds.includes(id)) {
-        return false;
+    if (id && settings.store.idsList.includes(id)) {
+        return settings.store.listMode === FilterMode.Blacklist;
    }

    switch (type) {
@ -206,8 +236,8 @@ function isActivityTypeIgnored(type: number, id?: string) {

 export default definePlugin({
    name: "IgnoreActivities",
-    authors: [Devs.Nuckyz],
-    description: "Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings below.",
+    authors: [Devs.Nuckyz, Devs.Kylie],
+    description: "Ignore activities from showing up on your status ONLY. You can configure which ones are specifically ignored from the Registered Games and Activities tabs, or use the general settings below",
    dependencies: ["UserSettingsAPI"],

    settings,
@ -236,6 +266,7 @@ export default definePlugin({
                replace: (m, props, nowPlaying) => `${m}$self.renderToggleGameActivityButton(${props},${nowPlaying}),`
            }
        },
+        // Discord has 3 different components for activities. Currently, the last is the one being used
        {
            find: ".activityTitleText,variant",
            replacement: {
@ -249,10 +280,23 @@ export default definePlugin({
                match: /\.activityCardDetails.+?children:(\i\.application)\.name.*?}\),/,
                replace: (m, props) => `${m}$self.renderToggleActivityButton(${props}),`
            }
+        },
+        {
+            find: ".promotedLabelWrapperNonBanner,children",
+            replacement: {
+                match: /\.appDetailsHeaderContainer.+?children:\i.*?}\),(?<=application:(\i).+?)/,
+                replace: (m, props) => `${m}$self.renderToggleActivityButton(${props}),`
+            }
        }
    ],

    async start() {
+        // Migrate allowedIds
+        if (Settings.plugins.IgnoreActivities.allowedIds) {
+            settings.store.idsList = Settings.plugins.IgnoreActivities.allowedIds;
+            delete Settings.plugins.IgnoreActivities.allowedIds; // Remove allowedIds
+        }
+
        const oldIgnoredActivitiesData = await DataStore.get<Map<IgnoredActivity["id"], IgnoredActivity>>("IgnoreActivities_ignoredActivities");

        if (oldIgnoredActivitiesData != null) {
@ -279,7 +323,7 @@ export default definePlugin({
        if (isActivityTypeIgnored(props.type, props.application_id)) return false;

        if (props.application_id != null) {
-            return !getIgnoredActivities().some(activity => activity.id === props.application_id) || settings.store.allowedIds.includes(props.application_id);
+            return !getIgnoredActivities().some(activity => activity.id === props.application_id) || (settings.store.listMode === FilterMode.Whitelist && settings.store.idsList.includes(props.application_id));
        } else {
            const exePath = RunningGameStore.getRunningGames().find(game => game.name === props.name)?.exePath;
            if (exePath) {
--- a/src/plugins/memberCount/MemberCount.tsx
+++ b/src/plugins/memberCount/MemberCount.tsx
@ -5,9 +5,10 @@
 */

 import { getCurrentChannel } from "@utils/discord";
+import { isObjectEmpty } from "@utils/misc";
 import { SelectedChannelStore, Tooltip, useEffect, useStateFromStores } from "@webpack/common";

-import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat } from ".";
+import { ChannelMemberStore, cl, GuildMemberCountStore, numberFormat, ThreadMemberListStore } from ".";
 import { OnlineMemberCountStore } from "./OnlineMemberCountStore";

 export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; tooltipGuildId?: string; }) {
@ -30,10 +31,19 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
        () => ChannelMemberStore.getProps(guildId, currentChannel?.id)
    );

+    const threadGroups = useStateFromStores(
+        [ThreadMemberListStore],
+        () => ThreadMemberListStore.getMemberListSections(currentChannel.id)
+    );
+
    if (!isTooltip && (groups.length >= 1 || groups[0].id !== "unknown")) {
        onlineCount = groups.reduce((total, curr) => total + (curr.id === "offline" ? 0 : curr.count), 0);
    }

+    if (!isTooltip && threadGroups && !isObjectEmpty(threadGroups)) {
+        onlineCount = Object.values(threadGroups).reduce((total, curr) => total + (curr.sectionId === "offline" ? 0 : curr.userIds.length), 0);
+    }
+
    useEffect(() => {
        OnlineMemberCountStore.ensureCount(guildId);
    }, [guildId]);
--- a/src/plugins/memberCount/index.tsx
+++ b/src/plugins/memberCount/index.tsx
@ -32,6 +32,10 @@ export const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore") as F
 export const ChannelMemberStore = findStoreLazy("ChannelMemberStore") as FluxStore & {
    getProps(guildId: string, channelId: string): { groups: { count: number; id: string; }[]; };
 };
+export const ThreadMemberListStore = findStoreLazy("ThreadMemberListStore") as FluxStore & {
+    getMemberListSections(channelId: string): { [sectionId: string]: { sectionId: string; userIds: string[]; }; };
+};
+

 const settings = definePluginSettings({
    toolTip: {
--- a/src/plugins/mentionAvatars/README.md
+++ b/src/plugins/mentionAvatars/README.md
@ -1,5 +1,6 @@
 # MentionAvatars

-Shows user avatars inside mentions
+Shows user avatars and role icons inside mentions

 ![](https://github.com/user-attachments/assets/fc76ea47-5e19-4063-a592-c57785a75cc7)
+![](https://github.com/user-attachments/assets/76c4c3d9-7cde-42db-ba84-903cbb40c163)
--- a/src/plugins/mentionAvatars/index.tsx
+++ b/src/plugins/mentionAvatars/index.tsx
@ -10,21 +10,42 @@ import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
-import { SelectedGuildStore, useState } from "@webpack/common";
+import { GuildStore, SelectedGuildStore, useState } from "@webpack/common";
 import { User } from "discord-types/general";

 const settings = definePluginSettings({
    showAtSymbol: {
        type: OptionType.BOOLEAN,
-        description: "Whether the the @ symbol should be displayed",
+        description: "Whether the the @ symbol should be displayed on user mentions",
        default: true
    }
 });

+function DefaultRoleIcon() {
+    return (
+        <svg
+            className="vc-mentionAvatars-icon vc-mentionAvatars-role-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+        >
+            <path
+                d="M14 8.00598C14 10.211 12.206 12.006 10 12.006C7.795 12.006 6 10.211 6 8.00598C6 5.80098 7.794 4.00598 10 4.00598C12.206 4.00598 14 5.80098 14 8.00598ZM2 19.006C2 15.473 5.29 13.006 10 13.006C14.711 13.006 18 15.473 18 19.006V20.006H2V19.006Z"
+            />
+            <path
+                d="M20.0001 20.006H22.0001V19.006C22.0001 16.4433 20.2697 14.4415 17.5213 13.5352C19.0621 14.9127 20.0001 16.8059 20.0001 19.006V20.006Z"
+            />
+            <path
+                d="M14.8834 11.9077C16.6657 11.5044 18.0001 9.9077 18.0001 8.00598C18.0001 5.96916 16.4693 4.28218 14.4971 4.0367C15.4322 5.09511 16.0001 6.48524 16.0001 8.00598C16.0001 9.44888 15.4889 10.7742 14.6378 11.8102C14.7203 11.8418 14.8022 11.8743 14.8834 11.9077Z"
+            />
+        </svg>
+    );
+}
+
 export default definePlugin({
    name: "MentionAvatars",
-    description: "Shows user avatars inside mentions",
-    authors: [Devs.Ven],
+    description: "Shows user avatars and role icons inside mentions",
+    authors: [Devs.Ven, Devs.SerStars],

    patches: [{
        find: ".USER_MENTION)",
@ -32,6 +53,13 @@ export default definePlugin({
            match: /children:"@"\.concat\((null!=\i\?\i:\i)\)(?<=\.useName\((\i)\).+?)/,
            replace: "children:$self.renderUsername({username:$1,user:$2})"
        }
+    },
+    {
+        find: ".ROLE_MENTION)",
+        replacement: {
+            match: /children:\[\i&&.{0,50}\.RoleDot.{0,300},\i(?=\])/,
+            replace: "$&,$self.renderRoleIcon(arguments[0])"
+        }
    }],

    settings,
@ -47,12 +75,31 @@ export default definePlugin({
                onMouseEnter={() => setIsHovering(true)}
                onMouseLeave={() => setIsHovering(false)}
            >
-                <img src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)} className="vc-mentionAvatars-avatar" />
+                <img
+                    src={user.getAvatarURL(SelectedGuildStore.getGuildId(), 16, isHovering)}
+                    className="vc-mentionAvatars-icon"
+                    style={{ borderRadius: "50%" }}
+                />
                {getUsernameString(username)}
            </span>
        );
-    }, { noop: true })
+    }, { noop: true }),

+    renderRoleIcon: ErrorBoundary.wrap(({ roleId, guildId }: { roleId: string, guildId: string; }) => {
+        // Discord uses Role Mentions for uncached users because .... idk
+        if (!roleId) return null;
+
+        const role = GuildStore.getRole(guildId, roleId);
+
+        if (!role?.icon) return <DefaultRoleIcon />;
+
+        return (
+            <img
+                className="vc-mentionAvatars-icon vc-mentionAvatars-role-icon"
+                src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/role-icons/${roleId}/${role.icon}.webp?size=24&quality=lossless`}
+            />
+        );
+    }),
 });

 function getUsernameString(username: string) {
--- a/src/plugins/mentionAvatars/styles.css
+++ b/src/plugins/mentionAvatars/styles.css
@ -1,8 +1,11 @@
-.vc-mentionAvatars-avatar {
+.vc-mentionAvatars-icon {
    vertical-align: middle;
    width: 1em !important; /* insane discord sets width: 100% in channel topic */
    height: 1em;
    margin: 0 4px 0.2rem 2px;
-    border-radius: 50%;
    box-sizing: border-box;
 }
+
+.vc-mentionAvatars-role-icon {
+    margin: 0 2px 0.2rem 4px;
+}
--- a/src/plugins/moreUserTags/index.tsx
+++ b/src/plugins/moreUserTags/index.tsx
@ -22,7 +22,7 @@ import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByCodeLazy, findLazy } from "@webpack";
-import { Card, ChannelStore, Forms, GuildStore, PermissionsBits, Switch, TextInput, Tooltip, useState } from "@webpack/common";
+import { Card, ChannelStore, Forms, GuildStore, PermissionsBits, Switch, TextInput, Tooltip } from "@webpack/common";
 import type { Permissions, RC } from "@webpack/types";
 import type { Channel, Guild, Message, User } from "discord-types/general";

@ -107,14 +107,8 @@ const defaultSettings = Object.fromEntries(
    tags.map(({ name, displayName }) => [name, { text: displayName, showInChat: true, showInNotChat: true }])
 ) as TagSettings;

-function SettingsComponent(props: { setValue(v: any): void; }) {
-    settings.store.tagSettings ??= defaultSettings;
-
-    const [tagSettings, setTagSettings] = useState(settings.store.tagSettings as TagSettings);
-    const setValue = (v: TagSettings) => {
-        setTagSettings(v);
-        props.setValue(v);
-    };
+function SettingsComponent() {
+    const tagSettings = settings.store.tagSettings ??= defaultSettings;

    return (
        <Flex flexDirection="column">
@ -137,19 +131,13 @@ function SettingsComponent(props: { setValue(v: any): void; }) {
                        type="text"
                        value={tagSettings[t.name]?.text ?? t.displayName}
                        placeholder={`Text on tag (default: ${t.displayName})`}
-                        onChange={v => {
-                            tagSettings[t.name].text = v;
-                            setValue(tagSettings);
-                        }}
+                        onChange={v => tagSettings[t.name].text = v}
                        className={Margins.bottom16}
                    />

                    <Switch
                        value={tagSettings[t.name]?.showInChat ?? true}
-                        onChange={v => {
-                            tagSettings[t.name].showInChat = v;
-                            setValue(tagSettings);
-                        }}
+                        onChange={v => tagSettings[t.name].showInChat = v}
                        hideBorder
                    >
                        Show in messages
@ -157,10 +145,7 @@ function SettingsComponent(props: { setValue(v: any): void; }) {

                    <Switch
                        value={tagSettings[t.name]?.showInNotChat ?? true}
-                        onChange={v => {
-                            tagSettings[t.name].showInNotChat = v;
-                            setValue(tagSettings);
-                        }}
+                        onChange={v => tagSettings[t.name].showInNotChat = v}
                        hideBorder
                    >
                        Show in member list and profiles
@ -183,7 +168,7 @@ const settings = definePluginSettings({
    tagSettings: {
        type: OptionType.COMPONENT,
        component: SettingsComponent,
-        description: "fill me",
+        description: "fill me"
    }
 });

@ -247,9 +232,9 @@ export default definePlugin({
            }
        },
        {
-            find: 'copyMetaData:"User Tag"',
+            find: ".Messages.USER_PROFILE_PRONOUNS",
            replacement: {
-                match: /(?=,botClass:)/,
+                match: /(?=,hideBotTag:!0)/,
                replace: ",moreTags_channelId:arguments[0].moreTags_channelId"
            }
        },
--- a/src/plugins/mutualGroupDMs/index.tsx
+++ b/src/plugins/mutualGroupDMs/index.tsx
@ -20,14 +20,15 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { isNonNullish } from "@utils/guards";
 import definePlugin from "@utils/types";
-import { findByPropsLazy } from "@webpack";
-import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, UserStore } from "@webpack/common";
+import { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
+import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore } from "@webpack/common";
 import { Channel, User } from "discord-types/general";

 const SelectedChannelActionCreators = findByPropsLazy("selectPrivateChannel");
 const UserUtils = findByPropsLazy("getGlobalName");

 const ProfileListClasses = findByPropsLazy("emptyIconFriends", "emptyIconGuilds");
+const ExpandableList = findComponentByCodeLazy(".mutualFriendItem]");
 const GuildLabelClasses = findByPropsLazy("guildNick", "guildAvatarWithoutIcon");

 function getGroupDMName(channel: Channel) {
@ -39,69 +40,84 @@ function getGroupDMName(channel: Channel) {
            .join(", ");
 }

+const getMutualGroupDms = (userId: string) =>
+    ChannelStore.getSortedPrivateChannels()
+        .filter(c => c.isGroupDM() && c.recipients.includes(userId));
+
+const isBotOrSelf = (user: User) => user.bot || user.id === UserStore.getCurrentUser().id;
+
+function getMutualGDMCountText(user: User) {
+    const count = getMutualGroupDms(user.id).length;
+    return `${count === 0 ? "No" : count} Mutual Group${count !== 1 ? "s" : ""}`;
+}
+
+function renderClickableGDMs(mutualDms: Channel[], onClose: () => void) {
+    return mutualDms.map(c => (
+        <Clickable
+            className={ProfileListClasses.listRow}
+            onClick={() => {
+                onClose();
+                SelectedChannelActionCreators.selectPrivateChannel(c.id);
+            }}
+        >
+            <Avatar
+                src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
+                size="SIZE_40"
+                className={ProfileListClasses.listAvatar}
+            >
+            </Avatar>
+            <div className={ProfileListClasses.listRowContent}>
+                <div className={ProfileListClasses.listName}>{getGroupDMName(c)}</div>
+                <div className={GuildLabelClasses.guildNick}>{c.recipients.length + 1} Members</div>
+            </div>
+        </Clickable>
+    ));
+}
+
+const IS_PATCHED = Symbol("MutualGroupDMs.Patched");
+
 export default definePlugin({
    name: "MutualGroupDMs",
    description: "Shows mutual group dms in profiles",
    authors: [Devs.amia],

    patches: [
-        {
-            find: ".Messages.MUTUAL_GUILDS_WITH_END_COUNT", // Note: the module is lazy-loaded
-            replacement: {
-                match: /(?<=\.tabBarItem.{0,50}MUTUAL_GUILDS.+?}\),)(?=.+?(\(0,\i\.jsxs?\)\(.{0,100}id:))/,
-                replace: '$self.isBotOrSelf(arguments[0].user)?null:$1"MUTUAL_GDMS",children:$self.getMutualGDMCountText(arguments[0].user)}),'
-            }
-        },
-        {
-            find: ".USER_INFO_CONNECTIONS:case",
-            replacement: {
-                match: /(?<={user:(\i),onClose:(\i)}\);)(?=case \i\.\i\.MUTUAL_FRIENDS)/,
-                replace: "case \"MUTUAL_GDMS\":return $self.renderMutualGDMs({user: $1, onClose: $2});"
-            }
-        },
        {
            find: ".MUTUAL_FRIENDS?(",
            replacement: [
                {
-                    match: /(?<=onItemSelect:\i,children:)(\i)\.map/,
-                    replace: "[...$1, ...($self.isBotOrSelf(arguments[0].user) ? [] : [{section:'MUTUAL_GDMS',text:$self.getMutualGDMCountText(arguments[0].user)}])].map"
+                    match: /\i\.useEffect.{0,100}(\i)\[0\]\.section/,
+                    replace: "$self.pushSection($1, arguments[0].user);$&"
                },
                {
                    match: /\(0,\i\.jsx\)\(\i,\{items:\i,section:(\i)/,
                    replace: "$1==='MUTUAL_GDMS'?$self.renderMutualGDMs(arguments[0]):$&"
                }
            ]
+        },
+        {
+            find: 'section:"MUTUAL_FRIENDS"',
+            replacement: {
+                match: /\.openUserProfileModal.+?\)}\)}\)(?<=(\(0,\i\.jsxs?\)\(\i\.\i,{className:(\i)\.divider}\)).+?)/,
+                replace: "$&,$self.renderDMPageList({user: arguments[0].user, Divider: $1, listStyle: $2.list})"
+            }
        }
    ],

-    isBotOrSelf: (user: User) => user.bot || user.id === UserStore.getCurrentUser().id,
+    pushSection(sections: any[], user: User) {
+        if (isBotOrSelf(user) || sections[IS_PATCHED]) return;

-    getMutualGDMCountText: (user: User) => {
-        const count = ChannelStore.getSortedPrivateChannels().filter(c => c.isGroupDM() && c.recipients.includes(user.id)).length;
-        return `${count === 0 ? "No" : count} Mutual Group${count !== 1 ? "s" : ""}`;
+        sections[IS_PATCHED] = true;
+        sections.push({
+            section: "MUTUAL_GDMS",
+            text: getMutualGDMCountText(user)
+        });
    },

    renderMutualGDMs: ErrorBoundary.wrap(({ user, onClose }: { user: User, onClose: () => void; }) => {
-        const entries = ChannelStore.getSortedPrivateChannels().filter(c => c.isGroupDM() && c.recipients.includes(user.id)).map(c => (
-            <Clickable
-                className={ProfileListClasses.listRow}
-                onClick={() => {
-                    onClose();
-                    SelectedChannelActionCreators.selectPrivateChannel(c.id);
-                }}
-            >
-                <Avatar
-                    src={IconUtils.getChannelIconURL({ id: c.id, icon: c.icon, size: 32 })}
-                    size="SIZE_40"
-                    className={ProfileListClasses.listAvatar}
-                >
-                </Avatar>
-                <div className={ProfileListClasses.listRowContent}>
-                    <div className={ProfileListClasses.listName}>{getGroupDMName(c)}</div>
-                    <div className={GuildLabelClasses.guildNick}>{c.recipients.length + 1} Members</div>
-                </div>
-            </Clickable>
-        ));
+        const mutualGDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
+
+        const entries = renderClickableGDMs(mutualGDms, onClose);

        return (
            <ScrollerThin
@ -120,5 +136,24 @@ export default definePlugin({
                }
            </ScrollerThin>
        );
+    }),
+
+    renderDMPageList: ErrorBoundary.wrap(({ user, Divider, listStyle }: { user: User, Divider: JSX.Element, listStyle: string; }) => {
+        const mutualGDms = getMutualGroupDms(user.id);
+        if (mutualGDms.length === 0) return null;
+
+        const header = getMutualGDMCountText(user);
+
+        return (
+            <>
+                {Divider}
+                <ExpandableList
+                    className={listStyle}
+                    header={header}
+                    isLoadingHeader={false}
+                    children={renderClickableGDMs(mutualGDms, () => { })}
+                />
+            </>
+        );
    })
 });
--- a/src/plugins/noMaskedUrlPaste/README.md
+++ b/src/plugins/noMaskedUrlPaste/README.md
@ -0,0 +1,3 @@
+# NoMaskedUrlPaste
+
+Pasting a link while you have text selected will NOT paste your link as a masked link.
--- a/src/plugins/noMaskedUrlPaste/index.ts
+++ b/src/plugins/noMaskedUrlPaste/index.ts
@ -0,0 +1,23 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2023 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants.js";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "NoMaskedUrlPaste",
+    authors: [Devs.CatNoir],
+    description: "Pasting a link while having text selected will not paste as masked URL",
+    patches: [
+        {
+            find: ".selection,preventEmojiSurrogates:",
+            replacement: {
+                match: /if\(null!=\i.selection&&\i.\i.isExpanded\(\i.selection\)\)/,
+                replace: "if(false)"
+            }
+        }
+    ],
+});
--- a/src/plugins/noProfileThemes/index.ts
+++ b/src/plugins/noProfileThemes/index.ts
@ -18,36 +18,21 @@

 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
+import { UserStore } from "@webpack/common";

 export default definePlugin({
    name: "NoProfileThemes",
-    description: "Completely removes Nitro profile themes",
+    description: "Completely removes Nitro profile themes from everyone but yourself",
    authors: [Devs.TheKodeToad],
    patches: [
-        {
-            find: ".NITRO_BANNER,",
-            replacement: {
-                // = isPremiumAtLeast(user.premiumType, TIER_2)
-                match: /=(?=\i\.\i\.isPremiumAtLeast\(null==(\i))/,
-                // = user.banner && isPremiumAtLeast(user.premiumType, TIER_2)
-                replace: "=(arguments[0]?.bannerSrc||$1?.banner)&&"
-            }
-        },
-        {
-            find: ".avatarPositionPremiumNoBanner,default:",
-            replacement: {
-                // premiumUserWithoutBanner: foo().avatarPositionPremiumNoBanner, default: foo().avatarPositionNormal
-                match: /\.avatarPositionPremiumNoBanner(?=,default:\i\.(\i))/,
-                // premiumUserWithoutBanner: foo().avatarPositionNormal...
-                replace: ".$1"
-            }
-        },
        {
            find: "hasThemeColors(){",
            replacement: {
                match: /get canUsePremiumProfileCustomization\(\){return /,
-                replace: "$&false &&"
+                replace: "$&$self.isCurrentUser(this.userId)&&"
            }
-        }
-    ]
+        },
+    ],
+
+    isCurrentUser: (userId: string) => userId === UserStore.getCurrentUser()?.id,
 });
--- a/src/plugins/openInApp/index.ts
+++ b/src/plugins/openInApp/index.ts
@ -33,7 +33,7 @@ interface URLReplacementRule {
 // Do not forget to add protocols to the ALLOWED_PROTOCOLS constant
 const UrlReplacementRules: Record<string, URLReplacementRule> = {
    spotify: {
-        match: /^https:\/\/open\.spotify\.com\/(track|album|artist|playlist|user|episode)\/(.+)(?:\?.+?)?$/,
+        match: /^https:\/\/open\.spotify\.com\/(?:intl-[a-z]{2}\/)?(track|album|artist|playlist|user|episode)\/(.+)(?:\?.+?)?$/,
        replace: (_, type, id) => `spotify://${type}/${id}`,
        description: "Open Spotify links in the Spotify app",
        shortlinkMatch: /^https:\/\/spotify\.link\/.+$/,
--- a/src/plugins/pauseInvitesForever/index.tsx
+++ b/src/plugins/pauseInvitesForever/index.tsx
@ -19,16 +19,11 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { findLazy } from "@webpack";
 import { Constants, GuildStore, i18n, RestAPI } from "@webpack/common";

-const InvitesDisabledExperiment = findLazy(m => m.definition?.id === "2022-07_invites_disabled");
-
 function showDisableInvites(guildId: string) {
-    // Once the experiment is removed, this should keep working
-    const { enableInvitesDisabled } = InvitesDisabledExperiment?.getCurrentConfig?.({ guildId }) ?? { enableInvitesDisabled: true };
    // @ts-ignore
-    return enableInvitesDisabled && !GuildStore.getGuild(guildId).hasFeature("INVITES_DISABLED");
+    return !GuildStore.getGuild(guildId).hasFeature("INVITES_DISABLED");
 }

 function disableInvites(guildId: string) {
--- a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
@ -21,8 +21,10 @@ import { Flex } from "@components/Flex";
 import { InfoIcon, OwnerCrownIcon } from "@components/Icons";
 import { getUniqueUsername } from "@utils/discord";
 import { ModalCloseButton, ModalContent, ModalHeader, ModalProps, ModalRoot, ModalSize, openModal } from "@utils/modal";
-import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
-import type { Guild } from "discord-types/general";
+import { findByCodeLazy } from "@webpack";
+import { Clipboard, ContextMenuApi, FluxDispatcher, GuildMemberStore, GuildStore, i18n, Menu, PermissionsBits, ScrollerThin, Text, Tooltip, useEffect, UserStore, useState, useStateFromStores } from "@webpack/common";
+import { UnicodeEmoji } from "@webpack/types";
+import type { Guild, Role, User } from "discord-types/general";

 import { settings } from "..";
 import { cl, getPermissionDescription, getPermissionString } from "../utils";
@ -42,15 +44,15 @@ export interface RoleOrUserPermission {
    overwriteDeny?: bigint;
 }

-function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) {
-    return openModal(modalProps => (
-        <RolesAndUsersPermissions
-            modalProps={modalProps}
-            permissions={permissions}
-            guild={guild}
-            header={header}
-        />
-    ));
+type GetRoleIconData = (role: Role, size: number) => { customIconSrc?: string; unicodeEmoji?: UnicodeEmoji; };
+const getRoleIconData: GetRoleIconData = findByCodeLazy("convertSurrogateToName", "customIconSrc", "unicodeEmoji");
+
+function getRoleIconSrc(role: Role) {
+    const icon = getRoleIconData(role, 20);
+    if (!icon) return;
+
+    const { customIconSrc, unicodeEmoji } = icon;
+    return customIconSrc ?? unicodeEmoji?.url;
 }

 function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, header }: { permissions: Array<RoleOrUserPermission>; guild: Guild; modalProps: ModalProps; header: string; }) {
@ -86,31 +88,34 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
            size={ModalSize.LARGE}
        >
            <ModalHeader>
-                <Text className={cl("perms-title")} variant="heading-lg/semibold">{header} permissions:</Text>
+                <Text className={cl("modal-title")} variant="heading-lg/semibold">{header} permissions:</Text>
                <ModalCloseButton onClick={modalProps.onClose} />
            </ModalHeader>

-            <ModalContent>
+            <ModalContent className={cl("modal-content")}>
                {!selectedItem && (
-                    <div className={cl("perms-no-perms")}>
+                    <div className={cl("modal-no-perms")}>
                        <Text variant="heading-lg/normal">No permissions to display!</Text>
                    </div>
                )}

                {selectedItem && (
-                    <div className={cl("perms-container")}>
-                        <div className={cl("perms-list")}>
+                    <div className={cl("modal-container")}>
+                        <ScrollerThin className={cl("modal-list")} orientation="auto">
                            {permissions.map((permission, index) => {
-                                const user = UserStore.getUser(permission.id ?? "");
-                                const role = roles[permission.id ?? ""];
+                                const user: User | undefined = UserStore.getUser(permission.id ?? "");
+                                const role: Role | undefined = roles[permission.id ?? ""];
+                                const roleIconSrc = role != null ? getRoleIconSrc(role) : undefined;

                                return (
-                                    <button
-                                        className={cl("perms-list-item-btn")}
+                                    <div
+                                        className={cl("modal-list-item-btn")}
                                        onClick={() => selectItem(index)}
+                                        role="button"
+                                        tabIndex={0}
                                    >
                                        <div
-                                            className={cl("perms-list-item", { "perms-list-item-active": selectedItemIndex === index })}
+                                            className={cl("modal-list-item", { "modal-list-item-active": selectedItemIndex === index })}
                                            onContextMenu={e => {
                                                if (permission.type === PermissionType.Role)
                                                    ContextMenuApi.openContextMenu(e, () => (
@ -124,7 +129,6 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
                                                    ContextMenuApi.openContextMenu(e, () => (
                                                        <UserContextMenu
                                                            userId={permission.id!}
-                                                            onClose={modalProps.onClose}
                                                        />
                                                    ));
                                                }
@ -132,13 +136,19 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
                                        >
                                            {(permission.type === PermissionType.Role || permission.type === PermissionType.Owner) && (
                                                <span
-                                                    className={cl("perms-role-circle")}
+                                                    className={cl("modal-role-circle")}
                                                    style={{ backgroundColor: role?.colorString ?? "var(--primary-300)" }}
                                                />
                                            )}
-                                            {permission.type === PermissionType.User && user !== undefined && (
+                                            {permission.type === PermissionType.Role && roleIconSrc != null && (
                                                <img
-                                                    className={cl("perms-user-img")}
+                                                    className={cl("modal-role-image")}
+                                                    src={roleIconSrc}
+                                                />
+                                            )}
+                                            {permission.type === PermissionType.User && user != null && (
+                                                <img
+                                                    className={cl("modal-user-img")}
                                                    src={user.getAvatarURL(void 0, void 0, false)}
                                                />
                                            )}
@ -147,28 +157,25 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
                                                    permission.type === PermissionType.Role
                                                        ? role?.name ?? "Unknown Role"
                                                        : permission.type === PermissionType.User
-                                                            ? (user && getUniqueUsername(user)) ?? "Unknown User"
+                                                            ? (user != null && getUniqueUsername(user)) ?? "Unknown User"
                                                            : (
                                                                <Flex style={{ gap: "0.2em", justifyItems: "center" }}>
                                                                    @owner
-                                                                    <OwnerCrownIcon
-                                                                        height={18}
-                                                                        width={18}
-                                                                        aria-hidden="true"
-                                                                    />
+                                                                    <OwnerCrownIcon height={18} width={18} aria-hidden="true" />
                                                                </Flex>
                                                            )
                                                }
                                            </Text>
                                        </div>
-                                    </button>
+                                    </div>
                                );
                            })}
-                        </div>
-                        <div className={cl("perms-perms")}>
+                        </ScrollerThin>
+                        <div className={cl("modal-divider")} />
+                        <ScrollerThin className={cl("modal-perms")} orientation="auto">
                            {Object.entries(PermissionsBits).map(([permissionName, bit]) => (
-                                <div className={cl("perms-perms-item")}>
-                                    <div className={cl("perms-perms-item-icon")}>
+                                <div className={cl("modal-perms-item")}>
+                                    <div className={cl("modal-perms-item-icon")}>
                                        {(() => {
                                            const { permissions, overwriteAllow, overwriteDeny } = selectedItem;

@ -192,11 +199,11 @@ function RolesAndUsersPermissionsComponent({ permissions, guild, modalProps, hea
                                    </Tooltip>
                                </div>
                            ))}
-                        </div>
+                        </ScrollerThin>
                    </div>
                )}
            </ModalContent>
-        </ModalRoot >
+        </ModalRoot>
    );
 }

@ -208,7 +215,7 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
            aria-label="Role Options"
        >
            <Menu.MenuItem
-                id="vc-copy-role-id"
+                id={cl("copy-role-id")}
                label={i18n.Messages.COPY_ID_ROLE}
                action={() => {
                    Clipboard.copy(roleId);
@ -217,14 +224,13 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str

            {(settings.store as any).unsafeViewAsRole && (
                <Menu.MenuItem
-                    id="vc-pw-view-as-role"
+                    id={cl("view-as-role")}
                    label={i18n.Messages.VIEW_AS_ROLE}
                    action={() => {
                        const role = GuildStore.getRole(guild.id, roleId);
                        if (!role) return;

                        onClose();
-
                        FluxDispatcher.dispatch({
                            type: "IMPERSONATE_UPDATE",
                            guildId: guild.id,
@ -235,15 +241,14 @@ function RoleContextMenu({ guild, roleId, onClose }: { guild: Guild; roleId: str
                                }
                            }
                        });
-                    }
-                    }
+                    }}
                />
            )}
        </Menu.Menu>
    );
 }

-function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => void; }) {
+function UserContextMenu({ userId }: { userId: string; }) {
    return (
        <Menu.Menu
            navId={cl("user-context-menu")}
@ -251,7 +256,7 @@ function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => v
            aria-label="User Options"
        >
            <Menu.MenuItem
-                id="vc-copy-user-id"
+                id={cl("copy-user-id")}
                label={i18n.Messages.COPY_ID_USER}
                action={() => {
                    Clipboard.copy(userId);
@ -263,4 +268,13 @@ function UserContextMenu({ userId, onClose }: { userId: string; onClose: () => v

 const RolesAndUsersPermissions = ErrorBoundary.wrap(RolesAndUsersPermissionsComponent);

-export default openRolesAndUsersPermissionsModal;
+export default function openRolesAndUsersPermissionsModal(permissions: Array<RoleOrUserPermission>, guild: Guild, header: string) {
+    return openModal(modalProps => (
+        <RolesAndUsersPermissions
+            modalProps={modalProps}
+            permissions={permissions}
+            guild={guild}
+            header={header}
+        />
+    ));
+}
--- a/src/plugins/permissionsViewer/components/UserPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/UserPermissions.tsx
@ -29,22 +29,65 @@ import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermi

 interface UserPermission {
    permission: string;
+    roleName: string;
    roleColor: string;
    rolePosition: number;
 }

 type UserPermissions = Array<UserPermission>;

-const Classes = proxyLazyWebpack(() =>
-    Object.assign({}, ...findBulk(
-        filters.byProps("roles", "rolePill", "rolePillBorder"),
-        filters.byProps("roleCircle", "dotBorderBase", "dotBorderColor"),
-        filters.byProps("roleNameOverflow", "root", "roleName", "roleRemoveButton")
-    ))
-) as Record<"roles" | "rolePill" | "rolePillBorder" | "desaturateUserColors" | "flex" | "alignCenter" | "justifyCenter" | "svg" | "background" | "dot" | "dotBorderColor" | "roleCircle" | "dotBorderBase" | "flex" | "alignCenter" | "justifyCenter" | "wrap" | "root" | "role" | "roleRemoveButton" | "roleDot" | "roleFlowerStar" | "roleRemoveIcon" | "roleRemoveIconFocused" | "roleVerifiedIcon" | "roleName" | "roleNameOverflow" | "actionButton" | "overflowButton" | "addButton" | "addButtonIcon" | "overflowRolesPopout" | "overflowRolesPopoutArrowWrapper" | "overflowRolesPopoutArrow" | "popoutBottom" | "popoutTop" | "overflowRolesPopoutHeader" | "overflowRolesPopoutHeaderIcon" | "overflowRolesPopoutHeaderText" | "roleIcon", string>;
+const { RoleRootClasses, RoleClasses, RoleBorderClasses } = proxyLazyWebpack(() => {
+    const [RoleRootClasses, RoleClasses, RoleBorderClasses] = findBulk(
+        filters.byProps("root", "expandButton", "collapseButton"),
+        filters.byProps("role", "roleCircle", "roleName"),
+        filters.byProps("roleCircle", "dot", "dotBorderColor")
+    ) as Record<string, string>[];

-function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen = false }: { guild: Guild; guildMember: GuildMember; showBorder: boolean; forceOpen?: boolean; }) {
-    const stns = settings.use(["permissionsSortOrder"]);
+    return { RoleRootClasses, RoleClasses, RoleBorderClasses };
+});
+
+interface FakeRoleProps extends React.HTMLAttributes<HTMLDivElement> {
+    text: string;
+    color: string;
+}
+
+function FakeRole({ text, color, ...props }: FakeRoleProps) {
+    return (
+        <div {...props} className={classes(RoleClasses.role)}>
+            <div className={RoleClasses.roleRemoveButton}>
+                <span
+                    className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
+                    style={{ backgroundColor: color }}
+                />
+            </div>
+            <div className={RoleClasses.roleName}>
+                <Text
+                    className={RoleClasses.roleNameOverflow}
+                    variant="text-xs/medium"
+                >
+                    {text}
+                </Text>
+            </div>
+        </div>
+    );
+}
+
+interface GrantedByTooltipProps {
+    roleName: string;
+    roleColor: string;
+}
+
+function GrantedByTooltip({ roleName, roleColor }: GrantedByTooltipProps) {
+    return (
+        <>
+            <Text variant="text-sm/medium">Granted By</Text>
+            <FakeRole text={roleName} color={roleColor} />
+        </>
+    );
+}
+
+function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { guild: Guild; guildMember: GuildMember; forceOpen?: boolean; }) {
+    const { permissionsSortOrder } = settings.use(["permissionsSortOrder"]);

    const [rolePermissions, userPermissions] = useMemo(() => {
        const userPermissions: UserPermissions = [];
@ -65,6 +108,7 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
            const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner";
            userPermissions.push({
                permission: OWNER,
+                roleName: "Owner",
                roleColor: "var(--primary-300)",
                rolePosition: Infinity
            });
@ -73,10 +117,11 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
        sortUserRoles(userRoles);

        for (const [permission, bit] of Object.entries(PermissionsBits)) {
-            for (const { permissions, colorString, position } of userRoles) {
+            for (const { permissions, colorString, position, name } of userRoles) {
                if ((permissions & bit) === bit) {
                    userPermissions.push({
                        permission: getPermissionString(permission),
+                        roleName: name,
                        roleColor: colorString || "var(--primary-300)",
                        rolePosition: position
                    });
@ -89,9 +134,7 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
        userPermissions.sort((a, b) => b.rolePosition - a.rolePosition);

        return [rolePermissions, userPermissions];
-    }, [stns.permissionsSortOrder]);
-
-    const { root, role, roleRemoveButton, roleNameOverflow, roles, rolePill, rolePillBorder, roleCircle, roleName } = Classes;
+    }, [permissionsSortOrder]);

    return (
        <ExpandableHeader
@ -108,46 +151,41 @@ function UserPermissionsComponent({ guild, guildMember, showBorder, forceOpen =
            onDropDownClick={state => settings.store.defaultPermissionsDropdownState = !state}
            defaultState={settings.store.defaultPermissionsDropdownState}
            buttons={[
-                (<Tooltip text={`Sorting by ${stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
+                <Tooltip text={`Sorting by ${permissionsSortOrder === PermissionsSortOrder.HighestRole ? "Highest Role" : "Lowest Role"}`}>
                    {tooltipProps => (
-                        <button
+                        <div
                            {...tooltipProps}
-                            className={cl("userperms-sortorder-btn")}
+                            className={cl("user-sortorder-btn")}
+                            role="button"
+                            tabIndex={0}
                            onClick={() => {
-                                stns.permissionsSortOrder = stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
+                                settings.store.permissionsSortOrder = permissionsSortOrder === PermissionsSortOrder.HighestRole ? PermissionsSortOrder.LowestRole : PermissionsSortOrder.HighestRole;
                            }}
                        >
                            <svg
                                width="20"
                                height="20"
                                viewBox="0 96 960 960"
-                                transform={stns.permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
+                                transform={permissionsSortOrder === PermissionsSortOrder.HighestRole ? "scale(1 1)" : "scale(1 -1)"}
                            >
                                <path fill="var(--text-normal)" d="M440 896V409L216 633l-56-57 320-320 320 320-56 57-224-224v487h-80Z" />
                            </svg>
-                        </button>
+                        </div>
                    )}
-                </Tooltip>)
+                </Tooltip>
            ]}>
            {userPermissions.length > 0 && (
-                <div className={classes(root, roles)}>
-                    {userPermissions.map(({ permission, roleColor }) => (
-                        <div className={classes(role, rolePill, showBorder ? rolePillBorder : null)}>
-                            <div className={roleRemoveButton}>
-                                <span
-                                    className={roleCircle}
-                                    style={{ backgroundColor: roleColor }}
-                                />
-                            </div>
-                            <div className={roleName}>
-                                <Text
-                                    className={roleNameOverflow}
-                                    variant="text-xs/medium"
-                                >
-                                    {permission}
-                                </Text>
-                            </div>
-                        </div>
+                <div className={classes(RoleRootClasses.root)}>
+                    {userPermissions.map(({ permission, roleColor, roleName }) => (
+                        <Tooltip
+                            text={<GrantedByTooltip roleName={roleName} roleColor={roleColor} />}
+                            tooltipClassName={cl("granted-by-container")}
+                            tooltipContentClassName={cl("granted-by-content")}
+                        >
+                            {tooltipProps => (
+                                <FakeRole {...tooltipProps} text={permission} color={roleColor} />
+                            )}
+                        </Tooltip>
                    ))}
                </div>
            )}
--- a/src/plugins/permissionsViewer/index.tsx
+++ b/src/plugins/permissionsViewer/index.tsx
@ -26,7 +26,7 @@ import { Devs } from "@utils/constants";
 import { classes } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
+import { Button, ChannelStore, Dialog, GuildMemberStore, GuildStore, match, Menu, PermissionsBits, Popout, TooltipContainer, UserStore } from "@webpack/common";
 import type { Guild, GuildMember } from "discord-types/general";

 import openRolesAndUsersPermissionsModal, { PermissionType, RoleOrUserPermission } from "./components/RolesAndUsersPermissions";
@ -54,12 +54,12 @@ export const settings = definePluginSettings({
        options: [
            { label: "Highest Role", value: PermissionsSortOrder.HighestRole, default: true },
            { label: "Lowest Role", value: PermissionsSortOrder.LowestRole }
-        ],
+        ]
    },
    defaultPermissionsDropdownState: {
        description: "Whether the permissions dropdown on user popouts should be open by default",
        type: OptionType.BOOLEAN,
-        default: false,
+        default: false
    }
 });

@ -73,14 +73,12 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
            action={() => {
                const guild = GuildStore.getGuild(guildId);

-                let permissions: RoleOrUserPermission[];
-                let header: string;
-
-                switch (type) {
-                    case MenuItemParentType.User: {
+                const { permissions, header } = match(type)
+                    .returnType<{ permissions: RoleOrUserPermission[], header: string; }>()
+                    .with(MenuItemParentType.User, () => {
                        const member = GuildMemberStore.getMember(guildId, id!);

-                        permissions = getSortedRoles(guild, member)
+                        const permissions: RoleOrUserPermission[] = getSortedRoles(guild, member)
                            .map(role => ({
                                type: PermissionType.Role,
                                ...role
@ -93,37 +91,37 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
                            });
                        }

-                        header = member.nick ?? UserStore.getUser(member.userId).username;
-
-                        break;
-                    }
-
-                    case MenuItemParentType.Channel: {
+                        return {
+                            permissions,
+                            header: member.nick ?? UserStore.getUser(member.userId).username
+                        };
+                    })
+                    .with(MenuItemParentType.Channel, () => {
                        const channel = ChannelStore.getChannel(id!);

-                        permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({
+                        const permissions = sortPermissionOverwrites(Object.values(channel.permissionOverwrites).map(({ id, allow, deny, type }) => ({
                            type: type as PermissionType,
                            id,
                            overwriteAllow: allow,
                            overwriteDeny: deny
                        })), guildId);

-                        header = channel.name;
-
-                        break;
-                    }
-
-                    default: {
-                        permissions = Object.values(GuildStore.getRoles(guild.id)).map(role => ({
+                        return {
+                            permissions,
+                            header: channel.name
+                        };
+                    })
+                    .otherwise(() => {
+                        const permissions = Object.values(GuildStore.getRoles(guild.id)).map(role => ({
                            type: PermissionType.Role,
                            ...role
                        }));

-                        header = guild.name;
-
-                        break;
-                    }
-                }
+                        return {
+                            permissions,
+                            header: guild.name
+                        };
+                    });

                openRolesAndUsersPermissionsModal(permissions, guild, header);
            }}
@ -133,32 +131,34 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {

 function makeContextMenuPatch(childId: string | string[], type?: MenuItemParentType): NavContextMenuPatchCallback {
    return (children, props) => {
-        if (!props) return;
-        if ((type === MenuItemParentType.User && !props.user) || (type === MenuItemParentType.Guild && !props.guild) || (type === MenuItemParentType.Channel && (!props.channel || !props.guild)))
+        if (
+            !props ||
+            (type === MenuItemParentType.User && !props.user) ||
+            (type === MenuItemParentType.Guild && !props.guild) ||
+            (type === MenuItemParentType.Channel && (!props.channel || !props.guild))
+        ) {
            return;
+        }

        const group = findGroupChildrenByChildId(childId, children);

-        const item = (() => {
-            switch (type) {
-                case MenuItemParentType.User:
-                    return MenuItem(props.guildId, props.user.id, type);
-                case MenuItemParentType.Channel:
-                    return MenuItem(props.guild.id, props.channel.id, type);
-                case MenuItemParentType.Guild:
-                    return MenuItem(props.guild.id);
-                default:
-                    return null;
-            }
-        })();
+        const item = match(type)
+            .with(MenuItemParentType.User, () => MenuItem(props.guildId, props.user.id, type))
+            .with(MenuItemParentType.Channel, () => MenuItem(props.guild.id, props.channel.id, type))
+            .with(MenuItemParentType.Guild, () => MenuItem(props.guild.id))
+            .otherwise(() => null);
+

        if (item == null) return;

-        if (group)
-            group.push(item);
-        else if (childId === "roles" && props.guildId)
-            // "roles" may not be present due to the member not having any roles. In that case, add it above "Copy ID"
+        if (group) {
+            return group.push(item);
+        }
+
+        // "roles" may not be present due to the member not having any roles. In that case, add it above "Copy ID"
+        if (childId === "roles" && props.guildId) {
            children.splice(-1, 0, <Menu.MenuGroup>{item}</Menu.MenuGroup>);
+        }
    };
 }

@ -169,32 +169,22 @@ export default definePlugin({
    settings,

    patches: [
-        {
-            find: ".popularApplicationCommandIds,",
-            replacement: {
-                match: /showBorder:(.{0,60})}\),(?<=guild:(\i),guildMember:(\i),.+?)/,
-                replace: (m, showBoder, guild, guildMember) => `${m}$self.UserPermissions(${guild},${guildMember},${showBoder}),`
-            }
-        },
        {
            find: ".VIEW_ALL_ROLES,",
            replacement: {
-                match: /children:"\+"\.concat\(\i\.length-\i\.length\).{0,20}\}\),/,
+                match: /\.collapseButton,.+?}\)}\),/,
                replace: "$&$self.ViewPermissionsButton(arguments[0]),"
            }
        }
    ],

-    UserPermissions: (guild: Guild, guildMember: GuildMember | undefined, showBorder: boolean) =>
-        !!guildMember && <UserPermissions guild={guild} guildMember={guildMember} showBorder={showBorder} />,
-
    ViewPermissionsButton: ErrorBoundary.wrap(({ guild, guildMember }: { guild: Guild; guildMember: GuildMember; }) => (
        <Popout
            position="bottom"
            align="center"
            renderPopout={() => (
                <Dialog className={PopoutClasses.container} style={{ width: "500px" }}>
-                    <UserPermissions guild={guild} guildMember={guildMember} showBorder forceOpen />
+                    <UserPermissions guild={guild} guildMember={guildMember} forceOpen />
                </Dialog>
            )}
        >
--- a/src/plugins/permissionsViewer/styles.css
+++ b/src/plugins/permissionsViewer/styles.css
@ -1,20 +1,6 @@
 /* User Permissions Component */

-.vc-permviewer-userperms-title-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 10px;
-    margin-bottom: 6px;
-}
-
-.vc-permviewer-userperms-btns-container {
-    display: flex;
-    align-items: center;
-}
-
-.vc-permviewer-userperms-sortorder-btn {
-    all: unset;
+.vc-permviewer-user-sortorder-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
@ -23,27 +9,17 @@
    height: 24px;
 }

-.vc-permviewer-userperms-permdetails-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
-.vc-permviewer-userperms-toggleperms-btn {
-    all: unset;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-}
-
 /*  RolesAndUsersPermissions Component */

-.vc-permviewer-perms-title {
+.vc-permviewer-modal-content {
+    padding: 16px 4px 16px 16px;
+}
+
+.vc-permviewer-modal-title {
    flex-grow: 1;
 }

-.vc-permviewer-perms-no-perms {
+.vc-permviewer-modal-no-perms {
    width: 100%;
    height: 100%;
    display: flex;
@ -52,101 +28,103 @@
    text-align: center;
 }

-.vc-permviewer-perms-container {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    grid-template-areas: "list permissions";
-    padding: 16px 0;
+.vc-permviewer-modal-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    gap: 8px;
 }

-.vc-permviewer-perms-list {
-    grid-area: list;
+.vc-permviewer-modal-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
-    border-right: 2px solid var(--background-modifier-active);
+    padding-right: 8px;
+    width: 200px;
 }

-.vc-permviewer-perms-list-item-btn {
-    all: unset;
+.vc-permviewer-modal-list-item-btn {
    cursor: pointer;
 }

-.vc-permviewer-perms-list-item {
+.vc-permviewer-modal-list-item {
    display: flex;
    align-items: center;
-    padding: 8px 5px;
-    cursor: pointer;
-    width: 230px;
+    gap: 8px;
+    padding: 8px;
    border-radius: 5px;
 }

-.vc-permviewer-perms-list-item:hover {
+.vc-permviewer-modal-list-item:hover {
    background-color: var(--background-modifier-hover);
 }

-.vc-permviewer-perms-list-item-active {
+.vc-permviewer-modal-list-item-active {
    background-color: var(--background-modifier-selected);
 }

-.vc-permviewer-perms-list-item > div {
+.vc-permviewer-modal-list-item > div {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
 }

-.vc-permviewer-perms-role-circle {
+.vc-permviewer-modal-role-circle {
    border-radius: 50%;
    width: 12px;
    height: 12px;
-    margin-left: 3px;
-    margin-right: 11px;
    flex-shrink: 0;
 }

-.vc-permviewer-perms-user-img {
+.vc-permviewer-modal-role-image {
+    width: 20px;
+    height: 20px;
+    object-fit: contain;
+}
+
+.vc-permviewer-modal-user-img {
    border-radius: 50%;
    width: 20px;
    height: 20px;
-    margin-right: 6px;
 }

-.vc-permviewer-perms-perms {
-    grid-area: permissions;
+.vc-permviewer-modal-divider {
+    width: 2px;
+    background-color: var(--background-modifier-active);
+}
+
+.vc-permviewer-modal-perms {
    display: flex;
    flex-direction: column;
-    margin-left: 5px;
+    padding-right: 8px;
 }

-.vc-permviewer-perms-perms-item {
-    position: relative;
+.vc-permviewer-modal-perms-item {
    display: flex;
    align-items: center;
-    padding: 10px;
+    gap: 5px;
+    padding: 10px 2px 10px 10px;
    border-bottom: 2px solid var(--background-modifier-active);
 }

-.vc-permviewer-perms-perms-item:last-child {
+.vc-permviewer-modal-perms-item:last-child {
    border: 0;
 }

-.vc-permviewer-perms-perms-item-icon {
+.vc-permviewer-modal-perms-item-icon {
    border: 1px solid var(--background-modifier-selected);
    width: 24px;
    height: 24px;
-    margin-right: 5px;
 }

-.vc-permviewer-perms-perms-item .vc-info-icon {
+.vc-permviewer-modal-perms-item .vc-info-icon {
    color: var(--interactive-muted);
+    margin-left: auto;
    cursor: pointer;
-    position: absolute;
-    right: 0;
-    scale: 0.9;
    transition: color ease-in 0.1s;
 }

-.vc-permviewer-perms-perms-item .vc-info-icon:hover {
+.vc-permviewer-modal-perms-item .vc-info-icon:hover {
    color: var(--interactive-active);
 }

@ -167,3 +145,14 @@
    background: rgb(var(--bg-overlay-color)/var(--bg-overlay-opacity-6));
    border-color: var(--profile-body-border-color)
 }
+
+.vc-permviewer-granted-by-container {
+    max-width: 300px;
+    width: auto;
+}
+
+.vc-permviewer-granted-by-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
--- a/src/plugins/pictureInPicture/index.tsx
+++ b/src/plugins/pictureInPicture/index.tsx
@ -24,13 +24,13 @@ const settings = definePluginSettings({
 export default definePlugin({
    name: "PictureInPicture",
    description: "Adds picture in picture to videos (next to the Download button)",
-    authors: [Devs.Nobody],
+    authors: [Devs.Lumap],
    settings,
    patches: [
        {
-            find: ".nonMediaMosaicItem]",
+            find: ".removeMosaicItemHoverButton),",
            replacement: {
-                match: /\.nonMediaMosaicItem\]:!(\i).{0,50}?children:\[(\S)/,
+                match: /\.nonMediaMosaicItem\]:!(\i).{0,50}?children:\[\S,(\S)/,
                replace: "$&,$1&&$2&&$self.renderPiPButton(),"
            },
        },
--- a/src/plugins/pronoundb/index.ts
+++ b/src/plugins/pronoundb/index.ts
@ -26,11 +26,6 @@ import { CompactPronounsChatComponentWrapper, PronounsChatComponentWrapper } fro
 import { useProfilePronouns } from "./pronoundbUtils";
 import { settings } from "./settings";

-const PRONOUN_TOOLTIP_PATCH = {
-    match: /text:(.{0,10}.Messages\.USER_PROFILE_PRONOUNS)(?=,)/,
-    replace: '$& + (typeof vcPronounSource !== "undefined" ? ` (${vcPronounSource})` : "")'
-};
-
 export default definePlugin({
    name: "PronounDB",
    authors: [Devs.Tyman, Devs.TheKodeToad, Devs.Ven, Devs.Elvyra],
@ -51,26 +46,23 @@ export default definePlugin({
                }
            ]
        },
-        // Patch the profile popout username header to use our pronoun hook instead of Discord's pronouns
+
        {
-            find: ".pronouns,children",
+            find: ".Messages.USER_PROFILE_PRONOUNS",
+            group: true,
            replacement: [
                {
-                    match: /{user:(\i),[^}]*,pronouns:(\i),[^}]*}=\i.*?;(?=return)/,
-                    replace: "$&let vcPronounSource;[$2,vcPronounSource]=$self.useProfilePronouns($1.id);"
+                    match: /\.PANEL},/,
+                    replace: "$&[vcPronoun,vcPronounSource,vcHasPendingPronouns]=$self.useProfilePronouns(arguments[0].user?.id),"
                },
-                PRONOUN_TOOLTIP_PATCH
-            ]
-        },
-        // Patch the profile modal username header to use our pronoun hook instead of Discord's pronouns
-        {
-            find: ".nameTagSmall)",
-            replacement: [
                {
-                    match: /\.getName\(\i\);(?<=displayProfile.{0,200})/,
-                    replace: "$&const [vcPronounce,vcPronounSource]=$self.useProfilePronouns(arguments[0].user.id,true);if(arguments[0].displayProfile&&vcPronounce)arguments[0].displayProfile.pronouns=vcPronounce;"
+                    match: /text:\i\.\i.Messages.USER_PROFILE_PRONOUNS/,
+                    replace: '$&+vcHasPendingPronouns?"":` (${vcPronounSource})`'
                },
-                PRONOUN_TOOLTIP_PATCH
+                {
+                    match: /(\.pronounsText.+?children:)(\i)/,
+                    replace: "$1vcHasPendingPronouns?$2:vcPronoun"
+                }
            ]
        }
    ],
--- a/src/plugins/pronoundb/pronoundbUtils.ts
+++ b/src/plugins/pronoundb/pronoundbUtils.ts
@ -21,13 +21,16 @@ import { debounce } from "@shared/debounce";
 import { VENCORD_USER_AGENT } from "@shared/vencordUserAgent";
 import { getCurrentChannel } from "@utils/discord";
 import { useAwaiter } from "@utils/react";
+import { findStoreLazy } from "@webpack";
 import { UserProfileStore, UserStore } from "@webpack/common";

 import { settings } from "./settings";
 import { CachePronouns, PronounCode, PronounMapping, PronounsResponse } from "./types";

-type PronounsWithSource = [string | null, string];
-const EmptyPronouns: PronounsWithSource = [null, ""];
+const UserSettingsAccountStore = findStoreLazy("UserSettingsAccountStore");
+
+type PronounsWithSource = [pronouns: string | null, source: string, hasPendingPronouns: boolean];
+const EmptyPronouns: PronounsWithSource = [null, "", false];

 export const enum PronounsFormat {
    Lowercase = "LOWERCASE",
@ -75,13 +78,15 @@ export function useFormattedPronouns(id: string, useGlobalProfile: boolean = fal
        onError: e => console.error("Fetching pronouns failed: ", e)
    });

+    const hasPendingPronouns = UserSettingsAccountStore.getPendingPronouns() != null;
+
    if (settings.store.pronounSource === PronounSource.PreferDiscord && discordPronouns)
-        return [discordPronouns, "Discord"];
+        return [discordPronouns, "Discord", hasPendingPronouns];

    if (result && result !== PronounMapping.unspecified)
-        return [result, "PronounDB"];
+        return [result, "PronounDB", hasPendingPronouns];

-    return [discordPronouns, "Discord"];
+    return [discordPronouns, "Discord", hasPendingPronouns];
 }

 export function useProfilePronouns(id: string, useGlobalProfile: boolean = false): PronounsWithSource {
@ -147,7 +152,7 @@ async function bulkFetchPronouns(ids: string[]): Promise<PronounsResponse> {
    }
 }

-export function extractPronouns(pronounSet?: { [locale: string]: PronounCode[] }): string {
+export function extractPronouns(pronounSet?: { [locale: string]: PronounCode[]; }): string {
    if (!pronounSet || !pronounSet.en) return PronounMapping.unspecified;
    // PronounDB returns an empty set instead of {sets: {en: ["unspecified"]}}.
    const pronouns = pronounSet.en;
--- a/src/plugins/reviewDB/index.tsx
+++ b/src/plugins/reviewDB/index.tsx
@ -20,18 +20,16 @@ import "./style.css";

 import { NavContextMenuPatchCallback } from "@api/ContextMenu";
 import ErrorBoundary from "@components/ErrorBoundary";
-import { ExpandableHeader } from "@components/ExpandableHeader";
 import { NotesIcon, OpenExternalIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { classes } from "@utils/misc";
 import definePlugin from "@utils/types";
 import { findByPropsLazy } from "@webpack";
-import { Alerts, Button, Menu, Parser, TooltipContainer, useState } from "@webpack/common";
+import { Alerts, Button, Menu, Parser, TooltipContainer } from "@webpack/common";
 import { Guild, User } from "discord-types/general";

 import { Auth, initAuth, updateAuth } from "./auth";
 import { openReviewsModal } from "./components/ReviewModal";
-import ReviewsView from "./components/ReviewsView";
 import { NotificationType } from "./entities";
 import { getCurrentUserInfo, readNotification } from "./reviewDbApi";
 import { settings } from "./settings";
@ -79,17 +77,24 @@ export default definePlugin({

    patches: [
        {
-            find: "showBorder:null",
+            find: ".BITE_SIZE,user:",
            replacement: {
-                match: /user:(\i),setNote:\i,canDM.+?\}\)/,
-                replace: "$&,$self.getReviewsComponent($1)"
+                match: /{profileType:\i\.\i\.BITE_SIZE,children:\[/,
+                replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"
            }
        },
        {
-            find: ".BITE_SIZE,user:",
+            find: ".FULL_SIZE,user:",
            replacement: {
-                match: /(?<=\.BITE_SIZE,children:\[)\(0,\i\.jsx\)\(\i\.\i,\{user:(\i),/,
-                replace: "$self.BiteSizeReviewsButton({user:$1}),$&"
+                match: /{profileType:\i\.\i\.FULL_SIZE,children:\[/,
+                replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"
+            }
+        },
+        {
+            find: ".PANEL,isInteractionSource:",
+            replacement: {
+                match: /{profileType:\i\.\i\.PANEL,children:\[/,
+                replace: "$&$self.BiteSizeReviewsButton({user:arguments[0].user}),"
            }
        }
    ],
@ -148,31 +153,6 @@ export default definePlugin({
        }, 4000);
    },

-    getReviewsComponent: ErrorBoundary.wrap((user: User) => {
-        const [reviewCount, setReviewCount] = useState<number>();
-
-        return (
-            <ExpandableHeader
-                headerText="User Reviews"
-                onMoreClick={() => openReviewsModal(user.id, user.username)}
-                moreTooltipText={
-                    reviewCount && reviewCount > 50
-                        ? `View all ${reviewCount} reviews`
-                        : "Open Review Modal"
-                }
-                onDropDownClick={state => settings.store.reviewsDropdownState = !state}
-                defaultState={settings.store.reviewsDropdownState}
-            >
-                <ReviewsView
-                    discordId={user.id}
-                    name={user.username}
-                    onFetchReviews={r => setReviewCount(r.reviewCount)}
-                    showInput
-                />
-            </ExpandableHeader>
-        );
-    }, { message: "Failed to render Reviews" }),
-
    BiteSizeReviewsButton: ErrorBoundary.wrap(({ user }: { user: User; }) => {
        return (
            <TooltipContainer text="View Reviews">
--- a/src/plugins/showAllRoles/README.md
+++ b/src/plugins/showAllRoles/README.md
@ -1,6 +0,0 @@
-# ShowAllRoles
-
-Display all roles on the new profiles instead of limiting them to the default two rows.
-
-![image](https://github.com/Vendicated/Vencord/assets/71079641/3f021f03-c6f9-4fe5-83ac-a1891b5e4b37)
-
--- a/src/plugins/showConnections/index.tsx
+++ b/src/plugins/showConnections/index.tsx
@ -25,15 +25,12 @@ import { CopyIcon, LinkIcon } from "@components/Icons";
 import { Devs } from "@utils/constants";
 import { copyWithToast } from "@utils/misc";
 import definePlugin, { OptionType } from "@utils/types";
-import { findByCodeLazy, findByPropsLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
-import { Text, Tooltip, UserProfileStore } from "@webpack/common";
+import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { Tooltip, UserProfileStore } from "@webpack/common";
 import { User } from "discord-types/general";

 import { VerifiedIcon } from "./VerifiedIcon";

-const Section = findComponentByCodeLazy(".lastSection", "children:");
-const ThemeStore = findStoreLazy("ThemeStore");
-
 const useLegacyPlatformType: (platform: string) => string = findByCodeLazy(".TWITTER_LEGACY:");
 const platforms: { get(type: string): ConnectionPlatform; } = findByPropsLazy("isSupported", "getByUrl");
 const getProfileThemeProps = findByCodeLazy(".getPreviewThemeColors", "primaryColor:");
@ -76,7 +73,7 @@ interface ConnectionPlatform {
 }

 const profilePopoutComponent = ErrorBoundary.wrap(
-    (props: { user: User; displayProfile?: any; simplified?: boolean; }) => (
+    (props: { user: User; displayProfile?: any; }) => (
        <ConnectionsComponent
            {...props}
            id={props.user.id}
@ -86,17 +83,7 @@ const profilePopoutComponent = ErrorBoundary.wrap(
    { noop: true }
 );

-const profilePanelComponent = ErrorBoundary.wrap(
-    (props: { id: string; simplified?: boolean; }) => (
-        <ConnectionsComponent
-            {...props}
-            theme={ThemeStore.theme}
-        />
-    ),
-    { noop: true }
-);
-
-function ConnectionsComponent({ id, theme, simplified }: { id: string, theme: string, simplified?: boolean; }) {
+function ConnectionsComponent({ id, theme }: { id: string, theme: string; }) {
    const profile = UserProfileStore.getUserProfile(id);
    if (!profile)
        return null;
@ -105,31 +92,14 @@ function ConnectionsComponent({ id, theme, simplified }: { id: string, theme: st
    if (!connections?.length)
        return null;

-    const connectionsContainer = (
+    return (
        <Flex style={{
-            marginTop: !simplified ? "8px" : undefined,
            gap: getSpacingPx(settings.store.iconSpacing),
            flexWrap: "wrap"
        }}>
            {connections.map(connection => <CompactConnectionComponent connection={connection} theme={theme} />)}
        </Flex>
    );
-
-    if (simplified)
-        return connectionsContainer;
-
-    return (
-        <Section>
-            <Text
-                tag="h2"
-                variant="eyebrow"
-                style={{ color: "var(--header-primary)" }}
-            >
-                Connections
-            </Text>
-            {connectionsContainer}
-        </Section>
-    );
 }

 function CompactConnectionComponent({ connection, theme }: { connection: Connection, theme: string; }) {
@ -194,31 +164,17 @@ export default definePlugin({
    name: "ShowConnections",
    description: "Show connected accounts in user popouts",
    authors: [Devs.TheKodeToad],
+    settings,
+
    patches: [
        {
-            find: "{isUsingGuildBio:null!==(",
-            replacement: {
-                match: /,theme:\i\}\)(?=,.{0,150}setNote:)/,
-                replace: "$&,$self.profilePopoutComponent({ user: arguments[0].user, displayProfile: arguments[0].displayProfile })"
-            }
-        },
-        {
-            find: ".PROFILE_PANEL,",
-            replacement: {
-                // createElement(Divider, {}), createElement(NoteComponent)
-                match: /\(0,\i\.jsx\)\(\i\.\i,\{\}\).{0,100}setNote:(?=.+?channelId:(\i).id)/,
-                replace: "$self.profilePanelComponent({ id: $1.recipients[0] }),$&"
-            }
-        },
-        {
-            find: '"BiteSizeProfileBody"',
+            find: ".hasAvatarForGuild(null==",
            replacement: {
                match: /currentUser:\i,guild:\i}\)(?<=user:(\i),bio:null==(\i)\?.+?)/,
-                replace: "$&,$self.profilePopoutComponent({ user: $1, displayProfile: $2, simplified: true })"
+                replace: "$&,$self.profilePopoutComponent({ user: $1, displayProfile: $2 })"
            }
        }
    ],
-    settings,
+
    profilePopoutComponent,
-    profilePanelComponent
 });
--- a/src/plugins/showHiddenThings/index.ts
+++ b/src/plugins/showHiddenThings/index.ts
@ -51,7 +51,7 @@ export default definePlugin({
            },
        },
        {
-            find: "2022-07_invites_disabled",
+            find: "INVITES_DISABLED))||",
            predicate: () => settings.store.showInvitesPaused,
            replacement: {
                match: /\i\.\i\.can\(\i\.\i.MANAGE_GUILD,\i\)/,
--- a/src/plugins/spotifyControls/SpotifyStore.ts
+++ b/src/plugins/spotifyControls/SpotifyStore.ts
@ -55,6 +55,7 @@ interface PlayerState {

    // added by patch
    actual_repeat: Repeat;
+    shuffle: boolean;
 }

 interface Device {
@ -182,6 +183,7 @@ export const SpotifyStore = proxyLazyWebpack(() => {
            store.isPlaying = e.isPlaying ?? false;
            store.volume = e.volumePercent ?? 0;
            store.repeat = e.actual_repeat || "off";
+            store.shuffle = e.shuffle ?? false;
            store.position = e.position ?? 0;
            store.isSettingPosition = false;
            store.emitChange();
--- a/src/plugins/spotifyControls/index.tsx
+++ b/src/plugins/spotifyControls/index.tsx
@ -70,21 +70,20 @@ export default definePlugin({
                replace: "false",
            }]
        },
-        // Discord doesn't give you the repeat kind, only a boolean
        {
            find: 'repeat:"off"!==',
-            replacement: {
-                match: /repeat:"off"!==(.{1,3}),/,
-                replace: "actual_repeat:$1,$&"
-            }
+            replacement: [
+                {
+                    // Discord doesn't give you shuffle state and the repeat kind, only a boolean
+                    match: /repeat:"off"!==(\i),/,
+                    replace: "shuffle:arguments[2]?.shuffle_state??false,actual_repeat:$1,$&"
+                },
+                {
+                    match: /(?<=artists.filter\(\i=>).{0,10}\i\.id\)&&/,
+                    replace: ""
+                }
+            ]
        },
-        {
-            find: "artists.filter",
-            replacement: {
-                match: /(?<=artists.filter\(\i=>).{0,10}\i\.id\)&&/,
-                replace: ""
-            }
-        }
    ],

    start: () => toggleHoverControls(Settings.plugins.SpotifyControls.hoverControls),
--- a/src/plugins/stickerPaste/README.md
+++ b/src/plugins/stickerPaste/README.md
@ -0,0 +1,3 @@
+# StickerPaste
+
+Makes picking a sticker in the sticker picker insert it into the chatbox instead of instantly sending.
--- a/src/plugins/stickerPaste/index.ts
+++ b/src/plugins/stickerPaste/index.ts
@ -8,15 +8,16 @@ import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";

 export default definePlugin({
-    name: "ShowAllRoles",
-    description: "Show all roles in new profiles.",
-    authors: [Devs.Luna],
+    name: "StickerPaste",
+    description: "Makes picking a sticker in the sticker picker insert it into the chatbox instead of instantly sending",
+    authors: [Devs.ImBanana],
+
    patches: [
        {
-            find: ".Messages.VIEW_ALL_ROLES",
+            find: ".stickers,previewSticker:",
            replacement: {
-                match: /(\i)\.slice\(0,\i\)/,
-                replace: "$1"
+                match: /if\(\i\.\i\.getUploadCount/,
+                replace: "return true;$&",
            }
        }
    ]
--- a/src/plugins/superReactionTweaks/index.ts
+++ b/src/plugins/superReactionTweaks/index.ts
@ -22,10 +22,10 @@ export const settings = definePluginSettings({
    },

    superReactionPlayingLimit: {
-        description: "Max Super Reactions to play at once",
+        description: "Max Super Reactions to play at once. 0 to disable playing Super Reactions",
        type: OptionType.SLIDER,
        default: 20,
-        markers: [5, 10, 20, 40, 60, 80, 100],
+        markers: [0, 5, 10, 20, 40, 60, 80, 100],
        stickToMarkers: true,
    },
 }, {
@ -58,6 +58,7 @@ export default definePlugin({

    shouldPlayBurstReaction(playingCount: number) {
        if (settings.store.unlimitedSuperReactionPlaying) return true;
+        if (settings.store.superReactionPlayingLimit === 0) return false;
        if (playingCount <= settings.store.superReactionPlayingLimit) return true;
        return false;
    },
--- a/src/plugins/timeBarAllActivities/README.md
+++ b/src/plugins/timeBarAllActivities/README.md
@ -0,0 +1,5 @@
+# TimeBarAllActivities
+
+Adds the Spotify time bar to all activities if they have start and end timestamps.
+
+![](https://github.com/user-attachments/assets/9fbbe33c-8218-43c9-8b8d-f907a4e809fe)
--- a/src/plugins/timeBarAllActivities/index.tsx
+++ b/src/plugins/timeBarAllActivities/index.tsx
@ -0,0 +1,76 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { definePluginSettings } from "@api/Settings";
+import { Devs } from "@utils/constants";
+import definePlugin, { OptionType } from "@utils/types";
+import { findComponentByCodeLazy } from "@webpack";
+
+interface Activity {
+    timestamps?: ActivityTimestamps;
+}
+
+interface ActivityTimestamps {
+    start?: string;
+    end?: string;
+}
+
+const ActivityTimeBar = findComponentByCodeLazy<ActivityTimestamps>(".Millis.HALF_SECOND", ".bar", ".progress");
+
+export const settings = definePluginSettings({
+    hideActivityDetailText: {
+        type: OptionType.BOOLEAN,
+        description: "Hide the large title text next to the activity",
+        default: true,
+    },
+    hideActivityTimerBadges: {
+        type: OptionType.BOOLEAN,
+        description: "Hide the timer badges next to the activity",
+        default: true,
+    }
+});
+
+export default definePlugin({
+    name: "TimeBarAllActivities",
+    description: "Adds the Spotify time bar to all activities if they have start and end timestamps",
+    authors: [Devs.fawn, Devs.niko],
+    settings,
+    patches: [
+        {
+            find: ".Messages.USER_ACTIVITY_PLAYING",
+            replacement: [
+                // Insert Spotify time bar component
+                {
+                    match: /\(0,.{0,30}activity:(\i),className:\i\.badges\}\)/g,
+                    replace: "$&,$self.getTimeBar($1)"
+                },
+                // Hide the large title on listening activities, to make them look more like Spotify (also visible from hovering over the large icon)
+                {
+                    match: /(\i).type===(\i\.\i)\.WATCHING/,
+                    replace: "($self.settings.store.hideActivityDetailText&&$self.isActivityTimestamped($1)&&$1.type===$2.LISTENING)||$&"
+                }
+            ]
+        },
+        // Hide the "badge" timers that count the time since the activity starts
+        {
+            find: ".TvIcon).otherwise",
+            replacement: {
+                match: /null!==\(\i=null===\(\i=(\i)\.timestamps\).{0,50}created_at/,
+                replace: "($self.settings.store.hideActivityTimerBadges&&$self.isActivityTimestamped($1))?null:$&"
+            }
+        }
+    ],
+
+    isActivityTimestamped(activity: Activity) {
+        return activity.timestamps != null && activity.timestamps.start != null && activity.timestamps.end != null;
+    },
+
+    getTimeBar(activity: Activity) {
+        if (this.isActivityTimestamped(activity)) {
+            return <ActivityTimeBar start={activity.timestamps!.start} end={activity.timestamps!.end} />;
+        }
+    }
+});
--- a/src/plugins/userVoiceShow/components/VoiceChannelSection.tsx
+++ b/src/plugins/userVoiceShow/components/VoiceChannelSection.tsx
@ -18,12 +18,11 @@

 import "./VoiceChannelSection.css";

-import { findByCodeLazy, findByPropsLazy } from "@webpack";
+import { findByPropsLazy } from "@webpack";
 import { Button, Forms, PermissionStore, Toasts } from "@webpack/common";
 import { Channel } from "discord-types/general";

 const ChannelActions = findByPropsLazy("selectChannel", "selectVoiceChannel");
-const UserPopoutSection = findByCodeLazy(".lastSection", "children:");

 const CONNECT = 1n << 20n;

@ -34,7 +33,8 @@ interface VoiceChannelFieldProps {
 }

 export const VoiceChannelSection = ({ channel, label, showHeader }: VoiceChannelFieldProps) => (
-    <UserPopoutSection>
+    // @TODO The div is supposed to be a UserPopoutSection
+    <div>
        {showHeader && <Forms.FormTitle className="vc-uvs-header">In a voice channel</Forms.FormTitle>}
        <Button
            className="vc-uvs-button"
@ -57,5 +57,5 @@ export const VoiceChannelSection = ({ channel, label, showHeader }: VoiceChannel
        >
            {label}
        </Button>
-    </UserPopoutSection>
+    </div>
 );
--- a/src/plugins/userVoiceShow/index.tsx
+++ b/src/plugins/userVoiceShow/index.tsx
@ -84,7 +84,7 @@ export default definePlugin({
        );
    },

-    patchPopout: ({ user }: UserProps) => {
+    patchProfilePopout: ({ user }: UserProps) => {
        const isSelfUser = user.id === UserStore.getCurrentUser().id;
        return (
            <div className={isSelfUser ? "vc-uvs-popout-margin-self" : ""}>
@ -94,21 +94,7 @@ export default definePlugin({
    },

    patches: [
-        // above message box
-        {
-            find: ".popularApplicationCommandIds,",
-            replacement: {
-                match: /(?<=,)(?=!\i&&!\i&&.{0,50}setNote:)/,
-                replace: "$self.patchPopout(arguments[0]),",
-            }
-        },
-        // below username
-        {
-            find: ".Messages.MUTUAL_GUILDS_WITH_END_COUNT", // Lazy-loaded
-            replacement: {
-                match: /\.body.+?displayProfile:\i}\),/,
-                replace: "$&$self.patchModal(arguments[0]),",
-            }
-        }
+        // @TODO Maybe patch UserVoiceShow in simplified profile popout
+        // @TODO Patch new profile modal
    ],
 });
--- a/src/plugins/usrbg/index.tsx
+++ b/src/plugins/usrbg/index.tsx
@ -57,14 +57,7 @@ export default definePlugin({
    settings,
    patches: [
        {
-            find: ".NITRO_BANNER,",
-            replacement: {
-                match: /\?\(0,\i\.jsx\)\(\i,{type:\i,shown/,
-                replace: "&&$self.shouldShowBadge(arguments[0])$&"
-            }
-        },
-        {
-            find: ".banner)==null",
+            find: '.banner)==null?"COMPLETE"',
            replacement: {
                match: /(?<=void 0:)\i.getPreviewBanner\(\i,\i,\i\)/,
                replace: "$self.patchBannerUrl(arguments[0])||$&"
@ -109,10 +102,6 @@ export default definePlugin({
        if (this.userHasBackground(displayProfile?.userId)) return this.getImageUrl(displayProfile?.userId);
    },

-    shouldShowBadge({ displayProfile, user }: any) {
-        return displayProfile?.banner && (!this.userHasBackground(user.id) || settings.store.nitroFirst);
-    },
-
    userHasBackground(userId: string) {
        return !!this.data?.users[userId];
    },
--- a/src/plugins/viewIcons/index.tsx
+++ b/src/plugins/viewIcons/index.tsx
@ -192,31 +192,12 @@ export default definePlugin({
            },
            all: true
        },
-        // Old Profiles Modal pfp
-        {
-            find: ".MODAL,hasProfileEffect",
-            replacement: {
-                match: /\{src:(\i)(?=,avatarDecoration)/,
-                replace: "{src:$1,onClick:()=>$self.openImage($1)"
-            }
-        },
        // Banners
-        ...[".NITRO_BANNER,", "=!1,canUsePremiumCustomization:"].map(find => ({
-            find,
-            replacement: {
-                // style: { backgroundImage: shouldShowBanner ? "url(".concat(bannerUrl,
-                match: /style:\{(?=backgroundImage:(null!=\i)\?"url\("\.concat\((\i),)/,
-                replace:
-                    // onClick: () => shouldShowBanner && ev.target.style.backgroundImage && openImage(bannerUrl), style: { cursor: shouldShowBanner ? "pointer" : void 0,
-                    'onClick:ev=>$1&&ev.target.style.backgroundImage&&$self.openImage($2),style:{cursor:$1?"pointer":void 0,'
-            }
-        })),
-        // Old User DMs "User Profile" popup in the right
        {
-            find: ".avatarPositionPanel",
+            find: 'backgroundColor:"COMPLETE"',
            replacement: {
-                match: /(avatarWrapperNonUserBot.{0,50})onClick:(\i\|\|\i)\?void 0(?<=,avatarSrc:(\i).+?)/,
-                replace: "$1style:($2)?{cursor:\"pointer\"}:{},onClick:$2?()=>{$self.openImage($3)}"
+                match: /(\.banner,.+?),style:{(?=.+?backgroundImage:null!=(\i)\?"url\("\.concat\(\2,)/,
+                replace: (_, rest, bannerSrc) => `${rest},onClick:()=>${bannerSrc}!=null&&$self.openImage(${bannerSrc}),style:{cursor:${bannerSrc}!=null?"pointer":void 0,`
            }
        },
        // Group DMs top small & large icon
--- a/src/plugins/volumeBooster/README.md
+++ b/src/plugins/volumeBooster/README.md
@ -0,0 +1,9 @@
+# Volume Booster
+
+Allows you to boost the volume over 200% on desktop and over 100% on other clients.
+
+Works on users, bots, and streams!
+
+![the volume being moved up to 270% on vesktop](https://github.com/user-attachments/assets/793e012e-c069-4fa4-a3d5-61c2f55edd3e)
+
+![the volume being moved up to 297% on a stream](https://github.com/user-attachments/assets/77463eb9-2537-4821-a3ab-82f60633ccbc)
--- a/src/plugins/volumeBooster.discordDesktop/index.ts
+++ b/src/plugins/volumeBooster.discordDesktop/index.ts
@ -31,10 +31,27 @@ const settings = definePluginSettings({
    }
 });

+interface StreamData {
+    audioContext: AudioContext,
+    audioElement: HTMLAudioElement,
+    emitter: any,
+    // added by this plugin
+    gainNode?: GainNode,
+    id: string,
+    levelNode: AudioWorkletNode,
+    sinkId: string,
+    stream: MediaStream,
+    streamSourceNode?: MediaStreamAudioSourceNode,
+    videoStreamId: string,
+    _mute: boolean,
+    _speakingFlags: number,
+    _volume: number;
+}
+
 export default definePlugin({
    name: "VolumeBooster",
-    authors: [Devs.Nuckyz],
-    description: "Allows you to set the user and stream volume above the default maximum.",
+    authors: [Devs.Nuckyz, Devs.sadan],
+    description: "Allows you to set the user and stream volume above the default maximum",
    settings,

    patches: [
@ -45,12 +62,28 @@ export default definePlugin({
        ].map(find => ({
            find,
            replacement: {
-                match: /(?<=maxValue:\i\.\i)\?(\d+?):(\d+?)(?=,)/,
-                replace: (_, higherMaxVolume, minorMaxVolume) => ""
-                    + `?${higherMaxVolume}*$self.settings.store.multiplier`
-                    + `:${minorMaxVolume}*$self.settings.store.multiplier`
+                match: /(?<=maxValue:)\i\.\i\?(\d+?):(\d+?)(?=,)/,
+                replace: (_, higherMaxVolume, minorMaxVolume) => `${higherMaxVolume}*$self.settings.store.multiplier`
            }
        })),
+        // Patches needed for web/vesktop
+        {
+            find: "streamSourceNode",
+            predicate: () => !IS_DISCORD_DESKTOP,
+            group: true,
+            replacement: [
+                // Remove rounding algorithm
+                {
+                    match: /Math\.max.{0,30}\)\)/,
+                    replace: "arguments[0]"
+                },
+                // Patch the volume
+                {
+                    match: /\.volume=this\._volume\/100;/,
+                    replace: ".volume=0.00;$self.patchVolume(this);"
+                }
+            ]
+        },
        // Prevent Audio Context Settings sync from trying to sync with values above 200, changing them to 200 before we send to Discord
        {
            find: "AudioContextSettingsMigrated",
@ -83,4 +116,20 @@ export default definePlugin({
            ]
        }
    ],
+
+    patchVolume(data: StreamData) {
+        if (data.stream.getAudioTracks().length === 0) return;
+
+        data.streamSourceNode ??= data.audioContext.createMediaStreamSource(data.stream);
+
+        if (!data.gainNode) {
+            const gain = data.gainNode = data.audioContext.createGain();
+            data.streamSourceNode.connect(gain);
+            gain.connect(data.audioContext.destination);
+        }
+
+        data.gainNode.gain.value = data._mute
+            ? 0
+            : data._volume / 100;
+    }
 });
--- a/src/plugins/webKeybinds.web/index.ts
+++ b/src/plugins/webKeybinds.web/index.ts
@ -35,6 +35,7 @@ export default definePlugin({
        if (hasCtrl) switch (e.key) {
            case "t":
            case "T":
+                if (!IS_VESKTOP) return;
                e.preventDefault();
                if (e.shiftKey) {
                    if (SelectedGuildStore.getGuildId()) NavigationRouter.transitionToGuild("@me");
@ -47,14 +48,15 @@ export default definePlugin({
                    });
                }
                break;
+            case "Tab":
+                if (!IS_VESKTOP) return;
+                const handler = e.shiftKey ? KeyBinds.SERVER_PREV : KeyBinds.SERVER_NEXT;
+                handler.action(e);
+                break;
            case ",":
                e.preventDefault();
                SettingsRouter.open("My Account");
                break;
-            case "Tab":
-                const handler = e.shiftKey ? KeyBinds.SERVER_PREV : KeyBinds.SERVER_NEXT;
-                handler.action(e);
-                break;
            default:
                if (e.key >= "1" && e.key <= "9") {
                    e.preventDefault();
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@ -33,10 +33,6 @@ export interface Dev {
 * If you are fine with attribution but don't want the badge, add badge: false
 */
 export const Devs = /* #__PURE__*/ Object.freeze({
-    Nobody: {
-        name: "Nobody",
-        id: 0n,
-    },
    Ven: {
        name: "Vee",
        id: 343383572805058560n
@ -542,6 +538,14 @@ export const Devs = /* #__PURE__*/ Object.freeze({
        name: "Joona",
        id: 297410829589020673n
    },
+    sadan: {
+        name: "sadan",
+        id: 521819891141967883n,
+    },
+    Kylie: {
+        name: "Cookie",
+        id: 721853658941227088n
+    },
    AshtonMemer: {
        name: "AshtonMemer",
        id: 373657230530052099n
@ -549,7 +553,23 @@ export const Devs = /* #__PURE__*/ Object.freeze({
    surgedevs: {
        name: "Chloe",
        id: 1084592643784331324n
-    }
+    },
+    Lumap: {
+        name: "Lumap",
+        id: 585278686291427338n,
+    },
+    Obsidian: {
+        name: "Obsidian",
+        id: 683171006717755446n,
+    },
+    SerStars: {
+        name: "SerStars",
+        id: 861631850681729045n,
+    },
+    niko: {
+        name: "niko",
+        id: 341377368075796483n,
+    },
 } satisfies Record<string, Dev>);

 // iife so #__PURE__ works correctly
--- a/src/utils/quickCss.ts
+++ b/src/utils/quickCss.ts
@ -17,6 +17,7 @@
 */

 import { Settings, SettingsStore } from "@api/Settings";
+import { ThemeStore } from "@webpack/common";


 let style: HTMLStyleElement;
@ -59,7 +60,18 @@ async function initThemes() {

    const { themeLinks, enabledThemes } = Settings;

-    const links: string[] = [...themeLinks];
+    // "darker" and "midnight" both count as dark
+    const activeTheme = ThemeStore.theme === "light" ? "light" : "dark";
+
+    const links = themeLinks
+        .map(rawLink => {
+            const match = /^@(light|dark) (.*)/.exec(rawLink);
+            if (!match) return rawLink;
+
+            const [, mode, link] = match;
+            return mode === activeTheme ? link : null;
+        })
+        .filter(link => link !== null);

    if (IS_WEB) {
        for (const theme of enabledThemes) {
@ -85,6 +97,7 @@ document.addEventListener("DOMContentLoaded", () => {

    SettingsStore.addChangeListener("themeLinks", initThemes);
    SettingsStore.addChangeListener("enabledThemes", initThemes);
+    ThemeStore.addChangeListener(initThemes);

    if (!IS_WEB)
        VencordNative.quickCss.addThemeChangeListener(initThemes);
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@ -309,6 +309,8 @@ export interface DefinedSettings<
 > {
    /** Shorthand for `Vencord.Settings.plugins.PluginName`, but with typings */
    store: SettingsStore<Def> & PrivateSettings;
+    /** Shorthand for `Vencord.PlainSettings.plugins.PluginName`, but with typings */
+    plain: SettingsStore<Def> & PrivateSettings;
    /**
     * React hook for getting the settings for this plugin
     * @param filter optional filter to avoid rerenders for irrelevent settings
--- a/src/webpack/common/stores.ts
+++ b/src/webpack/common/stores.ts
@ -53,6 +53,7 @@ export let RelationshipStore: Stores.RelationshipStore & t.FluxStore & {
 };

 export let EmojiStore: t.EmojiStore;
+export let ThemeStore: t.ThemeStore;
 export let WindowStore: t.WindowStore;
 export let DraftStore: t.DraftStore;

@ -84,3 +85,4 @@ waitForStore("GuildChannelStore", m => GuildChannelStore = m);
 waitForStore("MessageStore", m => MessageStore = m);
 waitForStore("WindowStore", m => WindowStore = m);
 waitForStore("EmojiStore", m => EmojiStore = m);
+waitForStore("ThemeStore", m => ThemeStore = m);
--- a/src/webpack/common/types/components.d.ts
+++ b/src/webpack/common/types/components.d.ts
@ -459,7 +459,7 @@ export type ScrollerThin = ComponentType<PropsWithChildren<{
    style?: CSSProperties;

    dir?: "ltr";
-    orientation?: "horizontal" | "vertical";
+    orientation?: "horizontal" | "vertical" | "auto";
    paddingFix?: boolean;
    fade?: boolean;

--- a/src/webpack/common/types/stores.d.ts
+++ b/src/webpack/common/types/stores.d.ts
@ -220,6 +220,14 @@ export class GuildStore extends FluxStore {
    getAllGuildRoles(): Record<string, Record<string, Role>>;
 }

+export class ThemeStore extends FluxStore {
+    theme: "light" | "dark" | "darker" | "midnight";
+    darkSidebar: boolean;
+    isSystemThemeAvailable: boolean;
+    systemPrefersColorScheme: "light" | "dark";
+    systemTheme: null;
+}
+
 export type useStateFromStores = <T>(
    stores: t.FluxStore[],
    mapper: () => T,
--- a/src/webpack/common/types/utils.d.ts
+++ b/src/webpack/common/types/utils.d.ts
@ -223,9 +223,26 @@ export interface Constants {
    FriendsSections: Record<string, string>;
 }

+export type ActiveView = LiteralUnion<"emoji" | "gif" | "sticker" | "soundboard", string>;
+
+export interface ExpressionPickerStoreState extends Record<PropertyKey, any> {
+    activeView: ActiveView | null;
+    lastActiveView: ActiveView | null;
+    activeViewType: any | null;
+    searchQuery: string;
+    isSearchSuggestion: boolean,
+    pickerId: string;
+}
+
 export interface ExpressionPickerStore {
+    openExpressionPicker(activeView: ActiveView, activeViewType?: any): void;
    closeExpressionPicker(activeViewType?: any): void;
-    openExpressionPicker(activeView: LiteralUnion<"emoji" | "gif" | "sticker", string>, activeViewType?: any): void;
+    toggleMultiExpressionPicker(activeViewType?: any): void;
+    toggleExpressionPicker(activeView: ActiveView, activeViewType?: any): void;
+    setExpressionPickerView(activeView: ActiveView): void;
+    setSearchQuery(searchQuery: string, isSearchSuggestion?: boolean): void;
+    useExpressionPickerStore(): ExpressionPickerStoreState;
+    useExpressionPickerStore<T>(selector: (state: ExpressionPickerStoreState) => T): T;
 }

 export interface BrowserWindowFeatures {
--- a/src/webpack/common/utils.ts
+++ b/src/webpack/common/utils.ts
@ -16,7 +16,6 @@
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

-import { canonicalizeMatch } from "@utils/patches";
 import type { Channel } from "discord-types/general";

 // eslint-disable-next-line path-alias/no-relative
@ -50,6 +49,11 @@ export const moment: typeof import("moment") = findByPropsLazy("parseTwoDigitYea

 export const hljs: typeof import("highlight.js") = findByPropsLazy("highlight", "registerLanguage");

+export const { match, P }: Pick<typeof import("ts-pattern"), "match" | "P"> = mapMangledModuleLazy("@ts-pattern/matcher", {
+    match: filters.byCode("return new"),
+    P: filters.byProps("when")
+});
+
 export const lodash: typeof import("lodash") = findByPropsLazy("debounce", "cloneDeep");

 export const i18n: t.i18n = findLazy(m => m.Messages?.["en-US"]);
@ -162,11 +166,14 @@ export const InviteActions = findByPropsLazy("resolveInvite");

 export const IconUtils: t.IconUtils = findByPropsLazy("getGuildBannerURL", "getUserAvatarURL");

-const openExpressionPickerMatcher = canonicalizeMatch(/setState\({activeView:\i,activeViewType:/);
-// TODO: type
 export const ExpressionPickerStore: t.ExpressionPickerStore = mapMangledModuleLazy("expression-picker-last-active-view", {
+    openExpressionPicker: filters.byCode(/setState\({activeView:(?:(?!null)\i),activeViewType:/),
    closeExpressionPicker: filters.byCode("setState({activeView:null"),
-    openExpressionPicker: m => typeof m === "function" && openExpressionPickerMatcher.test(m.toString()),
+    toggleMultiExpressionPicker: filters.byCode(".EMOJI,"),
+    toggleExpressionPicker: filters.byCode(/getState\(\)\.activeView===\i\?\i\(\):\i\(/),
+    setExpressionPickerView: filters.byCode(/setState\({activeView:\i,lastActiveView:/),
+    setSearchQuery: filters.byCode("searchQuery:"),
+    useExpressionPickerStore: filters.byCode("Object.is")
 });

 export const PopoutActions: t.PopoutActions = mapMangledModuleLazy('type:"POPOUT_WINDOW_OPEN"', {
--- a/src/webpack/patchWebpack.ts
+++ b/src/webpack/patchWebpack.ts
@ -233,7 +233,7 @@ function patchFactories(factories: Record<string, (module: any, exports: any, re
                    logger.error("Error while firing callback for Webpack subscription:\n", err, filter, callback);
                }
            }
-        } as any as { toString: () => string, original: any, (...args: any[]): void; };
+        } as any as { toString: () => string, original: any, (...args: any[]): void; $$vencordPatchedSource?: string; };

        factory.toString = originalMod.toString.bind(originalMod);
        factory.original = originalMod;
@ -354,5 +354,17 @@ function patchFactories(factories: Record<string, (module: any, exports: any, re

            if (!patch.all) patches.splice(i--, 1);
        }
+
+        if (IS_DEV) {
+            if (mod !== originalMod) {
+                factory.$$vencordPatchedSource = String(mod);
+            } else if (wreq != null) {
+                const existingFactory = wreq.m[id];
+
+                if (existingFactory != null) {
+                    factory.$$vencordPatchedSource = existingFactory.$$vencordPatchedSource;
+                }
+            }
+        }
    }
 }
--- a/src/webpack/webpack.ts
+++ b/src/webpack/webpack.ts
@ -38,15 +38,15 @@ export let cache: WebpackInstance["c"];

 export type FilterFn = (mod: any) => boolean;

-type PropsFilter = Array<string>;
-type CodeFilter = Array<string | RegExp>;
-type StoreNameFilter = string;
+export type PropsFilter = Array<string>;
+export type CodeFilter = Array<string | RegExp>;
+export type StoreNameFilter = string;

-const stringMatches = (s: string, filter: CodeFilter) =>
+export const stringMatches = (s: string, filter: CodeFilter) =>
    filter.every(f =>
        typeof f === "string"
            ? s.includes(f)
-            : f.test(s)
+            : (f.global && (f.lastIndex = 0), f.test(s))
    );

 export const filters = {
@ -258,6 +258,8 @@ export const findBulk = traceFunction("findBulk", function findBulk(...filterFns
 * @returns string or null
 */
 export const findModuleId = traceFunction("findModuleId", function findModuleId(...code: CodeFilter) {
+    code = code.map(canonicalizeMatch);
+
    for (const id in wreq.m) {
        if (stringMatches(wreq.m[id].toString(), code)) return id;
    }
@ -452,12 +454,9 @@ export function findExportedComponentLazy<T extends object = any>(...props: Prop
 *          })
 */
 export const mapMangledModule = traceFunction("mapMangledModule", function mapMangledModule<S extends string>(code: string | RegExp | CodeFilter, mappers: Record<S, FilterFn>): Record<S, any> {
-    if (!Array.isArray(code)) code = [code];
-    code = code.map(canonicalizeMatch);
-
    const exports = {} as Record<S, any>;

-    const id = findModuleId(...code);
+    const id = findModuleId(...Array.isArray(code) ? code : [code]);
    if (id === null)
        return exports;

@ -606,6 +605,8 @@ export function waitFor(filter: string | PropsFilter | FilterFn, callback: Callb
 * @returns Mapping of found modules
 */
 export function search(...code: CodeFilter) {
+    code = code.map(canonicalizeMatch);
+
    const results = {} as Record<number, Function>;
    const factories = wreq.m;