feat: replace login route with auth modal

- Add AuthModal to root layout driven by ?modal=auth search param
- Update multiplayer and play beforeLoad redirects to use modal
- Update NavAuth and Hero links to use modal
- Delete login route and NavLogin component

apps/web/src/routes/__root.tsx

@@ -1,18 +1,38 @@
-import { createRootRoute, Outlet } from "@tanstack/react-router";
+import {
+  createRootRoute,
+  Outlet,
+  useNavigate,
+  useSearch,
+} from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
 import { Toaster } from "sonner";
 import Navbar from "../components/navbar/NavBar";
 import NotFound from "../components/NotFound";
 import RootError from "../components/RootError";
+import { AuthModal } from "../components/auth/AuthModal";
 import { AuthModalSearchSchema } from "@lila/shared";
 
 const RootLayout = () => {
+  const navigate = useNavigate();
+  const { modal, redirect } = useSearch({ from: "__root__" });
+
+  const handleClose = () => {
+    void navigate({ to: "/", search: {} });
+  };
+
+  const handleSuccess = () => {
+    void navigate({ to: (redirect as string) ?? "/", search: {} });
+  };
+
   return (
     <>
       <Navbar />
       <main className="max-w-5xl mx-auto px-6 py-8">
         <Outlet />
       </main>
+      {modal === "auth" && (
+        <AuthModal onClose={handleClose} onSuccess={handleSuccess} />
+      )}
       <Toaster richColors position="top-center" />
       <TanStackRouterDevtools />
     </>

apps/web/src/routes/login.tsx

@@ -1,46 +0,0 @@
-import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { signIn, useSession } from "../lib/auth-client";
-
-const LoginPage = () => {
-  const { data: session, isPending } = useSession();
-  const navigate = useNavigate();
-
-  if (isPending) return <div className="p-4">Loading...</div>;
-
-  if (session) {
-    void navigate({ to: "/" });
-    return null;
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-4 p-8">
-      <h1 className="text-2xl font-bold">sign in to lila</h1>
-      <button
-        className="w-64 rounded-2xl bg-(--color-text) px-4 py-3 text-white font-bold hover:opacity-90 shadow-sm hover:shadow-md transition-all"
-        onClick={() => {
-          void signIn
-            .social({ provider: "github", callbackURL: window.location.origin })
-            .catch((err) => {
-              console.error("GitHub sign in error:", err);
-            });
-        }}
-      >
-        Continue with GitHub
-      </button>
-      <button
-        className="w-64 rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-bold hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
-        onClick={() => {
-          void signIn
-            .social({ provider: "google", callbackURL: window.location.origin })
-            .catch((err) => {
-              console.error("Google sign in error:", err);
-            });
-        }}
-      >
-        Continue with Google
-      </button>
-    </div>
-  );
-};
-
-export const Route = createFileRoute("/login")({ component: LoginPage });

apps/web/src/routes/multiplayer.tsx

@@ -14,7 +14,10 @@ export const Route = createFileRoute("/multiplayer")({
   beforeLoad: async () => {
     const { data: session } = await authClient.getSession();
     if (!session) {
-      throw redirect({ to: "/login" });
+      throw redirect({
+        to: "/",
+        search: { modal: "auth", redirect: "/multiplayer" },
+      });
     }
     return { session };
   },

apps/web/src/routes/play.tsx

@@ -132,7 +132,7 @@ export const Route = createFileRoute("/play")({
   beforeLoad: async () => {
     const { data: session } = await authClient.getSession();
     if (!session) {
-      throw redirect({ to: "/login" });
+      throw redirect({ to: "/", search: { modal: "auth", redirect: "/play" } });
     }
   },
 });