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,
-                  minimumFractionDigits: 2,
+              maximumFractionDigits: 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,
-                  minimumFractionDigits: 2,
+              maximumFractionDigits: 2
-                  maximumFractionDigits: 2
+            })}
-                })
-              : 'N/A'}
           </p>
         </div>
         <div

src/popups/VersionsDownload.tsx

@@ -25,53 +25,63 @@ 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 ? (
-          <div
+          list.map((v, i) => (
-            key={i}
+            <div
-            className='popup-entry grid items-center gap-3'
+              key={i}
-            style={{ gridTemplateColumns: 'auto minmax(0, 1fr) auto' }}
+              className='popup-entry grid items-center gap-3'
-          >
+              style={{ gridTemplateColumns: 'auto minmax(0, 1fr) auto' }}
-            <button
-              className='button btntheme3'
-              onClick={() => {
-                setManagingVersion(v.id)
-                setViewingInfoFromDownloads(true)
-                setPopupMode(2)
-              }}
-              title='Click to view version info.'
             >
-              <FontAwesomeIcon icon={faInfo} /> Info
+              <button
-            </button>
+                className='button btntheme3'
-            <p className='text-2xl text-center truncate' title={v.displayName}>
+                onClick={() => {
-              {v.displayName}
+                  setManagingVersion(v.id)
-            </p>
+                  setViewingInfoFromDownloads(true)
-            <button
+                  setPopupMode(2)
-              className='button btntheme3'
+                }}
-              onClick={() => {
+                title='Click to view version info.'
-                setSelectedVersionList(prev =>
+              >
-                  prev.includes(v.id)
+                <FontAwesomeIcon icon={faInfo} /> Info
-                    ? prev.filter(i => i !== v.id)
+              </button>
-                    : [...prev, v.id]
+              <p
-                )
+                className='text-2xl text-center truncate'
-              }}
+                title={v.displayName}
-              title={
+              >
-                selectedVersionList.includes(v.id)
+                {v.displayName}
-                  ? 'This version will be downloaded. Click to remove from the list of versions that will be downloaded.'
+              </p>
-                  : 'This version will NOT be downloaded. Click to add from the list of versions that will be downloaded.'
+              <button
-              }
+                className='button btntheme3'
-            >
+                onClick={() => {
-              {selectedVersionList.includes(v.id) ? (
+                  setSelectedVersionList(prev =>
-                <>
+                    prev.includes(v.id)
-                  <FontAwesomeIcon icon={faRemove} /> Remove
+                      ? prev.filter(i => i !== v.id)
-                </>
+                      : [...prev, v.id]
-              ) : (
+                  )
-                <>
+                }}
-                  <FontAwesomeIcon icon={faAdd} /> Add
+                title={
-                </>
+                  selectedVersionList.includes(v.id)
-              )}
+                    ? 'This version will be downloaded. Click to remove from the list of versions that will be downloaded.'
-            </button>
+                    : 'This version will NOT be downloaded. Click to add from the list of versions that will be downloaded.'
+                }
+              >
+                {selectedVersionList.includes(v.id) ? (
+                  <>
+                    <FontAwesomeIcon icon={faRemove} /> Remove
+                  </>
+                ) : (
+                  <>
+                    <FontAwesomeIcon icon={faAdd} /> Add
+                  </>
+                )}
+              </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