From ad3d936dfd75a22e17213e66d2288b46abe6cc90 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Thu, 29 Aug 2024 21:41:51 -0300
Subject: [PATCH 01/30] Fix settings wrapping fallback

---
 src/plugins/_core/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/_core/settings.tsx b/src/plugins/_core/settings.tsx
index 3cc020836..be220db1a 100644
--- 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})`
                 }
             ]

From e473a57c3d5ee624669910f7f9120038fe12a050 Mon Sep 17 00:00:00 2001
From: Cookie <52550063+Covkie@users.noreply.github.com>
Date: Thu, 29 Aug 2024 21:08:48 -0400
Subject: [PATCH 02/30] IgnoreActivities: Add option for blacklist filter
 (#2712)

---
 src/plugins/ignoreActivities/index.tsx | 88 ++++++++++++++++++--------
 src/utils/constants.ts                 |  4 ++
 2 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx
index bab69d89b..9e6c21bdd 100644
--- 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,7 +236,7 @@ function isActivityTypeIgnored(type: number, id?: string) {
 
 export default definePlugin({
     name: "IgnoreActivities",
-    authors: [Devs.Nuckyz],
+    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"],
 
@@ -253,6 +283,12 @@ export default definePlugin({
     ],
 
     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 +315,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) {
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index d27759e95..77d3951b9 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -534,6 +534,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "Joona",
         id: 297410829589020673n
     },
+    Kylie: {
+        name: "Cookie",
+        id: 721853658941227088n
+    },
     AshtonMemer: {
         name: "AshtonMemer",
         id: 373657230530052099n

From 07e629d8d4c111dd5cdf45a5f6564f9f2b91f952 Mon Sep 17 00:00:00 2001
From: Nick Oates <nick@nickoates.com>
Date: Thu, 29 Aug 2024 22:39:40 -0700
Subject: [PATCH 03/30] SuperReactionTweaks: Allow disabling Super Reactions
 (#2805)

---
 src/plugins/superReactionTweaks/index.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plugins/superReactionTweaks/index.ts b/src/plugins/superReactionTweaks/index.ts
index 1a5e3a985..188f868a5 100644
--- 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;
     },

From eb0d91fd8e7807938154c00e60978d2720a9b524 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Fri, 30 Aug 2024 06:12:28 -0300
Subject: [PATCH 04/30] Add ts-pattern as @webpack/common

---
 package.json                | 1 +
 pnpm-lock.yaml              | 8 ++++++++
 src/webpack/common/utils.ts | 5 +++++
 3 files changed, 14 insertions(+)

diff --git a/package.json b/package.json
index 65d97f2e0..0fdda2659 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9567475fb..eaa6b537c 100644
--- 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
diff --git a/src/webpack/common/utils.ts b/src/webpack/common/utils.ts
index f9cce556b..b557f4da2 100644
--- a/src/webpack/common/utils.ts
+++ b/src/webpack/common/utils.ts
@@ -49,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"]);

From 00276cad7ceba8bb35c6cb551c866e8e2fe34f54 Mon Sep 17 00:00:00 2001
From: niko <57009359+hauntii@users.noreply.github.com>
Date: Sat, 31 Aug 2024 21:45:57 -0400
Subject: [PATCH 05/30] TimeBarAllActivities: Support new activity cards
 (#2813)

---
 src/plugins/timeBarAllActivities/README.md |  5 ++
 src/plugins/timeBarAllActivities/index.ts  | 35 ----------
 src/plugins/timeBarAllActivities/index.tsx | 76 ++++++++++++++++++++++
 src/utils/constants.ts                     |  4 ++
 4 files changed, 85 insertions(+), 35 deletions(-)
 create mode 100644 src/plugins/timeBarAllActivities/README.md
 delete mode 100644 src/plugins/timeBarAllActivities/index.ts
 create mode 100644 src/plugins/timeBarAllActivities/index.tsx

diff --git a/src/plugins/timeBarAllActivities/README.md b/src/plugins/timeBarAllActivities/README.md
new file mode 100644
index 000000000..59f0451c2
--- /dev/null
+++ 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)
diff --git a/src/plugins/timeBarAllActivities/index.ts b/src/plugins/timeBarAllActivities/index.ts
deleted file mode 100644
index dcb809fd4..000000000
--- a/src/plugins/timeBarAllActivities/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Vencord, a modification for Discord's desktop app
- * Copyright (c) 2022 Vendicated and contributors
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation, either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
-*/
-
-import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
-
-export default definePlugin({
-    name: "TimeBarAllActivities",
-    description: "Adds the Spotify time bar to all activities if they have start and end timestamps",
-    authors: [Devs.fawn],
-    patches: [
-        {
-            find: "}renderTimeBar(",
-            replacement: {
-                match: /renderTimeBar\((.{1,3})\){.{0,50}?let/,
-                replace: "renderTimeBar($1){let"
-            }
-        }
-    ],
-});
diff --git a/src/plugins/timeBarAllActivities/index.tsx b/src/plugins/timeBarAllActivities/index.tsx
new file mode 100644
index 000000000..04f7ff9e7
--- /dev/null
+++ 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} />;
+        }
+    }
+});
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 77d3951b9..ae1943b05 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -554,6 +554,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "SerStars",
         id: 861631850681729045n,
     },
+    niko: {
+        name: "niko",
+        id: 341377368075796483n,
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly

From d5eaae9d5137d4eb2c77517080e1ee554ab2f5ba Mon Sep 17 00:00:00 2001
From: Obsidian <108832807+Obsidianninja11@users.noreply.github.com>
Date: Sat, 31 Aug 2024 18:02:27 -0800
Subject: [PATCH 06/30] new plugin CopyFileContents ~Easily copy text file
 attachments contents (#2790)

---
 src/components/Icons.tsx               |  8 ++--
 src/plugins/CopyFileContents/README.md |  5 +++
 src/plugins/CopyFileContents/index.tsx | 60 ++++++++++++++++++++++++++
 src/plugins/CopyFileContents/style.css |  8 ++++
 src/utils/constants.ts                 |  4 ++
 5 files changed, 81 insertions(+), 4 deletions(-)
 create mode 100644 src/plugins/CopyFileContents/README.md
 create mode 100644 src/plugins/CopyFileContents/index.tsx
 create mode 100644 src/plugins/CopyFileContents/style.css

diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
index 7ba078d33..fa142a18c 100644
--- 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>
     );
diff --git a/src/plugins/CopyFileContents/README.md b/src/plugins/CopyFileContents/README.md
new file mode 100644
index 000000000..18dc2d3df
--- /dev/null
+++ 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)
diff --git a/src/plugins/CopyFileContents/index.tsx b/src/plugins/CopyFileContents/index.tsx
new file mode 100644
index 000000000..13b649174
--- /dev/null
+++ 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 }),
+});
diff --git a/src/plugins/CopyFileContents/style.css b/src/plugins/CopyFileContents/style.css
new file mode 100644
index 000000000..c643cf0f0
--- /dev/null
+++ 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);
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index ae1943b05..60c203252 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -550,6 +550,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "Lumap",
         id: 585278686291427338n,
     },
+    Obsidian: {
+        name: "Obsidian",
+        id: 683171006717755446n,
+    },
     SerStars: {
         name: "SerStars",
         id: 861631850681729045n,

From 81eabc7ee2504d501fe962d914961038831af496 Mon Sep 17 00:00:00 2001
From: sadan4 <117494111+sadan4@users.noreply.github.com>
Date: Sat, 31 Aug 2024 22:13:22 -0400
Subject: [PATCH 07/30] PatchHelper: Add Copy as Codeblock button (#2820)

---
 src/components/VencordSettings/PatchHelperTab.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/VencordSettings/PatchHelperTab.tsx b/src/components/VencordSettings/PatchHelperTab.tsx
index e09a1dbf3..fd33c09df 100644
--- 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>

From 273981deb74039c0aa8252f5c981d21f7352a412 Mon Sep 17 00:00:00 2001
From: ImBanana <eladtairo@gmail.com>
Date: Sun, 1 Sep 2024 05:33:07 +0300
Subject: [PATCH 08/30] new plugin StickerPaste ~ Insert stickers instead of
 sending (#2781)

---
 src/plugins/stickerPaste/README.md |  3 +++
 src/plugins/stickerPaste/index.ts  | 24 ++++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 src/plugins/stickerPaste/README.md
 create mode 100644 src/plugins/stickerPaste/index.ts

diff --git a/src/plugins/stickerPaste/README.md b/src/plugins/stickerPaste/README.md
new file mode 100644
index 000000000..a29170272
--- /dev/null
+++ 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.
diff --git a/src/plugins/stickerPaste/index.ts b/src/plugins/stickerPaste/index.ts
new file mode 100644
index 000000000..8a0082073
--- /dev/null
+++ b/src/plugins/stickerPaste/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2024 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import { Devs } from "@utils/constants";
+import definePlugin from "@utils/types";
+
+export default definePlugin({
+    name: "StickerPaste",
+    description: "Makes picking a sticker in the sticker picker insert it into the chatbox instead of instantly sending",
+    authors: [Devs.ImBanana],
+
+    patches: [
+        {
+            find: ".stickers,previewSticker:",
+            replacement: {
+                match: /if\(\i\.\i\.getUploadCount/,
+                replace: "return true;$&",
+            }
+        }
+    ]
+});

From e07a4e19e65b556b0e398a39499b85b88699756b Mon Sep 17 00:00:00 2001
From: sadan4 <117494111+sadan4@users.noreply.github.com>
Date: Sat, 31 Aug 2024 23:08:33 -0400
Subject: [PATCH 09/30] VolumeBooster: Support browser and Vesktop (#2730)

---
 src/plugins/volumeBooster/README.md           |  9 +++
 .../index.ts                                  | 61 +++++++++++++++++--
 src/utils/constants.ts                        |  4 ++
 3 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 src/plugins/volumeBooster/README.md
 rename src/plugins/{volumeBooster.discordDesktop => volumeBooster}/index.ts (64%)

diff --git a/src/plugins/volumeBooster/README.md b/src/plugins/volumeBooster/README.md
new file mode 100644
index 000000000..62bd5ab52
--- /dev/null
+++ 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)
diff --git a/src/plugins/volumeBooster.discordDesktop/index.ts b/src/plugins/volumeBooster/index.ts
similarity index 64%
rename from src/plugins/volumeBooster.discordDesktop/index.ts
rename to src/plugins/volumeBooster/index.ts
index b455c97ec..3ab47b197 100644
--- a/src/plugins/volumeBooster.discordDesktop/index.ts
+++ b/src/plugins/volumeBooster/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_WEB,
+            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;
+    }
 });
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 60c203252..7fb2b6bf0 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -534,6 +534,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "Joona",
         id: 297410829589020673n
     },
+    sadan: {
+        name: "sadan",
+        id: 521819891141967883n,
+    },
     Kylie: {
         name: "Cookie",
         id: 721853658941227088n

From b595a3e33c4a39e67a36dc9041ed2aa90c30aaea Mon Sep 17 00:00:00 2001
From: vxray <41696677+vxray@users.noreply.github.com>
Date: Sun, 1 Sep 2024 05:20:22 +0200
Subject: [PATCH 10/30] OpenInApp: Add support for localization in Spotify URL
 regex (#2776)

---
 src/plugins/openInApp/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/openInApp/index.ts b/src/plugins/openInApp/index.ts
index 1a68e8f5d..2e332465e 100644
--- 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\/.+$/,

From 968e688c106ea7b45c1bb522c73104239d3663a6 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Sun, 1 Sep 2024 00:53:46 -0300
Subject: [PATCH 11/30] Bump to 1.9.9

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0fdda2659..65a2f4512 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.9.8",
+    "version": "1.9.9",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {

From 74fd85bd3d7a86c495534f08c6c508f379514b23 Mon Sep 17 00:00:00 2001
From: sadan4 <117494111+sadan4@users.noreply.github.com>
Date: Sun, 1 Sep 2024 19:39:19 -0400
Subject: [PATCH 12/30] VolumeBooster: Fix on Vesktop (#2828)

Also fixed an IgnoreActivities patch and added a README to it
---
 .../README.md                                       |  0
 .../index.tsx                                       |  0
 .../style.css                                       |  0
 src/plugins/ignoreActivities/README.md              | 13 +++++++++++++
 src/plugins/ignoreActivities/index.tsx              | 10 +++++++++-
 src/plugins/volumeBooster/index.ts                  |  2 +-
 6 files changed, 23 insertions(+), 2 deletions(-)
 rename src/plugins/{CopyFileContents => copyFileContents}/README.md (100%)
 rename src/plugins/{CopyFileContents => copyFileContents}/index.tsx (100%)
 rename src/plugins/{CopyFileContents => copyFileContents}/style.css (100%)
 create mode 100644 src/plugins/ignoreActivities/README.md

diff --git a/src/plugins/CopyFileContents/README.md b/src/plugins/copyFileContents/README.md
similarity index 100%
rename from src/plugins/CopyFileContents/README.md
rename to src/plugins/copyFileContents/README.md
diff --git a/src/plugins/CopyFileContents/index.tsx b/src/plugins/copyFileContents/index.tsx
similarity index 100%
rename from src/plugins/CopyFileContents/index.tsx
rename to src/plugins/copyFileContents/index.tsx
diff --git a/src/plugins/CopyFileContents/style.css b/src/plugins/copyFileContents/style.css
similarity index 100%
rename from src/plugins/CopyFileContents/style.css
rename to src/plugins/copyFileContents/style.css
diff --git a/src/plugins/ignoreActivities/README.md b/src/plugins/ignoreActivities/README.md
new file mode 100644
index 000000000..abc75720f
--- /dev/null
+++ 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)
diff --git a/src/plugins/ignoreActivities/index.tsx b/src/plugins/ignoreActivities/index.tsx
index 9e6c21bdd..02261b5ba 100644
--- a/src/plugins/ignoreActivities/index.tsx
+++ b/src/plugins/ignoreActivities/index.tsx
@@ -237,7 +237,7 @@ function isActivityTypeIgnored(type: number, id?: string) {
 export default definePlugin({
     name: "IgnoreActivities",
     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.",
+    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,
@@ -266,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: {
@@ -279,6 +280,13 @@ 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}),`
+            }
         }
     ],
 
