Pet & user info + fake buttons in pet menu

src/routes/scene/+page.svelte

@@ -16,9 +16,9 @@
 
   $: isInteractive = $sceneInteractive;
 
-  function getFriendName(userId: string) {
+  function getFriendById(userId: string) {
     const friend = $appData?.friends?.find((f) => f.friend.id === userId);
-    return friend ? friend.friend.name : userId.slice(0, 8) + "...";
+    return friend!.friend;
   }
 
   function getFriendDoll(userId: string) {
@@ -69,7 +69,7 @@
             {#each Object.entries($friendsCursorPositions) as [userId, position]}
               {@const dollConfig = getFriendDoll(userId)}
               <div class="badge py-3 text-xs text-left flex flex-row gap-2">
-                <span class="font-bold">{getFriendName(userId)}</span>
+                <span class="font-bold">{getFriendById(userId).name}</span>
                 <div class="flex flex-col font-mono">
                   <span>
                     ({position.mapped.x.toFixed(3)}, {position.mapped.y.toFixed(
@@ -94,7 +94,7 @@
             id={userId}
             targetX={position.mapped.x * innerWidth}
             targetY={position.mapped.y * innerHeight}
-            name={getFriendName(userId)}
+            user={getFriendById(userId)}
             {doll}
             {isInteractive}
           />

src/routes/scene/components/DesktopPet.svelte

@@ -7,11 +7,12 @@
   import onekoGif from "../../../assets/oneko/oneko.gif";
   import PetMenu from "./PetMenu.svelte";
   import type { DollDto } from "../../../types/bindings/DollDto";
+  import type { UserBasicDto } from "../../../types/bindings/UserBasicDto";
 
   export let id = "";
   export let targetX = 0;
   export let targetY = 0;
-  export let name = "";
+  export let user: UserBasicDto;
   export let doll: DollDto | undefined = undefined;
   export let isInteractive = false;
 
@@ -27,7 +28,10 @@
   let isPetMenuOpen = false;
 
   // Watch for color changes to regenerate sprite
-  $: updateSprite(doll?.configuration.colorScheme.body, doll?.configuration.colorScheme.outline);
+  $: updateSprite(
+    doll?.configuration.colorScheme.body,
+    doll?.configuration.colorScheme.outline,
+  );
 
   $: (isInteractive, (isPetMenuOpen = false));
 
@@ -87,13 +91,13 @@
 >
   {#if isPetMenuOpen}
     <div
-      class="absolute -translate-y-44 w-30 h-40 *:size-full"
+      class="absolute -translate-y-24 w-50 h-22 *:size-full shadow-md rounded"
       role="menu"
       tabindex="0"
       aria-label="Pet Menu"
     >
       {#if doll}
-        <PetMenu {doll} />
+        <PetMenu {doll} {user} />
       {/if}
     </div>
   {/if}
@@ -111,9 +115,9 @@
 
   <span
     class="absolute -bottom-5 width-full text-[10px] bg-black/50 text-white px-1 rounded backdrop-blur-sm mt-1 whitespace-nowrap opacity-0 transition-opacity"
-    class:opacity-100={isInteractive}
+    class:opacity-100={isInteractive && !isPetMenuOpen}
   >
-    {name}
+    {doll?.name}
   </span>
 </div>
 

src/routes/scene/components/PetMenu.svelte

@@ -1,10 +1,23 @@
 <script lang="ts">
   import { type DollDto } from "../../../types/bindings/DollDto";
+  import type { UserBasicDto } from "../../../types/bindings/UserBasicDto";
   export let doll: DollDto;
+  export let user: UserBasicDto;
 </script>
 
 <div class="bg-base-100 border border-base-200 card p-1">
   <div class="flex flex-col gap-1">
-    <p class="text-xs">{doll.name}</p>
+    <div class="flex flex-row w-full items-end gap-1">
+      <p class="text-sm font-semibold">{doll.name}</p>
+      <p class="text-[0.6rem] opacity-50">From {user.name}</p>
+    </div>
+    <div class="flex flex-row gap-1 w-full *:flex-1 *:btn *:btn-sm">
+      <button>Headpat</button>
+      <button>Message</button>
+    </div>
+    <div class="flex flex-row gap-1 w-full *:flex-1 *:btn *:btn-sm">
+      <button>Postcard</button>
+      <button>Wormhole</button>
+    </div>
   </div>
 </div>