fetch user profile (wip)

src/routes/+layout.svelte

@@ -1,25 +1,24 @@
 <script>
-    import { browser } from '$app/environment';
-    import { onMount, onDestroy } from 'svelte';
-    import { initCursorTracking, stopCursorTracking } from '../events/cursor';
+  import { browser } from "$app/environment";
+  import { onMount, onDestroy } from "svelte";
+  import { initCursorTracking, stopCursorTracking } from "../events/cursor";
 
-    let { children } = $props();
-    if (browser) {
-      onMount(async () => {
-        try {
-          await initCursorTracking();
-        } catch (err) {
-          console.error("[Scene] Failed to initialize cursor tracking:", err);
-        }
-      });
-
-      onDestroy(() => {
-        stopCursorTracking();
-      });
-    }
+  let { children } = $props();
+  if (browser) {
+    onMount(async () => {
+      try {
+        await initCursorTracking();
+      } catch (err) {
+        console.error("[Scene] Failed to initialize cursor tracking:", err);
+      }
+    });
 
+    onDestroy(() => {
+      stopCursorTracking();
+    });
+  }
 </script>
 
 <div class="size-full bg-transparent">
-    {@render children?.()}
+  {@render children?.()}
 </div>

src/routes/+page.svelte

@@ -1,3 +1,3 @@
 <main class="card-body">
-    <button class="btn btn-primary">Hello TailwindCSS!</button>
+  <button class="btn btn-primary">Hello TailwindCSS!</button>
 </main>

src/routes/preferences/+page.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
   import { invoke } from "@tauri-apps/api/core";
-  import {
-    cursorPositionOnScreen,
-  } from "../../events/cursor";
-
+  import { cursorPositionOnScreen } from "../../events/cursor";
 </script>
 
 <div class="p-4">
@@ -17,12 +14,22 @@
       <h3 class="font-semibold mb-2">Cursor Position (Multi-Window Test)</h3>
       <div class="flex flex-col gap-1">
         <span class="font-mono text-sm">
-          Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw.y})
+          Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw
+            .y})
         </span>
         <span class="font-mono text-sm">
-          Mapped: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen.mapped.y})
+          Mapped: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen
+            .mapped.y})
         </span>
       </div>
     </div>
+    <button
+      class="btn"
+      onclick={() => {
+        invoke("get_app_data").then((data) => {
+          console.log("data", data);
+        });
+      }}>Fetch app data</button
+    >
   </div>
 </div>

src/routes/scene/+page.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
-  import {
-    cursorPositionOnScreen,
-  } from "../../events/cursor";
+  import { cursorPositionOnScreen } from "../../events/cursor";
 </script>
 
 <div class="w-svw h-svh p-4 relative">
@@ -13,7 +11,8 @@
       <p class="text-sm opacity-50">Scene Screen</p>
       <div class="mt-4 flex flex-col gap-1">
         <span class="font-mono text-sm">
-          Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw.y})
+          Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw
+            .y})
         </span>
         <span class="font-mono text-sm">
           Mapped: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen