Improvements & add home page (not even made just going to work on it)

src/app/main/Installs.css

@@ -1,13 +0,0 @@
-@import "tailwindcss";
-
-.downloads-container {
-  @apply flex justify-center;
-}
-
-.downloads-scroll {
-  @apply bg-(--col1) border border-(--col3) rounded-lg overflow-y-auto w-full;
-}
-
-.downloads-entry {
-  @apply flex justify-between items-center m-2 p-2 rounded-lg text-gray-200 text-lg transition-colors bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5) cursor-pointer;
-}

src/app/main/game/page.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import '../Installs.css'
 import { useEffect } from 'react'
 import { useGlobal } from '@/providers/GlobalProvider'
 import { useSearchParams } from 'next/navigation'
@@ -11,7 +10,7 @@ import { ask } from '@tauri-apps/plugin-dialog'
 import { BaseDirectory, exists } from '@tauri-apps/plugin-fs'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 
-export default function Installs () {
+export default function GamePage () {
   const {
     versionsList,
     serverVersionList,
@@ -186,9 +185,8 @@ export default function Installs () {
           </button>
         </div>
       </div>
-      <div className='downloads-container'>
       <div
-          className={`downloads-scroll ${
+        className={`main-container main-flex ${
           platform() == 'windows'
             ? 'h-[calc(100vh-116px)]'
             : 'h-[calc(100vh-84px)]'
@@ -198,9 +196,7 @@ export default function Installs () {
           Object.entries(game.categoryNames)
             .filter(([key]) => {
               const count = Object.keys(versionsList).filter(v => {
-                  const info = serverVersionList?.versions.find(
+                const info = serverVersionList?.versions.find(vf => vf.id == v)
-                    vf => vf.id == v
-                  )
                 if (!info) return false
 
                 if (platform() == 'linux' && info.wine && !linuxUseWine)
@@ -216,15 +212,13 @@ export default function Installs () {
               return (
                 <div
                   key={key}
-                    className='downloads-entry'
+                  className='main-entry'
                   title='Click to view category.'
                   onClick={() => setCategory(Number(key))}
                 >
                   <div className='h-18 w-screen relative'>
                     {developerMode && (
-                        <p className='absolute bottom-0 right-0 text-sm'>
+                      <p className='absolute bottom-0 right-0 text-sm'>{key}</p>
-                          {key}
-                        </p>
                     )}
                     <p className='text-2xl'>{value}</p>
 
@@ -248,8 +242,7 @@ export default function Installs () {
                               )
                                 return false
                               return (
-                                  info.game === id &&
+                                info.game === id && info.category == Number(key)
-                                  info.category == Number(key)
                               )
                             }).length ?? 0
                           return `${count} install${count === 1 ? '' : 's'}`
@@ -291,7 +284,7 @@ export default function Installs () {
             return (
               <div
                 key={v}
-                  className='downloads-entry'
+                className='main-entry'
                 title='Click to launch game. Right-click to manage this version install.'
                 onClick={async () => await launchGame(versionInfo)}
                 onContextMenu={e => {
@@ -392,6 +385,5 @@ export default function Installs () {
           })}
       </div>
     </div>
-    </div>
   )
 }

src/app/main/games/page.tsx

@@ -0,0 +1,147 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useGlobal } from '@/providers/GlobalProvider'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCheck,
+  faShieldHalved,
+  faWarning
+} from '@fortawesome/free-solid-svg-icons'
+import { platform } from '@tauri-apps/plugin-os'
+import { useRouter } from 'next/navigation'
+
+export default function GamesPage () {
+  const {
+    versionsList,
+    serverVersionList,
+    showPopup,
+    setShowPopup,
+    setPopupMode,
+    setFadeOut,
+    setSelectedVersionList,
+    setSelectedGame,
+    setCategory,
+    setManagingGame,
+    developerMode
+  } = useGlobal()
+
+  const router = useRouter()
+
+  useEffect(() => {
+    if (!showPopup) return
+    setSelectedVersionList([])
+  }, [setSelectedVersionList, showPopup])
+
+  const filteredGames =
+    serverVersionList?.games.filter(g =>
+      serverVersionList.versions
+        .filter(v => v.game === g.id)
+        .some(v => Object.keys(versionsList).includes(v.id))
+    ) ?? []
+
+  return (
+    <div className='mx-4 mt-4'>
+      <div className='flex justify-between items-center mb-4'>
+        <p className='text-3xl'>Games</p>
+        <button
+          className='button btntheme1'
+          onClick={() => {
+            setSelectedGame(null)
+            setPopupMode(0)
+            setShowPopup(true)
+            setFadeOut(false)
+          }}
+          title='Click to download more games.'
+        >
+          Download game
+        </button>
+      </div>
+      <div
+        className={`main-container main-flex ${
+          platform() == 'windows'
+            ? 'h-[calc(100vh-116px)]'
+            : 'h-[calc(100vh-84px)]'
+        }`}
+      >
+        {filteredGames.length == 0 ? (
+          <div className='flex justify-center items-center h-full'>
+            <p className='text-3xl'>No games installed</p>
+          </div>
+        ) : (
+          filteredGames.map(i => (
+            <div
+              key={i.id}
+              className='main-entry'
+              title='Click to view game installs.'
+              onClick={() => {
+                setCategory(-1)
+                router.push('/main/game?id=' + i.id)
+              }}
+              onContextMenu={e => {
+                e.preventDefault()
+                setManagingGame(i.id)
+                setPopupMode(5)
+                setShowPopup(true)
+                setFadeOut(false)
+              }}
+            >
+              <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'>
+                  <div
+                    className='entry-info-item'
+                    title='The amount of versions installed of this game in installed/installable format.'
+                  >
+                    <p>
+                      {(() => {
+                        const gameVersions = (
+                          serverVersionList?.versions ?? []
+                        ).filter(v => v.game === i.id)
+                        const installed = gameVersions.filter(v =>
+                          Object.keys(versionsList).includes(v.id)
+                        ).length
+                        return gameVersions.length
+                          ? `${installed}/${gameVersions.length}`
+                          : 'N/A'
+                      })()}{' '}
+                      versions installed
+                    </p>
+                  </div>
+                  {i.official ? (
+                    <div
+                      className='entry-info-item'
+                      title='This game is official.'
+                    >
+                      <FontAwesomeIcon icon={faCheck} color='#19c84b' />
+                      <p>Official</p>
+                    </div>
+                  ) : (
+                    <div
+                      className='entry-info-item'
+                      title={
+                        i.verified
+                          ? 'This game is verified to be safe'
+                          : 'This game is not verified to be save. Proceed with caution.'
+                      }
+                    >
+                      <FontAwesomeIcon
+                        icon={i.verified ? faShieldHalved : faWarning}
+                        color={i.verified ? '#19c84b' : '#ffc800'}
+                      />
+                      <p>{i.verified ? 'Verified' : 'Unverified'}</p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

src/app/main/layout.tsx

@@ -354,7 +354,7 @@ export default function RootLayout ({
   }
 
   const closePopup = useCallback(() => {
-    if (popupMode == 0 && selectedGame && pathname === '/main') {
+    if (popupMode == 0 && selectedGame && pathname === '/main/games') {
       setSelectedGame(null)
       setSelectedVersionList([])
     } else if (viewingInfoFromDownloads) {
@@ -938,7 +938,7 @@ export default function RootLayout ({
                           icon={
                             (popupMode == 0 &&
                               selectedGame &&
-                              pathname === '/main') ||
+                              pathname === '/main/games') ||
                             viewingInfoFromDownloads ||
                             (popupMode == 3 && showModInfo) ||
                             popupMode == 4

src/app/main/page.tsx

@@ -1,150 +0,0 @@
-'use client'
-
-import './Installs.css'
-import { useEffect } from 'react'
-import { useGlobal } from '@/providers/GlobalProvider'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faCheck,
-  faShieldHalved,
-  faWarning
-} from '@fortawesome/free-solid-svg-icons'
-import { platform } from '@tauri-apps/plugin-os'
-import { useRouter } from 'next/navigation'
-
-export default function Installs () {
-  const {
-    versionsList,
-    serverVersionList,
-    showPopup,
-    setShowPopup,
-    setPopupMode,
-    setFadeOut,
-    setSelectedVersionList,
-    setSelectedGame,
-    setCategory,
-    setManagingGame,
-    developerMode
-  } = useGlobal()
-
-  const router = useRouter()
-
-  useEffect(() => {
-    if (!showPopup) return
-    setSelectedVersionList([])
-  }, [setSelectedVersionList, showPopup])
-
-  const filteredGames =
-    serverVersionList?.games.filter(g =>
-      serverVersionList.versions
-        .filter(v => v.game === g.id)
-        .some(v => Object.keys(versionsList).includes(v.id))
-    ) ?? []
-
-  return (
-    <div className='mx-4 mt-4'>
-      <div className='flex justify-between items-center mb-4'>
-        <p className='text-3xl'>Games</p>
-        <button
-          className='button btntheme1'
-          onClick={() => {
-            setSelectedGame(null)
-            setPopupMode(0)
-            setShowPopup(true)
-            setFadeOut(false)
-          }}
-          title='Click to download more games.'
-        >
-          Download game
-        </button>
-      </div>
-      <div className='downloads-container'>
-        <div
-          className={`downloads-scroll ${
-            platform() == 'windows'
-              ? 'h-[calc(100vh-116px)]'
-              : 'h-[calc(100vh-84px)]'
-          }`}
-        >
-          {filteredGames.length == 0 ? (
-            <div className='flex justify-center items-center h-full'>
-              <p className='text-3xl'>No games installed</p>
-            </div>
-          ) : (
-            filteredGames.map(i => (
-              <div
-                key={i.id}
-                className='downloads-entry'
-                title='Click to view game installs.'
-                onClick={() => {
-                  setCategory(-1)
-                  router.push('/main/game?id=' + i.id)
-                }}
-                onContextMenu={e => {
-                  e.preventDefault()
-                  setManagingGame(i.id)
-                  setPopupMode(5)
-                  setShowPopup(true)
-                  setFadeOut(false)
-                }}
-              >
-                <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'>
-                    <div
-                      className='entry-info-item'
-                      title='The amount of versions installed of this game in installed/installable format.'
-                    >
-                      <p>
-                        {(() => {
-                          const gameVersions = (
-                            serverVersionList?.versions ?? []
-                          ).filter(v => v.game === i.id)
-                          const installed = gameVersions.filter(v =>
-                            Object.keys(versionsList).includes(v.id)
-                          ).length
-                          return gameVersions.length
-                            ? `${installed}/${gameVersions.length}`
-                            : 'N/A'
-                        })()}{' '}
-                        versions installed
-                      </p>
-                    </div>
-                    {i.official ? (
-                      <div
-                        className='entry-info-item'
-                        title='This game is official.'
-                      >
-                        <FontAwesomeIcon icon={faCheck} color='#19c84b' />
-                        <p>Official</p>
-                      </div>
-                    ) : (
-                      <div
-                        className='entry-info-item'
-                        title={
-                          i.verified
-                            ? 'This game is verified to be safe'
-                            : 'This game is not verified to be save. Proceed with caution.'
-                        }
-                      >
-                        <FontAwesomeIcon
-                          icon={i.verified ? faShieldHalved : faWarning}
-                          color={i.verified ? '#19c84b' : '#ffc800'}
-                        />
-                        <p>{i.verified ? 'Verified' : 'Unverified'}</p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}

src/app/main/settings/page.tsx

@@ -13,7 +13,7 @@ import { BaseDirectory, exists, readDir, remove } from '@tauri-apps/plugin-fs'
 import { openPath } from '@tauri-apps/plugin-opener'
 import { appLocalDataDir } from '@tauri-apps/api/path'
 
-export default function Settings () {
+export default function SettingsPage () {
   const {
     settings,
     versions,

src/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import {
   faDownload,
   faGamepad,
   faHexagonNodes,
+  faHome,
   faLayerGroup,
   faUser,
   faUserShield
@@ -100,7 +101,16 @@ export default function Sidebar () {
           draggable={false}
           href='/main'
           className={`link relative flex items-center ${
-            pathname === '/main' || pathname.startsWith('/main/game')
+            pathname === '/main' ? 'active' : ''
+          }`}
+        >
+          <FontAwesomeIcon icon={faHome} className='mr-2' /> Home
+        </Link>
+        <Link
+          draggable={false}
+          href='/main/games'
+          className={`link relative flex items-center ${
+            pathname === '/main/games' || pathname.startsWith('/main/game')
               ? 'active'
               : ''
           }`}
@@ -147,7 +157,7 @@ export default function Sidebar () {
                     : ''
                 } ml-auto w-50 ${
                   sidebarAlwaysShowGames ||
-                  pathname === '/main' ||
+                  pathname === '/main/games' ||
                   pathname.startsWith('/main/game')
                     ? ''
                     : 'hidden'
@@ -206,7 +216,7 @@ export default function Sidebar () {
                         : ''
                     } ml-auto w-47.5 ${
                       sidebarAlwaysShowGames ||
-                      pathname === '/main' ||
+                      pathname === '/main/games' ||
                       pathname.startsWith('/main/game')
                         ? ''
                         : 'hidden'

src/styles/globals.css

@@ -70,14 +70,14 @@ body {
 }
 
 .btntheme2,
-.downloads-entry .entry-info-item,
+.main-container .main-entry .entry-info-item,
-.downloads-entry .button {
+.main-container .main-entry .button {
   @apply bg-(--col3) border-(--col5) hover:bg-(--col5) hover:border-(--col7) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col6) disabled:hover:text-gray-100 disabled:hover:bg-(--col3) disabled:hover:border-(--col7);
 }
 
 .btntheme3,
-.downloads-entry:hover .entry-info-item,
+.main-container .main-entry:hover .entry-info-item,
-.downloads-entry:hover .button {
+.main-container .main-entry:hover .button {
   @apply bg-(--col4) border-(--col6) hover:bg-(--col6) hover:border-(--col8) disabled:text-gray-300 disabled:bg-(--col2) disabled:border-(--col7) disabled:hover:text-gray-100 disabled:hover:bg-(--col4) disabled:hover:border-(--col8);
 }
 
@@ -123,6 +123,18 @@ body {
   }
 }
 
+.main-container {
+  @apply bg-(--col1) border border-(--col3) rounded-lg overflow-y-auto w-full;
+}
+
+.main-container.main-flex {
+  @apply flex flex-col gap-2 p-2;
+}
+
+.main-container .main-entry {
+  @apply flex justify-between items-center p-2 rounded-lg text-gray-200 text-lg transition-colors bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5) cursor-pointer;
+}
+
 .popup-overlay {
   @apply fixed w-screen h-screen z-99999 flex justify-center items-center animate-[fadeIn_0.2s_ease-out_forwards] left-0 top-0 bg-[rgba(0,0,0,0.5)];
 }