feat(ui): new replying status design (#846)

components/status/StatusReplyingTo.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import type { mastodon } from 'masto'
 
-const { status, collapsed = false, simplified = false } = defineProps<{
+const {
+  status,
+  isSelfReply = false,
+} = defineProps<{
   status: mastodon.v1.Status
-  collapsed?: boolean
-  simplified?: boolean
+  isSelfReply: boolean
 }>()
 
 const isSelf = $computed(() => status.inReplyToAccountId === status.account.id)
@@ -12,21 +14,25 @@ const account = isSelf ? computed(() => status.account) : useAccountById(status.
 </script>
 
 <template>
-  <div v-if="status.inReplyToAccountId" flex="~ wrap" gap-1 items-end>
-    <NuxtLink
-      v-if="status.inReplyToId"
-      flex="~" items-center h-auto font-bold text-sm text-secondary gap-1
-      :to="getStatusInReplyToRoute(status)"
-      :title="$t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
-    >
-      <template v-if="account">
-        <div i-ri:reply-fill :class="collapsed ? '' : 'scale-x-[-1]'" text-secondary-light />
-        <template v-if="!collapsed">
-          <AccountAvatar v-if="isSelf || simplified || status.inReplyToAccountId === currentUser?.account.id" :account="account" :link="false" w-5 h-5 mx="0.5" />
-          <AccountInlineInfo v-else :account="account" :link="false" mx="0.5" />
+  <NuxtLink
+    v-if="status.inReplyToId"
+    flex="~ gap2" items-center h-auto text-sm text-secondary
+    :to="getStatusInReplyToRoute(status)"
+    :title=" $t('status.replying_to', [account ? getDisplayName(account) : $t('status.someone')])"
+  >
+    <template v-if="isSelfReply">
+      <span btn-text p0 mb-1>{{ $t('status.show_full_thread') }}</span>
+    </template>
+    <template v-else>
+      <div i-ri-chat-1-line />
+      <i18n-t keypath="status.replying_to">
+        <template v-if="account">
+          <AccountInlineInfo :account="account" :link="false" mx1 />
         </template>
-      </template>
-      <div i-ri:question-answer-line text-secondary-light text-lg />
-    </NuxtLink>
-  </div>
+        <template v-else>
+          {{ $t('status.someone') }}
+        </template>
+      </i18n-t>
+    </template>
+  </NuxtLink>
 </template>