Change i18n package to paraglideJs

also refactor auth provider

src/components/form/profile-form.tsx

@@ -1,12 +1,14 @@
-import { authClient, useSession } from '@/lib/auth-client';
+import { authClient } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
 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 i18next from 'i18next';
 import { useRef } from 'react';
-import { useTranslation } from 'react-i18next';
 import { toast } from 'sonner';
+import { useAuth } from '../auth/auth-provider';
 import AvatarUser from '../avatar/AvatarUser';
 import RoleBadge from '../avatar/RoleBadge';
 import { Button } from '../ui/button';
@@ -20,9 +22,8 @@ const defaultValues: ProfileInput = {
 };
 
 const ProfileForm = () => {
-  const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { data: session, isPending } = useSession();
+  const { data: session, isPending } = useAuth();
   const queryClient = useQueryClient();
 
   const form = useForm({
@@ -61,10 +62,14 @@ const ProfileForm = () => {
               queryClient.refetchQueries({
                 queryKey: ['auth', 'session'],
               });
-              toast.success(t('profile.messages.update_success'));
+              toast.success(m.profile_messages_update_success(), {
+                richColors: true,
+              });
             },
             onError: (ctx) => {
-              toast.error(t(`backend.${ctx.error.code}` as any));
+              toast.error(i18next.t(`backend.${ctx.error.code}` as any), {
+                richColors: true,
+              });
             },
           },
         );
@@ -80,7 +85,7 @@ const ProfileForm = () => {
       <CardHeader>
         <CardTitle className="text-xl flex items-center gap-2">
           <UserCircleIcon size={20} />
-          {t('profile.ui.title')}
+          {m.profile_ui_title()}
         </CardTitle>
       </CardHeader>
       <CardContent>
@@ -130,7 +135,7 @@ const ProfileForm = () => {
                 return (
                   <Field data-invalid={isInvalid}>
                     <FieldLabel htmlFor={field.name}>
-                      {t('profile.form.name')}
+                      {m.profile_form_name()}
                     </FieldLabel>
                     <Input
                       id={field.name}
@@ -148,7 +153,7 @@ const ProfileForm = () => {
               }}
             />
             <Field>
-              <FieldLabel htmlFor="name">{t('profile.form.email')}</FieldLabel>
+              <FieldLabel htmlFor="name">{m.profile_form_email()}</FieldLabel>
               <Input
                 id="email"
                 name="email"
@@ -158,13 +163,13 @@ const ProfileForm = () => {
               />
             </Field>
             <Field>
-              <FieldLabel htmlFor="name">{t('profile.form.role')}</FieldLabel>
+              <FieldLabel htmlFor="name">{m.profile_form_role()}</FieldLabel>
               <div className="flex gap-2">
                 <RoleBadge type={session?.user?.role} />
               </div>
             </Field>
             <Field>
-              <Button type="submit">{t('ui.update_btn')}</Button>
+              <Button type="submit">{m.ui_update_btn()}</Button>
             </Field>
           </FieldGroup>
         </form>