style: format code for consistency and readability in sileo-toast component

README.md

@@ -43,6 +43,7 @@ It enhances the osu! experience with quality-of-life features and integration sp
 
 - **Rust** (installed via [rustup](https://rustup.rs/) – recommended for Windows)
 - **Cargo** (comes with rustup)
+- **[CMake](https://cmake.org/download/)**
 - **[Bun](https://bun.sh/)** (JavaScript runtime)
 
 ### Steps

bun.lock

@@ -10,38 +10,43 @@
         "@number-flow/svelte": "^0.3.9",
         "@tailwindcss/typography": "^0.5.16",
         "@tailwindcss/vite": "^4.1.11",
-        "@tauri-apps/api": "^2.8.0",
-        "@tauri-apps/plugin-dialog": "^2.4.0",
-        "@tauri-apps/plugin-fs": "^2.4.2",
-        "@tauri-apps/plugin-shell": "^2.3.1",
+        "@tauri-apps/api": "^2.10.1",
+        "@tauri-apps/plugin-dialog": "^2.6.0",
+        "@tauri-apps/plugin-fs": "^2.4.5",
+        "@tauri-apps/plugin-shell": "^2.3.5",
         "@types/umami": "^2.10.1",
         "animejs": "^4.1.3",
         "buffer": "^6.0.3",
         "crypto-js": "^4.2.0",
-        "lucide-svelte": "^0.542.0",
+        "lucide-svelte": "^0.575.0",
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "react-to-webcomponent": "^2.0.1",
         "semver": "^7.7.2",
+        "sileo": "^0.1.3",
         "svelte-confetti": "^2.3.2",
         "tw-animate-css": "^1.3.8",
       },
       "devDependencies": {
-        "@eslint/compat": "^1.3.2",
+        "@eslint/compat": "^2.0.0",
         "@eslint/js": "^9.35.0",
         "@iarna/toml": "2.2.5",
-        "@lucide/svelte": "^0.542.0",
+        "@lucide/svelte": "^0.575.0",
         "@sveltejs/adapter-static": "^3.0.9",
         "@sveltejs/kit": "^2.37.1",
         "@sveltejs/vite-plugin-svelte": "^6.1.4",
-        "@tauri-apps/cli": "^2.8.4",
+        "@tauri-apps/cli": "^2.10.0",
         "@types/bun": "^1.2.21",
         "@types/crypto-js": "^4.2.2",
+        "@types/react-dom": "^19.2.3",
         "@types/semver": "^7.7.1",
         "autoprefixer": "10.4.21",
-        "bits-ui": "^2.9.6",
+        "bits-ui": "^1.4.7",
         "clsx": "^2.1.1",
         "eslint": "^9.35.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-svelte": "^3.12.2",
-        "globals": "^16.3.0",
+        "globals": "^17.0.0",
         "mode-watcher": "^1.1.0",
         "prettier": "^3.6.2",
         "prettier-plugin-svelte": "^3.4.0",
@@ -57,7 +62,7 @@
         "typescript": "^5.9.2",
         "typescript-eslint": "^8.42.0",
         "vite": "^7.1.5",
-        "vite-plugin-devtools-json": "^0.4.1",
+        "vite-plugin-devtools-json": "^1.0.0",
       },
     },
   },
@@ -122,13 +127,13 @@
 
     "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.1", "", {}, "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ=="],
 
