@rpg-engine/long-bow 0.8.160 → 0.8.162

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.160",
+  "version": "0.8.162",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Marketplace/BlueprintSearchModal.tsx

@@ -6,6 +6,7 @@ import {
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
+import { SortVertical } from 'pixelarticons/react/SortVertical';
 import styled, { keyframes } from 'styled-components';
 import { Dropdown } from '../Dropdown';
 import { IOptionsProps } from '../Dropdown';
@@ -67,6 +68,7 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
   const [searchName, setSearchName] = useState('');
   const [selectedType, setSelectedType] = useState('');
   const [selectedSubType, setSelectedSubType] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
 
   const searchNameRef = useRef(searchName);
   const selectedTypeRef = useRef(selectedType);
@@ -154,22 +156,32 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
               onFocus={disableHotkeys}
               onBlur={enableHotkeys}
             />
+            <FilterButton
+              type="button"
+              $active={showFilters}
+              onPointerDown={() => setShowFilters(v => !v)}
+              aria-label="Toggle filters"
+            >
+              <SortVertical width={16} height={16} />
+            </FilterButton>
           </InputWrapper>
 
-          <FiltersRow>
-            <StyledDropdown
-              key={`type-${selectedType}`}
-              options={typeOptions}
-              onChange={handleTypeChange}
-              width="100%"
-            />
-            <StyledDropdown
-              key={`subtype-${selectedSubType}`}
-              options={subTypeOptions}
-              onChange={handleSubTypeChange}
-              width="100%"
-            />
-          </FiltersRow>
+          {showFilters && (
+            <FiltersRow>
+              <StyledDropdown
+                key={`type-${selectedType}`}
+                options={typeOptions}
+                onChange={handleTypeChange}
+                width="100%"
+              />
+              <StyledDropdown
+                key={`subtype-${selectedSubType}`}
+                options={subTypeOptions}
+                onChange={handleSubTypeChange}
+                width="100%"
+              />
+            </FiltersRow>
+          )}
 
           <ResultsWrapper>
             {blueprints.length === 0 && !isLoading ? (
@@ -191,14 +203,13 @@ export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
             )}
           </ResultsWrapper>
 
-          <PagerContainer>
-            <Pager
-              totalItems={totalCount}
-              currentPage={currentPage}
-              itemsPerPage={BLUEPRINTS_PER_PAGE}
-              onPageChange={handlePageChange}
-            />
-          </PagerContainer>
+          <Pager
+            compact
+            totalItems={totalCount}
+            currentPage={currentPage}
+            itemsPerPage={BLUEPRINTS_PER_PAGE}
+            onPageChange={handlePageChange}
+          />
         </ModalContent>
       </ModalContainer>
     </ModalPortal>
@@ -229,11 +240,21 @@ const ModalContent = styled.div`
   padding: 20px 24px;
   width: 600px;
   max-width: 90%;
+  max-height: 90dvh;
   display: flex;
   flex-direction: column;
   gap: 12px;
+  overflow: hidden;
   pointer-events: auto;
   animation: ${scaleIn} 0.15s ease-out;
+
+  @media (max-width: 950px) {
+    max-width: 96%;
+    max-height: 95dvh;
+    min-height: 75dvh;
+    padding: 14px 16px;
+    gap: 8px;
+  }
 `;
 
 const Header = styled.div`
@@ -288,6 +309,26 @@ const StyledInput = styled(Input)`
   flex: 1;
 `;
 
+const FilterButton = styled.button<{ $active: boolean }>`
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 1px solid ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.55)' : 'rgba(255, 255, 255, 0.08)')};
+  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.14)' : 'rgba(255, 255, 255, 0.03)')};
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#ccc')};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+
+  &:hover {
+    color: #f59e0b;
+    border-color: rgba(245, 158, 11, 0.45);
+  }
+`;
+
 const FiltersRow = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -302,7 +343,10 @@ const StyledDropdown = styled(Dropdown)`
 const ResultsWrapper = styled.div`
   position: relative;
   overflow-y: auto;
-  height: 320px;
+  flex: 1;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
   background: rgba(0, 0, 0, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
@@ -333,17 +377,12 @@ const EmptyState = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
+  flex: 1;
   font-size: 0.55rem;
   color: #666;
   text-transform: uppercase;
   letter-spacing: 1px;
 `;
 
-const PagerContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
 
 export { BLUEPRINTS_PER_PAGE };

package/src/components/Marketplace/BlueprintTable.tsx

