Merge remote-tracking branch 'origin/Dev' into feat/messenger-groups-receipts

# Conflicts: # public/configuration/UITexts.example # src/css/friends/FriendsView.css
2026-06-19 23:16:21 +00:00 · 2026-06-02 21:52:59 +02:00
parent dc7012794e 03066abf54
commit dd7d504be2
225 changed files with 11432 additions and 1872 deletions
@@ -32,6 +32,11 @@ const preloadUrl = async (url: string): Promise<void> =>
 {
    if(!url) return;

+    // Split gamedata URLs are directories (end with '/'); fetching them as a
+    // file just 404s and wastes a connection at startup. The real split loader
+    // handles those — only warm up actual file URLs here.
+    if(url.split('?')[0].split('#')[0].endsWith('/')) return;
+
    try
    {
        const response = await fetch(url, { cache: 'force-cache' });
@@ -27,8 +27,16 @@ export class PageLocalization implements IPageLocalization

        if(!imageName || !imageName.length) return null;

+        // Already a full URL (any extension) -> use it directly.
+        if(/^https?:\/\//i.test(imageName)) return imageName;
+
        let assetUrl = GetConfigurationValue<string>('catalog.asset.image.url');

+        // The template forces ".gif" (.../%name%.gif). If the image name
+        // already carries its own extension (png/jpg/webp/gif), don't append
+        // the forced .gif so non-gif catalog images work too.
+        if(/\.[a-z0-9]+$/i.test(imageName)) assetUrl = assetUrl.replace(/\.gif(?=$|\?)/i, '');
+
        assetUrl = assetUrl.replace('%name%', imageName);

        return assetUrl;
@@ -27,6 +27,8 @@ export * from './purse';
 export * from './room';
 export * from './room/events';
 export * from './room/widgets';
+export * from './soundboard';
+export * from './theme';
 export * from './ui-settings';
 export * from './user';
 export * from './utils';
@@ -11,6 +11,7 @@ export class BotSkillsEnum
    public static NUX_PROCEED: number = 8;
    public static CHANGE_BOT_MOTTO: number = 9;
    public static NUX_TAKE_TOUR: number = 10;
+    public static ROTATE: number = 11;
    public static NO_PICK_UP: number = 12;
    public static NAVIGATOR_SEARCH: number = 14;
    public static DONATE_TO_USER: number = 24;
@@ -0,0 +1,7 @@
+let _soundboardEnabled = false;
+
+export const getSoundboardRoomEnabled = () => _soundboardEnabled;
+export const setSoundboardRoomEnabled = (enabled: boolean) =>
+{
+    _soundboardEnabled = enabled;
+};
@@ -0,0 +1 @@
+export * from './SoundboardRoomState';
@@ -0,0 +1,122 @@
+import { NitroLogger } from '@nitrots/nitro-renderer';
+import { GetConfigurationValue } from '../nitro';
+
+// ---------------------------------------------------------------------------
+//  Custom theme ecosystem (graphics-only, runtime-loaded).
+//
+//  A "theme" is a folder on the server (NOT bundled in the build) made of:
+//    <base>/index.json          -> { "themes": [ { id, name, author? } ] }
+//    <base>/<id>/theme.json      -> { name, pieces: [ { id, name, file } ] }
+//    <base>/<id>/<file>.css      -> one CSS "piece" (cards, chat, catalog, ...)
+//
+//  Each enabled piece is injected as a <link> in <head>. If a piece fails to
+//  load (404 / network) the link removes itself, so the UI falls back to the
+//  default look for that piece (per-piece fallback, never breaks the client).
+//
+//  The base url is configurable via ui-config ("theme.base.url") so themes can
+//  live anywhere (and never need a client rebuild to add/change them).
+// ---------------------------------------------------------------------------
+
+export interface ThemeInfo
+{
+    id: string;
+    name: string;
+    author?: string;
+}
+
+export interface ThemePiece
+{
+    id: string;
+    name: string;
+    file: string;
+}
+
+export interface ThemeManifest
+{
+    name: string;
+    pieces: ThemePiece[];
+}
+
+const LINK_ATTR = 'data-nitro-theme';
+
+export const GetThemeBaseUrl = (): string =>
+    GetConfigurationValue<string>('theme.base.url', 'custom-themes').replace(/\/+$/, '');
+
+export const FetchThemeIndex = async (): Promise<ThemeInfo[]> =>
+{
+    try
+    {
+        const response = await fetch(`${ GetThemeBaseUrl() }/index.json`, { cache: 'no-cache' });
+
+        if(!response.ok) return [];
+
+        const data = await response.json();
+
+        return Array.isArray(data?.themes) ? data.themes.filter((t: any) => t && t.id) : [];
+    }
+    catch(error)
+    {
+        NitroLogger.warn('[ThemeManager] index.json non caricabile, nessun tema custom', error);
+
+        return [];
+    }
+};
+
+export const FetchThemeManifest = async (themeId: string): Promise<ThemeManifest> =>
+{
+    if(!themeId) return null;
+
+    try
+    {
+        const response = await fetch(`${ GetThemeBaseUrl() }/${ themeId }/theme.json`, { cache: 'no-cache' });
+
+        if(!response.ok) return null;
+
+        const data = await response.json();
+
+        if(!data || !Array.isArray(data.pieces)) return null;
+
+        return {
+            name: data.name ?? themeId,
+            pieces: data.pieces.filter((p: any) => p && p.id && p.file)
+        };
+    }
+    catch(error)
+    {
+        NitroLogger.warn(`[ThemeManager] manifest non valido per tema "${ themeId }" -> fallback default`, error);
+
+        return null;
+    }
+};
+
+export const ClearTheme = (): void =>
+{
+    document.head.querySelectorAll(`link[${ LINK_ATTR }]`).forEach(node => node.remove());
+};
+
+export const ApplyThemePieces = (themeId: string, pieces: ThemePiece[]): void =>
+{
+    ClearTheme();
+
+    if(!themeId || !pieces || !pieces.length) return;
+
+    const base = GetThemeBaseUrl();
+
+    for(const piece of pieces)
+    {
+        const link = document.createElement('link');
+
+        link.rel = 'stylesheet';
+        link.setAttribute(LINK_ATTR, piece.id);
+        link.href = `${ base }/${ themeId }/${ piece.file }`;
+
+        // Per-piece fallback: a broken piece removes itself, leaving the default.
+        link.onerror = () =>
+        {
+            NitroLogger.warn(`[ThemeManager] pezzo tema rotto "${ themeId }/${ piece.file }" -> fallback default`);
+            link.remove();
+        };
+
+        document.head.appendChild(link);
+    }
+};
@@ -0,0 +1 @@
+export * from './ThemeManager';
@@ -4,4 +4,7 @@ export class LocalStorageKeys
    public static CATALOG_SKIP_PURCHASE_CONFIRMATION: string = 'catalogSkipPurchaseConfirmation';
    public static CHAT_WINDOW_ENABLED: string = 'chatWindowEnabled';
    public static CHAT_TRANSLATION_SETTINGS: string = 'chatTranslationSettings';
+    public static CATALOG_CLASSIC_STYLE: string = 'catalogClassicStyle';
+    public static THEME_ACTIVE: string = 'nitroThemeActive';
+    public static THEME_PIECES: string = 'nitroThemePieces';
 }
@@ -12,35 +12,51 @@ export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>
    headOnly?: boolean;
    direction?: number;
    scale?: number;
+    fit?: boolean;
 }

 export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
 {
-    const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
+    const { figure = '', gender = '', headOnly = false, direction = 0, scale = 1, fit = false, classNames = [], style = {}, ...rest } = props;
    const [ avatarUrl, setAvatarUrl ] = useState<string>(null);
    const [ isReady, setIsReady ] = useState<boolean>(false);
    const isDisposed = useRef(false);
-    // Request id bumped on every prop change. The SDK can call
-    // resetFigure asynchronously when server-side figure data lands;
-    // if props change in quick succession the older callback could
-    // otherwise overwrite the newer image. The closure captures the
-    // id and bails when stale.
    const requestIdRef = useRef(0);

    const getClassNames = useMemo(() =>
    {
-        const newClassNames: string[] = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat left-[-2px] pointer-events-none' ];
+        let newClassNames: string[];
+
+        if(fit)
+        {
+            newClassNames = [ 'avatar-image absolute inset-0 pointer-events-none' ];
+        }
+        else if(headOnly)
+        {
+            newClassNames = [ 'avatar-image absolute inset-0 bg-no-repeat pointer-events-none' ];
+        }
+        else
+        {
+            newClassNames = [ 'avatar-image relative w-[90px] h-[130px] bg-no-repeat left-[-2px] pointer-events-none' ];
+        }

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

        return newClassNames;
-    }, [ classNames ]);
+    }, [ classNames, headOnly, fit ]);

    const getStyle = useMemo(() =>
    {
        let newStyle: CSSProperties = {};

-        if(avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`;
+        if(!fit && avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`;
+
+        if(headOnly && !fit)
+        {
+            newStyle.backgroundSize = '130px auto';
+            newStyle.backgroundPosition = '51% 40%';
+            newStyle.imageRendering = 'pixelated';
+        }

        if(scale !== 1)
        {
@@ -52,7 +68,7 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };

        return newStyle;
-    }, [ avatarUrl, scale, style ]);
+    }, [ avatarUrl, scale, style, headOnly, fit ]);

    useEffect(() =>
    {
@@ -116,5 +132,17 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
        };
    }, []);

