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

This commit is contained in:
duckietm
2026-05-29 11:30:17 +02:00
parent fbcda88cd3
commit d0c11f047a
19 changed files with 680 additions and 488 deletions
+15 -6
View File
@@ -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>