@rpg-engine/long-bow 0.8.214 → 0.8.216

package/package.json

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

package/src/components/Store/Store.tsx

@@ -556,9 +556,10 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: calc(100% - 48px);
   gap: 0.5rem;
   position: relative;
+  overflow: hidden;
 `;
 
 const HeaderRow = styled.div`

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);
+  }
+`;