Fix linux and windows compiling issue

Big improvement, needed to do this for a while even though it's so basic

bun.lock

@@ -5,9 +5,9 @@
     "": {
       "name": "lncvrt-games-launcher",
       "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "7.1.0",
-        "@fortawesome/free-brands-svg-icons": "7.1.0",
-        "@fortawesome/free-solid-svg-icons": "7.1.0",
+        "@fortawesome/fontawesome-svg-core": "7.2.0",
+        "@fortawesome/free-brands-svg-icons": "7.2.0",
+        "@fortawesome/free-solid-svg-icons": "7.2.0",
         "@fortawesome/react-fontawesome": "3.2.0",
         "@tauri-apps/api": "2.10.1",
         "@tauri-apps/plugin-clipboard-manager": "2.3.2",
@@ -28,8 +28,8 @@
         "@tailwindcss/postcss": "4.1.18",
         "@tauri-apps/cli": "2.10.0",
         "@types/crypto-js": "4.2.2",
-        "@types/node": "25.2.2",
-        "@types/react": "19.2.13",
+        "@types/node": "25.2.3",
+        "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",
         "crypto-js": "4.2.0",
         "eslint": "9.39.2",
@@ -98,13 +98,13 @@
 
     "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
 
-    "@fortawesome/fontawesome-common-types": ["@fortawesome/fontawesome-common-types@7.1.0", "", {}, "sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA=="],
+    "@fortawesome/fontawesome-common-types": ["@fortawesome/fontawesome-common-types@7.2.0", "", {}, "sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw=="],
 
-    "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@7.1.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.1.0" } }, "sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA=="],
+    "@fortawesome/fontawesome-svg-core": ["@fortawesome/fontawesome-svg-core@7.2.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" } }, "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q=="],
 
-    "@fortawesome/free-brands-svg-icons": ["@fortawesome/free-brands-svg-icons@7.1.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.1.0" } }, "sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA=="],
+    "@fortawesome/free-brands-svg-icons": ["@fortawesome/free-brands-svg-icons@7.2.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" } }, "sha512-VNG8xqOip1JuJcC3zsVsKRQ60oXG9+oYNDCosjoU/H9pgYmLTEwWw8pE0jhPz/JWdHeUuK6+NQ3qsM4gIbdbYQ=="],
 
-    "@fortawesome/free-solid-svg-icons": ["@fortawesome/free-solid-svg-icons@7.1.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.1.0" } }, "sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA=="],
+    "@fortawesome/free-solid-svg-icons": ["@fortawesome/free-solid-svg-icons@7.2.0", "", { "dependencies": { "@fortawesome/fontawesome-common-types": "7.2.0" } }, "sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w=="],
 
     "@fortawesome/react-fontawesome": ["@fortawesome/react-fontawesome@3.2.0", "", { "peerDependencies": { "@fortawesome/fontawesome-svg-core": "~6 || ~7", "react": "^18.0.0 || ^19.0.0" } }, "sha512-E9Gu1hqd6JussVO26EC4WqRZssXMnQr2ol7ZNWkkFOH8jZUaxDJ9Z9WF9wIVkC+kJGXUdY3tlffpDwEKfgQrQw=="],
 
@@ -290,9 +290,9 @@
 
     "@types/json5": ["@types/json5@0.0.29", "", {}, "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="],
 
-    "@types/node": ["@types/node@25.2.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-BkmoP5/FhRYek5izySdkOneRyXYN35I860MFAGupTdebyE66uZaR+bXLHq8k4DirE5DwQi3NuhvRU1jqTVwUrQ=="],
+    "@types/node": ["@types/node@25.2.3", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ=="],
 
-    "@types/react": ["@types/react@19.2.13", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ=="],
+    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lncvrt-games-launcher",
   "private": true,
-  "version": "1.5.7",
+  "version": "1.6.0",
   "type": "module",
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "7.1.0",
-    "@fortawesome/free-brands-svg-icons": "7.1.0",
-    "@fortawesome/free-solid-svg-icons": "7.1.0",
+    "@fortawesome/fontawesome-svg-core": "7.2.0",
+    "@fortawesome/free-brands-svg-icons": "7.2.0",
+    "@fortawesome/free-solid-svg-icons": "7.2.0",
     "@fortawesome/react-fontawesome": "3.2.0",
     "@tauri-apps/api": "2.10.1",
     "@tauri-apps/plugin-clipboard-manager": "2.3.2",
@@ -34,8 +34,8 @@
     "@tailwindcss/postcss": "4.1.18",
     "@tauri-apps/cli": "2.10.0",
     "@types/crypto-js": "4.2.2",
-    "@types/node": "25.2.2",
-    "@types/react": "19.2.13",
+    "@types/node": "25.2.3",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "crypto-js": "4.2.0",
     "eslint": "9.39.2",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "lncvrt-games-launcher"
-version = "1.5.7"
+version = "1.6.0"
 authors = ["Lncvrt"]
 edition = "2024"
 
@@ -23,7 +23,7 @@ futures-util = { version = "0.3.31", features = ["io"] }
 tauri-plugin-decorum = "1.1.1"
 tauri-plugin-fs = "2.4.5"
 zip = "7.4.0"
-libc = "0.2.181"
+libc = "0.2.182"
 tauri-plugin-dialog = "2.6.0"
 tauri-plugin-notification = "2.3.3"
 sysinfo = "0.38.1"

src-tauri/capabilities/default.json

@@ -32,6 +32,12 @@
       "allow": [
         { "path": "$APPLOCALDATA/game/**" }
       ]
+    },
+    {
+      "identifier": "opener:allow-open-path",
+      "allow": [
+        { "path": "$APPLOCALDATA/game/**" }
+      ]
     }
   ]
 }

src-tauri/src/lib.rs

@@ -12,8 +12,6 @@ use std::{
 };
 use sysinfo::System;
 use tauri::{AppHandle, Emitter, Manager};
-use tauri_plugin_dialog::{DialogExt, MessageDialogKind};
-use tauri_plugin_opener::OpenerExt;
 use tauri_plugin_os::platform;
 use tokio::io::AsyncReadExt;
 use tokio::{io::AsyncWriteExt, time::timeout};
