Use a popup for changelog again

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