diff --git a/src/plugins/decor/index.tsx b/src/plugins/decor/index.tsx
index e36ba74ad..12528c792 100644
--- a/src/plugins/decor/index.tsx
+++ b/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) => ,
+ { noop: true }
+ ),
+ setNewCustomizationSection(component) {
+ NewCustomizationSection = component;
+ }
});
diff --git a/src/plugins/decor/ui/components/DecorSection.tsx b/src/plugins/decor/ui/components/DecorSection.tsx
index e25c816cb..93aa0f3b8 100644
--- a/src/plugins/decor/ui/components/DecorSection.tsx
+++ b/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
-
-
- {selectedDecoration && authorization.isAuthorized() && }
-
- ;
+ 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 (
+
+
+
+ {selectedDecoration && authorization.isAuthorized() && (
+
+ )}
+
+
+ );
}