1.6.2

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/fontawesome-svg-core": "7.2.0",
-        "@fortawesome/free-brands-svg-icons": "7.1.0",
+        "@fortawesome/free-brands-svg-icons": "7.2.0",
-        "@fortawesome/free-solid-svg-icons": "7.1.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/node": "25.2.3",
-        "@types/react": "19.2.13",
+        "@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,31 +290,31 @@
 
     "@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=="],
 
-    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.55.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.55.0", "@typescript-eslint/type-utils": "8.55.0", "@typescript-eslint/utils": "8.55.0", "@typescript-eslint/visitor-keys": "8.55.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.55.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ=="],
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.56.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.56.0", "@typescript-eslint/type-utils": "8.56.0", "@typescript-eslint/utils": "8.56.0", "@typescript-eslint/visitor-keys": "8.56.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.56.0", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-lRyPDLzNCuae71A3t9NEINBiTn7swyOhvUj3MyUOxb8x6g6vPEFoOU+ZRmGMusNC3X3YMhqMIX7i8ShqhT74Pw=="],
 
-    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.55.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.55.0", "@typescript-eslint/types": "8.55.0", "@typescript-eslint/typescript-estree": "8.55.0", "@typescript-eslint/visitor-keys": "8.55.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw=="],
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.56.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.56.0", "@typescript-eslint/types": "8.56.0", "@typescript-eslint/typescript-estree": "8.56.0", "@typescript-eslint/visitor-keys": "8.56.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-IgSWvLobTDOjnaxAfDTIHaECbkNlAlKv2j5SjpB2v7QHKv1FIfjwMy8FsDbVfDX/KjmCmYICcw7uGaXLhtsLNg=="],
 
-    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.55.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.55.0", "@typescript-eslint/types": "^8.55.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ=="],
+    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.56.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.56.0", "@typescript-eslint/types": "^8.56.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-M3rnyL1vIQOMeWxTWIW096/TtVP+8W3p/XnaFflhmcFp+U4zlxUxWj4XwNs6HbDeTtN4yun0GNTTDBw/SvufKg=="],
 
-    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.55.0", "", { "dependencies": { "@typescript-eslint/types": "8.55.0", "@typescript-eslint/visitor-keys": "8.55.0" } }, "sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q=="],
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.56.0", "", { "dependencies": { "@typescript-eslint/types": "8.56.0", "@typescript-eslint/visitor-keys": "8.56.0" } }, "sha512-7UiO/XwMHquH+ZzfVCfUNkIXlp/yQjjnlYUyYz7pfvlK3/EyyN6BK+emDmGNyQLBtLGaYrTAI6KOw8tFucWL2w=="],
 
-    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.55.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q=="],
+    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.56.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-bSJoIIt4o3lKXD3xmDh9chZcjCz5Lk8xS7Rxn+6l5/pKrDpkCwtQNQQwZ2qRPk7TkUYhrq3WPIHXOXlbXP0itg=="],
 
-    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.55.0", "", { "dependencies": { "@typescript-eslint/types": "8.55.0", "@typescript-eslint/typescript-estree": "8.55.0", "@typescript-eslint/utils": "8.55.0", "debug": "^4.4.3", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g=="],
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.56.0", "", { "dependencies": { "@typescript-eslint/types": "8.56.0", "@typescript-eslint/typescript-estree": "8.56.0", "@typescript-eslint/utils": "8.56.0", "debug": "^4.4.3", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-qX2L3HWOU2nuDs6GzglBeuFXviDODreS58tLY/BALPC7iu3Fa+J7EOTwnX9PdNBxUI7Uh0ntP0YWGnxCkXzmfA=="],
 
-    "@typescript-eslint/types": ["@typescript-eslint/types@8.55.0", "", {}, "sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w=="],
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.56.0", "", {}, "sha512-DBsLPs3GsWhX5HylbP9HNG15U0bnwut55Lx12bHB9MpXxQ+R5GC8MwQe+N1UFXxAeQDvEsEDY6ZYwX03K7Z6HQ=="],
 
-    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.55.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.55.0", "@typescript-eslint/tsconfig-utils": "8.55.0", "@typescript-eslint/types": "8.55.0", "@typescript-eslint/visitor-keys": "8.55.0", "debug": "^4.4.3", "minimatch": "^9.0.5", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw=="],
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.56.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.56.0", "@typescript-eslint/tsconfig-utils": "8.56.0", "@typescript-eslint/types": "8.56.0", "@typescript-eslint/visitor-keys": "8.56.0", "debug": "^4.4.3", "minimatch": "^9.0.5", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-ex1nTUMWrseMltXUHmR2GAQ4d+WjkZCT4f+4bVsps8QEdh0vlBsaCokKTPlnqBFqqGaxilDNJG7b8dolW2m43Q=="],
 
-    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.55.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.55.0", "@typescript-eslint/types": "8.55.0", "@typescript-eslint/typescript-estree": "8.55.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow=="],
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.56.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.56.0", "@typescript-eslint/types": "8.56.0", "@typescript-eslint/typescript-estree": "8.56.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-RZ3Qsmi2nFGsS+n+kjLAYDPVlrzf7UhTffrDIKr+h2yzAlYP/y5ZulU0yeDEPItos2Ph46JAL5P/On3pe7kDIQ=="],
 
-    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.55.0", "", { "dependencies": { "@typescript-eslint/types": "8.55.0", "eslint-visitor-keys": "^4.2.1" } }, "sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA=="],
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.56.0", "", { "dependencies": { "@typescript-eslint/types": "8.56.0", "eslint-visitor-keys": "^5.0.0" } }, "sha512-q+SL+b+05Ud6LbEE35qe4A99P+htKTKVbyiNEe45eCbJFyh/HVK9QXwlrbz+Q4L8SOW4roxSVwXYj4DMBT7Ieg=="],
 
     "@unrs/resolver-binding-android-arm-eabi": ["@unrs/resolver-binding-android-arm-eabi@1.11.1", "", { "os": "android", "cpu": "arm" }, "sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw=="],
 
