touchscreen: improve the side panel, fix deploy env var, create room programmatically (#3806)

### 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 ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `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

.github/workflows/deploy.yml

@@ -76,3 +76,5 @@ jobs:
           R2_ACCESS_KEY_SECRET: ${{ secrets.R2_ACCESS_KEY_SECRET }}
 
           APP_ORIGIN: ${{ vars.APP_ORIGIN }}
+
+          NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER: ${{ vars.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER }}

apps/dotcom/src/pages/public-touchscreen-side-panel.tsx

@@ -1,28 +1,58 @@
-import { useEffect } from 'react'
+import { CreateRoomRequestBody, ROOM_PREFIX, Snapshot } from '@tldraw/dotcom-shared'
+import { schema } from '@tldraw/tlsync'
+import { useState } from 'react'
 import { Helmet } from 'react-helmet-async'
+import { TldrawUiButton } from 'tldraw'
 import '../../styles/globals.css'
+import { getParentOrigin } from '../utils/iFrame'
 
 export function Component() {
-	useEffect(() => {
+	const [isCreating, setIsCreating] = useState(false)
-		async function createSession() {
+	const [isSessionStarted, setIsSessionStarted] = useState(false)
-			if ('meet' in window === false) {
-				setTimeout(createSession, 100)
-				return
-			}
 
-			const session = await (window as any).meet.addon.createAddonSession({
+	async function createSession() {
-				cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER || '745824656017'}`,
+		setIsCreating(true)
-			})
+		if ('meet' in window === false) {
-			const sidePanelClient = await session.createSidePanelClient()
+			setTimeout(createSession, 100)
-			await sidePanelClient.setCollaborationStartingState({
+			return
-				sidePanelUrl: `${window.location.origin}/ts-side`,
-				mainStageUrl: `${window.location.origin}/new`,
-				additionalData: undefined,
-			})
 		}
 
-		createSession()
+		const snapshot = {
-	})
+			schema: schema.serialize(),
+			snapshot: {},
+		} satisfies Snapshot
+
+		const res = await fetch(`/api/new-room`, {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				origin: getParentOrigin(),
+				snapshot,
+			} satisfies CreateRoomRequestBody),
+		})
+
+		const response = (await res.json()) as { error: boolean; slug?: string }
+		if (!res.ok || response.error) {
+			console.error(await res.text())
+			throw new Error('Failed to upload snapshot')
+		}
+		const mainStageUrl = `${window.location.origin}/${ROOM_PREFIX}/${response.slug}`
+
+		const session = await (window as any).meet.addon.createAddonSession({
+			cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_CLOUD_PROJECT_NUMBER}`,
+		})
+		const sidePanelClient = await session.createSidePanelClient()
+		await sidePanelClient.setCollaborationStartingState({
+			sidePanelUrl: `${window.location.origin}/ts-side`,
+			mainStageUrl: mainStageUrl,
+			additionalData: undefined,
+		})
+
+		setIsCreating(false)
+		setIsSessionStarted(true)
+	}
 
 	return (
 		<>
@@ -30,7 +60,29 @@ export function Component() {
 				{/* eslint-disable @next/next/no-sync-scripts */}
 				<script src="https://www.gstatic.com/meetjs/addons/0.1.0/meet.addons.js"></script>
 			</Helmet>
-			Starting a new session…
+
+			<div
+				style={{
+					flexDirection: 'column',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					height: '100%',
+				}}
+			>
+				<TldrawUiButton
+					type="primary"
+					disabled={isCreating || isSessionStarted}
+					onClick={createSession}
+					style={{
+						color: isCreating || isSessionStarted ? 'hsl(210, 6%, 45%)' : 'hsl(214, 84%, 56%)',
+					}}
+				>
+					{isSessionStarted ? 'Room created' : 'Create a new room'}
+				</TldrawUiButton>
+				{isCreating && <div>Starting a new session…</div>}
+				{isSessionStarted && <div>Room created, click Start Activity below.</div>}
+			</div>
 		</>
 	)
 }