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

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("");