feat(categories): autocomplete user and existing categories, new LTags option to add to user's list

src/components/CategoryAutocomplete.tsx

@@ -0,0 +1,333 @@
+import { useLocalStorage } from 'hooks'
+import { useMemo, useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { getGamePageRoute } from 'routes'
+import { ModFormState, Categories, Category } from 'types'
+import {
+  getCategories,
+  flattenCategories,
+  addToUserCategories,
+  capitalizeEachWord
+} from 'utils'
+
+interface CategoryAutocompleteProps {
+  game: string
+  LTags: string[]
+  setFormState: (value: React.SetStateAction<ModFormState>) => void
+}
+
+export const CategoryAutocomplete = ({
+  game,
+  LTags,
+  setFormState
+}: CategoryAutocompleteProps) => {
+  // Fetch the hardcoded categories from assets
+  const flattenedCategories = useMemo(() => getCategories(), [])
+
+  // Fetch the user categories from local storage
+  const [userHierarchies, setUserHierarchies] = useLocalStorage<
+    (string | Category)[]
+  >('user-hierarchies', [])
+  const flattenedUserCategories = useMemo(
+    () => flattenCategories(userHierarchies, []),
+    [userHierarchies]
+  )
+
+  // Create options and select categories from the mod LTags (hierarchies)
+  const { selectedCategories, combinedOptions } = useMemo(() => {
+    const combinedCategories = [
+      ...flattenedCategories,
+      ...flattenedUserCategories
+    ]
+    const hierarchies = LTags.map((hierarchy) => {
+      const existingCategory = combinedCategories.find(
+        (cat) => cat.hierarchy === hierarchy.replace(/:/g, ' > ')
+      )
+      if (existingCategory) {
+        return existingCategory
+      } else {
+        const segments = hierarchy.split(':')
+        const lastSegment = segments[segments.length - 1]
+        return { name: lastSegment, hierarchy: hierarchy, l: [lastSegment] }
+      }
+    })
+
+    // Selected categorires (based on the LTags)
+    const selectedCategories = Array.from(new Set([...hierarchies]))
+
+    // Combine user, predefined category hierarchies and selected values (LTags in case some are missing)
+    const combinedOptions = Array.from(
+      new Set([...combinedCategories, ...selectedCategories])
+    )
+
+    return { selectedCategories, combinedOptions }
+  }, [LTags, flattenedCategories, flattenedUserCategories])
+
+  const [inputValue, setInputValue] = useState<string>('')
+  const filteredOptions = useMemo(
+    () =>
+      combinedOptions.filter((option) =>
+        option.hierarchy.toLowerCase().includes(inputValue.toLowerCase())
+      ),
+    [combinedOptions, inputValue]
+  )
+
+  const getSelectedCategories = (cats: Categories[]) => {
+    const uniqueValues = new Set(
+      cats.reduce<string[]>((prev, cat) => [...prev, ...cat.l], [])
+    )
+    const concatenatedValue = Array.from(uniqueValues)
+    return concatenatedValue
+  }
+  const getSelectedHierarchy = (cats: Categories[]) => {
+    const hierarchies = cats.reduce<string[]>(
+      (prev, cat) => [...prev, cat.hierarchy.replace(/ > /g, ':')],
+      []
+    )
+    const concatenatedValue = Array.from(hierarchies)
+    return concatenatedValue
+  }
+  const handleReset = () => {
+    setFormState((prevState) => ({
+      ...prevState,
+      ['lTags']: [],
+      ['LTags']: []
+    }))
+    setInputValue('')
+  }
+  const handleRemove = (option: Categories) => {
+    const updatedCategories = selectedCategories.filter(
+      (cat) => cat.hierarchy !== option.hierarchy
+    )
+    setFormState((prevState) => ({
+      ...prevState,
+      ['lTags']: getSelectedCategories(updatedCategories),
+      ['LTags']: getSelectedHierarchy(updatedCategories)
+    }))
+  }
+  const handleSelect = (option: Categories) => {
+    if (!selectedCategories.some((cat) => cat.hierarchy === option.hierarchy)) {
+      const updatedCategories = [...selectedCategories, option]
+      setFormState((prevState) => ({
+        ...prevState,
+        ['lTags']: getSelectedCategories(updatedCategories),
+        ['LTags']: getSelectedHierarchy(updatedCategories)
+      }))
+    }
+    setInputValue('')
+  }
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value)
+  }
+  const handleAddNew = () => {
+    if (inputValue) {
+      const value = inputValue.trim().toLowerCase()
+      const values = value.split('>').map((s) => s.trim())
+      const newOption: Categories = {
+        name: value,
+        hierarchy: value,
+        l: values
+      }
+      setUserHierarchies((prev) => {
+        addToUserCategories(prev, value)
+        return [...prev]
+      })
+      const updatedCategories = [...selectedCategories, newOption]
+      setFormState((prevState) => ({
+        ...prevState,
+        ['lTags']: getSelectedCategories(updatedCategories),
+        ['LTags']: getSelectedHierarchy(updatedCategories)
+      }))
+      setInputValue('')
+    }
+  }
+  const handleAddNewCustom = (option: Categories) => {
+    setUserHierarchies((prev) => {
+      addToUserCategories(prev, option.hierarchy)
+      return [...prev]
+    })
+  }
+
+  const Row = ({ index }: { index: number }) => {
+    return (
+      <div
+        className='dropdown-item dropdownMainMenuItem dropdownMainMenuItemCategory'
+        onClick={() => handleSelect(filteredOptions[index])}
+      >
+        {capitalizeEachWord(filteredOptions[index].hierarchy)}
+
+        {/* Show "Remove" button when the category is selected */}
+        {selectedCategories.some(
+          (cat) => cat.hierarchy === filteredOptions[index].hierarchy
+        ) && (
+          <button
+            type='button'
+            className='btn btnMain btnMainInsideField btnMainRemove'
+            onClick={() => handleRemove(filteredOptions[index])}
+            title='Remove'
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='-32 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M323.3 32.01H188.7C172.3 32.01 160 44.31 160 60.73V96.01H32C14.33 96.01 0 110.3 0 128S14.33 160 32 160H480c17.67 0 32-14.33 32-32.01S497.7 96.01 480 96.01H352v-35.28C352 44.31 339.7 32.01 323.3 32.01zM64.9 477.5C66.5 492.3 79.31 504 94.72 504H417.3c15.41 0 28.22-11.72 29.81-26.5L480 192.2H32L64.9 477.5z'></path>
+            </svg>
+          </button>
+        )}
+
+        {/* Show "Add" button when the category is not included in the predefined or userdefined lists */}
+        {!flattenedCategories.some(
+          (cat) => cat.hierarchy === filteredOptions[index].hierarchy
+        ) &&
+          !flattenedUserCategories.some(
+            (cat) => cat.hierarchy === filteredOptions[index].hierarchy
+          ) && (
+            <button
+              type='button'
+              className='btn btnMain btnMainInsideField btnMainAdd'
+              onClick={() => handleAddNewCustom(filteredOptions[index])}
+              title='Add'
+            >
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                viewBox='-32 0 512 512'
+                width='1em'
+                height='1em'
+                fill='currentColor'
+              >
+                <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+              </svg>
+            </button>
+          )}
+      </div>
+    )
+  }
+
+  return (
+    <div className='inputLabelWrapperMain'>
+      <label className='form-label labelMain'>Categories</label>
+      <p className='labelDescriptionMain'>You can select multiple categories</p>
+      <div className='dropdown dropdownMain'>
+        <div className='inputWrapperMain inputWrapperMainAlt'>
+          <input
+            type='text'
+            className='inputMain inputMainWithBtn dropdown-toggle'
+            placeholder='Select some categories...'
+            data-bs-toggle='dropdown'
+            value={inputValue}
+            onChange={handleInputChange}
+          />
+          <button
+            className='btn btnMain btnMainInsideField btnMainRemove'
+            title='Remove'
+            type='button'
+            onClick={handleReset}
+          >
+            <svg
+              xmlns='http://www.w3.org/2000/svg'
+              viewBox='0 0 512 512'
+              width='1em'
+              height='1em'
+              fill='currentColor'
+            >
+              <path d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'></path>
+            </svg>
+          </button>
+
+          <div
+            className='dropdown-menu dropdownMainMenu dropdownMainMenuAlt category'
+            style={{
+              maxHeight: '500px'
+            }}
+          >
+            {filteredOptions.length > 0 ? (
+              filteredOptions.map((c, i) => <Row key={c.hierarchy} index={i} />)
+            ) : (
+              <div
+                className='dropdown-item dropdownMainMenuItem dropdownMainMenuItemCategory'
+                onClick={handleAddNew}
+              >
+                {inputValue &&
+                !filteredOptions?.find(
+                  (option) =>
+                    option.hierarchy.toLowerCase() === inputValue.toLowerCase()
+                ) ? (
+                  <>
+                    Add "{inputValue}"
+                    <button
+                      type='button'
+                      className='btn btnMain btnMainInsideField btnMainAdd'
+                      title='Add'
+                    >
+                      <svg
+                        xmlns='http://www.w3.org/2000/svg'
+                        viewBox='-32 0 512 512'
+                        width='1em'
+                        height='1em'
+                        fill='currentColor'
+                      >
+                        <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
+                      </svg>
+                    </button>
+                  </>
+                ) : (
+                  <>No matches</>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      {LTags.length > 0 && (
+        <div className='IBMSMSMBSSCategories'>
+          {LTags.map((hierarchy) => {
+            const hierarchicalCategories = hierarchy.split(`:`)
+            const categories = hierarchicalCategories
+              .map<React.ReactNode>((c, i) => {
+                const partialHierarchy = hierarchicalCategories
+                  .slice(0, i + 1)
+                  .join(':')
+
+                return game ? (
+                  <Link
+                    key={`category-${i}`}
+                    target='_blank'
+                    to={{
+                      pathname: getGamePageRoute(game),
+                      search: `h=${partialHierarchy}`
+                    }}
+                    className='IBMSMSMBSSCategoriesBoxItem'
+                  >
+                    <p>{capitalizeEachWord(c)}</p>
+                  </Link>
+                ) : (
+                  <p className='IBMSMSMBSSCategoriesBoxItem'>
+                    {capitalizeEachWord(c)}
+                  </p>
+                )
+              })
+              .reduce((prev, curr, i) => [
+                prev,
+                <div
+                  key={`separator-${i}`}
+                  className='IBMSMSMBSSCategoriesBoxSeparator'
+                >
+                  <p>&gt;</p>
+                </div>,
+                curr
+              ])
+
+            return (
+              <div key={hierarchy} className='IBMSMSMBSSCategoriesBox'>
+                {categories}
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}

src/components/Filters/CategoryFilterPopup.tsx

@@ -43,13 +43,13 @@ export const CategoryFilterPopup = ({
       ),
     [inputValue, userHierarchies]
   )
-  const hierarchiesMatching = useMemo(
-    () =>
-      flattenCategories(categoriesData, []).some((h) =>
-        h.hierarchy.includes(inputValue.toLowerCase())
-      ),
-    [inputValue]
-  )
+  // const hierarchiesMatching = useMemo(
+  //   () =>
+  //     flattenCategories(categoriesData, []).some((h) =>
+  //       h.hierarchy.includes(inputValue.toLowerCase())
+  //     ),
+  //   [inputValue]
+  // )
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value)
@@ -230,7 +230,7 @@ export const CategoryFilterPopup = ({
                         <div>Already defined in your categories</div>
                       ) : (
                         <div
-                          className='dropdown-item dropdownMainMenuItem'
+                          className='dropdown-item dropdownMainMenuItem dropdownMainMenuItemCategory'
                           onClick={handleAddNew}
                         >
                           Add and search for "{inputValue}" category
@@ -392,10 +392,8 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
     <>
       {isMatching && (
         <div
-          className='dropdown-item dropdownMainMenuItem'
+          className='dropdown-item dropdownMainMenuItem dropdownMainMenuItemCategory dropdownMainMenuItemCategoryAlt'
           style={{
-            display: 'flex',
-            alignItems: 'center',
             marginLeft: `${indentLevel * 20}px`,
             width: `calc(100% - ${indentLevel * 20}px)`
           }}
@@ -420,7 +418,10 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
               checked={isCombinationChecked}
               onChange={handleCombinationChange}
             />
-            <label htmlFor={name} className='form-label labelMain'>
+            <label
+              htmlFor={name}
+              className='form-label labelMain labelMainCategory'
+            >
               {capitalizeEachWord(name)}
             </label>
             <input
@@ -436,19 +437,19 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
             />
             {typeof handleRemove === 'function' && (
               <button
-                className='btn btnMain btnMainRemove'
+                className='btn btnMain btnMainInsideField btnMainRemove'
                 title='Remove'
                 type='button'
                 onClick={() => handleRemove(path)}
               >
                 <svg
                   xmlns='http://www.w3.org/2000/svg'
-                  viewBox='0 0 512 512'
+                  viewBox='-32 0 512 512'
                   width='1em'
                   height='1em'
                   fill='currentColor'
                 >
-                  <path d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'></path>
+                  <path d='M323.3 32.01H188.7C172.3 32.01 160 44.31 160 60.73V96.01H32C14.33 96.01 0 110.3 0 128S14.33 160 32 160H480c17.67 0 32-14.33 32-32.01S497.7 96.01 480 96.01H352v-35.28C352 44.31 339.7 32.01 323.3 32.01zM64.9 477.5C66.5 492.3 79.31 504 94.72 504H417.3c15.41 0 28.22-11.72 29.81-26.5L480 192.2H32L64.9 477.5z'></path>
                 </svg>
               </button>
             )}
@@ -472,11 +473,7 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
                     selectedSingles={selectedSingles}
                     selectedCombinations={selectedCombinations}
                     indentLevel={indentLevel + 1}
-                    {...(typeof handleRemove === 'function'
-                      ? {
-                          handleRemove
-                        }
-                      : {})}
+                    handleRemove={handleRemove}
                   />
                 )
               } else {
@@ -491,11 +488,7 @@ const CategoryCheckbox: React.FC<CategoryCheckboxProps> = ({
                     selectedSingles={selectedSingles}
                     selectedCombinations={selectedCombinations}
                     indentLevel={indentLevel + 1}
-                    {...(typeof handleRemove === 'function'
-                      ? {
-                          handleRemove
-                        }
-                      : {})}
+                    handleRemove={handleRemove}
                   />
                 )
               }

src/components/ModForm.tsx

@@ -8,18 +8,16 @@ import React, {
   useRef,
   useState
 } from 'react'
-import { Link, useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { FixedSizeList } from 'react-window'
 import { v4 as uuidv4 } from 'uuid'
 import { T_TAG_VALUE } from '../constants'
 import { useAppSelector, useGames, useNDKContext } from '../hooks'
-import { appRoutes, getGamePageRoute, getModPageRoute } from '../routes'
+import { appRoutes, getModPageRoute } from '../routes'
 import '../styles/styles.css'
-import { Categories, DownloadUrl, ModDetails, ModFormState } from '../types'
+import { DownloadUrl, ModDetails, ModFormState } from '../types'
 import {
-  capitalizeEachWord,
-  getCategories,
   initializeFormState,
   isReachable,
   isValidImageUrl,
@@ -32,6 +30,7 @@ import { CheckboxField, InputError, InputField } from './Inputs'
 import { LoadingSpinner } from './LoadingSpinner'
 import { NDKEvent } from '@nostr-dev-kit/ndk'
 import { OriginalAuthor } from './OriginalAuthor'
+import { CategoryAutocomplete } from './CategoryAutocomplete'
 
 interface FormErrors {
   game?: string
@@ -463,6 +462,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
             className='btn btnMain btnMainAdd'
             type='button'
             onClick={addScreenshotUrl}
+            title='Add'
           >
             <svg
               xmlns='http://www.w3.org/2000/svg'
@@ -509,7 +509,6 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
       />
       <CategoryAutocomplete
         game={formState.game}
-        lTags={formState.lTags}
         LTags={formState.LTags}
         setFormState={setFormState}
       />
@@ -520,6 +519,7 @@ export const ModForm = ({ existingModData }: ModFormProps) => {
             className='btn btnMain btnMainAdd'
             type='button'
             onClick={addDownloadUrl}
+            title='Add'
           >
             <svg
               xmlns='http://www.w3.org/2000/svg'
@@ -620,6 +620,7 @@ const DownloadUrlFields = React.memo(
             className='btn btnMain btnMainRemove'
             type='button'
             onClick={() => onRemove(index)}
+            title='Remove'
           >
             <svg
               xmlns='http://www.w3.org/2000/svg'
@@ -774,6 +775,7 @@ const ScreenshotUrlFields = React.memo(
           className='btn btnMain btnMainRemove'
           type='button'
           onClick={() => onRemove(index)}
+          title='Remove'
         >
           <svg
             xmlns='http://www.w3.org/2000/svg'
@@ -854,6 +856,7 @@ const GameDropdown = ({
             className='btn btnMain btnMainInsideField btnMainRemove'
             type='button'
             onClick={() => onChange('game', '')}
+            title='Remove'
           >
             <svg
               xmlns='http://www.w3.org/2000/svg'
@@ -901,253 +904,3 @@ const GameDropdown = ({
     </div>
   )
 }
-
-interface CategoryAutocompleteProps {
-  game: string
-  lTags: string[]
-  LTags: string[]
-  setFormState: (value: React.SetStateAction<ModFormState>) => void
-}
-
-export const CategoryAutocomplete = ({
-  game,
-  lTags,
-  LTags,
-  setFormState
-}: CategoryAutocompleteProps) => {
-  const flattenedCategories = getCategories()
-  const initialCategories = lTags.map((name) => {
-    const existingCategory = flattenedCategories.find(
-      (cat) => cat.name === name
-    )
-    if (existingCategory) {
-      return existingCategory
-    } else {
-      return { name, hierarchy: name, l: [name] }
-    }
-  })
-  const [selectedCategories, setSelectedCategories] =
-    useState<Categories[]>(initialCategories)
-  const [inputValue, setInputValue] = useState<string>('')
-  const [filteredOptions, setFilteredOptions] = useState<Categories[]>()
-
-  useEffect(() => {
-    const newFilteredOptions = flattenedCategories.filter((option) =>
-      option.hierarchy.toLowerCase().includes(inputValue.toLowerCase())
-    )
-    setFilteredOptions(newFilteredOptions)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inputValue])
-
-  const getSelectedCategories = (cats: Categories[]) => {
-    const uniqueValues = new Set(
-      cats.reduce<string[]>((prev, cat) => [...prev, ...cat.l], [])
-    )
-    const concatenatedValue = Array.from(uniqueValues)
-    return concatenatedValue
-  }
-  const getSelectedhierarchy = (cats: Categories[]) => {
-    const hierarchies = cats.reduce<string[]>(
-      (prev, cat) => [...prev, cat.hierarchy.replace(/ > /g, ':')],
-      []
-    )
-    const concatenatedValue = Array.from(hierarchies)
-    return concatenatedValue
-  }
-  const handleReset = () => {
-    setSelectedCategories([])
-    setInputValue('')
-  }
-  const handleRemove = (option: Categories) => {
-    setSelectedCategories(
-      selectedCategories.filter((cat) => cat.hierarchy !== option.hierarchy)
-    )
-  }
-  const handleSelect = (option: Categories) => {
-    if (!selectedCategories.some((cat) => cat.hierarchy === option.hierarchy)) {
-      setSelectedCategories([...selectedCategories, option])
-    }
-    setInputValue('')
-  }
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value)
-  }
-  const handleAddNew = () => {
-    if (inputValue) {
-      const value = inputValue.trim().toLowerCase()
-      const newOption: Categories = {
-        name: value,
-        hierarchy: value,
-        l: value.split('>').map((s) => s.trim())
-      }
-      setSelectedCategories([...selectedCategories, newOption])
-      setInputValue('')
-    }
-  }
-
-  useEffect(() => {
-    setFormState((prevState) => ({
-      ...prevState,
-      ['lTags']: getSelectedCategories(selectedCategories),
-      ['LTags']: getSelectedhierarchy(selectedCategories)
-    }))
-  }, [selectedCategories, setFormState])
-
-  const Row = ({ index }: { index: number }) => {
-    if (!filteredOptions) return null
-
-    return (
-      <div
-        className='dropdown-item dropdownMainMenuItem'
-        onClick={() => handleSelect(filteredOptions[index])}
-      >
-        {capitalizeEachWord(filteredOptions[index].hierarchy)}
-        {selectedCategories.some(
-          (cat) => cat.hierarchy === filteredOptions[index].hierarchy
-        ) && (
-          <button
-            type='button'
-            className='btn btnMain btnMainInsideField btnMainRemove'
-            onClick={() => handleRemove(filteredOptions[index])}
-          >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='-32 0 512 512'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-            >
-              <path d='M323.3 32.01H188.7C172.3 32.01 160 44.31 160 60.73V96.01H32C14.33 96.01 0 110.3 0 128S14.33 160 32 160H480c17.67 0 32-14.33 32-32.01S497.7 96.01 480 96.01H352v-35.28C352 44.31 339.7 32.01 323.3 32.01zM64.9 477.5C66.5 492.3 79.31 504 94.72 504H417.3c15.41 0 28.22-11.72 29.81-26.5L480 192.2H32L64.9 477.5z'></path>
-            </svg>
-          </button>
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div className='inputLabelWrapperMain'>
-      <label className='form-label labelMain'>Categories</label>
-      <p className='labelDescriptionMain'>You can select multiple categories</p>
-      <div className='dropdown dropdownMain'>
-        <div className='inputWrapperMain inputWrapperMainAlt'>
-          <input
-            type='text'
-            className='inputMain inputMainWithBtn dropdown-toggle'
-            placeholder='Select some categories...'
-            aria-expanded='false'
-            data-bs-toggle='dropdown'
-            value={inputValue}
-            onChange={handleInputChange}
-          />
-          <button
-            className='btn btnMain btnMainInsideField btnMainRemove'
-            title='Remove'
-            type='button'
-            onClick={handleReset}
-          >
-            <svg
-              xmlns='http://www.w3.org/2000/svg'
-              viewBox='0 0 512 512'
-              width='1em'
-              height='1em'
-              fill='currentColor'
-            >
-              <path d='M480 416C497.7 416 512 430.3 512 448C512 465.7 497.7 480 480 480H150.6C133.7 480 117.4 473.3 105.4 461.3L25.37 381.3C.3786 356.3 .3786 315.7 25.37 290.7L258.7 57.37C283.7 32.38 324.3 32.38 349.3 57.37L486.6 194.7C511.6 219.7 511.6 260.3 486.6 285.3L355.9 416H480zM265.4 416L332.7 348.7L195.3 211.3L70.63 336L150.6 416L265.4 416z'></path>
-            </svg>
-          </button>
-
-          <div
-            className='dropdown-menu dropdownMainMenu dropdownMainMenuAlt category'
-            style={{
-              maxHeight: '500px'
-            }}
-          >
-            {filteredOptions && filteredOptions.length > 0 ? (
-              filteredOptions.map((c, i) => <Row key={c.hierarchy} index={i} />)
-            ) : (
-              <div
-                className='dropdown-item dropdownMainMenuItem'
-                onClick={handleAddNew}
-              >
-                {inputValue &&
-                !filteredOptions?.find(
-                  (option) =>
-                    option.hierarchy.toLowerCase() === inputValue.toLowerCase()
-                ) ? (
-                  <>
-                    Add "{inputValue}"
-                    <button
-                      type='button'
-                      className='btn btnMain btnMainInsideField btnMainAdd'
-                      title='Add'
-                    >
-                      <svg
-                        xmlns='http://www.w3.org/2000/svg'
-                        viewBox='-32 0 512 512'
-                        width='1em'
-                        height='1em'
-                        fill='currentColor'
-                      >
-                        <path d='M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z'></path>
-                      </svg>
-                    </button>
-                  </>
-                ) : (
-                  <>No matches</>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-      {LTags.length > 0 && (
-        <div className='IBMSMSMBSSCategories'>
-          {LTags.map((hierarchy) => {
-            const hierarchicalCategories = hierarchy.split(`:`)
-            const categories = hierarchicalCategories
-              .map<React.ReactNode>((c, i) => {
-                const partialHierarchy = hierarchicalCategories
-                  .slice(0, i + 1)
-                  .join(':')
-
-                return game ? (
-                  <Link
-                    key={`category-${i}`}
-                    target='_blank'
-                    to={{
-                      pathname: getGamePageRoute(game),
-                      search: `h=${partialHierarchy}`
-                    }}
-                    className='IBMSMSMBSSCategoriesBoxItem'
-                  >
-                    <p>{capitalizeEachWord(c)}</p>
-                  </Link>
-                ) : (
-                  <p className='IBMSMSMBSSCategoriesBoxItem'>
-                    {capitalizeEachWord(c)}
-                  </p>
-                )
-              })
-              .reduce((prev, curr, i) => [
-                prev,
-                <div
-                  key={`separator-${i}`}
-                  className='IBMSMSMBSSCategoriesBoxSeparator'
-                >
-                  <p>&gt;</p>
-                </div>,
-                curr
-              ])
-
-            return (
-              <div key={hierarchy} className='IBMSMSMBSSCategoriesBox'>
-                {categories}
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}

src/styles/styles.css

@@ -318,6 +318,14 @@ h6 {
   cursor: pointer;
 }
 
+.dropdownMainMenuItem.dropdownMainMenuItemCategory {
+  position: relative;
+}
+.dropdownMainMenuItemCategory.dropdownMainMenuItemCategoryAlt {
+  display: flex;
+  align-items: center;
+}
+
 .dropdownMainMenuItem:hover {
   transition: background ease 0.4s, color ease 0.4s;
   background: linear-gradient(
@@ -385,6 +393,10 @@ h6 {
   justify-content: center;
 }
 
+.labelMain.labelMainCategory {
+  flex-grow: 1;
+}
+
 .inputWrapperMain {
   width: 100%;
   display: flex;
@@ -641,6 +653,9 @@ a:hover {
   bottom: 0;
   border-radius: unset;
 }
+.btnMainInsideField + .btnMainInsideField {
+  right: 50px;
+}
 
 .inputMain.inputMainWithBtn {
   padding-right: 50px;