Change i18n package to paraglideJs

also refactor auth provider

src/routes/(app)/(auth)/account/change-password.tsx

@@ -1,16 +1,16 @@
 import ChangePasswordForm from '@/components/form/change-password-form';
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/(app)/(auth)/change-password')({
+export const Route = createFileRoute('/(app)/(auth)/account/change-password')({
   component: RouteComponent,
-  staticData: { breadcrumb: i18n.t('nav.change_password') },
+  staticData: { breadcrumb: () => m.nav_change_password() },
 });
 
 function RouteComponent() {
   return (
     <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
         <ChangePasswordForm />
       </div>
     </div>

src/routes/(app)/(auth)/account/index.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/account/')({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Hello "/(app)/(auth)/account/"!</div>;
+}

src/routes/(app)/(auth)/account/profile.tsx

@@ -1,16 +1,16 @@
 import ProfileForm from '@/components/form/profile-form';
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';
 
-export const Route = createFileRoute('/(app)/(auth)/profile')({
+export const Route = createFileRoute('/(app)/(auth)/account/profile')({
   component: RouteComponent,
-  staticData: { breadcrumb: i18n.t('nav.profile') },
+  staticData: { breadcrumb: () => m.nav_profile() },
 });
 
 function RouteComponent() {
   return (
     <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
         <ProfileForm />
       </div>
     </div>

src/routes/(app)/(auth)/account/route.tsx

@@ -0,0 +1,6 @@
+import { m } from '@/paraglide/messages';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/account')({
+  staticData: { breadcrumb: () => m.nav_account() },
+});

src/routes/(app)/(auth)/account/settings.tsx

@@ -0,0 +1,11 @@
+import { m } from '@/paraglide/messages';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/(app)/(auth)/account/settings')({
+  component: RouteComponent,
+  staticData: { breadcrumb: () => m.nav_settings() },
+});
+
+function RouteComponent() {
+  return <div>Hello "account/settings"!</div>;
+}

src/routes/(app)/(auth)/dashboard.tsx

@@ -1,9 +1,11 @@
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)/(auth)/dashboard')({
   component: RouteComponent,
+  staticData: { breadcrumb: () => m.nav_dashboard() },
 });
 
 function RouteComponent() {
-  return <div>Hello "/(app)/dashboard"!</div>;
+  return <div>Hello "dashboard"!</div>;
 }

src/routes/(app)/(auth)/settings.tsx

@@ -1,16 +1,16 @@
 import SettingsForm from '@/components/form/settings-form';
-import i18n from '@/lib/i18n';
+import { m } from '@/paraglide/messages';
 import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)/(auth)/settings')({
   component: RouteComponent,
-  staticData: { breadcrumb: i18n.t('nav.settings') },
+  staticData: { breadcrumb: () => m.nav_settings() },
 });
 
 function RouteComponent() {
   return (
     <div className="@container/main flex flex-1 flex-col gap-2 p-4">
-      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-gradient-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
+      <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card *:data-[slot=card]:bg-linear-to-br *:data-[slot=card]:shadow-xs grid grid-cols-1 @xl/main:grid-cols-2 @5xl/main:grid-cols-3 gap-4">
         <SettingsForm />
       </div>
     </div>

src/routes/(app)/index.tsx

@@ -1,11 +1,11 @@
-import i18n from '@/lib/i18n'
-import { createFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages';
+import { createFileRoute } from '@tanstack/react-router';
 
 export const Route = createFileRoute('/(app)/')({
   component: App,
-  staticData: { breadcrumb: i18n.t('nav.home') },
-})
+  staticData: { breadcrumb: () => m.nav_home() },
+});
 
 function App() {
-  return <div className="min-h-screen bg-linear-to-b ">Home</div>
+  return <div className="min-h-screen bg-linear-to-b ">Home</div>;
 }

src/routes/(app)/route.tsx

@@ -1,3 +1,4 @@
+import { AuthProvider } from '@/components/auth/auth-provider';
 import Header from '@/components/Header';
 import AppSidebar from '@/components/sidebar/app-sidebar';
 import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
@@ -9,12 +10,14 @@ export const Route = createFileRoute('/(app)')({
 
 function RouteComponent() {
   return (
-    <SidebarProvider defaultOpen={false}>
-      <AppSidebar />
-      <SidebarInset>
-        <Header />
-        <Outlet />
-      </SidebarInset>
-    </SidebarProvider>
+    <AuthProvider>
+      <SidebarProvider defaultOpen={false}>
+        <AppSidebar />
+        <SidebarInset>
+          <Header />
+          <Outlet />
+        </SidebarInset>
+      </SidebarProvider>
+    </AuthProvider>
   );
 }