add support for misskey-like cat fields (is cat & speak as cat) and frontend options for this

src/components/user_avatar/user_avatar.vue

@@ -3,6 +3,14 @@
     class="Avatar"
     :class="{ '-compact': compact }"
   >
+    <div
+      v-if="user && user.is_cat && canShowEars && !showPlaceholder && earsReady"
+      class="ears"
+      :style="{'color': earsColor}"
+    >
+			<div class="earLeft" />
+			<div class="earRight" />
+		</div>
     <StillImage
       v-if="user"
       class="avatar"
@@ -17,6 +25,7 @@
       class="avatar -placeholder"
       :class="{ '-compact': compact }"
     />
+
     <FAIcon
       v-if="bot"
       icon="robot"
@@ -29,6 +38,7 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
+/* ears ripped from https://github.com/ihateblueb/aster/blob/main/packages/frontend/src/lib/components/Avatar.svelte */
 .Avatar {
   --_avatarShadowBox: var(--avatarStatusShadow);
   --_avatarShadowFilter: var(--avatarStatusShadowFilter);
@@ -40,6 +50,17 @@
   width: 48px;
   height: 48px;
 
+  &:hover {
+    .ears {
+      .earLeft {
+        animation: earwiggleleft 1s infinite;
+      }
+      .earRight {
+        animation: earwiggleright 1s infinite;
+      }
+    }
+  }
+
   &.-compact {
     width: 32px;
     height: 32px;
@@ -90,5 +111,116 @@
     border-radius: var(--tooltipRadius);
   }
 
+  .ears {
+    contain: strict;
+    position: absolute;
+    z-index: 0;
+    display: flex;
+
+    top: -50%;
+    left: -50%;
+    width: 100%;
+    height: 100%;
+    padding: 50%;
+
+    pointer-events: none;
+
+    .earLeft,
+    .earRight {
+      contain: strict;
+      display: inline-block;
+      height: 50%;
+      width: 50%;
+      background: currentColor;
+
+      &::after {
+        contain: strict;
+        content: '';
+        display: block;
+        width: 60%;
+        height: 60%;
+        margin: 20%;
+        background: #df548f;
+      }
+    }
+
+    .earLeft {
+      transform: rotate(37.5deg) skew(30deg);
+
+      &,
+      &::after {
+        border-radius: 25% 75% 75%;
+      }
+    }
+
+    .earRight {
+      transform: rotate(-37.5deg) skew(-30deg);
+
+      &,
+      &::after {
+        border-radius: 75% 25% 75% 75%;
+      }
+    }
+  }
+
+  @keyframes earwiggleleft {
+    from {
+      transform: rotate(37.6deg) skew(30deg);
+    }
+    25% {
+      transform: rotate(10deg) skew(30deg);
+    }
+    50% {
+      transform: rotate(20deg) skew(30deg);
+    }
+    75% {
+      transform: rotate(0deg) skew(30deg);
+    }
+    to {
+      transform: rotate(37.6deg) skew(30deg);
+    }
+  }
+
+  @keyframes earwiggleright {
+    from {
+      transform: rotate(-37.6deg) skew(-30deg);
+    }
+    30% {
+      transform: rotate(-10deg) skew(-30deg);
+    }
+    55% {
+      transform: rotate(-20deg) skew(-30deg);
+    }
+    75% {
+      transform: rotate(0deg) skew(-30deg);
+    }
+    to {
+      transform: rotate(-37.6deg) skew(-30deg);
+    }
+  }
+
+  @keyframes eartightleft {
+    from {
+      transform: rotate(37.6deg) skew(30deg);
+    }
+    50% {
+      transform: rotate(37.4deg) skew(30deg);
+    }
+    to {
+      transform: rotate(37.6deg) skew(30deg);
+    }
+  }
+
+  @keyframes eartightright {
+    from {
+      transform: rotate(-37.6deg) skew(-30deg);
+    }
+    50% {
+      transform: rotate(-37.4deg) skew(-30deg);
+    }
+    to {
+      transform: rotate(-37.6deg) skew(-30deg);
+    }
+  }
 }
 </style>