-    return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
+    return (
+        <Base classNames={ getClassNames } style={ getStyle } { ...rest }>
+            { fit && avatarUrl && avatarUrl.length > 0 && (
+                <img
+                    src={ avatarUrl }
+                    alt=""
+                    draggable={ false }
+                    className="absolute inset-0 w-full h-full object-contain"
+                    style={ { imageRendering: 'pixelated', transform: 'translateY(-20%)' } }
+                />
+            ) }
+        </Base>
+    );
 };
@@ -1,6 +1,7 @@
 import { AddLinkEventTracker, GetCommunication, GetRoomSessionManager, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useState } from 'react';
+import { GetConfigurationValue } from '../api';
 import { useNitroEventReducer } from '../hooks';
 import { AchievementsView } from './achievements/AchievementsView';
 import { AvatarEditorView } from './avatar-editor';
@@ -24,6 +25,11 @@ import { HcCenterView } from './hc-center/HcCenterView';
 import { HelpView } from './help/HelpView';
 import { HotelView } from './hotel-view/HotelView';
 import { HousekeepingView } from './housekeeping/HousekeepingView';
+import { RareValuesView } from './rare-values/RareValuesView';
+import { FortuneWheelView } from './fortune-wheel/FortuneWheelView';
+import { SoundboardView } from './soundboard/SoundboardView';
+import { ThemeApplier } from './theme/ThemeApplier';
+import { RadioView } from './radio/RadioView';
 import { InventoryView } from './inventory/InventoryView';
 import { ModToolsView } from './mod-tools/ModToolsView';
 import { NavigatorView } from './navigator/NavigatorView';
