feat: ✨ Add new virtual scrollbar system, resolve note context

pages/[username]/[uuid].vue

@@ -1,21 +1,51 @@
 <template>
     <ClientOnly>
-        <div class="max-h-dvh min-h-dvh overflow-y-auto">
-            <SocialElementsNotesNote v-if="note" :note="note" />
-        </div>
+        <OverlayScrollbarsComponent v-if="loaded" :defer="true" class="max-h-dvh min-h-dvh overflow-y-auto pb-72">
+            <SocialElementsNotesNote v-for="note of context?.ancestors" :note="note" />
+            <div ref="element" class="first:rounded-t last:rounded-b overflow-hidden">
+                <SocialElementsNotesNote class="!rounded-none border-2 border-pink-500" v-if="note" :note="note" />
+            </div>
+            <SocialElementsNotesNote v-for="note of context?.descendants" :note="note" />
+        </OverlayScrollbarsComponent>
+        <OverlayScrollbarsComponent :defer="true" v-else class="max-h-dvh min-h-dvh overflow-y-auto">
+            <SocialElementsNotesNote v-for="_ of 5" :skeleton="true" />
+        </OverlayScrollbarsComponent>
     </ClientOnly>
 </template>
 
 <script setup lang="ts">
+import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });
 
+const element = ref<HTMLElement | null>(null);
 const route = useRoute();
 const client = useMegalodon();
 const uuid = route.params.uuid as string;
 
 const note = useNote(client, uuid);
+const noteId = computed(() => note.value?.id ?? null);
+const context = useNoteContext(client, noteId);
+const loaded = computed(() => note.value !== null && context.value !== null);
+
+// If ancestors changes, scroll down so that the initial note stays at the same place
+watch(
+    [() => context.value?.ancestors, loaded],
+    async () => {
+        if (context.value?.ancestors.length === 0) return;
+        if (!loaded.value) return;
+        await nextTick();
+        // Wait for 200ms
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        element.value?.scrollIntoView({
+            behavior: "smooth",
+        });
+    },
+    {
+        immediate: true,
+    },
+);
 
 useServerSeoMeta({
     title: note.value?.account.display_name,

pages/home.vue

@@ -1,12 +1,13 @@
 <template>
-    <div class="max-h-dvh overflow-y-auto">
+    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
         <TimelinesTimelineScroller>
             <TimelinesHome />
         </TimelinesTimelineScroller>
-    </div>
+    </OverlayScrollbarsComponent>
 </template>
 
 <script setup lang="ts">
+import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/local.vue

@@ -1,12 +1,13 @@
 <template>
-    <div class="max-h-dvh overflow-y-auto">
+    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
         <TimelinesTimelineScroller>
             <TimelinesLocal />
         </TimelinesTimelineScroller>
-    </div>
+    </OverlayScrollbarsComponent>
 </template>
 
 <script lang="ts" setup>
+import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/notifications.vue

@@ -1,6 +1,6 @@
 <template>
     <ClientOnly>
-        <div class="max-h-dvh overflow-y-auto">
+        <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
             <div class="shrink-0 p-10 h-dvh" v-if="!tokenData">
                 <button type="button"
                     class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
@@ -15,11 +15,12 @@
             <TimelinesTimelineScroller v-else>
                 <TimelinesNotifications />
             </TimelinesTimelineScroller>
-        </div>
+        </OverlayScrollbarsComponent>
     </ClientOnly>
 </template>
 
 <script lang="ts" setup>
+import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });

pages/public.vue

@@ -1,12 +1,13 @@
 <template>
-    <div class="max-h-dvh overflow-y-auto">
+    <OverlayScrollbarsComponent :defer="true" class="max-h-dvh overflow-y-auto">
         <TimelinesTimelineScroller>
             <TimelinesPublic />
         </TimelinesTimelineScroller>
-    </div>
+    </OverlayScrollbarsComponent>
 </template>
 
 <script setup lang="ts">
+import { OverlayScrollbarsComponent } from "#imports";
 definePageMeta({
     layout: "app",
 });