From dc0a8f965e7fcea0b5ec5ba4083ddf0e9a3dfdca Mon Sep 17 00:00:00 2001 From: medievalshell Date: Fri, 29 May 2026 23:36:06 +0200 Subject: [PATCH] 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 | 1 + src/api/utils/LocalStorageKeys.ts | 1 + src/components/catalog/CatalogClassicView.tsx | 8 +++++--- src/components/user-settings/UserSettingsView.tsx | 7 ++++++- src/hooks/catalog/index.ts | 1 + src/hooks/catalog/useCatalogClassicStyle.ts | 14 ++++++++++++++ 6 files changed, 28 insertions(+), 4 deletions(-) create mode 100644 src/hooks/catalog/useCatalogClassicStyle.ts diff --git a/public/configuration/ui-config.example b/public/configuration/ui-config.example index e65c501..796ac12 100644 --- a/public/configuration/ui-config.example +++ b/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", diff --git a/src/api/utils/LocalStorageKeys.ts b/src/api/utils/LocalStorageKeys.ts index 847f3aa..75ecfe8 100644 --- a/src/api/utils/LocalStorageKeys.ts +++ b/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'; } diff --git a/src/components/catalog/CatalogClassicView.tsx b/src/components/catalog/CatalogClassicView.tsx index 1ee04f2..7153c22 100644 --- a/src/components/catalog/CatalogClassicView.tsx +++ b/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('system.currency.types', []); @@ -122,8 +123,9 @@ const CatalogClassicViewInner: FC<{}> = () => return ( <> { isVisible && - + setIsVisible(false) } style={ buildersClubHeaderStyle } /> + { !catalogClassicStyle &&
{ isMod &&
@@ -159,7 +161,7 @@ const CatalogClassicViewInner: FC<{}> = () =>
)) }
- + } { adminMode &&
Admin Mode diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx index 8857e1a..999ac3b 100644 --- a/src/components/user-settings/UserSettingsView.tsx +++ b/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 => setChatWindowEnabled(event.target.checked) } /> Enable chat window
+
+ setCatalogClassicStyle(event.target.checked) } /> + Catalogo: stile classico +
{ LocalizeText('widget.memenu.settings.volume') } diff --git a/src/hooks/catalog/index.ts b/src/hooks/catalog/index.ts index 2a817fa..1b4b9bc 100644 --- a/src/hooks/catalog/index.ts +++ b/src/hooks/catalog/index.ts @@ -1,4 +1,5 @@ export * from './useCatalog'; +export * from './useCatalogClassicStyle'; export * from './useCatalogFavorites'; export * from './useCatalogPlaceMultipleItems'; export * from './useCatalogSkipPurchaseConfirmation'; diff --git a/src/hooks/catalog/useCatalogClassicStyle.ts b/src/hooks/catalog/useCatalogClassicStyle.ts new file mode 100644 index 0000000..a239a60 --- /dev/null +++ b/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(LocalStorageKeys.CATALOG_CLASSIC_STYLE, GetConfigurationValue('catalog.classic.style', false)); + +export const useCatalogClassicStyle = () => useBetween(useCatalogClassicStyleState);