feat: ✨ Add reply header rendering in notes

components/composer/modal.vue

@@ -37,8 +37,7 @@ useListen("note:quote", async (note) => {
     useEvent("composer:quote", note);
 });
 useListen("composer:open", () => {
-    if (tokenData.value)
-        open.value = true;
+    if (tokenData.value) open.value = true;
 });
 useListen("composer:close", () => {
     open.value = false;

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>

composables/Account.ts

@@ -3,7 +3,7 @@ import type { Account } from "~/types/mastodon/account";
 
 export const useAccount = (
     client: MaybeRef<Mastodon | null>,
-    accountId: string,
+    accountId: MaybeRef<string | null>,
 ) => {
     if (!client) {
         return ref(null as Account | null);
@@ -11,11 +11,14 @@ export const useAccount = (
 
     const output = ref(null as Account | null);
 
+    watchEffect(() => {
+        if (toValue(accountId))
             ref(client)
-        .value?.getAccount(accountId)
+                .value?.getAccount(toValue(accountId) ?? "")
                 .then((res) => {
                     output.value = res.data;
                 });
+    });
 
     return output;
 };

composables/NoteData.ts

@@ -5,6 +5,7 @@ export const useNoteData = (
     noteProp: MaybeRef<Status | undefined>,
     client: Ref<Mastodon | null>,
 ) => {
+    const isReply = computed(() => !!toValue(noteProp)?.in_reply_to_id);
     const isQuote = computed(() => !!toValue(noteProp)?.quote);
     const isReblog = computed(
         () => !isQuote.value && !!toValue(noteProp)?.reblog,
@@ -54,7 +55,7 @@ export const useNoteData = (
         );
 
         if (result?.data) {
-            useEvent("note:delete", result.data);
+            useEvent("note:delete", result.data as Status);
         }
     };
 
@@ -66,6 +67,7 @@ export const useNoteData = (
         reblog,
         reblogDisplayName,
         shouldHide,
+        isReply,
         url,
         remove,
     };