feat(preferences): implement persistent font size control with database storage

- Add font size preference persistence to user profiles
- Connect FontSizeControl component to appState and database
- Update setTestUser to load full profile data including preferences
- Regenerate database types to include new preferences column
- Add async profile loading with proper type casting

Author: AlexVOiceover

src/lib/components/layouts/Footer.svelte

@@ -18,7 +18,7 @@
 
 	// ========== TESTING ONLY - REMOVE WHEN DONE ==========
 	const getTestUsers = getContext<() => Profile[]>('getTestUsers');
-	const setTestUser = getContext<(userId: string, userName: string) => void>('setTestUser');
+	const setTestUser = getContext<(userId: string, userName: string) => Promise<void>>('setTestUser');
 
 	const sortedTestUsers = $derived(
 		[...(getTestUsers() || [])]
@@ -32,8 +32,8 @@
 	let dropdownExpanded = $state(false);
 	let selectedUserId = $state<string | null>(null);
 
-	function handleUserSelect(userId: string, userName: string) {
-		setTestUser(userId, userName);
+	async function handleUserSelect(userId: string, userName: string) {
+		await setTestUser(userId, userName);
 		selectedUserId = userId;
 		console.log('Test user selected:', userName, userId);
 

src/lib/components/ui/FontSizeControl.svelte

@@ -1,8 +1,21 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+	import type { AppState, Profile } from '$lib/types/appState';
+	import { updateProfile } from '$lib/services/database/profiles';
 	import Tooltip from './Tooltip.svelte';
 
-	// Font size state
+	// Get app state from context
+	const getApp = getContext<() => AppState>('getApp');
+	const setProfile = getContext<(newProfile: Profile) => void>('setProfile');
+	const app = $derived(getApp());
+
+	// Font size state - read from appState preferences or default to medium
 	let fontSize = $state<'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'>('medium');
+
+	// Keep fontSize in sync with appState preferences
+	$effect(() => {
+		fontSize = app.profile.preferences?.fontSize || 'medium';
+	});
 	let showModal = $state(false);
 
 	const fontSizeLabels = {
@@ -13,18 +26,47 @@
 		'extra-large': 'Extra Large'
 	};
 
+	// Helper function to update both local state and appState preferences
+	const updateFontSize = async (newSize: typeof fontSize) => {
+		fontSize = newSize;
+
+		// Update appState preferences immediately for UI responsiveness
+		const updatedProfile = {
+			...app.profile,
+			preferences: {
+				...app.profile.preferences,
+				fontSize: newSize
+			}
+		};
+		setProfile(updatedProfile);
+
+		// Save to database if user is logged in
+		if (app.profile.id) {
+			try {
+				const result = await updateProfile(app.profile.id, {
+					preferences: updatedProfile.preferences
+				});
+				if (result.error) {
+					console.error('Database error saving font size preference:', result.error);
+				}
+			} catch (error) {
+				console.error('Failed to save font size preference:', error);
+			}
+		}
+	};
+
 	const increaseFontSize = () => {
-		if (fontSize === 'extra-small') fontSize = 'small';
-		else if (fontSize === 'small') fontSize = 'medium';
-		else if (fontSize === 'medium') fontSize = 'large';
-		else if (fontSize === 'large') fontSize = 'extra-large';
+		if (fontSize === 'extra-small') updateFontSize('small');
+		else if (fontSize === 'small') updateFontSize('medium');
+		else if (fontSize === 'medium') updateFontSize('large');
+		else if (fontSize === 'large') updateFontSize('extra-large');
 	};
 
 	const decreaseFontSize = () => {
-		if (fontSize === 'extra-large') fontSize = 'large';
-		else if (fontSize === 'large') fontSize = 'medium';
-		else if (fontSize === 'medium') fontSize = 'small';
-		else if (fontSize === 'small') fontSize = 'extra-small';
+		if (fontSize === 'extra-large') updateFontSize('large');
+		else if (fontSize === 'large') updateFontSize('medium');
+		else if (fontSize === 'medium') updateFontSize('small');
+		else if (fontSize === 'small') updateFontSize('extra-small');
 	};
 
 	const toggleModal = () => {