frontend/pages/[username]/[uuid].vue

<template>
    <div v-if="loaded" class="mx-auto max-w-2xl w-full pb-72 *:rounded space-y-4 *:border *:border-border/50">
        <Note v-for="note of context?.ancestors" :note="note" />
        <Note v-if="note" :note="note" />
        <Note v-for="note of context?.descendants" :note="note" />
    </div>

    <div v-else class="p-4 flex items-center justify-center h-48">
        <Loader class="size-8 animate-spin" />
    </div>
</template>

<script setup lang="ts">
import { useTitle } from "@vueuse/core";
import { Loader } from "lucide-vue-next";
import Note from "~/components/notes/note.vue";

definePageMeta({
    layout: "app",
    breadcrumbs: [
        {
            text: "Note",
        },
    ],
});

const element = ref<HTMLElement | null>(null);
const route = useRoute();
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,
    },
);

useSeoMeta({
    title: computed(() =>
        note.value ? note.value.account.display_name : "Loading",
    ),
    description: computed(() => (note.value ? note.value.content : undefined)),
    ogImage: computed(() =>
        note.value ? note.value.media_attachments[0]?.preview_url : undefined,
    ),
    robots: computed(() => ({
        noindex: !!note.value?.account.noindex,
        nofollow: !!note.value?.account.noindex,
        noarchive: !!note.value?.account.noindex,
        noimageindex: !!note.value?.account.noindex,
    })),
});
</script>