Add version info box

src/app/Globals.css

@@ -139,9 +139,13 @@ body {
 }
 
 .entry-info-item {
-  @apply flex flex-row items-center gap-1 bg-(--col1) text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px];
+  @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;
 }
 
 .downloads-entry:hover .entry-info-item {
-  @apply bg-(--col2);
+  @apply bg-(--col2) border-(--col4);
+}
+
+.popup-content .entry-info-item:hover {
+  @apply bg-(--col3) border-(--col5);
 }

src/app/componets/VersionInfo.tsx

@@ -0,0 +1,93 @@
+'use client'
+
+import {
+  faCheck,
+  faCode,
+  faHardDrive,
+  faShieldHalved,
+  faWarning
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { format } from 'date-fns'
+import { useGlobal } from '../GlobalProvider'
+import { invoke } from '@tauri-apps/api/core'
+import { useEffect, useState } from 'react'
+import prettyBytes from 'pretty-bytes'
+
+export default function VersionInfo () {
+  const {
+    getVersionGame,
+    getVersionInfo,
+    managingVersion,
+    downloadedVersionsConfig
+  } = useGlobal()
+  if (!managingVersion || !downloadedVersionsConfig) return <></>
+
+  const versionInfo = getVersionInfo(managingVersion)
+  const gameInfo = getVersionGame(versionInfo?.game)
+  const [versionSize, setVersionSize] = useState<number | null>(null)
+
+  useEffect(() => {
+    invoke<string>('folder_size', {
+      version: managingVersion
+    }).then(size => {
+      setVersionSize(parseInt(size, 10))
+    })
+  }, [managingVersion, setVersionSize])
+
+  return (
+    <>
+      <p className='text-xl text-center'>
+        Viewing info for{' '}
+        {getVersionGame(getVersionInfo(managingVersion)?.game)?.name} v
+        {getVersionInfo(managingVersion)?.versionName}
+      </p>
+      <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
+        <div className='entry-info-item'>
+          <p>
+            Installed{' '}
+            {format(
+              new Date(downloadedVersionsConfig.timestamps[managingVersion]),
+              'MM/dd/yyyy'
+            )}
+          </p>
+        </div>
+        <div className='entry-info-item'>
+          <p>
+            Released{' '}
+            {!versionInfo || versionInfo.releaseDate == 0
+              ? 'N/A'
+              : format(new Date(versionInfo.releaseDate * 1000), 'MM/dd/yyyy')}
+          </p>
+        </div>
+        <div className='entry-info-item'>
+          <FontAwesomeIcon icon={faCheck} color='#19c84b' />
+          <p>Official</p>
+        </div>
+        <div className='entry-info-item'>
+          <FontAwesomeIcon
+            icon={gameInfo?.verified ? faShieldHalved : faWarning}
+            color={gameInfo?.verified ? '#19c84b' : '#ffc800'}
+          />
+          <p>{gameInfo?.verified ? 'Verified' : 'Unverified'}</p>
+        </div>
+        <div className='entry-info-item'>
+          <FontAwesomeIcon icon={faCode} color='lightgray' />
+          <p>Developer: {gameInfo?.developer}</p>
+        </div>
+        <div className='entry-info-item'>
+          <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
+          <p>
+            Size:{' '}
+            {versionSize !== null
+              ? prettyBytes(versionSize, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2
+                })
+              : 'Loading...'}
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}

src/app/game/page.tsx

@@ -74,6 +74,17 @@ export default function Installs () {
                     </div>
                   </div>
                   <div className='flex flex-row items-center gap-2'>
+                    <button
+                      className='button'
+                      onClick={async () => {
+                        setManagingVersion(entry)
+                        setPopupMode(3)
+                        setShowPopup(true)
+                        setFadeOut(false)
+                      }}
+                    >
+                      View Info
+                    </button>
                     <button
                       className='button'
                       onClick={async () => {

src/app/layout.tsx

@@ -40,6 +40,7 @@ import { Game } from './types/Game'
 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'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -675,6 +676,14 @@ export default function RootLayout ({
                             No version selected
                           </p>
                         )
+                      ) : popupMode === 3 ? (
+                        managingVersion && downloadedVersionsConfig ? (
+                          <VersionInfo />
+                        ) : (
+                          <p className='text-xl text-center'>
+                            No version selected
+                          </p>
+                        )
                       ) : null}
                       {popupMode == 0 &&
                         selectedGame &&