Change i18n package to paraglideJs

also refactor auth provider

src/components/sidebar/nav-user.tsx

@@ -1,4 +1,5 @@
-import { authClient, useSession } from '@/lib/auth-client';
+import { authClient } from '@/lib/auth-client';
+import { m } from '@/paraglide/messages';
 import {
   DotsThreeVerticalIcon,
   KeyIcon,
@@ -8,8 +9,9 @@ import {
 } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { createLink, Link, useNavigate } from '@tanstack/react-router';
-import { useTranslation } from 'react-i18next';
+import i18next from 'i18next';
 import { toast } from 'sonner';
+import { useAuth } from '../auth/auth-provider';
 import AvatarUser from '../avatar/AvatarUser';
 import RoleBadge from '../avatar/RoleBadge';
 import {
@@ -31,11 +33,10 @@ import {
 const SidebarMenuButtonLink = createLink(SidebarMenuButton);
 
 const NavUser = () => {
-  const { t } = useTranslation();
   const navigate = useNavigate();
   const { isMobile } = useSidebar();
   const queryClient = useQueryClient();
-  const { data: session } = useSession();
+  const { data: session } = useAuth();
 
   const signout = async () => {
     await authClient.signOut({
@@ -43,10 +44,14 @@ const NavUser = () => {
         onSuccess: () => {
           navigate({ to: '/' });
           queryClient.invalidateQueries({ queryKey: ['auth', 'session'] });
-          toast.success(t('loginPage.messages.logout_success'));
+          toast.success(m.login_page_messages_login_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,
+          });
         },
       },
     });
@@ -62,7 +67,7 @@ const NavUser = () => {
             tooltip="Sign In"
           >
             <SignInIcon size={28} />
-            {t('ui.login_btn')}
+            {m.ui_login_btn()}
           </SidebarMenuButtonLink>
         </SidebarMenuItem>
       </SidebarMenu>
@@ -76,14 +81,14 @@ const NavUser = () => {
             <SidebarMenuButton
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground cursor-pointer"
-              tooltip={session?.user?.name}
+              tooltip={session.user.name}
             >
               <AvatarUser className="h-8 w-8" />
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">
-                  {session?.user?.name}
+                  {session.user.name}
                 </span>
-                <span className="truncate text-xs">{session?.user?.email}</span>
+                <span className="truncate text-xs">{session.user.email}</span>
               </div>
               <DotsThreeVerticalIcon size={28} />
             </SidebarMenuButton>
@@ -101,31 +106,38 @@ const NavUser = () => {
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <div className="flex gap-2 items-center">
                     <span className="truncate font-medium">
-                      {session?.user?.name}
+                      {session.user.name}
                     </span>
                     <RoleBadge
-                      type={session?.user?.role}
+                      type={session.user.role}
                       className="text-[10px] px-2 py-0 leading-0.5 h-4"
                     />
                   </div>
-                  <span className="truncate text-xs">
-                    {session?.user?.email}
-                  </span>
+                  <span className="truncate text-xs">{session.user.email}</span>
                 </div>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem className="cursor-pointer" asChild>
-                <Link to="/profile">
+                <Link to="/account/profile">
                   <UserCircleIcon size={28} />
-                  {t('nav.account')}
+                  {m.nav_account()}
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem className="cursor-pointer" asChild>
-                <Link to="/change-password">
+                <Link to="/account/change-password">
                   <KeyIcon size={28} />
-                  {t('nav.change_password')}
+                  {m.nav_change_password()}
+                </Link>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="cursor-pointer" asChild>
+                <Link to="/account/settings">
+                  <UserCircleIcon size={28} />
+                  {m.nav_settings()}
                 </Link>
               </DropdownMenuItem>
             </DropdownMenuGroup>
@@ -133,7 +145,7 @@ const NavUser = () => {
             <DropdownMenuGroup>
               <DropdownMenuItem onSelect={signout} className="cursor-pointer">
                 <SignOutIcon size={28} />
-                {t('ui.logout_btn')}
+                {m.ui_logout_btn()}
               </DropdownMenuItem>
             </DropdownMenuGroup>
           </DropdownMenuContent>