chore: ⬆️ Upgrade to Nuxt 4

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

@@ -0,0 +1,88 @@
+<template>
+    <div
+        v-if="loaded"
+        class="mx-auto max-w-2xl w-full rounded overflow-hidden border divide-border divide-y"
+    >
+        <div>
+            <Note
+                v-for="(note, index) of context?.ancestors"
+                :note="note"
+                :hide-actions="true"
+                :top-avatar-bar="index !== 0"
+                :bottom-avatar-bar="true"
+                :content-under-username="true"
+            />
+            <Note v-if="note" :note="note" :top-avatar-bar="(context?.ancestors.length ?? 0) > 0" />
+        </div>
+        <Note v-for="note of context?.descendants" :note="note" />
+    </div>
+
+    <div v-else class="p-4 flex items-center justify-center h-48">
+        <Spinner />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Loader } from "lucide-vue-next";
+import Spinner from "~/components/graphics/spinner.vue";
+import Note from "~/components/notes/note.vue";
+import * as m from "~~/paraglide/messages.js";
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.chunky_awake_mallard_grow(),
+        },
+    ],
+});
+
+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
+            : m.steep_sour_warthog_aim(),
+    ),
+    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>

app/pages/[username]/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="mx-auto max-w-2xl w-full space-y-2">
+        <div v-if="isLoading" class="p-4 flex items-center justify-center h-48">
+            <Loader class="size-8 animate-spin" />
+        </div>
+        <TimelineScroller v-else-if="account">
+            <div class="p-4 pb-0">
+                <AccountProfile :account="account" />
+            </div>
+            <AccountTimeline
+                v-if="accountId"
+                :id="accountId"
+                :key="accountId"
+            />
+        </TimelineScroller>
+        <NotFound v-else />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Loader } from "lucide-vue-next";
+import NotFound from "~/components/errors/NotFound.vue";
+import AccountProfile from "~/components/profiles/profile.vue";
+import AccountTimeline from "~/components/timelines/account.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+const route = useRoute();
+const username = (route.params.username as string).startsWith("@")
+    ? (route.params.username as string).substring(1)
+    : (route.params.username as string);
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.tough_nice_ox_drum(),
+        },
+    ],
+});
+
+const { account, isLoading } = useAccountFromAcct(client, username);
+const accountId = computed(() => account.value?.id ?? undefined);
+
+useSeoMeta({
+    title: computed(() =>
+        account.value ? account.value.display_name : m.steep_sour_warthog_aim(),
+    ),
+    ogTitle: computed(() =>
+        account.value ? account.value.display_name : m.steep_sour_warthog_aim(),
+    ),
+    ogImage: computed(() => (account.value ? account.value.avatar : undefined)),
+    ogType: "profile",
+    ogDescription: computed(() =>
+        account.value ? account.value.note : undefined,
+    ),
+    description: computed(() =>
+        account.value ? account.value.note : undefined,
+    ),
+    robots: computed(() => ({
+        noindex: !!account.value?.noindex,
+        nofollow: !!account.value?.noindex,
+        noarchive: !!account.value?.noindex,
+        noimageindex: !!account.value?.noindex,
+    })),
+});
+</script>

app/pages/global.vue

@@ -0,0 +1,19 @@
+<template>
+    <TimelineScroller>
+        <Global />
+    </TimelineScroller>
+</template>
+
+<script setup lang="tsx">
+import Global from "~/components/timelines/global.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.real_tame_moose_greet(),
+});
+
+definePageMeta({
+    layout: "app",
+});
+</script>

app/pages/home.vue

@@ -0,0 +1,20 @@
+<template>
+    <TimelineScroller>
+        <Home />
+    </TimelineScroller>
+</template>
+
+<script setup lang="tsx">
+import Home from "~/components/timelines/home.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.bland_chunky_sparrow_propel(),
+});
+
+definePageMeta({
+    layout: "app",
+    requiresAuth: true,
+});
+</script>

app/pages/index.vue

