Use system popup for showing changelog too

src/app/componets/VersionChangelog.tsx

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

src/app/componets/VersionInfo.tsx

@@ -13,6 +13,7 @@ import { useGlobal } from '../GlobalProvider'
 import { invoke } from '@tauri-apps/api/core'
 import { useEffect, useState } from 'react'
 import prettyBytes from 'pretty-bytes'
+import { message } from '@tauri-apps/plugin-dialog'
 
 export default function VersionInfo () {
   const {
@@ -20,8 +21,7 @@ export default function VersionInfo () {
     getVersionInfo,
     managingVersion,
     downloadedVersionsConfig,
-    viewingInfoFromDownloads,
-    setPopupMode
+    viewingInfoFromDownloads
   } = useGlobal()
   const [versionSize, setVersionSize] = useState<number>(0)
 
@@ -113,7 +113,13 @@ export default function VersionInfo () {
         </div>
         <div
           className='entry-info-item btntheme2'
-          onClick={() => setPopupMode(4)}
+          onClick={async () => {
+            if (!versionInfo) return
+            await message(atob(versionInfo.changelog), {
+              title: 'Changelog for ' + versionInfo.displayName,
+              kind: 'info'
+            })
+          }}
           hidden={!versionInfo?.changelog}
         >
           <p>View Changelog</p>

src/app/layout.tsx

@@ -44,7 +44,6 @@ import {
   isPermissionGranted,
   requestPermission
 } from '@tauri-apps/plugin-notification'
-import VersionChangelog from './componets/VersionChangelog'
 import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
 
 const roboto = Roboto({
@@ -888,14 +887,6 @@ 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 &&