feat: partially support read-only emoji reactions

Author: shuuji3

components/status/StatusDetails.vue

@@ -67,5 +67,8 @@ useHydratedHead({
     <div border="t base" py-2>
       <StatusActions v-if="actions" :status="status" details :command="command" />
     </div>
+    <div border="t base" py-2>
+      <StatusEmojiReaction v-if="actions" :status="status" details :command="command" />
+    </div>
   </div>
 </template>

components/status/StatusEmojiReaction.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+
+const props = defineProps<{
+  status: mastodon.v1.Status
+  details?: boolean
+}>()
+
+const {
+  status,
+} = useStatusActions(props)
+</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">
+        <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>
+  </div>
+</template>