Bring back `/new` for creating new rooms when not inside iframes. (#3605)

This brings back the `/new` route for creating new rooms. But just when
we are not inside an iframe.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [ ] `sdk` — Changes the tldraw SDK
- [x] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

apps/dotcom/src/components/ErrorPage/ErrorPage.tsx

@@ -7,7 +7,6 @@ export function ErrorPage({
 }: {
 	icon?: boolean
 	messages: { header: string; para1: string; para2?: string }
-	redirectTo?: string
 }) {
 	const inIframe = isInIframe()
 	return (

apps/dotcom/src/pages/history-snapshot.tsx

@@ -32,7 +32,6 @@ export function Component() {
 					header: 'Page not found',
 					para1: 'The page you are looking does not exist or has been moved.',
 				}}
-				redirectTo="/"
 			/>
 		)
 

apps/dotcom/src/pages/history.tsx

@@ -29,7 +29,6 @@ export function Component() {
 					header: 'Page not found',
 					para1: 'The page you are looking does not exist or has been moved.',
 				}}
-				redirectTo="/"
 			/>
 		)
 	return (

apps/dotcom/src/pages/new.tsx

@@ -0,0 +1,40 @@
+import { Snapshot } from '@tldraw/dotcom-shared'
+import { schema } from '@tldraw/tlsync'
+import { Navigate } from 'react-router-dom'
+import '../../styles/globals.css'
+import { ErrorPage } from '../components/ErrorPage/ErrorPage'
+import { defineLoader } from '../utils/defineLoader'
+import { isInIframe } from '../utils/iFrame'
+import { getNewRoomResponse } from '../utils/sharing'
+
+const { loader, useData } = defineLoader(async (_args) => {
+	if (isInIframe()) return null
+
+	const res = await getNewRoomResponse({
+		schema: schema.serialize(),
+		snapshot: {},
+	} satisfies Snapshot)
+
+	const response = (await res.json()) as { error: boolean; slug?: string }
+	if (!res.ok || response.error || !response.slug) {
+		return null
+	}
+	return { slug: response.slug }
+})
+
+export { loader }
+
+export function Component() {
+	const data = useData()
+	if (!data)
+		return (
+			<ErrorPage
+				icon
+				messages={{
+					header: 'Page not found',
+					para1: 'The page you are looking does not exist or has been moved.',
+				}}
+			/>
+		)
+	return <Navigate to={`/r/${data.slug}`} />
+}

apps/dotcom/src/pages/not-found.tsx

@@ -8,7 +8,6 @@ export function Component() {
 				header: 'Page not found',
 				para1: 'The page you are looking does not exist or has been moved.',
 			}}
-			redirectTo="/"
 		/>
 	)
 }

apps/dotcom/src/routes.tsx

@@ -30,7 +30,7 @@ export const router = createRoutesFromElements(
 		<Route errorElement={<DefaultErrorFallback />}>
 			<Route path="/" lazy={() => import('./pages/root')} />
 			<Route path="/r" element={<Navigate to="/" />} />
-			<Route path="/new" element={<Navigate to="/" />} />
+			<Route path="/new" lazy={() => import('./pages/new')} />
 			<Route path="/r/:roomId" lazy={() => import('./pages/public-multiplayer')} />
 			<Route path="/r/:boardId/history" lazy={() => import('./pages/history')} />
 			<Route

apps/dotcom/src/utils/sharing.ts

@@ -74,6 +74,19 @@ async function getSnapshotLink(
 	})
 }
 
+export async function getNewRoomResponse(snapshot: Snapshot) {
+	return await fetch(SNAPSHOT_UPLOAD_URL, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body: JSON.stringify({
+			origin: getParentOrigin(),
+			snapshot,
+		} satisfies CreateRoomRequestBody),
+	})
+}
+
 export function useSharing(): TLUiOverrides {
 	const navigate = useNavigate()
 	const id = useSearchParams()[0].get('id') ?? undefined
@@ -107,20 +120,10 @@ export function useSharing(): TLUiOverrides {
 							const data = await getRoomData(editor, addToast, msg, uploadFileToAsset)
 							if (!data) return
 
-							const res = await fetch(SNAPSHOT_UPLOAD_URL, {
-								method: 'POST',
-								headers: {
-									'Content-Type': 'application/json',
-								},
-								body: JSON.stringify({
-									origin: getParentOrigin(),
-									snapshot: {
-										schema: editor.store.schema.serialize(),
-										snapshot: data,
-									} satisfies Snapshot,
-								} satisfies CreateRoomRequestBody),
+							const res = await getNewRoomResponse({
+								schema: editor.store.schema.serialize(),
+								snapshot: data,
 							})
-
 							const response = (await res.json()) as { error: boolean; slug?: string }
 							if (!res.ok || response.error) {
 								console.error(await res.text())