Add UI Customization Panel with full color theming

- New "Interfaccia" panel with color picker (HSV + hex/RGB/alpha + 30 presets) - Profile background customization tab - Accent color propagates via CSS variables to: card headers/tabs, context menus, Button dark/primary/gray variants, InfoStand panels, toolbar, room tools, purse, .btn-primary/.btn-dark CSS classes - All elements use var(--name, fallback) for zero visual change when default - Settings persisted in localStorage - Added react-colorful dependency - Added ui-config.json with header images config keys
2026-06-19 23:16:21 +00:00 · 2026-03-18 20:11:40 +01:00
parent ae4ecc42f0
commit ea35f19940
25 changed files with 3192 additions and 97 deletions
@@ -9,6 +9,7 @@ import { CampaignView } from './campaign/CampaignView';
 import { CatalogView } from './catalog/CatalogView';
 import { ChatHistoryView } from './chat-history/ChatHistoryView';
 import { FloorplanEditorView } from './floorplan-editor/FloorplanEditorView';
+import { FurniEditorView } from './furni-editor/FurniEditorView';
 import { FriendsView } from './friends/FriendsView';
 import { GameCenterView } from './game-center/GameCenterView';
 import { GroupsView } from './groups/GroupsView';
@@ -21,10 +22,12 @@ import { ModToolsView } from './mod-tools/ModToolsView';
 import { NavigatorView } from './navigator/NavigatorView';
 import { NitrobubbleHiddenView } from './nitrobubblehidden/NitrobubbleHiddenView';
 import { NitropediaView } from './nitropedia/NitropediaView';
+import { ExternalPluginLoader } from './plugins/ExternalPluginLoader';
 import { RightSideView } from './right-side/RightSideView';
 import { RoomView } from './room/RoomView';
 import { ToolbarView } from './toolbar/ToolbarView';
 import { UserProfileView } from './user-profile/UserProfileView';
+import { InterfaceSettingsView } from './interface-settings/InterfaceSettingsView';
 import { UserSettingsView } from './user-settings/UserSettingsView';
 import { WiredView } from './wired/WiredView';
 import { YoutubeTvView } from './youtube-tv/YoutubeTvView';
@@ -85,6 +88,7 @@ export const MainView: FC<{}> = props =>
            <AnimatePresence>
                { landingViewVisible &&
                    <motion.div
+                        className="w-full h-full"
                        initial={ { opacity: 0 }}
                        animate={ { opacity: 1 }}
                        exit={ { opacity: 0 }}>
@@ -105,6 +109,7 @@ export const MainView: FC<{}> = props =>
            <FriendsView />
            <RightSideView />
            <UserSettingsView />
+            <InterfaceSettingsView />
            <UserProfileView />
            <GroupsView />
            <CameraWidgetView />
@@ -115,7 +120,9 @@ export const MainView: FC<{}> = props =>
            <CampaignView />
            <GameCenterView />
            <FloorplanEditorView />
+            <FurniEditorView />
            <YoutubeTvView />
+            <ExternalPluginLoader />
        </>
    );
 };
