feat: v1 — persistent shell, model gateway, artifact improvements (#1462)

app/(auth)/login/page.tsx

@@ -2,36 +2,30 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useActionState, useEffect, useState } from "react";
 
-import { AuthForm } from "@/components/auth-form";
-import { SubmitButton } from "@/components/submit-button";
-import { toast } from "@/components/toast";
-import { useSession } from "@/lib/client";
+import { AuthForm } from "@/components/chat/auth-form";
+import { SubmitButton } from "@/components/chat/submit-button";
+import { toast } from "@/components/chat/toast";
 import { type LoginActionState, login } from "../actions";
 
 export default function Page() {
   const router = useRouter();
-
   const [email, setEmail] = useState("");
   const [isSuccessful, setIsSuccessful] = useState(false);
 
   const [state, formAction] = useActionState<LoginActionState, FormData>(
     login,
-    {
-      status: "idle",
-    }
+    { status: "idle" }
   );
 
-  const { refetch } = useSession();
+  const { update: updateSession } = useSession();
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: router and refetch are stable refs
+  // biome-ignore lint/correctness/useExhaustiveDependencies: router and updateSession are stable refs
   useEffect(() => {
     if (state.status === "failed") {
-      toast({
-        type: "error",
-        description: "Invalid credentials!",
-      });
+      toast({ type: "error", description: "Invalid credentials!" });
     } else if (state.status === "invalid_data") {
       toast({
         type: "error",
@@ -39,8 +33,8 @@ export default function Page() {
       });
     } else if (state.status === "success") {
       setIsSuccessful(true);
-      refetch();
-      router.push("/");
+      updateSession();
+      router.refresh();
     }
   }, [state.status]);
 
@@ -50,30 +44,23 @@ export default function Page() {
   };
 
   return (
-    <div className="flex h-dvh w-screen items-start justify-center bg-background pt-12 md:items-center md:pt-0">
-      <div className="flex w-full max-w-md flex-col gap-12 overflow-hidden rounded-2xl">
-        <div className="flex flex-col items-center justify-center gap-2 px-4 text-center sm:px-16">
-          <h3 className="font-semibold text-xl dark:text-neutral-50">
-            Sign In
-          </h3>
-          <p className="text-gray-500 text-sm dark:text-neutral-400">
-            Use your email and password to sign in
-          </p>
-        </div>
-        <AuthForm action={handleSubmit} defaultEmail={email}>
-          <SubmitButton isSuccessful={isSuccessful}>Sign in</SubmitButton>
-          <p className="mt-4 text-center text-gray-600 text-sm dark:text-neutral-400">
-            {"Don't have an account? "}
-            <Link
-              className="font-semibold text-gray-800 hover:underline dark:text-neutral-200"
-              href="/register"
-            >
-              Sign up
-            </Link>
-            {" for free."}
-          </p>
-        </AuthForm>
-      </div>
-    </div>
+    <>
+      <h1 className="text-2xl font-semibold tracking-tight">Welcome back</h1>
+      <p className="text-sm text-muted-foreground">
+        Sign in to your account to continue
+      </p>
+      <AuthForm action={handleSubmit} defaultEmail={email}>
+        <SubmitButton isSuccessful={isSuccessful}>Sign in</SubmitButton>
+        <p className="text-center text-[13px] text-muted-foreground">
+          {"No account? "}
+          <Link
+            className="text-foreground underline-offset-4 hover:underline"
+            href="/register"
+          >
+            Sign up
+          </Link>
+        </p>
+      </AuthForm>
+    </>
   );
 }