DiscordFixes plugin

src/plugins/_api/dynamicImageModalApi.ts

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

src/plugins/_core/discordFixes/index.tsx

@@ -0,0 +1,53 @@
+/*
+ * Vencord, a Discord client mod
+ * Copyright (c) 2025 Vendicated and contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+import "./styles.css";
+
+import { classNameFactory } from "@api/Styles";
+import ErrorBoundary from "@components/ErrorBoundary";
+import { Devs } from "@utils/constants";
+import { classes } from "@utils/misc";
+import definePlugin from "@utils/types";
+import { PropsWithChildren } from "react";
+
+type UsernameWrapperProps = PropsWithChildren<Record<string, any> & {
+    className?: string;
+}>;
+
+const cl = classNameFactory("vc-discord-fixes-");
+
+const UsernameWrapper = ErrorBoundary.wrap((props: UsernameWrapperProps) => {
+    return <div {...props} className={classes(cl("username-wrapper"), props.className)} />;
+}, { noop: true });
+
+export default definePlugin({
+    name: "DiscordFixes",
+    description: "Fixes Discord issues required or not for Vencord plugins to work properly",
+    authors: [Devs.Nuckyz],
+    required: true,
+
+    patches: [
+        // Make username wrapper a div instead of a span, to align items to center easier with flex
+        {
+            find: '"Message Username"',
+            replacement: {
+                match: /"span"(?=,{id:)/,
+                replace: "$self.UsernameWrapper"
+            }
+        },
+        // Make MediaModal use the Discord media component instead of a simple "img" component,
+        // if any of height or width exists and is not 0. Default behavior is to only use the component if both exist.
+        {
+            find: "SCALE_DOWN:",
+            replacement: {
+                match: /!\(null==(\i)\|\|0===\i\|\|null==(\i)\|\|0===\i\)/,
+                replace: (_, width, height) => `!((null==${width}||0===${width})&&(null==${height}||0===${height}))`
+            }
+        }
+    ],
+
+    UsernameWrapper
+});

src/plugins/_core/discordFixes/styles.css

@@ -0,0 +1,11 @@
+.vc-discord-fixes-username-wrapper {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Remove top gap from chat tags, because the plugin makes it use a div to center instead */
+[class*="botTag"][class*="rem"] {
+    margin-top: unset;
+    top: unset;
+}

src/plugins/platformIndicators/index.tsx

@@ -131,7 +131,7 @@ function getBadges({ userId }: BadgeUserArgs): ProfileBadge[] {
     }));
 }
 
-const PlatformIndicator = ({ user, wantMargin = true, wantTopMargin = false, small = false }: { user: User; wantMargin?: boolean; wantTopMargin?: boolean; small?: boolean; }) => {
+const PlatformIndicator = ({ user, wantMargin = true, small = false }: { user: User; wantMargin?: boolean; small?: boolean; }) => {
     if (!user || user.bot) return null;
 
     ensureOwnStatus(user);
@@ -155,7 +155,6 @@ const PlatformIndicator = ({ user, wantMargin = true, wantTopMargin = false, sma
             className="vc-platform-indicator"
             style={{
                 marginLeft: wantMargin ? 4 : 0,
-                top: wantTopMargin ? 2 : 0,
                 gap: 2
             }}
         >
@@ -188,7 +187,7 @@ const indicatorLocations = {
         description: "Inside messages",
         onEnable: () => addMessageDecoration("platform-indicator", props =>
             <ErrorBoundary noop>
-                <PlatformIndicator user={props.message?.author} wantTopMargin={true} />
+                <PlatformIndicator user={props.message?.author} />
             </ErrorBoundary>
         ),
         onDisable: () => removeMessageDecoration("platform-indicator")

src/plugins/serverInfo/index.tsx

@@ -28,7 +28,6 @@ export default definePlugin({
     name: "ServerInfo",
     description: "Allows you to view info about a server",
     authors: [Devs.Ven, Devs.Nuckyz],
-    dependencies: ["DynamicImageModalAPI"],
     tags: ["guild", "info", "ServerProfile"],
 
     contextMenus: {

src/plugins/userVoiceShow/components.tsx

@@ -130,7 +130,6 @@ function VoiceChannelTooltip({ channel, isLocked }: VoiceChannelTooltipProps) {
 
 interface VoiceChannelIndicatorProps {
     userId: string;
-    isMessageIndicator?: boolean;
     isProfile?: boolean;
     isActionButton?: boolean;
     shouldHighlight?: boolean;
@@ -138,7 +137,7 @@ interface VoiceChannelIndicatorProps {
 
 const clickTimers = {} as Record<string, any>;
 
-export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isMessageIndicator, isProfile, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
+export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isProfile, isActionButton, shouldHighlight }: VoiceChannelIndicatorProps) => {
     const channelId = useStateFromStores([VoiceStateStore], () => VoiceStateStore.getVoiceStateForUser(userId)?.channelId as string | undefined);
 
     const channel = channelId == null ? undefined : ChannelStore.getChannel(channelId);
@@ -182,7 +181,7 @@ export const VoiceChannelIndicator = ErrorBoundary.wrap(({ userId, isMessageIndi
             {props => {
                 const iconProps: IconProps = {
                     ...props,
-                    className: classes(isMessageIndicator && cl("message-indicator"), (!isProfile && !isActionButton) && cl("speaker-margin"), isActionButton && ActionButtonClasses.actionButton, shouldHighlight && ActionButtonClasses.highlight),
+                    className: classes((!isProfile && !isActionButton) && cl("speaker-margin"), isActionButton && ActionButtonClasses.actionButton, shouldHighlight && ActionButtonClasses.highlight),
                     size: isActionButton ? 20 : undefined,
                     onClick
                 };

src/plugins/userVoiceShow/index.tsx

@@ -99,7 +99,7 @@ export default definePlugin({
             addMemberListDecorator("UserVoiceShow", ({ user }) => user == null ? null : <VoiceChannelIndicator userId={user.id} />);
         }
         if (settings.store.showInMessages) {
-            addMessageDecoration("UserVoiceShow", ({ message }) => message?.author == null ? null : <VoiceChannelIndicator userId={message.author.id} isMessageIndicator />);
+            addMessageDecoration("UserVoiceShow", ({ message }) => message?.author == null ? null : <VoiceChannelIndicator userId={message.author.id} />);
         }
     },
 

src/plugins/userVoiceShow/style.css

@@ -17,12 +17,6 @@
     margin-left: 4px;
 }
 
-.vc-uvs-message-indicator {
-    display: inline-flex;
-    top: 2.5px;
-    position: relative;
-}
-
 .vc-uvs-tooltip-container {
     max-width: 300px;
 }

src/plugins/viewIcons/index.tsx

@@ -176,7 +176,6 @@ export default definePlugin({
     authors: [Devs.Ven, Devs.TheKodeToad, Devs.Nuckyz, Devs.nyx],
     description: "Makes avatars and banners in user profiles clickable, adds View Icon/Banner entries in the user, server and group channel context menu.",
     tags: ["ImageUtilities"],
-    dependencies: ["DynamicImageModalAPI"],
 
     settings,