feat: join page flow with onboard guard

src/routes/api/auth/+server.ts

@@ -25,10 +25,13 @@ async function handleJoin(body: Record<string, string>) {
 	if (!group) return json({ error: 'Invalid invite code' }, { status: 404 });
 
 	const userId = uuid();
+	// Use a unique placeholder phone so the unique constraint isn't violated
+	// by multiple pre-onboarding users. Onboarding replaces this with the real phone.
+	const placeholderPhone = `pending:${userId}`;
 	await db.insert(users).values({
 		id: userId,
 		username: '',
-		phone: '',
+		phone: placeholderPhone,
 		groupId: group.id,
 		createdAt: new Date()
 	});

src/routes/join/[code]/+page.server.ts

@@ -0,0 +1,59 @@
+import { redirect, fail } from '@sveltejs/kit';
+import type { PageServerLoad, Actions } from './$types';
+import { validateInviteCode, createSessionToken } from '$lib/server/auth';
+import { db } from '$lib/server/db';
+import { users, notificationPreferences } from '$lib/server/db/schema';
+import { v4 as uuid } from 'uuid';
+import { checkRateLimit } from '$lib/server/rate-limit';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const group = await validateInviteCode(params.code);
+	if (!group) {
+		redirect(302, '/join');
+	}
+
+	return {
+		groupName: group.name,
+		inviteCode: params.code
+	};
+};
+
+export const actions: Actions = {
+	default: async ({ params, cookies, getClientAddress }) => {
+		const ip = getClientAddress();
+		const result = checkRateLimit(`join:${ip}`, { windowMs: 15 * 60 * 1000, maxRequests: 5 });
+		if (!result.allowed) {
+			return fail(429, { error: 'Too many attempts. Please try again later.' });
+		}
+
+		const group = await validateInviteCode(params.code);
+		if (!group) {
+			redirect(302, '/join');
+		}
+
+		const userId = uuid();
+		// Use a unique placeholder phone so the unique constraint isn't violated
+		// by multiple pre-onboarding users. Onboarding replaces this with the real phone.
+		const placeholderPhone = `pending:${userId}`;
+		await db.insert(users).values({
+			id: userId,
+			username: '',
+			phone: placeholderPhone,
+			groupId: group.id,
+			createdAt: new Date()
+		});
+
+		await db.insert(notificationPreferences).values({ userId });
+
+		const token = createSessionToken(userId);
+		cookies.set('scrolly_session', token, {
+			httpOnly: true,
+			secure: true,
+			sameSite: 'lax',
+			path: '/',
+			maxAge: 60 * 60 * 24 * 365 * 10
+		});
+
+		redirect(302, '/onboard');
+	}
+};

