Revert ugly stripping by using a top level front route

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/trust/src/pages/auth/AuthLayout.tsx

@@ -1,13 +1,13 @@
 import { Logo } from "@probo/ui";
-import { Outlet } from "react-router";
+import type { PropsWithChildren } from "react";
+
+export function AuthLayout(props: PropsWithChildren) {
+  const { children } = props;
 
-export default function () {
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 min-h-screen text-txt-primary">
       <div className="bg-level-0 flex flex-col items-center justify-center">
-        <div className="w-full max-w-md px-6">
-          <Outlet />
-        </div>
+        <div className="w-full max-w-md px-6">{children}</div>
       </div>
       <div className="hidden lg:flex bg-dialog font-bold flex-col items-center justify-center p-8 text-txt-primary lg:p-10">
         <div className="flex flex-col items-center justify-center gap-4">

apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx

@@ -10,6 +10,7 @@ import { useMutation } from "react-relay";
 import { formatError } from "@probo/helpers";
 import type { VerifyMagicLinkPageMutation } from "./__generated__/VerifyMagicLinkPageMutation.graphql";
 import { getPathPrefix } from "/utils/pathPrefix";
+import { AuthLayout } from "./AuthLayout";
 
 const verifyMagicLinkMutation = graphql`
   mutation VerifyMagicLinkPageMutation($input: VerifyMagicLinkInput!) {
@@ -84,37 +85,39 @@ export default function VerifyMagicLinkPagePageMutation() {
   });
 
   return (
-    <div className="space-y-6 w-full max-w-md mx-auto">
-      <div className="space-y-2 text-center">
-        <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
-        <p className="text-txt-tertiary">
-          {__("Confirm your email address to complete registration")}
-        </p>
+    <AuthLayout>
+      <div className="space-y-6 w-full max-w-md mx-auto">
+        <div className="space-y-2 text-center">
+          <h1 className="text-3xl font-bold">{__("Email Confirmation")}</h1>
+          <p className="text-txt-tertiary">
+            {__("Confirm your email address to complete registration")}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Field
+            label={__("Confirmation Token")}
+            type="text"
+            placeholder={__("Enter your confirmation token")}
+            {...form.register("token")}
+            error={form.formState.errors.token?.message}
+            disabled={form.formState.isSubmitting}
+            help={__(
+              "The token has been automatically filled from the URL if available",
+            )}
+          />
+
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={form.formState.isSubmitting}
+          >
+            {form.formState.isSubmitting
+              ? __("Confirming...")
+              : __("Confirm Email")}
+          </Button>
+        </form>
       </div>
-
-      <form onSubmit={handleSubmit} className="space-y-4">
-        <Field
-          label={__("Confirmation Token")}
-          type="text"
-          placeholder={__("Enter your confirmation token")}
-          {...form.register("token")}
-          error={form.formState.errors.token?.message}
-          disabled={form.formState.isSubmitting}
-          help={__(
-            "The token has been automatically filled from the URL if available",
-          )}
-        />
-
-        <Button
-          type="submit"
-          className="w-full"
-          disabled={form.formState.isSubmitting}
-        >
-          {form.formState.isSubmitting
-            ? __("Confirming...")
-            : __("Confirm Email")}
-        </Button>
-      </form>
-    </div>
+    </AuthLayout>
   );
 }

apps/trust/src/routes.tsx

@@ -32,14 +32,8 @@ function ErrorBoundary({ error: propsError }: { error?: string }) {
 
 const routes = [
   {
-    path: "/auth",
-    Component: lazy(() => import("./pages/auth/AuthLayout")),
-    children: [
-      {
-        path: "verify-magic-link",
-        Component: lazy(() => import("./pages/auth/VerifyMagicLinkPage.tsx")),
-      },
-    ],
+    path: "/verify-magic-link",
+    Component: lazy(() => import("./pages/auth/VerifyMagicLinkPage.tsx")),
   },
   {
     path: "/",