@rpg-engine/long-bow 0.8.160 → 0.8.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.160",
+  "version": "0.8.161",
   "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/Pager.tsx

@@ -8,6 +8,7 @@ interface PagerProps {
   currentPage: number;
   itemsPerPage: number;
   onPageChange: (page: number) => void;
+  compact?: boolean;
 }
 
 export const Pager: React.FC<PagerProps> = ({
@@ -15,13 +16,14 @@ export const Pager: React.FC<PagerProps> = ({
   currentPage,
   itemsPerPage,
   onPageChange,
+  compact = false,
 }) => {
   const totalPages = Math.ceil(totalItems / itemsPerPage);
 
   return (
     <Container>
-      <p>Total items: {totalItems}</p>
-      <PagerContainer>
+      {!compact && <p>Total items: {totalItems}</p>}
+      <PagerContainer $compact={compact}>
         <button
           disabled={currentPage === 1}
           onPointerDown={() => onPageChange(Math.max(currentPage - 1, 1))}
@@ -55,7 +57,7 @@ const Container = styled.div`
   }
 `;
 
-const PagerContainer = styled.div`
+const PagerContainer = styled.div<{ $compact: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,11 +69,17 @@ const PagerContainer = styled.div`
 
   div {
     color: white;
+    ${({ $compact }) => $compact && `
+      font-size: 0.55rem !important;
+      padding: 2px 6px !important;
+      min-width: unset !important;
+    `}
   }
 
   button {
-    width: 40px;
-    height: 40px;
+    width: ${({ $compact }) => ($compact ? '24px' : '40px')} !important;
+    height: ${({ $compact }) => ($compact ? '24px' : '40px')} !important;
+    font-size: ${({ $compact }) => ($compact ? '0.55rem' : 'inherit')} !important;
     background-color: ${uiColors.darkGray};
     border: none;
     border-radius: 5px;