src/routes/join/[code]/+page.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import iconSvg from '$lib/assets/icon.svg?raw';
+
+	const { data } = $props();
+	let loading = $state(false);
+	let mounted = $state(false);
+
+	onMount(() => {
+		mounted = true;
+	});
+</script>
+
+<svelte:head>
+	<title>Join {data.groupName} — scrolly</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Unbounded:wght@800;900&family=Space+Mono:wght@400;700&display=swap"
+		rel="stylesheet"
+	/>
+</svelte:head>
+
+<div class="join-page" class:mounted>
+	<div class="bg-noise"></div>
+
+	<div class="content">
+		<div class="brand">
+			<!-- eslint-disable-next-line svelte/no-at-html-tags -- trusted local SVG asset -->
+			<div class="brand-logo" aria-label="scrolly">{@html iconSvg}</div>
+			<h1>scrolly</h1>
+			<p class="tagline">your crew's <span class="tagline-accent">private</span> feed</p>
+		</div>
+
+		<div class="form-card">
+			<p class="invite-text">You've been invited to</p>
+			<p class="group-name">{data.groupName}</p>
+
+			<form method="POST" onsubmit={() => (loading = true)}>
+				<button type="submit" class="btn-primary" disabled={loading}>
+					{#if loading}
+						<span class="spinner"></span>
+						Joining...
+					{:else}
+						Join Group
+					{/if}
+				</button>
+			</form>
+		</div>
+	</div>
+
+	<p class="footer-note">a private place to share videos with your people.</p>
+</div>
+
+<style>
+	.join-page {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-height: 100dvh;
+		padding: var(--space-xl);
+		padding-bottom: calc(var(--space-xl) + 72px);
+		background: var(--bg-primary);
+		overflow-y: auto;
+	}
+
+	.bg-noise {
+		position: absolute;
+		inset: 0;
+		opacity: 0.04;
+		pointer-events: none;
+		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+		background-repeat: repeat;
+		background-size: 256px 256px;
+	}
+
+	.content {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 100%;
+		max-width: 380px;
+		opacity: 0;
+		transform: translateY(12px);
+		transition:
+			opacity 0.6s ease,
+			transform 0.6s ease;
+	}
+
+	.mounted .content {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.brand {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: var(--space-3xl);
+	}
+
+	.brand-logo {
+		width: 72px;
+		height: 72px;
+		margin-bottom: var(--space-lg);
+		color: var(--accent-primary);
+	}
+
+	.brand-logo :global(svg) {
+		width: 100%;
+		height: 100%;
+	}
+
+	h1 {
+		font-family: 'Unbounded', var(--font-display), sans-serif;
+		font-size: 2.75rem;
+		font-weight: 900;
+		letter-spacing: -0.02em;
+		line-height: 1;
+		margin: 0;
+		color: var(--text-primary);
+		text-transform: lowercase;
+	}
+
+	.tagline {
+		font-family: 'Space Mono', monospace;
+		font-size: 0.8125rem;
+		font-weight: 400;
+		color: var(--text-muted);
+		margin: var(--space-md) 0 0;
+		letter-spacing: 0.02em;
+	}
+
+	.tagline-accent {
+		color: var(--accent-primary);
+		font-weight: 700;
+	}
+
+	.form-card {
+		width: 100%;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-xl);
+		padding: var(--space-2xl);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.invite-text {
+		font-size: 0.9375rem;
+		color: var(--text-secondary);
+		margin: 0 0 var(--space-sm);
+		text-align: center;
+	}
+
+	.group-name {
+		font-family: var(--font-display);
+		font-size: 1.5rem;
+		font-weight: 700;
+		color: var(--accent-primary);
+		margin: 0 0 var(--space-xl);
+		text-align: center;
+	}
+
+	form {
+		width: 100%;
+	}
+
+	.btn-primary {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--space-sm);
+		width: 100%;
+		padding: var(--space-md) var(--space-xl);
+		background: var(--accent-primary);
+		color: var(--bg-primary);
+		border: none;
+		border-radius: var(--radius-full);
+		font-size: 1rem;
+		font-weight: 700;
+		font-family: var(--font-display);
+		cursor: pointer;
+		transition:
+			transform 0.1s ease,
+			opacity 0.2s ease;
+	}
+
+	.btn-primary:active:not(:disabled) {
+		transform: scale(0.97);
+	}
+
+	.btn-primary:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+
+	.spinner {
+		width: 16px;
+		height: 16px;
+		border: 2px solid color-mix(in srgb, var(--bg-primary) 20%, transparent);
+		border-top-color: var(--bg-primary);
+		border-radius: var(--radius-full);
+		animation: spin 0.6s linear infinite;
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.footer-note {
+		position: relative;
+		z-index: 1;
+		margin-top: var(--space-3xl);
+		font-family: 'Space Mono', monospace;
+		font-size: 0.6875rem;
+		color: var(--text-muted);
+		text-align: center;
+		letter-spacing: 0.03em;
+	}
+</style>

src/routes/onboard/+page.server.ts

@@ -0,0 +1,24 @@
+import { redirect } from '@sveltejs/kit';
+import type { ServerLoad } from '@sveltejs/kit';
+import { getUserIdFromCookies, getUserWithGroup } from '$lib/server/auth';
+
+export const load: ServerLoad = async ({ request }) => {
+	const userId = getUserIdFromCookies(request.headers.get('cookie'));
+
+	if (!userId) {
+		// No session — they haven't joined via invite code
+		redirect(302, '/join');
+	}
+
+	const data = await getUserWithGroup(userId);
+
+	if (!data || data.user.removedAt) {
+		// Invalid or removed user
+		redirect(302, '/join');
+	}
+
+	if (data.user.username) {
+		// Already onboarded — send to feed
+		redirect(302, '/');
+	}
+};