🆙 Redone the avatar editor

src/components/avatar-editor/AvatarEditorModelView.tsx

@@ -1,10 +1,11 @@
 import { AvatarEditorFigureCategory, AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { IAvatarEditorCategory } from '../../api';
+import { CreateLinkEvent, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategory } from '../../api';
+import { LayoutCurrencyIcon } from '../../common';
 import { useAvatarEditor } from '../../hooks';
 import { AvatarEditorIcon } from './AvatarEditorIcon';
 import { AvatarEditorFigureSetView } from './figure-set';
-import { AvatarEditorPaletteSetView } from './palette-set';
+import { AvatarEditorAdvancedColorView, AvatarEditorPaletteSetView } from './palette-set';
 
 export const AvatarEditorModelView: FC<{
     name: string,
@@ -14,6 +15,8 @@ export const AvatarEditorModelView: FC<{
     const { name = '', categories = [] } = props;
     const [ didChange, setDidChange ] = useState<boolean>(false);
     const [ activeSetType, setActiveSetType ] = useState<string>('');
+    const [ advancedColorMode, setAdvancedColorMode ] = useState<boolean>(false);
+    const hasHC = GetClubMemberLevel() > 0;
     const { maxPaletteCount = 1, gender = null, setGender = null, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null } = useAvatarEditor();
 
     const activeCategory = useMemo(() =>
@@ -46,34 +49,56 @@ export const AvatarEditorModelView: FC<{
     if(!activeCategory) return null;
 
     return (
-        <div className="grid grid-cols-12 gap-2 overflow-hidden">
+        <div className="flex flex-col overflow-hidden h-full gap-1">
-            <div className="flex flex-col col-span-2">
+            { /* ── Category / gender selector row ── */ }
+            <div className="flex items-center px-2 gap-3 shrink-0">
                 { (name === AvatarEditorFigureCategory.GENERIC) &&
-                        <>
+                    <>
-                            <div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
+                        <div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
-                                <AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
+                            <AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
-                            </div>
-                            <div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
-                                <AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
-                            </div>
-                        </> }
-                { (name !== AvatarEditorFigureCategory.GENERIC) && (categories.length > 0) && categories.map(category =>
-                {
-                    return (
-                        <div key={ category.setType } className="category-item items-center justify-center cursor-pointer flex" onClick={ event => selectSet(category.setType) }>
-                            <AvatarEditorIcon icon={ category.setType } selected={ (activeSetType === category.setType) } />
                         </div>
-                    );
+                        <div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
-                }) }
+                            <AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
+                        </div>
+                    </> }
+                { (name !== AvatarEditorFigureCategory.GENERIC) && categories.map(category =>
+                    <div
+                        key={ category.setType }
+                        className="category-item flex items-center justify-center cursor-pointer"
+                        onClick={ event => selectSet(category.setType) }>
+                        <AvatarEditorIcon icon={ category.setType } selected={ activeSetType === category.setType } />
+                    </div>
+                ) }
             </div>
-            <div className="flex flex-col overflow-hidden col-span-5">
+
-                <AvatarEditorFigureSetView category={ activeCategory } columnCount={ 3 } />
+            <div className="flex-1 min-h-0 overflow-hidden">
+                <AvatarEditorFigureSetView category={ activeCategory } columnCount={ 6 } />
             </div>
-            <div className="flex flex-col overflow-hidden col-span-5">
+
+            <div className="flex shrink-0 items-center justify-end px-2">
+                <button
+                    className={ `flex items-center gap-1 text-xs px-2 py-0.5 rounded border cursor-pointer transition-colors ${ advancedColorMode ? 'bg-sky-400 border-sky-300 text-white' : 'bg-sky-900/30 border-sky-600/50 text-white hover:text-yellow-800' }` }
+                    onClick={ () => hasHC ? setAdvancedColorMode(prev => !prev) : CreateLinkEvent('habboUI/open/hccenter') }
+                >
+                    Advanced Color
+                    <LayoutCurrencyIcon type="hc" />
+                </button>
+            </div>
+
+            { /* ── Colour palette row at bottom ── */ }
+            <div className={ `flex shrink-0 overflow-hidden gap-2 ${ maxPaletteCount === 2 ? 'dual-palette' : '' }` } style={ { height: '160px' } }>
                 { (maxPaletteCount >= 1) &&
-                        <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 0 } /> }
+                    <div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
+                        { advancedColorMode
+                            ? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 0 } />
+                            : <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 0 } /> }
+                    </div> }
                 { (maxPaletteCount === 2) &&
-                        <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 1 } /> }
+                    <div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
+                        { advancedColorMode
+                            ? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 1 } />
+                            : <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 1 } /> }
+                    </div> }
             </div>
         </div>
     );

