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

app.vue

@@ -58,7 +58,13 @@ watch(
 </script>
 
 <style>
+@import url("overlayscrollbars/overlayscrollbars.css");
+
 body {
     font-family: Inter, sans-serif;
 }
+
+.os-scrollbar .os-scrollbar-handle {
+    background: #9999;
+}
 </style>

components/composer/composer.vue

@@ -10,9 +10,9 @@
                     <Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" />
                     Quoting
                 </span>
-                <div class="mt-2 max-h-72 overflow-y-auto">
+                <OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
                     <SocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
-                </div>
+                </OverlayScrollbarsComponent>
             </div>
             <textarea :disabled="submitting" ref="textarea" v-model="content" placeholder="You can use Markdown here!"
                 class="resize-none min-h-48 prose prose-invert max-h-[70dvh] w-full p-0 focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"></textarea>
@@ -32,6 +32,7 @@
 <script lang="ts" setup>
 import type { Instance } from "~/types/mastodon/instance";
 import type { Status } from "~/types/mastodon/status";
+import { OverlayScrollbarsComponent } from "#imports";
 
 const textarea = ref<HTMLTextAreaElement | undefined>(undefined);
 const { input: content } = useTextareaAutosize({

components/sidebars/collapsible-aside.vue

@@ -2,9 +2,10 @@
     <aside v-bind="$props" class="overflow-hidden">
         <div
             :class="['flex max-h-dvh overflow-hidden w-full duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
-            <div class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
+            <OverlayScrollbarsComponent :defer="true"
+                class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
                 <slot />
-            </div>
+            </OverlayScrollbarsComponent>
             <button @click="open = !open"
                 class="h-full bg-dark-700/50 hover:bg-dark-400/50 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
                 <Icon name="tabler:chevron-right"
@@ -18,6 +19,7 @@
 <script lang="ts" setup>
 // slides in and out from the left or right
 import type { HTMLAttributes } from "vue";
+import { OverlayScrollbarsComponent } from "#imports";
 
 interface Props extends /* @vue-ignore */ HTMLAttributes {
     direction?: "left" | "right";

components/social-elements/notes/attachment.vue

@@ -12,7 +12,7 @@
     </div>
     <HeadlessTransitionRoot appear :show="lightbox" as="template">
         <HeadlessDialog @close="lightbox = false">
-            <div class="fixed inset-0 overflow-y-auto bg-black/70">
+            <div class="fixed inset-0 overflow-y-auto z-50 bg-black/70">
                 <div class="flex min-h-full items-center justify-center text-center">
                     <HeadlessTransitionChild as="template" enter="duration-100 ease-out" enter-from="opacity-0 scale-95"
                         enter-to="opacity-100 scale-100">

composables/Note.ts

@@ -11,7 +11,7 @@ export const useNote = (client: MaybeRef<Mastodon | null>, noteId: string) => {
     ref(client)
         .value?.getStatus(noteId)
         .then((res) => {
-            output.value = res.data;
+            output.value = res.data as Status;
         });
 
     return output;

composables/NoteContext.ts

@@ -0,0 +1,24 @@
+import type { Mastodon } from "megalodon";
+import type { Context } from "~/types/mastodon/context";
+
+export const useNoteContext = (
+    client: MaybeRef<Mastodon | null>,
+    noteId: MaybeRef<string | null>,
+) => {
+    if (!ref(client).value) {
+        return ref(null as Context | null);
+    }
+
+    const output = ref(null as Context | null);
+
+    watchEffect(() => {
+        if (toValue(noteId))
+            ref(client)
+                .value?.getStatusContext(toValue(noteId) ?? "")
+                .then((res) => {
+                    output.value = res.data as Context;
+                });
+    });
+
+    return output;
+};

nuxt.config.ts

@@ -99,6 +99,14 @@ export default defineNuxtConfig({
             apiHost: "https://social.lysand.org",
         },
     },
+    imports: {
+        presets: [
+            {
+                from: "overlayscrollbars-vue",
+                imports: ["OverlayScrollbarsComponent"],
+            },
+        ],
+    },
     site: {
         url: "https://social.lysand.org",
     },

package.json

@@ -40,6 +40,8 @@
         "nuxt-icon": "^0.6.10",
         "nuxt-security": "^2.0.0-beta.0",
         "nuxt-shiki": "^0.3.0",
+        "overlayscrollbars": "^2.8.0",
+        "overlayscrollbars-vue": "^0.5.9",
         "shiki": "^1.3.0",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",

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",
 });