feat: add svelte-sonner and mode-watcher dependencies, implement Toaster component

bun.lock

@@ -33,11 +33,13 @@
         "autoprefixer": "10.4.21",
         "bits-ui": "^1.4.7",
         "clsx": "2.1.1",
+        "mode-watcher": "^1.0.6",
         "prettier": "^3.6.1",
         "prettier-plugin-svelte": "^3.4.0",
         "sass-embedded": "1.89.2",
         "svelte": "5.34.8",
         "svelte-check": "4.2.2",
+        "svelte-sonner": "^0.3.25",
         "tailwind-merge": "2.5.5",
         "tailwind-variants": "0.3.1",
         "tailwindcss": "3.4.17",
@@ -410,6 +412,8 @@
 
     "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
 
+    "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=="],
+
     "mri": ["mri@1.2.0", "", {}, "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="],
 
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
@@ -560,6 +564,8 @@
 
     "svelte-confetti": ["svelte-confetti@2.3.1", "", { "peerDependencies": { "svelte": ">=5.0.0" } }, "sha512-bKd8etTOeBQyeS9LDPuSd7Oqy5msf0xvxItzsHPajKaarr/LWFzqPq7rp6QQO5rGTzLgM0fmjovOvLkRbrd2gg=="],
 
+    "svelte-sonner": ["svelte-sonner@0.3.28", "", { "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1" } }, "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg=="],
+
     "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=="],
@@ -626,6 +632,8 @@
 
     "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=="],
+
     "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
     "string-width-cjs/strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],

package.json

@@ -45,11 +45,13 @@
     "autoprefixer": "10.4.21",
     "bits-ui": "^1.4.7",
     "clsx": "2.1.1",
+    "mode-watcher": "^1.0.6",
     "prettier": "^3.6.1",
     "prettier-plugin-svelte": "^3.4.0",
     "sass-embedded": "1.89.2",
     "svelte": "5.34.8",
     "svelte-check": "4.2.2",
+    "svelte-sonner": "^0.3.25",
     "tailwind-merge": "2.5.5",
     "tailwind-variants": "0.3.1",
     "tailwindcss": "3.4.17",

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

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	let { ...restProps }: SonnerProps = $props();
+</script>
+
+<Sonner
+	theme={mode.current}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...restProps}
+/>

src/routes/+layout.svelte

@@ -1,27 +1,83 @@
 <script lang="ts">
-  import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
   import '../app.css';
-  import { current_view, first_startup, setupValues } from '@/global';
+  import Titlebar from '@/components/ui/titlebar/titlebar.svelte';
+  import { first_startup, setupValues } from '@/global';
   import { onMount } from 'svelte';
   import OsuCursor from '@/components/ui/osu-cursor/OsuCursor.svelte';
-  import { cursorSmoothening, customCursor, reduceAnimations, userSettings } from '@/userSettings';
+  import {
+    cursorSmoothening,
+    customCursor,
+    osuInstallationPath,
+    reduceAnimations,
+    userSettings,
+  } from '@/userSettings';
   import { Buffer } from 'buffer';
-  import SetupWizard from '../pages/SetupWizard.svelte';
-  import Launch from '../pages/Launch.svelte';
+  import { Toaster } from '@/components/ui/sonner';
   let { children } = $props();
 
+  function disableReload() {
+    if (window.location.hostname !== 'tauri.localhost') {
+      return;
+    }
+    document.addEventListener('keydown', function (event) {
+      if (
+        event.key === 'F3' ||
+        event.key === 'F5' ||
+        event.key === 'F7' ||
+        event.key === 'F8' ||
+        event.key === 'F10' ||
+        event.key === 'F12' ||
+        (event.ctrlKey && event.key === 'r') ||
+        (event.metaKey && event.key === 'r') ||
+        (event.ctrlKey && event.key === 'f') ||
+        (event.metaKey && event.key === 'f') ||
+        (event.ctrlKey && event.key === 'g') ||
+        (event.metaKey && event.key === 'g') ||
+        (event.ctrlKey && event.key === 'j') ||
+        (event.metaKey && event.key === 'j') ||
+        (event.ctrlKey && event.key === 'p') ||
+        (event.metaKey && event.key === 'p') ||
+        (event.ctrlKey && event.key === 'u') ||
+        (event.metaKey && event.key === 'u')
+      ) {
+        event.preventDefault();
+      }
+    });
+
+    document.addEventListener(
+      'contextmenu',
+      (e) => {
+        e.preventDefault();
+        return false;
+      },
+      { capture: true }
+    );
+
+    document.addEventListener(
+      'selectstart',
+      (e) => {
+        e.preventDefault();
+        return false;
+      },
+      { capture: true }
+    );
+  }
+
   onMount(async () => {
     window.Buffer = Buffer;
+    disableReload();
     setupValues();
     const firstStartup = await $userSettings.init();
 
     const config_custom_cursor = $userSettings.value('custom_cursor');
     const config_cursor_smoothening = $userSettings.value('cursor_smoothening');
     const config_reduce_animations = $userSettings.value('reduce_animations');
+    const config_osu_installation_path = $userSettings.value('osu_installation_path');
 
     customCursor.set(config_custom_cursor.get(true));
     cursorSmoothening.set(config_cursor_smoothening.get(true));
     reduceAnimations.set(config_reduce_animations.get(false));
+    osuInstallationPath.set(config_osu_installation_path.get(''));
 
     customCursor.subscribe((val) => config_custom_cursor.set(val));
     cursorSmoothening.subscribe((val) => config_cursor_smoothening.set(val));
@@ -35,6 +91,8 @@
   <OsuCursor smoothCursor={$cursorSmoothening} />
 {/if}
 
+<Toaster richColors closeButton />
+
 <Titlebar />
 <main>
   {@render children()}