[Fix] Hide hidden games in Favourites and Recent Games sections (#3389)

* [Fix] Hide hidden games in Favourites section

* Make favouriteGamesAsList more readable and efficient

* [Fix] Hide hidden games in Recent Games section

* [Fix] Gray out image of first game in Recents if it is hidden and Show Hidden is enabled

src/frontend/screens/Library/components/GameCard/index.css

@@ -126,6 +126,10 @@
   grid-template-areas: 'update gap settings play';
 }
 
+.gameCard.justPlayed.hidden .justPlayedImg {
+  opacity: 0.2;
+}
+
 .gameCard.gamepad > .icons {
   display: none;
 }

src/frontend/screens/Library/components/RecentlyPlayed/index.tsx

@@ -8,6 +8,7 @@ import { configStore } from 'frontend/helpers/electronStores'
 interface Props {
   handleModal: (appName: string, runner: Runner, gameInfo: GameInfo) => void
   onlyInstalled: boolean
+  showHidden: boolean
 }
 
 function getRecentGames(
@@ -34,15 +35,19 @@ function getRecentGames(
 
 export default React.memo(function RecentlyPlayed({
   handleModal,
-  onlyInstalled
+  onlyInstalled,
+  showHidden
 }: Props) {
   const { t } = useTranslation()
   const { epic, gog, sideloadedLibrary, amazon } = useContext(ContextProvider)
   const [recentGames, setRecentGames] = useState<GameInfo[]>([])
 
+  const hiddenGames = useContext(ContextProvider).hiddenGames
+
   const loadRecentGames = async () => {
+    const hiddenAppNames = hiddenGames.list.map((game) => game.appName)
     const { maxRecentGames } = await window.api.requestAppSettings()
-    const newRecentGames = getRecentGames(
+    let newRecentGames = getRecentGames(
       [
         ...epic.library,
         ...gog.library,
@@ -52,7 +57,11 @@ export default React.memo(function RecentlyPlayed({
       maxRecentGames,
       onlyInstalled
     )
-
+    if (!showHidden) {
+      newRecentGames = newRecentGames.filter(
+        (game: GameInfo) => !hiddenAppNames.includes(game.app_name)
+      )
+    }
     setRecentGames(newRecentGames)
   }
 
@@ -69,7 +78,14 @@ export default React.memo(function RecentlyPlayed({
     return () => {
       recentGamesChangedRemoveListener()
     }
-  }, [epic.library, gog.library, amazon.library, sideloadedLibrary])
+  }, [
+    epic.library,
+    gog.library,
+    amazon.library,
+    sideloadedLibrary,
+    hiddenGames,
+    showHidden
+  ])
 
   if (!recentGames.length) {
     return null

src/frontend/screens/Library/index.tsx

@@ -306,13 +306,27 @@ export default React.memo(function Library(): JSX.Element {
   // top section
   const showRecentGames = libraryTopSection.startsWith('recently_played')
 
+  const favouriteGamesList = useMemo(() => {
+    if (showHidden) {
+      return favouriteGames.list
+    }
+
+    const hiddenAppNames = hiddenGames.list.map(
+      (hidden: HiddenGame) => hidden.appName
+    )
+
+    return favouriteGames.list.filter(
+      (game) => !hiddenAppNames.includes(game.appName)
+    )
+  }, [favouriteGames, showHidden, hiddenGames])
+
   const showFavourites =
-    libraryTopSection === 'favourites' && !!favouriteGames.list.length
+    libraryTopSection === 'favourites' && !!favouriteGamesList.length
 
   const favourites = useMemo(() => {
     const tempArray: GameInfo[] = []
     if (showFavourites || showFavouritesLibrary) {
-      const favouriteAppNames = favouriteGames.list.map(
+      const favouriteAppNames = favouriteGamesList.map(
         (favourite: FavouriteGame) => favourite.appName
       )
       epic.library.forEach((game) => {
@@ -333,7 +347,14 @@ export default React.memo(function Library(): JSX.Element {
       const gameB = b.title.toUpperCase().replace('THE ', '')
       return gameA.localeCompare(gameB)
     })
-  }, [showFavourites, showFavouritesLibrary, favouriteGames, epic, gog, amazon])
+  }, [
+    showFavourites,
+    showFavouritesLibrary,
+    favouriteGamesList,
+    epic,
+    gog,
+    amazon
+  ])
 
   const favouritesIds = useMemo(() => {
     return favourites.map((game) => `${game.app_name}_${game.runner}`)
@@ -591,6 +612,7 @@ export default React.memo(function Library(): JSX.Element {
           <RecentlyPlayed
             handleModal={handleModal}
             onlyInstalled={libraryTopSection.endsWith('installed')}
+            showHidden={showHidden}
           />
         )}