diff --git a/src/plugins/volumeBooster/index.ts b/src/plugins/volumeBooster/index.ts
index 3ab47b197..02a955a80 100644
--- a/src/plugins/volumeBooster/index.ts
+++ b/src/plugins/volumeBooster/index.ts
@@ -69,7 +69,7 @@ export default definePlugin({
         // Patches needed for web/vesktop
         {
             find: "streamSourceNode",
-            predicate: () => IS_WEB,
+            predicate: () => !IS_DISCORD_DESKTOP,
             group: true,
             replacement: [
                 // Remove rounding algorithm

From 0c71d6c3fae57a3e5f9a86a69b309897171aa31d Mon Sep 17 00:00:00 2001
From: vishnyanetchereshnya
 <151846235+vishnyanetchereshnya@users.noreply.github.com>
Date: Mon, 2 Sep 2024 06:42:52 +0300
Subject: [PATCH 13/30] PermissionsViewer: Show RoleIcons & which role grants
 permission (#2824)

---
 .../components/RolesAndUsersPermissions.tsx   | 106 ++++++++-------
 .../components/UserPermissions.tsx            |  92 +++++++++----
 src/plugins/permissionsViewer/index.tsx       |  91 +++++++------
 src/plugins/permissionsViewer/styles.css      | 123 ++++++++----------
 src/webpack/common/types/components.d.ts      |   2 +-
 5 files changed, 227 insertions(+), 187 deletions(-)

diff --git a/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx b/src/plugins/permissionsViewer/components/RolesAndUsersPermissions.tsx
index 963750fa3..82925d610 100644
--- 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}
+        />
+    ));
+}
diff --git a/src/plugins/permissionsViewer/components/UserPermissions.tsx b/src/plugins/permissionsViewer/components/UserPermissions.tsx
index dc2aa6fa4..7c0858f10 100644
--- a/src/plugins/permissionsViewer/components/UserPermissions.tsx
+++ b/src/plugins/permissionsViewer/components/UserPermissions.tsx
@@ -29,6 +29,7 @@ import openRolesAndUsersPermissionsModal, { PermissionType, type RoleOrUserPermi
 
 interface UserPermission {
     permission: string;
+    roleName: string;
     roleColor: string;
     rolePosition: number;
 }
@@ -45,8 +46,48 @@ const { RoleRootClasses, RoleClasses, RoleBorderClasses } = proxyLazyWebpack(()
     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 stns = settings.use(["permissionsSortOrder"]);
+    const { permissionsSortOrder } = settings.use(["permissionsSortOrder"]);
 
     const [rolePermissions, userPermissions] = useMemo(() => {
         const userPermissions: UserPermissions = [];
@@ -67,6 +108,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
             const OWNER = i18n.Messages.GUILD_OWNER || "Server Owner";
             userPermissions.push({
                 permission: OWNER,
+                roleName: "Owner",
                 roleColor: "var(--primary-300)",
                 rolePosition: Infinity
             });
@@ -75,10 +117,11 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
         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
                     });
@@ -91,7 +134,7 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
         userPermissions.sort((a, b) => b.rolePosition - a.rolePosition);
 
         return [rolePermissions, userPermissions];
-    }, [stns.permissionsSortOrder]);
+    }, [permissionsSortOrder]);
 
     return (
         <ExpandableHeader
@@ -108,46 +151,41 @@ function UserPermissionsComponent({ guild, guildMember, forceOpen = false }: { g
             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(RoleRootClasses.root)}>
-                    {userPermissions.map(({ permission, roleColor }) => (
-                        <div className={classes(RoleClasses.role)}>
-                            <div className={RoleClasses.roleRemoveButton}>
-                                <span
-                                    className={classes(RoleBorderClasses.roleCircle, RoleClasses.roleCircle)}
-                                    style={{ backgroundColor: roleColor }}
-                                />
-                            </div>
-                            <div className={RoleClasses.roleName}>
-                                <Text
-                                    className={RoleClasses.roleNameOverflow}
-                                    variant="text-xs/medium"
-                                >
-                                    {permission}
-                                </Text>
-                            </div>
-                        </div>
+                    {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>
             )}
diff --git a/src/plugins/permissionsViewer/index.tsx b/src/plugins/permissionsViewer/index.tsx
index 7c3967a37..44dfd5f54 100644
--- 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,11 @@ 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 }: { permissions: RoleOrUserPermission[], header: string; } = match(type)
+                    .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 +90,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 +130,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>);
+        }
     };
 }
 
