[UX] Add messages when there are no games to display in the library

public/locales/en/translation.json

@@ -222,6 +222,10 @@
         },
         "title": "Downloads"
     },
+    "emptyLibrary": {
+        "noGames": "Your library is empty. You can <1>log in</1> using a store or click <3></3> to add one manually.",
+        "noResults": "The current filters produced no results."
+    },
     "epic": {
         "offline-notification-body": "Online services may not work fully as Epic Games servers are offline!",
         "offline-notification-title": "offline"

src/frontend/screens/Library/LibraryContext.tsx

@@ -24,7 +24,8 @@ const initialContext: LibraryContextType = {
   sortInstalled: true,
   setSortInstalled: () => null,
   showSupportOfflineOnly: false,
-  setShowSupportOfflineOnly: () => null
+  setShowSupportOfflineOnly: () => null,
+  handleAddGameButtonClick: () => null
 }
 
 export default React.createContext(initialContext)

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

@@ -0,0 +1,16 @@
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import LibraryContext from '../../LibraryContext'
+
+function AddGameButton() {
+  const { t } = useTranslation()
+  const { handleAddGameButtonClick } = useContext(LibraryContext)
+
+  return (
+    <button className="sideloadGameButton" onClick={handleAddGameButtonClick}>
+      {t('add_game', 'Add Game')}
+    </button>
+  )
+}
+
+export default AddGameButton

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

@@ -0,0 +1,14 @@
+.noResultsMessage {
+  font-size: 2rem;
+  max-width: 500px;
+  margin: auto;
+  padding-bottom: 20%;
+  .sideloadGameButton {
+    margin: 0;
+    display: inline;
+    vertical-align: text-bottom;
+  }
+  & a {
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,36 @@
+import React, { useContext } from 'react'
+import ContextProvider from 'frontend/state/ContextProvider'
+import { Trans, useTranslation } from 'react-i18next'
+import './index.css'
+import { NavLink } from 'react-router-dom'
+import AddGameButton from '../AddGameButton'
+
+function EmptyLibraryMessage() {
+  const { epic, gog, amazon, sideloadedLibrary } = useContext(ContextProvider)
+  const { i18n } = useTranslation()
+
+  let message = (
+    <Trans i18n={i18n} i18nKey="emptyLibrary.noGames">
+      Your library is empty. You can <NavLink to="/login">log in</NavLink> using
+      a store or click <AddGameButton /> to add one manually.
+    </Trans>
+  )
+
+  if (
+    epic.library.length +
+      gog.library.length +
+      amazon.library.length +
+      sideloadedLibrary.length >
+    0
+  ) {
+    message = (
+      <Trans i18n={i18n} i18nKey="emptyLibrary.noResults">
+        The current filters produced no results.
+      </Trans>
+    )
+  }
+
+  return <p className="noResultsMessage">{message}</p>
+}
+
+export default EmptyLibraryMessage

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

@@ -4,16 +4,13 @@ import ActionIcons from 'frontend/components/UI/ActionIcons'
 import { GameInfo } from 'common/types'
 import LibraryContext from '../../LibraryContext'
 import './index.css'
+import AddGameButton from '../AddGameButton'
 
 type Props = {
   list: GameInfo[]
-  handleAddGameButtonClick: () => void
 }
 
-export default React.memo(function LibraryHeader({
-  list,
-  handleAddGameButtonClick
-}: Props) {
+export default React.memo(function LibraryHeader({ list }: Props) {
   const { t } = useTranslation()
   const { showFavourites } = useContext(LibraryContext)
 
@@ -38,12 +35,7 @@ export default React.memo(function LibraryHeader({
             ? t('favourites', 'Favourites')
             : t('title.allGames', 'All Games')}
           <span className="numberOfgames">{numberOfGames}</span>
-          <button
-            className="sideloadGameButton"
-            onClick={handleAddGameButtonClick}
-          >
-            {t('add_game', 'Add Game')}
-          </button>
+          <AddGameButton />
         </span>
         <ActionIcons />
       </div>

src/frontend/screens/Library/index.tsx

@@ -31,6 +31,7 @@ import { InstallModal } from './components'
 import LibraryContext from './LibraryContext'
 import { Category, PlatformsFilters, StoresFilters } from 'frontend/types'
 import { hasHelp } from 'frontend/hooks/hasHelp'
+import EmptyLibraryMessage from './components/EmptyLibrary'
 
 const storage = window.localStorage
 
@@ -594,7 +595,8 @@ export default React.memo(function Library(): JSX.Element {
         showSupportOfflineOnly,
         setShowSupportOfflineOnly: handleShowSupportOfflineOnly,
         sortDescending,
-        sortInstalled
+        sortInstalled,
+        handleAddGameButtonClick: () => handleModal('', 'sideload', null)
       }}
     >
       <Header />
@@ -621,20 +623,20 @@ export default React.memo(function Library(): JSX.Element {
           </>
         )}
 
-        <LibraryHeader
-          list={libraryToShow}
-          handleAddGameButtonClick={() => handleModal('', 'sideload', null)}
-        />
+        <LibraryHeader list={libraryToShow} />
 
         {refreshing && !refreshingInTheBackground && <UpdateComponent inline />}
 
-        {(!refreshing || refreshingInTheBackground) && (
-          <GamesList
-            library={libraryToShow}
-            layout={layout}
-            handleGameCardClick={handleModal}
-          />
-        )}
+        {libraryToShow.length === 0 && <EmptyLibraryMessage />}
+
+        {libraryToShow.length > 0 &&
+          (!refreshing || refreshingInTheBackground) && (
+            <GamesList
+              library={libraryToShow}
+              layout={layout}
+              handleGameCardClick={handleModal}
+            />
+          )}
       </div>
 
       <button id="backToTopBtn" onClick={backToTop} ref={backToTopElement}>

src/frontend/types.ts

@@ -228,6 +228,7 @@ export interface LibraryContextType {
   setSortInstalled: (value: boolean) => void
   showSupportOfflineOnly: boolean
   setShowSupportOfflineOnly: (value: boolean) => void
+  handleAddGameButtonClick: () => void
 }
 
 export interface GameContextType {