fix: Setup Wizard not working

package.json

@@ -32,7 +32,7 @@
     "animejs": "^4.1.3",
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
-    "lucide-svelte": "^0.562.0",
+    "lucide-svelte": "^0.575.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-to-webcomponent": "^2.0.1",
@@ -45,7 +45,7 @@
     "@eslint/compat": "^2.0.0",
     "@eslint/js": "^9.35.0",
     "@iarna/toml": "2.2.5",
-    "@lucide/svelte": "^0.562.0",
+    "@lucide/svelte": "^0.575.0",
     "@sveltejs/adapter-static": "^3.0.9",
     "@sveltejs/kit": "^2.37.1",
     "@sveltejs/vite-plugin-svelte": "^6.1.4",

src-tauri/Cargo.lock

@@ -1007,7 +1007,7 @@ dependencies = [
 
 [[package]]
 name = "ezpplauncher"
-version = "3.1.0"
+version = "3.1.1"
 dependencies = [
  "base64 0.22.1",
  "discord-rich-presence",

src-tauri/src/commands.rs

@@ -77,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 = [
@@ -129,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) {

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Logo from '$assets/logo.png';
+
   //TODO: maybe dynamic background images fetched from ezpp?
 
   const COUNT = 60;
@@ -7,26 +9,28 @@
     return Math.random() * (max - min) + min;
   }
 
-  const streaks = Array.from({ length: COUNT }).map((_, i) => {
-    const depth = rand(0, 2);
+  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 scale = 0.6 + depth * 0.8;
+      const speed = 0.4 + depth * 1.35;
 
-    const distance = 150;
-    const duration = distance / speed;
+      const distance = 150;
+      const duration = distance / speed;
 
-    return {
-      width: rand(180, 320) * scale,
-      height: rand(16, 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,
-    };
-  });
+      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]">
@@ -54,7 +58,12 @@
     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%);
+    background: linear-gradient(
+      180deg,
+      var(--color-primary-300) 0%,
+      var(--color-primary-600) 40%,
+      var(--color-primary-900) 100%
+    );
   }
 
   .streak {

src/screens/Launch.svelte

@@ -882,7 +882,10 @@
       class="flex size-12 items-center gap-2 border {selectedView === 'home'
         ? 'bg-primary-300/50 border-primary-300/50'
         : 'bg-black/20 border-black/20'} hover:bg-primary-300/50 hover:border-primary-300/50 rounded-[0.85rem] p-3 mt-3"
-      onclick={() => (selectedView = 'home')}
+      disabled={$launching}
+      onclick={() => {
+        if (!$launching) selectedView = 'home';
+      }}
     >
       <House class="text-theme-200 !size-5" />
     </Button>
@@ -890,13 +893,16 @@
       class="flex size-12 items-center gap-2 border {selectedView === 'settings'
         ? 'bg-primary-300/50 border-primary-300/50'
         : 'bg-black/20 border-black/20'} hover:bg-primary-300/50 hover:border-primary-300/50 rounded-[0.85rem] p-3 mt-3"
-      onclick={() => (selectedView = 'settings')}
+      disabled={$launching}
+      onclick={() => {
+        if (!$launching) selectedView = 'settings';
+      }}
     >
       <Settings class="text-theme-200 !size-5" />
     </Button>
     <div class="mt-auto">
       <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
+        <DropdownMenu.Trigger disabled={$launching}>
           <Avatar.Root class="size-10">
             <Avatar.Image src="https://a.ez-pp.farm/{$currentUser?.id ?? 0}" />
             <Avatar.Fallback class="bg-theme-900">

src/screens/SetupWizard.svelte

@@ -110,6 +110,7 @@
 
   onMount(async () => {
     const osuPath = await autoDetectOsuInstallFolder();
+    console.log(osuPath);
     if (osuPath) {
       osuInstallPath = osuPath;
       autoDetectedOsuPath = true;
@@ -119,7 +120,7 @@
 </script>
 
 {#if wizardFinished}
-  <div class="relative flex flex-col items-center justify-center h-[100vh]">
+  <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,14 +129,14 @@
     <Button class="mt-4" onclick={saveConfig}>Finish</Button>
   </div>
 {:else}
-  <div class="grid grid-cols-[0.41fr_1fr] h-[100vh]">
-    <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-theme-800 bg-black/20 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-800 bg-primary-900'
             : selectedStep > i
-              ? 'border-green-800/30 bg-green-900/30'
+              ? 'border-green-800 bg-green-900'
               : 'border-theme-800 bg-theme-900'} rounded-lg p-2 transition-all"
         >
           <div
@@ -160,10 +161,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 mt-5 flex flex-col items-center justify-center"
+          class="my-auto h-full w-full bg-black/20 rounded-lg border border-theme-900/20 p-6 mt-5 flex flex-col items-center justify-center"
           in:fade={{ duration: $reduceAnimations ? 0 : 200 }}
         >
           <img
@@ -178,13 +179,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-500 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 mt-5 flex flex-col items-center justify-center"
+          class="my-auto h-full w-full bg-theme-800 rounded-lg border border-theme-900 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 +208,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 />
                 <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 +224,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 />
               <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
@@ -242,7 +243,7 @@
         </div>
       {:else if selectedStep === 3}
         <div
-          class="bg-theme-900/90 flex flex-col justify-center gap-3 mt-5 border border-theme-800/90 rounded-lg"
+          class="bg-theme-900 flex flex-col justify-center gap-3 mt-5 border border-theme-800 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">