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() && ( + + )} + +
+ ); }