@rpg-engine/long-bow 0.8.161 → 0.8.162

package/src/components/Store/Store.tsx

@@ -1,11 +1,15 @@
 import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
+import { Box } from 'pixelarticons/react/Box';
+import { Crown } from 'pixelarticons/react/Crown';
+import { Gift } from 'pixelarticons/react/Gift';
+import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { ReactNode, useMemo, useState } from 'react';
 import { FaHistory, FaShoppingCart, FaWallet } from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
-import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { Tabs } from '../shared/Tabs';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { CartView } from './CartView';
 import { useStoreCart } from './hooks/useStoreCart';
@@ -159,10 +163,11 @@ export const Store: React.FC<IStoreProps> = ({
   const tabIds: TabId[] = tabOrder ?? ['premium', 'packs', 'items'];
   const availableTabIds: TabId[] = tabIds.filter(id => !(hidePremiumTab && id === 'premium'));
 
-  const tabsMap: Record<string, { id: TabId; title: string; content: ReactNode }> = {
+  const tabsMap: Record<string, { id: TabId; title: string; icon: ReactNode; content: ReactNode }> = {
     premium: {
       id: 'premium',
       title: 'Premium',
+      icon: <Crown width={18} height={18} />,
       content: (
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
@@ -176,6 +181,7 @@ export const Store: React.FC<IStoreProps> = ({
     packs: {
       id: 'packs',
       title: packsTabLabel,
+      icon: <Gift width={18} height={18} />,
       content: customPacksContent ?? (
         <StorePacksSection
           packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
@@ -189,6 +195,7 @@ export const Store: React.FC<IStoreProps> = ({
     items: {
       id: 'items',
       title: 'Items',
+      icon: <Box width={18} height={18} />,
       content: (
         <StoreItemsSection
           items={filteredItems.items}
@@ -203,12 +210,11 @@ export const Store: React.FC<IStoreProps> = ({
     wallet: {
       id: 'wallet',
       title: 'Wallet',
+      icon: <Wallet width={18} height={18} />,
       content: customWalletContent ?? null,
     },
   };
 
-  const tabs = availableTabIds.map(id => tabsMap[id]);
-
   return (
     <DraggableContainer
       title="Store"
@@ -276,16 +282,14 @@ export const Store: React.FC<IStoreProps> = ({
             </CartButton>
           </TopBar>
           <MainContent>
-            <InternalTabs
-              tabs={tabs}
-              activeTextColor="#000000"
-              activeColor="#fef08a"
-              inactiveColor="#6b7280"
-              borderColor="#f59e0b"
-              hoverColor="#fef3c7"
-              activeTab={activeTab}
-              onTabChange={(tabId: string) => setActiveTab(tabId as TabId)}
+            <Tabs
+              options={availableTabIds.map(id => ({ id, label: tabsMap[id].title, icon: tabsMap[id].icon }))}
+              activeTabId={activeTab}
+              onTabChange={(tabId) => setActiveTab(tabId as TabId)}
             />
+            <TabContent>
+              {tabsMap[activeTab]?.content}
+            </TabContent>
           </MainContent>
           {cartItems.length > 0 && (
             <Footer>
@@ -349,12 +353,12 @@ const MainContent = styled.div`
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
+`;
 
-  .rpgui-tabs-content {
-    flex: 1;
-    overflow-y: auto;
-    padding-right: 0.5rem;
-  }
+const TabContent = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  padding-right: 0.5rem;
 `;
 
 const Footer = styled.div`

package/src/components/Store/StoreItemRow.tsx

@@ -4,6 +4,7 @@ import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { SelectArrow } from '../Arrow/SelectArrow';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { ItemRowWrapper } from '../shared/ItemRowWrapper';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { useQuantityControl } from '../../hooks/useQuantityControl';
 
@@ -56,27 +57,29 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
   };
 
   return (
-    <ItemWrapper $isHighlighted={item.store?.isHighlighted || false}>
-      <ItemIconContainer>
-        <SpriteFromAtlas
-          atlasJSON={atlasJSON}
-          atlasIMG={atlasIMG}
-          spriteKey={item.texturePath}
-          width={32}
-          height={32}
-          imgScale={2}
-          centered
-        />
-      </ItemIconContainer>
-
-      <ItemDetails>
-        <ItemName>{item.name}</ItemName>
-        <ItemPrice>
-          ${item.price}
-          {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
-        </ItemPrice>
-        <ItemDescription>{item.description}</ItemDescription>
-      </ItemDetails>
+    <ItemRowWrapper $isHighlighted={item.store?.isHighlighted || false}>
+      <LeftSection>
+        <ItemIconContainer>
+          <SpriteFromAtlas
+            atlasJSON={atlasJSON}
+            atlasIMG={atlasIMG}
+            spriteKey={item.texturePath}
+            width={32}
+            height={32}
+            imgScale={2}
+            centered
+          />
+        </ItemIconContainer>
+
+        <ItemDetails>
+          <ItemName>{item.name}</ItemName>
+          <ItemPrice>
+            ${item.price}
+            {(item as any).dcPrice ? ` · ${((item as any).dcPrice as number).toLocaleString()} DC` : ''}
+          </ItemPrice>
+          <ItemDescription>{item.description}</ItemDescription>
+        </ItemDetails>
+      </LeftSection>
 
       <Controls>
         {/* Show text input if configured, else show arrows only for stackable items */}
@@ -121,24 +124,16 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
           disabled={!hasRequiredAccount}
         />
       </Controls>
-    </ItemWrapper>
+    </ItemRowWrapper>
   );
 };
 
-const ItemWrapper = styled.div<{ $isHighlighted: boolean }>`
+const LeftSection = styled.div`
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  background: ${props =>
-    props.$isHighlighted ? 'rgba(255, 215, 0, 0.1)' : 'transparent'};
-  border-left: ${props =>
-    props.$isHighlighted ? '3px solid #ffd700' : '3px solid transparent'};
-
-  &:last-child {
-    border-bottom: none;
-  }
+  flex: 1;
+  min-width: 0;
 `;
 
 const ItemIconContainer = styled.div`

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
 import { StoreItemRow } from '../StoreItemRow';
-import { Dropdown } from '../../Dropdown';
+import { SegmentedToggle } from '../../shared/SegmentedToggle';
 import { SearchBar } from '../../shared/SearchBar/SearchBar';
 import { useStoreFiltering } from '../../../hooks/useStoreFiltering';
 
@@ -37,6 +37,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   const {
     searchQuery,
     setSearchQuery,
+    selectedCategory,
     setSelectedCategory,
     categoryOptions,
     filteredItems,
@@ -93,13 +94,11 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
             placeholder="Search items..."
           />
         </SearchBarContainer>
-        <DropdownContainer>
-          <Dropdown
-            options={categoryOptions}
-            onChange={value => setSelectedCategory(value as ItemType | 'all')}
-            width="100%"
-          />
-        </DropdownContainer>
+        <SegmentedToggle
+          options={categoryOptions.map(opt => ({ id: opt.value, label: opt.option }))}
+          activeId={selectedCategory}
+          onChange={id => setSelectedCategory(id as ItemType | 'all')}
+        />
       </SearchHeader>
 
       <ScrollableContent
@@ -130,8 +129,3 @@ const SearchHeader = styled.div`
 const SearchBarContainer = styled.div`
   flex: 0.75;
 `;
-
-const DropdownContainer = styled.div`
-  flex: 0.25;
-  min-width: 140px;
-`;

package/src/components/Store/sections/StorePacksSection.tsx

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
+import { ItemRowWrapper } from '../../shared/ItemRowWrapper';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
@@ -43,15 +44,17 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   const renderPack = useCallback(
     (pack: IItemPack) => (
       <PackRow key={pack.key} onClick={() => onSelectPack?.(pack)}>
-        <PackIconContainer>
-          {renderPackIcon(pack)}
-        </PackIconContainer>
-
-        <PackDetails>
-          <PackName>{pack.title}</PackName>
-          <PackPrice>${pack.priceUSD}</PackPrice>
-          {pack.description && <PackDescription>{pack.description}</PackDescription>}
-        </PackDetails>
+        <LeftSection>
+          <PackIconContainer>
+            {renderPackIcon(pack)}
+          </PackIconContainer>
+
+          <PackDetails>
+            <PackName>{pack.title}</PackName>
+            <PackPrice>${pack.priceUSD}</PackPrice>
+            {pack.description && <PackDescription>{pack.description}</PackDescription>}
+          </PackDetails>
+        </LeftSection>
 
         <Controls>
           <CTAButton
@@ -84,21 +87,16 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   );
 };
 
-const PackRow = styled.div`
+const PackRow = styled(ItemRowWrapper)`
+  cursor: pointer;
+`;
+
+const LeftSection = styled.div`
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  cursor: pointer;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.04);
-  }
+  flex: 1;
+  min-width: 0;
 `;
 
 const PackIconContainer = styled.div`

package/src/components/shared/ItemRowWrapper.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const ItemRowWrapper = styled.div<{ $isHighlighted?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6rem 1rem;
+  margin-bottom: 4px;
+  background: ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.08)' : 'rgba(0, 0, 0, 0.25)'};
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  border-left: 4px solid ${p => p.$isHighlighted ? '#ffd700' : 'transparent'};
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.08);
+    border-color: rgba(245, 158, 11, 0.2);
+    border-left-color: #f59e0b;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transform: translateY(-1px);
+  }
+`;

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -43,13 +43,26 @@ const mockYourBuyOrders: IMarketplaceBuyOrderItem[] = [
 ];
 
 const mockOpenBuyOrders: IMarketplaceBuyOrderItem[] = [
+  // Abyssal Tide Staff — single request
   { _id: 'obo-1', owner: 'player-2', itemBlueprintKey: 'items/abyssal-tide-staff', itemRarity: 'Epic', maxPrice: 1500, escrowedGold: 1500, fee: 75, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  // Wooden Shield — single request
   { _id: 'obo-2', owner: 'player-3', itemBlueprintKey: 'items/wooden-shield', maxPrice: 200, escrowedGold: 200, fee: 10, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(5), updatedAt: daysAgo(5) },
-  { _id: 'obo-3', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
-  { _id: 'obo-4', owner: 'player-5', itemBlueprintKey: 'items/broad-sword', maxPrice: 350, escrowedGold: 350, fee: 17, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  // Fire Wand — 2 requests (grouped)
+  { _id: 'obo-3a', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { _id: 'obo-3b', owner: 'player-10', itemBlueprintKey: 'items/fire-wand', maxPrice: 550, escrowedGold: 550, fee: 27, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  // Broad Sword — 3 requests (grouped)
+  { _id: 'obo-4a', owner: 'player-5', itemBlueprintKey: 'items/broad-sword', maxPrice: 350, escrowedGold: 350, fee: 17, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { _id: 'obo-4b', owner: 'player-11', itemBlueprintKey: 'items/broad-sword', itemRarity: 'Rare', maxPrice: 480, escrowedGold: 480, fee: 24, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { _id: 'obo-4c', owner: 'player-12', itemBlueprintKey: 'items/broad-sword', maxPrice: 270, escrowedGold: 270, fee: 13, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  // Barbarian Helmet — single request
   { _id: 'obo-5', owner: 'player-6', itemBlueprintKey: 'items/barbarian-helmet', itemRarity: 'Uncommon', maxPrice: 600, escrowedGold: 600, fee: 30, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
-  { _id: 'obo-6', owner: 'player-7', itemBlueprintKey: 'items/leather-armor', maxPrice: 420, escrowedGold: 420, fee: 21, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
-  { _id: 'obo-7', owner: 'player-8', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Legendary', maxPrice: 5000, escrowedGold: 5000, fee: 250, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  // Leather Armor — 2 requests (grouped)
+  { _id: 'obo-6a', owner: 'player-7', itemBlueprintKey: 'items/leather-armor', maxPrice: 420, escrowedGold: 420, fee: 21, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  { _id: 'obo-6b', owner: 'player-13', itemBlueprintKey: 'items/leather-armor', itemRarity: 'Uncommon', maxPrice: 380, escrowedGold: 380, fee: 19, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  // Angelic Sword — 2 requests (grouped)
+  { _id: 'obo-7a', owner: 'player-8', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Legendary', maxPrice: 5000, escrowedGold: 5000, fee: 250, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  { _id: 'obo-7b', owner: 'player-14', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Epic', maxPrice: 3500, escrowedGold: 3500, fee: 175, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  // Greater Life Potion — single request
   { _id: 'obo-8', owner: 'player-9', itemBlueprintKey: 'items/greater-life-potion', maxPrice: 90, stackQty: 10, escrowedGold: 900, fee: 45, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
 ];
 
@@ -169,7 +182,7 @@ const Template: Story = () => {
         onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
         onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
         openBuyOrders={mockOpenBuyOrders}
-        openBuyOrdersTotal={mockOpenBuyOrders.length} // 8 items → pagination shows (page size = 5)
+        openBuyOrdersTotal={mockOpenBuyOrders.length}
         openBuyOrdersPage={1}
         onOpenBuyOrdersPageChange={(p: number) => console.log('open orders page:', p)}
         // Blueprint Search props