@@ -414,7 +414,7 @@
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "caniuse-lite": ["caniuse-lite@1.0.30001769", "", {}, "sha512-BCfFL1sHijQlBGWBMuJyhZUhzo7wer5sVj9hqekB/7xn0Ypy+pER/edCYQm4exbXj4WiySGp40P8UuTh6w1srg=="],
+    "caniuse-lite": ["caniuse-lite@1.0.30001770", "", {}, "sha512-x/2CLQ1jHENRbHg5PSId2sXq1CIO1CISvwWAj027ltMVG2UNgW+w9oH2+HzgEIRFembL8bUlXtfbBHR1fCg2xw=="],
 
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
@@ -742,6 +742,8 @@
 
     "next": ["next@16.1.6", "", { "dependencies": { "@next/env": "16.1.6", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.8.3", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.1.6", "@next/swc-darwin-x64": "16.1.6", "@next/swc-linux-arm64-gnu": "16.1.6", "@next/swc-linux-arm64-musl": "16.1.6", "@next/swc-linux-x64-gnu": "16.1.6", "@next/swc-linux-x64-musl": "16.1.6", "@next/swc-win32-arm64-msvc": "16.1.6", "@next/swc-win32-x64-msvc": "16.1.6", "sharp": "^0.34.4" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw=="],
 
+    "node-exports-info": ["node-exports-info@1.6.0", "", { "dependencies": { "array.prototype.flatmap": "^1.3.3", "es-errors": "^1.3.0", "object.entries": "^1.1.9", "semver": "^6.3.1" } }, "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw=="],
+
     "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
 
     "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
@@ -900,7 +902,7 @@
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
-    "typescript-eslint": ["typescript-eslint@8.55.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.55.0", "@typescript-eslint/parser": "8.55.0", "@typescript-eslint/typescript-estree": "8.55.0", "@typescript-eslint/utils": "8.55.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw=="],
+    "typescript-eslint": ["typescript-eslint@8.56.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.56.0", "@typescript-eslint/parser": "8.56.0", "@typescript-eslint/typescript-estree": "8.56.0", "@typescript-eslint/utils": "8.56.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-c7toRLrotJ9oixgdW7liukZpsnq5CZ7PuKztubGYlNppuTqhIoWfhgHo/7EU0v06gS2l/x0i2NEFK1qMIf0rIg=="],
 
     "unbox-primitive": ["unbox-primitive@1.1.0", "", { "dependencies": { "call-bound": "^1.0.3", "has-bigints": "^1.0.2", "has-symbols": "^1.1.0", "which-boxed-primitive": "^1.1.1" } }, "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw=="],
 
@@ -954,6 +956,8 @@
 
     "@typescript-eslint/typescript-estree/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
+    "@typescript-eslint/visitor-keys/eslint-visitor-keys": ["eslint-visitor-keys@5.0.0", "", {}, "sha512-A0XeIi7CXU7nPlfHS9loMYEKxUaONu/hTEzHTGba9Huu94Cq1hPivf+DE5erJozZOky0LfvXAyrV/tcswpLI0Q=="],
+
     "eslint-config-next/globals": ["globals@16.4.0", "", {}, "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw=="],
 
     "eslint-import-resolver-node/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
@@ -962,7 +966,7 @@
 
     "eslint-plugin-import/debug": ["debug@3.2.7", "", { "dependencies": { "ms": "^2.1.1" } }, "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ=="],
 
-    "eslint-plugin-react/resolve": ["resolve@2.0.0-next.5", "", { "dependencies": { "is-core-module": "^2.13.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA=="],
+    "eslint-plugin-react/resolve": ["resolve@2.0.0-next.6", "", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.16.1", "node-exports-info": "^1.6.0", "object-keys": "^1.1.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lncvrt-games-launcher",
   "private": true,
-  "version": "1.5.7",
+  "version": "1.6.2",
   "type": "module",
   "scripts": {
     "dev": "next dev",
@@ -11,9 +11,9 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "7.1.0",
+    "@fortawesome/fontawesome-svg-core": "7.2.0",
-    "@fortawesome/free-brands-svg-icons": "7.1.0",
+    "@fortawesome/free-brands-svg-icons": "7.2.0",
-    "@fortawesome/free-solid-svg-icons": "7.1.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/node": "25.2.3",
-    "@types/react": "19.2.13",
+    "@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.2"
 authors = ["Lncvrt"]
 edition = "2024"
 
@@ -19,16 +19,17 @@ serde_json = "1.0.149"
 tauri-plugin-os = "2.3.2"
 reqwest = { version = "0.13.2", default-features = false, features = ["stream", "rustls"] }
 tokio = "1.49.0"
-futures-util = { version = "0.3.31", features = ["io"] }
+futures-util = { version = "0.3.32", features = ["io"] }
 tauri-plugin-decorum = "1.1.1"
 tauri-plugin-fs = "2.4.5"
-zip = "7.4.0"
+zip = "8.1.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"
+sysinfo = "0.38.2"
 sha2 = "0.10.9"
 tauri-plugin-clipboard-manager = "2.3.2"
+tauri-plugin-prevent-default = "4.0.3"
 
 [target.'cfg(target_os = "linux")'.dependencies]
 shlex = "1.3.0"

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,9 +12,8 @@ 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 tauri_plugin_prevent_default::Flags;
 use tokio::io::AsyncReadExt;
 use tokio::{io::AsyncWriteExt, time::timeout};
 use zip::ZipArchive;
@@ -28,11 +27,10 @@ use std::os::unix::fs::PermissionsExt;
 #[allow(unused)]
 fn is_running_by_path(path: &Path) -> bool {
     let sys = System::new_all();
-    let target = path.canonicalize().ok();
+    let target = match path.canonicalize() {
-    if target.is_none() {
+        Ok(t) => t,
-        return false;
+        Err(_) => return false,
-    }
+    };
-    let target = target.unwrap();
     sys.processes().values().any(|proc| {
         proc.exe()
             .and_then(|exe| exe.canonicalize().ok())
@@ -96,12 +94,10 @@ async fn unzip_to_dir(zip_path: PathBuf, out_dir: PathBuf) -> String {
 
 #[tauri::command]
 fn folder_size(app: AppHandle, version: String) -> String {
-    let path = app
+    let path = match app.path().app_local_data_dir() {
-        .path()
+        Ok(p) => p.join("game").join(&version),
-        .app_local_data_dir()
+        Err(_) => return "-1".to_string(),
-        .unwrap()
+    };
-        .join("game")
-        .join(&version);
     fn inner(path: &Path) -> u64 {
         let mut size = 0;
         if let Ok(entries) = fs::read_dir(path) {
@@ -147,8 +143,14 @@ async fn download(
     let mut downloaded: u64 = 0;
     let mut stream = resp.bytes_stream();
 
-    let downloads_path = app.path().app_local_data_dir().unwrap().join("downloads");
+    let downloads_path = match app.path().app_local_data_dir() {
-    let game_path = app.path().app_local_data_dir().unwrap().join("game");
+        Ok(p) => p.join("downloads"),
+        Err(_) => return "-1".to_string(),
+    };
+    let game_path = match app.path().app_local_data_dir() {
+        Ok(p) => p.join("game"),
+        Err(_) => return "-1".to_string(),
+    };
 
     let download_part_path = downloads_path.join(format!("{}.part", name));
     let download_zip_path = downloads_path.join(format!("{}.zip", name));
@@ -162,9 +164,10 @@ async fn download(
         let _ = tokio::fs::remove_dir_all(&game_path.join(name.clone())).await;
     }
     let _ = tokio::fs::create_dir_all(&game_path.join(&name)).await;
-    let mut file = tokio::fs::File::create(download_part_path.clone())
+    let mut file = match tokio::fs::File::create(download_part_path.clone()).await {
-        .await
+        Ok(f) => f,
-        .unwrap();
+        Err(_) => return "-1".to_string(),
+    };
 
     let start = Instant::now();
 
@@ -196,32 +199,34 @@ async fn download(
             0.0
         };
 
-        app.emit(
+        let _ = app.emit(
             "download-progress",
             format!(
                 "{}:{:.8}:{}:{}:{:.2}",
                 &name, progress, downloaded, speed, eta_secs
             ),
-        )
+        );
-        .unwrap();
     }
 
     if total_size > 0 && downloaded < total_size {
         return "-1".to_string();
     }
 
-    app.emit("download-hash-checking", format!("{}", &name))
+    let _ = app.emit("download-hash-checking", format!("{}", &name));
-        .unwrap();
 
     let download_hash = {
-        let mut file = tokio::fs::File::open(download_part_path.clone())
+        let mut file = match tokio::fs::File::open(download_part_path.clone()).await {
-            .await
+            Ok(f) => f,
-            .unwrap();
+            Err(_) => return "-1".to_string(),
+        };
         let mut hasher = Sha512::new();
         {
             let mut buffer = [0; 8192];
             loop {
-                let bytes_read = file.read(&mut buffer).await.unwrap();
+                let bytes_read = match file.read(&mut buffer).await {
+                    Ok(n) => n,
+                    Err(_) => return "-1".to_string(),
+                };
                 if bytes_read == 0 {
                     break;
                 }
@@ -233,21 +238,16 @@ async fn download(
     };
 
     if hash != download_hash {
-        tokio::fs::remove_file(download_part_path.clone())
+        let _ = tokio::fs::remove_file(download_part_path.clone()).await;
-            .await
-            .unwrap();
         return "-1".to_string();
     }
-    app.emit("download-finishing", format!("{}", &name))
+    let _ = app.emit("download-finishing", format!("{}", &name));
-        .unwrap();
 
-    tokio::fs::rename(download_part_path.clone(), download_zip_path.clone())
+    if let Err(_) = tokio::fs::rename(download_part_path.clone(), download_zip_path.clone()).await {
-        .await
+        return "-1".to_string();
-        .unwrap();
+    }
     let unzip_res = unzip_to_dir(download_zip_path.clone(), game_path.join(&name)).await;
-    tokio::fs::remove_file(download_zip_path.clone())
+    let _ = tokio::fs::remove_file(download_zip_path.clone()).await;
-        .await
-        .unwrap();
     if unzip_res == "-1" {
         return "-1".to_string();
     }
@@ -265,12 +265,10 @@ fn launch_game(
     use_wine: bool,
     wine_command: String,
 ) {
-    let game_folder = app
+    let game_folder = match app.path().app_local_data_dir() {
-        .path()
+        Ok(p) => p.join("game").join(&name),
-        .app_local_data_dir()
+        Err(_) => return,
-        .unwrap()
+    };
-        .join("game")
-        .join(&name);
     if !game_folder.exists() {
         return;
     }
@@ -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::DialogExt;
+        use tauri_plugin_dialog::MessageDialogKind;
+
         if !use_wine && is_running_by_path(&exe_path) {
             app.dialog()
                 .message(format!(
@@ -299,84 +300,76 @@ fn launch_game(
             let quoted_path = format!("\"{}\"", exe_path.to_string_lossy());
             let cmd = wine_command.replace("%path%", &quoted_path);
 
-            Command::new("bash")
+            if let Err(_) = Command::new("bash")
                 .arg("-c")
                 .arg(cmd)
                 .current_dir(&game_folder)
-                .spawn()
+                .spawn() {
-                .unwrap();
+                eprintln!("Failed to launch game with Wine");
+            }
 
             return;
         }
     }
 
     if platform() == "macos" {
-        Command::new("open")
+        if let Err(_) = Command::new("open")
             .arg(&executable)
             .current_dir(&game_folder)
-            .spawn()
+            .spawn() {
-            .unwrap();
+            eprintln!("Failed to launch game on macOS");
+        }
     } else {
-        Command::new(&exe_path)
+        if let Err(_) = Command::new(&exe_path)
             .current_dir(&game_folder)
-            .spawn()
+            .spawn() {
-            .unwrap();
+            eprintln!("Failed to 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)]
     tauri::Builder::default()
+        .plugin(
+            tauri_plugin_prevent_default::Builder::new()
+                .with_flags(
+                    Flags::FIND
+                        | Flags::CARET_BROWSING
+                        | Flags::DEV_TOOLS
+                        | Flags::DOWNLOADS
+                        | Flags::FOCUS_MOVE
+                        | Flags::RELOAD
+                        | Flags::SOURCE
+                        | Flags::OPEN
+                        | Flags::PRINT
+                        | Flags::CONTEXT_MENU,
+                )
+                .build(),
+        )
         .plugin(tauri_plugin_window_state::Builder::new().build())
         .plugin(tauri_plugin_clipboard_manager::init())
         .plugin(tauri_plugin_notification::init())
         .plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
-            let _ = app
+            if let Some(window) = app.get_webview_window("main") {
-                .get_webview_window("main")
+                let _ = window.set_focus();
-                .expect("no main window")
+            }
-                .set_focus();
         }))
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_decorum::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_opener::init())
-        .invoke_handler(tauri::generate_handler![
+        .invoke_handler(tauri::generate_handler![download, launch_game, folder_size])
-            download,
-            launch_game,
-            open_folder,
-            folder_size
-        ])
         .setup(|app| {
             #[cfg(target_os = "windows")]
             {
-                let main_window = app.get_webview_window("main").unwrap();
+                if let Some(main_window) = app.get_webview_window("main") {
-                main_window.create_overlay_titlebar().unwrap();
+                    if let Err(e) = main_window.create_overlay_titlebar() {
+                        eprintln!("Failed to create overlay titlebar: {:?}", e);
+                    }
+                }
             }
             Ok(())
         })

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.2",
   "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.2",
   "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.2",
   "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.2",
   "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 { DownloadProgress } from '@/types/DownloadProgress'
-import { VersionsConfig } from './types/VersionsConfig'
+import { VersionsConfig } from '@/types/VersionsConfig'
-import { NormalConfig } from './types/NormalConfig'
+import { NormalConfig } from '@/types/NormalConfig'
-import { ServerVersionsResponse } from './types/ServerVersionsResponse'
+import { ServerVersionsResponse } from '@/types/ServerVersionsResponse'
-import { GameVersion } from './types/GameVersion'
+import { GameVersion } from '@/types/GameVersion'
-import { Game } from './types/Game'
+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/VersionInfo.tsx

@@ -1,125 +0,0 @@
-'use client'
-
-import {
-  faArrowUpRightFromSquare,
-  faCheck,
-  faCode,
-  faHardDrive,
-  faShieldHalved,
-  faWarning
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useGlobal } from '../GlobalProvider'
-import { invoke } from '@tauri-apps/api/core'
-import { useEffect, useState } from 'react'
-import prettyBytes from 'pretty-bytes'
-
-export default function VersionInfo () {
-  const {
-    getGameInfo,
-    getVersionInfo,
-    managingVersion,
-    downloadedVersionsConfig,
-    viewingInfoFromDownloads,
-    setPopupMode
-  } = useGlobal()
-  const [versionSize, setVersionSize] = useState<number>(0)
-
-  useEffect(() => {
-    invoke<string>('folder_size', {
-      version: managingVersion
-    }).then(size => {
-      setVersionSize(Number(size))
-    })
-  }, [managingVersion, setVersionSize])
-
-  if (!managingVersion || !downloadedVersionsConfig) return <></>
-
-  const versionInfo = getVersionInfo(managingVersion)
-  const gameInfo = getGameInfo(versionInfo?.game)
-
-  return (
-    <>
-      <p className='text-xl text-center'>
-        Viewing info for {versionInfo?.displayName}
-      </p>
-      <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
-        <div
-          className='entry-info-item btntheme2'
-          hidden={viewingInfoFromDownloads}
-        >
-          <p>
-            Installed{' '}
-            {new Intl.DateTimeFormat(undefined).format(
-              downloadedVersionsConfig.list[managingVersion] ?? 0
-            )}
-          </p>
-        </div>
-        <div
-          className='entry-info-item btntheme2'
-          hidden={!versionInfo || versionInfo.releaseDate == 0}
-        >
-          <p>
-            Released{' '}
-            {new Intl.DateTimeFormat(undefined).format(
-              versionInfo?.releaseDate ? versionInfo.releaseDate * 1000 : 0
-            )}
-          </p>
-        </div>
-        <div className='entry-info-item btntheme2' hidden={!gameInfo?.official}>
-          <FontAwesomeIcon icon={faCheck} color='#19c84b' />
-          <p>Official</p>
-        </div>
-        <div className='entry-info-item btntheme2' hidden={gameInfo?.official}>
-          <FontAwesomeIcon
-            icon={gameInfo?.verified ? faShieldHalved : faWarning}
-            color={gameInfo?.verified ? '#19c84b' : '#ffc800'}
-          />
-          <p>{gameInfo?.verified ? 'Verified' : 'Unverified'}</p>
-        </div>
-        <div
-          className='entry-info-item btntheme2'
-          hidden={gameInfo?.developer == null}
-        >
-          <FontAwesomeIcon icon={faCode} color='lightgray' />
-          <p>Developer: {gameInfo?.developer}</p>
-        </div>
-        <div
-          className='entry-info-item btntheme2'
-          hidden={viewingInfoFromDownloads || versionSize === null}
-        >
-          <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
-          <p>
-            Size on disk:{' '}
-            {versionSize > 0
-              ? prettyBytes(versionSize, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2
-                })
-              : 'N/A'}
-          </p>
-        </div>
-        <div className='entry-info-item btntheme2' hidden={!versionInfo}>
-          <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
-          <p>
-            Size when downloaded (zipped):{' '}
-            {versionInfo
-              ? prettyBytes(versionInfo.size, {
-                  minimumFractionDigits: 2,
-                  maximumFractionDigits: 2
-                })
-              : 'Loading...'}
-          </p>
-        </div>
-        <div
-          className='entry-info-item btntheme2'
-          onClick={() => setPopupMode(4)}
-          hidden={!versionInfo?.changelog}
-        >
-          <p>View Changelog</p>
-          <FontAwesomeIcon icon={faArrowUpRightFromSquare} color='lightgray' />
-        </div>
-      </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,329 @@
+'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'
+import { platform } from '@tauri-apps/plugin-os'
+
+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 ${
+          platform() == 'windows'
+            ? 'h-[calc(100vh-116px)]'
+            : 'h-[calc(100vh-84px)]'
+        }`}
+      >
+        {selected == -1 ? (
+          <>
+            <p className='text-center mt-2 text-xl'>Select a Leaderboard</p>
+            <div className='flex flex-col gap-2 mt-2 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
+                  ? platform() == 'windows'
+                    ? 'h-[calc(100vh-168px)]'
+                    : 'h-[calc(100vh-136px)]'
+                  : platform() == 'windows'
+                  ? '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.lncvrt.xyz/api/berrydash/render-icon?icon=${
+                                item.icon === 1
+                                  ? GetIconForUser(item.id)
+                                  : item.icon
+                              }&overlay=${item.overlay}&birdR=${
+                                item.birdColor[0]
+                              }&birdG=${item.birdColor[1]}&birdB=${
+                                item.birdColor[2]
+                              }&overlayR=${item.overlayColor[0]}&overlayG=${
+                                item.overlayColor[1]
+                              }&overlayB=${item.overlayColor[2]}`
+                            : `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-0.75'
+                >
+                  <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;
+}
+
+.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 cursor-pointer;
+}
+
+.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 { useEffect } from 'react'
-import '../Installs.css'
+import '@/app/Installs.css'
 import { invoke } from '@tauri-apps/api/core'
-import { useGlobal } from '../GlobalProvider'
+import { useGlobal } from '@/app/GlobalProvider'
-import { useSearchParams } from 'next/navigation'
+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 } 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={() => {
@@ -92,7 +113,7 @@ export default function Installs () {
       <div className='downloads-container'>
         <div
           className={`downloads-scroll ${
-            platform() === 'windows'
+            platform() == 'windows'
               ? 'h-[calc(100vh-116px)]'
               : 'h-[calc(100vh-84px)]'
           }`}
@@ -108,7 +129,7 @@ export default function Installs () {
                   if (!info) return false
 
                   if (
-                    platform() === 'linux' &&
+                    platform() == 'linux' &&
                     info.wine &&
                     !normalConfig?.settings.useWineOnUnixWhenNeeded
                   )
@@ -123,21 +144,9 @@ export default function Installs () {
                 return (
                   <div
                     key={key}
-                    className={`downloads-entry ${
+                    className={'downloads-entry'}
-                      normalConfig?.settings.useLegacyInteractButtons
+                    title={'Click to view category'}
-                        ? ''
+                    onClick={() => setCategory(Number(key))}
-                        : 'cursor-pointer'
-                    }`}
-                    title={
-                      normalConfig?.settings.useLegacyInteractButtons
-                        ? ''
-                        : 'Click to view category'
-                    }
-                    onClick={() => {
-                      if (normalConfig?.settings.useLegacyInteractButtons)
-                        return
-                      setCategory(Number(key))
-                    }}
                   >
                     <div className='h-18 w-screen relative'>
                       <p className='text-2xl'>{value}</p>
@@ -156,7 +165,7 @@ export default function Installs () {
                                 const info = getVersionInfo(v)
                                 if (!info) return false
                                 if (
-                                  platform() === 'linux' &&
+                                  platform() == 'linux' &&
                                   info.wine &&
                                   !normalConfig?.settings
                                     .useWineOnUnixWhenNeeded
@@ -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>
                 )
@@ -202,7 +200,7 @@ export default function Installs () {
                 const info = getVersionInfo(v)
                 if (!info) return false
                 if (
-                  platform() === 'linux' &&
+                  platform() == 'linux' &&
                   info.wine &&
                   !normalConfig?.settings.useWineOnUnixWhenNeeded
                 )
@@ -217,33 +215,73 @@ export default function Installs () {
               .map(entry => (
                 <div
                   key={entry}
-                  className={`downloads-entry ${
+                  className={'downloads-entry'}
-                    normalConfig?.settings.useLegacyInteractButtons ||
-                    needsRevisionUpdate(
-                      getVersionInfo(entry)?.lastRevision,
-                      entry
-                    )
-                      ? ''
-                      : 'cursor-pointer'
-                  }`}
                   title={
-                    normalConfig?.settings.useLegacyInteractButtons ||
+                    'Click to launch game. Right-click to manage this version install'
-                    needsRevisionUpdate(
-                      getVersionInfo(entry)?.lastRevision,
-                      entry
-                    )
-                      ? ''
-                      : 'Click to launch game. Right-click to manage this version install'
                   }
                   onClick={async () => {
                     if (
-                      normalConfig?.settings.useLegacyInteractButtons ||
                       needsRevisionUpdate(
                         getVersionInfo(entry)?.lastRevision,
                         entry
                       )
+                    ) {
+                      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)
+
+                        //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
+                          })
+                        )
+                          await remove('game/' + entry, {
+                            baseDir: BaseDirectory.AppLocalData,
+                            recursive: true
+                          })
+
+                        //reinstall
+                        setSelectedVersionList([entry])
+                        downloadVersions([entry])
+                      } else {
+                        openFolder(entry)
+                      }
                       return
+                    }
                     const verInfo = getVersionInfo(entry)
                     if (verInfo == undefined) return
                     const gameInfo = getGameInfo(verInfo.game)
@@ -253,7 +291,7 @@ export default function Installs () {
                       executable: verInfo.executable,
                       displayName: verInfo.displayName,
                       useWine: !!(
-                        platform() === 'linux' &&
+                        platform() == 'linux' &&
                         verInfo.wine &&
                         normalConfig?.settings.useWineOnUnixWhenNeeded
                       ),
@@ -262,15 +300,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)
@@ -300,8 +329,11 @@ export default function Installs () {
                         title='This version is using wine. It cannot be guarenteed to work fully and might not work at all.'
                         hidden={
                           !(
-                            platform() === 'linux' &&
+                            platform() == 'linux' && getVersionInfo(entry)?.wine
-                            getVersionInfo(entry)?.wine
+                          ) ||
+                          needsRevisionUpdate(
+                            getVersionInfo(entry)?.lastRevision,
+                            entry
                           )
                         }
                         onClick={e => e.stopPropagation()}
@@ -323,97 +355,6 @@ export default function Installs () {
                         <p>Needs revision update!</p>
                       </div>
                     </div>
-
-                    <div className='flex gap-2 absolute right-0 bottom-0'>
-                      <button
-                        className='button'
-                        onClick={e => {
-                          e.stopPropagation()
-                          setManagingVersion(entry)
-                          setPopupMode(3)
-                          setShowPopup(true)
-                          setFadeOut(false)
-                        }}
-                        hidden={needsRevisionUpdate(
-                          getVersionInfo(entry)?.lastRevision,
-                          entry
-                        )}
-                        title='Click to view version info'
-                      >
-                        View Info
-                      </button>
-                      <button
-                        className='button'
-                        hidden={
-                          !normalConfig?.settings.useLegacyInteractButtons ||
-                          needsRevisionUpdate(
-                            getVersionInfo(entry)?.lastRevision,
-                            entry
-                          )
-                        }
-                        onClick={e => {
-                          e.stopPropagation()
-                          setManagingVersion(entry)
-                          setPopupMode(2)
-                          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
-                          })
-                        }}
-                        hidden={
-                          !normalConfig?.settings.useLegacyInteractButtons ||
-                          needsRevisionUpdate(
-                            getVersionInfo(entry)?.lastRevision,
-                            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(
-                            getVersionInfo(entry)?.lastRevision,
-                            entry
-                          )
-                        }
-                        title='Click to update the game'
-                      >
-                        Update
-                      </button>
-                    </div>
                   </div>
                 </div>
               ))

src/app/layout.tsx

@@ -1,52 +1,41 @@
 '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 {
+import { faChevronLeft, faXmark } from '@fortawesome/free-solid-svg-icons'
-  faAdd,
-  faCheck,
-  faChevronLeft,
-  faCode,
-  faDownload,
-  faInfo,
-  faRemove,
-  faShieldHalved,
-  faWarning,
-  faXmark
-} from '@fortawesome/free-solid-svg-icons'
 import {
   readNormalConfig,
   readVersionsConfig,
   writeVersionsConfig
-} from './util/BazookaManager'
+} from '@/lib/BazookaManager'
-import { VersionsConfig } from './types/VersionsConfig'
+import { VersionsConfig } from '@/types/VersionsConfig'
-import { NormalConfig } from './types/NormalConfig'
+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 { ServerVersionsResponse } from '@/types/ServerVersionsResponse'
-import { GameVersion } from './types/GameVersion'
+import { GameVersion } from '@/types/GameVersion'
-import { Game } from './types/Game'
+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 { notifyUser } from '@/lib/Notifications'
-import prettyBytes from 'pretty-bytes'
-import ProgressBar from './componets/ProgressBar'
-import { notifyUser } from './util/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 VersionsDownloadPopup from '@/componets/popups/VersionsDownload'
+import GamesDownloadPopup from '@/componets/popups/GamesDownload'
+import DownloadsPopup from '@/componets/popups/Downloads'
+import VersionVersionPopup from '@/componets/popups/VersionVersion'
 
 const roboto = Roboto({
   subsets: ['latin']
@@ -61,6 +50,7 @@ export default function RootLayout ({
   const [loadingText, setLoadingText] = useState('Loading...')
   const [outdated, setOutdated] = useState(false)
   const [version, setVersion] = useState<string | null>(null)
+  const [platformName, setPlatformName] = useState<string | null>(null)
 
   const [serverVersionList, setServerVersionList] =
     useState<null | ServerVersionsResponse>(null)
@@ -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 []
@@ -94,13 +89,14 @@ export default function RootLayout ({
       )
       .filter(v => {
         if (
-          platform() === 'linux' &&
+          platformName == 'linux' &&
           v.wine &&
           !normalConfig.settings.useWineOnUnixWhenNeeded
         )
           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)
         }
@@ -151,7 +147,7 @@ export default function RootLayout ({
     if (!downloadedVersionsConfig || !serverVersionList) return null
 
     const allowWine =
-      platform() !== 'linux' || normalConfig?.settings.useWineOnUnixWhenNeeded
+      platformName !== 'linux' || normalConfig?.settings.useWineOnUnixWhenNeeded
 
     const installed = Object.keys(downloadedVersionsConfig.list).filter(v => {
       const info = getVersionInfo(v)
@@ -169,34 +165,18 @@ export default function RootLayout ({
     return { installed, total }
   }
 
-  function formatEtaSmart (seconds: number) {
+  const closePopup = useCallback(() => {
-    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 () {
     if (popupMode == 0 && selectedGame && pathname === '/') {
       setSelectedGame(null)
       setSelectedVersionList([])
     } else if (viewingInfoFromDownloads) {
       setViewingInfoFromDownloads(false)
       setPopupMode(0)
-    } else if (popupMode == 4) {
-      setPopupMode(3)
     } else {
       setFadeOut(true)
       setTimeout(() => setShowPopup(false), 200)
     }
-  }
+  }, [popupMode, selectedGame, pathname, viewingInfoFromDownloads])
 
   useEffect(() => {
     let unlistenProgress: (() => void) | null = null
@@ -252,10 +232,10 @@ export default function RootLayout ({
 
   useEffect(() => {
     ;(async () => {
+      setPlatformName(platform())
       const client = await app.getVersion()
       setVersion(client)
       if (process.env.NODE_ENV === 'production') {
-        setLoadingText('Checking latest version...')
         try {
           const response = await axios.get(
             'https://games.lncvrt.xyz/api/launcher/latest'
@@ -269,7 +249,6 @@ export default function RootLayout ({
           return
         }
       }
-      setLoadingText('Downloading version list...')
       try {
         const res = await axios.get(
           `https://games.lncvrt.xyz/api/launcher/versions?platform=${platform()}&arch=${arch()}`
@@ -279,7 +258,6 @@ export default function RootLayout ({
         setLoadingText('Failed to download versions list.')
         return
       }
-      setLoadingText('Loading configs...')
       const normalConfig = await readNormalConfig()
       const versionsConfig = await readVersionsConfig()
       setDownloadedVersionsConfig(versionsConfig)
@@ -292,46 +270,56 @@ export default function RootLayout ({
     })()
   }, [])
 
-  useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') return
-    const handler = (e: MouseEvent) => e.preventDefault()
-    document.addEventListener('contextmenu', handler)
-    return () => document.removeEventListener('contextmenu', handler)
-  }, [])
-
   const downloadVersions = useCallback(
     async (list: string[]): Promise<void> => {
       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)
+      setDownloadProgress(prev => [...prev, ...newDownloads])
-
+      setDownloadQueue(prev => [...prev, ...newVersions])
-      for (const download of newDownloads) {
+    },
-        const info = getVersionInfo(download.version)
+    [downloadQueue, downloadProgress]
-        if (!info) {
-          setDownloadProgress(prev =>
-            prev.filter(d => d.version !== download.version)
   )
-          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 =>
+        setDownloadProgress(prev => prev.filter(d => d.version !== versionId))
-            prev.filter(d => d.version !== download.version)
+        setDownloadQueue(prev => prev.slice(1))
-          )
+        setIsProcessingQueue(false)
-          continue
+        return
       }
 
       setDownloadProgress(prev =>
-          prev.map(d =>
+        prev.map(d => (d.version === versionId ? { ...d, queued: false } : d))
-            d.version === download.version ? { ...d, queued: false } : d
-          )
       )
 
       try {
@@ -348,9 +336,7 @@ export default function RootLayout ({
       })
 
       if (res === '1') {
-          setDownloadProgress(prev =>
+        setDownloadProgress(prev => prev.filter(d => d.version !== versionId))
-            prev.filter(d => d.version !== download.version)
-          )
         setDownloadedVersionsConfig(prev => {
           if (!prev) return prev
 
@@ -358,7 +344,7 @@ export default function RootLayout ({
             ...prev,
             list: {
               ...prev.list,
-                [download.version]: Date.now()
+              [versionId]: Date.now()
             }
           }
 
@@ -368,7 +354,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 +365,39 @@ export default function RootLayout ({
             `The download for version ${info.displayName} has failed.`
           )
       }
+
+      setDownloadQueue(prev => prev.slice(1))
+      setIsProcessingQueue(false)
     }
 
-      if (normalConfig?.settings.allowNotifications)
+    processNextDownload()
-        await notifyUser('Downloads Finished', 'All downloads have finished.')
+  }, [
+    downloadQueue,
+    isProcessingQueue,
+    getVersionInfo,
+    getGameInfo,
+    normalConfig
+  ])
 
-      setFadeOut(true)
+  useEffect(() => {
-      setTimeout(() => setShowPopup(false), 200)
+    if (
-    },
+      downloadQueue.length === 0 &&
-    [getGameInfo, getVersionInfo, normalConfig]
+      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
@@ -433,7 +442,18 @@ export default function RootLayout ({
           }
         >
           {loading ? (
-            <div className='w-screen h-screen flex items-center justify-center'>
+            <>
+              <div
+                className='relative z-2 w-screen border-b border-b-(--col3) h-8.25 bg-(--col1)'
+                hidden={platformName != 'windows'}
+              />
+              <div
+                className={`w-screen ${
+                  platformName == 'windows'
+                    ? 'h-[calc(100vh-64px)]'
+                    : 'h-screen'
+                } flex items-center justify-center`}
+              >
                 {outdated ? (
                   <div className='text-center'>
                     <p className='text-8xl mb-4'>Outdated Launcher!</p>
@@ -453,6 +473,7 @@ export default function RootLayout ({
                   <p className='text-7xl text-center'>{loadingText}</p>
                 )}
               </div>
+            </>
           ) : (
             <GlobalProvider
               value={{
@@ -480,7 +501,15 @@ export default function RootLayout ({
                 getVersionsAmountData,
                 viewingInfoFromDownloads,
                 version,
-                downloadVersions
+                downloadVersions,
+                category,
+                setCategory,
+                downloadQueue,
+                setDownloadQueue,
+                closePopup,
+                getSpecialVersionsList,
+                selectedGame,
+                setViewingInfoFromDownloads
               }}
             >
               <div
@@ -491,10 +520,8 @@ export default function RootLayout ({
               >
                 <Sidebar />
                 <div
-                  className='relative z-2 ml-59.75 w-[calc(100vw-239px)] border-b border-(--col3) h-8.25 bg-(--col1)'
+                  className='relative z-2 ml-59.75 w-[calc(100vw-239px)] border-b border-b-(--col3) h-8.25 bg-(--col1)'
-                  style={{
+                  hidden={platformName != 'windows'}
-                    display: platform() === 'windows' ? 'block' : 'none'
-                  }}
                 />
                 <div className='relative z-0'>
                   <main className='ml-60'>{children}</main>
@@ -533,425 +560,14 @@ export default function RootLayout ({
                         />
                       </button>
                       {popupMode === 0 && selectedGame ? (
-                        <>
+                        <VersionsDownloadPopup />
-                          <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>
-                        </>
                       ) : popupMode === 0 && !selectedGame ? (
-                        <>
+                        <GamesDownloadPopup />
-                          <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>
-                        </>
                       ) : popupMode === 1 ? (
-                        <>
+                        <DownloadsPopup />
-                          <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>
-                        </>
                       ) : popupMode === 2 ? (
-                        managingVersion ? (
+                        <VersionVersionPopup />
-                          <>
-                            <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>
-                        )
-                      ) : 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>
-                        )
                       ) : 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()
@@ -54,7 +54,7 @@ export default function Installs () {
       <div className='downloads-container'>
         <div
           className={`downloads-scroll ${
-            platform() === 'windows'
+            platform() == 'windows'
               ? 'h-[calc(100vh-116px)]'
               : 'h-[calc(100vh-84px)]'
           }`}
@@ -68,18 +68,10 @@ export default function Installs () {
               .map(i => (
                 <div
                   key={i.id}
-                  className={`downloads-entry ${
+                  className={'downloads-entry'}
-                    normalConfig?.settings.useLegacyInteractButtons
+                  title={'Click to view game installs'}
-                      ? ''
-                      : 'cursor-pointer'
-                  }`}
-                  title={
-                    normalConfig?.settings.useLegacyInteractButtons
-                      ? ''
-                      : '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 { Setting } from '@/componets/Setting'
-import { writeNormalConfig } from '../util/BazookaManager'
+import { writeNormalConfig } from '@/lib/BazookaManager'
-import { useGlobal } from '../GlobalProvider'
+import { useGlobal } from '@/app/GlobalProvider'
-import { copyToClipboard } from '../util/Clipboard'
+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.css

@@ -13,10 +13,6 @@
   @apply bg-(--col3) border-(--col4);
 }
 
-.logo {
-  @apply flex items-center pl-2 h-10 w-60 pt-2;
-}
-
 .nav-links {
   @apply flex flex-col px-4 space-y-1;
 }

src/componets/Sidebar.tsx

@@ -0,0 +1,212 @@
+'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={`flex items-center h-10 w-60 ${
+          (platform() == 'windows' ? 'pl-1 pt-1' : 'pl-2 pt-2') +
+          (platform() == 'macos' ? ' mt-7' : '')
+        }`}
+        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 ? 'Verifying file integerty' : '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/VersionVersion.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import {
+  faArrowUpRightFromSquare,
+  faCheck,
+  faCode,
+  faHardDrive,
+  faShieldHalved,
+  faWarning
+} from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+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'
+import { BaseDirectory, exists, remove } from '@tauri-apps/plugin-fs'
+import { writeVersionsConfig } from '@/lib/BazookaManager'
+import { openFolder } from '@/lib/Util'
+
+export default function VersionVersionPopup () {
+  const {
+    getGameInfo,
+    getVersionInfo,
+    managingVersion,
+    downloadedVersionsConfig,
+    viewingInfoFromDownloads,
+    setManagingVersion,
+    closePopup,
+    setDownloadedVersionsConfig,
+    setPopupMode,
+    setSelectedVersionList,
+    downloadVersions
+  } = useGlobal()
+  const [versionSize, setVersionSize] = useState<number>(0)
+
+  useEffect(() => {
+    if (viewingInfoFromDownloads) return
+    invoke<string>('folder_size', {
+      version: managingVersion
+    }).then(size => {
+      setVersionSize(Number(size))
+    })
+  }, [managingVersion, setVersionSize, viewingInfoFromDownloads])
+
+  if (!managingVersion || !downloadedVersionsConfig) return <></>
+
+  const versionInfo = getVersionInfo(managingVersion)
+  const gameInfo = getGameInfo(versionInfo?.game)
+
+  return (
+    <>
+      <p className='text-xl text-center'>Viewing {versionInfo?.displayName}</p>
+      <div className='popup-content flex flex-col items-center justify-center gap-2 h-full'>
+        <div
+          className='entry-info-item btntheme2'
+          hidden={viewingInfoFromDownloads}
+        >
+          <p>
+            Installed{' '}
+            {new Intl.DateTimeFormat(undefined).format(
+              downloadedVersionsConfig.list[managingVersion] ?? 0
+            )}
+          </p>
+        </div>
+        <div
+          className='entry-info-item btntheme2'
+          hidden={!versionInfo || versionInfo.releaseDate == 0}
+        >
+          <p>
+            Released{' '}
+            {new Intl.DateTimeFormat(undefined).format(
+              versionInfo?.releaseDate ? versionInfo.releaseDate * 1000 : 0
+            )}
+          </p>
+        </div>
+        <div className='entry-info-item btntheme2' hidden={!gameInfo?.official}>
+          <FontAwesomeIcon icon={faCheck} color='#19c84b' />
+          <p>Official</p>
+        </div>
+        <div className='entry-info-item btntheme2' hidden={gameInfo?.official}>
+          <FontAwesomeIcon
+            icon={gameInfo?.verified ? faShieldHalved : faWarning}
+            color={gameInfo?.verified ? '#19c84b' : '#ffc800'}
+          />
+          <p>{gameInfo?.verified ? 'Verified' : 'Unverified'}</p>
+        </div>
+        <div
+          className='entry-info-item btntheme2'
+          hidden={gameInfo?.developer == null}
+        >
+          <FontAwesomeIcon icon={faCode} color='lightgray' />
+          <p>Developer: {gameInfo?.developer}</p>
+        </div>
+        <div
+          className='entry-info-item btntheme2'
+          hidden={viewingInfoFromDownloads}
+        >
+          <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
+          <p>
+            Size on disk:{' '}
+            {versionSize && versionSize > 0
+              ? prettyBytes(versionSize, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2
+                })
+              : 'N/A'}
+          </p>
+        </div>
+        <div
+          className='entry-info-item btntheme2'
+          hidden={!viewingInfoFromDownloads}
+        >
+          <FontAwesomeIcon icon={faHardDrive} color='lightgray' />
+          <p>
+            Size when downloaded (zipped):{' '}
+            {versionInfo
+              ? prettyBytes(versionInfo.size, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2
+                })
+              : 'Loading...'}
+          </p>
+        </div>
+        <div
+          className='entry-info-item btntheme2'
+          onClick={async () => {
+            if (!versionInfo) return
+            await message(atob(versionInfo.changelog), {
+              title: 'Changelog for ' + versionInfo.displayName,
+              kind: 'info'
+            })
+          }}
+          hidden={!versionInfo?.changelog}
+        >
+          <p>View Changelog</p>
+          <FontAwesomeIcon icon={faArrowUpRightFromSquare} color='lightgray' />
+        </div>
+        <div
+          className='entry-info-item btntheme2'
+          onClick={async () => openFolder(managingVersion)}
+          title="Click to browse the game's files."
+          hidden={viewingInfoFromDownloads}
+        >
+          Open Folder
+          <FontAwesomeIcon icon={faArrowUpRightFromSquare} color='lightgray' />
+        </div>
+        <div
+          className='entry-info-item 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.'
+          hidden={viewingInfoFromDownloads}
+        >
+          Uninstall
+        </div>
+        <div
+          className='entry-info-item 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."
+          hidden={viewingInfoFromDownloads}
+        >
+          Reinstall
+        </div>
+      </div>
+    </>
+  )
+}

src/componets/popups/VersionsDownload.tsx

@@ -0,0 +1,120 @@
+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,
+    downloadVersions,
+    getGameInfo
+  } = 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(2)
+              }}
+              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)
+              setPopupMode(1)
+            }
+          }}
+          disabled={selectedVersionList.length == 0}
+          title={
+            selectedVersionList.length == 0
+              ? 'Select at least one version to download'
+              : `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>
+    </>
+  )
+}

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,50 @@
+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
+  })
+
+  if (!folderExists) {
+    await message(`Game folder "${absolutePath}" not found.`, {
+      title: 'Folder not found',
+      kind: 'error'
+    })
+    return
+  }
+
+  const folderStat = await stat(relativePath, {
+    baseDir: BaseDirectory.AppLocalData
+  })
+
+  if (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,