feat: handle case where emoji reaction is normal non-custom emojis and adjust styling

Author: shuuji3

components/status/StatusEmojiReaction.vue

@@ -1,24 +1,35 @@
 <script setup lang="ts">
-import type { mastodon } from 'masto'
+import { getEmojiAttributes } from '~/config/emojis'
 
 const props = defineProps<{
-  status: mastodon.v1.Status
+  status: Status
   details?: boolean
 }>()
 
 const {
   status,
 } = useStatusActions(props)
+
+function isCustomEmoji(emoji: EmojiReaction) {
+  return !!emoji.staticUrl
+}
 </script>
 
 <template>
-  <div flex items-center class="status-actions">
-    <div v-for="(i, emoji) in status.emojiReactions" :key="i" flex-inline gap-1 mr-4 text-secondary>
-      <picture class="custom-emoji" :alt="`:${emoji.name}:`" :data-emoji-id="emoji.name" :title="emoji.name">
+  <div flex flex-wrap gap-1 class="status-actions">
+    <button
+      v-for="(emoji, i) in status?.emojiReactions ?? []"
+      :key="i"
+      flex gap-1 p="block-1 inline-2" text-secondary btn-base hover:bg-gray-1 rounded-1
+    >
+      <picture v-if="isCustomEmoji(emoji)" class="custom-emoji" :alt="`:${emoji.name}:`" :data-emoji-id="emoji.name">
         <source :srcset="emoji.staticUrl" media="(prefers-reduced-motion: reduce)">
         <img :src="emoji.url" :alt="`:${emoji.name}:`" title="" style="">
       </picture>
-      <CommonLocalizedNumber :keypath="emoji.count" :count="emoji.count" />
-    </div>
+      <picture v-else class="custom-emoji" :alt="`:${emoji.name}:`" :data-emoji-id="emoji.name">
+        <img v-bind="getEmojiAttributes(emoji.name)">
+      </picture>
+      <CommonLocalizedNumber :keypath="emoji.count.toString()" :count="emoji.count" />
+    </button>
   </div>
 </template>