Fixed problems with changing height

.github/copilot-instructions.md

@@ -1,4 +1,7 @@
 GitHub Copilot Instructions for This Repository
+
+If you have any questions, always ask me first.
+
 Use Svelte 5 runes exclusively
 
 Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 

src/routes/api/auth/refresh/+server.ts

@@ -1,30 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { getOAuthClient } from '$lib/google/auth/server.js';
-
-export const POST: RequestHandler = async ({ request }) => {
-	try {
-		const { refreshToken } = await request.json();
-		
-		if (!refreshToken) {
-			return json({ error: 'Refresh token is required' }, { status: 400 });
-		}
-
-	const oauth = getOAuthClient();
-		oauth.setCredentials({ refresh_token: refreshToken });
-
-		const { credentials } = await oauth.refreshAccessToken();
-		
-		if (!credentials.access_token) {
-			return json({ error: 'Failed to refresh token' }, { status: 500 });
-		}
-
-		return json({ 
-			accessToken: credentials.access_token,
-			expiresIn: credentials.expiry_date 
-		});
-	} catch (error) {
-		console.error('Error refreshing access token:', error);
-		return json({ error: 'Failed to refresh access token' }, { status: 500 });
-	}
-};

src/routes/api/sheets/[sheetId]/data/+server.ts

@@ -1,22 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { googleSheetsServer } from '$lib/google/sheets/server';
-
-export const GET: RequestHandler = async ({ params, request }) => {
-	try {
-		const { sheetId } = params;
-		const authHeader = request.headers.get('authorization');
-		
-		if (!authHeader?.startsWith('Bearer ')) {
-			return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
-		}
-
-		const refreshToken = authHeader.slice(7);
-		const sheetData = await googleSheetsServer.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
-
-		return json(sheetData);
-	} catch (error) {
-		console.error('Error fetching spreadsheet data:', error);
-		return json({ error: 'Failed to fetch spreadsheet data' }, { status: 500 });
-	}
-};

src/routes/api/sheets/recent/+server.ts

@@ -1,20 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { googleSheetsServer } from '$lib/google/sheets/server';
-
-export const GET: RequestHandler = async ({ request }) => {
-	try {
-		const authHeader = request.headers.get('authorization');
-		if (!authHeader?.startsWith('Bearer ')) {
-			return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
-		}
-
-		const refreshToken = authHeader.slice(7);
-		const spreadsheets = await googleSheetsServer.getRecentSpreadsheets(refreshToken, 20);
-
-		return json(spreadsheets);
-	} catch (error) {
-		console.error('Error fetching recent spreadsheets:', error);
-		return json({ error: 'Failed to fetch spreadsheets' }, { status: 500 });
-	}
-};

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