@@ -0,0 +1,179 @@
+import { RgbaColorPicker, RgbaColor } from 'react-colorful';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { FaUndo, FaTrash, FaPen, FaFillDrip, FaSave } from 'react-icons/fa';
+import { PRESET_COLORS, useUiSettings } from '../../api';
+import { Flex, Text } from '../../common';
+
+const hexToRgba = (hex: string, a = 1): RgbaColor =>
+{
+    const num = parseInt(hex.replace('#', ''), 16);
+    return { r: (num >> 16) & 0xFF, g: (num >> 8) & 0xFF, b: num & 0xFF, a };
+};
+
+const rgbaToHex = (rgba: RgbaColor): string =>
+{
+    return '#' + ((1 << 24) + (rgba.r << 16) + (rgba.g << 8) + rgba.b).toString(16).slice(1);
+};
+
+export const InterfaceColorTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings, resetSettings } = useUiSettings();
+    const [ color, setColor ] = useState<RgbaColor>(() => hexToRgba(settings.headerColor, settings.headerAlpha / 100));
+
+    const hexColor = useMemo(() => rgbaToHex(color), [ color ]);
+    const alphaPercent = useMemo(() => Math.round((color.a ?? 1) * 100), [ color ]);
+
+    const onHexInput = useCallback((value: string) =>
+    {
+        const clean = value.replace(/[^0-9a-fA-F]/g, '').slice(0, 6);
+        if(clean.length === 6)
+        {
+            const rgba = hexToRgba('#' + clean, color.a);
+            setColor(rgba);
+        }
+    }, [ color.a ]);
+
+    const onRgbInput = useCallback((channel: 'r' | 'g' | 'b', value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(255, value || 0));
+        setColor(prev => ({ ...prev, [channel]: clamped }));
+    }, []);
+
+    const onAlphaInput = useCallback((value: number) =>
+    {
+        const clamped = Math.max(0, Math.min(100, value || 0));
+        setColor(prev => ({ ...prev, a: clamped / 100 }));
+    }, []);
+
+    const onPresetClick = useCallback((presetHex: string) =>
+    {
+        setColor(hexToRgba(presetHex, color.a));
+    }, [ color.a ]);
+
+    const onSave = useCallback(() =>
+    {
+        updateSettings({
+            colorMode: 'color',
+            headerColor: hexColor,
+            headerAlpha: alphaPercent
+        });
+    }, [ updateSettings, hexColor, alphaPercent ]);
+
+    const onReset = useCallback(() =>
+    {
+        resetSettings();
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ resetSettings ]);
+
+    const onDelete = useCallback(() =>
+    {
+        updateSettings({ colorMode: 'default' });
+        setColor(hexToRgba('#1E7295', 1));
+    }, [ updateSettings ]);
+
+    return (
+        <Flex column gap={ 2 } className="items-center p-2">
+            <div className="w-[280px]">
+                <RgbaColorPicker color={ color } onChange={ setColor } style={ { width: '100%', height: '180px' } } />
+            </div>
+            <Flex gap={ 1 } className="items-center mt-1">
+                <Flex column className="items-center">
+                    <input
+                        className="form-control form-control-sm text-center w-[70px]"
+                        value={ hexColor.replace('#', '').toUpperCase() }
+                        onChange={ e => onHexInput(e.target.value) }
+                        maxLength={ 6 }
+                    />
+                    <Text small className="text-black">Hex</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.r }
+                        onChange={ e => onRgbInput('r', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">R</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.g }
+                        onChange={ e => onRgbInput('g', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">G</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ color.b }
+                        onChange={ e => onRgbInput('b', parseInt(e.target.value)) }
+                        min={ 0 } max={ 255 }
+                    />
+                    <Text small className="text-black">B</Text>
+                </Flex>
+                <Flex column className="items-center">
+                    <input
+                        type="number"
+                        className="form-control form-control-sm text-center w-[45px]"
+                        value={ alphaPercent }
+                        onChange={ e => onAlphaInput(parseInt(e.target.value)) }
+                        min={ 0 } max={ 100 }
+                    />
+                    <Text small className="text-black">A</Text>
+                </Flex>
+            </Flex>
+            <div className="grid grid-cols-10 gap-0.5 mt-1">
+                { PRESET_COLORS.map((presetHex, i) => (
+                    <div
+                        key={ i }
+                        className="w-[24px] h-[24px] rounded cursor-pointer border border-black/20 hover:scale-110 transition-transform"
+                        style={ { backgroundColor: presetHex } }
+                        onClick={ () => onPresetClick(presetHex) }
+                    />
+                )) }
+            </div>
+            <Flex gap={ 1 } className="w-full mt-2">
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onReset }
+                >
+                    <FaUndo size={ 14 } />
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onDelete }
+                >
+                    <FaTrash size={ 14 } />
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#b0b0b0' } }
+                >
+                    <FaPen size={ 14 } />
+                </button>
+                <button
+                    className="flex-1 flex items-center justify-center gap-1 py-2 rounded cursor-pointer text-white"
+                    style={ { backgroundColor: '#5f9ea0' } }
+                    onClick={ onSave }
+                >
+                    <FaFillDrip size={ 14 } />
+                </button>
+            </Flex>
+            <button
+                className="w-full py-2 rounded cursor-pointer text-white font-bold flex items-center justify-center gap-2"
+                style={ { backgroundColor: '#008000' } }
+                onClick={ onSave }
+            >
+                <FaSave size={ 14 } />
+                Salva colore
+            </button>
+        </Flex>
+    );
+};
@@ -0,0 +1,52 @@
+import { FC, useCallback, useMemo } from 'react';
+import { GetConfigurationValue, useUiSettings } from '../../api';
+
+export const InterfaceImageTabView: FC<{}> = () =>
+{
+    const { settings, updateSettings } = useUiSettings();
+
+    const imageCount = useMemo(() =>
+    {
+        return GetConfigurationValue<number>('ui.header.images.count', 30);
+    }, []);
+
+    const baseUrl = useMemo(() =>
+    {
+        return GetConfigurationValue<string>('ui.header.images.url', 'https://image.webbo.city/image/headerImage/image{id}.gif');
+    }, []);
+
+    const images = useMemo(() =>
+    {
+        const result: string[] = [];
+        for(let i = 1; i <= imageCount; i++)
+        {
+            result.push(baseUrl.replace('{id}', String(i)));
+        }
+        return result;
+    }, [ imageCount, baseUrl ]);
+
+    const onImageSelect = useCallback((url: string) =>
+    {
+        updateSettings({
+            colorMode: 'image',
+            headerImageUrl: url
+        });
+    }, [ updateSettings ]);
+
+    return (
+        <div className="grid grid-cols-8 gap-1 p-2 overflow-auto max-h-[400px]">
+            { images.map((url, i) => (
+                <div
+                    key={ i }
+                    className={ `w-[75px] h-[75px] rounded cursor-pointer border-2 transition-all hover:scale-105 ${ (settings.colorMode === 'image' && settings.headerImageUrl === url) ? 'border-white shadow-lg' : 'border-transparent' }` }
+                    style={ {
+                        backgroundImage: `url(${ url })`,
+                        backgroundSize: 'cover',
+                        backgroundPosition: 'center'
+                    } }
+                    onClick={ () => onImageSelect(url) }
+                />
+            )) }
+        </div>
+    );
+};
@@ -0,0 +1,107 @@
+import { GetSessionDataManager, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useState } from 'react';
+import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
+import { Base, Flex, Grid, LayoutCurrencyIcon, NitroCardTabsItemView, NitroCardTabsView, Text } from '../../common';
+import { useRoom } from '../../hooks';
+
+interface ItemData
+{
+    id: number;
+    isHcOnly: boolean;
+    minRank: number;
+    isAmbassadorOnly: boolean;
+    selectable: boolean;
+}
+
+const SUB_TABS = [ 'backgrounds', 'stands', 'overlays' ] as const;
+type SubTabType = typeof SUB_TABS[number];
+
+const SUB_TAB_LABELS: Record<SubTabType, string> = {
+    backgrounds: 'Sfondi',
+    stands: 'Basi',
+    overlays: 'Overlay'
+};
+
+export const InterfaceProfileTabView: FC<{}> = () =>
+{
+    const [ activeSubTab, setActiveSubTab ] = useState<SubTabType>('backgrounds');
+    const [ selectedBackground, setSelectedBackground ] = useState<number>(0);
+    const [ selectedStand, setSelectedStand ] = useState<number>(0);
+    const [ selectedOverlay, setSelectedOverlay ] = useState<number>(0);
+    const { roomSession } = useRoom();
+
+    const userData = useMemo(() => ({
+        isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB,
+        securityLevel: GetSessionDataManager().canChangeName,
+        isAmbassador: GetSessionDataManager().isAmbassador
+    }), []);
+
+    const processData = useCallback((configData: any[], dataType: string): ItemData[] =>
+    {
+        if(!configData?.length) return [];
+
+        return configData
+            .filter(item =>
+            {
+                const meetsRank = userData.securityLevel >= item.minRank;
+                const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
+                return item.isHcOnly || (meetsRank && ambassadorEligible);
+            })
+            .map(item => ({ id: item[`${ dataType }Id`], ...item, selectable: !item.isHcOnly || userData.isHcMember }));
+    }, [ userData ]);
+
+    const allData = useMemo(() => ({
+        backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'background'),
+        stands: processData(GetConfigurationValue('stands.data'), 'stand'),
+        overlays: processData(GetConfigurationValue('overlays.data'), 'overlay')
+    }), [ processData ]);
+
+    const handleSelection = useCallback((id: number) =>
+    {
+        if(!roomSession) return;
+
+        const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
+        const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
+
+        setters[activeSubTab](id);
+        const newValues = { ...currentValues, [activeSubTab]: id };
+        roomSession.sendBackgroundMessage(newValues.backgrounds, newValues.stands, newValues.overlays);
+    }, [ activeSubTab, roomSession, selectedBackground, selectedStand, selectedOverlay ]);
+
+    const renderItem = useCallback((item: ItemData, type: string) => (
+        <Flex
+            pointer
+            position="relative"
+            key={ item.id }
+            onClick={ () => item.selectable && handleSelection(item.id) }
+            className={ item.selectable ? '' : 'non-selectable' }
+        >
+            <Base className={ `profile-${ type } ${ type }-${ item.id }` } />
+            { item.isHcOnly && <LayoutCurrencyIcon position="absolute" className="top-1 inset-e-1" type="hc" /> }
+        </Flex>
+    ), [ handleSelection ]);
+
+    return (
+        <Flex column gap={ 1 }>
+            <Flex gap={ 1 } className="justify-center">
+                { SUB_TABS.map(tab => (
+                    <button
+                        key={ tab }
+                        className={ `px-3 py-1 rounded text-sm cursor-pointer transition-colors ${ activeSubTab === tab ? 'bg-primary text-white' : 'bg-card-grid-item text-black hover:bg-card-grid-item-active' }` }
+                        onClick={ () => setActiveSubTab(tab) }
+                    >
+                        { SUB_TAB_LABELS[tab] }
+                    </button>
+                )) }
+            </Flex>
+            { !roomSession && (
+                <Text bold center className="text-black py-4">Entra in una stanza per modificare il profilo</Text>
+            ) }
+            { roomSession && (
+                <Grid gap={ 1 } columnCount={ 7 } overflow="auto" className="max-h-[300px]">
+                    { allData[activeSubTab].map(item => renderItem(item, activeSubTab.slice(0, -1))) }
+                </Grid>
+            ) }
+        </Flex>
+    );
+};
@@ -0,0 +1,74 @@
+import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardView } from '../../common';
+import { InterfaceColorTabView } from './InterfaceColorTabView';
+import { InterfaceProfileTabView } from './InterfaceProfileTabView';
+
+const TABS = [ 'color', 'profile' ] as const;
+type TabType = typeof TABS[number];
+
+const TAB_LABELS: Record<TabType, string> = {
+    color: 'Colore',
+    profile: 'Sfondo profilo'
+};
+
+export const InterfaceSettingsView: FC<{}> = () =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ currentTab, setCurrentTab ] = useState<TabType>('color');
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived: (url: string) =>
+            {
+                const parts = url.split('/');
+                if(parts.length < 2) return;
+
+                switch(parts[1])
+                {
+                    case 'show':
+                        setIsVisible(true);
+                        return;
+                    case 'hide':
+                        setIsVisible(false);
+                        return;
+                    case 'toggle':
+                        setIsVisible(prev => !prev);
+                        return;
+                    case 'profile':
+                        setCurrentTab('profile');
+                        setIsVisible(true);
+                        return;
+                }
+            },
+            eventUrlPrefix: 'interface-settings/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, []);
+
+    if(!isVisible) return null;
+
+    return (
+        <NitroCardView uniqueKey="interface-settings" className="min-w-[535px] max-w-[700px]">
+            <NitroCardHeaderView headerText="Interfaccia" onCloseClick={ () => setIsVisible(false) } />
+            <NitroCardTabsView>
+                { TABS.map(tab => (
+                    <NitroCardTabsItemView
+                        key={ tab }
+                        isActive={ currentTab === tab }
+                        onClick={ () => setCurrentTab(tab) }
+                    >
+                        { TAB_LABELS[tab] }
+                    </NitroCardTabsItemView>
+                )) }
+            </NitroCardTabsView>
+            <NitroCardContentView>
+                { currentTab === 'color' && <InterfaceColorTabView /> }
+                { currentTab === 'profile' && <InterfaceProfileTabView /> }
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};
@@ -45,7 +45,8 @@ const BadgeMiniPicker: FC<{
    return (
        <div
            ref={ ref }
-            className="absolute right-[calc(100%+8px)] top-0 z-50 bg-[rgba(28,28,32,0.97)] border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
+            className="absolute right-[calc(100%+8px)] top-0 z-50 border border-white/20 rounded-md p-2 shadow-lg min-w-[160px]"
+            style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,0.97))' } }
            onClick={ e => e.stopPropagation() }>
            <input
                autoFocus
