fix login confusion and enforce reactive subscription after login

frontend/src/routes/[fam]/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { invalidateAll } from '$app/navigation';
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import { initRealtimePb, pb } from '$lib/pocketbase';
 	import { famStore } from '$lib/stores/fam.svelte';
 	import { chatStore } from '$lib/stores/chat.svelte';
@@ -146,20 +146,30 @@
 		);
 	});
 
-	onMount(() => {
+	// Client-only realtime wiring. Must be reactive (not onMount): after a
+	// member redeems their OTP on /{fam}/join/{username}, the 303 redirect is a
+	// client-side navigation that REUSES this layout instance, so onMount would
+	// never re-fire. Keying on data.famId ensures the PB client is re-seeded with
+	// the fresh token and famStore inits + subscribes the moment a session lands.
+	$effect(() => {
+		const famId = page.data.famId;
+		if (!famId) return;
 		initRealtimePb(page.data.pbToken || '');
-		if (page.data.famId) famStore.init(page.data.famId, page.data.fam);
+		famStore.init(famId, page.data.fam as any);
+	});
+
+	$effect(() => {
 		const chat = page.data.chat;
-		if (chat?.famId && chat?.actor) {
-			chatStore.init({
-				famId: chat.famId,
-				actorId: chat.actor.id,
-				actorType: chat.actor.type,
-				actorName: chat.actor.name,
-				actorColor: chat.actor.color || '#6366f1',
-				pbToken: page.data.pbToken || ''
-			});
-		}
+		if (!chat?.famId || !chat?.actor) return;
+		initRealtimePb(page.data.pbToken || '');
+		chatStore.init({
+			famId: chat.famId,
+			actorId: chat.actor.id,
+			actorType: chat.actor.type,
+			actorName: chat.actor.name,
+			actorColor: chat.actor.color || '#6366f1',
+			pbToken: page.data.pbToken || ''
+		});
 	});
 </script>