-    "@eslint/compat": ["@eslint/compat@1.3.2", "", { "peerDependencies": { "eslint": "^8.40 || 9" }, "optionalPeers": ["eslint"] }, "sha512-jRNwzTbd6p2Rw4sZ1CgWRS8YMtqG15YyZf7zvb6gY2rB2u6n+2Z+ELW0GtL0fQgyl0pr4Y/BzBfng/BdsereRA=="],
+    "@eslint/compat": ["@eslint/compat@2.0.0", "", { "dependencies": { "@eslint/core": "^1.0.0" }, "peerDependencies": { "eslint": "^8.40 || 9" }, "optionalPeers": ["eslint"] }, "sha512-T9AfE1G1uv4wwq94ozgTGio5EUQBqAVe1X9qsQtSNVEYW6j3hvtZVm8Smr4qL1qDPFg+lOB2cL5RxTRMzq4CTA=="],
 
     "@eslint/config-array": ["@eslint/config-array@0.21.0", "", { "dependencies": { "@eslint/object-schema": "^2.1.6", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ=="],
 
     "@eslint/config-helpers": ["@eslint/config-helpers@0.3.1", "", {}, "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA=="],
 
-    "@eslint/core": ["@eslint/core@0.15.2", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg=="],
+    "@eslint/core": ["@eslint/core@1.0.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-PRfWP+8FOldvbApr6xL7mNCw4cJcSTq4GA7tYbgq15mRb0kWKO/wEB2jr+uwjFH3sZvEZneZyCUGTxsv4Sahyw=="],
 
     "@eslint/eslintrc": ["@eslint/eslintrc@3.3.1", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.0", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ=="],
 
@@ -174,7 +179,7 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
 
-    "@lucide/svelte": ["@lucide/svelte@0.542.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-NuWttxTVfMSURpOxcKiKvoCtma3JtEpcJWzF/0cO69saZfXlv6G8NYAvEEGLmk75YPl+I+ROe+F97WhddM8r2A=="],
+    "@lucide/svelte": ["@lucide/svelte@0.575.0", "", { "peerDependencies": { "svelte": "^5" } }, "sha512-FEFp/0McZwsjBqh1Dn8H+UBm1yHFQYk+utuVMFDw57155+wz2XMoc1pw027ylCPzs+bi14UEXYKbekFhuJKtnw=="],
 
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
@@ -214,6 +219,8 @@
 
     "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
 
+    "@r2wc/core": ["@r2wc/core@1.3.0", "", {}, "sha512-aPBnND92Itl+SWWbWyyxdFFF0+RqKB6dptGHEdiPB8ZvnHWHlVzOfEvbEcyUYGtB6HBdsfkVuBiaGYyBFVTzVQ=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.44.1", "", { "os": "android", "cpu": "arm" }, "sha512-JAcBr1+fgqx20m7Fwe1DxPUl/hPkee6jA6Pl7n1v2EFiktAHenTaXl5aIFjUIEsfn9w3HE4gK1lEgNGMzBDs1w=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.44.1", "", { "os": "android", "cpu": "arm64" }, "sha512-RurZetXqTu4p+G0ChbnkwBuAtwAbIwJkycw1n6GvlGlBuS4u5qlr5opix8cBAYFJgaY05TWtM+LaoFggUmbZEQ=="],
@@ -300,37 +307,37 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.1.11", "", { "dependencies": { "@tailwindcss/node": "4.1.11", "@tailwindcss/oxide": "4.1.11", "tailwindcss": "4.1.11" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw=="],
 
-    "@tauri-apps/api": ["@tauri-apps/api@2.8.0", "", {}, "sha512-ga7zdhbS2GXOMTIZRT0mYjKJtR9fivsXzsyq5U3vjDL0s6DTMwYRm0UHNjzTY5dh4+LSC68Sm/7WEiimbQNYlw=="],
+    "@tauri-apps/api": ["@tauri-apps/api@2.10.1", "", {}, "sha512-hKL/jWf293UDSUN09rR69hrToyIXBb8CjGaWC7gfinvnQrBVvnLr08FeFi38gxtugAVyVcTa5/FD/Xnkb1siBw=="],
 
-    "@tauri-apps/cli": ["@tauri-apps/cli@2.8.4", "", { "optionalDependencies": { "@tauri-apps/cli-darwin-arm64": "2.8.4", "@tauri-apps/cli-darwin-x64": "2.8.4", "@tauri-apps/cli-linux-arm-gnueabihf": "2.8.4", "@tauri-apps/cli-linux-arm64-gnu": "2.8.4", "@tauri-apps/cli-linux-arm64-musl": "2.8.4", "@tauri-apps/cli-linux-riscv64-gnu": "2.8.4", "@tauri-apps/cli-linux-x64-gnu": "2.8.4", "@tauri-apps/cli-linux-x64-musl": "2.8.4", "@tauri-apps/cli-win32-arm64-msvc": "2.8.4", "@tauri-apps/cli-win32-ia32-msvc": "2.8.4", "@tauri-apps/cli-win32-x64-msvc": "2.8.4" }, "bin": { "tauri": "tauri.js" } }, "sha512-ejUZBzuQRcjFV+v/gdj/DcbyX/6T4unZQjMSBZwLzP/CymEjKcc2+Fc8xTORThebHDUvqoXMdsCZt8r+hyN15g=="],
+    "@tauri-apps/cli": ["@tauri-apps/cli@2.10.0", "", { "optionalDependencies": { "@tauri-apps/cli-darwin-arm64": "2.10.0", "@tauri-apps/cli-darwin-x64": "2.10.0", "@tauri-apps/cli-linux-arm-gnueabihf": "2.10.0", "@tauri-apps/cli-linux-arm64-gnu": "2.10.0", "@tauri-apps/cli-linux-arm64-musl": "2.10.0", "@tauri-apps/cli-linux-riscv64-gnu": "2.10.0", "@tauri-apps/cli-linux-x64-gnu": "2.10.0", "@tauri-apps/cli-linux-x64-musl": "2.10.0", "@tauri-apps/cli-win32-arm64-msvc": "2.10.0", "@tauri-apps/cli-win32-ia32-msvc": "2.10.0", "@tauri-apps/cli-win32-x64-msvc": "2.10.0" }, "bin": { "tauri": "tauri.js" } }, "sha512-ZwT0T+7bw4+DPCSWzmviwq5XbXlM0cNoleDKOYPFYqcZqeKY31KlpoMW/MOON/tOFBPgi31a2v3w9gliqwL2+Q=="],
 
-    "@tauri-apps/cli-darwin-arm64": ["@tauri-apps/cli-darwin-arm64@2.8.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BKu8HRkYV01SMTa7r4fLx+wjgtRK8Vep7lmBdHDioP6b8XH3q2KgsAyPWfEZaZIkZ2LY4SqqGARaE9oilNe0oA=="],
+    "@tauri-apps/cli-darwin-arm64": ["@tauri-apps/cli-darwin-arm64@2.10.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-avqHD4HRjrMamE/7R/kzJPcAJnZs0IIS+1nkDP5b+TNBn3py7N2aIo9LIpy+VQq0AkN8G5dDpZtOOBkmWt/zjA=="],
 
-    "@tauri-apps/cli-darwin-x64": ["@tauri-apps/cli-darwin-x64@2.8.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-imb9PfSd/7G6VAO7v1bQ2A3ZH4NOCbhGJFLchxzepGcXf9NKkfun157JH9mko29K6sqAwuJ88qtzbKCbWJTH9g=="],
+    "@tauri-apps/cli-darwin-x64": ["@tauri-apps/cli-darwin-x64@2.10.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-keDmlvJRStzVFjZTd0xYkBONLtgBC9eMTpmXnBXzsHuawV2q9PvDo2x6D5mhuoMVrJ9QWjgaPKBBCFks4dK71Q=="],
 
-    "@tauri-apps/cli-linux-arm-gnueabihf": ["@tauri-apps/cli-linux-arm-gnueabihf@2.8.4", "", { "os": "linux", "cpu": "arm" }, "sha512-Ml215UnDdl7/fpOrF1CNovym/KjtUbCuPgrcZ4IhqUCnhZdXuphud/JT3E8X97Y03TZ40Sjz8raXYI2ET0exzw=="],
+    "@tauri-apps/cli-linux-arm-gnueabihf": ["@tauri-apps/cli-linux-arm-gnueabihf@2.10.0", "", { "os": "linux", "cpu": "arm" }, "sha512-e5u0VfLZsMAC9iHaOEANumgl6lfnJx0Dtjkd8IJpysZ8jp0tJ6wrIkto2OzQgzcYyRCKgX72aKE0PFgZputA8g=="],
 
-    "@tauri-apps/cli-linux-arm64-gnu": ["@tauri-apps/cli-linux-arm64-gnu@2.8.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-pbcgBpMyI90C83CxE5REZ9ODyIlmmAPkkJXtV398X3SgZEIYy5TACYqlyyv2z5yKgD8F8WH4/2fek7+jH+ZXAw=="],
+    "@tauri-apps/cli-linux-arm64-gnu": ["@tauri-apps/cli-linux-arm64-gnu@2.10.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-YrYYk2dfmBs5m+OIMCrb+JH/oo+4FtlpcrTCgiFYc7vcs6m3QDd1TTyWu0u01ewsCtK2kOdluhr/zKku+KP7HA=="],
 
-    "@tauri-apps/cli-linux-arm64-musl": ["@tauri-apps/cli-linux-arm64-musl@2.8.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-zumFeaU1Ws5Ay872FTyIm7z8kfzEHu8NcIn8M6TxbJs0a7GRV21KBdpW1zNj2qy7HynnpQCqjAYXTUUmm9JAOw=="],
+    "@tauri-apps/cli-linux-arm64-musl": ["@tauri-apps/cli-linux-arm64-musl@2.10.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-GUoPdVJmrJRIXFfW3Rkt+eGK9ygOdyISACZfC/bCSfOnGt8kNdQIQr5WRH9QUaTVFIwxMlQyV3m+yXYP+xhSVA=="],
 
-    "@tauri-apps/cli-linux-riscv64-gnu": ["@tauri-apps/cli-linux-riscv64-gnu@2.8.4", "", { "os": "linux", "cpu": "none" }, "sha512-qiqbB3Zz6IyO201f+1ojxLj65WYj8mixL5cOMo63nlg8CIzsP23cPYUrx1YaDPsCLszKZo7tVs14pc7BWf+/aQ=="],
+    "@tauri-apps/cli-linux-riscv64-gnu": ["@tauri-apps/cli-linux-riscv64-gnu@2.10.0", "", { "os": "linux", "cpu": "none" }, "sha512-JO7s3TlSxshwsoKNCDkyvsx5gw2QAs/Y2GbR5UE2d5kkU138ATKoPOtxn8G1fFT1aDW4LH0rYAAfBpGkDyJJnw=="],
 
-    "@tauri-apps/cli-linux-x64-gnu": ["@tauri-apps/cli-linux-x64-gnu@2.8.4", "", { "os": "linux", "cpu": "x64" }, "sha512-TaqaDd9Oy6k45Hotx3pOf+pkbsxLaApv4rGd9mLuRM1k6YS/aw81YrsMryYPThrxrScEIUcmNIHaHsLiU4GMkw=="],
+    "@tauri-apps/cli-linux-x64-gnu": ["@tauri-apps/cli-linux-x64-gnu@2.10.0", "", { "os": "linux", "cpu": "x64" }, "sha512-Uvh4SUUp4A6DVRSMWjelww0GnZI3PlVy7VS+DRF5napKuIehVjGl9XD0uKoCoxwAQBLctvipyEK+pDXpJeoHng=="],
 
-    "@tauri-apps/cli-linux-x64-musl": ["@tauri-apps/cli-linux-x64-musl@2.8.4", "", { "os": "linux", "cpu": "x64" }, "sha512-ot9STAwyezN8w+bBHZ+bqSQIJ0qPZFlz/AyscpGqB/JnJQVDFQcRDmUPFEaAtt2UUHSWzN3GoTJ5ypqLBp2WQA=="],
+    "@tauri-apps/cli-linux-x64-musl": ["@tauri-apps/cli-linux-x64-musl@2.10.0", "", { "os": "linux", "cpu": "x64" }, "sha512-AP0KRK6bJuTpQ8kMNWvhIpKUkQJfcPFeba7QshOQZjJ8wOS6emwTN4K5g/d3AbCMo0RRdnZWwu67MlmtJyxC1Q=="],
 
-    "@tauri-apps/cli-win32-arm64-msvc": ["@tauri-apps/cli-win32-arm64-msvc@2.8.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-+2aJ/g90dhLiOLFSD1PbElXX3SoMdpO7HFPAZB+xot3CWlAZD1tReUFy7xe0L5GAR16ZmrxpIDM9v9gn5xRy/w=="],
+    "@tauri-apps/cli-win32-arm64-msvc": ["@tauri-apps/cli-win32-arm64-msvc@2.10.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-97DXVU3dJystrq7W41IX+82JEorLNY+3+ECYxvXWqkq7DBN6FsA08x/EFGE8N/b0LTOui9X2dvpGGoeZKKV08g=="],
 
-    "@tauri-apps/cli-win32-ia32-msvc": ["@tauri-apps/cli-win32-ia32-msvc@2.8.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-yj7WDxkL1t9Uzr2gufQ1Hl7hrHuFKTNEOyascbc109EoiAqCp0tgZ2IykQqOZmZOHU884UAWI1pVMqBhS/BfhA=="],
+    "@tauri-apps/cli-win32-ia32-msvc": ["@tauri-apps/cli-win32-ia32-msvc@2.10.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-EHyQ1iwrWy1CwMalEm9z2a6L5isQ121pe7FcA2xe4VWMJp+GHSDDGvbTv/OPdkt2Lyr7DAZBpZHM6nvlHXEc4A=="],
 
-    "@tauri-apps/cli-win32-x64-msvc": ["@tauri-apps/cli-win32-x64-msvc@2.8.4", "", { "os": "win32", "cpu": "x64" }, "sha512-XuvGB4ehBdd7QhMZ9qbj/8icGEatDuBNxyYHbLKsTYh90ggUlPa/AtaqcC1Fo69lGkTmq9BOKrs1aWSi7xDonA=="],
+    "@tauri-apps/cli-win32-x64-msvc": ["@tauri-apps/cli-win32-x64-msvc@2.10.0", "", { "os": "win32", "cpu": "x64" }, "sha512-NTpyQxkpzGmU6ceWBTY2xRIEaS0ZLbVx1HE1zTA3TY/pV3+cPoPPOs+7YScr4IMzXMtOw7tLw5LEXo5oIG3qaQ=="],
 
-    "@tauri-apps/plugin-dialog": ["@tauri-apps/plugin-dialog@2.4.0", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-OvXkrEBfWwtd8tzVCEXIvRfNEX87qs2jv6SqmVPiHcJjBhSF/GUvjqUNIDmKByb5N8nvDqVUM7+g1sXwdC/S9w=="],
+    "@tauri-apps/plugin-dialog": ["@tauri-apps/plugin-dialog@2.6.0", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-q4Uq3eY87TdcYzXACiYSPhmpBA76shgmQswGkSVio4C82Sz2W4iehe9TnKYwbq7weHiL88Yw19XZm7v28+Micg=="],
 
-    "@tauri-apps/plugin-fs": ["@tauri-apps/plugin-fs@2.4.2", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-YGhmYuTgXGsi6AjoV+5mh2NvicgWBfVJHHheuck6oHD+HC9bVWPaHvCP0/Aw4pHDejwrvT8hE3+zZAaWf+hrig=="],
+    "@tauri-apps/plugin-fs": ["@tauri-apps/plugin-fs@2.4.5", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-dVxWWGE6VrOxC7/jlhyE+ON/Cc2REJlM35R3PJX3UvFw2XwYhLGQVAIyrehenDdKjotipjYEVc4YjOl3qq90fA=="],
 
-    "@tauri-apps/plugin-shell": ["@tauri-apps/plugin-shell@2.3.1", "", { "dependencies": { "@tauri-apps/api": "^2.8.0" } }, "sha512-jjs2WGDO/9z2pjNlydY/F5yYhNsscv99K5lCmU5uKjsVvQ3dRlDhhtVYoa4OLDmktLtQvgvbQjCFibMl6tgGfw=="],
+    "@tauri-apps/plugin-shell": ["@tauri-apps/plugin-shell@2.3.5", "", { "dependencies": { "@tauri-apps/api": "^2.10.1" } }, "sha512-jewtULhiQ7lI7+owCKAjc8tYLJr92U16bPOeAa472LHJdgaibLP83NcfAF2e+wkEcA53FxKQAZ7byDzs2eeizg=="],
 
     "@types/bun": ["@types/bun@1.2.21", "", { "dependencies": { "bun-types": "1.2.21" } }, "sha512-NiDnvEqmbfQ6dmZ3EeUO577s4P5bf4HCTXtI6trMc6f6RzirY5IrF3aIookuSpyslFzrnvv2lmEWv5HyC1X79A=="],
 
@@ -346,6 +353,8 @@
 
     "@types/react": ["@types/react@19.1.8", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-AwAfQ2Wa5bCx9WP8nZL2uMZWod7J7/JSplxbTmBQ5ms6QpqNYm672H0Vu9ZVKVngQ+ii4R/byguVEUZQyeg44g=="],
 
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
     "@types/semver": ["@types/semver@7.7.1", "", {}, "sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA=="],
 
     "@types/umami": ["@types/umami@2.10.1", "", {}, "sha512-CvOEMq+BFOUXj8yciq4hPsdOt0o9KBg5jQXnF1FrdOMKZMxJiwryyZNLa9Ud2NVO6nXSwU22YMKR3E+Xhbo+DA=="],
@@ -392,7 +401,7 @@
 
     "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
 
-    "bits-ui": ["bits-ui@2.9.6", "", { "dependencies": { "@floating-ui/core": "^1.7.1", "@floating-ui/dom": "^1.7.1", "esm-env": "^1.1.2", "runed": "^0.29.1", "svelte-toolbelt": "^0.9.3", "tabbable": "^6.2.0" }, "peerDependencies": { "@internationalized/date": "^3.8.1", "svelte": "^5.33.0" } }, "sha512-OzHktsQRsIz/hIMk5VwHo96Wpp/KY68q/ebUPUzTbvuFBrALB/X+QvO4KLgdczj5dfb3xHs9zpWq8yMH8ZbZlA=="],
+    "bits-ui": ["bits-ui@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.6.4", "@floating-ui/dom": "^1.6.7", "@internationalized/date": "^3.5.6", "css.escape": "^1.5.1", "esm-env": "^1.1.2", "runed": "^0.23.2", "svelte-toolbelt": "^0.7.1", "tabbable": "^6.2.0" }, "peerDependencies": { "svelte": "^5.11.0" } }, "sha512-CXD6Orp7l8QevNDcRPLXc/b8iMVgxDWT2LyTwsdLzJKh9CxesOmPuNePSPqAxKoT59FIdU4aFPS1k7eBdbaCxg=="],
 
     "brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
 
@@ -432,6 +441,8 @@
 
     "crypto-js": ["crypto-js@4.2.0", "", {}, "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q=="],
 
+    "css.escape": ["css.escape@1.5.1", "", {}, "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg=="],
+
     "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
@@ -504,11 +515,13 @@
 
     "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
 
+    "framer-motion": ["framer-motion@12.34.1", "", { "dependencies": { "motion-dom": "^12.34.1", "motion-utils": "^12.29.2", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-kcZyNaYQfvE2LlH6+AyOaJAQV4rGp5XbzfhsZpiSZcwDMfZUHhuxLWeyRzf5I7jip3qKRpuimPA9pXXfr111kQ=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
 
-    "globals": ["globals@16.3.0", "", {}, "sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ=="],
+    "globals": ["globals@17.0.0", "", {}, "sha512-gv5BeD2EssA793rlFWVPMMCqefTlpusw6/2TbAVMy0FzcG8wKJn4O+NqJ4+XWmmwrayJgw5TzrmWjFgmz1XPqw=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
@@ -590,7 +603,7 @@
 
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
-    "lucide-svelte": ["lucide-svelte@0.542.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-KxqJycY4EWaGy1zk/7sqEcf48j4YaP9zEujYczzrsw5j9b9b5pjAJ1qGFKZvD7T6xz9reSYAfUAd6Bz62TdqGw=="],
+    "lucide-svelte": ["lucide-svelte@0.575.0", "", { "peerDependencies": { "svelte": "^3 || ^4 || ^5.0.0-next.42" } }, "sha512-Tu15tJfbmRNPaU61yeNFf3jfRHs8ABA+NwTt7TWmwVbhlSA3H7sW65tX6RttcP7HGV4aHUlYhXixZOlntoFBdw=="],
 
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
@@ -608,6 +621,12 @@
 
     "mode-watcher": ["mode-watcher@1.1.0", "", { "dependencies": { "runed": "^0.25.0", "svelte-toolbelt": "^0.7.1" }, "peerDependencies": { "svelte": "^5.27.0" } }, "sha512-mUT9RRGPDYenk59qJauN1rhsIMKBmWA3xMF+uRwE8MW/tjhaDSCCARqkSuDTq8vr4/2KcAxIGVjACxTjdk5C3g=="],
 
+    "motion": ["motion@12.34.1", "", { "dependencies": { "framer-motion": "^12.34.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-N9RVNGn/NSo85OgHX1wGaUWHvReuQ7dZUwuQRhHyzY2wfVOvY3cEgn0Mw4NXOsXMHL/y7EYuzA+b59PYI6EejA=="],
+
+    "motion-dom": ["motion-dom@12.34.1", "", { "dependencies": { "motion-utils": "^12.29.2" } }, "sha512-SC7ZC5dRcGwku2g7EsPvI4q/EzHumUbqsDNumBmZTLFg+goBO5LTJvDu9MAxx+0mtX4IA78B2be/A3aRjY0jnw=="],
+
+    "motion-utils": ["motion-utils@12.29.2", "", {}, "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A=="],
+
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
@@ -664,6 +683,12 @@
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
+    "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
+
+    "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
+
+    "react-to-webcomponent": ["react-to-webcomponent@2.0.1", "", { "dependencies": { "@r2wc/core": "^1.0.0" }, "peerDependencies": { "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-jpVztcA0SbV6TnBRV6EFuU+hmuuSIxgEww3wRcbneT0ytqn57y9ygeRfUmhzz8+bYg53u1h4COKk8iAextHE+Q=="],
+
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
@@ -674,7 +699,7 @@
 
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
 
-    "runed": ["runed@0.29.2", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-0cq6cA6sYGZwl/FvVqjx9YN+1xEBu9sDDyuWdDW1yWX7JF2wmvmVKfH+hVCZs+csW+P3ARH92MjI3H9QTagOQA=="],
+    "runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
 
     "rxjs": ["rxjs@7.8.2", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA=="],
 
@@ -720,6 +745,8 @@
 
     "sass-embedded-win32-x64": ["sass-embedded-win32-x64@1.92.1", "", { "os": "win32", "cpu": "x64" }, "sha512-B6Nz/GbH7Vkpb2TkQHsGcczWM5t+70VWopWF1x5V5yxLpA8ZzVQ7NTKKi+jDoVY2Efu6ZyzgT9n5KgG2kWliXA=="],
 
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
     "semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
 
     "set-cookie-parser": ["set-cookie-parser@2.7.1", "", {}, "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="],
@@ -728,6 +755,8 @@
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
+    "sileo": ["sileo@0.1.3", "", { "dependencies": { "motion": "^12.34.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-kmGjM2ts2TpuPzOaD7llxcMpU37Pyj5dO8s4wGXvDlR143zV2sB6sJ76PCVP4kY2+hfkrLJhiSm/wXGdUHDFjQ=="],
+
     "sirv": ["sirv@3.0.1", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-FoqMu0NCGBLCcAkS1qA+XJIQTR6/JHfQXl+uGteNCQ76T91DMUjPa9xfmeqMY3z80nLSg9yQmNjK0Px6RWsH/A=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
@@ -748,7 +777,7 @@
 
     "svelte-sonner": ["svelte-sonner@1.0.5", "", { "dependencies": { "runed": "^0.28.0" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-9dpGPFqKb/QWudYqGnEz93vuY+NgCEvyNvxoCLMVGw6sDN/3oVeKV1xiEirW2E1N3vJEyj5imSBNOGltQHA7mg=="],
 
-    "svelte-toolbelt": ["svelte-toolbelt@0.9.3", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.29.0", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.30.2" } }, "sha512-HCSWxCtVmv+c6g1ACb8LTwHVbDqLKJvHpo6J8TaqwUme2hj9ATJCpjCPNISR1OCq2Q4U1KT41if9ON0isINQZw=="],
+    "svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
 
     "sync-child-process": ["sync-child-process@1.0.2", "", { "dependencies": { "sync-message-port": "^1.0.0" } }, "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA=="],
 
@@ -800,7 +829,7 @@
 
     "vite": ["vite@7.1.5", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-4cKBO9wR75r0BeIWWWId9XK9Lj6La5X846Zw9dFfzMRw38IlTk2iCcUt6hsyiDRcPidc55ZParFYDXi0nXOeLQ=="],
 
-    "vite-plugin-devtools-json": ["vite-plugin-devtools-json@0.4.1", "", { "dependencies": { "uuid": "^11.1.0" }, "peerDependencies": { "vite": "^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-pN+QJL+NwZUV+Via8w/Sh6X2pDrVClIMDAXdl7+EteXKB6mcHhsFGGclmxrPx6ZPGKSK5ez5ns64oRpjE5wFCg=="],
+    "vite-plugin-devtools-json": ["vite-plugin-devtools-json@1.0.0", "", { "dependencies": { "uuid": "^11.1.0" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-MobvwqX76Vqt/O4AbnNMNWoXWGrKUqZbphCUle/J2KXH82yKQiunOeKnz/nqEPosPsoWWPP9FtNuPBSYpiiwkw=="],
 
     "vitefu": ["vitefu@1.1.1", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["vite"] }, "sha512-B/Fegf3i8zh0yFbpzZ21amWzHmuNlLlmJT6n7bu5e+pCHUKQIfXSYokrqOBGEMMe9UG2sostKQF9mml/vYaWJQ=="],
 
@@ -820,6 +849,8 @@
 
     "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
 
+    "@eslint/plugin-kit/@eslint/core": ["@eslint/core@0.15.2", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg=="],
+
     "@humanfs/node/@humanwhocodes/retry": ["@humanwhocodes/retry@0.3.1", "", {}, "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA=="],
 
     "@parcel/watcher/detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
@@ -842,16 +873,18 @@
 
     "chalk/supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
+    "eslint/@eslint/core": ["@eslint/core@0.15.2", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg=="],
+
     "eslint-plugin-svelte/@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.7.0", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw=="],
 
+    "eslint-plugin-svelte/globals": ["globals@16.3.0", "", {}, "sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ=="],
+
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "mode-watcher/runed": ["runed@0.25.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-7+ma4AG9FT2sWQEA0Egf6mb7PBT2vHyuHail1ie8ropfSjvZGtEAx8YTmUjv/APCsdRRxEVvArNjALk9zFSOrg=="],
 
-    "mode-watcher/svelte-toolbelt": ["svelte-toolbelt@0.7.1", "", { "dependencies": { "clsx": "^2.1.1", "runed": "^0.23.2", "style-to-object": "^1.0.8" }, "peerDependencies": { "svelte": "^5.0.0" } }, "sha512-HcBOcR17Vx9bjaOceUvxkY3nGmbBmCBBbuWLLEWO6jtmWH8f/QoWmbyUfQZrpDINH39en1b8mptfPQT9VKQ1xQ=="],
-
     "svelte-eslint-parser/postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
 
     "svelte-sonner/runed": ["runed@0.28.0", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-k2xx7RuO9hWcdd9f+8JoBeqWtYrm5CALfgpkg2YDB80ds/QE4w0qqu34A7fqiAwiBBSBQOid7TLxwxVC27ymWQ=="],
@@ -863,7 +896,5 @@
     "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
 
     "eslint-plugin-svelte/@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
-
-    "mode-watcher/svelte-toolbelt/runed": ["runed@0.23.4", "", { "dependencies": { "esm-env": "^1.0.0" }, "peerDependencies": { "svelte": "^5.7.0" } }, "sha512-9q8oUiBYeXIDLWNK5DfCWlkL0EW3oGbk845VdKlPeia28l751VpfesaB/+7pI6rnbx1I6rqoZ2fZxptOJLxILA=="],
   }
 }

eslint.config.js

@@ -36,5 +36,14 @@ export default ts.config(
         svelteConfig,
       },
     },
+  },
+  {
+    rules: {
+      'no-empty': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^\\$\\$(Props|Events|Slots|Generic)$' },
+      ],
+    },
   }
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezpplauncher",
-  "version": "3.0.9",
+  "version": "3.1.2",
   "description": "",
   "type": "module",
   "scripts": {
@@ -24,38 +24,43 @@
     "@number-flow/svelte": "^0.3.9",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "^4.1.11",
-    "@tauri-apps/api": "^2.8.0",
-    "@tauri-apps/plugin-dialog": "^2.4.0",
-    "@tauri-apps/plugin-fs": "^2.4.2",
-    "@tauri-apps/plugin-shell": "^2.3.1",
+    "@tauri-apps/api": "^2.10.1",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
+    "@tauri-apps/plugin-fs": "^2.4.5",
+    "@tauri-apps/plugin-shell": "^2.3.5",
     "@types/umami": "^2.10.1",
     "animejs": "^4.1.3",
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
-    "lucide-svelte": "^0.542.0",
+    "lucide-svelte": "^0.575.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-to-webcomponent": "^2.0.1",
     "semver": "^7.7.2",
+    "sileo": "^0.1.3",
     "svelte-confetti": "^2.3.2",
     "tw-animate-css": "^1.3.8"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
+    "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.35.0",
     "@iarna/toml": "2.2.5",
-    "@lucide/svelte": "^0.542.0",
+    "@lucide/svelte": "^0.575.0",
     "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.37.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.4",
-    "@tauri-apps/cli": "^2.8.4",
+    "@tauri-apps/cli": "^2.10.0",
     "@types/bun": "^1.2.21",
     "@types/crypto-js": "^4.2.2",
+    "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
     "autoprefixer": "10.4.21",
-    "bits-ui": "^2.9.6",
+    "bits-ui": "^1.4.7",
     "clsx": "^2.1.1",
     "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.12.2",
-    "globals": "^16.3.0",
+    "globals": "^17.0.0",
     "mode-watcher": "^1.1.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
@@ -71,6 +76,6 @@
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.42.0",
     "vite": "^7.1.5",
-    "vite-plugin-devtools-json": "^0.4.1"
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }

scripts/sync-version.ts

@@ -3,19 +3,26 @@ import path from 'path';
 import * as toml from '@iarna/toml';
 import { cwd } from 'process';
 
+const packageJsonPath = path.join(cwd(), 'package.json');
 const cargoTomlPath = path.join(cwd(), 'src-tauri', 'Cargo.toml');
 const tauriConfPath = path.join(cwd(), 'src-tauri', 'tauri.conf.json');
 
-const cargoToml = fs.readFileSync(cargoTomlPath, 'utf8');
-const cargo = toml.parse(cargoToml) as Record<string, string>;
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+const version = packageJson.version;
+if (!version) throw new Error('Could not find version in package.json');
 
-const version = cargo.package['version'];
-if (!version) throw new Error('Could not find version in Cargo.toml');
+let cargoTomlContent = fs.readFileSync(cargoTomlPath, 'utf8');
+const cargo = toml.parse(cargoTomlContent) as { package: { version: string } };
+
+if (cargo.package.version !== version) {
+  cargoTomlContent = cargoTomlContent.replace(/version = ".*?"/, `version = "${version}"`);
+  fs.writeFileSync(cargoTomlPath, cargoTomlContent);
+  console.log(`✅ Synced Cargo.toml version to ${version}`);
+}
 
 const tauriConf = JSON.parse(fs.readFileSync(tauriConfPath, 'utf8'));
 if (tauriConf.version !== version) {
   tauriConf.version = version;
-
   fs.writeFileSync(tauriConfPath, JSON.stringify(tauriConf, null, 2));
   console.log(`✅ Synced tauri.conf.json version to ${version}`);
 }

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ezpplauncher"
-version = "3.0.9"
+version = "3.1.2"
 description = "EZPPLauncher redefined."
 authors = ["HorizonCode"]
 edition = "2024"
@@ -15,33 +15,34 @@ name = "ezpplauncher_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 
 [build-dependencies]
-tauri-build = { version = "2.4.1", features = [] }
+tauri-build = { version = "2.5.5", features = [] }
 
 [dependencies]
-tauri = { version = "2.8.5", features = [] }
-tauri-plugin-shell = "2.3.1"
-serde = { version = "1.0.219", features = ["derive"] }
-serde_json = "1.0.143"
+tauri = { version = "2.10.2", features = [] }
+tauri-plugin-shell = "2.3.5"
+serde = { version = "1.0.228", features = ["derive"] }
+serde_json = "1.0.149"
 serde_repr = "0.1.20"
-tauri-plugin-dialog = "2.4.0"
-tauri-plugin-fs = "2.4.2"
+tauri-plugin-dialog = "2.6.0"
+tauri-plugin-fs = "2.4.5"
 hardware-id = "0.3.0"
-tauri-plugin-cors-fetch = "4.1.0"
-sysinfo = "0.37.0"
-reqwest = { version = "0.12.23", features = ["json", "stream"] }
+tauri-plugin-cors-fetch = "5.0.0"
+sysinfo = "0.38.2"
+reqwest = { version = "0.13.2", features = ["json", "stream", "query"] }
 md5 = "0.8.0"
-tokio = { version = "1.47.1", features = ["full"] }
-open = "5.3.2"
-windows-sys = "0.61.0"
-discord-rich-presence = "1.0.0"
+tokio = { version = "1.48.0", features = ["full"] }
+open = "5.3.3"
+discord-rich-presence = "1.1.0"
 once_cell = "1.21.3"
+futures-util = "0.3.32"
 
 [target.'cfg(windows)'.dependencies]
 winreg = "0.55.0"
 winapi = { version = "0.3", features = ["winuser", "wincrypt", "memoryapi", "winbase", "dpapi"] }
 base64 = "0.22.1"
-widestring = "1.0"
+widestring = "1.2.1"
+windows-sys = "0.61.2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
-tauri-plugin-single-instance = "2.3.4"
+tauri-plugin-single-instance = "2.4.0"
 

src-tauri/icons/android/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+  <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+  <background android:drawable="@color/ic_launcher_background"/>
+</adaptive-icon>

src-tauri/icons/android/values/ic_launcher_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <color name="ic_launcher_background">#fff</color>
+</resources>

src-tauri/src/commands.rs

@@ -56,17 +56,11 @@ pub fn valid_osu_folder(folder: String) -> bool {
         "scores.db",
     ];
 
-    let folder_files: Vec<&str> = osu_folder_files.iter().map(|&s| s).collect();
-    if folder_files.iter().any(|&file| file == "osu!.exe") == false {
+    let path = PathBuf::from(folder);
+    if !path.join("osu!.exe").exists() {
         return false;
     }
-
-    let path = PathBuf::from(folder);
-    let match_percentage = check_folder_completeness(path, &osu_folder_files) >= 70.0;
-    if match_percentage {
-        return true;
-    }
-    return false;
+    check_folder_completeness(path, &osu_folder_files) >= 70.0
 }
 
 #[cfg(not(windows))]
@@ -83,10 +77,10 @@ pub fn find_osu_installation() -> Option<String> {
 
     let hklm_registry_paths = ["SOFTWARE\\Classes\\osu\\DefaultIcon"];
 
-    let hkcr_registry_paths = [
-        "osustable.File.osk\\DefaultIcon",
-        "osustable.File.osr\\DefaultIcon",
-        "osustable.File.osz\\DefaultIcon",
+    let hkcu_registry_paths = [
+        "Software\\Classes\\osustable.File.osk\\DefaultIcon",
+        "Software\\Classes\\osustable.File.osr\\DefaultIcon",
+        "Software\\Classes\\osustable.File.osz\\DefaultIcon",
     ];
 
     let osu_folder_files = [
@@ -135,10 +129,10 @@ pub fn find_osu_installation() -> Option<String> {
         }
     }
 
-    let hkcr = RegKey::predef(HKEY_CLASSES_ROOT);
+    let hkcu = RegKey::predef(HKEY_CURRENT_USER);
 
-    for reg_path in &hkcr_registry_paths {
-        if let Ok(subkey) = hkcr.open_subkey_with_flags(reg_path, KEY_READ | KEY_WOW64_32KEY) {
+    for reg_path in &hkcu_registry_paths {
+        if let Ok(subkey) = hkcu.open_subkey_with_flags(reg_path, KEY_READ | KEY_WOW64_32KEY) {
             let value_names = [""];
             for value_name in &value_names {
                 if let Ok(value) = subkey.get_value::<String, _>(value_name) {
@@ -160,7 +154,7 @@ pub fn find_osu_installation() -> Option<String> {
 }
 
 #[tauri::command]
-pub fn get_beatmapsets_count(folder: String) -> Option<u64> {
+pub async fn get_beatmapsets_count(folder: String) -> Option<u64> {
     let path = PathBuf::from(folder);
     let osu_user_config = get_osu_user_config(path.clone());
     let songs_path = osu_user_config
@@ -173,12 +167,12 @@ pub fn get_beatmapsets_count(folder: String) -> Option<u64> {
     }
 
     let mut count = 0;
-    if let Ok(entries) = std::fs::read_dir(songs_folder) {
-        for entry in entries.flatten() {
-            if entry.file_type().map_or(false, |ft| ft.is_dir()) {
+    if let Ok(mut entries) = fs::read_dir(songs_folder).await {
+        while let Ok(Some(entry)) = entries.next_entry().await {
+            if entry.file_type().await.map_or(false, |ft| ft.is_dir()) {
                 let dir_path = entry.path();
-                if let Ok(files) = std::fs::read_dir(&dir_path) {
-                    for file in files.flatten() {
+                if let Ok(mut files) = fs::read_dir(&dir_path).await {
+                    while let Ok(Some(file)) = files.next_entry().await {
                         if file.path().extension().map_or(false, |ext| ext == "osu") {
                             count += 1;
                             break;
@@ -191,8 +185,77 @@ pub fn get_beatmapsets_count(folder: String) -> Option<u64> {
     return Some(count);
 }
 
+#[derive(Serialize, Deserialize, Debug, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct SkinInfo {
+    pub name: String,
+    pub author: Option<String>,
+    pub modified: u64,
+}
+
 #[tauri::command]
-pub fn get_skins_count(folder: String) -> Option<u64> {
+pub async fn get_skins(folder: String) -> Option<Vec<SkinInfo>> {
+    use std::path::PathBuf;
+    use std::time::UNIX_EPOCH;
+    use tokio::fs;
+
+    let skins_folder = PathBuf::from(folder).join("Skins");
+
+    if !skins_folder.exists() {
+        return None;
+    }
+
+    let mut entries = fs::read_dir(skins_folder).await.ok()?;
+
+    let mut skins = Vec::new();
+
+    while let Some(entry) = entries.next_entry().await.ok()? {
+        if !entry.file_type().await.ok()?.is_dir() {
+            continue;
+        }
+
+        let dir_path = entry.path();
+        let skin_ini = dir_path.join("skin.ini");
+
+        if !skin_ini.exists() {
+            continue;
+        }
+
+        let name = entry.file_name().to_string_lossy().to_string();
+
+        let author = fs::read_to_string(&skin_ini)
+            .await
+            .ok()
+            .and_then(|content| {
+                content.lines().find_map(|line| {
+                    let (key, value) = line.split_once(':')?;
+                    key.trim()
+                        .eq_ignore_ascii_case("Author")
+                        .then(|| value.trim().to_string())
+                })
+            });
+
+        let modified = entry
+            .metadata()
+            .await
+            .ok()
+            .and_then(|m| m.modified().ok())
+            .and_then(|t| t.duration_since(UNIX_EPOCH).ok())
+            .map(|d| d.as_secs())
+            .unwrap_or(0);
+
+        skins.push(SkinInfo {
+            name,
+            author,
+            modified,
+        });
+    }
+
+    Some(skins)
+}
+
+#[tauri::command]
+pub async fn get_skins_count(folder: String) -> Option<u64> {
     let path = PathBuf::from(folder);
     let skins_folder = path.join("Skins");
 
@@ -201,12 +264,12 @@ pub fn get_skins_count(folder: String) -> Option<u64> {
     }
 
     let mut count = 0;
-    if let Ok(entries) = std::fs::read_dir(skins_folder) {
-        for entry in entries.flatten() {
-            if entry.file_type().map_or(false, |ft| ft.is_dir()) {
+    if let Ok(mut entries) = fs::read_dir(skins_folder).await {
+        while let Ok(Some(entry)) = entries.next_entry().await {
+            if entry.file_type().await.map_or(false, |ft| ft.is_dir()) {
                 let dir_path = entry.path();
-                if let Ok(files) = std::fs::read_dir(&dir_path) {
-                    for file in files.flatten() {
+                if let Ok(mut files) = fs::read_dir(&dir_path).await {
+                    while let Ok(Some(file)) = files.next_entry().await {
                         if file.path().extension().map_or(false, |ext| ext == "ini") {
                             count += 1;
                             break;
@@ -222,28 +285,28 @@ pub fn get_skins_count(folder: String) -> Option<u64> {
 #[tauri::command]
 pub fn get_osu_skin(folder: String) -> String {
     let path = PathBuf::from(folder);
-    let osu_user_config = get_osu_user_config(path.clone());
-    return osu_user_config
+    let osu_user_config = get_osu_user_config(path);
+    osu_user_config
         .and_then(|config| config.get("Skin").cloned())
-        .unwrap_or_else(|| "Default".to_string());
+        .unwrap_or_else(|| "Default".to_string())
 }
 
 #[tauri::command]
 pub fn get_osu_version(folder: String) -> String {
     let path = PathBuf::from(folder);
-    let osu_user_config = get_osu_user_config(path.clone());
-    return osu_user_config
+    let osu_user_config = get_osu_user_config(path);
+    osu_user_config
         .and_then(|config| config.get("LastVersion").cloned())
-        .unwrap_or_else(|| "failed".to_string());
+        .unwrap_or_else(|| "failed".to_string())
 }
 
 #[tauri::command]
 pub fn get_osu_release_stream(folder: String) -> String {
     let path = PathBuf::from(folder);
-    let osu_config = get_osu_config(path.clone());
-    return osu_config
+    let osu_config = get_osu_config(path);
+    osu_config
         .and_then(|config| config.get("_ReleaseStream").cloned())
-        .unwrap_or_else(|| "Stable40".to_string());
+        .unwrap_or_else(|| "Stable40".to_string())
 }
 
 #[derive(serde::Deserialize)]
@@ -261,10 +324,7 @@ pub fn set_osu_user_config_values(
         .iter()
         .map(|entry| (entry.key.as_str(), Some(entry.value.as_str())))
         .collect();
-    match set_osu_user_config_vals(&osu_folder_path, &converted) {
-        Ok(_) => Ok(true),
-        Err(_) => Ok(false),
-    }
+    Ok(set_osu_user_config_vals(&osu_folder_path, &converted).is_ok())
 }
 
 #[tauri::command]
@@ -276,22 +336,16 @@ pub fn set_osu_config_values(
         .iter()
         .map(|entry| (entry.key.as_str(), Some(entry.value.as_str())))
         .collect();
-    match set_osu_config_vals(&osu_folder_path, &converted) {
-        Ok(_) => Ok(true),
-        Err(_) => Ok(false),
-    }
+    Ok(set_osu_config_vals(&osu_folder_path, &converted).is_ok())
 }
 
 #[tauri::command]
 pub async fn run_osu_updater(folder: String) -> Result<(), String> {
-    #[cfg(windows)]
-    const DETACHED_PROCESS: u32 = 0x00000008;
-    #[cfg(windows)]
-    const CREATE_NEW_PROCESS_GROUP: u32 = 0x00000200;
-
     let mut updater_process = {
         #[cfg(windows)]
         {
+            const DETACHED_PROCESS: u32 = 0x00000008;
+            const CREATE_NEW_PROCESS_GROUP: u32 = 0x00000200;
             let osu_exe_path = PathBuf::from(&folder).join("osu!.exe");
             Command::new(&osu_exe_path)
                 .arg("-repair")
@@ -368,9 +422,6 @@ pub async fn run_osu_updater(folder: String) -> Result<(), String> {
 
 #[tauri::command]
 pub async fn run_osu(folder: String, patch: bool) -> Result<(), String> {
-    /* #[cfg(windows)]
-    use std::os::windows::process::CommandExt; */
-
     #[cfg(windows)]
     const DETACHED_PROCESS: u32 = 0x00000008;
     #[cfg(windows)]
@@ -385,7 +436,7 @@ pub async fn run_osu(folder: String, patch: bool) -> Result<(), String> {
                 .arg("ez-pp.farm")
                 .creation_flags(DETACHED_PROCESS | CREATE_NEW_PROCESS_GROUP)
                 .spawn()
-                .map_err(|e| format!("Failed to spawn updater: {}", e))?
+                .map_err(|e| format!("Failed to spawn osu: {}", e))?
         }
 
         #[cfg(not(windows))]
@@ -394,7 +445,7 @@ pub async fn run_osu(folder: String, patch: bool) -> Result<(), String> {
                 .arg("--devserver")
                 .arg("ez-pp.farm")
                 .spawn()
-                .map_err(|e| format!("Failed to spawn updater: {}", e))?
+                .map_err(|e| format!("Failed to spawn osu: {}", e))?
         }
     };
 
@@ -732,12 +783,7 @@ pub async fn has_net8() -> bool {
 
 #[tauri::command]
 pub fn encrypt_string(string: String, entropy: String) -> String {
-    let encrypted = encrypt_password(&string, &entropy);
-
-    match encrypted {
-        Ok(encrypted_vec) => encrypted_vec,
-        Err(_) => string,
-    }
+    encrypt_password(&string, &entropy).unwrap_or(string)
 }
 
 #[tauri::command]
@@ -773,7 +819,7 @@ pub async fn download_ezpp_launcher_update(app: AppHandle, url: String) -> Resul
             UpdateStatus {
                 file_name: "Update".to_string(),
                 downloaded,
-                size: size,
+                size,
                 progress: ((downloaded as f64 / size as f64 * 100.0) * 100.0).trunc() / 100.0,
             },
         )

src-tauri/src/lib.rs

@@ -8,8 +8,8 @@ use crate::commands::{
     check_for_corruption, download_ezpp_launcher_update, download_ezpp_launcher_update_files,
     encrypt_string, exit, find_osu_installation, get_beatmapsets_count,
     get_ezpp_launcher_update_files, get_hwid, get_launcher_version, get_osu_release_stream,
-    get_osu_skin, get_osu_version, get_platform, get_skins_count, has_net8, has_osuwinello,
-    has_wmctrl, install_ezpp_launcher_update, is_osu_running, open_url_in_browser,
+    get_osu_skin, get_osu_version, get_platform, get_skins, get_skins_count, has_net8,
+    has_osuwinello, has_wmctrl, install_ezpp_launcher_update, is_osu_running, open_url_in_browser,
     presence_connect, presence_disconnect, presence_is_connected, presence_update_status,
     presence_update_user, replace_ui_files, run_osu, run_osu_updater, set_osu_config_values,
     set_osu_user_config_values, valid_osu_folder,
@@ -37,6 +37,7 @@ pub fn run() {
             find_osu_installation,
             valid_osu_folder,
             get_beatmapsets_count,
+            get_skins,
             get_skins_count,
             get_osu_version,
             get_osu_release_stream,

src-tauri/src/presence.rs

@@ -2,6 +2,7 @@ use discord_rich_presence::{
     DiscordIpc, DiscordIpcClient,
     activity::{Activity, Assets, Button, Timestamps},
 };
+use futures_util::future::BoxFuture;
 use once_cell::sync::Lazy;
 use std::sync::Mutex as StdMutex;
 use std::time::{SystemTime, UNIX_EPOCH};
@@ -24,6 +25,7 @@ enum PresenceCommand {
     Disconnect(oneshot::Sender<()>),
     UpdateData(PresenceData),
     IsConnected(oneshot::Sender<bool>),
+    Tick,
 }
 
 struct PresenceActor {
@@ -58,7 +60,7 @@ impl PresenceActor {
     }
 
     async fn run(&mut self) {
-        let mut update_interval = interval(Duration::from_millis(2500));
+        let mut update_interval = interval(Duration::from_secs(5));
 
         loop {
             tokio::select! {
@@ -74,18 +76,22 @@ impl PresenceActor {
                         PresenceCommand::IsConnected(responder) => {
                             let _ = responder.send(self.client.is_some());
                         }
+                        PresenceCommand::Tick => {
+                            if self.client.is_some() {
+                                self.handle_update().await;
+                            }
+                        }
                     }
                 }
                 _ = update_interval.tick() => {
-                    if self.client.is_some() {
-                        self.handle_update().await;
-                    }
+                    let _ = PRESENCE_TX.send(PresenceCommand::Tick).await;
                 }
             }
         }
     }
 
-    async fn handle_connect(&mut self, responder: oneshot::Sender<bool>) {
+    fn handle_connect(&mut self, responder: oneshot::Sender<bool>) -> BoxFuture<'_, ()> {
+        Box::pin(async move {
         if self.client.is_some() {
             let _ = responder.send(true);
             return;
@@ -101,10 +107,20 @@ impl PresenceActor {
                 let _ = responder.send(true);
             }
             Err(e) => {
-                eprintln!("Failed to create Discord client: {:?}", e);
-                let _ = responder.send(false);
+                eprintln!("Failed to connect to Discord: {:?}. Retrying in 5s...", e);
+                let tx = PRESENCE_TX.clone();
+                tokio::spawn(async move {
+                    tokio::time::sleep(Duration::from_secs(5)).await;
+                    let (resp_tx, _) = oneshot::channel();
+                    let _ = tx.send(PresenceCommand::Connect(resp_tx)).await;
+                });
+                
+                if !responder.is_closed() {
+                    let _ = responder.send(false);
+                }
             }
         }
+        })
     }
 
     async fn handle_disconnect(&mut self, responder: oneshot::Sender<()>) {
@@ -143,12 +159,14 @@ impl PresenceActor {
                     Button::new("Join EZPPFarm", "https://ez-pp.farm/discord"),
                 ]);
 
-            if let Err(e) = client.set_activity(activity).map_err(|e| e.to_string()) {
+            if let Err(e) = client.set_activity(activity) {
                 eprintln!("Failed to set activity, disconnecting: {:?}", e);
-                if let Some(mut client) = self.client.take() {
-                    let _ = client.clear_activity();
-                    let _ = client.close();
-                }
+                self.client = None;
+
+                let (tx, _) = oneshot::channel();
+                self.handle_connect(tx).await;
+            } else {
+                println!("Actor: Presence updated successfully.");
             }
         }
     }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "EZPPLauncher",
-  "version": "3.0.9",
+  "version": "3.1.2",
   "identifier": "farm.EZPPFarm.Launcher",
   "mainBinaryName": "ezpplauncher",
   "build": {
@@ -15,7 +15,7 @@
       {
         "title": "EZPPLauncher",
         "width": 1000,
-        "height": 737,
+        "height": 650,
         "decorations": false,
         "resizable": false,
         "maximizable": false

src/app.css

@@ -55,7 +55,7 @@
   --card-foreground: oklch(89.24% 0.079 263.24);
   --popover: oklch(20.3% 0.05 282.86);
   --popover-foreground: oklch(89.24% 0.079 263.24);
-  --primary: oklch(81.45% 0.159 300.53);
+  --primary: oklch(72.08% 0.196 356.34);
   --primary-foreground: oklch(20.22% 0.048 282.86);
   --secondary: oklch(42.99% 0.031 270.49);
   --secondary-foreground: oklch(89.24% 0.079 263.24);
@@ -67,8 +67,8 @@
   --destructive-foreground: oklch(20.22% 0.048 282.86);
   --border: oklch(27.7% 0.041 276.87);
   --input: oklch(27.7% 0.041 276.87);
-  --ring: oklch(81.45% 0.159 300.53);
-  --chart-1: oklch(81.45% 0.159 300.53);
+  --ring: oklch(72.08% 0.196 356.34);
+  --chart-1: oklch(72.08% 0.196 356.34);
   --chart-2: oklch(77.19% 0.121 223.01);
   --chart-3: oklch(79.1% 0.119 150.21);
   --chart-4: oklch(79.74% 0.167 57.97);
@@ -76,12 +76,12 @@
   --sidebar: oklch(13.29% 0.036 282.86);
   --sidebar-background: oklch(13.29% 0.036 282.86);
   --sidebar-foreground: oklch(89.24% 0.079 263.24);
-  --sidebar-primary: oklch(81.45% 0.159 300.53);
+  --sidebar-primary: oklch(72.08% 0.196 356.34);
   --sidebar-primary-foreground: oklch(20.22% 0.048 282.86);
   --sidebar-accent: oklch(75.21% 0.121 293.01);
   --sidebar-accent-foreground: oklch(20.22% 0.048 282.86);
   --sidebar-border: oklch(35.13% 0.03 273.31);
-  --sidebar-ring: oklch(81.45% 0.159 300.53);
+  --sidebar-ring: oklch(72.08% 0.196 356.34);
 }
 
 @theme inline {
@@ -108,20 +108,18 @@
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
-  --color-primary-50: #fefdff;
-  --color-primary-100: #faf6fe;
-  --color-primary-200: #f2e9fc;
-  --color-primary-300: #e9dbfa;
-  --color-primary-400: #e1cef9;
-  --color-primary-500: #d9c0f7;
-  --color-primary-600: #c6a0f3;
-  --color-primary-700: #b381ef;
-  --color-primary-800: #a061eb;
-  --color-primary-900: #8d41e7;
-  --color-primary-950: #8331e5;
+  --color-primary-50: #ffe5f1;
+  --color-primary-100: #ffcce2;
+  --color-primary-200: #ff99c5;
+  --color-primary-300: #ff66a8;
+  --color-primary-400: #ff338b;
+  --color-primary-500: #ff006e;
+  --color-primary-600: #cc0058;
+  --color-primary-700: #990042;
+  --color-primary-800: #66002c;
+  --color-primary-900: #330016;
+  --color-primary-950: #24000f;
   --color-primary-foreground: var(--primary-foreground);
-  --color-primary-50: #fefdff;
-  --color-primary-100: #faf6fe;
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);

src/app.html

@@ -1,15 +1,13 @@
 <!doctype html>
 <html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>EZPPLauncher</title>
+    %sveltekit.head%
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>EZPPLauncher</title>
-  %sveltekit.head%
-</head>
-
-<body class="bg-theme-950" data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
-</body>
-
+  <body class="bg-theme-950" data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>

src/lib/components/ui/animated-bg/AnimatedBg.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  import Logo from '$assets/logo.png';
+  import { reduceAnimations } from '@/userSettings';
+  import { fade } from 'svelte/transition';
+
+  //TODO: maybe dynamic background images fetched from ezpp?
+
+  const COUNT = 60;
+
+  function rand(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  const streaks = Array.from({ length: COUNT })
+    .map((_, i) => {
+      const depth = rand(0, 2);
+
+      const scale = 0.6 + depth * 0.8;
+      const speed = 0.4 + depth * 1.35;
+
+      const distance = 150;
+      const duration = distance / speed;
+
+      return {
+        width: rand(300, 320) * scale,
+        height: 32 * scale,
+        x: (i / COUNT) * 200 - 50,
+        y: ((i * 137.5) % 100) - 20,
+        opacity: 0.25 + depth * 0.65,
+        duration,
+        delay: rand(0, duration),
+        scale,
+      };
+    })
+    .sort((a, b) => a.scale - b.scale);
+</script>
+
+<div class="absolute bg blur-[2px]">
+  <div
+    class="relative h-full w-full from-0% to-90% bg-gradient-to-b from-transparent to-black z-50"
+  ></div>
+  {#each streaks as s, index (index)}
+    <div
+      class="streak drop-shadow-lg transition-opacity duration-1000"
+      style="
+        width:{s.width}px;
+        height:{s.height}px;
+        left:{s.x}%;
+        top:{s.y}%;
+        opacity:{$reduceAnimations ? 0 : s.opacity};
+        animation-duration:{s.duration}s;
+        animation-delay:-{s.delay}s;
+      "
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .bg {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    background: linear-gradient(
+      180deg,
+      var(--color-primary-300) 0%,
+      var(--color-primary-600) 40%,
+      var(--color-primary-900) 100%
+    );
+  }
+
+  .streak {
+    position: absolute;
+    background: #d6f3ff;
+    border-radius: 999px;
+    transform: rotate(-35deg);
+    animation: move linear infinite;
+    will-change: transform;
+  }
+
+  @keyframes move {
+    from {
+      transform: translate(-150vw, 150vh) rotate(-35deg);
+    }
+    to {
+      transform: translate(150vw, -150vh) rotate(-35deg);
+    }
+  }
+</style>

src/lib/components/ui/animated-bg/NyanCatBg.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import NyanCat from '$assets/nyan-cat.gif';
+  import { reduceAnimations } from '@/userSettings';
+  import { fade } from 'svelte/transition';
+
+  //TODO: maybe dynamic background images fetched from ezpp?
+
+  const COUNT = 18;
+
+  function rand(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  const streaks = Array.from({ length: COUNT })
+    .map((_, i) => {
+      const depth = rand(0, 2);
+
+      const scale = 0.6 + depth * 0.8;
+      const speed = 0.4 + depth * 1.35;
+
+      const distance = 150;
+      const duration = distance / speed;
+
+      return {
+        width: 290 * scale,
+        height: 140 * scale,
+        x: (i / COUNT) * 200 - 50,
+        y: ((i * 137.5) % 100) - 20,
+        opacity: 0.25 + depth * 0.65,
+        duration,
+        delay: rand(0, duration),
+        scale,
+      };
+    })
+    .sort((a, b) => a.scale - b.scale);
+</script>
+
+<div class="absolute bg blur-[2px]">
+  <div
+    class="relative h-full w-full from-0% to-90% bg-gradient-to-b from-transparent to-black z-50"
+  ></div>
+  {#each streaks as s, index (index)}
+    <div
+      class="streak drop-shadow-lg transition-opacity duration-1000"
+      style="
+        width:{s.width}px;
+        height:{s.height}px;
+        left:{s.x}%;
+        top:{s.y}%;
+        opacity:{$reduceAnimations ? 0 : s.opacity};
+        animation-duration:{s.duration}s;
+        animation-delay:-{s.delay}s;
+      "
+    >
+      <img
+        src={NyanCat}
+        alt="nyan cat"
+        class="w-full h-full"
+        style="opacity:{$reduceAnimations ? 0 : s.opacity};"
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .bg {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    background: linear-gradient(
+      180deg,
+      var(--color-blue-800) 0%,
+      var(--color-blue-600) 40%,
+      var(--color-blue-900) 100%
+    );
+  }
+
+  .streak {
+    position: absolute;
+    animation: move linear infinite;
+    will-change: transform;
+  }
+
+  @keyframes move {
+    from {
+      transform: translate(-250vw, 0);
+    }
+    to {
+      transform: translate(250vw, 0);
+    }
+  }
+</style>

src/lib/components/ui/download-button/DownloadButton.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import Ellipsis from 'lucide-svelte/icons/ellipsis';
+  import Play from 'lucide-svelte/icons/play';
+
+  const prop: {
+    downloading: boolean;
+    progress: number;
+    text: string;
+    subtext?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+  } = $props();
+
+  const radius = 16;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = $derived(circumference - (prop.progress / 100) * circumference);
+</script>
+
+<button
+  class="group flex items-center h-12 rounded-full bg-primary-300 disabled:bg-primary-300/70 shadow-lg shadow-primary/25 transition-all not-disabled:hover:shadow-primary/40 not-disabled:hover:brightness-110 not-disabled:active:scale-[0.98] cursor-pointer w-fit"
+  disabled={prop.disabled}
+  onclick={prop.onClick}
+>
+  <div class="relative size-12 shrink-0 flex items-center justify-center">
+    {#if prop.downloading}
+      {#if prop.progress === -1}
+        <svg class="absolute inset-0 animate-spin" viewBox="0 0 48 48">
+          <circle class="stroke-black/10" cx="24" cy="24" r={radius} fill="none" stroke-width="3" />
+          <circle
+            class="stroke-pink-950"
+            cx="24"
+            cy="24"
+            r={radius}
+            fill="none"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray={circumference}
+            stroke-dashoffset={circumference * 0.7}
+          />
+        </svg>
+      {:else}
+        <svg class="absolute inset-0 -rotate-90" viewBox="0 0 48 48">
+          <circle
+            cx="24"
+            cy="24"
+            r={radius}
+            fill="none"
+            stroke="rgba(0,0,0,0.2)"
+            stroke-width="3"
+          />
+          <circle
+            cx="24"
+            cy="24"
+            r={radius}
+            fill="none"
+            stroke="rgba(0,0,0,0.7)"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray={circumference}
+            stroke-dashoffset={strokeDashoffset}
+            class="transition-[stroke-dashoffset] duration-100"
+          />
+        </svg>
+      {/if}
+    {/if}
+    <div class="size-9 rounded-full bg-black/30 flex items-center justify-center relative z-10">
+      {#if prop.downloading}
+        {#if prop.progress === -1}
+          <Ellipsis class="size-4 text-primary-foreground fill-current animate-pulse" />
+        {:else}
+          <span class="text-[10px] font-bold text-primary-foreground">
+            {prop.progress.toFixed()}
+          </span>
+        {/if}
+      {:else}
+        <Play class="size-4 text-primary-foreground fill-current ml-0.5" />
+      {/if}
+    </div>
+  </div>
+
+  <div class="pr-6 pl-1 text-center w-52">
+    <p class="text-sm font-bold text-primary-foreground leading-tight">
+      {prop.text}
+    </p>
+    {#if prop.subtext}
+      <p class="text-[10px] text-primary-foreground/70 leading-tight">
+        {prop.subtext}
+      </p>
+    {/if}
+  </div>
+</button>

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-  import Check from 'lucide-svelte/icons/check';
-  import Minus from 'lucide-svelte/icons/minus';
+  import Check from '@lucide/svelte/icons/check';
+  import Minus from '@lucide/svelte/icons/minus';
   import { cn } from '$lib/utils.js';
   import type { Snippet } from 'svelte';
 

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
   bind:ref
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     inset && 'pl-8',
     className
   )}

src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
-  import Circle from 'lucide-svelte/icons/circle';
+  import Circle from '@lucide/svelte/icons/circle';
   import { cn } from '$lib/utils.js';
 
   let {

src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import ChevronRight from '@lucide/svelte/icons/chevron-right';
   import { cn } from '$lib/utils.js';
 
   let {

src/lib/components/ui/osu-cursor/OsuCursor.svelte

@@ -25,7 +25,7 @@
       const computed = getComputedStyle(el);
       if (
         ['button', 'a', 'input', 'select', 'textarea', 'label', 'option'].includes(tag) ||
-        (role && ['button', 'link', 'checkbox', 'combobox'].includes(role)) ||
+        (role && ['button', 'link', 'checkbox', 'combobox', 'menuitem', 'option'].includes(role)) ||
         computed.cursor === 'pointer'
       ) {
         return true;
@@ -85,7 +85,7 @@
     animate(cursor, {
       duration: smoothCursor ? $cursorSmoothness : 0,
       translateX: mouseX,
-      translateY: mouseY - 50,
+      translateY: mouseY,
       ease: (t: number) => (t - 1) ** 5 + 1,
     });
 

src/lib/components/ui/scroll-container/ScrollContainer.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+  // Props
+  let { children, class: className = '', topOffset = 0 } = $props();
+
+  let wrapper: HTMLDivElement;
+  let container: HTMLDivElement;
+  let thumb: HTMLDivElement;
+
+  // Thumb state
+  let thumbHeight = $state(20);
+  let thumbTop = $state(0);
+
+  // Drag state
+  let dragging = false;
+  let startY = 0;
+  let startScroll = 0;
+
+  /** Update thumb height & position */
+  function updateScrollbar() {
+    if (!container) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = container;
+    const scrollable = scrollHeight - clientHeight;
+
+    if (scrollable <= 0) {
+      thumbHeight = 0;
+      thumbTop = 0;
+      return;
+    }
+
+    thumbHeight = Math.max((clientHeight / scrollHeight) * clientHeight, 24);
+
+    const trackHeight = clientHeight - thumbHeight - topOffset;
+    thumbTop = (scrollTop / scrollable) * trackHeight;
+  }
+
+  /** Start dragging the thumb */
+  function startDrag(e: PointerEvent) {
+    dragging = true;
+    startY = e.clientY;
+    startScroll = container.scrollTop;
+    thumb.setPointerCapture(e.pointerId);
+  }
+
+  /** Drag the thumb */
+  function drag(e: PointerEvent) {
+    if (!dragging) return;
+
+    const delta = e.clientY - startY;
+    const { scrollHeight, clientHeight } = container;
+    const scrollable = scrollHeight - clientHeight;
+    const trackHeight = clientHeight - thumbHeight - topOffset;
+
+    container.scrollTop = startScroll + (delta / trackHeight) * scrollable;
+  }
+
+  /** End dragging */
+  function endDrag(e: PointerEvent) {
+    dragging = false;
+    thumb.releasePointerCapture(e.pointerId);
+  }
+
+  // Reactive effect to update scrollbar
+  $effect(() => updateScrollbar());
+
+  // ResizeObserver for dynamic content
+  $effect(() => {
+    if (!container) return;
+    const observer = new ResizeObserver(updateScrollbar);
+    observer.observe(container);
+    return () => observer.disconnect();
+  });
+</script>
+
+<div class="wrapper" bind:this={wrapper}>
+  <!-- Scrollable content -->
+  <div class={`content ${className}`} bind:this={container} onscroll={updateScrollbar}>
+    {@render children?.()}
+  </div>
+
+  <!-- Custom scrollbar -->
+  <div class="scrollbar" style="top: {topOffset}px;">
+    <div
+      class="thumb"
+      bind:this={thumb}
+      onpointerdown={startDrag}
+      onpointermove={drag}
+      onpointerup={endDrag}
+      onpointercancel={endDrag}
+      style="height:{thumbHeight}px; transform:translateY({thumbTop}px);"
+    ></div>
+  </div>
+</div>
+
+<style>
+  .wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  /* Scrollable content */
+  .content {
+    height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .content::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Edge */
+  }
+
+  /* Scrollbar track */
+  .scrollbar {
+    position: absolute;
+    right: 2px;
+    bottom: 0;
+    width: 12px;
+    background: var(--color-theme-950);
+    border-radius: 999px;
+  }
+
+  /* Thumb */
+  .thumb {
+    position: absolute;
+    width: 100%;
+    background: var(--color-theme-800);
+    border-radius: 999px;
+    cursor: grab;
+    transition: background 0.15s;
+  }
+
+  .thumb:active {
+    cursor: grabbing;
+    background: var(--color-theme-600);
+  }
+
+  .thumb:hover {
+    background: var(--color-theme-700);
+  }
+</style>

src/lib/components/ui/select/select-item.svelte

@@ -17,7 +17,7 @@
   bind:ref
   {value}
   class={cn(
-    'data-[highlighted]:bg-primary-800/30 data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+    'data-[highlighted]:bg-primary-300 data-[highlighted]:text-primary-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     className
   )}
   {...restProps}

src/lib/components/ui/sileo/sileo-toast.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { createElement } from 'react';
+  import { createRoot } from 'react-dom/client';
+  import type { SileoOptions } from 'sileo';
+
+  let props: SileoOptions = $props();
+  let rootEl: HTMLElement;
+
+  $effect(() => {
+    const root = createRoot(rootEl);
+
+    import('sileo').then(({ Toaster }) => {
+      const sileo = createElement(Toaster, { ...props });
+      root.render(sileo);
+    });
+
+    return () => root.unmount();
+  });
+</script>
+
+<div bind:this={rootEl}></div>

src/lib/components/ui/switch/index.ts

@@ -0,0 +1,7 @@
+import Root from './switch.svelte';
+
+export {
+  Root,
+  //
+  Root as Switch,
+};

src/lib/components/ui/switch/switch.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    checked = $bindable(false),
+    ...restProps
+  }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+</script>
+
+<SwitchPrimitive.Root
+  bind:ref
+  bind:checked
+  class={cn(
+    'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+>
+  <SwitchPrimitive.Thumb
+    class={cn(
+      'bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+    )}
+  />
+</SwitchPrimitive.Root>

src/lib/components/ui/titlebar/titlebar.svelte

@@ -8,6 +8,7 @@
   import { onMount } from 'svelte';
   import { launcherVersion } from '@/global';
   import Badge from '../badge/badge.svelte';
+  import { reduceAnimations } from '@/userSettings';
 
   onMount(() => {
     const appWindow = getCurrentWindow();
@@ -19,32 +20,40 @@
   });
 </script>
 
-<div data-tauri-drag-region class="titlebar z-[60] border-b border-theme-800/90">
-  <div
-    class="mr-auto ms-2 flex flex-row gap-2 items-center text-[1.05rem] font-semibold pointer-events-none"
-  >
-    <img src={Logo} alt="EZPP Launcher Logo" class="h-11 w-11 inline-block" />
-    <span>EZPPLauncher</span>
-    <Badge class="!text-[0.6rem] py-[0.5px] bg-primary-500 hover:bg-primary-500"
-      >{$launcherVersion}</Badge
-    >
+<div data-tauri-drag-region class="titlebar z-[100]">
+  <div class="relative flex items-center justify-center p-1 group" id="titlebar-minimize">
+    <div
+      class="absolute inset-0 bg-background rounded
+           scale-50 opacity-0
+          group-hover:opacity-100
+           group-hover:scale-100
+           {$reduceAnimations ? '' : 'transition-all duration-200 ease-out'} 
+           origin-center"
+    ></div>
+
+    <Minimize class="z-10 pointer-events-none" size={14} />
   </div>
-  <div class="titlebar-button rounded-lg transition-colors duration-75" id="titlebar-minimize">
-    <Minimize size={18} />
-  </div>
-  <div class="titlebar-button close rounded-lg transition-colors duration-75" id="titlebar-close">
-    <Close size={18} />
+  <div class="relative flex items-center justify-center p-1 group" id="titlebar-close">
+    <div
+      class="absolute inset-0 bg-red-500 rounded
+           scale-50 opacity-0
+            group-hover:opacity-100
+           group-hover:scale-100
+           {$reduceAnimations ? '' : 'transition-all duration-200 ease-out'} 
+           origin-center"
+    ></div>
+
+    <Close class="z-10 pointer-events-none" size={14} />
   </div>
 </div>
 
 <style lang="scss">
   .titlebar {
-    height: 50px;
-    /* background: #040612; */
+    height: 35px;
     user-select: none;
     display: flex;
     justify-content: flex-end;
-    gap: 10px;
+    gap: 5px;
     align-items: center;
     position: fixed;
     top: 0;
@@ -52,21 +61,6 @@
     right: 0;
     margin-bottom: 10px;
     padding-right: 5px;
-    pointer-events: all !important;
-  }
-  .titlebar-button {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 40px;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-  .titlebar-button:hover {
-    &.close {
-      background: #c22e2e;
-    }
-    background: #2d3049;
+    pointer-events: auto;
   }
 </style>

src/lib/config.ts

@@ -44,8 +44,7 @@ export class Config {
         this.encrypt && this.crypto ? this.crypto.decrypt(fileStream) : fileStream
       ) as Record<string, unknown>;
       this.config = decryptedJSON;
-    } catch (err) {
-      console.log(err);
+    } catch {
       this.config = {};
       await this.save();
     }
@@ -65,13 +64,11 @@ export class Config {
   }
 
   value(key: string) {
-    console.log('Accessing config key:', key, this.config[key]);
     return {
       set: <T>(val: T) => {
         this.config[key] = val;
       },
       exists: () => {
-        console.log('Checking existence of key:', key, this.config[key] !== undefined);
         return this.config[key] !== undefined;
       },
       get: <T>(fallback: T): T => {

src/lib/displayUtils.ts

@@ -8,7 +8,6 @@ export function estimateRefreshRate(): Promise<number> {
       frames++;
 
       if (now - last >= 1000) {
-        console.log(`Estimated Refresh Rate: ${frames - 2} FPS`);
         resolve(frames - 2);
       } else {
         requestAnimationFrame(loop);

src/lib/global.ts

@@ -24,6 +24,7 @@ export const currentLoadingInfo = writable<string>('Initializing...');
 export const firstStartup = writable<boolean>(false);
 
 export const launching = writable<boolean>(false);
+export const nyanCatSong = writable<HTMLAudioElement | undefined>(undefined);
 
 export const serverPing = writable<number | undefined>(undefined);
 export const serverConnectionFails = writable(0);
@@ -31,7 +32,8 @@ export const serverConnectionFails = writable(0);
 export const onlineFriends = writable<number | undefined>(undefined);
 
 export const beatmapSets = writable<number | undefined>(undefined);
-export const skins = writable<number | undefined>(undefined);
+export const skinsCount = writable<number | undefined>(undefined);
+export const skins = writable<{ name: string; author: string | undefined; modified: number }[]>([]);
 
 export const osuStream = writable<string | undefined>(undefined);
 export const osuBuild = writable<string | undefined>(undefined);

src/lib/osuUtil.ts

@@ -3,7 +3,19 @@ import type { UpdateFile, UpdateStatus } from './types';
 import { listen } from '@tauri-apps/api/event';
 import { betterFetch } from '@better-fetch/fetch';
 
-const updateUrl = 'https://next.ez-pp.farm/api/ezpplauncher';
+const updateUrl = 'https://ez-pp.farm/api/ezpplauncher';
+
+export function normalizeOsuName(name: string): string {
+  return (
+    name
+      .trim()
+      // Remove leading symbols/spaces
+      .replace(/^[^a-zA-Z0-9]+/, '')
+      // Normalize spacing
+      .replace(/\s+/g, ' ')
+      .toLowerCase()
+  );
+}
 
 export const getHWID = async () => {
   const hwid = await invoke('get_hwid');
@@ -55,13 +67,6 @@ export const getBeatmapSetsCount = async (folder: string) => {
   return typeof result === 'number' ? result : 0;
 };
 
-export const getSkinsCount = async (folder: string) => {
-  const result = await invoke('get_skins_count', {
-    folder,
-  });
-  return typeof result === 'number' ? result : 0;
-};
-
 export const getSkin = async (folder: string) => {
   const result = await invoke('get_osu_skin', {
     folder,
@@ -82,7 +87,6 @@ export const getEZPPLauncherStreams = async () => {
   if (!resp.error) {
     return resp.data.streams;
   }
-
   return undefined;
 };
 
@@ -152,3 +156,8 @@ export const downloadUpdate = async (
   }
 };
 export const installUpdate = async () => await invoke('install_ezpp_launcher_update');
+export const getSkins = async (folder: string) =>
+  await invoke<{ name: string; author: string | undefined; modified: number }[] | undefined>(
+    'get_skins',
+    { folder }
+  );

src/lib/utils.ts

@@ -44,7 +44,6 @@ export const formatTimeReadable = (initialSeconds: number) => {
 };
 
 export const releaseStreamToReadable = (releaseStream: string) => {
-  console.log(releaseStream.replaceAll(' ', '').toLowerCase());
   if (releaseStream.replaceAll(' ', '').toLowerCase() === 'cuttingedge') return 'Cutting Edge';
   return 'Stable';
 };

src/routes/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Logo from '$assets/logo.png';
+  import NyanCatSong from '$assets/nyan-cat.mp3';
   import '../app.css';
 
   import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
@@ -9,6 +10,7 @@
     discordPresence,
     firstStartup,
     launcherVersion,
+    nyanCatSong,
     platform,
     presenceLoading,
     setupValues,
@@ -25,18 +27,23 @@
     userSettings,
   } from '@/userSettings';
   import { Buffer } from 'buffer';
-  import { Toaster } from '@/components/ui/sonner';
+  import SileoToast from '@/components/ui/sileo/sileo-toast.svelte';
   import { userAuth } from '@/userAuthentication';
   import { encryptString, exit, getLauncherVersion, getPlatform } from '@/osuUtil';
   import Button from '@/components/ui/button/button.svelte';
   import * as presence from '@/presence';
+  import { fade } from 'svelte/transition';
 
   import '@fontsource/sora';
   import '@fontsource/space-mono';
+  import AnimatedBg from '@/components/ui/animated-bg/AnimatedBg.svelte';
+  import NyanCatBg from '@/components/ui/animated-bg/NyanCatBg.svelte';
+  import { sileo } from 'sileo';
 
   let { children } = $props();
 
   let unsupported_platform = $state<boolean>(false);
+  let secret_enabled = $state<boolean>(false);
 
   function disableReload() {
     if (window.location.hostname !== 'tauri.localhost') {
@@ -86,6 +93,19 @@
     );
   }
 
+  let konami_code = [
+    'ArrowUp',
+    'ArrowUp',
+    'ArrowDown',
+    'ArrowDown',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowLeft',
+    'ArrowRight',
+    'b',
+    'a',
+  ];
+
   onMount(async () => {
     window.Buffer = Buffer;
 
@@ -97,6 +117,107 @@
     const isFirstStartup = await $userSettings.init();
     $userAuth.init();
 
+    document.addEventListener('keydown', (e) => {
+      if (e.key.toLowerCase() === konami_code[0].toLowerCase()) {
+        konami_code.shift();
+        if (konami_code.length === 0) {
+          if (secret_enabled) {
+            sileo.success({
+              title: 'Cheatcode deactivated!',
+              duration: 3000,
+              fill: '#181825',
+              styles: {
+                description: 'text-center!',
+              },
+            });
+            const audio = $nyanCatSong;
+            if (audio) {
+              const fadeOutDuration = 2000; // 2 seconds
+              const fadeOutSteps = 20;
+              const fadeOutStepTime = fadeOutDuration / fadeOutSteps;
+              const volumeStep = audio.volume / fadeOutSteps;
+
+              const fadeOutInterval = setInterval(() => {
+                if (audio.volume > 0) {
+                  audio.volume = Math.max(0, audio.volume - volumeStep);
+                } else {
+                  audio.pause();
+                  clearInterval(fadeOutInterval);
+                }
+              }, fadeOutStepTime);
+            }
+            nyanCatSong.set(undefined);
+            secret_enabled = false;
+            konami_code = [
+              'ArrowUp',
+              'ArrowUp',
+              'ArrowDown',
+              'ArrowDown',
+              'ArrowLeft',
+              'ArrowRight',
+              'ArrowLeft',
+              'ArrowRight',
+              'b',
+              'a',
+            ];
+            return;
+          }
+          sileo.success({
+            title: 'Cheatcode activated!',
+            duration: 3000,
+            fill: '#181825',
+            styles: {
+              description: 'text-center!',
+            },
+          });
+          const audio = new Audio(NyanCatSong);
+          audio.loop = true;
+          audio.volume = 0;
+          audio.play();
+          const fadeInDuration = 2000; // 2 seconds
+          const fadeInSteps = 20;
+          const fadeInStepTime = fadeInDuration / fadeInSteps;
+          const volumeStep = (1 - audio.volume) / fadeInSteps;
+
+          const fadeInInterval = setInterval(() => {
+            if (audio.volume < 0.3) {
+              audio.volume = Math.min(0.3, audio.volume + volumeStep);
+            } else {
+              clearInterval(fadeInInterval);
+            }
+          }, fadeInStepTime);
+          nyanCatSong.set(audio);
+
+          secret_enabled = true;
+          konami_code = [
+            'ArrowUp',
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight',
+            'ArrowLeft',
+            'ArrowRight',
+            'b',
+            'a',
+          ];
+        }
+      } else {
+        konami_code = [
+          'ArrowUp',
+          'ArrowUp',
+          'ArrowDown',
+          'ArrowDown',
+          'ArrowLeft',
+          'ArrowRight',
+          'ArrowLeft',
+          'ArrowRight',
+          'b',
+          'a',
+        ];
+      }
+    });
+
     currentLoadingInfo.set('Loading config...');
     const config_patching = $userSettings.value('patching');
     const config_custom_cursor = $userSettings.value('custom_cursor');
@@ -150,7 +271,7 @@
   <OsuCursor smoothCursor={$cursorSmoothening} />
 {/if}
 
-<Toaster richColors closeButton />
+<SileoToast position="top-center" fill="black" />
 
 <Titlebar />
 
@@ -178,5 +299,16 @@
 </AlertDialog.Root>
 
 <main>
+  <div class="opacity-30">
+    {#if secret_enabled}
+      <div transition:fade={{ duration: $reduceAnimations ? 0 : 500 }}>
+        <NyanCatBg />
+      </div>
+    {:else}
+      <div transition:fade={{ duration: $reduceAnimations ? 0 : 500 }}>
+        <AnimatedBg />
+      </div>
+    {/if}
+  </div>
   {@render children()}
 </main>

src/screens/Loading.svelte

@@ -14,6 +14,7 @@
     osuBuild,
     osuStream,
     skins,
+    skinsCount,
   } from '@/global';
   import {
     cursorSmoothness,
@@ -28,18 +29,19 @@
   import Launch from './Launch.svelte';
   import { currentUser, userAuth } from '@/userAuthentication';
   import { ezppfarm } from '@/api/ezpp';
-  import { toast } from 'svelte-sonner';
   import { currentUserInfo } from '@/data';
   import {
     getBeatmapSetsCount,
     getEZPPLauncherStreams,
     getReleaseStream,
     getSkin,
-    getSkinsCount,
+    getSkins,
     getVersion,
     isValidOsuFolder,
   } from '@/osuUtil';
   import { git } from '@/api/git';
+  import { sileo } from 'sileo';
+  import type { EZPPUser } from '@/types';
 
   let ezppLogo: HTMLImageElement;
   let spinnerCircle: SVGCircleElement;
@@ -84,25 +86,32 @@
 
     const username = $userAuth.value('username').get('');
     const password = $userAuth.value('password').get('');
-    if (username.length > 0 && password.length > 0) {
+
+    const shouldLogin = username.length > 0 && password.length > 0;
+    let userLoginResult: { message: string; user?: EZPPUser } = {
+      message: 'An unknown error occured!',
+    };
+
+    if (shouldLogin) {
       currentLoadingInfo.set('Logging in...');
       try {
         const loginResult = await ezppfarm.login(username, password);
         if (loginResult && loginResult.user) {
-          toast.success('Login successful!', {
-            description: `Welcome back, ${loginResult.user.name}!`,
-          });
+          userLoginResult = {
+            message: `Welcome back, ${loginResult.user.name}!`,
+            user: loginResult.user,
+          };
 
           currentUser.set(loginResult.user);
         } else {
-          toast.error('Login failed!', {
-            description: 'Please check your username and password.',
-          });
+          userLoginResult = {
+            message: 'Please check your username and password.',
+          };
         }
       } catch {
-        toast.error('Server error occurred during login.', {
-          description: 'There was an issue connecting to the server. Please try again later.',
-        });
+        userLoginResult = {
+          message: 'There was an issue connecting to the server. Please try again later.',
+        };
       }
     }
     if ($currentUser) {
@@ -123,8 +132,13 @@
         osuInstallationPath.set('');
         $userSettings.value('osu_installation_path').del();
         await $userSettings.save();
-        toast.error('Oops...', {
+        sileo.error({
+          title: 'Hmm...',
           description: 'Your previously set osu! installation path seems to be invalid.',
+          fill: '#181825',
+          styles: {
+            description: 'text-center!',
+          },
         });
       } else {
         currentLoadingInfo.set('Getting osu version...');
@@ -138,8 +152,15 @@
         if (beatmapSetCount !== null) beatmapSets.set(beatmapSetCount);
 
         currentLoadingInfo.set('Counting skins...');
-        const skinCount = await getSkinsCount($osuInstallationPath);
-        if (skinCount !== null) skins.set(skinCount);
+        const skins_list = await getSkins($osuInstallationPath);
+        console.log(skins_list);
+        if (skins_list) {
+          skins.set(skins_list);
+          skinsCount.set(skins_list.length);
+        } else {
+          skinsCount.set(0);
+        }
+
         const skin: string = await getSkin($osuInstallationPath);
         currentSkin.set(skin);
       }
@@ -174,7 +195,31 @@
     });
     setTimeout(() => {
       if ($firstStartup) currentView.set(SetupWizard);
-      else currentView.set(Launch);
+      else {
+        currentView.set(Launch);
+        if (shouldLogin) {
+          if (userLoginResult.user) {
+            sileo.success({
+              title: 'Login successful!',
+              description: userLoginResult.message,
+              fill: '#181825',
+              styles: {
+                description: 'text-center!',
+              },
+              duration: 2500,
+            });
+          } else {
+            sileo.error({
+              title: 'Login failed!',
+              description: userLoginResult.message,
+              fill: '#181825',
+              styles: {
+                description: 'text-center!',
+              },
+            });
+          }
+        }
+      }
     }, 250);
   };
 
@@ -202,7 +247,7 @@
   });
 </script>
 
-<div class="flex flex-col items-center justify-center mt-[50px] h-[calc(100vh-50px)] w-full">
+<div class="flex flex-col items-center justify-center h-[100vh] w-full">
   <div class="relative w-80 h-80 flex items-center justify-center">
     <svg
       class="absolute top-0 left-0 w-full h-full animate-spin"

src/screens/Login.svelte

@@ -1,127 +0,0 @@
-<script lang="ts">
-  import Logo from '$assets/logo.png';
-  import { ezppfarm } from '@/api/ezpp';
-  import Button from '@/components/ui/button/button.svelte';
-  import Input from '@/components/ui/input/input.svelte';
-  import Label from '@/components/ui/label/label.svelte';
-  import { currentView } from '@/global';
-  import { currentUser, userAuth } from '@/userAuthentication';
-  import { animate } from 'animejs';
-  import { LoaderCircle } from 'lucide-svelte';
-  import { toast } from 'svelte-sonner';
-  import Launch from './Launch.svelte';
-  import { currentUserInfo } from '@/data';
-  import { preferredMode, preferredType } from '@/userSettings';
-
-  let username = $state('');
-  let password = $state('');
-  let isLoading = $state(false);
-
-  let ezppLogo: HTMLImageElement | undefined = $state(undefined);
-
-  const logo_mouseenter = () => {
-    if (ezppLogo) {
-      animate(ezppLogo, {
-        duration: 700,
-        scale: 1.2,
-        ease: (t: number) => Math.pow(2, -5 * t) * Math.sin((t - 0.075) * 20.94) + 1 - 0.0005 * t,
-      });
-    }
-  };
-
-  const logo_mouseleave = () => {
-    if (ezppLogo) {
-      animate(ezppLogo, {
-        duration: 700,
-        scale: 1,
-        ease: (t: number) => (t - 1) ** 7 + 1,
-      });
-    }
-  };
-
-  const performLogin = async () => {
-    isLoading = true;
-
-    try {
-      const loginResult = await ezppfarm.login(username, password);
-      if (loginResult && loginResult.user) {
-        toast.success('Login successful!', {
-          description: `Welcome back, ${loginResult.user.name}!`,
-        });
-
-        $userAuth.value('username').set(username);
-        $userAuth.value('password').set(password);
-        await $userAuth.save();
-
-        currentUser.set(loginResult.user);
-        currentView.set(Launch);
-      } else {
-        toast.error('Login failed!', {
-          description: 'Please check your username and password.',
-        });
-        isLoading = false;
-      }
-    } catch {
-      toast.error('Server error occurred during login.', {
-        description: 'There was an issue connecting to the server. Please try again later.',
-      });
-      isLoading = false;
-    }
-
-    if ($currentUser) {
-      const userInfo = await ezppfarm.getUserInfo($currentUser.id);
-      if (userInfo) {
-        currentUserInfo.set(userInfo.player);
-
-        preferredMode.set(userInfo.player.info.preferred_mode);
-        preferredType.set(userInfo.player.info.preferred_type);
-      }
-    }
-  };
-</script>
-
-<div class="mt-[50px] h-[calc(100vh-50px)] w-full">
-  <div class="w-full h-full flex flex-col items-center justify-center">
-    <img
-      src={Logo}
-      alt="EZPPLauncher Logo"
-      class="w-52 h-52 mb-2"
-      bind:this={ezppLogo}
-      onmouseenter={logo_mouseenter}
-      onmouseleave={logo_mouseleave}
-    />
-    <form onsubmit={performLogin} class="w-full max-w-sm">
-      <div class="mb-4">
-        <Label for="username" class="block text-sm font-medium">Username</Label>
-        <Input
-          class="mt-4 w-full bg-theme-900 border-theme-800"
-          type="text"
-          id="username"
-          bind:value={username}
-          disabled={isLoading}
-          autocomplete="off"
-          autocorrect="off"
-        />
-      </div>
-      <div class="mb-4">
-        <Label for="password" class="block text-sm font-medium">Password</Label>
-        <Input
-          class="mt-4 w-full bg-theme-900 border-theme-800"
-          type="password"
-          id="password"
-          bind:value={password}
-          disabled={isLoading}
-          autocomplete="off"
-          autocorrect="off"
-        />
-      </div>
-      <Button class="w-full" type="submit" disabled={isLoading}>
-        {#if isLoading}
-          <LoaderCircle class="animate-spin" />
-        {:else}
-          Login
-        {/if}
-      </Button>
-    </form>
-  </div>
-</div>

src/screens/SetupWizard.svelte

@@ -5,7 +5,7 @@
   import { animate } from 'animejs';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
-  import { Check, CheckCircle, CircleOff, Settings2 } from 'lucide-svelte';
+  import { Check, CircleCheckBig, CircleOff, LoaderCircle } from 'lucide-svelte';
   import { open } from '@tauri-apps/plugin-dialog';
   import Checkbox from '@/components/ui/checkbox/checkbox.svelte';
   import {
@@ -17,7 +17,18 @@
     userSettings,
   } from '@/userSettings';
   import Label from '@/components/ui/label/label.svelte';
-  import { beatmapSets, currentSkin, currentView, osuBuild, osuStream, skins } from '@/global';
+  import {
+    beatmapSets,
+    currentSkin,
+    currentView,
+    discordPresence,
+    osuBuild,
+    osuStream,
+    platform,
+    presenceLoading,
+    skins,
+    skinsCount,
+  } from '@/global';
   import Launch from './Launch.svelte';
   import Confetti from 'svelte-confetti';
   import {
@@ -25,7 +36,7 @@
     getBeatmapSetsCount,
     getReleaseStream,
     getSkin,
-    getSkinsCount,
+    getSkins,
     getVersion,
     isValidOsuFolder,
   } from '@/osuUtil';
@@ -92,9 +103,12 @@
       beatmapSets.set(beatmapSetCount);
     }
 
-    const skinsCount: number | null = await getSkinsCount(osuInstallPath);
-    if (skinsCount) {
-      skins.set(skinsCount);
+    const skins_list = await getSkins(osuInstallPath);
+    if (skins_list) {
+      skins.set(skins_list);
+      skinsCount.set(skins_list.length);
+    } else {
+      skinsCount.set(0);
     }
 
     const skin: string = await getSkin(osuInstallPath);
@@ -110,6 +124,7 @@
 
   onMount(async () => {
     const osuPath = await autoDetectOsuInstallFolder();
+    console.log(osuPath);
     if (osuPath) {
       osuInstallPath = osuPath;
       autoDetectedOsuPath = true;
@@ -119,7 +134,7 @@
 </script>
 
 {#if wizardFinished}
-  <div class="relative flex flex-col items-center justify-center mt-[50px] h-[calc(100vh-50px)]">
+  <div class="relative flex flex-col items-center justify-center h-[100vh] z-50">
     <div class="absolute h-fit w-fit top-1/2 left-1/2">
       <Confetti amount={200} y={[-1, 1.5]} x={[-2.3, 2.3]} colorArray={['#C6A0F3']} />
     </div>
@@ -128,15 +143,17 @@
     <Button class="mt-4" onclick={saveConfig}>Finish</Button>
   </div>
 {:else}
-  <div class="grid grid-cols-[0.41fr_1fr] mt-[50px] h-[calc(100vh-50px)]">
-    <div class="w-full h-full border-r border-theme-800/90 flex flex-col gap-6 p-3">
+  <div class="grid grid-cols-[0.41fr_1fr] h-[100vh] z-50">
+    <div
+      class="w-full h-full border-r border-black/40 bg-black/40 backdrop-blur-md flex flex-col gap-6 p-3 z-50"
+    >
       {#each steps as step, i (step)}
         <div
           class="flex flex-row items-center gap-2 border {selectedStep === i + 1
-            ? 'border-primary-800/30 bg-primary-900/30'
+            ? 'border-primary-600/30 bg-primary-700/30'
             : selectedStep > i
               ? 'border-green-800/30 bg-green-900/30'
-              : 'border-theme-800 bg-theme-900'} rounded-lg p-2 transition-all"
+              : 'border-black/30 bg-black/30'} rounded-lg p-2 transition-all"
         >
           <div
             class="flex flex-col items-center justify-center h-8 w-8 border-[2px] {selectedStep >
@@ -160,10 +177,10 @@
         </div>
       {/each}
     </div>
-    <div class="flex flex-col gap-6 w-full h-full bg-theme-900/40 p-6">
+    <div class="flex flex-col gap-6 w-full h-full backdrop-blur-md p-6 z-50">
       {#if selectedStep === 1}
         <div
-          class="my-auto h-full w-full bg-theme-800/15 rounded-lg border border-900/60 p-6 flex flex-col items-center justify-center"
+          class="my-auto h-full w-full bg-black/40 rounded-lg border border-black/40 p-6 mt-5 flex flex-col items-center justify-center"
           in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <img
@@ -178,13 +195,13 @@
           <p class="text-muted-foreground mt-2">
             This setup wizard will guide you through the initial setup of EZPPLauncher.
           </p>
-          <div class="bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4">
+          <div class="bg-red-800 border border-red-900 text-red-200 p-4 rounded-lg mt-4">
             Please make sure you have osu! installed on your system before proceeding.
           </div>
         </div>
       {:else if selectedStep === 2}
         <div
-          class="my-auto h-full w-full bg-theme-800/15 rounded-lg border border-900/60 p-6 flex flex-col items-center justify-center"
+          class="my-auto h-full w-full bg-black/40 rounded-lg border border-black/40 p-6 mt-5 flex flex-col items-center justify-center"
           in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <h1 class="text-3xl font-semibold">Locate your osu! Installation</h1>
@@ -207,14 +224,14 @@
           {#if !manualSelect}
             {#if autoDetectedOsuPath}
               <div
-                class="flex flex-row gap-3 bg-green-800/20 border border-green-900/20 text-green-500 p-4 rounded-lg mt-4"
+                class="flex flex-row gap-3 bg-green-800 border border-green-900 text-green-500 p-4 rounded-lg mt-4"
               >
-                <CheckCircle />
+                <CircleCheckBig />
                 <span>Auto-detected osu! installation path! Please check if its correct!</span>
               </div>
             {:else}
               <div
-                class="flex flex-row gap-3 bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4"
+                class="flex flex-row gap-3 bg-red-800 border border-red-900 text-red-500 p-4 rounded-lg mt-4"
               >
                 <CircleOff />
                 <span>Could not auto-detect osu! installation path. Please select it manually.</span
@@ -223,14 +240,14 @@
             {/if}
           {:else if manualSelectValid}
             <div
-              class="flex flex-row gap-3 bg-green-800/20 border border-green-900/20 text-green-500 p-4 rounded-lg mt-4"
+              class="flex flex-row gap-3 bg-green-800 border border-green-900 text-green-500 p-4 rounded-lg mt-4"
             >
-              <CheckCircle />
+              <CircleCheckBig />
               <span>Selected osu! installation path is valid!</span>
             </div>
           {:else}
             <div
-              class="flex flex-row gap-3 bg-red-800/20 border border-red-900/20 text-red-500 p-4 rounded-lg mt-4"
+              class="flex flex-row gap-3 bg-red-800 border border-red-900 text-red-500 p-4 rounded-lg mt-4"
             >
               <CircleOff />
               <span
@@ -241,80 +258,108 @@
           {/if}
         </div>
       {:else if selectedStep === 3}
-        <div
-          class="bg-theme-900/90 flex flex-col justify-center gap-3 border border-theme-800/90 rounded-lg"
-          in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
-        >
-          <div class="flex flex-row items-center gap-3 font-semibold text-xl px-3 pt-3">
-            <Settings2 /> EZPPLauncher Settings
-          </div>
+        <div class="h-full w-full flex items-center justify-center">
           <div
-            class="grid grid-cols-[1fr_auto] gap-y-5 items-center border-t border-theme-800 py-3 px-6"
+            class="bg-black/40 backdrop-blur-sm py-8 px-8 rounded-lg"
+            in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
           >
-            <div class="flex flex-col">
-              <Label class="text-sm" for="setting-custom-cursor">Patching</Label>
-              <div class="text-muted-foreground text-xs">Shows misses in Relax and Autopilot</div>
-            </div>
-            <Checkbox
-              id="setting-custom-cursor"
-              checked={$patch}
-              onCheckedChange={async (e) => {
-                patch.set(e);
-                $userSettings.save();
-              }}
-              class="flex items-center justify-center w-5 h-5"
-            ></Checkbox>
+            <div class="grid grid-cols-[1fr_auto] gap-y-5 items-center px-6">
+              <div class="flex flex-col">
+                <Label class="text-sm" for="setting-patch">Patching</Label>
+                <div class="text-muted-foreground text-xs">
+                  Shows misses in Relax and Autopilot {#if $platform !== 'windows'}<span
+                      class="text-red-500 bg-red-800/20 border border-red-600/20 p-0.5 mx-1 px-2 rounded-lg !text-[0.55rem]"
+                      >currently only on windows!</span
+                    >
+                  {/if}
+                </div>
+              </div>
+              <Checkbox
+                id="setting-patch"
+                checked={$platform === 'windows' ? $patch : false}
+                disabled={$platform !== 'windows'}
+                onCheckedChange={async (e) => {
+                  patch.set(e);
+                  $userSettings.save();
+                }}
+                class="flex items-center justify-center w-5 h-5"
+              ></Checkbox>
 
-            <div class="flex flex-col">
-              <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
-              <div class="text-muted-foreground text-xs">
-                Enable a custom cursor in the Launcher like in the lazer build of osu!
+              <div class="flex flex-col">
+                <Label class="text-sm" for="setting-custom-cursor">Lazer-Style Cursor</Label>
+                <div class="text-muted-foreground text-xs">
+                  Enable a custom cursor in the Launcher like in the lazer build of osu!
+                </div>
+              </div>
+              <Checkbox
+                id="setting-custom-cursor"
+                checked={$customCursor}
+                onCheckedChange={async (e) => {
+                  if (!e) {
+                    cursorSmoothening.set(false);
+                  }
+                  customCursor.set(e);
+
+                  $userSettings.save();
+                }}
+                class="flex items-center justify-center w-5 h-5"
+              ></Checkbox>
+
+              <div class="flex flex-col">
+                <Label class="text-sm" for="setting-cursor-smoothening">Cursor Smoothening</Label>
+                <div class="text-muted-foreground text-xs">
+                  Makes the custom cursor movement smoother.
+                </div>
+              </div>
+              <Checkbox
+                id="setting-cursor-smoothening"
+                checked={$cursorSmoothening}
+                onCheckedChange={async (e) => {
+                  if (!$customCursor) return;
+                  cursorSmoothening.set(e);
+                  $userSettings.save();
+                }}
+                disabled={!$customCursor}
+                class="flex items-center justify-center w-5 h-5"
+              ></Checkbox>
+
+              <div class="flex flex-col">
+                <Label class="text-sm" for="setting-reduce-animations">Reduce Animations</Label>
+                <div class="text-muted-foreground text-xs">
+                  Disables some animations in the Launcher to improve performance on low-end
+                  devices.
+                </div>
+              </div>
+              <Checkbox
+                id="setting-reduce-animations"
+                checked={$reduceAnimations}
+                onCheckedChange={async (e) => {
+                  reduceAnimations.set(e);
+                  $userSettings.save();
+                }}
+                class="flex items-center justify-center w-5 h-5"
+              ></Checkbox>
+
+              <div class="flex flex-col">
+                <Label class="text-sm" for="setting-rich-presence">Discord Rich Presence</Label>
+                <div class="text-muted-foreground text-xs">
+                  Let other discord users show what you are doing right now 👀
+                </div>
+              </div>
+              <div class="relative">
+                {#if $presenceLoading}
+                  <div class="-left-8 absolute" transition:fade>
+                    <LoaderCircle class="animate-spin" />
+                  </div>
+                {/if}
+                <Checkbox
+                  id="setting-rich-presence"
+                  bind:checked={$discordPresence}
+                  disabled={$presenceLoading}
+                  class="flex items-center justify-center w-5 h-5"
+                ></Checkbox>
               </div>
             </div>
-            <Checkbox
-              id="setting-custom-cursor"
-              checked={$customCursor}
-              onCheckedChange={async (e) => {
-                if (!e) {
-                  cursorSmoothening.set(false);
-                }
-                customCursor.set(e);
-              }}
-              class="flex items-center justify-center w-5 h-5"
-            ></Checkbox>
-
-            <div class="flex flex-col">
-              <Label class="text-sm" for="setting-cursor-smoothening">Cursor Smoothening</Label>
-              <div class="text-muted-foreground text-xs">
-                Makes the custom cursor movement smoother.
-              </div>
-            </div>
-            <Checkbox
-              id="setting-cursor-smoothening"
-              checked={$cursorSmoothening}
-              onCheckedChange={async (e) => {
-                if (!$customCursor) return;
-                cursorSmoothening.set(e);
-              }}
-              disabled={!$customCursor}
-              class="flex items-center justify-center w-5 h-5"
-            ></Checkbox>
-
-            <div class="flex flex-col">
-              <Label class="text-sm" for="setting-cursor-smoothening">Reduce Animations</Label>
-              <div class="text-muted-foreground text-xs">
-                Disables some animations in the Launcher to improve performance on low-end devices.
-              </div>
-            </div>
-            <Checkbox
-              id="setting-cursor-smoothening"
-              checked={$reduceAnimations}
-              onCheckedChange={async (e) => {
-                reduceAnimations.set(e);
-              }}
-              disabled={!$customCursor}
-              class="flex items-center justify-center w-5 h-5"
-            ></Checkbox>
           </div>
         </div>
       {/if}