From 988e0339f9465f4322f7c8f314376fe49b1e2b25 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Fri, 1 Nov 2024 01:18:10 +0900
Subject: [PATCH] feat: partially support read-only emoji reactions

---
 components/status/StatusDetails.vue       |  3 +++
 components/status/StatusEmojiReaction.vue | 24 +++++++++++++++++++++++
 2 files changed, 27 insertions(+)
 create mode 100644 components/status/StatusEmojiReaction.vue

diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 9d318dfc..bd5e6587 100644
--- a/components/status/StatusDetails.vue
+++ b/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>
diff --git a/components/status/StatusEmojiReaction.vue b/components/status/StatusEmojiReaction.vue
new file mode 100644
index 00000000..0eaf0a68
--- /dev/null
+++ b/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>