app menu window

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>