From 4e99d8dd37ad3fee434a6927494d5189a65fb015 Mon Sep 17 00:00:00 2001
From: az1plo Mak <1995Azimut@gmail.com>
Date: Mon, 25 Nov 2024 10:22:08 +0000
Subject: [PATCH] #525 List search: added SearchBar, added new filter to
 inventory

---
 .../Cellar/CellarInventoryTabPanel.js         |  29 ++-
 .../CowPenContextMenu/CowPenContextMenu.js    | 225 +++++++++++-------
 .../FermentationRecipeList.js                 |  47 +++-
 .../FermentationRecipeList.test.js            |  60 ++++-
 src/components/Inventory/Inventory.js         | 142 ++++++++---
 src/components/Inventory/Inventory.sass       |  41 ++++
 src/components/Inventory/Inventory.test.js    |  75 +++++-
 src/components/RecipeList/RecipeList.js       |  42 +++-
 src/components/SearchBar/SearchBar.js         |  26 ++
 src/components/SearchBar/SearchBar.sass       |  53 +++++
 src/components/SearchBar/SearchBar.test.js    |  32 +++
 src/components/SearchBar/index.js             |   1 +
 src/components/Shop/Shop.js                   |   2 +
 .../WineRecipeList/WineRecipeList.js          |  23 +-
 14 files changed, 644 insertions(+), 154 deletions(-)
 create mode 100644 src/components/Inventory/Inventory.sass
 create mode 100644 src/components/SearchBar/SearchBar.js
 create mode 100644 src/components/SearchBar/SearchBar.sass
 create mode 100644 src/components/SearchBar/SearchBar.test.js
 create mode 100644 src/components/SearchBar/index.js

diff --git a/src/components/Cellar/CellarInventoryTabPanel.js b/src/components/Cellar/CellarInventoryTabPanel.js
index 999bb050..40149444 100644
--- a/src/components/Cellar/CellarInventoryTabPanel.js
+++ b/src/components/Cellar/CellarInventoryTabPanel.js
@@ -1,11 +1,12 @@
 /** @typedef {import("../../index").farmhand.keg} keg */
-import React, { useContext } from 'react'
+import React, { useContext, useState } from 'react'
 import { number } from 'prop-types'
 import Divider from '@mui/material/Divider/index.js'
 import Card from '@mui/material/Card/index.js'
 import CardContent from '@mui/material/CardContent/index.js'
 import ReactMarkdown from 'react-markdown'
 
+import SearchBar from '../SearchBar/index.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import {
   KEG_INTEREST_RATE,
@@ -15,6 +16,8 @@ import {
 } from '../../constants.js'
 
 import { integerString } from '../../utils/index.js'
+import { itemsMap } from '../../data/maps.js'
+import { FERMENTED_CROP_NAME } from '../../templates.js'
 
 import { TabPanel } from './TabPanel/index.js'
 import { Keg } from './Keg.js'
