Decor: Support Experiment

src/plugins/decor/index.tsx

@@ -17,13 +17,15 @@ import { useCurrentUserDecorationsStore } from "./lib/stores/CurrentUserDecorati
 import { useUserDecorAvatarDecoration, useUsersDecorationsStore } from "./lib/stores/UsersDecorationsStore";
 import { settings } from "./settings";
 import { setAvatarDecorationModalPreview, setDecorationGridDecoration, setDecorationGridItem } from "./ui/components";
-import DecorSection from "./ui/components/DecorSection";
+import DecorSection, { DecorSectionProps } from "./ui/components/DecorSection";
 
 export interface AvatarDecoration {
     asset: string;
     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.",
@@ -117,6 +119,20 @@ export default definePlugin({
                     replace: "$self.AvatarDecorationModalPreview=$&"
                 }
             ]
+        },
+        // 2026-03-wysiwyg-user-profile-editing
+        {
+            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(),$&"
+                }
+            ]
         }
     ],
     settings,
@@ -166,5 +182,12 @@ export default definePlugin({
         }
     },
 
-    DecorSection: ErrorBoundary.wrap(DecorSection, { noop: true })
+    DecorSection: ErrorBoundary.wrap(DecorSection, { noop: true }),
+    ExperimentDecorSection: ErrorBoundary.wrap(
+        (props: DecorSectionProps) => <DecorSection {...props} useNewSection />,
+        { noop: true }
+    ),
+    setNewCustomizationSection(component) {
+        NewCustomizationSection = component;
+    }
 });

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

@@ -6,6 +6,7 @@
 
 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";
@@ -19,9 +20,10 @@ export interface DecorSectionProps {
     hideTitle?: boolean;
     hideDivider?: boolean;
     noMargin?: boolean;
+    useNewSection?: boolean;
 }
 
-export default function DecorSection({ hideTitle = false, hideDivider = false, noMargin = false }: DecorSectionProps) {
+export default function DecorSection({ hideTitle = false, hideDivider = false, noMargin = false, useNewSection = false }: DecorSectionProps) {
     const authorization = useAuthorizationStore();
     const { selectedDecoration, select: selectDecoration, fetch: fetchDecorations } = useCurrentUserDecorationsStore();
 
@@ -29,31 +31,49 @@ export default function DecorSection({ hideTitle = false, hideDivider = false, n
         if (authorization.isAuthorized()) fetchDecorations();
     }, [authorization.token]);
 
-    return <CustomizationSection
-        title={!hideTitle && "Decor"}
-        hasBackground={true}
-        hideDivider={hideDivider}
-        className={noMargin && cl("section-remove-margin")}
-    >
-        <Flex gap="4px">
-            <Button
-                onClick={() => {
-                    if (!authorization.isAuthorized()) {
-                        authorization.authorize().then(openChangeDecorationModal).catch(() => { });
-                    } else openChangeDecorationModal();
-                }}
-                variant="primary"
-                size="small"
-            >
-                Change Decoration
-            </Button>
-            {selectedDecoration && authorization.isAuthorized() && <Button
-                onClick={() => selectDecoration(null)}
-                variant="secondary"
-                size={"small"}
-            >
-                Remove Decoration
-            </Button>}
-        </Flex>
-    </CustomizationSection>;
+    const NewSection = useNewSection ? NewCustomizationSection : undefined;
+
+    if (useNewSection && !NewSection) return null;
+
+    const Section = useNewSection ? NewSection : CustomizationSection;
+    const sectionProps = useNewSection
+        ? { heading: !hideTitle && "Decor" }
+        : {
+            title: !hideTitle && "Decor",
+            hasBackground: true,
+            hideDivider,
+            className: noMargin && cl("section-remove-margin")
+        };
+
+    const changeLabel = useNewSection ? "Change" : "Change Decoration";
+    const removeLabel = useNewSection ? "Remove" : "Remove Decoration";
+
+    return (
+        <Section {...sectionProps}>
+            <Flex gap="4px">
+                <Button
+                    onClick={() => {
+                        if (!authorization.isAuthorized()) {
+                            authorization.authorize().then(openChangeDecorationModal).catch(() => { });
+                        } else {
+                            openChangeDecorationModal();
+                        }
+                    }}
+                    variant="primary"
+                    size="small"
+                >
+                    {changeLabel}
+                </Button>
+                {selectedDecoration && authorization.isAuthorized() && (
+                    <Button
+                        onClick={() => selectDecoration(null)}
+                        variant="secondary"
+                        size="small"
+                    >
+                        {removeLabel}
+                    </Button>
+                )}
+            </Flex>
+        </Section>
+    );
 }