@@ -220,8 +220,8 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props

                canUse = true;
                isCrackable = true;
-                crackableHits = stuffData.hits;
-                crackableTarget = stuffData.target;
+                crackableHits = stuffData?.hits ?? 0;
+                crackableTarget = stuffData?.target ?? 0;
            }

            else if(avatarInfo.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX)
@@ -458,7 +458,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props

    return (
        <Column alignItems="end" gap={ 1 }>
-            <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
+            <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded" style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,.95))' } }>
                <Column className="h-full p-[8px] overflow-auto" gap={ 1 } overflow="visible">
                    <div className="flex flex-col gap-1">
                        <Flex alignItems="center" gap={ 1 } justifyContent="between">
@@ -527,7 +527,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                        { isCrackable &&
                            <>
                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
-                                <Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ crackableHits.toString(), crackableTarget.toString() ]) }</Text>
+                                <Text small wrap variant="white">{ LocalizeText('infostand.crackable_furni.hits_remaining', [ 'hits', 'target' ], [ (crackableHits ?? 0).toString(), (crackableTarget ?? 0).toString() ]) }</Text>
                            </> }
                        { avatarInfo.groupId > 0 &&
                            <>
@@ -552,7 +552,21 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                        { godMode &&
                            <>
                                <hr className="m-0 bg-[#0003] border-0 opacity-[.5] h-px" />
-                                { canSeeFurniId && <Text small wrap variant="white">ID: { avatarInfo.id }</Text> }
+                                { canSeeFurniId &&
+                                    <div className="flex items-center gap-3">
+                                        <div className="flex items-center gap-1">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#7ec8e3]">
+                                                <path fillRule="evenodd" d="M4.93 1.31a41.401 41.401 0 0 1 10.14 0C16.194 1.45 17 2.414 17 3.517V18.25a.75.75 0 0 1-1.075.676l-2.8-1.344-2.8 1.344a.75.75 0 0 1-.65 0l-2.8-1.344-2.8 1.344A.75.75 0 0 1 3 18.25V3.517c0-1.103.806-2.068 1.93-2.207Z" clipRule="evenodd" />
+                                            </svg>
+                                            <Text small wrap variant="white">ID: { avatarInfo.id }</Text>
+                                        </div>
+                                        <div className="flex items-center gap-1">
+                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#7ec8e3]">
+                                                <path d="M5.127 3.502 5.25 3.5h9.5c.041 0 .082 0 .123.002A2.251 2.251 0 0 0 12.75 2h-5.5a2.25 2.25 0 0 0-2.123 1.502ZM1 10.25A2.25 2.25 0 0 1 3.25 8h13.5A2.25 2.25 0 0 1 19 10.25v5.5A2.25 2.25 0 0 1 16.75 18H3.25A2.25 2.25 0 0 1 1 15.75v-5.5ZM3.25 6.5c-.04 0-.082 0-.123.002A2.25 2.25 0 0 1 5.25 5h9.5c.98 0 1.814.627 2.123 1.502a3.819 3.819 0 0 0-.123-.002H3.25Z" />
+                                            </svg>
+                                            <Text small wrap variant="white">Sprite: { (() => { const ro = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR); return ro?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID) ?? '?'; })() }</Text>
+                                        </div>
+                                    </div> }
                                { (!avatarInfo.isWallItem && canMove) &&
                                    <>
                                        <button
@@ -560,6 +574,19 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                                            onClick={ () => setDropdownOpen(!dropdownOpen) }>
                                            { dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
                                        </button>
+                                        <button
+                                            className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
+                                            onClick={ () =>
+                                            {
+                                                const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
+                                                const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
+
+                                                CreateLinkEvent('furni-editor/show');
+
+                                                if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
+                                            } }>
+                                            Edit Furni
+                                        </button>
                                        { dropdownOpen &&
                                            <div className="flex gap-[4px] w-full">
                                                { /* Left panel: position + rotation */ }
@@ -1,4 +1,4 @@
-import { GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useCallback, useEffect, useState } from 'react';
 import { FaPencilAlt, FaTimes } from 'react-icons/fa';
 import { AvatarInfoUser, CloneObject, GetConfigurationValue, GetGroupInformation, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api';
@@ -7,7 +7,6 @@ import { useMessageEvent, useNitroEvent, useRoom } from '../../../../../hooks';
 import { InfoStandBadgeSlotView } from './InfoStandBadgeSlotView';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
 import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
-import { BackgroundsView } from '../../../../backgrounds/BackgroundsView';

 interface InfoStandWidgetUserViewProps {
  avatarInfo: AvatarInfoUser;
@@ -32,7 +31,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =

  const handleProfileClick = useCallback(() => { GetUserProfile(avatarInfo.webID); }, [avatarInfo.webID]);

-  const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); setIsVisible(prev => !prev); }, []);
+  const handleEditClick = useCallback((event: React.MouseEvent) => { event.stopPropagation(); CreateLinkEvent('interface-settings/profile'); }, []);

  const saveMotto = (motto: string) => {
    if (!isEditingMotto || motto.length > GetConfigurationValue<number>('motto.max.length', 38) || !roomSession) return;
@@ -127,7 +126,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =

  return (
    <>
-      <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto bg-[rgba(28,28,32,0.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded">
+      <Column className="relative min-w-[190px] max-w-[190px] z-30 pointer-events-auto [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] rounded" style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,0.95))' } }>
        <Column className="h-full p-[8px] overflow-auto" gap={1} overflow="visible">
          <div className="flex flex-col gap-1">
            <div className="flex items-center justify-between">
@@ -257,19 +256,6 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
          )}
        </Column>
      </Column>
-      {isVisible && avatarInfo.type === AvatarInfoUser.OWN_USER && (
-        <div className="backgrounds-view-container">
-          <BackgroundsView
-            setIsVisible={setIsVisible}
-            selectedBackground={backgroundId}
-            setSelectedBackground={setBackgroundId}
-            selectedStand={standId}
-            setSelectedStand={setStandId}
-            selectedOverlay={overlayId}
-            setSelectedOverlay={setOverlayId}
-          />
-        </div>
-      )}
    </>
  );
 };
