Add subcategory support

src/app/game/page.tsx

@@ -22,10 +22,17 @@ export default function Installs () {
     setManagingVersion,
     getVersionInfo,
     getGameInfo,
-    setSelectedGame
+    setSelectedGame,
+    serverVersionList
   } = useGlobal()
 
   const params = useSearchParams()
+  const [category, setCategory] = useState<number>(-1)
+
+  const id = Number(params.get('id') || 0)
+  if (!id) return <p>Invalid game</p>
+  const game = serverVersionList?.games.find(g => g.id === id)
+  if (!game) return <p>Invalid game</p>
 
   useEffect(() => {
     if (!showPopup) return
@@ -36,10 +43,21 @@ export default function Installs () {
     <div className='mx-4 mt-4'>
       <div className='flex justify-between items-center mb-4'>
         <p className='text-3xl'>Installs</p>
+        <div className='flex gap-2'>
           <button
             className='button btntheme1'
             onClick={() => {
-            setSelectedGame(Number(params.get('id') || 0))
+              setCategory(-1)
+            }}
+            title='Click to go up a level.'
+            hidden={category == -1}
+          >
+            Back
+          </button>
+          <button
+            className='button btntheme1'
+            onClick={() => {
+              setSelectedGame(id)
               setPopupMode(0)
               setShowPopup(true)
               setFadeOut(false)
@@ -49,6 +67,7 @@ export default function Installs () {
             Download versions
           </button>
         </div>
+      </div>
       <div className='downloads-container'>
         <div
           className={`downloads-scroll ${
@@ -57,13 +76,74 @@ export default function Installs () {
               : 'h-[calc(100vh-84px)]'
           }`}
         >
-          {downloadedVersionsConfig &&
-          downloadedVersionsConfig.list.filter(v => {
+          {category == -1 &&
+            Object.entries(game.subcategoryNames).map(([key, value]) => {
+              return (
+                <div
+                  key={crypto.randomUUID()}
+                  className={`downloads-entry ${
+                    normalConfig?.settings.useLegacyInteractButtons
+                      ? ''
+                      : 'cursor-pointer'
+                  }`}
+                  title={
+                    normalConfig?.settings.useLegacyInteractButtons
+                      ? ''
+                      : 'Click to view category'
+                  }
+                  onClick={() => {
+                    if (normalConfig?.settings.useLegacyInteractButtons) return
+                    setCategory(Number(key))
+                  }}
+                >
+                  <div className='h-18 w-screen relative'>
+                    <p className='text-2xl'>{value}</p>
+
+                    <div
+                      className='entry-info-item flex absolute left-0 bottom-0'
+                      title='The amount of versions installed of this game in installed/installable format.'
+                      onClick={e => e.stopPropagation()}
+                    >
+                      <p>
+                        {(() => {
+                          const count =
+                            downloadedVersionsConfig?.list.filter(v => {
                               const info = getVersionInfo(v)
                               if (!info) return false
-            return info.game === Number(params.get('id') || 0)
+                              if (
+                                platform() === 'linux' &&
+                                info.wine &&
+                                !normalConfig?.settings.useWineOnUnixWhenNeeded
+                              )
+                                return false
+                              return (
+                                info.game === id &&
+                                info.subcategory == Number(key)
+                              )
+                            }).length ?? 0
+                          return `${count} install${count === 1 ? '' : 's'}`
+                        })()}
+                      </p>
+                    </div>
+
+                    <button
+                      className='button absolute right-0 bottom-0'
+                      hidden={!normalConfig?.settings.useLegacyInteractButtons}
+                      title='Click to view game installs'
+                      onClick={() => setCategory(Number(key))}
+                    >
+                      Installs
+                    </button>
+                  </div>
+                </div>
+              )
+            })}
+          {downloadedVersionsConfig?.list.filter(v => {
+            const info = getVersionInfo(v)
+            if (!info) return false
+            return info.game === id
           }).length != 0 ? (
-            downloadedVersionsConfig.list
+            downloadedVersionsConfig?.list
               .sort((a, b) => {
                 const infoA = getVersionInfo(a)
                 const infoB = getVersionInfo(b)
@@ -79,7 +159,12 @@ export default function Installs () {
                   !normalConfig?.settings.useWineOnUnixWhenNeeded
                 )
                   return false
-                return info.game === Number(params.get('id') || 0)
+                return (
+                  info.game === id &&
+                  (category == -1
+                    ? info.subcategory == -1
+                    : info.subcategory == category)
+                )
               })
               .map((entry, i) => (
                 <div

src/app/types/Game.ts

@@ -4,4 +4,5 @@ export interface Game {
   official: boolean
   verified: boolean
   developer: string | null
+  subcategoryNames: Record<string, string>
 }

src/app/types/GameVersion.ts

@@ -10,4 +10,6 @@ export interface GameVersion {
   place: number
   changelog: string
   wine: number | undefined
+  subcategory: number
+  lastRevision: number
 }