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

components/preferences/code.vue

@@ -1,5 +1,9 @@
 <template>
-    <Collapsible :as="Card" class="grid items-center px-6 py-4 gap-4" v-slot="{ open }">
+    <Collapsible
+        :as="Card"
+        class="grid justify-normal items-center px-6 py-4 gap-4"
+        v-slot="{ open }"
+    >
         <div class="grid grid-cols-[1fr,auto] items-center gap-4">
             <CardHeader class="space-y-0.5 p-0">
                 <CardTitle class="text-base">
@@ -10,16 +14,27 @@
                 </CardDescription>
             </CardHeader>
             <CollapsibleTrigger :as-child="true">
-                <Button variant="outline" size="icon" class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
-                    :title="open ? 'Collapse' : 'Expand'">
+                <Button
+                    variant="outline"
+                    size="icon"
+                    class="ml-auto [&_svg]:data-[state=open]:-rotate-180"
+                    :title="open ? 'Collapse' : 'Expand'"
+                >
                     <ChevronDown class="duration-200" />
                 </Button>
             </CollapsibleTrigger>
         </div>
         <CollapsibleContent :as-child="true">
             <CardFooter class="p-1">
-                <Textarea :rows="10" :model-value="setting.value"
-                    @update:model-value="v => { setting.value = String(v) }" />
+                <Textarea
+                    :rows="10"
+                    :model-value="setting.value"
+                    @update:model-value="
+                        (v) => {
+                            setting.value = String(v);
+                        }
+                    "
+                />
             </CardFooter>
         </CollapsibleContent>
     </Collapsible>

components/preferences/emojis/emoji.vue

@@ -107,7 +107,7 @@ const editName = async () => {
             toast.success(m.gaudy_lime_bison_adore());
 
             identity.value.emojis = identity.value.emojis.map((e) =>
-                e.id === emoji.id ? data : e
+                e.id === emoji.id ? data : e,
             );
         } catch {
             toast.dismiss(id);
@@ -134,7 +134,7 @@ const _delete = async () => {
             toast.success(m.crisp_whole_canary_tear());
 
             identity.value.emojis = identity.value.emojis.filter(
-                (e) => e.id !== emoji.id
+                (e) => e.id !== emoji.id,
             );
         } catch {
             toast.dismiss(id);

components/preferences/emojis/uploader.vue

@@ -227,7 +227,7 @@ const formSchema = toTypedSchema(
                     count:
                         identity.value?.instance.configuration.emojis
                             .emoji_size_limit ?? Number.POSITIVE_INFINITY,
-                })
+                }),
             ),
         shortcode: z
             .string()
@@ -240,7 +240,7 @@ const formSchema = toTypedSchema(
                         identity.value?.instance.configuration.emojis
                             .max_emoji_shortcode_characters ??
                         Number.POSITIVE_INFINITY,
-                })
+                }),
             )
             .regex(emojiValidator),
         global: z.boolean().default(false),
@@ -250,7 +250,7 @@ const formSchema = toTypedSchema(
                 64,
                 m.home_cool_orangutan_hug({
                     count: 64,
-                })
+                }),
             )
             .optional(),
         alt: z
@@ -264,10 +264,10 @@ const formSchema = toTypedSchema(
                         identity.value?.instance.configuration.emojis
                             .max_emoji_description_characters ??
                         Number.POSITIVE_INFINITY,
-                })
+                }),
             )
             .optional(),
-    })
+    }),
 );
 const { isSubmitting, handleSubmit, values, setFieldValue } = useForm({
     validationSchema: formSchema,
@@ -288,7 +288,7 @@ const submit = handleSubmit(async (values) => {
                 alt: values.alt,
                 category: values.category,
                 global: values.global,
-            }
+            },
         );
 
         toast.dismiss(id);

components/preferences/profile/editor.vue

@@ -1,5 +1,5 @@
 <template>
-    <Card v-if="identity" class="w-full max-h-full overflow-auto">
+    <Card v-if="identity" class="w-full max-h-full block overflow-y-auto">
         <form class="p-4 grid gap-6" ref="formRef" @submit="handleSubmit">
             <FormField v-slot="{ handleChange, handleBlur }" name="banner">
                 <FormItem>
@@ -156,6 +156,7 @@
                 v-slot="{ componentField, value, handleChange }"
                 name="bot"
                 :as="Card"
+                class="block"
             >
                 <FormItem
                     class="grid grid-cols-[1fr,auto] items-center p-6 gap-2"
@@ -183,6 +184,7 @@
                 v-slot="{ componentField, value, handleChange }"
                 name="locked"
                 :as="Card"
+                class="block"
             >
                 <FormItem
                     class="grid grid-cols-[1fr,auto] items-center p-6 gap-2"
@@ -210,6 +212,7 @@
                 v-slot="{ componentField, value, handleChange }"
                 name="discoverable"
                 :as="Card"
+                class="block"
             >
                 <FormItem
                     class="grid grid-cols-[1fr,auto] items-center p-6 gap-2"
@@ -234,10 +237,6 @@
             </FormField>
         </form>
     </Card>
-    <Profile
-        :account="account"
-        class="max-w-lg overflow-auto hidden xl:block"
-    />
 </template>
 
 <script lang="ts" setup>
@@ -247,7 +246,6 @@ import { Trash } from "lucide-vue-next";
 import { useForm } from "vee-validate";
 import { toast } from "vue-sonner";
 import { z } from "zod";
-import Profile from "~/components/profiles/profile.vue";
 import { Button } from "~/components/ui/button";
 import {
     Card,
@@ -287,7 +285,7 @@ const formSchema = toTypedSchema(
                 m.civil_icy_ant_mend({
                     size: identity.value?.instance.configuration.accounts
                         .header_size_limit,
-                })
+                }),
             )
             .optional(),
         avatar: z
