Fix plugins for latest discord update (#3509)

Co-authored-by: Etorix <92535668+EtorixDev@users.noreply.github.com>
Co-authored-by: V <vendicated@riseup.net>

src/plugins/callTimer/index.tsx

@@ -75,7 +75,8 @@ export default definePlugin({
     patches: [{
         find: "renderConnectionStatus(){",
         replacement: {
-            match: /(renderConnectionStatus\(\){.+\.channel,children:)(.+?}\):\i)(?=}\))/,
+            // in renderConnectionStatus()
+            match: /(lineClamp:1,children:)(\i)(?=,|}\))/,
             replace: "$1[$2,$self.renderTimer(this.props.channel.id)]"
         }
     }],

src/plugins/clientTheme/components/Settings.tsx

@@ -7,14 +7,13 @@
 import { classNameFactory } from "@api/Styles";
 import { ErrorCard } from "@components/ErrorCard";
 import { Margins } from "@utils/margins";
-import { findByCodeLazy, findComponentByCodeLazy, findStoreLazy } from "@webpack";
+import { findByCodeLazy, findStoreLazy } from "@webpack";
-import { Button, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
+import { Button, ColorPicker, Forms, ThemeStore, useStateFromStores } from "@webpack/common";
 
 import { settings } from "..";
 import { relativeLuminance } from "../utils/colorUtils";
 import { createOrUpdateThemeColorVars } from "../utils/styleUtils";
 
-const ColorPicker = findComponentByCodeLazy("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", ".BACKGROUND_PRIMARY)");
 const saveClientTheme = findByCodeLazy('type:"UNSYNCED_USER_SETTINGS_UPDATE', '"system"===');
 const NitroThemeStore = findStoreLazy("ClientThemesBackgroundStore");
 

src/plugins/fakeNitro/index.tsx

@@ -394,7 +394,7 @@ export default definePlugin({
         },
         // Separate patch for allowing using custom app icons
         {
-            find: "?24:30,",
+            find: "getCurrentDesktopIcon(),",
             replacement: {
                 match: /\i\.\i\.isPremium\(\i\.\i\.getCurrentUser\(\)\)/,
                 replace: "true"

src/plugins/fakeProfileThemes/index.tsx

@@ -24,10 +24,9 @@ import ErrorBoundary from "@components/ErrorBoundary";
 import { Devs } from "@utils/constants";
 import { Margins } from "@utils/margins";
 import { classes, copyWithToast } from "@utils/misc";
-import { useAwaiter } from "@utils/react";
 import definePlugin, { OptionType } from "@utils/types";
-import { extractAndLoadChunksLazy, findComponentByCodeLazy } from "@webpack";
+import { findComponentByCodeLazy } from "@webpack";
-import { Button, Flex, Forms, React, Text, UserProfileStore, UserStore, useState } from "@webpack/common";
+import { Button, ColorPicker, Flex, Forms, React, Text, UserProfileStore, UserStore, useState } from "@webpack/common";
 import { User } from "discord-types/general";
 import { ReactElement } from "react";
 import virtualMerge from "virtual-merge";
@@ -109,10 +108,8 @@ interface ProfileModalProps {
     isTryItOutFlow: boolean;
 }
 
-const ColorPicker = findComponentByCodeLazy<ColorPickerProps>("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", ".BACKGROUND_PRIMARY)");
 const ProfileModal = findComponentByCodeLazy<ProfileModalProps>("isTryItOutFlow:", "pendingThemeColors:", "pendingAvatarDecoration:", "EDIT_PROFILE_BANNER");
 
-const requireColorPicker = extractAndLoadChunksLazy(["#{intl::USER_SETTINGS_PROFILE_COLOR_DEFAULT_BUTTON}"], /createPromise:\(\)=>\i\.\i(\("?.+?"?\)).then\(\i\.bind\(\i,"?(.+?)"?\)\)/);
 
 export default definePlugin({
     name: "FakeProfileThemes",
@@ -141,8 +138,6 @@ export default definePlugin({
         const [color1, setColor1] = useState(existingColors[0]);
         const [color2, setColor2] = useState(existingColors[1]);
 
-        const [, , loadingColorPickerChunk] = useAwaiter(requireColorPicker);
-
         return (
             <Forms.FormSection>
                 <Forms.FormTitle tag="h3">Usage</Forms.FormTitle>
@@ -162,51 +157,49 @@ export default definePlugin({
                         className={classes(Margins.top8, Margins.bottom8)}
                     />
                     <Forms.FormTitle tag="h3">Color pickers</Forms.FormTitle>
-                    {!loadingColorPickerChunk && (
+                    <Flex
-                        <Flex
+                        direction={Flex.Direction.HORIZONTAL}
-                            direction={Flex.Direction.HORIZONTAL}
+                        style={{ gap: "1rem" }}
-                            style={{ gap: "1rem" }}
+                    >
+                        <ColorPicker
+                            color={color1}
+                            label={
+                                <Text
+                                    variant={"text-xs/normal"}
+                                    style={{ marginTop: "4px" }}
+                                >
+                                    Primary
+                                </Text>
+                            }
+                            onChange={(color: number) => {
+                                setColor1(color);
+                            }}
+                        />
+                        <ColorPicker
+                            color={color2}
+                            label={
+                                <Text
+                                    variant={"text-xs/normal"}
+                                    style={{ marginTop: "4px" }}
+                                >
+                                    Accent
+                                </Text>
+                            }
+                            onChange={(color: number) => {
+                                setColor2(color);
+                            }}
+                        />
+                        <Button
+                            onClick={() => {
+                                const colorString = encode(color1, color2);
+                                copyWithToast(colorString);
+                            }}
+                            color={Button.Colors.PRIMARY}
+                            size={Button.Sizes.XLARGE}
                         >
-                            <ColorPicker
+                            Copy 3y3
-                                color={color1}
+                        </Button>
-                                label={
+                    </Flex>
-                                    <Text
-                                        variant={"text-xs/normal"}
-                                        style={{ marginTop: "4px" }}
-                                    >
-                                        Primary
-                                    </Text>
-                                }
-                                onChange={(color: number) => {
-                                    setColor1(color);
-                                }}
-                            />
-                            <ColorPicker
-                                color={color2}
-                                label={
-                                    <Text
-                                        variant={"text-xs/normal"}
-                                        style={{ marginTop: "4px" }}
-                                    >
-                                        Accent
-                                    </Text>
-                                }
-                                onChange={(color: number) => {
-                                    setColor2(color);
-                                }}
-                            />
-                            <Button
-                                onClick={() => {
-                                    const colorString = encode(color1, color2);
-                                    copyWithToast(colorString);
-                                }}
-                                color={Button.Colors.PRIMARY}
-                                size={Button.Sizes.XLARGE}
-                            >
-                                Copy 3y3
-                            </Button>
-                        </Flex>
-                    )}
                     <Forms.FormDivider
                         className={classes(Margins.top8, Margins.bottom8)}
                     />

src/plugins/pinDms/components/CreateCategoryModal.tsx

@@ -7,18 +7,11 @@
 import { classNameFactory } from "@api/Styles";
 import { ModalContent, ModalFooter, ModalHeader, ModalProps, ModalRoot, openModalLazy } from "@utils/modal";
 import { extractAndLoadChunksLazy, findComponentByCodeLazy } from "@webpack";
-import { Button, Forms, Text, TextInput, Toasts, useMemo, useState } from "@webpack/common";
+import { Button, ColorPicker, Forms, Text, TextInput, Toasts, useMemo, useState } from "@webpack/common";
 
 import { DEFAULT_COLOR, SWATCHES } from "../constants";
 import { categoryLen, createCategory, getCategory } from "../data";
 
-interface ColorPickerProps {
-    color: number | null;
-    showEyeDropper?: boolean;
-    suggestedColors?: string[];
-    onChange(value: number | null): void;
-}
-
 interface ColorPickerWithSwatchesProps {
     defaultColor: number;
     colors: number[];
@@ -29,7 +22,6 @@ interface ColorPickerWithSwatchesProps {
     renderCustomButton?: () => React.ReactNode;
 }
 
-const ColorPicker = findComponentByCodeLazy<ColorPickerProps>("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", ".BACKGROUND_PRIMARY)");
 const ColorPickerWithSwatches = findComponentByCodeLazy<ColorPickerWithSwatchesProps>('id:"color-picker"');
 
 export const requireSettingsMenu = extractAndLoadChunksLazy(['name:"UserSettings"'], /createPromise:.{0,20}(\i\.\i\("?.+?"?\).*?).then\(\i\.bind\(\i,"?(.+?)"?\)\).{0,50}"UserSettings"/);

src/plugins/typingIndicator/index.tsx

@@ -178,7 +178,7 @@ export default definePlugin({
         // Theads
         {
             // This is the thread "spine" that shows in the left
-            find: "M11 9H4C2.89543 9 2 8.10457 2 7V1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1V7C0 9.20914 1.79086 11 4 11H11C11.5523 11 12 10.5523 12 10C12 9.44771 11.5523 9 11 9Z",
+            find: "M0 15H2c0 1.6569",
             replacement: {
                 match: /mentionsCount:\i.+?null(?<=channel:(\i).+?)/,
                 replace: "$&,$self.TypingIndicator($1.id,$1.getGuildId())"

src/webpack/common/components.ts

@@ -65,6 +65,9 @@ export const Paginator = waitForComponent<t.Paginator>("Paginator", filters.comp
 export const Clickable = waitForComponent<t.Clickable>("Clickable", filters.componentByCode("this.context?this.renderNonInteractive():"));
 export const Avatar = waitForComponent<t.Avatar>("Avatar", filters.componentByCode(".size-1.375*"));
 
+export const ColorPicker = waitForComponent<t.ColorPicker>("ColorPicker", filters.componentByCode("#{intl::USER_SETTINGS_PROFILE_COLOR_SELECT_COLOR}", "showEyeDropper"));
+
+
 export let createScroller: (scrollbarClassName: string, fadeClassName: string, customThemeClassName: string) => t.ScrollerThin;
 export let scrollerClasses: Record<string, string>;
 waitFor(filters.byCode('="ltr",orientation:', "customTheme:", "forwardRef"), m => createScroller = m);

src/webpack/common/types/components.d.ts

@@ -536,3 +536,10 @@ export type Icon = ComponentType<JSX.IntrinsicElements["svg"] & {
     colorClass?: string;
 } & Record<string, any>>;
 
+export type ColorPicker = ComponentType<{
+    color: number | null;
+    showEyeDropper?: boolean;
+    suggestedColors?: string[];
+    label?: ReactNode;
+    onChange(value: number | null): void;
+}>;