Make it say there is no versions available if there are none, rather than showing nothing

src/popups/GamesDownload.tsx

@@ -6,20 +6,28 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 export default function GamesDownloadPopup () {
-  const { serverVersionList, setSelectedGame } = useGlobal()
+  const {
+    serverVersionList,
+    setSelectedGame,
+    setManagingGame,
+    setPopupMode,
+    setShowPopup,
+    setFadeOut,
+    setViewingInfoFromDownloads
+  } = useGlobal()
 
   return (
     <>
       <p className='text-xl text-center'>Select a game to download</p>
       <div className='popup-content'>
         {serverVersionList?.games
-          .filter(i => {
+          .filter(g => {
             const gameVersions = serverVersionList.versions.filter(
-              vf => vf.game === i.id
+              gv => gv.game === g.id
             )
             if (gameVersions.length > 0) return true
           })
-          .map((v, i) => (
+          .map((g, i) => (
             <div
               key={i}
               className='popup-entry grid items-center gap-3'
@@ -27,15 +35,21 @@ export default function GamesDownloadPopup () {
             >
               <button
                 className='button btntheme3'
-                onClick={() => setSelectedGame(v.id)}
+                onClick={() => {
+                  setViewingInfoFromDownloads(true)
+                  setManagingGame(g.id)
+                  setPopupMode(5)
+                  setShowPopup(true)
+                  setFadeOut(false)
+                }}
                 title='Click to view game info.'
               >
                 <FontAwesomeIcon icon={faInfo} /> Info
               </button>
-              <p className='text-2xl text-center truncate'>{v.name}</p>
+              <p className='text-2xl text-center truncate'>{g.name}</p>
               <button
                 className='button btntheme3'
-                onClick={() => setSelectedGame(v.id)}
+                onClick={() => setSelectedGame(g.id)}
                 title='Click to view more versions of the game.'
               >
                 <FontAwesomeIcon icon={faArrowUpRightFromSquare} /> View

src/popups/ManageGame.tsx

@@ -19,7 +19,6 @@ export default function ManageGamePopup () {
   const {
     versionsList,
     serverVersionList,
-    viewingInfoFromDownloads,
     closePopup,
     versions,
     customDataLocation,
@@ -35,7 +34,7 @@ export default function ManageGamePopup () {
   const gameInfo = serverVersionList?.games.find(vf => vf.id == managingGame)
 
   useEffect(() => {
-    if (viewingInfoFromDownloads || !versionsInstalled) return
+    if (!versionsInstalled || versionsInstalled.length == 0) return
 
     let cancelled = false
 
@@ -60,7 +59,7 @@ export default function ManageGamePopup () {
     return () => {
       cancelled = true
     }
-  }, [versionsInstalled, viewingInfoFromDownloads])
+  }, [versionsInstalled])
 
   return (
     <>
@@ -105,17 +104,15 @@ export default function ManageGamePopup () {
         </div>
         <div
           className='entry-info-item btntheme2'
-          hidden={viewingInfoFromDownloads}
+          hidden={versionsInstalled?.length == 0}
         >
           <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
           <p>
             Size on disk:{' '}
-            {gameSize && gameSize > 0
-              ? prettyBytes(gameSize, {
+            {prettyBytes(gameSize, {
               minimumFractionDigits: 2,
               maximumFractionDigits: 2
-                })
-              : 'N/A'}
+            })}
           </p>
         </div>
         <div
@@ -160,7 +157,7 @@ export default function ManageGamePopup () {
             }
           }}
           title='Click to uninstall this game. This will NOT remove any progress or any save files.'
-          hidden={viewingInfoFromDownloads}
+          hidden={versionsInstalled?.length == 0}
         >
           Uninstall
         </div>

src/popups/ManageVersion.tsx

@@ -101,12 +101,10 @@ export default function ManageVersionPopup () {
           <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
           <p>
             Size on disk:{' '}
-            {versionSize && versionSize > 0
-              ? prettyBytes(versionSize, {
+            {prettyBytes(versionSize, {
               minimumFractionDigits: 2,
               maximumFractionDigits: 2
-                })
-              : 'N/A'}
+            })}
           </p>
         </div>
         <div

src/popups/VersionsDownload.tsx

@@ -25,7 +25,8 @@ export default function VersionsDownloadPopup () {
     <>
       <p className='text-xl text-center'>Select versions to download</p>
       <div className='popup-content'>
-        {list.map((v, i) => (
+        {list.length != 0 ? (
+          list.map((v, i) => (
             <div
               key={i}
               className='popup-entry grid items-center gap-3'
@@ -42,7 +43,10 @@ export default function VersionsDownloadPopup () {
               >
                 <FontAwesomeIcon icon={faInfo} /> Info
               </button>
-            <p className='text-2xl text-center truncate' title={v.displayName}>
+              <p
+                className='text-2xl text-center truncate'
+                title={v.displayName}
+              >
                 {v.displayName}
               </p>
               <button
@@ -71,7 +75,13 @@ export default function VersionsDownloadPopup () {
                 )}
               </button>
             </div>
-        ))}
+          ))
+        ) : (
+          <div className='flex flex-col gap-2 justify-center text-center w-full h-full'>
+            <p className='text-2xl'>No versions available to download</p>
+            <p>You may have all versions installed for this game</p>
+          </div>
+        )}
       </div>
       <div className='flex justify-center'>
         <button