app menu window

src/routes/+layout.svelte

@@ -2,14 +2,16 @@
   import { browser } from "$app/environment";
   import { onMount, onDestroy } from "svelte";
   import { initCursorTracking, stopCursorTracking } from "../events/cursor";
+  import { initAppDataListener } from "../events/app-data";
 
   let { children } = $props();
   if (browser) {
     onMount(async () => {
       try {
         await initCursorTracking();
+        await initAppDataListener();
       } catch (err) {
-        console.error("[Scene] Failed to initialize cursor tracking:", err);
+        console.error("[Scene] Failed to initialize event listeners:", err);
       }
     });
 

src/routes/app-menu/+page.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Friends from "./tabs/friends.svelte";
+  import Preferences from "./tabs/preferences.svelte";
+  import YourDolls from "./tabs/your-dolls.svelte";
+</script>
+
+<div
+  class="p-2 h-full absolute inset-0 bg-base-100 border-base-200/50 border border-t-0 rounded-b-xl"
+>
+  <div class="flex flex-col gap-2 h-full">
+    <div class="size-full">
+      <div class="tabs tabs-lift h-full">
+        <input
+          type="radio"
+          name="app_menu_tabs"
+          class="tab"
+          aria-label="Your Dolls"
+          checked
+        />
+        <div class="tab-content bg-base-100 border-base-300 p-4">
+          <YourDolls />
+        </div>
+
+        <input
+          type="radio"
+          name="app_menu_tabs"
+          class="tab"
+          aria-label="Friends"
+        />
+        <div class="tab-content bg-base-100 border-base-300 p-4">
+          <Friends />
+        </div>
+
+        <input
+          type="radio"
+          name="app_menu_tabs"
+          class="tab"
+          aria-label="Preferences"
+        />
+        <div class="tab-content bg-base-100 border-base-300 p-4">
+          <Preferences />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/routes/app-menu/tabs/friends.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { appData } from "../../../events/app-data";
+</script>
+
+<div>
+  <p>{$appData?.user?.name}'s friends</p>
+</div>

src/routes/app-menu/tabs/preferences.svelte

@@ -0,0 +1,21 @@
+<script>
+  import { invoke } from "@tauri-apps/api/core";
+  import { appData } from "../../../events/app-data";
+</script>
+
+<div class="size-full flex flex-col justify-between">
+  <div>
+    <p>{$appData?.user?.name}'s preferences</p>
+  </div>
+  <div class="w-full flex flex-row justify-between">
+    <div></div>
+    <div>
+      <button
+        class="btn btn-error btn-sm btn-soft"
+        onclick={async () => {
+          await invoke("quit_app");
+        }}>Quit Friendolls</button
+      >
+    </div>
+  </div>
+</div>

src/routes/app-menu/tabs/your-dolls.svelte

@@ -0,0 +1,7 @@
+<script>
+  import { appData } from "../../../events/app-data";
+</script>
+
+<div>
+  <p>{$appData?.user?.name}</p>
+</div>

src/routes/preferences/+page.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { invoke } from "@tauri-apps/api/core";
-  import { cursorPositionOnScreen } from "../../events/cursor";
-</script>
-
-<div class="p-4">
-  <div class="flex flex-col gap-4">
-    <div>
-      <p class="text-xl font-semibold">Preferences</p>
-      <p class="text-sm opacity-50">Settings and configuration</p>
-    </div>
-
-    <div class="card bg-base-200 p-4">
-      <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})
-        </span>
-        <span class="font-mono text-sm">
-          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>