diff --git a/src/plugins/permissionsViewer/styles.css b/src/plugins/permissionsViewer/styles.css
index 0ef961e5a..0123f86e2 100644
--- 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;
+}
diff --git a/src/webpack/common/types/components.d.ts b/src/webpack/common/types/components.d.ts
index 5dcc95194..0588d5e4c 100644
--- 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;
 

From d0ad4e6c1daeb504f7a6147f12c5a57ab80137bc Mon Sep 17 00:00:00 2001
From: Joona <69722179+Masterjoona@users.noreply.github.com>
Date: Mon, 2 Sep 2024 06:50:52 +0300
Subject: [PATCH 14/30] MutualGroupDMs: Add Mutual Groups to DM Sidebar (#2817)

---
 src/plugins/mutualGroupDMs/index.tsx | 75 ++++++++++++++++++++--------
 1 file changed, 53 insertions(+), 22 deletions(-)

diff --git a/src/plugins/mutualGroupDMs/index.tsx b/src/plugins/mutualGroupDMs/index.tsx
index a1e73cabf..ec52b4061 100644
--- a/src/plugins/mutualGroupDMs/index.tsx
+++ b/src/plugins/mutualGroupDMs/index.tsx
@@ -20,7 +20,7 @@ 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 { findByPropsLazy, findComponentByCodeLazy } from "@webpack";
 import { Avatar, ChannelStore, Clickable, IconUtils, RelationshipStore, ScrollerThin, useMemo, UserStore } from "@webpack/common";
 import { Channel, User } from "discord-types/general";
 
@@ -28,6 +28,7 @@ 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) {
@@ -50,6 +51,29 @@ function getMutualGDMCountText(user: User) {
     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({
@@ -70,6 +94,13 @@ export default definePlugin({
                     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})"
+            }
         }
     ],
 
@@ -84,28 +115,9 @@ export default definePlugin({
     },
 
     renderMutualGDMs: ErrorBoundary.wrap(({ user, onClose }: { user: User, onClose: () => void; }) => {
-        const mutualDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
+        const mutualGDms = useMemo(() => getMutualGroupDms(user.id), [user.id]);
 
-        const entries = 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 entries = renderClickableGDMs(mutualGDms, onClose);
 
         return (
             <ScrollerThin
@@ -124,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, () => { })}
+                />
+            </>
+        );
     })
 });

From 27e81b20db23f09ca7334cc74bc5aee841cd6705 Mon Sep 17 00:00:00 2001
From: Maddie <52103563+maddie480@users.noreply.github.com>
Date: Mon, 2 Sep 2024 06:51:29 +0200
Subject: [PATCH 15/30] Allow online themes to be applied only in dark or light
 mode (#2701)

---
 src/components/VencordSettings/ThemesTab.tsx | 19 ++++++++++++++-----
 src/plugins/clientTheme/index.tsx            |  3 +--
 src/utils/quickCss.ts                        | 15 ++++++++++++++-
 src/webpack/common/stores.ts                 |  2 ++
 src/webpack/common/types/stores.d.ts         |  8 ++++++++
 5 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/components/VencordSettings/ThemesTab.tsx b/src/components/VencordSettings/ThemesTab.tsx
index bb9d37894..f718ab11f 100644
--- a/src/components/VencordSettings/ThemesTab.tsx
+++ b/src/components/VencordSettings/ThemesTab.tsx
@@ -77,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"
@@ -86,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>
         </>
     );
@@ -296,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>
 
diff --git a/src/plugins/clientTheme/index.tsx b/src/plugins/clientTheme/index.tsx
index 358bae017..59f3d5fe2 100644
--- 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() {
diff --git a/src/utils/quickCss.ts b/src/utils/quickCss.ts
index 99f06004c..6a18948d1 100644
--- 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);
diff --git a/src/webpack/common/stores.ts b/src/webpack/common/stores.ts
index 74813357a..8579f8b92 100644
--- 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);
diff --git a/src/webpack/common/types/stores.d.ts b/src/webpack/common/types/stores.d.ts
index 037b2d81c..9ca7dfc94 100644
--- 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,

From accfc15125c5a611cb5835815a6e36d6bd4e8f89 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Mon, 2 Sep 2024 01:54:16 -0300
Subject: [PATCH 16/30] Ban ts-pattern normal import

---
 scripts/build/common.mjs                | 1 +
 src/plugins/permissionsViewer/index.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/scripts/build/common.mjs b/scripts/build/common.mjs
index 247557e3c..e88f1e2b9 100644
--- a/scripts/build/common.mjs
+++ b/scripts/build/common.mjs
@@ -334,5 +334,6 @@ 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
 ];
diff --git a/src/plugins/permissionsViewer/index.tsx b/src/plugins/permissionsViewer/index.tsx
index 44dfd5f54..ca28f845f 100644
--- a/src/plugins/permissionsViewer/index.tsx
+++ b/src/plugins/permissionsViewer/index.tsx
@@ -73,7 +73,8 @@ function MenuItem(guildId: string, id?: string, type?: MenuItemParentType) {
             action={() => {
                 const guild = GuildStore.getGuild(guildId);
 
-                const { permissions, header }: { permissions: RoleOrUserPermission[], header: string; } = match(type)
+                const { permissions, header } = match(type)
+                    .returnType<{ permissions: RoleOrUserPermission[], header: string; }>()
                     .with(MenuItemParentType.User, () => {
                         const member = GuildMemberStore.getMember(guildId, id!);
 

From c51d7b8fb4ea38f0ada2fe210f21263d2f2dd711 Mon Sep 17 00:00:00 2001
From: June Park <rjp2030@outlook.com>
Date: Mon, 2 Sep 2024 17:09:45 +0900
Subject: [PATCH 17/30] ReviewDB: Fix wording in server reviews (#2826)

---
 src/plugins/reviewDB/components/ReviewModal.tsx | 7 +++++--
 src/plugins/reviewDB/components/ReviewsView.tsx | 9 ++++++---
 src/plugins/reviewDB/index.tsx                  | 8 ++++----
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/plugins/reviewDB/components/ReviewModal.tsx b/src/plugins/reviewDB/components/ReviewModal.tsx
index e12a98acd..71ac021f0 100644
--- a/src/plugins/reviewDB/components/ReviewModal.tsx
+++ b/src/plugins/reviewDB/components/ReviewModal.tsx
@@ -22,12 +22,13 @@ import { useForceUpdater } from "@utils/react";
 import { Paginator, Text, useRef, useState } from "@webpack/common";
 
 import { Auth } from "../auth";
+import { ReviewType } from "../entities";
 import { Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
 import { cl } from "../utils";
 import ReviewComponent from "./ReviewComponent";
 import ReviewsView, { ReviewsInputComponent } from "./ReviewsView";
 
-function Modal({ modalProps, modalKey, discordId, name }: { modalProps: any; modalKey: string, discordId: string; name: string; }) {
+function Modal({ modalProps, modalKey, discordId, name, type }: { modalProps: any; modalKey: string, discordId: string; name: string; type: ReviewType; }) {
     const [data, setData] = useState<Response>();
     const [signal, refetch] = useForceUpdater(true);
     const [page, setPage] = useState(1);
@@ -58,6 +59,7 @@ function Modal({ modalProps, modalKey, discordId, name }: { modalProps: any; mod
                             onFetchReviews={setData}
                             scrollToTop={() => ref.current?.scrollTo({ top: 0, behavior: "smooth" })}
                             hideOwnReview
+                            type={type}
                         />
                     </div>
                 </ModalContent>
@@ -95,7 +97,7 @@ function Modal({ modalProps, modalKey, discordId, name }: { modalProps: any; mod
     );
 }
 
-export function openReviewsModal(discordId: string, name: string) {
+export function openReviewsModal(discordId: string, name: string, type: ReviewType) {
     const modalKey = "vc-rdb-modal-" + Date.now();
 
     openModal(props => (
@@ -104,6 +106,7 @@ export function openReviewsModal(discordId: string, name: string) {
             modalProps={props}
             discordId={discordId}
             name={name}
+            type={type}
         />
     ), { modalKey });
 }
diff --git a/src/plugins/reviewDB/components/ReviewsView.tsx b/src/plugins/reviewDB/components/ReviewsView.tsx
index 76a0be475..7a7d8d020 100644
--- a/src/plugins/reviewDB/components/ReviewsView.tsx
+++ b/src/plugins/reviewDB/components/ReviewsView.tsx
@@ -21,7 +21,7 @@ import { findByCodeLazy, findByPropsLazy, findComponentByCodeLazy } from "@webpa
 import { Forms, React, RelationshipStore, useRef, UserStore } from "@webpack/common";
 
 import { Auth, authorize } from "../auth";
-import { Review } from "../entities";
+import { Review, ReviewType } from "../entities";
 import { addReview, getReviews, Response, REVIEWS_PER_PAGE } from "../reviewDbApi";
 import { settings } from "../settings";
 import { cl, showToast } from "../utils";
@@ -45,6 +45,7 @@ interface Props extends UserProps {
     page?: number;
     scrollToTop?(): void;
     hideOwnReview?: boolean;
+    type: ReviewType;
 }
 
 export default function ReviewsView({
@@ -56,6 +57,7 @@ export default function ReviewsView({
     page = 1,
     showInput = false,
     hideOwnReview = false,
+    type,
 }: Props) {
     const [signal, refetch] = useForceUpdater(true);
 
@@ -80,6 +82,7 @@ export default function ReviewsView({
                 reviews={reviewData!.reviews}
                 hideOwnReview={hideOwnReview}
                 profileId={discordId}
+                type={type}
             />
 
             {showInput && (
@@ -94,7 +97,7 @@ export default function ReviewsView({
     );
 }
 
-function ReviewList({ refetch, reviews, hideOwnReview, profileId }: { refetch(): void; reviews: Review[]; hideOwnReview: boolean; profileId: string; }) {
+function ReviewList({ refetch, reviews, hideOwnReview, profileId, type }: { refetch(): void; reviews: Review[]; hideOwnReview: boolean; profileId: string; type: ReviewType; }) {
     const myId = UserStore.getCurrentUser().id;
 
     return (
@@ -111,7 +114,7 @@ function ReviewList({ refetch, reviews, hideOwnReview, profileId }: { refetch():
 
             {reviews?.length === 0 && (
                 <Forms.FormText className={cl("placeholder")}>
-                    Looks like nobody reviewed this user yet. You could be the first!
+                    Looks like nobody reviewed this {type === ReviewType.User ? "user" : "server"} yet. You could be the first!
                 </Forms.FormText>
             )}
         </div>
diff --git a/src/plugins/reviewDB/index.tsx b/src/plugins/reviewDB/index.tsx
index caf9bacba..1164a2c5b 100644
--- a/src/plugins/reviewDB/index.tsx
+++ b/src/plugins/reviewDB/index.tsx
@@ -30,7 +30,7 @@ import { Guild, User } from "discord-types/general";
 
 import { Auth, initAuth, updateAuth } from "./auth";
 import { openReviewsModal } from "./components/ReviewModal";
-import { NotificationType } from "./entities";
+import { NotificationType, ReviewType } from "./entities";
 import { getCurrentUserInfo, readNotification } from "./reviewDbApi";
 import { settings } from "./settings";
 import { showToast } from "./utils";
@@ -44,7 +44,7 @@ const guildPopoutPatch: NavContextMenuPatchCallback = (children, { guild }: { gu
             label="View Reviews"
             id="vc-rdb-server-reviews"
             icon={OpenExternalIcon}
-            action={() => openReviewsModal(guild.id, guild.name)}
+            action={() => openReviewsModal(guild.id, guild.name, ReviewType.Server)}
         />
     );
 };
@@ -56,7 +56,7 @@ const userContextPatch: NavContextMenuPatchCallback = (children, { user }: { use
             label="View Reviews"
             id="vc-rdb-user-reviews"
             icon={OpenExternalIcon}
-            action={() => openReviewsModal(user.id, user.username)}
+            action={() => openReviewsModal(user.id, user.username, ReviewType.User)}
         />
     );
 };
@@ -157,7 +157,7 @@ export default definePlugin({
         return (
             <TooltipContainer text="View Reviews">
                 <Button
-                    onClick={() => openReviewsModal(user.id, user.username)}
+                    onClick={() => openReviewsModal(user.id, user.username, ReviewType.User)}
                     look={Button.Looks.FILLED}
                     size={Button.Sizes.NONE}
                     color={RoleButtonClasses.bannerColor}

From 4c4f2894fb987aff7187c627747aabdf13d49369 Mon Sep 17 00:00:00 2001
From: Maddie <52103563+maddie480@users.noreply.github.com>
Date: Mon, 2 Sep 2024 10:37:54 +0200
Subject: [PATCH 18/30] PronounDB: Fix patched pronoun tooltip (#2832)

---
 src/plugins/pronoundb/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/pronoundb/index.ts b/src/plugins/pronoundb/index.ts
index b0c5bfe6f..7dfa8cb49 100644
--- a/src/plugins/pronoundb/index.ts
+++ b/src/plugins/pronoundb/index.ts
@@ -57,7 +57,7 @@ export default definePlugin({
                 },
                 {
                     match: /text:\i\.\i.Messages.USER_PROFILE_PRONOUNS/,
-                    replace: '$&+vcHasPendingPronouns?"":` (${vcPronounSource})`'
+                    replace: '$&+(vcHasPendingPronouns?"":` (${vcPronounSource})`)'
                 },
                 {
                     match: /(\.pronounsText.+?children:)(\i)/,

From 30e4e8315829bf9941adbf0cf1a386629af804d9 Mon Sep 17 00:00:00 2001
From: Maddie <52103563+maddie480@users.noreply.github.com>
Date: Tue, 3 Sep 2024 03:53:03 +0200
Subject: [PATCH 19/30] NoServerEmojis: Fix detecting server emojis (#2835)

---
 src/plugins/noServerEmojis/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/noServerEmojis/index.ts b/src/plugins/noServerEmojis/index.ts
index ed843769c..6a39f55ca 100644
--- a/src/plugins/noServerEmojis/index.ts
+++ b/src/plugins/noServerEmojis/index.ts
@@ -36,7 +36,7 @@ export default definePlugin({
         }
     ],
     shouldSkip(guildId: string, emoji: any) {
-        if (emoji.type !== "GUILD_EMOJI") {
+        if (emoji.type !== 1) {
             return false;
         }
         if (settings.store.shownEmojis === "onlyUnicode") {

From 7f784befc211abcc648463edc800bb7008fc5143 Mon Sep 17 00:00:00 2001
From: Ramzi Al Haddad <ramziah.git.recolor221@passmail.net>
Date: Tue, 3 Sep 2024 05:50:25 -0500
Subject: [PATCH 20/30] SecretRingToneEnabler: Option to always play Snow
 Halation Theme (#2831)

---
 src/plugins/secretRingTone/index.ts | 35 +++++++++++++++++++++--------
 src/utils/constants.ts              |  4 ++++
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/plugins/secretRingTone/index.ts b/src/plugins/secretRingTone/index.ts
index be804efc4..f2913afd1 100644
--- a/src/plugins/secretRingTone/index.ts
+++ b/src/plugins/secretRingTone/index.ts
@@ -4,21 +4,38 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
+import { definePluginSettings } from "@api/Settings";
 import { Devs } from "@utils/constants";
-import definePlugin from "@utils/types";
+import definePlugin, { OptionType } from "@utils/types";
+
+const settings = definePluginSettings({
+    onlySnow: {
+        type: OptionType.BOOLEAN,
+        description: "Only play the Snow Halation Theme",
+        default: false,
+        restartNeeded: true
+    }
+});
 
-// NOTE - Ultimately should probably be turned into a ringtone picker plugin
 export default definePlugin({
     name: "SecretRingToneEnabler",
     description: "Always play the secret version of the discord ringtone (except during special ringtone events)",
-    authors: [Devs.AndrewDLO, Devs.FieryFlames],
+    authors: [Devs.AndrewDLO, Devs.FieryFlames, Devs.RamziAH],
+    settings,
     patches: [
         {
             find: '"call_ringing_beat"',
-            replacement: {
-                match: /500!==\i\(\)\.random\(1,1e3\)/,
-                replace: "false",
-            }
-        },
-    ],
+            replacement: [
+                {
+                    match: /500!==\i\(\)\.random\(1,1e3\)/,
+                    replace: "false"
+                },
+                {
+                    predicate: () => settings.store.onlySnow,
+                    match: /"call_ringing_beat",/,
+                    replace: ""
+                }
+            ]
+        }
+    ]
 });
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 7fb2b6bf0..b0ad77fb1 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -566,6 +566,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "niko",
         id: 341377368075796483n,
     },
+    RamziAH: {
+        name: "RamziAH",
+        id: 1279957227612147747n,
+    },
 } satisfies Record<string, Dev>);
 
 // iife so #__PURE__ works correctly

From d10e649b63ec46a511cd70f684ac9a7fbfaf8f52 Mon Sep 17 00:00:00 2001
From: sadan4 <117494111+sadan4@users.noreply.github.com>
Date: Wed, 4 Sep 2024 07:04:17 -0400
Subject: [PATCH 21/30] VolumeBooster: Fix playing sound in wrong output device
 (#2840)

---
 src/plugins/volumeBooster/index.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/plugins/volumeBooster/index.ts b/src/plugins/volumeBooster/index.ts
index 02a955a80..490bf62c2 100644
--- a/src/plugins/volumeBooster/index.ts
+++ b/src/plugins/volumeBooster/index.ts
@@ -39,7 +39,7 @@ interface StreamData {
     gainNode?: GainNode,
     id: string,
     levelNode: AudioWorkletNode,
-    sinkId: string,
+    sinkId: string | "default",
     stream: MediaStream,
     streamSourceNode?: MediaStreamAudioSourceNode,
     videoStreamId: string,
@@ -128,6 +128,12 @@ export default definePlugin({
             gain.connect(data.audioContext.destination);
         }
 
+        // @ts-expect-error
+        if (data.sinkId != null && data.sinkId !== data.audioContext.sinkId && "setSinkId" in AudioContext.prototype) {
+            // @ts-expect-error https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/setSinkId
+            data.audioContext.setSinkId(data.sinkId);
+        }
+
         data.gainNode.gain.value = data._mute
             ? 0
             : data._volume / 100;

From df8aec8e3c5e4d13bc2f2df4e125ee3205c4d185 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Wed, 4 Sep 2024 08:24:54 -0300
Subject: [PATCH 22/30] Fix BetterFolders and FriendsSince

---
 src/plugins/_api/serverList.ts      |  2 +-
 src/plugins/betterFolders/index.tsx |  4 ++--
 src/plugins/friendsSince/index.tsx  | 33 +++++++----------------------
 3 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/src/plugins/_api/serverList.ts b/src/plugins/_api/serverList.ts
index f45bbf104..7904e78b0 100644
--- a/src/plugins/_api/serverList.ts
+++ b/src/plugins/_api/serverList.ts
@@ -34,7 +34,7 @@ export default definePlugin({
         {
             find: "Messages.SERVERS,children",
             replacement: {
-                match: /(?<=Messages\.SERVERS,children:).+?default:return null\}\}\)/,
+                match: /(?<=Messages\.SERVERS,children:)\i\.map\(\i\)/,
                 replace: "Vencord.Api.ServerList.renderAll(Vencord.Api.ServerList.ServerListRenderPosition.In).concat($&)"
             }
         }
diff --git a/src/plugins/betterFolders/index.tsx b/src/plugins/betterFolders/index.tsx
index 072f4ee66..0bef0933d 100644
--- a/src/plugins/betterFolders/index.tsx
+++ b/src/plugins/betterFolders/index.tsx
@@ -132,8 +132,8 @@ export default definePlugin({
                 },
                 // Export the isBetterFolders variable to the folders component
                 {
-                    match: /(?<=\.Messages\.SERVERS.+?switch\((\i)\.type\){case \i\.\i\.FOLDER:.+?folderNode:\i,)/,
-                    replace: 'isBetterFolders:typeof isBetterFolders!=="undefined"?isBetterFolders:false,'
+                    match: /switch\(\i\.type\){case \i\.\i\.FOLDER:.+?folderNode:\i,/,
+                    replace: '$&isBetterFolders:typeof isBetterFolders!=="undefined"?isBetterFolders:false,'
                 }
             ]
         },
diff --git a/src/plugins/friendsSince/index.tsx b/src/plugins/friendsSince/index.tsx
index 0399a2f72..cb5634c8e 100644
--- a/src/plugins/friendsSince/index.tsx
+++ b/src/plugins/friendsSince/index.tsx
@@ -7,16 +7,15 @@
 import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { getCurrentChannel } from "@utils/discord";
-import { Logger } from "@utils/Logger";
 import definePlugin from "@utils/types";
-import { findByCodeLazy, findByPropsLazy, findLazy } from "@webpack";
-import { Heading, RelationshipStore, Text } from "@webpack/common";
+import { findByCodeLazy, findByPropsLazy, findComponentByCodeLazy } from "@webpack";
+import { RelationshipStore, Text } from "@webpack/common";
 
 const containerWrapper = findByPropsLazy("memberSinceWrapper");
 const container = findByPropsLazy("memberSince");
 const getCreatedAtDate = findByCodeLazy('month:"short",day:"numeric"');
 const locale = findByPropsLazy("getLocale");
-const section = findLazy((m: any) => m.section !== void 0 && m.heading !== void 0 && Object.values(m).length === 2);
+const Section = findComponentByCodeLazy('"auto":"smooth"', ".section");
 
 export default definePlugin({
     name: "FriendsSince",
@@ -28,7 +27,7 @@ export default definePlugin({
             find: ".PANEL}),nicknameIcons",
             replacement: {
                 match: /USER_PROFILE_MEMBER_SINCE,.{0,100}userId:(\i\.id)}\)}\)/,
-                replace: "$&,$self.friendsSinceNew({userId:$1,isSidebar:true})"
+                replace: "$&,$self.FriendsSinceComponent({userId:$1,isSidebar:true})"
             }
         },
         // User Profile Modal
@@ -36,34 +35,19 @@ export default definePlugin({
             find: "action:\"PRESS_APP_CONNECTION\"",
             replacement: {
                 match: /USER_PROFILE_MEMBER_SINCE,.{0,100}userId:(\i\.id),.{0,100}}\)}\),/,
-                replace: "$&,$self.friendsSinceNew({userId:$1,isSidebar:false}),"
+                replace: "$&,$self.FriendsSinceComponent({userId:$1,isSidebar:false}),"
             }
         }
     ],
 
-    getFriendSince(userId: string) {
-        try {
-            if (!RelationshipStore.isFriend(userId)) return null;
-
-            return RelationshipStore.getSince(userId);
-        } catch (err) {
-            new Logger("FriendsSince").error(err);
-            return null;
-        }
-    },
-
-    friendsSinceNew: ErrorBoundary.wrap(({ userId, isSidebar }: { userId: string; isSidebar: boolean; }) => {
+    FriendsSinceComponent: ErrorBoundary.wrap(({ userId, isSidebar }: { userId: string; isSidebar: boolean; }) => {
         if (!RelationshipStore.isFriend(userId)) return null;
 
         const friendsSince = RelationshipStore.getSince(userId);
         if (!friendsSince) return null;
 
         return (
-            <section className={section.section}>
-                <Heading variant="text-xs/semibold" style={isSidebar ? {} : { color: "var(--header-secondary)" }}>
-                    Friends Since
-                </Heading>
-
+            <Section heading="Friends Since">
                 {
                     isSidebar ? (
                         <Text variant="text-sm/normal">
@@ -91,8 +75,7 @@ export default definePlugin({
                         </div>
                     )
                 }
-
-            </section>
+            </Section>
         );
     }, { noop: true }),
 });

From 244cb26c328828503835c680fa294917cb7d5f9b Mon Sep 17 00:00:00 2001
From: ElectricSteve <96793824+electricsteve@users.noreply.github.com>
Date: Wed, 4 Sep 2024 14:00:49 +0200
Subject: [PATCH 23/30] Dearrow: Add option to not dearrow by default (#2818)

---
 src/plugins/dearrow/index.tsx | 25 ++++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/plugins/dearrow/index.tsx b/src/plugins/dearrow/index.tsx
index 5fb438256..10175c846 100644
--- a/src/plugins/dearrow/index.tsx
+++ b/src/plugins/dearrow/index.tsx
@@ -46,7 +46,7 @@ const embedUrlRe = /https:\/\/www\.youtube\.com\/embed\/([a-zA-Z0-9_-]{11})/;
 async function embedDidMount(this: Component<Props>) {
     try {
         const { embed } = this.props;
-        const { replaceElements } = settings.store;
+        const { replaceElements, dearrowByDefault } = settings.store;
 
         if (!embed || embed.dearrow || embed.provider?.name !== "YouTube" || !embed.video?.url) return;
 
@@ -63,18 +63,22 @@ async function embedDidMount(this: Component<Props>) {
 
         if (!hasTitle && !hasThumb) return;
 
+
         embed.dearrow = {
-            enabled: true
+            enabled: dearrowByDefault
         };
 
         if (hasTitle && replaceElements !== ReplaceElements.ReplaceThumbnailsOnly) {
-            embed.dearrow.oldTitle = embed.rawTitle;
-            embed.rawTitle = titles[0].title.replace(/(^|\s)>(\S)/g, "$1$2");
-        }
+            const replacementTitle = titles[0].title.replace(/(^|\s)>(\S)/g, "$1$2");
 
+            embed.dearrow.oldTitle = dearrowByDefault ? embed.rawTitle : replacementTitle;
+            if (dearrowByDefault) embed.rawTitle = replacementTitle;
+        }
         if (hasThumb && replaceElements !== ReplaceElements.ReplaceTitlesOnly) {
-            embed.dearrow.oldThumb = embed.thumbnail.proxyURL;
-            embed.thumbnail.proxyURL = `https://dearrow-thumb.ajay.app/api/v1/getThumbnail?videoID=${videoId}&time=${thumbnails[0].timestamp}`;
+            const replacementProxyURL = `https://dearrow-thumb.ajay.app/api/v1/getThumbnail?videoID=${videoId}&time=${thumbnails[0].timestamp}`;
+
+            embed.dearrow.oldThumb = dearrowByDefault ? embed.thumbnail.proxyURL : replacementProxyURL;
+            if (embed.thumbnail.proxyURL) embed.thumbnail.proxyURL = replacementProxyURL;
         }
 
         this.forceUpdate();
@@ -96,6 +100,7 @@ function DearrowButton({ component }: { component: Component<Props>; }) {
                     className={"vc-dearrow-toggle-" + (embed.dearrow.enabled ? "on" : "off")}
                     onClick={() => {
                         const { enabled, oldThumb, oldTitle } = embed.dearrow;
+                        settings.store.dearrowByDefault = !enabled;
                         embed.dearrow.enabled = !enabled;
                         if (oldTitle) {
                             embed.dearrow.oldTitle = embed.rawTitle;
@@ -153,6 +158,12 @@ const settings = definePluginSettings({
             { label: "Titles", value: ReplaceElements.ReplaceTitlesOnly },
             { label: "Thumbnails", value: ReplaceElements.ReplaceThumbnailsOnly },
         ],
+    },
+    dearrowByDefault: {
+        description: "Dearrow videos automatically",
+        type: OptionType.BOOLEAN,
+        default: true,
+        restartNeeded: false
     }
 });
 

From 7333f40db697bc5f06694a0b1d462468b0605529 Mon Sep 17 00:00:00 2001
From: Nuckyz <61953774+Nuckyz@users.noreply.github.com>
Date: Wed, 4 Sep 2024 10:16:45 -0300
Subject: [PATCH 24/30] Dearrow: Fix thumbnails with default option

---
 src/plugins/dearrow/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plugins/dearrow/index.tsx b/src/plugins/dearrow/index.tsx
index 10175c846..b7e90e096 100644
--- a/src/plugins/dearrow/index.tsx
+++ b/src/plugins/dearrow/index.tsx
@@ -78,7 +78,7 @@ async function embedDidMount(this: Component<Props>) {
             const replacementProxyURL = `https://dearrow-thumb.ajay.app/api/v1/getThumbnail?videoID=${videoId}&time=${thumbnails[0].timestamp}`;
 
             embed.dearrow.oldThumb = dearrowByDefault ? embed.thumbnail.proxyURL : replacementProxyURL;
-            if (embed.thumbnail.proxyURL) embed.thumbnail.proxyURL = replacementProxyURL;
+            if (dearrowByDefault) embed.thumbnail.proxyURL = replacementProxyURL;
         }
 
         this.forceUpdate();

From 99cd423efbaf4da9c5d1c7bf23061d933eb99d18 Mon Sep 17 00:00:00 2001
From: Haruka <96925398+nakoyasha@users.noreply.github.com>
Date: Thu, 5 Sep 2024 00:26:08 +0300
Subject: [PATCH 25/30] fix crashing on canary when searching slash commands
 (#2844)

---
 src/api/Commands/index.ts | 2 ++
 src/api/Commands/types.ts | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/api/Commands/index.ts b/src/api/Commands/index.ts
index ef4db171c..5e3fc8f4d 100644
--- a/src/api/Commands/index.ts
+++ b/src/api/Commands/index.ts
@@ -138,6 +138,8 @@ export function registerCommand<C extends Command>(command: C, plugin: string) {
         throw new Error(`Command '${command.name}' already exists.`);
 
     command.isVencordCommand = true;
+    command.untranslatedName ??= command.name;
+    command.untranslatedDescription ??= command.description;
     command.id ??= `-${BUILT_IN.length + 1}`;
     command.applicationId ??= "-1"; // BUILT_IN;
     command.type ??= ApplicationCommandType.CHAT_INPUT;
diff --git a/src/api/Commands/types.ts b/src/api/Commands/types.ts
index bd349e250..70b73775a 100644
--- a/src/api/Commands/types.ts
+++ b/src/api/Commands/types.ts
@@ -93,8 +93,10 @@ export interface Command {
     isVencordCommand?: boolean;
 
     name: string;
+    untranslatedName?: string;
     displayName?: string;
     description: string;
+    untranslatedDescription?: string;
     displayDescription?: string;
 
     options?: Option[];

From be02baffaa8c46d499b90c6e2f638e4fe7aa28bd Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Thu, 5 Sep 2024 02:12:09 +0200
Subject: [PATCH 26/30] MemberCount: fix null safety

and improve types for PopoutPosition

Co-Authored-By: fres621 <126067139+fres621@users.noreply.github.com>
---
 src/plugins/memberCount/MemberCount.tsx        |  4 ++--
 .../memberCount/OnlineMemberCountStore.ts      |  8 ++++----
 src/plugins/memberCount/index.tsx              |  6 +++---
 src/utils/discord.tsx                          |  6 +++---
 src/webpack/common/types/components.d.ts       | 18 ++++++++++--------
 5 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/plugins/memberCount/MemberCount.tsx b/src/plugins/memberCount/MemberCount.tsx
index 084e7ecc4..0a3f5e620 100644
--- a/src/plugins/memberCount/MemberCount.tsx
+++ b/src/plugins/memberCount/MemberCount.tsx
@@ -14,7 +14,7 @@ import { OnlineMemberCountStore } from "./OnlineMemberCountStore";
 export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; tooltipGuildId?: string; }) {
     const currentChannel = useStateFromStores([SelectedChannelStore], () => getCurrentChannel());
 
-    const guildId = isTooltip ? tooltipGuildId! : currentChannel.guild_id;
+    const guildId = isTooltip ? tooltipGuildId! : currentChannel?.guild_id;
 
     const totalCount = useStateFromStores(
         [GuildMemberCountStore],
@@ -33,7 +33,7 @@ export function MemberCount({ isTooltip, tooltipGuildId }: { isTooltip?: true; t
 
     const threadGroups = useStateFromStores(
         [ThreadMemberListStore],
-        () => ThreadMemberListStore.getMemberListSections(currentChannel.id)
+        () => ThreadMemberListStore.getMemberListSections(currentChannel?.id)
     );
 
     if (!isTooltip && (groups.length >= 1 || groups[0].id !== "unknown")) {
diff --git a/src/plugins/memberCount/OnlineMemberCountStore.ts b/src/plugins/memberCount/OnlineMemberCountStore.ts
index 8790f5e29..d74bea2a0 100644
--- a/src/plugins/memberCount/OnlineMemberCountStore.ts
+++ b/src/plugins/memberCount/OnlineMemberCountStore.ts
@@ -15,8 +15,8 @@ export const OnlineMemberCountStore = proxyLazy(() => {
     const onlineMemberMap = new Map<string, number>();
 
     class OnlineMemberCountStore extends Flux.Store {
-        getCount(guildId: string) {
-            return onlineMemberMap.get(guildId);
+        getCount(guildId?: string) {
+            return onlineMemberMap.get(guildId!);
         }
 
         async _ensureCount(guildId: string) {
@@ -25,8 +25,8 @@ export const OnlineMemberCountStore = proxyLazy(() => {
             await PrivateChannelsStore.preload(guildId, GuildChannelStore.getDefaultChannel(guildId).id);
         }
 
-        ensureCount(guildId: string) {
-            if (onlineMemberMap.has(guildId)) return;
+        ensureCount(guildId?: string) {
+            if (!guildId || onlineMemberMap.has(guildId)) return;
 
             preloadQueue.push(() =>
                 this._ensureCount(guildId)
diff --git a/src/plugins/memberCount/index.tsx b/src/plugins/memberCount/index.tsx
index 7e591357d..85dcc4b2d 100644
--- a/src/plugins/memberCount/index.tsx
+++ b/src/plugins/memberCount/index.tsx
@@ -28,12 +28,12 @@ import { FluxStore } from "@webpack/types";
 
 import { MemberCount } from "./MemberCount";
 
-export const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore") as FluxStore & { getMemberCount(guildId: string): number | null; };
+export const GuildMemberCountStore = findStoreLazy("GuildMemberCountStore") as FluxStore & { getMemberCount(guildId?: string): number | null; };
 export const ChannelMemberStore = findStoreLazy("ChannelMemberStore") as FluxStore & {
-    getProps(guildId: string, channelId: string): { groups: { count: number; id: string; }[]; };
+    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[]; }; };
+    getMemberListSections(channelId?: string): { [sectionId: string]: { sectionId: string; userIds: string[]; }; };
 };
 
 
diff --git a/src/utils/discord.tsx b/src/utils/discord.tsx
index c1d1e2253..4c7cc38a0 100644
--- a/src/utils/discord.tsx
+++ b/src/utils/discord.tsx
@@ -18,7 +18,7 @@
 
 import { MessageObject } from "@api/MessageEvents";
 import { ChannelStore, ComponentDispatch, Constants, FluxDispatcher, GuildStore, InviteActions, MaskedLink, MessageActions, ModalImageClasses, PrivateChannelsStore, RestAPI, SelectedChannelStore, SelectedGuildStore, UserProfileActions, UserProfileStore, UserSettingsActionCreators, UserUtils } from "@webpack/common";
-import { Guild, Message, User } from "discord-types/general";
+import { Channel, Guild, Message, User } from "discord-types/general";
 
 import { ImageModal, ModalRoot, ModalSize, openModal } from "./modal";
 
@@ -54,12 +54,12 @@ export async function openInviteModal(code: string) {
     });
 }
 
-export function getCurrentChannel() {
+export function getCurrentChannel(): Channel | undefined {
     return ChannelStore.getChannel(SelectedChannelStore.getChannelId());
 }
 
 export function getCurrentGuild(): Guild | undefined {
-    return GuildStore.getGuild(getCurrentChannel()?.guild_id);
+    return GuildStore.getGuild(getCurrentChannel()?.guild_id!);
 }
 
 export function openPrivateChannel(userId: string) {
diff --git a/src/webpack/common/types/components.d.ts b/src/webpack/common/types/components.d.ts
index 0588d5e4c..6c7623339 100644
--- a/src/webpack/common/types/components.d.ts
+++ b/src/webpack/common/types/components.d.ts
@@ -91,7 +91,7 @@ export type Tooltip = ComponentType<{
     /** Tooltip.Colors.BLACK */
     color?: string;
     /** TooltipPositions.TOP */
-    position?: string;
+    position?: PopoutPosition;
 
     tooltipClassName?: string;
     tooltipContentClassName?: string;
@@ -110,7 +110,7 @@ export type TooltipContainer = ComponentType<PropsWithChildren<{
     /** Tooltip.Colors.BLACK */
     color?: string;
     /** TooltipPositions.TOP */
-    position?: string;
+    position?: PopoutPosition;
     spacing?: number;
 
     className?: string;
@@ -252,7 +252,7 @@ export type Select = ComponentType<PropsWithChildren<{
     look?: 0 | 1;
     className?: string;
     popoutClassName?: string;
-    popoutPosition?: "top" | "left" | "right" | "bottom" | "center" | "window_center";
+    popoutPosition?: PopoutPosition;
     optionClassName?: string;
 
     autoFocus?: boolean;
@@ -293,7 +293,7 @@ export type SearchableSelect = ComponentType<PropsWithChildren<{
     className?: string;
     popoutClassName?: string;
     wrapperClassName?: string;
-    popoutPosition?: "top" | "left" | "right" | "bottom" | "center" | "window_center";
+    popoutPosition?: PopoutPosition;
     optionClassName?: string;
 
     autoFocus?: boolean;
@@ -376,6 +376,8 @@ declare enum PopoutAnimation {
     FADE = "4"
 }
 
+type PopoutPosition = "top" | "bottom" | "left" | "right" | "center" | "window_center";
+
 export type Popout = ComponentType<{
     children(
         thing: {
@@ -387,7 +389,7 @@ export type Popout = ComponentType<{
         },
         data: {
             isShown: boolean;
-            position: string;
+            position: PopoutPosition;
         }
     ): ReactNode;
     shouldShow?: boolean;
@@ -395,7 +397,7 @@ export type Popout = ComponentType<{
         closePopout(): void;
         isPositioned: boolean;
         nudge: number;
-        position: string;
+        position: PopoutPosition;
         setPopoutRef(ref: any): void;
         updatePosition(): void;
     }): ReactNode;
@@ -404,13 +406,13 @@ export type Popout = ComponentType<{
     onRequestClose?(): void;
 
     /** "center" and others */
-    align?: string;
+    align?: "left" | "right" | "center";
     /** Popout.Animation */
     animation?: PopoutAnimation;
     autoInvert?: boolean;
     nudgeAlignIntoViewport?: boolean;
     /** "bottom" and others */
-    position?: string;
+    position?: PopoutPosition;
     positionKey?: string;
     spacing?: number;
 }> & {

From 40512d729490091f61d645cc2e9eded9390ef26d Mon Sep 17 00:00:00 2001
From: Nyako <24845294+nyakowint@users.noreply.github.com>
Date: Wed, 4 Sep 2024 20:16:41 -0400
Subject: [PATCH 27/30] XSOverlay: fix profile images (#2788)

Fixes https://github.com/Vendicated/Vencord/issues/2787

Co-authored-by: v <vendicated@riseup.net>
---
 src/plugins/xsOverlay/index.tsx | 40 +++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/plugins/xsOverlay/index.tsx b/src/plugins/xsOverlay/index.tsx
index 12dbf6b61..4c5b7a80e 100644
--- a/src/plugins/xsOverlay/index.tsx
+++ b/src/plugins/xsOverlay/index.tsx
@@ -86,7 +86,7 @@ interface NotificationObject {
     title: string;
     content: string;
     useBase64Icon: boolean;
-    icon: ArrayBuffer | string;
+    icon: string;
     sourceApp: string;
 }
 
@@ -320,23 +320,29 @@ function shouldIgnoreForChannelType(channel: Channel) {
 }
 
 function sendMsgNotif(titleString: string, content: string, message: Message) {
-    fetch(`https://cdn.discordapp.com/avatars/${message.author.id}/${message.author.avatar}.png?size=128`).then(response => response.arrayBuffer()).then(result => {
-        const msgData: NotificationObject = {
-            type: 1,
-            timeout: settings.store.lengthBasedTimeout ? calculateTimeout(content) : settings.store.timeout,
-            height: calculateHeight(content),
-            opacity: settings.store.opacity,
-            volume: settings.store.volume,
-            audioPath: settings.store.soundPath,
-            title: titleString,
-            content: content,
-            useBase64Icon: true,
-            icon: new TextDecoder().decode(result),
-            sourceApp: "Vencord"
-        };
+    fetch(`https://cdn.discordapp.com/avatars/${message.author.id}/${message.author.avatar}.png?size=128`)
+        .then(response => response.blob())
+        .then(blob => new Promise<string>(resolve => {
+            const r = new FileReader();
+            r.onload = () => resolve((r.result as string).split(",")[1]);
+            r.readAsDataURL(blob);
+        })).then(result => {
+            const msgData: NotificationObject = {
+                type: 1,
+                timeout: settings.store.lengthBasedTimeout ? calculateTimeout(content) : settings.store.timeout,
+                height: calculateHeight(content),
+                opacity: settings.store.opacity,
+                volume: settings.store.volume,
+                audioPath: settings.store.soundPath,
+                title: titleString,
+                content: content,
+                useBase64Icon: true,
+                icon: result,
+                sourceApp: "Vencord"
+            };
 
-        sendToOverlay(msgData);
-    });
+            sendToOverlay(msgData);
+        });
 }
 
 function sendOtherNotif(content: string, titleString: string) {

From e6994e1946ea2b34c0b6b842d3a323beb9cfa3ef Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Thu, 5 Sep 2024 02:24:10 +0200
Subject: [PATCH 28/30] MentionAvatars: Fix compatibility with ServerInfo
 plugin

---
 src/plugins/mentionAvatars/styles.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/plugins/mentionAvatars/styles.css b/src/plugins/mentionAvatars/styles.css
index 64eb41416..cf6e2c14c 100644
--- a/src/plugins/mentionAvatars/styles.css
+++ b/src/plugins/mentionAvatars/styles.css
@@ -9,3 +9,8 @@
 .vc-mentionAvatars-role-icon {
     margin: 0 2px 0.2rem 4px;
 }
+
+/** don't display inside the ServerInfo modal owner mention */
+.vc-gp-owner .vc-mentionAvatars-icon {
+    display: none;
+}

From 61d3c08f1f6b9c44bd193aab4f8568734ba60ad8 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Thu, 5 Sep 2024 02:25:27 +0200
Subject: [PATCH 29/30] bump to v1.10.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 65a2f4512..e65e1b0a7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "vencord",
     "private": "true",
-    "version": "1.9.9",
+    "version": "1.10.1",
     "description": "The cutest Discord client mod",
     "homepage": "https://github.com/Vendicated/Vencord#readme",
     "bugs": {

From 8890c8c6b4201121c559e671e0110b45937467c2 Mon Sep 17 00:00:00 2001
From: Vendicated <vendicated@riseup.net>
Date: Thu, 5 Sep 2024 02:33:07 +0200
Subject: [PATCH 30/30] fix Commands, Badges, RoleColorEverywhere

---
 src/api/Commands/index.ts                    | 7 ++++---
 src/plugins/_api/badges/fixBadgeOverflow.css | 3 ---
 src/plugins/_api/badges/index.tsx            | 4 +---
 src/plugins/roleColorEverywhere/index.tsx    | 2 +-
 4 files changed, 6 insertions(+), 10 deletions(-)
 delete mode 100644 src/plugins/_api/badges/fixBadgeOverflow.css

diff --git a/src/api/Commands/index.ts b/src/api/Commands/index.ts
index 5e3fc8f4d..e5803ba02 100644
--- a/src/api/Commands/index.ts
+++ b/src/api/Commands/index.ts
@@ -16,6 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+import { Logger } from "@utils/Logger";
 import { makeCodeblock } from "@utils/text";
 
 import { sendBotMessage } from "./commandHelpers";
@@ -46,10 +47,10 @@ export let RequiredMessageOption: Option = ReqPlaceholder;
 export const _init = function (cmds: Command[]) {
     try {
         BUILT_IN = cmds;
-        OptionalMessageOption = cmds.find(c => c.name === "shrug")!.options![0];
-        RequiredMessageOption = cmds.find(c => c.name === "me")!.options![0];
+        OptionalMessageOption = cmds.find(c => (c.untranslatedName || c.displayName) === "shrug")!.options![0];
+        RequiredMessageOption = cmds.find(c => (c.untranslatedName || c.displayName) === "me")!.options![0];
     } catch (e) {
-        console.error("Failed to load CommandsApi");
+        new Logger("CommandsAPI").error("Failed to load CommandsApi", e, " - cmds is", cmds);
     }
     return cmds;
 } as never;
diff --git a/src/plugins/_api/badges/fixBadgeOverflow.css b/src/plugins/_api/badges/fixBadgeOverflow.css
deleted file mode 100644
index 348d0ff38..000000000
--- a/src/plugins/_api/badges/fixBadgeOverflow.css
+++ /dev/null
@@ -1,3 +0,0 @@
-[class*="profileBadges"] {
-    flex: none;
-}
diff --git a/src/plugins/_api/badges/index.tsx b/src/plugins/_api/badges/index.tsx
index cf00a0e29..c44d98b90 100644
--- a/src/plugins/_api/badges/index.tsx
+++ b/src/plugins/_api/badges/index.tsx
@@ -16,8 +16,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "./fixBadgeOverflow.css";
-
 import { _getBadges, BadgePosition, BadgeUserArgs, ProfileBadge } from "@api/Badges";
 import DonateButton from "@components/DonateButton";
 import ErrorBoundary from "@components/ErrorBoundary";
@@ -79,7 +77,7 @@ export default definePlugin({
                     replace: "...$1.props,$& $1.image??"
                 },
                 {
-                    match: /(?<=text:(\i)\.description,.{0,50})children:/,
+                    match: /(?<=text:(\i)\.description,.{0,200})children:/,
                     replace: "children:$1.component ? $self.renderBadgeComponent({ ...$1 }) :"
                 },
                 // conditionally override their onClick with badge.onClick if it exists
diff --git a/src/plugins/roleColorEverywhere/index.tsx b/src/plugins/roleColorEverywhere/index.tsx
index 3e7d216b7..b5f66c098 100644
--- a/src/plugins/roleColorEverywhere/index.tsx
+++ b/src/plugins/roleColorEverywhere/index.tsx
@@ -57,7 +57,7 @@ export default definePlugin({
     patches: [
         // Chat Mentions
         {
-            find: 'location:"UserMention',
+            find: ".USER_MENTION)",
             replacement: [
                 {
                     match: /onContextMenu:\i,color:\i,\.\.\.\i(?=,children:)(?<=user:(\i),channel:(\i).{0,500}?)/,