add theme patterns

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

@@ -9,9 +9,26 @@
 	import { Sidebar, TopNav, Footer, Chat } from '$lib/components';
 	import { chatIcon } from '$lib/components/icons';
 	import { recordShortcut } from '$lib/shortcut';
+	import { themeShades } from '$lib/theme';
+	import '$lib/theme-patterns.css';
+	import { themeDraft } from '$lib/stores/theme.svelte';
 	import type { Session } from '$lib/types';
 
 	let { children, data } = $props();
+
+	// Background pattern ('' = none) tinted with the user's colour. A live
+	// draft (clicked in the picker, not yet saved) previews immediately;
+	// otherwise the saved value from the session applies.
+	let bgPattern = $derived(themeDraft.pattern ?? (data.session?.memberPattern || ''));
+	let bgColor = $derived(themeDraft.color ?? (data.session?.memberColor || '#6366f1'));
+	let bgOpacity = $derived(
+		themeDraft.opacity ??
+			(Number(data.session?.memberThemeOpacity) > 0 ? data.session?.memberThemeOpacity : 1)
+	);
+	let bgShades = $derived(themeShades(bgColor, Number(bgOpacity) || 1));
+	// Pattern size in vw units ('' = untouched → pattern class default).
+	let bgSize = $derived(themeDraft.size ?? (data.session?.memberThemeSize || ''));
+	let bgSizeVw = $derived(Number(bgSize) > 0 ? bgSize : '');
 	let session = $state<Session | null>(data.session);
 	let isParent = $state(data.isParent);
 	let role = $state(data.role);
@@ -177,7 +194,10 @@
 </script>
 
 <div class="layout-stage" class:chat-open={chatStore.open}>
-	<div class="app-shell">
+	<div
+		class="app-shell {bgPattern ? `pattern-${bgPattern}` : ''}"
+		style={`${bgSizeVw ? `--s:calc(${bgSizeVw} * 1vw);` : ''}--c1:${bgShades.c1};--c2:${bgShades.c2};--c3:${bgShades.c3};--c4:${bgShades.c4}`}
+	>
 		<Sidebar {famName} session={data.session} {isParent} {role} />
 		<TopNav
 			role={data.session ? role : ''}