@@ -3,16 +3,21 @@ import { Flex, FlexProps } from '../../../../common';

 export const ContextMenuHeaderView: FC<FlexProps> = props =>
 {
-    const { justifyContent = 'center', alignItems = 'center', classNames = [], ...rest } = props;
+    const { justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, ...rest } = props;

    const getClassNames = useMemo(() =>
    {
-        const newClassNames: string[] = [ 'bg-[#3d5f6e] text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];
+        const newClassNames: string[] = [ 'text-[#fff] min-w-[117px] h-[25px] max-h-[25px] text-[16px] mb-[2px]', 'p-1' ];

        if(classNames.length) newClassNames.push(...classNames);

        return newClassNames;
    }, [ classNames ]);

-    return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } { ...rest } />;
+    const mergedStyle = useMemo(() => ({
+        backgroundColor: 'var(--ui-ctx-header-bg, #3d5f6e)',
+        ...style
+    }), [ style ]);
+
+    return <Flex alignItems={ alignItems } classNames={ getClassNames } justifyContent={ justifyContent } style={ mergedStyle } { ...rest } />;
 };
@@ -8,7 +8,7 @@ interface ContextMenuListItemViewProps extends FlexProps

 export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =>
 {
-    const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], onClick = null, ...rest } = props;
+    const { disabled = false, fullWidth = true, justifyContent = 'center', alignItems = 'center', classNames = [], style = {}, onClick = null, ...rest } = props;

    const handleClick = (event: MouseEvent<HTMLDivElement>) =>
    {
@@ -19,7 +19,7 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =

    const getClassNames = useMemo(() =>
    {
-        const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] bg-[repeating-linear-gradient(#131e25,#131e25_50%,#0d171d_50%,#0d171d_100%)] cursor-pointer' ];
+        const newClassNames: string[] = [ 'relative mb-[2px] p-[3px] overflow-hidden', 'h-[24px] max-h-[24px] p-[3px] cursor-pointer' ];

        if(disabled) newClassNames.push('disabled');

@@ -28,5 +28,10 @@ export const ContextMenuListItemView: FC<ContextMenuListItemViewProps> = props =
        return newClassNames;
    }, [ disabled, classNames ]);

-    return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } { ...rest } />;
+    const mergedStyle = useMemo(() => ({
+        background: 'repeating-linear-gradient(var(--ui-ctx-item-bg1, #131e25), var(--ui-ctx-item-bg1, #131e25) 50%, var(--ui-ctx-item-bg2, #0d171d) 50%, var(--ui-ctx-item-bg2, #0d171d) 100%)',
+        ...style
+    }), [ style ]);
+
+    return <Flex alignItems={ alignItems } classNames={ getClassNames } fullWidth={ fullWidth } justifyContent={ justifyContent } onClick={ handleClick } style={ mergedStyle } { ...rest } />;
 };
