Better error norifications

src/routes/private/events/event/view/+page.svelte

@@ -9,8 +9,9 @@
 	import ParticipantsTable from './components/ParticipantsTable.svelte';
 	import EmailSending from './components/EmailSending.svelte';
 	import EmailResults from './components/EmailResults.svelte';
-	import ErrorMessage from './components/ErrorMessage.svelte';
 	import Statistics from './components/Statistics.svelte';
+	import ToastContainer from '$lib/components/ToastContainer.svelte';
+	import { toast } from '$lib/stores/toast.js';
 
 	let { data } = $props();
 
@@ -49,7 +50,6 @@
 	let sendingEmails = $state(false);
 	let emailProgress = $state({ sent: 0, total: 0 });
 	let emailResults = $state<{success: boolean, results: any[], summary: any} | null>(null);
-	let error = $state('');
 
 	// Get event ID from URL params
 	let eventId = $derived(page.url.searchParams.get('id'));
@@ -74,7 +74,10 @@
 			event = eventData;
 		} catch (err) {
 			console.error('Error loading event:', err);
-			error = 'Failed to load event';
+			toast.add({
+				message: 'Failed to load event',
+				type: 'error'
+			});
 		} finally {
 			loading = false;
 		}
@@ -95,7 +98,10 @@
 			participants = participantsData || [];
 		} catch (err) {
 			console.error('Error loading participants:', err);
-			error = 'Failed to load participants';
+			toast.add({
+				message: 'Failed to load participants',
+				type: 'error'
+			});
 		} finally {
 			participantsLoading = false;
 		}
@@ -107,12 +113,14 @@
 		// Check if user has Google authentication
 		const refreshToken = localStorage.getItem('google_refresh_token');
 		if (!refreshToken) {
-			error = 'Please connect your Google account first to sync participants';
+			toast.add({
+				message: 'Please connect your Google account first to sync participants',
+				type: 'error'
+			});
 			return;
 		}
 
 		syncingParticipants = true;
-		error = '';
 		try {
 			// Fetch sheet data
 			const response = await fetch(`/private/api/google/sheets/${event.sheet_id}/data`, {
@@ -177,7 +185,10 @@
 			await loadParticipants();
 		} catch (err) {
 			console.error('Error syncing participants:', err);
-			error = 'Failed to sync participants';
+			toast.add({
+				message: 'Failed to sync participants',
+				type: 'error'
+			});
 		} finally {
 			syncingParticipants = false;
 		}
@@ -189,20 +200,25 @@
 		// Check if user has Google authentication
 		const refreshToken = localStorage.getItem('google_refresh_token');
 		if (!refreshToken) {
-			error = 'Please connect your Google account first to send emails';
+			toast.add({
+				message: 'Please connect your Google account first to send emails',
+				type: 'error'
+			});
 			return;
 		}
 
 		const uncontactedParticipants = participants.filter(p => !p.email_sent);
 		if (uncontactedParticipants.length === 0) {
-			error = 'No uncontacted participants found';
+			toast.add({
+				message: 'No uncontacted participants found',
+				type: 'warning'
+			});
 			return;
 		}
 
 		sendingEmails = true;
 		emailProgress = { sent: 0, total: uncontactedParticipants.length };
 		emailResults = null;
-		error = '';
 
 		try {
 			// Send all emails in batch
@@ -235,33 +251,40 @@
 				});
 			} else {
 				const errorData = await response.json();
-				error = errorData.error || 'Failed to send emails';
+				toast.add({
+					message: errorData.error || 'Failed to send emails',
+					type: 'error'
+				});
 				console.error('Email sending failed:', errorData);
 			}
 		} catch (err) {
 			console.error('Error sending emails:', err);
-			error = 'Failed to send emails to participants';
+			toast.add({
+				message: 'Failed to send emails to participants',
+				type: 'error'
+			});
 		} finally {
 			sendingEmails = false;
 		}
 	}
 
 	function handleGoogleAuthSuccess() {
-		error = '';
+		// Success handled by toast in the component
 	}
 	
 	function handleGoogleAuthError(errorMsg: string) {
-		error = errorMsg;
+		toast.add({
+			message: errorMsg,
+			type: 'error'
+		});
 	}
 </script>
 
-<!-- Header -->
 <div class="mt-2 mb-4">
 	<h1 class="text-center text-2xl font-bold">Event Overview</h1>
 </div>
 
-<!-- Composable components -->
-<EventInformation {event} {loading} {error} />
+<EventInformation {event} {loading} />
 
 <GoogleAuthentication 
 	{loading} 
@@ -303,7 +326,3 @@ onSyncParticipants={syncParticipants}
 {#if emailResults}
 	<EmailResults {emailResults} />
 {/if}
-
-{#if error}
-	<ErrorMessage {error} />
-{/if}