Add changelog + update dependencies

src/app/componets/VersionChangelog.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { useGlobal } from '../GlobalProvider'
+
+export default function VersionChangelog () {
+  const {
+    getVersionGame,
+    getVersionInfo,
+    managingVersion,
+    downloadedVersionsConfig
+  } = useGlobal()
+  if (!managingVersion || !downloadedVersionsConfig) return <></>
+
+  const versionInfo = getVersionInfo(managingVersion)
+  const gameInfo = getVersionGame(versionInfo?.game)
+
+  return (
+    <>
+      <p className='text-xl text-center'>
+        Viewing changelog for {gameInfo?.name} v{versionInfo?.versionName}
+      </p>
+      <div className='popup-content text-center p-2'>
+        <span
+          className='whitespace-pre-wrap'
+          dangerouslySetInnerHTML={{
+            __html: versionInfo?.changelog ? atob(versionInfo.changelog) : ''
+          }}
+        />
+      </div>
+    </>
+  )
+}

src/app/componets/VersionInfo.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import {
+  faArrowUpRightFromSquare,
   faCheck,
   faCode,
   faHardDrive,
@@ -20,7 +21,8 @@ export default function VersionInfo () {
     getVersionInfo,
     managingVersion,
     downloadedVersionsConfig,
-    viewingInfoFromDownloads
+    viewingInfoFromDownloads,
+    setPopupMode
   } = useGlobal()
   if (!managingVersion || !downloadedVersionsConfig) return <></>
 
@@ -39,9 +41,7 @@ export default function VersionInfo () {
   return (
     <>
       <p className='text-xl text-center'>
-        Viewing info for{' '}
-        {getVersionGame(getVersionInfo(managingVersion)?.game)?.name} v
-        {getVersionInfo(managingVersion)?.versionName}
+        Viewing info for {gameInfo?.name} v{versionInfo?.versionName}
       </p>
       <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
         <div
@@ -117,6 +117,14 @@ export default function VersionInfo () {
               : 'Loading...'}
           </p>
         </div>
+        <div
+          className='entry-info-item btntheme2'
+          onClick={() => setPopupMode(4)}
+          hidden={!versionInfo?.changelog}
+        >
+          <p>View Changelog</p>
+          <FontAwesomeIcon icon={faArrowUpRightFromSquare} color='lightgray' />
+        </div>
       </div>
     </>
   )