chore: ⬆️ Upgrade to the latest Shadcn-Vue version

pages/[username]/[uuid].vue

@@ -1,20 +1,30 @@
 <template>
-    <div v-if="loaded" class="mx-auto max-w-2xl w-full rounded overflow-hidden border divide-border divide-y">
+    <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-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="true" />
         </div>
         <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" />
+        <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";
 

pages/[username]/index.vue

@@ -4,22 +4,22 @@
             <Loader class="size-8 animate-spin" />
         </div>
         <TimelineScroller v-else-if="account">
-            <AccountProfile :account="account" />
-            <AccountTimeline v-if="accountId" :id="accountId" :key="accountId" />
+            <div class="p-4 pb-0">
+                <AccountProfile :account="account" />
+            </div>
+            <AccountTimeline
+                v-if="accountId"
+                :id="accountId"
+                :key="accountId"
+            />
         </TimelineScroller>
-        <Card v-else class="shadow-none bg-transparent border-none p-4">
-            <CardHeader class="text-center gap-y-4">
-                <CardTitle>{{ m.empty_awful_lark_dart() }}</CardTitle>
-                <CardDescription>
-                    {{ m.clean_even_mayfly_tap() }}
-                </CardDescription>
-            </CardHeader>
-        </Card>
+        <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";
@@ -64,4 +64,4 @@ useSeoMeta({
         noimageindex: !!account.value?.noindex,
     })),
 });
-</script>
+</script>

pages/global.vue

@@ -1,9 +1,7 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Global />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Global />
+    </TimelineScroller>
 </template>
 
 <script setup lang="tsx">

pages/home.vue

@@ -1,9 +1,7 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Home />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Home />
+    </TimelineScroller>
 </template>
 
 <script setup lang="tsx">

pages/index.vue

@@ -1,13 +1,10 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Home v-if="identity" />
-            <Public v-else />
-        </TimelineScroller>
-    </div>
+    <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";

pages/local.vue

@@ -1,12 +1,9 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Local />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Local />
+    </TimelineScroller>
 </template>
 
-
 <script lang="tsx" setup>
 import Local from "~/components/timelines/local.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";

pages/notifications.vue

@@ -1,11 +1,9 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <div class="rounded overflow-hidden">
-                <Notifications />
-            </div>
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <div class="rounded overflow-hidden">
+            <Notifications />
+        </div>
+    </TimelineScroller>
 </template>
 
 <script lang="ts" setup>

pages/oauth/authorize.vue

@@ -27,19 +27,36 @@ const hasValidUrlSearchParams =
 </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">
+    <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"
+        <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" />
+                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" />
+                <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">
@@ -56,7 +73,9 @@ const hasValidUrlSearchParams =
             </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]">
+            <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>
@@ -68,20 +87,29 @@ const hasValidUrlSearchParams =
                     <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>
+                    <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">
+                <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>
+                    <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">

pages/oauth/code.vue

@@ -5,7 +5,7 @@
             backgroundImage: 'url(/images/banner.webp)',
         }"
     >
-        <Card class="w-full max-w-md">
+        <Card class="w-full max-w-md *:w-full p-6">
             <CardHeader>
                 <CardTitle>{{ m.aware_awful_crow_spur() }}</CardTitle>
                 <CardDescription

pages/oauth/consent.vue

@@ -6,7 +6,7 @@
         }"
     >
         <Card
-            class="w-full max-w-md"
+            class="w-full max-w-md *:w-full p-6"
             as="form"
             method="POST"
             :action="url.pathname.replace('/oauth/consent', '/oauth/authorize')"
@@ -26,8 +26,8 @@
                 }}</CardTitle>
             </CardHeader>
             <CardContent>
-                <Card>
-                    <CardContent class="flex flex-col px-4 py-2">
+                <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>

pages/oauth/reset.vue

@@ -5,7 +5,7 @@
             backgroundImage: 'url(/images/banner.webp)',
         }"
     >
-        <Card v-if="params.success" class="w-full max-w-md">
+        <Card v-if="params.success" class="w-full max-w-md *:w-full">
             <CardHeader>
                 <CardTitle>{{ m.late_mean_capybara_fade() }}</CardTitle>
                 <CardDescription>
