Merge remote-tracking branch 'upstream/dev' into dev

src/api/Themes.ts

@@ -81,8 +81,10 @@ async function initThemes() {
     updatePopoutWindows();
 }
 
-function applyToPopout(popoutWindow: Window | undefined) {
+function applyToPopout(popoutWindow: Window | undefined, key: string) {
     if (!popoutWindow?.document) return;
+    // skip game overlay cuz it needs to stay transparent, themes broke it
+    if (key === "DISCORD_OutOfProcessOverlay") return;
 
     const doc = popoutWindow.document;
 
@@ -93,10 +95,9 @@ function applyToPopout(popoutWindow: Window | undefined) {
 
 function updatePopoutWindows() {
     if (!PopoutWindowStore) return;
-    const windowKeys = PopoutWindowStore.getWindowKeys();
-    for (const key of windowKeys) {
-        const popoutWindow = PopoutWindowStore.getWindow(key);
-        applyToPopout(popoutWindow);
+
+    for (const key of PopoutWindowStore.getWindowKeys()) {
+        applyToPopout(PopoutWindowStore.getWindow(key), key);
     }
 }
 
@@ -115,8 +116,7 @@ document.addEventListener("DOMContentLoaded", () => {
         const { discordPopoutEvent } = event.data || {};
         if (discordPopoutEvent?.type !== "loaded") return;
 
-        const popoutWindow = PopoutWindowStore.getWindow(discordPopoutEvent.key);
-        applyToPopout(popoutWindow);
+        applyToPopout(PopoutWindowStore.getWindow(discordPopoutEvent.key), discordPopoutEvent.key);
     });
 
     if (!IS_WEB) {

src/components/Button.css

@@ -62,6 +62,26 @@
     line-height: 1.25;
 }
 
+.vc-btn-iconOnly {
+    width: 32px;
+    height: 32px;
+    min-width: unset;
+    min-height: unset;
+    padding: 0;
+    background-color: transparent;
+    border-color: transparent;
+
+    &:hover {
+        background-color: var(--control-icon-only-background-hover);
+        border-color: var(--control-icon-only-border-hover);
+    }
+
+    &:active {
+        background-color: var(--control-icon-only-background-active);
+        border-color: var(--control-icon-only-border-active);
+    }
+}
+
 .vc-btn-primary {
     background-color: var(--control-primary-background-default);
     border-color: var(--control-primary-border-default);

src/components/Button.tsx

@@ -19,7 +19,7 @@ const textBtnCls = classNameFactory("vc-text-btn-");
 
 export type ButtonVariant =
     "primary" | "secondary" | "dangerPrimary" | "dangerSecondary" | "overlayPrimary" | "positive" | "link" | "none";
-export type ButtonSize = "min" | "xs" | "small" | "medium";
+export type ButtonSize = "min" | "xs" | "small" | "medium" | "iconOnly";
 
 export type ButtonProps = ComponentPropsWithRef<"button"> & {
     variant?: ButtonVariant;

src/components/CodeBlock.tsx

@@ -19,3 +19,14 @@ export function CodeBlock(props: { content?: string, lang: string; }) {
         </div>
     );
 }
+
+/**
+ * Renders inline code like `this`
+ */
+export function InlineCode({ children }: { children: React.ReactNode; }) {
+    return (
+        <span className={CodeContainerClasses.markup}>
+            <code className="inline">{children}</code>
+        </span>
+    );
+}

src/plugins/_api/messageEvents.ts

@@ -27,7 +27,7 @@ export default definePlugin({
         {
             find: "#{intl::EDIT_TEXTAREA_HELP}",
             replacement: {
-                match: /(?<=,channel:\i\}\)\.then\().+?\i\.content!==this\.props\.message\.content&&\i\((.+?)\)\}(?=return)/,
+                match: /(?<=,channel:\i\}\)\.then\().+?(?=\i\.content!==this\.props\.message\.content&&\i\((.+?)\)\})/,
                 replace: (match, args) => "" +
                     `async ${match}` +
                     `if(await Vencord.Api.MessageEvents._handlePreEdit(${args}))` +

src/plugins/fixImagesQuality/index.tsx

@@ -60,12 +60,15 @@ export default definePlugin({
         );
     },
 
-    getSrc(props: { src: string; mediaLayoutType: string; width: number; height: number; contentType: string; }, freeze?: boolean) {
+    getSrc(props: { src: string; mediaLayoutType: string; width: number; height: number; contentType: string; mosaicStyleAlt?: boolean; }, freeze?: boolean) {
         if (!props?.src) return;
 
         try {
-            const { contentType, height, mediaLayoutType, src, width } = props;
-            if (!contentType?.startsWith("image/") || src.startsWith("data:")) return;
+            const { contentType, height, mediaLayoutType, src, width, mosaicStyleAlt } = props;
+            // Embed images do not have a content type set.
+            // It's difficult to differentiate between images and videos. but mosaicStyleAlt seems exclusive to images
+            const isImage = contentType?.startsWith("image/") ?? (typeof mosaicStyleAlt === "boolean");
+            if (!isImage || src.startsWith("data:")) return;
 
             const url = new URL(src);
             if (!url.pathname.startsWith("/attachments/")) return;