update ui and other frontend updates

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

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { page } from '$app/state';
+	import { onMount } from 'svelte';
+	import { initPbFromCookie } from '$lib/pocketbase';
+	import { famStore } from '$lib/stores/fam.svelte';
+	import { Sidebar, TopNav, Footer } from '$lib/components';
+	import type { Session } from '$lib/types';
+
+	let { children, data } = $props();
+	let session = $state<Session | null>(data.session);
+	let isParent = $state(data.isParent);
+	let role = $state(data.role);
+	let famName = $derived(famStore.initialized ? (famStore.fam as any)?.name || page.params.fam : page.params.fam);
+
+	// Claim toast watcher (admin only)
+	let claimToast = $state('');
+	let prevClaimedIds = new Set<string>();
+	let mounted = false;
+
+	$effect(() => {
+		if (!session || !famStore.initialized) return;
+		const rewards = famStore.rewards;
+		if (!mounted) {
+			mounted = true;
+			prevClaimedIds = new Set(rewards.filter((r: any) => r.claimed).map((r: any) => r.id));
+			return;
+		}
+		for (const r of rewards) {
+			if (r.claimed && !prevClaimedIds.has(r.id)) {
+				const m = famStore.memberMap().get(r.memberId);
+				const name = m?.name || 'Unknown';
+				claimToast = `Claim made by ${name}`;
+				setTimeout(() => claimToast = '', 5000);
+			}
+		}
+		prevClaimedIds = new Set(rewards.filter((r: any) => r.claimed).map((r: any) => r.id));
+	});
+
+	onMount(() => {
+		initPbFromCookie();
+		if (session) {
+			famStore.init(session.famId);
+		}
+	});
+</script>
+
+<div class="app-shell">
+	<Sidebar {famName} session={data.session} {isParent} {role} />
+	<TopNav />
+	<main class="app-main">
+		{@render children()}
+	</main>
+	{#if claimToast}
+		<div class="claim-toast">{claimToast}</div>
+	{/if}
+	<Footer />
+</div>
+
+<style>
+	.claim-toast { position: fixed; top: 3.5rem; right: 1.5rem; background: #059669; color: white; padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.85rem; z-index: 999; box-shadow: 0 4px 12px rgba(0,0,0,0.15); animation: fadein 0.2s; }
+	.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
+	.app-main {
+		margin-left: 220px;
+		margin-top: 48px;
+		padding: 1.5rem 2rem;
+		flex: 1;
+		transition: margin-left 0.2s;
+	}
+</style>