@@ -0,0 +1,23 @@
+<template>
+    <TimelineScroller>
+        <Home v-if="identity" />
+        <Public v-else />
+    </TimelineScroller>
+</template>
+
+<script setup lang="tsx">
+import Home from "~/components/timelines/home.vue";
+import Public from "~/components/timelines/public.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: identity.value
+        ? m.bland_chunky_sparrow_propel()
+        : m.lost_trick_dog_grace(),
+});
+
+definePageMeta({
+    layout: "app",
+});
+</script>

app/pages/loader.vue

@@ -0,0 +1,12 @@
+<template>
+    <div class="p-6 flex items-center justify-center h-dvh w-dvw">
+        <div class="flex flex-col items-center justify-center gap-4">
+            <Loader class="animate-spin size-8" />
+            <!-- <p class="text-xl font-semibold tracking-tight">Versia Frontend</p> -->
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Loader } from "lucide-vue-next";
+</script>

app/pages/local.vue

@@ -0,0 +1,19 @@
+<template>
+    <TimelineScroller>
+        <Local />
+    </TimelineScroller>
+</template>
+
+<script lang="tsx" setup>
+import Local from "~/components/timelines/local.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.crazy_game_parrot_pave(),
+});
+
+definePageMeta({
+    layout: "app",
+});
+</script>

app/pages/notifications.vue

@@ -0,0 +1,28 @@
+<template>
+    <TimelineScroller>
+        <div class="rounded overflow-hidden">
+            <Notifications />
+        </div>
+    </TimelineScroller>
+</template>
+
+<script lang="ts" setup>
+import Notifications from "~/components/timelines/notifications.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.that_patchy_mare_snip(),
+});
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: () => [
+        {
+            text: m.that_patchy_mare_snip(),
+            href: "/notifications",
+        },
+    ],
+    requiresAuth: true,
+});
+</script>

app/pages/oauth/authorize.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { Client } from "@versia/client";
+import { AlertCircle, Loader } from "lucide-vue-next";
+import { NuxtLink } from "#components";
+import UserAuthForm from "~/components/oauth/login.vue";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.fuzzy_sea_moth_absorb(),
+});
+
+const baseUrl = useRequestURL();
+const client = computed(() => new Client(new URL(baseUrl)));
+const instance = useInstanceFromClient(client);
+const {
+    error,
+    error_description,
+    redirect_uri,
+    response_type,
+    client_id,
+    scope,
+} = useUrlSearchParams();
+const hasValidUrlSearchParams =
+    redirect_uri && response_type && client_id && scope;
+</script>
+
+<template>
+    <div
+        class="container relative flex h-svh flex-col items-center justify-center md:flex-row lg:max-w-none lg:px-0"
+    >
+        <Button
+            :as="NuxtLink"
+            href="/register"
+            variant="link"
+            class="absolute right-4 top-4 md:right-8 md:top-8"
+        >
+            {{ m.noble_cute_ocelot_aim() }}
+        </Button>
+        <div
+            class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex grow bg-center bg-no-repeat bg-cover"
+            :style="{
+                backgroundImage: 'url(/images/banner.webp)',
+            }"
+        >
+            <div
+                class="absolute top-0 left-0 w-full h-72 bg-gradient-to-t from-transparent to-black/70"
+            />
+            <div class="relative z-20 flex items-center text-lg font-medium">
+                <img
+                    crossorigin="anonymous"
+                    :src="
+                        instance?.thumbnail?.url ||
+                        'https://cdn.versia.pub/branding/icon.svg'
+                    "
+                    alt="Versia logo"
+                    class="size-10 mr-4"
+                />
+                {{ instance?.title }}
+            </div>
+            <!-- <div class="relative z-20 mt-auto">
+                <blockquote class="space-y-2">
+                    <p class="text-lg">
+                        &ldquo;This library has saved me countless hours of work and
+                        helped me deliver stunning designs to my clients faster than
+                        ever before.&rdquo;
+                    </p>
+                    <footer class="text-sm">
+                        Sofia Davis
+                    </footer>
+                </blockquote>
+            </div> -->
+        </div>
+        <div class="lg:p-8 w-full max-w-xl">
+            <div
+                class="mx-auto flex w-full flex-col justify-center space-y-10 sm:w-[350px]"
+            >
+                <Alert v-if="error" variant="destructive" class="mb-4">
+                    <AlertCircle class="size-4" />
+                    <AlertTitle>{{ error }}</AlertTitle>
+                    <AlertDescription>
+                        {{ error_description }}
+                    </AlertDescription>
+                </Alert>
+                <div class="flex flex-col space-y-2 text-center">
+                    <h1 class="text-2xl font-semibold tracking-tight">
+                        {{ m.novel_fine_stork_snap() }}
+                    </h1>
+                    <p
+                        class="text-sm text-muted-foreground"
+                        v-html="
+                            m.smug_main_whale_snip({
+                                host: baseUrl.host,
+                            })
+                        "
+                    ></p>
+                </div>
+                <template v-if="instance && hasValidUrlSearchParams">
+                    <UserAuthForm :instance="instance" />
+                </template>
+                <div
+                    v-else-if="hasValidUrlSearchParams"
+                    class="p-4 flex items-center justify-center h-48"
+                >
+                    <Loader class="size-8 animate-spin" />
+                </div>
+                <Alert v-else variant="destructive" class="mb-4">
+                    <AlertCircle class="size-4" />
+                    <AlertTitle>{{
+                        m.grand_spry_goldfish_embrace()
+                    }}</AlertTitle>
+                    <AlertDescription>
+                        <p>{{ m.gray_clean_shark_comfort() }}</p>
+                        <ul class="list-disc list-inside mt-2 font-mono">
+                            <li>redirect_uri</li>
+                            <li>response_type</li>
+                            <li>client_id</li>
+                            <li>scope</li>
+                        </ul>
+                    </AlertDescription>
+                </Alert>
+            </div>
+        </div>
+    </div>
+</template>

