feat: implement AppLayoutGuard for onboarding redirection

apps/web/src/components/layout/AppLayoutGuard.tsx

@@ -0,0 +1,34 @@
+import { useEffect } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useNavigate } from '@tanstack/react-router'
+import { Loader2 } from 'lucide-react'
+import { useAuth } from '../../context/AuthProvider'
+import { getOnboardingStatus } from '../../lib/api'
+import { RootLayout } from './RootLayout'
+
+export function AppLayoutGuard() {
+  const { user, isPending } = useAuth()
+  const navigate = useNavigate()
+
+  const statusQuery = useQuery({
+    queryKey: ['onboarding', 'status'],
+    queryFn: getOnboardingStatus,
+    enabled: !!user,
+    staleTime: 5 * 60 * 1000,
+  })
+
+  useEffect(() => {
+    if (!user || !statusQuery.data || statusQuery.data.completed) return
+    void navigate({ to: '/onboarding', replace: true })
+  }, [user, statusQuery.data, navigate])
+
+  if (isPending || (user && statusQuery.isPending)) {
+    return (
+      <div className="flex min-h-dvh items-center justify-center">
+        <Loader2 className="size-6 animate-spin text-foreground/40" />
+      </div>
+    )
+  }
+
+  return <RootLayout />
+}