feat: replying to status

components/account/AccountInfo.vue

@@ -19,6 +19,7 @@ const { link = true } = defineProps<{
       <p op35 text-sm>
         @{{ account.acct }}
       </p>
+      <slot name="bottom" />
     </NuxtLink>
     <slot />
   </div>

components/account/AccountInlineInfo.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
+  <NuxtLink :href="`/@${account.acct}`" flex gap-2 items-center>
     <AccountAvatar :account="account" w-5 h-5 />
     <CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
   </NuxtLink>

components/status/StatusCard.vue

@@ -67,16 +67,19 @@ const timeago = useTimeAgo(() => status.createdAt, {
     <div v-if="rebloggedBy" pl8>
       <div flex gap-1 items-center text-gray:75 text-sm>
         <div i-ri:repeat-fill mr-1 />
-        <AccountInlineInfo :account="rebloggedBy" />
+        <AccountInlineInfo font-bold :account="rebloggedBy" />
         reblogged
       </div>
     </div>
     <AccountInfo :account="status.account">
-      <div flex-auto />
+      <template>
-      <div text-sm op50>
+        <div flex-auto />
-        {{ timeago }}
+        <div text-sm op50>
-      </div>
+          {{ timeago }}
+        </div>
+      </template>
     </AccountInfo>
+    <StatusReplyingTo :status="status" />
     <div pl14>
       <StatusBody :status="status" />
       <StatusMedia

components/status/StatusDetails.vue

@@ -18,7 +18,8 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
 <template>
   <div flex flex-col gap-2 my-4 px-4>
     <AccountInfo :account="status.account" />
-    <StatusBody :status="status" text-xl />
+    <StatusReplyingTo :status="status" />
+    <StatusBody :status="status" text-2xl />
     <StatusMedia
       v-if="status.mediaAttachments?.length"
       :status="status"

components/status/StatusReplyingTo.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { Status } from 'masto'
+
+const { status } = defineProps<{
+  status: Status
+}>()
+
+const replyingTo = asyncComputed(async () => {
+  if (status.inReplyToAccountId)
+    return await masto.accounts.fetch(status.inReplyToAccountId)
+  return null
+})
+</script>
+
+<template>
+  <template v-if="replyingTo">
+    <div
+      flex="~ gap-1.5" items-center text-sm text-gray:85
+      :title="`Replying to ${getDisplayName(replyingTo)}`"
+    >
+      <div i-ri:reply-fill rotate-180 op50 />
+      <AccountInlineInfo :account="replyingTo" />
+    </div>
+  </template>
+</template>