feat(client): add profile bio markdown editor

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/src/components/profile/edit-profile-dialog.tsx

@@ -0,0 +1,112 @@
+import { useForm } from '@tanstack/react-form';
+import { toast } from 'sonner';
+import z from 'zod';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  Field,
+  FieldError,
+  FieldLabel,
+} from '@/components/ui/field';
+import {
+  Input,
+} from '@/components/ui/input';
+
+const formSchema = z.object({
+  email: z.string(),
+  nickname: z.string().min(1),
+  subtitle: z.string().min(1),
+});
+export function EditProfileDialog() {
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      nickname: '',
+      subtitle: '',
+    },
+    validators: {
+      onBlur: formSchema,
+    },
+    onSubmit: async ({
+      value,
+    }) => {
+      try {
+        toast(
+          <code className="text-white">{JSON.stringify(value, null, 2)}</code>,
+        );
+      }
+      catch (error) {
+        console.error('Form submission error', error);
+        toast.error('Failed to submit the form. Please try again.');
+      }
+    },
+  });
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline" className="w-full mt-4" size="lg">编辑个人资料</Button>
+      </DialogTrigger>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          void form.handleSubmit();
+        }}
+      >
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>编辑个人资料</DialogTitle>
+          </DialogHeader>
+          <Field>
+            <FieldLabel htmlFor="email">Email</FieldLabel>
+            <Input
+              id="email"
+              name="email"
+              placeholder="noa@requiem.garden"
+              value={form.getFieldValue('email')}
+              onChange={e => form.setFieldValue('email', e.target.value)}
+            />
+            <FieldError />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="nickname">昵称</FieldLabel>
+            <Input
+              id="nickname"
+              name="nickname"
+              placeholder="Noa Virellia"
+              value={form.getFieldValue('nickname')}
+              onChange={e => form.setFieldValue('nickname', e.target.value)}
+            />
+            <FieldError />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="subtitle">副标题</FieldLabel>
+            <Input
+              id="subtitle"
+              name="subtitle"
+              placeholder="天生骄傲"
+              value={form.getFieldValue('subtitle')}
+              onChange={e => form.setFieldValue('subtitle', e.target.value)}
+            />
+            <FieldError />
+          </Field>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button variant="outline">取消</Button>
+            </DialogClose>
+            <Button type="submit">保存</Button>
+          </DialogFooter>
+        </DialogContent>
+      </form>
+    </Dialog>
+  );
+}