src/components/Filters/CategoryFilterPopup.tsx

@@ -0,0 +1,3 @@
+export const CategoryFilterPopup = () => {
+  return <>Popup</>
+}

src/components/Filters/ModsFilter.tsx

@@ -1,5 +1,5 @@
 import { useAppSelector, useLocalStorage } from 'hooks'
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import {
   FilterOptions,
   SortBy,
@@ -19,7 +19,7 @@ type Props = {
 }
 
 export const ModFilter = React.memo(
-  ({ author, filterKey = 'filter' }: Props) => {
+  ({ author, filterKey = 'filter', children }: PropsWithChildren<Props>) => {
     const userState = useAppSelector((state) => state.user)
     const [filterOptions, setFilterOptions] = useLocalStorage<FilterOptions>(
       filterKey,
@@ -176,6 +176,8 @@ export const ModFilter = React.memo(
             Show All
           </Option>
         </Dropdown>
+
+        {children}
       </Filter>
     )
   }

src/components/ModForm.tsx

@@ -1152,7 +1152,7 @@ export const CategoryAutocomplete = ({
                   key={`category-${i}`}
                   to={{
                     pathname: getGamePageRoute(game),
-                    search: `c=${c}`
+                    search: `l=${c}`
                   }}
                   className='IBMSMSMBSSCategoriesBoxItem'
                 >

src/pages/game.tsx

@@ -27,6 +27,7 @@ import {
   scrollIntoView
 } from 'utils'
 import { useCuratedSet } from 'hooks/useCuratedSet'
+import { CategoryFilterPopup } from 'components/Filters/CategoryFilterPopup'
 
 export const GamePage = () => {
   const scrollTargetRef = useRef<HTMLDivElement>(null)
@@ -52,6 +53,13 @@ export const GamePage = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const [searchTerm, setSearchTerm] = useState(searchParams.get('q') || '')
 
+  // Categories filter
+  const [categories, setCategories] = useState(searchParams.getAll('l') || [])
+  const [heirarchies, setFullHeirarchies] = useState(
+    searchParams.getAll('h') || []
+  )
+  const [showCategoryPopup, setShowCategoryPopup] = useState(false)
+
   const handleSearch = () => {
     const value = searchTermRef.current?.value || '' // Access the input value from the ref
     setSearchTerm(value)
@@ -128,6 +136,14 @@ export const GamePage = () => {
       '#t': [T_TAG_VALUE]
     }
 
+    if (categories.length) {
+      filter['#l'] = categories.map((l) => `com.degmods:${l}`)
+    }
+
+    if (heirarchies.length) {
+      filter['#L'] = heirarchies.map((L) => `com.degmods:${L}`)
+    }
+
     const subscription = ndk.subscribe(filter, {
       cacheUsage: NDKSubscriptionCacheUsage.PARALLEL,
       closeOnEose: true
@@ -151,7 +167,7 @@ export const GamePage = () => {
     return () => {
       subscription.stop()
     }
-  }, [gameName, ndk])
+  }, [gameName, ndk, categories, heirarchies])
 
   if (!gameName) return null
 
@@ -188,7 +204,29 @@ export const GamePage = () => {
                 />
               </div>
             </div>
-            <ModFilter />
+            <ModFilter>
+              <div className='FiltersMainElement'>
+                <button
+                  className='btn btnMain btnMainDropdown'
+                  type='button'
+                  onClick={() => {
+                    setShowCategoryPopup(true)
+                  }}
+                >
+                  Categories
+                  <svg
+                    xmlns='http://www.w3.org/2000/svg'
+                    viewBox='0 0 512 512'
+                    width='1em'
+                    height='1em'
+                    fill='currentColor'
+                  >
+                    <path d='M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z' />
+                  </svg>
+                </button>
+              </div>
+            </ModFilter>
+
             <div className='IBMSecMain IBMSMListWrapper'>
               <div className='IBMSMList'>
                 {currentMods.map((mod) => (
@@ -204,6 +242,7 @@ export const GamePage = () => {
           </div>
         </div>
       </div>
+      {showCategoryPopup && <CategoryFilterPopup />}
     </>
   )
 }

src/pages/mod/index.tsx

@@ -550,7 +550,7 @@ const Body = ({
                         className='IBMSMSMBSSCategoriesBoxItem'
                         to={{
                           pathname: getGamePageRoute(game),
-                          search: `c=${c}`
+                          search: `l=${c}`
                         }}
                       >
                         <p>{capitalizeEachWord(c)}</p>