Badge for animated items, support only

This is really very cute, but too many items it turns out are lod despite not actually being animated 🙃 it's helpful for looking for test cases tho, so I'm keeping it, but support only!

I also ended up really liking the icon-badge+tooltip design as a way to summarize lil things, so I'm trying Own/Want short badges in the same style.

src/app/WardrobePage/Item.js

@@ -23,12 +23,14 @@ import {
   ItemCardContent,
   ItemBadgeList,
   ItemBadgeTooltip,
+  MaybeAnimatedBadge,
   NcBadge,
   NpBadge,
   YouOwnThisBadge,
   YouWantThisBadge,
 } from "../components/ItemCard";
 import SupportOnly from "./support/SupportOnly";
+import useSupport from "./support/useSupport";
 
 const LoadableItemPageDrawer = loadable(() => import("../ItemPageDrawer"));
 const LoadableItemSupportDrawer = loadable(() =>
@@ -204,12 +206,16 @@ function ItemContainer({ children, isDisabled = false }) {
 }
 
 function ItemBadges({ item }) {
+  const { isSupportUser } = useSupport();
   const occupiedZoneLabels = getZoneLabels(
     item.appearanceOn.layers.map((l) => l.zone)
   );
   const restrictedZoneLabels = getZoneLabels(
     item.appearanceOn.restrictedZones.filter((z) => z.isCommonlyUsedByItems)
   );
+  const isMaybeAnimated = item.appearanceOn.layers.some(
+    (l) => l.canvasMovieLibraryUrl
+  );
 
   return (
     <ItemBadgeList>
@@ -224,6 +230,13 @@ function ItemBadges({ item }) {
         // than try to line things up like a table.
         <NpBadge />
       )}
+      {
+        // This badge is unreliable, but it's helpful for looking for animated
+        // items to test, so we show it only to support. We use this form
+        // instead of <SupportOnly />, to avoid adding extra badge list spacing
+        // on the additional empty child.
+        isMaybeAnimated && isSupportUser && <MaybeAnimatedBadge />
+      }
       {item.currentUserOwnsThis && <YouOwnThisBadge variant="short" />}
       {item.currentUserWantsThis && <YouWantThisBadge variant="short" />}
       {occupiedZoneLabels.map((zoneLabel) => (

src/app/components/ItemCard.js

@@ -10,6 +10,7 @@ import {
   useTheme,
 } from "@chakra-ui/core";
 import { CheckIcon, StarIcon } from "@chakra-ui/icons";
+import { HiSparkles } from "react-icons/hi";
 import { Link } from "react-router-dom";
 
 import { safeImageUrl } from "../util";
@@ -239,23 +240,58 @@ export function NpBadge() {
 }
 
 export function YouOwnThisBadge({ variant = "long" }) {
-  return (
+  let badge = (
-    <Badge colorScheme="green" display="flex" alignItems="center">
+    <Badge
-      <CheckIcon aria-label="Star" marginRight="1" />
+      colorScheme="green"
-      {variant === "long" && <>You own this!</>}
+      display="flex"
-      {variant === "short" && <>Own</>}
+      alignItems="center"
+      minHeight="1.5em"
+    >
+      <CheckIcon aria-label="Star" />
+      {variant === "long" && <Box marginLeft="1">You own this!</Box>}
     </Badge>
   );
+
+  if (variant === "short") {
+    badge = <ItemBadgeTooltip label="You own this">{badge}</ItemBadgeTooltip>;
+  }
+
+  return badge;
 }
 
 export function YouWantThisBadge({ variant = "long" }) {
-  return (
+  let badge = (
-    <Badge colorScheme="blue" display="flex" alignItems="center">
+    <Badge
-      <StarIcon aria-label="Star" marginRight="1" />
+      colorScheme="blue"
-      {variant === "long" && <>You want this!</>}
+      display="flex"
-      {variant === "short" && <>Want</>}
+      alignItems="center"
+      minHeight="1.5em"
+    >
+      <StarIcon aria-label="Star" />
+      {variant === "long" && <Box marginLeft="1">You want this!</Box>}
     </Badge>
   );
+
+  if (variant === "short") {
+    badge = <ItemBadgeTooltip label="You want this">{badge}</ItemBadgeTooltip>;
+  }
+
+  return badge;
+}
+
+export function MaybeAnimatedBadge() {
+  return (
+    <ItemBadgeTooltip label="Maybe animated? (Support only)">
+      <Badge
+        colorScheme="orange"
+        display="flex"
+        alignItems="center"
+        minHeight="1.5em"
+      >
+        <Box as={HiSparkles} aria-label="Sparkles" />
+      </Badge>
+    </ItemBadgeTooltip>
+  );
 }
 
 export default ItemCard;