Add a developer mode to show some debug stuff

src/app/main/game/page.tsx

@@ -29,7 +29,8 @@ export default function Installs () {
     linuxUseWine,
     customDataLocation,
     needsRevisionUpdate,
-    launchGame
+    launchGame,
+    developerMode
   } = useGlobal()
 
   const params = useSearchParams()
@@ -155,6 +156,11 @@ export default function Installs () {
                     onClick={() => setCategory(Number(key))}
                   >
                     <div className='h-18 w-screen relative'>
+                      {developerMode && (
+                        <p className='absolute bottom-0 right-0 text-sm'>
+                          {key}
+                        </p>
+                      )}
                       <p className='text-2xl'>{value}</p>
 
                       <div
@@ -232,6 +238,11 @@ export default function Installs () {
                   }}
                 >
                   <div className='h-18 w-screen relative'>
+                    {developerMode && (
+                      <p className='absolute bottom-0 right-0 text-sm'>
+                        {versionInfo.id}
+                      </p>
+                    )}
                     <p className='text-2xl'>{versionInfo.displayName}</p>
 
                     <div className='flex gap-2 absolute left-0 bottom-0'>

src/app/main/layout.tsx

@@ -96,6 +96,7 @@ export default function RootLayout ({
     useState<string>('wine %path%')
   const [theme, setTheme] = useState<string>('dark')
   const [customDataLocation, setCustomDataLocation] = useState<string>('')
+  const [developerMode, setDeveloperMode] = useState<boolean>(false)
 
   const [versionsList, setVersionsList] = useState<Record<string, number>>({})
   const [modsList, setModsList] = useState<
@@ -645,7 +646,8 @@ export default function RootLayout ({
           linuxUseWine: false,
           linuxWineCommand: 'wine %path%',
           theme: 'dark',
-          customDataLocation: ''
+          customDataLocation: '',
+          developerMode: false
         }
       })
       const versionsLocal = await load('versions.json', {
@@ -802,6 +804,7 @@ export default function RootLayout ({
     watchSettings<string>('customDataLocation', v =>
       setCustomDataLocation(v ?? '')
     )
+    watchSettings<boolean>('developerMode', v => setDeveloperMode(v ?? false))
 
     watchVersions<Record<string, number>>('list', v => setVersionsList(v ?? {}))
     watchVersions<Record<string, Record<string, number>>>('mods', v =>
@@ -871,6 +874,7 @@ export default function RootLayout ({
                 linuxWineCommand,
                 theme,
                 customDataLocation,
+                developerMode,
                 versionsList,
                 modsList,
                 movingData,

src/app/main/page.tsx

@@ -23,7 +23,8 @@ export default function Installs () {
     setSelectedVersionList,
     setSelectedGame,
     setCategory,
-    setManagingGame
+    setManagingGame,
+    developerMode
   } = useGlobal()
 
   const router = useRouter()
@@ -88,6 +89,9 @@ export default function Installs () {
                 }}
               >
                 <div className='h-18 w-screen relative'>
+                  {developerMode && (
+                    <p className='absolute bottom-0 right-0 text-sm'>{i.id}</p>
+                  )}
                   <p className='text-2xl'>{i.name}</p>
 
                   <div className='flex gap-2 absolute left-0 bottom-0'>

src/components/Sidebar.tsx

@@ -19,7 +19,8 @@ import Link from 'next/link'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { Lexend } from 'next/font/google'
-import React from 'react'
+import React, { useState } from 'react'
+import { message } from '@tauri-apps/plugin-dialog'
 
 const lexend = Lexend({
   subsets: ['latin']
@@ -37,13 +38,17 @@ export default function Sidebar () {
     setCategory,
     sidebarAlwaysShowGames,
     linuxUseWine,
-    setManagingGame
+    setManagingGame,
+    settings,
+    developerMode
   } = useGlobal()
 
   const pathname = usePathname()
   const params = useSearchParams()
   const router = useRouter()
 
+  const [devModeClicks, setDevModeClicks] = useState<number>(0)
+
   return (
     <aside className='sidebar'>
       <div
@@ -90,6 +95,29 @@ export default function Sidebar () {
               ? 'active'
               : ''
           }`}
+          onContextMenu={async e => {
+            e.preventDefault()
+
+            if (developerMode) {
+              await settings?.set('developerMode', false)
+              await message(
+                'Developer mode disabled! You can enable it again by right clicking the games button 3 times again.',
+                { title: 'Developer mode off', kind: 'info' }
+              )
+              return
+            }
+
+            if (devModeClicks == 2) {
+              await settings?.set('developerMode', true)
+              setDevModeClicks(0)
+              await message(
+                'Developer mode sucessfully enabled! You can disable it by right clicking the games button again.',
+                { title: 'Developer mode on', kind: 'info' }
+              )
+            } else {
+              setDevModeClicks(devModeClicks + 1)
+            }
+          }}
         >
           <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
         </Link>

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'>
+      <div className='popup-content h-full w-full p-2 select-text'>
-        <p
+        {raw ? (
-          className='whitespace-pre-line'
+          <>
-          dangerouslySetInnerHTML={{
+            <p>Decoded: {atob(versionInfo?.changelog ?? '')}</p>
-            __html: DOMPurify.sanitize(
+            <p>Not decoded: {versionInfo?.changelog}</p>
-              atob(versionInfo?.changelog ?? '')
+          </>
-                .replace(/^- /gm, '&bull; ')
+        ) : (
-                .replaceAll(/`([^`]+)`/g, '<code>$1</code>')
+          <p
-            )
+            className='whitespace-pre-line'
-          }}
+            dangerouslySetInnerHTML={{
-        ></p>
+              __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

src/providers/GlobalProvider.tsx

@@ -58,6 +58,7 @@ type GlobalCtxType = {
   linuxWineCommand: string
   theme: string
   customDataLocation: string
+  developerMode: boolean
   versionsList: Record<string, number>
   modsList: Record<string, Record<string, number>>
   movingData: boolean