@@ -57,13 +57,7 @@
                     </CardDescription>
                 </CardHeader>
                 <CardContent class="grid gap-6">
-                    <FormField v-slot="{ componentField }" name="token">
-                        <FormItem>
-                            <FormControl>
-                                <input type="hidden" v-bind="componentField" />
-                            </FormControl>
-                        </FormItem>
-                    </FormField>
+                    <input type="hidden" name="token" :value="params.token" />
                     <FormField v-slot="{ componentField }" name="password">
                         <FormItem>
                             <FormLabel>
@@ -102,7 +96,7 @@
                         </FormItem>
                     </FormField>
                 </CardContent>
-                <CardFooter class="grid gap-2">
+                <CardFooter class="grid gap-2 mt-4">
                     <Button variant="default" type="submit">{{
                         m.noisy_round_skate_yell()
                     }}</Button>
@@ -182,7 +176,7 @@ const formSchema = toTypedSchema(
                 });
             }
             return {};
-        })
+        }),
 );
 
 const params = useUrlSearchParams();

pages/preferences/account.vue

@@ -1,21 +1,34 @@
 <template>
-    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto w-full space-y-6">
-        <div :class="cn('grid gap-2', profileEditor?.dirty && 'grid-cols-[1fr,auto]')">
-            <h1 class="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl capitalize">
-                {{ m.tasty_late_termite_sew() }}
-            </h1>
-            <Button v-if="profileEditor?.dirty" @click="profileEditor.submitForm">Save</Button>
-        </div>
-        <div class="grid xl:grid-cols-[1fr,auto] gap-4 *:max-h-[80vh]">
-            <ProfileEditor ref="profileEditor" />
-        </div>
+    <div class="md:px-8 px-4 py-2 max-w-7xl mx-auto relative">
+        <ProfileEditor ref="profileEditor" />
+
+        <Transition name="slide-down">
+            <Alert
+                v-if="profileEditor?.dirty"
+                class="grid grid-cols-[1fr_auto] mb-4 absolute top-4 inset-x-4 w-[calc(100%-2rem)]"
+            >
+                <Check class="size-4" />
+                <AlertTitle>Unsaved changes</AlertTitle>
+                <AlertDescription class="col-start-1">
+                    Click "apply" to save your changes.
+                </AlertDescription>
+                <!-- Add pl-4 because Alert is adding additional padding, which we don't want -->
+                <Button
+                    variant="secondary"
+                    @click="profileEditor?.submitForm"
+                    class="w-full col-start-2 row-start-1 row-span-2 !pl-4"
+                    >Apply</Button
+                >
+            </Alert>
+        </Transition>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
 // biome-ignore lint/style/useImportType: <explanation>
 import ProfileEditor from "~/components/preferences/profile/editor.vue";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { Button } from "~/components/ui/button";
 import * as m from "~/paraglide/messages.js";
 
@@ -34,4 +47,4 @@ definePageMeta({
 });
 
 const profileEditor = ref<InstanceType<typeof ProfileEditor> | null>(null);
-</script>
+</script>

pages/preferences/emojis.vue

@@ -68,14 +68,14 @@ const permissions = usePermissions();
 const canUpload = computed(
     () =>
         permissions.value.includes(RolePermission.ManageOwnEmojis) ||
-        permissions.value.includes(RolePermission.ManageEmojis)
+        permissions.value.includes(RolePermission.ManageEmojis),
 );
 
 const emojis = computed(
     () =>
         identity.value?.emojis?.filter((emoji) =>
-            emoji.shortcode.toLowerCase().includes(search.value.toLowerCase())
-        ) ?? []
+            emoji.shortcode.toLowerCase().includes(search.value.toLowerCase()),
+        ) ?? [],
 );
 
 const search = ref("");

pages/public.vue

@@ -1,9 +1,7 @@
 <template>
-    <div class="mx-auto max-w-2xl w-full">
-        <TimelineScroller>
-            <Public />
-        </TimelineScroller>
-    </div>
+    <TimelineScroller>
+        <Public />
+    </TimelineScroller>
 </template>
 
 <script setup lang="tsx">