Add a developer mode to show some debug stuff

src/popups/GamesDownload.tsx

@@ -13,7 +13,8 @@ export default function GamesDownloadPopup () {
     setPopupMode,
     setShowPopup,
     setFadeOut,
-    setViewingInfoFromDownloads
+    setViewingInfoFromDownloads,
+    developerMode
   } = useGlobal()
 
   return (
@@ -46,7 +47,10 @@ export default function GamesDownloadPopup () {
               >
                 <FontAwesomeIcon icon={faInfo} /> Info
               </button>
-              <p className='text-2xl text-center truncate'>{g.name}</p>
+              <p className='text-2xl text-center truncate'>
+                {developerMode ? <span className='text-sm'>{g.id} </span> : ''}
+                {g.name}
+              </p>
               <button
                 className='button btntheme3'
                 onClick={() => setSelectedGame(g.id)}

src/popups/VersionChangelog.tsx

@@ -1,10 +1,14 @@
 'use client'
 
 import { useGlobal } from '@/providers/GlobalProvider'
+import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import DOMPurify from 'dompurify'
+import { useState } from 'react'
 
 export default function VersionChangelogPopup () {
-  const { serverVersionList, managingVersion } = useGlobal()
+  const { serverVersionList, managingVersion, developerMode } = useGlobal()
+  const [raw, setRaw] = useState<boolean>(false)
 
   if (!managingVersion) return null
 
@@ -14,20 +18,35 @@ export default function VersionChangelogPopup () {
 
   return (
     <>
+      {developerMode && (
+        <button
+          className='popup-top-button btntheme1 right-2'
+          onClick={() => setRaw(!raw)}
+        >
+          <FontAwesomeIcon icon={raw ? faEyeSlash : faEye} />
+        </button>
+      )}
       <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 ?? '')
-                .replace(/^- /gm, '&bull; ')
-                .replaceAll(/`([^`]+)`/g, '<code>$1</code>')
-            )
-          }}
-        ></p>
+      <div className='popup-content h-full w-full p-2 select-text'>
+        {raw ? (
+          <>
+            <p>Decoded: {atob(versionInfo?.changelog ?? '')}</p>
+            <p>Not decoded: {versionInfo?.changelog}</p>
+          </>
+        ) : (
+          <p
+            className='whitespace-pre-line'
+            dangerouslySetInnerHTML={{
+              __html: DOMPurify.sanitize(
+                atob(versionInfo?.changelog ?? '')
+                  .replace(/^- /gm, '&bull; ')
+                  .replaceAll(/`([^`]+)`/g, '<code>$1</code>')
+              )
+            }}
+          ></p>
+        )}
       </div>
     </>
   )

src/popups/VersionsDownload.tsx

@@ -12,7 +12,8 @@ export default function VersionsDownloadPopup () {
     setPopupMode,
     selectedGame,
     setViewingInfoFromDownloads,
-    downloadVersions
+    downloadVersions,
+    developerMode
   } = useGlobal()
 
   const game = serverVersionList?.games.find(g => g.id === selectedGame)
@@ -47,6 +48,7 @@ export default function VersionsDownloadPopup () {
                 className='text-2xl text-center truncate'
                 title={v.displayName}
               >
+                {developerMode ? <span className='text-sm'>{v.id} </span> : ''}
                 {v.displayName}
               </p>
               <button