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>
     </>
   )

src/app/layout.tsx

@@ -44,6 +44,7 @@ import {
   isPermissionGranted,
   requestPermission
 } from '@tauri-apps/plugin-notification'
+import VersionChangelog from './componets/VersionChangelog'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -444,6 +445,8 @@ export default function RootLayout ({
                     } else if (viewingInfoFromDownloads) {
                       setViewingInfoFromDownloads(false)
                       setPopupMode(0)
+                    } else if (popupMode == 4) {
+                      setPopupMode(3)
                     } else {
                       setFadeOut(true)
                       setTimeout(() => setShowPopup(false), 200)
@@ -480,6 +483,8 @@ export default function RootLayout ({
                           } else if (viewingInfoFromDownloads) {
                             setViewingInfoFromDownloads(false)
                             setPopupMode(0)
+                          } else if (popupMode == 4) {
+                            setPopupMode(3)
                           } else {
                             setFadeOut(true)
                             setTimeout(() => setShowPopup(false), 200)
@@ -491,7 +496,8 @@ export default function RootLayout ({
                             (popupMode == 0 &&
                               selectedGame &&
                               pathname === '/') ||
-                            viewingInfoFromDownloads
+                            viewingInfoFromDownloads ||
+                            popupMode == 4
                               ? faChevronLeft
                               : faXmark
                           }
@@ -791,6 +797,14 @@ export default function RootLayout ({
                             No version selected
                           </p>
                         )
+                      ) : popupMode === 4 ? (
+                        managingVersion && downloadedVersionsConfig ? (
+                          <VersionChangelog />
+                        ) : (
+                          <p className='text-xl text-center'>
+                            No version selected
+                          </p>
+                        )
                       ) : null}
                       {popupMode == 0 &&
                         selectedGame &&

src/app/types/GameVersion.ts

@@ -8,4 +8,5 @@ export interface GameVersion {
   sha512sum: string
   size: number
   place: number
+  changelog: string
 }