@@ -280,6 +278,9 @@ fn launch_game(
     //if already running on macos, it'll auto take the user to that proccess
     #[cfg(any(target_os = "windows", target_os = "linux"))]
     {
+        use tauri_plugin_dialog::MessageDialogKind;
+        use tauri_plugin_dialog::DialogExt;
+
         if !use_wine && is_running_by_path(&exe_path) {
             app.dialog()
                 .message(format!(
@@ -324,30 +325,6 @@ fn launch_game(
     }
 }
 
-#[tauri::command]
-async fn open_folder(app: AppHandle, name: String) {
-    let game_path = app
-        .path()
-        .app_local_data_dir()
-        .unwrap()
-        .join("game")
-        .join(&name);
-    if game_path.exists() {
-        app.opener()
-            .open_path(game_path.to_string_lossy(), None::<&str>)
-            .unwrap();
-    } else {
-        app.dialog()
-            .message(format!(
-                "Game folder \"{}\" not found.",
-                game_path.display()
-            ))
-            .kind(MessageDialogKind::Error)
-            .title("Folder not found")
-            .show(|_| {});
-    }
-}
-
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     #[allow(unused_variables)]
@@ -369,7 +346,6 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             download,
             launch_game,
-            open_folder,
             folder_size
         ])
         .setup(|app| {

src-tauri/tauri.conf.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Lncvrt Games Launcher",
-  "version": "1.5.7",
+  "version": "1.6.0",
   "identifier": "xyz.lncvrt.games-launcher",
   "build": {
-    "beforeDevCommand": "next dev",
+    "beforeDevCommand": "next dev --webpack",
     "devUrl": "http://localhost:3000",
     "beforeBuildCommand": "next build",
     "frontendDist": "../out"

src-tauri/tauri.linux.conf.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Lncvrt Games Launcher",
-  "version": "1.5.7",
+  "version": "1.6.0",
   "identifier": "xyz.lncvrt.games-launcher",
   "build": {
-    "beforeDevCommand": "next dev",
+    "beforeDevCommand": "next dev --webpack",
     "devUrl": "http://localhost:3000",
     "beforeBuildCommand": "next build",
     "frontendDist": "../out"

src-tauri/tauri.macos.conf.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Lncvrt Games Launcher",
-  "version": "1.5.7",
+  "version": "1.6.0",
   "identifier": "xyz.lncvrt.games-launcher",
   "build": {
-    "beforeDevCommand": "next dev",
+    "beforeDevCommand": "next dev --webpack",
     "devUrl": "http://localhost:3000",
     "beforeBuildCommand": "next build",
     "frontendDist": "../out"
@@ -30,7 +30,7 @@
     "active": true,
     "targets": ["app"],
     "macOS": {
-      "minimumSystemVersion": "15.0"
+      "minimumSystemVersion": "13.0"
     },
     "icon": ["icons/icon.icns"]
   }

src-tauri/tauri.windows.conf.json

@@ -1,10 +1,10 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Lncvrt Games Launcher",
-  "version": "1.5.7",
+  "version": "1.6.0",
   "identifier": "xyz.lncvrt.games-launcher",
   "build": {
-    "beforeDevCommand": "next dev",
+    "beforeDevCommand": "next dev --webpack",
     "devUrl": "http://localhost:3000",
     "beforeBuildCommand": "next build",
     "frontendDist": "../out"

src/app/GlobalProvider.tsx

@@ -7,12 +7,12 @@ import {
   Dispatch,
   SetStateAction
 } from 'react'
-import { DownloadProgress } from './types/DownloadProgress'
-import { VersionsConfig } from './types/VersionsConfig'
-import { NormalConfig } from './types/NormalConfig'
-import { ServerVersionsResponse } from './types/ServerVersionsResponse'
-import { GameVersion } from './types/GameVersion'
-import { Game } from './types/Game'
+import { DownloadProgress } from '@/types/DownloadProgress'
+import { VersionsConfig } from '@/types/VersionsConfig'
+import { NormalConfig } from '@/types/NormalConfig'
+import { ServerVersionsResponse } from '@/types/ServerVersionsResponse'
+import { GameVersion } from '@/types/GameVersion'
+import { Game } from '@/types/Game'
 
 type GlobalCtxType = {
   serverVersionList: ServerVersionsResponse | null
@@ -43,6 +43,14 @@ type GlobalCtxType = {
   viewingInfoFromDownloads: boolean
   version: string | null
   downloadVersions: (list: string[]) => Promise<void>
+  category: number
+  setCategory: Dispatch<SetStateAction<number>>
+  downloadQueue: string[]
+  setDownloadQueue: Dispatch<SetStateAction<string[]>>
+  closePopup: () => void
+  getSpecialVersionsList(game?: number | undefined): GameVersion[]
+  selectedGame: number | null
+  setViewingInfoFromDownloads: Dispatch<SetStateAction<boolean>>
 }
 
 const GlobalCtx = createContext<GlobalCtxType | null>(null)

src/app/Installs.css

@@ -9,5 +9,5 @@
 }
 
 .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);
+  @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/componets/Sidebar.tsx

@@ -1,146 +0,0 @@
-'use client'
-
-import './Sidebar.css'
-import Icon from '@/assets/Icon.png'
-import { openUrl } from '@tauri-apps/plugin-opener'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faCog,
-  faDownload,
-  faGamepad,
-  faHexagonNodes
-} 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 { getCurrentWindow } from '@tauri-apps/api/window'
-import { Lexend } from 'next/font/google'
-
-const lexend = Lexend({
-  subsets: ['latin']
-})
-
-export default function Sidebar () {
-  const {
-    normalConfig,
-    getListOfGames,
-    setShowPopup,
-    setPopupMode,
-    setFadeOut,
-    downloadProgress
-  } = useGlobal()
-
-  const pathname = usePathname()
-  const params = useSearchParams()
-
-  return (
-    <aside className='sidebar'>
-      <div
-        className='macos-drag'
-        hidden={platform() != 'macos'}
-        onMouseDown={e => {
-          if (e.buttons === 1) {
-            if (e.detail === 2) {
-              getCurrentWindow().toggleMaximize()
-            } else {
-              getCurrentWindow().startDragging()
-            }
-          }
-        }}
-      ></div>
-      <div
-        className='logo'
-        style={{
-          marginTop:
-            platform() == 'windows'
-              ? '32px'
-              : platform() == 'macos'
-              ? '28px'
-              : ''
-        }}
-        onMouseDown={e => {
-          if (platform() != 'macos') return
-          if (e.buttons === 1) {
-            if (e.detail === 2) {
-              getCurrentWindow().toggleMaximize()
-            } else {
-              getCurrentWindow().startDragging()
-            }
-          }
-        }}
-      >
-        <Image draggable={false} src={Icon} width={36} height={36} alt='' />
-        <p className={`ml-1 text-[16px] whitespace-nowrap ${lexend.className}`}>
-          Lncvrt Games Launcher
-        </p>
-      </div>
-      <nav className='nav-links overflow-auto pt-2'>
-        <Link
-          draggable={false}
-          href='/'
-          className={`link relative flex items-center ${
-            pathname === '/' || pathname === '/game' ? 'active' : ''
-          }`}
-        >
-          <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
-        </Link>
-        {getListOfGames()
-          .sort((a, b) => {
-            return a.id - b.id
-          })
-          .map(i => (
-            <Link
-              key={i.id}
-              draggable={false}
-              href={'/game?id=' + i.id}
-              className={`link ${
-                pathname === '/game' && Number(params.get('id') || 0) == i.id
-                  ? 'active'
-                  : ''
-              } ml-auto w-50 ${
-                normalConfig?.settings.alwaysShowGamesInSidebar ||
-                pathname === '/' ||
-                pathname === '/game'
-                  ? ''
-                  : 'hidden'
-              }`}
-            >
-              <div className='flex items-center'>
-                <FontAwesomeIcon icon={faGamepad} className='mr-1' />
-                <span className='truncate max-w-full'>{i.name}</span>
-              </div>
-            </Link>
-          ))}
-        <Link
-          draggable={false}
-          href='/settings'
-          className={`link ${pathname === '/settings' ? 'active' : ''}`}
-        >
-          <FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
-        </Link>
-        <button
-          onClick={() => openUrl('https://games.lncvrt.xyz/discord')}
-          className='link mr-auto'
-        >
-          <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
-        </button>
-      </nav>
-      <div
-        className='sidebar-downloads'
-        hidden={downloadProgress.length == 0}
-        onClick={() => {
-          setPopupMode(1)
-          setShowPopup(true)
-          setFadeOut(false)
-        }}
-      >
-        <p>
-          <FontAwesomeIcon icon={faDownload} /> Downloads
-        </p>
-      </div>
-    </aside>
-  )
-}

src/app/componets/VersionChangelog.tsx

@@ -1,27 +0,0 @@
-'use client'
-
-import { useGlobal } from '../GlobalProvider'
-
-export default function VersionChangelog () {
-  const { getVersionInfo, managingVersion, downloadedVersionsConfig } =
-    useGlobal()
-  if (!managingVersion || !downloadedVersionsConfig) return <></>
-
-  const versionInfo = getVersionInfo(managingVersion)
-
-  return (
-    <>
-      <p className='text-xl text-center'>
-        Viewing changelog for {versionInfo?.displayName}
-      </p>
-      <div className='popup-content text-center p-2'>
-        <span
-          className='whitespace-pre-wrap select-text'
-          dangerouslySetInnerHTML={{
-            __html: versionInfo?.changelog ? atob(versionInfo.changelog) : ''
-          }}
-        />
-      </div>
-    </>
-  )
-}

src/app/componets/VersionUpdateWarning.tsx

@@ -1,105 +0,0 @@
-'use client'
-
-import { invoke } from '@tauri-apps/api/core'
-import { useGlobal } from '../GlobalProvider'
-import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
-import { writeVersionsConfig } from '../util/BazookaManager'
-import { useState } from 'react'
-
-export default function VersionUpdateWarning () {
-  const [confirmed, setConfirmed] = useState<-1 | 0>(-1)
-
-  const {
-    managingVersion,
-    setDownloadedVersionsConfig,
-    setManagingVersion,
-    setPopupMode,
-    setSelectedVersionList,
-    downloadVersions
-  } = useGlobal()
-  if (!managingVersion) return <p>Error</p>
-
-  return (
-    <>
-      <p className='text-xl text-center'>Warning!</p>
-      <div className='popup-content text-center p-2 relative'>
-        <p className='mb-2'>
-          Before proceeding, please note that any modifications to the
-          installation directory <b>(NOT THE SAVE DATA)</b> will be completely
-          wiped/reset.
-        </p>
-        <p>
-          If you do not want your installation directory wiped just yet, please
-          backup the files to another directory. When you click update, it will
-          be wiped.
-        </p>
-        <p className='my-2'>
-          Updating will have the same effect as clicking the uninstall button
-          then installing again.
-        </p>
-        <p>Revisions are not a frequent thing and rarely ever happen.</p>
-        <div className='flex flex-row gap-2 absolute bottom-2 left-1/2 -translate-x-1/2 w-max'>
-          <button
-            className='button btntheme2'
-            onClick={async () =>
-              invoke('open_folder', {
-                name: managingVersion
-              })
-            }
-            title="Click to browse the game's files."
-          >
-            Open Folder / Installation directory
-          </button>
-          <button
-            className='button btntheme2'
-            onClick={async () => {
-              if (confirmed == -1) {
-                setConfirmed(0)
-                return
-              }
-
-              //change popup to downloads
-              setManagingVersion(null)
-              setPopupMode(1)
-
-              //uninstall
-              setDownloadedVersionsConfig(prev => {
-                if (!prev) return prev
-                const updatedList = Object.fromEntries(
-                  Object.entries(prev.list).filter(
-                    ([k]) => k !== managingVersion
-                  )
-                )
-                const updatedConfig = {
-                  ...prev,
-                  list: updatedList
-                }
-                writeVersionsConfig(updatedConfig)
-                return updatedConfig
-              })
-
-              if (
-                await exists('game/' + managingVersion, {
-                  baseDir: BaseDirectory.AppLocalData
-                })
-              )
-                await remove('game/' + managingVersion, {
-                  baseDir: BaseDirectory.AppLocalData,
-                  recursive: true
-                })
-
-              //reinstall
-              setSelectedVersionList([managingVersion])
-              downloadVersions([managingVersion])
-            }}
-            title='Click to update the game'
-          >
-            <span className='text-red-500 font-bold underline'>
-              {confirmed == -1 ? 'Update' : 'Are you sure?'}
-            </span>
-          </button>
-        </div>
-      </div>
-    </>
-  )
-}

src/app/game/berrydash/leaderboards/page.tsx

@@ -0,0 +1,310 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import { BirdColor } from '@/types/BerryDash/BirdColor'
+import axios from 'axios'
+import { GetIconForUser } from '@/lib/BerryDash'
+import Image from 'next/image'
+import './styles.css'
+import { useRouter } from 'next/navigation'
+
+interface BaseEntry {
+  id: number
+  username: string
+  value: number
+  icon: number
+  overlay: number
+  birdColor: BirdColor
+  overlayColor: BirdColor
+  customIcon: string | null
+}
+
+interface Stats {
+  highScore: string
+  totalNormalBerries: string
+  totalPoisonBerries: string
+  totalSlowBerries: string
+  totalUltraBerries: string
+  totalSpeedyBerries: string
+  totalCoinBerries: string
+  totalRandomBerries: string
+  totalAntiBerries: string
+  totalGoldenBerries: string
+  coins: string
+}
+
+interface LeaderboardEntry extends BaseEntry {
+  type: 'leaderboard'
+  value: number
+}
+
+interface Account extends BaseEntry {
+  type: 'account'
+  stats: Stats
+  xp: bigint
+}
+
+export function calculateXP (
+  normalBerries: bigint,
+  poisonBerries: bigint,
+  slowBerries: bigint,
+  ultraBerries: bigint,
+  speedyBerries: bigint,
+  coinBerries: bigint,
+  randomBerries: bigint,
+  antiBerries: bigint,
+  goldenBerries: bigint
+): bigint {
+  let totalXp = 0n
+  totalXp += normalBerries
+  totalXp -= poisonBerries
+  totalXp -= slowBerries
+  totalXp += ultraBerries * 5n
+  totalXp += speedyBerries * 10n
+  totalXp += coinBerries * 10n
+  totalXp += randomBerries
+  totalXp -= antiBerries
+  totalXp += goldenBerries * 4n
+
+  if (totalXp < 0n) totalXp = 0n
+  return totalXp
+}
+
+export function calculateLevel (xp: bigint): number {
+  const levelDivisor = 50.0
+
+  const xpNumber = Number(xp)
+  const discriminant = 95 * 95 + levelDivisor * 2 * xpNumber
+  const level = (-95 + Math.sqrt(discriminant)) / levelDivisor
+  return Math.floor(level) + 1
+}
+
+export default function BerryDashLeaderboards () {
+  const [selected, setSelected] = useState<number>(-1)
+  const [selectedBerryOption, setSelectedBerryOption] = useState<number>(0)
+  const [entries, setEntries] = useState<(LeaderboardEntry | Account)[]>([])
+
+  const router = useRouter()
+
+  const Refresh = useCallback(async () => {
+    try {
+      if (selected == 3 || selected == 4) {
+        const result = await axios.get(
+          'https://games.lncvrt.xyz/api/berrydash/account?username='
+        )
+        if (result.data.success) {
+          let accounts = result.data.data as Account[]
+
+          accounts = accounts.map(acc => {
+            const xp = calculateXP(
+              BigInt(acc.stats.totalNormalBerries),
+              BigInt(acc.stats.totalPoisonBerries),
+              BigInt(acc.stats.totalSlowBerries),
+              BigInt(acc.stats.totalUltraBerries),
+              BigInt(acc.stats.totalSpeedyBerries),
+              BigInt(acc.stats.totalCoinBerries),
+              BigInt(acc.stats.totalRandomBerries),
+              BigInt(acc.stats.totalAntiBerries),
+              BigInt(acc.stats.totalGoldenBerries)
+            )
+            return { ...acc, xp }
+          })
+
+          accounts.sort((a, b) => (b.xp > a.xp ? 1 : b.xp < a.xp ? -1 : 0))
+
+          setEntries(accounts)
+        }
+      } else {
+        const result = await axios.get(
+          'https://games.lncvrt.xyz/api/berrydash/leaderboard/' +
+            (selected == 0
+              ? 'score'
+              : selected == 1
+              ? 'berry?berry=' + selectedBerryOption
+              : selected == 2
+              ? 'coin'
+              : selected == 5
+              ? 'legacy'
+              : 'total')
+        )
+        if (result.data.success) {
+          setEntries(result.data.data as LeaderboardEntry[])
+        }
+      }
+    } catch {
+      setEntries([])
+    }
+  }, [selected, selectedBerryOption])
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Berry Dash Leaderboards'
+  }, [])
+
+  useEffect(() => {
+    if (selected != -1) setTimeout(() => Refresh(), 0)
+  }, [selected, Refresh])
+
+  return (
+    <div className='mx-4 mt-4'>
+      <div className='flex justify-between items-center mb-4'>
+        <p className='text-3xl'>Berry Dash Leaderboards</p>
+        <div className='flex gap-2'>
+          <button
+            className='button btntheme1'
+            onClick={() => {
+              setEntries([])
+              Refresh()
+            }}
+            title='Click to refresh the leaderboards.'
+            hidden={selected == -1}
+          >
+            Refresh
+          </button>
+          <button
+            className='button btntheme1'
+            onClick={() => {
+              if (selected == -1) router.push('/game?id=1')
+              else {
+                setSelected(-1)
+                setEntries([])
+              }
+            }}
+            title='Click to go up a level.'
+          >
+            Back
+          </button>
+        </div>
+      </div>
+      <div className='box'>
+        {selected == -1 ? (
+          <>
+            <p className='text-center mt-4 text-xl'>Select a Leaderboard</p>
+            <div className='flex flex-col gap-2 mt-4 items-center justify-center'>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(0)}
+              >
+                Score Leaderboard
+              </button>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(1)}
+              >
+                Berry Leaderboard
+              </button>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(2)}
+              >
+                Coins Leaderboard
+              </button>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(3)}
+              >
+                Level Leaderboard
+              </button>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(4)}
+              >
+                Total XP Leaderboard
+              </button>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(5)}
+              >
+                Legacy Leaderboard
+              </button>
+              <button
+                className='leaderboard-button'
+                onClick={() => setSelected(6)}
+              >
+                Total Berries Leaderboard
+              </button>
+            </div>
+          </>
+        ) : (
+          <>
+            <div
+              className={`flex flex-col gap-2 overflow-y-auto ${
+                selected == 1 ? 'h-[calc(100vh-128px)]' : 'h-[calc(100vh-96px)]'
+              } px-1`}
+            >
+              {entries.map((item, index) => {
+                const isAccount = 'stats' in item
+                const isLeaderboard = 'value' in item && !isAccount
+
+                return (
+                  <div
+                    key={item.id}
+                    className='leaderboard-entry flex justify-between items-center'
+                  >
+                    <div className='flex items-center gap-1'>
+                      <Image
+                        src={
+                          !item.customIcon
+                            ? `https://games-r2.lncvrt.xyz/game-assets/berrydash/icons/bird_${
+                                item.icon === 1
+                                  ? GetIconForUser(item.id)
+                                  : item.icon
+                              }.png`
+                            : `https://games.lncvrt.xyz/api/berrydash/icon-marketplace/icon?id=${item.customIcon}&raw=true`
+                        }
+                        className='pointer-events-none'
+                        width={48}
+                        height={48}
+                        alt=''
+                        unoptimized
+                      />
+                      <p>
+                        {item.username} (#{index + 1})
+                      </p>
+                    </div>
+
+                    {isLeaderboard ? (
+                      <p>
+                        {selected === 1 || selected === 6
+                          ? 'Berries'
+                          : selected === 2
+                          ? 'Coins'
+                          : 'Score'}
+                        : {item.value.toLocaleString('en-US')}
+                      </p>
+                    ) : isAccount ? (
+                      <p>
+                        {selected === 3 ? 'Level' : 'XP'}:{' '}
+                        {selected === 3
+                          ? calculateLevel(item.xp).toLocaleString('en-US')
+                          : item.xp.toLocaleString('en-US')}
+                      </p>
+                    ) : null}
+                  </div>
+                )
+              })}
+            </div>
+            {selected == 1 && (
+              <div className='flex justify-center'>
+                <select
+                  value={selectedBerryOption}
+                  onChange={e => setSelectedBerryOption(Number(e.target.value))}
+                  className='leaderboard-select mt-2'
+                >
+                  <option value='0'>Normal Berry</option>
+                  <option value='1'>Poison Berry</option>
+                  <option value='2'>Slow Berry</option>
+                  <option value='3'>Ultra Berry</option>
+                  <option value='4'>Speedy Berry</option>
+                  <option value='5'>Coin Berry</option>
+                  <option value='6'>Random Berry</option>
+                  <option value='7'>Anti Berry</option>
+                  <option value='8'>Golden Berry</option>
+                </select>
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

src/app/game/berrydash/leaderboards/styles.css

@@ -0,0 +1,14 @@
+@import "tailwindcss";
+
+.box {
+  @apply bg-(--col1) border border-(--col3) rounded-lg w-auto p-1 h-[calc(100vh-84px)];
+}
+
+.leaderboard-button,
+.leaderboard-select {
+  @apply bg-(--col2) hover:bg-(--col4) border border-(--col4) hover:border-(--col6) rounded-lg px-4 py-2 inline-block transition-all duration-200;
+}
+
+.leaderboard-entry {
+  @apply rounded-lg text-gray-200 text-lg px-1 py-0.5 transition-colors bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5) cursor-pointer;
+}

src/app/game/page.tsx

@@ -1,13 +1,17 @@
 'use client'
 
-import { useEffect, useState } from 'react'
-import '../Installs.css'
+import { useEffect } from 'react'
+import '@/app/Installs.css'
 import { invoke } from '@tauri-apps/api/core'
-import { useGlobal } from '../GlobalProvider'
-import { useSearchParams } from 'next/navigation'
+import { useGlobal } from '@/app/GlobalProvider'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { platform } from '@tauri-apps/plugin-os'
 import { faWarning } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { ask, message } from '@tauri-apps/plugin-dialog'
+import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
+import { writeVersionsConfig } from '@/lib/BazookaManager'
+import { openFolder } from '@/lib/Util'
 
 export default function Installs () {
   const {
@@ -22,17 +26,19 @@ export default function Installs () {
     getVersionInfo,
     getGameInfo,
     setSelectedGame,
-    serverVersionList
+    serverVersionList,
+    category,
+    setCategory,
+    setDownloadedVersionsConfig,
+    downloadVersions
   } = useGlobal()
 
   const params = useSearchParams()
+  const router = useRouter()
 
   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 +46,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
@@ -63,8 +64,28 @@ export default function Installs () {
   return (
     <div className='mx-4 mt-4'>
       <div className='flex justify-between items-center mb-4'>
-        <p className='text-3xl'>Installs</p>
+        <p
+          className={`text-3xl truncate ${
+            category != -1
+              ? 'w-[calc(100vw-495px)]'
+              : game.id == 1
+              ? 'w-[calc(100vw-560px)]'
+              : 'w-[calc(100vw-440px)]'
+          }`}
+        >
+          {game.name} Installs
+        </p>
         <div className='flex gap-2'>
+          <button
+            className='button btntheme1'
+            onClick={() => {
+              router.push('/game/berrydash/leaderboards')
+            }}
+            title='View the leaderboards for this game.'
+            hidden={game.id != 1}
+          >
+            Leaderboards
+          </button>
           <button
             className='button btntheme1'
             onClick={() => {
@@ -123,21 +144,9 @@ export default function Installs () {
                 return (
                   <div
                     key={key}
-                    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))
-                    }}
+                    className={'downloads-entry'}
+                    title={'Click to view category'}
+                    onClick={() => setCategory(Number(key))}
                   >
                     <div className='h-18 w-screen relative'>
                       <p className='text-2xl'>{value}</p>
@@ -171,17 +180,6 @@ export default function Installs () {
                           })()}
                         </p>
                       </div>
-
-                      <button
-                        className='button absolute right-0 bottom-0'
-                        hidden={
-                          !normalConfig?.settings.useLegacyInteractButtons
-                        }
-                        title='Click to view category'
-                        onClick={() => setCategory(Number(key))}
-                      >
-                        Installs
-                      </button>
                     </div>
                   </div>
                 )
@@ -217,33 +215,23 @@ export default function Installs () {
               .map(entry => (
                 <div
                   key={entry}
-                  className={`downloads-entry ${
-                    normalConfig?.settings.useLegacyInteractButtons ||
-                    needsRevisionUpdate(
-                      getVersionInfo(entry)?.lastRevision,
-                      entry
-                    )
-                      ? ''
-                      : 'cursor-pointer'
-                  }`}
+                  className={'downloads-entry'}
                   title={
-                    normalConfig?.settings.useLegacyInteractButtons ||
-                    needsRevisionUpdate(
-                      getVersionInfo(entry)?.lastRevision,
-                      entry
-                    )
-                      ? ''
-                      : 'Click to launch game. Right-click to manage this version install'
+                    'Click to launch game. Right-click to manage this version install'
                   }
                   onClick={async () => {
                     if (
-                      normalConfig?.settings.useLegacyInteractButtons ||
                       needsRevisionUpdate(
                         getVersionInfo(entry)?.lastRevision,
                         entry
                       )
+                    ) {
+                      await message(
+                        "Can't launch game. Need revision update.",
+                        { title: 'Error launching game', kind: 'error' }
                       )
                       return
+                    }
                     const verInfo = getVersionInfo(entry)
                     if (verInfo == undefined) return
                     const gameInfo = getGameInfo(verInfo.game)
@@ -262,15 +250,6 @@ export default function Installs () {
                   }}
                   onContextMenu={e => {
                     e.preventDefault()
-                    if (
-                      normalConfig?.settings.useLegacyInteractButtons ||
-                      needsRevisionUpdate(
-                        getVersionInfo(entry)?.lastRevision,
-                        entry
-                      )
-                    )
-                      return
-
                     setManagingVersion(entry)
                     setPopupMode(2)
                     setShowPopup(true)
@@ -302,6 +281,10 @@ export default function Installs () {
                           !(
                             platform() === 'linux' &&
                             getVersionInfo(entry)?.wine
+                          ) ||
+                          needsRevisionUpdate(
+                            getVersionInfo(entry)?.lastRevision,
+                            entry
                           )
                         }
                         onClick={e => e.stopPropagation()}
@@ -344,64 +327,62 @@ export default function Installs () {
                       </button>
                       <button
                         className='button'
-                        hidden={
-                          !normalConfig?.settings.useLegacyInteractButtons ||
-                          needsRevisionUpdate(
-                            getVersionInfo(entry)?.lastRevision,
-                            entry
-                          )
-                        }
-                        onClick={e => {
+                        onClick={async e => {
                           e.stopPropagation()
-                          setManagingVersion(entry)
-                          setPopupMode(2)
+                          const answer = await ask(
+                            'Before proceeding, if you do not want your installation directory wiped just yet, please backup the files to another directory. When you click "Yes", it will be wiped. Click "No" if you want to open the installation folder instead.',
+                            {
+                              title: 'Revision Update',
+                              kind: 'warning'
+                            }
+                          )
+                          if (answer) {
+                            const answer2 = await ask(
+                              'Are you sure you want to update? If you did not read the last popup, please go back and read it.',
+                              {
+                                title: 'Revision Update',
+                                kind: 'warning'
+                              }
+                            )
+                            if (!answer2) return
+
+                            //open downloads popup
+                            setPopupMode(1)
                             setShowPopup(true)
                             setFadeOut(false)
-                        }}
-                        title='Click to manage this version install'
-                      >
-                        Manage
-                      </button>
-                      <button
-                        className='button'
-                        onClick={e => {
-                          e.stopPropagation()
-                          const verInfo = getVersionInfo(entry)
-                          if (verInfo == undefined) return
-                          const gameInfo = getGameInfo(verInfo.game)
-                          if (gameInfo == undefined) return
-                          invoke('launch_game', {
-                            name: verInfo.id,
-                            executable: verInfo.executable,
-                            displayName: verInfo.displayName,
-                            useWine: !!(
-                              platform() === 'linux' &&
-                              verInfo.wine &&
-                              normalConfig?.settings.useWineOnUnixWhenNeeded
-                            ),
-                            wineCommand:
-                              normalConfig?.settings.wineOnUnixCommand
+
+                            //uninstall
+                            setDownloadedVersionsConfig(prev => {
+                              if (!prev) return prev
+                              const updatedList = Object.fromEntries(
+                                Object.entries(prev.list).filter(
+                                  ([k]) => k !== entry
+                                )
+                              )
+                              const updatedConfig = {
+                                ...prev,
+                                list: updatedList
+                              }
+                              writeVersionsConfig(updatedConfig)
+                              return updatedConfig
+                            })
+
+                            if (
+                              await exists('game/' + entry, {
+                                baseDir: BaseDirectory.AppLocalData
                               })
-                        }}
-                        hidden={
-                          !normalConfig?.settings.useLegacyInteractButtons ||
-                          needsRevisionUpdate(
-                            getVersionInfo(entry)?.lastRevision,
-                            entry
                             )
+                              await remove('game/' + entry, {
+                                baseDir: BaseDirectory.AppLocalData,
+                                recursive: true
+                              })
+
+                            //reinstall
+                            setSelectedVersionList([entry])
+                            downloadVersions([entry])
+                          } else {
+                            openFolder(entry)
                           }
-                        title='Click to launch game'
-                      >
-                        Launch
-                      </button>
-                      <button
-                        className='button'
-                        onClick={e => {
-                          e.stopPropagation()
-                          setManagingVersion(entry)
-                          setPopupMode(5)
-                          setShowPopup(true)
-                          setFadeOut(false)
                         }}
                         hidden={
                           !needsRevisionUpdate(
@@ -409,7 +390,7 @@ export default function Installs () {
                             entry
                           )
                         }
-                        title='Click to update the game'
+                        title={'Click to update the game'}
                       >
                         Update
                       </button>

src/app/layout.tsx

@@ -1,52 +1,42 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import Sidebar from './componets/Sidebar'
+import Sidebar from '@/componets/Sidebar'
 import './Globals.css'
-import { DownloadProgress } from './types/DownloadProgress'
+import { DownloadProgress } from '@/types/DownloadProgress'
 import { invoke } from '@tauri-apps/api/core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faAdd,
-  faCheck,
-  faChevronLeft,
-  faCode,
-  faDownload,
-  faInfo,
-  faRemove,
-  faShieldHalved,
-  faWarning,
-  faXmark
-} from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faXmark } from '@fortawesome/free-solid-svg-icons'
 import {
   readNormalConfig,
   readVersionsConfig,
   writeVersionsConfig
-} from './util/BazookaManager'
-import { VersionsConfig } from './types/VersionsConfig'
-import { NormalConfig } from './types/NormalConfig'
+} from '@/lib/BazookaManager'
+import { VersionsConfig } from '@/types/VersionsConfig'
+import { NormalConfig } from '@/types/NormalConfig'
 import { app } from '@tauri-apps/api'
 import axios from 'axios'
 import { openUrl } from '@tauri-apps/plugin-opener'
 import { GlobalProvider } from './GlobalProvider'
 import { Roboto } from 'next/font/google'
-import { ServerVersionsResponse } from './types/ServerVersionsResponse'
-import { GameVersion } from './types/GameVersion'
-import { Game } from './types/Game'
+import { ServerVersionsResponse } from '@/types/ServerVersionsResponse'
+import { GameVersion } from '@/types/GameVersion'
+import { Game } from '@/types/Game'
 import { listen } from '@tauri-apps/api/event'
 import { usePathname } from 'next/navigation'
 import { arch, platform } from '@tauri-apps/plugin-os'
-import VersionInfo from './componets/VersionInfo'
-import prettyBytes from 'pretty-bytes'
-import ProgressBar from './componets/ProgressBar'
-import { notifyUser } from './util/Notifications'
+import { notifyUser } from '@/lib/Notifications'
 import {
   isPermissionGranted,
   requestPermission
 } from '@tauri-apps/plugin-notification'
-import VersionChangelog from './componets/VersionChangelog'
 import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
-import VersionUpdateWarning from './componets/VersionUpdateWarning'
+
+import DownloadsPopup from '@/componets/popups/Downloads'
+import VersionInfoPopup from '@/componets/popups/VersionInfo'
+import ManagingVersionPopup from '@/componets/popups/ManageVersion'
+import GamesDownloadPopup from '@/componets/popups/GamesDownload'
+import VersionsDownloadPopup from '@/componets/popups/VersionsDownload'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -77,13 +67,18 @@ export default function RootLayout ({
   const [downloadProgress, setDownloadProgress] = useState<DownloadProgress[]>(
     []
   )
+  const [downloadQueue, setDownloadQueue] = useState<string[]>([])
+  const [isProcessingQueue, setIsProcessingQueue] = useState<boolean>(false)
   const [managingVersion, setManagingVersion] = useState<string | null>(null)
   const [viewingInfoFromDownloads, setViewingInfoFromDownloads] =
     useState<boolean>(false)
   const [selectedGame, setSelectedGame] = useState<number | null>(null)
 
+  const [category, setCategory] = useState<number>(-1)
+
   const pathname = usePathname()
   const revisionCheck = useRef(false)
+  const previousQueueLength = useRef(0)
 
   function getSpecialVersionsList (game?: number): GameVersion[] {
     if (!normalConfig || !serverVersionList) return []
@@ -101,6 +96,7 @@ export default function RootLayout ({
           return false
 
         if (game && v.game != game) return false
+        if (category != -1 && v.category != category) return false
         if (downloadProgress.length != 0) {
           return !downloadProgress.some(d => d.version === v.id)
         }
@@ -169,21 +165,7 @@ export default function RootLayout ({
     return { installed, total }
   }
 
-  function formatEtaSmart (seconds: number) {
-    if (seconds < 60) return `${Math.floor(seconds)}s`
-    if (seconds < 3600)
-      return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`
-    if (seconds < 86400) {
-      const h = Math.floor(seconds / 3600)
-      const m = Math.floor((seconds % 3600) / 60)
-      return `${h}h ${m}m`
-    }
-    const d = Math.floor(seconds / 86400)
-    const h = Math.floor((seconds % 86400) / 3600)
-    return `${d}d ${h}h`
-  }
-
-  function closePopup () {
+  const closePopup = useCallback(() => {
     if (popupMode == 0 && selectedGame && pathname === '/') {
       setSelectedGame(null)
       setSelectedVersionList([])
@@ -196,7 +178,7 @@ export default function RootLayout ({
       setFadeOut(true)
       setTimeout(() => setShowPopup(false), 200)
     }
-  }
+  }, [popupMode, selectedGame, pathname, viewingInfoFromDownloads])
 
   useEffect(() => {
     let unlistenProgress: (() => void) | null = null
@@ -304,34 +286,51 @@ export default function RootLayout ({
       if (list.length === 0) return
       setSelectedVersionList([])
 
-      const newDownloads = list.map(
+      const newVersions = list.filter(
+        version =>
+          !downloadQueue.includes(version) &&
+          !downloadProgress.some(d => d.version === version)
+      )
+
+      if (newVersions.length === 0) return
+
+      const newDownloads = newVersions.map(
         version =>
           new DownloadProgress(version, 0, 0, false, true, false, false, 0, 0)
       )
 
-      setDownloadProgress(newDownloads)
-
-      for (const download of newDownloads) {
-        const info = getVersionInfo(download.version)
-        if (!info) {
-          setDownloadProgress(prev =>
-            prev.filter(d => d.version !== download.version)
+      setDownloadProgress(prev => [...prev, ...newDownloads])
+      setDownloadQueue(prev => [...prev, ...newVersions])
+    },
+    [downloadQueue, downloadProgress]
   )
-          continue
+
+  useEffect(() => {
+    if (isProcessingQueue || downloadQueue.length === 0) return
+
+    const processNextDownload = async () => {
+      setIsProcessingQueue(true)
+
+      const versionId = downloadQueue[0]
+      const info = getVersionInfo(versionId)
+
+      if (!info) {
+        setDownloadProgress(prev => prev.filter(d => d.version !== versionId))
+        setDownloadQueue(prev => prev.slice(1))
+        setIsProcessingQueue(false)
+        return
       }
 
       const gameInfo = getGameInfo(info.game)
       if (!gameInfo) {
-          setDownloadProgress(prev =>
-            prev.filter(d => d.version !== download.version)
-          )
-          continue
+        setDownloadProgress(prev => prev.filter(d => d.version !== versionId))
+        setDownloadQueue(prev => prev.slice(1))
+        setIsProcessingQueue(false)
+        return
       }
 
       setDownloadProgress(prev =>
-          prev.map(d =>
-            d.version === download.version ? { ...d, queued: false } : d
-          )
+        prev.map(d => (d.version === versionId ? { ...d, queued: false } : d))
       )
 
       try {
@@ -348,9 +347,7 @@ export default function RootLayout ({
       })
 
       if (res === '1') {
-          setDownloadProgress(prev =>
-            prev.filter(d => d.version !== download.version)
-          )
+        setDownloadProgress(prev => prev.filter(d => d.version !== versionId))
         setDownloadedVersionsConfig(prev => {
           if (!prev) return prev
 
@@ -358,7 +355,7 @@ export default function RootLayout ({
             ...prev,
             list: {
               ...prev.list,
-                [download.version]: Date.now()
+              [versionId]: Date.now()
             }
           }
 
@@ -368,7 +365,7 @@ export default function RootLayout ({
       } else {
         setDownloadProgress(prev =>
           prev.map(d =>
-              d.version === download.version
+            d.version === versionId
               ? { ...d, queued: false, failed: true, progress: 0 }
               : d
           )
@@ -379,16 +376,39 @@ export default function RootLayout ({
             `The download for version ${info.displayName} has failed.`
           )
       }
+
+      setDownloadQueue(prev => prev.slice(1))
+      setIsProcessingQueue(false)
     }
 
-      if (normalConfig?.settings.allowNotifications)
-        await notifyUser('Downloads Finished', 'All downloads have finished.')
+    processNextDownload()
+  }, [
+    downloadQueue,
+    isProcessingQueue,
+    getVersionInfo,
+    getGameInfo,
+    normalConfig
+  ])
 
-      setFadeOut(true)
-      setTimeout(() => setShowPopup(false), 200)
-    },
-    [getGameInfo, getVersionInfo, normalConfig]
-  )
+  useEffect(() => {
+    if (
+      downloadQueue.length === 0 &&
+      downloadProgress.length === 0 &&
+      !isProcessingQueue &&
+      previousQueueLength.current > 0 &&
+      normalConfig?.settings.allowNotifications
+    ) {
+      notifyUser('Downloads Finished', 'All downloads have finished.')
+      setTimeout(() => closePopup(), 0)
+    }
+    previousQueueLength.current = downloadQueue.length + downloadProgress.length
+  }, [
+    downloadQueue,
+    downloadProgress,
+    isProcessingQueue,
+    normalConfig,
+    closePopup
+  ])
 
   useEffect(() => {
     if (revisionCheck.current) return
@@ -480,7 +500,15 @@ export default function RootLayout ({
                 getVersionsAmountData,
                 viewingInfoFromDownloads,
                 version,
-                downloadVersions
+                downloadVersions,
+                category,
+                setCategory,
+                downloadQueue,
+                setDownloadQueue,
+                closePopup,
+                getSpecialVersionsList,
+                selectedGame,
+                setViewingInfoFromDownloads
               }}
             >
               <div
@@ -533,425 +561,16 @@ export default function RootLayout ({
                         />
                       </button>
                       {popupMode === 0 && selectedGame ? (
-                        <>
-                          <p className='text-xl text-center'>
-                            Select versions to download
-                          </p>
-                          <div className='popup-content'>
-                            {getSpecialVersionsList(selectedGame).map(
-                              (v, i) => (
-                                <div key={i} className='popup-entry'>
-                                  <div className='flex items-center'>
-                                    <p
-                                      className={`text-2xl truncate ${
-                                        selectedVersionList.includes(v.id)
-                                          ? 'max-w-84.5'
-                                          : 'max-w-91.5'
-                                      }`}
-                                    >
-                                      {v.displayName}
-                                    </p>
-                                  </div>
-                                  <button
-                                    className='button btntheme3 right-20.75 bottom-1.75'
-                                    onClick={() => {
-                                      setSelectedVersionList(prev =>
-                                        prev.includes(v.id)
-                                          ? prev.filter(i => i !== v.id)
-                                          : [...prev, v.id]
-                                      )
-                                    }}
-                                    title={
-                                      selectedVersionList.includes(v.id)
-                                        ? 'This version will be downloaded. Click to remove from the list of versions that will be downloaded.'
-                                        : 'This version will NOT be downloaded. Click to add from the list of versions that will be downloaded.'
-                                    }
-                                  >
-                                    {selectedVersionList.includes(v.id) ? (
-                                      <>
-                                        <FontAwesomeIcon icon={faRemove} />{' '}
-                                        Remove
-                                      </>
-                                    ) : (
-                                      <>
-                                        <FontAwesomeIcon icon={faAdd} /> Add
-                                      </>
-                                    )}
-                                  </button>
-                                  <button
-                                    className='button btntheme3 right-1.5 bottom-1.75'
-                                    onClick={() => {
-                                      setManagingVersion(v.id)
-                                      setViewingInfoFromDownloads(true)
-                                      setPopupMode(3)
-                                    }}
-                                    title='Click to view version info'
-                                  >
-                                    <FontAwesomeIcon icon={faInfo} /> Info
-                                  </button>
-                                </div>
-                              )
-                            )}
-                          </div>
-                        </>
+                        <VersionsDownloadPopup />
                       ) : popupMode === 0 && !selectedGame ? (
-                        <>
-                          <p className='text-xl text-center'>
-                            Select a game to download
-                          </p>
-                          <div className='popup-content'>
-                            {serverVersionList?.games
-                              .filter(v => {
-                                const data = getVersionsAmountData(v.id)
-                                if (!data) return false
-                                if (data.total > 0) return true
-                              })
-                              .map((v, i) => (
-                                <div key={i} className='popup-entry'>
-                                  <p className='text-2xl'>{v.name}</p>
-                                  <div className='flex gap-2'>
-                                    <div
-                                      className='entry-info-item btntheme3'
-                                      title='The amount of versions installed of this game in installed/installable format.'
-                                    >
-                                      <p>
-                                        {(() => {
-                                          const data = getVersionsAmountData(
-                                            v.id
-                                          )
-                                          if (!data) return 'N/A'
-                                          return `${data.installed}/${data.total}`
-                                        })()}{' '}
-                                        versions installed
-                                      </p>
-                                    </div>
-                                    <div
-                                      className='entry-info-item btntheme3'
-                                      hidden={!v.official}
-                                      title='This game is official.'
-                                    >
-                                      <FontAwesomeIcon
-                                        icon={faCheck}
-                                        color='#19c84b'
-                                      />
-                                      <p>Official</p>
-                                    </div>
-                                    <div
-                                      className='entry-info-item btntheme3'
-                                      hidden={v.official}
-                                      title={
-                                        v.verified
-                                          ? 'This game is verified to be safe'
-                                          : 'This game is NOT verified to be save. Proceed with caution.'
-                                      }
-                                    >
-                                      <FontAwesomeIcon
-                                        icon={
-                                          v.verified
-                                            ? faShieldHalved
-                                            : faWarning
-                                        }
-                                        color={
-                                          v.verified ? '#19c84b' : '#ffc800'
-                                        }
-                                      />
-                                      <p>
-                                        {v.verified ? 'Verified' : 'Unverified'}
-                                      </p>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className='entry-info-item btntheme3 mt-2'
-                                    hidden={v.developer == null}
-                                    title={`The developer of ${v.name} is ${v.developer}.`}
-                                  >
-                                    <FontAwesomeIcon
-                                      icon={faCode}
-                                      color='lightgray'
-                                    />
-                                    <p>Developer: {v.developer}</p>
-                                  </div>
-                                  <button
-                                    className='button btntheme3 right-2 bottom-2'
-                                    onClick={() => setSelectedGame(v.id)}
-                                    title={`Click to download specific versions of the game. You have ${(() => {
-                                      const data = getVersionsAmountData(v.id)
-                                      if (!data) return 'N/A'
-                                      return `${data.installed} of ${data.total}`
-                                    })()} versions downloaded.`}
-                                  >
-                                    <>
-                                      <FontAwesomeIcon icon={faDownload} />{' '}
-                                      Download
-                                    </>
-                                  </button>
-                                </div>
-                              ))}
-                          </div>
-                        </>
+                        <GamesDownloadPopup />
                       ) : popupMode === 1 ? (
-                        <>
-                          <p className='text-xl text-center'>Downloads</p>
-                          <div className='popup-content'>
-                            {downloadProgress.map((v, i) => (
-                              <div
-                                key={i}
-                                className='popup-entry flex flex-col justify-between'
-                              >
-                                <p className='text-2xl text-center'>
-                                  {getVersionInfo(v.version)?.displayName}
-                                </p>
-                                <div className='mt-6.25 flex items-center justify-between'>
-                                  {v.failed ? (
-                                    <>
-                                      <div className='flex items-center'>
-                                        <span className='text-red-500 inline-block w-full text-center'>
-                                          Download failed
-                                        </span>
-                                        <button
-                                          className='button btntheme3 ml-30 mb-2'
-                                          onClick={() => {
-                                            setDownloadProgress(prev =>
-                                              prev.filter(
-                                                d => d.version !== v.version
-                                              )
-                                            )
-                                          }}
-                                          title='Click to remove this version from this menu.'
-                                        >
-                                          Cancel
-                                        </button>
-                                      </div>
-                                    </>
-                                  ) : v.queued ? (
-                                    <span className='text-yellow-500 inline-block w-full text-center'>
-                                      Queued…
-                                    </span>
-                                  ) : v.queued ? (
-                                    <span className='text-yellow-500 inline-block w-full text-center'>
-                                      Queued…
-                                    </span>
-                                  ) : v.hash_checking ? (
-                                    <span className='text-blue-500 inline-block w-full text-center'>
-                                      Checking hash...
-                                    </span>
-                                  ) : v.finishing ? (
-                                    <span className='text-green-500 inline-block w-full text-center'>
-                                      Finishing...
-                                    </span>
-                                  ) : (
-                                    <div className='flex flex-col gap-1 w-full'>
-                                      <span className='text-center'>
-                                        Downloaded{' '}
-                                        {prettyBytes(v.progressBytes, {
-                                          minimumFractionDigits: 1,
-                                          maximumFractionDigits: 1
-                                        })}{' '}
-                                        of{' '}
-                                        {prettyBytes(
-                                          getVersionInfo(v.version)?.size ?? 0,
-                                          {
-                                            minimumFractionDigits: 1,
-                                            maximumFractionDigits: 1
-                                          }
-                                        )}{' '}
-                                        (ETA: {formatEtaSmart(v.etaSecs)} &bull;
-                                        Speed:{' '}
-                                        {prettyBytes(v.speed, {
-                                          minimumFractionDigits: 1,
-                                          maximumFractionDigits: 1
-                                        })}
-                                        /s)
-                                      </span>
-                                      <ProgressBar
-                                        progress={v.progress}
-                                        className='w-full'
-                                      />
-                                    </div>
-                                  )}
-                                </div>
-                              </div>
-                            ))}
-                          </div>
-                        </>
+                        <DownloadsPopup />
                       ) : popupMode === 2 ? (
-                        managingVersion ? (
-                          <>
-                            <p className='text-xl text-center'>
-                              Manage{' '}
-                              {getVersionInfo(managingVersion)?.displayName}
-                            </p>
-                            <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
-                              <button
-                                className='button btntheme2'
-                                disabled={downloadProgress.length != 0}
-                                onClick={async () => {
-                                  closePopup()
-
-                                  setDownloadedVersionsConfig(prev => {
-                                    if (!prev) return prev
-                                    const updatedList = Object.fromEntries(
-                                      Object.entries(prev.list).filter(
-                                        ([k]) => k !== managingVersion
-                                      )
-                                    )
-                                    const updatedConfig = {
-                                      ...prev,
-                                      list: updatedList
-                                    }
-                                    writeVersionsConfig(updatedConfig)
-                                    return updatedConfig
-                                  })
-
-                                  if (
-                                    await exists('game/' + managingVersion, {
-                                      baseDir: BaseDirectory.AppLocalData
-                                    })
-                                  )
-                                    await remove('game/' + managingVersion, {
-                                      baseDir: BaseDirectory.AppLocalData,
-                                      recursive: true
-                                    })
-                                }}
-                                title='Click to uninstall this game. This will NOT remove any progress or any save files.'
-                              >
-                                Uninstall
-                              </button>
-                              <button
-                                className='button btntheme2'
-                                disabled={downloadProgress.length != 0}
-                                onClick={async () => {
-                                  //change popup to downloads
-                                  setManagingVersion(null)
-                                  setPopupMode(1)
-
-                                  //uninstall
-                                  setDownloadedVersionsConfig(prev => {
-                                    if (!prev) return prev
-                                    const updatedList = Object.fromEntries(
-                                      Object.entries(prev.list).filter(
-                                        ([k]) => k !== managingVersion
-                                      )
-                                    )
-                                    const updatedConfig = {
-                                      ...prev,
-                                      list: updatedList
-                                    }
-                                    writeVersionsConfig(updatedConfig)
-                                    return updatedConfig
-                                  })
-
-                                  if (
-                                    await exists('game/' + managingVersion, {
-                                      baseDir: BaseDirectory.AppLocalData
-                                    })
-                                  )
-                                    await remove('game/' + managingVersion, {
-                                      baseDir: BaseDirectory.AppLocalData,
-                                      recursive: true
-                                    })
-
-                                  //reinstall
-                                  setSelectedVersionList([managingVersion])
-                                  downloadVersions([managingVersion])
-                                }}
-                                title="Click to reinstall this game. This will NOT remove any progress or any save files. This WILL uninstall any modifications to the game's executable files."
-                              >
-                                Reinstall
-                              </button>
-                              <button
-                                className='button btntheme2'
-                                onClick={async () =>
-                                  invoke('open_folder', {
-                                    name: managingVersion
-                                  })
-                                }
-                                title="Click to browse the game's files."
-                              >
-                                Open Folder
-                              </button>
-                            </div>
-                          </>
-                        ) : (
-                          <p className='text-xl text-center'>
-                            No version selected
-                          </p>
-                        )
+                        <ManagingVersionPopup />
                       ) : popupMode === 3 ? (
-                        managingVersion && downloadedVersionsConfig ? (
-                          <VersionInfo />
-                        ) : (
-                          <p className='text-xl text-center'>
-                            No version selected
-                          </p>
-                        )
-                      ) : popupMode === 4 ? (
-                        managingVersion && downloadedVersionsConfig ? (
-                          <VersionChangelog />
-                        ) : (
-                          <p className='text-xl text-center'>
-                            No version selected
-                          </p>
-                        )
-                      ) : popupMode === 5 ? (
-                        managingVersion && downloadedVersionsConfig ? (
-                          <VersionUpdateWarning />
-                        ) : (
-                          <p className='text-xl text-center'>
-                            No version selected
-                          </p>
-                        )
+                        <VersionInfoPopup />
                       ) : null}
-                      {popupMode == 0 &&
-                        selectedGame &&
-                        serverVersionList != null && (
-                          <div className='flex justify-center'>
-                            <button
-                              className='button btntheme1 w-fit mt-2 -mb-4'
-                              onClick={() => {
-                                setFadeOut(true)
-                                setTimeout(() => setShowPopup(false), 200)
-                                if (downloadedVersionsConfig)
-                                  downloadVersions(selectedVersionList)
-                              }}
-                              disabled={downloadProgress.length != 0}
-                              title={
-                                downloadProgress.length != 0
-                                  ? "You cannot download the versions as you have another download that hasn't completed."
-                                  : `Click to download ${
-                                      selectedVersionList.length
-                                    } version${
-                                      selectedVersionList.length == 1 ? '' : 's'
-                                    } of ${getGameInfo(selectedGame)?.name}`
-                              }
-                            >
-                              Download {selectedVersionList.length} version
-                              {selectedVersionList.length == 1 ? '' : 's'}
-                            </button>
-                            <button
-                              className='button btntheme1 w-fit mt-2 ml-2 -mb-4'
-                              onClick={() => {
-                                const allIds = getSpecialVersionsList(
-                                  selectedGame
-                                ).map(v => v.id)
-                                setSelectedVersionList(prev =>
-                                  prev.length === allIds.length ? [] : allIds
-                                )
-                              }}
-                              title={
-                                selectedVersionList.length ===
-                                getSpecialVersionsList(selectedGame).length
-                                  ? 'Click to remove all selected versions for download.'
-                                  : 'Click to add all selected versions for download.'
-                              }
-                            >
-                              {selectedVersionList.length ===
-                              getSpecialVersionsList(selectedGame).length
-                                ? 'Deselect All'
-                                : 'Select All'}
-                            </button>
-                          </div>
-                        )}
                     </div>
                   </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()
@@ -68,18 +68,10 @@ export default function Installs () {
               .map(i => (
                 <div
                   key={i.id}
-                  className={`downloads-entry ${
-                    normalConfig?.settings.useLegacyInteractButtons
-                      ? ''
-                      : 'cursor-pointer'
-                  }`}
-                  title={
-                    normalConfig?.settings.useLegacyInteractButtons
-                      ? ''
-                      : 'Click to view game installs'
-                  }
+                  className={'downloads-entry'}
+                  title={'Click to view game installs'}
                   onClick={() => {
-                    if (normalConfig?.settings.useLegacyInteractButtons) return
+                    setCategory(-1)
                     router.push('/game?id=' + i.id)
                   }}
                 >
@@ -127,15 +119,6 @@ export default function Installs () {
                         <p>{i.verified ? 'Verified' : 'Unverified'}</p>
                       </div>
                     </div>
-
-                    <Link
-                      className='button absolute right-0 bottom-0'
-                      href={'/game?id=' + i.id}
-                      hidden={!normalConfig?.settings.useLegacyInteractButtons}
-                      title='Click to view game installs'
-                    >
-                      Installs
-                    </Link>
                   </div>
                 </div>
               ))

src/app/settings/page.tsx

@@ -1,18 +1,16 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Setting } from '../componets/Setting'
-import { writeNormalConfig } from '../util/BazookaManager'
-import { useGlobal } from '../GlobalProvider'
-import { copyToClipboard } from '../util/Clipboard'
+import { Setting } from '@/componets/Setting'
+import { writeNormalConfig } from '@/lib/BazookaManager'
+import { useGlobal } from '@/app/GlobalProvider'
+import { copyToClipboard } from '@/lib/Clipboard'
 import { platform } from '@tauri-apps/plugin-os'
 
 export default function Settings () {
   const [allowNotifications, setAllowNotifications] = useState(false)
   const [alwaysShowGamesInSidebar, setAlwaysShowGamesInSidebar] =
     useState(false)
-  const [useLegacyInteractButtons, setUseLegacyInteractButtons] =
-    useState(false)
   const [useWineOnUnixWhenNeeded, setUseWineOnUnixWhenNeeded] = useState(false)
   const [wineOnUnixCommand, setWineOnUnixCommand] = useState('wine %path%')
   const [theme, setTheme] = useState(0)
@@ -27,9 +25,6 @@ export default function Settings () {
         setAlwaysShowGamesInSidebar(
           normalConfig.settings.alwaysShowGamesInSidebar
         )
-        setUseLegacyInteractButtons(
-          normalConfig.settings.useLegacyInteractButtons
-        )
         setUseWineOnUnixWhenNeeded(
           normalConfig.settings.useWineOnUnixWhenNeeded
         )
@@ -92,29 +87,6 @@ export default function Settings () {
             }}
             title="This setting will make it so when you are on a page like this, the games won't disappear."
           />
-          <Setting
-            label='Show Installs/Launch/Manage Buttons'
-            value={useLegacyInteractButtons}
-            onChange={async () => {
-              if (!normalConfig) return
-              setUseLegacyInteractButtons(!useLegacyInteractButtons)
-              setNormalConfig({
-                ...normalConfig,
-                settings: {
-                  ...normalConfig.settings,
-                  useLegacyInteractButtons: !useLegacyInteractButtons
-                }
-              })
-              await writeNormalConfig({
-                ...normalConfig,
-                settings: {
-                  ...normalConfig.settings,
-                  useLegacyInteractButtons: !useLegacyInteractButtons
-                }
-              })
-            }}
-            title='Enable the legacy method of using the installs/launch/manage buttons. In the future this setting may be removed so try and get used to the new method.'
-          />
           <Setting
             label='Use wine when needed to launch games'
             value={useWineOnUnixWhenNeeded}

src/app/types/LeaderboardEntry.ts

@@ -1,10 +0,0 @@
-export interface LeaderboardEntry {
-  username: string
-  userid: bigint
-  value: bigint
-  icon: number
-  overlay: number
-  birdColor: number[]
-  overlayColor: number[]
-  customIcon: string | null
-}

src/app/types/LeaderboardResponse.ts

@@ -1,6 +0,0 @@
-import { LeaderboardEntry } from './LeaderboardEntry'
-
-export interface LeaderboardResponse {
-  entries: LeaderboardEntry[]
-  customIcons: Record<string, string>
-}

src/componets/Setting.tsx

@@ -1,7 +1,7 @@
 import './Setting.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { SettingProps } from '../types/SettingProps'
+import { SettingProps } from '@/types/SettingProps'
 
 export function Setting ({
   label,

src/componets/Sidebar.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import './Sidebar.css'
+import Icon from '@/assets/Icon.png'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+  faCog,
+  faDownload,
+  faGamepad,
+  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 '@/app/GlobalProvider'
+import Image from 'next/image'
+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'
+
+const lexend = Lexend({
+  subsets: ['latin']
+})
+
+export default function Sidebar () {
+  const {
+    normalConfig,
+    getListOfGames,
+    setShowPopup,
+    setPopupMode,
+    setFadeOut,
+    downloadProgress,
+    downloadedVersionsConfig,
+    getVersionInfo,
+    category,
+    setCategory
+  } = useGlobal()
+
+  const pathname = usePathname()
+  const params = useSearchParams()
+  const router = useRouter()
+
+  return (
+    <aside className='sidebar'>
+      <div
+        className='macos-drag'
+        hidden={platform() != 'macos'}
+        onMouseDown={e => {
+          if (e.buttons === 1) {
+            if (e.detail === 2) {
+              getCurrentWindow().toggleMaximize()
+            } else {
+              getCurrentWindow().startDragging()
+            }
+          }
+        }}
+      ></div>
+      <div
+        className='logo'
+        style={{
+          marginTop:
+            platform() == 'windows'
+              ? '32px'
+              : platform() == 'macos'
+              ? '28px'
+              : ''
+        }}
+        onMouseDown={e => {
+          if (platform() != 'macos') return
+          if (e.buttons === 1) {
+            if (e.detail === 2) {
+              getCurrentWindow().toggleMaximize()
+            } else {
+              getCurrentWindow().startDragging()
+            }
+          }
+        }}
+      >
+        <Image draggable={false} src={Icon} width={36} height={36} alt='' />
+        <p className={`ml-1 text-[16px] whitespace-nowrap ${lexend.className}`}>
+          Lncvrt Games Launcher
+        </p>
+      </div>
+      <nav className='nav-links overflow-auto pt-2'>
+        <Link
+          draggable={false}
+          href='/'
+          className={`link relative flex items-center ${
+            pathname === '/' || pathname.startsWith('/game') ? 'active' : ''
+          }`}
+        >
+          <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
+        </Link>
+        {getListOfGames()
+          .sort((a, b) => {
+            return a.id - b.id
+          })
+          .map(i => (
+            <React.Fragment key={i.id}>
+              <div
+                draggable={false}
+                className={`link ${
+                  (pathname === '/game' &&
+                    Number(params.get('id') || 0) == i.id) ||
+                  (i.id == 1 && pathname === '/game/berrydash/leaderboards')
+                    ? 'active'
+                    : ''
+                } ml-auto w-50 ${
+                  normalConfig?.settings.alwaysShowGamesInSidebar ||
+                  pathname === '/' ||
+                  pathname.startsWith('/game')
+                    ? ''
+                    : '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) ||
+                      (i.id == 1 &&
+                        pathname === '/game/berrydash/leaderboards' &&
+                        category == Number(key))
+                        ? 'active'
+                        : ''
+                    } ml-auto w-47.5 ${
+                      normalConfig?.settings.alwaysShowGamesInSidebar ||
+                      pathname === '/' ||
+                      pathname.startsWith('/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'>{value}</span>
+                    </div>
+                  </div>
+                ))}
+            </React.Fragment>
+          ))}
+        <Link
+          draggable={false}
+          href='/settings'
+          className={`link ${pathname === '/settings' ? 'active' : ''}`}
+        >
+          <FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
+        </Link>
+        <button
+          onClick={() => openUrl('https://games.lncvrt.xyz/discord')}
+          className='link mr-auto'
+        >
+          <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
+        </button>
+      </nav>
+      <div
+        className='sidebar-downloads'
+        hidden={downloadProgress.length == 0}
+        onClick={() => {
+          setPopupMode(1)
+          setShowPopup(true)
+          setFadeOut(false)
+        }}
+      >
+        <p>
+          <FontAwesomeIcon icon={faDownload} /> Downloads
+        </p>
+      </div>
+    </aside>
+  )
+}

src/componets/popups/Downloads.tsx

@@ -0,0 +1,94 @@
+import { useGlobal } from '@/app/GlobalProvider'
+import prettyBytes from 'pretty-bytes'
+import ProgressBar from '../ProgressBar'
+import { formatEtaSmart } from '@/lib/Util'
+
+export default function DownloadsPopup () {
+  const {
+    downloadProgress,
+    getVersionInfo,
+    setDownloadProgress,
+    downloadQueue,
+    setDownloadQueue
+  } = useGlobal()
+
+  return (
+    <>
+      <p className='text-xl text-center'>Downloads</p>
+      <div className='popup-content'>
+        {downloadProgress.map((v, i) => {
+          const queuePosition = downloadQueue.indexOf(v.version)
+          return (
+            <div key={i} className='popup-entry flex flex-col justify-between'>
+              <p className='text-2xl text-center'>
+                {getVersionInfo(v.version)?.displayName}
+              </p>
+              <div className='mt-6.25 flex items-center justify-between'>
+                {v.failed || v.queued ? (
+                  <div className='flex items-center justify-between w-full'>
+                    <span
+                      className={`${
+                        v.failed ? 'text-red-500' : 'text-yellow-300'
+                      } inline-block text-center flex-1`}
+                    >
+                      {v.failed
+                        ? 'Download failed'
+                        : queuePosition === 0
+                        ? 'Starting soon...'
+                        : `Queued (Position ${queuePosition + 1})`}
+                    </span>
+                    <button
+                      className='button btntheme3 -ml-1.25'
+                      onClick={() => {
+                        setDownloadQueue(prev =>
+                          prev.filter(id => id !== v.version)
+                        )
+                        setDownloadProgress(prev =>
+                          prev.filter(d => d.version !== v.version)
+                        )
+                      }}
+                      title='Click to remove this version from the download queue.'
+                    >
+                      Remove
+                    </button>
+                  </div>
+                ) : v.hash_checking || v.finishing ? (
+                  <span
+                    className={`${
+                      v.hash_checking ? 'text-blue-300' : 'text-green-300'
+                    } inline-block w-full text-center`}
+                  >
+                    {v.hash_checking ? 'Checking hash' : 'Finishing'}
+                    ...
+                  </span>
+                ) : (
+                  <div className='flex flex-col gap-1 w-full'>
+                    <span className='text-center'>
+                      Downloaded{' '}
+                      {prettyBytes(v.progressBytes, {
+                        minimumFractionDigits: 1,
+                        maximumFractionDigits: 1
+                      })}{' '}
+                      of{' '}
+                      {prettyBytes(getVersionInfo(v.version)?.size ?? 0, {
+                        minimumFractionDigits: 1,
+                        maximumFractionDigits: 1
+                      })}{' '}
+                      (ETA: {formatEtaSmart(v.etaSecs)} &bull; Speed:{' '}
+                      {prettyBytes(v.speed, {
+                        minimumFractionDigits: 1,
+                        maximumFractionDigits: 1
+                      })}
+                      /s)
+                    </span>
+                    <ProgressBar progress={v.progress} className='w-full' />
+                  </div>
+                )}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </>
+  )
+}

src/componets/popups/GamesDownload.tsx

@@ -0,0 +1,92 @@
+import { useGlobal } from '@/app/GlobalProvider'
+import {
+  faCheck,
+  faCode,
+  faDownload,
+  faShieldHalved,
+  faWarning
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export default function GamesDownloadPopup () {
+  const { serverVersionList, getVersionsAmountData, setSelectedGame } =
+    useGlobal()
+
+  return (
+    <>
+      <p className='text-xl text-center'>Select a game to download</p>
+      <div className='popup-content'>
+        {serverVersionList?.games
+          .filter(v => {
+            const data = getVersionsAmountData(v.id)
+            if (!data) return false
+            if (data.total > 0) return true
+          })
+          .map((v, i) => (
+            <div key={i} className='popup-entry'>
+              <p className='text-2xl'>{v.name}</p>
+              <div className='flex gap-2'>
+                <div
+                  className='entry-info-item btntheme3'
+                  title='The amount of versions installed of this game in installed/installable format.'
+                >
+                  <p>
+                    {(() => {
+                      const data = getVersionsAmountData(v.id)
+                      if (!data) return 'N/A'
+                      return `${data.installed}/${data.total}`
+                    })()}{' '}
+                    versions installed
+                  </p>
+                </div>
+                <div
+                  className='entry-info-item btntheme3'
+                  hidden={!v.official}
+                  title='This game is official.'
+                >
+                  <FontAwesomeIcon icon={faCheck} color='#19c84b' />
+                  <p>Official</p>
+                </div>
+                <div
+                  className='entry-info-item btntheme3'
+                  hidden={v.official}
+                  title={
+                    v.verified
+                      ? 'This game is verified to be safe'
+                      : 'This game is NOT verified to be save. Proceed with caution.'
+                  }
+                >
+                  <FontAwesomeIcon
+                    icon={v.verified ? faShieldHalved : faWarning}
+                    color={v.verified ? '#19c84b' : '#ffc800'}
+                  />
+                  <p>{v.verified ? 'Verified' : 'Unverified'}</p>
+                </div>
+              </div>
+              <div
+                className='entry-info-item btntheme3 mt-2'
+                hidden={v.developer == null}
+                title={`The developer of ${v.name} is ${v.developer}.`}
+              >
+                <FontAwesomeIcon icon={faCode} color='lightgray' />
+                <p>Developer: {v.developer}</p>
+              </div>
+              <button
+                className='button btntheme3 right-2 bottom-2'
+                onClick={() => setSelectedGame(v.id)}
+                title={`Click to download specific versions of the game. You have ${(() => {
+                  const data = getVersionsAmountData(v.id)
+                  if (!data) return 'N/A'
+                  return `${data.installed} of ${data.total}`
+                })()} versions downloaded.`}
+              >
+                <>
+                  <FontAwesomeIcon icon={faDownload} /> Download
+                </>
+              </button>
+            </div>
+          ))}
+      </div>
+    </>
+  )
+}

src/componets/popups/ManageVersion.tsx

@@ -0,0 +1,106 @@
+import { useGlobal } from '@/app/GlobalProvider'
+import { writeVersionsConfig } from '@/lib/BazookaManager'
+import { openFolder } from '@/lib/Util'
+import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
+
+export default function ManageVersionPopup () {
+  const {
+    getVersionInfo,
+    managingVersion,
+    closePopup,
+    setDownloadedVersionsConfig,
+    setManagingVersion,
+    downloadVersions,
+    setSelectedVersionList,
+    setPopupMode
+  } = useGlobal()
+  if (!managingVersion) return <></>
+
+  return (
+    <>
+      <p className='text-xl text-center'>
+        Manage {getVersionInfo(managingVersion)?.displayName}
+      </p>
+      <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
+        <button
+          className='button btntheme2'
+          onClick={async () => {
+            closePopup()
+
+            setDownloadedVersionsConfig(prev => {
+              if (!prev) return prev
+              const updatedList = Object.fromEntries(
+                Object.entries(prev.list).filter(([k]) => k !== managingVersion)
+              )
+              const updatedConfig = {
+                ...prev,
+                list: updatedList
+              }
+              writeVersionsConfig(updatedConfig)
+              return updatedConfig
+            })
+
+            if (
+              await exists('game/' + managingVersion, {
+                baseDir: BaseDirectory.AppLocalData
+              })
+            )
+              await remove('game/' + managingVersion, {
+                baseDir: BaseDirectory.AppLocalData,
+                recursive: true
+              })
+          }}
+          title='Click to uninstall this game. This will NOT remove any progress or any save files.'
+        >
+          Uninstall
+        </button>
+        <button
+          className='button btntheme2'
+          onClick={async () => {
+            //change popup to downloads
+            setManagingVersion(null)
+            setPopupMode(1)
+
+            //uninstall
+            setDownloadedVersionsConfig(prev => {
+              if (!prev) return prev
+              const updatedList = Object.fromEntries(
+                Object.entries(prev.list).filter(([k]) => k !== managingVersion)
+              )
+              const updatedConfig = {
+                ...prev,
+                list: updatedList
+              }
+              writeVersionsConfig(updatedConfig)
+              return updatedConfig
+            })
+
+            if (
+              await exists('game/' + managingVersion, {
+                baseDir: BaseDirectory.AppLocalData
+              })
+            )
+              await remove('game/' + managingVersion, {
+                baseDir: BaseDirectory.AppLocalData,
+                recursive: true
+              })
+
+            //reinstall
+            setSelectedVersionList([managingVersion])
+            downloadVersions([managingVersion])
+          }}
+          title="Click to reinstall this game. This will NOT remove any progress or any save files. This WILL uninstall any modifications to the game's executable files."
+        >
+          Reinstall
+        </button>
+        <button
+          className='button btntheme2'
+          onClick={async () => openFolder(managingVersion)}
+          title="Click to browse the game's files."
+        >
+          Open Folder
+        </button>
+      </div>
+    </>
+  )
+}

src/componets/popups/VersionInfo.tsx

@@ -9,19 +9,19 @@ import {
   faWarning
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useGlobal } from '../GlobalProvider'
+import { useGlobal } from '@/app/GlobalProvider'
 import { invoke } from '@tauri-apps/api/core'
 import { useEffect, useState } from 'react'
 import prettyBytes from 'pretty-bytes'
+import { message } from '@tauri-apps/plugin-dialog'
 
-export default function VersionInfo () {
+export default function VersionInfoPopup () {
   const {
     getGameInfo,
     getVersionInfo,
     managingVersion,
     downloadedVersionsConfig,
-    viewingInfoFromDownloads,
-    setPopupMode
+    viewingInfoFromDownloads
   } = useGlobal()
   const [versionSize, setVersionSize] = useState<number>(0)
 
@@ -113,7 +113,13 @@ export default function VersionInfo () {
         </div>
         <div
           className='entry-info-item btntheme2'
-          onClick={() => setPopupMode(4)}
+          onClick={async () => {
+            if (!versionInfo) return
+            await message(atob(versionInfo.changelog), {
+              title: 'Changelog for ' + versionInfo.displayName,
+              kind: 'info'
+            })
+          }}
           hidden={!versionInfo?.changelog}
         >
           <p>View Changelog</p>

src/componets/popups/VersionsDownload.tsx

@@ -0,0 +1,128 @@
+import { useGlobal } from '@/app/GlobalProvider'
+import { faAdd, faInfo, faRemove } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+export default function VersionsDownloadPopup () {
+  const {
+    selectedVersionList,
+    setSelectedVersionList,
+    setManagingVersion,
+    setPopupMode,
+    getSpecialVersionsList,
+    selectedGame,
+    setViewingInfoFromDownloads,
+    downloadedVersionsConfig,
+    downloadProgress,
+    downloadVersions,
+    getGameInfo,
+    downloadQueue
+  } = useGlobal()
+  if (!selectedGame) return <></>
+
+  return (
+    <>
+      <p className='text-xl text-center'>Select versions to download</p>
+      <div className='popup-content'>
+        {getSpecialVersionsList(selectedGame).map((v, i) => (
+          <div key={i} className='popup-entry'>
+            <div className='flex items-center'>
+              <p
+                className={`text-2xl truncate ${
+                  selectedVersionList.includes(v.id)
+                    ? 'max-w-84.5'
+                    : 'max-w-91.5'
+                }`}
+              >
+                {v.displayName}
+              </p>
+            </div>
+            <button
+              className='button btntheme3 right-20.75 bottom-1.75'
+              onClick={() => {
+                setSelectedVersionList(prev =>
+                  prev.includes(v.id)
+                    ? prev.filter(i => i !== v.id)
+                    : [...prev, v.id]
+                )
+              }}
+              title={
+                selectedVersionList.includes(v.id)
+                  ? 'This version will be downloaded. Click to remove from the list of versions that will be downloaded.'
+                  : 'This version will NOT be downloaded. Click to add from the list of versions that will be downloaded.'
+              }
+            >
+              {selectedVersionList.includes(v.id) ? (
+                <>
+                  <FontAwesomeIcon icon={faRemove} /> Remove
+                </>
+              ) : (
+                <>
+                  <FontAwesomeIcon icon={faAdd} /> Add
+                </>
+              )}
+            </button>
+            <button
+              className='button btntheme3 right-1.5 bottom-1.75'
+              onClick={() => {
+                setManagingVersion(v.id)
+                setViewingInfoFromDownloads(true)
+                setPopupMode(3)
+              }}
+              title='Click to view version info'
+            >
+              <FontAwesomeIcon icon={faInfo} /> Info
+            </button>
+          </div>
+        ))}
+      </div>
+      <div className='flex justify-center'>
+        <button
+          className='button btntheme1 w-fit mt-2 -mb-4'
+          onClick={() => {
+            if (downloadedVersionsConfig) {
+              downloadVersions(selectedVersionList)
+            }
+          }}
+          disabled={selectedVersionList.length === 0}
+          title={
+            selectedVersionList.length === 0
+              ? 'Select at least one version to download'
+              : downloadProgress.length > 0 || downloadQueue.length > 0
+              ? `Add ${selectedVersionList.length} version${
+                  selectedVersionList.length == 1 ? '' : 's'
+                } to download queue`
+              : `Download ${selectedVersionList.length} version${
+                  selectedVersionList.length == 1 ? '' : 's'
+                } of ${getGameInfo(selectedGame)?.name}`
+          }
+        >
+          {downloadProgress.length > 0 || downloadQueue.length > 0
+            ? `Add ${selectedVersionList.length} to Queue`
+            : `Download ${selectedVersionList.length}`}{' '}
+          version
+          {selectedVersionList.length == 1 ? '' : 's'}
+        </button>
+        <button
+          className='button btntheme1 w-fit mt-2 ml-2 -mb-4'
+          onClick={() => {
+            const allIds = getSpecialVersionsList(selectedGame).map(v => v.id)
+            setSelectedVersionList(prev =>
+              prev.length === allIds.length ? [] : allIds
+            )
+          }}
+          title={
+            selectedVersionList.length ===
+            getSpecialVersionsList(selectedGame).length
+              ? 'Click to remove all selected versions for download.'
+              : 'Click to add all selected versions for download.'
+          }
+        >
+          {selectedVersionList.length ===
+          getSpecialVersionsList(selectedGame).length
+            ? 'Deselect All'
+            : 'Select All'}
+        </button>
+      </div>
+    </>
+  )
+}

src/lib/BazookaManager.ts

@@ -1,5 +1,5 @@
 import { app } from '@tauri-apps/api'
-import { NormalConfig } from '../types/NormalConfig'
+import { NormalConfig } from '@/types/NormalConfig'
 import {
   BaseDirectory,
   create,
@@ -8,7 +8,7 @@ import {
   readTextFile,
   writeFile
 } from '@tauri-apps/plugin-fs'
-import { VersionsConfig } from '../types/VersionsConfig'
+import { VersionsConfig } from '@/types/VersionsConfig'
 
 export async function readNormalConfig (): Promise<NormalConfig> {
   const version = await app.getVersion()

src/lib/BerryDash.ts

@@ -0,0 +1,7 @@
+export const GetIconForUser = (user: number) => {
+  if (user == 1) return -1
+  else if (user == 2) return -2
+  else if (user == 4) return -3
+  else if (user == 3) return -4
+  else return 1
+}

src/lib/Clipboard.ts

@@ -1,4 +1,4 @@
-import { NormalConfig } from '../types/NormalConfig'
+import { NormalConfig } from '@/types/NormalConfig'
 import { notifyUser } from './Notifications'
 
 export async function copyToClipboard (

src/lib/Util.ts

@@ -0,0 +1,41 @@
+import { message } from '@tauri-apps/plugin-dialog'
+import { BaseDirectory, exists, stat } from '@tauri-apps/plugin-fs'
+import { openPath } from '@tauri-apps/plugin-opener'
+import { join, appLocalDataDir } from '@tauri-apps/api/path'
+
+export const openFolder = async (name: string) => {
+  const relativePath = await join('game', name)
+  const basePath = await appLocalDataDir()
+  const absolutePath = await join(basePath, relativePath)
+
+  const folderExists = await exists(relativePath, {
+    baseDir: BaseDirectory.AppLocalData
+  })
+  const folderStat = await stat(relativePath, {
+    baseDir: BaseDirectory.AppLocalData
+  })
+
+  if (!folderExists || folderStat.isFile) {
+    await message(`Game folder "${absolutePath}" not found.`, {
+      title: 'Folder not found',
+      kind: 'error'
+    })
+    return
+  }
+
+  await openPath(absolutePath)
+}
+
+export const formatEtaSmart = (seconds: number) => {
+  if (seconds < 60) return `${Math.floor(seconds)}s`
+  if (seconds < 3600)
+    return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`
+  if (seconds < 86400) {
+    const h = Math.floor(seconds / 3600)
+    const m = Math.floor((seconds % 3600) / 60)
+    return `${h}h ${m}m`
+  }
+  const d = Math.floor(seconds / 86400)
+  const h = Math.floor((seconds % 86400) / 3600)
+  return `${d}d ${h}h`
+}

src/types/BerryDash/BirdColor.ts

@@ -0,0 +1 @@
+export type BirdColor = [number, number, number]

src/types/SettingsType.ts

@@ -2,7 +2,6 @@ export class SettingsType {
   constructor (
     public allowNotifications: boolean = true,
     public alwaysShowGamesInSidebar: boolean = true,
-    public useLegacyInteractButtons: boolean = false,
     public useWineOnUnixWhenNeeded: boolean = false,
     public wineOnUnixCommand: string = 'wine %path%',
     public theme: number = 0

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2017",
+    "target": "es2024",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,