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

app/components/status/StatusActionsMore.vue

@@ -227,7 +227,7 @@ function showFavoritedAndBoostedBy() {
 
         <CommonDropdownItem
           is="button"
-          v-if="currentUser && (status.account.id === currentUser.account.id || status.mentions.some(m => m.id === currentUser!.account.id))"
+          v-if="currentUser && (status.account.id === currentUser.account.id || status.mentions.some((m: mastodon.v1.StatusMention) => m.id === currentUser!.account.id))"
           :text="status.muted ? $t('menu.unmute_conversation') : $t('menu.mute_conversation')"
           :icon="status.muted ? 'i-ri:eye-line' : 'i-ri:eye-off-line'"
           :command="command"

app/components/status/StatusDetails.vue

@@ -62,6 +62,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>

app/components/status/StatusEmojiReaction.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { mastodon } from 'masto'
+import { getEmojiAttributes } from '~~/config/emojis'
+
+const props = defineProps<{
+  status: mastodon.v1.Status
+  details?: boolean
+}>()
+
+const { status } = useStatusActions(props)
+function isCustomEmoji(emoji: mastodon.v1.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>

app/components/timeline/TimelineHome.vue

@@ -13,7 +13,7 @@ function reorderAndFilter(items: mastodon.v1.Status[]) {
 
 let followedTags: mastodon.v1.Tag[] | undefined
 if (currentUser.value !== undefined) {
-  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+  followedTags = await useMasto().client.value.v1.followedTags.list({ limit: 200 })
 }
 </script>
 

app/components/timeline/TimelineNotifications.vue

@@ -13,7 +13,7 @@ const options = { limit: 30, types: filter ? [filter] : [] }
 
 // Default limit is 20 notifications, and servers are normally caped to 30
 const paginator = useMastoClient().v1.notifications.list(options)
-const stream = useStreaming(client => client.user.notification.subscribe())
+const stream = useStreaming(client => client.user.subscribe())
 
 lastAccessedNotificationRoute.value = route.path.replace(/\/notifications\/?/, '')
 

app/components/timeline/TimelinePublic.vue

@@ -9,7 +9,7 @@ function reorderAndFilter(items: mastodon.v1.Status[]) {
 
 let followedTags: mastodon.v1.Tag[] | undefined
 if (currentUser.value !== undefined) {
-  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 200 }))
 }
 </script>
 

app/components/timeline/TimelinePublicLocal.vue

@@ -9,7 +9,7 @@ function reorderAndFilter(items: mastodon.v1.Status[]) {
 
 let followedTags: mastodon.v1.Tag[] | undefined
 if (currentUser.value !== undefined) {
-  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 200 }))
 }
 </script>
 

app/composables/cache.ts

@@ -74,7 +74,7 @@ export async function fetchAccountByHandle(acct: string): Promise<mastodon.v1.Ac
     }
     else {
       const userAcctDomain = userAcct.includes('@') ? userAcct : `${userAcct}@${domain}`
-      account = (await client.v1.search.fetch({ q: `@${userAcctDomain}`, type: 'accounts' })).accounts[0]
+      account = (await client.v2.search.list({ q: `@${userAcctDomain}`, type: 'accounts' })).accounts[0]
     }
 
     if (account.acct && !account.acct.includes('@') && domain)

app/composables/masto/notification.ts

@@ -47,7 +47,7 @@ export function useNotifications() {
     const paginator = client.value.v1.notifications.list({ limit: 30 })
 
     do {
-      const result = await paginator.next()
+      const result = await paginator.values().next()
       if (!result.done && result.value.length) {
         for (const notification of result.value) {
           if (notification.id === position.notifications.lastReadId)

app/composables/masto/search.ts

@@ -77,7 +77,7 @@ export function useSearch(query: MaybeRefOrGetter<string>, options: UseSearchOpt
       ...resolveUnref(options),
       resolve: !!currentUser.value,
     })
-    const nextResults = await paginator.next()
+    const nextResults = await paginator.values().next()
 
     done.value = !!nextResults.done
     if (!nextResults.done)
@@ -91,7 +91,7 @@ export function useSearch(query: MaybeRefOrGetter<string>, options: UseSearchOpt
       return
 
     loading.value = true
-    const nextResults = await paginator.next()
+    const nextResults = await paginator.values().next()
     loading.value = false
 
     done.value = !!nextResults.done

app/composables/masto/status.ts

@@ -63,7 +63,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
     }),

app/composables/paginator.ts

@@ -12,7 +12,7 @@ export function usePaginator<T, P, U = T>(
   // called `next` method will mutate the internal state of the variable,
   // and we need its initial state after HMR
   // so clone it
-  const paginator = _paginator.clone()
+  const paginator = _paginator.values()
 
   const state = ref<PaginatorState>(isHydrated.value ? 'idle' : 'loading')
   const items = ref<U[]>([])

app/composables/tiptap/suggestion.ts

@@ -28,7 +28,7 @@ export const TiptapMentionSuggestion: Partial<SuggestionOptions> = import.meta.s
           return []
 
         const paginator = useMastoClient().v2.search.list({ q: query, type: 'accounts', limit: 25, resolve: true })
-        return (await paginator.next()).value?.accounts ?? []
+        return (await paginator.values().next()).value?.accounts ?? []
       },
       render: createSuggestionRenderer(TiptapMentionList),
     }
@@ -47,7 +47,7 @@ export const TiptapHashtagSuggestion: Partial<SuggestionOptions> = {
       resolve: false,
       excludeUnreviewed: true,
     })
-    return (await paginator.next()).value?.hashtags ?? []
+    return (await paginator.values().next()).value?.hashtags ?? []
   },
   render: createSuggestionRenderer(TiptapHashtagList),
 }

app/middleware/1.permalink.global.ts

@@ -44,7 +44,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 
     // If we're logged in, search for the local id the account or status corresponds to
     const paginator = masto.client.value.v2.search.list({ q: `https:/${to.fullPath}`, resolve: true, limit: 1 })
-    const { accounts, statuses } = (await paginator.next()).value ?? { accounts: [], statuses: [] }
+    const { accounts, statuses } = (await paginator.values().next()).value ?? { accounts: [], statuses: [] }
 
     if (statuses[0])
       return getStatusRoute(statuses[0])

app/pages/[[server]]/tags/[tag].vue

@@ -28,7 +28,7 @@ onReactivated(() => {
 
 let followedTags: mastodon.v1.Tag[] | undefined
 if (currentUser.value !== undefined) {
-  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
+  followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 200 }))
 }
 </script>
 

package.json

@@ -85,7 +85,7 @@
     "iso-639-1": "^3.0.0",
     "js-yaml": "^4.1.0",
     "lru-cache": "^11.0.0",
-    "masto": "^6.10.4",
+    "masto": "^7.1.0",
     "mocked-exports": "^0.1.1",
     "node-emoji": "^2.1.3",
     "node-mock-http": "^1.0.0",

shared/types/global.d.ts

@@ -0,0 +1,21 @@
+import 'masto'
+
+declare module 'masto/mastodon/entities/v1/index.js' {
+  // support fedibird non-mastodon emoji reaction
+  interface EmojiReaction {
+    name: string
+    count: number
+    accountIds: string[]
+    me: boolean
+    url?: string
+    staticUrl?: string
+    domain?: string | null
+    width?: number
+    height?: number
+  }
+
+  interface Status {
+    emojiReactionsCount?: number
+    emojiReactions?: EmojiReaction[]
+  }
+}