Merge pull request #108 from duckietm/Dev

Dev
2026-06-19 15:06:20 +00:00 · 2026-04-29 17:08:29 +02:00
parent 7f8051c6ab b722903834
commit 1da65784ef
15 changed files with 462 additions and 20 deletions
@@ -168,6 +168,7 @@
    "nitro.login.error.missing_username": "Please choose a Habbo name.",
    "nitro.login.error.username_length": "Habbo name must be 3–16 characters.",
    "nitro.login.error.username_taken": "This Habbo name is already taken.",
-    "nitro.login.error.missing_email": "Please enter your email address."
+    "nitro.login.error.missing_email": "Please enter your email address.",
+	"inventory.effects.activate": "Use selected effect"
 }
 }
@@ -227,9 +227,11 @@ export class AvatarEditorThumbnailsHelper

                if(isDisabled) sprite.filters = [ AvatarEditorThumbnailsHelper.ALPHA_FILTER ];

+                const frame = AvatarEditorThumbnailsHelper.findOpaqueBoundsFrame(sprite, texture.width, texture.height);
+
                const imageUrl = await TextureUtils.generateImageUrl({
                    target: sprite,
-                    frame: new NitroRectangle(0, 0, texture.width, texture.height)
+                    frame
                });

                sprite.destroy();
@@ -244,6 +246,50 @@ export class AvatarEditorThumbnailsHelper
        });
    }

+    private static findOpaqueBoundsFrame(sprite: NitroSprite, fallbackWidth: number, fallbackHeight: number): NitroRectangle
+    {
+        try
+        {
+            const data = TextureUtils.getPixels(sprite);
+            if(!data) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
+
+            const pixels = data.pixels as Uint8ClampedArray | Uint8Array;
+            const width = data.width;
+            const height = data.height;
+            if(!pixels || width <= 0 || height <= 0) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
+
+            const ALPHA_THRESHOLD = 8;
+
+            let minX = width;
+            let minY = height;
+            let maxX = -1;
+            let maxY = -1;
+
+            for(let y = 0; y < height; y++)
+            {
+                const rowStart = y * width * 4;
+                for(let x = 0; x < width; x++)
+                {
+                    if(pixels[rowStart + (x * 4) + 3] > ALPHA_THRESHOLD)
+                    {
+                        if(x < minX) minX = x;
+                        if(x > maxX) maxX = x;
+                        if(y < minY) minY = y;
+                        if(y > maxY) maxY = y;
+                    }
+                }
+            }
+
+            if(maxX < minX || maxY < minY) return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
+
+            return new NitroRectangle(minX, minY, (maxX - minX) + 1, (maxY - minY) + 1);
+        }
+        catch
+        {
+            return new NitroRectangle(0, 0, fallbackWidth, fallbackHeight);
+        }
+    }
+
    private static sortByDrawOrder(a: IFigurePart, b: IFigurePart): number
    {
        const indexA = AvatarEditorThumbnailsHelper.DRAW_ORDER.indexOf(a.type);
@@ -4,6 +4,7 @@ import { FC, useEffect, useState } from 'react';
 import { useNitroEvent } from '../hooks';
 import { AchievementsView } from './achievements/AchievementsView';
 import { AvatarEditorView } from './avatar-editor';
+import { AvatarEffectsView } from './avatar-effects';
 import { CameraWidgetView } from './camera/CameraWidgetView';
 import { CampaignView } from './campaign/CampaignView';
 import { CatalogView } from './catalog/CatalogView';
@@ -105,6 +106,7 @@ export const MainView: FC<{}> = props =>
            <ChatHistoryView />
            <WiredView />
            <AvatarEditorView />
+            <AvatarEffectsView />
            <AchievementsView />
            <NavigatorView />
 			<NitrobubbleHiddenView />
@@ -89,13 +89,13 @@ export const AvatarEditorModelView: FC<{
                    <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 } /> }
