- added settings page and function

- add Role Ring for avatar and display role for user nav

src/components/form/profile-form.tsx

@@ -1,32 +1,20 @@
-import { authClient } from '@/lib/auth-client';
-import i18n from '@/lib/i18n';
-import { uploadProfileImage } from '@/server/profile-service';
+import { authClient, useSession } from '@/lib/auth-client';
+import { uploadProfileImage } from '@/service/profile.api';
+import { ProfileInput, profileUpdateSchema } from '@/service/profile.schema';
 import { UserCircleIcon } from '@phosphor-icons/react';
 import { useForm } from '@tanstack/react-form';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
-import z from 'zod';
-import { useAuth } from '../auth/auth-provider';
-import AvatarUser from '../AvatarUser';
+import AvatarUser from '../avatar/AvatarUser';
+import RoleBadge from '../avatar/RoleBadge';
 import { Button } from '../ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
 import { Field, FieldError, FieldGroup, FieldLabel } from '../ui/field';
 import { Input } from '../ui/input';
 
-const profileSchema = z.object({
-  name: z.string().nonempty(
-    i18n.t('profile.messages.is_required', {
-      field: i18n.t('profile.form.name'),
-    }),
-  ),
-  image: z.instanceof(File).optional(),
-});
-
-type Profile = z.infer<typeof profileSchema>;
-
-const defaultValues: Profile = {
+const defaultValues: ProfileInput = {
   name: '',
   image: undefined,
 };
@@ -34,7 +22,7 @@ const defaultValues: Profile = {
 const ProfileForm = () => {
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { data: session, isLoading } = useAuth();
+  const { data: session, isPending } = useSession();
   const queryClient = useQueryClient();
 
   const form = useForm({
@@ -43,8 +31,8 @@ const ProfileForm = () => {
       name: session?.user?.name || '',
     },
     validators: {
-      onSubmit: profileSchema,
-      onChange: profileSchema,
+      onSubmit: profileUpdateSchema,
+      onChange: profileUpdateSchema,
     },
     onSubmit: async ({ value }) => {
       try {
@@ -70,7 +58,9 @@ const ProfileForm = () => {
               if (fileInputRef.current) {
                 fileInputRef.current.value = '';
               }
-              queryClient.invalidateQueries({ queryKey: ['session'] });
+              queryClient.refetchQueries({
+                queryKey: ['auth', 'session'],
+              });
               toast.success(t('profile.messages.update_success'));
             },
             onError: (ctx) => {
@@ -82,11 +72,11 @@ const ProfileForm = () => {
     },
   });
 
-  if (isLoading) return null;
+  if (isPending) return null;
   if (!session?.user?.name) return null;
 
   return (
-    <Card className="@container/card col-span-1 @xl/main:col-span-2">
+    <Card className="@container/card col-span-1">
       <CardHeader>
         <CardTitle className="text-xl flex items-center gap-2">
           <UserCircleIcon size={20} />
@@ -104,11 +94,7 @@ const ProfileForm = () => {
         >
           <FieldGroup>
             <div className="grid grid-cols-3 gap-3">
-              <AvatarUser
-                session={session}
-                className="h-20 w-20"
-                textSize="2xl"
-              />
+              <AvatarUser className="h-20 w-20" textSize="2xl" />
               <form.Field
                 name="image"
                 children={(field) => {
@@ -173,13 +159,9 @@ const ProfileForm = () => {
             </Field>
             <Field>
               <FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
-              <Input
-                id="email"
-                name="email"
-                value={session?.user?.role || ''}
-                disabled
-                className="disabled:opacity-80"
-              />
+              <div className="flex gap-2">
+                <RoleBadge type={session?.user?.role} />
+              </div>
             </Field>
             <Field>
               <Button type="submit">{t('ui.update_btn')}</Button>