@@ -129,6 +135,7 @@ export const MainView: FC<{}> = props =>

    return (
        <>
+            <ThemeApplier />
            <div className="hidden" data-localization-version={ localizationVersion } />
            <AnimatePresence>
                { landingViewVisible &&
@@ -176,6 +183,10 @@ export const MainView: FC<{}> = props =>
            <GameCenterView />
            <FloorplanEditorView />
            <FurniEditorView />
+            <RareValuesView />
+            <FortuneWheelView />
+            <SoundboardView />
+            { GetConfigurationValue<boolean>('radio_ui.enabled', false) && <RadioView /> }
            <ExternalPluginLoader />
        </>
    );
@@ -1,9 +1,9 @@
 import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
-import { FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
-import { CatalogType, GetConfigurationValue, LocalizeText } from '../../api';
-import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
-import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission } from '../../hooks';
+import { FC, useEffect, useState } from 'react';
+import { FaBars, FaCog, FaEdit, FaEye, FaEyeSlash, FaPlus, FaTrash } from 'react-icons/fa';
+import { CatalogType, GetConfigurationValue, LocalizeShortNumber, LocalizeText } from '../../api';
+import { Column, Grid, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { useCatalogActions, useCatalogData, useCatalogUiState, useHasPermission, usePurse } from '../../hooks';
 import { CatalogAdminProvider, useCatalogAdmin } from './CatalogAdminContext';
 import { CatalogAdminOfferEditView } from './views/admin/CatalogAdminOfferEditView';
 import { CatalogAdminPageEditView } from './views/admin/CatalogAdminPageEditView';
@@ -31,6 +31,9 @@ const CatalogClassicViewInner: FC<{}> = () =>
    const loading = catalogAdmin?.loading ?? false;

    const isMod = useHasPermission('acc_catalogfurni');
+    const [ mobileMenuOpen, setMobileMenuOpen ] = useState(false);
+    const { purse = null } = usePurse();
+    const displayedCurrencies = GetConfigurationValue<number[]>('system.currency.types', []);
    const buildersClubHeaderStyle = (currentType === CatalogType.BUILDER)
        ? { borderColor: '#d79d2e', borderBottomColor: '#000', background: 'linear-gradient(180deg, #d89f2d 0%, #c68515 100%)' }
        : undefined;
@@ -121,6 +124,42 @@ const CatalogClassicViewInner: FC<{}> = () =>
            { isVisible &&
                <NitroCardView classNames={ [ 'nitro-catalog-classic-window' ] } isResizable={ false } uniqueKey="catalog">
                    <NitroCardHeaderView className={ currentType === CatalogType.BUILDER ? 'builders-club-card-header' : '' } headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } style={ buildersClubHeaderStyle } />
+                    <div className="nitro-catalog-classic-mobile-header">
+                        { isMod &&
+                            <div className="nitro-catalog-classic-mobile-burger">
+                                <button className="nitro-catalog-classic-burger-btn" onClick={ () => setMobileMenuOpen(value => !value) }>
+                                    <FaBars />
+                                </button>
+                                { mobileMenuOpen &&
+                                    <div className="nitro-catalog-classic-burger-menu">
+                                        <button onClick={ () =>
+                                        {
+                                            setAdminMode(!adminMode); setMobileMenuOpen(false);
+                                        } }>
+                                            { adminMode ? 'Exit Admin' : 'Admin' }
+                                        </button>
+                                        { adminMode &&
+                                            <button disabled={ loading } onClick={ () =>
+                                            {
+                                                publishCatalog(); setMobileMenuOpen(false);
+                                            } }>
+                                                { loading ? '...' : 'Publish' }
+                                            </button> }
+                                    </div> }
+                            </div> }
+                        <div className="nitro-catalog-classic-mobile-currency">
+                            <div className="nitro-catalog-classic-coin">
+                                <span>{ LocalizeShortNumber(purse?.credits ?? 0) }</span>
+                                <LayoutCurrencyIcon type={ -1 } />
+                            </div>
+                            { displayedCurrencies.map(type => (
+                                <div key={ type } className="nitro-catalog-classic-coin">
+                                    <span>{ LocalizeShortNumber(purse?.activityPoints?.get(type) ?? 0) }</span>
+                                    <LayoutCurrencyIcon type={ type } />
+                                </div>
+                            )) }
+                        </div>
+                    </div>
                    { adminMode &&
                        <div className="nitro-catalog-classic-admin-banner flex items-center justify-between text-[10px] font-bold px-3 py-0.5 uppercase tracking-wider">
                            <span>Admin Mode</span>
@@ -148,7 +187,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
                                } }>
                                    <div className={ `flex items-center gap-1 ${ isHidden ? 'opacity-40' : '' }` }>
                                        <CatalogIconView icon={ child.iconId } />
-                                        <span className="truncate">{ child.localization }</span>
+                                        <span className="nitro-catalog-classic-tab-label truncate">{ child.localization }</span>
                                        { adminMode && isHidden && <FaEyeSlash className="text-[8px] text-danger ml-1" /> }
                                        { adminMode &&
                                            <div className="flex items-center gap-0.5 ml-1" onClick={ e => e.stopPropagation() }>
@@ -172,7 +211,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
                            );
                        }) }
                        { isMod &&
-                            <NitroCardTabsItemView isActive={ adminMode } onClick={ () => setAdminMode(!adminMode) }>
+                            <NitroCardTabsItemView classNames={ [ 'nitro-catalog-classic-admin-tab' ] } isActive={ adminMode } onClick={ () => setAdminMode(!adminMode) }>
                                <FaCog className={ `text-[10px] ${ adminMode ? 'animate-spin' : '' }` } style={ adminMode ? { animationDuration: '3s' } : {} } />
                            </NitroCardTabsItemView> }
                    </NitroCardTabsView>
