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 1/5] 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 9d318dfcd5..bd5e65872d 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 0000000000..0eaf0a68ec
--- /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>

From fb4bc12b1d5138c1919222a74ea0d9821cf7f519 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Thu, 19 Dec 2024 22:28:52 +0900
Subject: [PATCH 2/5] fix: fix emoji reaction type error by extending Status
 type

---
 composables/masto/status.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/composables/masto/status.ts b/composables/masto/status.ts
index a2fa96b817..2662eae25a 100644
--- a/composables/masto/status.ts
+++ b/composables/masto/status.ts
@@ -3,12 +3,28 @@ import type { mastodon } from 'masto'
 type Action = 'reblogged' | 'favourited' | 'bookmarked' | 'pinned' | 'muted'
 type CountField = 'reblogsCount' | 'favouritesCount'
 
+// Add EmojiReaction type to support fedibird non-mastodon emoji reaction
+export interface EmojiReaction {
+  name: string
+  count: number
+  accountIds: string[]
+  me: boolean
+  // Only used by custom emoji
+  url?: string
+  staticUrl?: string
+  domain?: string | null
+  width?: number
+  height?: number
+}
+
+export type Status = mastodon.v1.Status & { emojiReactionsCount?: number, emojiReactions?: EmojiReaction[] }
+
 export interface StatusActionsProps {
-  status: mastodon.v1.Status
+  status: Status
 }
 
 export function useStatusActions(props: StatusActionsProps) {
-  const status = ref<mastodon.v1.Status>({ ...props.status })
+  const status = ref<Status>({ ...props.status })
   const { client } = useMasto()
 
   watch(
@@ -27,7 +43,7 @@ export function useStatusActions(props: StatusActionsProps) {
     muted: false,
   })
 
-  async function toggleStatusAction(action: Action, fetchNewStatus: () => Promise<mastodon.v1.Status>, countField?: CountField) {
+  async function toggleStatusAction(action: Action, fetchNewStatus: () => Promise<Status>, countField?: CountField) {
     // check login
     if (!checkLogin())
       return
@@ -63,7 +79,7 @@ export function useStatusActions(props: StatusActionsProps) {
     'reblogged',
     () => client.value.v1.statuses.$select(status.value.id)[status.value.reblogged ? 'unreblog' : 'reblog']().then((res) => {
       if (status.value.reblogged)
-      // returns the original status
+        // returns the original status
         return res.reblog!
       return res
     }),

From 38f31a640b97e9ed3c497de71d31abda5d3d5a07 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Thu, 19 Dec 2024 22:29:11 +0900
Subject: [PATCH 3/5] chore: move emoji reaction to just above action buttons

---
 components/status/StatusDetails.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index bd5e65872d..1f5c249047 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -65,10 +65,10 @@ useHydratedHead({
       </div>
     </div>
     <div border="t base" py-2>
-      <StatusActions v-if="actions" :status="status" details :command="command" />
+      <StatusEmojiReaction v-if="actions" :status="status" details :command="command" />
     </div>
     <div border="t base" py-2>
-      <StatusEmojiReaction v-if="actions" :status="status" details :command="command" />
+      <StatusActions v-if="actions" :status="status" details :command="command" />
     </div>
   </div>
 </template>

From 08b908b206ee0e68290e0a807ffb005457aebfdf Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Thu, 19 Dec 2024 22:30:39 +0900
Subject: [PATCH 4/5] feat: handle case where emoji reaction is normal
 non-custom emojis and adjust styling

---
 components/status/StatusEmojiReaction.vue | 25 ++++++++++++++++-------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/status/StatusEmojiReaction.vue b/components/status/StatusEmojiReaction.vue
index 0eaf0a68ec..434a50b83d 100644
--- a/components/status/StatusEmojiReaction.vue
+++ b/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>

From f15e33f76bcda7124b69bc7d6f5967340eed60f3 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sun, 22 Dec 2024 15:04:24 +0900
Subject: [PATCH 5/5] style: refine reaction emoji button styling

---
 components/status/StatusEmojiReaction.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/status/StatusEmojiReaction.vue b/components/status/StatusEmojiReaction.vue
index 434a50b83d..f2e07056fb 100644
--- a/components/status/StatusEmojiReaction.vue
+++ b/components/status/StatusEmojiReaction.vue
@@ -20,7 +20,8 @@ function isCustomEmoji(emoji: EmojiReaction) {
     <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
+      flex gap-1 p="block-1 inline-2" text-secondary btn-base rounded-1
+      :class="emoji.me ? 'b-1 b-primary bg-primary-fade' : 'b b-white bg-gray-1 hover:bg-gray-1 hover:b-gray'"
     >
       <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)">