src/components/avatar-editor/AvatarEditorView.tsx

@@ -2,19 +2,18 @@ import { AddLinkEventTracker, AvatarEditorFigureCategory, GetSessionDataManager,
 import { FC, useEffect, useState } from 'react';
 import { FaDice, FaRedo, FaTrash } from 'react-icons/fa';
 import { AvatarEditorAction, LocalizeText, SendMessageComposer } from '../../api';
-import { Button, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { Button, ButtonGroup, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useAvatarEditor } from '../../hooks';
 import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
 import { AvatarEditorModelView } from './AvatarEditorModelView';
 import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';
 
-const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
-const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
-
 export const AvatarEditorView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
-    const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, figureSetIds = [], randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
+    const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
+
+    const isWardrobeOpen = (activeModelKey === AvatarEditorFigureCategory.WARDROBE);
 
     const processAction = (action: string) =>
     {
@@ -74,48 +73,53 @@ export const AvatarEditorView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView className="w-[620px] h-[374px] nitro-avatar-editor" uniqueKey="avatar-editor">
+        <NitroCardView
+            className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[620px]' } h-[374px]` }
+            uniqueKey="avatar-editor">
             <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardTabsView>
+            <NitroCardTabsView classNames={ ['avatar-editor-tabs'] }>
                 { Object.keys(avatarModels).map(modelKey =>
                 {
                     const isActive = (activeModelKey === modelKey);
+                    const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE);
 
                     return (
                         <NitroCardTabsItemView key={ modelKey } isActive={ isActive } onClick={ event => setActiveModelKey(modelKey) }>
-                            { LocalizeText(`avatareditor.category.${ modelKey }`) }
+                            <div className={ isWardrobe ? 'tab-wardrobe' : `tab ${ modelKey }` } />
                         </NitroCardTabsItemView>
                     );
                 }) }
             </NitroCardTabsView>
             <NitroCardContentView>
-                <Grid className="grid gap-2 overflow-hidden">
+                <div className="flex gap-2 overflow-hidden h-full">
-                    <div className="flex flex-col col-span-9 overflow-hidden">
+                    { /* left: model view or wardrobe */ }
-                        { ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
+                    <div className="flex flex-col flex-1 min-w-0 overflow-hidden">
+                        { (activeModelKey.length > 0 && !isWardrobeOpen) &&
                             <AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
-                        { (activeModelKey === AvatarEditorFigureCategory.WARDROBE) &&
+                        { isWardrobeOpen &&
                             <AvatarEditorWardrobeView /> }
                     </div>
-                    <div className="flex flex-col col-span-3 overflow-hidden gap-1">
+                    { /* right: preview + actions */ }
+                    <div className="flex flex-col shrink-0 w-[120px] gap-1 overflow-hidden">
                         <AvatarEditorFigurePreviewView />
                         <div className="flex flex-col grow! gap-1">
-                            <div className="relative inline-flex align-middle">
+                            <ButtonGroup className="w-full">
-                                <Button className="flex-auto " variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
+                                <Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
                                     <FaRedo className="fa-icon" />
                                 </Button>
-                                <Button className="flex-auto" variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
+                                <Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
                                     <FaTrash className="fa-icon" />
                                 </Button>
-                                <Button className="flex-auto" variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
+                                <Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
                                     <FaDice className="fa-icon" />
                                 </Button>
-                            </div>
+                            </ButtonGroup>
                             <Button className="w-full" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
                                 { LocalizeText('avatareditor.save') }
                             </Button>
                         </div>
                     </div>
-                </Grid>
+                </div>
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx

@@ -1,6 +1,6 @@
 import { AvatarFigurePartType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AvatarEditorThumbnailsHelper, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
+import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
 import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
 import { useAvatarEditor } from '../../../hooks';
 import { InfiniteGrid } from '../../../layout';
@@ -17,7 +17,9 @@ export const AvatarEditorFigureSetItemView: FC<{
     const [ assetUrl, setAssetUrl ] = useState<string>('');
     const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
 
-    const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
+    const clubLevel = partItem.partSet?.clubLevel ?? 0;
+    const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
+    const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
 
     useEffect(() =>
     {
@@ -25,17 +27,19 @@ export const AvatarEditorFigureSetItemView: FC<{
 
         const loadImage = async () =>
         {
-            const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
+            const partClubLevel = partItem.partSet?.clubLevel ?? 0;
+            const partIsHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partClubLevel > 0);
+            const partIsLocked = partIsHC && (GetClubMemberLevel() < partClubLevel);
 
             let url: string = null;
 
             if(setType === AvatarFigurePartType.HEAD)
             {
-                url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), isHC);
+                url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked);
             }
             else
             {
-                url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, isHC);
+                url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked);
             }
 
             if(url && url.length) setAssetUrl(url);
@@ -47,7 +51,7 @@ export const AvatarEditorFigureSetItemView: FC<{
     if(!partItem) return null;
 
     return (
-        <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } style={ { flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
+        <InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
             { !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
             { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
             { !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }

src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx

@@ -29,7 +29,7 @@ export const AvatarEditorFigureSetView: FC<{
     };
 
     return (
-        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
+        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ 50 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
         {
             if(!item) return null;
 

src/components/avatar-editor/palette-set/AvatarEditorAdvancedColorView.tsx

@@ -0,0 +1,82 @@
+import { IPartColor } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useMemo, useRef } from 'react';
+import { ColorUtils, GetClubMemberLevel, IAvatarEditorCategory } from '../../../api';
+import { useAvatarEditor } from '../../../hooks';
+
+const findNearestColor = (hex: string, colors: IPartColor[]): IPartColor | null =>
+{
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const maxLevel = GetClubMemberLevel();
+    let nearest: IPartColor | null = null;
+    let minDist = Infinity;
+
+    for(const color of colors)
+    {
+        if(color.clubLevel > maxLevel) continue;
+
+        const cr = (color.rgb >> 16) & 0xFF;
+        const cg = (color.rgb >> 8) & 0xFF;
+        const cb = color.rgb & 0xFF;
+        const dist = (r - cr) ** 2 + (g - cg) ** 2 + (b - cb) ** 2;
+
+        if(dist < minDist) { minDist = dist; nearest = color; }
+    }
+
+    return nearest;
+};
+
+export const AvatarEditorAdvancedColorView: FC<{
+    category: IAvatarEditorCategory;
+    paletteIndex: number;
+}> = ({ category, paletteIndex }) =>
+{
+    const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const selectedColor = useMemo(() =>
+    {
+        if(!selectedColorParts?.[category?.setType]?.[paletteIndex]) return null;
+
+        return selectedColorParts[category.setType][paletteIndex];
+    }, [ category, selectedColorParts, paletteIndex ]);
+
+    const hexColor = useMemo(() =>
+        ColorUtils.makeColorNumberHex((selectedColor?.rgb ?? 0) & 0xFFFFFF),
+        [ selectedColor ]);
+
+    const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) =>
+    {
+        const colors = category?.colorItems?.[paletteIndex];
+
+        if(!colors) return;
+
+        const nearest = findNearestColor(e.target.value, colors);
+
+        if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
+    }, [ category, paletteIndex, selectEditorColor ]);
+
+    return (
+        <div className="flex h-full p-1.5">
+            <div
+                className="flex-1 rounded-lg cursor-pointer relative border-2 border-white/20 overflow-hidden"
+                style={{ backgroundColor: hexColor }}
+                onClick={ () => inputRef.current?.click() }
+            >
+                <input
+                    ref={ inputRef }
+                    type="color"
+                    value={ hexColor }
+                    onChange={ handleChange }
+                    className="absolute opacity-0 inset-0 w-full h-full cursor-pointer"
+                />
+                <div className="absolute bottom-0 left-0 right-0 py-1 text-center bg-black/40">
+                    <span className="text-xs font-mono font-bold text-white">
+                        { hexColor.toUpperCase() }
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};

src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx

@@ -1,6 +1,6 @@
 import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { GetConfigurationValue } from '../../../api';
+import { GetClubMemberLevel, GetConfigurationValue } from '../../../api';
 import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
 import { InfiniteGrid } from '../../../layout';
 
@@ -16,9 +16,10 @@ export const AvatarEditorPaletteSetItem: FC<{
     if(!partColor) return null;
 
     const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partColor.clubLevel > 0);
+    const isLocked = isHC && (GetClubMemberLevel() < partColor.clubLevel);
 
     return (
-        <InfiniteGrid.Item itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
+        <InfiniteGrid.Item itemHighlight className={ `clear-bg aspect-square${ isLocked ? ' opacity-50' : '' }` } itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
             { isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
         </InfiniteGrid.Item>
     );

src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx

@@ -24,7 +24,7 @@ export const AvatarEditorPaletteSetView: FC<{
     };
 
     return (
-        <InfiniteGrid<IPartColor> columnCount={ columnCount } itemRender={ (item: IPartColor) =>
+        <InfiniteGrid<IPartColor> columnCount={ columnCount } estimateSize={ 18 } squareItems itemRender={ (item: IPartColor) =>
         {
             if(!item) return null;
 

src/components/avatar-editor/palette-set/index.ts

@@ -1,2 +1,3 @@
+export * from './AvatarEditorAdvancedColorView';
 export * from './AvatarEditorPaletteSetItemView';
 export * from './AvatarEditorPaletteSetView';

src/css/index.css

@@ -7,6 +7,41 @@
     src: url("@/assets/webfonts/Ubuntu-C.ttf");
 }
 
+@font-face {
+    font-family: Habbo;
+    src: url("@/assets/webfonts/Habbo.ttf");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Habbo;
+    src: url("@/assets/webfonts/Habbo-b.ttf");
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Habbo;
+    src: url("@/assets/webfonts/Habbo-i.ttf");
+    font-weight: normal;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: Habbo;
+    src: url("@/assets/webfonts/Habbo-m.ttf");
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: Habbo;
+    src: url("@/assets/webfonts/Habbo-t.ttf");
+    font-weight: 100;
+    font-style: normal;
+}
+
 html,
 body {
     padding: 0;
@@ -792,4 +827,161 @@ body {
 
 .bg-card-tabs {
     background-color: #185d79; /* Match bg-card-header */
+}
+
+/* ── Avatar Editor ─────────────────────────────────────────────────────── */
+
+.color-picker-frame {
+    border-image-source: url('@/assets/images/avatareditor/color_frame.png');
+    border-image-slice: 6 6 6 6 fill;
+    border-image-width: 6px 6px 6px 6px;
+    width: 14px;
+    height: 21px;
+    border-radius: 4px;
+
+    &.active,
+    &:hover {
+        border-image-source: url('@/assets/images/avatareditor/color_frame_active.png');
+        height: 21px;
+        margin-top: -2px;
+    }
+}
+
+.hc-icon {
+    background-image: url('@/assets/images/avatareditor/hc_icon.png');
+    height: 9px;
+    width: 10px;
+    bottom: 2px;
+    left: 2px;
+}
+
+.avatar-parts {
+    border: none !important;
+    height: 42px;
+    width: 42px;
+    background-position: center;
+    background-repeat: no-repeat;
+    border-radius: 2rem !important;
+    overflow: visible !important;
+    background-color: transparent;
+
+    &:hover {
+        box-shadow: 0 0 0 3px #dbdad5 !important;
+        background-color: #cecdc8 !important;
+    }
+
+    &:active,
+    &.part-selected {
+        box-shadow: 0 0 0 3px #c5c3c0 !important;
+        background-color: #b1b1b1 !important;
+    }
+}
+
+.avatar-container {
+    padding: 3px;
+    height: 50px;
+    border-radius: 0.3rem;
+    background-color: #a7a6a2;
+    width: 48px;
+}
+
+.avatar-parts-container {
+    height: 70%;
+}
+
+.avatar-color-palette-container {
+    height: 30%;
+    width: 100% !important;
+}
+
+.dual-palette {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.avatar-editor-palette-set-view {
+    padding-right: 15px !important;
+    flex-grow: 1;
+}
+
+.action-buttons {
+    gap: 5px;
+}
+
+/* ── Avatar Editor tab icons ───────────────────────────────────────────── */
+
+.avatar-editor-tabs {
+    position: relative;
+
+    .tab {
+        background-position-x: center;
+        background-position-y: center;
+        background-repeat: no-repeat;
+        width: 34px;
+        height: 22px;
+    }
+
+    .hd    { background-image: url('@/assets/images/wardrobe/hd.png'); }
+    .head  { background-image: url('@/assets/images/wardrobe/head.png'); }
+    .torso { background-image: url('@/assets/images/wardrobe/torso.png'); }
+    .legs  { background-image: url('@/assets/images/wardrobe/legs.png'); }
+
+    .tab-wardrobe {
+        width: 40px;
+        height: 28px;
+        background-size: 38px 28px;
+        background-image: url('@/assets/images/wardrobe/wardrobe.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        filter: contrast(1.2) brightness(1.05);
+    }
+}
+
+/* ── Avatar Editor misc ─────────────────────────────────────────────────── */
+
+
+.saved-outfits-title {
+    color: #a7a6a2;
+    font-weight: bold;
+}
+
+.nitro-avatar-editor-wardrobe-container {
+    background-color: #cacaca;
+    border-radius: 0.3rem;
+    border: solid 1px #000;
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    padding: 10px 12px 10px 0;
+    overflow-y: auto;
+}
+
+.nitro-avatar-editor-wardrobe-figure-preview {
+    border-image-source: url('@/assets/images/avatareditor/wardrobe_user_bg.png');
+    border-image-slice: 4 4 4 4 fill;
+    border-image-width: 4px 4px 4px 4px;
+    background-color: transparent;
+    overflow: hidden;
+    position: relative;
+
+    .avatar-shadow {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 25px;
+        width: 40px;
+        height: 20px;
+        margin: 0 auto;
+        border-radius: 100%;
+        background-color: rgba(0, 0, 0, 0.20);
+        z-index: 2;
+    }
+
+    .button-container {
+        position: absolute;
+        bottom: 0;
+        z-index: 5;
+        width: 100%;
+    }
 }

src/layout/InfiniteGrid.tsx

@@ -9,12 +9,13 @@ type Props<T> = {
     columnCount: number;
     overscan?: number;
     estimateSize?: number;
+    squareItems?: boolean;
     itemRender?: (item: T, index?: number) => ReactElement;
 }
 
 const InfiniteGridRoot = <T,>(props: Props<T>) =>
 {
-    const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, itemRender = null } = props;
+    const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, squareItems = false, itemRender = null } = props;
     const parentRef = useRef<HTMLDivElement>(null);
 
     const virtualizer = useVirtualizer({
@@ -72,7 +73,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
                         className={ `grid grid-cols-${ columnCount } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
                         data-index={ virtualRow.index }
                         style={ {
-                            height: virtualRow.size,
+                            ...(!squareItems && { height: virtualRow.size }),
                             transform: `translateY(${ virtualRow.start }px)`
                         } }>
                         { Array.from(Array(columnCount)).map((e, i) =>
@@ -144,7 +145,9 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
             className={ classNames(
                 'flex flex-col items-center justify-center cursor-pointer overflow-hidden relative bg-center bg-no-repeat w-full rounded-md border-2',
                 (itemImage && (!backgroundImageUrl || !backgroundImageUrl.length)) && 'nitro-icon icon-loading',
-                itemActive ? 'border-card-grid-item-active bg-card-grid-item-active' : 'border-card-grid-item-border bg-card-grid-item',
+                itemActive
+                    ? (itemColor ? 'border-card-grid-item-active' : 'border-card-grid-item-active bg-card-grid-item-active')
+                    : (itemColor ? 'border-card-grid-item-border' : 'border-card-grid-item-border bg-card-grid-item'),
                 (itemUniqueSoldout || (itemUniqueNumber > 0)) && 'unique-item',
                 itemUniqueSoldout && 'sold-out',
                 itemUnseen && ' bg-green-500 bg-opacity-40',

tailwind.config.js

@@ -1,6 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 
-const { generateShades } = require('./css-utils/CSSColorUtils');
+const {
+    generateShades
+} = require('./css-utils/CSSColorUtils');
 
 const colors = {
     'toolbar': '#555555',
@@ -58,7 +60,6 @@ const boxShadow = {
     'room-previewer': '-2px -2px rgba(0, 0, 0, 0.4), inset 3px 3px rgba(0, 0, 0, 0.2);'
 };
 
-
 module.exports = {
     theme: {
         extend: {
@@ -71,9 +72,9 @@ module.exports = {
                 '4xl': '2.441rem',
                 '5xl': '3.052rem',
             },
-          
+
             fontFamily: {
-                sans: [ 'Ubuntu' ],
+                sans: ['Ubuntu'],
             },
             colors: generateShades(colors),
             boxShadow,
@@ -83,15 +84,15 @@ module.exports = {
             spacing: {
                 'card-header': '33px',
                 'card-tabs': '33px',
-                'navigator-w': '420px',
+                'navigator-w': '480px',
-                'navigator-h': '440px',
+                'navigator-h': '520px',
                 'inventory-w': '528px',
                 'inventory-h': '320px'
             },
             borderRadius: {
-               
+
                 '3': '0.3rem',
-             
+
             },
             zIndex: {
                 'toolbar': '',
@@ -127,7 +128,9 @@ module.exports = {
         'col-span-9',
         'col-span-10',
         'col-span-11',
-        'col-span-12', 
+        'col-span-12',
+        'grid-cols-13',
+        'grid-cols-14',
         'grid-rows-1',
         'grid-rows-2',
         'grid-rows-3',
@@ -146,8 +149,8 @@ module.exports = {
     darkMode: 'class',
     variants: {
         extend: {
-            divideColor: [ 'group-hover' ],
+            divideColor: ['group-hover'],
-            backgroundColor: [ 'group-focus' ],
+            backgroundColor: ['group-focus'],
         }
     },
     plugins: [