@@ -42,9 +42,9 @@ export const BlueprintTable: React.FC<IBlueprintTableProps> = ({
               atlasJSON={atlasJSON}
               atlasIMG={atlasIMG}
               spriteKey={blueprint.texturePath || blueprint.key}
-              width={32}
-              height={32}
-              imgScale={2}
+              width={24}
+              height={24}
+              imgScale={1.5}
               centered
             />
           </SpriteWrapper>
@@ -74,23 +74,31 @@ export const BlueprintTable: React.FC<IBlueprintTableProps> = ({
 
 const tableRowBase = `
   display: grid;
-  grid-template-columns: 40px 1fr 120px 50px;
+  grid-template-columns: 28px 1fr 100px 40px;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
+  gap: 6px;
+  padding: 3px 8px;
+`;
+
+const mobileRowOverride = `
+  @media (max-width: 600px) {
+    padding: 1px 6px;
+    gap: 4px;
+  }
 `;
 
 const ResultsHeader = styled.div`
   ${tableRowBase}
+  ${mobileRowOverride}
   background: rgba(0, 0, 0, 0.4);
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   position: sticky;
   top: 0;
   z-index: 1;
 
-  > * {
-    font-size: 0.45rem;
-    color: #888;
+  && > * {
+    font-size: 0.48rem !important;
+    color: #555 !important;
     text-transform: uppercase;
     letter-spacing: 1px;
   }
@@ -98,6 +106,7 @@ const ResultsHeader = styled.div`
 
 const ResultRow = styled.div<{ $selectable: boolean }>`
   ${tableRowBase}
+  ${mobileRowOverride}
   border-bottom: 1px solid rgba(255, 255, 255, 0.04);
   cursor: ${p => p.$selectable ? 'pointer' : 'default'};
   transition: background 0.1s;
@@ -115,8 +124,8 @@ const SpriteWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 32px;
+  width: 28px;
+  height: 24px;
 `;
 
 const ColName = styled.div`
@@ -127,16 +136,16 @@ const ColName = styled.div`
 `;
 
 const BlueprintName = styled.span`
-  font-size: 0.5rem;
-  color: #ddd;
+  font-size: 0.6rem !important;
+  color: #e5e7eb !important;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 `;
 
 const BlueprintMeta = styled.span`
-  font-size: 0.4rem;
-  color: #666;
+  font-size: 0.5rem !important;
+  color: #f59e0b !important;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -149,17 +158,17 @@ const ColType = styled.div`
 `;
 
 const TypeText = styled.span`
-  font-size: 0.45rem;
-  color: #aaa;
+  font-size: 0.52rem !important;
+  color: #9ca3af !important;
 `;
 
 const SubTypeText = styled.span`
-  font-size: 0.4rem;
-  color: #666;
+  font-size: 0.46rem !important;
+  color: #f59e0b !important;
 `;
 
 const ColTier = styled.div`
-  font-size: 0.5rem;
-  color: #f59e0b;
+  font-size: 0.6rem !important;
+  color: #f59e0b !important;
   text-align: center;
 `;

package/src/components/Marketplace/BuyOrderRows.tsx

@@ -3,6 +3,7 @@ import { Delete } from 'pixelarticons/react/Delete';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React from 'react';
 import styled from 'styled-components';
+import { GroupedRowContainer } from './GroupedRowContainer';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
 import { resolveAtlasSpriteKey } from '../../utils/atlasUtils';
@@ -129,15 +130,6 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
                 {requestTagLabel}
               </LabelPill>
             )}
-            {buyOrder.itemRarity && (
-              <LabelPill
-                background={rarityGlow ?? 'rgba(255,255,255,0.1)'}
-                borderColor="rgba(255,255,255,0.08)"
-                color="#fff"
-              >
-                {buyOrder.itemRarity}
-              </LabelPill>
-            )}
             {isOwn && (
               <LabelPill
                 background={STATUS_COLORS[buyOrder.status]}
@@ -148,13 +140,15 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
               </LabelPill>
             )}
             {timeRemaining && (
-              <LabelPill
-                background="rgba(255,255,255,0.08)"
-                borderColor="rgba(255,255,255,0.08)"
-                color="#fff"
-              >
-                {timeRemaining}
-              </LabelPill>
+              <SimpleTooltip content="Expires in" direction="top">
+                <LabelPill
+                  background="rgba(255,255,255,0.08)"
+                  borderColor="rgba(255,255,255,0.08)"
+                  color="#fff"
+                >
+                  {timeRemaining}
+                </LabelPill>
+              </SimpleTooltip>
             )}
           </MetaRow>
         </ItemDetails>
@@ -185,6 +179,49 @@ export const BuyOrderRow: React.FC<IBuyOrderRowProps> = ({
   );
 };
 
+export interface IGroupedBuyOrderRowProps {
+  bestOrder: IMarketplaceBuyOrderItem;
+  otherOrders: IMarketplaceBuyOrderItem[];
+  atlasJSON?: any;
+  atlasIMG?: any;
+  isOwn?: boolean;
+  onCancel?: (buyOrderId: string) => void;
+  onFulfill?: (buyOrderId: string) => void;
+  showRequestTag?: boolean;
+}
+
+export const GroupedBuyOrderRow: React.FC<IGroupedBuyOrderRowProps> = ({
+  bestOrder,
+  otherOrders,
+  atlasJSON,
+  atlasIMG,
+  isOwn,
+  onCancel,
+  onFulfill,
+  showRequestTag,
+}) => {
+  const makeRow = (order: IMarketplaceBuyOrderItem) => (
+    <BuyOrderRow
+      key={order._id}
+      buyOrder={order}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      isOwn={isOwn}
+      onCancel={onCancel}
+      onFulfill={onFulfill}
+      showRequestTag={showRequestTag}
+    />
+  );
+
+  return (
+    <GroupedRowContainer
+      mainRow={makeRow(bestOrder)}
+      subRows={otherOrders.map(makeRow)}
+      badgeLabel="requests"
+    />
+  );
+};
+
 // ── Styled components matching MarketplaceRows layout ──
 
 const RowWrapper = styled.div`