@@ -197,7 +197,7 @@
 
 		try {
 			// Send all emails in batch
-			const response = await fetch('/private/api/gmail', {
+			const response = await fetch('/private/api/google/gmail', {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'

src/routes/private/scanner/+page.svelte

@@ -7,21 +7,21 @@
 	import { ScanState, defaultTicketData } from '$lib/types/types';
 
 	let { data } = $props();
-	let scanned_id = $state<string>("");
+	let scanned_id = $state<string>('');
 	let ticket_data = $state<TicketData>(defaultTicketData);
 	let scan_state = $state<ScanState>(ScanState.scanning);
-	
+
 	// Events related state
 	interface Event {
 		id: string;
 		name: string;
 		date: string;
 	}
-	
+
 	let events = $state<Event[]>([]);
-	let selectedEventId = $state<string>("");
+	let selectedEventId = $state<string>('');
 	let isLoadingEvents = $state(true);
-	let eventsError = $state("");
+	let eventsError = $state('');
 
 	onMount(async () => {
 		await loadEvents();
@@ -30,7 +30,7 @@
 	async function loadEvents() {
 		isLoadingEvents = true;
 		eventsError = '';
-		
+
 		try {
 			const { data: eventsData, error } = await data.supabase
 				.from('events')
@@ -39,7 +39,7 @@
 
 			if (error) throw error;
 			events = eventsData || [];
-			
+
 			// If there are events, select the first one by default
 			if (events.length > 0) {
 				selectedEventId = events[0].id;
@@ -54,20 +54,20 @@
 
 	// Process a scanned QR code
 	$effect(() => {
-		if (scanned_id === "") return;
+		if (scanned_id === '') return;
 		scan_state = ScanState.scanning;
 
-		console.log("Scanned ID:", scanned_id);
+		console.log('Scanned ID:', scanned_id);
 
 		data.supabase
 			.from('participants')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
-			.then(response => {
+			.then((response) => {
 				if (response.data && response.data.length > 0) {
 					const participant = response.data[0];
 					ticket_data = participant;
-					
+
 					// Check if the participant belongs to the selected event
 					if (selectedEventId && participant.event.id !== selectedEventId) {
 						scan_state = ScanState.wrong_event;
@@ -81,73 +81,52 @@
 					ticket_data = defaultTicketData;
 					scan_state = ScanState.scan_failed;
 				}
-				
+
 				// Reset the scanned_id after 3 seconds to allow for a new scan
 				setTimeout(() => {
-					scanned_id = "";
+					scanned_id = '';
 				}, 3000);
 			});
 	});
 </script>
 
-<div class="mx-auto p-4">
-	<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
+<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>
 
-	<!-- Event Selector -->
-	<div class="rounded-lg border border-gray-300 p-4 mb-4">
-		<h2 class="text-lg font-semibold mb-3">Select Event</h2>
-		{#if isLoadingEvents}
-			<div class="flex items-center justify-center h-10">
-				<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-			</div>
-		{:else if eventsError}
-			<div class="text-red-600 text-center py-2">
-				{eventsError}
-				<button 
-					onclick={loadEvents}
-					class="ml-2 text-blue-600 underline"
-				>
-					Try again
-				</button>
-			</div>
-		{:else if events.length === 0}
-			<p class="text-gray-500 text-center py-2">No events found</p>
-		{:else}
-			<select 
-				bind:value={selectedEventId}
-				class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
-			>
-				{#each events as event}
-					<option value={event.id}>
-						{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
-					</option>
-				{/each}
-			</select>
-		{/if}
-	</div>
-
-	<!-- Scanner Section -->
-	<div class="mb-4">
-		<QRScanner bind:message={scanned_id} />
-	</div>
-
-	<!-- Ticket Display Section -->
-	<h2 class="text-lg font-semibold mb-4">Ticket Information</h2>
-	<TicketDisplay {ticket_data} {scan_state} />
-	
-	<!-- Reset button -->
-	{#if scan_state !== ScanState.scanning}
-		<div class="flex justify-center mt-6 mb-4">
-			<button 
-				onclick={() => {
-					scanned_id = "";
-					scan_state = ScanState.scanning;
-				}}
-				class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition"
-				aria-label="Reset scanner"
-			>
-				Reset Scanner
-			</button>
+<!-- Event Selector -->
+<div class="mb-4 rounded-lg border border-gray-300 p-4">
+	<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
+	{#if isLoadingEvents}
+		<div class="flex h-10 items-center justify-center">
+			<div
+				class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
+			></div>
 		</div>
+	{:else if eventsError}
+		<div class="py-2 text-center text-red-600">
+			{eventsError}
+			<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
+		</div>
+	{:else if events.length === 0}
+		<p class="py-2 text-center text-gray-500">No events found</p>
+	{:else}
+		<select
+			bind:value={selectedEventId}
+			class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+		>
+			{#each events as event}
+				<option value={event.id}>
+					{event.name} ({new Date(event.date).toLocaleDateString('en-GB')})
+				</option>
+			{/each}
+		</select>
 	{/if}
 </div>
+
+<!-- Scanner Section -->
+<div class="mb-4">
+	<QRScanner bind:message={scanned_id} />
+</div>
+
+<!-- Ticket Display Section -->
+<h2 class="mb-2 text-lg font-semibold">Ticket Information</h2>
+<TicketDisplay {ticket_data} {scan_state} />

src/routes/private/scanner/TicketDisplay.svelte

@@ -15,65 +15,73 @@
 	}
 </script>
 
-<div class="border border-gray-300 rounded-lg overflow-hidden">
-	{#if scan_state === ScanState.scanning}
-		<div class="bg-gray-50 p-4 flex items-center justify-center gap-3">
-			<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-			<p class="text-gray-700">Waiting for QR code...</p>
-		</div>
-	{:else if scan_state === ScanState.scan_failed}
-		<div class="bg-red-50 p-4">
-			<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-				</svg>
-				<h3 class="font-semibold text-red-800">Invalid Code</h3>
+<div class="border border-gray-300 rounded-lg overflow-hidden h-[200px]">
+	<div class="h-full flex flex-col">
+		{#if scan_state === ScanState.scanning}
+			<div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
+				<div class="animate-spin h-8 w-8 border-2 border-gray-500 rounded-full border-t-transparent mb-3"></div>
+				<p class="text-gray-700 text-center">Waiting for QR code...</p>
 			</div>
-			<p class="text-red-700">This QR code is not a valid ticket or doesn't exist in our system.</p>
-		</div>
-	{:else if scan_state === ScanState.wrong_event}
-		<div class="bg-amber-50 p-4">
-			<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-				</svg>
-				<h3 class="font-semibold text-amber-800">Wrong Event</h3>
+		{:else if scan_state === ScanState.scan_failed}
+			<div class="bg-red-50 p-4 flex-1 flex flex-col">
+				<div class="flex items-center gap-2 mb-3">
+					<svg class="h-6 w-6 text-red-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+					</svg>
+					<h3 class="font-semibold text-red-800">Invalid Code</h3>
+				</div>
+				<p class="text-red-700 flex-grow">This QR code is not a valid ticket or doesn't exist in our system.</p>
+				<div class="mt-auto pt-2 opacity-0">
+					<!-- Spacer to maintain consistent height -->
+					<p class="font-medium invisible">Placeholder</p>
+					<p class="invisible">Placeholder</p>
+				</div>
 			</div>
-			<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
-			<div class="bg-white rounded p-3 border border-amber-200">
-				<p class="font-medium">{ticket_data.event.name}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+		{:else if scan_state === ScanState.wrong_event}
+			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
+				<div class="flex items-center gap-2 mb-2">
+					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+					</svg>
+					<h3 class="font-semibold text-amber-800">Wrong Event</h3>
+				</div>
+				<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
+				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
+				</div>
 			</div>
-		</div>
-	{:else if scan_state === ScanState.already_scanned}
-		<div class="bg-amber-50 p-4">
-			<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-				</svg>
-				<h3 class="font-semibold text-amber-800">Already Scanned</h3>
+		{:else if scan_state === ScanState.already_scanned}
+			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
+				<div class="flex items-center gap-2 mb-2">
+					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+					</svg>
+					<h3 class="font-semibold text-amber-800">Already Scanned</h3>
+				</div>
+				<p class="text-amber-700">
+					This ticket was already scanned by: <br/> {ticket_data.scanned_by?.display_name || 'someone'} 
+					{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
+				</p>
+				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
+				</div>
 			</div>
-			<p class="text-amber-700 mb-1">
-				This ticket was already scanned by {ticket_data.scanned_by?.display_name || 'someone'} 
-				{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
-			</p>
-			<div class="bg-white rounded p-3 border border-amber-200 mt-2">
-				<p class="font-medium">{ticket_data.event.name}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+		{:else if scan_state === ScanState.scan_successful}
+			<div class="bg-green-50 p-4 flex-1 flex flex-col">
+				<div class="flex items-center gap-2 mb-2">
+					<svg class="h-6 w-6 text-green-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+					</svg>
+					<h3 class="font-semibold text-green-800">Valid Ticket</h3>
+				</div>
+				<p class="text-green-700">Ticket successfully validated.</p>
+				<div class="bg-white rounded p-3 border border-green-200 mt-auto">
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
+				</div>
 			</div>
-		</div>
-	{:else if scan_state === ScanState.scan_successful}
-		<div class="bg-green-50 p-4">
-			<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-				</svg>
-				<h3 class="font-semibold text-green-800">Valid Ticket</h3>
-			</div>
-			<div class="bg-white rounded p-3 border border-green-200">
-				<p class="font-medium">{ticket_data.event.name}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
-			</div>
-		</div>
-	{/if}
+		{/if}
+	</div>
 </div>