feat: ✨ Add reply header rendering in notes

components/social-elements/notes/note-content.vue

@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Status } from '~/types/mastodon/status';
+import type { Status } from "~/types/mastodon/status";
 
 const props = defineProps<{
     content: string | null;

components/social-elements/notes/note.vue

@@ -12,6 +12,7 @@
                 <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
             </Skeleton>
         </div>
+        <SocialElementsNotesReplyHeader v-if="isReply" :account_id="note?.in_reply_to_account_id ?? null" />
         <SocialElementsNotesHeader :note="note" :small="small" />
         <SocialElementsNotesNoteContent :note="note" :loaded="loaded" :url="url" :content="content" :is-quote="isQuote"
             :should-hide="shouldHide" />
@@ -104,6 +105,7 @@ const {
     url,
     isQuote,
     reblog,
+    isReply,
     reblogDisplayName,
 } = useNoteData(ref(props.note), client);
 

components/social-elements/notes/reply-header.vue

@@ -0,0 +1,24 @@
+<template>
+    <NuxtLink :href="`/@${account?.acct}`"
+        class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
+        <Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
+            <Icon name="tabler:arrow-back-up" class="size-6" aria-hidden="true" />
+            <span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
+                Replying to
+                <AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"
+                    class="size-5 rounded inline-flex shrink-0 ring-1 ring-white/10" />
+                <strong class="line-clamp-1">{{ account?.display_name || account?.acct }}</strong>
+            </span>
+        </Skeleton>
+    </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+    account_id: string | null;
+}>();
+
+const tokenData = useTokenData();
+const client = useMegalodon(tokenData);
+const account = useAccount(client, props.account_id);
+</script>