app/pages/oauth/code.vue

@@ -0,0 +1,42 @@
+<template>
+    <div
+        class="h-svh flex items-center justify-center px-4 bg-center bg-no-repeat bg-cover"
+        :style="{
+            backgroundImage: 'url(/images/banner.webp)',
+        }"
+    >
+        <Card class="w-full max-w-md *:w-full p-6">
+            <CardHeader>
+                <CardTitle>{{ m.aware_awful_crow_spur() }}</CardTitle>
+                <CardDescription
+                    >{{ m.mushy_soft_lizard_propel() }}<br />{{
+                        m.short_arable_leopard_zap()
+                    }}
+                </CardDescription>
+            </CardHeader>
+            <CardContent class="grid">
+                <pre
+                    class="rounded bg-muted px-4 py-2 border text-center w-full font-mono text-sm font-semibold select-all"
+                    >{{ code }}</pre
+                >
+            </CardContent>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.spare_aqua_warthog_mend(),
+});
+
+const { code } = useUrlSearchParams();
+</script>

app/pages/oauth/consent.vue

@@ -0,0 +1,172 @@
+<template>
+    <div class="flex h-svh items-center justify-center px-4 py-6 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)',
+    }">
+        <form method="POST" :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')" class="w-full max-w-md">
+            <Card class="*:w-full p-6">
+                <input type="hidden" v-for="[key, value] in url.searchParams" :key="key" :name="key" :value="value" />
+                <CardHeader>
+                    <CardTitle as="h1" class="text-2xl break-words">{{
+                        m.fresh_broad_cockroach_radiate({
+                            application: application ?? "",
+                        })
+                        }}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <Card class="p-2 gap-1">
+                        <CardContent class="flex flex-col px-4 py-2 w-full">
+                            <CardTitle as="h2" class="text-lg">{{
+                                application
+                                }}</CardTitle>
+                            <a v-if="website" :href="website" target="_blank" rel="noopener noreferrer"
+                                class="underline">{{ website }}</a>
+                        </CardContent>
+                    </Card>
+                    <ul class="list-none my-6 [&>li]:mt-2">
+                        <li v-for="text in getScopeText(scopes)" :key="text[1]"
+                            class="flex flex-row gap-1 items-center">
+                            <Check class="size-4" />
+                            <h2 class="text-sm">
+                                <strong class="font-bold">{{ text[0] }}</strong>
+                                {{ text[1] }}
+                            </h2>
+                        </li>
+                    </ul>
+                    <div class="flex-col flex gap-y-1 text-sm">
+                        <p v-html="m.gross_antsy_kangaroo_succeed({
+                            application: application ?? '',
+                        })
+                            "></p>
+                        <p v-html="m.hour_close_giraffe_mop({
+                            application: application ?? '',
+                        })
+                            "></p>
+                    </div>
+                </CardContent>
+                <CardFooter class="grid gap-2">
+                    <Button variant="default" type="submit">{{
+                        m.last_spare_polecat_reside()
+                        }}</Button>
+                    <Button :as="NuxtLink" href="/" variant="secondary">{{
+                        m.soft_bold_ant_attend()
+                        }}</Button>
+                </CardFooter>
+            </Card>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { Check } from "lucide-vue-next";
+import { NuxtLink } from "#components";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.lower_factual_frog_evoke(),
+});
+
+const url = useRequestURL();
+const params = useUrlSearchParams();
+
+const application = params.application;
+const website = params.website
+    ? decodeURIComponent(params.website as string)
+    : null;
+const redirectUri = params.redirect_uri as string;
+const clientId = params.client_id;
+const scope = params.scope ? decodeURIComponent(params.scope as string) : "";
+
+const validUrlParameters = application && redirectUri && clientId && scope;
+
+const oauthScopeText: Record<string, string> = {
+    "rw:accounts": m.awake_ago_capybara_kick(),
+    "rw:blocks": m.teary_zesty_racoon_transform(),
+    "rw:bookmarks": m.whole_flaky_nuthatch_rush(),
+    "rw:favourites": m.still_spicy_lionfish_quell(),
+    "rw:filters": m.away_mean_dolphin_empower(),
+    "rw:follows": m.sleek_empty_penguin_radiate(),
+    "rw:lists": m.every_silly_racoon_lift(),
+    "rw:mutes": m.top_careful_scallop_clip(),
+    "rw:notifications": m.this_short_bulldog_walk(),
+    "r:search": m.fresh_odd_rook_forgive(),
+    "rw:statuses": m.witty_whole_capybara_pull(),
+    "w:conversations": m.agent_warm_javelina_blink(),
+    "w:media": m.dirty_red_jellyfish_ascend(),
+    "w:reports": m.crisp_vivid_seahorse_tend(),
+};
+
+const scopes = scope.split(" ");
+
+// If only read scope, then we can just say "read your account information"
+// If only write, then we can just say "write to your account information"
+// If both, then we can say "read and write to your account information"
+// Return an array of strings to display
+// "read write:accounts" returns all the fields with $VERB as read, plus the accounts field with $VERB as write
+const getScopeText = (fullScopes: string[]) => {
+    const scopeTexts: string[][] = [];
+
+    const readScopes = fullScopes.filter((scope) => scope.includes("read"));
+    const writeScopes = fullScopes.filter((scope) => scope.includes("write"));
+
+    for (const possibleScope of Object.keys(oauthScopeText)) {
+        const [scopeAction, scopeName] = possibleScope.split(":");
+
+        if (
+            scopeAction?.includes("rw") &&
+            (readScopes.includes(`read:${scopeName}`) ||
+                readScopes.find((scope) => scope === "read")) &&
+            (writeScopes.includes(`write:${scopeName}`) ||
+                writeScopes.find((scope) => scope === "write"))
+        ) {
+            if (oauthScopeText[possibleScope]?.includes("$VERB")) {
+                scopeTexts.push([
+                    m.teary_such_jay_fade(),
+                    oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
+                ]);
+            } else {
+                scopeTexts.push(["", oauthScopeText[possibleScope] ?? ""]);
+            }
+            continue;
+        }
+
+        if (
+            scopeAction?.includes("r") &&
+            (readScopes.includes(`read:${scopeName}`) ||
+                readScopes.find((scope) => scope === "read"))
+        ) {
+            if (oauthScopeText[possibleScope]?.includes("$VERB")) {
+                scopeTexts.push([
+                    m.smug_safe_warthog_dare(),
+                    oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
+                ]);
+            } else {
+                scopeTexts.push(["", oauthScopeText[possibleScope] ?? ""]);
+            }
+        }
+
+        if (
+            scopeAction?.includes("w") &&
+            (writeScopes.includes(`write:${scopeName}`) ||
+                writeScopes.find((scope) => scope === "write"))
+        ) {
+            if (oauthScopeText[possibleScope]?.includes("$VERB")) {
+                scopeTexts.push([
+                    m.loose_large_blackbird_peek(),
+                    oauthScopeText[possibleScope]?.replace("$VERB", "") ?? "",
+                ]);
+            } else {
+                scopeTexts.push(["", oauthScopeText[possibleScope] ?? ""]);
+            }
+        }
+    }
+    return scopeTexts;
+};
+</script>

