Add categories to sidebar

src/app/GlobalProvider.tsx

@@ -43,6 +43,8 @@ type GlobalCtxType = {
   viewingInfoFromDownloads: boolean
   version: string | null
   downloadVersions: (list: string[]) => Promise<void>
+  category: number
+  setCategory: Dispatch<SetStateAction<number>>
 }
 
 const GlobalCtx = createContext<GlobalCtxType | null>(null)

src/app/componets/Sidebar.tsx

@@ -8,16 +8,18 @@ import {
   faCog,
   faDownload,
   faGamepad,
-  faHexagonNodes
+  faHexagonNodes,
+  faLayerGroup
 } from '@fortawesome/free-solid-svg-icons'
 import { faDiscord } from '@fortawesome/free-brands-svg-icons'
 import { platform } from '@tauri-apps/plugin-os'
 import { useGlobal } from '../GlobalProvider'
 import Image from 'next/image'
 import Link from 'next/link'
-import { usePathname, useSearchParams } from 'next/navigation'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import { getCurrentWindow } from '@tauri-apps/api/window'
 import { Lexend } from 'next/font/google'
+import React from 'react'
 
 const lexend = Lexend({
   subsets: ['latin']
@@ -30,11 +32,16 @@ export default function Sidebar () {
     setShowPopup,
     setPopupMode,
     setFadeOut,
-    downloadProgress
+    downloadProgress,
+    downloadedVersionsConfig,
+    getVersionInfo,
+    category,
+    setCategory
   } = useGlobal()
 
   const pathname = usePathname()
   const params = useSearchParams()
+  const router = useRouter()
 
   return (
     <aside className='sidebar'>
@@ -92,10 +99,9 @@ export default function Sidebar () {
             return a.id - b.id
           })
           .map(i => (
-            <Link
+            <React.Fragment key={i.id}>
-              key={i.id}
+              <div
                 draggable={false}
-              href={'/game?id=' + i.id}
                 className={`link ${
                   pathname === '/game' && Number(params.get('id') || 0) == i.id
                     ? 'active'
@@ -107,12 +113,73 @@ export default function Sidebar () {
                     ? ''
                     : 'hidden'
                 }`}
+                onClick={() => {
+                  setCategory(-1)
+                  router.push('/game?id=' + i.id)
+                }}
+              >
+                <div className='flex items-center'>
+                  <FontAwesomeIcon
+                    icon={
+                      Object.entries(i.categoryNames).length > 0
+                        ? faLayerGroup
+                        : faGamepad
+                    }
+                    className='mr-1'
+                  />
+                  <span className='truncate max-w-full'>{i.name}</span>
+                </div>
+              </div>
+              {Object.entries(i.categoryNames)
+                .sort(([a], [b]) => Number(b) - Number(a))
+                .filter(([key]) => {
+                  const count = Object.keys(
+                    downloadedVersionsConfig?.list ?? {}
+                  ).filter(v => {
+                    const info = getVersionInfo(v)
+                    if (!info) return false
+
+                    if (
+                      platform() === 'linux' &&
+                      info.wine &&
+                      !normalConfig?.settings.useWineOnUnixWhenNeeded
+                    )
+                      return false
+
+                    return info.game === i.id && info.category === Number(key)
+                  }).length
+
+                  return count >= 1
+                })
+                .map(([key, value]) => (
+                  <div
+                    key={`${i.id}-${key}`}
+                    draggable={false}
+                    className={`link ${
+                      pathname === '/game' &&
+                      Number(params.get('id') || 0) == i.id &&
+                      category == Number(key)
+                        ? 'active'
+                        : ''
+                    } ml-auto w-47.5 ${
+                      normalConfig?.settings.alwaysShowGamesInSidebar ||
+                      pathname === '/' ||
+                      pathname === '/game'
+                        ? ''
+                        : 'hidden'
+                    }`}
+                    onClick={() => {
+                      setCategory(Number(key))
+                      router.push('/game?id=' + i.id)
+                    }}
                   >
                     <div className='flex items-center'>
                       <FontAwesomeIcon icon={faGamepad} className='mr-1' />
-                <span className='truncate max-w-full'>{i.name}</span>
+                      <span className='truncate max-w-full'>{value}</span>
                     </div>
-            </Link>
+                  </div>
+                ))}
+            </React.Fragment>
           ))}
         <Link
           draggable={false}

src/app/game/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import '../Installs.css'
 import { invoke } from '@tauri-apps/api/core'
 import { useGlobal } from '../GlobalProvider'
@@ -22,7 +22,9 @@ export default function Installs () {
     getVersionInfo,
     getGameInfo,
     setSelectedGame,
-    serverVersionList
+    serverVersionList,
+    category,
+    setCategory
   } = useGlobal()
 
   const params = useSearchParams()
@@ -30,9 +32,6 @@ export default function Installs () {
   const id = Number(params.get('id') || 0)
   const game = serverVersionList?.games.find(g => g.id === id)
 
-  const [category, setCategory] = useState<number>(-1)
-  const [lastId, setLastId] = useState(id)
-
   useEffect(() => {
     if (!showPopup) return
     setSelectedVersionList([])
@@ -40,11 +39,6 @@ export default function Installs () {
 
   if (!id || !game) return <p>Invalid game</p>
 
-  if (lastId !== id) {
-    setLastId(id)
-    setCategory(-1)
-  }
-
   const needsRevisionUpdate = (
     lastRevision: number | undefined,
     version: string

src/app/layout.tsx

@@ -82,6 +82,8 @@ export default function RootLayout ({
     useState<boolean>(false)
   const [selectedGame, setSelectedGame] = useState<number | null>(null)
 
+  const [category, setCategory] = useState<number>(-1)
+
   const pathname = usePathname()
   const revisionCheck = useRef(false)
 
@@ -480,7 +482,9 @@ export default function RootLayout ({
                 getVersionsAmountData,
                 viewingInfoFromDownloads,
                 version,
-                downloadVersions
+                downloadVersions,
+                category,
+                setCategory
               }}
             >
               <div

src/app/page.tsx

@@ -3,7 +3,6 @@
 import { useEffect } from 'react'
 import './Installs.css'
 import { useGlobal } from './GlobalProvider'
-import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
   faCheck,
@@ -24,7 +23,8 @@ export default function Installs () {
     normalConfig,
     setSelectedGame,
     getListOfGames,
-    getVersionsAmountData
+    getVersionsAmountData,
+    setCategory
   } = useGlobal()
 
   const router = useRouter()
@@ -80,6 +80,7 @@ export default function Installs () {
                   }
                   onClick={() => {
                     if (normalConfig?.settings.useLegacyInteractButtons) return
+                    setCategory(-1)
                     router.push('/game?id=' + i.id)
                   }}
                 >
@@ -128,14 +129,17 @@ export default function Installs () {
                       </div>
                     </div>
 
-                    <Link
+                    <div
                       className='button absolute right-0 bottom-0'
-                      href={'/game?id=' + i.id}
                       hidden={!normalConfig?.settings.useLegacyInteractButtons}
                       title='Click to view game installs'
+                      onClick={() => {
+                        setCategory(-1)
+                        router.push('/game?id=' + i.id)
+                      }}
                     >
                       Installs
-                    </Link>
+                    </div>
                   </div>
                 </div>
               ))