feat: hide redudant mentions (#1293)

components/status/StatusBody.vue

@@ -3,9 +3,11 @@ import type { mastodon } from 'masto'
 
 const {
   status,
+  newer,
   withAction = true,
 } = defineProps<{
   status: mastodon.v1.Status | mastodon.v1.StatusEdit
+  newer?: mastodon.v1.Status
   withAction?: boolean
 }>()
 
@@ -20,13 +22,15 @@ const vnode = $computed(() => {
     mentions: 'mentions' in status ? status.mentions : undefined,
     markdown: true,
     collapseMentionLink: !!('inReplyToId' in status && status.inReplyToId),
+    status: 'id' in status ? status : undefined,
+    inReplyToStatus: newer,
   })
   return vnode
 })
 </script>
 
 <template>
-  <div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }">
+  <div class="status-body" whitespace-pre-wrap break-words :class="{ 'with-action': withAction }" relative>
     <span
       v-if="status.content"
       class="content-rich line-compact" dir="auto"

components/status/StatusCard.vue

@@ -22,6 +22,7 @@ const props = withDefaults(
   }>(),
   { actions: true },
 )
+
 const userSettings = useUserSettings()
 
 const status = $computed(() => {
@@ -183,7 +184,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
         </div>
 
         <!-- Content -->
-        <StatusContent :status="status" :context="context" mb2 :class="{ 'mt-2 mb1': isDM }" />
+        <StatusContent :status="status" :newer="newer" :context="context" mb2 :class="{ 'mt-2 mb1': isDM }" />
         <StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
       </div>
     </div>

components/status/StatusContent.vue

@@ -3,6 +3,7 @@ import type { mastodon } from 'masto'
 
 const { status, context } = defineProps<{
   status: mastodon.v1.Status
+  newer?: mastodon.v1.Status
   context?: mastodon.v2.FilterContext | 'details'
 }>()
 
@@ -25,7 +26,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
       'ms--3.5 mt--1 ms--1': isDM && context !== 'details',
     }"
   >
-    <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+    <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
     <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
       <template v-if="filterPhrase" #spoiler>
         <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
@@ -33,7 +34,7 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
       <template v-else-if="status.spoilerText" #spoiler>
         <p>{{ status.spoilerText }}</p>
       </template>
-      <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+      <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
       <StatusTranslation :status="status" />
       <StatusPoll v-if="status.poll" :status="status" />
       <StatusMedia

components/status/StatusDetails.vue

@@ -3,6 +3,7 @@ import type { mastodon } from 'masto'
 
 const props = withDefaults(defineProps<{
   status: mastodon.v1.Status
+  newer?: mastodon.v1.Status
   command?: boolean
   actions?: boolean
 }>(), {
@@ -36,7 +37,7 @@ const isDM = $computed(() => status.visibility === 'direct')
         <AccountInfo :account="status.account" />
       </AccountHoverWrapper>
     </NuxtLink>
-    <StatusContent :status="status" context="details" />
+    <StatusContent :status="status" :newer="newer" context="details" />
     <div flex="~ gap-1" items-center text-secondary text-sm>
       <div flex>
         <div>{{ createdAt }}</div>