From 9a77c7da2a260dff705968d6ad37bd97d21f8ada Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Wed, 23 Nov 2022 08:00:52 +0800
Subject: [PATCH] feat: replying to status

---
 components/account/AccountInfo.vue       |  1 +
 components/account/AccountInlineInfo.vue |  2 +-
 components/status/StatusCard.vue         | 13 +++++++-----
 components/status/StatusDetails.vue      |  3 ++-
 components/status/StatusReplyingTo.vue   | 25 ++++++++++++++++++++++++
 5 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 components/status/StatusReplyingTo.vue

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index ab229e8a..f2118b5f 100644
--- a/components/account/AccountInfo.vue
+++ b/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>
diff --git a/components/account/AccountInlineInfo.vue b/components/account/AccountInlineInfo.vue
index 5dd91468..bd37117d 100644
--- a/components/account/AccountInlineInfo.vue
+++ b/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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 2f413b37..fc7d79c1 100644
--- a/components/status/StatusCard.vue
+++ b/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 />
-      <div text-sm op50>
-        {{ timeago }}
-      </div>
+      <template>
+        <div flex-auto />
+        <div text-sm op50>
+          {{ timeago }}
+        </div>
+      </template>
     </AccountInfo>
+    <StatusReplyingTo :status="status" />
     <div pl14>
       <StatusBody :status="status" />
       <StatusMedia
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index d4e5d193..ad0f7c56 100644
--- a/components/status/StatusDetails.vue
+++ b/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"
diff --git a/components/status/StatusReplyingTo.vue b/components/status/StatusReplyingTo.vue
new file mode 100644
index 00000000..0a75f671
--- /dev/null
+++ b/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>