Create flow: session UI + sign out

app/login/page.tsx

@@ -1,15 +1,18 @@
-import type { Metadata } from "next";
+"use client";
+
 import { Suspense } from "react";
-import LoginPageClient from "./LoginPageClient";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useTranslation } from "../contexts/MessagesContext";
+import Login from "../components/modals/Login";
+import LoginForm from "../components/modals/Login/LoginForm";
 
-export const metadata: Metadata = {
-  title: "Log in · CommunityRule",
-  robots: { index: false, follow: false },
-};
+const loginPageBgClass =
+  "min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]";
 
-function LoginFallback() {
+function LoginLoadingFallback() {
   return (
-    <div className="min-h-screen bg-[var(--color-surface-inverse-brand-primary)] flex items-center justify-center">
+    <div className={`${loginPageBgClass} flex items-center justify-center`}>
       <p className="font-inter text-[14px] text-[var(--color-content-default-primary)]">
         Loading…
       </p>
@@ -17,10 +20,43 @@ function LoginFallback() {
   );
 }
 
+/**
+ * Full-page login shell for magic-link **error redirects** (`?error=*`) and direct `/login` visits.
+ * Header **Log in** uses `AuthModalProvider` instead; this route stays for verify failures and bookmarks.
+ */
+function LoginWithSearchParams() {
+  const router = useRouter();
+  const t = useTranslation("pages.login");
+
+  return (
+    <div className={loginPageBgClass}>
+      <Login
+        isOpen
+        usePortal={false}
+        backdropVariant="solid"
+        onClose={() => {
+          router.push("/");
+        }}
+        ariaLabelledBy="login-modal-heading"
+        belowCard={
+          <Link
+            href="/"
+            className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-tertiary,#2d2d2d)] text-center hover:opacity-90"
+          >
+            {t("backToHome")}
+          </Link>
+        }
+      >
+        <LoginForm />
+      </Login>
+    </div>
+  );
+}
+
 export default function LoginPage() {
   return (
-    <Suspense fallback={<LoginFallback />}>
-      <LoginPageClient />
+    <Suspense fallback={<LoginLoadingFallback />}>
+      <LoginWithSearchParams />
     </Suspense>
   );
 }