Use a popup for changelog again

src/app/layout.tsx

@@ -28,16 +28,17 @@ import { getCurrentWindow, UserAttentionType } from '@tauri-apps/api/window'
 import { Mod } from '@/types/Mod'
 import { load, Store } from '@tauri-apps/plugin-store'
 import { notifyUser } from '@/lib/notifications'
+import { GameVersion } from '@/types/GameVersion'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { invoke } from '@tauri-apps/api/core'
 
 import VersionsDownloadPopup from '@/popups/VersionsDownload'
 import GamesDownloadPopup from '@/popups/GamesDownload'
 import DownloadsPopup from '@/popups/Downloads'
 import ManageVersionPopup from '@/popups/ManageVersion'
 import ModDownloadsPopup from '@/popups/ModDownloads'
-import { GameVersion } from '@/types/GameVersion'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faXmark } from '@fortawesome/free-solid-svg-icons'
-import { invoke } from '@tauri-apps/api/core'
+import VersionChangelogPopup from '@/popups/VersionChangelog'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -125,6 +126,8 @@ export default function RootLayout ({
       setPopupMode(0)
     } else if (popupMode == 3 && showModInfo) {
       setShowModInfo(null)
+    } else if (popupMode == 4) {
+      setPopupMode(2)
     } else {
       setFadeOut(true)
       setTimeout(() => setShowPopup(false), 200)
@@ -812,7 +815,8 @@ export default function RootLayout ({
                               selectedGame &&
                               pathname === '/') ||
                             viewingInfoFromDownloads ||
-                            (popupMode == 3 && showModInfo)
+                            (popupMode == 3 && showModInfo) ||
+                            popupMode == 4
                               ? faChevronLeft
                               : faXmark
                           }
@@ -828,6 +832,8 @@ export default function RootLayout ({
                         <ManageVersionPopup />
                       ) : popupMode === 3 ? (
                         <ModDownloadsPopup />
+                      ) : popupMode === 4 ? (
+                        <VersionChangelogPopup />
                       ) : null}
                     </div>
                   </div>

src/popups/ManageVersion.tsx

@@ -13,7 +13,6 @@ import { useGlobal } from '@/providers/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'
 import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
 import { openFolder } from '@/lib/util'
 
@@ -111,13 +110,7 @@ export default function ManageVersionPopup () {
         </div>
         <div
           className='entry-info-item btntheme2'
-          onClick={async () => {
-            if (!versionInfo) return
-            await message(atob(versionInfo.changelog), {
-              title: 'Changelog for ' + versionInfo.displayName,
-              kind: 'info'
-            })
-          }}
+          onClick={() => setPopupMode(4)}
           hidden={!versionInfo?.changelog}
         >
           <p>View Changelog</p>

src/popups/VersionChangelog.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { useGlobal } from '@/providers/GlobalProvider'
+import DOMPurify from 'dompurify'
+
+export default function VersionChangelogPopup () {
+  const { serverVersionList, managingVersion } = useGlobal()
+
+  if (!managingVersion) return <></>
+
+  const versionInfo = serverVersionList?.versions.find(
+    vf => vf.id == managingVersion
+  )
+
+  return (
+    <>
+      <p className='text-xl text-center'>
+        Viewing changelog {versionInfo?.displayName}
+      </p>
+      <div className='popup-content h-full w-full p-2'>
+        <p
+          className='whitespace-pre-line'
+          dangerouslySetInnerHTML={{
+            __html: DOMPurify.sanitize(
+              atob(versionInfo?.changelog ?? '')
+                .replaceAll('- ', '&bull; ')
+                .replaceAll(/`([^`]+)`/g, '<code>$1</code>')
+            )
+          }}
+        ></p>
+      </div>
+    </>
+  )
+}

src/styles/globals.css

@@ -149,3 +149,7 @@ body {
 .entry-info-item {
   @apply flex flex-row items-center gap-1 border text-gray-300 py-1 px-2 rounded-md w-fit text-[16px] transition-colors cursor-pointer;
 }
+
+code {
+  @apply bg-(--col4) border border-(--col6) rounded-lg px-1 py-0.5 text-sm;
+}