[Enhancement]: When selecting item from search bar, it will take you directly to item's game page

src/frontend/components/UI/SearchBar/index.tsx

@@ -7,10 +7,12 @@ import React, {
   useRef
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 import ContextProvider from 'frontend/state/ContextProvider'
 import './index.css'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { GameInfo } from '../../../../common/types'
 
 function fixFilter(text: string) {
   const regex = new RegExp(/([?\\|*|+|(|)|[|]|])+/, 'g')
@@ -21,6 +23,8 @@ export default React.memo(function SearchBar() {
   const { handleSearch, filterText, epic, gog, sideloadedLibrary } =
     useContext(ContextProvider)
   const { t } = useTranslation()
+  const navigate = useNavigate()
+
   const input = useRef<HTMLInputElement>(null)
 
   const list = useMemo(() => {
@@ -61,12 +65,35 @@ export default React.memo(function SearchBar() {
   }, [input])
 
   const handleClick = (title: string) => {
+    handleSearch('')
     if (input.current) {
-      input.current.value = title
-      handleSearch(title)
+      input.current.value = ''
+
+      const game: GameInfo | undefined = getGameInfoByAppTitle(title)
+
+      if (game !== undefined) {
+        navigate(`/gamepage/${game.runner}/${game.app_name}`, {
+          state: { gameInfo: game }
+        })
+      }
     }
   }
 
+  const getGameInfoByAppTitle = (title: string) => {
+    return (
+      getGameInfoByAppTitleAndLibrary(epic.library, title) ||
+      getGameInfoByAppTitleAndLibrary(gog.library, title) ||
+      getGameInfoByAppTitleAndLibrary(sideloadedLibrary, title)
+    )
+  }
+
+  const getGameInfoByAppTitleAndLibrary = (
+    library: GameInfo[],
+    title: string
+  ) => {
+    return library.filter((g: GameInfo) => g.title === title).at(0)
+  }
+
   return (
     <div className="SearchBar" data-testid="searchBar">
       <span className="searchButton" tabIndex={-1}>