Rename Games page to Library & remove sidebar always show games setting

src/app/main/layout.tsx

@@ -86,8 +86,6 @@ export default function RootLayout ({
   const [versions, setVersions] = useState<Store | null>(null)
   const [account, setAccount] = useState<Store | null>(null)
 
-  const [sidebarAlwaysShowGames, setSidebarAlwaysShowGames] =
-    useState<boolean>(false)
   const [linuxUseWine, setLinuxUseWine] = useState<boolean>(false)
   const [linuxWineCommand, setLinuxWineCommand] =
     useState<string>('wine %path%')
@@ -357,7 +355,7 @@ export default function RootLayout ({
   }
 
   const closePopup = useCallback(() => {
-    if (popupMode == 0 && selectedGame && pathname === '/main/games') {
+    if (popupMode == 0 && selectedGame && pathname === '/main/library') {
       setSelectedGame(null)
       setSelectedVersionList([])
     } else if (viewingInfoFromDownloads) {
@@ -829,9 +827,6 @@ export default function RootLayout ({
     }
 
     watchSettings<string>('theme', v => setTheme(v ?? 'dark'))
-    watchSettings<boolean>('sidebarAlwaysShowGames', v =>
-      setSidebarAlwaysShowGames(v ?? true)
-    )
     watchSettings<boolean>('linuxUseWine', v => setLinuxUseWine(v ?? false))
     watchSettings<string>('linuxWineCommand', v =>
       setLinuxWineCommand(v ?? 'wine %path%')
@@ -897,7 +892,6 @@ export default function RootLayout ({
                 settings,
                 versions,
                 account,
-                sidebarAlwaysShowGames,
                 linuxUseWine,
                 linuxWineCommand,
                 theme,
@@ -955,7 +949,7 @@ export default function RootLayout ({
                           icon={
                             (popupMode == 0 &&
                               selectedGame &&
-                              pathname === '/main/games') ||
+                              pathname === '/main/library') ||
                             viewingInfoFromDownloads ||
                             (popupMode == 3 && showModInfo) ||
                             popupMode == 4

src/app/main/library/page.tsx

@@ -11,7 +11,7 @@ import {
 import { platform } from '@tauri-apps/plugin-os'
 import { useRouter } from 'next/navigation'
 
-export default function GamesPage () {
+export default function LibraryPage () {
   const {
     versionsList,
     serverVersionList,

src/app/main/settings/page.tsx

@@ -21,7 +21,6 @@ export default function SettingsPage () {
     account,
     version,
     versionsList,
-    sidebarAlwaysShowGames,
     linuxUseWine,
     linuxWineCommand,
     theme,
@@ -34,17 +33,6 @@ export default function SettingsPage () {
       <p className='text-3xl ml-4 mt-4'>Settings</p>
       <div className='flex flex-row p-4 gap-4'>
         <div className='bg-(--col1) border border-(--col3) rounded-lg p-4 w-fit h-fit'>
-          <Setting
-            label='Always show games in sidebar'
-            value={sidebarAlwaysShowGames}
-            onChange={async () => {
-              await settings?.set(
-                'sidebarAlwaysShowGames',
-                !sidebarAlwaysShowGames
-              )
-            }}
-            title="This setting will make it so when you are on a page like this, the games won't disappear."
-          />
           <Setting
             label='Use wine if needed'
             value={linuxUseWine}

src/components/Sidebar.tsx

@@ -39,7 +39,6 @@ export default function Sidebar () {
     downloadProgress,
     category,
     setCategory,
-    sidebarAlwaysShowGames,
     linuxUseWine,
     setManagingGame,
     settings,
@@ -108,9 +107,9 @@ export default function Sidebar () {
         </Link>
         <Link
           draggable={false}
-          href='/main/games'
+          href='/main/library'
           className={`link relative flex items-center ${
-            pathname === '/main/games' || pathname.startsWith('/main/game')
+            pathname === '/main/library' || pathname.startsWith('/main/game')
               ? 'active'
               : ''
           }`}
@@ -138,103 +137,92 @@ export default function Sidebar () {
             }
           }}
         >
-          <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
+          <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Library
         </Link>
-        {serverVersionList?.games
+        {(pathname === '/main/library' || pathname.startsWith('/main/game')) &&
-          .filter(g =>
+          serverVersionList?.games
-            serverVersionList.versions
+            .filter(g =>
-              .filter(v => v.game === g.id)
+              serverVersionList.versions
-              .some(v => Object.keys(versionsList).includes(v.id))
+                .filter(v => v.game === g.id)
-          )
+                .some(v => Object.keys(versionsList).includes(v.id))
-          .map(i => (
+            )
-            <React.Fragment key={i.id}>
+            .map(i => (
-              <div
+              <React.Fragment key={i.id}>
-                draggable={false}
+                <div
-                className={`link ${
+                  draggable={false}
-                  pathname === '/main/game' &&
+                  className={`link ${
-                  Number(params.get('id') || 0) == i.id
+                    pathname === '/main/game' &&
-                    ? 'active'
+                    Number(params.get('id') || 0) == i.id
-                    : ''
+                      ? 'active'
-                } ml-auto w-50 ${
+                      : ''
-                  sidebarAlwaysShowGames ||
+                  } ml-auto w-50`}
-                  pathname === '/main/games' ||
+                  onClick={() => {
-                  pathname.startsWith('/main/game')
+                    setCategory(-1)
-                    ? ''
+                    router.push('/main/game?id=' + i.id)
-                    : 'hidden'
+                  }}
-                }`}
+                  onContextMenu={e => {
-                onClick={() => {
+                    e.preventDefault()
-                  setCategory(-1)
+                    setManagingGame(i.id)
-                  router.push('/main/game?id=' + i.id)
+                    setPopupMode(5)
-                }}
+                    setShowPopup(true)
-                onContextMenu={e => {
+                    setFadeOut(false)
-                  e.preventDefault()
+                  }}
-                  setManagingGame(i.id)
+                  title='Click to view game installs.'
-                  setPopupMode(5)
+                >
-                  setShowPopup(true)
+                  <div className='flex items-center'>
-                  setFadeOut(false)
+                    <FontAwesomeIcon
-                }}
+                      icon={
-                title='Click to view game installs.'
+                        Object.entries(i.categoryNames).length > 0
-              >
+                          ? faLayerGroup
-                <div className='flex items-center'>
+                          : faGamepad
-                  <FontAwesomeIcon
+                      }
-                    icon={
+                      className='mr-1'
-                      Object.entries(i.categoryNames).length > 0
+                    />
-                        ? faLayerGroup
+                    <span className='truncate max-w-full'>{i.name}</span>
-                        : 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(versionsList).filter(v => {
-                    const info = serverVersionList.versions.find(
-                      vf => vf.id == v
-                    )
-                    if (!info) return false
-
-                    if (platform() == 'linux' && info.wine && !linuxUseWine)
-                      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 === '/main/game' &&
-                      Number(params.get('id') || 0) == i.id &&
-                      category == Number(key)
-                        ? 'active'
-                        : ''
-                    } ml-auto w-47.5 ${
-                      sidebarAlwaysShowGames ||
-                      pathname === '/main/games' ||
-                      pathname.startsWith('/main/game')
-                        ? ''
-                        : 'hidden'
-                    }`}
-                    onClick={() => {
-                      setCategory(Number(key))
-                      router.push('/main/game?id=' + i.id)
-                    }}
-                    title="Click to view this game's category."
-                  >
-                    <div className='flex items-center'>
-                      <FontAwesomeIcon icon={faGamepad} className='mr-1' />
-                      <span className='truncate max-w-full'>{value}</span>
-                    </div>
                   </div>
-                ))}
+                </div>
-            </React.Fragment>
+                {Object.entries(i.categoryNames)
-          ))}
+                  .sort(([a], [b]) => Number(b) - Number(a))
+                  .filter(([key]) => {
+                    const count = Object.keys(versionsList).filter(v => {
+                      const info = serverVersionList.versions.find(
+                        vf => vf.id == v
+                      )
+                      if (!info) return false
+
+                      if (platform() == 'linux' && info.wine && !linuxUseWine)
+                        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 === '/main/game' &&
+                        Number(params.get('id') || 0) == i.id &&
+                        category == Number(key)
+                          ? 'active'
+                          : ''
+                      } ml-auto w-47.5`}
+                      onClick={() => {
+                        setCategory(Number(key))
+                        router.push('/main/game?id=' + i.id)
+                      }}
+                      title="Click to view this game's category."
+                    >
+                      <div className='flex items-center'>
+                        <FontAwesomeIcon icon={faGamepad} className='mr-1' />
+                        <span className='truncate max-w-full'>{value}</span>
+                      </div>
+                    </div>
+                  ))}
+              </React.Fragment>
+            ))}
         <Link
           draggable={false}
           href='/main/settings'

src/providers/GlobalProvider.tsx

@@ -54,7 +54,6 @@ type GlobalCtxType = {
   settings: Store | null
   versions: Store | null
   account: Store | null
-  sidebarAlwaysShowGames: boolean
   linuxUseWine: boolean
   linuxWineCommand: string
   theme: string