Finish info popup

src/app/GlobalProvider.tsx

@@ -34,6 +34,7 @@ type GlobalCtxType = {
     installed: number
     total: number
   } | null
+  viewingInfoFromDownloads: boolean
 }
 
 const GlobalCtx = createContext<GlobalCtxType | null>(null)

src/app/Globals.css

@@ -139,7 +139,7 @@ body {
 }
 
 .entry-info-item {
-  @apply flex flex-row items-center gap-1 bg-(--col1) border border-(--col3) text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px] transition-colors;
+  @apply flex flex-row items-center gap-1 bg-(--col1) border border-(--col3) text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px] transition-colors cursor-pointer;
 }
 
 .downloads-entry:hover .entry-info-item {

src/app/componets/VersionInfo.tsx

@@ -19,7 +19,8 @@ export default function VersionInfo () {
     getVersionGame,
     getVersionInfo,
     managingVersion,
-    downloadedVersionsConfig
+    downloadedVersionsConfig,
+    viewingInfoFromDownloads
   } = useGlobal()
   if (!managingVersion || !downloadedVersionsConfig) return <></>
 
@@ -43,11 +44,13 @@ export default function VersionInfo () {
         {getVersionInfo(managingVersion)?.versionName}
       </p>
       <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
-        <div className='entry-info-item'>
+        <div className='entry-info-item' hidden={viewingInfoFromDownloads}>
           <p>
             Installed{' '}
             {format(
-              new Date(downloadedVersionsConfig.timestamps[managingVersion]),
+              new Date(
+                downloadedVersionsConfig.timestamps[managingVersion] ?? 0
+              ),
               'MM/dd/yyyy'
             )}
           </p>
@@ -66,22 +69,25 @@ export default function VersionInfo () {
             )}
           </p>
         </div>
-        <div className='entry-info-item'>
+        <div className='entry-info-item' hidden={!gameInfo?.official}>
           <FontAwesomeIcon icon={faCheck} color='#19c84b' />
           <p>Official</p>
         </div>
-        <div className='entry-info-item'>
+        <div className='entry-info-item' hidden={gameInfo?.official}>
           <FontAwesomeIcon
             icon={gameInfo?.verified ? faShieldHalved : faWarning}
             color={gameInfo?.verified ? '#19c84b' : '#ffc800'}
           />
           <p>{gameInfo?.verified ? 'Verified' : 'Unverified'}</p>
         </div>
-        <div className='entry-info-item'>
+        <div className='entry-info-item' hidden={gameInfo?.official}>
           <FontAwesomeIcon icon={faCode} color='lightgray' />
           <p>Developer: {gameInfo?.developer}</p>
         </div>
-        <div className='entry-info-item' hidden={versionSize === null}>
+        <div
+          className='entry-info-item'
+          hidden={viewingInfoFromDownloads || versionSize === null}
+        >
           <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
           <p>
             Size on disk:{' '}

src/app/layout.tsx

@@ -12,6 +12,7 @@ import {
   faChevronLeft,
   faCode,
   faDownload,
+  faInfo,
   faRemove,
   faShieldHalved,
   faWarning,
@@ -41,6 +42,7 @@ import { listen } from '@tauri-apps/api/event'
 import { usePathname } from 'next/navigation'
 import { arch, platform } from '@tauri-apps/plugin-os'
 import VersionInfo from './componets/VersionInfo'
+import { set } from 'date-fns'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -71,10 +73,18 @@ export default function RootLayout ({
     []
   )
   const [managingVersion, setManagingVersion] = useState<string | null>(null)
+  const [viewingInfoFromDownloads, setViewingInfoFromDownloads] =
+    useState<boolean>(false)
   const [selectedGame, setSelectedGame] = useState<number | null>(null)
 
   function handleOverlayClick (e: React.MouseEvent<HTMLDivElement>) {
     if (e.target === e.currentTarget) {
+      if (viewingInfoFromDownloads) {
+        setPopupMode(0)
+        setViewingInfoFromDownloads(false)
+        setManagingVersion(null)
+        setSelectedGame(null)
+      }
       setFadeOut(true)
       setTimeout(() => setShowPopup(false), 200)
     }
@@ -402,7 +412,8 @@ export default function RootLayout ({
                 getVersionGame,
                 getListOfGames,
                 setSelectedGame,
-                getVersionsAmountData
+                getVersionsAmountData,
+                viewingInfoFromDownloads
               }}
             >
               <div
@@ -412,6 +423,9 @@ export default function RootLayout ({
                     if (popupMode == 0 && selectedGame) {
                       setSelectedGame(null)
                       setSelectedVersionList([])
+                    } else if (viewingInfoFromDownloads) {
+                      setViewingInfoFromDownloads(false)
+                      setPopupMode(0)
                     } else {
                       setFadeOut(true)
                       setTimeout(() => setShowPopup(false), 200)
@@ -445,6 +459,9 @@ export default function RootLayout ({
                           ) {
                             setSelectedGame(null)
                             setSelectedVersionList([])
+                          } else if (viewingInfoFromDownloads) {
+                            setViewingInfoFromDownloads(false)
+                            setPopupMode(0)
                           } else {
                             setFadeOut(true)
                             setTimeout(() => setShowPopup(false), 200)
@@ -453,7 +470,10 @@ export default function RootLayout ({
                       >
                         <FontAwesomeIcon
                           icon={
-                            popupMode == 0 && selectedGame && pathname === '/'
+                            (popupMode == 0 &&
+                              selectedGame &&
+                              pathname === '/') ||
+                            viewingInfoFromDownloads
                               ? faChevronLeft
                               : faXmark
                           }
@@ -472,6 +492,16 @@ export default function RootLayout ({
                                     {getVersionGame(v.game)?.name} v
                                     {v.versionName}
                                   </p>
+                                  <button
+                                    className='button right-23 bottom-2'
+                                    onClick={() => {
+                                      setManagingVersion(v.id)
+                                      setViewingInfoFromDownloads(true)
+                                      setPopupMode(3)
+                                    }}
+                                  >
+                                    <FontAwesomeIcon icon={faInfo} /> Info
+                                  </button>
                                   <button
                                     className='button right-2 bottom-2'
                                     onClick={() => {