feat(catalog): toggle stile catalogo classico/moderno

Aggiunge un checkbox nelle impostazioni utente per scegliere lo stile del
catalogo (classico vs moderno) + flag globale catalog.classic.style in
ui-config.json come default per tutti. Override per-utente in localStorage.

public/configuration/ui-config.example

@@ -28,6 +28,7 @@
 	"housekeeping.enabled": true,
     "toolbar.hide.quests": true,
     "show.google.ads": false,
+    "catalog.classic.style": false,
     "loginview": {
         "images": {
             "background": "${asset.url}/c_images/reception/stretch_blue.png",

src/api/utils/LocalStorageKeys.ts

@@ -4,4 +4,5 @@ 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';
 }

src/components/catalog/CatalogClassicView.tsx

@@ -3,7 +3,7 @@ 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 { useCatalogActions, useCatalogClassicStyle, 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,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
     const loading = catalogAdmin?.loading ?? false;
 
     const isMod = useHasPermission('acc_catalogfurni');
+    const [ catalogClassicStyle ] = useCatalogClassicStyle();
     const [ mobileMenuOpen, setMobileMenuOpen ] = useState(false);
     const { purse = null } = usePurse();
     const displayedCurrencies = GetConfigurationValue<number[]>('system.currency.types', []);
@@ -122,8 +123,9 @@ const CatalogClassicViewInner: FC<{}> = () =>
     return (
         <>
             { isVisible &&
-                <NitroCardView classNames={ [ 'nitro-catalog-classic-window' ] } isResizable={ false } uniqueKey="catalog">
+                <NitroCardView classNames={ [ 'nitro-catalog-classic-window', catalogClassicStyle ? 'catalog-skin-legacy' : 'catalog-skin-modern' ] } isResizable={ false } uniqueKey="catalog">
                     <NitroCardHeaderView className={ currentType === CatalogType.BUILDER ? 'builders-club-card-header' : '' } headerText={ LocalizeText('catalog.title') } onCloseClick={ () => setIsVisible(false) } style={ buildersClubHeaderStyle } />
+                    { !catalogClassicStyle &&
                     <div className="nitro-catalog-classic-mobile-header">
                         { isMod &&
                             <div className="nitro-catalog-classic-mobile-burger">
@@ -159,7 +161,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
                                 </div>
                             )) }
                         </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>

src/components/user-settings/UserSettingsView.tsx

@@ -3,7 +3,7 @@ import { FC, useEffect, useState } from 'react';
 import { FaUserCog, FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
 import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
-import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent } from '../../hooks';
+import { useCatalogClassicStyle, useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useChatWindow, useMessageEvent } from '../../hooks';
 import { classNames } from '../../layout';
 
 export const UserSettingsView: FC<{}> = props =>
@@ -13,6 +13,7 @@ export const UserSettingsView: FC<{}> = props =>
     const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
     const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
     const [ chatWindowEnabled, setChatWindowEnabled ] = useChatWindow();
+    const [ catalogClassicStyle, setCatalogClassicStyle ] = useCatalogClassicStyle();
 
     const processAction = (type: string, value?: boolean | number | string) =>
     {
@@ -156,6 +157,10 @@ export const UserSettingsView: FC<{}> = props =>
                         <input checked={ chatWindowEnabled } className="form-check-input" type="checkbox" onChange={ event => setChatWindowEnabled(event.target.checked) } />
                         <Text>Enable chat window</Text>
                     </div>
+                    <div className="flex items-center gap-1">
+                        <input checked={ catalogClassicStyle } className="form-check-input" type="checkbox" onChange={ event => setCatalogClassicStyle(event.target.checked) } />
+                        <Text>Catalogo: stile classico</Text>
+                    </div>
                 </div>
                 <div className="flex flex-col">
                     <Text bold>{ LocalizeText('widget.memenu.settings.volume') }</Text>

src/hooks/catalog/index.ts

@@ -1,4 +1,5 @@
 export * from './useCatalog';
+export * from './useCatalogClassicStyle';
 export * from './useCatalogFavorites';
 export * from './useCatalogPlaceMultipleItems';
 export * from './useCatalogSkipPurchaseConfirmation';

src/hooks/catalog/useCatalogClassicStyle.ts

@@ -0,0 +1,14 @@
+import { useBetween } from 'use-between';
+import { GetConfigurationValue, LocalStorageKeys } from '../../api';
+import { useLocalStorage } from '../useLocalStorage';
+
+// Per-user toggle for the catalog visual style.
+//  - true  => classic (old) catalog look
+//  - false => modern (rebuilt) catalog look
+// The default for users who never touched the toggle comes from the global
+// `catalog.classic.style` flag in ui-config.json, so an admin can flip the
+// default for everyone (true = classic for all, false = modern for all)
+// while still letting each user override it from the settings panel.
+const useCatalogClassicStyleState = () => useLocalStorage<boolean>(LocalStorageKeys.CATALOG_CLASSIC_STYLE, GetConfigurationValue<boolean>('catalog.classic.style', false));
+
+export const useCatalogClassicStyle = () => useBetween(useCatalogClassicStyleState);