feat: partially support fedibird emoji reactions (read-only)

components/status/StatusDetails.vue

@@ -64,6 +64,9 @@ useHydratedHead({
         {{ status.application?.name }}
       </div>
     </div>
+    <div border="t base" py-2>
+      <StatusEmojiReaction v-if="actions" :status="status" details :command="command" />
+    </div>
     <div border="t base" py-2>
       <StatusActions v-if="actions" :status="status" details :command="command" />
     </div>

components/status/StatusEmojiReaction.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { getEmojiAttributes } from '~/config/emojis'
+
+const props = defineProps<{
+  status: Status
+  details?: boolean
+}>()
+
+const {
+  status,
+} = useStatusActions(props)
+
+function isCustomEmoji(emoji: EmojiReaction) {
+  return !!emoji.staticUrl
+}
+</script>
+
+<template>
+  <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 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)">
+        <img :src="emoji.url" :alt="`:${emoji.name}:`" title="" style="">
+      </picture>
+      <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>

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
     }),