🆙 Complete rebuild of toolbar / catalog / inventory make it 100% mobile friendly Take #1

src/components/inventory/InventoryView.tsx

@@ -1,5 +1,6 @@
 import { AddLinkEventTracker, BadgePointLimitsEvent, GetLocalizationManager, GetRoomEngine, ILinkEventTracker, IRoomSession, RemoveLinkEventTracker, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useState } from 'react';
+import { FC, ReactNode, useEffect, useState } from 'react';
+import { FaAward, FaCouch, FaPaw, FaRobot, FaTag } from 'react-icons/fa';
 import { GroupItem, LocalizeText, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
 import { NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useInventoryBadges, useInventoryFurni, useInventoryPrefixes, useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useNitroEvent } from '../../hooks';
@@ -19,6 +20,13 @@ const TAB_BADGES: string = 'inventory.badges';
 const TAB_PREFIXES: string = 'inventory.prefixes';
 const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_PREFIXES, TAB_BOTS ];
 const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.PET, UnseenItemCategory.BADGE, UnseenItemCategory.PREFIX, UnseenItemCategory.BOT ];
+const TAB_ICONS: Record<string, ReactNode> = {
+    [TAB_FURNITURE]: <FaCouch />,
+    [TAB_PETS]: <FaPaw />,
+    [TAB_BADGES]: <FaAward />,
+    [TAB_PREFIXES]: <FaTag />,
+    [TAB_BOTS]: <FaRobot />
+};
 
 export const InventoryView: FC<{}> = props =>
 {
@@ -129,13 +137,13 @@ export const InventoryView: FC<{}> = props =>
 
     return (
         <>
-            <NitroCardView className="w-[528px] h-[420px] min-w-[528px] min-h-[420px]" uniqueKey="inventory">
+            <NitroCardView className="nitro-inventory-window w-[528px] h-[420px] min-w-[528px] min-h-[420px]" uniqueKey="inventory">
                 <NitroCardHeaderView
                     headerText={ LocalizeText('inventory.title') }
                     onCloseClick={ onClose } />
                 { !isTrading &&
                     <>
-                        <NitroCardTabsView>
+                        <NitroCardTabsView classNames={ [ 'nitro-inventory-tabs-shell' ] }>
                             { TABS.map((name, index) =>
                             {
                                 return (
@@ -144,12 +152,13 @@ export const InventoryView: FC<{}> = props =>
                                         count={ getCount(UNSEEN_CATEGORIES[index]) }
                                         isActive={ (currentTab === name) }
                                         onClick={ event => setCurrentTab(name) }>
-                                        { LocalizeText(name) }
+                                        <span className="nitro-inventory-tab-icon" title={ LocalizeText(name) }>{ TAB_ICONS[name] }</span>
+                                        <span className="nitro-inventory-tab-label">{ LocalizeText(name) }</span>
                                     </NitroCardTabsItemView>
                                 );
                             }) }
                         </NitroCardTabsView>
-                        <div className="flex flex-col overflow-hidden bg-[#DFDFDF] p-2 h-full gap-2">
+                        <div className="nitro-inventory-body flex flex-col overflow-hidden p-2 h-full gap-2">
                             { showFilter &&
                                 <InventoryCategoryFilterView
                                     badgeCodes={ badgeCodes }
@@ -175,7 +184,7 @@ export const InventoryView: FC<{}> = props =>
                         </div>
                     </> }
                 { isTrading &&
-                    <div className="flex flex-col overflow-hidden bg-[#DFDFDF] p-2 h-full">
+                    <div className="nitro-inventory-body flex flex-col overflow-hidden p-2 h-full">
                         <InventoryTradeView cancelTrade={ onClose } />
                     </div> }
             </NitroCardView>

src/components/inventory/views/InventoryCategoryFilterView.tsx

@@ -87,7 +87,7 @@ export const InventoryCategoryFilterView: FC<InventoryCategoryFilterViewProps> =
 
     return (
         <div
-            className="flex gap-1 rounded p-1 bg-[#C9C9C9] shrink-0"
+            className="nitro-inventory-filter-bar flex gap-1 rounded p-1 shrink-0"
             style={ { width: currentTab === TAB_BADGES ? '320px' : '100%' } }>
             <div className="relative flex flex-1 items-center">
                 <NitroInput

src/components/inventory/views/bot/InventoryBotView.tsx

@@ -69,8 +69,10 @@ export const InventoryBotView: FC<{
             <div className="flex flex-col col-span-7 gap-1 overflow-hidden">
                 <InfiniteGrid<IBotItem>
                     columnCount={ 4 }
+                    estimateSize={ 110 }
                     itemRender={ item => <InventoryBotItemView botItem={ item } /> }
-                    items={ botItems } />
+                    items={ botItems }
+                    rowGap={ 4 } />
             </div>
             <div className="flex flex-col col-span-5">
                 <div className="relative flex flex-col">
@@ -80,7 +82,7 @@ export const InventoryBotView: FC<{
                         <div className="flex flex-col justify-between gap-2 grow">
                             <span className="truncate grow">{ selectedBot.botData.name }</span>
                             { !!roomSession &&
-                                <NitroButton onClick={ event => attemptBotPlacement(selectedBot) }>
+                                <NitroButton className="nitro-inventory-btn-place" onClick={ event => attemptBotPlacement(selectedBot) }>
                                     { LocalizeText('inventory.furni.placetoroom') }
                                 </NitroButton> }
                         </div> }

src/components/inventory/views/furniture/InventoryFurnitureView.tsx

@@ -147,11 +147,11 @@ export const InventoryFurnitureView: FC<{
                             <span className="text-xs truncate">{ selectedItem.description }</span> }
                         <div className="flex flex-col gap-1">
                             { !!roomSession &&
-                                <NitroButton onClick={ event => attemptItemPlacement(selectedItem) }>
+                                <NitroButton className="nitro-inventory-btn-place" onClick={ event => attemptItemPlacement(selectedItem) }>
                                     { LocalizeText('inventory.furni.placetoroom') }
                                 </NitroButton> }
                             { selectedItem.isSellable &&
-                                <NitroButton onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
+                                <NitroButton className="nitro-inventory-btn-sell" onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
                                     { LocalizeText('inventory.marketplace.sell') }
                                 </NitroButton> }
                         </div>

src/components/inventory/views/pet/InventoryPetView.tsx

@@ -84,6 +84,8 @@ export const InventoryPetView: FC<{
             <div className="flex flex-col col-span-7 gap-1 overflow-hidden">
                 <InfiniteGrid<IPetItem>
                     columnCount={ 6 }
+                    estimateSize={ 46 }
+                    itemMinWidth={ 46 }
                     itemRender={ item => <InventoryPetItemView petItem={ item } /> }
                     items={ petItems } />
             </div>
@@ -101,7 +103,7 @@ export const InventoryPetView: FC<{
                         <div className="flex flex-col justify-between gap-2 grow">
                             <span className="text-sm truncate grow">{ selectedPet.petData.name }</span>
                             { !!roomSession &&
-                                <NitroButton onClick={ event => attemptPetPlacement(selectedPet) }>
+                                <NitroButton className="nitro-inventory-btn-place" onClick={ event => attemptPetPlacement(selectedPet) }>
                                     { LocalizeText('inventory.furni.placetoroom') }
                                 </NitroButton> }
                         </div> }