@@ -213,7 +252,8 @@ const CatalogClassicViewInner: FC<{}> = () =>
                                <div className="nitro-catalog-classic-layout-header-shell">
                                    <CatalogBreadcrumbView />
                                    <div className="nitro-catalog-classic-layout-hero">
-                                        { !!currentPage?.localization?.getImage(0) && <img src={ currentPage.localization.getImage(0) } /> }
+                                        { /* info_duckets renders its own logo in the body (BcInfoView) — don't duplicate it in the hero */ }
+                                        { (currentPage?.layoutCode !== 'info_duckets') && !!currentPage?.localization?.getImage(0) && <img src={ currentPage.localization.getImage(0) } /> }
                                    </div>
                                </div>
                                <div className="nitro-catalog-classic-layout-container">
@@ -37,6 +37,10 @@ const CatalogModernViewInner: FC<{}> = () =>
    const buildersClubHeaderStyle = (currentType === CatalogType.BUILDER)
        ? { borderColor: '#d79d2e', borderBottomColor: '#000', background: 'linear-gradient(180deg, #d89f2d 0%, #c68515 100%)' }
        : undefined;
+    // Desktop = fixed 780x520. On mobile the window clamps below the viewport so
+    // it reads as a dialog (with margins) instead of filling the whole phone
+    // screen — applies to both the normal catalog and the Builders Club.
+    const catalogCardSize = 'w-[780px] h-[520px] max-w-[96vw] max-h-[72vh] sm:max-w-[100vw] sm:max-h-[92vh]';

    useEffect(() =>
    {
@@ -122,7 +126,7 @@ const CatalogModernViewInner: FC<{}> = () =>
    return (
        <>
            { isVisible &&
-                <NitroCardView className="nitro-catalog w-[780px] h-[520px]" uniqueKey="catalog">
+                <NitroCardView className={ `nitro-catalog ${ catalogCardSize }` } uniqueKey="catalog">
                    <NitroCardHeaderView className={ currentType === CatalogType.BUILDER ? 'builders-club-card-header' : '' } headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } style={ buildersClubHeaderStyle } />
                    <NitroCardContentView classNames={ [ 'p-0!', 'overflow-hidden!' ] }>
                        { /* Admin banner */ }
@@ -141,7 +145,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                        <CatalogBuildersClubStatusView />
                        <div className="flex min-h-0 flex-1">
                            { /* === LEFT SIDEBAR === */ }
-                            <div className="group/rail flex flex-col w-[52px] hover:w-[175px] min-w-[52px] bg-card-grid-item border-r-2 border-card-grid-item-border py-1.5 gap-px overflow-y-auto overflow-x-hidden transition-[width] duration-200 ease-in-out">
+                            <div className="group/rail flex flex-col w-[52px] sm:hover:w-[175px] min-w-[52px] bg-card-grid-item border-r-2 border-card-grid-item-border py-1.5 gap-px overflow-y-auto overflow-x-hidden transition-[width] duration-200 ease-in-out [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">

                                { /* Favorites toggle */ }
                                <div
@@ -279,7 +283,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                                            : <span className="text-muted">{ LocalizeText('catalog.title') }</span> }
                                    </div>

-                                    <div className="w-[180px] shrink-0">
+                                    <div className="w-[110px] sm:w-[180px] shrink-0">
                                        <CatalogSearchView />
                                    </div>

@@ -301,7 +305,7 @@ const CatalogModernViewInner: FC<{}> = () =>
                                        </div>
                                        : <>
                                            { !navigationHidden && activeNodes && activeNodes.length > 0 &&
-                                                <div className="w-[170px] min-w-[170px] border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1">
+                                                <div className="w-[120px] min-w-[120px] sm:w-[170px] sm:min-w-[170px] border-r-2 border-card-grid-item-border bg-card-grid-item overflow-y-auto py-1">
                                                    <CatalogNavigationView node={ activeNodes[0] } />
                                                </div> }
                                            <div className="flex-1 overflow-auto p-2 nitro-card-content-shell">
@@ -1,15 +1,18 @@
 import { FC } from 'react';
-import { GetConfigurationValue } from '../../api';
-import { useCatalogData } from '../../hooks';
+import { useCatalogClassicStyle, useCatalogData } from '../../hooks';
 import { CatalogClassicView } from './CatalogClassicView';
 import { CatalogModernView } from './CatalogModernView';

 export const CatalogView: FC<{}> = () =>
 {
    const { catalogLocalizationVersion = 0 } = useCatalogData();
-    const useNewStyle = GetConfigurationValue<boolean>('catalog.style.new', false);
+    const [ catalogClassicStyle ] = useCatalogClassicStyle();

-    if(useNewStyle) return (
+    // Default = upstream rebuilt catalog (CatalogClassicView, latest release theme).
+    // The "stile classico" toggle (or global catalog.classic.style flag) switches
+    // to the Hippiehotel.nl catalog (CatalogModernView, self-contained tailwind).
+    // Both the normal catalog and the Builders Club follow this toggle.
+    if(catalogClassicStyle) return (
        <>
            <div className="hidden" data-catalog-localization-version={ catalogLocalizationVersion } />
            <CatalogModernView />
@@ -67,8 +67,14 @@ export const CatalogAdminPageEditView: FC<{}> = () =>
    {
        if(!editingPageData || !targetNode) return;

-        setCaption(targetNode.localization || '');
-        setCaptionSave(targetNode.pageName || targetNode.localization || '');
+        // The server appends " (pageId)" to the caption for mods/admins (see
+        // CatalogPagesListComposer). Strip that exact suffix before seeding the
+        // edit field, otherwise saving folds the id back into the stored
+        // caption and it multiplies on every edit ("Wired (1114) (1114) ...").
+        const rawCaption = (targetNode.localization || '').replace(new RegExp(`\\s*\\(${ targetNode.pageId }\\)\\s*$`), '');
+
+        setCaption(rawCaption);
+        setCaptionSave(targetNode.pageName || rawCaption);
        setCatalogMode(currentType === CatalogType.BUILDER ? 'BUILDER' : 'NORMAL');
        setPageLayout(currentPage?.layoutCode || 'default_3x3');
        setIconImage(targetNode.iconId ?? 0);
@@ -76,7 +76,7 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
            { iconUrl && !(offer.product.productType === ProductTypeEnum.ROBOT) &&
                <div className="nitro-catalog-classic-grid-offer-icon" style={ { backgroundImage: `url(${ iconUrl })` } } /> }
            { (offer.product.productType === ProductTypeEnum.ROBOT) &&
-                <LayoutAvatarImageView direction={ 3 } figure={ offer.product.extraParam } headOnly={ true } /> }
+                <LayoutAvatarImageView direction={ 2 } figure={ offer.product.extraParam } fit /> }
            <div
                className={ `absolute top-0 right-0 z-10 p-0.5 cursor-pointer transition-opacity duration-100 ${ isFav ? 'opacity-100' : 'opacity-0 group-hover/tile:opacity-100' }` }
                onClick={ e =>
@@ -0,0 +1,36 @@
+import { FC, useEffect } from 'react';
+import { SanitizeHtml } from '../../../../../api';
+import { CatalogLayoutProps } from './CatalogLayout.types';
+
+// Info/landing layout: a logo box on top (image scaled to fit the available
+// space, no crop) and a smaller box below with the page text in black.
+// Logo = page headline image (getImage(0)), text = page text 1 (getText(0)),
+// set from catalog admin (Gestione -> Modifica pagina). Hides the (empty)
+// navigation sidebar so the content uses the full width.
+export const CatalogLayoutBcInfoView: FC<CatalogLayoutProps> = props =>
+{
+    const { page = null, hideNavigation = null } = props;
+
+    const logo = page?.localization?.getImage(0) || '';
+    const text = page?.localization?.getText(0) || '';
+
+    useEffect(() =>
+    {
+        hideNavigation?.();
+    }, [ page, hideNavigation ]);
+
+    return (
+        <div className="flex flex-col h-full gap-2">
+            <div className="flex-1 min-h-0 bg-white rounded border border-card-grid-item-border overflow-hidden flex items-center justify-center">
+                { logo
+                    ? <img alt="" className="max-w-full max-h-full object-contain" src={ logo } />
+                    : <span className="text-muted text-[11px]">Logo — imposta l'immagine headline da Gestione</span> }
+            </div>
+            <div className="shrink-0 max-h-[32%] bg-white rounded border border-card-grid-item-border p-3 overflow-auto">
+                <div
+                    className="text-black text-[12px] leading-snug"
+                    dangerouslySetInnerHTML={ { __html: SanitizeHtml(text) } } />
+            </div>
+        </div>
+    );
+};
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { FaEdit, FaPlus } from 'react-icons/fa';
+import { FaEdit, FaPlus, FaPowerOff, FaSyncAlt } from 'react-icons/fa';
 import { GetConfigurationValue, LocalizeText, ProductTypeEnum, SanitizeHtml } from '../../../../../api';
 import { Text } from '../../../../../common';
 import { useCatalogData } from '../../../../../hooks';
@@ -17,13 +17,12 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
 export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
 {
    const { page = null } = props;
-    const { currentOffer = null, currentPage = null } = useCatalogData();
+    const { currentOffer = null, currentPage = null, roomPreviewer = null } = useCatalogData();
    const catalogAdmin = useCatalogAdmin();
    const adminMode = catalogAdmin?.adminMode ?? false;

    return (
        <div className="nitro-catalog-classic-default-layout flex flex-col h-full gap-2">
-            { /* Admin: quick actions */ }
            { adminMode && !catalogAdmin.editingPageData &&
                <div className="flex gap-2 nitro-catalog-classic-default-admin">
                    <button
@@ -42,23 +41,24 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                        <FaPlus className="text-[10px]" /> { LocalizeText('catalog.admin.offer.new') }
                    </button>
                </div> }
-
-            { /* Product detail card */ }
            { currentOffer &&
-                <div className="nitro-catalog-classic-offer-panel flex gap-0 overflow-hidden">
-                    { /* Preview area */ }
+                <div className="nitro-catalog-classic-offer-panel flex gap-0 shrink-0">
                    <div className="nitro-catalog-classic-offer-preview relative flex items-center justify-center">
                        { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
                            <>
+                                <button className="nitro-catalog-classic-preview-btn nitro-catalog-classic-preview-rotate" onClick={ () => roomPreviewer?.changeRoomObjectDirection() }>
+                                    <FaSyncAlt /> Rotate
+                                </button>
+                                <button className="nitro-catalog-classic-preview-btn nitro-catalog-classic-preview-state" onClick={ () => roomPreviewer?.changeRoomObjectState() }>
+                                    <FaPowerOff /> Toggle State
+                                </button>
                                <CatalogViewProductWidgetView />
                                <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 right-1 absolute" />
                            </> }
                        { (currentOffer.product.productType === ProductTypeEnum.BADGE) &&
                            <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                    </div>
-                    { /* Product info + purchase */ }
                    <div className="nitro-catalog-classic-offer-info flex flex-col flex-1 min-w-0 gap-2">
-                        { /* Title row */ }
                        <div>
                            <div className="flex items-start justify-between gap-2">
                                <Text className="text-[13px]! font-bold text-dark leading-tight">{ currentOffer.localizationName }</Text>
@@ -77,30 +77,25 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                                </div> }
                            <CatalogLimitedItemWidgetView />
                        </div>
-                        { /* Price */ }
                        <CatalogTotalPriceWidget />
-                        { /* Spinner */ }
                        <CatalogSpinnerWidgetView />
-                        { /* Actions */ }
-                        <div className="flex gap-1.5 mt-auto">
+                        <div className="nitro-catalog-classic-offer-actions flex gap-1.5">
                            <CatalogPurchaseWidgetView />
                        </div>
                    </div>
                </div> }

-            { /* Welcome/description card */ }
            { !currentOffer &&
-                <div className="nitro-catalog-classic-welcome flex items-center gap-3">
+                <div className="nitro-catalog-classic-welcome flex items-center gap-3 shrink-0">
                    { !!page.localization.getImage(1) &&
                        <img className="w-[70px] h-[70px] object-contain rounded shrink-0" src={ page.localization.getImage(1) } /> }
                    <Text className="text-[11px]! text-muted" dangerouslySetInnerHTML={ { __html: SanitizeHtml(page.localization.getText(0)) } } />
                </div> }

-            { /* Item grid */ }
            <div className="nitro-catalog-classic-grid-shell flex-1 overflow-auto min-h-0">
                { GetConfigurationValue('catalog.headers') &&
                    <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) } /> }
-                <CatalogItemGridWidgetView className="nitro-catalog-classic-grid" columnCount={ 7 } columnMinHeight={ 50 } columnMinWidth={ 50 } />
+                <CatalogItemGridWidgetView className="nitro-catalog-classic-grid" columnCount={ 7 } columnMinHeight={ currentPage.layoutCode === 'bots' ? 65 : 50 } columnMinWidth={ currentPage.layoutCode === 'bots' ? 65 : 50 } />
            </div>
        </div>
    );
@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
 import { useNitroQuery } from '../../../../../api/nitro-query';
 import { Button, Column, Text } from '../../../../../common';
-import { useCatalogUiState, useNavigator, useRoomPromote } from '../../../../../hooks';
+import { useCatalogUiState, useNavigatorData, useRoomPromote } from '../../../../../hooks';
 import { NitroInput } from '../../../../../layout';
 import { CatalogLayoutProps } from './CatalogLayout.types';

@@ -17,7 +17,7 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
    const [ roomId, setRoomId ] = useState<number>(-1);
    const [ extended, setExtended ] = useState<boolean>(false);
    const [ categoryId, setCategoryId ] = useState<number>(1);
-    const { categories = null } = useNavigator();
+    const { categories } = useNavigatorData();
    const { setIsVisible = null } = useCatalogUiState();
    const { promoteInformation, isExtended, setIsExtended } = useRoomPromote();

@@ -58,9 +58,11 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
                    </button>
                </div> }

-            { /* Selected trophy card */ }
+            { /* Selected trophy card. shrink-0 + no overflow-hidden so the
+                 Buy button stays inside the panel even when the grid below
+                 holds many trophies. */ }
            { currentOffer
-                ? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 overflow-hidden" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
+                ? <div className="flex gap-0 bg-white rounded border-2 border-warning/40 shrink-0" style={ { boxShadow: '0 0 8px rgba(255,193,7,0.15)' } }>
                    { /* Preview */ }
                    <div className="w-[120px] min-w-[120px] relative flex items-center justify-center border-r-2 border-warning/30" style={ { background: 'linear-gradient(180deg, #fff9e6 0%, #fff3cc 100%)' } }>
                        { (currentOffer.product.productType !== ProductTypeEnum.BADGE)
@@ -90,7 +92,7 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
                        <CatalogTotalPriceWidget />
                        { !canPurchase &&
                            <span className="text-[9px] text-warning italic">{ LocalizeText('catalog.trophies.write.hint') }</span> }
-                        <div className="flex gap-1.5 mt-auto">
+                        <div className="flex gap-1.5">
                            <CatalogPurchaseWidgetView />
                        </div>
                    </div>
@@ -1,6 +1,7 @@
 import { ICatalogPage } from '../../../../../api';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 import { CatalogLayoutBadgeDisplayView } from './CatalogLayoutBadgeDisplayView';
+import { CatalogLayoutBcInfoView } from './CatalogLayoutBcInfoView';
 import { CatalogLayoutBuildersClubBuyView } from './CatalogLayoutBuildersClubBuyView';
 import { CatalogLayoutColorGroupingView } from './CatalogLayoutColorGroupingView';
 import { CatalogLayoutCustomPrefixView } from './CatalogLayoutCustomPrefixView';
@@ -34,6 +35,8 @@ export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void)
    {
        case 'frontpage_featured':
            return null;
+        case 'info_duckets':
+            return <CatalogLayoutBcInfoView { ...layoutProps } />;
        case 'frontpage4':
            return <CatalogLayoutFrontpage4View { ...layoutProps } />;
        case 'pets':
@@ -240,7 +240,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
                return <Button variant="danger">{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</Button>;
            case CatalogPurchaseState.NONE:
            default:
-                return <Button disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
+                return <Button variant="success" disabled={ (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length)) } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('catalog.purchase_confirmation.' + (currentOffer.isRentOffer ? 'rent' : 'buy')) }</Button>;
        }
    };

--- a/Show More
+++ b/Show More