Add emulator stats dashboard and refresh classic UI views

src/components/catalog/views/navigation/CatalogBreadcrumbView.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { FaChevronRight, FaHome } from 'react-icons/fa';
 import { LocalizeText } from '../../../../api';
 import { useCatalog } from '../../../../hooks';
 
@@ -10,25 +9,20 @@ export const CatalogBreadcrumbView: FC<{}> = () =>
     if(!activeNodes || activeNodes.length === 0)
     {
         return (
-            <div className="flex items-center gap-1.5 text-xs text-catalog-text-muted">
-                <FaHome className="text-[10px]" />
+            <div className="nitro-catalog-classic-breadcrumb">
                 <span>{ LocalizeText('catalog.title') }</span>
             </div>
         );
     }
 
     return (
-        <div className="flex items-center gap-1 text-[11px] text-catalog-text-muted overflow-hidden min-w-0">
-            <FaHome
-                className="text-[10px] cursor-pointer hover:text-catalog-accent transition-colors shrink-0"
-                onClick={ () => activateNode(activeNodes[0]) }
-            />
-            { activeNodes.map((node, i) => (
-                <span key={ node.pageId } className="flex items-center gap-1 min-w-0">
-                    <FaChevronRight className="text-[7px] opacity-30 shrink-0" />
+        <div className="nitro-catalog-classic-breadcrumb">
+            { activeNodes.map((node, index) => (
+                <span key={ node.pageId } className="nitro-catalog-classic-breadcrumb-segment">
+                    <span className="nitro-catalog-classic-breadcrumb-separator">&rsaquo;</span>
                     <span
-                        className={ `truncate ${ i === activeNodes.length - 1 ? 'text-catalog-text font-semibold' : 'cursor-pointer hover:text-catalog-accent transition-colors' }` }
-                        onClick={ i < activeNodes.length - 1 ? () => activateNode(node) : undefined }
+                        className={ `truncate ${ index === activeNodes.length - 1 ? 'font-semibold' : 'cursor-pointer hover:underline' }` }
+                        onClick={ index < activeNodes.length - 1 ? () => activateNode(node) : undefined }
                     >
                         { node.localization }
                     </span>

src/components/catalog/views/navigation/CatalogNavigationItemView.tsx

@@ -73,10 +73,10 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
     }, [ adminMode, node, catalogAdmin ]);
 
     return (
-        <div className={ child ? 'pl-1.5 ml-1.5 border-l-2 border-card-grid-item-border' : '' }>
+        <div className={ `nitro-catalog-classic-navigation-node ${ child ? 'is-child' : '' }` }>
             <div
                 ref={ dragRef }
-                className={ `group/nav flex items-center gap-1.5 px-1.5 py-[3px] mx-0.5 rounded cursor-pointer transition-all duration-100 text-[11px] ${ node.isActive ? 'bg-card-grid-item-active border border-card-grid-item-border-active shadow-inner1px font-bold' : 'border border-transparent hover:bg-card-grid-item-active' } ${ isDragOver ? 'ring-2 ring-primary ring-offset-1 bg-primary/10' : '' }` }
+                className={ `nitro-catalog-classic-navigation-item group/nav ${ node.isActive ? 'is-active' : '' } ${ node.isBranch ? 'is-branch' : 'is-leaf' } ${ node.isOpen ? 'is-open' : '' } ${ isDragOver ? 'is-drag-over' : '' }` }
                 draggable={ adminMode }
                 onClick={ () => activateNode(node) }
                 onDragLeave={ adminMode ? handleDragLeave : undefined }
@@ -85,13 +85,13 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
                 onDrop={ adminMode ? handleDrop : undefined }
             >
                 { adminMode &&
-                    <FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
-                <div className="w-5 h-5 flex items-center justify-center shrink-0">
+                    <FaArrowsAlt className="nitro-catalog-classic-navigation-drag text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
+                <div className="nitro-catalog-classic-navigation-icon">
                     <CatalogIconView icon={ node.iconId } />
                 </div>
-                <span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>
+                <span className="nitro-catalog-classic-navigation-label" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>
                 { adminMode &&
-                    <div className="flex items-center gap-1 opacity-0 group-hover/nav:opacity-100 transition-opacity">
+                    <div className="nitro-catalog-classic-navigation-admin flex items-center gap-1 opacity-0 group-hover/nav:opacity-100 transition-opacity">
                         <FaPlus
                             className="text-[8px] text-success hover:text-green-800"
                             title={ LocalizeText('catalog.admin.create.subpage') }
@@ -125,11 +125,11 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
                     </div> }
                 { !adminMode && node.pageId > 0 &&
                     <FaStar
-                        className={ `text-[8px] transition-all duration-100 cursor-pointer shrink-0 ${ isFav ? 'text-warning opacity-100' : 'text-muted opacity-0 group-hover/nav:opacity-100 hover:text-warning' }` }
+                        className={ `nitro-catalog-classic-navigation-favorite text-[8px] transition-all duration-100 cursor-pointer shrink-0 ${ isFav ? 'text-warning opacity-100' : 'text-muted opacity-0 group-hover/nav:opacity-100 hover:text-warning' }` }
                         onClick={ e => { e.stopPropagation(); toggleFavoritePage(node.pageId); } }
                     /> }
                 { node.isBranch &&
-                    <span className="text-[9px] text-muted shrink-0">
+                    <span className="nitro-catalog-classic-navigation-caret text-[9px] text-muted shrink-0">
                         { node.isOpen ? <FaCaretUp /> : <FaCaretDown /> }
                     </span> }
             </div>

src/components/catalog/views/navigation/CatalogNavigationView.tsx

@@ -15,7 +15,7 @@ export const CatalogNavigationView: FC<CatalogNavigationViewProps> = props =>
     const { searchResult = null } = useCatalog();
 
     return (
-        <div className="flex flex-col gap-px px-0.5 py-0.5">
+        <div className="nitro-catalog-classic-navigation-list">
             { searchResult && (searchResult.filteredNodes.length > 0) && searchResult.filteredNodes.map((n, index) =>
             {
                 return <CatalogNavigationItemView key={ index } node={ n } />;

src/components/catalog/views/page/common/CatalogGridOfferView.tsx

@@ -61,10 +61,9 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
 
     return (
         <LayoutGridItem
-            className="group/tile relative"
+            className={ `group/tile relative ${ itemActive ? 'is-active' : '' }` }
             itemActive={ itemActive }
             itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) }
-            itemImage={ iconUrl }
             itemUniqueNumber={ product.uniqueLimitedItemSeriesSize }
             itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) }
             title={ `ID: ${ product.productClassId } | Offer: ${ offer.offerId }` }
@@ -73,6 +72,8 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
             onMouseUp={ onMouseEvent }
             { ...rest }
         >
+            { 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 } /> }
             <div

src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx

@@ -22,10 +22,10 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
     const adminMode = catalogAdmin?.adminMode ?? false;
 
     return (
-        <div className="flex flex-col h-full gap-2">
+        <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">
+                <div className="flex gap-2 nitro-catalog-classic-default-admin">
                     <button
                         className="flex items-center gap-1 text-[10px] text-primary hover:text-dark transition-colors cursor-pointer"
                         onClick={ () => { catalogAdmin.setEditingPageNode(null); catalogAdmin.setEditingRootPage(false); catalogAdmin.setEditingPageData(true); } }
@@ -42,9 +42,9 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
 
             { /* Product detail card */ }
             { currentOffer &&
-                <div className="flex gap-0 bg-white rounded border-2 border-card-grid-item-border overflow-hidden">
+                <div className="nitro-catalog-classic-offer-panel flex gap-0 overflow-hidden">
                     { /* Preview area */ }
-                    <div className="w-[140px] min-w-[140px] bg-card-grid-item relative flex items-center justify-center border-r-2 border-card-grid-item-border">
+                    <div className="nitro-catalog-classic-offer-preview relative flex items-center justify-center">
                         { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
                             <>
                                 <CatalogViewProductWidgetView />
@@ -54,7 +54,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                             <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                     </div>
                     { /* Product info + purchase */ }
-                    <div className="flex flex-col flex-1 min-w-0 p-2.5 gap-2">
+                    <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">
@@ -87,17 +87,17 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
 
             { /* Welcome/description card */ }
             { !currentOffer &&
-                <div className="flex items-center gap-3 p-2.5 bg-white rounded border-2 border-card-grid-item-border">
+                <div className="nitro-catalog-classic-welcome flex items-center gap-3">
                     { !!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="flex-1 overflow-auto min-h-0">
+            <div className="nitro-catalog-classic-grid-shell flex-1 overflow-auto min-h-0">
                 { GetConfigurationValue('catalog.headers') &&
                     <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) } /> }
-                <CatalogItemGridWidgetView columnCount={ 7 } columnMinHeight={ 50 } columnMinWidth={ 50 } />
+                <CatalogItemGridWidgetView className="nitro-catalog-classic-grid" columnCount={ 7 } columnMinHeight={ 50 } columnMinWidth={ 50 } />
             </div>
         </div>
     );