feat: show followed hashtag badge (#3273)

Author: ayoayco

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
@@ -73,6 +74,20 @@ const forceShow = ref(false)
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 z--1 />
 
     <slot name="meta">
+      <!-- followed hashtag badge -->
+      <div flex="~ col" justify-between>
+        <div
+          v-if="!!followedTag && 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>{{ followedTag }}</span>
+        </div>
+      </div>
+
       <!-- Pinned status -->
       <div flex="~ col" justify-between>
         <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>