Improvements to the UI

components/pet/pet-emotion-caption.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import type { AvatarMood } from "@/lib/avatar-state";
+import { getPetEmotionMessage } from "@/lib/pet-status";
+import { cn } from "@/lib/utils";
+
+type PetEmotionCaptionProps = {
+  mood: AvatarMood;
+  visible: boolean;
+  className?: string;
+};
+
+export function PetEmotionCaption({
+  mood,
+  visible,
+  className,
+}: PetEmotionCaptionProps) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute inset-x-2 bottom-2 z-30 flex justify-center",
+        "animate-emotion-pop",
+        className,
+      )}
+      role="status"
+      aria-live="polite"
+    >
+      <p className="lcd-readable-label max-w-full">{getPetEmotionMessage(mood)}</p>
+    </div>
+  );
+}