@@ -300,7 +298,7 @@ const formSchema = toTypedSchema(
                 m.zippy_caring_raven_edit({
                     size: identity.value?.instance.configuration.accounts
                         .avatar_size_limit,
-                })
+                }),
             )
             .or(z.string().url())
             .optional(),
@@ -308,26 +306,26 @@ const formSchema = toTypedSchema(
             .string()
             .max(
                 identity.value.instance.configuration.accounts
-                    .max_displayname_characters
+                    .max_displayname_characters,
             ),
         username: z
             .string()
             .regex(/^[a-z0-9_-]+$/, m.still_upper_otter_dine())
             .max(
                 identity.value.instance.configuration.accounts
-                    .max_username_characters
+                    .max_username_characters,
             ),
         bio: z
             .string()
             .max(
                 identity.value.instance.configuration.accounts
-                    .max_note_characters
+                    .max_note_characters,
             ),
         bot: z.boolean(),
         locked: z.boolean(),
         discoverable: z.boolean(),
         fields: z.array(z.object({ name: z.string(), value: z.string() })),
-    })
+    }),
 );
 
 const form = useForm({
@@ -367,8 +365,8 @@ const handleSubmit = form.handleSubmit(async (values) => {
         // Can't compare two arrays directly in JS, so we need to check if all fields are the same
         fields_attributes: values.fields.every((field) =>
             account.value.source?.fields?.some(
-                (f) => f.name === field.name && f.value === field.value
-            )
+                (f) => f.name === field.name && f.value === field.value,
+            ),
         )
             ? undefined
             : values.fields,
@@ -387,8 +385,8 @@ const handleSubmit = form.handleSubmit(async (values) => {
     try {
         const { data } = await client.value.updateCredentials(
             Object.fromEntries(
-                Object.entries(changedData).filter(([, v]) => v !== undefined)
-            )
+                Object.entries(changedData).filter(([, v]) => v !== undefined),
+            ),
         );
 
         toast.dismiss(id);
@@ -399,6 +397,12 @@ const handleSubmit = form.handleSubmit(async (values) => {
         }
 
         account.value = data;
+        form.resetForm({
+            values: {
+                ...form.values,
+                ...values,
+            },
+        });
     } catch (e) {
         const error = e as ResponseError<{ error: string }>;
 

components/preferences/profile/image-uploader.vue

@@ -193,25 +193,25 @@ const schema = toTypedSchema(
                     (v) => v.size <= (maxSize ?? Number.MAX_SAFE_INTEGER),
                     m.zippy_caring_raven_edit({
                         size: maxSize ?? Number.MAX_SAFE_INTEGER,
-                    })
+                    }),
                 ),
         })
         .or(
             z.object({
                 url: z.string().url(),
-            })
+            }),
         )
         .or(
             z.object({
                 email: z.string().email(),
-            })
-        )
+            }),
+        ),
 );
 
 const emailToGravatar = async (email: string) => {
     const sha256 = await crypto.subtle.digest(
         "SHA-256",
-        new TextEncoder().encode(email)
+        new TextEncoder().encode(email),
     );
 
     return `https://www.gravatar.com/avatar/${Array.from(new Uint8Array(sha256))
@@ -234,7 +234,7 @@ const submit = handleSubmit(async (values) => {
     } else if ((values as { email: string }).email) {
         emit(
             "submitUrl",
-            await emailToGravatar((values as { email: string }).email)
+            await emailToGravatar((values as { email: string }).email),
         );
     }