FakeProfileThemes: Support New Profile Editor

packages/discord-types/src/components.d.ts

@@ -542,3 +542,9 @@ export type ColorPicker = ComponentType<{
     onChange(value: number | null): void;
     disabled?: boolean;
 }>;
+
+export type ComponentSection = ComponentType<PropsWithChildren<{
+    heading?: string;
+    disabled?: boolean;
+    showNitroIcon?: boolean;
+}>>;

src/plugins/_core/concatenatedComponentExtractor.tsx

@@ -6,7 +6,7 @@
 
 import { Devs } from "@utils/constants";
 import definePlugin from "@utils/types";
-import { setColorPicker, setCreateScroller } from "@webpack/common";
+import { setColorPicker, setCreateScroller, setNewCustomizationSection } from "@webpack/common";
 
 export default definePlugin({
     name: "ConcatenatedComponentExtractor",
@@ -29,9 +29,19 @@ export default definePlugin({
                 match: /(?=function (\i)\(\i,\i,\i\)\{.{0,20}?return \i\.forwardRef\(function\(\i,\i\)\{let\{[^}]+?="ltr",orientation:)/,
                 replace: "$self.setCreateScroller($1);"
             }
+        },
+        {
+            find: '("UserProfileModalV2EditingPanel")',
+            replacement: [
+                {
+                    match: /function (\i).{0,50}showNitroIcon:.{0,450}\}\),\i\]\}\)\}/,
+                    replace: "$&$self.setNewCustomizationSection($1);"
+                }
+            ]
         }
     ],
 
     setCreateScroller,
     setColorPicker,
+    setNewCustomizationSection
 });

src/plugins/decor/index.tsx

@@ -24,8 +24,6 @@ export interface AvatarDecoration {
     skuId: string;
 }
 
-export let NewCustomizationSection;
-
 export default definePlugin({
     name: "Decor",
     description: "Create and use your own custom avatar decorations, or pick your favorite from the presets.",
@@ -124,10 +122,6 @@ export default definePlugin({
         {
             find: '("UserProfileModalV2EditingPanel")',
             replacement: [
-                {
-                    match: /function (\i).{0,50}showNitroIcon:.{0,450}\}\),\i\]\}\)\}/,
-                    replace: "$&$self.setNewCustomizationSection($1);"
-                },
                 {
                     match: /"inline"===.{0,100}#{intl::Zenogr::raw}\)/,
                     replace: "$self.ExperimentDecorSection(),$&"
@@ -187,7 +181,4 @@ export default definePlugin({
         (props: DecorSectionProps) => <DecorSection {...props} useNewSection />,
         { noop: true }
     ),
-    setNewCustomizationSection(component) {
-        NewCustomizationSection = component;
-    }
 });

src/plugins/decor/ui/components/DecorSection.tsx

@@ -6,13 +6,12 @@
 
 import { Button } from "@components/Button";
 import { Flex } from "@components/Flex";
-import { NewCustomizationSection } from "@plugins/decor";
 import { useAuthorizationStore } from "@plugins/decor/lib/stores/AuthorizationStore";
 import { useCurrentUserDecorationsStore } from "@plugins/decor/lib/stores/CurrentUserDecorationsStore";
 import { cl } from "@plugins/decor/ui";
 import { openChangeDecorationModal } from "@plugins/decor/ui/modals/ChangeDecorationModal";
 import { findComponentByCodeLazy } from "@webpack";
-import { useEffect } from "@webpack/common";
+import { NewCustomizationSection, useEffect } from "@webpack/common";
 
 const CustomizationSection = findComponentByCodeLazy(".DESCRIPTION", "hasBackground:");
 
@@ -35,14 +34,14 @@ export default function DecorSection({ hideTitle = false, hideDivider = false, n
 
     if (useNewSection && !NewSection) return null;
 
-    const Section = useNewSection ? NewSection : CustomizationSection;
+    const Section = (useNewSection ? NewCustomizationSection : CustomizationSection);
     const sectionProps = useNewSection
-        ? { heading: !hideTitle && "Decor" }
+        ? { heading: hideTitle ? undefined : "Decor" }
         : {
-            title: !hideTitle && "Decor",
+            title: hideTitle ? undefined : "Decor",
             hasBackground: true,
             hideDivider,
-            className: noMargin && cl("section-remove-margin")
+            className: noMargin ? cl("section-remove-margin") : undefined
         };
 
     const changeLabel = useNewSection ? "Change" : "Change Decoration";

src/plugins/fakeProfileThemes/index.tsx

@@ -216,6 +216,16 @@ export default definePlugin({
                 match: /#{intl::USER_SETTINGS_RESET_PROFILE_THEME}\).+?}\)(?=\])(?<=color:(\i),.{0,500}?color:(\i),.{0,500}?)/,
                 replace: "$&,$self.addCopy3y3Button({primary:$1,accent:$2})"
             }
+        },
+        // 2026-03-wysiwyg-user-profile-editing
+        {
+            find: '("UserProfileModalV2EditingPanel")',
+            replacement: [
+                {
+                    match: /\(0,\i\.jsxs?\)\(\i,\{heading:.{0,40}#{intl::USER_SETTINGS_PROFILE_EFFECT}/,
+                    replace: "$self.addCopy3y3Button(),$&"
+                }
+            ]
         }
     ],
 
@@ -244,8 +254,8 @@ export default definePlugin({
             }}
             color={Button.Colors.PRIMARY}
             size={Button.Sizes.XLARGE}
-            className={Margins.left16}
-        >Copy 3y3
-        </Button >;
+        >
+            Copy 3y3
+        </Button>;
     }, { noop: true }),
 });

src/webpack/common/components.ts

@@ -74,6 +74,11 @@ export function setColorPicker(component: t.ColorPicker) {
     ColorPicker = component;
 }
 
+export let NewCustomizationSection: t.ComponentSection = () => null;
+export function setNewCustomizationSection(component: t.ComponentSection) {
+    NewCustomizationSection = component;
+}
+
 export const UserSummaryItem = waitForComponent("UserSummaryItem", filters.componentByCode("defaultRenderUser", "showDefaultAvatarsForNullUsers"));
 
 export let createScroller: ((scrollbarClassName: string, fadeClassName: string, customThemeClassName: string) => t.ScrollerThin) | undefined;