Improve authentication recovery and mobile gameplay

components/SignIn.tsx

@@ -7,7 +7,7 @@ import { ArrowRight, Compass, Mail, ShieldCheck } from "lucide-react";
 import { api } from "./StartGame";
 import { authActionSchema, authDestination } from "@/shared/account";
 
-type Mode = "login" | "signup" | "recover" | "magic";
+type Mode = "login" | "signup" | "recover";
 export function SignIn({
   next = "/dashboard",
   initialError = "",
@@ -41,9 +41,7 @@ export function SignIn({
         ? { action: mode, email, password, displayName: name, next }
         : mode === "login"
           ? { action: mode, email, password, next }
-          : mode === "magic"
-            ? { action: mode, email, next }
-            : { action: mode, email };
+          : { action: mode, email };
     const valid = authActionSchema.safeParse(body);
     if (!valid.success) {
       setError(valid.error.issues[0].message);
@@ -75,7 +73,6 @@ export function SignIn({
     login: "Welcome back.",
     signup: "Make yourself at home.",
     recover: "Find your way back.",
-    magic: "An email, a way in.",
   }[mode];
   return (
     <div className="auth-layout">
@@ -132,11 +129,7 @@ export function SignIn({
             ? t("Choose the name people will see on your maps.")
             : mode === "recover"
               ? t("We’ll email you a link to set a new password.")
-              : mode === "magic"
-                ? t(
-                    "For existing accounts. Open the link on this device to continue.",
-                  )
-                : t("Log in with your email and password.")}
+              : t("Log in with your email and password.")}
         </p>
         <form onSubmit={submit} aria-busy={busy}>
           {mode === "signup" && (
@@ -230,7 +223,7 @@ export function SignIn({
             </p>
           )}
           <button className="button primary full" disabled={busy}>
-            {mode === "recover" || mode === "magic" ? (
+            {mode === "recover" ? (
               <Mail size={17} />
             ) : (
               <ArrowRight size={17} />
@@ -241,24 +234,10 @@ export function SignIn({
                   login: t("Log in"),
                   signup: t("Create account"),
                   recover: t("Send reset link"),
-                  magic: t("Send sign-in link"),
                 }[mode]}
           </button>
         </form>
-        {mode === "login" && (
-          <div className="auth-alternative">
-            <span>{t("Already use email links?")}</span>
-            <button
-              type="button"
-              className="text-link"
-              disabled={busy}
-              onClick={() => changeMode("magic")}
-            >
-              {t("Send me a sign-in link")}
-            </button>
-          </div>
-        )}
-        {(mode === "recover" || mode === "magic") && (
+        {mode === "recover" && (
           <button
             type="button"
             className="text-link auth-back"