From 48196026ee2f8cb6cb2f79f5f8ce0cad7d00c3ea Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 7 Dec 2024 17:19:41 +0100
Subject: [PATCH] feat: :sparkles: Add profile editor

---
 bun.lockb                                 | Bin 451808 -> 451808 bytes
 components/preferences/profile/editor.vue | 322 ++++++++++++++++++++++
 components/sidebars/left-sidebar.vue      |   4 +
 components/ui/form/FormItem.vue           |  21 +-
 package.json                              |   2 +-
 pages/preferences/account.vue             |  36 +++
 6 files changed, 377 insertions(+), 8 deletions(-)
 create mode 100644 components/preferences/profile/editor.vue
 create mode 100644 pages/preferences/account.vue

diff --git a/bun.lockb b/bun.lockb
index 8fc2b1a9d5695abd51d001d440fb63eee674e148..e967536a1c37a254a45ab4c27b8b8ee28f12f6fd 100755
GIT binary patch
delta 161
zcmV;S0ABy#$s6Fw8;~v_XPS%+eIi4eA`*5q)n?rCJgsmE=`Ip`DE?RCF139nfljqf
z0lGVr2xTybI6MKjI6MNKvOsYRQeyNh2RctIKxM4@bt(wUbddmK6iKJ<;?YO0_y<d;
z)C!6L`{Se~`dcQO>Z9l_<urf|N#Q0&K9Xz~IcSF!?*g|K?*q4z0W^orfdq%mfd#kC
Pfd+&_0W`N##RiTa#7soD

delta 161
zcmV;S0ABy#$s6Fw8;~v_tVEszZR<5>hOwwZ93~Zz9Qn~P<C!QwINH15*@Nitfljqf
z0lGVrh)XbsI6MKjI6MNKvOqa476h<bkDx5X@XjR&RL{~Rn5lKyiYP)G#NT%Lu$iWd
zE9Z{SdfHI^mW&?Hett99k@Zc~6UeQyuFixT)bWQE?*g|K?*q4z0W*iqfdq%mfd#kC
Pfd+&_0W-H!#RiTae)LVH

diff --git a/components/preferences/profile/editor.vue b/components/preferences/profile/editor.vue
new file mode 100644
index 0000000..cc20df4
--- /dev/null
+++ b/components/preferences/profile/editor.vue
@@ -0,0 +1,322 @@
+<template>
+    <Card v-if="identity" class="w-full max-h-full overflow-auto">
+        <form class="p-4 grid gap-6" ref="formRef" @submit="handleSubmit">
+            <FormField v-slot="{ handleChange, handleBlur }" name="banner">
+                <FormItem>
+                    <FormLabel>
+                        Banner
+                    </FormLabel>
+                    <FormControl>
+                        <Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
+                    </FormControl>
+                    <FormDescription>
+                        Recommended size: over 1500x500px
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ handleChange, handleBlur }" name="avatar">
+                <FormItem>
+                    <FormLabel>
+                        Avatar
+                    </FormLabel>
+                    <FormControl>
+                        <Input type="file" accept="image/*" @change="handleChange" @blur="handleBlur" />
+                    </FormControl>
+                    <FormDescription>
+                        Recommended size: 400x400px
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                    <FormLabel>
+                        Display Name
+                    </FormLabel>
+                    <FormControl>
+                        <Input v-bind="componentField" />
+                    </FormControl>
+                    <FormDescription>
+                        Custom emojis can be used here.
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="username">
+                <FormItem>
+                    <FormLabel>
+                        Username
+                    </FormLabel>
+                    <FormControl>
+                        <Input v-bind="componentField" />
+                    </FormControl>
+                    <FormDescription>
+                        Changing this will break all links to your profile.
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField }" name="bio">
+                <FormItem>
+                    <FormLabel>
+                        Bio
+                    </FormLabel>
+                    <FormControl>
+                        <Textarea rows="10" v-bind="componentField" />
+                    </FormControl>
+                    <FormDescription>
+                        Markdown and custom emojis are supported.
+                    </FormDescription>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ value, handleChange }" name="fields">
+                <FormItem>
+                    <FormLabel>
+                        Custom Fields
+                    </FormLabel>
+                    <FormControl>
+                        <div class="grid gap-4">
+                            <div v-for="(field, index) in value" :key="index" class="grid items-center grid-cols-[auto,repeat(3,minmax(0,1fr))] gap-2">
+                                <Button variant="destructive" size="icon" @click="handleChange([...value.slice(0, index), ...value.slice(index + 1)])">
+                                    <Trash />
+                                </Button>
+                                <Input v-model="field.name" placeholder="Name" @update:model-value="e => {
+                                    handleChange([...value.slice(0, index), { name: e, value: field.value }, ...value.slice(index + 1)]);
+                                }" />
+                                <Input v-model="field.value" placeholder="Value" class="col-span-2" @update:model-value="e => {
+                                    handleChange([...value.slice(0, index), { name: field.name, value: e }, ...value.slice(index + 1)]);
+                                }" />
+                            </div>
+                            <Button type="button" variant="secondary" @click="handleChange([...value, { name: '', value: '' }])">
+                                Add Field
+                            </Button>
+                        </div>
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField, value, handleChange }" name="bot" :as="Card">
+                <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                    <CardHeader class="space-y-0.5 p-0">
+                        <FormLabel :as="CardTitle">
+                            Mark account as bot
+                        </FormLabel>
+                        <CardDescription>
+                            Is this account sending automated messages?
+                        </CardDescription>
+                    </CardHeader>
+                    <FormControl>
+                        <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField, value, handleChange }" name="locked" :as="Card">
+                <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                    <CardHeader class="space-y-0.5 p-0">
+                        <FormLabel :as="CardTitle">
+                            Enable follow requests
+                        </FormLabel>
+                        <CardDescription>
+                            Will require approval for new followers.
+                        </CardDescription>
+                    </CardHeader>
+                    <FormControl>
+                        <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+
+            <FormField v-slot="{ componentField, value, handleChange }" name="discoverable" :as="Card">
+                <FormItem class="grid grid-cols-[1fr,auto] items-center p-6 gap-2">
+                    <CardHeader class="space-y-0.5 p-0">
+                        <FormLabel :as="CardTitle">
+                            Allow account discovery
+                        </FormLabel>
+                        <CardDescription>
+                            Allow your account to be found in search results.
+                        </CardDescription>
+                    </CardHeader>
+                    <FormControl>
+                        <Switch :checked="value" @update:checked="handleChange" v-bind="componentField" />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            </FormField>
+        </form>
+    </Card>
+    <Profile :account="account" class="max-w-lg overflow-auto hidden xl:block" />
+</template>
+
+<script lang="ts" setup>
+import { toTypedSchema } from "@vee-validate/zod";
+import type { ResponseError } from "@versia/client";
+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, CardTitle } from "~/components/ui/card";
+import {
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+} from "~/components/ui/form";
+import { Input } from "~/components/ui/input";
+import { Switch } from "~/components/ui/switch";
+import { Textarea } from "~/components/ui/textarea";
+
+if (!identity.value) {
+    throw new Error("Identity not found.");
+}
+
+const account = ref(identity.value.account);
+
+const formSchema = toTypedSchema(
+    z.object({
+        banner: z
+            .instanceof(File)
+            .refine(
+                (v) =>
+                    v.size <=
+                    (identity.value?.instance.configuration.accounts
+                        .header_size_limit ?? 0),
+                `Banner must be less than ${identity.value?.instance.configuration.accounts.header_size_limit} bytes`,
+            )
+            .optional(),
+        avatar: z
+            .instanceof(File)
+            .refine(
+                (v) =>
+                    v.size <=
+                    (identity.value?.instance.configuration.accounts
+                        .avatar_size_limit ?? 0),
+                `Avatar must be less than ${identity.value?.instance.configuration.accounts.avatar_size_limit} bytes`,
+            )
+            .optional(),
+        name: z
+            .string()
+            .max(
+                identity.value.instance.configuration.accounts
+                    .max_displayname_characters,
+            ),
+        username: z
+            .string()
+            .regex(
+                /^[a-z0-9_-]+$/,
+                "Username can only contain lowercase letters, numbers, underscores and hyphens",
+            )
+            .max(
+                identity.value.instance.configuration.accounts
+                    .max_username_characters,
+            ),
+        bio: z
+            .string()
+            .max(
+                identity.value.instance.configuration.accounts
+                    .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({
+    validationSchema: formSchema,
+    initialValues: {
+        bio: account.value.source?.note ?? "",
+        bot: account.value.bot ?? false,
+        locked: account.value.locked ?? false,
+        discoverable: account.value.discoverable ?? true,
+        username: account.value.username,
+        name: account.value.display_name,
+        fields: account.value.source?.fields ?? [],
+    },
+});
+
+const handleSubmit = form.handleSubmit(async (values) => {
+    const id = toast.loading("Updating profile...");
+
+    const changedData = {
+        display_name:
+            values.name === account.value.display_name
+                ? undefined
+                : values.name,
+        username:
+            values.username === account.value.username
+                ? undefined
+                : values.username,
+        note:
+            values.bio === account.value.source?.note ? undefined : values.bio,
+        bot: values.bot === account.value.bot ? undefined : values.bot,
+        locked:
+            values.locked === account.value.locked ? undefined : values.locked,
+        discoverable:
+            values.discoverable === account.value.discoverable
+                ? undefined
+                : values.discoverable,
+        // 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,
+            ),
+        )
+            ? undefined
+            : values.fields,
+        header: values.banner ? values.banner : undefined,
+        avatar: values.avatar ? values.avatar : undefined,
+    };
+
+    if (
+        Object.values(changedData).filter((v) => v !== undefined).length === 0
+    ) {
+        toast.dismiss(id);
+        toast.error("No changes");
+        return;
+    }
+
+    try {
+        const { data } = await client.value.updateCredentials(
+            Object.fromEntries(
+                Object.entries(changedData).filter(([, v]) => v !== undefined),
+            ),
+        );
+
+        toast.dismiss(id);
+        toast.success("Profile updated");
+
+        if (identity.value) {
+            identity.value.account = data;
+        }
+
+        account.value = data;
+    } catch (e) {
+        const error = e as ResponseError<{ error: string }>;
+
+        toast.dismiss(id);
+    }
+});
+
+const formRef = ref<HTMLFormElement | null>(null);
+
+defineExpose({
+    submitForm: () => handleSubmit(),
+    dirty: computed(() => form.meta.value.dirty),
+});
+</script>
\ No newline at end of file
diff --git a/components/sidebars/left-sidebar.vue b/components/sidebars/left-sidebar.vue
index 5e02672..9ccdf31 100644
--- a/components/sidebars/left-sidebar.vue
+++ b/components/sidebars/left-sidebar.vue
@@ -133,6 +133,10 @@ const data = {
             url: "/preferences",
             icon: Settings2,
             items: [
+                {
+                    title: "Account",
+                    url: "/preferences/account",
+                },
                 {
                     title: "Appearance",
                     url: "/preferences/appearance",
diff --git a/components/ui/form/FormItem.vue b/components/ui/form/FormItem.vue
index da875ca..75f7dd5 100644
--- a/components/ui/form/FormItem.vue
+++ b/components/ui/form/FormItem.vue
@@ -1,19 +1,26 @@
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
-import { useId } from "radix-vue";
+import { Primitive, type PrimitiveProps, useId } from "radix-vue";
 import { type HTMLAttributes, provide } from "vue";
 import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
 
-const props = defineProps<{
-    class?: HTMLAttributes["class"];
-}>();
+const props = withDefaults(
+    defineProps<
+        PrimitiveProps & {
+            class?: HTMLAttributes["class"];
+        }
+    >(),
+    {
+        as: "div",
+    },
+);
 
 const id = useId();
 provide(FORM_ITEM_INJECTION_KEY, id);
 </script>
 
 <template>
-  <div :class="cn('space-y-2', props.class)">
-    <slot />
-  </div>
+    <Primitive :as="props.as" :as-child="props.asChild" :class="cn('space-y-2', props.class)">
+        <slot />
+    </Primitive>
 </template>
diff --git a/package.json b/package.json
index 24accec..a7b0dcb 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
         "@nuxtjs/color-mode": "3.5.2",
         "@tailwindcss/typography": "^0.5.15",
         "@vee-validate/zod": "^4.14.7",
-        "@versia/client": "0.1.3",
+        "@versia/client": "0.1.4",
         "@vite-pwa/nuxt": "^0.10.6",
         "@vueuse/core": "^12.0.0",
         "@vueuse/nuxt": "^12.0.0",
diff --git a/pages/preferences/account.vue b/pages/preferences/account.vue
new file mode 100644
index 0000000..644c1a6
--- /dev/null
+++ b/pages/preferences/account.vue
@@ -0,0 +1,36 @@
+<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">
+                Account
+            </h1>
+            <Button class="ml-auto" 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>
+</template>
+
+<script lang="ts" setup>
+import { cn } from "@/lib/utils";
+// biome-ignore lint/style/useImportType: <explanation>
+import ProfileEditor from "~/components/preferences/profile/editor.vue";
+import { Button } from "~/components/ui/button";
+
+useHead({
+    title: "Account Preferences",
+});
+
+definePageMeta({
+    layout: "app",
+    breadcrumbs: [
+        {
+            text: "Preferences",
+        },
+    ],
+    requiresAuth: true,
+});
+
+const profileEditor = ref<InstanceType<typeof ProfileEditor> | null>(null);
+</script>
\ No newline at end of file