@@ -25,6 +28,8 @@ import { Keg } from './Keg.js'
  * @param {number} props.currentTab
  */
 export const CellarInventoryTabPanel = ({ index, currentTab }) => {
+  const [searchQuery, setSearchQuery] = useState('')
+
   /**
    * @type {{
    *   gameState: {
@@ -37,14 +42,32 @@ export const CellarInventoryTabPanel = ({ index, currentTab }) => {
     gameState: { cellarInventory, purchasedCellar },
   } = useContext(FarmhandContext)
 
+  const searchTerms = searchQuery
+    .toLowerCase()
+    .split(' ')
+    .filter(term => term.length > 0)
+
+  const filteredKegs = cellarInventory.filter(keg => {
+    const item = itemsMap[keg.itemId]
+    const itemName = item.name.toLowerCase()
+    const fermentationRecipeName = `${FERMENTED_CROP_NAME}${item.name}`.toLowerCase()
+
+    return searchTerms.every(
+      term => fermentationRecipeName.includes(term) || itemName.includes(term)
+    )
+  })
+
   return (
     <TabPanel value={currentTab} index={index}>
       <h3>
-        Capacity: {integerString(cellarInventory.length)} /{' '}
+        Capacity: {integerString(filteredKegs.length)} /{' '}
         {integerString(PURCHASEABLE_CELLARS.get(purchasedCellar).space)}
       </h3>
+      {cellarInventory.length > 0 && (
+        <SearchBar placeholder="Search kegs..." onSearch={setSearchQuery} />
+      )}
       <ul className="card-list">
-        {cellarInventory.map(keg => (
+        {filteredKegs.map(keg => (
           <li key={keg.id}>
             <Keg keg={keg} />
           </li>
diff --git a/src/components/CowPenContextMenu/CowPenContextMenu.js b/src/components/CowPenContextMenu/CowPenContextMenu.js
index 53add0ba..e297ab68 100644
--- a/src/components/CowPenContextMenu/CowPenContextMenu.js
+++ b/src/components/CowPenContextMenu/CowPenContextMenu.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { array, func, number, object, string } from 'prop-types'
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward.js'
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward.js'
@@ -23,9 +23,9 @@ import { PURCHASEABLE_COW_PENS } from '../../constants.js'
 import cowShopInventory from '../../data/shop-inventory-cow.js'
 
 import CowCard from '../CowCard/index.js'
+import SearchBar from '../SearchBar/index.js'
 
 import { TabPanel, a11yProps } from './TabPanel/index.js'
-
 import './CowPenContextMenu.sass'
 
 const { AGE, COLOR, GENDER, HAPPINESS, VALUE, WEIGHT } = enumify([
@@ -84,6 +84,23 @@ export const CowPenContextMenu = ({
   const [sortType, setSortType] = useState(AGE)
   const [isAscending, setIsAscending] = useState(false)
   const [currentTab, setCurrentTab] = useState(0)
+  const [searchQuery, setSearchQuery] = useState('')
+
+  useEffect(() => {
+    setSearchQuery('')
+  }, [currentTab])
+
+  const filteredCowInventory = searchQuery
+    ? cowInventory.filter(cow =>
+        cow.name.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : cowInventory
+
+  const filteredShopInventory = searchQuery
+    ? cowShopInventory.filter(item =>
+        item.name.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    : cowShopInventory
 
   return (
     <div className="CowPenContextMenu">
@@ -105,98 +122,142 @@ export const CowPenContextMenu = ({
       </Tabs>
       <TabPanel value={currentTab} index={0}>
         <h3>
-          Capacity: {cowInventory.length} /{' '}
+          Capacity: {filteredCowInventory.length} /{' '}
           {PURCHASEABLE_COW_PENS.get(purchasedCowPen).cows}
         </h3>
-        {cowInventory.length > 1 && (
-          <div {...{ className: 'sort-wrapper' }}>
-            <Fab
-              {...{
-                'aria-label': 'Toggle sorting order',
-                onClick: () => setIsAscending(!isAscending),
-                color: 'primary',
-              }}
-            >
-              {isAscending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
-            </Fab>
-            <Select
-              variant="standard"
-              {...{
-                className: 'sort-select',
-                displayEmpty: true,
-                value: sortType,
-                onChange: ({ target: { value } }) => setSortType(value),
-              }}
-            >
-              <MenuItem {...{ value: VALUE }}>Sort by Value</MenuItem>
-              <MenuItem {...{ value: AGE }}>Sort by Age</MenuItem>
-              <MenuItem {...{ value: HAPPINESS }}>Sort by Happiness</MenuItem>
-              <MenuItem {...{ value: WEIGHT }}>Sort by Weight</MenuItem>
-              <MenuItem {...{ value: GENDER }}>Sort by Gender</MenuItem>
-              <MenuItem {...{ value: COLOR }}>Sort by Color</MenuItem>
-            </Select>
-          </div>
+
+        {cowInventory.length > 0 && (
+          <SearchBar
+            placeholder="Search cows by name..."
+            onSearch={setSearchQuery}
+          />
         )}
 
-        <ul className="card-list purchased-cows">
-          {sortCows(cowInventory, sortType, isAscending).map(cow =>
-            isCowInBreedingPen(cow, cowBreedingPen) ? null : (
-              <li
-                {...{
-                  key: cow.id,
-                  onFocus: () => handleCowSelect(cow),
-                  onClick: () => handleCowSelect(cow),
-                }}
-              >
-                <CowCard
+        {filteredCowInventory.length > 0 && (
+          <>
+            {filteredCowInventory.length > 1 && (
+              <div {...{ className: 'sort-wrapper' }}>
+                <Fab
                   {...{
-                    cow,
-                    handleCowAutomaticHugChange,
-                    handleCowBreedChange,
-                    handleCowHugClick,
-                    handleCowNameInputChange,
-                    handleCowOfferClick,
-                    handleCowSellClick,
-                    handleCowWithdrawClick,
-                    isCowPurchased: true,
-                    isSelected: cow.id === selectedCowId,
+                    'aria-label': 'Toggle sorting order',
+                    onClick: () => setIsAscending(!isAscending),
+                    color: 'primary',
                   }}
-                />
-              </li>
-            )
-          )}
-        </ul>
-      </TabPanel>
-      <TabPanel value={currentTab} index={1}>
-        <h3>Capacity: {numberOfCowsBreeding(cowBreedingPen)} / 2</h3>
-        <ul className="card-list purchased-cows breeding-cows">
-          {nullArray(numberOfCowsBreeding(cowBreedingPen)).map((_null, i) => {
-            const cowId = cowBreedingPen[`cowId${i + 1}`]
-            const cow = findCowById(cowInventory, cowId)
-            return (
-              <li {...{ key: cowId }}>
-                <CowCard
+                >
+                  {isAscending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
+                </Fab>
+                <Select
+                  variant="standard"
                   {...{
-                    cow,
-                    handleCowAutomaticHugChange,
-                    handleCowBreedChange,
-                    handleCowHugClick,
-                    handleCowNameInputChange,
-                    handleCowOfferClick,
-                    handleCowSellClick,
-                    handleCowWithdrawClick,
-                    isCowPurchased: true,
-                    isSelected: cow.id === selectedCowId,
+                    className: 'sort-select',
+                    displayEmpty: true,
+                    value: sortType,
+                    onChange: ({ target: { value } }) => setSortType(value),
                   }}
+                >
+                  <MenuItem {...{ value: VALUE }}>Sort by Value</MenuItem>
+                  <MenuItem {...{ value: AGE }}>Sort by Age</MenuItem>
+                  <MenuItem {...{ value: HAPPINESS }}>
+                    Sort by Happiness
+                  </MenuItem>
+                  <MenuItem {...{ value: WEIGHT }}>Sort by Weight</MenuItem>
+                  <MenuItem {...{ value: GENDER }}>Sort by Gender</MenuItem>
+                  <MenuItem {...{ value: COLOR }}>Sort by Color</MenuItem>
+                </Select>
+              </div>
+            )}
+
+            <ul className="card-list purchased-cows">
+              {sortCows(filteredCowInventory, sortType, isAscending).map(cow =>
+                isCowInBreedingPen(cow, cowBreedingPen) ? null : (
+                  <li
+                    {...{
+                      key: cow.id,
+                      onFocus: () => handleCowSelect(cow),
+                      onClick: () => handleCowSelect(cow),
+                    }}
+                  >
+                    <CowCard
+                      {...{
+                        cow,
+                        handleCowAutomaticHugChange,
+                        handleCowBreedChange,
+                        handleCowHugClick,
+                        handleCowNameInputChange,
+                        handleCowOfferClick,
+                        handleCowSellClick,
+                        handleCowWithdrawClick,
+                        isCowPurchased: true,
+                        isSelected: cow.id === selectedCowId,
+                      }}
+                    />
+                  </li>
+                )
+              )}
+            </ul>
+          </>
+        )}
+      </TabPanel>
+      <TabPanel value={currentTab} index={1}>
+        {(() => {
+          const filteredCows = nullArray(numberOfCowsBreeding(cowBreedingPen))
+            .map((_null, i) => {
+              const cowId = cowBreedingPen[`cowId${i + 1}`]
+              const cow = findCowById(cowInventory, cowId)
+
+              if (
+                !cow ||
+                !cow.name.toLowerCase().includes(searchQuery.toLowerCase())
+              ) {
+                return null
+              }
+
+              return cow
+            })
+            .filter(Boolean)
+
+          return (
+            <>
+              <h3>Capacity: {filteredCows.length} / 2</h3>
+              {cowInventory.length > 0 && (
+                <SearchBar
+                  placeholder="Search cows by name..."
+                  onSearch={setSearchQuery}
                 />
-              </li>
-            )
-          })}
-        </ul>
+              )}
+              <ul className="card-list purchased-cows breeding-cows">
+                {filteredCows.map(cow => (
+                  <li key={cow.id}>
+                    <CowCard
+                      {...{
+                        cow,
+                        handleCowAutomaticHugChange,
+                        handleCowBreedChange,
+                        handleCowHugClick,
+                        handleCowNameInputChange,
+                        handleCowOfferClick,
+                        handleCowSellClick,
+                        handleCowWithdrawClick,
+                        isCowPurchased: true,
+                        isSelected: cow.id === selectedCowId,
+                      }}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </>
+          )
+        })()}
       </TabPanel>
       <TabPanel value={currentTab} index={2}>
+        {cowShopInventory.length > 0 && (
+          <SearchBar
+            placeholder="Search supplies..."
+            onSearch={setSearchQuery}
+          />
+        )}
         <ul className="card-list">
-          {cowShopInventory.map(item => (
+          {filteredShopInventory.map(item => (
             <li key={item.id}>
               <Item
                 {...{
diff --git a/src/components/FermentationRecipeList/FermentationRecipeList.js b/src/components/FermentationRecipeList/FermentationRecipeList.js
index 0e2ea856..3e3d6205 100644
--- a/src/components/FermentationRecipeList/FermentationRecipeList.js
+++ b/src/components/FermentationRecipeList/FermentationRecipeList.js
@@ -1,9 +1,13 @@
-import React, { useContext } from 'react'
+import React, { useState, useContext } from 'react'
 
 import { fermentableItemsMap } from '../../data/maps.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import { getCropsAvailableToFerment } from '../../utils/getCropsAvailableToFerment.js'
 
+import { FERMENTED_CROP_NAME } from '../../templates.js'
+
+import SearchBar from '../SearchBar/index.js'
+
 import { FermentationRecipe } from './FermentationRecipe.js'
 
 const totalFermentableItems = Object.keys(fermentableItemsMap).length
@@ -15,8 +19,23 @@ export const FermentationRecipeList = () => {
 
   const cropsAvailableToFerment = getCropsAvailableToFerment(levelEntitlements)
 
-  const numberOfCropsAvailableToFerment = Object.keys(cropsAvailableToFerment)
-    .length
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const searchTerms = searchQuery
+    .toLowerCase()
+    .split(' ')
+    .filter(term => term.length > 0)
+
+  const filteredCrops = cropsAvailableToFerment.filter(item => {
+    const fermentationRecipeName = `${FERMENTED_CROP_NAME}${item.name}`.toLowerCase()
+    return searchTerms.every(
+      term =>
+        fermentationRecipeName.includes(term) ||
+        item.name.toLowerCase().includes(term)
+    )
+  })
+
+  const numberOfCropsAvailableToFerment = filteredCrops.length
 
   return (
     <>
@@ -24,13 +43,21 @@ export const FermentationRecipeList = () => {
         Available Fermentation Recipes ({numberOfCropsAvailableToFerment} /{' '}
         {totalFermentableItems})
       </h3>
-      <ul className="card-list">
-        {cropsAvailableToFerment.map(item => (
-          <li key={item.id}>
-            <FermentationRecipe item={item} />
-          </li>
-        ))}
-      </ul>
+      {cropsAvailableToFerment.length > 0 && (
+        <SearchBar
+          placeholder="Search fermentation recipes..."
+          onSearch={setSearchQuery}
+        />
+      )}
+      {filteredCrops.length > 0 && (
+        <ul className="card-list">
+          {filteredCrops.map(item => (
+            <li key={item.id}>
+              <FermentationRecipe item={item} />
+            </li>
+          ))}
+        </ul>
+      )}
     </>
   )
 }
diff --git a/src/components/FermentationRecipeList/FermentationRecipeList.test.js b/src/components/FermentationRecipeList/FermentationRecipeList.test.js
index 0dd4d507..d00e3e33 100644
--- a/src/components/FermentationRecipeList/FermentationRecipeList.test.js
+++ b/src/components/FermentationRecipeList/FermentationRecipeList.test.js
@@ -2,7 +2,7 @@
  * @typedef {import('../../index').farmhand.levelEntitlements} levelEntitlements
  */
 import React from 'react'
-import { screen } from '@testing-library/dom'
+import { screen, fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/react'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
@@ -15,7 +15,7 @@ import { FermentationRecipeList } from './FermentationRecipeList.js'
 const totalFermentableItems = Object.keys(fermentableItemsMap).length
 
 vitest.mock('./FermentationRecipe.js', () => ({
-  FermentationRecipe: () => <></>,
+  FermentationRecipe: ({ item }) => <div>{item.name}</div>,
 }))
 
 /**
@@ -62,4 +62,60 @@ describe('FermentationRecipeList', () => {
 
     expect(header).toBeInTheDocument()
   })
+
+  test('filters recipes based on search query', () => {
+    const levelEntitlements = getLevelEntitlements(100)
+    const cropsAvailableToFerment = getCropsAvailableToFerment(
+      levelEntitlements
+    )
+
+    render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
+
+    const searchBar = screen.getByPlaceholderText(
+      'Search fermentation recipes...'
+    )
+    expect(searchBar).toBeInTheDocument()
+
+    fireEvent.change(searchBar, { target: { value: 'apple' } })
+
+    const filteredCrops = cropsAvailableToFerment.filter(item => {
+      const fermentationRecipeName = `Fermented ${item.name}`.toLowerCase()
+      return (
+        fermentationRecipeName.includes('apple') ||
+        item.name.toLowerCase().includes('apple')
+      )
+    })
+
+    filteredCrops.forEach(crop => {
+      expect(screen.getByText(crop.name)).toBeInTheDocument()
+    })
+
+    const nonMatchingCrops = cropsAvailableToFerment.filter(
+      item => !filteredCrops.includes(item)
+    )
+
+    nonMatchingCrops.forEach(crop => {
+      expect(screen.queryByText(crop.name)).not.toBeInTheDocument()
+    })
+  })
+
+  test('handles empty search query', () => {
+    const levelEntitlements = getLevelEntitlements(100)
+    const cropsAvailableToFerment = getCropsAvailableToFerment(
+      levelEntitlements
+    )
+
+    render(<FermentationRecipeListStub levelEntitlements={levelEntitlements} />)
+
+    const searchBar = screen.getByPlaceholderText(
+      'Search fermentation recipes...'
+    )
+    expect(searchBar).toBeInTheDocument()
+
+    fireEvent.change(searchBar, { target: { value: '' } })
+
+    cropsAvailableToFerment.forEach(crop => {
+      expect(screen.getByText(crop.name)).toBeInTheDocument()
+    })
+  })
 })
diff --git a/src/components/Inventory/Inventory.js b/src/components/Inventory/Inventory.js
index 16bfc972..9ff0a2c1 100644
--- a/src/components/Inventory/Inventory.js
+++ b/src/components/Inventory/Inventory.js
@@ -1,12 +1,13 @@
-import React, { Fragment } from 'react'
+import React, { Fragment, useState } from 'react'
 import { array } from 'prop-types'
-import Divider from '@mui/material/Divider/index.js'
 
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
 import Item from '../Item/index.js'
 import { itemsMap } from '../../data/maps.js'
 import { enumify, itemType } from '../../enums.js'
 import { sortItems } from '../../utils/index.js'
+import SearchBar from '../SearchBar/index.js'
+import './Inventory.sass'
 
 const {
   COW_FEED,
@@ -35,6 +36,7 @@ export const categoryIds = enumify([
   'SEEDS',
   'UPGRADES',
 ])
+
 const categoryIdKeys = Object.keys(categoryIds)
 const {
   ANIMAL_PRODUCTS,
@@ -89,48 +91,110 @@ export const Inventory = ({
   items,
   playerInventory,
   shopInventory,
-
   isPurchaseView = false,
   isSellView = false,
-
   itemCategories = separateItemsIntoCategories(items),
-}) => (
-  <div className="Inventory">
-    {[
-      [CROPS, 'Crops'],
-      [SEEDS, 'Seeds'],
-      [FORAGED_ITEMS, 'Foraged Items'],
-      [FIELD_TOOLS, 'Field Tools'],
-      [ANIMAL_PRODUCTS, 'Animal Products'],
-      [ANIMAL_SUPPLIES, 'Animal Supplies'],
-      [CRAFTED_ITEMS, 'Crafted Items'],
-      [MINED_RESOURCES, 'Mined Resources'],
-    ].map(([category, headerText]) =>
-      itemCategories[category].length ? (
-        <Fragment key={category}>
-          <section>
-            {isPurchaseView ? null : <h3>{headerText}</h3>}
-            <ul className="card-list">
-              {itemCategories[category].map(item => (
-                <li key={item.id}>
-                  <Item
-                    {...{
-                      isPurchaseView,
-                      isSellView,
-                      item,
-                      showQuantity: isPurchaseView,
-                    }}
+  placeholder = 'Search inventory...',
+}) => {
+  const [searchQuery, setSearchQuery] = useState('')
+  const [selectedCategories, setSelectedCategories] = useState([])
+  const [filterVisible, setFilterVisible] = useState(false)
+  const toggleCategory = category => {
+    setSelectedCategories(prev =>
+      prev.includes(category)
+        ? prev.filter(c => c !== category)
+        : [...prev, category]
+    )
+  }
+
+  const filteredCategories = Object.keys(itemCategories).reduce(
+    (filtered, category) => {
+      if (
+        selectedCategories.length > 0 &&
+        !selectedCategories.includes(category)
+      ) {
+        return filtered
+      }
+      filtered[category] = itemCategories[category]?.filter(item =>
+        itemsMap[item.id]?.name
+          ?.toLowerCase()
+          ?.includes(searchQuery.toLowerCase())
+      )
+      return filtered
+    },
+    {}
+  )
+
+  return (
+    <div className="Inventory">
+      <SearchBar
+        placeholder={placeholder || 'Search inventory...'}
+        onSearch={setSearchQuery}
+      />
+      {!isPurchaseView && (
+        <>
+          <div
+            className="filter-toggle"
+            onClick={() => setFilterVisible(!filterVisible)}
+          >
+            {filterVisible ? '▼ Hide Filters' : '▲ Show Filters'}
+          </div>
+          <div
+            className={`filter-container ${
+              filterVisible ? 'visible' : 'hidden'
+            }`}
+          >
+            <div className="filter-section">
+              <h4>Filter by category:</h4>
+              {categoryIdKeys.map(key => (
+                <label key={key} className="filter-checkbox">
+                  <input
+                    type="checkbox"
+                    disabled={isPurchaseView}
+                    checked={selectedCategories.includes(key)}
+                    onChange={() => toggleCategory(key)}
                   />
-                </li>
+                  {key
+                    .replace('_', ' ')
+                    .toLowerCase()
+                    .replace(/(?:^|\s)\S/g, match => match.toUpperCase())}
+                </label>
               ))}
-            </ul>
-          </section>
-          {isPurchaseView ? null : <Divider />}
-        </Fragment>
-      ) : null
-    )}
-  </div>
-)
+            </div>
+          </div>
+        </>
+      )}
+      {categoryIdKeys.map(category =>
+        filteredCategories[category]?.length ? (
+          <Fragment key={category}>
+            <section>
+              <h3>
+                {category
+                  .replace('_', ' ')
+                  .toLowerCase()
+                  .replace(/(?:^|\s)\S/g, match => match.toUpperCase())}
+              </h3>
+              <ul className="card-list">
+                {filteredCategories[category].map(item => (
+                  <li key={item.id}>
+                    <Item
+                      {...{
+                        isPurchaseView,
+                        isSellView,
+                        item,
+                        showQuantity: isPurchaseView,
+                      }}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </section>
+          </Fragment>
+        ) : null
+      )}
+    </div>
+  )
+}
 
 Inventory.propTypes = {
   items: array.isRequired,
diff --git a/src/components/Inventory/Inventory.sass b/src/components/Inventory/Inventory.sass
new file mode 100644
index 00000000..a7796d66
--- /dev/null
+++ b/src/components/Inventory/Inventory.sass
@@ -0,0 +1,41 @@
+.Inventory
+  .filter-container
+    transition: height 0.3s ease, opacity 0.3s ease
+    overflow: hidden
+
+    &.hidden
+      height: 0
+      opacity: 0
+      pointer-events: none
+
+    &.visible
+      height: auto
+      opacity: 1
+
+  .filter-toggle
+    cursor: pointer
+    text-align: center
+    margin-bottom: 10px
+    color: #007bff
+    font-size: 14px
+    font-weight: bold
+
+  .filter-section
+    margin-bottom: 20px
+    padding: 10px
+    border: 1px solid #ccc
+    border-radius: 5px
+    background-color: #f7f7f7
+
+    h4
+      margin-bottom: 10px
+      font-size: 16px
+      color: #555
+
+    .filter-checkbox
+      display: block
+      margin-bottom: 8px
+      font-size: 14px
+
+      input
+        margin-right: 5px
diff --git a/src/components/Inventory/Inventory.test.js b/src/components/Inventory/Inventory.test.js
index 957c2e6c..bc91e7b7 100644
--- a/src/components/Inventory/Inventory.test.js
+++ b/src/components/Inventory/Inventory.test.js
@@ -1,10 +1,16 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
+import SearchBar from '../SearchBar/index.js'
 import Item from '../Item/index.js'
 import { testItem } from '../../test-utils/index.js'
 import { sortItems } from '../../utils/index.js'
-import { carrot, carrotSeed, pumpkinSeed } from '../../data/crops/index.js'
+import {
+  carrot,
+  pumpkin,
+  pumpkinSeed,
+  carrotSeed,
+} from '../../data/crops/index.js'
 import { carrotSoup } from '../../data/recipes.js'
 
 import {
@@ -25,6 +31,51 @@ beforeEach(() => {
   )
 })
 
+test('displays all items when no categories are selected', () => {
+  const categories = ['CROPS', 'ANIMAL_PRODUCTS']
+  const items = [
+    testItem({ id: carrot.id, name: 'Carrot', category: 'CROPS' }),
+    testItem({ id: pumpkin.id, name: 'Pumpkin', category: 'CROPS' }),
+    testItem({ id: carrotSeed.id, name: 'Carrot Seed', category: 'SEEDS' }),
+  ]
+
+  component.setProps({ items, categories })
+
+  let renderedItems = component.find(Item)
+  expect(renderedItems).toHaveLength(3)
+
+  const checkboxes = component.find('input[type="checkbox"]')
+  checkboxes.forEach(checkbox => checkbox.simulate('change'))
+
+  component.update()
+
+  renderedItems = component.find(Item)
+  expect(renderedItems).toHaveLength(3)
+})
+
+describe('SearchBar functionality', () => {
+  test('renders SearchBar with correct placeholder', () => {
+    const placeholderText = 'Search inventory...'
+    component.setProps({ placeholder: placeholderText })
+
+    const searchBar = component.find(SearchBar)
+    expect(searchBar).toHaveLength(1)
+    expect(searchBar.props().placeholder).toBe(placeholderText)
+  })
+
+  test('updates searchQuery when SearchBar input changes', () => {
+    const searchBar = component.find(SearchBar)
+
+    const testQuery = 'test item'
+    searchBar.props().onSearch(testQuery)
+
+    expect(component.find(SearchBar).props().placeholder).toBe(
+      'Search inventory...'
+    )
+    expect(component.find(SearchBar).props().onSearch).toBeTruthy()
+  })
+})
+
 describe('rendering items', () => {
   test('shows the inventory', () => {
     component.setProps({ items: [testItem({ id: carrot.id })] })
@@ -92,4 +143,26 @@ describe('item sorting', () => {
       [categoryIds.UPGRADES]: [],
     })
   })
+  describe('Inventory search functionality', () => {
+    test('filters items by search query', () => {
+      const items = [
+        testItem({ id: carrot.id, name: 'Carrot' }),
+        testItem({ id: pumpkinSeed.id, name: 'Pumpkin Seed' }),
+      ]
+
+      component.setProps({ items })
+
+      let renderedItems = component.find(Item)
+      expect(renderedItems).toHaveLength(2)
+
+      const searchBar = component.find(SearchBar)
+      searchBar.props().onSearch('Carrot')
+
+      component.update()
+
+      renderedItems = component.find(Item)
+      expect(renderedItems).toHaveLength(1)
+      expect(renderedItems.props().item.id).toBe(carrot.id)
+    })
+  })
 })
diff --git a/src/components/RecipeList/RecipeList.js b/src/components/RecipeList/RecipeList.js
index 43c991f0..f55c8955 100644
--- a/src/components/RecipeList/RecipeList.js
+++ b/src/components/RecipeList/RecipeList.js
@@ -1,10 +1,21 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 
+import SearchBar from '../SearchBar/index.js'
 import Recipe from '../Recipe/index.js'
 
 export function RecipeList({ allRecipes, learnedRecipes }) {
-  const numLearnedRecipes = learnedRecipes.length
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredRecipes = searchQuery
+    ? learnedRecipes.filter(recipeId =>
+        allRecipes[recipeId]?.name
+          ?.toLowerCase()
+          .includes(searchQuery.toLowerCase())
+      )
+    : learnedRecipes
+
+  const numLearnedRecipes = filteredRecipes.length
   const totalRecipes = Object.keys(allRecipes).length
 
   return (
@@ -12,17 +23,22 @@ export function RecipeList({ allRecipes, learnedRecipes }) {
       <h3>
         Learned Recipes ({numLearnedRecipes} / {totalRecipes})
       </h3>
-      <ul className="card-list">
-        {learnedRecipes.map(recipeId => (
-          <li key={recipeId}>
-            <Recipe
-              {...{
-                recipe: allRecipes[recipeId],
-              }}
-            />
-          </li>
-        ))}
-      </ul>
+      {learnedRecipes.length > 0 && (
+        <SearchBar placeholder="Search recipes..." onSearch={setSearchQuery} />
+      )}
+      {filteredRecipes.length > 0 && (
+        <ul className="card-list">
+          {filteredRecipes.map(recipeId => (
+            <li key={recipeId}>
+              <Recipe
+                {...{
+                  recipe: allRecipes[recipeId],
+                }}
+              />
+            </li>
+          ))}
+        </ul>
+      )}
     </>
   )
 }
diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js
new file mode 100644
index 00000000..0b82326f
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './SearchBar.sass'
+
+const SearchBar = ({ placeholder, onSearch }) => {
+  const handleInputChange = event => {
+    onSearch(event.target.value)
+  }
+
+  return (
+    <div className="search-bar">
+      <input
+        type="text"
+        placeholder={placeholder || 'Search...'}
+        onChange={handleInputChange}
+      />
+    </div>
+  )
+}
+
+SearchBar.propTypes = {
+  placeholder: PropTypes.string,
+  onSearch: PropTypes.func.isRequired,
+}
+
+export default SearchBar
diff --git a/src/components/SearchBar/SearchBar.sass b/src/components/SearchBar/SearchBar.sass
new file mode 100644
index 00000000..12ff5cd9
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.sass
@@ -0,0 +1,53 @@
+@import '../../styles/variables.sass'
+@import '../../styles/utils.sass'
+
+.search-bar
+  position: relative
+  max-width: 100%
+  padding: 0.5em
+  margin: 1em 0
+  display: flex
+  justify-content: center
+  align-items: center
+  background-color: #fff
+  border-radius: 1em
+  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1)
+
+  input
+    width: 100%
+    padding: 0.75em 1em
+    border: 1px solid #ddd
+    border-radius: 0.5em
+    font-size: 1em
+    color: #333
+    background-color: #f9f9f9
+    transition: all 0.3s ease
+
+    &:focus
+      border-color: #ffb913
+      outline: none
+      background-color: #fff
+
+  input::placeholder
+    color: #999
+
+  .MuiButton-root
+    background-color: transparent
+    padding: 0.5em
+    margin-left: 0.5em
+    min-width: 3em
+    font-size: 1em
+    color: #ffb913
+    border: 1px solid #ffb913
+    border-radius: 0.5em
+
+    &:hover
+      background-color: #ffb913
+      color: #fff
+
+  @media (max-width: 768px)
+    padding: 1em
+    margin: 0.5em 0
+    input
+      font-size: 0.9em
+      padding: 0.5em 1em
diff --git a/src/components/SearchBar/SearchBar.test.js b/src/components/SearchBar/SearchBar.test.js
new file mode 100644
index 00000000..38edef58
--- /dev/null
+++ b/src/components/SearchBar/SearchBar.test.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, vi } from 'vitest'
+
+import SearchBar from './SearchBar.js'
+
+describe('SearchBar Component', () => {
+  it('renders correctly with placeholder', () => {
+    render(<SearchBar placeholder="Search for items" onSearch={() => {}} />)
+
+    const inputElement = screen.getByPlaceholderText('Search for items')
+    expect(inputElement).toBeInTheDocument()
+  })
+
+  it('renders with default placeholder if none provided', () => {
+    render(<SearchBar onSearch={() => {}} />)
+
+    const inputElement = screen.getByPlaceholderText('Search...')
+    expect(inputElement).toBeInTheDocument()
+  })
+
+  it('calls onSearch with correct value when typing', () => {
+    const onSearchMock = vi.fn()
+    render(<SearchBar placeholder="Type here" onSearch={onSearchMock} />)
+
+    const inputElement = screen.getByPlaceholderText('Type here')
+    fireEvent.change(inputElement, { target: { value: 'test query' } })
+
+    expect(onSearchMock).toHaveBeenCalledTimes(1)
+    expect(onSearchMock).toHaveBeenCalledWith('test query')
+  })
+})
diff --git a/src/components/SearchBar/index.js b/src/components/SearchBar/index.js
new file mode 100644
index 00000000..450d6866
--- /dev/null
+++ b/src/components/SearchBar/index.js
@@ -0,0 +1 @@
+export { default } from './SearchBar.js'
diff --git a/src/components/Shop/Shop.js b/src/components/Shop/Shop.js
index c7f08ff4..c4643551 100644
--- a/src/components/Shop/Shop.js
+++ b/src/components/Shop/Shop.js
@@ -102,6 +102,7 @@ export const Shop = ({
           {...{
             items: seeds,
             isPurchaseView: true,
+            placeholder: 'Search seeds...',
           }}
         />
       </TabPanel>
@@ -110,6 +111,7 @@ export const Shop = ({
           {...{
             items: fieldTools,
             isPurchaseView: true,
+            placeholder: 'Search supplies...',
           }}
         />
       </TabPanel>
diff --git a/src/components/WineRecipeList/WineRecipeList.js b/src/components/WineRecipeList/WineRecipeList.js
index 9867b60b..509b654d 100644
--- a/src/components/WineRecipeList/WineRecipeList.js
+++ b/src/components/WineRecipeList/WineRecipeList.js
@@ -1,7 +1,9 @@
-import React, { useContext } from 'react'
+import React, { useState, useContext } from 'react'
 
+import SearchBar from '../SearchBar/index.js'
 import { getWineVarietiesAvailableToMake } from '../../utils/getWineVarietiesAvailableToMake.js'
 import FarmhandContext from '../Farmhand/Farmhand.context.js'
+
 import { grapeVariety } from '../../enums.js'
 
 import { WineRecipe } from './WineRecipe.js'
@@ -17,8 +19,13 @@ export const WineRecipeList = () => {
     itemsSold
   )
 
-  const numberOfWineVarietiesAvailableToMake =
-    wineVarietiesAvailableToMake.length
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const filteredWineVarieties = wineVarietiesAvailableToMake.filter(
+    wineVariety => wineVariety.toLowerCase().includes(searchQuery.toLowerCase())
+  )
+
+  const numberOfWineVarietiesAvailableToMake = filteredWineVarieties.length
 
   return (
     <>
@@ -26,8 +33,16 @@ export const WineRecipeList = () => {
         Available Wine Recipes ({numberOfWineVarietiesAvailableToMake} /{' '}
         {totalGrapeVarieties})
       </h3>
+
+      {wineVarietiesAvailableToMake.length > 0 && (
+        <SearchBar
+          placeholder="Search wine varieties..."
+          onSearch={setSearchQuery}
+        />
+      )}
+
       <ul className="card-list">
-        {wineVarietiesAvailableToMake.map(wineVariety => (
+        {filteredWineVarieties.map(wineVariety => (
           <li key={wineVariety}>
             <WineRecipe wineVariety={wineVariety} />
           </li>