Fixed login bug again

apps/web/src/index.tsx

@@ -77,7 +77,6 @@ function Chat() {
 }
 
 const rootRoute = createRootRoute({
-  
   component: RootShell,
 });
 
@@ -99,7 +98,7 @@ const chatRoute = createRoute({
   component: Chat,
   validateSearch: z.object({
     id: z.number().optional(),
-  })
+  }),
 });
 
 const callRoute = createRoute({

apps/web/src/routes/app/layout.tsx

@@ -1,9 +1,7 @@
-import { useEffect, useState, type ReactNode } from "react";
-import { useNavigate } from "@tanstack/react-router";
+import { type ReactNode } from "react";
 
 import Sidebar from "@/components/sidebar";
 import Navbar from "@/components/navbar";
-import { useStorage } from "@tensamin/storage/context";
 
 import { motion } from "framer-motion";
 
@@ -13,40 +11,6 @@ import { motion } from "framer-motion";
  * @returns unknown.
  */
 export default function Layout(props: { children: ReactNode }) {
-  const [loggedIn, setLoggedIn] = useState<boolean | null>(null);
-
-  const { load } = useStorage();
-
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    let active = true;
-
-    void load("user_id").then((userId) => {
-      if (!active) {
-        return;
-      }
-
-      if (userId !== 0) {
-        setLoggedIn(true);
-        return;
-      }
-
-      setLoggedIn(false);
-      void navigate({
-        to: "/login",
-      });
-    });
-
-    return () => {
-      active = false;
-    };
-  }, [load, navigate]);
-
-  if (loggedIn !== true) {
-    return null;
-  }
-
   return (
     <motion.div
       className="w-full h-full flex bg-sidebar"

apps/web/src/routes/layout.tsx

@@ -8,6 +8,9 @@ import LegalWrapper from "@/features/legal/screen";
 import { Toaster } from "@tensamin/ui/cmp/sonner";
 import { TooltipProvider } from "@tensamin/ui/cmp/tooltip";
 
+import { useStorage } from "@tensamin/storage/context";
+import { useLocation, useNavigate } from "@tanstack/react-router";
+
 /**
  * Executes Layout.
  * @param props Parameter props.
@@ -45,11 +48,52 @@ export default function Layout(props: { children: ReactNode }) {
       <Toaster />
       <TooltipProvider>
         <Storage>
-          <LegalWrapper>
-            <Crypto>{props.children}</Crypto>
-          </LegalWrapper>
+          <LoginWrapper>
+            <LegalWrapper>
+              <Crypto>{props.children}</Crypto>
+            </LegalWrapper>
+          </LoginWrapper>
         </Storage>
       </TooltipProvider>
     </>
   );
 }
+
+function LoginWrapper({ children }: { children: ReactNode }) {
+  const [loggedIn, setLoggedIn] = useState<boolean | null>(null);
+
+  const { load } = useStorage();
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    let active = true;
+
+    load("user_id").then((userId) => {
+      if (!active) {
+        return;
+      }
+
+      if (userId !== 0) {
+        setLoggedIn(true);
+        return;
+      }
+
+      setLoggedIn(false);
+      navigate({
+        to: "/login",
+      });
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [load, navigate, location.pathname]);
+
+  if (loggedIn !== true && location.pathname !== "/login") {
+    return null;
+  }
+
+  return children;
+}