refactor: move fetch of followed tags to the parent of TimelinePaginator

components/status/StatusCard.vue

@@ -3,6 +3,7 @@ import type { mastodon } from 'masto'
 
 const { actions = true, older, newer, hasOlder, hasNewer, main, ...props } = defineProps<{
   status: mastodon.v1.Status
+  followedTag?: string | null
   actions?: boolean
   context?: mastodon.v2.FilterContext
   hover?: boolean
@@ -61,10 +62,6 @@ const collapseRebloggedBy = computed(() => rebloggedBy.value?.id === status.valu
 const isDM = computed(() => status.value.visibility === 'direct')
 const isPinned = computed(() => status.value.pinned)
 
-// limit 0 should get all w/o pagination, but might need checking
-const followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 })).map(tag => tag.name)
-const statusTagsFollowed = computed(() => status.value.tags.filter(tag => followedTags.includes(tag.name)).map(tag => tag.name))
-
 const showUpperBorder = computed(() => newer && !directReply.value)
 const showReplyTo = computed(() => !replyToMain.value && !directReply.value)
 
@@ -80,14 +77,14 @@ const forceShow = ref(false)
       <!-- followed hashtag badge -->
       <div flex="~ col" justify-between>
         <div
-          v-if="statusTagsFollowed.length > 0"
+          v-if="followedTag"
           flex="~ gap2" items-center h-auto text-sm text-orange
           m="is-5" p="t-1 is-5"
           relative text-secondary ws-nowrap
         >
           <div i-ri:hashtag />
           <!-- show first hit followed tag -->
-          <span>{{ statusTagsFollowed[0] }}</span>
+          <span>{{ followedTag }}</span>
         </div>
       </div>
 

components/timeline/TimelineHome.vue

@@ -10,12 +10,14 @@ const stream = useStreaming(client => client.user.subscribe())
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'home')
 }
+
+const followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
 </script>
 
 <template>
   <div>
     <PublishWidgetList draft-key="home" />
     <div h="1px" w-auto bg-border mb-3 />
-    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
+    <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="home" />
   </div>
 </template>

components/timeline/TimelinePaginator.vue

@@ -4,11 +4,12 @@ import type { mastodon } from 'masto'
 import { DynamicScrollerItem } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-const { account, buffer = 10, endMessage = true } = defineProps<{
+const { account, buffer = 10, endMessage = true, followedTags = [] } = defineProps<{
   paginator: mastodon.Paginator<mastodon.v1.Status[], mastodon.rest.v1.ListAccountStatusesParams>
   stream?: mastodon.streaming.Subscription
   context?: mastodon.v2.FilterContext
   account?: mastodon.v1.Account
+  followedTags?: mastodon.v1.Tag[]
   preprocess?: (items: mastodon.v1.Status[]) => mastodon.v1.Status[]
   buffer?: number
   endMessage?: boolean | string
@@ -20,6 +21,12 @@ const virtualScroller = usePreferences('experimentalVirtualScroller')
 const showOriginSite = computed(() =>
   account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
 )
+
+function getFollowedTag(status: mastodon.v1.Status): string | null {
+  const followedTagNames = followedTags.map(tag => tag.name)
+  const followedStatusTags = status.tags.filter(tag => followedTagNames.includes(tag.name))
+  return followedStatusTags.length ? followedStatusTags[0]?.name : null
+}
 </script>
 
 <template>
@@ -32,11 +39,11 @@ const showOriginSite = computed(() =>
     <template #default="{ item, older, newer, active }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
-          <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
+          <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" />
         </DynamicScrollerItem>
       </template>
       <template v-else>
-        <StatusCard :status="item" :context="context" :older="older" :newer="newer" />
+        <StatusCard :followed-tag="getFollowedTag(item)" :status="item" :context="context" :older="older" :newer="newer" />
       </template>
     </template>
     <template v-if="context === 'account' " #done="{ items }">

components/timeline/TimelinePublic.vue

@@ -6,10 +6,12 @@ const stream = useStreaming(client => client.public.subscribe())
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'public')
 }
+
+const followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
 </script>
 
 <template>
   <div>
-    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
+    <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
   </div>
 </template>

components/timeline/TimelinePublicLocal.vue

@@ -6,10 +6,12 @@ const stream = useStreaming(client => client.public.local.subscribe())
 function reorderAndFilter(items: mastodon.v1.Status[]) {
   return reorderedTimeline(items, 'public')
 }
+
+const followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
 </script>
 
 <template>
   <div>
-    <TimelinePaginator v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
+    <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" :preprocess="reorderAndFilter" context="public" />
   </div>
 </template>

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

@@ -23,6 +23,7 @@ onReactivated(() => {
   // The user will see the previous content first, and any changes will be updated to the UI when the request is completed
   refresh()
 })
+const followedTags = (await useMasto().client.value.v1.followedTags.list({ limit: 0 }))
 </script>
 
 <template>
@@ -38,7 +39,7 @@ onReactivated(() => {
     </template>
 
     <slot>
-      <TimelinePaginator v-bind="{ paginator, stream }" context="public" />
+      <TimelinePaginator :followed-tags="followedTags" v-bind="{ paginator, stream }" context="public" />
     </slot>
   </MainContent>
 </template>