feat: update dependencies and enhance authentication flow with context hooks

src/routes/__root.tsx

@@ -1,31 +1,46 @@
-import { Link, Outlet, createRootRoute, useNavigate } from '@tanstack/react-router'
+// import { LayoutMain } from '@/modules/layout'
+const LayoutMain = null;
+import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { Toaster } from '@/components/ui/sonner'
 import { AuthProvider } from '@/pages/auth'
 import { TooltipProvider } from '@/components/ui/tooltip'
+import { Home } from 'lucide-react';
 export const Route = createRootRoute({
   component: RootComponent,
 })
 
+const BaseHeader = (props: { main?: React.ComponentType | null }) => {
+  if (props.main) {
+    const MainComponent = props.main
+    return <MainComponent />
+  }
+  return (
+    <>
+      <div className="flex gap-2 text-lg w-full h-12 items-center">
+        <div className='px-2'>
+          <Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+          >
+            <Home className='w-5 h-5' />
+          </Link>
+        </div>
+      </div>
+      <hr />
+    </>
+  )
+}
 function RootComponent() {
   return (
     <div className='h-full overflow-hidden'>
-
-      <div className="p-2 flex gap-2 text-lg">
-        <Link
-          to="/"
-          activeProps={{
-            className: 'font-bold',
-          }}
-          activeOptions={{ exact: true }}
-        >
-          Home
-        </Link>
-      </div>
-      <hr />
-      <AuthProvider>
+      <BaseHeader main={LayoutMain} />
+      <AuthProvider mustLogin={true}>
         <TooltipProvider>
-          <main className='h-[calc(100%-4rem)] overflow-auto scrollbar'>
+          <main className='h-[calc(100%-3rem)] overflow-auto scrollbar'>
             <Outlet />
           </main>
         </TooltipProvider>
@@ -33,6 +48,5 @@ function RootComponent() {
       <TanStackRouterDevtools position="bottom-right" />
       <Toaster />
     </div>
-
   )
 }