@@ -76,7 +76,6 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
  const getClassNames = useMemo(() => {
    const classes = [
      'p-[2px]!',
-      'bg-[#1c323f]',
      'border-2',
      'border-[solid]',
      'border-[rgba(255,255,255,.5)]',
@@ -98,6 +97,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = ({
      top: pos.y ?? 0,
      transition: isFading ? 'opacity 75ms linear' : undefined,
      opacity,
+      backgroundColor: 'var(--ui-ctx-bg, #1c323f)',
      ...style,
    }),
    [pos, opacity, isFading, style]
@@ -69,38 +69,38 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 					<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
 				</motion.div> )}
 			</AnimatePresence>
-            <Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] bg-[rgba(28,28,32,.95)] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } justifyContent="between">
-                <Flex alignItems="center" gap={ 2 }>
-                    <Flex alignItems="center" gap={ 2 }>
-                        <Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
-                        {
-                            setMeExpanded(!isMeExpanded);
-                            event.stopPropagation();
-                        } }>
-                            <LayoutAvatarImageView className="-ml-[5px] mt-[25px]" direction={ 2 } figure={ userFigure } position="absolute" />
-                            { (getTotalUnseen > 0) &&
-                                <LayoutItemCountView count={ getTotalUnseen } /> }
-                        </Flex>
-                        { isInRoom &&
-                            <ToolbarItemView icon="habbo" onClick={ event => VisitDesktop() } /> }
-                        { !isInRoom &&
-                            <ToolbarItemView icon="house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
-                        <ToolbarItemView icon="rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
-                        { GetConfigurationValue('game.center.enabled') &&
-                            <ToolbarItemView icon="game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
-                        <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
-                        <ToolbarItemView icon="inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
-                            { (getFullCount > 0) &&
-                                <LayoutItemCountView count={ getFullCount } /> }
-                        </ToolbarItemView>
-                        { isInRoom &&
-                            <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
-                        { isMod &&
-                            <ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
+            <Flex alignItems="center" className="absolute bottom-0 left-0 w-full h-[55px] [box-shadow:inset_0_5px_#22222799,inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } style={ { backgroundColor: 'var(--ui-dark-bg, rgba(28,28,32,.95))' } }>
+                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
+                    <Flex center pointer className={ 'relative w-[50px] h-[45px] overflow-hidden ' + (isMeExpanded ? 'active ' : '') } onClick={ event =>
+                    {
+                        setMeExpanded(!isMeExpanded);
+                        event.stopPropagation();
+                    } }>
+                        <LayoutAvatarImageView className="-ml-[5px] mt-[25px]" direction={ 2 } figure={ userFigure } position="absolute" />
+                        { (getTotalUnseen > 0) &&
+                            <LayoutItemCountView count={ getTotalUnseen } /> }
                    </Flex>
-                    <Flex alignItems="center" id="toolbar-chat-input-container" />
+                    { isInRoom &&
+                        <ToolbarItemView icon="habbo" onClick={ event => VisitDesktop() } /> }
+                    { !isInRoom &&
+                        <ToolbarItemView icon="house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
+                    <ToolbarItemView icon="rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
+                    { GetConfigurationValue('game.center.enabled') &&
+                        <ToolbarItemView icon="game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
+                    <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
+                    <ToolbarItemView icon="inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
+                        { (getFullCount > 0) &&
+                            <LayoutItemCountView count={ getFullCount } /> }
+                    </ToolbarItemView>
+                    { isInRoom &&
+                        <ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
+                    { isMod &&
+                        <ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
+                    { isMod &&
+                        <ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('furni-editor/toggle') } /> }
                </Flex>
-                <Flex alignItems="center" gap={ 2 }>
+                <Flex alignItems="center" justifyContent="center" className="flex-1 min-w-0 max-w-[600px] mx-auto" id="toolbar-chat-input-container" />
+                <Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
                    <Flex gap={ 2 }>
                        <ToolbarItemView icon="friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
                            { (requests.length > 0) &&