feat(client): profile improvements

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

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

@@ -1,4 +1,5 @@
 import { useForm } from '@tanstack/react-form';
+import { useState } from 'react';
 import { toast } from 'sonner';
 import z from 'zod';
 import { Button } from '@/components/ui/button';
@@ -21,12 +22,14 @@ import {
 } from '@/components/ui/input';
 import { useUpdateUser } from '@/hooks/data/useUpdateUser';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
+import { Switch } from '../ui/switch';
 
 const formSchema = z.object({
   username: z.string().min(5),
-  nickname: z.string().min(1),
-  subtitle: z.string().min(1),
-  avatar: z.url().min(1),
+  nickname: z.string(),
+  subtitle: z.string(),
+  avatar: z.url().or(z.literal('')),
+  allow_public: z.boolean(),
 });
 export function EditProfileDialog() {
   const { data } = useUserInfo();
@@ -39,6 +42,7 @@ export function EditProfileDialog() {
       username: user.username,
       nickname: user.nickname,
       subtitle: user.subtitle,
+      allow_public: user.allow_public,
     },
     validators: {
       onBlur: formSchema,
@@ -57,8 +61,16 @@ export function EditProfileDialog() {
     },
   });
 
+  const [open, setOpen] = useState(false);
+
+  if (!open) {
+    setTimeout(() => {
+      form.reset();
+    }, 200);
+  }
+
   return (
-    <Dialog>
+    <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="outline" className="w-full" size="lg">编辑个人资料</Button>
       </DialogTrigger>
@@ -67,7 +79,7 @@ export function EditProfileDialog() {
           onSubmit={(e) => {
             e.preventDefault();
             e.stopPropagation();
-            void form.handleSubmit();
+            form.handleSubmit().then(() => setOpen(false));
           }}
           className="grid gap-4"
         >
@@ -138,13 +150,24 @@ export function EditProfileDialog() {
               </Field>
             )}
           </form.Field>
+          <form.Field name="allow_public">
+            {field => (
+              <Field orientation="horizontal" className="my-2">
+                <FieldLabel htmlFor="allow_public">公开个人资料</FieldLabel>
+                <Switch id="allow_public" onCheckedChange={e => field.handleChange(e)} defaultChecked={user.allow_public} />
+              </Field>
+            )}
+          </form.Field>
           <DialogFooter>
             <DialogClose asChild>
               <Button variant="outline">取消</Button>
             </DialogClose>
-            <DialogClose asChild>
-              <Button type="submit">保存</Button>
-            </DialogClose>
+            <form.Subscribe
+              selector={state => [state.canSubmit]}
+              children={([canSubmit]) => (
+                <Button type="submit" disabled={!canSubmit}>保存</Button>
+              )}
+            />
           </DialogFooter>
         </form>
       </DialogContent>

client/cms/src/components/profile/main-profile.tsx

@@ -1,10 +1,12 @@
+import { identicon } from '@dicebear/collection';
+import { createAvatar } from '@dicebear/core';
 import MDEditor from '@uiw/react-md-editor';
 import { isNil } from 'lodash-es';
 import { Mail, Pencil } from 'lucide-react';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import Markdown from 'react-markdown';
 import { toast } from 'sonner';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Avatar, AvatarImage } from '@/components/ui/avatar';
 import { useUpdateUser } from '@/hooks/data/useUpdateUser';
 import { useUserInfo } from '@/hooks/data/useUserInfo';
 import { base64ToUtf8, utf8ToBase64 } from '@/lib/utils';
@@ -18,6 +20,14 @@ export function MainProfile() {
   const [enableBioEdit, setEnableBioEdit] = useState(false);
   const { mutateAsync } = useUpdateUser();
 
+  const IdentIcon = useMemo(() => {
+    const avatar = createAvatar(identicon, {
+      size: 128,
+      seed: user.user_id,
+    }).toDataUri();
+    return <img src={avatar} alt="Avatar" />;
+  }, [user.user_id]);
+
   return (
     <div className="flex flex-col justify-center w-full lg:w-auto h-full lg:h-auto lg:flex-row lg:gap-8">
       <div className="flex w-full flex-row mt-2 lg:mt-0 lg:flex-col lg:w-max">
@@ -25,8 +35,7 @@ export function MainProfile() {
           <div className="flex flex-col w-full gap-3">
             <div className="flex flex-row gap-3 w-full lg:flex-col">
               <Avatar className="size-16 rounded-full border-2 border-muted lg:size-64">
-                <AvatarImage src={user.avatar} alt={user.nickname} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                {user.avatar ? <AvatarImage src={user.avatar} alt={user.nickname} /> : IdentIcon}
               </Avatar>
               <div className="flex flex-1 flex-col justify-center lg:mt-3">
                 <span className="font-semibold text-2xl" aria-hidden="true">{user.nickname}</span>
@@ -45,12 +54,12 @@ export function MainProfile() {
         {/* Bio */}
         {enableBioEdit
           ? (
-            <MDEditor
-              value={bio}
-              onChange={setBio}
-              height="100%"
-            />
-          )
+              <MDEditor
+                value={bio}
+                onChange={setBio}
+                height="100%"
+              />
+            )
           : <div className="p-6 prose dark:prose-invert"><Markdown>{bio}</Markdown></div>}
         <Button
           className="absolute bottom-4 right-4"