refactor: ✨ Add threaded view to Notes

components/social-elements/notes/header.vue

@@ -20,15 +20,15 @@
             </div>
         </div>
     </div>
-    <div v-else class="flex flex-row">
+    <div v-else class="flex flex-row gap-x-4">
         <UserCard :account="note?.account">
             <NuxtLink :href="accountUrl" class="shrink-0">
                 <Avatar :src="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
                     class="h-12 w-12 rounded ring-1 ring-white/5" />
                 <span class="sr-only">Account profile</span>
             </NuxtLink>
         </UserCard>
-        <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
+        <div class="flex flex-col items-start justify-around grow overflow-hidden">
             <div class="flex flex-row items-center justify-between w-full">
                 <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
                     <Skeleton :enabled="!note" :min-width="90" :max-width="170" shape="rect">

components/social-elements/notes/note.vue

@@ -1,24 +1,41 @@
 <template>
     <article
-        class="first:rounded-t last:rounded-b ring-1 relative ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
-        <!-- Overlay that blocks clicks for disabled notes -->
-        <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
-        </div>
-        <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-primary-400">
-            <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
-                <iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
-                <Avatar v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
-                    class="size-6 rounded shrink-0 ring-1 ring-white/10" />
-                <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
-            </Skeleton>
+        :class="['relative flex flex-col', borders && 'first:rounded-t last:rounded-b ring-1 ring-white/5', background && 'bg-dark-800 hover:bg-dark-700 duration-200']">
+        <note v-if="renderReplies && isReply && reply && !threadView" :thread-view="true" :element="reply"
+            :borders="false" :render-replies="false" :thread-view-top="false" />
+        <div class="relative">
+            <div v-if="threadView && outputtedNote"
+                class="h-[calc(100%-2rem)] w-[0.1rem] rounded bg-gray-600 absolute top-[4.5rem] left-12">
+            </div>
+            <div v-if="threadViewTop && reply && outputtedNote"
+                class="h-[1.5rem] w-[0.1rem] rounded bg-gray-600 absolute top-0 left-12">
+            </div>
+
+            <div :class="[padding && 'p-6', 'z-10']">
+                <!-- Overlay that blocks clicks for disabled notes -->
+                <div v-if="disabled" class="absolute z-10 inset-0 hover:cursor-not-allowed">
+                </div>
+                <div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-primary-400">
+                    <Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100"
+                        width-unit="%">
+                        <iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6"
+                            aria-hidden="true" />
+                        <Avatar v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
+                            class="size-6 rounded shrink-0 ring-1 ring-white/10" />
+                        <span><strong v-html="reblogDisplayName"></strong> reblogged</span>
+                    </Skeleton>
+                </div>
+                <!-- <ReplyHeader v-if="isReply && !threadView" :account_id="outputtedNote?.in_reply_to_account_id ?? null" /> -->
+                <Header :note="outputtedNote" :small="small" />
+                <NoteContent :class="threadView && 'ml-16'" :note="outputtedNote" :loaded="loaded" :url="url"
+                    :content="content" :is-quote="isQuote" :should-hide="shouldHide" />
+                <Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded"
+                    v-if="!small || !showInteractions">
+                    <InteractionRow v-if="showInteractions && outputtedNote && !threadView" :note="outputtedNote"
+                        :url="url" :remove="remove" />
+                </Skeleton>
+            </div>
         </div>
-        <ReplyHeader v-if="isReply" :account_id="outputtedNote?.in_reply_to_account_id ?? null" />
-        <Header :note="outputtedNote" :small="small" />
-        <NoteContent :note="outputtedNote" :loaded="loaded" :url="url" :content="content" :is-quote="isQuote"
-            :should-hide="shouldHide" />
-        <Skeleton class="!h-10 w-full mt-6" :enabled="!props.element || !loaded" v-if="!small || !showInteractions">
-            <InteractionRow v-if="showInteractions && outputtedNote" :note="outputtedNote" :url="url" :remove="remove" />
-        </Skeleton>
     </article>
 </template>
 
@@ -29,17 +46,27 @@ import Skeleton from "~/components/skeleton/Skeleton.vue";
 import Header from "./header.vue";
 import InteractionRow from "./interactions/row.vue";
 import NoteContent from "./note-content.vue";
-import ReplyHeader from "./reply-header.vue";
 
 const props = withDefaults(
     defineProps<{
-        element?: Status;
+        element?: MaybeRef<Status>;
         small?: boolean;
         disabled?: boolean;
         showInteractions?: boolean;
+        threadView?: boolean;
+        threadViewTop?: boolean;
+        renderReplies?: boolean;
+        padding?: boolean;
+        borders?: boolean;
+        background?: boolean;
     }>(),
     {
         showInteractions: true,
+        padding: true,
+        borders: true,
+        renderReplies: true,
+        background: true,
+        threadViewTop: true,
     },
 );
 
@@ -63,4 +90,9 @@ const {
     isReply,
     reblogDisplayName,
 } = useNoteData(noteRef, client, settings);
+
+const inReplyToId = computed(
+    () => outputtedNote?.value?.in_reply_to_id ?? null,
+);
+const reply = useNote(client, inReplyToId);
 </script>

composables/Note.ts

@@ -1,18 +1,24 @@
 import type { Client } from "@versia/client";
 import type { Status } from "@versia/client/types";
 
-export const useNote = (client: MaybeRef<Client | null>, noteId: string) => {
-    if (!ref(client).value) {
+export const useNote = (
+    client: MaybeRef<Client | null>,
+    noteId: MaybeRef<string | null>,
+) => {
+    if (!(toValue(client) && toValue(noteId))) {
         return ref(null as Status | null);
     }
 
     const output = ref(null as Status | null);
 
-    ref(client)
-        .value?.getStatus(noteId)
-        .then((res) => {
-            output.value = res.data;
-        });
+    watchEffect(() => {
+        toValue(noteId) &&
+            toValue(client)
+                ?.getStatus(toValue(noteId) as string)
+                .then((res) => {
+                    output.value = res.data;
+                });
+    });
 
     return output;
 };

pages/[username]/[uuid].vue

@@ -1,10 +1,10 @@
 <template>
     <div v-if="loaded" :defer="true" class="mx-auto max-w-2xl w-full pb-72">
-        <Note v-for="note of context?.ancestors" :element="note" />
+        <Note v-for="note of context?.ancestors" :render-replies="false" :thread-view="true" :borders="false" :element="note" />
         <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
-            <Note class="!rounded-none border-2 border-primary-500" v-if="note" :element="note" />
+            <Note class="!rounded-none border-2 -m-[2px] border-primary-500" v-if="note" :render-replies="false":element="note" />
         </div>
-        <Note v-for="note of context?.descendants" :element="note" />
+        <Note v-for="note of context?.descendants" :element="note" :render-replies="false" :thread-view="note.id !== context?.descendants.at(-1)?.id" :borders="false" :thread-view-top="true" />
     </div>
     <div v-else class="mx-auto max-w-2xl w-full overflow-y-auto">
         <Note v-for="_ of 5" :skeleton="true" />