+                            : <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ maxPaletteCount === 2 ? 5 : 14 } paletteIndex={ 0 } /> }
                    </div> }
                { (maxPaletteCount === 2) &&
                    <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 } /> }
+                            : <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 1 } /> }
                    </div> }
            </div>
        </div>
@@ -78,7 +78,8 @@ export const AvatarEditorView: FC<{}> = props =>

    return (
        <NitroCardView
-            className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[620px]' } h-[460px]` }
+            className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[600px]' } h-[460px]` }
+            isResizable={ false }
            uniqueKey="avatar-editor">
            <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
            <NitroCardTabsView classNames={ ['avatar-editor-tabs'] }>
@@ -77,7 +77,7 @@ export const AvatarEditorFigureSetItemView: FC<{
            itemActive={ isSelected }
            itemImage={ (!partItem.isClear && isHead) ? assetUrl : undefined }
            className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` }
-            style={ isHead ? { backgroundSize: '200%', backgroundPosition: 'center -32px' } : undefined }
+            style={ isHead ? { backgroundSize: 'auto 80%', backgroundPosition: 'center', imageRendering: 'pixelated' } : undefined }
            { ...rest }
        >
            { !partItem.isClear && assetUrl && !isHead &&
@@ -30,12 +30,12 @@ export const AvatarEditorFigureSetView: FC<{
    };

    return (
-        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
+        <InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemMinWidth={ 42 } rowGap={ 8 } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
        {
            if(!item) return null;

            return (
-                <AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } width={ `calc(100% / ${ columnCount })` } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
+                <AvatarEditorFigureSetItemView isSelected={ isPartItemSelected(item) } partItem={ item } setType={ category.setType } onClick={ event => selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
            );
        } } items={ category.partItems } overscan={ columnCount } />
    );
@@ -0,0 +1,76 @@
+import { GetRoomEngine, RoomPreviewer } from '@nitrots/nitro-renderer';
+import { CSSProperties, FC, useEffect, useState } from 'react';
+import { LayoutRoomPreviewerView } from '../../common';
+
+interface AvatarEffectPreviewViewProps
+{
+    figure: string;
+    gender: string;
+    direction: number;
+    effect: number;
+    height?: number;
+    zoom?: number;
+}
+
+export const AvatarEffectPreviewView: FC<AvatarEffectPreviewViewProps> = props =>
+{
+    const { figure = '', gender = 'M', direction = 4, effect = 0, height = 280, zoom = 1 } = props;
+    const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
+
+    const renderHeight = Math.floor(height / zoom);
+
+    useEffect(() =>
+    {
+        const previewer = new RoomPreviewer(GetRoomEngine(), ++RoomPreviewer.PREVIEW_COUNTER);
+        setRoomPreviewer(previewer);
+
+        return () =>
+        {
+            previewer.dispose();
+            setRoomPreviewer(null);
+        };
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!roomPreviewer || !figure) return;
+
+        roomPreviewer.addAvatarIntoRoom(figure, effect);
+        roomPreviewer.updateObjectUserFigure(figure, gender);
+    }, [ roomPreviewer, figure, gender, effect ]);
+
+    useEffect(() =>
+    {
+        if(!roomPreviewer) return;
+        roomPreviewer.updateAvatarDirection(direction, direction);
+    }, [ roomPreviewer, direction ]);
+
+    if(!roomPreviewer) return null;
+
+    if(zoom === 1)
+    {
+        return <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ height } />;
+    }
+
+    const outerStyle: CSSProperties = {
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden'
+    };
+
+    const innerStyle: CSSProperties = {
+        width: `${ 100 / zoom }%`,
+        height: `${ 100 / zoom }%`,
+        transform: `scale(${ zoom })`,
+        transformOrigin: 'top left',
+        imageRendering: 'pixelated'
+    };
+
+    return (
+        <div style={ outerStyle }>
+            <div style={ innerStyle }>
+                <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ renderHeight } />
+            </div>
+        </div>
+    );
+};
@@ -0,0 +1,271 @@
+import { AddLinkEventTracker, AvatarDirectionAngle, AvatarEffectActivatedComposer, GetConfiguration, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FaChevronLeft, FaChevronRight, FaSearch } from 'react-icons/fa';
+import { LocalizeText, SendMessageComposer } from '../../api';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { AvatarEffectPreviewView } from './AvatarEffectPreviewView';
+
+interface EffectMapEntry
+{
+    id: string;
+    lib: string;
+    type: string;
+    revision?: string | number;
+}
+
+const DEFAULT_DIRECTION = 4;
+const PAGE_SIZE = 50;
+
+export const AvatarEffectsView: FC<{}> = () =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ effects, setEffects ] = useState<EffectMapEntry[]>([]);
+    const [ loadError, setLoadError ] = useState<string>(null);
+    const [ selectedId, setSelectedId ] = useState<number>(0);
+    const [ direction, setDirection ] = useState<number>(DEFAULT_DIRECTION);
+    const [ query, setQuery ] = useState<string>('');
+    const [ visibleCount, setVisibleCount ] = useState<number>(PAGE_SIZE);
+
+    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;
+                }
+            },
+            eventUrlPrefix: 'avatar-effects/'
+        };
+
+        AddLinkEventTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!isVisible || effects.length || loadError) return;
+
+        const url = GetConfiguration().getValue<string>('avatar.effectmap.url');
+        if(!url)
+        {
+            setLoadError('Effect map URL is not configured.');
+            return;
+        }
+
+        let cancelled = false;
+        (async () =>
+        {
+            try
+            {
+                const response = await fetch(url);
+                if(!response.ok) throw new Error(`HTTP ${ response.status }`);
+                const json = await response.json();
+                if(cancelled) return;
+
+                const list: EffectMapEntry[] = Array.isArray(json?.effects)
+                    ? json.effects.filter((e: EffectMapEntry) => e?.type === 'fx' && /^\d+$/.test(String(e.id)))
+                    : [];
+
+                list.sort((a, b) => parseInt(a.id, 10) - parseInt(b.id, 10));
+                setEffects(list);
+            }
+            catch(error)
+            {
+                if(!cancelled) setLoadError(String((error as Error).message ?? error));
+            }
+        })();
+
+        return () => { cancelled = true; };
+    }, [ isVisible, effects.length, loadError ]);
+
+    const session = GetSessionDataManager();
+    const figure = session?.figure ?? '';
+    const gender = session?.gender ?? 'M';
+
+    const rotateFigure = useCallback((delta: number) =>
+    {
+        setDirection(prev =>
+        {
+            let next = prev + delta;
+            if(next < AvatarDirectionAngle.MIN_DIRECTION) next = AvatarDirectionAngle.MAX_DIRECTION;
+            if(next > AvatarDirectionAngle.MAX_DIRECTION) next = AvatarDirectionAngle.MIN_DIRECTION;
+            return next;
+        });
+    }, []);
+
+    const applySelectedEffect = useCallback(() =>
+    {
+        if(!selectedId) return;
+        SendMessageComposer(new AvatarEffectActivatedComposer(selectedId));
+        setIsVisible(false);
+    }, [ selectedId ]);
+
+    const onClose = useCallback(() => setIsVisible(false), []);
+
+    const filteredEffects = useMemo(() =>
+    {
+        const trimmed = query.trim().toLowerCase();
+        if(!trimmed) return effects;
+        return effects.filter(e =>
+            e.id.toLowerCase().includes(trimmed) ||
+            e.lib.toLowerCase().includes(trimmed));
+    }, [ effects, query ]);
+
+    const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) =>
+    {
+        setQuery(event.target.value);
+        setVisibleCount(PAGE_SIZE);
+    }, []);
+
+    const visibleEffects = filteredEffects.slice(0, visibleCount);
+    const hasMore = filteredEffects.length > visibleEffects.length;
+    const selectedEffect = selectedId ? effects.find(e => parseInt(e.id, 10) === selectedId) : null;
+
+    const selectedRowRef = useRef<HTMLButtonElement>(null);
+
+    const jumpToSelected = useCallback(() =>
+    {
+        if(!selectedId) return;
+
+        const indexInFiltered = filteredEffects.findIndex(e => parseInt(e.id, 10) === selectedId);
+        const indexInAll = effects.findIndex(e => parseInt(e.id, 10) === selectedId);
+
+        if(indexInFiltered === -1)
+        {
+            setQuery('');
+            if(indexInAll >= 0 && indexInAll >= visibleCount)
+            {
+                setVisibleCount(Math.ceil((indexInAll + 1) / PAGE_SIZE) * PAGE_SIZE);
+            }
+        }
+        else if(indexInFiltered >= visibleCount)
+        {
+            setVisibleCount(Math.ceil((indexInFiltered + 1) / PAGE_SIZE) * PAGE_SIZE);
+        }
+
+        requestAnimationFrame(() =>
+        {
+            selectedRowRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        });
+    }, [ selectedId, filteredEffects, effects, visibleCount ]);
+
+    if(!isVisible) return null;
+
+    return (
+        <NitroCardView className="nitro-avatar-effects w-[640px] h-[480px]" isResizable={ false } uniqueKey="avatar-effects" theme="primary-slim">
+            <NitroCardHeaderView headerText={ LocalizeText('product.type.effect') || 'Avatar effect' } onCloseClick={ onClose } />
+            <NitroCardContentView className="flex flex-row gap-3 text-black">
+                <Column overflow="hidden" className="w-[220px] items-center justify-between">
+                    <div className="figure-preview-container overflow-hidden relative w-full h-[280px] bg-gradient-to-b from-[#1a1a1a] to-black rounded-md shadow-inner">
+                        <AvatarEffectPreviewView figure={ figure } gender={ gender } direction={ direction } effect={ selectedId } height={ 280 } zoom={ 2 } />
+                        <div className="arrow-container absolute inset-y-0 left-0 right-0 flex items-center justify-between px-1 z-10 pointer-events-none">
+                            <button
+                                type="button"
+                                className="pointer-events-auto flex items-center justify-center w-7 h-7 rounded-full bg-black/45 hover:bg-black/70 border border-white/15 text-white shadow-md backdrop-blur-sm transition-all hover:scale-110 active:scale-95"
+                                onClick={ () => rotateFigure(1) }
+                                aria-label="Rotate left"
+                            >
+                                <FaChevronLeft className="w-3 h-3" />
+                            </button>
+                            <button
+                                type="button"
+                                className="pointer-events-auto flex items-center justify-center w-7 h-7 rounded-full bg-black/45 hover:bg-black/70 border border-white/15 text-white shadow-md backdrop-blur-sm transition-all hover:scale-110 active:scale-95"
+                                onClick={ () => rotateFigure(-1) }
+                                aria-label="Rotate right"
+                            >
+                                <FaChevronRight className="w-3 h-3" />
+                            </button>
+                        </div>
+                        { selectedEffect &&
+                            <div className="absolute top-2 left-2 right-2 bg-black/55 backdrop-blur-sm rounded px-2 py-1 text-white text-xs leading-tight">
+                                <div className="font-mono opacity-70 text-[10px]">#{ parseInt(selectedEffect.id, 10) }</div>
+                                <div className="font-semibold truncate">{ selectedEffect.lib }</div>
+                            </div>
+                        }
+                    </div>
+                    <Button variant="success" disabled={ !selectedId } onClick={ applySelectedEffect } className="w-full mt-2">
+                        { LocalizeText('inventory.effects.activate') || 'Use' }
+                    </Button>
+                </Column>
+                <Column overflow="hidden" className="flex-1 min-h-0">
+                    <div className="relative">
+                        <FaSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 text-[#888] text-sm pointer-events-none" />
+                        <input
+                            type="text"
+                            value={ query }
+                            onChange={ onQueryChange }
+                            placeholder={ LocalizeText('generic.search') || 'Search by name or #number' }
+                            className="w-full pl-8 pr-3 py-1.5 text-sm border border-[#2a2a2a]/20 rounded-md bg-white outline-none transition-colors focus:border-[#3a78c4] focus:shadow-[0_0_0_2px_rgba(58,120,196,0.15)]"
+                        />
+                    </div>
+                    <div className="flex items-center justify-between px-1 py-1 text-[11px] uppercase tracking-wide text-[#666] border-b border-[#2a2a2a]/10">
+                        <span>{ filteredEffects.length === effects.length ? `${ effects.length } effects` : `${ filteredEffects.length } of ${ effects.length }` }</span>
+                        { selectedId > 0 &&
+                            <button
+                                type="button"
+                                onClick={ jumpToSelected }
+                                className="text-[#3a78c4] hover:text-[#2a5d9e] hover:underline normal-case font-semibold cursor-pointer"
+                                title="Jump to selected effect"
+                            >
+                                #{ selectedId } selected
+                            </button> }
+                    </div>
+                    <div className="flex-1 min-h-0 overflow-auto">
+                        { loadError && <div className="text-red-600 text-sm px-2 py-3">{ loadError }</div> }
+                        { !loadError && !effects.length && <div className="text-sm px-2 py-3 opacity-70">{ LocalizeText('generic.loading') || 'Loading…' }</div> }
+                        { !!effects.length && !filteredEffects.length &&
+                            <div className="text-sm px-2 py-3 opacity-70 italic">{ LocalizeText('generic.search.noresults') || 'No effects match your search.' }</div>
+                        }
+                        { !!visibleEffects.length &&
+                            <ul className="flex flex-col">
+                                { visibleEffects.map((effect, index) =>
+                                {
+                                    const id = parseInt(effect.id, 10);
+                                    const isSelected = (id === selectedId);
+                                    return (
+                                        <li key={ effect.id }>
+                                            <button
+                                                ref={ isSelected ? selectedRowRef : undefined }
+                                                type="button"
+                                                onClick={ () => setSelectedId(id) }
+                                                className={ `flex w-full items-center gap-3 px-3 py-1.5 text-sm border-l-[3px] transition-colors ${
+                                                    isSelected
+                                                        ? 'border-[#3a78c4] bg-[#cfe1f5] text-[#1d3a5e]'
+                                                        : `border-transparent hover:bg-[#eef3f9] ${ index % 2 === 0 ? 'bg-white' : 'bg-[#fafafa]' }`
+                                                }` }
+                                                title={ effect.lib }
+                                            >
+                                                <span className={ `font-mono text-xs w-12 text-right shrink-0 ${ isSelected ? 'opacity-80' : 'opacity-50' }` }>#{ id }</span>
+                                                <span className="truncate font-semibold">{ effect.lib }</span>
+                                            </button>
+                                        </li>
+                                    );
+                                }) }
+                                { hasMore &&
+                                    <li className="px-3 py-2 border-t border-[#2a2a2a]/10 mt-1">
+                                        <button
+                                            type="button"
+                                            onClick={ () => setVisibleCount(prev => prev + PAGE_SIZE) }
+                                            className="w-full text-sm font-semibold text-[#3a78c4] hover:text-[#2a5d9e] hover:bg-[#eef3f9] cursor-pointer py-1.5 rounded-md transition-colors"
+                                        >
+                                            { LocalizeText('navigator.show.more') || 'See More' }
+                                            <span className="opacity-60 ml-1 font-normal">({ filteredEffects.length - visibleEffects.length } more)</span>
+                                        </button>
+                                    </li>
+                                }
+                            </ul>
+                        }
+                    </div>
+                </Column>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};
@@ -0,0 +1,2 @@
+export * from './AvatarEffectPreviewView';
+export * from './AvatarEffectsView';
@@ -33,7 +33,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
                    onClick={() => setVisible(prev => !prev)}
                >
                    <div className="absolute left-[6px] top-1/2 h-[24px] w-[24px] -translate-y-1/2 bg-[url('@/assets/images/toolbar/friend-search.png')] bg-contain bg-center bg-no-repeat pointer-events-none" />
-                    <div className="truncate text-[0.8rem] font-bold">{LocalizeText('friend.bar.find.title')}</div>
+                    <div className="truncate text-[0.83rem]">{LocalizeText('friend.bar.find.title')}</div>
                </motion.button>
                
                <AnimatePresence>
@@ -45,10 +45,10 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
                            transition={{ type: "spring", stiffness: 400, damping: 25 }}
                            className="absolute bottom-[calc(100%+12px)] left-1/2 -translate-x-1/2 tbme-panel whitespace-nowrap z-[80] flex flex-col items-center gap-2 pointer-events-auto min-w-[170px]"
                        >
-                            <div className="text-white text-[13px] font-bold drop-shadow-[1px_1px_0_#000]">{LocalizeText('friend.bar.find.title')}</div>
+                            <div className="text-white text-[13px] drop-shadow-[1px_1px_0_#000]">{LocalizeText('friend.bar.find.title')}</div>
                            <div className="text-white/80 text-xs px-2">{LocalizeText('friend.bar.find.text')}</div>
                            <button 
-                                className="px-3 py-1 bg-black/40 hover:bg-black/60 border border-white/10 rounded-lg text-white text-[11px] font-bold transition-colors cursor-pointer mt-1"
+                                className="px-3 py-1 bg-black/40 hover:bg-black/60 border border-white/10 rounded-lg text-white text-[11px] transition-colors cursor-pointer mt-1"
                                onClick={event => { event.stopPropagation(); SendMessageComposer(new FindNewFriendsMessageComposer()); setVisible(false); }}
                            >
                                {LocalizeText('friend.bar.find.button')}
@@ -83,7 +83,7 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props => {
                className="relative flex h-[34px] w-[132px] items-center rounded-[7px] border border-[#9fc56f] bg-[#6f8f39] pl-[44px] pr-[10px] text-left text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)] overflow-visible"
                onClick={() => setVisible(prev => !prev)}
            >
-                <div className="truncate text-[0.82rem] font-bold">{friend.name}</div>
+                <div className="truncate text-[0.83rem]">{friend.name}</div>
            </motion.button>

            <AnimatePresence>
@@ -37,7 +37,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
        >
            { (requestsCount > 0) &&
                <motion.div variants={ itemVariants }>
-                    <div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-bold whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
+                    <div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.83rem] whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
                        { requestsCount } { LocalizeText('friendbar.requests.title') }
                    </div>
                </motion.div> }
@@ -82,7 +82,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount
                        animate="visible"
                        exit="exit"
                    >
-                        <div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.74rem] font-medium whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
+                        <div className="flex h-[34px] items-center rounded-[7px] border border-[#9fc56f] bg-[#5f7d2f] px-[10px] text-[0.83rem] font-medium whitespace-nowrap text-white shadow-[inset_0_1px_0_rgba(255,255,255,0.18),0_2px_0_rgba(0,0,0,0.25)]">
                            Nessun amico online
                        </div>
                    </motion.div> }
@@ -55,6 +55,9 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                    case 'change_looks':
                        CreateLinkEvent('avatar-editor/show');
                        break;
+                    case 'avatar_effect':
+                        CreateLinkEvent('avatar-effects/show');
+                        break;
                    case 'expressions':
                        hideMenu = false;
                        setMode(MODE_EXPRESSIONS);
@@ -137,6 +140,9 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                    <ContextMenuListItemView onClick={ event => processAction('change_looks') }>
                        { LocalizeText('widget.memenu.myclothes') }
                    </ContextMenuListItemView>
+                    <ContextMenuListItemView onClick={ event => processAction('avatar_effect') }>
+                        { LocalizeText('product.type.effect') }
+                    </ContextMenuListItemView>
                    { (HasHabboClub() && !isRidingHorse) &&
                        <ContextMenuListItemView onClick={ event => processAction('dance_menu') }>
                            <FaChevronRight className="right fa-icon" />
@@ -1823,7 +1823,7 @@ body {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
-    max-width: 42px;
+    max-width: 64px;
    border-radius: 0.3rem !important;
    overflow: hidden !important;
    background-color: #e9e8e4;
@@ -10,19 +10,54 @@ type Props<T> = {
    overscan?: number;
    estimateSize?: number;
    squareItems?: boolean;
+    itemMinWidth?: number;
+    rowGap?: number;
    itemRender?: (item: T, index?: number) => ReactElement;
 }

+const GRID_GAP_PX = 4;
+
 const InfiniteGridRoot = <T,>(props: Props<T>) =>
 {
-    const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, squareItems = false, itemRender = null } = props;
+    const { items = [], columnCount: columnCountProp = 4, overscan = 5, estimateSize = 45, squareItems = false, itemMinWidth = null, rowGap = null, itemRender = null } = props;
    const parentRef = useRef<HTMLDivElement>(null);
+    const [ measuredColumnCount, setMeasuredColumnCount ] = useState<number>(columnCountProp);
+
+    const columnCount = (itemMinWidth && itemMinWidth > 0) ? measuredColumnCount : columnCountProp;
+    const rowsContainerClassName = (rowGap !== null) ? 'flex flex-col w-full relative' : 'flex flex-col w-full *:pb-1 relative';
+
+    useEffect(() =>
+    {
+        if(!itemMinWidth || itemMinWidth <= 0) return;
+
+        const element = parentRef.current;
+        if(!element) return;
+
+        const recompute = () =>
+        {
+            const width = element.clientWidth;
+            const cols = Math.max(1, Math.floor((width + GRID_GAP_PX) / (itemMinWidth + GRID_GAP_PX)));
+            setMeasuredColumnCount(prev => prev === cols ? prev : cols);
+        };
+
+        recompute();
+
+        const observer = new ResizeObserver(recompute);
+        observer.observe(element);
+
+        return () => observer.disconnect();
+    }, [ itemMinWidth ]);
+
+    const autoFillStyle = (itemMinWidth && itemMinWidth > 0)
+        ? { gridTemplateColumns: `repeat(auto-fill, ${ itemMinWidth }px)` }
+        : null;
+    const fixedColsClass = (itemMinWidth && itemMinWidth > 0) ? '' : `grid-cols-${ columnCountProp }`;

    if(squareItems)
    {
        return (
            <div ref={ parentRef } className="overflow-y-auto size-full">
-                <div className={ `grid grid-cols-${ columnCount } gap-1 w-full` }>
+                <div className={ `grid ${ fixedColsClass } gap-1 w-full` } style={ autoFillStyle ?? undefined }>
                    { items.map((item, index) =>
                    {
                        if(!item) return <Fragment key={ `${ index }-empty` } />;
@@ -78,7 +113,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
            ref={ parentRef }
            className="overflow-y-auto size-full">
            <div
-                className="flex flex-col w-full *:pb-1 relative"
+                className={ rowsContainerClassName }
                style={ {
                    height: virtualizer.getTotalSize()
                } }>
@@ -86,10 +121,12 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
                    <div
                        key={ virtualRow.key + 'a' }
                        ref={ virtualizer.measureElement }
-                        className={ `grid grid-cols-${ columnCount } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
+                        className={ `grid ${ fixedColsClass } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
                        data-index={ virtualRow.index }
                        style={ {
-                            ...(!squareItems && { height: virtualRow.size }),
+                            ...(!squareItems && rowGap === null && { height: virtualRow.size }),
+                            ...(autoFillStyle ?? {}),
+                            ...(rowGap !== null && { paddingBottom: `${ rowGap }px` }),
                            transform: `translateY(${ virtualRow.start }px)`
                        } }>
                        { Array.from(Array(columnCount)).map((e, i) =>