From 905ba5abc0fb6a384a0aed707f4e44272c6fa932 Mon Sep 17 00:00:00 2001
From: Wind-Explorer <windexplorer@outlook.com>
Date: Mon, 16 Mar 2026 16:40:57 +0800
Subject: [PATCH] Separated pet name component from pet menu

---
 .../scene/components/pet-menu/pet-menu.svelte | 11 ++--------
 .../scene/components/pet-menu/pet-name.svelte | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 src/routes/scene/components/pet-menu/pet-name.svelte

diff --git a/src/routes/scene/components/pet-menu/pet-menu.svelte b/src/routes/scene/components/pet-menu/pet-menu.svelte
index 201d996..127ca17 100644
--- a/src/routes/scene/components/pet-menu/pet-menu.svelte
+++ b/src/routes/scene/components/pet-menu/pet-menu.svelte
@@ -8,6 +8,7 @@
   } from "./events";
   import { sceneInteractive } from "../../../../events/scene-interactive";
   import { commands, type UserBasicDto } from "$lib/bindings";
+  import PetName from "./pet-name.svelte";
 
   export interface PetMenuAction {
     icon: string;
@@ -123,15 +124,7 @@
   {/each}
 
   {#if dollName}
-    <div
-      class={`absolute left-1/2 top-full z-10 mt-3 w-max max-w-32 -translate-x-1/2 rounded-md border border-base-300/80 bg-base-100/90 px-2 py-1 text-center text-[10px] font-medium leading-tight text-base-content/80 shadow-sm backdrop-blur-sm transition-all duration-200 ease-out ${
-        $sceneInteractive
-          ? "translate-y-0 opacity-100"
-          : "pointer-events-none -translate-y-1 opacity-0"
-      }`}
-    >
-      <span class="block truncate">{dollName}</span>
-    </div>
+    <PetName name={dollName} visible={$sceneInteractive} />
   {/if}
 
   <button
diff --git a/src/routes/scene/components/pet-menu/pet-name.svelte b/src/routes/scene/components/pet-menu/pet-name.svelte
new file mode 100644
index 0000000..ac14c44
--- /dev/null
+++ b/src/routes/scene/components/pet-menu/pet-name.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  interface Props {
+    name: string;
+    visible?: boolean;
+  }
+
+  let { name, visible = true }: Props = $props();
+</script>
+
+{#if name}
+  <div
+    class={`absolute left-1/2 top-full z-10 mt-3 w-max max-w-32 -translate-x-1/2 rounded-md border border-base-300/80 bg-base-100/90 px-2 py-1 text-center text-[10px] font-medium leading-tight text-base-content/80 shadow-sm backdrop-blur-sm transition-all duration-200 ease-out ${
+      visible
+        ? "translate-y-0 opacity-100"
+        : "pointer-events-none -translate-y-1 opacity-0"
+    }`}
+  >
+    <span class="block truncate">{name}</span>
+  </div>
+{/if}