app/pages/oauth/reset.vue

@@ -0,0 +1,190 @@
+<template>
+    <div
+        class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover"
+        :style="{
+            backgroundImage: 'url(/images/banner.webp)',
+        }"
+    >
+        <Card v-if="params.success" class="w-full max-w-md *:w-full">
+            <CardHeader>
+                <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
+                <CardDescription>
+                    {{ m.brave_acidic_lobster_fetch() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="grid">
+                <Button :as="NuxtLink" href="/" variant="default">
+                    {{ m.every_tangy_koala_persist() }}
+                </Button>
+            </CardFooter>
+        </Card>
+        <Card v-else class="w-full max-w-md">
+            <form
+                method="POST"
+                action="/api/auth/reset"
+                @submit="form.submitForm"
+            >
+                <CardHeader>
+                    <Alert
+                        v-if="params.login_reset"
+                        variant="default"
+                        class="mb-4"
+                    >
+                        <AlertCircle class="size-4" />
+                        <AlertTitle>{{
+                            m.east_loud_lobster_explore()
+                        }}</AlertTitle>
+                        <AlertDescription>
+                            {{ m.good_plane_gazelle_glow() }}
+                        </AlertDescription>
+                    </Alert>
+                    <Alert
+                        v-if="params.error"
+                        variant="destructive"
+                        class="mb-4"
+                    >
+                        <AlertCircle class="size-4" />
+                        <AlertTitle>{{ params.error }}</AlertTitle>
+                        <AlertDescription>
+                            {{ params.error_description }}
+                        </AlertDescription>
+                    </Alert>
+                    <CardTitle as="h1">{{
+                        m.tired_green_sloth_evoke()
+                    }}</CardTitle>
+                    <CardDescription>
+                        {{ m.solid_slow_platypus_talk() }}
+                    </CardDescription>
+                </CardHeader>
+                <CardContent class="grid gap-6">
+                    <input type="hidden" name="token" :value="params.token" />
+                    <FormField v-slot="{ componentField }" name="password">
+                        <FormItem>
+                            <FormLabel>
+                                {{ m.true_male_gadfly_stab() }}
+                            </FormLabel>
+                            <FormControl>
+                                <Input
+                                    placeholder="hunter2"
+                                    type="password"
+                                    auto-capitalize="none"
+                                    auto-correct="off"
+                                    v-bind="componentField"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                    <FormField
+                        v-slot="{ componentField }"
+                        name="password-confirm"
+                    >
+                        <FormItem>
+                            <FormLabel>
+                                {{ m.awful_cozy_jannes_rise() }}
+                            </FormLabel>
+                            <FormControl>
+                                <Input
+                                    placeholder="hunter2"
+                                    type="password"
+                                    auto-capitalize="none"
+                                    auto-correct="off"
+                                    v-bind="componentField"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                </CardContent>
+                <CardFooter class="grid gap-2 mt-4">
+                    <Button variant="default" type="submit">{{
+                        m.noisy_round_skate_yell()
+                    }}</Button>
+                </CardFooter>
+            </form>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { toTypedSchema } from "@vee-validate/zod";
+import { AlertCircle } from "lucide-vue-next";
+import { useForm } from "vee-validate";
+import { z } from "zod";
+import { NuxtLink } from "#components";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { Button } from "~/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle,
+} from "~/components/ui/card";
+import {
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.arable_arable_herring_lead(),
+});
+
+identity.value = null;
+
+const formSchema = toTypedSchema(
+    z
+        .object({
+            token: z.string(),
+            password: z
+                .string()
+                .min(3, {
+                    message: m.smart_bold_macaw_aid({
+                        count: 3,
+                    }),
+                })
+                .max(100, {
+                    message: m.dry_smug_goldfish_promise({
+                        count: 100,
+                    }),
+                }),
+            "password-confirm": z
+                .string()
+                .min(3, {
+                    message: m.smart_bold_macaw_aid({
+                        count: 3,
+                    }),
+                })
+                .max(100, {
+                    message: m.dry_smug_goldfish_promise({
+                        count: 100,
+                    }),
+                }),
+        })
+        .superRefine((data, ctx) => {
+            if (data.password !== data["password-confirm"]) {
+                ctx.addIssue({
+                    path: [...ctx.path, "password-confirm"],
+                    code: "custom",
+                    message: m.candid_fancy_leopard_prosper(),
+                });
+            }
+            return {};
+        }),
+);
+
+const params = useUrlSearchParams();
+
+const form = useForm({
+    validationSchema: formSchema,
+    initialValues: {
+        token: (params.token as string) ?? undefined,
+    },
+});
+</script>

