@rpg-engine/long-bow 0.8.213 → 0.8.215

package/package.json

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

package/src/components/Store/Store.tsx

@@ -49,6 +49,10 @@ export interface IStoreProps {
   customHistoryContent?: React.ReactNode;
   /** When true the store renders full-screen (useful on mobile). */
   fullScreen?: boolean;
+  /** Override the DraggableContainer width (e.g. "90vw"). Defaults to "1000px". */
+  containerWidth?: string;
+  /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "auto". */
+  containerHeight?: string;
   packsBadge?: string;
   featuredItems?: IFeaturedItem[];
   onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;
@@ -110,6 +114,8 @@ export const Store: React.FC<IStoreProps> = ({
   customWalletContent,
   customHistoryContent,
   fullScreen = false,
+  containerWidth,
+  containerHeight,
   packsTabLabel = 'Packs',
   packsBadge,
   featuredItems,
@@ -404,9 +410,9 @@ export const Store: React.FC<IStoreProps> = ({
     <DraggableContainer
       title="Store"
       onCloseButton={onClose}
-      width="1000px"
+      width={containerWidth ?? "1000px"}
       minWidth="700px"
-      height="auto"
+      height={containerHeight ?? "auto"}
       type={RPGUIContainerTypes.Framed}
       cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
       isFullScreen={fullScreen}

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

@@ -4,7 +4,8 @@ import {
   UserAccountTypes,
   ItemType,
 } from '@rpg-engine/shared';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { FaFilter } from 'react-icons/fa';
 import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
@@ -115,29 +116,40 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     );
   };
 
+  const [showFilters, setShowFilters] = useState(false);
+
   return (
     <StoreContainer>
-      <SearchHeader>
-        <SearchBarContainer>
-          <SearchBar
-            value={searchQuery}
-            onChange={setSearchQuery}
-            placeholder="Search items..."
+      <FilterBar>
+        <FilterToggle $active={showFilters} onClick={() => setShowFilters(prev => !prev)}>
+          <FaFilter size={12} />
+          <span>Filter</span>
+        </FilterToggle>
+      </FilterBar>
+
+      {showFilters && (
+        <SearchHeader>
+          <SearchBarContainer>
+            <SearchBar
+              value={searchQuery}
+              onChange={setSearchQuery}
+              placeholder="Search items..."
+            />
+          </SearchBarContainer>
+          <SegmentedToggle
+            options={categoryOptions.map(opt => ({ id: opt.value, label: opt.option }))}
+            activeId={selectedCategory}
+            onChange={id => setSelectedCategory(id as ItemType | 'all')}
           />
-        </SearchBarContainer>
-        <SegmentedToggle
-          options={categoryOptions.map(opt => ({ id: opt.value, label: opt.option }))}
-          activeId={selectedCategory}
-          onChange={id => setSelectedCategory(id as ItemType | 'all')}
-        />
-      </SearchHeader>
+        </SearchHeader>
+      )}
 
       <ScrollableContent
         items={filteredItems}
         renderItem={renderStoreItem}
         emptyMessage="No items match your filters."
         layout="list"
-        maxHeight="50vh"
+        maxHeight="none"
       />
     </StoreContainer>
   );
@@ -160,3 +172,26 @@ const SearchHeader = styled.div`
 const SearchBarContainer = styled.div`
   flex: 0.75;
 `;
+
+const FilterBar = styled.div`
+  display: flex;
+  padding-top: 0.25rem;
+`;
+
+const FilterToggle = styled.button<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: ${({ $active }) => ($active ? 'rgba(255,255,255,0.15)' : 'transparent')};
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  color: #fff;
+  padding: 0.3rem 0.6rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`;