update ui and other frontend updates

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

@@ -0,0 +1,29 @@
+<script lang="ts">
+	let { form } = $props();
+	let name = $state('');
+</script>
+
+<h1>Join family</h1>
+
+<p>Enter your name to join. It must match a member slot created by your admin.</p>
+
+<form method="POST">
+	{#if form?.error}
+		<p class="error">{form.error}</p>
+	{/if}
+
+	<label>
+		Your name
+		<input name="name" bind:value={name} required placeholder="Enter your exact name" />
+	</label>
+
+	<button type="submit">Join</button>
+</form>
+
+<style>
+	form { display: flex; flex-direction: column; gap: 1rem; max-width: 400px; margin: 2rem auto; }
+	label { display: flex; flex-direction: column; gap: 0.25rem; }
+	input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; }
+	button { padding: 0.75rem; background: #6366f1; color: white; border: none; border-radius: 4px; cursor: pointer; }
+	.error { color: #dc2626; padding: 0.5rem; background: #fef2f2; border-radius: 4px; }
+</style>