app/pages/public.vue

@@ -0,0 +1,19 @@
+<template>
+    <TimelineScroller>
+        <Public />
+    </TimelineScroller>
+</template>
+
+<script setup lang="tsx">
+import Public from "~/components/timelines/public.vue";
+import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.lost_trick_dog_grace(),
+});
+
+definePageMeta({
+    layout: "app",
+});
+</script>

app/pages/register/index.vue

@@ -0,0 +1,200 @@
+<template>
+    <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card v-if="instance?.registrations.enabled ?? true" class="w-full max-w-md" as="form" @submit="handleSubmit">
+            <CardHeader>
+                <Alert v-if="errors.error" variant="destructive" class="mb-4">
+                    <AlertCircle class="size-4" />
+                    <AlertTitle>{{ m.vexed_each_falcon_enjoy() }}</AlertTitle>
+                    <AlertDescription>
+                        {{ errors.error }}
+                    </AlertDescription>
+                </Alert>
+                <CardTitle as="h1" class="text-2xl break-words">{{ m.wide_topical_vole_walk() }}</CardTitle>
+            </CardHeader>
+            <CardContent v-if="instance && tos" class="grid gap-6">
+                <FormField v-slot="{ componentField }" name="username">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.keen_clean_nils_slurp() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="petergriffin" type="text" auto-capitalize="none"
+                                auto-complete="idenfifier" auto-correct="off" :disabled="isLoading"
+                                v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="email">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.top_inclusive_wallaby_hack() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="peter.griffin@fox.com" type="email" auto-capitalize="none"
+                                auto-complete="email" auto-correct="off" :disabled="isLoading"
+                                v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="password">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.livid_bright_wallaby_quiz() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-complete="password"
+                                auto-correct="off" :disabled="isLoading" v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField }" name="password-confirm">
+                    <FormItem>
+                        <FormLabel>
+                            {{ m.awful_cozy_jannes_rise() }}
+                        </FormLabel>
+                        <FormControl>
+                            <Input placeholder="hunter2" type="password" auto-capitalize="none" auto-complete="password"
+                                auto-correct="off" :disabled="isLoading" v-bind="componentField" />
+                        </FormControl>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <FormField v-slot="{ componentField, value, handleChange }" name="tos">
+                    <FormItem class="space-y-0">
+                        <div class="flex flex-row gap-x-2 items-center ">
+                            <FormControl>
+                                <Checkbox v-bind="componentField" :checked="value" @update:checked="handleChange" />
+                            </FormControl>
+                            <FormLabel>
+                                <Dialog>
+                                    {{ m.plane_quick_chipmunk_rush() }} <DialogTrigger :as-child="true"><Button variant="link"
+                                            class="px-0 underline">{{ m.glad_last_crow_dine() }}</Button>.</DialogTrigger>
+                                    <DialogContent class="!max-h-[90vh] overflow-auto">
+                                        <DialogHeader>
+                                            <DialogTitle>{{ instance.title }}
+                                            </DialogTitle>
+                                        </DialogHeader>
+                                        <div v-html="tos.content" class="prose prose-sm dark:prose-invert"></div>
+                                    </DialogContent>
+                                </Dialog>
+                            </FormLabel>
+                        </div>
+                        <FormMessage />
+                    </FormItem>
+                </FormField>
+                <div class="flex-col flex gap-y-1 text-sm text-muted-foreground">
+                    <p>{{ m.happy_house_dragonfly_clap() }}</p>
+                </div>
+            </CardContent>
+            <CardFooter v-if="instance && tos" class="grid gap-2">
+                <Button variant="default" type="submit">{{ m.early_last_ocelot_praise() }}</Button>
+            </CardFooter>
+            <div v-else class="p-4 flex items-center justify-center h-48">
+                <Loader class="size-8 animate-spin" />
+            </div>
+        </Card>
+        <Card v-else class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>{{ m.wide_away_cat_taste() }}</CardTitle>
+                <CardDescription>
+                    {{ m.safe_candid_horse_jump() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="grid">
+                <Button :as="NuxtLink" href="/" variant="default">
+                    {{ m.every_tangy_koala_persist() }}
+                </Button>
+            </CardFooter>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { toTypedSchema } from "@vee-validate/zod";
+import { Client, type ResponseError } from "@versia/client";
+import { AlertCircle, Loader } from "lucide-vue-next";
+import { useForm } from "vee-validate";
+import { z } from "zod";
+import { NuxtLink } from "#components";
+import { Button } from "~/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
+import { Checkbox } from "~/components/ui/checkbox";
+import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
+import { FormItem } from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: m.early_last_ocelot_praise(),
+});
+
+const schema = toTypedSchema(
+    z
+        .object({
+            email: z.string().email(),
+            password: z.string().min(3).max(255),
+            "password-confirm": z.string().min(3).max(255),
+            username: z
+                .string()
+                .min(3)
+                .regex(/^[a-z0-9_-]+$/, m.sea_maroon_peacock_yell()),
+            reason: z.string().optional(),
+            tos: z.boolean().refine((value) => value, {
+                message: m.civil_loose_coyote_jump(),
+            }),
+        })
+        .superRefine((data, ctx) => {
+            if (data.password !== data["password-confirm"]) {
+                ctx.addIssue({
+                    path: [...ctx.path, "password-confirm"],
+                    code: "custom",
+                    message: m.candid_fancy_leopard_prosper(),
+                });
+            }
+            return {};
+        }),
+);
+
+const instance = useInstanceFromClient(new Client(client.value.url));
+const form = useForm({
+    validationSchema: schema,
+});
+
+const handleSubmit = form.handleSubmit((values) => {
+    isLoading.value = true;
+    ref(client)
+        .value?.registerAccount(
+            values.username,
+            values.email,
+            values.password,
+            true,
+            "en",
+            values.reason || "Empty reason",
+        )
+        .then(() => {
+            navigateTo("/register/success");
+        })
+        .catch((e) => {
+            const error = e as ResponseError<{
+                error: string;
+            }>;
+            errors.value = error.response.data || {};
+        })
+        .finally(() => {
+            isLoading.value = false;
+        });
+});
+
+const tos = useTos(client);
+
+const errors = ref<{
+    error?: string;
+}>({});
+
+const isLoading = ref(false);
+</script>

app/pages/register/success.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="flex h-svh items-center justify-center px-6 py-12 lg:px-8 bg-center bg-no-repeat bg-cover" :style="{
+        backgroundImage: 'url(/images/banner.webp)'
+    }">
+        <Card class="w-full max-w-md">
+            <CardHeader>
+                <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
+                <CardDescription>
+                    {{ m.left_maroon_myna_drip() }}
+                </CardDescription>
+            </CardHeader>
+            <CardFooter class="grid">
+                <Button :as="NuxtLink" href="/" variant="default">
+                    {{ m.every_tangy_koala_persist() }}
+                </Button>
+            </CardFooter>
+        </Card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+import { Button } from "~/components/ui/button";
+import { Card, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
+import * as m from "~~/paraglide/messages.js";
+
+useHead({
+    title: "Success!",
+});
+</script>