From dd626479280ba67179ab7e64463febee85b8b9f8 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 11 May 2024 16:33:40 -1000
Subject: [PATCH] feat: :sparkles: Add reply header rendering in notes

---
 components/composer/modal.vue                 |  3 +--
 .../social-elements/notes/note-content.vue    |  2 +-
 components/social-elements/notes/note.vue     |  2 ++
 .../social-elements/notes/reply-header.vue    | 24 +++++++++++++++++++
 composables/Account.ts                        | 15 +++++++-----
 composables/NoteData.ts                       |  4 +++-
 6 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 components/social-elements/notes/reply-header.vue

diff --git a/components/composer/modal.vue b/components/composer/modal.vue
index 7ecb889..52932de 100644
--- a/components/composer/modal.vue
+++ b/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;
diff --git a/components/social-elements/notes/note-content.vue b/components/social-elements/notes/note-content.vue
index d65f645..4486bb1 100644
--- a/components/social-elements/notes/note-content.vue
+++ b/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;
diff --git a/components/social-elements/notes/note.vue b/components/social-elements/notes/note.vue
index 99840ae..c02cbbe 100644
--- a/components/social-elements/notes/note.vue
+++ b/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);
 
diff --git a/components/social-elements/notes/reply-header.vue b/components/social-elements/notes/reply-header.vue
new file mode 100644
index 0000000..e55901d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/composables/Account.ts b/composables/Account.ts
index d32f1b8..e84dcee 100644
--- a/composables/Account.ts
+++ b/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);
 
-    ref(client)
-        .value?.getAccount(accountId)
-        .then((res) => {
-            output.value = res.data;
-        });
+    watchEffect(() => {
+        if (toValue(accountId))
+            ref(client)
+                .value?.getAccount(toValue(accountId) ?? "")
+                .then((res) => {
+                    output.value = res.data;
+                });
+    });
 
     return output;
 };
diff --git a/composables/NoteData.ts b/composables/NoteData.ts
index 64998fa..571df36 100644
--- a/composables/NoteData.ts
+++ b/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,
     };